@vaadin/app-layout 24.1.0-alpha1 → 24.1.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 (6) hide show
  1. package/package.json +9 -9
  2. package/src/vaadin-app-layout.js +17 -40
  3. package/theme/material/vaadin-app-layout-styles.js +2 -6
  4. package/theme/material/vaadin-drawer-toggle-styles.js +1 -8
  5. package/web-types.json +1 -1
  6. package/web-types.lit.json +1 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vaadin/app-layout",
3
- "version": "24.1.0-alpha1",
3
+ "version": "24.1.0-alpha10",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -36,16 +36,16 @@
36
36
  ],
37
37
  "dependencies": {
38
38
  "@polymer/polymer": "^3.0.0",
39
- "@vaadin/a11y-base": "24.1.0-alpha1",
40
- "@vaadin/button": "24.1.0-alpha1",
41
- "@vaadin/component-base": "24.1.0-alpha1",
42
- "@vaadin/vaadin-lumo-styles": "24.1.0-alpha1",
43
- "@vaadin/vaadin-material-styles": "24.1.0-alpha1",
44
- "@vaadin/vaadin-themable-mixin": "24.1.0-alpha1"
39
+ "@vaadin/a11y-base": "24.1.0-alpha10",
40
+ "@vaadin/button": "24.1.0-alpha10",
41
+ "@vaadin/component-base": "24.1.0-alpha10",
42
+ "@vaadin/vaadin-lumo-styles": "24.1.0-alpha10",
43
+ "@vaadin/vaadin-material-styles": "24.1.0-alpha10",
44
+ "@vaadin/vaadin-themable-mixin": "24.1.0-alpha10"
45
45
  },
46
46
  "devDependencies": {
47
47
  "@esm-bundle/chai": "^4.3.4",
48
- "@vaadin/tabs": "24.1.0-alpha1",
48
+ "@vaadin/tabs": "24.1.0-alpha10",
49
49
  "@vaadin/testing-helpers": "^0.4.0",
50
50
  "sinon": "^13.0.2"
51
51
  },
@@ -53,5 +53,5 @@
53
53
  "web-types.json",
54
54
  "web-types.lit.json"
55
55
  ],
56
- "gitHead": "599a339181595923b9ad6373d6888d8a79540141"
56
+ "gitHead": "12e39be7eb3b49c68708e8ca3de2fb22e91051a1"
57
57
  }
