@nldd/design-system 0.8.43 → 0.8.45

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

@@ -5,135 +5,83 @@ export const iconCellStyles = css `
 	/* # Host */
 
 	:host {
+		--_size: var(--primitives-space-24);
+		--_content-color: var(--context-cell-content-color, var(--semantics-content-color));
+
 		display: flex;
+		width: var(--_size);
 		flex-direction: column;
 		align-items: center;
+		color: var(--_content-color);
 	}
 
 	:host([hidden]) {
 		display: none;
 	}
 
-
-	/* # Vertical alignment */
-
-	/* ## Vertical alignment: center (default) */
-
-	:host([vertical-alignment="center"]),
-	:host(:not([vertical-alignment])) {
-		align-self: stretch;
-		justify-content: center;
-	}
-
-	/* ## Vertical alignment: top */
-
-	:host([vertical-alignment="top"]) {
-		align-self: flex-start;
-		justify-content: flex-start;
-	}
-
-	/* ## Vertical alignment: bottom */
-
-	:host([vertical-alignment="bottom"]) {
-		align-self: flex-end;
-		justify-content: flex-end;
-	}
-
-
-	/* # Slotted icon */
-
-	::slotted(*) {
-		display: block;
-		flex-shrink: 0;
-	}
-
-
-	/* # Size */
-
-	/* ## Size: 16 */
-
 	:host([size="16"]) {
-		width: var(--primitives-space-16);
-	}
-
-	:host([size="16"]) ::slotted(*) {
-		width: var(--primitives-space-16);
-		height: var(--primitives-space-16);
+		--_size: var(--primitives-space-16);
 	}
 
-	/* ## Size: 20 */
-
 	:host([size="20"]) {
-		width: var(--primitives-space-20);
+		--_size: var(--primitives-space-20);
 	}
 
-	:host([size="20"]) ::slotted(*) {
-		width: var(--primitives-space-20);
-		height: var(--primitives-space-20);
+	:host([size="32"]) {
+		--_size: var(--primitives-space-32);
 	}
 
-	/* ## Size: 24 (default) */
+	/* ## Color */
 
-	:host([size="24"]),
-	:host(:not([size])) {
-		width: var(--primitives-space-24);
+	:host([color="secondary"]) {
+		--_content-color: var(--context-cell-content-secondary-color, var(--semantics-content-secondary-color));
 	}
 
-	:host([size="24"]) ::slotted(*),
-	:host(:not([size])) ::slotted(*) {
-		width: var(--primitives-space-24);
-		height: var(--primitives-space-24);
+	:host([color="accent"]) {
+		--_content-color: var(--context-cell-content-accent-color, var(--semantics-content-accent-color));
 	}
 
-	/* ## Size: 32 */
-
-	:host([size="32"]) {
-		width: var(--primitives-space-32);
+	:host([color="success"]) {
+		--_content-color: var(--context-cell-content-success-color, var(--semantics-content-success-color));
 	}
 
-	:host([size="32"]) ::slotted(*) {
-		width: var(--primitives-space-32);
-		height: var(--primitives-space-32);
+	:host([color="warning"]) {
+		--_content-color: var(--context-cell-content-warning-color, var(--semantics-content-warning-color));
 	}
 
-
-	/* # Color */
-
-	/* ## Color: default */
-
-	:host([color="default"]),
-	:host(:not([color])) {
-		color: var(--context-cell-content-color, var(--semantics-content-color));
+	:host([color="critical"]) {
+		--_content-color: var(--context-cell-content-critical-color, var(--semantics-content-critical-color));
 	}
 
-	/* ## Color: secondary */
-
-	:host([color="secondary"]) {
-		color: var(--context-cell-content-secondary-color, var(--semantics-content-secondary-color));
-	}
 
-	/* ## Color: accent */
+	/* # Vertical alignment */
 
-	:host([color="accent"]) {
-		color: var(--context-cell-content-accent-color, var(--semantics-content-accent-color));
+	:host([vertical-alignment="center"]),
+	:host(:not([vertical-alignment])) {
+		align-self: stretch;
+		justify-content: center;
 	}
 
-	/* ## Color: success */
-
-	:host([color="success"]) {
-		color: var(--context-cell-content-success-color, var(--semantics-content-success-color));
+	:host([vertical-alignment="top"]) {
+		align-self: flex-start;
+		justify-content: flex-start;
 	}
 
-	/* ## Color: warning */
-
-	:host([color="warning"]) {
-		color: var(--context-cell-content-warning-color, var(--semantics-content-warning-color));
+	:host([vertical-alignment="bottom"]) {
+		align-self: flex-end;
+		justify-content: flex-end;
 	}
 
-	/* ## Color: critical */
 
-	:host([color="critical"]) {
-		color: var(--context-cell-content-critical-color, var(--semantics-content-critical-color));
+	/* # Elements */
+
+	/* No width/height here: a slotted nldd-icon defines its own --_size,
+	   which shadows this cell's --_size in ::slotted var() resolution
+	   (custom props resolve against the slotted element). The icon sizes
+	   itself — width fills the cell, height auto keeps it square. */
+	::slotted(*) {
+		display: block;
+		flex-shrink: 0;
 	}
 `;
 //# sourceMappingURL=icon-cell.styles.js.map

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

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

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

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

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

