@vaadin/horizontal-layout 24.8.4 → 25.0.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 (21) hide show
  1. package/README.md +0 -23
  2. package/package.json +12 -12
  3. package/src/styles/vaadin-horizontal-layout-base-styles.js +69 -0
  4. package/src/styles/vaadin-horizontal-layout-core-styles.d.ts +8 -0
  5. package/src/{vaadin-horizontal-layout-styles.js → styles/vaadin-horizontal-layout-core-styles.js} +1 -1
  6. package/src/vaadin-horizontal-layout.d.ts +1 -1
  7. package/src/vaadin-horizontal-layout.js +25 -12
  8. package/web-types.json +2 -2
  9. package/web-types.lit.json +2 -2
  10. package/src/vaadin-lit-horizontal-layout.js +0 -44
  11. package/theme/lumo/vaadin-lit-horizontal-layout.d.ts +0 -2
  12. package/theme/lumo/vaadin-lit-horizontal-layout.js +0 -2
  13. package/theme/material/vaadin-horizontal-layout-styles.d.ts +0 -1
  14. package/theme/material/vaadin-horizontal-layout-styles.js +0 -37
  15. package/theme/material/vaadin-horizontal-layout.d.ts +0 -2
  16. package/theme/material/vaadin-horizontal-layout.js +0 -2
  17. package/theme/material/vaadin-lit-horizontal-layout.d.ts +0 -2
  18. package/theme/material/vaadin-lit-horizontal-layout.js +0 -2
  19. package/vaadin-lit-horizontal-layout.d.ts +0 -1
  20. package/vaadin-lit-horizontal-layout.js +0 -2
  21. /package/src/{vaadin-horizontal-layout-styles.d.ts → styles/vaadin-horizontal-layout-base-styles.d.ts} +0 -0
package/README.md CHANGED
@@ -27,29 +27,6 @@ Once installed, import the component in your application:
27
27
  import '@vaadin/horizontal-layout';
