@brandsync/wc 1.16.0 → 1.18.0

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

@@ -0,0 +1,184 @@
+import { h } from "@stencil/core";
+/**
+ * A full-width row for one app: a small icon tile, the app name and a description line (for example
+ * "Opened 10 min ago · Nordlys Handel AS"). Matches the Figma "Recent item" component (Default, Current,
+ * Hover, Pressed and Focus).
+ *
+ * The row is always a native button and only emits events; it never navigates. `current` marks the app you are in
+ * (`aria-current="true"`); `disabled` dims it, sets `aria-disabled` and removes it from the tab order.
+ *
+ * Built from `bs-icon-tile`. The icon is either a URL of a monochrome SVG in `icon` (painted with the theme's
+ * icon colour through a CSS mask) or any element in the default slot.
+ *
+ * ## When to use
+ * - A recently opened app, or a search result with a description, inside `bs-app-switcher`.
+ *
+ * ## When not to use
+ * - An app in a launcher grid -- use `bs-app-tile`.
+ * - A generic list row -- use `bs-list-item`.
+ *
+ * @slot - The icon (16px, `currentColor`). Overrides the `icon` prop.
+ * @part container - The button.
+ * @part icon - The icon tile (`bs-icon-tile`).
+ * @part name - The app name.
+ * @part description - The description line.
+ * @prop --bs-app-recent-item-padding-x - Aliased to `--bs-spacing-100`.
+ * @prop --bs-app-recent-item-padding-y - Aliased to `--bs-spacing-100`.
+ * @prop --bs-app-recent-item-gap - Gap between icon and text. Aliased to `--bs-spacing-150`.
+ * @prop --bs-app-recent-item-radius - Aliased to `--bs-border-radius-100`.
+ * @prop --bs-app-recent-item-bg - Resting background. `transparent`.
+ * @prop --bs-app-recent-item-bg-hover - Aliased to `--bs-surface-hover`.
+ * @prop --bs-app-recent-item-bg-pressed - Aliased to `--bs-surface-pressed`.
+ * @prop --bs-app-recent-item-bg-current - Aliased to `--bs-surface-selected`.
+ * @prop --bs-app-recent-item-icon-bg - Icon square background. Aliased to `--bs-color-neutral-container`; `--bs-surface-base` while hovered, pressed or current.
+ * @prop --bs-app-recent-item-color - Name colour. Aliased to `--bs-text-default`.
+ * @prop --bs-app-recent-item-color-muted - Description colour. Aliased to `--bs-text-secondary`.
+ * @prop --bs-app-recent-item-color-disabled - Name, description and icon colour when disabled. Aliased to `--bs-text-on-disabled`.
+ * @prop --bs-app-recent-item-focus-ring - Focus ring colour. Aliased to `--bs-border-neutral-focus`.
+ */
+export class BsAppRecentItem {
+    /** The app name, and the accessible name of the row together with the description. */
+    name;
+    /** Second line under the name. */
+    description;
+    /** URL of a monochrome SVG painted with the icon colour. The default slot overrides it. */
+    icon;
+    /** The app you are in right now: selected background and `aria-current="true"`. */
+    current = false;
+    /** Dims the row, sets `aria-disabled` and takes it out of the tab order. */
+    disabled = false;
+    onClick = (ev) => {
+        if (this.disabled) {
+            ev.preventDefault();
+            ev.stopPropagation();
+        }
+    };
+    render() {
+        const common = {
+            part: 'container',
+            class: 'bs-app-recent-item',
+            'aria-current': this.current ? 'true' : undefined,
+            'aria-disabled': this.disabled ? 'true' : undefined,
+            tabindex: this.disabled ? -1 : undefined,
+            onClick: this.onClick,
+        };
+        const body = [
+            h("bs-icon-tile", { key: '40dc2e9a479cc0e8bf897776efbb6c9562e59397', part: "icon", class: "bs-app-recent-item__icon", size: "md" }, this.icon ? h("span", { class: "bs-app-recent-item__glyph", style: { '--bs-app-recent-item-glyph': `url(${JSON.stringify(this.icon)})` } }) : h("slot", null)),
+            h("span", { key: 'e41fab5b55dd1c678853adbdc759d256d2d7e295', class: "bs-app-recent-item__text" }, h("span", { key: '0592bd9f18ab68d112a49421e34a04a61dbfc75c', part: "name", class: "bs-app-recent-item__name" }, this.name), this.description && (h("span", { key: 'fd6f0cc5b13b4c1fabb537588a22e23312f8d013', part: "description", class: "bs-app-recent-item__description" }, this.description))),
+        ];
+        return (h("button", { key: '251c32943d99ff2580c16df173609b821dd1992d', ...common, type: "button" }, body));
+    }
+    static get is() { return "bs-app-recent-item"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bs-app-recent-item.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bs-app-recent-item.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The app name, and the accessible name of the row together with the description."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name"
+            },
+            "description": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Second line under the name."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "description"
+            },
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "URL of a monochrome SVG painted with the icon colour. The default slot overrides it."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon"
+            },
+            "current": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The app you are in right now: selected background and `aria-current=\"true\"`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "current",
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Dims the row, sets `aria-disabled` and takes it out of the tab order."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            }
+        };
+    }
+}

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

