@nldd/design-system 0.8.94 → 0.8.96

package/dist/components/lists-and-tables/list-item/list-item.styles.js

@@ -7,17 +7,19 @@ export const listItemStyles = css `
 
 
 	:host {
-		--_background-color: transparent;
-		--_content-z-index: 0;
-		--_focus-z-index: 1;
-		--_indicator-z-index: calc(var(--_content-z-index) - 1);
+		--_list-item-background-color: transparent;
+		--_list-item-content-z-index: 0;
+		--_list-item-focus-z-index: 1;
+		--_list-item-indicator-z-index: calc(var(--_list-item-content-z-index) - 1);
 		/* Set from JS by the divider-start/divider-end markers; initial keeps
 		   them guaranteed-invalid so the var() fallbacks below apply. */
-		--_divider-inset-start: initial;
-		--_divider-inset-end: initial;
+		--_list-item-divider-inset-start: initial;
+		--_list-item-divider-inset-end: initial;
+		--_list-item-md-padding-block: var(--primitives-space-10);
+		--_list-item-sm-padding-block: var(--primitives-space-6);
 
 		--context-list-item-size: var(--semantics-controls-md-min-size);
-		--context-cell-padding-block: var(--components-list-item-md-padding-block);
+		--context-cell-padding-block: var(--_list-item-md-padding-block);
 		container-type: inline-size;
 		display: block;
 		width: 100%;
@@ -25,7 +27,7 @@ export const listItemStyles = css `
 	}
 
 	:host([size="sm"]) {
-		--context-cell-padding-block: var(--components-list-item-sm-padding-block);
+		--context-cell-padding-block: var(--_list-item-sm-padding-block);
 		--context-list-item-size: var(--semantics-controls-sm-min-size);
 	}
 
@@ -36,11 +38,11 @@ export const listItemStyles = css `
 		/* !important: shields the widening from consumer universal resets, which
 		   beat normal :host declarations per CSS Scoping. A negative margin
 		   cannot move inward — an inner element cannot reach outside the host. */
-		margin-inline: calc(-1 * var(--components-list-item-indicator-inline-inset)) !important;
+		margin-inline: calc(-1 * var(--semantics-list-items-indicator-inline-inset)) !important;
 	}
 
 	:host(.is-interactive) .list-item {
-		padding-inline: var(--components-list-item-indicator-inline-inset);
+		padding-inline: var(--semantics-list-items-indicator-inline-inset);
 	}
 
 	:host(.is-interactive) .list-item:has(> .list-item__action) {
@@ -63,7 +65,7 @@ export const listItemStyles = css `
 
 	:host(:focus-within) {
 		position: relative;
-		z-index: var(--_focus-z-index);
+		z-index: var(--_list-item-focus-z-index);
 	}
 
 	/* The focus ring reaches past the row's own box, and a branch paints its
@@ -72,7 +74,7 @@ export const listItemStyles = css `
 	   the row settles it in both directions: with focus in a child, the rule
 	   matches this row too, and the group (later in the tree) still wins. */
 	:host(:focus-within) .list-item {
-		z-index: var(--_focus-z-index);
+		z-index: var(--_list-item-focus-z-index);
 	}
 
 	:host(.is-dragging) {
@@ -126,7 +128,7 @@ export const listItemStyles = css `
 		background: none;
 		width: 100%;
 		padding: 0;
-		padding-inline: var(--components-list-item-indicator-inline-inset);
+		padding-inline: var(--semantics-list-items-indicator-inline-inset);
 		flex-direction: row;
 		align-items: stretch;
 		text-align: start;
@@ -167,10 +169,10 @@ export const listItemStyles = css `
 		display: block;
 		position: absolute;
 		inset-block: 0;
-		inset-inline: calc(-1 * var(--components-list-item-indicator-inline-inset));
-		z-index: var(--_indicator-z-index);
-		border-radius: var(--components-list-item-indicator-corner-radius);
-		background-color: var(--_background-color);
+		inset-inline: calc(-1 * var(--semantics-list-items-indicator-inline-inset));
+		z-index: var(--_list-item-indicator-z-index);
+		border-radius: var(--semantics-list-items-indicator-corner-radius);
+		background-color: var(--_list-item-background-color);
 		pointer-events: none;
 	}
 
