@vaadin/app-layout 25.2.0-alpha1 → 25.2.0-alpha10

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 (8) hide show
  1. package/custom-elements.json +27 -1
  2. package/package.json +10 -10
  3. package/src/styles/vaadin-app-layout-base-styles.js +17 -33
  4. package/src/vaadin-app-layout-mixin.js +67 -86
  5. package/src/vaadin-app-layout.d.ts +3 -2
  6. package/src/vaadin-app-layout.js +4 -3
  7. package/web-types.json +13 -48
  8. package/web-types.lit.json +10 -17
package/custom-elements.json CHANGED
@@ -179,7 +179,7 @@
179
179
  "declarations": [
180
180
  {
181
181
  "kind": "class",
182
- "description": "`<vaadin-app-layout>` is a Web Component providing a quick and easy way to get a common application layout structure done.\n\n```html\n<vaadin-app-layout primary-section=\"navbar|drawer\">\n <vaadin-drawer-toggle slot=\"navbar [touch-optimized]\"></vaadin-drawer-toggle>\n <h3 slot=\"navbar [touch-optimized]\">Company Name</h3>\n <vaadin-tabs orientation=\"vertical\" slot=\"drawer\">\n <vaadin-tab>Menu item 1</vaadin-tab>\n </vaadin-tabs>\n <!-- Everything else will be the page content -->\n <div>\n <h3>Page title</h3>\n <p>Page content</p>\n </div>\n</vaadin-app-layout>\n```\n\nFor best results, the component should be added to the root level of your application (i.e., as a direct child of `<body>`).\n\nThe page should include a viewport meta tag which contains `viewport-fit=cover`, like the following:\n```html\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1, viewport-fit=cover\">\n```\n\nThis causes the viewport to be scaled to fill the device display.\nTo ensure that important content is displayed, use the provided css variables:\n\n- `--safe-area-inset-top`\n- `--safe-area-inset-right`\n- `--safe-area-inset-bottom`\n- `--safe-area-inset-left`\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n-----------------|---------------------------------------------------------|\n`backdrop` | Backdrop covering the layout when drawer is open as an overlay\n`navbar` | Container for the navigation bar\n`navbar-top` | Container for the top navigation bar\n`navbar-bottom` | Container for the bottom navigation bar\n`drawer` | Container for the drawer area\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n---------------|-------------\n`has-drawer` | Set when the element has light DOM content in the drawer slot.\n`has-navbar` | Set when the element has light DOM content in the navbar slot.\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:----------------------------------------------------|\n| `--vaadin-app-layout-drawer-background` |\n| `--vaadin-app-layout-drawer-width` |\n| `--vaadin-app-layout-navbar-background` |\n| `--vaadin-app-layout-navbar-gap` |\n| `--vaadin-app-layout-navbar-padding-bottom` |\n| `--vaadin-app-layout-navbar-padding-inline-end` |\n| `--vaadin-app-layout-navbar-padding-inline-start` |\n| `--vaadin-app-layout-navbar-padding-top` |\n| `--vaadin-app-layout-transition-duration` |\n| `--vaadin-overlay-backdrop-background` |\n| `--vaadin-overlay-shadow` |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.\n\n### Component's slots\n\nThe following slots are available to be set\n\nSlot name | Description\n-------------------|---------------------------------------------------|\nno name | Default container for the page content\n`navbar ` | Container for the top navbar area\n`drawer` | Container for an application menu\n`touch-optimized` | Container for the bottom navbar area (only visible for mobile devices)\n\n#### Touch optimized\n\nApp Layout has a pseudo-slot `touch-optimized` in order to give more control of the presentation of\nelements with `slot[navbar]`. Internally, when the user is interacting with App Layout from a\ntouchscreen device, the component will search for elements with `slot[navbar touch-optimized]` and move\nthem to the bottom of the page.\n\n### Navigation\n\nAs the drawer opens as an overlay in small devices, it makes sense to close it once a navigation happens.\nIf you are using Vaadin Router, this will happen automatically unless you change the `closeDrawerOn` event name.\n\nIn order to do so, there are two options:\n- If the `vaadin-app-layout` instance is available, then `drawerOpened` can be set to `false`\n- If not, a custom event `close-overlay-drawer` can be dispatched either by calling\n `window.dispatchEvent(new CustomEvent('close-overlay-drawer'))` or by calling\n `AppLayout.dispatchCloseOverlayDrawerEvent()`\n\n### Scrolling areas\n\nBy default, the component will act with the \"body scrolling\", so on mobile (iOS Safari and Android Chrome),\nthe toolbars will collapse when a scroll happens.\n\nTo use the \"content scrolling\", in case of the content of the page relies on a pre-defined height (for instance,\nit has a `height:100%`), then the developer can set `height: 100%` to both `html` and `body`.\nThat will make the `[content]` element of app layout scrollable.\nOn this case, the toolbars on mobile device won't collapse.",
182
+ "description": "`<vaadin-app-layout>` is a Web Component providing a quick and easy way to get a common application layout structure done.\n\n```html\n<vaadin-app-layout primary-section=\"navbar|drawer\">\n <vaadin-drawer-toggle slot=\"navbar [touch-optimized]\"></vaadin-drawer-toggle>\n <h3 slot=\"navbar [touch-optimized]\">Company Name</h3>\n <vaadin-tabs orientation=\"vertical\" slot=\"drawer\">\n <vaadin-tab>Menu item 1</vaadin-tab>\n </vaadin-tabs>\n <!-- Everything else will be the page content -->\n <div>\n <h3>Page title</h3>\n <p>Page content</p>\n </div>\n</vaadin-app-layout>\n```\n\nFor best results, the component should be added to the root level of your application (i.e., as a direct child of `<body>`).\n\nThe page should include a viewport meta tag which contains `viewport-fit=cover`, like the following:\n```html\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1, viewport-fit=cover\">\n```\n\nThis causes the viewport to be scaled to fill the device display.\nTo ensure that important content is displayed, use the provided css variables:\n\n- `--safe-area-inset-top`\n- `--safe-area-inset-right`\n- `--safe-area-inset-bottom`\n- `--safe-area-inset-left`\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n-----------------|---------------------------------------------------------|\n`backdrop` | Backdrop covering the layout when drawer is open as an overlay\n`navbar` | Container for the navigation bar\n`navbar-top` | Container for the top navigation bar\n`navbar-bottom` | Container for the bottom navigation bar\n`drawer` | Container for the drawer area\n`content` | Container for the content area\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n---------------|-------------\n`has-drawer` | Set when the element has light DOM content in the drawer slot.\n`has-navbar` | Set when the element has light DOM content in the navbar slot.\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:----------------------------------------------------|\n| `--vaadin-app-layout-drawer-background` |\n| `--vaadin-app-layout-drawer-width` |\n| `--vaadin-app-layout-navbar-background` |\n| `--vaadin-app-layout-navbar-gap` |\n| `--vaadin-app-layout-navbar-padding-bottom` |\n| `--vaadin-app-layout-navbar-padding-inline-end` |\n| `--vaadin-app-layout-navbar-padding-inline-start` |\n| `--vaadin-app-layout-navbar-padding-top` |\n| `--vaadin-app-layout-transition-duration` |\n| `--vaadin-overlay-backdrop-background` |\n| `--vaadin-overlay-shadow` |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.\n\n### Component's slots\n\nThe following slots are available to be set\n\nSlot name | Description\n-------------------|---------------------------------------------------|\nno name | Default container for the page content\n`navbar ` | Container for the top navbar area\n`drawer` | Container for an application menu\n`touch-optimized` | Container for the bottom navbar area (only visible for mobile devices)\n\n#### Touch optimized\n\nApp Layout has a pseudo-slot `touch-optimized` in order to give more control of the presentation of\nelements with `slot[navbar]`. Internally, when the user is interacting with App Layout from a\ntouchscreen device, the component will search for elements with `slot[navbar touch-optimized]` and move\nthem to the bottom of the page.\n\n### Navigation\n\nAs the drawer opens as an overlay in small devices, it makes sense to close it once a navigation happens.\nIf you are using Vaadin Router, this will happen automatically unless you change the `closeDrawerOn` event name.\n\nIn order to do so, there are two options:\n- If the `vaadin-app-layout` instance is available, then `drawerOpened` can be set to `false`\n- If not, a custom event `close-overlay-drawer` can be dispatched either by calling\n `window.dispatchEvent(new CustomEvent('close-overlay-drawer'))` or by calling\n `AppLayout.dispatchCloseOverlayDrawerEvent()`\n\n### Scrolling areas\n\nBy default, the component will act with the \"body scrolling\", so on mobile (iOS Safari and Android Chrome),\nthe toolbars will collapse when a scroll happens.\n\nTo use the \"content scrolling\", in case of the content of the page relies on a pre-defined height (for instance,\nit has a `height:100%`), then the developer can set `height: 100%` to both `html` and `body`.\nThat makes the content part of App Layout scrollable.\nIn that case, the toolbars on mobile device won't collapse.",
183
183
  "name": "AppLayout",
184
184
  "members": [
185
185
  {
@@ -407,6 +407,20 @@
407
407
  "text": "string"
408
408
  },
409
409
  "attribute": "aria-label"
410
+ },
411
+ {
412
+ "kind": "field",
413
+ "name": "disabled",
414
+ "privacy": "public",
415
+ "type": {
416
+ "text": "boolean"
417
+ },
418
+ "description": "If true, the user cannot interact with this element.",
419
+ "attribute": "disabled",
420
+ "inheritedFrom": {
421
+ "name": "DisabledMixin",
422
+ "package": "@vaadin/a11y-base/src/disabled-mixin.js"
423
+ }
410
424
  }
411
425
  ],
412
426
  "attributes": [
@@ -416,6 +430,18 @@
416
430
  "text": "string"
417
431
  },
418
432
  "fieldName": "ariaLabel"
433
+ },
434
+ {
435
+ "name": "disabled",
436
+ "type": {
437
+ "text": "boolean"
438
+ },
439
+ "description": "If true, the user cannot interact with this element.",
440
+ "fieldName": "disabled",
441
+ "inheritedFrom": {
442
+ "name": "DisabledMixin",
443
+ "package": "@vaadin/a11y-base/src/disabled-mixin.js"
444
+ }
419
445
  }
