@nldd/design-system 0.8.37 → 0.8.38

package/dist/components/layout/split-views/bar-split-view/bar-split-view.js

@@ -11,14 +11,8 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
  * Each child determines its order per breakpoint via sm-order, md-order, and lg-order.
  * Children without order attributes are sorted by DOM order.
  *
- * On sm viewports, bars are absolutely positioned over the main area:
- * bars before main (based on order) stack from top to bottom,
- * bars after main stack from bottom to top. On md and lg, all panels
- * are in normal flow with a divider between each adjacent pair.
- *
- * CSS custom properties on the host for consumers like nldd-page:
- *   --context-bar-split-view-top-bars-height
- *   --context-bar-split-view-bottom-bars-height
+ * All bars are in normal flow at every breakpoint and stack vertically with
+ * dividers between them on md and lg. Dividers are suppressed on sm.
  *
  * ## Slot names
  * Give each bar a unique slot name (e.g. slot="toolbar", slot="status-bar").
@@ -26,8 +20,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
  * The main panel always uses slot="main".
  *
  * ## Background color
- * Sets --context-parent-background-color, which cascades to all descendants
- * including nldd-page and the fade overlays.
+ * Sets --context-parent-background-color, which cascades to all descendants.
  *
  * @element nldd-bar-split-view
  *
@@ -38,6 +31,11 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
  * @attr {'sm'|'md'|'lg'} below - Show this panel up to and including this breakpoint
  * @attr {'sm'|'md'|'lg'} only  - Show this panel only at this breakpoint
  *
+ * Divider control per child:
+ * @attr no-divider - Suppress dividers adjacent to this bar. Setting it on
+ *                    either side of a seam removes that divider — handy for
+ *                    grouping a toolbar and tab-bar into one visual unit.
+ *
  * @slot main  - Central panel for primary content
  * @slot *     - Any other unique slot name creates a bar panel
  */
@@ -54,41 +52,24 @@ let NLDDBarSplitView = class NLDDBarSplitView extends LitElement {
         this.background = 'inherit';
         // null until connectedCallback measures the viewport. Before measurement the
         // template falls back to DOM order with dividers — no breakpoint-specific
-        // sorting or mobile overlay behaviour is applied.
+        // sorting is applied.
         this._currentBreakpoint = null;
-        // Bars that sit above main in the sm sort order. Used as a membership test in
-        // the template: bars not in this Set are implicitly bottom bars. Only populated
-        // on sm viewports — on md/lg bars are in normal flow and need no offset.
-        this._smTopBars = new Set();
-        // Computed top or bottom pixel offset for every bar on sm viewports. Holds both
-        // top-bar and bottom-bar values in the same Map — the template uses _smTopBars
-        // to know which CSS property (top vs bottom) to apply the value to. Cleared on
-        // md/lg where absolute positioning is not used.
-        this._smOffsets = new Map();
         this._observer = null;
         this._resizeObserver = null;
-        this._childResizeObserver = null;
     }
     connectedCallback() {
         super.connectedCallback();
         this._currentBreakpoint = this._getBreakpoint(this.getBoundingClientRect().width);
-        this._observer = new MutationObserver(() => {
-            this._observeChildren();
-            this._updateLayout();
-            this.requestUpdate();
-        });
-        this._observer.observe(this, { childList: true, attributes: true, attributeFilter: ['above', 'below', 'only', 'sm-order', 'md-order', 'lg-order'], subtree: false });
+        this._observer = new MutationObserver(() => this.requestUpdate());
+        this._observer.observe(this, { childList: true, attributes: true, attributeFilter: ['above', 'below', 'only', 'sm-order', 'md-order', 'lg-order', 'no-divider'], subtree: false });
         this._resizeObserver = new ResizeObserver(() => {
             const bp = this._getBreakpoint(this.getBoundingClientRect().width);
             if (bp !== this._currentBreakpoint) {
                 this._currentBreakpoint = bp;
                 this.requestUpdate();
             }
-            this._updateLayout();
         });
         this._resizeObserver.observe(this);
-        this._childResizeObserver = new ResizeObserver(() => this._updateLayout());
-        this._observeChildren();
     }
     disconnectedCallback() {
         super.disconnectedCallback();
@@ -96,8 +77,6 @@ let NLDDBarSplitView = class NLDDBarSplitView extends LitElement {
         this._observer = null;
         this._resizeObserver?.disconnect();
         this._resizeObserver = null;
-        this._childResizeObserver?.disconnect();
-        this._childResizeObserver = null;
     }
     _getBreakpoint(width) {
         if (width <= smMaxPx)
@@ -142,49 +121,6 @@ let NLDDBarSplitView = class NLDDBarSplitView extends LitElement {
             return aVal - bVal;
         });
     }