@@ -183,18 +185,18 @@ export const listItemStyles = css `
 	   current, so a segmented row paints without one on the host. */
 	:host(:is([selected], [checkbox][checked])),
 	:host(:is([current], [data-current])) {
-		--_background-color: var(--components-list-item-is-selected-background-color);
-		--context-content-color: var(--components-list-item-is-selected-content-color);
-		--context-content-secondary-color: var(--components-list-item-is-selected-content-color);
+		--_list-item-background-color: var(--semantics-list-items-is-selected-background-color);
+		--context-content-color: var(--semantics-list-items-is-selected-content-color);
+		--context-content-secondary-color: var(--semantics-list-items-is-selected-content-color);
 	}
 
 
 	/* A checked checkbox action selects the whole row, so the fill runs across
 	   the disclosure action too instead of stopping at its boundary. */
 	.list-item.is-action-checked {
-		--_background-color: var(--components-list-item-is-selected-background-color);
-		--context-content-color: var(--components-list-item-is-selected-content-color);
-		--context-content-secondary-color: var(--components-list-item-is-selected-content-color);
+		--_list-item-background-color: var(--semantics-list-items-is-selected-background-color);
+		--context-content-color: var(--semantics-list-items-is-selected-content-color);
+		--context-content-secondary-color: var(--semantics-list-items-is-selected-content-color);
 	}
 
 	/* Hover only on hover-capable devices, so a touch that turns into a scroll
@@ -206,23 +208,23 @@ export const listItemStyles = css `
 	   row it sits in. */
 	@media (hover: hover) {
 		:host(:not([disabled])) .list-item__action:hover {
-			--_background-color: var(--components-list-item-is-hovered-background-color);
-			--context-content-color: var(--components-list-item-is-hovered-content-color);
-			--context-content-secondary-color: var(--components-list-item-is-hovered-content-color);
+			--_list-item-background-color: var(--semantics-list-items-is-hovered-background-color);
+			--context-content-color: var(--semantics-list-items-is-hovered-content-color);
+			--context-content-secondary-color: var(--semantics-list-items-is-hovered-content-color);
 		}
 
 		:host(:is([selected], [checkbox][checked]):not([disabled])) .list-item__action:hover,
 		:host(:is([current], [data-current]):not([disabled])) .list-item__action:hover {
-			--_background-color: var(--components-list-item-is-selected-is-hovered-background-color);
-			--context-content-color: var(--components-list-item-is-selected-content-color);
-			--context-content-secondary-color: var(--components-list-item-is-selected-content-color);
+			--_list-item-background-color: var(--semantics-list-items-is-selected-is-hovered-background-color);
+			--context-content-color: var(--semantics-list-items-is-selected-content-color);
+			--context-content-secondary-color: var(--semantics-list-items-is-selected-content-color);
 		}
 	}
 
 	:host(:is([selected], [checkbox][checked])) {
-		--context-list-item-hovered-background-color: var(--components-list-item-is-selected-is-hovered-background-color);
-		--context-list-item-hovered-content-color: var(--components-list-item-is-selected-content-color);
-		--context-list-item-active-background-color: var(--components-list-item-is-selected-is-active-background-color);
+		--context-list-item-hovered-background-color: var(--semantics-list-items-is-selected-is-hovered-background-color);
+		--context-list-item-hovered-content-color: var(--semantics-list-items-is-selected-content-color);
+		--context-list-item-active-background-color: var(--semantics-list-items-is-selected-is-active-background-color);
 	}
 
 	/* Pressing the row you are on lands on the accent whether or not focus got
@@ -230,10 +232,10 @@ export const listItemStyles = css `
 	   waits for focus would go grey there while the other browsers go accent.
 	   Hover still follows the focus: that is the state, not the gesture. */
 	:host(:is([current], [data-current])) {
-		--context-list-item-hovered-background-color: var(--components-list-item-is-selected-is-hovered-background-color);
-		--context-list-item-hovered-content-color: var(--components-list-item-is-selected-content-color);
-		--context-list-item-active-background-color: var(--components-list-item-is-highlighted-is-active-background-color);
-		--context-list-item-active-content-color: var(--components-list-item-is-highlighted-content-color);
+		--context-list-item-hovered-background-color: var(--semantics-list-items-is-selected-is-hovered-background-color);
+		--context-list-item-hovered-content-color: var(--semantics-list-items-is-selected-content-color);
+		--context-list-item-active-background-color: var(--semantics-list-items-is-highlighted-is-active-background-color);
+		--context-list-item-active-content-color: var(--semantics-list-items-is-highlighted-content-color);
 	}
 
 	/* focus-within on the host, not on the row-wide control: focus inside a
@@ -244,19 +246,19 @@ export const listItemStyles = css `
 	   hovering it as well, and the state it just gave focus to has to win. */
 	:host(:is([current], [data-current]):focus-within) .list-item,
 	:host(:is([current], [data-current]):focus-within) .list-item__action {
-		--context-content-color: var(--components-list-item-is-highlighted-content-color);
-		--context-content-secondary-color: var(--components-list-item-is-highlighted-content-color);
+		--context-content-color: var(--semantics-list-items-is-highlighted-content-color);
+		--context-content-secondary-color: var(--semantics-list-items-is-highlighted-content-color);
 	}
 
 	:host(:is([current], [data-current]):focus-within) {
-		--context-list-item-hovered-background-color: var(--components-list-item-is-highlighted-is-hovered-background-color);
-		--context-list-item-hovered-content-color: var(--components-list-item-is-highlighted-content-color);
-		--context-list-item-active-background-color: var(--components-list-item-is-highlighted-is-active-background-color);
+		--context-list-item-hovered-background-color: var(--semantics-list-items-is-highlighted-is-hovered-background-color);
+		--context-list-item-hovered-content-color: var(--semantics-list-items-is-highlighted-content-color);
+		--context-list-item-active-background-color: var(--semantics-list-items-is-highlighted-is-active-background-color);
 	}
 
 	:host(:is([current], [data-current]):focus-within) .list-item::before,
 	:host(:is([current], [data-current]):focus-within) .list-item__action::before {
-		background-color: var(--components-list-item-is-highlighted-background-color);
+		background-color: var(--semantics-list-items-is-highlighted-background-color);
 	}
 
 	/* Only the row-wide control, never the row itself: on a segmented row the
@@ -264,7 +266,7 @@ export const listItemStyles = css `
 	   would hide which segment you are on. */
 	@media (hover: hover) {
 		:host(:is([current], [data-current]):focus-within:not([disabled])) .list-item__action:hover::before {
-			background-color: var(--components-list-item-is-highlighted-is-hovered-background-color);
+			background-color: var(--semantics-list-items-is-highlighted-is-hovered-background-color);
 		}
 	}
 