@@ -5,9 +5,12 @@ export const spacerCellStyles = css `
 	/* # Host */
 
 	:host {
+		--_width: var(--primitives-space-16);
+
 		display: block;
-		flex-shrink: 0;
+		width: var(--_width);
 		flex-grow: 0;
+		flex-shrink: 0;
 	}
 
 	:host([hidden]) {
@@ -15,33 +18,31 @@ export const spacerCellStyles = css `
 	}
 
 
-	/* # size */
-
-	:host([size="2"])  { width: var(--primitives-space-2); }
-	:host([size="4"])  { width: var(--primitives-space-4); }
-	:host([size="6"])  { width: var(--primitives-space-6); }
-	:host([size="8"])  { width: var(--primitives-space-8); }
-	:host([size="10"]) { width: var(--primitives-space-10); }
-	:host([size="12"]) { width: var(--primitives-space-12); }
-
-	:host([size="16"]),
-	:host(:not([size])) { width: var(--primitives-space-16); }
-
-	:host([size="20"]) { width: var(--primitives-space-20); }
-	:host([size="24"]) { width: var(--primitives-space-24); }
-	:host([size="28"]) { width: var(--primitives-space-28); }
-	:host([size="32"]) { width: var(--primitives-space-32); }
-	:host([size="40"]) { width: var(--primitives-space-40); }
-	:host([size="44"]) { width: var(--primitives-space-44); }
-	:host([size="48"]) { width: var(--primitives-space-48); }
-	:host([size="56"]) { width: var(--primitives-space-56); }
-	:host([size="64"]) { width: var(--primitives-space-64); }
-	:host([size="80"]) { width: var(--primitives-space-80); }
-	:host([size="96"]) { width: var(--primitives-space-96); }
+	/* # Size */
+
+	:host([size="2"])  { --_width: var(--primitives-space-2); }
+	:host([size="4"])  { --_width: var(--primitives-space-4); }
+	:host([size="6"])  { --_width: var(--primitives-space-6); }
+	:host([size="8"])  { --_width: var(--primitives-space-8); }
+	:host([size="10"]) { --_width: var(--primitives-space-10); }
+	:host([size="12"]) { --_width: var(--primitives-space-12); }
+	:host([size="20"]) { --_width: var(--primitives-space-20); }
+	:host([size="24"]) { --_width: var(--primitives-space-24); }
+	:host([size="28"]) { --_width: var(--primitives-space-28); }
+	:host([size="32"]) { --_width: var(--primitives-space-32); }
+	:host([size="40"]) { --_width: var(--primitives-space-40); }
+	:host([size="44"]) { --_width: var(--primitives-space-44); }
+	:host([size="48"]) { --_width: var(--primitives-space-48); }
+	:host([size="56"]) { --_width: var(--primitives-space-56); }
+	:host([size="64"]) { --_width: var(--primitives-space-64); }
+	:host([size="80"]) { --_width: var(--primitives-space-80); }
+	:host([size="96"]) { --_width: var(--primitives-space-96); }
 
 	:host([size="flexible"]) {
+		--_width: auto;
 		flex-grow: 1;
-		width: auto;
+		flex-shrink: 1;
+		flex-basis: 0;
 	}
 `;
 //# sourceMappingURL=spacer-cell.styles.js.map

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

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

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

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

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

@@ -9,14 +9,19 @@ export const textCellStyles = css `
 		--_min-width: 0;
 		--_max-width: none;
 		--_min-height: 0;
+		--_secondary-color: var(--context-cell-content-color, var(--semantics-content-secondary-color));
+		--_secondary-font: var(--primitives-font-body-xs-regular-tight);
+		--_text-align: start;
+		--_text-color: var(--context-cell-content-color, var(--semantics-content-color));
+		--_text-font: var(--primitives-font-body-md-regular-tight);
 
 		display: flex;