28
28
  ```
29
29
 
30
- ## Themes
31
-
32
- Vaadin components come with two built-in [themes](https://vaadin.com/docs/latest/styling), Lumo and Material.
33
- The [main entrypoint](https://github.com/vaadin/web-components/blob/main/packages/horizontal-layout/vaadin-horizontal-layout.js) of the package uses the Lumo theme.
34
-
35
- To use the Material theme, import the component from the `theme/material` folder:
36
-
37
- ```js
38
- import '@vaadin/horizontal-layout/theme/material/vaadin-horizontal-layout.js';
39
- ```
40
-
41
- You can also import the Lumo version of the component explicitly:
42
-
43
- ```js
44
- import '@vaadin/horizontal-layout/theme/lumo/vaadin-horizontal-layout.js';
45
- ```
46
-
47
- Finally, you can import the un-themed component from the `src` folder to get a minimal starting point:
48
-
49
- ```js
50
- import '@vaadin/horizontal-layout/src/vaadin-horizontal-layout.js';
51
- ```
52
-
53
30
  ## Contributing
54
31
 
55
32
  Read the [contributing guide](https://vaadin.com/docs/latest/contributing) to learn about our development process, how to propose bugfixes and improvements, and how to test your changes to Vaadin components.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vaadin/horizontal-layout",
3
- "version": "24.8.4",
3
+ "version": "25.0.0-alpha10",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -21,6 +21,8 @@
21
21
  "type": "module",
22
22
  "files": [
23
23
  "src",
24
+ "!src/styles/*-base-styles.d.ts",
25
+ "!src/styles/*-base-styles.js",
24
26
  "theme",
25
27
  "vaadin-*.d.ts",
26
28
  "vaadin-*.js",
@@ -31,25 +33,23 @@
31
33
  "Vaadin",
32
34
  "vaadin-horizontal-layout",
33
35
  "web-components",
34
- "web-component",
35
- "polymer"
36
+ "web-component"
36
37
  ],
37
38
  "dependencies": {
38
- "@polymer/polymer": "^3.0.0",
39
- "@vaadin/component-base": "~24.8.4",
40
- "@vaadin/vaadin-lumo-styles": "~24.8.4",
41
- "@vaadin/vaadin-material-styles": "~24.8.4",
42
- "@vaadin/vaadin-themable-mixin": "~24.8.4",
39
+ "@open-wc/dedupe-mixin": "^1.3.0",
40
+ "@vaadin/component-base": "25.0.0-alpha10",
41
+ "@vaadin/vaadin-lumo-styles": "25.0.0-alpha10",
42
+ "@vaadin/vaadin-themable-mixin": "25.0.0-alpha10",
43
43
  "lit": "^3.0.0"
44
44
  },
45
45
  "devDependencies": {
46
- "@vaadin/chai-plugins": "~24.8.4",
47
- "@vaadin/test-runner-commands": "~24.8.4",
48
- "@vaadin/testing-helpers": "^1.1.0"
46
+ "@vaadin/chai-plugins": "25.0.0-alpha10",
47
+ "@vaadin/test-runner-commands": "25.0.0-alpha10",
48
+ "@vaadin/testing-helpers": "^2.0.0"
49
49
  },
50
50
  "web-types": [
51
51
  "web-types.json",
52
52
  "web-types.lit.json"
53
53
  ],
54
- "gitHead": "849e54e967563080a685965e2dced02060b3ab23"
54
+ "gitHead": "6cc6c94079e805fa5b2f0af4dbf3b2a7485e57d0"
55
55
  }
package/src/styles/vaadin-horizontal-layout-base-styles.js ADDED
@@ -0,0 +1,69 @@
1
+ /**
2
+ * @license
3
+ * Copyright (c) 2017 - 2025 Vaadin Ltd.
4
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
+ */
6
+ import '@vaadin/component-base/src/style-props.js';
7
+ import { css } from 'lit';
8
+
9
+ export const baseStyles = css`
10
+ :host {
11
+ display: flex;
12
+ box-sizing: border-box;
13
+ }
14
+
15
+ :host([hidden]) {
16
+ display: none !important;
17
+ }
18
+
19
+ /* Theme variations */
20
+ :host([theme~='margin']) {
21
+ margin: var(--vaadin-horizontal-layout-margin, var(--vaadin-padding));
22
+ }
23
+
24
+ :host([theme~='padding']) {
25
+ padding: var(--vaadin-horizontal-layout-margin, var(--vaadin-padding));
26
+ }
27
+
28
+ :host([theme~='spacing']) {
29
+ gap: var(--vaadin-horizontal-layout-gap, var(--vaadin-gap-container-inline));
30
+ }
31
+
32
+ :host([theme~='wrap']) {
33
+ flex-wrap: wrap;
34
+ }
35
+
36
+ :host([has-end]:not([has-middle])) ::slotted([last-start-child]) {
37
+ margin-inline-end: auto;
38
+ }
39
+
40
+ ::slotted([first-middle-child]) {
41
+ margin-inline-start: auto;
42
+ }
43
+
44
+ ::slotted([last-middle-child]) {
45
+ margin-inline-end: auto;
46
+ }
47
+
48
+ :host(:not([has-middle])) ::slotted([first-end-child]) {
49
+ margin-inline-start: auto;
50
+ }
51
+ `;
52
+
53
+ // Layout improvements are part of a feature for Flow users where children that have been configured to use full size
54
+ // using `HasSize.setSizeFull()` and others, get additional styles so that they effectively take the remaining space in
55
+ // the layout, rather than explicitly use 100% width/height. The respective data attributes are set by Flow's `HasSize`
56
+ // class.
57
+ const enableLayoutImprovements = window.Vaadin.featureFlags.layoutComponentImprovements;
58
+ const layoutImprovementStyles = css`
59
+ ::slotted([data-width-full]) {
60
+ flex: 1;
61
+ }
62
+
63
+ ::slotted(vaadin-horizontal-layout[data-width-full]),
64
+ ::slotted(vaadin-vertical-layout[data-width-full]) {
65
+ min-width: 0;
66
+ }
67
+ `;
68
+
69
+ export const horizontalLayoutStyles = enableLayoutImprovements ? [baseStyles, layoutImprovementStyles] : [baseStyles];
package/src/styles/vaadin-horizontal-layout-core-styles.d.ts ADDED
@@ -0,0 +1,8 @@
1
+ /**
2
+ * @license
3
+ * Copyright (c) 2017 - 2025 Vaadin Ltd.
4
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
+ */
6
+ import type { CSSResult } from 'lit';
7
+
8
+ export const horizontalLayoutStyles: CSSResult[];
package/src/{vaadin-horizontal-layout-styles.js → styles/vaadin-horizontal-layout-core-styles.js} RENAMED
@@ -3,7 +3,7 @@
3
3
  * Copyright (c) 2017 - 2025 Vaadin Ltd.
4
4
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
5
  */
6
- import { css } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
6
+ import { css } from 'lit';
7
7
 
8
8
  export const baseStyles = css`
