@vaadin/master-detail-layout 25.0.0-alpha3 → 25.0.0-alpha4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/master-detail-layout",
-  "version": "25.0.0-alpha3",
+  "version": "25.0.0-alpha4",
   "publishConfig": {
     "access": "public"
   },
@@ -34,14 +34,14 @@
     "web-component"
   ],
   "dependencies": {
-    "@vaadin/a11y-base": "25.0.0-alpha3",
-    "@vaadin/component-base": "25.0.0-alpha3",
-    "@vaadin/vaadin-lumo-styles": "25.0.0-alpha3",
-    "@vaadin/vaadin-themable-mixin": "25.0.0-alpha3",
+    "@vaadin/a11y-base": "25.0.0-alpha4",
+    "@vaadin/component-base": "25.0.0-alpha4",
+    "@vaadin/vaadin-lumo-styles": "25.0.0-alpha4",
+    "@vaadin/vaadin-themable-mixin": "25.0.0-alpha4",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "25.0.0-alpha3",
+    "@vaadin/chai-plugins": "25.0.0-alpha4",
     "@vaadin/testing-helpers": "^2.0.0",
     "sinon": "^18.0.0"
   },
@@ -49,5 +49,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "8367dd20a47f53ca5589ad349a8e286ec2673055"
+  "gitHead": "ce4421f0daf26027b863b91787a474e4cc264344"
 }

package/src/styles/vaadin-master-detail-layout-styles.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @license
+ * Copyright (c) 2025 - 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 masterDetailLayoutStyles: CSSResult;

package/src/styles/vaadin-master-detail-layout-styles.js