@@ -274,50 +276,50 @@ export const listItemStyles = css `
 	   down means the row is not focused at all. */
 	:host(:is([current], [data-current]):not([disabled])) .list-item__action.is-pressed::before,
 	:host(:is([current], [data-current]):focus-within:not([disabled])) .list-item__action.is-pressed::before {
-		background-color: var(--components-list-item-is-highlighted-is-active-background-color);
+		background-color: var(--semantics-list-items-is-highlighted-is-active-background-color);
 	}
 
 	/* The content color has to travel with the fill: the neutral press rule
 	   above sets it too, and black on a deep accent is unreadable. */
 	:host(:is([current], [data-current]):focus-within:not([disabled])) .list-item__action:hover {
-		--context-content-color: var(--components-list-item-is-highlighted-content-color);
-		--context-content-secondary-color: var(--components-list-item-is-highlighted-content-color);
+		--context-content-color: var(--semantics-list-items-is-highlighted-content-color);
+		--context-content-secondary-color: var(--semantics-list-items-is-highlighted-content-color);
 	}
 
 	/* JS-driven rather than :active, so a touch that turns into a scroll clears
 	   the press (pointercancel) instead of flashing it. */
 	:host(:not([disabled])) .list-item__action.is-pressed {
-		--_background-color: var(--components-list-item-is-active-background-color);
-		--context-content-color: var(--components-list-item-is-active-content-color);
-		--context-content-secondary-color: var(--components-list-item-is-active-content-color);
+		--_list-item-background-color: var(--semantics-list-items-is-active-background-color);
+		--context-content-color: var(--semantics-list-items-is-active-content-color);
+		--context-content-secondary-color: var(--semantics-list-items-is-active-content-color);
 	}
 
 	:host(:is([selected], [checkbox][checked]):not([disabled])) .list-item__action.is-pressed,
 	:host(:is([current], [data-current]):not([disabled])) .list-item__action.is-pressed {
-		--_background-color: var(--components-list-item-is-selected-is-active-background-color);
-		--context-content-color: var(--components-list-item-is-selected-content-color);
-		--context-content-secondary-color: var(--components-list-item-is-selected-content-color);
+		--_list-item-background-color: var(--semantics-list-items-is-selected-is-active-background-color);
+		--context-content-color: var(--semantics-list-items-is-selected-content-color);
+		--context-content-secondary-color: var(--semantics-list-items-is-selected-content-color);
 	}
 
 	:host(:is([selected], [checkbox][checked])) .list-item__action {
-		--_background-color: var(--components-list-item-is-selected-background-color);
-		--context-content-color: var(--components-list-item-is-selected-content-color);
-		--context-content-secondary-color: var(--components-list-item-is-selected-content-color);
+		--_list-item-background-color: var(--semantics-list-items-is-selected-background-color);
+		--context-content-color: var(--semantics-list-items-is-selected-content-color);
+		--context-content-secondary-color: var(--semantics-list-items-is-selected-content-color);
 	}
 
 	/* .is-highlighted is set by the list: in a listbox the focus stays in the
 	   search input, so the option cannot carry the state itself. */
 	/* After the neutral press rules above, or black lands on a deep accent. */
 	:host(:is([current], [data-current]):not([disabled])) .list-item__action.is-pressed {
-		--context-content-color: var(--components-list-item-is-highlighted-content-color);
-		--context-content-secondary-color: var(--components-list-item-is-highlighted-content-color);
+		--context-content-color: var(--semantics-list-items-is-highlighted-content-color);
+		--context-content-secondary-color: var(--semantics-list-items-is-highlighted-content-color);
 	}
 
 	.list-item.is-highlighted,
 	:host(:is([selected], [checkbox][checked])) .list-item.is-highlighted .list-item__action {
-		--_background-color: var(--components-list-item-is-highlighted-background-color);
-		--context-content-color: var(--components-list-item-is-highlighted-content-color);
-		--context-content-secondary-color: var(--components-list-item-is-highlighted-content-color);
+		--_list-item-background-color: var(--semantics-list-items-is-highlighted-background-color);
+		--context-content-color: var(--semantics-list-items-is-highlighted-content-color);
+		--context-content-secondary-color: var(--semantics-list-items-is-highlighted-content-color);
 	}
 
 
@@ -330,7 +332,7 @@ export const listItemStyles = css `
 		display: block;
 		position: absolute;
 		inset: 0;
