@vaadin/vertical-layout 25.0.0-alpha7 → 25.0.0-alpha9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/vertical-layout",
-  "version": "25.0.0-alpha7",
+  "version": "25.0.0-alpha9",
   "publishConfig": {
     "access": "public"
   },
@@ -21,6 +21,8 @@
   "type": "module",
   "files": [
     "src",
+    "!src/styles/*-base-styles.d.ts",
+    "!src/styles/*-base-styles.js",
     "theme",
     "vaadin-*.d.ts",
     "vaadin-*.js",
@@ -34,19 +36,19 @@
     "web-component"
   ],
   "dependencies": {
-    "@vaadin/component-base": "25.0.0-alpha7",
-    "@vaadin/vaadin-lumo-styles": "25.0.0-alpha7",
-    "@vaadin/vaadin-themable-mixin": "25.0.0-alpha7",
+    "@vaadin/component-base": "25.0.0-alpha9",
+    "@vaadin/vaadin-lumo-styles": "25.0.0-alpha9",
+    "@vaadin/vaadin-themable-mixin": "25.0.0-alpha9",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "25.0.0-alpha7",
-    "@vaadin/test-runner-commands": "25.0.0-alpha7",
+    "@vaadin/chai-plugins": "25.0.0-alpha9",
+    "@vaadin/test-runner-commands": "25.0.0-alpha9",
     "@vaadin/testing-helpers": "^2.0.0"
   },
   "web-types": [
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "87f72707ce6866892f8be5782fa0da008e87dcbc"
+  "gitHead": "bbe4720721e0955ffc87a79b412bee38b1f0eb1e"
 }

package/src/styles/vaadin-vertical-layout-base-styles.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import type { CSSResult } from 'lit';
+
+export const verticalLayoutStyles: CSSResult[];

package/src/styles/vaadin-vertical-layout-base-styles.js

@@ -0,0 +1,55 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import '@vaadin/component-base/src/style-props.js';
+import { css } from 'lit';
+
+export const baseStyles = css`
+  :host {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    box-sizing: border-box;
+  }
+
+  :host([hidden]) {
+    display: none !important;
+  }
+
+  /* Theme variations */
+  :host([theme~='margin']) {
+    margin: var(--vaadin-vertical-layout-margin, var(--vaadin-padding));
+  }
+
+  :host([theme~='padding']) {
+    padding: var(--vaadin-vertical-layout-margin, var(--vaadin-padding));
+  }
+
+  :host([theme~='spacing']) {
+    gap: var(--vaadin-vertical-layout-gap, var(--vaadin-gap-container-block));
+  }
+
+  :host([theme~='wrap']) {
+    flex-wrap: wrap;
+  }
+`;
+
+// Layout improvements are part of a feature for Flow users where children that have been configured to use full size
+// using `HasSize.setSizeFull()` and others, get additional styles so that they effectively take the remaining space in
+// the layout, rather than explicitly use 100% width/height. The respective data attributes are set by Flow's `HasSize`
+// class.
+const enableLayoutImprovements = window.Vaadin.featureFlags.layoutComponentImprovements;
+const layoutImprovementStyles = css`
+  ::slotted([data-height-full]) {
+    flex: 1;
+  }
+
+  ::slotted(vaadin-horizontal-layout[data-height-full]),
+  ::slotted(vaadin-vertical-layout[data-height-full]) {
+    min-height: 0;
+  }
+`;
+
+export const verticalLayoutStyles = enableLayoutImprovements ? [baseStyles, layoutImprovementStyles] : [baseStyles];

package/src/vaadin-vertical-layout.d.ts

@@ -9,7 +9,7 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mix
 /**
  * `<vaadin-vertical-layout>` provides a simple way to vertically align your HTML elements.
  *
- * ```
+ * ```html
  * <vaadin-vertical-layout>
  *   <div>Item 1</div>
  *   <div>Item 2</div>

package/src/vaadin-vertical-layout.js

@@ -14,7 +14,7 @@ import { verticalLayoutStyles } from './styles/vaadin-vertical-layout-core-style
 /**
  * `<vaadin-vertical-layout>` provides a simple way to vertically align your HTML elements.
  *
- * ```
+ * ```html
  * <vaadin-vertical-layout>
  *   <div>Item 1</div>
  *   <div>Item 2</div>
@@ -37,7 +37,7 @@ import { verticalLayoutStyles } from './styles/vaadin-vertical-layout-core-style
  * @mixes ThemableMixin
  * @mixes ElementMixin
  */
-class VerticalLayout extends ThemableMixin(ElementMixin(LumoInjectionMixin(PolylitMixin(LitElement)))) {
+class VerticalLayout extends ThemableMixin(ElementMixin(PolylitMixin(LumoInjectionMixin(LitElement)))) {
   static get is() {
     return 'vaadin-vertical-layout';
   }

package/web-types.json

@@ -1,14 +1,14 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/vertical-layout",
-  "version": "25.0.0-alpha7",
+  "version": "25.0.0-alpha9",
   "description-markup": "markdown",
   "contributions": {
     "html": {
       "elements": [
         {
           "name": "vaadin-vertical-layout",
-          "description": "`<vaadin-vertical-layout>` provides a simple way to vertically align your HTML elements.\n\n```\n<vaadin-vertical-layout>\n  <div>Item 1</div>\n  <div>Item 2</div>\n</vaadin-vertical-layout>\n```\n\n### Built-in Theme Variations\n\n`<vaadin-vertical-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 height",
+          "description": "`<vaadin-vertical-layout>` provides a simple way to vertically align your HTML elements.\n\n```html\n<vaadin-vertical-layout>\n  <div>Item 1</div>\n  <div>Item 2</div>\n</vaadin-vertical-layout>\n```\n\n### Built-in Theme Variations\n\n`<vaadin-vertical-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 height",
           "attributes": [
             {
               "name": "theme",

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/vertical-layout",
-  "version": "25.0.0-alpha7",
+  "version": "25.0.0-alpha9",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {
@@ -16,7 +16,7 @@
       "elements": [
         {
           "name": "vaadin-vertical-layout",
-          "description": "`<vaadin-vertical-layout>` provides a simple way to vertically align your HTML elements.\n\n```\n<vaadin-vertical-layout>\n  <div>Item 1</div>\n  <div>Item 2</div>\n</vaadin-vertical-layout>\n```\n\n### Built-in Theme Variations\n\n`<vaadin-vertical-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 height",
+          "description": "`<vaadin-vertical-layout>` provides a simple way to vertically align your HTML elements.\n\n```html\n<vaadin-vertical-layout>\n  <div>Item 1</div>\n  <div>Item 2</div>\n</vaadin-vertical-layout>\n```\n\n### Built-in Theme Variations\n\n`<vaadin-vertical-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 height",
           "extension": true,
           "attributes": []
         }