@@ -0,0 +1,28 @@
+import { html } from "lit";
+import { componentDescription } from "../../stories-utils";
+import { ICONS } from "../bs-app-switcher/bs-app-switcher.stories";
+const meta = {
+    title: 'Components/bs-app-recent-item',
+    parameters: { layout: 'padded', docs: { description: { component: componentDescription('bs-app-recent-item') } } },
+    argTypes: { name: { control: 'text' }, description: { control: 'text' }, current: { control: 'boolean' }, disabled: { control: 'boolean' } },
+    args: { name: 'Accounting', description: 'Opened 10 min ago · Nordlys Handel AS', current: false, disabled: false },
+    render: args => html `
+    <div style="width: 328px">
+      <bs-app-recent-item .icon=${ICONS.accounting} name=${args.name} description=${args.description} ?current=${args.current} ?disabled=${args.disabled}></bs-app-recent-item>
+    </div>
+  `,
+};
+export default meta;
+export const Default = {};
+/** Default, Current and Disabled. Hover, pressed and focus come from the native element: point, press or Tab to see them. */
+export const States = {
+    render: () => html `
+    <div style="display:flex;flex-direction:column;gap:8px;width:328px">
+      <bs-app-recent-item .icon=${ICONS.accounting} name="Default" description="Opened 10 min ago · Nordlys Handel AS"></bs-app-recent-item>
+      <bs-app-recent-item .icon=${ICONS.accounting} name="Current" description="Opened 10 min ago · Nordlys Handel AS" current></bs-app-recent-item>
+      <bs-app-recent-item .icon=${ICONS.accounting} name="Disabled" description="Opened 10 min ago · Nordlys Handel AS" disabled></bs-app-recent-item>
+    </div>
+  `,
+};
+export const Current = { args: { current: true } };
+export const Disabled = { args: { disabled: true } };

package/dist/collection/components/bs-app-shell/bs-app-shell.js

