@brandsync/wc 1.15.0 → 1.16.0

package/dist/collection/components/bs-list/bs-list.cmp.test.js

@@ -0,0 +1,99 @@
+import { render, h, describe, it, expect } from "@stencil/vitest";
+import { runAxeCheck } from "../../test/helpers/conventions";
+const mountList = (props = {}) => render(h("bs-list", { ariaLabel: "Things", ...props }, h("bs-list-item", { value: "a", label: "A", description: "first" }), h("bs-list-item", { value: "b", label: "B", description: "second" }), h("bs-list-item", { value: "c", label: "C", description: "third", disabled: true }), h("bs-list-item", { value: "d", label: "D", description: "fourth" })));
+const itemOf = (root, value) => Array.from(root.querySelectorAll("bs-list-item")).find(i => i.value === value);
+describe('bs-list', () => {
+    it('non-selectable: list/listitem roles, items not interactive', async () => {
+        const { root, waitForChanges } = await mountList();
+        await waitForChanges();
+        expect(root.shadowRoot.querySelector('[part="list"]')).toEqualAttribute('role', 'list');
+        expect(root.shadowRoot.querySelector('[part="list"]')).toEqualAttribute('aria-label', 'Things');
+        const a = itemOf(root, 'a');
+        expect(a).toEqualAttribute('role', 'listitem');
+        expect(a.hasAttribute('tabindex')).toBe(false);
+        let n = 0;
+        root.addEventListener('bsChange', () => n++);
+        a.click();
+        expect(n).toBe(0);
+    });
+    it('selectable: listbox/option roles with aria-selected and roving tabindex', async () => {
+        const { root, waitForChanges } = await mountList({ selectable: true, value: 'b' });
+        await waitForChanges();
+        expect(root.shadowRoot.querySelector('[part="list"]')).toEqualAttribute('role', 'listbox');
+        expect(itemOf(root, 'a')).toEqualAttribute('role', 'option');
+        expect(itemOf(root, 'b')).toEqualAttribute('aria-selected', 'true');
+        expect(itemOf(root, 'a')).toEqualAttribute('aria-selected', 'false');
+        expect(itemOf(root, 'b')).toEqualAttribute('tabindex', '0');
+        expect(itemOf(root, 'a')).toEqualAttribute('tabindex', '-1');
+        expect(itemOf(root, 'c').hasAttribute('tabindex')).toBe(false);
+    });
+    it('click selects, deselects the previous item, updates value and emits bsChange', async () => {
+        const { root, waitForChanges } = await mountList({ selectable: true, value: 'a' });
+        const got = [];
+        root.addEventListener('bsChange', (e) => got.push(e.detail));
+        itemOf(root, 'd').click();
+        await waitForChanges();
+        expect(got).toEqual(['d']);
+        expect(root.value).toBe('d');
+        expect(itemOf(root, 'd').hasAttribute('selected')).toBe(true);
+        expect(itemOf(root, 'a').hasAttribute('selected')).toBe(false);
+        itemOf(root, 'c').click(); // disabled
+        await waitForChanges();
+        expect(got).toEqual(['d']);
+    });
+    it('setting value programmatically selects without emitting', async () => {
+        const { root, waitForChanges } = await mountList({ selectable: true });
+        let n = 0;
+        root.addEventListener('bsChange', () => n++);
+        root.value = 'b';
+        await waitForChanges();
+        expect(itemOf(root, 'b').hasAttribute('selected')).toBe(true);
+        expect(n).toBe(0);
+    });
+    it('arrow keys, Home and End move focus and skip disabled items; Enter/Space select', async () => {
+        const { root, waitForChanges } = await mountList({ selectable: true });
+        await waitForChanges();
+        const key = (el, k) => el.dispatchEvent(new KeyboardEvent('keydown', { key: k, bubbles: true, cancelable: true }));
+        itemOf(root, 'a').focus();
+        key(itemOf(root, 'a'), 'ArrowDown');
+        expect(document.activeElement).toBe(itemOf(root, 'b'));
+        key(itemOf(root, 'b'), 'ArrowDown'); // skips disabled c
+        expect(document.activeElement).toBe(itemOf(root, 'd'));
+        key(itemOf(root, 'd'), 'ArrowUp');
+        expect(document.activeElement).toBe(itemOf(root, 'b'));
+        key(itemOf(root, 'b'), 'End');
+        expect(document.activeElement).toBe(itemOf(root, 'd'));
+        key(itemOf(root, 'd'), 'Home');
+        expect(document.activeElement).toBe(itemOf(root, 'a'));
+        expect(itemOf(root, 'a')).toEqualAttribute('tabindex', '0');
+        key(itemOf(root, 'a'), 'ArrowDown');
+        key(itemOf(root, 'b'), 'Enter');
+        await waitForChanges();
+        expect(root.value).toBe('b');
+        key(itemOf(root, 'b'), 'ArrowDown');
+        key(itemOf(root, 'd'), ' ');
+        await waitForChanges();
+        expect(root.value).toBe('d');
+    });
+    it('handles items added later', async () => {
+        const { root, waitForChanges } = await mountList({ selectable: true });
+        const extra = document.createElement('bs-list-item');
+        extra.setAttribute('value', 'e');
+        root.appendChild(extra);
+        await waitForChanges();
+        await new Promise(r => setTimeout(r, 50));
+        expect(extra).toEqualAttribute('role', 'option');
+    });
+    it('dividers draw a 1px separator between rows only', async () => {
+        const { root, waitForChanges } = await mountList({ dividers: true });
+        await waitForChanges();
+        expect(getComputedStyle(itemOf(root, 'a')).borderBottomWidth).toBe('1px');
+        expect(getComputedStyle(itemOf(root, 'd')).borderBottomWidth).toBe('0px');
+    });
+    it('has no axe violations (plain and selectable)', async () => {
+        const { root } = await mountList();
+        await runAxeCheck(root);
+        const { root: r2 } = await mountList({ selectable: true, value: 'a' });
+        await runAxeCheck(r2);
+    });
+});