-		border-radius: var(--components-list-item-indicator-corner-radius);
+		border-radius: var(--semantics-list-items-indicator-corner-radius);
 		outline: var(--semantics-focus-ring-outline);
 		outline-offset: var(--semantics-focus-ring-outline-offset);
 		box-shadow: var(--semantics-focus-ring-box-shadow);
@@ -360,7 +362,7 @@ export const listItemStyles = css `
 	}
 
 	:host(.is-interactive) .list-item__children {
-		padding-inline: var(--components-list-item-indicator-inline-inset);
+		padding-inline: var(--semantics-list-items-indicator-inline-inset);
 	}
 
 	.list-item__children[hidden] {
@@ -369,13 +371,13 @@ export const listItemStyles = css `
 
 
 	/* Content-wide by default; the divider-start/divider-end cell markers
-	   override it through the measured --_divider-inset-* vars. */
+	   override it through the measured --_list-item-divider-inset-* vars. */
 
 	/* A segment with focus paints its ring past its own box, and the
 	   divider is rendered after the slot — so without this the line ran straight
 	   through the ring. Lifting the focused action puts the ring on top. */
 	::slotted(nldd-list-item-segment:focus-within) {
-		z-index: var(--_focus-z-index);
+		z-index: var(--_list-item-focus-z-index);
 	}
 
 	.list-item__divider {
@@ -384,15 +386,15 @@ export const listItemStyles = css `
 		/* Hangs in the row's bottom margin: the boundary band belongs to the pair
 		   of rows, not to either one. */
 		inset-block-end: calc(-1 * var(--semantics-dividers-thickness));
-		inset-inline: var(--_divider-inset-start, 0px) var(--_divider-inset-end, 0px);
+		inset-inline: var(--_list-item-divider-inset-start, 0px) var(--_list-item-divider-inset-end, 0px);
 		background-color: var(--semantics-dividers-color);
 		height: var(--semantics-dividers-thickness);
 	}
 
 	:host(.is-interactive) .list-item__divider {
 		inset-inline:
-			var(--_divider-inset-start, var(--components-list-item-indicator-inline-inset))
-			var(--_divider-inset-end, var(--components-list-item-indicator-inline-inset));
+			var(--_list-item-divider-inset-start, var(--semantics-list-items-indicator-inline-inset))
+			var(--_list-item-divider-inset-end, var(--semantics-list-items-indicator-inline-inset));
 	}
 
 	:host(.is-boxed.is-last) .list-item {

package/dist/components/lists-and-tables/list-item/list-item.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"list-item.styles.js","sourceRoot":"","sources":["../../../../src/components/lists-and-tables/list-item/list-item.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqZhC,CAAC"}
+{"version":3,"file":"list-item.styles.js","sourceRoot":"","sources":["../../../../src/components/lists-and-tables/list-item/list-item.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuZhC,CAAC"}

package/dist/components/lists-and-tables/list-item-segment/list-item-segment.styles.js

@@ -5,10 +5,10 @@ export const listItemSegmentStyles = css `
 	}
 
 	:host {
-		--_background-color: transparent;
-		--_min-size: var(--context-list-item-size, var(--semantics-controls-md-min-size));
-		--_expanded-rotation: 90deg;
-		--_fill-z-index: -1;
+		--_list-item-segment-background-color: transparent;
+		--_list-item-segment-min-size: var(--context-list-item-size, var(--semantics-controls-md-min-size));
+		--_list-item-segment-expanded-rotation: 90deg;
+		--_list-item-segment-fill-z-index: -1;
 
 		display: flex;
 		position: relative;
@@ -27,8 +27,8 @@ export const listItemSegmentStyles = css `
 		   a touch target. On the host, not the control: the host is the flex item,
 		   so a floor on the control would be measured against a host that had
 		   already shrunk to zero. */
-		min-width: var(--_min-size);
-		min-height: var(--_min-size);
+		min-width: var(--_list-item-segment-min-size);
+		min-height: var(--_list-item-segment-min-size);
 		-webkit-tap-highlight-color: transparent;
 	}
 
@@ -51,7 +51,7 @@ export const listItemSegmentStyles = css `
 	   rotated cell reports a turned box, and the row measures that box to place
 	   its divider. */
 	:host([disclosure].is-expanded) ::slotted(nldd-icon-cell) {
-		--context-cell-glyph-rotation: var(--_expanded-rotation);
+		--context-cell-glyph-rotation: var(--_list-item-segment-expanded-rotation);
 	}
 
 	/* The control owns its inline padding, fixed at the indicator inset. Do not
@@ -67,7 +67,7 @@ export const listItemSegmentStyles = css `
 		width: 100%;
 		min-width: 0;
 		padding: 0;
-		padding-inline: var(--components-list-item-indicator-inline-inset);
+		padding-inline: var(--semantics-list-items-indicator-inline-inset);
 		flex-direction: row;
 		align-items: center;
 		justify-content: center;
@@ -92,11 +92,11 @@ export const listItemSegmentStyles = css `
 		content: '';
 		display: block;
 		position: absolute;
-		z-index: var(--_fill-z-index);
+		z-index: var(--_list-item-segment-fill-z-index);
 		inset-block: 0;
 		inset-inline: 0;
-		border-radius: var(--components-list-item-indicator-corner-radius);
-		background-color: var(--_background-color);
+		border-radius: var(--semantics-list-items-indicator-corner-radius);
+		background-color: var(--_list-item-segment-background-color);
 		pointer-events: none;
 	}
 
@@ -105,9 +105,9 @@ export const listItemSegmentStyles = css `
 	@media (hover: hover) {
 		:host(:not([disabled])) a.list-item-segment:hover,
 		button.list-item-segment:not(:disabled):hover {
-			--_background-color: var(--context-list-item-hovered-background-color, var(--components-list-item-is-hovered-background-color));
-			--context-content-color: var(--context-list-item-hovered-content-color, var(--components-list-item-is-hovered-content-color));
-			--context-content-secondary-color: var(--context-list-item-hovered-content-color, var(--components-list-item-is-hovered-content-color));
+			--_list-item-segment-background-color: var(--context-list-item-hovered-background-color, var(--semantics-list-items-is-hovered-background-color));
+			--context-content-color: var(--context-list-item-hovered-content-color, var(--semantics-list-items-is-hovered-content-color));
+			--context-content-secondary-color: var(--context-list-item-hovered-content-color, var(--semantics-list-items-is-hovered-content-color));
 		}
 	}
 
@@ -118,40 +118,40 @@ export const listItemSegmentStyles = css `
 	:host(:not([disabled])) a.list-item-segment.is-pressed,
 	button.list-item-segment:not(:disabled).is-pressed,
 	:host(:not([disabled])) .list-item-segment.is-pressed {
-		--_background-color: var(--context-list-item-active-background-color, var(--components-list-item-is-active-background-color));
-		--context-content-color: var(--context-list-item-active-content-color, var(--context-list-item-hovered-content-color, var(--components-list-item-is-active-content-color)));
-		--context-content-secondary-color: var(--context-list-item-active-content-color, var(--context-list-item-hovered-content-color, var(--components-list-item-is-active-content-color)));
+		--_list-item-segment-background-color: var(--context-list-item-active-background-color, var(--semantics-list-items-is-active-background-color));
+		--context-content-color: var(--context-list-item-active-content-color, var(--context-list-item-hovered-content-color, var(--semantics-list-items-is-active-content-color)));
+		--context-content-secondary-color: var(--context-list-item-active-content-color, var(--context-list-item-hovered-content-color, var(--semantics-list-items-is-active-content-color)));
 	}
 
 	/* After the hover rule on purpose: hovering back over the segment must not
 	   dim it while what it opened is still on screen. */
 	:host([expanded]) .list-item-segment {
-		--_background-color: var(--components-list-item-is-expanded-background-color);
-		--context-content-color: var(--components-list-item-is-expanded-content-color);
-		--context-content-secondary-color: var(--components-list-item-is-expanded-content-color);
+		--_list-item-segment-background-color: var(--semantics-list-items-is-expanded-background-color);
+		--context-content-color: var(--semantics-list-items-is-expanded-content-color);
+		--context-content-secondary-color: var(--semantics-list-items-is-expanded-content-color);
 	}
 
 	@media (hover: hover) {
 		:host([expanded]:not([disabled])) a.list-item-segment:hover,
 		:host([expanded]) button.list-item-segment:not(:disabled):hover {
-			--_background-color: var(--components-list-item-is-expanded-is-hovered-background-color);
-			--context-content-color: var(--components-list-item-is-expanded-content-color);
-			--context-content-secondary-color: var(--components-list-item-is-expanded-content-color);
+			--_list-item-segment-background-color: var(--semantics-list-items-is-expanded-is-hovered-background-color);
+			--context-content-color: var(--semantics-list-items-is-expanded-content-color);
+			--context-content-secondary-color: var(--semantics-list-items-is-expanded-content-color);
 		}
 	}
 
 	:host([expanded]:not([disabled])) a.list-item-segment.is-pressed,
 	:host([expanded]) button.list-item-segment:not(:disabled).is-pressed,
 	:host([expanded]:not([disabled])) .list-item-segment.is-pressed {
-		--_background-color: var(--components-list-item-is-expanded-is-active-background-color);
-		--context-content-color: var(--components-list-item-is-expanded-content-color);
-		--context-content-secondary-color: var(--components-list-item-is-expanded-content-color);
+		--_list-item-segment-background-color: var(--semantics-list-items-is-expanded-is-active-background-color);
+		--context-content-color: var(--semantics-list-items-is-expanded-content-color);
+		--context-content-secondary-color: var(--semantics-list-items-is-expanded-content-color);
 	}
 
 	:host([checked]) .list-item-segment {
-		--_background-color: var(--components-list-item-is-selected-background-color);
-		--context-content-color: var(--components-list-item-is-selected-content-color);
-		--context-content-secondary-color: var(--components-list-item-is-selected-content-color);
+		--_list-item-segment-background-color: var(--semantics-list-items-is-selected-background-color);
+		--context-content-color: var(--semantics-list-items-is-selected-content-color);
+		--context-content-secondary-color: var(--semantics-list-items-is-selected-content-color);
 	}
 
 	.list-item-segment:focus-visible:not(.is-pointer-focus)::after {
@@ -159,7 +159,7 @@ export const listItemSegmentStyles = css `
 		display: block;
 		position: absolute;
 		inset: 0;
-		border-radius: var(--components-list-item-indicator-corner-radius);
+		border-radius: var(--semantics-list-items-indicator-corner-radius);
 		outline: var(--semantics-focus-ring-outline);
 		outline-offset: var(--semantics-focus-ring-outline-offset);
 		box-shadow: var(--semantics-focus-ring-box-shadow);

package/dist/components/lists-and-tables/table/table.js

@@ -199,10 +199,10 @@ let NLDDTable = class NLDDTable extends LitElement {
     _applyColumns() {
         const cols = this._activeColumns();
         if (cols) {
-            this.style.setProperty('--_columns', cols);
+            this.style.setProperty('--_table-columns', cols);
         }
         else {
-            this.style.removeProperty('--_columns');
+            this.style.removeProperty('--_table-columns');
         }
     }
     /** Make the table focusable while it scrolls horizontally so keyboard users

package/dist/components/lists-and-tables/table/table.js.map

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

package/dist/components/lists-and-tables/table/table.styles.js

@@ -5,30 +5,30 @@ export const tableStyles = css `
 		box-sizing: border-box;
 	}
 	:host {
-		--_columns: none;
-		--_corner-radius: var(--semantics-tables-corner-radius);
-		--_column-gap: var(--semantics-tables-column-gap);
-		--_background-color: var(--semantics-surfaces-base-background-color);
-		--_border-color: var(--semantics-surfaces-base-border-color);
+		--_table-columns: none;
+		--_table-corner-radius: var(--semantics-tables-corner-radius);
+		--_table-column-gap: var(--semantics-tables-column-gap);
+		--_table-background-color: var(--semantics-surfaces-base-background-color);
+		--_table-border-color: var(--semantics-surfaces-base-border-color);
 		/* Shared so the focus-visible rule can compose the focus ring over the
 		   border ring with var(...) instead of repeating the inset literal. */
-		--_border-shadow: inset 0 0 0 var(--semantics-tables-border-width) var(--_border-color);
+		--_table-border-shadow: inset 0 0 0 var(--semantics-tables-border-width) var(--_table-border-color);
 
 		${inheritedTextReset}
 		box-sizing: border-box;
 		display: grid;
-		grid-template-columns: var(--_columns);
+		grid-template-columns: var(--_table-columns);
 		width: 100%;
 		/* The table is always a boxed surface and its own horizontal scroll
 		   container: the columns scroll when they don't fit and the table is made
 		   focusable in JS while it scrolls. overflow-y stays hidden so the rounded
 		   corners keep clipping the rows (and their full-bleed dividers). */
-		border-radius: var(--_corner-radius);
-		box-shadow: var(--_border-shadow);
-		background-color: var(--_background-color);
+		border-radius: var(--_table-corner-radius);
+		box-shadow: var(--_table-border-shadow);
+		background-color: var(--_table-background-color);
 		overflow-x: auto;
 		overflow-y: hidden;
-		column-gap: var(--_column-gap);
+		column-gap: var(--_table-column-gap);
 		row-gap: 0;
 	}
 
@@ -38,8 +38,8 @@ export const tableStyles = css `
 
 	/* Default surface is base; tinted is opt-in. */
 	:host([background="tinted"]) {
-		--_background-color: var(--semantics-surfaces-tinted-background-color);
-		--_border-color: var(--semantics-surfaces-tinted-border-color);
+		--_table-background-color: var(--semantics-surfaces-tinted-background-color);
+		--_table-border-color: var(--semantics-surfaces-tinted-border-color);
 	}
 
 	/* Keyboard focus while the table scrolls (it gains tabindex in JS): the
@@ -48,7 +48,7 @@ export const tableStyles = css `
 	:host(:focus-visible) {
 		outline: var(--semantics-focus-ring-outline);
 		outline-offset: var(--semantics-focus-ring-outline-offset);
-		box-shadow: var(--semantics-focus-ring-box-shadow), var(--_border-shadow);
+		box-shadow: var(--semantics-focus-ring-box-shadow), var(--_table-border-shadow);
 	}
 
 	:host(:focus:not(:focus-visible)) {
@@ -91,27 +91,27 @@ export const tableStyles = css `
 `;
 export const tableRowStyles = css `
 	:host {
-		--_min-height: var(--semantics-tables-row-min-height);
+		--_table-row-min-height: var(--semantics-tables-row-min-height);
 		/* Block padding goes to the cells (same hook the list uses) so it belongs
 		   to the cell's box; inline padding stays here because it insets the row
 		   content from the frame without moving the full-bleed divider. */
 		--context-cell-padding-block: var(--semantics-tables-row-padding-block);
-		--_padding-inline: var(--semantics-tables-row-padding-inline);
-		--_divider-color: var(--semantics-tables-border-color);
-		--_divider-thickness: var(--semantics-tables-border-width);
+		--_table-row-padding-inline: var(--semantics-tables-row-padding-inline);
+		--_table-row-divider-color: var(--semantics-tables-border-color);
+		--_table-row-divider-thickness: var(--semantics-tables-border-width);
 
 		${inheritedTextReset}
 		box-sizing: border-box;
 		display: grid;
 		grid-column: 1 / -1;
 		grid-template-columns: subgrid;
-		min-height: var(--_min-height);
+		min-height: var(--_table-row-min-height);
 		/* !important: shields divider and inset from consumer universal resets,
 		   which beat normal :host declarations per CSS Scoping. They cannot move
 		   inward: the row is a subgrid participant, and a wrapper would break
 		   the parent-child column relation. */
-		border-bottom: var(--_divider-thickness) solid var(--_divider-color) !important;
-		padding-inline: var(--_padding-inline) !important;
+		border-bottom: var(--_table-row-divider-thickness) solid var(--_table-row-divider-color) !important;
+		padding-inline: var(--_table-row-padding-inline) !important;
 		align-items: center;
 	}
 

package/dist/components/navigation/breadcrumbs/breadcrumbs.styles.js

@@ -1,12 +1,12 @@
 import { css } from 'lit';
 import { inheritedTextReset } from '../../../assets/styles/shadow-resets.js';
 /* The chevron separator rendered after each breadcrumb item; the item host
-   defines --_separator-vertical-offset. */
+   defines --_breadcrumbs-item-separator-vertical-offset. */
 const separatorStyles = css `
 	.breadcrumbs__separator {
 		display: inline-flex;
 		position: relative;
-		top: var(--_separator-vertical-offset);
+		top: var(--_breadcrumbs-item-separator-vertical-offset);
 		margin-inline: var(--primitives-space-2);
 		color: var(--semantics-content-secondary-color);
 		width: var(--primitives-space-16);
@@ -42,7 +42,7 @@ export const breadcrumbsItemStyles = css `
 		/* Small downward offset so the chevron-right-small icon sits closer
 		   to the text's optical centerline (the icon's bbox renders slightly
 		   above the visual baseline). */
-		--_separator-vertical-offset: 0.05em;
+		--_breadcrumbs-item-separator-vertical-offset: 0.05em;
 
 		${inheritedTextReset}
 		display: inline-flex;