@@ -38,7 +38,7 @@ export class BsAppShell {
     /** When true the host is `height: 100%`; when false it is content-sized with `min-height: 100vh`. */
     fullHeight = true;
     render() {
-        return (h("div", { key: '4ae586c70cc00e4eb8d498176c2e1a0ae442ce08', class: "bs-app-shell", part: "container" }, h("div", { key: '63976f08557ba9bcffa6502aa9d84c0369b8794c', class: "bs-app-shell__header", part: "header" }, h("slot", { key: '20582e1a41e6135ea8723f6b70fd992c82bff546', name: "header" })), h("div", { key: '394e505bf3e223f1898f200366a990165f57cbd2', class: "bs-app-shell__navigation", part: "navigation" }, h("slot", { key: '03d93ce4aff4606cf07e0279923ac55ee4572a30', name: "navigation" })), h("main", { key: 'b86613dccbb96fe6dffd0cc98969b9d6bfe75229', class: "bs-app-shell__main", part: "main" }, h("slot", { key: '90c2ec9781341722978c416a1e835cc0d8045a49' })), h("div", { key: 'dc94b2704168de28ea7fa686a58a18d0408e491b', class: "bs-app-shell__aside", part: "aside" }, h("slot", { key: 'fc5e9a0646144edd2461c2b49f5256e9b5937df5', name: "aside" }))));
+        return (h("div", { key: 'e81aecf9ac19aff77ce4f6024bb48d051a9240a7', class: "bs-app-shell", part: "container" }, h("div", { key: '3bd113852f0db029d2515d9fe88292746e85764f', class: "bs-app-shell__header", part: "header" }, h("slot", { key: 'a538e654c63deb0bc3ad6075fc85ecde683e7587', name: "header" })), h("div", { key: '3b36be978c2db51d44fa807799e96aadc082fb77', class: "bs-app-shell__navigation", part: "navigation" }, h("slot", { key: 'eb74b091c1810fd6f981b3d1b553a17f01d9d3fc', name: "navigation" })), h("main", { key: 'f822e4277e77ec40d66e9ae49cf4bbf812c49ff3', class: "bs-app-shell__main", part: "main" }, h("slot", { key: '5fc343fcbfb1ed1e058ce27ca7be2d518b911927' })), h("div", { key: 'cee504b33b4cb5b4c38d3c4e61da8f31277fb865', class: "bs-app-shell__aside", part: "aside" }, h("slot", { key: '1c7cb896f2b9ef2b7aeccc5ed0b14c9c1317218c', name: "aside" }))));
     }
     static get is() { return "bs-app-shell"; }
     static get encapsulation() { return "shadow"; }

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

@@ -0,0 +1,179 @@
+import { render, h, describe, it, expect } from "@stencil/vitest";
+import axe from "axe-core";
+import { assertShadowParts, assertCssCustomProperties } from "../../test/helpers/conventions";
+import { APPS, RECENT } from "./bs-app-switcher.stories";
+const q = (el, s) => el.shadowRoot.querySelector(s);
+const qa = (el, s) => Array.from(el.shadowRoot.querySelectorAll(s));
+const settle = (ms = 60) => new Promise(r => setTimeout(r, ms));
+const make = async (props = {}) => {
+    const r = await render(h("div", { style: { width: '420px' } }, h("bs-app-switcher", null)));
+    const el = r.root.querySelector('bs-app-switcher');
+    Object.assign(el, { apps: APPS, ...props });
+    await r.waitForChanges();
+    await settle();
+    const type = async (query) => {
+        q(el, 'bs-input').dispatchEvent(new CustomEvent('bsInput', { detail: query }));
+        await r.waitForChanges();
+    };
+    return { ...r, el, type };
+};
+const headers = (el) => qa(el, '[part="group-header"]').map(h => h.textContent);
+const events = (el, ...names) => {
+    const got = [];
+    for (const n of names)
+        el.addEventListener(n, e => got.push([n, e.detail]));
+    return got;
+};
+describe('bs-app-switcher', () => {
+    it('renders a 360px panel with heading, Manage, search, a 3-column grid and the footer link', async () => {
+        const { el } = await make();
+        expect(Math.round(q(el, '[part="panel"]').getBoundingClientRect().width)).toBe(360);
+        expect(q(el, '[part="heading"]').textContent).toBe('EG apps');
+        expect(q(el, '[part="manage"]').textContent).toBe('Manage');
+        expect(headers(el)).toEqual(['Your apps']);
+        expect(qa(el, '[part="tile"]').length).toBe(9);
+        const tops = new Set(qa(el, '[part="tile"]').slice(0, 3).map(t => Math.round(t.getBoundingClientRect().top)));
+        expect(tops.size).toBe(1);
+        expect(Math.round(qa(el, '[part="tile"]')[0].getBoundingClientRect().height)).toBe(100);
+        expect(q(el, '[part="browse"]').textContent).toContain('Browse all EG products');
+        assertShadowParts(el.shadowRoot, ['panel', 'header', 'heading', 'manage', 'search', 'group', 'group-header', 'grid', 'tile', 'footer', 'browse']);
+        assertCssCustomProperties(el, ['--bs-app-switcher-width', '--bs-app-switcher-radius', '--bs-app-switcher-shadow']);
+    });
+    it('shows Recent rows and All apps compact tiles when there are recent apps, and marks the current app', async () => {
+        const { el } = await make({ recent: RECENT, currentId: 'accounting' });
+        expect(headers(el)).toEqual(['Recent', 'All apps']);
+        const rows = qa(el, '[part="row"]');
+        expect(rows.length).toBe(3);
+        expect(rows[0].description).toBe('Opened 10 min ago · Nordlys Handel AS');
+        expect(Math.round(rows[0].getBoundingClientRect().height)).toBe(52);
+        const tiles = qa(el, '[part="tile"]');
+        expect(tiles.length).toBe(9);
+        expect(tiles[0].size).toBe('compact');
+        expect(tiles[0].current).toBe(true);
+        expect(tiles[1].current).toBe(false);
+    });
+    it('filters by name or description with a result count, and announces it', async () => {
+        const { el, type } = await make({ recent: RECENT });
+        await type('pay');
+        expect(headers(el)).toEqual(['2 results']);
+        expect(qa(el, '[part="row"]').map(r => r.name)).toEqual(['Payroll', 'Bank']);
+        expect(qa(el, '[part="row"]')[0].description).toBe('Salaries, payslips and holiday pay');
+        expect(el.query).toBe('pay');
+        expect(q(el, '[role="status"]').textContent).toBe('2 results');
+        await type('stock');
+        expect(headers(el)).toEqual(['1 result']);
+    });
+    it('shows the no-results state with the query, and Clear search restores the groups', async () => {
+        const { el, type, waitForChanges } = await make();
+        const got = events(el, 'bsClearSearch', 'bsQueryChange');
+        await type('lønn');
+        const empty = q(el, '[part="empty"]');
+        expect(empty.heading).toBe('No apps match “lønn”');
+        expect(q(el, '[role="status"]').textContent).toBe('No apps match “lønn”');
+        empty.querySelector('bs-button').click();
+        await waitForChanges();
+        expect(el.query).toBe('');
+        expect(got.map(g => g[0])).toEqual(['bsQueryChange', 'bsQueryChange', 'bsClearSearch']);
+        expect(headers(el)).toEqual(['Your apps']);
+    });
+    it('Escape clears the search and stops the event; with an empty field it is left alone', async () => {
+        const { el, type, waitForChanges } = await make();
+        let escapes = 0;
+        el.parentElement.addEventListener('keydown', e => e.key === 'Escape' && escapes++);
+        await type('pay');
+        q(el, 'bs-input').dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true, composed: true, cancelable: true }));
+        await waitForChanges();
+        expect(el.query).toBe('');
+        expect(escapes).toBe(0);
+        q(el, 'bs-input').dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true, composed: true, cancelable: true }));
+        expect(escapes).toBe(1);
+    });
+    it('loading shows aria-busy skeleton tiles, announces the label, and hides the search', async () => {
+        const { el } = await make({ status: 'loading' });
+        expect(q(el, '[aria-busy="true"]')).not.toBeNull();
+        expect(qa(el, 'bs-skeleton').length).toBeGreaterThanOrEqual(18);
+        expect(q(el, 'bs-input')).toBeNull();
+        expect(q(el, '[role="status"]').textContent).toBe('Loading apps…');
+    });
+    it('error shows an alert with Try again, which fires bsRetry', async () => {
+        const { el } = await make({ status: 'error' });
+        const got = events(el, 'bsRetry');
+        expect(q(el, '[role="alert"]')).not.toBeNull();
+        const empty = q(el, '[part="empty"]');
+        expect(empty.heading).toBe('Couldn’t load your apps');
+        expect(empty.intent).toBe('error');
+        empty.querySelector('bs-button').click();
+        expect(got.length).toBe(1);
+    });
+    it('empty (no apps) shows Request access, which fires bsRequestAccess', async () => {
+        const { el } = await make({ apps: [] });
+        const got = events(el, 'bsRequestAccess');
+        expect(q(el, '[part="empty"]').heading).toBe('No apps assigned yet');
+        expect(q(el, 'bs-input')).toBeNull();
+        q(el, '[part="empty"] bs-button').click();
+        expect(got.length).toBe(1);
+    });
+    it('fires bsAppSelect (cancelable) and bsManage / bsBrowseAll', async () => {
+        const { el } = await make({ apps: APPS, currentId: 'bank' });
+        const got = events(el, 'bsAppSelect', 'bsManage', 'bsBrowseAll');
+        qa(el, '[part="tile"]')[2].click();
+        q(el, '[part="manage"]').click();
+        q(el, '[part="browse"]').click();
+        expect(got.map(g => g[0])).toEqual(['bsAppSelect', 'bsManage', 'bsBrowseAll']);
+        expect(got[0][1].id).toBe('payroll');
+    });
+    it('does not fire bsAppSelect for a disabled app, and preventDefault cancels the click', async () => {
+        const { el, waitForChanges } = await make({ apps: [{ ...APPS[0], disabled: true }, APPS[1]] });
+        const got = events(el, 'bsAppSelect');
+        qa(el, '[part="tile"]')[0].click();
+        expect(got.length).toBe(0);
+        el.addEventListener('bsAppSelect', e => e.preventDefault());
+        const btn = qa(el, '[part="tile"]')[1].shadowRoot.querySelector('button');
+        // dispatchEvent returns false when a listener called preventDefault.
+        const notPrevented = btn.dispatchEvent(new MouseEvent('click', { bubbles: true, composed: true, cancelable: true }));
+        await waitForChanges();
+        expect(notPrevented).toBe(false);
+    });
+    it('names the panel by its heading and each group by its header', async () => {
+        const { el } = await make({ recent: RECENT });
+        const panel = q(el, '[part="panel"]');
+        expect(panel.getAttribute('role')).toBe('region');
+        expect(el.shadowRoot.getElementById(panel.getAttribute('aria-labelledby'))?.textContent).toBe('EG apps');
+        for (const g of qa(el, '[part="group"]')) {
+            expect(el.shadowRoot.getElementById(g.getAttribute('aria-labelledby'))).not.toBeNull();
+        }
+    });
+    it('renders Manage and Browse as links when given URLs', async () => {
+        const { el } = await make({ manageHref: '#m', browseHref: '#b' });
+        expect(q(el, '[part="manage"]').tagName).toBe('A');
+        expect(q(el, '[part="browse"]').getAttribute('href')).toBe('#b');
+    });
+    it('translates every string through its label prop', async () => {
+        const { el } = await make({ heading: 'EG apper', manageLabel: 'Administrer', yourAppsLabel: 'Dine apper', browseLabel: 'Se alle' });
+        expect(q(el, '[part="heading"]').textContent).toBe('EG apper');
+        expect(q(el, '[part="manage"]').textContent).toBe('Administrer');
+        expect(headers(el)).toEqual(['Dine apper']);
+        expect(q(el, '[part="browse"]').textContent).toContain('Se alle');
+    });
+    it('has no axe violations in any state', async () => {
+        const states = {
+            default: {},
+            links: { manageHref: '#m', browseHref: '#b' },
+            recent: { recent: RECENT, currentId: 'accounting' },
+            disabled: { apps: [{ ...APPS[0], disabled: true }, ...APPS.slice(1)] },
+            loading: { status: 'loading' },
+            error: { status: 'error' },
+            empty: { apps: [] },
+        };
+        for (const [name, props] of Object.entries(states)) {
+            const { el } = await make(props);
+            const results = await axe.run(el);
+            expect(results.violations.map(v => `${name} ${v.id}: ${v.help}`)).toEqual([]);
+        }
+        const { el, type } = await make();
+        await type('pay');
+        expect((await axe.run(el)).violations.map(v => `searching ${v.id}: ${v.help}`)).toEqual([]);
+        await type('lønn');
+        expect((await axe.run(el)).violations.map(v => `no-results ${v.id}: ${v.help}`)).toEqual([]);
+    });
+});

