@vaadin/horizontal-layout - npm Package Compare versions

Comparing version 24.7.0-alpha1 to 24.7.0-alpha10

package.json

 {
   "name": "@vaadin/horizontal-layout",
-  "version": "24.7.0-alpha1",
+  "version": "24.7.0-alpha10",
   "publishConfig": {
@@ -39,11 +39,12 @@ "access": "public"
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/component-base": "24.7.0-alpha1",
-    "@vaadin/vaadin-lumo-styles": "24.7.0-alpha1",
-    "@vaadin/vaadin-material-styles": "24.7.0-alpha1",
-    "@vaadin/vaadin-themable-mixin": "24.7.0-alpha1",
+    "@vaadin/component-base": "24.7.0-alpha10",
+    "@vaadin/vaadin-lumo-styles": "24.7.0-alpha10",
+    "@vaadin/vaadin-material-styles": "24.7.0-alpha10",
+    "@vaadin/vaadin-themable-mixin": "24.7.0-alpha10",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "24.7.0-alpha1",
-    "@vaadin/testing-helpers": "^1.0.0"
+    "@vaadin/chai-plugins": "24.7.0-alpha10",
+    "@vaadin/test-runner-commands": "24.7.0-alpha10",
+    "@vaadin/testing-helpers": "^1.1.0"
   },
@@ -54,3 +55,3 @@ "web-types": [
   ],
-  "gitHead": "04be941c9a7b659871c97f31b9cc3ffd7528087b"
+  "gitHead": "c0f8933df2a6a40648d3fb9cfbae6bbf86a8aa90"
 }

src/vaadin-horizontal-layout.d.ts

 /**
  * @license
- * Copyright (c) 2017 - 2024 Vaadin Ltd.
+ * Copyright (c) 2017 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
@@ -8,2 +8,3 @@ */
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { HorizontalLayoutMixin } from './vaadin-horizontal-layout-mixin.js';
 
@@ -30,4 +31,14 @@ /**
  * `theme="wrap"` | Items wrap to the next row when they exceed the layout width
+ *
+ * ### Component's slots
+ *
+ * The following slots are available to be set:
+ *
+ * Slot name          | Description
+ * -------------------|---------------
+ * no name            | Default slot
+ * `middle`           | Slot for the content placed in the middle
+ * `end`              | Slot for the content placed at the end
  */
-declare class HorizontalLayout extends ThemableMixin(ElementMixin(HTMLElement)) {}
+declare class HorizontalLayout extends HorizontalLayoutMixin(ThemableMixin(ElementMixin(HTMLElement))) {}
 