package/src/vaadin-app-layout.js CHANGED
@@ -122,14 +122,8 @@ class AppLayout extends ElementMixin(ThemableMixin(ControllerMixin(PolymerElemen
122
122
  --vaadin-app-layout-touch-optimized: false;
123
123
  --vaadin-app-layout-navbar-offset-top: var(--_vaadin-app-layout-navbar-offset-size);
124
124
  --vaadin-app-layout-navbar-offset-bottom: var(--_vaadin-app-layout-navbar-offset-size-bottom);
125
- padding-top: var(--vaadin-app-layout-navbar-offset-top);
126
- padding-bottom: var(--vaadin-app-layout-navbar-offset-bottom);
127
- padding-left: var(--vaadin-app-layout-navbar-offset-left);
128
- }
129
-
130
- :host([dir='rtl']) {
131
- padding-left: 0;
132
- padding-right: var(--vaadin-app-layout-navbar-offset-left);
125
+ padding-block: var(--vaadin-app-layout-navbar-offset-top) var(--vaadin-app-layout-navbar-offset-bottom);
126
+ padding-inline-start: var(--vaadin-app-layout-navbar-offset-left);
133
127
  }
134
128
 
135
129
  :host([hidden]),
@@ -169,21 +163,16 @@ class AppLayout extends ElementMixin(ThemableMixin(ControllerMixin(PolymerElemen
169
163
  display: flex;
170
164
  align-items: center;
171
165
  top: 0;
172
- right: 0;
173
- left: 0;
174
- transition: left var(--vaadin-app-layout-transition);
166
+ inset-inline: 0;
167
+ transition: inset-inline-start var(--vaadin-app-layout-transition);
175
168
  padding-top: var(--safe-area-inset-top);
176
169
  padding-left: var(--safe-area-inset-left);
177
170
  padding-right: var(--safe-area-inset-right);
178
171
  z-index: 1;
179
172
  }
180
173
 
181
- :host(:not([dir='rtl'])[primary-section='drawer'][drawer-opened]:not([overlay])) [part='navbar'] {
182
- left: var(--vaadin-app-layout-drawer-offset-left, 0);
183
- }
184
-
185
- :host([dir='rtl'][primary-section='drawer'][drawer-opened]:not([overlay])) [part='navbar'] {
186
- right: var(--vaadin-app-layout-drawer-offset-left, 0);
174
+ :host([primary-section='drawer'][drawer-opened]:not([overlay])) [part='navbar'] {
175
+ inset-inline-start: var(--vaadin-app-layout-drawer-offset-left, 0);
187
176
  }
188
177
 
189
178
  :host([primary-section='drawer']) [part='drawer'] {
@@ -200,9 +189,8 @@ class AppLayout extends ElementMixin(ThemableMixin(ControllerMixin(PolymerElemen
200
189
  overflow: auto;
201
190
  position: fixed;
202
191
  top: var(--vaadin-app-layout-navbar-offset-top, 0);
203
- right: auto;
204
192
  bottom: var(--vaadin-app-layout-navbar-offset-bottom, var(--vaadin-viewport-offset-bottom, 0));
205
- left: var(--vaadin-app-layout-navbar-offset-left, 0);
193
+ inset-inline: var(--vaadin-app-layout-navbar-offset-left, 0) auto;
206
194
  transition: transform var(--vaadin-app-layout-transition), visibility var(--vaadin-app-layout-transition);
207
195
  transform: translateX(-100%);
208
196
  max-width: 90%;
@@ -234,10 +222,7 @@ class AppLayout extends ElementMixin(ThemableMixin(ControllerMixin(PolymerElemen
234
222
 
235
223
  :host([overlay]) [part='backdrop'] {
236
224
  position: fixed;
237
- top: 0;
238
- right: 0;
239
- bottom: 0;
240
- left: 0;
225
+ inset: 0;
241
226
  pointer-events: none;
242
227
  transition: opacity var(--vaadin-app-layout-transition);
243
228
  -webkit-tap-highlight-color: transparent;
@@ -259,25 +244,15 @@ class AppLayout extends ElementMixin(ThemableMixin(ControllerMixin(PolymerElemen
259
244
  }
260
245
 
261
246
  :host([dir='rtl']) [part='drawer'] {
262
- left: auto;
263
- right: var(--vaadin-app-layout-navbar-offset-start, 0);
264
247
  transform: translateX(100%);
265
248
  }
266
249
 
267
- :host([dir='rtl']) [part='navbar'] {
268
- transition: right var(--vaadin-app-layout-transition);
269
- }
270
-
271
250
  :host([dir='rtl'][drawer-opened]) [part='drawer'] {
272
251
  transform: translateX(0%);
273
252
  }
274
253
 
275
- :host(:not([dir='rtl'])[drawer-opened]:not([overlay])) {
276
- padding-left: var(--vaadin-app-layout-drawer-offset-left);
277
- }
278
-
279
- :host([dir='rtl'][drawer-opened]:not([overlay])) {
280
- padding-right: var(--vaadin-app-layout-drawer-offset-left);
254
+ :host([drawer-opened]:not([overlay])) {
255
+ padding-inline-start: var(--vaadin-app-layout-drawer-offset-left);
281
256
  }
282
257
 
283
258
  @media (max-width: 800px), (max-height: 600px) {
@@ -458,8 +433,10 @@ class AppLayout extends ElementMixin(ThemableMixin(ControllerMixin(PolymerElemen
458
433
  this._updateOverlayMode();
459
434
 
460
435
  this._navbarSizeObserver = new ResizeObserver(() => {
461
- this._blockAnimationUntilAfterNextRender();
462
- this._updateOffsetSize();
436
+ requestAnimationFrame(() => {
437
+ this._blockAnimationUntilAfterNextRender();
438
+ this._updateOffsetSize();
439
+ });
463
440
  });
464
441
  this._navbarSizeObserver.observe(this.$.navbarTop);
465
442
  this._navbarSizeObserver.observe(this.$.navbarBottom);
@@ -782,10 +759,10 @@ class AppLayout extends ElementMixin(ThemableMixin(ControllerMixin(PolymerElemen
782
759
  this.$.navbarTop.removeAttribute('hidden');
783
760
  }
784
761
 
785
- if (touchOptimized) {
786
- this.$.navbarBottom.removeAttribute('hidden');
787
- } else {
762
+ if (this.$.navbarBottom.querySelector('[name=navbar-bottom]').assignedNodes().length === 0) {
788
763
  this.$.navbarBottom.setAttribute('hidden', '');
764
+ } else {
765
+ this.$.navbarBottom.removeAttribute('hidden');
789
766
  }
790
767
 
791
768
  this._updateOffsetSize();
package/theme/material/vaadin-app-layout-styles.js CHANGED
@@ -20,12 +20,8 @@ registerStyles(
20
20
  background: var(--material-background-color);
21
21
  }
22
22
 
23
- :host(:not([dir='rtl'])) [part='drawer'] {
24
- border-right: 1px solid var(--material-secondary-background-color);
25
- }
26
-
27
- :host([dir='rtl']) [part='drawer'] {
28
- border-left: 1px solid var(--material-secondary-background-color);
23
+ [part='drawer'] {
24
+ border-inline-end: 1px solid var(--material-secondary-background-color);
29
25
  }
30
26
 
31
27
  :host([primary-section='drawer']) [part='drawer'] {
package/theme/material/vaadin-drawer-toggle-styles.js CHANGED
@@ -9,14 +9,7 @@ const drawerToggle = css`
9
9
  height: 48px;
10
10
  padding: 0;
11
11
  border-radius: 50%;
12
- }
13
-
14
- :host(:not([dir='rtl'])) {
15
- margin-right: 1em;
16
- }
17
-
18
- :host([dir='rtl']) {
19
- margin-left: 1em;
12
+ margin-inline-end: 1em;
20
13
  }
21
14
 
22
15
  [part='icon'],
package/web-types.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": "24.1.0-alpha1",
4
+ "version": "24.1.0-alpha10",
5
5
  "description-markup": "markdown",
6
6
  "contributions": {
7
7
  "html": {
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": "24.1.0-alpha1",
4
+ "version": "24.1.0-alpha10",
5
5
  "description-markup": "markdown",
6
6
  "framework": "lit",
7
7
  "framework-config": {