package/dist/collection/components/bs-app-switcher/bs-app-switcher.css

@@ -0,0 +1,173 @@
+:host {
+  display: block;
+  box-sizing: border-box;
+  width: var(--bs-app-switcher-width);
+  max-width: 100%;
+  --bs-app-switcher-width: 360px;
+  --bs-app-switcher-radius: var(--bs-border-radius-150);
+  --bs-app-switcher-bg: var(--bs-surface-base);
+  --bs-app-switcher-border-color: var(--bs-border-default);
+  --bs-app-switcher-shadow: var(--bs-shadow-position-0) var(--bs-shadow-position-100) var(--bs-shadow-blur-200) var(--bs-elevation-higher);
+  --bs-app-switcher-padding: var(--bs-spacing-150);
+  --bs-app-switcher-text-color: var(--bs-text-default);
+  --bs-app-switcher-header-color: var(--bs-text-secondary);
+  --bs-app-switcher-link-color: var(--bs-text-action);
+  --bs-app-switcher-focus-ring: var(--bs-border-neutral-focus);
+}
+
+.bs-app-switcher {
+  display: block;
+  position: relative;
+  --bs-card-bg: var(--bs-app-switcher-bg);
+  --bs-card-radius: var(--bs-app-switcher-radius);
+  --bs-card-padding: 0px;
+  --bs-card-border-width: 1px;
+  --bs-card-border-color: var(--bs-app-switcher-border-color);
+  --bs-card-shadow: var(--bs-app-switcher-shadow);
+}
+
+.bs-app-switcher__header,
+.bs-app-switcher__footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--bs-spacing-150) var(--bs-spacing-200);
+}
+
+.bs-app-switcher__heading {
+  margin: 0;
+  color: var(--bs-app-switcher-text-color);
+  font-family: var(--bs-typography-font-family-heading, Roboto), sans-serif;
+  font-size: var(--bs-fontsize-heading-h6);
+  font-weight: var(--bs-font-weight-bold);
+  line-height: calc(var(--bs-line-height-heading-h6) * 1px);
+}
+
+.bs-app-switcher__manage,
+.bs-app-switcher__browse {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--bs-spacing-50);
+  margin: 0;
+  padding: 0;
+  border: 0;
+  border-radius: var(--bs-border-radius-50);
+  background: none;
+  font-family: var(--bs-typography-font-family-body, Roboto), sans-serif;
+  cursor: pointer;
+}
+
+.bs-app-switcher__manage {
+  color: var(--bs-app-switcher-text-color);
+  font-size: var(--bs-fontsize-body-sm);
+  font-weight: var(--bs-font-weight-medium);
+  line-height: calc(var(--bs-line-height-body-sm) * 1px);
+  text-decoration: none;
+}
+
+.bs-app-switcher__browse {
+  color: var(--bs-app-switcher-link-color);
+  font-size: var(--bs-fontsize-caption-sm);
+  line-height: calc(var(--bs-line-height-caption-sm) * 1px);
+  text-decoration: underline;
+}
+
+.bs-app-switcher__manage:hover,
+.bs-app-switcher__browse:hover {
+  color: var(--bs-text-action-hover);
+}
+
+.bs-app-switcher__manage:focus-visible,
+.bs-app-switcher__browse:focus-visible {
+  outline: var(--bs-spacing-25) solid var(--bs-app-switcher-focus-ring);
+  outline-offset: var(--bs-spacing-25);
+}
+
+.bs-app-switcher__external {
+  width: var(--bs-spacing-150);
+  height: var(--bs-spacing-150);
+  flex: none;
+}
+
+.bs-app-switcher__search {
+  padding: var(--bs-spacing-150) var(--bs-app-switcher-padding) var(--bs-spacing-50);
+}
+
+.bs-app-switcher__search bs-input {
+  width: 100%;
+}
+
+.bs-app-switcher__body {
+  padding: var(--bs-spacing-50) var(--bs-app-switcher-padding) var(--bs-spacing-150);
+}
+
+.bs-app-switcher__group-header {
+  padding: var(--bs-spacing-100) var(--bs-spacing-100) var(--bs-spacing-50);
+  color: var(--bs-app-switcher-header-color);
+  font-family: var(--bs-typography-font-family-body, Roboto), sans-serif;
+  font-size: var(--bs-fontsize-caption-sm);
+  font-weight: var(--bs-font-weight-semibold);
+  line-height: calc(var(--bs-line-height-caption-sm) * 1px);
+  letter-spacing: var(--bs-letter-spacing-wide);
+  text-transform: uppercase;
+}
+
+.bs-app-switcher__grid,
+.bs-app-switcher__list {
+  display: grid;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.bs-app-switcher__grid--grid {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: var(--bs-spacing-150);
+}
+
+.bs-app-switcher__grid--compact {
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: var(--bs-spacing-100);
+}
+
+.bs-app-switcher__section-divider {
+  display: block;
+  width: calc(100% + var(--bs-app-switcher-padding) * 2);
+  margin: 0 calc(var(--bs-app-switcher-padding) * -1);
+}
+
+.bs-app-switcher__empty {
+  --bs-empty-state-padding-y: var(--bs-spacing-300);
+}
+
+.bs-app-switcher__skeleton-header {
+  --bs-skeleton-width: var(--bs-sizing-1000);
+  display: block;
+  padding: var(--bs-spacing-100);
+}
+
+.bs-app-switcher__skeleton-tile {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--bs-spacing-150);
+  padding: var(--bs-spacing-150);
+}
+
+.bs-app-switcher__skeleton-icon {
+  --bs-skeleton-width: calc(var(--bs-sizing-500) + var(--bs-spacing-50));
+  --bs-skeleton-rect-height: calc(var(--bs-sizing-500) + var(--bs-spacing-50));
+}
+
+.bs-app-switcher__skeleton-label {
+  --bs-skeleton-width: var(--bs-sizing-800);
+}
+
+.bs-app-switcher__live {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}