-    _observeChildren() {
-        this._childResizeObserver?.disconnect();
-        for (const child of Array.from(this.children)) {
-            this._childResizeObserver?.observe(child);
-        }
-    }
-    _updateLayout() {
-        const width = this.getBoundingClientRect().width;
-        if (width > smMaxPx) {
-            this.style.removeProperty('--context-bar-split-view-top-bars-height');
-            this.style.removeProperty('--context-bar-split-view-bottom-bars-height');
-            this._smTopBars = new Set();
-            this._smOffsets = new Map();
-            return;
-        }
-        const sorted = this._getSortedChildren();
-        const mainIndex = sorted.findIndex(el => el.slot === 'main');
-        // Bars before main stack downward from the top; bars after main stack upward from the bottom
-        const topBars = mainIndex > 0 ? sorted.slice(0, mainIndex) : [];
-        const bottomBars = mainIndex >= 0 ? sorted.slice(mainIndex + 1) : sorted;
-        this._smTopBars = new Set(topBars);
-        const newOffsets = new Map();
-        let topOffset = 0;
-        for (const el of topBars) {
-            newOffsets.set(el, topOffset);
-            topOffset += el.getBoundingClientRect().height;
-        }
-        let bottomOffset = 0;
-        for (const el of [...bottomBars].reverse()) {
-            newOffsets.set(el, bottomOffset);
-            bottomOffset += el.getBoundingClientRect().height;
-        }
-        this._smOffsets = newOffsets;
-        const prevTop = this.style.getPropertyValue('--context-bar-split-view-top-bars-height');
-        const prevBottom = this.style.getPropertyValue('--context-bar-split-view-bottom-bars-height');
-        const nextTop = `${topOffset}px`;
-        const nextBottom = `${bottomOffset}px`;
-        if (prevTop !== nextTop || prevBottom !== nextBottom) {
-            this.style.setProperty('--context-bar-split-view-top-bars-height', nextTop);
-            this.style.setProperty('--context-bar-split-view-bottom-bars-height', nextBottom);
-            this.requestUpdate();
-        }
-    }
     render() {
         return barSplitViewTemplate(this);
     }

package/dist/components/layout/split-views/bar-split-view/bar-split-view.js.map

@@ -1 +1 @@
-{"version":3,"file":"bar-split-view.js","sourceRoot":"","sources":["../../../../../src/components/layout/split-views/bar-split-view/bar-split-view.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"bar-split-view.js","sourceRoot":"","sources":["../../../../../src/components/layout/split-views/bar-split-view/bar-split-view.ts"],"names":[],"mappings":";;;;;;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACjC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,oBAAoB,EAAE,MAAM,8BAA8B,CAAC;AACpE,OAAO,EAAE,WAAW,EAAE,MAAM,0CAA0C,CAAC;AAEvE,MAAM,OAAO,GAAG,QAAQ,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC5C,MAAM,OAAO,GAAG,QAAQ,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAMrC,IAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,UAAU;IAAzC;;QAIN,eAAU,GAAqC,SAAS,CAAC;QAEzD,6EAA6E;QAC7E,0EAA0E;QAC1E,sBAAsB;QAEtB,uBAAkB,GAA2B,IAAI,CAAC;QAE1C,cAAS,GAA4B,IAAI,CAAC;QAC1C,oBAAe,GAA0B,IAAI,CAAC;IA0EvD,CAAC;IAxES,iBAAiB;QACzB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAE1B,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,qBAAqB,EAAE,CAAC,KAAK,CAAC,CAAC;QAElF,IAAI,CAAC,SAAS,GAAG,IAAI,gBAAgB,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC,CAAC;QAClE,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,eAAe,EAAE,CAAC,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,UAAU,EAAE,YAAY,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC,CAAC;QAEnL,IAAI,CAAC,eAAe,GAAG,IAAI,cAAc,CAAC,GAAG,EAAE;YAC9C,MAAM,EAAE,GAAG,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,qBAAqB,EAAE,CAAC,KAAK,CAAC,CAAC;YACnE,IAAI,EAAE,KAAK,IAAI,CAAC,kBAAkB,EAAE,CAAC;gBACpC,IAAI,CAAC,kBAAkB,GAAG,EAAE,CAAC;gBAC7B,IAAI,CAAC,aAAa,EAAE,CAAC;YACtB,CAAC;QACF,CAAC,CAAC,CAAC;QACH,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;IACpC,CAAC;IAEQ,oBAAoB;QAC5B,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAC7B,IAAI,CAAC,SAAS,EAAE,UAAU,EAAE,CAAC;QAC7B,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;QACtB,IAAI,CAAC,eAAe,EAAE,UAAU,EAAE,CAAC;QACnC,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC;IAC7B,CAAC;IAEO,cAAc,CAAC,KAAa;QACnC,IAAI,KAAK,IAAI,OAAO;YAAE,OAAO,IAAI,CAAC;QAClC,IAAI,KAAK,IAAI,OAAO;YAAE,OAAO,IAAI,CAAC;QAClC,OAAO,IAAI,CAAC;IACb,CAAC;IAEO,eAAe,CAAC,EAAW;QAClC,IAAI,IAAI,CAAC,kBAAkB,KAAK,IAAI;YAAE,OAAO,IAAI,CAAC;QAClD,MAAM,EAAE,GAAG,IAAI,CAAC,kBAAkB,CAAC;QACnC,MAAM,KAAK,GAAiB,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC;QAC/C,MAAM,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC;QAElC,MAAM,IAAI,GAAG,EAAE,CAAC,YAAY,CAAC,MAAM,CAAsB,CAAC;QAC1D,IAAI,IAAI;YAAE,OAAO,EAAE,KAAK,IAAI,CAAC;QAE7B,MAAM,KAAK,GAAG,EAAE,CAAC,YAAY,CAAC,OAAO,CAAsB,CAAC;QAC5D,IAAI,KAAK;YAAE,OAAO,OAAO,IAAI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;QAElD,MAAM,KAAK,GAAG,EAAE,CAAC,YAAY,CAAC,OAAO,CAAsB,CAAC;QAC5D,IAAI,KAAK;YAAE,OAAO,OAAO,IAAI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;QAElD,OAAO,IAAI,CAAC;IACb,CAAC;IAED,kBAAkB;QACjB,MAAM,GAAG,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,MAAM,CAAC,EAAE,CAAC,EAAE;YACjD,IAAI,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC;gBACd,IAAI,MAAM,CAAC,IAAI,CAAC,GAAG,EAAE,GAAG,EAAE,CAAC;oBAC1B,OAAO,CAAC,IAAI,CAAC,iMAAiM,EAAE,EAAE,CAAC,CAAC;gBACrN,CAAC;gBACD,OAAO,KAAK,CAAC;YACd,CAAC;YACD,OAAO,IAAI,CAAC,eAAe,CAAC,EAAE,CAAC,CAAC;QACjC,CAAC,CAAC,CAAC;QACH,IAAI,IAAI,CAAC,kBAAkB,KAAK,IAAI;YAAE,OAAO,GAAG,CAAC;QACjD,MAAM,IAAI,GAAG,GAAG,IAAI,CAAC,kBAAkB,QAAQ,CAAC;QAChD,OAAO,CAAC,GAAG,GAAG,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;YAC7B,MAAM,IAAI,GAAG,CAAC,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,YAAY,CAAC,IAAI,CAAE,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;YACrF,MAAM,IAAI,GAAG,CAAC,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,YAAY,CAAC,IAAI,CAAE,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;YACrF,OAAO,IAAI,GAAG,IAAI,CAAC;QACpB,CAAC,CAAC,CAAC;IACJ,CAAC;IAEQ,MAAM;QACd,OAAO,oBAAoB,CAAC,IAAI,CAAC,CAAC;IACnC,CAAC;;AArFe,uBAAM,GAAG,kBAAkB,AAArB,CAAsB;AAG5C;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;oDACe;AAMzD;IADC,KAAK,EAAE;4DAC0C;AAVtC,gBAAgB;IAD5B,aAAa,CAAC,qBAAqB,CAAC;GACxB,gBAAgB,CAuF5B"}

package/dist/components/layout/split-views/bar-split-view/bar-split-view.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"bar-split-view.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/split-views/bar-split-view/bar-split-view.styles.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,kBAAkB,yBA2H9B,CAAC"}
+{"version":3,"file":"bar-split-view.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/split-views/bar-split-view/bar-split-view.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,kBAAkB,yBA6E9B,CAAC"}

package/dist/components/layout/split-views/bar-split-view/bar-split-view.styles.js

@@ -1,21 +1,17 @@
-import { css, unsafeCSS } from 'lit';
-import { breakpoints } from '../../../../assets/styles/breakpoints.js';
-const smMax = unsafeCSS(breakpoints.smMax);
+import { css } from 'lit';
 export const barSplitViewStyles = css `
 
 
 	/* # Host */
 
 	:host {
+		--_background-color: var(--context-parent-background-color, var(--semantics-surfaces-background-color));
+
 		display: flex;
 		flex-direction: column;
 		width: 100%;
 		height: 100%;
 		background-color: var(--_background-color);
-
-		--_background-color: var(--context-parent-background-color, var(--semantics-surfaces-background-color));
-		--context-bar-split-view-top-bars-height: 0px;
-		--context-bar-split-view-bottom-bars-height: 0px;
 	}
 
 	:host([background="default"]) {
@@ -41,7 +37,6 @@ export const barSplitViewStyles = css `
 		flex: 1;
 		min-height: 0;
 		min-width: 0;
-		position: relative;
 	}
 
 
