@nldd/design-system 0.8.40 → 0.8.42

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

@@ -11,6 +11,9 @@
  * @element nldd-sheet
  *
  * @attr {string}  placement        - Sheet position: 'left' | 'right' | 'bottom' (default: 'right')
+ * @attr {boolean} full-height      - Force the sheet to fill the viewport top to bottom. Applies to
+ *                                    bottom sheets and to any sheet on sm viewports (where all
+ *                                    placements collapse to bottom). No effect on side sheets at md+.
  * @attr {boolean} modeless         - Non-modal (no backdrop or focus lock); the sheet is modal by default
  * @attr {string}  accessible-label - Accessible name for the dialog, forwarded as aria-label (default: 'Dialoogvenster')
  * @attr {string}  width            - Custom width for side sheets (left/right) as a CSS length
@@ -41,6 +44,7 @@ let NLDDSheet = class NLDDSheet extends LitElement {
     constructor() {
         super(...arguments);
         this.placement = 'right';
+        this.fullHeight = false;
         this.modeless = false;
         /** Accessible name for the dialog — forwarded as aria-label to the dialog element. */
         this.accessibleLabel = 'Venster';
@@ -152,6 +156,9 @@ NLDDSheet.styles = sheetStyles;
 __decorate([
     property({ type: String, reflect: true })
 ], NLDDSheet.prototype, "placement", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'full-height' })
+], NLDDSheet.prototype, "fullHeight", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], NLDDSheet.prototype, "modeless", void 0);

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

