@nldd/design-system 0.8.37

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

@@ -0,0 +1,48 @@
+import { html, nothing } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
+export const template = (itemsLabel, hasHeader, type, isEmpty, emptyText, emptySupportingText) => {
+    const isNavigation = type === 'navigation';
+    // Navigation: the host carries role="navigation" with its own label; an
+    // extra aria-label on the inner role="list" would make the landmark name
+    // and the inner list name stack in screen-reader announcements.
+    const skipItemsLabel = hasHeader || isNavigation;
+    // Drop role="list" (and its label) when the container is empty. The
+    // empty-state slot renders an nldd-inline-dialog which is not a listitem;
+    // keeping role="list" here would violate ARIA's listitem-only child rule.
+    const itemsRole = isEmpty ? undefined : 'list';
+    return html `
+		<div class="list__body">
+			<div class="list__header">
+				<slot name="header"></slot>
+			</div>
+			<div class="list__items"
+				role=${ifDefined(itemsRole)}
+				aria-label=${ifDefined(skipItemsLabel || isEmpty ? undefined : itemsLabel)}
+			>
+				<slot></slot>
+				<div class="list__empty" ?hidden=${!isEmpty}>
+					<slot name="empty">
+						<nldd-inline-dialog
+							text=${emptyText}
+							supporting-text=${emptySupportingText || nothing}
+						></nldd-inline-dialog>
+					</slot>
+				</div>
+			</div>
+			<div class="list__footer">
+				<slot name="footer"></slot>
+			</div>
+		</div>
+		<div class="list__polite-announcer"
+			role="status"
+			aria-live="polite"
+			aria-atomic="true"
+		></div>
+		<div class="list__assertive-announcer"
+			role="alert"
+			aria-live="assertive"
+			aria-atomic="true"
+		></div>
+	`;
+};
+//# sourceMappingURL=list.template.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"list.template.js","sourceRoot":"","sources":["../../../../src/components/lists-and-menus/list/list.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AACpC,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAGzD,MAAM,CAAC,MAAM,QAAQ,GAAG,CACvB,UAAkB,EAClB,SAAkB,EAClB,IAAc,EACd,OAAgB,EAChB,SAAiB,EACjB,mBAA2B,EAC1B,EAAE;IACH,MAAM,YAAY,GAAG,IAAI,KAAK,YAAY,CAAC;IAC3C,wEAAwE;IACxE,yEAAyE;IACzE,gEAAgE;IAChE,MAAM,cAAc,GAAG,SAAS,IAAI,YAAY,CAAC;IACjD,oEAAoE;IACpE,0EAA0E;IAC1E,0EAA0E;IAC1E,MAAM,SAAS,GAAG,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC;IAC/C,OAAO,IAAI,CAAA;;;;;;WAMD,SAAS,CAAC,SAAS,CAAC;iBACd,SAAS,CAAC,cAAc,IAAI,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,UAAU,CAAC;;;uCAGvC,CAAC,OAAO;;;cAGjC,SAAS;yBACE,mBAAmB,IAAI,OAAO;;;;;;;;;;;;;;;;;;;EAmBrD,CAAC;AACH,CAAC,CAAC"}

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