package/dist/collection/components/bs-list/bs-list.css

@@ -0,0 +1,15 @@
+:host {
+  display: block;
+  --bs-list-gap: 0;
+  --bs-list-divider-color: var(--bs-border-neutral-container);
+}
+
+.bs-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--bs-list-gap);
+}
+
+:host([dividers]) ::slotted(bs-list-item:not(:last-child)) {
+  border-bottom: 1px solid var(--bs-list-divider-color);
+}

package/dist/collection/components/bs-list/bs-list.js

@@ -0,0 +1,241 @@
+import { h } from "@stencil/core";
+/**
+ * A vertical list of `bs-list-item` rows, optionally single-select.
+ *
+ * ## When to use
+ * - Records, people, files or options shown as rows with leading media and descriptions.
+ * - `selectable` for a single-choice list (e.g. a conversation list next to a detail pane).
+ *
+ * ## When not to use
+ * - A popup list of actions -- use `bs-menu`.
+ * - Navigation between app sections -- use `bs-navigation-drawer`.
+ * - Multi-column, sortable or paged data -- use `bs-data-table`.
+ *
+ * Built from `bs-list-item` children (light DOM; the list never moves nodes).
+ *
+ * @slot - The `bs-list-item` rows.
+ * @part list - The list container.
+ * @prop --bs-list-gap - Gap between rows. Defaults to `0`.
+ * @prop --bs-list-divider-color - Divider colour when `dividers` is set. Aliased to `--bs-border-neutral-container`.
+ */
+export class BsList {
+    el;
+    /** Single-selection mode: role="listbox", rows are `option`s with roving tabindex. */
+    selectable = false;
+    /** `value` of the selected item (selectable mode). */
+    value = null;
+    /** Draws a 1px separator between rows. */
+    dividers = false;
+    /** Accessible name of the list. */
+    ariaLabel = null;
+    /** Fires with the new `value` when the user changes the selection. */
+    bsChange;
+    onChange() {
+        this.sync();
+    }
+    componentDidLoad() {
+        this.sync();
+    }
+    items() {
+        return Array.from(this.el.children).filter(c => c.tagName === 'BS-LIST-ITEM');
+    }
+    enabled() {
+        return this.items().filter(i => !i.disabled);
+    }
+    sync() {
+        const items = this.items();
+        items.forEach(i => {
+            i.selectionRole = this.selectable ? 'option' : 'listitem';
+            if (this.selectable)
+                i.selected = this.value != null && i.value === this.value;
+            i.removeAttribute('tabindex');
+        });
+        if (!this.selectable)
+            return;
+        const enabled = this.enabled();
+        const target = enabled.find(i => i.selected) || enabled[0];
+        enabled.forEach(i => i.setAttribute('tabindex', i === target ? '0' : '-1'));
+    }
+    rove(item) {
+        this.enabled().forEach(i => i.setAttribute('tabindex', i === item ? '0' : '-1'));
+    }
+    onItemClick(ev) {
+        if (!this.selectable)
+            return;
+        const item = ev.target;
+        if (item.disabled || !this.items().includes(item))
+            return;
+        ev.stopPropagation();
+        this.rove(item);
+        if (this.value === item.value)
+            return;
+        this.value = item.value;
+        this.sync();
+        this.rove(item);
+        this.bsChange.emit(this.value);
+    }
+    onKeyDown(ev) {
+        if (!this.selectable)
+            return;
+        const enabled = this.enabled();
+        const current = enabled.indexOf(ev.target);
+        if (current === -1)
+            return;
+        let next = -1;
+        if (ev.key === 'ArrowDown')
+            next = Math.min(current + 1, enabled.length - 1);
+        else if (ev.key === 'ArrowUp')
+            next = Math.max(current - 1, 0);
+        else if (ev.key === 'Home')
+            next = 0;
+        else if (ev.key === 'End')
+            next = enabled.length - 1;
+        if (next === -1)
+            return;
+        ev.preventDefault();
+        this.rove(enabled[next]);
+        enabled[next].focus();
+    }
+    render() {
+        return (h("div", { key: '0f3e4a90f79c77ab2a67e88c4480f0c5785e49eb', part: "list", class: "bs-list", role: this.selectable ? 'listbox' : 'list', "aria-label": this.ariaLabel ?? undefined }, h("slot", { key: '7b5618d45ad58385f3d27565bdfee3e4bb5eac2e', onSlotchange: () => this.sync() })));
+    }
+    static get is() { return "bs-list"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bs-list.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bs-list.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "selectable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Single-selection mode: role=\"listbox\", rows are `option`s with roving tabindex."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "selectable",
+                "defaultValue": "false"
+            },
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "`value` of the selected item (selectable mode)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "value",
+                "defaultValue": "null"
+            },
+            "dividers": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Draws a 1px separator between rows."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "dividers",
+                "defaultValue": "false"
+            },
+            "ariaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible name of the list."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aria-label",
+                "defaultValue": "null"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "bsChange",
+                "name": "bsChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires with the new `value` when the user changes the selection."
+                },
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "onChange"
+            }, {
+                "propName": "selectable",
+                "methodName": "onChange"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "bsItemClick",
+                "method": "onItemClick",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "keydown",
+                "method": "onKeyDown",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}

