@nldd/design-system 0.8.43 → 0.8.45

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

@@ -9,14 +9,18 @@ export const titleCellStyles = css `
 		--_min-width: 0;
 		--_max-width: none;
 		--_min-height: 0;
+		--_text-align: start;
+		--_secondary-color: var(--context-cell-content-color, var(--semantics-content-secondary-color));
+		--_title-color: var(--context-cell-content-color, var(--semantics-content-color));
+		--_title-font: var(--primitives-font-display-5-sm);
 
 		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 +30,22 @@ export const titleCellStyles = 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,196 +54,130 @@ export const titleCellStyles = 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 */
-
-	.title-cell__overline {
-		margin: 0;
-		align-self: stretch;
-		min-width: 0;
-		overflow-wrap: anywhere;
-		font: var(--primitives-font-body-xs-regular-tight);
-		color: var(--context-cell-content-color, var(--semantics-content-secondary-color));
-	}
+	/* # Size */
 
-	:host([horizontal-alignment='center']) .title-cell__overline {
-		text-align: center;
+	:host([size="1"]) {
+		--_title-font: var(--primitives-font-display-1-sm);
 	}
 
-	:host([horizontal-alignment='right']) .title-cell__overline {
-		text-align: right;
+	:host([size="2"]) {
+		--_title-font: var(--primitives-font-display-2-sm);
 	}
 
-
-	/* # Title */
-
-	.title-cell__title {
-		margin: 0;
-		align-self: stretch;
-		min-width: 0;
-		overflow-wrap: break-word;
-		color: var(--context-cell-content-color, var(--semantics-content-color));
-		text-wrap: pretty;
+	:host([size="3"]) {
+		--_title-font: var(--primitives-font-display-3-sm);
 	}
 
-	:host([horizontal-alignment='center']) .title-cell__title {
-		text-align: center;
+	:host([size="4"]) {
+		--_title-font: var(--primitives-font-display-4-sm);
 	}
 
-	:host([horizontal-alignment='right']) .title-cell__title {
-		text-align: right;
+	:host([size="6"]) {
+		--_title-font: var(--primitives-font-display-6-sm);
 	}
 
-	/* ## Size 1 */
 
-	:host([size='1']) .title-cell__title {
-		font: var(--primitives-font-display-1-sm);
-	}
-
-	/* ## Size 2 */
+	/* # Color */
 
-	:host([size='2']) .title-cell__title {
-		font: var(--primitives-font-display-2-sm);
+	:host([color="secondary"]) {
+		--_title-color: var(--context-cell-content-secondary-color, var(--semantics-content-secondary-color));
 	}
 
-	/* ## Size 3 */
-
-	:host([size='3']) .title-cell__title {
-		font: var(--primitives-font-display-3-sm);
+	:host([color="accent"]) {
+		--_secondary-color: var(--context-cell-content-accent-color, var(--semantics-content-accent-color));
+		--_title-color: var(--context-cell-content-accent-color, var(--semantics-content-accent-color));
 	}
 
-	/* ## Size 4 */
-
-	:host([size='4']) .title-cell__title {
-		font: var(--primitives-font-display-4-sm);
+	:host([color="success"]) {
+		--_secondary-color: var(--context-cell-content-success-color, var(--semantics-content-success-color));
+		--_title-color: var(--context-cell-content-success-color, var(--semantics-content-success-color));
 	}
 
-	/* ## Size 5 */
-
-	:host([size='5']) .title-cell__title,
-	:host(:not([size])) .title-cell__title {
-		font: var(--primitives-font-display-5-sm);
+	:host([color="warning"]) {
+		--_secondary-color: var(--context-cell-content-warning-color, var(--semantics-content-warning-color));
+		--_title-color: var(--context-cell-content-warning-color, var(--semantics-content-warning-color));
 	}
 
-	/* ## Size 6 */
-
-	:host([size='6']) .title-cell__title {
-		font: var(--primitives-font-display-6-sm);
+	:host([color="critical"]) {
+		--_secondary-color: var(--context-cell-content-critical-color, var(--semantics-content-critical-color));
+		--_title-color: var(--context-cell-content-critical-color, var(--semantics-content-critical-color));
 	}
 
 
-	/* # Subtitle */
+	/* # Elements */
 
-	.title-cell__supporting-text {
+	.title-cell__overline {
 		margin: 0;
-		align-self: stretch;
 		min-width: 0;
+		align-self: stretch;
+		text-align: var(--_text-align);
+		color: var(--_secondary-color);
+		font: var(--primitives-font-body-xs-regular-tight);
 		overflow-wrap: anywhere;
-		font: var(--primitives-font-body-sm-regular-tight);
-		color: var(--context-cell-content-color, var(--semantics-content-secondary-color));
 	}
 
-	:host([horizontal-alignment='center']) .title-cell__supporting-text {
-		text-align: center;
-	}
-
-	:host([horizontal-alignment='right']) .title-cell__supporting-text {
-		text-align: right;
-	}
-
-
-	/* # Color */
-
-	/* ## Color: secondary
-	 *
-	 * Overline and supporting-text are already muted by default, so we only
-	 * demote the title to make the whole cell read as secondary.
-	 */
-
-	:host([color='secondary']) .title-cell__title {
-		color: var(--context-cell-content-secondary-color, var(--semantics-content-secondary-color));
-	}
-
-	/* ## Color: accent
-	 *
-	 * Applies to all three text regions so the cell reads as a coherent
-	 * highlight, not a mix of accent + muted overline / supporting-text.
-	 */
-
-	:host([color='accent']) .title-cell__title,
-	:host([color='accent']) .title-cell__overline,
-	:host([color='accent']) .title-cell__supporting-text {
-		color: var(--context-cell-content-accent-color, var(--semantics-content-accent-color));
-	}
-
-	/* ## Color: success */
-
-	:host([color='success']) .title-cell__title,
-	:host([color='success']) .title-cell__overline,
-	:host([color='success']) .title-cell__supporting-text {
-		color: var(--context-cell-content-success-color, var(--semantics-content-success-color));
-	}
-
-	/* ## Color: warning */
-
-	:host([color='warning']) .title-cell__title,
-	:host([color='warning']) .title-cell__overline,
-	:host([color='warning']) .title-cell__supporting-text {
-		color: var(--context-cell-content-warning-color, var(--semantics-content-warning-color));
-	}
-
-	/* ## Color: critical */
-
-	:host([color='critical']) .title-cell__title,
-	:host([color='critical']) .title-cell__overline,
-	:host([color='critical']) .title-cell__supporting-text {
-		color: var(--context-cell-content-critical-color, var(--semantics-content-critical-color));
+	.title-cell__title {
+		margin: 0;
+		min-width: 0;
+		align-self: stretch;
+		text-align: var(--_text-align);
+		color: var(--_title-color);
+		font: var(--_title-font);
+		overflow-wrap: break-word;
+		text-wrap: pretty;
 	}
 
-
-	/* # Forced colors */
-
 	@media (forced-colors: active) {
 		.title-cell__title {
 			forced-color-adjust: none;
 		}
 	}
+
+	.title-cell__supporting-text {
+		margin: 0;
+		min-width: 0;
+		align-self: stretch;
+		text-align: var(--_text-align);
+		color: var(--_secondary-color);
+		font: var(--primitives-font-body-sm-regular-tight);
+		overflow-wrap: anywhere;
+	}
 `;
 //# sourceMappingURL=title-cell.styles.js.map

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

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

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

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