@@ -0,0 +1,62 @@
+import { LitElement } from 'lit';
+import '../cells/spacer-cell/spacer-cell.js';
+export type ListItemSize = 'sm' | 'md';
+export type ListItemType = 'button';
+/**
+ * A row within an `nldd-list`, providing layout for start, main and end areas.
+ * Renders as a link when `href` is set, as a button when `type="button"`, or
+ * as a plain container otherwise.
+ *
+ * The item synchronises its ARIA with its parent `nldd-list`'s `type`:
+ * - `list` parent       → `role="listitem"`
+ * - `navigation` parent → `role="listitem"` + `aria-current="page"` on the
+ *                         inner `<a>` / `<button>` when `selected`
+ *
+ * @slot         - Main content area
+ * @slot start   - Content at the start of the row
+ * @slot end     - Content at the end of the row
+ */
+export declare class NLDDListItem extends LitElement {
+    static styles: import("lit").CSSResult[];
+    size: ListItemSize;
+    selected: boolean;
+    /** When set, renders the item as a button. */
+    type?: ListItemType;
+    /** When set, renders the item as a link. */
+    href?: string;
+    /** Set by the parent nldd-list when reorderable is enabled. Used as a CSS hook for drag handle visibility. */
+    reorderable: boolean;
+    private _showStart;
+    private _showEnd;
+    private _parentType;
+    private _action?;
+    private _isBoxed;
+    private _listObserver;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    firstUpdated(): void;
+    updated(changed: Map<string, unknown>): void;
+    /**
+     * Syncs the item with the closest parent nldd-list (variant + type).
+     * Called once in firstUpdated. If the item is moved to a different nldd-list
+     * after first render, the MutationObserver will still watch the original list.
+     * This is acceptable as moving items between lists is not a supported use case.
+     */
+    private _syncWithList;
+    private _applyVariant;
+    private _applyParentType;
+    private _updateAriaState;
+    private _updateVisibility;
+    private _observeStartSlot;
+    private _observeEndSlot;
+    private _handleClick;
+    private _handleFocusIn;
+    private _handleFocusOut;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nldd-list-item': NLDDListItem;
+    }
+}
+//# sourceMappingURL=list-item.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"list-item.d.ts","sourceRoot":"","sources":["../../../../src/components/lists-and-menus/list-item/list-item.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAMjC,OAAO,qCAAqC,CAAC;AAE7C,MAAM,MAAM,YAAY,GAAG,IAAI,GAAG,IAAI,CAAC;AACvC,MAAM,MAAM,YAAY,GAAG,QAAQ,CAAC;AAEpC;;;;;;;;;;;;;GAaG;AACH,qBACa,YAAa,SAAQ,UAAU;IAC3C,OAAgB,MAAM,4BAAoB;IAG1C,IAAI,EAAE,YAAY,CAAQ;IAG1B,QAAQ,UAAS;IAEjB,8CAA8C;IAE9C,IAAI,CAAC,EAAE,YAAY,CAAC;IAEpB,4CAA4C;IAE5C,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,8GAA8G;IAE9G,WAAW,UAAS;IAGpB,OAAO,CAAC,UAAU,CAAS;IAG3B,OAAO,CAAC,QAAQ,CAAS;IAGzB,OAAO,CAAC,WAAW,CAAoB;IAGvC,OAAO,CAAC,OAAO,CAAC,CAAc;IAE9B,OAAO,CAAC,QAAQ,CAAS;IACzB,OAAO,CAAC,aAAa,CAAiC;IAE7C,iBAAiB;IAajB,oBAAoB;IASpB,YAAY;IAaZ,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAM9C;;;;;OAKG;IACH,OAAO,CAAC,aAAa;IAoBrB,OAAO,CAAC,aAAa;IAMrB,OAAO,CAAC,gBAAgB;IAIxB,OAAO,CAAC,gBAAgB;IAYxB,OAAO,CAAC,iBAAiB;IAOzB,OAAO,CAAC,iBAAiB;IAKzB,OAAO,CAAC,eAAe;IAKvB,OAAO,CAAC,YAAY,CAIlB;IAEF,OAAO,CAAC,cAAc,CAOpB;IAEF,OAAO,CAAC,eAAe,CAErB;IAEO,MAAM;CAQf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,gBAAgB,EAAE,YAAY,CAAC;KAC/B;CACD"}

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