package/dist/collection/components/bs-list/bs-list.stories.js

@@ -0,0 +1,43 @@
+import { html } from "lit";
+import { componentDescription } from "../../stories-utils";
+const meta = {
+    title: 'Components/bs-list',
+    parameters: { docs: { description: { component: componentDescription('bs-list') } } },
+    argTypes: {
+        selectable: { control: 'boolean' },
+        dividers: { control: 'boolean' },
+        value: { control: 'text' },
+    },
+    args: { selectable: false, dividers: false, value: '' },
+    render: args => html `
+    <bs-list style="width: 360px;" aria-label="Items" ?selectable=${args.selectable} ?dividers=${args.dividers} .value=${args.value || null}>
+      <bs-list-item value="a" label="First" description="Paragraph" show-arrow></bs-list-item>
+      <bs-list-item value="b" label="Second" description="Paragraph" support-text="Support text" show-arrow></bs-list-item>
+      <bs-list-item value="c" label="Third (disabled)" description="Paragraph" disabled></bs-list-item>
+      <bs-list-item value="d" label="Fourth" description="Paragraph" show-arrow></bs-list-item>
+    </bs-list>
+  `,
+};
+export default meta;
+export const Default = {};
+export const Selectable = {
+    parameters: { docs: { description: { story: 'Single selection with a controlled `value`.' } } },
+    args: { selectable: true, value: 'b' },
+};
+export const WithDividers = { name: 'With dividers', args: { dividers: true } };
+export const AvatarList = {
+    name: 'Avatar list',
+    render: () => html `
+    <bs-list style="width: 360px;" aria-label="People" selectable value="sl">
+      <bs-list-item value="sl" label="Sam Lee" description="Designer">
+        <bs-avatar slot="leading" type="initials" initials="SL" size="lg" aria-label="Sam Lee"></bs-avatar>
+      </bs-list-item>
+      <bs-list-item value="ak" label="Alex Kim" description="Engineer">
+        <bs-avatar slot="leading" type="initials" initials="AK" size="lg" aria-label="Alex Kim"></bs-avatar>
+      </bs-list-item>
+      <bs-list-item value="jr" label="Jo Ray" description="Product manager">
+        <bs-avatar slot="leading" type="initials" initials="JR" size="lg" aria-label="Jo Ray"></bs-avatar>
+      </bs-list-item>
+    </bs-list>
+  `,
+};

package/dist/collection/components/bs-list-item/bs-list-item.cmp.test.js

@@ -0,0 +1,137 @@
+import { render, h, describe, it, expect } from "@stencil/vitest";
+import { userEvent } from "vitest/browser";
+import { assertShadowParts, runAxeCheck } from "../../test/helpers/conventions";
+const row = (host) => host.shadowRoot.querySelector('[part="container"]');
+/** Resolves a token to the colour the browser computes for it. */
+const tokenColor = (token, prop = 'backgroundColor') => {
+    const p = document.createElement('div');
+    p.style[prop === 'color' ? 'color' : 'background'] = `var(${token})`;
+    document.body.appendChild(p);
+    const c = getComputedStyle(p)[prop];
+    p.remove();
+    return c;
+};
+const bg = (host) => getComputedStyle(row(host)).backgroundColor;
+const settle = () => new Promise(r => setTimeout(r, 200));
+describe('bs-list-item', () => {
+    it('has the Figma geometry', async () => {
+        const { root } = await render(h("bs-list-item", { label: "Label", description: "Paragraph" }));
+        const cs = getComputedStyle(row(root));
+        expect(cs.minHeight).toBe('80px');
+        expect(cs.paddingTop).toBe('12px');
+        expect(cs.paddingLeft).toBe('16px');
+        expect(cs.columnGap).toBe('16px');
+        expect(cs.borderRadius).toBe('8px');
+        expect(cs.alignItems).toBe('center');
+        expect(Math.round(root.getBoundingClientRect().height)).toBeGreaterThanOrEqual(80);
+    });
+    it('exposes its documented parts', async () => {
+        const { root } = await render(h("bs-list-item", { label: "L", description: "D", supportText: "S", showArrow: true }));
+        assertShadowParts(root.shadowRoot, ['container', 'leading', 'content', 'label', 'description', 'support-text', 'trailing']);
+        expect(root.shadowRoot.querySelector('[part="trailing"] svg')).not.toBeNull();
+    });
+    it('is a plain, role-less, non-focusable row when standalone', async () => {
+        const { root } = await render(h("bs-list-item", { label: "L" }));
+        expect(root.hasAttribute('role')).toBe(false);
+        expect(root.hasAttribute('tabindex')).toBe(false);
+    });
+    it('is a focusable button when interactive and emits bsItemClick on click/Enter/Space', async () => {
+        const { root, waitForChanges } = await render(h("bs-list-item", { label: "L", value: "v", interactive: true }));
+        expect(root).toEqualAttribute('role', 'button');
+        expect(root).toEqualAttribute('tabindex', '0');
+        const got = [];
+        root.addEventListener('bsItemClick', (e) => got.push(e.detail));
+        root.click();
+        root.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }));
+        root.dispatchEvent(new KeyboardEvent('keydown', { key: ' ', bubbles: true }));
+        await waitForChanges();
+        expect(got).toEqual(['v', 'v', 'v']);
+    });
+    it('does not emit for non-interactive rows', async () => {
+        const { root } = await render(h("bs-list-item", { label: "L", value: "v" }));
+        let n = 0;
+        root.addEventListener('bsItemClick', () => n++);
+        root.click();
+        expect(n).toBe(0);
+    });
+    it('resolves enabled and selected backgrounds to the surface tokens', async () => {
+        const { root, waitForChanges } = await render(h("bs-list-item", { label: "L", interactive: true }));
+        // The shared browser keeps its pointer where an earlier test left it, which can leave this row
+        // hovered (and mid-fade); move it away and let the transition finish before reading.
+        await userEvent.unhover(row(root));
+        await settle();
+        expect(bg(root)).toBe('rgba(0, 0, 0, 0)');
+        root.setAttribute('selected', '');
+        await waitForChanges();
+        await settle();
+        expect(bg(root)).toBe(tokenColor('--bs-surface-selected'));
+    });
+    it('resolves hovered backgrounds (unselected and selected)', async () => {
+        const { root, waitForChanges } = await render(h("bs-list-item", { label: "L", interactive: true }));
+        await userEvent.hover(root);
+        await settle();
+        expect(bg(root)).toBe(tokenColor('--bs-surface-hover'));
+        root.setAttribute('selected', '');
+        await waitForChanges();
+        await settle();
+        expect(bg(root)).toBe(tokenColor('--bs-surface-selected-hover'));
+    });
+    it('draws a focus ring and focus surface on keyboard focus', async () => {
+        const { root, waitForChanges } = await render(h("bs-list-item", { label: "L", interactive: true }));
+        await userEvent.keyboard('{Tab}');
+        await waitForChanges();
+        await settle();
+        const cs = getComputedStyle(row(root));
+        expect(cs.outlineStyle).toBe('solid');
+        expect(cs.outlineWidth).toBe('2px');
+        expect(cs.outlineOffset).toBe('2px');
+        expect(cs.outlineColor).toBe(tokenColor('--bs-border-neutral-focus', 'color'));
+        expect(cs.backgroundColor).toBe(tokenColor('--bs-surface-focus'));
+    });
+    it('disabled: surface, text colour, no focus, no event', async () => {
+        const { root, waitForChanges } = await render(h("bs-list-item", { label: "L", value: "v", interactive: true, disabled: true }));
+        await waitForChanges();
+        expect(bg(root)).toBe(tokenColor('--bs-surface-action-disabled'));
+        expect(getComputedStyle(row(root)).color).toBe(tokenColor('--bs-text-on-disabled', 'color'));
+        expect(root.hasAttribute('tabindex')).toBe(false);
+        expect(root).toEqualAttribute('aria-disabled', 'true');
+        let n = 0;
+        root.addEventListener('bsItemClick', () => n++);
+        root.click();
+        expect(n).toBe(0);
+    });
+    it('dims a disabled leading image to 50%', async () => {
+        const { root } = await render(h("bs-list-item", { label: "L", disabled: true }, h("img", { slot: "leading", alt: "", src: "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'/>" })));
+        expect(getComputedStyle(root.querySelector('img')).opacity).toBe('0.5');
+    });
+    it('sizes a leading image 72x56', async () => {
+        const { root, waitForChanges } = await render(h("bs-list-item", { label: "L" }, h("img", { slot: "leading", alt: "", src: "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'/>" })));
+        await waitForChanges();
+        const r = root.querySelector('img').getBoundingClientRect();
+        expect([r.width, r.height]).toEqual([72, 56]);
+    });
+    it('renders default-slot content instead of label/description', async () => {
+        const { root, waitForChanges } = await render(h("bs-list-item", { label: "L", description: "D" }, h("b", null, "Rich")));
+        await waitForChanges();
+        expect(root.shadowRoot.querySelector('[part="label"]')).toBeNull();
+    });
+    it('follows the text token in light and dark mode', async () => {
+        const { root } = await render(h("bs-list-item", { label: "L" }));
+        const light = getComputedStyle(row(root)).color;
+        expect(light).toBe(tokenColor('--bs-text-default', 'color'));
+        document.documentElement.setAttribute('data-theme', 'dark');
+        try {
+            await new Promise(r => setTimeout(r, 50));
+            const dark = getComputedStyle(row(root)).color;
+            expect(dark).not.toBe(light);
+            expect(dark).toBe(tokenColor('--bs-text-default', 'color'));
+        }
+        finally {
+            document.documentElement.removeAttribute('data-theme');
+        }
+    });
+    it('has no axe violations', async () => {
+        const { root } = await render(h("bs-list-item", { label: "Label", description: "Paragraph", showArrow: true }));
+        await runAxeCheck(root);
+    });
+});