package/dist/components/lists-and-menus/list/list.styles.js

@@ -7,18 +7,34 @@ export const listStyles = css `
 	:host {
 		--_drag-clone-top: 0px;
 		--_drag-clone-left: 0px;
-		--_drag-clone-width: 0px;
-		--_drag-clone-height: 0px;
 		--_drag-clone-opacity: 0.95;
 		--_drag-clone-z-index: 100;
+		--_drag-clone-width: 0px;
+		--_drag-clone-height: 0px;
 
 		display: block;
 		position: relative;
 		isolation: isolate;
 	}
 
+	:host([no-dividers]) {
+		--context-list-divider-display: none;
+	}
 
-	/* # Body */
+	:host([variant="box"]) .list__items {
+		border-radius: var(--components-list-corner-radius);
+		background-color: var(--semantics-surfaces-tinted-background-color);
+		overflow: hidden;
+	}
+
+	:host([variant="box-on-tinted"]) .list__items {
+		border-radius: var(--components-list-corner-radius);
+		background-color: var(--semantics-surfaces-background-color);
+		overflow: hidden;
+	}
+
+
+	/* # Elements */
 
 	.list__body {
 		display: flex;
@@ -26,25 +42,16 @@ export const listStyles = css `
 		gap: var(--primitives-space-8);
 	}
 