@@ -0,0 +1,188 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement } from 'lit';
+import { customElement, property, query, state } from 'lit/decorators.js';
+import { listItemStyles } from './list-item.styles.js';
+import { template } from './list-item.template.js';
+import { isPointerMode } from '../../../utilities/input-modality.js';
+import '../cells/spacer-cell/spacer-cell.js';
+/**
+ * A row within an `nldd-list`, providing layout for start, main and end areas.
+ * Renders as a link when `href` is set, as a button when `type="button"`, or
+ * as a plain container otherwise.
+ *
+ * The item synchronises its ARIA with its parent `nldd-list`'s `type`:
+ * - `list` parent       → `role="listitem"`
+ * - `navigation` parent → `role="listitem"` + `aria-current="page"` on the
+ *                         inner `<a>` / `<button>` when `selected`
+ *
+ * @slot         - Main content area
+ * @slot start   - Content at the start of the row
+ * @slot end     - Content at the end of the row
+ */
+let NLDDListItem = class NLDDListItem extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.size = 'md';
+        this.selected = false;
+        /** Set by the parent nldd-list when reorderable is enabled. Used as a CSS hook for drag handle visibility. */
+        this.reorderable = false;
+        this._showStart = false;
+        this._showEnd = false;
+        this._parentType = 'list';
+        this._isBoxed = false;
+        this._listObserver = null;
+        this._handleClick = () => {
+            // Safari and Firefox on Mac don't focus buttons on click. Force focus
+            // so :has(.list-item__action:focus) and :focus-within CSS work reliably.
+            this._action?.focus();
+        };
+        this._handleFocusIn = () => {
+            // Safari treats programmatic focus (forced on click for Safari/Firefox)
+            // as focus-visible. Opt out by marking pointer-originated focus with a
+            // class the CSS uses to suppress the ::before focus ring. If JS fails,
+            // is-pointer-focus is never set so the CSS selector still matches on
+            // keyboard focus and the custom ring renders — accessible by default.
+            this._action?.classList.toggle('is-pointer-focus', isPointerMode());
+        };
+        this._handleFocusOut = () => {
+            this._action?.classList.remove('is-pointer-focus');
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        // Skip setup for drag clones — they are visual-only copies inside nldd-list's shadow root
+        if (this.hasAttribute('data-nldd-clone'))
+            return;
+        this.setAttribute('role', 'listitem');
+        // Attach focus/click listeners here (not firstUpdated) so they are
+        // re-attached when the element is removed and re-inserted into the DOM.
+        // _action is resolved lazily via @query inside the handlers.
+        this.addEventListener('focusin', this._handleFocusIn);
+        this.addEventListener('focusout', this._handleFocusOut);
+        this.addEventListener('click', this._handleClick);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this._listObserver?.disconnect();
+        this._listObserver = null;
+        this.removeEventListener('focusin', this._handleFocusIn);
+        this.removeEventListener('focusout', this._handleFocusOut);
+        this.removeEventListener('click', this._handleClick);
+    }
+    firstUpdated() {
+        if (this.hasAttribute('data-nldd-clone')) {
+            // Clone is visual-only — skip list sync but still observe slots
+            // so start/end areas render correctly based on cloned light DOM
+            this._observeStartSlot();
+            this._observeEndSlot();
+            return;
+        }
+        this._syncWithList();
+        this._observeStartSlot();
+        this._observeEndSlot();
+    }
+    updated(changed) {
+        if (changed.has('selected') || changed.has('type') || changed.has('href') || changed.has('_parentType')) {
+            this._updateAriaState();
+        }
+    }
+    /**
+     * Syncs the item with the closest parent nldd-list (variant + type).
+     * Called once in firstUpdated. If the item is moved to a different nldd-list
+     * after first render, the MutationObserver will still watch the original list.
+     * This is acceptable as moving items between lists is not a supported use case.
+     */
+    _syncWithList() {
+        const list = this.closest('nldd-list');
+        if (!list) {
+            if (import.meta.env?.DEV) {
+                console.warn('nldd-list-item: no parent nldd-list found. Variant/type sync will not work if appended into a list after first render.');
+            }
+            return;
+        }
+        this._applyVariant(list.variant);
+        this._applyParentType(list.type);
+        this._listObserver = new MutationObserver(() => {
+            this._applyVariant(list.variant);
+            this._applyParentType(list.type);
+        });
+        this._listObserver.observe(list, {
+            attributes: true,
+            attributeFilter: ['variant', 'type'],
+        });
+    }
+    _applyVariant(variant) {
+        this._isBoxed = variant === 'box' || variant === 'box-on-tinted';
+        this.classList.toggle('is-boxed', this._isBoxed);
+        this._updateVisibility();
+    }
+    _applyParentType(type) {
+        this._parentType = type;
+    }
+    _updateAriaState() {
+        this.setAttribute('role', 'listitem');
+        // aria-current on the inner action (link/button) — navigation only
+        const action = this.shadowRoot?.querySelector('.list-item__action');
+        if (this._parentType === 'navigation' && this.selected && action) {
+            action.setAttribute('aria-current', 'page');
+        }
+        else {
+            action?.removeAttribute('aria-current');
+        }
+    }
+    _updateVisibility() {
+        const startSlot = this.shadowRoot?.querySelector('slot[name="start"]');
+        const endSlot = this.shadowRoot?.querySelector('slot[name="end"]');
+        this._showStart = this._isBoxed || (startSlot?.assignedElements().length ?? 0) > 0;
+        this._showEnd = this._isBoxed || (endSlot?.assignedElements().length ?? 0) > 0;
+    }
+    _observeStartSlot() {
+        const slot = this.shadowRoot?.querySelector('slot[name="start"]');
+        slot?.addEventListener('slotchange', () => this._updateVisibility());
+    }
+    _observeEndSlot() {
+        const slot = this.shadowRoot?.querySelector('slot[name="end"]');
+        slot?.addEventListener('slotchange', () => this._updateVisibility());
+    }
+    render() {
+        return template(this.type, this.href, this._showStart, this._showEnd);
+    }
+};
+NLDDListItem.styles = [listItemStyles];
+__decorate([
+    property({ reflect: true })
+], NLDDListItem.prototype, "size", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NLDDListItem.prototype, "selected", void 0);
+__decorate([
+    property({ reflect: true })
+], NLDDListItem.prototype, "type", void 0);
+__decorate([
+    property({ reflect: true })
+], NLDDListItem.prototype, "href", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NLDDListItem.prototype, "reorderable", void 0);
+__decorate([
+    state()
+], NLDDListItem.prototype, "_showStart", void 0);
+__decorate([
+    state()
+], NLDDListItem.prototype, "_showEnd", void 0);
+__decorate([
+    state()
+], NLDDListItem.prototype, "_parentType", void 0);
+__decorate([
+    query('.list-item__action')
+], NLDDListItem.prototype, "_action", void 0);
+NLDDListItem = __decorate([
+    customElement('nldd-list-item')
+], NLDDListItem);
+export { NLDDListItem };
+//# sourceMappingURL=list-item.js.map

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

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

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

