@nldd/design-system 0.8.43 → 0.8.45

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

@@ -10,16 +10,17 @@ export const navigationSplitViewStyles = css `
 	/* # Host */
 
 	:host {
-		--_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));
+		/* Pane min-widths — read by JS via getComputedStyle in firstUpdated */
+		--_sidebar-min-width: var(--primitives-area-320);
+		--_secondary-sidebar-min-width: var(--primitives-area-320);
+		--_main-min-width: var(--primitives-area-480);
+		--_inspector-min-width: var(--primitives-area-320);
 
 		display: flex;
+		background-color: var(--_background-color);
 		width: 100%;
 		height: 100%;
-		background-color: var(--_background-color);
 	}
 
 	:host([background="default"]) {
@@ -33,135 +34,151 @@ export const navigationSplitViewStyles = css `
 	}
 
 
+	/* # Keyframes */
+
+	@keyframes navigation-split-view-inspector-slide-in {
+		from { transform: translateX(100%); }
+		to { transform: translateX(0); }
+	}
+
+	@keyframes navigation-split-view-inspector-slide-out {
+		from { transform: translateX(0); }
+		to { transform: translateX(100%); }
+	}
+
+	@keyframes navigation-split-view-sidebar-slide-in {
+		from { transform: translateX(-100%); }
+		to { transform: translateX(0); }
+	}
+
+	@keyframes navigation-split-view-sidebar-slide-out {
+		from { transform: translateX(0); }
+		to { transform: translateX(-100%); }
+	}
+
+	@keyframes navigation-split-view-slide-in-bottom {
+		from { transform: translateY(100%); }
+		to { transform: translateY(0); }
+	}
+
+	@keyframes navigation-split-view-slide-out-bottom {
+		from { transform: translateY(0); }
+		to { transform: translateY(100%); }
+	}
+
+
 	/* # Block */
 
 	.navigation-split-view {
 		display: flex;
-		flex-direction: row;
-		flex: 1;
-		min-height: 0;
 		min-width: 0;
+		min-height: 0;
 		overflow: hidden;
+		flex-direction: row;
+		flex-grow: 1;
+		flex-shrink: 1;
+		flex-basis: 0;
 	}
 
 
-	/* # Sidebar */
+	/* # Elements */
 
 	.navigation-split-view__sidebar-pane {
 		display: flex;
-		flex-direction: column;
-		flex-shrink: 0;
-		min-height: 0;
 		min-width: var(--_sidebar-min-width);
+		min-height: 0;
 		overflow: hidden;
+		flex-direction: column;
+		flex-shrink: 0;
 	}
 
-
-	/* # Secondary sidebar */
-
 	.navigation-split-view__secondary-sidebar-pane {
 		display: flex;
-		flex-direction: column;
-		flex-shrink: 0;
-		min-height: 0;
 		min-width: var(--_secondary-sidebar-min-width);
+		min-height: 0;
 		overflow: hidden;
+		flex-direction: column;
+		flex-shrink: 0;
 	}
 
-
-	/* # Main */
-
 	.navigation-split-view__main-pane {
 		display: flex;
-		flex-direction: column;
-		flex: 1;
-		min-height: 0;
 		min-width: var(--_main-min-width);
+		min-height: 0;
 		overflow: hidden;
+		flex-direction: column;
+		flex-grow: 1;
+		flex-shrink: 1;
+		flex-basis: 0;
 	}
 
-
-	/* # Full-stack: single pane fills available space, no minimum */
-
+	/* Full-stack: the single visible pane fills the space, no minimum */
 	:host(.full-stack) .navigation-split-view__sidebar-pane,
 	:host(.full-stack) .navigation-split-view__secondary-sidebar-pane,
 	:host(.full-stack) .navigation-split-view__main-pane {
 		min-width: 0;
-		flex: 1;
+		flex-grow: 1;
+		flex-shrink: 1;
+		flex-basis: 0;
 	}
 