-		flex-direction: column;
-		justify-content: center;
 		width: var(--_width);
 		min-width: var(--_min-width);
 		max-width: var(--_max-width);
 		min-height: var(--_min-height);
+		flex-direction: column;
+		justify-content: center;
 	}
 
 	:host([hidden]) {
@@ -26,21 +31,22 @@ export const textCellStyles = css `
 
 	/* # Width */
 
-	:host([width='full']),
+	:host([width="full"]),
 	:host(:not([width])),
-	:host([width='']) {
+	:host([width=""]) {
 		flex-grow: 1;
 		flex-shrink: 1;
+		flex-basis: 0;
 	}
 
-	:host([width='fit-content']) {
+	:host([width="fit-content"]) {
+		width: fit-content;
 		flex-grow: 0;
 		flex-shrink: 0;
 		flex-basis: auto;
-		width: fit-content;
 	}
 
-	:host([width]:not([width='full']):not([width='fit-content']):not([width=''])) {
+	:host([width]:not([width="full"]):not([width="fit-content"]):not([width=""])) {
 		flex-shrink: 0;
 	}
 
@@ -49,182 +55,115 @@ export const textCellStyles = css `
 	}
 
 
-	/* # Vertical alignment
-	 *
-	 * 'center' (default): the cell stretches to fill the full row height, then
-	 * centers its content within that space. When min-height is set, the cell is
-	 * at least that tall and the content sits centered inside it. For strict top
-	 * alignment without a minimum height, use vertical-alignment="top".
-	 */
+	/* # Vertical alignment */
+
+	/* "center" (default) stretches to the full row height then centers content;
+	   use vertical-alignment="top" for strict top without a minimum height */
 
-	:host([vertical-alignment='center']),
+	:host([vertical-alignment="center"]),
 	:host(:not([vertical-alignment])) {
 		align-self: stretch;
 	}
 