package/dist/collection/components/bs-list-item/bs-list-item.css

@@ -0,0 +1,139 @@
+:host {
+  display: block;
+  width: 100%;
+  box-sizing: border-box;
+  outline: none;
+  color: var(--bs-list-item-color);
+  --bs-list-item-min-height: var(--bs-spacing-1000);
+  --bs-list-item-padding-y: var(--bs-spacing-150);
+  --bs-list-item-padding-x: var(--bs-spacing-200);
+  --bs-list-item-gap: var(--bs-spacing-200);
+  --bs-list-item-content-gap: var(--bs-spacing-25);
+  --bs-list-item-radius: var(--bs-border-radius-100);
+  --bs-list-item-bg: transparent;
+  --bs-list-item-bg-hover: var(--bs-surface-hover);
+  --bs-list-item-bg-pressed: var(--bs-surface-pressed);
+  --bs-list-item-bg-focus: var(--bs-surface-focus);
+  --bs-list-item-bg-selected: var(--bs-surface-selected);
+  --bs-list-item-bg-selected-hover: var(--bs-surface-selected-hover);
+  --bs-list-item-bg-selected-pressed: var(--bs-surface-selected-pressed);
+  --bs-list-item-bg-selected-focus: var(--bs-surface-selected-focus);
+  --bs-list-item-bg-disabled: var(--bs-surface-action-disabled);
+  --bs-list-item-color: var(--bs-text-default);
+  --bs-list-item-color-disabled: var(--bs-text-on-disabled);
+  --bs-list-item-focus-ring: var(--bs-border-neutral-focus);
+  --bs-list-item-image-width: 72px;
+  --bs-list-item-image-height: 56px;
+}
+
+.bs-list-item {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  gap: var(--bs-list-item-gap);
+  width: 100%;
+  min-height: var(--bs-list-item-min-height);
+  padding: var(--bs-list-item-padding-y) var(--bs-list-item-padding-x);
+  border-radius: var(--bs-list-item-radius);
+  overflow: clip;
+  background: var(--bs-list-item-bg);
+  color: var(--bs-list-item-color);
+  font-family: inherit;
+  font-size: var(--bs-font-size-md);
+  line-height: calc(var(--bs-line-height-body-md) * 1px);
+  transition: background-color var(--bs-duration-fast) var(--bs-easing-standard);
+}
+
+:host([selected]) .bs-list-item {
+  background: var(--bs-list-item-bg-selected);
+}
+
+:host(.bs-list-item--interactive) {
+  cursor: pointer;
+}
+
+:host(.bs-list-item--interactive:hover) .bs-list-item {
+  background: var(--bs-list-item-bg-hover);
+}
+:host(.bs-list-item--interactive[selected]:hover) .bs-list-item {
+  background: var(--bs-list-item-bg-selected-hover);
+}
+:host(.bs-list-item--interactive:active) .bs-list-item {
+  background: var(--bs-list-item-bg-pressed);
+}
+:host(.bs-list-item--interactive[selected]:active) .bs-list-item {
+  background: var(--bs-list-item-bg-selected-pressed);
+}
+
+:host(:focus-visible) .bs-list-item {
+  background: var(--bs-list-item-bg-focus);
+  outline: 2px solid var(--bs-list-item-focus-ring);
+  outline-offset: 2px;
+}
+:host([selected]:focus-visible) .bs-list-item {
+  background: var(--bs-list-item-bg-selected-focus);
+}
+
+:host([disabled]) {
+  color: var(--bs-list-item-color-disabled);
+  cursor: default;
+}
+:host([disabled]) .bs-list-item {
+  background: var(--bs-list-item-bg-disabled);
+  color: var(--bs-list-item-color-disabled);
+}
+:host([disabled]) ::slotted(img),
+:host([disabled]) ::slotted(bs-avatar) {
+  opacity: 0.5;
+}
+
+.bs-list-item__leading {
+  display: none;
+  flex-shrink: 0;
+  align-items: center;
+}
+.bs-list-item__leading--has-content {
+  display: flex;
+}
+::slotted(img[slot='leading']) {
+  display: block;
+  width: var(--bs-list-item-image-width);
+  height: var(--bs-list-item-image-height);
+  border-radius: var(--bs-border-radius-100);
+  object-fit: cover;
+}
+::slotted(svg[slot='leading']) {
+  width: 32px;
+  height: 32px;
+}
+
+.bs-list-item__content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--bs-list-item-content-gap);
+  flex: 1 1 0;
+  min-width: 0;
+}
+.bs-list-item__label {
+  font-weight: var(--bs-font-weight-semibold);
+}
+.bs-list-item__description,
+.bs-list-item__support {
+  font-weight: var(--bs-font-weight-regular);
+}
+
+.bs-list-item__trailing {
+  display: none;
+  flex-shrink: 0;
+  align-items: center;
+  height: 32px;
+}
+.bs-list-item__trailing--shown {
+  display: flex;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .bs-list-item {
+    transition: none;
+  }
+}