@@ -53,15 +48,6 @@ export const barSplitViewStyles = css `
 		flex-shrink: 0;
 		min-width: 0;
 		overflow: hidden;
-		container-type: inline-size;
-		container-name: layout-area;
-
-		@media (max-width: ${smMax}) {
-			position: absolute;
-			left: 0;
-			right: 0;
-			z-index: 2;
-		}
 	}
 
 
@@ -81,40 +67,6 @@ export const barSplitViewStyles = css `
 		min-height: 0;
 		min-width: 0;
 		overflow: hidden;
-		container-type: inline-size;
-		container-name: layout-area;
-
-		@media (max-width: ${smMax}) {
-			&::before {
-				content: '';
-				position: absolute;
-				top: 0;
-				left: 0;
-				right: 0;
-				z-index: 1;
-				height: calc(var(--context-bar-split-view-top-bars-height) + var(--primitives-space-32));
-				background: linear-gradient(
-					to bottom,
-					color-mix(in srgb, var(--_background-color) 95%, transparent) var(--context-bar-split-view-top-bars-height),
-					transparent);
-				pointer-events: none;
-			}
-
-			&::after {
-				content: '';
-				position: absolute;
-				bottom: 0;
-				left: 0;
-				right: 0;
-				z-index: 1;
-				height: calc(var(--context-bar-split-view-bottom-bars-height) + var(--primitives-space-32));
-				background: linear-gradient(
-					to top,
-					color-mix(in srgb, var(--_background-color) 95%, transparent) var(--context-bar-split-view-bottom-bars-height),
-					transparent);
-				pointer-events: none;
-			}
-		}
 	}
 
 