-
-	/* # Sidebar — inline pane suppresses dismiss button */
-
+	/* Inline sidebar panes suppress their dismiss button */
 	.navigation-split-view__sidebar-pane,
 	.navigation-split-view__secondary-sidebar-pane {
 		--context-dismiss-button-display: none;
 	}
 
 	.navigation-split-view__inspector-pane {
-		/* Suppress dismiss button — inspector is always dismissable as a sheet, not inline */
+		/* 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);
+		min-height: 0;
 		overflow: hidden;
-	}
-
-
-	/* # Inspector — sheet (dialog) */
-
-	@keyframes navigation-split-view-inspector-slide-in {
-		from { transform: translateX(100%); }
-		to { transform: translateX(0); }
-	}
-
-	@keyframes navigation-split-view-inspector-slide-out {
-		from { transform: translateX(0); }
-		to { transform: translateX(100%); }
+		flex-direction: column;
+		flex-shrink: 0;
 	}
 
 	.navigation-split-view__inspector-sheet {
 		display: flex;
-		flex-direction: column;
-		border: none;
-		padding: 0;
+		position: fixed;
 		margin: 0;
-		background: var(--semantics-surfaces-background-color);
+		outline: none;
+		border: none;
 		box-shadow: var(--semantics-overlays-box-shadow);
+		background: var(--semantics-surfaces-background-color);
 		overflow: hidden;
-		position: fixed;
-		outline: none;
+		padding: 0;
+		flex-direction: column;
 
 		@media (max-width: ${smMax}) {
 			inset: auto 0 0 0;
+			border-radius: var(--semantics-overlays-corner-radius) var(--semantics-overlays-corner-radius) 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;
+			border-radius: var(--semantics-overlays-corner-radius);
 			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;
+			border-radius: var(--semantics-overlays-corner-radius);
 			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) {
-			box-shadow: var(--semantics-focus-ring-box-shadow), var(--semantics-overlays-box-shadow);
 			outline: var(--semantics-focus-ring-outline);
 			outline-offset: var(--semantics-focus-ring-outline-offset);
+			box-shadow: var(--semantics-focus-ring-box-shadow), var(--semantics-overlays-box-shadow);
 		}
 
 		&:not([open]) {
@@ -195,64 +212,51 @@ export const navigationSplitViewStyles = css `
 
 	.navigation-split-view__inspector-sheet-body {
 		display: flex;
+		width: 100%;
+		min-height: 0;
 		flex-direction: column;
 		flex-grow: 1;
-		min-height: 0;
-		width: 100%;
-	}
-
-
-	/* # Sidebar — sheet (dialog) */
-
-	@keyframes navigation-split-view-sidebar-slide-in {
-		from { transform: translateX(-100%); }
-		to { transform: translateX(0); }
-	}
-
-	@keyframes navigation-split-view-sidebar-slide-out {
-		from { transform: translateX(0); }
-		to { transform: translateX(-100%); }
 	}
 
 	.navigation-split-view__sidebar-sheet {
 		display: flex;
-		flex-direction: column;
-		border: none;
-		padding: 0;
+		position: fixed;
 		margin: 0;
-		background: var(--semantics-surfaces-background-color);
+		outline: none;
+		border: none;
 		box-shadow: var(--semantics-overlays-box-shadow);
+		background: var(--semantics-surfaces-background-color);
 		overflow: hidden;
-		position: fixed;
-		outline: none;
+		padding: 0;
+		flex-direction: column;
 
 		@media (max-width: ${smMax}) {
 			inset: auto 0 0 0;
+			border-radius: var(--semantics-overlays-corner-radius) var(--semantics-overlays-corner-radius) 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);
+			border-radius: var(--semantics-overlays-corner-radius);
 			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);
+			border-radius: var(--semantics-overlays-corner-radius);
 			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) {
-			box-shadow: var(--semantics-focus-ring-box-shadow), var(--semantics-overlays-box-shadow);
 			outline: var(--semantics-focus-ring-outline);
 			outline-offset: var(--semantics-focus-ring-outline-offset);
+			box-shadow: var(--semantics-focus-ring-box-shadow), var(--semantics-overlays-box-shadow);
 		}
 
 		&:not([open]) {
@@ -289,28 +293,12 @@ export const navigationSplitViewStyles = css `
 		--context-dismiss-button-display: block;
 
 		display: flex;
+		width: 100%;
+		min-height: 0;
 		flex-direction: column;
 		flex-grow: 1;
-		min-height: 0;
-		width: 100%;
-	}
-
-
-	/* # Responsive: sm viewport — sheets become bottom sheets */
-
-	@keyframes navigation-split-view-slide-in-bottom {
-		from { transform: translateY(100%); }
-		to { transform: translateY(0); }
 	}
 
-	@keyframes navigation-split-view-slide-out-bottom {
-		from { transform: translateY(0); }
-		to { transform: translateY(100%); }
-	}
-
-
-	/* # Reduced motion */
-
 	@media (prefers-reduced-motion: reduce) {
 		.navigation-split-view__inspector-sheet[open],
 		.navigation-split-view__inspector-sheet.is-closing,
@@ -320,12 +308,11 @@ export const navigationSplitViewStyles = css `
 		}
 	}
 
-
-	/* # Slotted */
-
 	::slotted(*) {
-		flex: 1;
 		min-height: 0;
+		flex-grow: 1;
+		flex-shrink: 1;
+		flex-basis: 0;
 	}
 `;
 //# sourceMappingURL=navigation-split-view.styles.js.map

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;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"}
+{"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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uBAoJrB,KAAK;;;;;;;;;uBASL,KAAK,qBAAqB,KAAK;;;;;;;uBAO/B,KAAK;;;;;;;;;;;;;;;;;;;;;;wBAsBJ,KAAK;;;;wBAIL,KAAK;;;;;;wBAML,KAAK;;;;wBAIL,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;uBA0BN,KAAK;;;;;;;;;uBASL,KAAK,qBAAqB,KAAK;;;;;;;uBAO/B,KAAK;;;;;;;;;;;;;;;;;;;;;;wBAsBJ,KAAK;;;;wBAIL,KAAK;;;;;;wBAML,KAAK;;;;wBAIL,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgC5B,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,yBA6DrC,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,yBAoErC,CAAC"}

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

@@ -5,13 +5,18 @@ export const sideBySideSplitViewStyles = css `
 	/* # Host */
 
 	:host {
+		--_background-color: var(--context-parent-background-color, var(--semantics-surfaces-background-color));
+		/* Pane min-width — read by JS via getComputedStyle in firstUpdated */
+		--_pane-min-width: var(--primitives-area-320);
+
 		display: flex;
+		background-color: var(--_background-color);
 		width: 100%;
 		height: 100%;
-		background-color: var(--_background-color);
+	}
 
-		--_pane-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));
+	:host([hidden]) {
+		display: none;
 	}
 
 	:host([background="default"]) {
@@ -24,32 +29,32 @@ export const sideBySideSplitViewStyles = css `
 		--_background-color: var(--context-parent-background-color);
 	}
 
-	:host([hidden]) {
-		display: none;
-	}
-
 
 	/* # Block */
 
 	.side-by-side-split-view {
 		display: flex;
-		flex-direction: row;
-		flex: 1;
-		min-height: 0;
 		min-width: 0;
+		min-height: 0;
 		overflow: hidden;
+		flex-direction: row;
+		flex-grow: 1;
+		flex-shrink: 1;
+		flex-basis: 0;
 	}
 
 
-	/* # Pane */
+	/* # Elements */
 
 	.side-by-side-split-view__pane {
 		display: flex;
-		flex-direction: column;
-		flex: 1;
-		min-height: 0;
 		min-width: var(--_pane-min-width);
+		min-height: 0;
 		overflow: hidden;
+		flex-direction: column;
+		flex-grow: 1;
+		flex-shrink: 1;
+		flex-basis: 0;
 	}
 
 	.side-by-side-split-view__pane[hidden] {
@@ -57,8 +62,10 @@ export const sideBySideSplitViewStyles = css `
 	}
 
 	::slotted(*) {
-		flex: 1;
 		min-height: 0;
+		flex-grow: 1;
+		flex-shrink: 1;
+		flex-basis: 0;
 	}
 `;
 //# sourceMappingURL=side-by-side-split-view.styles.js.map

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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6D3C,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoE3C,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"split-view-divider.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/split-views/split-view-divider/split-view-divider.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,sBAAsB,yBAgFlC,CAAC"}
+{"version":3,"file":"split-view-divider.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/split-views/split-view-divider/split-view-divider.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,sBAAsB,yBA4DlC,CAAC"}

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

@@ -5,6 +5,8 @@ export const splitViewDividerStyles = css `
 	/* # Host */
 
 	:host {
+		--_thickness: var(--semantics-dividers-thickness);
+
 		display: flex;
 		flex-shrink: 0;
 		align-self: stretch;
@@ -14,70 +16,48 @@ export const splitViewDividerStyles = css `
 		display: none;
 	}
 
+	:host([has-drag-handle]) {
+		--_thickness: var(--primitives-space-12);
+	}
+
 
 	/* # Block */
 
 	.split-view-divider {
 		display: flex;
-		justify-content: center;
-		align-items: center;
 		position: relative;
 		background-color: var(--semantics-dividers-color);
+		width: 100%;
+		height: var(--_thickness);
+		align-items: center;
+		justify-content: center;
 	}
 
-
-	/* # Drag handle */
-
-	.split-view-divider__drag-handle {
-		background-color: var(--semantics-content-secondary-color);
-		border-radius: 9999px;
-		position: absolute;
-	}
-
-
-	/* # Vertical */
-
-	:host([orientation='vertical']) .split-view-divider {
-		width: var(--semantics-dividers-thickness);
+	:host([orientation="vertical"]) .split-view-divider {
+		width: var(--_thickness);
 		height: 100%;
 	}
 
-	:host([orientation='vertical'][has-drag-handle]) .split-view-divider {
-		width: 12px;
-	}
-
-	:host([orientation='vertical']) .split-view-divider__drag-handle {
-		width: 4px;
-		height: 40px;
+	@media (forced-colors: active) {
+		.split-view-divider {
+			background-color: CanvasText;
+		}
 	}
 
 
-	/* # Horizontal */
-
-	:host([orientation='horizontal']) .split-view-divider,
-	:host(:not([orientation])) .split-view-divider {
-		width: 100%;
-		height: var(--semantics-dividers-thickness);
-	}
-
-	:host([orientation='horizontal'][has-drag-handle]) .split-view-divider,
-	:host(:not([orientation])[has-drag-handle]) .split-view-divider {
-		height: 12px;
-	}
+	/* # Elements */
 
-	:host([orientation='horizontal']) .split-view-divider__drag-handle,
-	:host(:not([orientation])) .split-view-divider__drag-handle {
-		width: 40px;
-		height: 4px;
+	.split-view-divider__drag-handle {
+		position: absolute;
+		border-radius: var(--primitives-corner-radius-full);
+		background-color: var(--semantics-content-secondary-color);
+		width: var(--primitives-space-40);
+		height: var(--primitives-space-4);
 	}
 
-
-	/* # High contrast */
-
-	@media (forced-colors: active) {
-		.split-view-divider {
-			background-color: CanvasText;
-		}
+	:host([orientation="vertical"]) .split-view-divider__drag-handle {
+		width: var(--primitives-space-4);
+		height: var(--primitives-space-40);
 	}
 `;
 //# sourceMappingURL=split-view-divider.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"split-view-divider.styles.js","sourceRoot":"","sources":["../../../../../src/components/layout/split-views/split-view-divider/split-view-divider.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,sBAAsB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgFxC,CAAC"}
+{"version":3,"file":"split-view-divider.styles.js","sourceRoot":"","sources":["../../../../../src/components/layout/split-views/split-view-divider/split-view-divider.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,sBAAsB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4DxC,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"split-view-pane.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/split-views/split-view-pane/split-view-pane.styles.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,mBAAmB,yBAmD/B,CAAC"}
+{"version":3,"file":"split-view-pane.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/split-views/split-view-pane/split-view-pane.styles.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,mBAAmB,yBAiE/B,CAAC"}

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

@@ -18,6 +18,10 @@ export const splitViewPaneStyles = css `
 		}
 	}
 
+	:host([hidden]) {
+		display: none;
+	}
+
 	:host([background="default"]) {
 		--context-parent-background-color: var(--semantics-surfaces-background-color);
 		--_background-color: var(--context-parent-background-color);
@@ -28,10 +32,6 @@ export const splitViewPaneStyles = css `
 		--_background-color: var(--context-parent-background-color);
 	}
 
-	:host([hidden]) {
-		display: none;
-	}
-
 	:host([hide-back]) {
 		--context-back-button-display: none;
 	}
@@ -39,18 +39,32 @@ export const splitViewPaneStyles = css `
 
 	/* # Block */
 
+	/* flex-basis: auto (not 0) so the pane works in both determinate
+	 * parents (main column — grows to fill via flex-grow) AND
+	 * indeterminate parents (a bar — auto = content size, no growth
+	 * space, stays compact). The old 'flex: 1' shorthand expanded to
+	 * 'flex-basis: 0%' which the spec resolves to 'auto' in indeterminate
+	 * parents; the longhand conversion lost that nuance and collapsed
+	 * panes inside bars. */
 	.split-view-pane {
 		display: flex;
-		flex-direction: column;
-		flex: 1;
-		min-height: 0;
 		min-width: 0;
+		min-height: 0;
 		overflow: hidden;
+		flex-direction: column;
+		flex-grow: 1;
+		flex-shrink: 1;
+		flex-basis: auto;
 	}
 
+
+	/* # Elements */
+
 	::slotted(*) {
-		flex: 1;
 		min-height: 0;
+		flex-grow: 1;
+		flex-shrink: 1;
+		flex-basis: auto;
 	}
 `;
 //# sourceMappingURL=split-view-pane.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"split-view-pane.styles.js","sourceRoot":"","sources":["../../../../../src/components/layout/split-views/split-view-pane/split-view-pane.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,mBAAmB,GAAG,GAAG,CAAA;;;;;;;;;;;;uBAYf,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuC3B,CAAC"}
+{"version":3,"file":"split-view-pane.styles.js","sourceRoot":"","sources":["../../../../../src/components/layout/split-views/split-view-pane/split-view-pane.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,mBAAmB,GAAG,GAAG,CAAA;;;;;;;;;;;;uBAYf,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqD3B,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"stacked-split-view.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/split-views/stacked-split-view/stacked-split-view.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,sBAAsB,yBA8DlC,CAAC"}
+{"version":3,"file":"stacked-split-view.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/split-views/stacked-split-view/stacked-split-view.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,sBAAsB,yBAqElC,CAAC"}