@nldd/design-system 0.8.43 → 0.8.44

package/dist/components/layout/sheet/sheet.styles.js

@@ -10,6 +10,7 @@ export const sheetStyles = css `
 
 	:host {
 		--_width: initial;
+		--_height: initial;
 
 		display: block;
 	}
@@ -58,15 +59,15 @@ export const sheetStyles = css `
 
 	.sheet {
 		display: flex;
-		flex-direction: column;
-		border: none;
-		padding: 0;
+		position: fixed;
 		margin: 0;
-		background: var(--semantics-surfaces-background-color);
+		border: none;
 		box-shadow: var(--semantics-overlays-box-shadow);
-		overflow: hidden;
-		position: fixed;
 		outline: none;
+		background: var(--semantics-surfaces-background-color);
+		overflow: hidden;
+		padding: 0;
+		flex-direction: column;
 	}
 
 	.sheet:focus-visible:not(.is-pointer-focus) {
@@ -93,9 +94,9 @@ export const sheetStyles = css `
 	:host([placement='right']) .sheet,
 	:host(:not([placement])) .sheet {
 		inset: var(--semantics-overlays-inset) var(--semantics-overlays-inset) var(--semantics-overlays-inset) auto;
+		border-radius: var(--semantics-overlays-corner-radius);
 		width: min(var(--_width, var(--semantics-sheets-side-md-width)), calc(100vw - var(--semantics-overlays-inset) * 2));
 		height: calc(100dvh - var(--semantics-overlays-inset) * 2);
-		border-radius: var(--semantics-overlays-corner-radius);
 
 		@media (min-width: ${lgMin}) {
 			width: min(var(--_width, var(--semantics-sheets-side-lg-width)), calc(100vw - var(--semantics-overlays-inset) * 2));
@@ -115,9 +116,9 @@ export const sheetStyles = css `
 
 	:host([placement='left']) .sheet {
 		inset: var(--semantics-overlays-inset) auto var(--semantics-overlays-inset) var(--semantics-overlays-inset);
+		border-radius: var(--semantics-overlays-corner-radius);
 		width: min(var(--_width, var(--semantics-sheets-side-md-width)), calc(100vw - var(--semantics-overlays-inset) * 2));
 		height: calc(100dvh - var(--semantics-overlays-inset) * 2);
-		border-radius: var(--semantics-overlays-corner-radius);
 
 		@media (min-width: ${lgMin}) {
 			width: min(var(--_width, var(--semantics-sheets-side-lg-width)), calc(100vw - var(--semantics-overlays-inset) * 2));
@@ -133,15 +134,22 @@ export const sheetStyles = css `
 	}
 
 
-	/* # Placement: bottom */
+	/* # Placement: bottom
+
+	   Default height is full (viewport minus top-inset) so visualisation-
+	   heavy bottom sheets fill the available area without the consumer
+	   having to opt in. Consumers that want a content-sized sheet pass
+	   height="fit-content" — max-height already keeps the sheet within
+	   100dvh - top-inset regardless of the chosen value, so the dismiss-
+	   tap area at the top is preserved even for oversized custom heights. */
 
 	:host([placement='bottom']) .sheet {
 		inset: auto 0 0 0;
-		max-width: var(--semantics-page-sections-body-max-width);
-		max-height: calc(100dvh - var(--semantics-sheets-bottom-top-inset));
-		height: auto;
 		margin-inline: auto;
 		border-radius: var(--semantics-overlays-corner-radius) var(--semantics-overlays-corner-radius) 0 0;
+		max-width: var(--semantics-page-sections-body-max-width);
+		max-height: calc(100dvh - var(--semantics-sheets-bottom-top-inset));
+		height: var(--_height, calc(100dvh - var(--semantics-sheets-bottom-top-inset)));
 
 		@media (max-width: ${smMax}) {
 			width: 100%;
@@ -166,32 +174,21 @@ export const sheetStyles = css `
 	}
 
 
-	/* # Full-height
-	   Force a bottom sheet to take its full max-height (= viewport minus
-	   the top-inset), so visualisation-heavy content (graph view, full
-	   editors) doesn't shrink to its intrinsic size. The top-inset stays
-	   intact: it gives users a tap target to dismiss the sheet and a
-	   visual cue that this is an overlay, not a full page. The sm
-	   responsive block below covers the case where any placement
-	   collapses to a bottom sheet on small viewports. */
+	/* # Responsive: sm viewport — all placements become bottom sheet
 
-	:host([placement='bottom'][full-height]) .sheet {
-		height: calc(100dvh - var(--semantics-sheets-bottom-top-inset));
-	}
-
-
-	/* # Responsive: sm viewport — all placements become bottom sheet */
+	   The same default-full + opt-out-via-height semantics apply when
+	   a side sheet collapses to a bottom sheet on sm. */
 
 	@media (max-width: ${smMax}) {
 		:host([placement='right']) .sheet,
 		:host(:not([placement])) .sheet,
 		:host([placement='left']) .sheet {
 			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;
+			height: var(--_height, calc(100dvh - var(--semantics-sheets-bottom-top-inset)));
 			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: sheet-slide-in-bottom var(--semantics-sheets-bottom-animation-duration) var(--primitives-transition-easing-default) both;
@@ -201,10 +198,6 @@ export const sheetStyles = css `
 				animation: sheet-slide-out-bottom var(--semantics-sheets-bottom-animation-duration) var(--primitives-transition-easing-default) both;
 			}
 		}
-
-		:host([full-height]) .sheet {
-			height: calc(100dvh - var(--semantics-sheets-bottom-top-inset));
-		}
 	}
 
 
@@ -222,15 +215,15 @@ export const sheetStyles = css `
 
 	.sheet__body {
 		display: flex;
-		flex-direction: column;
-		flex-grow: 1;
 		min-height: 0;
 		width: 100%;
+		flex-direction: column;
+		flex-grow: 1;
 	}
 
 	::slotted(*) {
-		flex: 1;
 		min-height: 0;
+		flex: 1;
 	}
 `;
 //# sourceMappingURL=sheet.styles.js.map

package/dist/components/layout/sheet/sheet.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"sheet.styles.js","sourceRoot":"","sources":["../../../../src/components/layout/sheet/sheet.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACrC,OAAO,EAAE,WAAW,EAAE,MAAM,uCAAuC,CAAC;AAEpE,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,WAAW,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uBA8FP,KAAK;;;;;;;;;;;;;;;;;;;;;;uBAsBL,KAAK;;;;;;;;;;;;;;;;;;;;;;;;uBAwBL,KAAK;;;;;uBAKL,KAAK;;;;uBAIL,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sBA8BN,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkD1B,CAAC"}
+{"version":3,"file":"sheet.styles.js","sourceRoot":"","sources":["../../../../src/components/layout/sheet/sheet.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACrC,OAAO,EAAE,WAAW,EAAE,MAAM,uCAAuC,CAAC;AAEpE,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,WAAW,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uBA+FP,KAAK;;;;;;;;;;;;;;;;;;;;;;uBAsBL,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uBA+BL,KAAK;;;;;uBAKL,KAAK;;;;uBAIL,KAAK;;;;;;;;;;;;;;;;;;;sBAmBN,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8C1B,CAAC"}

package/dist/components/layout/spacer/spacer.styles.js

@@ -13,9 +13,9 @@ export const spacerStyles = css `
 		--_size: var(--primitives-space-16);
 
 		display: block;
-		flex-shrink: 0;
 		width: var(--_size);
 		height: var(--_size);
+		flex-shrink: 0;
 	}
 
 	:host([hidden]) {
@@ -58,11 +58,11 @@ export const spacerStyles = css `
 	/* ## Size: flexible — takes all remaining space in the flex parent */
 
 	:host([size="flexible"]) {
-		flex: 1;
 		min-width: 0;
 		min-height: 0;
 		width: auto;
 		height: auto;
+		flex: 1;
 	}
 
 	:host([size="flexible"][direction="horizontal"]) {
@@ -106,11 +106,11 @@ export const spacerStyles = css `
 		:host([sm-size="96"]) { --_size: var(--primitives-space-96); }
 
 		:host([sm-size="flexible"]) {
-			flex: 1;
 			min-width: 0;
 			min-height: 0;
 			width: auto;
 			height: auto;
+			flex: 1;
 		}
 
 		:host([sm-size="flexible"][direction="horizontal"]) {
@@ -145,11 +145,11 @@ export const spacerStyles = css `
 		:host([md-size="96"]) { --_size: var(--primitives-space-96); }
 
 		:host([md-size="flexible"]) {
-			flex: 1;
 			min-width: 0;
 			min-height: 0;
 			width: auto;
 			height: auto;
+			flex: 1;
 		}
 
 		:host([md-size="flexible"][direction="horizontal"]) {
@@ -184,11 +184,11 @@ export const spacerStyles = css `
 		:host([lg-size="96"]) { --_size: var(--primitives-space-96); }
 
 		:host([lg-size="flexible"]) {
-			flex: 1;
 			min-width: 0;
 			min-height: 0;
 			width: auto;
 			height: auto;
+			flex: 1;
 		}
 
 		:host([lg-size="flexible"][direction="horizontal"]) {

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

@@ -8,10 +8,10 @@ export const barSplitViewStyles = css `
 		--_background-color: var(--context-parent-background-color, var(--semantics-surfaces-background-color));
 
 		display: flex;
-		flex-direction: column;
+		background-color: var(--_background-color);
 		width: 100%;
 		height: 100%;
-		background-color: var(--_background-color);
+		flex-direction: column;
 	}
 
 	:host([background="default"]) {
@@ -33,10 +33,10 @@ export const barSplitViewStyles = css `
 
 	.bar-split-view {
 		display: flex;
-		flex-direction: column;
-		flex: 1;
 		min-height: 0;
 		min-width: 0;
+		flex-direction: column;
+		flex: 1;
 	}
 
 
@@ -44,10 +44,10 @@ export const barSplitViewStyles = css `
 
 	.bar-split-view__bar {
 		display: flex;
-		flex-direction: column;
-		flex-shrink: 0;
 		min-width: 0;
 		overflow: hidden;
+		flex-direction: column;
+		flex-shrink: 0;
 	}
 
 
@@ -62,19 +62,19 @@ export const barSplitViewStyles = css `
 
 	.bar-split-view__main {
 		display: flex;
-		flex-direction: column;
-		flex: 1;
 		min-height: 0;
 		min-width: 0;
 		overflow: hidden;
+		flex-direction: column;
+		flex: 1;
 	}
 
 
 	/* # Slotted */
 
 	::slotted(*) {
-		flex: 1;
 		min-height: 0;
+		flex: 1;
 	}
 `;
 //# sourceMappingURL=bar-split-view.styles.js.map

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

@@ -17,9 +17,9 @@ export const navigationSplitViewStyles = css `
 		--_background-color: var(--context-parent-background-color, var(--semantics-surfaces-background-color));
 
 		display: flex;
+		background-color: var(--_background-color);
 		width: 100%;
 		height: 100%;
-		background-color: var(--_background-color);
 	}
 
 	:host([background="default"]) {
@@ -37,11 +37,11 @@ export const navigationSplitViewStyles = css `
 
 	.navigation-split-view {
 		display: flex;
-		flex-direction: row;
-		flex: 1;
 		min-height: 0;
 		min-width: 0;
 		overflow: hidden;
+		flex-direction: row;
+		flex: 1;
 	}
 
 
@@ -49,11 +49,11 @@ export const navigationSplitViewStyles = css `
 
 	.navigation-split-view__sidebar-pane {
 		display: flex;
-		flex-direction: column;
-		flex-shrink: 0;
 		min-height: 0;
 		min-width: var(--_sidebar-min-width);
 		overflow: hidden;
+		flex-direction: column;
+		flex-shrink: 0;
 	}
 
 
@@ -61,11 +61,11 @@ export const navigationSplitViewStyles = css `
 
 	.navigation-split-view__secondary-sidebar-pane {
 		display: flex;
-		flex-direction: column;
-		flex-shrink: 0;
 		min-height: 0;
 		min-width: var(--_secondary-sidebar-min-width);
 		overflow: hidden;
+		flex-direction: column;
+		flex-shrink: 0;
 	}
 
 
@@ -73,11 +73,11 @@ export const navigationSplitViewStyles = css `
 
 	.navigation-split-view__main-pane {
 		display: flex;
-		flex-direction: column;
-		flex: 1;
 		min-height: 0;
 		min-width: var(--_main-min-width);
 		overflow: hidden;
+		flex-direction: column;
+		flex: 1;
 	}
 
 
@@ -103,11 +103,11 @@ export const navigationSplitViewStyles = css `
 		--context-dismiss-button-display: none;
 
 		display: flex;
-		flex-direction: column;
-		flex-shrink: 0;
 		min-height: 0;
 		min-width: var(--_inspector-min-width);
 		overflow: hidden;
+		flex-direction: column;
+		flex-shrink: 0;
 	}
 
 
@@ -125,37 +125,37 @@ export const navigationSplitViewStyles = css `
 
 	.navigation-split-view__inspector-sheet {
 		display: flex;
-		flex-direction: column;
-		border: none;
-		padding: 0;
+		position: fixed;
 		margin: 0;
-		background: var(--semantics-surfaces-background-color);
+		border: none;
 		box-shadow: var(--semantics-overlays-box-shadow);
-		overflow: hidden;
-		position: fixed;
 		outline: none;
+		background: var(--semantics-surfaces-background-color);
+		overflow: hidden;
+		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) {
@@ -195,10 +195,10 @@ export const navigationSplitViewStyles = css `
 
 	.navigation-split-view__inspector-sheet-body {
 		display: flex;
-		flex-direction: column;
-		flex-grow: 1;
 		min-height: 0;
 		width: 100%;
+		flex-direction: column;
+		flex-grow: 1;
 	}
 
 
@@ -216,37 +216,37 @@ export const navigationSplitViewStyles = css `
 
 	.navigation-split-view__sidebar-sheet {
 		display: flex;
-		flex-direction: column;
-		border: none;
-		padding: 0;
+		position: fixed;
 		margin: 0;
-		background: var(--semantics-surfaces-background-color);
+		border: none;
 		box-shadow: var(--semantics-overlays-box-shadow);
-		overflow: hidden;
-		position: fixed;
 		outline: none;
+		background: var(--semantics-surfaces-background-color);
+		overflow: hidden;
+		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) {
@@ -289,10 +289,10 @@ export const navigationSplitViewStyles = css `
 		--context-dismiss-button-display: block;
 
 		display: flex;
-		flex-direction: column;
-		flex-grow: 1;
 		min-height: 0;
 		width: 100%;
+		flex-direction: column;
+		flex-grow: 1;
 	}
 
 
@@ -324,8 +324,8 @@ export const navigationSplitViewStyles = css `
 	/* # Slotted */
 
 	::slotted(*) {
-		flex: 1;
 		min-height: 0;
+		flex: 1;
 	}
 `;
 //# sourceMappingURL=navigation-split-view.styles.js.map

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

@@ -6,9 +6,9 @@ export const sideBySideSplitViewStyles = css `
 
 	:host {
 		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));
@@ -33,11 +33,11 @@ export const sideBySideSplitViewStyles = css `
 
 	.side-by-side-split-view {
 		display: flex;
-		flex-direction: row;
-		flex: 1;
 		min-height: 0;
 		min-width: 0;
 		overflow: hidden;
+		flex-direction: row;
+		flex: 1;
 	}
 
 
@@ -45,11 +45,11 @@ export const sideBySideSplitViewStyles = css `
 
 	.side-by-side-split-view__pane {
 		display: flex;
-		flex-direction: column;
-		flex: 1;
 		min-height: 0;
 		min-width: var(--_pane-min-width);
 		overflow: hidden;
+		flex-direction: column;
+		flex: 1;
 	}
 
 	.side-by-side-split-view__pane[hidden] {
@@ -57,8 +57,8 @@ export const sideBySideSplitViewStyles = css `
 	}
 
 	::slotted(*) {
-		flex: 1;
 		min-height: 0;
+		flex: 1;
 	}
 `;
 //# sourceMappingURL=side-by-side-split-view.styles.js.map

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

@@ -19,19 +19,19 @@ export const splitViewDividerStyles = css `
 
 	.split-view-divider {
 		display: flex;
-		justify-content: center;
-		align-items: center;
 		position: relative;
 		background-color: var(--semantics-dividers-color);
+		justify-content: center;
+		align-items: center;
 	}
 
 
 	/* # Drag handle */
 
 	.split-view-divider__drag-handle {
-		background-color: var(--semantics-content-secondary-color);
-		border-radius: 9999px;
 		position: absolute;
+		border-radius: 9999px;
+		background-color: var(--semantics-content-secondary-color);
 	}
 
 

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

@@ -41,16 +41,16 @@ export const splitViewPaneStyles = css `
 
 	.split-view-pane {
 		display: flex;
-		flex-direction: column;
-		flex: 1;
 		min-height: 0;
 		min-width: 0;
 		overflow: hidden;
+		flex-direction: column;
+		flex: 1;
 	}
 
 	::slotted(*) {
-		flex: 1;
 		min-height: 0;
+		flex: 1;
 	}
 `;
 //# sourceMappingURL=split-view-pane.styles.js.map

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

@@ -6,10 +6,10 @@ export const stackedSplitViewStyles = css `
 
 	:host {
 		display: flex;
-		flex-direction: column;
+		background-color: var(--_background-color);
 		width: 100%;
 		height: 100%;
-		background-color: var(--_background-color);
+		flex-direction: column;
 
 		--_pane-min-height: var(--primitives-area-200); /* Pane min-height — read by JS via getComputedStyle in firstUpdated */
 		--_background-color: var(--context-parent-background-color, var(--semantics-surfaces-background-color));
@@ -34,11 +34,11 @@ export const stackedSplitViewStyles = css `
 
 	.stacked-split-view {
 		display: flex;
-		flex-direction: column;
-		flex: 1;
 		min-height: 0;
 		min-width: 0;
 		overflow: hidden;
+		flex-direction: column;
+		flex: 1;
 	}
 
 
@@ -46,11 +46,11 @@ export const stackedSplitViewStyles = css `
 
 	.stacked-split-view__pane {
 		display: flex;
-		flex-direction: column;
-		flex: 1;
 		min-height: var(--_pane-min-height);
 		min-width: 0;
 		overflow: hidden;
+		flex-direction: column;
+		flex: 1;
 	}
 
 	.stacked-split-view__pane[hidden] {
@@ -58,8 +58,8 @@ export const stackedSplitViewStyles = css `
 	}
 
 	::slotted(*) {
-		flex: 1;
 		min-height: 0;
+		flex: 1;
 	}
 `;
 //# sourceMappingURL=stacked-split-view.styles.js.map

package/dist/components/layout/window/window.styles.js

@@ -19,19 +19,19 @@ export const windowStyles = css `
 
 	.window {
 		display: flex;
-		flex-direction: column;
+		position: fixed;
+		margin: auto;
 		border: none;
-		padding: 0;
-		background-color: var(--semantics-surfaces-background-color);
 		border-radius: var(--semantics-overlays-corner-radius);
 		box-shadow: var(--semantics-overlays-box-shadow);
+		outline: none;
+		background-color: var(--semantics-surfaces-background-color);
 		overflow: hidden;
-		position: fixed;
-		margin: auto;
 		width: var(--components-window-default-width);
 		max-width: calc(100vw - var(--semantics-overlays-inset) * 2);
 		max-height: calc(100dvh - var(--semantics-overlays-inset) * 2);
-		outline: none;
+		padding: 0;
+		flex-direction: column;
 	}
 
 	.window:not([open]) {
@@ -91,10 +91,10 @@ export const windowStyles = css `
 
 	.window__body {
 		display: flex;
-		flex-direction: column;
-		flex-grow: 1;
 		min-height: 0;
 		width: 100%;
+		flex-direction: column;
+		flex-grow: 1;
 	}
 
 	::slotted(*) {

package/dist/components/lists-and-menus/cells/cell/cell.styles.js

@@ -11,14 +11,14 @@ export const cellStyles = css `
 		--_min-height: 0;
 
 		display: flex;
-		flex-direction: column;
-		align-items: flex-start;
-		flex-shrink: 0;
-		justify-content: center;
 		width: var(--_width);
 		min-width: var(--_min-width);
 		max-width: var(--_max-width);
 		min-height: var(--_min-height);
+		flex-direction: column;
+		align-items: flex-start;
+		flex-shrink: 0;
+		justify-content: center;
 	}
 
 	:host([hidden]) {
@@ -36,9 +36,9 @@ export const cellStyles = css `
 	:host([width='fit-content']),
 	:host(:not([width])),
 	:host([width='']) {
+		width: fit-content;
 		flex-grow: 0;
 		flex-basis: auto;
-		width: fit-content;
 	}
 
 	:host([width]:not([width='full']):not([width='fit-content']):not([width=''])) {