package/dist/components/layout/split-views/bar-split-view/bar-split-view.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"bar-split-view.styles.js","sourceRoot":"","sources":["../../../../../src/components/layout/split-views/bar-split-view/bar-split-view.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACrC,OAAO,EAAE,WAAW,EAAE,MAAM,0CAA0C,CAAC;AAEvE,MAAM,KAAK,GAAG,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAE3C,MAAM,CAAC,MAAM,kBAAkB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uBAuDd,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;uBA4BL,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwC3B,CAAC"}
+{"version":3,"file":"bar-split-view.styles.js","sourceRoot":"","sources":["../../../../../src/components/layout/split-views/bar-split-view/bar-split-view.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,kBAAkB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6EpC,CAAC"}

package/dist/components/layout/split-views/bar-split-view/bar-split-view.template.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"bar-split-view.template.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/split-views/bar-split-view/bar-split-view.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,cAAc,EAAW,MAAM,KAAK,CAAC;AAGpD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,6CAA6C,CAAC;AAErD,wBAAgB,oBAAoB,CAAC,SAAS,EAAE,gBAAgB,GAAG,cAAc,CAoChF"}
+{"version":3,"file":"bar-split-view.template.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/split-views/bar-split-view/bar-split-view.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,cAAc,EAAW,MAAM,KAAK,CAAC;AAEpD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,6CAA6C,CAAC;AAErD,wBAAgB,oBAAoB,CAAC,SAAS,EAAE,gBAAgB,GAAG,cAAc,CAiChF"}

package/dist/components/layout/split-views/bar-split-view/bar-split-view.template.js

@@ -1,6 +1,5 @@
 import { html, nothing } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