@@ -0,0 +1,2 @@
+export declare const listItemStyles: import("lit").CSSResult;
+//# sourceMappingURL=list-item.styles.d.ts.map

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

@@ -0,0 +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,yBAsP1B,CAAC"}

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

@@ -0,0 +1,249 @@
+import { css } from 'lit';
+export const listItemStyles = css `
+
+
+	/* # Host */
+
+	:host {
+		display: block;
+		width: 100%;
+		-webkit-tap-highlight-color: transparent;
+		container-type: inline-size;
+		container-name: list-item;
+		--_background-color: transparent;
+		--_z-index-content: 0;
+		--_z-index-focus: 1;
+		--_z-index-indicator: calc(var(--_z-index-content) - 1);
+		--_focus-outline-offset: 6px;
+	}
+
+	:host([hidden]) {
+		display: none;
+	}
+
+	:host(:focus-within) {
+		position: relative;
+		z-index: var(--_z-index-focus);
+	}
+
+	:host(.is-dragging) {
+		opacity: var(--components-list-item-is-dragging-opacity);
+	}
+
+	:host(.is-dragging-pointer) {
+		display: none;
+	}
+
+	:host(:not([reorderable])) ::slotted([reorderable-only]) {
+		display: none;
+	}
+
+	:host([reorderable]) ::slotted([reorderable-only]) {
+		cursor: grab;
+		touch-action: none;
+	}
+
+	:host(.is-dragging) ::slotted([reorderable-only]) {
+		cursor: grabbing;
+	}
+
+
+	/* # Block */
+
+	.list-item {
+		box-sizing: border-box;
+		display: flex;
+		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 {
+		min-height: var(--semantics-controls-sm-min-size);
+	}
+
+
+	/* # Action */
+
+	.list-item__action {
+		display: flex;
+		flex-direction: row;
+		align-items: stretch;
+		width: 100%;
+		background: none;
+		border: none;
+		padding: 0;
+		margin: 0;
+		text-align: start;
+		text-decoration: none;
+		color: inherit;
+		outline: none;
+	}
+
+	a.list-item__action {
+		cursor: var(--semantics-controls-link-cursor);
+	}
+
+
+	/* # 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. */
+
+	.list-item:not(:has(.list-item__action))::before {
+		content: '';
+		display: block;
+		position: absolute;
+		inset-block: 0;
+		inset-inline: min(calc(var(--primitives-space-8) * -1), calc(var(--components-list-item-indicator-corner-radius) * -1));
+		border-radius: var(--components-list-item-indicator-corner-radius);
+		background-color: var(--_background-color);
+		z-index: var(--_z-index-indicator);
+		pointer-events: none;
+	}
+
+	:host([selected]) {
+		--_background-color: var(--components-list-item-is-selected-background-color);
+		--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. */
+
+	.list-item__action::before {
+		content: '';
+		display: block;
+		position: absolute;
+		inset-block: 0;
+		inset-inline: min(calc(var(--primitives-space-8) * -1), calc(var(--components-list-item-indicator-corner-radius) * -1));
+		border-radius: var(--components-list-item-indicator-corner-radius);
+		background-color: var(--_background-color);
+		z-index: var(--_z-index-indicator);
+		pointer-events: none;
+	}
+
+	.list-item__action:hover {
+		--_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 {
+		--_background-color: var(--components-list-item-is-selected-background-color);
+		--context-cell-content-color: var(--components-list-item-is-selected-content-color);
+	}
+
+	:host([selected]) .list-item__action:hover {
+		--_background-color: var(--components-list-item-is-selected-background-color);
+		--context-cell-content-color: var(--components-list-item-is-selected-content-color);
+	}
+
+	:host([selected]) .list-item__action:focus {
+		--_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:focus:hover {
+		--_background-color: var(--components-list-item-is-highlighted-background-color);
+		--context-cell-content-color: var(--components-list-item-is-highlighted-content-color);
+	}
+
+
+	/* ## 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);
+	}
+
+	:host(:not(.is-boxed)) .list-item__action:focus-visible:not(.is-pointer-focus)::after {
+		inset-block: 0;
+		inset-inline: min(calc(var(--primitives-space-8) * -1), calc(var(--components-list-item-indicator-corner-radius) * -1));
+		border-radius: var(--components-list-item-indicator-corner-radius);
+	}
+
+	:host(.is-boxed) .list-item__action:focus-visible:not(.is-pointer-focus)::after {
+		inset: var(--_focus-outline-offset);
+	}
+
+	:host(.is-boxed:first-child) .list-item__action:focus-visible:not(.is-pointer-focus)::after {
+		border-top-left-radius: calc(var(--components-list-corner-radius) - var(--_focus-outline-offset));
+		border-top-right-radius: calc(var(--components-list-corner-radius) - var(--_focus-outline-offset));
+	}
+
+	:host(.is-boxed:last-child) .list-item__action:focus-visible:not(.is-pointer-focus)::after {
+		border-bottom-left-radius: calc(var(--components-list-corner-radius) - var(--_focus-outline-offset));
+		border-bottom-right-radius: calc(var(--components-list-corner-radius) - var(--_focus-outline-offset));
+	}
+
+
+	/* # Start & end area */
+
+	.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);
+	}
+
+	.list-item__start-area.is-visible,
+	.list-item__end-area.is-visible {
+		display: flex;
+	}
+
+	:host([size='sm']) .list-item__start-area,
+	:host([size='sm']) .list-item__end-area {
+		padding-block: var(--components-list-item-sm-padding-block);
+	}
+
+
+	/* # Main area */
+
+	.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);
+		padding-block: var(--components-list-item-md-padding-block);
+	}
+
+	:host([size='sm']) .list-item__main-area {
+		padding-block: var(--components-list-item-sm-padding-block);
+	}
+
+
+	/* # Divider */
+
+	.list-item__divider {
+		display: var(--context-list-divider-display, block);
+		position: absolute;
+		inset-block-end: 0;
+		inset-inline: 0;
+		height: var(--semantics-dividers-thickness);
+		background-color: var(--semantics-dividers-color);
+	}
+
+	:host([selected]) .list-item__divider,
+	:host(.is-boxed.is-last) .list-item__divider {
+		display: none;
+	}
+`;
+//# sourceMappingURL=list-item.styles.js.map

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

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

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