420
446
  ],
421
447
  "mixins": [
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vaadin/app-layout",
3
- "version": "25.2.0-alpha1",
3
+ "version": "25.2.0-alpha10",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -35,18 +35,18 @@
35
35
  ],
36
36
  "dependencies": {
37
37
  "@open-wc/dedupe-mixin": "^1.3.0",
38
- "@vaadin/a11y-base": "25.2.0-alpha1",
39
- "@vaadin/button": "25.2.0-alpha1",
40
- "@vaadin/component-base": "25.2.0-alpha1",
41
- "@vaadin/vaadin-themable-mixin": "25.2.0-alpha1",
38
+ "@vaadin/a11y-base": "25.2.0-alpha10",
39
+ "@vaadin/button": "25.2.0-alpha10",
40
+ "@vaadin/component-base": "25.2.0-alpha10",
41
+ "@vaadin/vaadin-themable-mixin": "25.2.0-alpha10",
42
42
  "lit": "^3.0.0"
43
43
  },
44
44
  "devDependencies": {
45
- "@vaadin/aura": "25.2.0-alpha1",
46
- "@vaadin/chai-plugins": "25.2.0-alpha1",
47
- "@vaadin/test-runner-commands": "25.2.0-alpha1",
45
+ "@vaadin/aura": "25.2.0-alpha10",
46
+ "@vaadin/chai-plugins": "25.2.0-alpha10",
47
+ "@vaadin/test-runner-commands": "25.2.0-alpha10",
48
48
  "@vaadin/testing-helpers": "^2.0.0",
49
- "@vaadin/vaadin-lumo-styles": "25.2.0-alpha1",
49
+ "@vaadin/vaadin-lumo-styles": "25.2.0-alpha10",
50
50
  "sinon": "^21.0.2"
51
51
  },
52
52
  "customElements": "custom-elements.json",
@@ -54,5 +54,5 @@
54
54
  "web-types.json",
55
55
  "web-types.lit.json"
56
56
  ],
57
- "gitHead": "866f813f89655a351cbd25328eba1fcb317e267d"
57
+ "gitHead": "1303b6a3eeecb44a9d26f2b53cb56d9e906febdf"
58
58
  }
package/src/styles/vaadin-app-layout-base-styles.js CHANGED
@@ -17,18 +17,10 @@ export const appLayoutStyles = css`
17
17
  --vaadin-app-layout-touch-optimized: false;
18
18
  --vaadin-app-layout-navbar-offset-top: var(--_vaadin-app-layout-navbar-offset-size);
19
19
  --vaadin-app-layout-navbar-offset-bottom: var(--_vaadin-app-layout-navbar-offset-size-bottom);
20
- padding-top: max(var(--vaadin-app-layout-navbar-offset-top), var(--safe-area-inset-top));
21
- padding-bottom: max(var(--vaadin-app-layout-navbar-offset-bottom), var(--safe-area-inset-bottom));
22
- }
23
-
24
- :host(:dir(ltr)) [content] {
25
- padding-left: max(var(--vaadin-app-layout-drawer-offset-left), var(--safe-area-inset-left));
26
- padding-right: var(--safe-area-inset-right);
27
- }
28
-
29
- :host(:dir(rtl)) [content] {
30
- padding-left: var(--safe-area-inset-left);
31
- padding-right: max(var(--vaadin-app-layout-drawer-offset-left), var(--safe-area-inset-right));
20
+ --vaadin-app-layout-drawer-offset-left: 0px;
21
+ padding-top: var(--vaadin-app-layout-navbar-offset-top);
22
+ padding-bottom: var(--vaadin-app-layout-navbar-offset-bottom);
23
+ padding-inline-start: var(--vaadin-app-layout-drawer-offset-left);
32
24
  }
33
25
 
34
26
  :host([hidden]),
@@ -50,13 +42,21 @@ export const appLayoutStyles = css`
50
42
  --vaadin-app-layout-drawer-offset-left: 0px;
51
43
  }
52
44
 
53
- :host(:not([no-scroll])) [content] {
45
+ :host(:not([no-scroll])) [part~='content'] {
54
46
  overflow: auto;
55
47
  }
56
48
 
57
- [content] {
49
+ [part~='content'] {
58
50
  height: 100%;
59
51
  transition: inherit;
52
+ box-sizing: border-box;
53
+ padding-top: max(0px, var(--safe-area-inset-top) - var(--vaadin-app-layout-navbar-offset-top));
54
+ padding-bottom: max(0px, var(--safe-area-inset-bottom) - var(--vaadin-app-layout-navbar-offset-bottom));
55
+ padding-inline: var(--safe-area-inset-inline-start) var(--safe-area-inset-inline-end);
56
+ }
57
+
58
+ :host([drawer-opened]:not([overlay])) [part~='content'] {
59
+ padding-inline-start: 0;
60
60
  }
61
61
 
62
62
  @media (pointer: coarse) and (max-width: 800px) and (min-height: 500px) {
@@ -121,6 +121,7 @@ export const appLayoutStyles = css`
121
121
  width: var(--_vaadin-app-layout-drawer-width);
122
122
  box-sizing: border-box;
123
123
  padding-block: var(--safe-area-inset-top) var(--safe-area-inset-bottom);
124
+ padding-inline-start: var(--safe-area-inset-inline-start);
124
125
  outline: none;
125
126
  /* The drawer should be inaccessible by the tabbing navigation when it is closed. */
126
127
  visibility: hidden;
@@ -129,29 +130,11 @@ export const appLayoutStyles = css`
129
130
  background: var(--vaadin-app-layout-drawer-background, transparent);
130
131
  }
131
132
 
132
- [part='drawer']:dir(ltr) {
133
- padding-left: var(--safe-area-inset-left);
134
- }
135
-
136
- [part='drawer']:dir(rtl) {
137
- padding-right: var(--safe-area-inset-right);
138
- }
139
-
140
133
  :host([has-navbar]:not([overlay])) [part='drawer'],
141
- :host([has-navbar]) [content] {
134
+ :host([has-navbar]) [part='content'] {
142
135
  --safe-area-inset-top: 0px;
143
136
  }
144
137
 
145
- :host([has-drawer]:not([overlay])[drawer-opened]) [content] {
146
- &:dir(ltr) {
147
- --safe-area-inset-left: 0px;
148
- }
149
-
150
- &:dir(rtl) {
151
- --safe-area-inset-right: 0px;
152
- }
153
- }
154
-
155
138
  :host([drawer-opened]) [part='drawer'] {
156
139
  /* The drawer should be accessible by the tabbing navigation when it is opened. */
157
140
  visibility: visible;
@@ -209,6 +192,7 @@ export const appLayoutStyles = css`
209
192
  }
210
193
 
211
194
  /* If a vaadin-scroller is used in the drawer, allow it to take all remaining space and contain scrolling */
195
+
212
196
  [part='drawer'] ::slotted(vaadin-scroller) {
213
197
  flex: 1;
214
198
  overscroll-behavior: contain;
package/src/vaadin-app-layout-mixin.js CHANGED
@@ -120,7 +120,6 @@ export const AppLayoutMixin = (superclass) =>
120
120
  constructor() {
121
121
  super();
122
122
  // TODO(jouni): might want to debounce
123
- this.__boundResizeListener = this._resize.bind(this);
124
123
  this.__drawerToggleClickListener = this._drawerToggleClick.bind(this);
125
124
  this.__onDrawerKeyDown = this.__onDrawerKeyDown.bind(this);
126
125
  this.__closeOverlayDrawerListener = this.__closeOverlayDrawer.bind(this);
@@ -138,34 +137,13 @@ export const AppLayoutMixin = (superclass) =>
138
137
  connectedCallback() {
139
138
  super.connectedCallback();
140
139
 
141
- this._blockAnimationUntilAfterNextRender();
140
+ this.__resizeObserver = new ResizeObserver((entries) => this.__onResize(entries));
141
+ this.__resizeObserver.observe(this);
142
+ this.__resizeObserver.observe(this.$.drawer);
143
+ this.__resizeObserver.observe(this.$.navbarTop);
144
+ this.__resizeObserver.observe(this.$.navbarBottom);
142
145
 
143
- window.addEventListener('resize', this.__boundResizeListener);
144
146
  this.addEventListener('drawer-toggle-click', this.__drawerToggleClickListener);
145
-
146
- requestAnimationFrame(() => {
147
- this._updateOffsetSize();
148
- });
149
-
150
- this._updateTouchOptimizedMode();
151
- this._updateDrawerSize();
152
- this._updateOverlayMode();
153
-
154
- this._navbarSizeObserver = new ResizeObserver(() => {
155
- requestAnimationFrame(() => {
156
- // Prevent updating offset size multiple times
157
- // during the drawer open / close transition.
158
- if (this.__isDrawerAnimating) {
159
- this.__updateOffsetSizePending = true;
160
- } else {
161
- this._updateOffsetSize();
162
- }
163
- });
164
- });
165
- this._navbarSizeObserver.observe(this.$.navbarTop);
166
- this._navbarSizeObserver.observe(this.$.navbarBottom);
167
- this._navbarSizeObserver.observe(this.$.drawer);
168
-
169
147
  window.addEventListener('close-overlay-drawer', this.__closeOverlayDrawerListener);
170
148
  window.addEventListener('keydown', this.__onDrawerKeyDown);
171
149
  }
@@ -181,25 +159,15 @@ export const AppLayoutMixin = (superclass) =>
181
159
  });
182
160
 
183
161
  this.$.drawer.addEventListener('transitionend', () => {
184
- // Update offset size after drawer animation.
185
- if (this.__updateOffsetSizePending) {
186
- this.__updateOffsetSizePending = false;
187
- this._updateOffsetSize();
188
- }
189
-
190
- // Delay resetting the flag until animation frame
191
- // to avoid updating offset size again on resize.
192
- requestAnimationFrame(() => {
193
- this.__isDrawerAnimating = false;
194
- });
162
+ this.__isDrawerAnimating = false;
163
+ this.__scheduleResize(this.$.drawer);
195
164
  });
196
165
  }
197
166
 
198
167
  /** @protected */
199
168
  disconnectedCallback() {
200
169
  super.disconnectedCallback();
201
-
202
- window.removeEventListener('resize', this.__boundResizeListener);
170
+ this.__resizeObserver.disconnect();
203
171
  this.removeEventListener('drawer-toggle-click', this.__drawerToggleClickListener);
204
172
  window.removeEventListener('close-overlay-drawer', this.__drawerToggleClickListener);
205
173
  window.removeEventListener('keydown', this.__onDrawerKeyDown);
@@ -207,16 +175,54 @@ export const AppLayoutMixin = (superclass) =>
207
175
 
208
176
  /** @private */
209
177
  __onNavbarSlotChange() {
210
- this._updateTouchOptimizedMode();
178
+ this.__scheduleResize(this.$.navbarTop);
179
+ this.__scheduleResize(this.$.navbarBottom);
211
180
  this.toggleAttribute('has-navbar', !!this.querySelector('[slot="navbar"]'));
212
181
  }
213
182
 
214
183
  /** @private */
215
184
  __onDrawerSlotChange() {
216
- this._updateDrawerSize();
185
+ this.__scheduleResize(this.$.drawer);
186
+ this.__updateDrawerSize();
217
187
  this.toggleAttribute('has-drawer', !!this.querySelector('[slot="drawer"]'));
218
188
  }
219
189
 
190
+ /** @private */
191
+ __onResize(entries) {
192
+ cancelAnimationFrame(this.__resizeRaf);
193
+
194
+ const isHostResized = entries.some(({ target }) => target === this);
195
+ const isNavbarResized = entries.some(({ target }) => [this.$.navbarTop, this.$.navbarBottom].includes(target));
196
+
197
+ const overlayMode = this._getCustomPropertyValue('--vaadin-app-layout-drawer-overlay') === 'true';
198
+ const touchOptimized = this._getCustomPropertyValue('--vaadin-app-layout-touch-optimized') === 'true';
199
+
200
+ const drawerRect = this.$.drawer.getBoundingClientRect();
201
+ const navbarTopRect = this.$.navbarTop.getBoundingClientRect();
202
+ const navbarBottomRect = this.$.navbarBottom.getBoundingClientRect();
203
+
204
+ const isDrawerAnimating = this.__isDrawerAnimating;
205
+
206
+ this.__resizeRaf = requestAnimationFrame(() => {
207
+ if (isHostResized) {
208
+ this._blockAnimationUntilAfterNextRender();
209
+ this.__setOverlayMode(overlayMode);
210
+ }
211
+
212
+ if (isHostResized || isNavbarResized) {
213
+ this.__setTouchOptimized(touchOptimized);
214
+ }
215
+
216
+ if (!isDrawerAnimating) {
217
+ this.__setOffsetSize({
218
+ drawerRect,
219
+ navbarTopRect,
220
+ navbarBottomRect,
221
+ });
222
+ }
223
+ });
224
+ }
225
+
220
226
  /**
221
227
  * A callback for the `primarySection` property observer.
222
228
  *
@@ -306,48 +312,27 @@ export const AppLayoutMixin = (superclass) =>
306
312
  }
307
313
  }
308
314
 
309
- /** @protected */
310
- _updateDrawerSize() {
315
+ /** @private */
316
+ __updateDrawerSize() {
311
317
  const childCount = this.querySelectorAll('[slot=drawer]').length;
312
- const drawer = this.$.drawer;
313
-
314
318
  if (childCount === 0) {
315
- drawer.setAttribute('hidden', '');
319
+ this.$.drawer.setAttribute('hidden', '');
316
320
  this.style.setProperty('--_vaadin-app-layout-drawer-width', 0);
317
321
  } else {
318
- drawer.removeAttribute('hidden');
322
+ this.$.drawer.removeAttribute('hidden');
319
323
  this.style.removeProperty('--_vaadin-app-layout-drawer-width');
320
324
  }
321
- this._updateOffsetSize();
322
325
  }
323
326
 
324
327
  /** @private */
325
- _resize() {
326
- this._blockAnimationUntilAfterNextRender();
327
- this._updateTouchOptimizedMode();
328
- this._updateOverlayMode();
329
- }
330
-
331
- /** @protected */
332
- _updateOffsetSize() {
333
- const navbar = this.$.navbarTop;
334
- const navbarRect = navbar.getBoundingClientRect();
335
-
336
- const navbarBottom = this.$.navbarBottom;
337
- const navbarBottomRect = navbarBottom.getBoundingClientRect();
338
-
339
- const drawer = this.$.drawer;
340
- const drawerRect = drawer.getBoundingClientRect();
341
-
342
- this.style.setProperty('--_vaadin-app-layout-navbar-offset-size', `${navbarRect.height}px`);
343
- this.style.setProperty('--_vaadin-app-layout-navbar-offset-size-bottom', `${navbarBottomRect.height}px`);
328
+ __setOffsetSize({ drawerRect, navbarTopRect, navbarBottomRect }) {
344
329
  this.style.setProperty('--_vaadin-app-layout-drawer-offset-size', `${drawerRect.width}px`);
330
+ this.style.setProperty('--_vaadin-app-layout-navbar-offset-size', `${navbarTopRect.height}px`);
331
+ this.style.setProperty('--_vaadin-app-layout-navbar-offset-size-bottom', `${navbarBottomRect.height}px`);
345
332
  }
346
333
 
347
- /** @protected */
348
- _updateOverlayMode() {
349
- const overlay = this._getCustomPropertyValue('--vaadin-app-layout-drawer-overlay') === 'true';
350
-
334
+ /** @private */
335
+ __setOverlayMode(overlay) {
351
336
  if (!this.overlay && overlay) {
352
337
  // Changed from not overlay to overlay
353
338
  this._drawerStateSaved = this.drawerOpened;
@@ -487,12 +472,9 @@ export const AppLayoutMixin = (superclass) =>
487
472
  return (customPropertyValue || '').trim().toLowerCase();
488
473
  }
489
474
 
490
- /** @protected */
491
- _updateTouchOptimizedMode() {
492
- const touchOptimized = this._getCustomPropertyValue('--vaadin-app-layout-touch-optimized') === 'true';
493
-
475
+ /** @private */
476
+ __setTouchOptimized(touchOptimized) {
494
477
  const navbarItems = this.querySelectorAll('[slot*="navbar"]');
495
-
496
478
  if (navbarItems.length > 0) {
497
479
  Array.from(navbarItems).forEach((navbar) => {
498
480
  if (navbar.getAttribute('slot').indexOf('touch-optimized') > -1) {
@@ -518,8 +500,6 @@ export const AppLayoutMixin = (superclass) =>
518
500
  } else {
519
501
  this.$.navbarBottom.removeAttribute('hidden');
520
502
  }
521
-
522
- this._updateOffsetSize();
523
503
  }
524
504
 
525
505
  /** @protected */
@@ -534,13 +514,14 @@ export const AppLayoutMixin = (superclass) =>
534
514
  }
535
515
 
536
516
  /**
537
- * App Layout listens to `close-overlay-drawer` on the window level.
538
- * A custom event can be dispatched and the App Layout will close the drawer in overlay.
539
- *
540
- * That can be used, for instance, when a navigation occurs when user clicks in a menu item inside the drawer.
517
+ * Forces the ResizeObserver to re-report the size of the given element,
518
+ * scheduling a new {@link __onResize} callback even if the size hasn't changed.
541
519
  *
542
- * See `dispatchCloseOverlayDrawerEvent()` helper method.
543
- *
544
- * @event close-overlay-drawer
520
+ * @param {Element} element
521
+ * @private
545
522
  */
523
+ __scheduleResize(element) {
524
+ this.__resizeObserver.unobserve(element);
525
+ this.__resizeObserver.observe(element);
526
+ }
546
527
  };
package/src/vaadin-app-layout.d.ts CHANGED
@@ -78,6 +78,7 @@ export type AppLayoutEventMap = AppLayoutCustomEventMap & HTMLElementEventMap;
78
78
  * `navbar-top` | Container for the top navigation bar
79
79
  * `navbar-bottom` | Container for the bottom navigation bar
80
80
  * `drawer` | Container for the drawer area
81
+ * `content` | Container for the content area
81
82
  *
82
83
  * The following state attributes are available for styling:
83
84
  *
@@ -140,8 +141,8 @@ export type AppLayoutEventMap = AppLayoutCustomEventMap & HTMLElementEventMap;
140
141
  *
141
142
  * To use the "content scrolling", in case of the content of the page relies on a pre-defined height (for instance,
142
143
  * it has a `height:100%`), then the developer can set `height: 100%` to both `html` and `body`.
143
- * That will make the `[content]` element of app layout scrollable.
144
- * On this case, the toolbars on mobile device won't collapse.
144
+ * That makes the content part of App Layout scrollable.
145
+ * In that case, the toolbars on mobile device won't collapse.
145
146
  *
146
147
  * @fires {CustomEvent} drawer-opened-changed - Fired when the `drawerOpened` property changes.
147
148
  * @fires {CustomEvent} overlay-changed - Fired when the `overlay` property changes.
package/src/vaadin-app-layout.js CHANGED
@@ -57,6 +57,7 @@ import { AppLayoutMixin } from './vaadin-app-layout-mixin.js';
57
57
  * `navbar-top` | Container for the top navigation bar
58
58
  * `navbar-bottom` | Container for the bottom navigation bar
59
59
  * `drawer` | Container for the drawer area
60
+ * `content` | Container for the content area
60
61
  *
61
62
  * The following state attributes are available for styling:
62
63
  *
@@ -119,8 +120,8 @@ import { AppLayoutMixin } from './vaadin-app-layout-mixin.js';
119
120
  *
120
121
  * To use the "content scrolling", in case of the content of the page relies on a pre-defined height (for instance,
121
122
  * it has a `height:100%`), then the developer can set `height: 100%` to both `html` and `body`.
122
- * That will make the `[content]` element of app layout scrollable.
123
- * On this case, the toolbars on mobile device won't collapse.
123
+ * That makes the content part of App Layout scrollable.
124
+ * In that case, the toolbars on mobile device won't collapse.
124
125
  *
125
126
  * @fires {CustomEvent} drawer-opened-changed - Fired when the `drawerOpened` property changes.
126
127
  * @fires {CustomEvent} overlay-changed - Fired when the `overlay` property changes.
@@ -151,7 +152,7 @@ class AppLayout extends AppLayoutMixin(ElementMixin(ThemableMixin(PolylitMixin(L
151
152
  <div part="drawer" id="drawer">
152
153
  <slot name="drawer" id="drawerSlot" @slotchange="${this.__onDrawerSlotChange}"></slot>
153
154
  </div>
154
- <div content>
155
+ <div part="content">
155
156
  <slot></slot>
156
157
  </div>
157
158
  <div part="navbar navbar-bottom" id="navbarBottom" hidden>
package/web-types.json CHANGED
@@ -1,23 +1,21 @@
1
1
  {
2
2
  "$schema": "https://json.schemastore.org/web-types",
3
3
  "name": "@vaadin/app-layout",
4
- "version": "25.2.0-alpha1",
4
+ "version": "25.2.0-alpha10",
5
5
  "description-markup": "markdown",
6
6
  "contributions": {
7
7
  "html": {
8
8
  "elements": [
9
9
  {
10
10
  "name": "vaadin-app-layout",
11
- "description": "`<vaadin-app-layout>` is a Web Component providing a quick and easy way to get a common application layout structure done.\n\n```html\n<vaadin-app-layout primary-section=\"navbar|drawer\">\n <vaadin-drawer-toggle slot=\"navbar [touch-optimized]\"></vaadin-drawer-toggle>\n <h3 slot=\"navbar [touch-optimized]\">Company Name</h3>\n <vaadin-tabs orientation=\"vertical\" slot=\"drawer\">\n <vaadin-tab>Menu item 1</vaadin-tab>\n </vaadin-tabs>\n <!-- Everything else will be the page content -->\n <div>\n <h3>Page title</h3>\n <p>Page content</p>\n </div>\n</vaadin-app-layout>\n```\n\nFor best results, the component should be added to the root level of your application (i.e., as a direct child of `<body>`).\n\nThe page should include a viewport meta tag which contains `viewport-fit=cover`, like the following:\n```html\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1, viewport-fit=cover\">\n```\n\nThis causes the viewport to be scaled to fill the device display.\nTo ensure that important content is displayed, use the provided css variables:\n\n- `--safe-area-inset-top`\n- `--safe-area-inset-right`\n- `--safe-area-inset-bottom`\n- `--safe-area-inset-left`\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n-----------------|---------------------------------------------------------|\n`backdrop` | Backdrop covering the layout when drawer is open as an overlay\n`navbar` | Container for the navigation bar\n`navbar-top` | Container for the top navigation bar\n`navbar-bottom` | Container for the bottom navigation bar\n`drawer` | Container for the drawer area\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n---------------|-------------\n`has-drawer` | Set when the element has light DOM content in the drawer slot.\n`has-navbar` | Set when the element has light DOM content in the navbar slot.\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:----------------------------------------------------|\n| `--vaadin-app-layout-drawer-background` |\n| `--vaadin-app-layout-drawer-width` |\n| `--vaadin-app-layout-navbar-background` |\n| `--vaadin-app-layout-navbar-gap` |\n| `--vaadin-app-layout-navbar-padding-bottom` |\n| `--vaadin-app-layout-navbar-padding-inline-end` |\n| `--vaadin-app-layout-navbar-padding-inline-start` |\n| `--vaadin-app-layout-navbar-padding-top` |\n| `--vaadin-app-layout-transition-duration` |\n| `--vaadin-overlay-backdrop-background` |\n| `--vaadin-overlay-shadow` |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.\n\n### Component's slots\n\nThe following slots are available to be set\n\nSlot name | Description\n-------------------|---------------------------------------------------|\nno name | Default container for the page content\n`navbar ` | Container for the top navbar area\n`drawer` | Container for an application menu\n`touch-optimized` | Container for the bottom navbar area (only visible for mobile devices)\n\n#### Touch optimized\n\nApp Layout has a pseudo-slot `touch-optimized` in order to give more control of the presentation of\nelements with `slot[navbar]`. Internally, when the user is interacting with App Layout from a\ntouchscreen device, the component will search for elements with `slot[navbar touch-optimized]` and move\nthem to the bottom of the page.\n\n### Navigation\n\nAs the drawer opens as an overlay in small devices, it makes sense to close it once a navigation happens.\nIf you are using Vaadin Router, this will happen automatically unless you change the `closeDrawerOn` event name.\n\nIn order to do so, there are two options:\n- If the `vaadin-app-layout` instance is available, then `drawerOpened` can be set to `false`\n- If not, a custom event `close-overlay-drawer` can be dispatched either by calling\n `window.dispatchEvent(new CustomEvent('close-overlay-drawer'))` or by calling\n `AppLayout.dispatchCloseOverlayDrawerEvent()`\n\n### Scrolling areas\n\nBy default, the component will act with the \"body scrolling\", so on mobile (iOS Safari and Android Chrome),\nthe toolbars will collapse when a scroll happens.\n\nTo use the \"content scrolling\", in case of the content of the page relies on a pre-defined height (for instance,\nit has a `height:100%`), then the developer can set `height: 100%` to both `html` and `body`.\nThat will make the `[content]` element of app layout scrollable.\nOn this case, the toolbars on mobile device won't collapse.",
11
+ "description": "`<vaadin-app-layout>` is a Web Component providing a quick and easy way to get a common application layout structure done.\n\n```html\n<vaadin-app-layout primary-section=\"navbar|drawer\">\n <vaadin-drawer-toggle slot=\"navbar [touch-optimized]\"></vaadin-drawer-toggle>\n <h3 slot=\"navbar [touch-optimized]\">Company Name</h3>\n <vaadin-tabs orientation=\"vertical\" slot=\"drawer\">\n <vaadin-tab>Menu item 1</vaadin-tab>\n </vaadin-tabs>\n <!-- Everything else will be the page content -->\n <div>\n <h3>Page title</h3>\n <p>Page content</p>\n </div>\n</vaadin-app-layout>\n```\n\nFor best results, the component should be added to the root level of your application (i.e., as a direct child of `<body>`).\n\nThe page should include a viewport meta tag which contains `viewport-fit=cover`, like the following:\n```html\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1, viewport-fit=cover\">\n```\n\nThis causes the viewport to be scaled to fill the device display.\nTo ensure that important content is displayed, use the provided css variables:\n\n- `--safe-area-inset-top`\n- `--safe-area-inset-right`\n- `--safe-area-inset-bottom`\n- `--safe-area-inset-left`\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n-----------------|---------------------------------------------------------|\n`backdrop` | Backdrop covering the layout when drawer is open as an overlay\n`navbar` | Container for the navigation bar\n`navbar-top` | Container for the top navigation bar\n`navbar-bottom` | Container for the bottom navigation bar\n`drawer` | Container for the drawer area\n`content` | Container for the content area\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n---------------|-------------\n`has-drawer` | Set when the element has light DOM content in the drawer slot.\n`has-navbar` | Set when the element has light DOM content in the navbar slot.\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:----------------------------------------------------|\n| `--vaadin-app-layout-drawer-background` |\n| `--vaadin-app-layout-drawer-width` |\n| `--vaadin-app-layout-navbar-background` |\n| `--vaadin-app-layout-navbar-gap` |\n| `--vaadin-app-layout-navbar-padding-bottom` |\n| `--vaadin-app-layout-navbar-padding-inline-end` |\n| `--vaadin-app-layout-navbar-padding-inline-start` |\n| `--vaadin-app-layout-navbar-padding-top` |\n| `--vaadin-app-layout-transition-duration` |\n| `--vaadin-overlay-backdrop-background` |\n| `--vaadin-overlay-shadow` |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.\n\n### Component's slots\n\nThe following slots are available to be set\n\nSlot name | Description\n-------------------|---------------------------------------------------|\nno name | Default container for the page content\n`navbar ` | Container for the top navbar area\n`drawer` | Container for an application menu\n`touch-optimized` | Container for the bottom navbar area (only visible for mobile devices)\n\n#### Touch optimized\n\nApp Layout has a pseudo-slot `touch-optimized` in order to give more control of the presentation of\nelements with `slot[navbar]`. Internally, when the user is interacting with App Layout from a\ntouchscreen device, the component will search for elements with `slot[navbar touch-optimized]` and move\nthem to the bottom of the page.\n\n### Navigation\n\nAs the drawer opens as an overlay in small devices, it makes sense to close it once a navigation happens.\nIf you are using Vaadin Router, this will happen automatically unless you change the `closeDrawerOn` event name.\n\nIn order to do so, there are two options:\n- If the `vaadin-app-layout` instance is available, then `drawerOpened` can be set to `false`\n- If not, a custom event `close-overlay-drawer` can be dispatched either by calling\n `window.dispatchEvent(new CustomEvent('close-overlay-drawer'))` or by calling\n `AppLayout.dispatchCloseOverlayDrawerEvent()`\n\n### Scrolling areas\n\nBy default, the component will act with the \"body scrolling\", so on mobile (iOS Safari and Android Chrome),\nthe toolbars will collapse when a scroll happens.\n\nTo use the \"content scrolling\", in case of the content of the page relies on a pre-defined height (for instance,\nit has a `height:100%`), then the developer can set `height: 100%` to both `html` and `body`.\nThat makes the content part of App Layout scrollable.\nIn that case, the toolbars on mobile device won't collapse.",
12
12
  "attributes": [
13
13
  {
14
14
  "name": "close-drawer-on",
15
15
  "description": "A global event that causes the drawer to close (be hidden) when it is in overlay mode.\n- The default is `vaadin-router-location-changed` dispatched by Vaadin Router",
16
16
  "value": {
17
17
  "type": [
18
- "string",
19
- "null",
20
- "undefined"
18
+ "string"
21
19
  ]
22
20
  }
23
21
  },
@@ -26,20 +24,7 @@
26
24
  "description": "Controls whether the drawer is opened (visible) or not.\nIts default value depends on the viewport:\n- `true`, for desktop size views\n- `false`, for mobile size views",
27
25
  "value": {
28
26
  "type": [
29
- "boolean",
30
- "null",
31
- "undefined"
32
- ]
33
- }
34
- },
35
- {
36
- "name": "i18n",
37
- "description": "The object used to localize this component. To change the default\nlocalization, replace this with an object that provides all properties, or\njust the individual properties you want to change.\n\nShould be overridden by subclasses to provide a custom JSDoc with the\ndefault I18N properties.",
38
- "value": {
39
- "type": [
40
- "Object",
41
- "null",
42
- "undefined"
27
+ "boolean"
43
28
  ]
44
29
  }
45
30
  },
@@ -48,9 +33,7 @@
48
33
  "description": "Defines whether navbar or drawer will come first visually.\n- By default (`primary-section=\"navbar\"`), the navbar takes the full available width and moves the drawer down.\n- If `primary-section=\"drawer\"` is set, then the drawer will move the navbar, taking the full available height.",
49
34
  "value": {
50
35
  "type": [
51
- "string",
52
- "null",
53
- "undefined"
36
+ "string"
54
37
  ]
55
38
  }
56
39
  },
@@ -73,9 +56,7 @@
73
56
  "description": "A global event that causes the drawer to close (be hidden) when it is in overlay mode.\n- The default is `vaadin-router-location-changed` dispatched by Vaadin Router",
74
57
  "value": {
75
58
  "type": [
76
- "string",
77
- "null",
78
- "undefined"
59
+ "string"
79
60
  ]
80
61
  }
81
62
  },
@@ -84,9 +65,7 @@
84
65
  "description": "Controls whether the drawer is opened (visible) or not.\nIts default value depends on the viewport:\n- `true`, for desktop size views\n- `false`, for mobile size views",
85
66
  "value": {
86
67
  "type": [
87
- "boolean",
88
- "null",
89
- "undefined"
68
+ "boolean"
90
69
  ]
91
70
  }
92
71
  },
@@ -95,7 +74,7 @@
95
74
  "description": "The object used to localize this component. To change the default\nlocalization, replace this with an object that provides all properties, or\njust the individual properties you want to change.\n\nThe object has the following structure and default values:\n```js\n{\n drawer: 'Drawer'\n}\n```",
96
75
  "value": {
97
76
  "type": [
98
- "?"
77
+ "Object"
99
78
  ]
100
79
  }
101
80
  },
@@ -104,18 +83,12 @@
104
83
  "description": "Defines whether navbar or drawer will come first visually.\n- By default (`primary-section=\"navbar\"`), the navbar takes the full available width and moves the drawer down.\n- If `primary-section=\"drawer\"` is set, then the drawer will move the navbar, taking the full available height.",
105
84
  "value": {
106
85
  "type": [
107
- "string",
108
- "null",
109
- "undefined"
86
+ "string"
110
87
  ]
111
88
  }
112
89
  }
113
90
  ],
114
91
  "events": [
115
- {
116
- "name": "close-overlay-drawer",
117
- "description": "App Layout listens to `close-overlay-drawer` on the window level.\nA custom event can be dispatched and the App Layout will close the drawer in overlay.\n\nThat can be used, for instance, when a navigation occurs when user clicks in a menu item inside the drawer.\n\nSee `dispatchCloseOverlayDrawerEvent()` helper method."
118
- },
119
92
  {
120
93
  "name": "drawer-opened-changed",
121
94
  "description": "Fired when the `drawerOpened` property changes."
@@ -140,9 +113,7 @@
140
113
  "description": "",
141
114
  "value": {
142
115
  "type": [
143
- "string",
144
- "null",
145
- "undefined"
116
+ "string"
146
117
  ]
147
118
  }
148
119
  },
@@ -151,9 +122,7 @@
151
122
  "description": "If true, the user cannot interact with this element.",
152
123
  "value": {
153
124
  "type": [
154
- "boolean",
155
- "null",
156
- "undefined"
125
+ "boolean"
157
126
  ]
158
127
  }
159
128
  },
