@nldd/design-system 0.8.94 → 0.8.96

package/dist/components/actions/toolbar/toolbar.styles.js

@@ -9,19 +9,19 @@ export const toolbarStyles = css `
 	/* # Host */
 
 	:host {
-		--_gap: var(--components-toolbar-md-gap);
-		/* --_width..--_overflow-button-width: measured + set by toolbar.ts; 0px is a valid pre-measurement placeholder */
-		--_width: 0px;
-		--_start-width: 0px;
-		--_center-width: 0px;
-		--_end-width: 0px;
-		--_overflow-button-width: 0px;
+		--_toolbar-gap: var(--primitives-space-8);
+		/* --_toolbar-width..--_toolbar-overflow-button-width: measured + set by toolbar.ts; 0px is a valid pre-measurement placeholder */
+		--_toolbar-width: 0px;
+		--_toolbar-start-width: 0px;
+		--_toolbar-center-width: 0px;
+		--_toolbar-end-width: 0px;
+		--_toolbar-overflow-button-width: 0px;
 		/* The gap between a side area and its spacer only exists when that area is
 		   non-empty; toolbar.ts drops these to 0px when start/end is empty so the
 		   spacer basis doesn't over-subtract and pull the center off-center. */
-		--_left-spacer-gap: var(--_gap);
-		--_right-spacer-gap: var(--_gap);
-		--_label-margin-top: var(--primitives-space-4);
+		--_toolbar-left-spacer-gap: var(--_toolbar-gap);
+		--_toolbar-right-spacer-gap: var(--_toolbar-gap);
+		--_toolbar-label-margin-top: var(--primitives-space-4);
 
 		${inheritedTextReset}
 		box-sizing: border-box;
@@ -29,11 +29,11 @@ export const toolbarStyles = css `
 	}
 
 	:host([size="sm"]) {
-		--_gap: var(--components-toolbar-sm-gap);
+		--_toolbar-gap: var(--primitives-space-6);
 	}
 
 	:host([size="lg"]) {
-		--_gap: var(--components-toolbar-lg-gap);
+		--_toolbar-gap: var(--primitives-space-8);
 	}
 
 	:host([hidden]) {
@@ -47,7 +47,7 @@ export const toolbarStyles = css `
 		display: flex;
 		width: 100%;
 		flex-direction: row;
-		gap: var(--_gap);
+		gap: var(--_toolbar-gap);
 		align-items: center;
 	}
 
@@ -61,7 +61,7 @@ export const toolbarStyles = css `
 		flex-grow: 1;
 		flex-shrink: 1;
 		flex-basis: 0;
-		gap: var(--_gap);
+		gap: var(--_toolbar-gap);
 		align-items: flex-start;
 	}
 
@@ -69,7 +69,7 @@ export const toolbarStyles = css `
 	/* # Spacers */
 
 	.toolbar__flexible-spacer {
-		margin-left: calc(-1 * var(--_gap));
+		margin-left: calc(-1 * var(--_toolbar-gap));
 		flex-grow: 1;
 		flex-shrink: 1;
 	}
@@ -85,29 +85,29 @@ export const toolbarStyles = css `
 	}
 
 	.toolbar__left-spacer {
-		margin-right: calc(-1 * var(--_gap));
+		margin-right: calc(-1 * var(--_toolbar-gap));
 		min-width: 0;
 		flex-grow: 0;
 		flex-shrink: 1;
 		flex-basis: calc(
-			var(--_width) / 2
-			- var(--_start-width)
-			- var(--_center-width) / 2
-			- var(--_left-spacer-gap)
+			var(--_toolbar-width) / 2
+			- var(--_toolbar-start-width)
+			- var(--_toolbar-center-width) / 2
+			- var(--_toolbar-left-spacer-gap)
 		);
 	}
 
 	.toolbar__right-spacer {
-		margin-left: calc(-1 * var(--_gap));
+		margin-left: calc(-1 * var(--_toolbar-gap));
 		min-width: 0;
 		flex-grow: 0;
 		flex-shrink: 1;
 		flex-basis: calc(
-			var(--_width) / 2
-			- var(--_end-width)
-			- var(--_center-width) / 2
-			- var(--_right-spacer-gap)
-			- var(--_overflow-button-width)
+			var(--_toolbar-width) / 2
+			- var(--_toolbar-end-width)
+			- var(--_toolbar-center-width) / 2
+			- var(--_toolbar-right-spacer-gap)
+			- var(--_toolbar-overflow-button-width)
 		);
 	}
 