@@ -0,0 +1,2 @@
+export declare const template: (type: string | undefined, href: string | undefined, showStart: boolean, showEnd: boolean) => import("lit-html").TemplateResult<1>;
+//# sourceMappingURL=list-item.template.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"list-item.template.d.ts","sourceRoot":"","sources":["../../../../src/components/lists-and-menus/list-item/list-item.template.ts"],"names":[],"mappings":"AAoBA,eAAO,MAAM,QAAQ,GACpB,MAAM,MAAM,GAAG,SAAS,EACxB,MAAM,MAAM,GAAG,SAAS,EACxB,WAAW,OAAO,EAClB,SAAS,OAAO,yCAmBhB,CAAC"}

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

@@ -0,0 +1,38 @@
+import { html } from 'lit';
+import { classMap } from 'lit/directives/class-map.js';
+const areas = (showStart, showEnd) => html `
+	<div class=${classMap({ 'list-item__start-area': true, 'is-visible': showStart })}>
+		<slot name="start">
+			<nldd-spacer-cell size="12"></nldd-spacer-cell>
+		</slot>
+	</div>
+	<div class="list-item__main-area">
+		<slot></slot>
+		<div class="list-item__divider"></div>
+	</div>
+	<div class=${classMap({ 'list-item__end-area': true, 'is-visible': showEnd })}>
+		<slot name="end">
+			<nldd-spacer-cell size="12"></nldd-spacer-cell>
+		</slot>
+	</div>
+`;
+export const template = (type, href, showStart, showEnd) => {
+    if (href) {
+        return html `<div class="list-item">
+			<a class="list-item__action"
+				href=${href}
+			>${areas(showStart, showEnd)}</a>
+		</div>`;
+    }
+    if (type === 'button') {
+        return html `<div class="list-item">
+			<button class="list-item__action"
+				type="button"
+			>${areas(showStart, showEnd)}</button>
+		</div>`;
+    }
+    return html `<div class="list-item">
+		${areas(showStart, showEnd)}
+	</div>`;
+};
+//# sourceMappingURL=list-item.template.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"list-item.template.js","sourceRoot":"","sources":["../../../../src/components/lists-and-menus/list-item/list-item.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAEvD,MAAM,KAAK,GAAG,CAAC,SAAkB,EAAE,OAAgB,EAAE,EAAE,CAAC,IAAI,CAAA;cAC9C,QAAQ,CAAC,EAAE,uBAAuB,EAAE,IAAI,EAAE,YAAY,EAAE,SAAS,EAAE,CAAC;;;;;;;;;cASpE,QAAQ,CAAC,EAAE,qBAAqB,EAAE,IAAI,EAAE,YAAY,EAAE,OAAO,EAAE,CAAC;;;;;CAK7E,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG,CACvB,IAAwB,EACxB,IAAwB,EACxB,SAAkB,EAClB,OAAgB,EACf,EAAE;IACH,IAAI,IAAI,EAAE,CAAC;QACV,OAAO,IAAI,CAAA;;WAEF,IAAI;MACT,KAAK,CAAC,SAAS,EAAE,OAAO,CAAC;SACtB,CAAC;IACT,CAAC;IACD,IAAI,IAAI,KAAK,QAAQ,EAAE,CAAC;QACvB,OAAO,IAAI,CAAA;;;MAGP,KAAK,CAAC,SAAS,EAAE,OAAO,CAAC;SACtB,CAAC;IACT,CAAC;IACD,OAAO,IAAI,CAAA;IACR,KAAK,CAAC,SAAS,EAAE,OAAO,CAAC;QACrB,CAAC;AACT,CAAC,CAAC"}