-import { styleMap } from 'lit/directives/style-map.js';
 import '../split-view-divider/split-view-divider.js';
 export function barSplitViewTemplate(component) {
     const sorted = component._getSortedChildren();
@@ -10,18 +9,16 @@ export function barSplitViewTemplate(component) {
 			${sorted.map((el, index) => {
         const isMain = el.slot === 'main';
         const isLast = index === sorted.length - 1;
-        // Inline position is only applied to bars on sm viewports
-        const barStyles = !isMain && isSm
-            ? component._smTopBars.has(el)
-                ? { top: `${component._smOffsets.get(el) ?? 0}px` }
-                : { bottom: `${component._smOffsets.get(el) ?? 0}px` }
-            : {};
+        const next = sorted[index + 1];
+        const showDivider = !isSm
+            && !isLast
+            && !el.hasAttribute('no-divider')
+            && !next?.hasAttribute('no-divider');
         return html `
-					<div class=${classMap({ 'bar-split-view__main': isMain, 'bar-split-view__bar': !isMain })}
-						style=${styleMap(barStyles)}>
+					<div class=${classMap({ 'bar-split-view__main': isMain, 'bar-split-view__bar': !isMain })}>
 						<slot name=${el.slot}></slot>
 					</div>
-					${!isSm && !isLast ? html `
+					${showDivider ? html `
 						<div class="bar-split-view__divider">
 							<nldd-split-view-divider orientation="horizontal"></nldd-split-view-divider>
 						</div>

package/dist/components/layout/split-views/bar-split-view/bar-split-view.template.js.map

@@ -1 +1 @@
-{"version":3,"file":"bar-split-view.template.js","sourceRoot":"","sources":["../../../../../src/components/layout/split-views/bar-split-view/bar-split-view.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAkB,OAAO,EAAE,MAAM,KAAK,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAEvD,OAAO,6CAA6C,CAAC;AAErD,MAAM,UAAU,oBAAoB,CAAC,SAA2B;IAC/D,MAAM,MAAM,GAAG,SAAS,CAAC,kBAAkB,EAAE,CAAC;IAC9C,MAAM,IAAI,GAAG,SAAS,CAAC,kBAAkB,KAAK,IAAI,CAAC;IAEnD,OAAO,IAAI,CAAA;;KAEP,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,KAAK,EAAE,EAAE;QAC1B,MAAM,MAAM,GAAG,EAAE,CAAC,IAAI,KAAK,MAAM,CAAC;QAClC,MAAM,MAAM,GAAG,KAAK,KAAK,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC;QAE3C,0DAA0D;QAC1D,MAAM,SAAS,GAAG,CAAC,MAAM,IAAI,IAAI;YAChC,CAAC,CAAC,SAAS,CAAC,UAAU,CAAC,GAAG,CAAC,EAAE,CAAC;gBAC7B,CAAC,CAAC,EAAE,GAAG,EAAE,GAAG,SAAS,CAAC,UAAU,CAAC,GAAG,CAAC,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE;gBACnD,CAAC,CAAC,EAAE,MAAM,EAAE,GAAG,SAAS,CAAC,UAAU,CAAC,GAAG,CAAC,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE;YACvD,CAAC,CAAC,EAAE,CAAC;QAEN,OAAO,IAAI,CAAA;kBACG,QAAQ,CAAC,EAAE,sBAAsB,EAAE,MAAM,EAAE,qBAAqB,EAAE,CAAC,MAAM,EAAE,CAAC;cAChF,QAAQ,CAAC,SAAS,CAAC;mBACd,EAAE,CAAC,IAAI;;OAEnB,CAAC,IAAI,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAA;;;;MAIxB,CAAC,CAAC,CAAC,OAAO;KACX,CAAC;IACH,CAAC,CAAC;KACA,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,CAAC,IAAI,CAAA;;;;IAI9C,CAAC,CAAC,CAAC,OAAO;;EAEZ,CAAC;AACH,CAAC"}
+{"version":3,"file":"bar-split-view.template.js","sourceRoot":"","sources":["../../../../../src/components/layout/split-views/bar-split-view/bar-split-view.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAkB,OAAO,EAAE,MAAM,KAAK,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAEvD,OAAO,6CAA6C,CAAC;AAErD,MAAM,UAAU,oBAAoB,CAAC,SAA2B;IAC/D,MAAM,MAAM,GAAG,SAAS,CAAC,kBAAkB,EAAE,CAAC;IAC9C,MAAM,IAAI,GAAG,SAAS,CAAC,kBAAkB,KAAK,IAAI,CAAC;IAEnD,OAAO,IAAI,CAAA;;KAEP,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,KAAK,EAAE,EAAE;QAC1B,MAAM,MAAM,GAAG,EAAE,CAAC,IAAI,KAAK,MAAM,CAAC;QAClC,MAAM,MAAM,GAAG,KAAK,KAAK,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC;QAC3C,MAAM,IAAI,GAAG,MAAM,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC;QAC/B,MAAM,WAAW,GAAG,CAAC,IAAI;eACrB,CAAC,MAAM;eACP,CAAC,EAAE,CAAC,YAAY,CAAC,YAAY,CAAC;eAC9B,CAAC,IAAI,EAAE,YAAY,CAAC,YAAY,CAAC,CAAC;QAEtC,OAAO,IAAI,CAAA;kBACG,QAAQ,CAAC,EAAE,sBAAsB,EAAE,MAAM,EAAE,qBAAqB,EAAE,CAAC,MAAM,EAAE,CAAC;mBAC3E,EAAE,CAAC,IAAI;;OAEnB,WAAW,CAAC,CAAC,CAAC,IAAI,CAAA;;;;MAInB,CAAC,CAAC,CAAC,OAAO;KACX,CAAC;IACH,CAAC,CAAC;KACA,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,CAAC,IAAI,CAAA;;;;IAI9C,CAAC,CAAC,CAAC,OAAO;;EAEZ,CAAC;AACH,CAAC"}

package/dist/components/layout/split-views/navigation-split-view/navigation-split-view.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"navigation-split-view.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/split-views/navigation-split-view/navigation-split-view.styles.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,yBAAyB,yBAwTrC,CAAC"}
+{"version":3,"file":"navigation-split-view.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/split-views/navigation-split-view/navigation-split-view.styles.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,yBAAyB,yBAmUrC,CAAC"}

package/dist/components/layout/split-views/navigation-split-view/navigation-split-view.styles.js

@@ -1,6 +1,8 @@
 import { css, unsafeCSS } from 'lit';
 import { breakpoints } from '../../../../assets/styles/breakpoints.js';
 const smMax = unsafeCSS(breakpoints.smMax);
+const mdMin = unsafeCSS(breakpoints.mdMin);
+const mdMax = unsafeCSS(breakpoints.mdMax);
 const lgMin = unsafeCSS(breakpoints.lgMin);
 export const navigationSplitViewStyles = css `
 
@@ -8,16 +10,16 @@ export const navigationSplitViewStyles = css `
 	/* # Host */
 
 	:host {
-		display: flex;
-		width: 100%;
-		height: 100%;
-		background-color: var(--_background-color);
-
 		--_sidebar-min-width: var(--primitives-area-320); /* Pane min-width — read by JS via getComputedStyle in firstUpdated */
 		--_secondary-sidebar-min-width: var(--primitives-area-320); /* Pane min-width — read by JS via getComputedStyle in firstUpdated */
 		--_main-min-width: var(--primitives-area-480); /* Pane min-width — read by JS via getComputedStyle in firstUpdated */
 		--_inspector-min-width: var(--primitives-area-320); /* Pane min-width — read by JS via getComputedStyle in firstUpdated */
 		--_background-color: var(--context-parent-background-color, var(--semantics-surfaces-background-color));
+
+		display: flex;
+		width: 100%;
+		height: 100%;
+		background-color: var(--_background-color);
 	}
 
 	:host([background="default"]) {
@@ -52,8 +54,6 @@ export const navigationSplitViewStyles = css `
 		min-height: 0;
 		min-width: var(--_sidebar-min-width);
 		overflow: hidden;
-		container-type: inline-size;
-		container-name: layout-area;
 	}
 
 
@@ -66,8 +66,6 @@ export const navigationSplitViewStyles = css `
 		min-height: 0;
 		min-width: var(--_secondary-sidebar-min-width);
 		overflow: hidden;
-		container-type: inline-size;
-		container-name: layout-area;
 	}
 
 
@@ -80,8 +78,6 @@ export const navigationSplitViewStyles = css `
 		min-height: 0;
 		min-width: var(--_main-min-width);
 		overflow: hidden;
-		container-type: inline-size;
-		container-name: layout-area;
 	}
 
 
@@ -91,6 +87,7 @@ export const navigationSplitViewStyles = css `
 	:host(.full-stack) .navigation-split-view__secondary-sidebar-pane,
 	:host(.full-stack) .navigation-split-view__main-pane {
 		min-width: 0;
+		flex: 1;
 	}
 
 
@@ -102,17 +99,15 @@ export const navigationSplitViewStyles = css `
 	}
 
 	.navigation-split-view__inspector-pane {
+		/* Suppress dismiss button — inspector is always dismissable as a sheet, not inline */
+		--context-dismiss-button-display: none;
+
 		display: flex;
 		flex-direction: column;
 		flex-shrink: 0;
 		min-height: 0;
 		min-width: var(--_inspector-min-width);
 		overflow: hidden;
-		container-type: inline-size;
-		container-name: layout-area;
-
-		/* Suppress dismiss button — inspector is always dismissable as a sheet, not inline */
-		--context-dismiss-button-display: none;
 	}
 
 
@@ -139,13 +134,28 @@ export const navigationSplitViewStyles = css `
 		overflow: hidden;
 		position: fixed;
 		outline: none;
-		inset: var(--semantics-overlays-inset) var(--semantics-overlays-inset) var(--semantics-overlays-inset) auto;
-		width: var(--semantics-sheets-side-md-width);
-		height: calc(100dvh - var(--semantics-overlays-inset) * 2);
-		border-radius: var(--semantics-overlays-corner-radius);
+
+		@media (max-width: ${smMax}) {
+			inset: auto 0 0 0;
+			width: 100%;
+			max-width: 100%;
+			height: auto;
+			max-height: calc(100dvh - var(--semantics-sheets-bottom-top-inset));
+			border-radius: var(--semantics-overlays-corner-radius) var(--semantics-overlays-corner-radius) 0 0;
+		}
+
+		@media (min-width: ${mdMin}) and (max-width: ${mdMax}) {
+			inset: var(--semantics-overlays-inset) var(--semantics-overlays-inset) var(--semantics-overlays-inset) auto;
+			width: var(--semantics-sheets-side-md-width);
+			height: calc(100dvh - var(--semantics-overlays-inset) * 2);
+			border-radius: var(--semantics-overlays-corner-radius);
+		}
 
 		@media (min-width: ${lgMin}) {
+			inset: var(--semantics-overlays-inset) var(--semantics-overlays-inset) var(--semantics-overlays-inset) auto;
 			width: var(--semantics-sheets-side-lg-width);
+			height: calc(100dvh - var(--semantics-overlays-inset) * 2);
+			border-radius: var(--semantics-overlays-corner-radius);
 		}
 
 		&:focus-visible:not(.is-pointer-focus) {
@@ -163,11 +173,23 @@ export const navigationSplitViewStyles = css `
 		}
 
 		&[open] {
-			animation: navigation-split-view-inspector-slide-in var(--semantics-sheets-side-animation-duration) var(--primitives-transition-easing-default) both;
+			@media (max-width: ${smMax}) {
+				animation: navigation-split-view-slide-in-bottom var(--semantics-sheets-bottom-animation-duration) var(--primitives-transition-easing-default) both;
+			}
+
+			@media (min-width: ${mdMin}) {
+				animation: navigation-split-view-inspector-slide-in var(--semantics-sheets-side-animation-duration) var(--primitives-transition-easing-default) both;
+			}
 		}
 
 		&.is-closing {
-			animation: navigation-split-view-inspector-slide-out var(--semantics-sheets-side-animation-duration) var(--primitives-transition-easing-default) both;
+			@media (max-width: ${smMax}) {
+				animation: navigation-split-view-slide-out-bottom var(--semantics-sheets-bottom-animation-duration) var(--primitives-transition-easing-default) both;
+			}
+
+			@media (min-width: ${mdMin}) {
+				animation: navigation-split-view-inspector-slide-out var(--semantics-sheets-side-animation-duration) var(--primitives-transition-easing-default) both;
+			}
 		}
 	}
 
@@ -203,13 +225,28 @@ export const navigationSplitViewStyles = css `
 		overflow: hidden;
 		position: fixed;
 		outline: none;
-		inset: var(--semantics-overlays-inset) auto var(--semantics-overlays-inset) var(--semantics-overlays-inset);
-		width: var(--semantics-sheets-side-md-width);
-		height: calc(100dvh - var(--semantics-overlays-inset) * 2);
-		border-radius: var(--semantics-overlays-corner-radius);
+
+		@media (max-width: ${smMax}) {
+			inset: auto 0 0 0;
+			width: 100%;
+			max-width: 100%;
+			height: auto;
+			max-height: calc(100dvh - var(--semantics-sheets-bottom-top-inset));
+			border-radius: var(--semantics-overlays-corner-radius) var(--semantics-overlays-corner-radius) 0 0;
+		}
+
+		@media (min-width: ${mdMin}) and (max-width: ${mdMax}) {
+			inset: var(--semantics-overlays-inset) auto var(--semantics-overlays-inset) var(--semantics-overlays-inset);
+			width: var(--semantics-sheets-side-md-width);
+			height: calc(100dvh - var(--semantics-overlays-inset) * 2);
+			border-radius: var(--semantics-overlays-corner-radius);
+		}
 
 		@media (min-width: ${lgMin}) {
+			inset: var(--semantics-overlays-inset) auto var(--semantics-overlays-inset) var(--semantics-overlays-inset);
 			width: var(--semantics-sheets-side-lg-width);
+			height: calc(100dvh - var(--semantics-overlays-inset) * 2);
+			border-radius: var(--semantics-overlays-corner-radius);
 		}
 
 		&:focus-visible:not(.is-pointer-focus) {
@@ -227,23 +264,35 @@ export const navigationSplitViewStyles = css `
 		}
 
 		&[open] {
-			animation: navigation-split-view-sidebar-slide-in var(--semantics-sheets-side-animation-duration) var(--primitives-transition-easing-default) both;
+			@media (max-width: ${smMax}) {
+				animation: navigation-split-view-slide-in-bottom var(--semantics-sheets-bottom-animation-duration) var(--primitives-transition-easing-default) both;
+			}
+
+			@media (min-width: ${mdMin}) {
+				animation: navigation-split-view-sidebar-slide-in var(--semantics-sheets-side-animation-duration) var(--primitives-transition-easing-default) both;
+			}
 		}
 
 		&.is-closing {
-			animation: navigation-split-view-sidebar-slide-out var(--semantics-sheets-side-animation-duration) var(--primitives-transition-easing-default) both;
+			@media (max-width: ${smMax}) {
+				animation: navigation-split-view-slide-out-bottom var(--semantics-sheets-bottom-animation-duration) var(--primitives-transition-easing-default) both;
+			}
+
+			@media (min-width: ${mdMin}) {
+				animation: navigation-split-view-sidebar-slide-out var(--semantics-sheets-side-animation-duration) var(--primitives-transition-easing-default) both;
+			}
 		}
 	}
 
 	.navigation-split-view__sidebar-sheet-body {
+		/* Show dismiss button inside sidebar sheet */
+		--context-dismiss-button-display: block;
+
 		display: flex;
 		flex-direction: column;
 		flex-grow: 1;
 		min-height: 0;
 		width: 100%;
-
-		/* Show dismiss button inside sidebar sheet */
-		--context-dismiss-button-display: block;
 	}
 
 
