feat(List): Unified list and items structure using sub-grids

packages/ContextMenu/ContextMenu.stories.ts

@@ -9,22 +9,22 @@ export default {
 	package: p,
 } as Meta
 
-const keyboardShortcut = (shortcut: string) => html`<span style='font-size: 13px; color: darkgray'>${shortcut}</span>`
+const keyboardShortcut = (shortcut: string) => html`<span slot='end' style='font-size: 13px; color: darkgray'>${shortcut}</span>`
 
 const mainContextMenu = html`
 	<mo-context-menu-item>
-		<mo-icon style='opacity: 0.66' icon='content_cut'></mo-icon>
-		<span style='flex: 1'>Cut</span>
+		<mo-icon slot='start' style='opacity: 0.66' icon='content_cut'></mo-icon>
+		Cut
 		${keyboardShortcut('Ctrl + X')}
 	</mo-context-menu-item>
 	<mo-context-menu-item>
-		<mo-icon style='opacity: 0.66' icon='content_copy'></mo-icon>
-		<span style='flex: 1'>Copy</span>
+		<mo-icon slot='start' style='opacity: 0.66' icon='content_copy'></mo-icon>
+		Copy
 		${keyboardShortcut('Ctrl + C')}
 	</mo-context-menu-item>
 	<mo-context-menu-item>
-		<mo-icon style='opacity: 0.66' icon='content_paste'></mo-icon>
-		<span style='flex: 1'>Paste</span>
+		<mo-icon slot='start' style='opacity: 0.66' icon='content_paste'></mo-icon>
+		Paste
 		${keyboardShortcut('Ctrl + V')}
 	</mo-context-menu-item>
 	<div role='separator' style='width: 100%; height: 1px; background: darkgray; opacity: 0.3'></div>
@@ -44,8 +44,8 @@ const mainContextMenu = html`
 
 const specialContextMenu = html`
 	<mo-context-menu-item>
-		<mo-icon style='opacity: 0.66' icon='auto_fix_normal'></mo-icon>
-		<span style='flex: 1'>Another Item</span>
+		<mo-icon slot='start' style='opacity: 0.66' icon='auto_fix_normal'></mo-icon>
+		Another Item
 	</mo-context-menu-item>
 `
 

packages/List/List.stories.ts

@@ -12,33 +12,37 @@ export default {
 } as Meta
 
 const keyboardShortcut = (shortcut: string) => html`
-	<span style='font-size: 13px; color: darkgray; text-align: end'>${shortcut}</span>
+	<span slot='end' style='font-size: 13px; color: darkgray'>${shortcut}</span>
 `
 
 const separator = html`
 	<div role='separator' style='width: 100%; height: 1px; background: darkgray; opacity: 0.3'></div>
 `
 
 const items = html`
-	<mo-list-item icon='inbox'>
-		<span style='flex: 1'>Inbox</span>
+	<mo-list-item>
+		<mo-icon slot='start' style='opacity: 0.66' icon='inbox'></mo-icon>
+		Inbox
 		${keyboardShortcut('Ctrl + I')}
 	</mo-list-item>
-	<mo-list-item icon='drafts'>
-		<span style='flex: 1'>Drafts</span>
+	<mo-list-item>
+		<mo-icon slot='start' style='opacity: 0.66' icon='drafts'></mo-icon>
+		Drafts
 		${keyboardShortcut('Ctrl + D')}
 	</mo-list-item>
 	${separator}
 	<mo-list-item><span class='first-column-padding' hidden></span>Trash</mo-list-item>
 	<mo-list-item><span class='first-column-padding' hidden></span>Spam</mo-list-item>
 	${separator}
-	<mo-list-item disabled style='opacity: 1' icon='settings_suggest'>
+	<mo-list-item disabled style='opacity: 1'>
+		<mo-icon slot='start' style='opacity: 0.33' icon='settings_suggest'></mo-icon>
 		<span>
 			<span style='opacity: 0.5'>Personalization -</span>
 			<mo-anchor style='pointer-events: auto;'>Upgrade to Pro!</mo-anchor>
 		</span>
 	</mo-list-item>
-	<mo-list-item icon='logout'>
+	<mo-list-item>
+		<mo-icon slot='start' style='opacity: 0.66' icon='logout'></mo-icon>
 		Logout
 	</mo-list-item>
 `

packages/List/List.ts

@@ -1,4 +1,4 @@
-import { Component, component, css, event, html } from '@a11d/lit'
+import { Component, component, css, event, html, unsafeCSS } from '@a11d/lit'
 import { SlotController } from '@3mo/slot-controller'
 import { ListFocusController } from './ListFocusController.js'
 import { listItems } from './extensions.js'