@@ -34,0 +45,0 @@ declare global {

src/vaadin-horizontal-layout.js

 /**
  * @license
- * Copyright (c) 2017 - 2024 Vaadin Ltd.
+ * Copyright (c) 2017 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
@@ -9,4 +9,8 @@ */
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
-import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { registerStyles, ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { HorizontalLayoutMixin } from './vaadin-horizontal-layout-mixin.js';
+import { horizontalLayoutStyles } from './vaadin-horizontal-layout-styles.js';
 
+registerStyles('vaadin-horizontal-layout', horizontalLayoutStyles, { moduleId: 'vaadin-horizontal-layout-styles' });
+
 /**
@@ -33,2 +37,12 @@ * `<vaadin-horizontal-layout>` provides a simple way to horizontally align your HTML elements.
  *
+ * ### Component's slots
+ *
+ * The following slots are available to be set:
+ *
+ * Slot name          | Description
+ * -------------------|---------------
+ * no name            | Default slot
+ * `middle`           | Slot for the content placed in the middle
+ * `end`              | Slot for the content placed at the end
+ *
  * @customElement
@@ -38,31 +52,10 @@ * @extends HTMLElement
  * @mixes ElementMixin
+ * @mixes HorizontalLayoutMixin
  */
-class HorizontalLayout extends ElementMixin(ThemableMixin(PolymerElement)) {
+class HorizontalLayout extends HorizontalLayoutMixin(ElementMixin(ThemableMixin(PolymerElement))) {
   static get template() {
     return html`
-      <style>
-        :host {
-          display: flex;
-          box-sizing: border-box;
-        }
-
-        :host([hidden]) {
-          display: none !important;
-        }
-
-        /* Theme variations */
-        :host([theme~='margin']) {
-          margin: 1em;
-        }
-
-        :host([theme~='padding']) {
-          padding: 1em;
-        }
-
-        :host([theme~='spacing']) {
-          gap: 1em;
-        }
-      </style>
-
       <slot></slot>
+      <slot name="middle"></slot>
+      <slot name="end"></slot>
     `;
@@ -69,0 +62,0 @@ }

src/vaadin-lit-horizontal-layout.d.ts

 /**
  * @license
- * Copyright (c) 2017 - 2023 Vaadin Ltd.
+ * Copyright (c) 2017 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 export * from './vaadin-horizontal-layout.js';

src/vaadin-lit-horizontal-layout.js

 /**
  * @license
- * Copyright (c) 2017 - 2024 Vaadin Ltd.
+ * Copyright (c) 2017 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { css, html, LitElement } from 'lit';
+import { html, LitElement } from 'lit';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
@@ -11,2 +11,4 @@ import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { HorizontalLayoutMixin } from './vaadin-horizontal-layout-mixin.js';
+import { horizontalLayoutStyles } from './vaadin-horizontal-layout-styles.js';
 
@@ -22,29 +24,3 @@ /**
  */
-class HorizontalLayout extends ThemableMixin(ElementMixin(PolylitMixin(LitElement))) {
-  static get styles() {
-    return css`
-      :host {
-        display: flex;
-        box-sizing: border-box;
-      }
-
-      :host([hidden]) {
-        display: none !important;
-      }
-
-      /* Theme variations */
-      :host([theme~='margin']) {
-        margin: 1em;
-      }
-
-      :host([theme~='padding']) {
-        padding: 1em;
-      }
-
-      :host([theme~='spacing']) {
-        gap: 1em;
-      }
-    `;
-  }
-
+class HorizontalLayout extends HorizontalLayoutMixin(ThemableMixin(ElementMixin(PolylitMixin(LitElement)))) {
   static get is() {
@@ -54,4 +30,13 @@ return 'vaadin-horizontal-layout';
 
+  static get styles() {
+    return horizontalLayoutStyles;
+  }
+
+  /** @protected */
   render() {
-    return html`<slot></slot>`;
+    return html`
+      <slot></slot>
+      <slot name="middle"></slot>
+      <slot name="end"></slot>
+    `;
   }
@@ -58,0 +43,0 @@ }

web-types.json

 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/horizontal-layout",
-  "version": "24.7.0-alpha1",
+  "version": "24.7.0-alpha10",
   "description-markup": "markdown",
@@ -11,3 +11,3 @@ "contributions": {
           "name": "vaadin-horizontal-layout",
-          "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",
+          "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",
           "attributes": [
@@ -14,0 +14,0 @@ {

web-types.lit.json

 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/horizontal-layout",
-  "version": "24.7.0-alpha1",
+  "version": "24.7.0-alpha10",
   "description-markup": "markdown",
@@ -19,3 +19,3 @@ "framework": "lit",
           "name": "vaadin-horizontal-layout",
-          "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",
+          "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",
           "extension": true,
@@ -22,0 +22,0 @@ "attributes": []

No alert changes

Improved metrics

Total package byte prevSize

30941

increased by26.65%

Number of package files

29

increased by16%

Lines of code

436

increased by45.82%

Worsened metrics

Dev dependency count

3

increased by50%

Dependency changes

• + Added@vaadin/component-base@24.7.0-alpha10(transitive)

• + Added@vaadin/icon@24.7.0-alpha10(transitive)

• + Added@vaadin/vaadin-lumo-styles@24.7.0-alpha10(transitive)

• + Added@vaadin/vaadin-material-styles@24.7.0-alpha10(transitive)

• + Added@vaadin/vaadin-themable-mixin@24.7.0-alpha10(transitive)

• - Removed@vaadin/component-base@24.7.0-alpha1(transitive)

• - Removed@vaadin/icon@24.7.0-alpha1(transitive)

• - Removed@vaadin/vaadin-lumo-styles@24.7.0-alpha1(transitive)

• - Removed@vaadin/vaadin-material-styles@24.7.0-alpha1(transitive)

• - Removed@vaadin/vaadin-themable-mixin@24.7.0-alpha1(transitive)

• Updated@vaadin/component-base@24.7.0-alpha10

• Updated@vaadin/vaadin-lumo-styles@24.7.0-alpha10

• Updated@vaadin/vaadin-material-styles@24.7.0-alpha10

• Updated@vaadin/vaadin-themable-mixin@24.7.0-alpha10