-
-	/* # Header & footer */
-
 	.list__header,
 	.list__footer {
 		display: contents;
 	}
 
-
-	/* # Items */
-
 	.list__items {
 		display: flex;
 		flex-direction: column;
 	}
 
-
-	/* # Empty slot */
-
 	.list__empty {
 		padding: var(--primitives-space-16);
 	}
@@ -53,75 +60,41 @@ export const listStyles = css `
 		display: none;
 	}
 
-
-	/* # No dividers */
-
-	:host([no-dividers]) {
-		--context-list-divider-display: none;
-	}
-
-
-	/* # Variant: box */
-
-	:host([variant='box']) .list__items {
-		background-color: var(--semantics-surfaces-tinted-background-color);
-		border-radius: var(--components-list-corner-radius);
-		overflow: hidden;
-	}
-
-
-	/* # Variant: box-on-tinted */
-
-	:host([variant='box-on-tinted']) .list__items {
-		background-color: var(--semantics-surfaces-background-color);
-		border-radius: var(--components-list-corner-radius);
-		overflow: hidden;
-	}
-
-
-	/* # Drag placeholder */
-
 	::slotted(.nldd-list-drag-placeholder) {
 		box-sizing: border-box;
+		border-radius: var(--components-list-item-indicator-corner-radius);
 		background-color: var(--components-list-drag-placeholder-background-color);
 		pointer-events: none;
-		border-radius: var(--components-list-item-indicator-corner-radius);
 	}
 
-
-	/* # Drag clone */
-
 	.list__drag-clone {
+		display: flex;
 		position: absolute;
 		top: var(--_drag-clone-top);
 		left: var(--_drag-clone-left);
-		width: var(--_drag-clone-width);
-		height: var(--_drag-clone-height);
-		display: flex;
-		flex-direction: row;
-		align-items: stretch;
-		pointer-events: none;
 		opacity: var(--_drag-clone-opacity);
+		z-index: var(--_drag-clone-z-index);
 		border-radius: var(--components-list-item-indicator-corner-radius);
 		background: var(--semantics-surfaces-background-color);
-		z-index: var(--_drag-clone-z-index);
+		pointer-events: none;
+		width: var(--_drag-clone-width);
+		height: var(--_drag-clone-height);
 		overflow: hidden;
+		flex-direction: row;
+		align-items: stretch;
 	}
 
-
-	/* # Announcer */
-
 	.list__polite-announcer,
 	.list__assertive-announcer {
 		position: absolute;
+		margin: -1px;
+		border: 0;
 		width: 1px;
 		height: 1px;
-		padding: 0;
-		margin: -1px;
 		overflow: hidden;
-		clip-path: inset(50%);
+		padding: 0;
 		white-space: nowrap;
-		border: 0;
+		clip-path: inset(50%);
 	}
 `;
 //# sourceMappingURL=list.styles.js.map

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

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