@@ -29,12 +29,23 @@
 	static override get styles() {
 		return css`
 			:host {
-				display: block;
+				display: grid;
+				grid-template-columns: auto 1fr auto;
+				column-gap: 16px;
 			}
 
 			:host(:focus) {
 				outline: none;
 			}
+
+			::slotted(*) {
+				grid-column: -1 / 1;
+			}
+
+			${unsafeCSS(List.itemRoles.map(role => `::slotted([role='${role}'])`).join(','))} {
+				grid-template-columns: subgrid;
+				display: grid;
+			}
 		`
 	}
 

packages/List/ListItem.ts

@@ -11,6 +11,8 @@ import './ListItemRipple.js'
  * @attr preventClickOnSpace - Whether the list item should prevent click on space
  *
  * @slot - Default slot for content
+ * @slot start - Slot for content at the start
+ * @slot end - Slot for content at the end
  */
 @component('mo-list-item')
 export class ListItem extends Component {
@@ -32,10 +34,11 @@ export class ListItem extends Component {
 				user-select: none;
 				padding-inline: 1rem;
 				padding-block: 0.48em;
-				display: flex;
-				gap: 1rem;
 				align-items: center;
 				min-height: 3rem;
+				/* For list-items without a list */
+				display: flex;
+				gap: 16px;
 			}
 
 			:host([disabled]) {
@@ -46,6 +49,19 @@ export class ListItem extends Component {
 			:host(:focus) {
 				outline: none;
 			}
+
+			slot[name=start], slot:not([name]), slot[name=end] {
+				display: inline-flex;
+			}
+
+			slot:not([name]) {
+				/* For list-items without a list */
+				flex: 1;
+			}
+
+			slot[name=end] {
+				justify-content: end;
+			}
 		`
 	}
 
@@ -61,15 +77,18 @@ export class ListItem extends Component {
 		return html`
 			${!this.focusRingActive ? html.nothing : html`<mo-focus-ring inward visible></mo-focus-ring>`}
 			<mo-list-item-ripple ?focused=${this.rippleActive} ?disabled=${this.disabled} ?preventClickOnSpace=${this.preventClickOnSpace}></mo-list-item-ripple>
-			${this.iconTemplate}
+			<slot name='start'>${this.startSlotDefaultContent}</slot>
 			<slot></slot>
+			<slot name='end'>${this.endSlotDefaultContent}</slot>
 		`
 	}
 
-	protected get iconTemplate() {
-		return !this.icon ? html.nothing : html`
-			<mo-icon part='icon' style='opacity: 0.66' icon=${this.icon}></mo-icon>
-		`
+	protected get startSlotDefaultContent() {
+		return html.nothing
+	}
+
+	protected get endSlotDefaultContent() {
+		return html.nothing
 	}
 }
 

packages/List/NavigationListItem.ts

@@ -20,6 +20,12 @@
 			}
 		`
 	}
+
+	protected override get startSlotDefaultContent() {
+		return !this.icon ? html.nothing : html`
+			<mo-icon part='icon' icon=${this.icon}></mo-icon>
+		`
+	}
 }
 
 declare global {

packages/List/SelectionListItemWithControl.ts

@@ -1,23 +1,15 @@
-import { html, type HTMLTemplateResult, property } from '@a11d/lit'
+import { type HTMLTemplateResult, property } from '@a11d/lit'
 import { SelectionListItem } from './SelectionListItem.js'
 
 export abstract class SelectionListItemWithControl<T = boolean> extends SelectionListItem<T> {
 	@property() selectionControlAlignment: 'start' | 'end' = 'end'
 
-	protected override get template() {
-		return html`
-			${this.selectionControlAlignment === 'start' ? this.selectionControlContainerTemplate : html.nothing}
-			${super.template}
-			${this.selectionControlAlignment === 'end' ? this.selectionControlContainerTemplate : html.nothing}
-		`
+	protected override get startSlotDefaultContent() {
+		return this.selectionControlAlignment === 'start' ? this.selectionControlTemplate : super.startSlotDefaultContent
 	}
 
-	private get selectionControlContainerTemplate() {
-		return html`
-			<div style='margin-inline-start: auto'>
-				${this.selectionControlTemplate}
-			</div>
-		`
+	protected override get endSlotDefaultContent() {
+		return this.selectionControlAlignment === 'end' ? this.selectionControlTemplate : super.endSlotDefaultContent
 	}
 
 	protected abstract get selectionControlTemplate(): HTMLTemplateResult

packages/Menu/Menu.stories.ts

@@ -45,19 +45,19 @@ export const WithCustomContainer: StoryObj = {
 	`
 }
 
-const keyboardShortcut = (shortcut: string) => html`<span style='font-size: 13px; color: darkgray'>${shortcut}</span>`
+const keyboardShortcut = (shortcut: string) => html`<span slot='end' style='font-size: 13px; color: darkgray'>${shortcut}</span>`
 
 const items = html`
 	<mo-menu-item icon='content_cut'>
-		<span style='flex: 1'>Cut</span>
+		Cut
 		${keyboardShortcut('Ctrl + X')}
 	</mo-menu-item>
 	<mo-menu-item icon='content_copy'>
-		<span style='flex: 1'>Copy</span>
+		Copy
 		${keyboardShortcut('Ctrl + C')}
 	</mo-menu-item>
 	<mo-menu-item icon='content_paste'>
-		<span style='flex: 1'>Paste</span>
+		Paste
 		${keyboardShortcut('Ctrl + V')}
 	</mo-menu-item>
 

packages/Menu/MenuItem.ts

@@ -11,7 +11,20 @@
 	static override get styles() {
 		return css`
 			${super.styles}
-			:host { min-height: 2.25rem; }
+
+			:host {
+				min-height: 2.25rem;
+			}
+		`
+	}
+
+	protected override get startSlotDefaultContent() {
+		return this.iconTemplate
+	}
+
+	protected get iconTemplate() {
+		return !this.icon ? html.nothing : html`
+			<mo-icon part='icon' style='opacity: 0.66' icon=${this.icon}></mo-icon>
 		`
 	}
 }

packages/Menu/NestedMenuItem.ts

@@ -77,13 +77,18 @@ export class NestedMenuItem extends MenuItem {
 		`
 	}
 
+	protected override get endSlotDefaultContent() {
+		return !this.hasSubMenu ? html.nothing : html`
+			<mo-icon icon='chevron_right'></mo-icon>
+		`
+	}
+
 	protected get hasSubMenu() {
 		return this.slotController.hasAssignedContent('submenu')
 	}
 
 	protected get subMenuTemplate() {
 		return !this.hasSubMenu ? html.nothing : html`
-			<mo-icon icon='chevron_right'></mo-icon>
 			<mo-menu .anchor=${this} placement='inline-end' alignment='start'
 				?open=${bind(this, 'open')}
 				@listKeyDown=${(e: CustomEvent<KeyboardEvent>) => { e.stopImmediatePropagation(); !['Left', 'ArrowLeft'].includes(e.detail.key) ? void 0 : this.setOpen(false) }}

packages/SelectField/FieldSelect.stories.ts

@@ -21,7 +21,7 @@ export const Select: StoryObj = {
 			<mo-field-select label='Countries' ?searchable=${searchable} ?multiple=${multiple} default=${defaultText}>
 				${countries.map(country => html`
 					<mo-option value=${country.code} .data=${country}>
-						<img width='25px' src=${`https://flagcdn.com/h40/${country.code.toLowerCase()}.png`}>
+						<img slot='start' width='25px' src=${`https://flagcdn.com/h40/${country.code.toLowerCase()}.png`}>
 						${country.label}
 					</mo-option>
 				`)}
@@ -36,7 +36,7 @@ export const FreeInput: StoryObj = {
 			<mo-field-select label='Countries' searchable freeInput ?multiple=${multiple} default=${defaultText} .value=${multiple ? ['DE'] : 'DE'}>
 				${countries.map(country => html`
 					<mo-option value=${country.code} .data=${country}>
-						<img width='25px' src=${`https://flagcdn.com/h40/${country.code.toLowerCase()}.png`}>
+						<img slot='start' width='25px' src=${`https://flagcdn.com/h40/${country.code.toLowerCase()}.png`}>
 						${country.label}
 					</mo-option>
 				`)}
@@ -51,7 +51,7 @@ export const PreSelectedValue: StoryObj = {
 			<mo-field-select label='Countries' ?searchable=${searchable} ?multiple=${multiple} default=${defaultText} .value=${multiple ? [] : 'DE'}>
 				${countries.map(country => html`
 					<mo-option value=${country.code} .data=${country}>
-						<img width='25px' src=${`https://flagcdn.com/h40/${country.code.toLowerCase()}.png`}>
+						<img slot='start' width='25px' src=${`https://flagcdn.com/h40/${country.code.toLowerCase()}.png`}>
 						${country.label}
 					</mo-option>
 				`)}

packages/SelectField/Option.ts

@@ -67,7 +67,7 @@ export class Option<T> extends SelectionListItem {
 			}
 
 			:host([data-search-no-match]) {
-				display: none;
+				display: none !important;
 				pointer-events: none;
 			}
 
@@ -78,11 +78,8 @@ export class Option<T> extends SelectionListItem {
 		`
 	}
 
-	protected override get template() {
-		return html`
-			${super.template}
-			${this.checkboxTemplate}
-		`
+	protected override get endSlotDefaultContent() {
+		return this.checkboxTemplate
 	}
 
 	protected get checkboxTemplate() {