9
9
  :host {
package/src/vaadin-horizontal-layout.d.ts CHANGED
@@ -10,7 +10,7 @@ import { HorizontalLayoutMixin } from './vaadin-horizontal-layout-mixin.js';
10
10
  /**
11
11
  * `<vaadin-horizontal-layout>` provides a simple way to horizontally align your HTML elements.
12
12
  *
13
- * ```
13
+ * ```html
14
14
  * <vaadin-horizontal-layout>
15
15
  * <div>Item 1</div>
16
16
  * <div>Item 2</div>
package/src/vaadin-horizontal-layout.js CHANGED
@@ -3,19 +3,19 @@
3
3
  * Copyright (c) 2017 - 2025 Vaadin Ltd.
4
4
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
5
  */
6
- import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
6
+ import { html, LitElement } from 'lit';
7
7
  import { defineCustomElement } from '@vaadin/component-base/src/define.js';
8
8
  import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
9
- import { registerStyles, ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
9
+ import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
10
+ import { LumoInjectionMixin } from '@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js';
11
+ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
12
+ import { horizontalLayoutStyles } from './styles/vaadin-horizontal-layout-core-styles.js';
10
13
  import { HorizontalLayoutMixin } from './vaadin-horizontal-layout-mixin.js';
11
- import { horizontalLayoutStyles } from './vaadin-horizontal-layout-styles.js';
12
-
13
- registerStyles('vaadin-horizontal-layout', horizontalLayoutStyles, { moduleId: 'vaadin-horizontal-layout-styles' });
14
14
 
15
15
  /**
16
16
  * `<vaadin-horizontal-layout>` provides a simple way to horizontally align your HTML elements.
17
17
  *
18
- * ```
18
+ * ```html
19
19
  * <vaadin-horizontal-layout>
20
20
  * <div>Item 1</div>
21
21
  * <div>Item 2</div>
@@ -49,18 +49,31 @@ registerStyles('vaadin-horizontal-layout', horizontalLayoutStyles, { moduleId: '
49
49
  * @mixes ElementMixin
50
50
  * @mixes HorizontalLayoutMixin
51
51
  */
52
- class HorizontalLayout extends HorizontalLayoutMixin(ElementMixin(ThemableMixin(PolymerElement))) {
53
- static get template() {
52
+ class HorizontalLayout extends HorizontalLayoutMixin(
53
+ ThemableMixin(ElementMixin(PolylitMixin(LumoInjectionMixin(LitElement)))),
54
+ ) {
55
+ static get is() {
56
+ return 'vaadin-horizontal-layout';
57
+ }
58
+
59
+ static get styles() {
60
+ return horizontalLayoutStyles;
61
+ }
62
+
63
+ static get lumoInjector() {
64
+ return {
65
+ includeBaseStyles: true,
66
+ };
67
+ }
68
+
69
+ /** @protected */
70
+ render() {
54
71
  return html`
55
72
  <slot></slot>
56
73
  <slot name="middle"></slot>
57
74
  <slot name="end"></slot>
58
75
  `;
59
76
  }
60
-
61
- static get is() {
62
- return 'vaadin-horizontal-layout';
63
- }
64
77
  }
65
78
 
66
79
  defineCustomElement(HorizontalLayout);
package/web-types.json CHANGED
@@ -1,14 +1,14 @@
1
1
  {
2
2
  "$schema": "https://json.schemastore.org/web-types",
3
3
  "name": "@vaadin/horizontal-layout",
4
- "version": "24.8.4",
4
+ "version": "25.0.0-alpha10",
5
5
  "description-markup": "markdown",
6
6
  "contributions": {
7
7
  "html": {
8
8
  "elements": [
9
9
  {
10
10
  "name": "vaadin-horizontal-layout",
11
- "description": "`<vaadin-horizontal-layout>` provides a simple way to horizontally align your HTML elements.\n\n```\n<vaadin-horizontal-layout>\n <div>Item 1</div>\n <div>Item 2</div>\n</vaadin-horizontal-layout>\n```\n\n### Built-in Theme Variations\n\n`<vaadin-horizontal-layout>` supports the following theme variations:\n\nTheme variation | Description\n---|---\n`theme=\"margin\"` | Applies the default amount of CSS margin for the host element (specified by the theme)\n`theme=\"padding\"` | Applies the default amount of CSS padding for the host element (specified by the theme)\n`theme=\"spacing\"` | Applies the default amount of CSS margin between items (specified by the theme)\n`theme=\"wrap\"` | Items wrap to the next row when they exceed the layout width\n\n### Component's slots\n\nThe following slots are available to be set:\n\nSlot name | Description\n-------------------|---------------\nno name | Default slot\n`middle` | Slot for the content placed in the middle\n`end` | Slot for the content placed at the end",
11
+ "description": "`<vaadin-horizontal-layout>` provides a simple way to horizontally align your HTML elements.\n\n```html\n<vaadin-horizontal-layout>\n <div>Item 1</div>\n <div>Item 2</div>\n</vaadin-horizontal-layout>\n```\n\n### Built-in Theme Variations\n\n`<vaadin-horizontal-layout>` supports the following theme variations:\n\nTheme variation | Description\n---|---\n`theme=\"margin\"` | Applies the default amount of CSS margin for the host element (specified by the theme)\n`theme=\"padding\"` | Applies the default amount of CSS padding for the host element (specified by the theme)\n`theme=\"spacing\"` | Applies the default amount of CSS margin between items (specified by the theme)\n`theme=\"wrap\"` | Items wrap to the next row when they exceed the layout width\n\n### Component's slots\n\nThe following slots are available to be set:\n\nSlot name | Description\n-------------------|---------------\nno name | Default slot\n`middle` | Slot for the content placed in the middle\n`end` | Slot for the content placed at the end",
12
12
  "attributes": [
13
13
  {
14
14
  "name": "theme",
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/horizontal-layout",
4
- "version": "24.8.4",
4
+ "version": "25.0.0-alpha10",
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-horizontal-layout",
19
- "description": "`<vaadin-horizontal-layout>` provides a simple way to horizontally align your HTML elements.\n\n```\n<vaadin-horizontal-layout>\n <div>Item 1</div>\n <div>Item 2</div>\n</vaadin-horizontal-layout>\n```\n\n### Built-in Theme Variations\n\n`<vaadin-horizontal-layout>` supports the following theme variations:\n\nTheme variation | Description\n---|---\n`theme=\"margin\"` | Applies the default amount of CSS margin for the host element (specified by the theme)\n`theme=\"padding\"` | Applies the default amount of CSS padding for the host element (specified by the theme)\n`theme=\"spacing\"` | Applies the default amount of CSS margin between items (specified by the theme)\n`theme=\"wrap\"` | Items wrap to the next row when they exceed the layout width\n\n### Component's slots\n\nThe following slots are available to be set:\n\nSlot name | Description\n-------------------|---------------\nno name | Default slot\n`middle` | Slot for the content placed in the middle\n`end` | Slot for the content placed at the end",
19
+ "description": "`<vaadin-horizontal-layout>` provides a simple way to horizontally align your HTML elements.\n\n```html\n<vaadin-horizontal-layout>\n <div>Item 1</div>\n <div>Item 2</div>\n</vaadin-horizontal-layout>\n```\n\n### Built-in Theme Variations\n\n`<vaadin-horizontal-layout>` supports the following theme variations:\n\nTheme variation | Description\n---|---\n`theme=\"margin\"` | Applies the default amount of CSS margin for the host element (specified by the theme)\n`theme=\"padding\"` | Applies the default amount of CSS padding for the host element (specified by the theme)\n`theme=\"spacing\"` | Applies the default amount of CSS margin between items (specified by the theme)\n`theme=\"wrap\"` | Items wrap to the next row when they exceed the layout width\n\n### Component's slots\n\nThe following slots are available to be set:\n\nSlot name | Description\n-------------------|---------------\nno name | Default slot\n`middle` | Slot for the content placed in the middle\n`end` | Slot for the content placed at the end",
20
20
  "extension": true,
21
21
  "attributes": []
22
22
  }
package/src/vaadin-lit-horizontal-layout.js DELETED
@@ -1,44 +0,0 @@
1
- /**
2
- * @license
3
- * Copyright (c) 2017 - 2025 Vaadin Ltd.
4
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
- */
6
- import { html, LitElement } from 'lit';
7
- import { defineCustomElement } from '@vaadin/component-base/src/define.js';
8
- import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
9
- import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
10
- import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
11
- import { HorizontalLayoutMixin } from './vaadin-horizontal-layout-mixin.js';
12
- import { horizontalLayoutStyles } from './vaadin-horizontal-layout-styles.js';
13
-
14
- /**
15
- * LitElement based version of `<vaadin-horizontal-layout>` web component.
16
- *
17
- * ## Disclaimer
18
- *
19
- * This component is an experiment and not yet a part of Vaadin platform.
20
- * There is no ETA regarding specific Vaadin version where it'll land.
21
- * Feel free to try this code in your apps as per Apache 2.0 license.
22
- */
23
- class HorizontalLayout extends HorizontalLayoutMixin(ThemableMixin(ElementMixin(PolylitMixin(LitElement)))) {
24
- static get is() {
25
- return 'vaadin-horizontal-layout';
26
- }
27
-
28
- static get styles() {
29
- return horizontalLayoutStyles;
30
- }
31
-
32
- /** @protected */
33
- render() {
34
- return html`
35
- <slot></slot>
36
- <slot name="middle"></slot>
37
- <slot name="end"></slot>
38
- `;
39
- }
40
- }
41
-
42
- defineCustomElement(HorizontalLayout);
43
-
44
- export { HorizontalLayout };
package/theme/lumo/vaadin-lit-horizontal-layout.d.ts DELETED
@@ -1,2 +0,0 @@
1
- import './vaadin-horizontal-layout-styles.js';
2
- import '../../src/vaadin-lit-horizontal-layout.js';
package/theme/lumo/vaadin-lit-horizontal-layout.js DELETED
@@ -1,2 +0,0 @@
1
- import './vaadin-horizontal-layout-styles.js';
2
- import '../../src/vaadin-lit-horizontal-layout.js';
package/theme/material/vaadin-horizontal-layout-styles.d.ts DELETED
@@ -1 +0,0 @@
1
- export {};
package/theme/material/vaadin-horizontal-layout-styles.js DELETED
@@ -1,37 +0,0 @@
1
- import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
2
-
3
- const horizontalLayout = css`
4
- [theme~='margin'] {
5
- margin: 16px;
6
- }
7
-
8
- [theme~='padding'] {
9
- padding: 16px;
10
- }
11
-
12
- :host([theme~='spacing-xs']) {
13
- gap: 4px;
14
- }
15
-
16
- :host([theme~='spacing-s']) {
17
- gap: 8px;
18
- }
19
-
20
- :host([theme~='spacing']) {
21
- gap: 16px;
22
- }
23
-
24
- :host([theme~='spacing-l']) {
25
- gap: 24px;
26
- }
27
-
28
- :host([theme~='spacing-xl']) {
29
- gap: 40px;
30
- }
31
-
32
- :host([theme~='wrap']) {
33
- flex-wrap: wrap;
34
- }
35
- `;
36
-
37
- registerStyles('vaadin-horizontal-layout', horizontalLayout, { moduleId: 'material-horizontal-layout' });
package/theme/material/vaadin-horizontal-layout.d.ts DELETED
@@ -1,2 +0,0 @@
1
- import './vaadin-horizontal-layout-styles.js';
2
- import '../../src/vaadin-horizontal-layout.js';
package/theme/material/vaadin-horizontal-layout.js DELETED
@@ -1,2 +0,0 @@
1
- import './vaadin-horizontal-layout-styles.js';
2
- import '../../src/vaadin-horizontal-layout.js';
package/theme/material/vaadin-lit-horizontal-layout.d.ts DELETED
@@ -1,2 +0,0 @@
1
- import './vaadin-horizontal-layout-styles.js';
2
- import '../../src/vaadin-lit-horizontal-layout.js';
package/theme/material/vaadin-lit-horizontal-layout.js DELETED
@@ -1,2 +0,0 @@
1
- import './vaadin-horizontal-layout-styles.js';
2
- import '../../src/vaadin-lit-horizontal-layout.js';
package/vaadin-lit-horizontal-layout.d.ts DELETED
@@ -1 +0,0 @@
1
- export * from './vaadin-horizontal-layout.js';
package/vaadin-lit-horizontal-layout.js DELETED
@@ -1,2 +0,0 @@
1
- import './theme/lumo/vaadin-lit-horizontal-layout.js';
2
- export * from './src/vaadin-lit-horizontal-layout.js';