@@ -259,42 +308,6 @@ export const navigationSplitViewStyles = css `
 		to { transform: translateY(100%); }
 	}
 
-	@media (max-width: ${smMax}) {
-		.navigation-split-view__inspector-sheet {
-			inset: auto 0 0 0;
-			width: 100%;
-			max-width: 100%;
-			height: auto;
-			max-height: calc(100dvh - var(--semantics-sheets-bottom-top-inset));
-			border-radius: var(--semantics-overlays-corner-radius) var(--semantics-overlays-corner-radius) 0 0;
-
-			&[open] {
-				animation: navigation-split-view-slide-in-bottom var(--semantics-sheets-bottom-animation-duration) var(--primitives-transition-easing-default) both;
-			}
-
-			&.is-closing {
-				animation: navigation-split-view-slide-out-bottom var(--semantics-sheets-bottom-animation-duration) var(--primitives-transition-easing-default) both;
-			}
-		}
-
-		.navigation-split-view__sidebar-sheet {
-			inset: auto 0 0 0;
-			width: 100%;
-			max-width: 100%;
-			height: auto;
-			max-height: calc(100dvh - var(--semantics-sheets-bottom-top-inset));
-			border-radius: var(--semantics-overlays-corner-radius) var(--semantics-overlays-corner-radius) 0 0;
-
-			&[open] {
-				animation: navigation-split-view-slide-in-bottom var(--semantics-sheets-bottom-animation-duration) var(--primitives-transition-easing-default) both;
-			}
-
-			&.is-closing {
-				animation: navigation-split-view-slide-out-bottom var(--semantics-sheets-bottom-animation-duration) var(--primitives-transition-easing-default) both;
-			}
-		}
-	}
-
 
 	/* # Reduced motion */
 

package/dist/components/layout/split-views/navigation-split-view/navigation-split-view.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"navigation-split-view.styles.js","sourceRoot":"","sources":["../../../../../src/components/layout/split-views/navigation-split-view/navigation-split-view.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACrC,OAAO,EAAE,WAAW,EAAE,MAAM,0CAA0C,CAAC;AAEvE,MAAM,KAAK,GAAG,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC3C,MAAM,KAAK,GAAG,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAE3C,MAAM,CAAC,MAAM,yBAAyB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uBA8IrB,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uBAgEL,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sBAmDN,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuD1B,CAAC"}
+{"version":3,"file":"navigation-split-view.styles.js","sourceRoot":"","sources":["../../../../../src/components/layout/split-views/navigation-split-view/navigation-split-view.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACrC,OAAO,EAAE,WAAW,EAAE,MAAM,0CAA0C,CAAC;AAEvE,MAAM,KAAK,GAAG,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC3C,MAAM,KAAK,GAAG,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC3C,MAAM,KAAK,GAAG,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC3C,MAAM,KAAK,GAAG,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAE3C,MAAM,CAAC,MAAM,yBAAyB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uBAmIrB,KAAK;;;;;;;;;uBASL,KAAK,qBAAqB,KAAK;;;;;;;uBAO/B,KAAK;;;;;;;;;;;;;;;;;;;;;;wBAsBJ,KAAK;;;;wBAIL,KAAK;;;;;;wBAML,KAAK;;;;wBAIL,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uBAuCN,KAAK;;;;;;;;;uBASL,KAAK,qBAAqB,KAAK;;;;;;;uBAO/B,KAAK;;;;;;;;;;;;;;;;;;;;;;wBAsBJ,KAAK;;;;wBAIL,KAAK;;;;;;wBAML,KAAK;;;;wBAIL,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiD5B,CAAC"}

package/dist/components/layout/split-views/side-by-side-split-view/side-by-side-split-view.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"side-by-side-split-view.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/split-views/side-by-side-split-view/side-by-side-split-view.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,yBAAyB,yBA+DrC,CAAC"}
+{"version":3,"file":"side-by-side-split-view.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/split-views/side-by-side-split-view/side-by-side-split-view.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,yBAAyB,yBA6DrC,CAAC"}

package/dist/components/layout/split-views/side-by-side-split-view/side-by-side-split-view.styles.js

@@ -50,8 +50,6 @@ export const sideBySideSplitViewStyles = css `
 		min-height: 0;
 		min-width: var(--_pane-min-width);
 		overflow: hidden;
