@nldd/design-system 0.8.43 → 0.8.45

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

@@ -10,12 +10,13 @@ export const sheetStyles = css `
 
 	:host {
 		--_width: initial;
+		--_height: initial;
 
 		display: block;
 	}
 
 
-	/* # Keyframes — right */
+	/* # Keyframes */
 
 	@keyframes sheet-slide-in-right {
 		from { transform: translateX(100%); }
@@ -27,9 +28,6 @@ export const sheetStyles = css `
 		to { transform: translateX(100%); }
 	}
 
-
-	/* # Keyframes — left */
-
 	@keyframes sheet-slide-in-left {
 		from { transform: translateX(-100%); }
 		to { transform: translateX(0); }
@@ -40,9 +38,6 @@ export const sheetStyles = css `
 		to { transform: translateX(-100%); }
 	}
 
-
-	/* # Keyframes — bottom */
-
 	@keyframes sheet-slide-in-bottom {
 		from { transform: translateY(100%); }
 		to { transform: translateY(0); }
@@ -58,21 +53,21 @@ export const sheetStyles = css `
 
 	.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;
 	}
 
 	.sheet: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);
 	}
 
 	.sheet:not([open]) {
@@ -87,15 +82,14 @@ export const sheetStyles = css `
 		background: transparent;
 	}
 
+	/* ## Placement: right (default) */
 
-	/* # Placement: right (default) */
-
-	:host([placement='right']) .sheet,
+	: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));
@@ -110,14 +104,13 @@ export const sheetStyles = css `
 		}
 	}
 
+	/* ## Placement: left */
 
-	/* # Placement: left */
-
-	:host([placement='left']) .sheet {
+	: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));
@@ -132,16 +125,22 @@ export const sheetStyles = css `
 		}
 	}
 
+	/* ## 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. */
 
-	/* # Placement: bottom */
-
-	:host([placement='bottom']) .sheet {
+	: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%;
@@ -165,33 +164,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. */
-
-	:host([placement='bottom'][full-height]) .sheet {
-		height: calc(100dvh - var(--semantics-sheets-bottom-top-inset));
-	}
-
-
-	/* # Responsive: sm viewport — all placements become bottom sheet */
+	/* ## 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([placement="right"]) .sheet,
 		:host(:not([placement])) .sheet,
-		:host([placement='left']) .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;
 			max-height: calc(100dvh - var(--semantics-sheets-bottom-top-inset));
-			border-radius: var(--semantics-overlays-corner-radius) var(--semantics-overlays-corner-radius) 0 0;
+			height: var(--_height, calc(100dvh - var(--semantics-sheets-bottom-top-inset)));
 
 			&[open] {
 				animation: sheet-slide-in-bottom var(--semantics-sheets-bottom-animation-duration) var(--primitives-transition-easing-default) both;
@@ -201,15 +188,8 @@ 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));
-		}
 	}
 
-
-	/* # Reduced motion */
-
 	@media (prefers-reduced-motion: reduce) {
 		.sheet[open],
 		.sheet.is-closing {
@@ -218,19 +198,21 @@ export const sheetStyles = css `
 	}
 
 
-	/* # Sheet body */
+	/* # Elements */
 
 	.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-grow: 1;
+		flex-shrink: 1;
+		flex-basis: 0;
 	}
 `;
 //# 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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uBAwFP,KAAK;;;;;;;;;;;;;;;;;;;;;uBAqBL,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uBA8BL,KAAK;;;;;uBAKL,KAAK;;;;uBAIL,KAAK;;;;;;;;;;;;;;;;;;sBAkBN,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6C1B,CAAC"}

package/dist/components/layout/spacer/spacer.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"spacer.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/spacer/spacer.styles.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,YAAY,yBAmMxB,CAAC"}
+{"version":3,"file":"spacer.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/spacer/spacer.styles.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,YAAY,yBA2MxB,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,13 @@ 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-grow: 1;
+		flex-shrink: 1;
+		flex-basis: 0;
 	}
 
 	:host([size="flexible"][direction="horizontal"]) {
@@ -106,11 +108,13 @@ 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-grow: 1;
+			flex-shrink: 1;
+			flex-basis: 0;
 		}
 
 		:host([sm-size="flexible"][direction="horizontal"]) {
@@ -145,11 +149,13 @@ 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-grow: 1;
+			flex-shrink: 1;
+			flex-basis: 0;
 		}
 
 		:host([md-size="flexible"][direction="horizontal"]) {
@@ -184,11 +190,13 @@ 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-grow: 1;
+			flex-shrink: 1;
+			flex-basis: 0;
 		}
 
 		:host([lg-size="flexible"][direction="horizontal"]) {

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

@@ -1 +1 @@
-{"version":3,"file":"spacer.styles.js","sourceRoot":"","sources":["../../../../src/components/layout/spacer/spacer.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;AAC3C,MAAM,KAAK,GAAG,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAE3C,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sBAiFT,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sBAuCL,KAAK,qBAAqB,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sBAuC/B,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoC1B,CAAC"}
+{"version":3,"file":"spacer.styles.js","sourceRoot":"","sources":["../../../../src/components/layout/spacer/spacer.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;AAC3C,MAAM,KAAK,GAAG,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAE3C,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sBAmFT,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sBAyCL,KAAK,qBAAqB,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sBAyC/B,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsC1B,CAAC"}

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":"AAEA,eAAO,MAAM,kBAAkB,yBA6E9B,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,yBAgF9B,CAAC"}

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

@@ -8,10 +8,14 @@ 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([hidden]) {
+		display: none;
 	}
 
 	:host([background="default"]) {
@@ -24,57 +28,56 @@ export const barSplitViewStyles = css `
 		--_background-color: var(--context-parent-background-color);
 	}
 
-	:host([hidden]) {
-		display: none;
-	}
-
 
 	/* # Block */
 
 	.bar-split-view {
 		display: flex;
-		flex-direction: column;
-		flex: 1;
-		min-height: 0;
 		min-width: 0;
+		min-height: 0;
+		flex-direction: column;
+		flex-grow: 1;
+		flex-shrink: 1;
+		flex-basis: 0;
 	}
 
 
-	/* # Bar */
+	/* # Elements */
 
 	.bar-split-view__bar {
 		display: flex;
-		flex-direction: column;
-		flex-shrink: 0;
 		min-width: 0;
 		overflow: hidden;
+		flex-direction: column;
+		flex-shrink: 0;
 	}
 
-
-	/* # Divider */
-
 	.bar-split-view__divider {
 		flex-shrink: 0;
 	}
 
-
-	/* # Main */
-
 	.bar-split-view__main {
 		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: 0;
 	}
 
-
-	/* # Slotted */
-
-	::slotted(*) {
-		flex: 1;
+	/* Only the main pane grows to fill remaining space; bar panes size to
+	 * their content. Without this scoping a bar's slotted content gets
+	 * flex-basis: 0 and collapses (the old 'flex: 1' shorthand expanded
+	 * to 'flex: 1 1 0%', where % resolved to 'auto' inside the
+	 * height-indeterminate bar wrapper — the longhand conversion lost
+	 * that nuance, hence this rule). */
+	::slotted([slot="main"]) {
 		min-height: 0;
+		flex-grow: 1;
+		flex-shrink: 1;
+		flex-basis: 0;
 	}
 `;
 //# sourceMappingURL=bar-split-view.styles.js.map

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,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,kBAAkB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6EpC,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgFpC,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":"AAQA,eAAO,MAAM,yBAAyB,yBAmUrC,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,yBAsTrC,CAAC"}