@@ -1 +1 @@
-{"version":3,"file":"sheet.js","sourceRoot":"","sources":["../../../../src/components/layout/sheet/sheet.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"sheet.js","sourceRoot":"","sources":["../../../../src/components/layout/sheet/sheet.ts"],"names":[],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"sheet.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/sheet/sheet.styles.ts"],"names":[],"mappings":"AAOA,eAAO,MAAM,WAAW,yBAkNvB,CAAC"}
+{"version":3,"file":"sheet.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/sheet/sheet.styles.ts"],"names":[],"mappings":"AAOA,eAAO,MAAM,WAAW,yBAqOvB,CAAC"}

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

@@ -9,8 +9,9 @@ export const sheetStyles = css `
 	/* # Host */
 
 	:host {
-		display: block;
 		--_custom-width: initial;
+
+		display: block;
 	}
 
 
@@ -165,6 +166,20 @@ 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 */
 
 	@media (max-width: ${smMax}) {
@@ -186,6 +201,10 @@ 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));
+		}
 	}
 
 

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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uBA6FP,KAAK;;;;;;;;;;;;;;;;;;;;;;uBAsBL,KAAK;;;;;;;;;;;;;;;;;;;;;;;;uBAwBL,KAAK;;;;;uBAKL,KAAK;;;;uBAIL,KAAK;;;;;;;;;;;;;;;;sBAgBN,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8C1B,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uBA8FP,KAAK;;;;;;;;;;;;;;;;;;;;;;uBAsBL,KAAK;;;;;;;;;;;;;;;;;;;;;;;;uBAwBL,KAAK;;;;;uBAKL,KAAK;;;;uBAIL,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sBA8BN,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkD1B,CAAC"}

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

@@ -1,17 +1,42 @@
 /**
  * Nederlandse Digitale Dienst Spacer Component (Lit + TypeScript)
  *
+ * Add explicit space between elements. Components in this design system
+ * have no margins of their own — all whitespace is set by a spacer.
+ *
+ * ### Sizing
+ * Use a single `size` attribute for whitespace that's the same at every
+ * viewport. Combine with `sm-size`, `md-size` and/or `lg-size` to override
+ * the size at specific breakpoints (mobile-first cascade is intentionally
+ * avoided — each breakpoint that needs a different value declares it
+ * explicitly):
+ *
+ * - `size` applies at every breakpoint that has no per-viewport override.
+ * - `sm-size` overrides at sm (max-width: 640px).
+ * - `md-size` overrides at md (641px–1007px).
+ * - `lg-size` overrides at lg (min-width: 1008px).
+ *
+ * Use `flexible` (in any of the four attributes) to fill the remaining
+ * space in a flex container.
+ *
  * @element nldd-spacer
  *
- * @attr {string} size - Spacer size: 'flexible' | 'md' | fixed values (2–96)
- * @attr {string} direction - Direction: 'horizontal' | 'vertical' | 'both'
+ * @attr {string} size - Base spacer size. 'flexible' or one of the fixed
+ *   tokens (2–96). Default: '16'.
+ * @attr {string} sm-size - Spacer size at sm breakpoint (max-width: 640px).
+ * @attr {string} md-size - Spacer size at md breakpoint (641px–1007px).
+ * @attr {string} lg-size - Spacer size at lg breakpoint (min-width: 1008px).
+ * @attr {string} direction - Direction: 'horizontal' | 'vertical' | 'both' (default: 'both')
  */
 import { LitElement } from 'lit';
-type SpacerSize = 'flexible' | 'md' | '2' | '4' | '6' | '8' | '10' | '12' | '16' | '20' | '24' | '28' | '32' | '40' | '44' | '48' | '56' | '64' | '80' | '96';
+type SpacerSize = 'flexible' | '2' | '4' | '6' | '8' | '10' | '12' | '16' | '20' | '24' | '28' | '32' | '40' | '44' | '48' | '56' | '64' | '80' | '96';
 type Direction = 'horizontal' | 'vertical' | 'both';
 export declare class NLDDSpacer extends LitElement {
     static styles: import("lit").CSSResult;
     size: SpacerSize;
+    smSize?: SpacerSize;
+    mdSize?: SpacerSize;
+    lgSize?: SpacerSize;
     direction: Direction;
 }
 declare global {

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

@@ -1 +1 @@
-{"version":3,"file":"spacer.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/spacer/spacer.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAIjC,KAAK,UAAU,GACZ,UAAU,GACV,IAAI,GACJ,GAAG,GACH,GAAG,GACH,GAAG,GACH,GAAG,GACH,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,CAAC;AACR,KAAK,SAAS,GAAG,YAAY,GAAG,UAAU,GAAG,MAAM,CAAC;AAEpD,qBACa,UAAW,SAAQ,UAAU;IACzC,OAAgB,MAAM,0BAAgB;IAGtC,IAAI,EAAE,UAAU,CAAQ;IAGxB,SAAS,EAAE,SAAS,CAAU;CAC9B;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,aAAa,EAAE,UAAU,CAAC;KAC1B;CACD"}
+{"version":3,"file":"spacer.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/spacer/spacer.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAIjC,KAAK,UAAU,GACZ,UAAU,GACV,GAAG,GACH,GAAG,GACH,GAAG,GACH,GAAG,GACH,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,CAAC;AACR,KAAK,SAAS,GAAG,YAAY,GAAG,UAAU,GAAG,MAAM,CAAC;AAEpD,qBACa,UAAW,SAAQ,UAAU;IACzC,OAAgB,MAAM,0BAAgB;IAGtC,IAAI,EAAE,UAAU,CAAQ;IAGxB,MAAM,CAAC,EAAE,UAAU,CAAC;IAGpB,MAAM,CAAC,EAAE,UAAU,CAAC;IAGpB,MAAM,CAAC,EAAE,UAAU,CAAC;IAGpB,SAAS,EAAE,SAAS,CAAU;CAC9B;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,aAAa,EAAE,UAAU,CAAC;KAC1B;CACD"}

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

@@ -7,10 +7,32 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 /**
  * Nederlandse Digitale Dienst Spacer Component (Lit + TypeScript)
  *
+ * Add explicit space between elements. Components in this design system
+ * have no margins of their own — all whitespace is set by a spacer.
+ *
+ * ### Sizing
+ * Use a single `size` attribute for whitespace that's the same at every
+ * viewport. Combine with `sm-size`, `md-size` and/or `lg-size` to override
+ * the size at specific breakpoints (mobile-first cascade is intentionally
+ * avoided — each breakpoint that needs a different value declares it
+ * explicitly):
+ *
+ * - `size` applies at every breakpoint that has no per-viewport override.
+ * - `sm-size` overrides at sm (max-width: 640px).
+ * - `md-size` overrides at md (641px–1007px).
+ * - `lg-size` overrides at lg (min-width: 1008px).
+ *
+ * Use `flexible` (in any of the four attributes) to fill the remaining
+ * space in a flex container.
+ *
  * @element nldd-spacer
  *
- * @attr {string} size - Spacer size: 'flexible' | 'md' | fixed values (2–96)
- * @attr {string} direction - Direction: 'horizontal' | 'vertical' | 'both'
+ * @attr {string} size - Base spacer size. 'flexible' or one of the fixed
+ *   tokens (2–96). Default: '16'.
+ * @attr {string} sm-size - Spacer size at sm breakpoint (max-width: 640px).
+ * @attr {string} md-size - Spacer size at md breakpoint (641px–1007px).
+ * @attr {string} lg-size - Spacer size at lg breakpoint (min-width: 1008px).
+ * @attr {string} direction - Direction: 'horizontal' | 'vertical' | 'both' (default: 'both')
  */
 import { LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
@@ -26,6 +48,15 @@ NLDDSpacer.styles = spacerStyles;
 __decorate([
     property({ type: String, reflect: true })
 ], NLDDSpacer.prototype, "size", void 0);
+__decorate([
+    property({ type: String, reflect: true, attribute: 'sm-size' })
+], NLDDSpacer.prototype, "smSize", void 0);
+__decorate([
+    property({ type: String, reflect: true, attribute: 'md-size' })
+], NLDDSpacer.prototype, "mdSize", void 0);
+__decorate([
+    property({ type: String, reflect: true, attribute: 'lg-size' })
+], NLDDSpacer.prototype, "lgSize", void 0);
 __decorate([
     property({ type: String, reflect: true })
 ], NLDDSpacer.prototype, "direction", void 0);

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

@@ -1 +1 @@
-{"version":3,"file":"spacer.js","sourceRoot":"","sources":["../../../../src/components/layout/spacer/spacer.ts"],"names":[],"mappings":";;;;;;AAAA;;;;;;;GAOG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACjC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AA0B3C,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,UAAU;IAAnC;;QAIN,SAAI,GAAe,IAAI,CAAC;QAGxB,cAAS,GAAc,MAAM,CAAC;IAC/B,CAAC;;AAPgB,iBAAM,GAAG,YAAY,AAAf,CAAgB;AAGtC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wCAClB;AAGxB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;6CACZ;AAPlB,UAAU;IADtB,aAAa,CAAC,aAAa,CAAC;GAChB,UAAU,CAQtB"}
+{"version":3,"file":"spacer.js","sourceRoot":"","sources":["../../../../src/components/layout/spacer/spacer.ts"],"names":[],"mappings":";;;;;;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACjC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAyB3C,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,UAAU;IAAnC;;QAIN,SAAI,GAAe,IAAI,CAAC;QAYxB,cAAS,GAAc,MAAM,CAAC;IAC/B,CAAC;;AAhBgB,iBAAM,GAAG,YAAY,AAAf,CAAgB;AAGtC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wCAClB;AAGxB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,SAAS,EAAE,CAAC;0CAC5C;AAGpB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,SAAS,EAAE,CAAC;0CAC5C;AAGpB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,SAAS,EAAE,CAAC;0CAC5C;AAGpB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;6CACZ;AAhBlB,UAAU;IADtB,aAAa,CAAC,aAAa,CAAC;GAChB,UAAU,CAiBtB"}

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":"AAGA,eAAO,MAAM,YAAY,yBAwJxB,CAAC"}
+{"version":3,"file":"spacer.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/spacer/spacer.styles.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,YAAY,yBAmMxB,CAAC"}

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

@@ -1,13 +1,21 @@
 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 spacerStyles = css `
 
 
 	/* # Host */
 
 	:host {
+		--_size: var(--primitives-space-16);
+
 		display: block;
 		flex-shrink: 0;
+		width: var(--_size);
+		height: var(--_size);
 	}
 
 	:host([hidden]) {
@@ -15,142 +23,181 @@ export const spacerStyles = css `
 	}
 
 
-	/* # Flexible and responsive */
-
-	:host([size='flexible']) {
-		flex: 1;
-		min-width: 0;
-		min-height: 0;
-	}
-
-	:host([size='md']) {
-		width: var(--primitives-space-16);
-		height: var(--primitives-space-16);
+	/* # Direction */
 
-		@media (min-width: ${unsafeCSS(breakpoints.smMax)}) {
-			width: var(--primitives-space-24);
-			height: var(--primitives-space-24);
-		}
-	}
-
-
-	/* # Fixed sizes */
-
-	:host([size='2']) {
-		width: var(--primitives-space-2);
-		height: var(--primitives-space-2);
-	}
-
-	:host([size='4']) {
-		width: var(--primitives-space-4);
-		height: var(--primitives-space-4);
-	}
-
-	:host([size='6']) {
-		width: var(--primitives-space-6);
-		height: var(--primitives-space-6);
-	}
-
-	:host([size='16']),
-	:host(:not([size])) {
-		width: var(--primitives-space-16);
-		height: var(--primitives-space-16);
-	}
-
-	:host([size='8']) {
-		width: var(--primitives-space-8);
-		height: var(--primitives-space-8);
-	}
-
-	:host([size='10']) {
-		width: var(--primitives-space-10);
-		height: var(--primitives-space-10);
+	:host([direction="horizontal"]) {
+		height: auto;
 	}
 
-	:host([size='12']) {
-		width: var(--primitives-space-12);
-		height: var(--primitives-space-12);
+	:host([direction="vertical"]) {
+		width: auto;
 	}
 
-	:host([size='16']) {
-		width: var(--primitives-space-16);
-		height: var(--primitives-space-16);
-	}
 
-	:host([size='20']) {
-		width: var(--primitives-space-20);
-		height: var(--primitives-space-20);
-	}
+	/* # Size — applies at every breakpoint */
 
-	:host([size='24']) {
-		width: var(--primitives-space-24);
-		height: var(--primitives-space-24);
-	}
+	:host([size="2"]) { --_size: var(--primitives-space-2); }
+	:host([size="4"]) { --_size: var(--primitives-space-4); }
+	:host([size="6"]) { --_size: var(--primitives-space-6); }
+	:host([size="8"]) { --_size: var(--primitives-space-8); }
+	:host([size="10"]) { --_size: var(--primitives-space-10); }
+	:host([size="12"]) { --_size: var(--primitives-space-12); }
+	:host([size="16"]) { --_size: var(--primitives-space-16); }
+	:host([size="20"]) { --_size: var(--primitives-space-20); }
+	:host([size="24"]) { --_size: var(--primitives-space-24); }
+	:host([size="28"]) { --_size: var(--primitives-space-28); }
+	:host([size="32"]) { --_size: var(--primitives-space-32); }
+	:host([size="40"]) { --_size: var(--primitives-space-40); }
+	:host([size="44"]) { --_size: var(--primitives-space-44); }
+	:host([size="48"]) { --_size: var(--primitives-space-48); }
+	:host([size="56"]) { --_size: var(--primitives-space-56); }
+	:host([size="64"]) { --_size: var(--primitives-space-64); }
+	:host([size="80"]) { --_size: var(--primitives-space-80); }
+	:host([size="96"]) { --_size: var(--primitives-space-96); }
 
-	:host([size='28']) {
-		width: var(--primitives-space-28);
-		height: var(--primitives-space-28);
-	}
+	/* ## Size: flexible — takes all remaining space in the flex parent */
 
-	:host([size='32']) {
-		width: var(--primitives-space-32);
-		height: var(--primitives-space-32);
-	}
-
-	:host([size='40']) {
-		width: var(--primitives-space-40);
-		height: var(--primitives-space-40);
+	:host([size="flexible"]) {
+		flex: 1;
+		min-width: 0;
+		min-height: 0;
+		width: auto;
+		height: auto;
 	}
 
-	:host([size='44']) {
-		width: var(--primitives-space-44);
-		height: var(--primitives-space-44);
+	:host([size="flexible"][direction="horizontal"]) {
+		min-height: auto;
 	}
 
-	:host([size='48']) {
-		width: var(--primitives-space-48);
-		height: var(--primitives-space-48);
+	:host([size="flexible"][direction="vertical"]) {
+		min-width: auto;
 	}
 
-	:host([size='56']) {
-		width: var(--primitives-space-56);
-		height: var(--primitives-space-56);
-	}
 
-	:host([size='64']) {
-		width: var(--primitives-space-64);
-		height: var(--primitives-space-64);
-	}
+	/* # Per-viewport size overrides
+	 *
+	 * Each per-breakpoint attribute (sm-size / md-size / lg-size) sets the
+	 * same --_size local var inside its respective @media query, so it wins
+	 * over the base [size] selector at that breakpoint via cascade source
+	 * order. If only [size] is set, --_size keeps the base value across all
+	 * breakpoints.
+	 */
+
+	/* ## sm: max-width 640px */
+
+	@media (max-width: ${smMax}) {
+		:host([sm-size="2"]) { --_size: var(--primitives-space-2); }
+		:host([sm-size="4"]) { --_size: var(--primitives-space-4); }
+		:host([sm-size="6"]) { --_size: var(--primitives-space-6); }
+		:host([sm-size="8"]) { --_size: var(--primitives-space-8); }
+		:host([sm-size="10"]) { --_size: var(--primitives-space-10); }
+		:host([sm-size="12"]) { --_size: var(--primitives-space-12); }
+		:host([sm-size="16"]) { --_size: var(--primitives-space-16); }
+		:host([sm-size="20"]) { --_size: var(--primitives-space-20); }
+		:host([sm-size="24"]) { --_size: var(--primitives-space-24); }
+		:host([sm-size="28"]) { --_size: var(--primitives-space-28); }
+		:host([sm-size="32"]) { --_size: var(--primitives-space-32); }
+		:host([sm-size="40"]) { --_size: var(--primitives-space-40); }
+		:host([sm-size="44"]) { --_size: var(--primitives-space-44); }
+		:host([sm-size="48"]) { --_size: var(--primitives-space-48); }
+		:host([sm-size="56"]) { --_size: var(--primitives-space-56); }
+		:host([sm-size="64"]) { --_size: var(--primitives-space-64); }
+		:host([sm-size="80"]) { --_size: var(--primitives-space-80); }
+		: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;
+		}
 
-	:host([size='80']) {
-		width: var(--primitives-space-80);
-		height: var(--primitives-space-80);
-	}
+		:host([sm-size="flexible"][direction="horizontal"]) {
+			min-height: auto;
+		}
 
-	:host([size='96']) {
-		width: var(--primitives-space-96);
-		height: var(--primitives-space-96);
+		:host([sm-size="flexible"][direction="vertical"]) {
+			min-width: auto;
+		}
 	}
 
+	/* ## md: 641px–1007px */
+
+	@media (min-width: ${mdMin}) and (max-width: ${mdMax}) {
+		:host([md-size="2"]) { --_size: var(--primitives-space-2); }
+		:host([md-size="4"]) { --_size: var(--primitives-space-4); }
+		:host([md-size="6"]) { --_size: var(--primitives-space-6); }
+		:host([md-size="8"]) { --_size: var(--primitives-space-8); }
+		:host([md-size="10"]) { --_size: var(--primitives-space-10); }
+		:host([md-size="12"]) { --_size: var(--primitives-space-12); }
+		:host([md-size="16"]) { --_size: var(--primitives-space-16); }
+		:host([md-size="20"]) { --_size: var(--primitives-space-20); }
+		:host([md-size="24"]) { --_size: var(--primitives-space-24); }
+		:host([md-size="28"]) { --_size: var(--primitives-space-28); }
+		:host([md-size="32"]) { --_size: var(--primitives-space-32); }
+		:host([md-size="40"]) { --_size: var(--primitives-space-40); }
+		:host([md-size="44"]) { --_size: var(--primitives-space-44); }
+		:host([md-size="48"]) { --_size: var(--primitives-space-48); }
+		:host([md-size="56"]) { --_size: var(--primitives-space-56); }
+		:host([md-size="64"]) { --_size: var(--primitives-space-64); }
+		:host([md-size="80"]) { --_size: var(--primitives-space-80); }
+		: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;
+		}
 
-	/* # Direction modifiers */
+		:host([md-size="flexible"][direction="horizontal"]) {
+			min-height: auto;
+		}
 
-	:host([direction='horizontal']) {
-		height: auto;
+		:host([md-size="flexible"][direction="vertical"]) {
+			min-width: auto;
+		}
 	}
 
-	:host([direction='vertical']) {
-		width: auto;
-	}
+	/* ## lg: min-width 1008px */
+
+	@media (min-width: ${lgMin}) {
+		:host([lg-size="2"]) { --_size: var(--primitives-space-2); }
+		:host([lg-size="4"]) { --_size: var(--primitives-space-4); }
+		:host([lg-size="6"]) { --_size: var(--primitives-space-6); }
+		:host([lg-size="8"]) { --_size: var(--primitives-space-8); }
+		:host([lg-size="10"]) { --_size: var(--primitives-space-10); }
+		:host([lg-size="12"]) { --_size: var(--primitives-space-12); }
+		:host([lg-size="16"]) { --_size: var(--primitives-space-16); }
+		:host([lg-size="20"]) { --_size: var(--primitives-space-20); }
+		:host([lg-size="24"]) { --_size: var(--primitives-space-24); }
+		:host([lg-size="28"]) { --_size: var(--primitives-space-28); }
+		:host([lg-size="32"]) { --_size: var(--primitives-space-32); }
+		:host([lg-size="40"]) { --_size: var(--primitives-space-40); }
+		:host([lg-size="44"]) { --_size: var(--primitives-space-44); }
+		:host([lg-size="48"]) { --_size: var(--primitives-space-48); }
+		:host([lg-size="56"]) { --_size: var(--primitives-space-56); }
+		:host([lg-size="64"]) { --_size: var(--primitives-space-64); }
+		:host([lg-size="80"]) { --_size: var(--primitives-space-80); }
+		: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;
+		}
 
-	:host([size='flexible'][direction='horizontal']) {
-		height: auto;
-		min-height: auto;
-	}
+		:host([lg-size="flexible"][direction="horizontal"]) {
+			min-height: auto;
+		}
 
-	:host([size='flexible'][direction='vertical']) {
-		width: auto;
-		min-width: auto;
+		:host([lg-size="flexible"][direction="vertical"]) {
+			min-width: auto;
+		}
 	}
 `;
 //# sourceMappingURL=spacer.styles.js.map

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,CAAC,MAAM,YAAY,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;uBA2BR,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6HlD,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sBAiFT,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sBAuCL,KAAK,qBAAqB,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sBAuC/B,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoC1B,CAAC"}

package/dist/components/lists-and-menus/cells/cell/cell.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"cell.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/lists-and-menus/cells/cell/cell.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,UAAU,yBAwEtB,CAAC"}
+{"version":3,"file":"cell.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/lists-and-menus/cells/cell/cell.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,UAAU,yBA6EtB,CAAC"}

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

@@ -5,15 +5,16 @@ export const cellStyles = css `
 	/* # Host */
 
 	:host {
+		--_width: auto;
+		--_min-width: 0;
+		--_max-width: none;
+		--_min-height: 0;
+
 		display: flex;
 		flex-direction: column;
 		align-items: stretch;
 		flex-shrink: 0;
 		justify-content: center;
-		--_width: auto;
-		--_min-width: 0;
-		--_max-width: none;
-		--_min-height: 0;
 		width: var(--_width);
 		min-width: var(--_min-width);
 		max-width: var(--_max-width);
@@ -30,12 +31,12 @@ export const cellStyles = css `
 	:host([width='stretch']) {
 		flex-grow: 1;
 		flex-shrink: 1;
-		min-width: 0;
 	}
 
 	:host([width='fit-content']),
 	:host(:not([width])) {
 		flex-grow: 0;
+		flex-basis: auto;
 		width: fit-content;
 	}
 
@@ -43,6 +44,10 @@ export const cellStyles = css `
 		flex-shrink: 0;
 	}
 
+	:host([max-width]) {
+		flex-basis: var(--_max-width);
+	}
+
 
 	/* # Vertical alignment
 	 *

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

@@ -1 +1 @@
-{"version":3,"file":"cell.styles.js","sourceRoot":"","sources":["../../../../../src/components/lists-and-menus/cells/cell/cell.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwE5B,CAAC"}
+{"version":3,"file":"cell.styles.js","sourceRoot":"","sources":["../../../../../src/components/lists-and-menus/cells/cell/cell.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6E5B,CAAC"}

package/dist/components/lists-and-menus/cells/description-cell/description-cell.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"description-cell.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/lists-and-menus/cells/description-cell/description-cell.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,qBAAqB,yBAgGjC,CAAC"}
+{"version":3,"file":"description-cell.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/lists-and-menus/cells/description-cell/description-cell.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,qBAAqB,yBAqGjC,CAAC"}

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

@@ -5,13 +5,14 @@ export const descriptionCellStyles = css `
 	/* # Host */
 
 	:host {
-		display: flex;
-		flex-direction: column;
-		justify-content: center;
 		--_width: auto;
 		--_min-width: 0;
 		--_max-width: none;
 		--_min-height: 0;
+
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
 		width: var(--_width);
 		min-width: var(--_min-width);
 		max-width: var(--_max-width);
@@ -28,7 +29,7 @@ export const descriptionCellStyles = css `
 	:host([width='stretch']),
 	:host(:not([width])) {
 		flex-grow: 1;
-		min-width: 0;
+		flex-shrink: 1;
 	}
 
 	:host([width='fit-content']) {
@@ -42,6 +43,10 @@ export const descriptionCellStyles = css `
 		flex-shrink: 0;
 	}
 
+	:host([max-width]) {
+		flex-basis: var(--_max-width);
+	}
+
 
 	/* # Vertical alignment
 	 *

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

@@ -1 +1 @@
-{"version":3,"file":"description-cell.styles.js","sourceRoot":"","sources":["../../../../../src/components/lists-and-menus/cells/description-cell/description-cell.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,qBAAqB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgGvC,CAAC"}
+{"version":3,"file":"description-cell.styles.js","sourceRoot":"","sources":["../../../../../src/components/lists-and-menus/cells/description-cell/description-cell.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,qBAAqB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqGvC,CAAC"}