@vaadin/app-layout 24.1.0-alpha8 → 24.1.0-alpha9

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 +13 -38
  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-alpha8",
3
+ "version": "24.1.0-alpha9",
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-alpha8",
40
- "@vaadin/button": "24.1.0-alpha8",
41
- "@vaadin/component-base": "24.1.0-alpha8",
42
- "@vaadin/vaadin-lumo-styles": "24.1.0-alpha8",
43
- "@vaadin/vaadin-material-styles": "24.1.0-alpha8",
44
- "@vaadin/vaadin-themable-mixin": "24.1.0-alpha8"
39
+ "@vaadin/a11y-base": "24.1.0-alpha9",
40
+ "@vaadin/button": "24.1.0-alpha9",
41
+ "@vaadin/component-base": "24.1.0-alpha9",
42
+ "@vaadin/vaadin-lumo-styles": "24.1.0-alpha9",
43
+ "@vaadin/vaadin-material-styles": "24.1.0-alpha9",
44
+ "@vaadin/vaadin-themable-mixin": "24.1.0-alpha9"
45
45
  },
46
46
  "devDependencies": {
47
47
  "@esm-bundle/chai": "^4.3.4",
48
- "@vaadin/tabs": "24.1.0-alpha8",
48
+ "@vaadin/tabs": "24.1.0-alpha9",
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": "1996d6f496a68cefc4c370c45a5d1995c3276c0b"
56
+ "gitHead": "db4fe44603a6702b85b0da2a6d033ddf8ffea5c4"
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) {
@@ -784,10 +759,10 @@ class AppLayout extends ElementMixin(ThemableMixin(ControllerMixin(PolymerElemen
784
759
  this.$.navbarTop.removeAttribute('hidden');
785
760
  }
786
761
 
787
- if (touchOptimized) {
788
- this.$.navbarBottom.removeAttribute('hidden');
789
- } else {
762
+ if (this.$.navbarBottom.querySelector('[name=navbar-bottom]').assignedNodes().length === 0) {
790
763
  this.$.navbarBottom.setAttribute('hidden', '');
764
+ } else {
765
+ this.$.navbarBottom.removeAttribute('hidden');
791
766
  }
792
767
 
793
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-alpha8",
4
+ "version": "24.1.0-alpha9",
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-alpha8",
4
+ "version": "24.1.0-alpha9",
5
5
  "description-markup": "markdown",
6
6
  "framework": "lit",
7
7
  "framework-config": {