@@ -0,0 +1,155 @@
+/**
+ * @license
+ * Copyright (c) 2025 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { css } from 'lit';
+
+export const masterDetailLayoutStyles = css`
+  :host {
+    display: flex;
+    box-sizing: border-box;
+    height: 100%;
+  }
+
+  :host([hidden]) {
+    display: none !important;
+  }
+
+  :host(:not([has-detail])) [part='detail'],
+  [part='backdrop'] {
+    display: none;
+  }
+
+  :host([orientation='horizontal']) [part='master'] {
+    max-width: 100%;
+  }
+
+  /* Drawer mode */
+  :host(:is([drawer], [stack])) {
+    position: relative;
+  }
+
+  :host(:is([drawer], [stack])[containment='layout']) [part='detail'],
+  :host([drawer][containment='layout']) [part='backdrop'] {
+    position: absolute;
+  }
+
+  :host(:is([drawer], [stack])[containment='viewport']) [part='detail'],
+  :host([drawer][containment='viewport']) [part='backdrop'] {
+    position: fixed;
+  }
+
+  :host([drawer][has-detail]) [part='backdrop'] {
+    display: block;
+    inset: 0;
+    z-index: 1;
+  }
+
+  :host(:is([drawer], [stack])) [part='detail'] {
+    z-index: 1;
+  }
+
+  :host([drawer][orientation='horizontal']) [part='detail'] {
+    inset-inline-end: 0;
+    height: 100%;
+    width: var(--_detail-min-size, min-content);
+    max-width: 100%;
+  }
+
+  :host([drawer][orientation='horizontal'][containment='viewport']) [part='detail'] {
+    inset-block-start: 0;
+  }
+
+  /* No fixed size */
+  :host(:not([has-master-size])) [part='master'],
+  :host(:not([has-detail-size])) [part='detail'] {
+    flex-grow: 1;
+    flex-basis: 50%;
+  }
+
+  /* Fixed size */
+  :host([has-master-size]) [part='master'],
+  :host([has-detail-size]) [part='detail'] {
+    flex-shrink: 0;
+  }
+
+  :host([has-master-size][orientation='horizontal']) [part='master'] {
+    width: var(--_master-size);
+  }
+
+  :host([has-detail-size][orientation='horizontal']:not([stack])) [part='detail'] {
+    width: var(--_detail-size);
+  }
+
+  :host([has-master-size][has-detail-size]) [part='master'] {
+    flex-grow: 1;
+    flex-basis: var(--_master-size);
+  }
+
+  :host([has-master-size][has-detail-size]) [part='detail'] {
+    flex-grow: 1;
+    flex-basis: var(--_detail-size);
+  }
+
+  /* Min size */
+  :host([has-master-min-size][has-detail][orientation='horizontal']:not([drawer]):not([stack])) [part='master'] {
+    min-width: var(--_master-min-size);
+  }
+
+  :host([has-detail-min-size][orientation='horizontal']:not([drawer]):not([stack])) [part='detail'] {
+    min-width: var(--_detail-min-size);
+  }
+
+  :host([has-master-min-size]) [part='master'],
+  :host([has-detail-min-size]) [part='detail'] {
+    flex-shrink: 0;
+  }
+
+  /* Vertical */
+  :host([orientation='vertical']) {
+    flex-direction: column;
+  }
+
+  :host([orientation='vertical'][drawer]) [part='master'] {
+    max-height: 100%;
+  }
+
+  :host([orientation='vertical'][drawer]) [part='detail'] {
+    inset-block-end: 0;
+    width: 100%;
+    height: var(--_detail-min-size, min-content);
+  }
+
+  :host([drawer][orientation='vertical'][containment='viewport']) [part='detail'] {
+    inset-inline-start: 0;
+  }
+
+  /* Fixed size */
+  :host([has-master-size][orientation='vertical']) [part='master'] {
+    height: var(--_master-size);
+  }
+
+  :host([has-detail-size][orientation='vertical']:not([stack])) [part='detail'] {
+    height: var(--_detail-size);
+  }
+
+  /* Min size */
+  :host([has-master-min-size][orientation='vertical']:not([drawer])) [part='master'],
+  :host([has-master-min-size][orientation='vertical'][drawer]) {
+    min-height: var(--_master-min-size);
+  }
+
+  :host([has-detail-min-size][orientation='vertical']:not([drawer]):not([stack])) [part='detail'] {
+    min-height: var(--_detail-min-size);
+  }
+
+  /* Stack mode */
+  :host([stack]) [part='master'] {
+    max-height: 100%;
+  }
+
+  :host([stack]) [part='detail'] {
+    inset: 0;
+  }
+`;

package/src/styles/vaadin-master-detail-layout-transition-styles.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @license
+ * Copyright (c) 2025 - 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 masterDetailLayoutTransitionStyles: CSSResult;

package/src/{vaadin-master-detail-layout-transition-styles.js → styles/vaadin-master-detail-layout-transition-styles.js}

@@ -5,7 +5,7 @@
  */
 import { css } from 'lit';
 
-export const transitionStyles = css`
+export const masterDetailLayoutTransitionStyles = css`
   html:not([dir='rtl']) {
     --_vaadin-master-detail-layout-dir-multiplier: 1;
   }

package/src/vaadin-master-detail-layout.js

@@ -3,7 +3,7 @@
  * Copyright (c) 2025 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { css, html, LitElement, nothing } from 'lit';
+import { html, LitElement, nothing } from 'lit';
 import { getFocusableElements } from '@vaadin/a11y-base/src/focus-utils.js';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
@@ -11,7 +11,8 @@ import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
 import { ResizeMixin } from '@vaadin/component-base/src/resize-mixin.js';
 import { SlotStylesMixin } from '@vaadin/component-base/src/slot-styles-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-import { transitionStyles } from './vaadin-master-detail-layout-transition-styles.js';
+import { masterDetailLayoutStyles } from './styles/vaadin-master-detail-layout-styles.js';
+import { masterDetailLayoutTransitionStyles } from './styles/vaadin-master-detail-layout-transition-styles.js';
 
 /**
  * `<vaadin-master-detail-layout>` is a web component for building UIs with a master
@@ -63,154 +64,7 @@ class MasterDetailLayout extends SlotStylesMixin(ResizeMixin(ElementMixin(Themab
   }
 
   static get styles() {
-    return css`
-      :host {
-        display: flex;
-        box-sizing: border-box;
-        height: 100%;
-      }
-
-      :host([hidden]) {
-        display: none !important;
-      }
-
-      :host(:not([has-detail])) [part='detail'],
-      [part='backdrop'] {
-        display: none;
-      }
-
-      :host([orientation='horizontal']) [part='master'] {
-        max-width: 100%;
-      }
-
-      /* Drawer mode */
-      :host(:is([drawer], [stack])) {
-        position: relative;
-      }
-
-      :host(:is([drawer], [stack])[containment='layout']) [part='detail'],
-      :host([drawer][containment='layout']) [part='backdrop'] {
-        position: absolute;
-      }
-
-      :host(:is([drawer], [stack])[containment='viewport']) [part='detail'],
-      :host([drawer][containment='viewport']) [part='backdrop'] {
-        position: fixed;
-      }
-
-      :host([drawer][has-detail]) [part='backdrop'] {
-        display: block;
-        inset: 0;
-        z-index: 1;
-      }
-
-      :host(:is([drawer], [stack])) [part='detail'] {
-        z-index: 1;
-      }
-
-      :host([drawer][orientation='horizontal']) [part='detail'] {
-        inset-inline-end: 0;
-        height: 100%;
-        width: var(--_detail-min-size, min-content);
-        max-width: 100%;
-      }
-
-      :host([drawer][orientation='horizontal'][containment='viewport']) [part='detail'] {
-        inset-block-start: 0;
-      }
-
-      /* No fixed size */
-      :host(:not([has-master-size])) [part='master'],
-      :host(:not([has-detail-size])) [part='detail'] {
-        flex-grow: 1;
-        flex-basis: 50%;
-      }
-
-      /* Fixed size */
-      :host([has-master-size]) [part='master'],
-      :host([has-detail-size]) [part='detail'] {
-        flex-shrink: 0;
-      }
-
-      :host([has-master-size][orientation='horizontal']) [part='master'] {
-        width: var(--_master-size);
-      }
-
-      :host([has-detail-size][orientation='horizontal']:not([stack])) [part='detail'] {
-        width: var(--_detail-size);
-      }
-
-      :host([has-master-size][has-detail-size]) [part='master'] {
-        flex-grow: 1;
-        flex-basis: var(--_master-size);
-      }
-
-      :host([has-master-size][has-detail-size]) [part='detail'] {
-        flex-grow: 1;
-        flex-basis: var(--_detail-size);
-      }
-
-      /* Min size */
-      :host([has-master-min-size][has-detail][orientation='horizontal']:not([drawer]):not([stack])) [part='master'] {
-        min-width: var(--_master-min-size);
-      }
-
-      :host([has-detail-min-size][orientation='horizontal']:not([drawer]):not([stack])) [part='detail'] {
-        min-width: var(--_detail-min-size);
-      }
-
-      :host([has-master-min-size]) [part='master'],
-      :host([has-detail-min-size]) [part='detail'] {
-        flex-shrink: 0;
-      }
-
-      /* Vertical */
-      :host([orientation='vertical']) {
-        flex-direction: column;
-      }
-
-      :host([orientation='vertical'][drawer]) [part='master'] {
-        max-height: 100%;
-      }
-
-      :host([orientation='vertical'][drawer]) [part='detail'] {
-        inset-block-end: 0;
-        width: 100%;
-        height: var(--_detail-min-size, min-content);
-      }
-
-      :host([drawer][orientation='vertical'][containment='viewport']) [part='detail'] {
-        inset-inline-start: 0;
-      }
-
-      /* Fixed size */
-      :host([has-master-size][orientation='vertical']) [part='master'] {
-        height: var(--_master-size);
-      }
-
-      :host([has-detail-size][orientation='vertical']:not([stack])) [part='detail'] {
-        height: var(--_detail-size);
-      }
-
-      /* Min size */
-      :host([has-master-min-size][orientation='vertical']:not([drawer])) [part='master'],
-      :host([has-master-min-size][orientation='vertical'][drawer]) {
-        min-height: var(--_master-min-size);
-      }
-
-      :host([has-detail-min-size][orientation='vertical']:not([drawer]):not([stack])) [part='detail'] {
-        min-height: var(--_detail-min-size);
-      }
-
-      /* Stack mode */
-      :host([stack]) [part='master'] {
-        max-height: 100%;
-      }
-
-      :host([stack]) [part='detail'] {
-        inset: 0;
-      }
-    `;
+    return masterDetailLayoutStyles;
   }
 
   static get properties() {
@@ -388,7 +242,7 @@ class MasterDetailLayout extends SlotStylesMixin(ResizeMixin(ElementMixin(Themab
 
   /** @override */
   get slotStyles() {
-    return [transitionStyles];
+    return [masterDetailLayoutTransitionStyles];
   }
 
   /** @protected */

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/master-detail-layout",
-  "version": "25.0.0-alpha3",
+  "version": "25.0.0-alpha4",
   "description-markup": "markdown",
   "contributions": {
     "html": {

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/master-detail-layout",
-  "version": "25.0.0-alpha3",
+  "version": "25.0.0-alpha4",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {