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

package/custom-elements.json

@@ -33,7 +33,7 @@
               "type": {
                 "text": "string"
               },
-              "description": "Size (in CSS length units) to be set on the detail area in\nthe CSS grid layout. If there is not enough space to show\nmaster and detail areas next to each other, the detail area\nis shown as an overlay. Defaults to 15em.",
+              "description": "Size (in CSS length units) to be set on the detail area in\nthe CSS grid layout. When there is not enough space to show\nmaster and detail areas next to each other, the detail area\nis shown as an overlay.\n<p>\nIf not specified, the size is determined automatically by measuring\nthe detail content in a `min-content` CSS grid column when it first\nbecomes visible, and then caching the resulting intrinsic size. To\nrecalculate the cached intrinsic size, use the `recalculateLayout`\nmethod.",
               "attribute": "detail-size"
             },
             {
@@ -95,6 +95,11 @@
               },
               "description": "Size (in CSS length units) for the detail area when shown as an\noverlay. When not set, falls back to `detailSize`. Set to `100%`\nto make the detail cover the full layout.",
               "attribute": "overlay-size"
+            },
+            {
+              "kind": "method",
+              "name": "recalculateLayout",
+              "description": "When `detailSize` is not explicitly set, re-measures the cached intrinsic size of\nthe detail content by placing it in a min-content CSS grid column, then repeats\nthis process for ancestor master-detail layouts without an explicit `detailSize`,\nif any, so that their detail areas also adapt.\n\nCall this method after changing the detail content in a way that affects its intrinsic\nsize — for example, when opening a detail in a nested master-detail layout that was\nnot previously visible.\n\nNOTE: This method can be expensive in large layouts as it triggers consecutive\nsynchronous DOM reads and writes."
             }
           ],
           "events": [
@@ -119,7 +124,7 @@
               "type": {
                 "text": "string"
               },
-              "description": "Size (in CSS length units) to be set on the detail area in\nthe CSS grid layout. If there is not enough space to show\nmaster and detail areas next to each other, the detail area\nis shown as an overlay. Defaults to 15em.",
+              "description": "Size (in CSS length units) to be set on the detail area in\nthe CSS grid layout. When there is not enough space to show\nmaster and detail areas next to each other, the detail area\nis shown as an overlay.\n<p>\nIf not specified, the size is determined automatically by measuring\nthe detail content in a `min-content` CSS grid column when it first\nbecomes visible, and then caching the resulting intrinsic size. To\nrecalculate the cached intrinsic size, use the `recalculateLayout`\nmethod.",
               "fieldName": "detailSize"
             },
             {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/master-detail-layout",
-  "version": "25.2.0-alpha3",
+  "version": "25.2.0-alpha4",
   "publishConfig": {
     "access": "public"
   },
@@ -34,16 +34,16 @@
     "web-component"
   ],
   "dependencies": {
-    "@vaadin/a11y-base": "25.2.0-alpha3",
-    "@vaadin/component-base": "25.2.0-alpha3",
-    "@vaadin/vaadin-themable-mixin": "25.2.0-alpha3",
+    "@vaadin/a11y-base": "25.2.0-alpha4",
+    "@vaadin/component-base": "25.2.0-alpha4",
+    "@vaadin/vaadin-themable-mixin": "25.2.0-alpha4",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/aura": "25.2.0-alpha3",
-    "@vaadin/chai-plugins": "25.2.0-alpha3",
+    "@vaadin/aura": "25.2.0-alpha4",
+    "@vaadin/chai-plugins": "25.2.0-alpha4",
     "@vaadin/testing-helpers": "^2.0.0",
-    "@vaadin/vaadin-lumo-styles": "25.2.0-alpha3",
+    "@vaadin/vaadin-lumo-styles": "25.2.0-alpha4",
     "sinon": "^21.0.2"
   },
   "customElements": "custom-elements.json",
@@ -51,5 +51,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "6ba3d66b9eeb541945dc071e72e05dac2d4c3e0b"
+  "gitHead": "fc054a1bed540874ef3b5000828c191cc12044ec"
 }

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

@@ -8,10 +8,12 @@ import { css } from 'lit';
 
 export const masterDetailLayoutStyles = css`
   :host {
-    --_master-size: 30em;
-    --_detail-size: 15em;
-    --_master-column: var(--_master-size) 0;
-    --_detail-column: var(--_detail-size) 0;
+    --_master-size: 30rem;
+    --_master-extra: 0px;
+    --_detail-size: var(--_detail-cached-size);
+    --_detail-extra: 0px;
+    --_detail-cached-size: min-content;
+
     --_transition-duration: 0s;
     --_transition-easing: cubic-bezier(0.78, 0, 0.22, 1);
     --_rtl-multiplier: 1;
@@ -22,12 +24,16 @@ export const masterDetailLayoutStyles = css`
     height: 100%;
     position: relative;
     z-index: 0;
-    overflow: hidden;
-    grid-template-columns: [master-start] var(--_master-column) [detail-start] var(--_detail-column) [detail-end];
+    overflow: clip;
+    grid-template-columns:
+      [master-start] var(--_master-size) var(--_master-extra)
+      [detail-start] var(--_detail-size) var(--_detail-extra)
+      [detail-end];
     grid-template-rows: 100%;
   }
 
-  :host([hidden]) {
+  :host([hidden]),
+  ::slotted([hidden]) {
     display: none !important;
   }
 
@@ -39,7 +45,10 @@ export const masterDetailLayoutStyles = css`
     --_detail-offscreen: 0 30px;
 
     grid-template-columns: 100%;
-    grid-template-rows: [master-start] var(--_master-column) [detail-start] var(--_detail-column) [detail-end];
+    grid-template-rows:
+      [master-start] var(--_master-size) var(--_master-extra)
+      [detail-start] var(--_detail-size) var(--_detail-extra)
+      [detail-end];
   }
 
   :is(#master, #detail, #detail-placeholder, #outgoing) {
@@ -47,11 +56,11 @@ export const masterDetailLayoutStyles = css`
   }
 
   #detail-placeholder {
-    display: none;
+    visibility: hidden;
   }
 
   :host([has-detail-placeholder]:not([has-detail], [overlay])) #detail-placeholder {
-    display: block;
+    visibility: visible;
   }
 
   #master {
@@ -86,28 +95,32 @@ export const masterDetailLayoutStyles = css`
 
   :host([expand='both']),
   :host([expand='master']) {
-    --_master-column: var(--_master-size) 1fr;
+    --_master-extra: 1fr;
+  }
+
+  :host([expand='both']:is([has-detail], [has-detail-placeholder])),
+  :host([expand='detail']:is([has-detail], [has-detail-placeholder])) {
+    --_detail-extra: 1fr;
+  }
+
+  :host([recalculating-detail-size]:is([has-detail], [has-detail-placeholder])) {
+    --_detail-extra: 0px;
   }
 
   :host([keep-detail-column-offscreen]),
   :host([has-detail-placeholder][overlay]),
   :host(:not([has-detail-placeholder], [has-detail])) {
-    --_master-column: var(--_master-size) calc(100% - var(--_master-size));
-  }
-
-  :host([expand='both']),
-  :host([expand='detail']) {
-    --_detail-column: var(--_detail-size) 1fr;
+    --_master-extra: calc(100% - var(--_master-size));
   }
 
   :host([orientation='horizontal']) #detail-placeholder,
-  :host([orientation='horizontal'][has-detail]:not([overlay])) #detail {
+  :host([orientation='horizontal']:not([overlay])) #detail {
     border-inline-start: var(--vaadin-master-detail-layout-border-width, 1px) solid
       var(--vaadin-master-detail-layout-border-color, var(--vaadin-border-color-secondary));
   }
 
   :host([orientation='vertical']) #detail-placeholder,
-  :host([orientation='vertical'][has-detail]:not([overlay])) #detail {
+  :host([orientation='vertical']:not([overlay])) #detail {
     border-top: var(--vaadin-master-detail-layout-border-width, 1px) solid
       var(--vaadin-master-detail-layout-border-color, var(--vaadin-border-color-secondary));
   }
@@ -115,10 +128,12 @@ export const masterDetailLayoutStyles = css`
   /* Detail transition: off-screen by default, on-screen when has-detail */
   #detail {
     translate: var(--_detail-offscreen);
+    visibility: hidden;
   }
 
   :host([has-detail]) #detail {
     translate: none;
+    visibility: visible;
   }
 
   #outgoing:not([hidden]) {
@@ -150,13 +165,15 @@ export const masterDetailLayoutStyles = css`
   :host([has-detail][overlay]:not([orientation='vertical'])) :is(#detail, #outgoing) {
     inset-block: 0;
     inset-inline-end: 0;
-    width: var(--_overlay-size, var(--_detail-size, min-content));
+    width: var(--_overlay-size, var(--_detail-size));
+    max-width: 100%;
   }
 
   :host([has-detail][overlay][orientation='vertical']) :is(#detail, #outgoing) {
     inset-inline: 0;
     inset-block-end: 0;
-    height: var(--_overlay-size, var(--_detail-size, min-content));
+    height: var(--_overlay-size, var(--_detail-size));
+    max-height: 100%;
   }
 
   :host([has-detail][overlay][overlay-containment='viewport']) :is(#detail, #outgoing, #backdrop) {

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

@@ -84,9 +84,15 @@ export interface MasterDetailLayoutEventMap extends HTMLElementEventMap, MasterD
 declare class MasterDetailLayout extends ThemableMixin(ElementMixin(HTMLElement)) {
   /**
    * Size (in CSS length units) to be set on the detail area in
-   * the CSS grid layout. If there is not enough space to show
+   * the CSS grid layout. When there is not enough space to show
    * master and detail areas next to each other, the detail area
-   * is shown as an overlay. Defaults to 15em.
+   * is shown as an overlay.
+   * <p>
+   * If not specified, the size is determined automatically by measuring
+   * the detail content in a `min-content` CSS grid column when it first
+   * becomes visible, and then caching the resulting intrinsic size. To
+   * recalculate the cached intrinsic size, use the `recalculateLayout`
+   * method.
    *
    * @attr {string} detail-size
    */
@@ -143,6 +149,21 @@ declare class MasterDetailLayout extends ThemableMixin(ElementMixin(HTMLElement)
    */
   noAnimation: boolean;
 
+  /**
+   * When `detailSize` is not explicitly set, re-measures the cached intrinsic size of
+   * the detail content by placing it in a min-content CSS grid column, then repeats
+   * this process for ancestor master-detail layouts without an explicit `detailSize`,
+   * if any, so that their detail areas also adapt.
+   *
+   * Call this method after changing the detail content in a way that affects its intrinsic
+   * size — for example, when opening a detail in a nested master-detail layout that was
+   * not previously visible.
+   *
+   * NOTE: This method can be expensive in large layouts as it triggers consecutive
+   * synchronous DOM reads and writes.
+   */
+  recalculateLayout(): void;
+
   addEventListener<K extends keyof MasterDetailLayoutEventMap>(
     type: K,
     listener: (this: MasterDetailLayout, ev: MasterDetailLayoutEventMap[K]) => void,

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

@@ -6,6 +6,7 @@
 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 { getClosestElement } from '@vaadin/component-base/src/dom-utils.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
@@ -20,6 +21,18 @@ function parseTrackSizes(gridTemplate) {
     .map(parseFloat);
 }
 
+function detectOverflow(hostSize, trackSizes) {
+  const [masterSize, masterExtra, detailSize] = trackSizes;
+
+  if (Math.floor(masterSize + masterExtra + detailSize) <= Math.floor(hostSize)) {
+    return false;
+  }
+  if (Math.floor(masterExtra) >= Math.floor(detailSize)) {
+    return false;
+  }
+  return true;
+}
+
 /**
  * `<vaadin-master-detail-layout>` is a web component for building UIs with a master
  * (or primary) area and a detail (or secondary) area that is displayed next to, or
@@ -105,9 +118,15 @@ class MasterDetailLayout extends ElementMixin(ThemableMixin(PolylitMixin(LitElem
     return {
       /**
        * Size (in CSS length units) to be set on the detail area in
-       * the CSS grid layout. If there is not enough space to show
+       * the CSS grid layout. When there is not enough space to show
        * master and detail areas next to each other, the detail area
-       * is shown as an overlay. Defaults to 15em.
+       * is shown as an overlay.
+       * <p>
+       * If not specified, the size is determined automatically by measuring
+       * the detail content in a `min-content` CSS grid column when it first
+       * becomes visible, and then caching the resulting intrinsic size. To
+       * recalculate the cached intrinsic size, use the `recalculateLayout`
+       * method.
        *
        * @attr {string} detail-size
        */
@@ -155,6 +174,7 @@ class MasterDetailLayout extends ElementMixin(ThemableMixin(PolylitMixin(LitElem
         value: 'horizontal',
         reflectToAttribute: true,
         sync: true,
+        observer: '__orientationChanged',
       },
 
       /**
@@ -200,6 +220,13 @@ class MasterDetailLayout extends ElementMixin(ThemableMixin(PolylitMixin(LitElem
         type: Boolean,
         sync: true,
       },
+
+      /** @private */
+      __detailCachedSize: {
+        type: String,
+        observer: '__detailCachedSizeChanged',
+        sync: true,
+      },
     };
   }
 
@@ -253,11 +280,26 @@ class MasterDetailLayout extends ElementMixin(ThemableMixin(PolylitMixin(LitElem
   /** @private */
   __masterSizeChanged(size, oldSize) {
     this.__updateStyleProperty('master-size', size, oldSize);
+
+    if (oldSize != null) {
+      this.recalculateLayout();
+    }
   }
 
   /** @private */
   __detailSizeChanged(size, oldSize) {
     this.__updateStyleProperty('detail-size', size, oldSize);
+
+    if (oldSize != null) {
+      this.recalculateLayout();
+    }
+  }
+
+  /** @private */
+  __orientationChanged(_orientation, oldOrientation) {
+    if (oldOrientation != null) {
+      this.recalculateLayout();
+    }
   }
 
   /** @private */
@@ -265,6 +307,11 @@ class MasterDetailLayout extends ElementMixin(ThemableMixin(PolylitMixin(LitElem
     this.__updateStyleProperty('overlay-size', size, oldSize);
   }
 
+  /** @private */
+  __detailCachedSizeChanged(size, oldSize) {
+    this.__updateStyleProperty('detail-cached-size', size, oldSize);
+  }
+
   /** @private */
   __updateStyleProperty(prop, size, oldSize) {
     if (size) {
@@ -297,9 +344,9 @@ class MasterDetailLayout extends ElementMixin(ThemableMixin(PolylitMixin(LitElem
    * @private
    */
   __onResize() {
-    const state = this.__computeLayoutState();
+    const state = this.__readLayoutState();
     cancelAnimationFrame(this.__resizeRaf);
-    this.__resizeRaf = requestAnimationFrame(() => this.__applyLayoutState(state));
+    this.__resizeRaf = requestAnimationFrame(() => this.__writeLayoutState(state));
   }
 
   /**
@@ -307,26 +354,56 @@ class MasterDetailLayout extends ElementMixin(ThemableMixin(PolylitMixin(LitElem
    * ResizeObserver callback where layout is already computed (no forced reflow).
    * @private
    */
-  __computeLayoutState() {
+  __readLayoutState() {
+    const isVertical = this.orientation === 'vertical';
+
     const detailContent = this.querySelector(':scope > [slot="detail"]');
     const detailPlaceholder = this.querySelector(':scope > [slot="detail-placeholder"]');
 
     const hadDetail = this.hasAttribute('has-detail');
     const hasDetail = detailContent != null && detailContent.checkVisibility();
     const hasDetailPlaceholder = !!detailPlaceholder;
-    const hasOverflow = (hasDetail || hasDetailPlaceholder) && this.__checkOverflow();
 
+    const computedStyle = getComputedStyle(this);
+    const hostSizeProp = isVertical ? 'height' : 'width';
+    const hostSize = parseFloat(computedStyle[hostSizeProp]);
+
+    const trackSizesProp = isVertical ? 'gridTemplateRows' : 'gridTemplateColumns';
+    const trackSizes = parseTrackSizes(computedStyle[trackSizesProp]);
+
+    const hasOverflow = (hasDetail || hasDetailPlaceholder) && detectOverflow(hostSize, trackSizes);
     const focusTarget = !hadDetail && hasDetail && hasOverflow ? getFocusableElements(detailContent)[0] : null;
-    return { hadDetail, hasDetail, hasDetailPlaceholder, hasOverflow, focusTarget };
+
+    return {
+      hadDetail,
+      hasDetail,
+      hasDetailPlaceholder,
+      hasOverflow,
+      focusTarget,
+      hostSize,
+      trackSizes,
+    };
   }
 
   /**
    * Applies layout state to DOM attributes. Pure writes, no reads.
    * @private
    */
-  __applyLayoutState({ hadDetail, hasDetail, hasDetailPlaceholder, hasOverflow, focusTarget }) {
-    // Set keep-detail-column-offscreen when detail first appears with overlay
-    // to prevent master width from jumping.
+  __writeLayoutState({ hadDetail, hasDetail, hasDetailPlaceholder, hasOverflow, focusTarget, trackSizes }) {
+    const [_masterSize, _masterExtra, detailSize] = trackSizes;
+
+    // If no detailSize is explicitily set, cache the intrinsic size (min-content) of
+    // the slotted detail content to use as a fallback for the detail column size
+    // while the detail content is rendered in an overlay.
+    if ((hasDetail || hasDetailPlaceholder) && this.__isDetailAutoSized && detailSize > 0) {
+      this.__detailCachedSize = this.__detailCachedSize || `${Math.ceil(detailSize)}px`;
+    } else {
+      this.__detailCachedSize = null;
+    }
+
+    // Force the detail column offscreen when it first appears and overflow
+    // is already detected. This prevents unnecessary master column shrinking,
+    // as the detail content is rendered in an overlay anyway.
     if (!hadDetail && hasDetail && hasOverflow) {
       this.setAttribute('keep-detail-column-offscreen', '');
     } else if (!hasDetail || !hasOverflow) {
@@ -346,23 +423,59 @@ class MasterDetailLayout extends ElementMixin(ThemableMixin(PolylitMixin(LitElem
     }
   }
 
-  /** @private */
-  __checkOverflow() {
-    const isVertical = this.orientation === 'vertical';
-    const computedStyle = getComputedStyle(this);
+  /**
+   * When `detailSize` is not explicitly set, re-measures the cached intrinsic size of
+   * the detail content by placing it in a min-content CSS grid column, then repeats
+   * this process for ancestor master-detail layouts without an explicit `detailSize`,
+   * if any, so that their detail areas also adapt.
+   *
+   * Call this method after changing the detail content in a way that affects its intrinsic
+   * size — for example, when opening a detail in a nested master-detail layout that was
+   * not previously visible.
+   *
+   * NOTE: This method can be expensive in large layouts as it triggers consecutive
+   * synchronous DOM reads and writes.
+   */
+  recalculateLayout() {
+    // Cancel any pending ResizeObserver rAF to prevent it from potentially
+    // overriding the layout state with stale measurements.
+    cancelAnimationFrame(this.__resizeRaf);
 
-    const hostSize = parseFloat(computedStyle[isVertical ? 'height' : 'width']);
-    const [masterSize, masterExtra, detailSize] = parseTrackSizes(
-      computedStyle[isVertical ? 'gridTemplateRows' : 'gridTemplateColumns'],
-    );
+    const invalidatedLayouts = [...this.__ancestorLayouts.filter((layout) => layout.__isDetailAutoSized), this];
 
-    if (Math.floor(masterSize + masterExtra + detailSize) <= Math.floor(hostSize)) {
-      return false;
-    }
-    if (Math.floor(masterExtra) >= Math.floor(detailSize)) {
-      return false;
-    }
-    return true;
+    // Write
+    invalidatedLayouts.forEach((layout) => {
+      layout.__detailCachedSize = null;
+
+      if (layout.__isDetailAutoSized) {
+        layout.removeAttribute('overlay');
+        layout.toggleAttribute('recalculating-detail-size', true);
+      }
+    });
+
+    // Read/Write
+    invalidatedLayouts.forEach((layout) => {
+      const state = layout.__readLayoutState();
+      layout.__writeLayoutState(state);
+    });
+
+    // Write
+    invalidatedLayouts.forEach((layout) => {
+      if (layout.__isDetailAutoSized) {
+        layout.toggleAttribute('recalculating-detail-size', false);
+      }
+    });
+  }
+
+  /** @private */
+  get __isDetailAutoSized() {
+    return this.detailSize == null;
+  }
+
+  /** @private */
+  get __ancestorLayouts() {
+    const parent = getClosestElement(this.constructor.is, this.parentNode);
+    return parent ? [...parent.__ancestorLayouts, parent] : [];
   }
 
   /** @private */
@@ -413,10 +526,7 @@ class MasterDetailLayout extends ElementMixin(ThemableMixin(PolylitMixin(LitElem
 
     if (skipTransition || this.noAnimation) {
       updateSlot();
-      queueMicrotask(() => {
-        const state = this.__computeLayoutState();
-        this.__applyLayoutState(state);
-      });
+      queueMicrotask(() => this.recalculateLayout());
       return Promise.resolve();
     }
 
@@ -561,8 +671,7 @@ class MasterDetailLayout extends ElementMixin(ThemableMixin(PolylitMixin(LitElem
    * @protected
    */
   _finishTransition() {
-    const state = this.__computeLayoutState();
-    this.__applyLayoutState(state);
+    queueMicrotask(() => this.recalculateLayout());
   }
 
   /**
@@ -670,10 +779,6 @@ class MasterDetailLayout extends ElementMixin(ThemableMixin(PolylitMixin(LitElem
     }
     this.removeAttribute('transition');
     this.__clearOutgoing();
-    // Cancel any pending ResizeObserver rAF that captured stale state
-    // during the animation — _finishTransition already applied the
-    // correct post-transition state synchronously.
-    cancelAnimationFrame(this.__resizeRaf);
     if (this.__transitionResolve) {
       this.__transitionResolve();
       this.__transitionResolve = null;

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/master-detail-layout",
-  "version": "25.2.0-alpha3",
+  "version": "25.2.0-alpha4",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -12,7 +12,7 @@
           "attributes": [
             {
               "name": "detail-size",
-              "description": "Size (in CSS length units) to be set on the detail area in\nthe CSS grid layout. If there is not enough space to show\nmaster and detail areas next to each other, the detail area\nis shown as an overlay. Defaults to 15em.",
+              "description": "Size (in CSS length units) to be set on the detail area in\nthe CSS grid layout. When there is not enough space to show\nmaster and detail areas next to each other, the detail area\nis shown as an overlay.\n<p>\nIf not specified, the size is determined automatically by measuring\nthe detail content in a `min-content` CSS grid column when it first\nbecomes visible, and then caching the resulting intrinsic size. To\nrecalculate the cached intrinsic size, use the `recalculateLayout`\nmethod.",
               "value": {
                 "type": [
                   "string",
@@ -103,7 +103,7 @@
             "properties": [
               {
                 "name": "detailSize",
-                "description": "Size (in CSS length units) to be set on the detail area in\nthe CSS grid layout. If there is not enough space to show\nmaster and detail areas next to each other, the detail area\nis shown as an overlay. Defaults to 15em.",
+                "description": "Size (in CSS length units) to be set on the detail area in\nthe CSS grid layout. When there is not enough space to show\nmaster and detail areas next to each other, the detail area\nis shown as an overlay.\n<p>\nIf not specified, the size is determined automatically by measuring\nthe detail content in a `min-content` CSS grid column when it first\nbecomes visible, and then caching the resulting intrinsic size. To\nrecalculate the cached intrinsic size, use the `recalculateLayout`\nmethod.",
                 "value": {
                   "type": [
                     "string",

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/master-detail-layout",
-  "version": "25.2.0-alpha3",
+  "version": "25.2.0-alpha4",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {
@@ -28,7 +28,7 @@
             },
             {
               "name": ".detailSize",
-              "description": "Size (in CSS length units) to be set on the detail area in\nthe CSS grid layout. If there is not enough space to show\nmaster and detail areas next to each other, the detail area\nis shown as an overlay. Defaults to 15em.",
+              "description": "Size (in CSS length units) to be set on the detail area in\nthe CSS grid layout. When there is not enough space to show\nmaster and detail areas next to each other, the detail area\nis shown as an overlay.\n<p>\nIf not specified, the size is determined automatically by measuring\nthe detail content in a `min-content` CSS grid column when it first\nbecomes visible, and then caching the resulting intrinsic size. To\nrecalculate the cached intrinsic size, use the `recalculateLayout`\nmethod.",
               "value": {
                 "kind": "expression"
               }