@vaadin/app-layout 25.2.0-alpha5 → 25.2.0-alpha7

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 (7) hide show
  1. package/custom-elements.json +1 -1
  2. package/package.json +10 -10
  3. package/src/styles/vaadin-app-layout-base-styles.js +7 -16
  4. package/src/vaadin-app-layout.d.ts +3 -2
  5. package/src/vaadin-app-layout.js +4 -3
  6. package/web-types.json +2 -2
  7. package/web-types.lit.json +2 -2
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
  {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vaadin/app-layout",
3
- "version": "25.2.0-alpha5",
3
+ "version": "25.2.0-alpha7",
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-alpha5",
39
- "@vaadin/button": "25.2.0-alpha5",
40
- "@vaadin/component-base": "25.2.0-alpha5",
41
- "@vaadin/vaadin-themable-mixin": "25.2.0-alpha5",
38
+ "@vaadin/a11y-base": "25.2.0-alpha7",
39
+ "@vaadin/button": "25.2.0-alpha7",
40
+ "@vaadin/component-base": "25.2.0-alpha7",
41
+ "@vaadin/vaadin-themable-mixin": "25.2.0-alpha7",
42
42
  "lit": "^3.0.0"
43
43
  },
44
44
  "devDependencies": {
45
- "@vaadin/aura": "25.2.0-alpha5",
46
- "@vaadin/chai-plugins": "25.2.0-alpha5",
47
- "@vaadin/test-runner-commands": "25.2.0-alpha5",
45
+ "@vaadin/aura": "25.2.0-alpha7",
46
+ "@vaadin/chai-plugins": "25.2.0-alpha7",
47
+ "@vaadin/test-runner-commands": "25.2.0-alpha7",
48
48
  "@vaadin/testing-helpers": "^2.0.0",
49
- "@vaadin/vaadin-lumo-styles": "25.2.0-alpha5",
49
+ "@vaadin/vaadin-lumo-styles": "25.2.0-alpha7",
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": "2f0c822a389571591b1b9d2c27d45e008ccbae6b"
57
+ "gitHead": "3f0862906d60205d107836d8eca84c6fde4a9129"
58
58
  }
package/src/styles/vaadin-app-layout-base-styles.js CHANGED
@@ -17,16 +17,17 @@ 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
+ --vaadin-app-layout-drawer-offset-left: 0px;
20
21
  padding-top: max(var(--vaadin-app-layout-navbar-offset-top), var(--safe-area-inset-top));
21
22
  padding-bottom: max(var(--vaadin-app-layout-navbar-offset-bottom), var(--safe-area-inset-bottom));
22
23
  }
23
24
 
24
- :host(:dir(ltr)) [content] {
25
+ :host(:dir(ltr)) {
25
26
  padding-left: max(var(--vaadin-app-layout-drawer-offset-left), var(--safe-area-inset-left));
26
27
  padding-right: var(--safe-area-inset-right);
27
28
  }
28
29
 
29
- :host(:dir(rtl)) [content] {
30
+ :host(:dir(rtl)) {
30
31
  padding-left: var(--safe-area-inset-left);
31
32
  padding-right: max(var(--vaadin-app-layout-drawer-offset-left), var(--safe-area-inset-right));
32
33
  }
@@ -50,11 +51,11 @@ export const appLayoutStyles = css`
50
51
  --vaadin-app-layout-drawer-offset-left: 0px;
51
52
  }
52
53
 
53
- :host(:not([no-scroll])) [content] {
54
+ :host(:not([no-scroll])) [part~='content'] {
54
55
  overflow: auto;
55
56
  }
56
57
 
57
- [content] {
58
+ [part~='content'] {
58
59
  height: 100%;
59
60
  transition: inherit;
60
61
  }
@@ -137,21 +138,10 @@ export const appLayoutStyles = css`
137
138
  padding-right: var(--safe-area-inset-right);
138
139
  }
139
140
 
140
- :host([has-navbar]:not([overlay])) [part='drawer'],
141
- :host([has-navbar]) [content] {
141
+ :host([has-navbar]:not([overlay])) [part='drawer'] {
142
142
  --safe-area-inset-top: 0px;
143
143
  }
144
144
 
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
145
  :host([drawer-opened]) [part='drawer'] {
156
146
  /* The drawer should be accessible by the tabbing navigation when it is opened. */
157
147
  visibility: visible;
@@ -209,6 +199,7 @@ export const appLayoutStyles = css`
209
199
  }
210
200
 
211
201
  /* If a vaadin-scroller is used in the drawer, allow it to take all remaining space and contain scrolling */
202
+
212
203
  [part='drawer'] ::slotted(vaadin-scroller) {
213
204
  flex: 1;
214
205
  overscroll-behavior: contain;
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,14 +1,14 @@
1
1
  {
2
2
  "$schema": "https://json.schemastore.org/web-types",
3
3
  "name": "@vaadin/app-layout",
4
- "version": "25.2.0-alpha5",
4
+ "version": "25.2.0-alpha7",
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",
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-alpha5",
4
+ "version": "25.2.0-alpha7",
5
5
  "description-markup": "markdown",
6
6
  "framework": "lit",
7
7
  "framework-config": {
@@ -16,7 +16,7 @@
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
  {