@@ -128,7 +128,7 @@ export const toolbarStyles = css `
 
 	.toolbar__overflow-button-label {
 		display: none;
-		margin-top: var(--_label-margin-top);
+		margin-top: var(--_toolbar-label-margin-top);
 		color: var(--semantics-content-color);
 		font: var(--primitives-font-body-xs-regular-flat);
 		white-space: nowrap;
@@ -144,13 +144,13 @@ export const toolbarItemStyles = css `
 	/* # Host */
 
 	:host {
-		--_item-max-width: none;
-		--_item-min-width: 0px;
-		--_item-width: auto;
-		--_label-margin-top: var(--primitives-space-4);
+		--_toolbar-item-max-width: none;
+		--_toolbar-item-min-width: 0px;
+		--_toolbar-item-width: auto;
+		--_toolbar-item-label-margin-top: var(--primitives-space-4);
 
 		display: inline-flex;
-		max-width: var(--_item-max-width);
+		max-width: var(--_toolbar-item-max-width);
 		flex-direction: column;
 		flex-grow: 0;
 		flex-shrink: 0;
@@ -158,9 +158,9 @@ export const toolbarItemStyles = css `
 	}
 
 	:host([fluid]) {
-		min-width: var(--_item-min-width);
+		min-width: var(--_toolbar-item-min-width);
 		flex-shrink: 1;
-		flex-basis: var(--_item-width);
+		flex-basis: var(--_toolbar-item-width);
 	}
 
 	:host([solo-fluid]) {
@@ -194,7 +194,7 @@ export const toolbarItemStyles = css `
 
 	.toolbar__item-label {
 		display: none;
-		margin-top: var(--_label-margin-top);
+		margin-top: var(--_toolbar-item-label-margin-top);
 		color: var(--semantics-content-color);
 		font: var(--primitives-font-body-xs-regular-flat);
 		white-space: nowrap;
@@ -217,33 +217,33 @@ export const toolbarTitleStyles = css `
 	/* # Host */
 
 	:host {
-		--_title-group-min-width: 0px;
-		--_title-width: auto;
-		--_title-max-width: var(--primitives-area-240);
-		--_title-group-height: var(--semantics-controls-md-min-size);
-		--_content-gap: var(--primitives-space-6);
-		--_title-font: var(--primitives-font-body-lg-semi-bold-flat);
-		--_supporting-text-font: var(--primitives-font-body-xs-regular-flat);
+		--_toolbar-title-group-min-width: min-content;
+		--_toolbar-title-width: auto;
+		--_toolbar-title-max-width: var(--primitives-area-240);
+		--_toolbar-title-group-height: var(--semantics-controls-md-min-size);
+		--_toolbar-title-content-gap: var(--primitives-space-6);
+		--_toolbar-title-font: var(--primitives-font-body-lg-semi-bold-flat);
+		--_toolbar-title-supporting-text-font: var(--primitives-font-body-xs-regular-flat);
 
 		${inheritedTextReset}
 		display: inline-flex;
-		min-width: var(--_title-group-min-width);
-		height: var(--_title-group-height);
+		min-width: var(--_toolbar-title-group-min-width);
+		height: var(--_toolbar-title-group-height);
 		flex-direction: row;
 		flex-shrink: 1;
-		flex-basis: var(--_title-width);
-		gap: var(--_content-gap);
+		flex-basis: var(--_toolbar-title-width);
+		gap: var(--_toolbar-title-content-gap);
 		align-items: center;
 	}
 
 	:host([size="sm"]) {
-		--_title-group-height: var(--semantics-controls-sm-min-size);
-		--_title-font: var(--primitives-font-body-sm-semi-bold-flat);
-		--_supporting-text-font: var(--primitives-font-body-xxs-regular-flat);
+		--_toolbar-title-group-height: var(--semantics-controls-sm-min-size);
+		--_toolbar-title-font: var(--primitives-font-body-sm-semi-bold-flat);
+		--_toolbar-title-supporting-text-font: var(--primitives-font-body-xxs-regular-flat);
 	}
 
 	:host([size="lg"]) {
-		--_title-group-height: var(--semantics-controls-lg-min-size);
+		--_toolbar-title-group-height: var(--semantics-controls-lg-min-size);
 	}
 
 	:host([solo-fluid]) {
@@ -254,7 +254,7 @@ export const toolbarTitleStyles = css `
 	}
 
 	/* Sole toolbar element: let the text fill the row instead of capping at
-	   --_title-max-width, matching the pre-fit-content stretch behavior. */
+	   --_toolbar-title-max-width, matching the pre-fit-content stretch behavior. */
 	:host([solo-fluid]) .toolbar__title-group {
 		max-width: none;
 	}
@@ -268,7 +268,8 @@ export const toolbarTitleStyles = css `
 	   trailing action, as one unit) along the row's main axis instead. Scoped to
 	   solo-fluid so a title balanced by real start/end items keeps using the
 	   toolbar spacers. */
-	:host([solo-fluid][align="center"]) {
+	:host([solo-fluid][align="center"]),
+	:host([solo-fluid][slot="center"]) {
 		justify-content: center;
 	}
 
@@ -284,7 +285,7 @@ export const toolbarTitleStyles = css `
 	.toolbar__title-group {
 		display: flex;
 		min-width: 0;
-		max-width: var(--_title-max-width);
+		max-width: var(--_toolbar-title-max-width);
 		flex-direction: column;
 		justify-content: center;
 		align-items: flex-start;
@@ -296,7 +297,7 @@ export const toolbarTitleStyles = css `
 		border-radius: var(--semantics-controls-sm-corner-radius);
 		color: inherit;
 		min-width: 0;
-		gap: var(--_content-gap);
+		gap: var(--_toolbar-title-content-gap);
 		align-items: center;
 		text-decoration: none;
 	}
@@ -340,7 +341,7 @@ export const toolbarTitleStyles = css `
 		max-width: 100%;
 		overflow: hidden;
 		color: var(--semantics-content-color);
-		font: var(--_title-font);
+		font: var(--_toolbar-title-font);
 		text-overflow: ellipsis;
 		white-space: nowrap;
 		text-align: left;
@@ -355,7 +356,7 @@ export const toolbarTitleStyles = css `
 		max-width: 100%;
 		overflow: hidden;
 		color: var(--semantics-content-secondary-color);
-		font: var(--_supporting-text-font);
+		font: var(--_toolbar-title-supporting-text-font);
 		text-overflow: ellipsis;
 		white-space: nowrap;
 		text-align: left;

package/dist/components/actions/toolbar/toolbar.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"toolbar.styles.js","sourceRoot":"","sources":["../../../../src/components/actions/toolbar/toolbar.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,yCAAyC,CAAC;AAE7E,MAAM,CAAC,MAAM,aAAa,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;IAuB5B,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkHrB,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwEnC,CAAC;AAEF,MAAM,CAAC,MAAM,kBAAkB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;IAcjC,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2IrB,CAAC"}
+{"version":3,"file":"toolbar.styles.js","sourceRoot":"","sources":["../../../../src/components/actions/toolbar/toolbar.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,yCAAyC,CAAC;AAE7E,MAAM,CAAC,MAAM,aAAa,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;IAuB5B,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkHrB,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwEnC,CAAC;AAEF,MAAM,CAAC,MAAM,kBAAkB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;IAcjC,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4IrB,CAAC"}