package/dist/components/lists-and-menus/list-item/list-item.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"list-item.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/lists-and-menus/list-item/list-item.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc,yBA2P1B,CAAC"}
+{"version":3,"file":"list-item.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/lists-and-menus/list-item/list-item.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc,yBAoQ1B,CAAC"}

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

@@ -12,10 +12,10 @@ export const listItemStyles = css `
 		--_focus-outline-offset: 6px;
 
 		display: block;
-		width: 100%;
-		-webkit-tap-highlight-color: transparent;
 		container-type: inline-size;
 		container-name: list-item;
+		width: 100%;
+		-webkit-tap-highlight-color: transparent;
 	}
 
 	:host([hidden]) {
@@ -54,15 +54,15 @@ export const listItemStyles = css `
 	.list-item {
 		box-sizing: border-box;
 		display: flex;
+		position: relative;
+		width: 100%;
 		min-height: var(--semantics-controls-md-min-size);
 		flex-direction: row;
 		align-items: stretch;
-		position: relative;
 		isolation: isolate;
-		width: 100%;
 	}
 
-	:host([size='sm']) .list-item {
+	:host([size="sm"]) .list-item {
 		min-height: var(--semantics-controls-sm-min-size);
 	}
 
@@ -71,17 +71,17 @@ export const listItemStyles = css `
 
 	.list-item__action {
 		display: flex;
-		flex-direction: row;
-		align-items: stretch;
-		width: 100%;
-		background: none;
+		margin: 0;
+		outline: none;
 		border: none;
+		background: none;
+		width: 100%;
 		padding: 0;
-		margin: 0;
+		flex-direction: row;
+		align-items: stretch;
 		text-align: start;
-		text-decoration: none;
 		color: inherit;
-		outline: none;
+		text-decoration: none;
 	}
 
 	a.list-item__action {
@@ -91,11 +91,8 @@ export const listItemStyles = css `
 
 	/* # Indicator */
 
-	/* ## Non-interactive
-	   Items without an inner action get the selection indicator directly on
-	   .list-item, driven only by :host([selected]). Use when a slotted
-	   control (e.g. a checkbox) owns the selection semantics and the row
-	   itself should still reflect the selected state visually. */
+	/* Non-interactive: items without an inner action get the selection
+	   indicator directly on .list-item, driven only by :host([selected]) */
 
 	.list-item:not(:has(.list-item__action))::before {
 		content: '';
@@ -103,9 +100,9 @@ export const listItemStyles = css `
 		position: absolute;
 		inset-block: 0;
 		inset-inline: min(calc(var(--primitives-space-8) * -1), calc(var(--components-list-item-indicator-corner-radius) * -1));
+		z-index: var(--_z-index-indicator);
 		border-radius: var(--components-list-item-indicator-corner-radius);
 		background-color: var(--_background-color);
-		z-index: var(--_z-index-indicator);
 		pointer-events: none;
 	}
 
@@ -114,9 +111,8 @@ export const listItemStyles = css `
 		--context-cell-content-color: var(--components-list-item-is-selected-content-color);
 	}
 
-	/* ## Interactive
-	   Items with a link or button inner element. Indicator responds to
-	   hover and focus on top of the selected state. */
+	/* Interactive: items with a link/button inner element; indicator responds
+	   to hover and focus on top of the selected state */
 
 	.list-item__action::before {
 		content: '';
@@ -124,14 +120,14 @@ export const listItemStyles = css `
 		position: absolute;
 		inset-block: 0;
 		inset-inline: min(calc(var(--primitives-space-8) * -1), calc(var(--components-list-item-indicator-corner-radius) * -1));
+		z-index: var(--_z-index-indicator);
 		border-radius: var(--components-list-item-indicator-corner-radius);
 		background-color: var(--_background-color);
-		z-index: var(--_z-index-indicator);
 		pointer-events: none;
 	}
 
-	/* Hover rules only on hover-capable devices: prevents touch-scrolling
-	 * from briefly flashing the hover state on the row under the finger. */
+	/* hover only on hover-capable devices: avoids touch-scroll flashing the
+	   hover state on the row under the finger */
 	@media (hover: hover) {
 		.list-item__action:hover {
 			--_background-color: var(--components-list-item-is-hovered-background-color);
@@ -149,6 +145,19 @@ export const listItemStyles = css `
 		}
 	}
 