-		container-type: inline-size;
-		container-name: layout-area;
 	}
 
 	.side-by-side-split-view__pane[hidden] {

package/dist/components/layout/split-views/side-by-side-split-view/side-by-side-split-view.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"side-by-side-split-view.styles.js","sourceRoot":"","sources":["../../../../../src/components/layout/split-views/side-by-side-split-view/side-by-side-split-view.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,yBAAyB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+D3C,CAAC"}
+{"version":3,"file":"side-by-side-split-view.styles.js","sourceRoot":"","sources":["../../../../../src/components/layout/split-views/side-by-side-split-view/side-by-side-split-view.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,yBAAyB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6D3C,CAAC"}

package/dist/components/layout/split-views/split-view-pane/split-view-pane.d.ts

@@ -28,6 +28,7 @@ export declare class NLDDSplitViewPane extends LitElement {
     hasContent: boolean;
     hideBack: boolean;
     background: 'inherit' | 'default' | 'tinted';
+    connectedCallback(): void;
     render(): import("lit-html").TemplateResult;
 }
 declare global {

package/dist/components/layout/split-views/split-view-pane/split-view-pane.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"split-view-pane.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/split-views/split-view-pane/split-view-pane.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAKjC,qBACa,iBAAkB,SAAQ,UAAU;IAChD,OAAgB,MAAM,0BAAuB;IAG7C,UAAU,UAAS;IAGnB,QAAQ,UAAS;IAGjB,UAAU,EAAE,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAa;IAEhD,MAAM;CAGf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,sBAAsB,EAAE,iBAAiB,CAAC;KAC1C;CACD"}
+{"version":3,"file":"split-view-pane.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/split-views/split-view-pane/split-view-pane.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAKjC,qBACa,iBAAkB,SAAQ,UAAU;IAChD,OAAgB,MAAM,0BAAuB;IAG7C,UAAU,UAAS;IAGnB,QAAQ,UAAS;IAGjB,UAAU,EAAE,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAa;IAEhD,iBAAiB;IAMjB,MAAM;CAGf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,sBAAsB,EAAE,iBAAiB,CAAC;KAC1C;CACD"}

package/dist/components/layout/split-views/split-view-pane/split-view-pane.js

@@ -39,6 +39,11 @@ let NLDDSplitViewPane = class NLDDSplitViewPane extends LitElement {
         this.hideBack = false;
         this.background = 'inherit';
     }
+    connectedCallback() {
+        super.connectedCallback();
+        this.style.containerType = 'inline-size';
+        this.style.containerName = 'layout-area';
+    }
     render() {
         return splitViewPaneTemplate(this);
     }

package/dist/components/layout/split-views/split-view-pane/split-view-pane.js.map

@@ -1 +1 @@
-{"version":3,"file":"split-view-pane.js","sourceRoot":"","sources":["../../../../../src/components/layout/split-views/split-view-pane/split-view-pane.ts"],"names":[],"mappings":";;;;;;AAAA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACjC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAC;AAClE,OAAO,EAAE,qBAAqB,EAAE,MAAM,+BAA+B,CAAC;AAG/D,IAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,UAAU;IAA1C;;QAIN,eAAU,GAAG,KAAK,CAAC;QAGnB,aAAQ,GAAG,KAAK,CAAC;QAGjB,eAAU,GAAqC,SAAS,CAAC;IAK1D,CAAC;IAHS,MAAM;QACd,OAAO,qBAAqB,CAAC,IAAI,CAAC,CAAC;IACpC,CAAC;;AAbe,wBAAM,GAAG,mBAAmB,AAAtB,CAAuB;AAG7C;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,aAAa,EAAE,CAAC;qDAClD;AAGnB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,WAAW,EAAE,CAAC;mDAClD;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;qDACe;AAV7C,iBAAiB;IAD7B,aAAa,CAAC,sBAAsB,CAAC;GACzB,iBAAiB,CAe7B"}
+{"version":3,"file":"split-view-pane.js","sourceRoot":"","sources":["../../../../../src/components/layout/split-views/split-view-pane/split-view-pane.ts"],"names":[],"mappings":";;;;;;AAAA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACjC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAC;AAClE,OAAO,EAAE,qBAAqB,EAAE,MAAM,+BAA+B,CAAC;AAG/D,IAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,UAAU;IAA1C;;QAIN,eAAU,GAAG,KAAK,CAAC;QAGnB,aAAQ,GAAG,KAAK,CAAC;QAGjB,eAAU,GAAqC,SAAS,CAAC;IAW1D,CAAC;IATS,iBAAiB;QACzB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,KAAK,CAAC,aAAa,GAAG,aAAa,CAAC;QACzC,IAAI,CAAC,KAAK,CAAC,aAAa,GAAG,aAAa,CAAC;IAC1C,CAAC;IAEQ,MAAM;QACd,OAAO,qBAAqB,CAAC,IAAI,CAAC,CAAC;IACpC,CAAC;;AAnBe,wBAAM,GAAG,mBAAmB,AAAtB,CAAuB;AAG7C;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,aAAa,EAAE,CAAC;qDAClD;AAGnB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,WAAW,EAAE,CAAC;mDAClD;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;qDACe;AAV7C,iBAAiB;IAD7B,aAAa,CAAC,sBAAsB,CAAC;GACzB,iBAAiB,CAqB7B"}