@brandsync/wc 1.17.0 → 1.19.0

package/dist/collection/collection-manifest.json

@@ -1,6 +1,8 @@
 {
   "entries": [
     "components/bs-accordion/bs-accordion.js",
+    "components/bs-app-switcher/bs-app-switcher.js",
+    "components/bs-app-tile/bs-app-tile.js",
     "components/bs-attachment/bs-attachment.js",
     "components/bs-avatar/bs-avatar.js",
     "components/bs-badge/bs-badge.js",
@@ -14,6 +16,7 @@
     "components/bs-chip/bs-chip-informative/bs-chip-informative.js",
     "components/bs-chip/bs-chip-input/bs-chip-input.js",
     "components/bs-command-palette/bs-command-palette.js",
+    "components/bs-company-switcher/bs-company-switcher.js",
     "components/bs-composer/bs-composer.js",
     "components/bs-composer-status-banner/bs-composer-status-banner.js",
     "components/bs-container/bs-container.js",
@@ -31,10 +34,12 @@
     "components/bs-button/bs-icon-button/bs-icon-button.js",
     "components/bs-keyboard-shortcuts/bs-keyboard-shortcuts.js",
     "components/bs-logo/bs-logo.js",
+    "components/bs-mega-menu/bs-mega-menu.js",
     "components/bs-message/bs-message.js",
     "components/ui-shell/bs-navigation-header/bs-navigation-header/bs-navigation-header.js",
     "components/bs-onboarding-checklist/bs-onboarding-checklist.js",
     "components/bs-popover/bs-popover.js",
+    "components/bs-presence/bs-presence.js",
     "components/bs-product-tour/bs-product-tour.js",
     "components/bs-progress/bs-progress.js",
     "components/bs-progress-linear/bs-progress-linear.js",
@@ -60,6 +65,7 @@
     "components/bs-ai-disclaimer/bs-ai-disclaimer.js",
     "components/bs-ai-greeting/bs-ai-greeting.js",
     "components/bs-ai-thinking/bs-ai-thinking.js",
+    "components/bs-app-recent-item/bs-app-recent-item.js",
     "components/bs-app-shell/bs-app-shell.js",
     "components/bs-attachment-list/bs-attachment-list.js",
     "components/bs-breadcrumb/bs-breadcrumbs/bs-breadcrumbs.js",
@@ -71,6 +77,7 @@
     "components/bs-chatbot-suggestion-button/bs-chatbot-suggestion-button.js",
     "components/bs-checkbox/bs-checkbox-skeleton/bs-checkbox-skeleton.js",
     "components/bs-citation-preview/bs-citation-preview.js",
+    "components/bs-compact-menu-block/bs-compact-menu-block.js",
     "components/bs-empty-state/bs-empty-state.js",
     "components/bs-input/bs-input.js",
     "components/bs-key/bs-key.js",
@@ -78,10 +85,13 @@
     "components/bs-list/bs-list.js",
     "components/bs-list-item/bs-list-item.js",
     "components/bs-menu/bs-menu.js",
+    "components/bs-menu-block/bs-menu-block.js",
     "components/bs-menu-item/bs-menu-item.js",
     "components/bs-message-list/bs-message-list.js",
+    "components/bs-page-header/bs-page-header.js",
     "components/bs-pagination/bs-pagination.js",
     "components/bs-radio/bs-radio.js",
+    "components/bs-ripple/bs-ripple.js",
     "components/bs-search-item/bs-search-item.js",
     "components/bs-shortcut-row/bs-shortcut-row.js",
     "components/bs-source-link/bs-source-link.js",

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

@@ -1,5 +1,5 @@
 import { render, h, describe, it, expect } from "@stencil/vitest";
-import { runAxeCheck } from "../../test/helpers/conventions";
+import { assertCssCustomProperties, runAxeCheck } from "../../test/helpers/conventions";
 describe('bs-accordion', () => {
     it('has no axe-core accessibility violations', async () => {
         const { root } = await render(h("bs-accordion", null, h("span", { slot: "label" }, "Title"), "Body content"));
@@ -18,15 +18,30 @@ describe('bs-accordion', () => {
         });
     });
     describe('caret direction', () => {
-        it('shows CaretDown when collapsed', async () => {
+        it('is not rotated when collapsed', async () => {
             const { root } = await render(h("bs-accordion", null, "Body"));
-            const caret = root.shadowRoot.querySelector('[part="caret"]');
-            expect(caret.innerHTML).toContain('9.75L12 15.75');
+            expect(root.shadowRoot.querySelector('[part="caret"]')).not.toHaveClass('bs-accordion__caret--open');
         });
-        it('shows CaretUp when expanded', async () => {
+        it('rotates (open class) when expanded, and uses a single glyph', async () => {
             const { root } = await render(h("bs-accordion", { expanded: true }, "Body"));
             const caret = root.shadowRoot.querySelector('[part="caret"]');
-            expect(caret.innerHTML).toContain('14.25L12 8.25');
+            expect(caret).toHaveClass('bs-accordion__caret--open');
+            expect(caret.querySelectorAll('svg').length).toBe(1);
+        });
+    });
+    describe('motion', () => {
+        it('keeps the body mounted while collapsing without a preview, then removes it', async () => {
+            const { root, waitForChanges } = await render(h("bs-accordion", { expanded: true, showPreview: false }, "Body content"));
+            root.expanded = false;
+            await waitForChanges();
+            expect(root.shadowRoot.querySelector('[part="content"]')).not.toBeNull();
+            await new Promise(resolve => setTimeout(resolve, 600));
+            await waitForChanges();
+            expect(root.shadowRoot.querySelector('[part="content"]')).toBeNull();
+        });
+        it('exposes its duration and easing custom properties', async () => {
+            const { root } = await render(h("bs-accordion", null, "Body"));
+            assertCssCustomProperties(root, ['--bs-accordion-duration', '--bs-accordion-easing']);
         });
     });
     describe('controlled expanded prop', () => {

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

@@ -18,6 +18,8 @@
  * @prop --bs-accordion-bg-disabled: Header/content background, disabled. Aliased to --bs-surface-action-disabled.
  * @prop --bs-accordion-text-disabled: Label/content color, disabled. Aliased to --bs-text-on-disabled.
  * @prop --bs-accordion-focus-ring: Focus-visible outer ring color. Aliased to --bs-border-neutral-focus.
+ * @prop --bs-accordion-duration: Expand/collapse and caret rotation length. Aliased to --bs-duration-default.
+ * @prop --bs-accordion-easing: Expand/collapse and caret rotation curve. Aliased to --bs-easing-standard.
  */
 :host {
   display: block;
@@ -41,6 +43,8 @@
   --bs-accordion-bg-disabled: var(--bs-surface-action-disabled);
   --bs-accordion-text-disabled: var(--bs-text-on-disabled);
   --bs-accordion-focus-ring: var(--bs-border-neutral-focus);
+  --bs-accordion-duration: var(--bs-duration-default);
+  --bs-accordion-easing: var(--bs-easing-standard);
 }
 
 .bs-accordion {
@@ -48,6 +52,7 @@
   border-radius: var(--bs-accordion-radius);
   overflow: hidden;
   font-family: inherit;
+  transition: background-color var(--bs-accordion-duration) var(--bs-accordion-easing);
 }
 
 /* Hover/pressed/focus-visible highlight the WHOLE item (header + content together), not just the
@@ -163,6 +168,14 @@
   color: inherit;
 }
 
+.bs-accordion__caret {
+  transition: transform var(--bs-accordion-duration) var(--bs-accordion-easing);
+}
+
+.bs-accordion__caret--open {
+  transform: rotate(180deg);
+}
+
 .bs-accordion__caret svg {
   width: 24px;
   height: 24px;
@@ -179,6 +192,8 @@
 }
 
 .bs-accordion__content {
+  /* border-box so the animated height includes the padding, matching what getBoundingClientRect reads. */
+  box-sizing: border-box;
   padding-top: 0;
   padding-bottom: var(--bs-accordion-content-padding-bottom);
   padding-inline-end: var(--bs-accordion-content-padding-right);

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

@@ -19,8 +19,14 @@ import { h } from "@stencil/core";
  * @part label - The label wrapper.
  * @part caret - The trailing caret wrapper.
  * @part content - The body content wrapper.
+ * @prop --bs-accordion-duration - Length of the expand/collapse motion. Aliased to `--bs-duration-default`.
+ * @prop --bs-accordion-easing - Curve of the expand/collapse motion. Aliased to `--bs-easing-standard`.
+ *
+ * Expanding and collapsing animate the body's height and rotate the caret. Under
+ * `prefers-reduced-motion: reduce` the duration token is `0ms`, so the body snaps.
  */
 export class BsAccordion {
+    el;
     /** Whether the section is expanded. This is the single source of truth for the component's
      * visual state -- a controlled component, like a controlled `<input>`. Clicking (or
      * keyboard-activating) the header never mutates this prop itself; it only emits `bsToggle` with
@@ -45,6 +51,58 @@ export class BsAccordion {
     /** Emitted when the header is activated (click, or Enter/Space while focused), with the
      * REQUESTED new expanded value (`!expanded`). Never fires while `disabled`. */
     bsToggle;
+    /** Keeps the body mounted while it animates closed when `showPreview` is `false`. */
+    closing = false;
+    contentEl;
+    animation;
+    fromHeight = 0;
+    fromPadding = '0px';
+    pendingAnimation = false;
+    /**
+     * Runs before the re-render that follows an `expanded` change, so the body's current height can
+     * be read while it is still in its old state. `componentDidRender` then animates from that height
+     * to the new one. Reading the live height (not a stored one) also makes interrupting a running
+     * animation start from wherever it currently is.
+     */
+    onExpandedChange(expanded) {
+        const content = this.contentEl;
+        this.fromHeight = content ? content.getBoundingClientRect().height : 0;
+        this.fromPadding = content ? getComputedStyle(content).paddingBottom : '0px';
+        this.animation?.cancel();
+        this.pendingAnimation = true;
+        if (!expanded && !this.showPreview)
+            this.closing = true;
+    }
+    componentDidRender() {
+        if (!this.pendingAnimation)
+            return;
+        this.pendingAnimation = false;
+        const content = this.contentEl;
+        const style = getComputedStyle(this.el);
+        const ms = this.toMs(style.getPropertyValue('--bs-accordion-duration'));
+        if (!content || ms === 0) {
+            this.closing = false;
+            return;
+        }
+        const toZero = !this.expanded && !this.showPreview;
+        const toHeight = toZero ? 0 : content.getBoundingClientRect().height;
+        const toPadding = toZero ? '0px' : getComputedStyle(content).paddingBottom;
+        this.animation = content.animate([
+            { height: `${this.fromHeight}px`, paddingBottom: this.fromPadding, overflow: 'hidden' },
+            { height: `${toHeight}px`, paddingBottom: toPadding, overflow: 'hidden' },
+        ], { duration: ms, easing: style.getPropertyValue('--bs-accordion-easing').trim() || 'ease' });
+        this.animation.onfinish = () => {
+            this.closing = false;
+        };
+    }
+    toMs(value) {
+        const v = value.trim();
+        if (v.endsWith('ms'))
+            return parseFloat(v);
+        if (v.endsWith('s'))
+            return parseFloat(v) * 1000;
+        return 0;
+    }
     onActivate = () => {
         if (this.disabled)
             return;
@@ -55,7 +113,7 @@ export class BsAccordion {
         // `<div role="button">`: it gets click, keyboard activation (Enter/Space), focus-visible
         // styling, and `disabled` semantics (not focusable, no events) for free, and flexbox handles
         // laying out its children as easily as a <div>'s -- no layout reason to hand-roll any of that.
-        return (h("div", { key: '2774538f3bc8d52e5a295edafbdad5e2a12dddda', part: "container", class: `bs-accordion bs-accordion--${this.size} ${this.disabled ? 'bs-accordion--disabled' : ''}` }, h("button", { key: '7e1942dca9082ac653dd7e3d55d9b919790bcd5b', type: "button", part: "header", class: `bs-accordion__header bs-accordion__header--${this.size} ${this.showIcon ? '' : 'bs-accordion__header--no-icon'}`, disabled: this.disabled, "aria-expanded": String(this.expanded), onClick: this.onActivate }, this.showIcon && (h("span", { key: 'abd274cb295ae34e9220846a1e8466623f65663a', part: "icon", class: `bs-accordion__icon bs-accordion__icon--${this.size}`, "aria-hidden": "true" }, h("slot", { key: 'd9c4c429852c77f4a10c05eb247a9d3d35559ef6', name: "icon" }, h(PlusIcon, { key: '2fb492c43754a517e4e98b684f811be21777e849' })))), h("span", { key: 'a02484f1a47148493fbc193bc4b9daa8e4c634e7', part: "label", class: `bs-accordion__label ${this.showIcon ? '' : 'bs-accordion__label--no-icon'}` }, h("slot", { key: '8241ccee7233e85c2d69c225c07e67b982674ef7', name: "label" })), h("span", { key: '6e36ee8dbd22ca924f9d8ea8b5c3017c5478f058', part: "caret", class: `bs-accordion__caret bs-accordion__caret--${this.size}`, "aria-hidden": "true" }, this.expanded ? h(CaretUpIcon, null) : h(CaretDownIcon, null))), (this.expanded || this.showPreview) && (h("div", { key: '1e3ad6fe654c633a4094ea9014ef79d82feae2db', part: "content", class: `bs-accordion__content ${this.showIcon ? '' : 'bs-accordion__content--no-icon'} ${this.expanded ? 'bs-accordion__content--expanded' : 'bs-accordion__content--collapsed'}` }, h("slot", { key: '6a60fd12ed4ec7e3b4ab0e56414e0a90c4f5d889' })))));
+        return (h("div", { key: 'b7645b3be5116d906a2aa6e4e680859a9c19323f', part: "container", class: `bs-accordion bs-accordion--${this.size} ${this.disabled ? 'bs-accordion--disabled' : ''}` }, h("button", { key: 'a1c824c54a529b2214dbb47cb93adea5cdadee84', type: "button", part: "header", class: `bs-accordion__header bs-accordion__header--${this.size} ${this.showIcon ? '' : 'bs-accordion__header--no-icon'}`, disabled: this.disabled, "aria-expanded": String(this.expanded), onClick: this.onActivate }, this.showIcon && (h("span", { key: '5d35f4e2c05704a6bef532919301e765f8195aa7', part: "icon", class: `bs-accordion__icon bs-accordion__icon--${this.size}`, "aria-hidden": "true" }, h("slot", { key: '137280692f375379ef43be918094192d6030e2ad', name: "icon" }, h(PlusIcon, { key: '8826de2813774382dcf21e856288ff936eb12425' })))), h("span", { key: '57f370d082a86b7488bf309a114b82077d1f6711', part: "label", class: `bs-accordion__label ${this.showIcon ? '' : 'bs-accordion__label--no-icon'}` }, h("slot", { key: '5563063582ee2e1fb79d02acdc3d0feb5ac07eec', name: "label" })), h("span", { key: '8d8afd4433823aa8122b2ed167fd5ed3c32dc21a', part: "caret", class: `bs-accordion__caret bs-accordion__caret--${this.size} ${this.expanded ? 'bs-accordion__caret--open' : ''}`, "aria-hidden": "true" }, h(CaretDownIcon, { key: '51dfcbdfa5ccff5c3e6a6c2f983fc4d7fb460c18' }))), (this.expanded || this.showPreview || this.closing) && (h("div", { key: '8d62decaf3dc7a98f91eaea1723fc26a8fc520a4', ref: el => (this.contentEl = el), part: "content", class: `bs-accordion__content ${this.showIcon ? '' : 'bs-accordion__content--no-icon'} ${this.expanded ? 'bs-accordion__content--expanded' : 'bs-accordion__content--collapsed'}` }, h("slot", { key: '56493eb5b425134b38ac60f481219a823379626e' })))));
     }
     static get is() { return "bs-accordion"; }
     static get encapsulation() { return "shadow"; }
@@ -179,6 +237,11 @@ export class BsAccordion {
             }
         };
     }
+    static get states() {
+        return {
+            "closing": {}
+        };
+    }
     static get events() {
         return [{
                 "method": "bsToggle",
@@ -197,7 +260,13 @@ export class BsAccordion {
                 }
             }];
     }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "expanded",
+                "methodName": "onExpandedChange"
+            }];
+    }
 }
 const PlusIcon = () => (h("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, h("path", { d: "M12 5V19", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { d: "M5 12H19", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })));
 const CaretDownIcon = () => (h("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, h("path", { d: "M6 9.75L12 15.75L18 9.75", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })));
-const CaretUpIcon = () => (h("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, h("path", { d: "M6 14.25L12 8.25L18 14.25", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })));

package/dist/collection/components/bs-accordion-group/bs-accordion-group.js

@@ -35,7 +35,7 @@ export class BsAccordionGroup {
         }
     }
     render() {
-        return (h("div", { key: '3769ed85a4f16a684c02f00813fa53d340993763', part: "group", class: "bs-accordion-group" }, h("slot", { key: '7744f70f87f9e36d949d374f8891028fb1ee08b2' })));
+        return (h("div", { key: 'f3c43bbdb41aacc19356b37b736dbbe92dbee8c9', part: "group", class: "bs-accordion-group" }, h("slot", { key: '5ad2f89cd263163bd153473e0bae103655426588' })));
     }
     static get is() { return "bs-accordion-group"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-ai-disclaimer/bs-ai-disclaimer.js

@@ -25,7 +25,7 @@ import { h } from "@stencil/core";
 export class BsAiDisclaimer {
     render() {
         https: //images.unsplash.com/photo-1512917774080-9991f1c4c750?w=200&h=200&fit=crop
-         return (h("div", { key: '3c30f834cdeb8f1d88cc1e09ca7b37448cd78c68', class: "bs-ai-disclaimer" }, h("p", { key: '013748c40473c12d408d0c6a8abf8dfa04e6e2a8', part: "text", class: "bs-ai-disclaimer__text" }, h("slot", { key: '9ac815b71c84206ba5a5387dc502565c8773d742' }))));
+         return (h("div", { key: 'c60fa36f1340f01982c9084dcc24d875df50d33f', class: "bs-ai-disclaimer" }, h("p", { key: '19d76fe258f68e2e0e2a0f7f22a6775c7522cef0', part: "text", class: "bs-ai-disclaimer__text" }, h("slot", { key: '66861e47f7da39e0b1e162d327dedf0d57fcaf2f' }))));
     }
     static get is() { return "bs-ai-disclaimer"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-ai-greeting/bs-ai-greeting.js

@@ -43,7 +43,7 @@ export class BsAiGreeting {
         const subtext = this.productName
             ? `How can I help you with ${this.productName} today?`
             : 'How can I help you today?';
-        return (h("div", { key: '20b39c35e9f4d552fa3e30dbfa86ba53bff48c89', class: "bs-ai-greeting" }, h("div", { key: 'bb6d790ccb6595fc646c2a5cc6dedd358cfb75d0', part: "heading", class: "bs-ai-greeting__heading" }, h("p", { key: '86eba00635450b5eb13311cbe354059ef4b572b8', class: "bs-ai-greeting__heading-line" }, "Hi. I'm ", this.assistantName, ","), h("p", { key: '4e66b440952f29946465ca899d2dfcea08c0f170', class: "bs-ai-greeting__heading-line" }, "your AI assistant.")), h("p", { key: '01eea96ec6e8d5f8196ac493b60cbc1423a1afaf', part: "subtext", class: "bs-ai-greeting__subtext" }, subtext)));
+        return (h("div", { key: '1044390f82275f2ece3242201178e5fbe3dd0f83', class: "bs-ai-greeting" }, h("div", { key: '338a57a7ed4aae16d0210ad322b3dd14e4ae3c45', part: "heading", class: "bs-ai-greeting__heading" }, h("p", { key: '9aec512708b3ec838992af2e84911331e600def7', class: "bs-ai-greeting__heading-line" }, "Hi. I'm ", this.assistantName, ","), h("p", { key: 'ab23bbb5b65532320cad671818202fc8acebba46', class: "bs-ai-greeting__heading-line" }, "your AI assistant.")), h("p", { key: '1d4b83012beb32bedcf48de15461179e8bd7eca8', part: "subtext", class: "bs-ai-greeting__subtext" }, subtext)));
     }
     static get is() { return "bs-ai-greeting"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-ai-thinking/bs-ai-thinking.js

@@ -29,7 +29,7 @@ export class BsAiThinking {
     /** The status text shown next to the icon, e.g. "Retrieving", "Thinking", "Searching". */
     label = 'Thinking';
     render() {
-        return (h("div", { key: '7877c365ded09531d50c42b2e5dda84cd058a173', class: "bs-ai-thinking", role: "status", "aria-live": "polite" }, h("img", { key: 'fbacfc324a798da29d2ab4c6ecd8f042745cee19', part: "icon", class: "bs-ai-thinking__icon", src: GENIE_MARK_ICON, alt: "", "aria-hidden": "true" }), h("span", { key: '5d7befe1e0cacd3b08d8d529da86d98ef80d207d', part: "label", class: "bs-ai-thinking__label" }, this.label)));
+        return (h("div", { key: '86329576f183a586c2cedfcfe6d5ddb76d37ed25', class: "bs-ai-thinking", role: "status", "aria-live": "polite" }, h("img", { key: '5d56adc7f23efb232569765b3cf3529859bd4035', part: "icon", class: "bs-ai-thinking__icon", src: GENIE_MARK_ICON, alt: "", "aria-hidden": "true" }), h("span", { key: 'abd1bb6e0adf31a1ddc74bbbf08d3f0128aa0ae4', part: "label", class: "bs-ai-thinking__label" }, this.label)));
     }
     static get is() { return "bs-ai-thinking"; }
     static get encapsulation() { return "shadow"; }

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

@@ -0,0 +1,52 @@
+import { render, h, describe, it, expect } from "@stencil/vitest";
+import axe from "axe-core";
+import { assertShadowParts, assertCssCustomProperties } from "../../test/helpers/conventions";
+import { ICONS } from "../bs-app-switcher/bs-app-switcher.stories";
+const q = (el, s) => el.shadowRoot.querySelector(s);
+const make = async (props = {}) => {
+    const r = await render(h("div", { style: { width: '328px' } }, h("bs-app-recent-item", { name: "Accounting" })));
+    const el = r.root.querySelector('bs-app-recent-item');
+    Object.assign(el, { icon: ICONS.accounting, description: 'Opened 10 min ago · Nordlys Handel AS', ...props });
+    await r.waitForChanges();
+    return { ...r, el };
+};
+describe('bs-app-recent-item', () => {
+    it('renders a 52px row with a 32px icon tile, name and description', async () => {
+        const { el } = await make();
+        expect(Math.round(q(el, '[part="container"]').getBoundingClientRect().height)).toBe(52);
+        expect(Math.round(q(el, 'bs-icon-tile').getBoundingClientRect().width)).toBe(32);
+        expect(q(el, '[part="name"]').textContent).toBe('Accounting');
+        expect(q(el, '[part="description"]').textContent).toBe('Opened 10 min ago · Nordlys Handel AS');
+        assertShadowParts(el.shadowRoot, ['container', 'icon', 'name', 'description']);
+        assertCssCustomProperties(el, ['--bs-app-recent-item-bg-hover', '--bs-app-recent-item-bg-current', '--bs-app-recent-item-focus-ring']);
+    });
+    it('is always a button', async () => {
+        const { el } = await make();
+        expect(q(el, '[part="container"]').tagName).toBe('BUTTON');
+    });
+    it('omits the description line when there is none', async () => {
+        const { el } = await make({ description: undefined });
+        expect(q(el, '[part="description"]')).toBeNull();
+    });
+    it('marks current and disables like the tile', async () => {
+        const { el, waitForChanges } = await make({ current: true });
+        expect(q(el, '[part="container"]').getAttribute('aria-current')).toBe('true');
+        el.current = false;
+        el.disabled = true;
+        await waitForChanges();
+        const c = q(el, '[part="container"]');
+        expect(c.getAttribute('aria-disabled')).toBe('true');
+        expect(c.tabIndex).toBe(-1);
+        let clicks = 0;
+        el.addEventListener('click', () => clicks++);
+        c.click();
+        expect(clicks).toBe(0);
+    });
+    it('has no axe violations in any state', async () => {
+        for (const props of [{}, { current: true }, { disabled: true }]) {
+            const { el } = await make(props);
+            const results = await axe.run(el);
+            expect(results.violations.map(v => `${JSON.stringify(props)} ${v.id}: ${v.help}`)).toEqual([]);
+        }
+    });
+});

package/dist/collection/components/bs-app-recent-item/bs-app-recent-item.css

@@ -0,0 +1,111 @@
+:host {
+  display: block;
+  box-sizing: border-box;
+  --bs-app-recent-item-padding-x: var(--bs-spacing-100);
+  --bs-app-recent-item-padding-y: var(--bs-spacing-100);
+  --bs-app-recent-item-gap: var(--bs-spacing-150);
+  --bs-app-recent-item-radius: var(--bs-border-radius-100);
+  --bs-app-recent-item-bg: transparent;
+  --bs-app-recent-item-bg-hover: var(--bs-surface-hover);
+  --bs-app-recent-item-bg-pressed: var(--bs-surface-pressed);
+  --bs-app-recent-item-bg-current: var(--bs-surface-selected);
+  --bs-app-recent-item-icon-bg: var(--bs-color-neutral-container);
+  --bs-app-recent-item-color: var(--bs-text-default);
+  --bs-app-recent-item-color-muted: var(--bs-text-secondary);
+  --bs-app-recent-item-color-disabled: var(--bs-text-on-disabled);
+  --bs-app-recent-item-focus-ring: var(--bs-border-neutral-focus);
+}
+
+.bs-app-recent-item {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  gap: var(--bs-app-recent-item-gap);
+  width: 100%;
+  margin: 0;
+  padding: var(--bs-app-recent-item-padding-y) var(--bs-app-recent-item-padding-x);
+  border: 0;
+  border-radius: var(--bs-app-recent-item-radius);
+  background: var(--bs-app-recent-item-bg);
+  color: var(--bs-app-recent-item-color);
+  font-family: var(--bs-typography-font-family-body, Roboto), sans-serif;
+  text-align: left;
+  cursor: pointer;
+}
+
+.bs-app-recent-item:hover,
+.bs-app-recent-item:active,
+.bs-app-recent-item[aria-current='true'] {
+  --bs-app-recent-item-icon-bg: var(--bs-surface-base);
+}
+
+.bs-app-recent-item[aria-current='true'] {
+  background: var(--bs-app-recent-item-bg-current);
+}
+
+.bs-app-recent-item:hover {
+  background: var(--bs-app-recent-item-bg-hover);
+}
+
+.bs-app-recent-item:active {
+  background: var(--bs-app-recent-item-bg-pressed);
+}
+
+.bs-app-recent-item:focus-visible {
+  outline: var(--bs-spacing-25) solid var(--bs-app-recent-item-focus-ring);
+  outline-offset: 0;
+}
+
+.bs-app-recent-item[aria-disabled='true'] {
+  background: var(--bs-app-recent-item-bg);
+  color: var(--bs-app-recent-item-color-disabled);
+  cursor: not-allowed;
+}
+
+.bs-app-recent-item[aria-disabled='true'] .bs-app-recent-item__description {
+  color: var(--bs-app-recent-item-color-disabled);
+}
+
+.bs-app-recent-item__icon {
+  --bs-icon-tile-bg: var(--bs-app-recent-item-icon-bg);
+  --bs-icon-tile-color: var(--bs-icon-default);
+}
+
+.bs-app-recent-item[aria-disabled='true'] .bs-app-recent-item__icon {
+  --bs-icon-tile-color: var(--bs-app-recent-item-color-disabled);
+}
+
+.bs-app-recent-item__glyph {
+  display: block;
+  width: var(--bs-icon-tile-icon-size);
+  height: var(--bs-icon-tile-icon-size);
+  background: currentColor;
+  -webkit-mask: var(--bs-app-recent-item-glyph) center / contain no-repeat;
+  mask: var(--bs-app-recent-item-glyph) center / contain no-repeat;
+}
+
+.bs-app-recent-item__text {
+  flex: 1 1 0;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.bs-app-recent-item__name {
+  font-size: var(--bs-fontsize-body-sm);
+  font-weight: var(--bs-font-weight-medium);
+  line-height: calc(var(--bs-line-height-body-sm) * 1px);
+}
+
+.bs-app-recent-item__description {
+  color: var(--bs-app-recent-item-color-muted);
+  font-size: var(--bs-fontsize-caption-sm);
+  line-height: calc(var(--bs-line-height-caption-sm) * 1px);
+}
+
+.bs-app-recent-item__name,
+.bs-app-recent-item__description {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}