-	:host([vertical-alignment='top']) {
+	:host([vertical-alignment="top"]) {
 		align-self: flex-start;
 	}
 
-	:host([vertical-alignment='bottom']) {
+	:host([vertical-alignment="bottom"]) {
 		align-self: flex-end;
 	}
 
 
 	/* # Horizontal alignment */
 
-	:host([horizontal-alignment='left']),
+	:host([horizontal-alignment="left"]),
 	:host(:not([horizontal-alignment])) {
 		align-items: flex-start;
 	}
 
-	:host([horizontal-alignment='center']) {
+	:host([horizontal-alignment="center"]) {
+		--_text-align: center;
 		align-items: center;
 	}
 
-	:host([horizontal-alignment='right']) {
+	:host([horizontal-alignment="right"]) {
+		--_text-align: right;
 		align-items: flex-end;
 	}
 
 
-	/* # Overline */
-
-	.text-cell__overline {
-		margin: 0;
-		align-self: stretch;
-		min-width: 0;
-		overflow-wrap: anywhere;
-		color: var(--context-cell-content-color, var(--semantics-content-secondary-color));
-	}
-
-	:host([size='md']) .text-cell__overline,
-	:host(:not([size])) .text-cell__overline {
-		font: var(--primitives-font-body-xs-regular-tight);
-	}
-
-	:host([size='sm']) .text-cell__overline {
-		font: var(--primitives-font-body-xxs-regular-tight);
-	}
-
-	:host([horizontal-alignment='center']) .text-cell__overline {
-		text-align: center;
-	}
-
-	:host([horizontal-alignment='right']) .text-cell__overline {
-		text-align: right;
-	}
-
-
-	/* # Text */
-
-	.text-cell__text {
-		margin: 0;
-		align-self: stretch;
-		min-width: 0;
-		overflow-wrap: anywhere;
-		text-wrap: pretty;
-	}
-
-	:host([size='md']) .text-cell__text,
-	:host(:not([size])) .text-cell__text {
-		font: var(--primitives-font-body-md-regular-tight);
-	}
+	/* # Size */
 
-	:host([size='sm']) .text-cell__text {
-		font: var(--primitives-font-body-sm-regular-tight);
-	}
-
-	:host([horizontal-alignment='center']) .text-cell__text {
-		text-align: center;
-	}
-
-	:host([horizontal-alignment='right']) .text-cell__text {
-		text-align: right;
+	:host([size="sm"]) {
+		--_secondary-font: var(--primitives-font-body-xxs-regular-tight);
+		--_text-font: var(--primitives-font-body-sm-regular-tight);
 	}
 
 
 	/* # Color */
 
-	/* ## Color: default */
-
-	:host([color='default']) .text-cell__text,
-	:host(:not([color])) .text-cell__text {
-		color: var(--context-cell-content-color, var(--semantics-content-color));
+	:host([color="secondary"]) {
+		--_text-color: var(--context-cell-content-secondary-color, var(--semantics-content-secondary-color));
 	}
 
-	/* ## Color: secondary */
-
-	:host([color='secondary']) .text-cell__text {
-		color: var(--context-cell-content-secondary-color, var(--semantics-content-secondary-color));
+	:host([color="accent"]) {
+		--_secondary-color: var(--context-cell-content-accent-color, var(--semantics-content-accent-color));
+		--_text-color: var(--context-cell-content-accent-color, var(--semantics-content-accent-color));
 	}
 
-	/* ## Color: accent */
-
-	:host([color='accent']) .text-cell__text,
-	:host([color='accent']) .text-cell__overline,
-	:host([color='accent']) .text-cell__supporting-text {
-		color: var(--context-cell-content-accent-color, var(--semantics-content-accent-color));
+	:host([color="success"]) {
+		--_secondary-color: var(--context-cell-content-success-color, var(--semantics-content-success-color));
+		--_text-color: var(--context-cell-content-success-color, var(--semantics-content-success-color));
 	}
 
-	/* ## Color: success */
-
-	:host([color='success']) .text-cell__text,
-	:host([color='success']) .text-cell__overline,
-	:host([color='success']) .text-cell__supporting-text {
-		color: var(--context-cell-content-success-color, var(--semantics-content-success-color));
-	}
-
-	/* ## Color: warning */
-
-	:host([color='warning']) .text-cell__text,
-	:host([color='warning']) .text-cell__overline,
-	:host([color='warning']) .text-cell__supporting-text {
-		color: var(--context-cell-content-warning-color, var(--semantics-content-warning-color));
+	:host([color="warning"]) {
+		--_secondary-color: var(--context-cell-content-warning-color, var(--semantics-content-warning-color));
+		--_text-color: var(--context-cell-content-warning-color, var(--semantics-content-warning-color));
 	}
 
-	/* ## Color: critical */
-
-	:host([color='critical']) .text-cell__text,
-	:host([color='critical']) .text-cell__overline,
-	:host([color='critical']) .text-cell__supporting-text {
-		color: var(--context-cell-content-critical-color, var(--semantics-content-critical-color));
+	:host([color="critical"]) {
+		--_secondary-color: var(--context-cell-content-critical-color, var(--semantics-content-critical-color));
+		--_text-color: var(--context-cell-content-critical-color, var(--semantics-content-critical-color));
 	}
 
 
-	/* # Supporting text */
+	/* # Elements */
 
-	.text-cell__supporting-text {
+	.text-cell__overline {
 		margin: 0;
-		align-self: stretch;
 		min-width: 0;
+		align-self: stretch;
+		text-align: var(--_text-align);
+		color: var(--_secondary-color);
+		font: var(--_secondary-font);
 		overflow-wrap: anywhere;
-		color: var(--context-cell-content-color, var(--semantics-content-secondary-color));
-	}
-
-	:host([size='md']) .text-cell__supporting-text,
-	:host(:not([size])) .text-cell__supporting-text {
-		font: var(--primitives-font-body-xs-regular-tight);
-	}
-
-	:host([size='sm']) .text-cell__supporting-text {
-		font: var(--primitives-font-body-xxs-regular-tight);
 	}
 
-	:host([horizontal-alignment='center']) .text-cell__supporting-text {
-		text-align: center;
-	}
-
-	:host([horizontal-alignment='right']) .text-cell__supporting-text {
-		text-align: right;
+	.text-cell__text {
+		margin: 0;
+		min-width: 0;
+		align-self: stretch;
+		text-align: var(--_text-align);
+		color: var(--_text-color);
+		font: var(--_text-font);
+		overflow-wrap: anywhere;
+		text-wrap: pretty;
 	}
 
-
-	/* # Forced colors */
-
 	@media (forced-colors: active) {
 		.text-cell__text {
 			forced-color-adjust: none;
 		}
 	}
+
+	.text-cell__supporting-text {
+		margin: 0;
+		min-width: 0;
+		align-self: stretch;
+		text-align: var(--_text-align);
+		color: var(--_secondary-color);
+		font: var(--_secondary-font);
+		overflow-wrap: anywhere;
+	}
 `;
 //# sourceMappingURL=text-cell.styles.js.map

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

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

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

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