+	/* Press feedback — works on touch where :hover doesn't. Same visual as
+	   :hover (the gated mouse rule above) so it reads consistently across
+	   input modes. */
+	.list-item__action:active {
+		--_background-color: var(--components-list-item-is-hovered-background-color);
+		--context-cell-content-color: var(--components-list-item-is-hovered-content-color);
+	}
+
+	:host([selected]) .list-item__action:active {
+		--_background-color: var(--components-list-item-is-highlighted-background-color);
+		--context-cell-content-color: var(--components-list-item-is-highlighted-content-color);
+	}
+
 	:host([selected]) .list-item__action {
 		--_background-color: var(--components-list-item-is-selected-background-color);
 		--context-cell-content-color: var(--components-list-item-is-selected-content-color);
@@ -160,16 +169,16 @@ export const listItemStyles = css `
 	}
 
 
-	/* ## Focus */
+	/* # Focus */
 
 	.list-item__action:focus-visible:not(.is-pointer-focus)::after {
 		content: '';
 		display: block;
 		position: absolute;
-		pointer-events: none;
 		outline: var(--semantics-focus-ring-outline);
 		outline-offset: var(--semantics-focus-ring-outline-offset);
 		box-shadow: var(--semantics-focus-ring-box-shadow);
+		pointer-events: none;
 	}
 
 	:host(:not(.is-boxed)) .list-item__action:focus-visible:not(.is-pointer-focus)::after {
@@ -198,12 +207,12 @@ export const listItemStyles = css `
 	.list-item__start-area,
 	.list-item__end-area {
 		display: none;
-		flex-direction: row;
-		align-items: center;
-		flex-shrink: 0;
 		position: relative;
 		z-index: var(--_z-index-content);
 		padding-block: var(--components-list-item-md-padding-block);
+		flex-direction: row;
+		flex-shrink: 0;
+		align-items: center;
 	}
 
 	.list-item__start-area.is-visible,
@@ -211,8 +220,8 @@ export const listItemStyles = css `
 		display: flex;
 	}
 
-	:host([size='sm']) .list-item__start-area,
-	:host([size='sm']) .list-item__end-area {
+	:host([size="sm"]) .list-item__start-area,
+	:host([size="sm"]) .list-item__end-area {
 		padding-block: var(--components-list-item-sm-padding-block);
 	}
 
@@ -221,16 +230,16 @@ export const listItemStyles = css `
 
 	.list-item__main-area {
 		display: flex;
-		flex-direction: row;
-		align-items: center;
-		flex-grow: 1;
-		min-width: 0;
 		position: relative;
 		z-index: var(--_z-index-content);
+		min-width: 0;
 		padding-block: var(--components-list-item-md-padding-block);
+		flex-direction: row;
+		flex-grow: 1;
+		align-items: center;
 	}
 
-	:host([size='sm']) .list-item__main-area {
+	:host([size="sm"]) .list-item__main-area {
 		padding-block: var(--components-list-item-sm-padding-block);
 	}
 
@@ -242,8 +251,8 @@ export const listItemStyles = css `
 		position: absolute;
 		inset-block-end: 0;
 		inset-inline: 0;
-		height: var(--semantics-dividers-thickness);
 		background-color: var(--semantics-dividers-color);
+		height: var(--semantics-dividers-thickness);
 	}
 
 	:host([selected]) .list-item__divider,