@@ -176,9 +145,7 @@
176
145
  "description": "",
177
146
  "value": {
178
147
  "type": [
179
- "string",
180
- "null",
181
- "undefined"
148
+ "string"
182
149
  ]
183
150
  }
184
151
  },
@@ -187,9 +154,7 @@
187
154
  "description": "If true, the user cannot interact with this element.",
188
155
  "value": {
189
156
  "type": [
190
- "boolean",
191
- "null",
192
- "undefined"
157
+ "boolean"
193
158
  ]
194
159
  }
195
160
  }
package/web-types.lit.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "$schema": "https://json.schemastore.org/web-types",
3
3
  "name": "@vaadin/app-layout",
4
- "version": "25.2.0-alpha1",
4
+ "version": "25.2.0-alpha10",
5
5
  "description-markup": "markdown",
6
6
  "framework": "lit",
7
7
  "framework-config": {
@@ -16,19 +16,19 @@
16
16
  "elements": [
17
17
  {
18
18
  "name": "vaadin-app-layout",
19
- "description": "`<vaadin-app-layout>` is a Web Component providing a quick and easy way to get a common application layout structure done.\n\n```html\n<vaadin-app-layout primary-section=\"navbar|drawer\">\n <vaadin-drawer-toggle slot=\"navbar [touch-optimized]\"></vaadin-drawer-toggle>\n <h3 slot=\"navbar [touch-optimized]\">Company Name</h3>\n <vaadin-tabs orientation=\"vertical\" slot=\"drawer\">\n <vaadin-tab>Menu item 1</vaadin-tab>\n </vaadin-tabs>\n <!-- Everything else will be the page content -->\n <div>\n <h3>Page title</h3>\n <p>Page content</p>\n </div>\n</vaadin-app-layout>\n```\n\nFor best results, the component should be added to the root level of your application (i.e., as a direct child of `<body>`).\n\nThe page should include a viewport meta tag which contains `viewport-fit=cover`, like the following:\n```html\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1, viewport-fit=cover\">\n```\n\nThis causes the viewport to be scaled to fill the device display.\nTo ensure that important content is displayed, use the provided css variables:\n\n- `--safe-area-inset-top`\n- `--safe-area-inset-right`\n- `--safe-area-inset-bottom`\n- `--safe-area-inset-left`\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n-----------------|---------------------------------------------------------|\n`backdrop` | Backdrop covering the layout when drawer is open as an overlay\n`navbar` | Container for the navigation bar\n`navbar-top` | Container for the top navigation bar\n`navbar-bottom` | Container for the bottom navigation bar\n`drawer` | Container for the drawer area\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n---------------|-------------\n`has-drawer` | Set when the element has light DOM content in the drawer slot.\n`has-navbar` | Set when the element has light DOM content in the navbar slot.\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:----------------------------------------------------|\n| `--vaadin-app-layout-drawer-background` |\n| `--vaadin-app-layout-drawer-width` |\n| `--vaadin-app-layout-navbar-background` |\n| `--vaadin-app-layout-navbar-gap` |\n| `--vaadin-app-layout-navbar-padding-bottom` |\n| `--vaadin-app-layout-navbar-padding-inline-end` |\n| `--vaadin-app-layout-navbar-padding-inline-start` |\n| `--vaadin-app-layout-navbar-padding-top` |\n| `--vaadin-app-layout-transition-duration` |\n| `--vaadin-overlay-backdrop-background` |\n| `--vaadin-overlay-shadow` |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.\n\n### Component's slots\n\nThe following slots are available to be set\n\nSlot name | Description\n-------------------|---------------------------------------------------|\nno name | Default container for the page content\n`navbar ` | Container for the top navbar area\n`drawer` | Container for an application menu\n`touch-optimized` | Container for the bottom navbar area (only visible for mobile devices)\n\n#### Touch optimized\n\nApp Layout has a pseudo-slot `touch-optimized` in order to give more control of the presentation of\nelements with `slot[navbar]`. Internally, when the user is interacting with App Layout from a\ntouchscreen device, the component will search for elements with `slot[navbar touch-optimized]` and move\nthem to the bottom of the page.\n\n### Navigation\n\nAs the drawer opens as an overlay in small devices, it makes sense to close it once a navigation happens.\nIf you are using Vaadin Router, this will happen automatically unless you change the `closeDrawerOn` event name.\n\nIn order to do so, there are two options:\n- If the `vaadin-app-layout` instance is available, then `drawerOpened` can be set to `false`\n- If not, a custom event `close-overlay-drawer` can be dispatched either by calling\n `window.dispatchEvent(new CustomEvent('close-overlay-drawer'))` or by calling\n `AppLayout.dispatchCloseOverlayDrawerEvent()`\n\n### Scrolling areas\n\nBy default, the component will act with the \"body scrolling\", so on mobile (iOS Safari and Android Chrome),\nthe toolbars will collapse when a scroll happens.\n\nTo use the \"content scrolling\", in case of the content of the page relies on a pre-defined height (for instance,\nit has a `height:100%`), then the developer can set `height: 100%` to both `html` and `body`.\nThat will make the `[content]` element of app layout scrollable.\nOn this case, the toolbars on mobile device won't collapse.",
19
+ "description": "`<vaadin-app-layout>` is a Web Component providing a quick and easy way to get a common application layout structure done.\n\n```html\n<vaadin-app-layout primary-section=\"navbar|drawer\">\n <vaadin-drawer-toggle slot=\"navbar [touch-optimized]\"></vaadin-drawer-toggle>\n <h3 slot=\"navbar [touch-optimized]\">Company Name</h3>\n <vaadin-tabs orientation=\"vertical\" slot=\"drawer\">\n <vaadin-tab>Menu item 1</vaadin-tab>\n </vaadin-tabs>\n <!-- Everything else will be the page content -->\n <div>\n <h3>Page title</h3>\n <p>Page content</p>\n </div>\n</vaadin-app-layout>\n```\n\nFor best results, the component should be added to the root level of your application (i.e., as a direct child of `<body>`).\n\nThe page should include a viewport meta tag which contains `viewport-fit=cover`, like the following:\n```html\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1, viewport-fit=cover\">\n```\n\nThis causes the viewport to be scaled to fill the device display.\nTo ensure that important content is displayed, use the provided css variables:\n\n- `--safe-area-inset-top`\n- `--safe-area-inset-right`\n- `--safe-area-inset-bottom`\n- `--safe-area-inset-left`\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n-----------------|---------------------------------------------------------|\n`backdrop` | Backdrop covering the layout when drawer is open as an overlay\n`navbar` | Container for the navigation bar\n`navbar-top` | Container for the top navigation bar\n`navbar-bottom` | Container for the bottom navigation bar\n`drawer` | Container for the drawer area\n`content` | Container for the content area\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n---------------|-------------\n`has-drawer` | Set when the element has light DOM content in the drawer slot.\n`has-navbar` | Set when the element has light DOM content in the navbar slot.\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:----------------------------------------------------|\n| `--vaadin-app-layout-drawer-background` |\n| `--vaadin-app-layout-drawer-width` |\n| `--vaadin-app-layout-navbar-background` |\n| `--vaadin-app-layout-navbar-gap` |\n| `--vaadin-app-layout-navbar-padding-bottom` |\n| `--vaadin-app-layout-navbar-padding-inline-end` |\n| `--vaadin-app-layout-navbar-padding-inline-start` |\n| `--vaadin-app-layout-navbar-padding-top` |\n| `--vaadin-app-layout-transition-duration` |\n| `--vaadin-overlay-backdrop-background` |\n| `--vaadin-overlay-shadow` |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.\n\n### Component's slots\n\nThe following slots are available to be set\n\nSlot name | Description\n-------------------|---------------------------------------------------|\nno name | Default container for the page content\n`navbar ` | Container for the top navbar area\n`drawer` | Container for an application menu\n`touch-optimized` | Container for the bottom navbar area (only visible for mobile devices)\n\n#### Touch optimized\n\nApp Layout has a pseudo-slot `touch-optimized` in order to give more control of the presentation of\nelements with `slot[navbar]`. Internally, when the user is interacting with App Layout from a\ntouchscreen device, the component will search for elements with `slot[navbar touch-optimized]` and move\nthem to the bottom of the page.\n\n### Navigation\n\nAs the drawer opens as an overlay in small devices, it makes sense to close it once a navigation happens.\nIf you are using Vaadin Router, this will happen automatically unless you change the `closeDrawerOn` event name.\n\nIn order to do so, there are two options:\n- If the `vaadin-app-layout` instance is available, then `drawerOpened` can be set to `false`\n- If not, a custom event `close-overlay-drawer` can be dispatched either by calling\n `window.dispatchEvent(new CustomEvent('close-overlay-drawer'))` or by calling\n `AppLayout.dispatchCloseOverlayDrawerEvent()`\n\n### Scrolling areas\n\nBy default, the component will act with the \"body scrolling\", so on mobile (iOS Safari and Android Chrome),\nthe toolbars will collapse when a scroll happens.\n\nTo use the \"content scrolling\", in case of the content of the page relies on a pre-defined height (for instance,\nit has a `height:100%`), then the developer can set `height: 100%` to both `html` and `body`.\nThat makes the content part of App Layout scrollable.\nIn that case, the toolbars on mobile device won't collapse.",
20
20
  "extension": true,
21
21
  "attributes": [
22
22
  {
23
- "name": "?drawerOpened",
24
- "description": "Controls whether the drawer is opened (visible) or not.\nIts default value depends on the viewport:\n- `true`, for desktop size views\n- `false`, for mobile size views",
23
+ "name": ".closeDrawerOn",
24
+ "description": "A global event that causes the drawer to close (be hidden) when it is in overlay mode.\n- The default is `vaadin-router-location-changed` dispatched by Vaadin Router",
25
25
  "value": {
26
26
  "kind": "expression"
27
27
  }
28
28
  },
29
29
  {
30
- "name": ".closeDrawerOn",
31
- "description": "A global event that causes the drawer to close (be hidden) when it is in overlay mode.\n- The default is `vaadin-router-location-changed` dispatched by Vaadin Router",
30
+ "name": "?drawerOpened",
31
+ "description": "Controls whether the drawer is opened (visible) or not.\nIts default value depends on the viewport:\n- `true`, for desktop size views\n- `false`, for mobile size views",
32
32
  "value": {
33
33
  "kind": "expression"
34
34
  }
@@ -47,13 +47,6 @@
47
47
  "kind": "expression"
48
48
  }
49
49
  },
50
- {
51
- "name": "@close-overlay-drawer",
52
- "description": "App Layout listens to `close-overlay-drawer` on the window level.\nA custom event can be dispatched and the App Layout will close the drawer in overlay.\n\nThat can be used, for instance, when a navigation occurs when user clicks in a menu item inside the drawer.\n\nSee `dispatchCloseOverlayDrawerEvent()` helper method.",
53
- "value": {
54
- "kind": "expression"
55
- }
56
- },
57
50
  {
58
51
  "name": "@drawer-opened-changed",
59
52
  "description": "Fired when the `drawerOpened` property changes.",
@@ -83,15 +76,15 @@
83
76
  "extension": true,
84
77
  "attributes": [
85
78
  {
86
- "name": "?disabled",
87
- "description": "If true, the user cannot interact with this element.",
79
+ "name": ".ariaLabel",
80
+ "description": "",
88
81
  "value": {
89
82
  "kind": "expression"
90
83
  }
91
84
  },
92
85
  {
93
- "name": ".ariaLabel",
94
- "description": "",
86
+ "name": "?disabled",
87
+ "description": "If true, the user cannot interact with this element.",
95
88
  "value": {
96
89
  "kind": "expression"
97
90
  }