@brandsync/wc 1.17.0 → 1.19.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: '25195db69c69ce67d0679a08ae8747829ceded31', 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: 'ef11e62cab8201965e9d8c0d6f2afbc520b11af8', class: "bs-app-recent-item__text" }, h("span", { key: 'fad916fcc805b11e1659aa6885aa38651c99f1d3', part: "name", class: "bs-app-recent-item__name" }, this.name), this.description && (h("span", { key: 'e4b5d5c3f944b47de6637db714e661ad6df9735f', part: "description", class: "bs-app-recent-item__description" }, this.description))),
+        ];
+        return (h("button", { key: '8fe690965c53eea77a004123ecdddec7f1172e42', ...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: 'bb129be6f9df534225bd91bc49b218cd297b9f50', class: "bs-app-shell", part: "container" }, h("div", { key: 'b7557918e3a7c0c54c5e96c73af17af25276e227', class: "bs-app-shell__header", part: "header" }, h("slot", { key: '135463253e19c6a2d5ff86b04413e6838f824a89', name: "header" })), h("div", { key: '6c261a296a432f8de89308ad846f879b0222ad38', class: "bs-app-shell__navigation", part: "navigation" }, h("slot", { key: 'ab2bcf3c3deebef265b9bd363a398f27a0dd08e5', name: "navigation" })), h("main", { key: 'c5c464164626c5556db4b13f21d1a1b160b4cd0b', class: "bs-app-shell__main", part: "main" }, h("slot", { key: 'b10f392415fae0ff71064034e8731a1d389c2c2b' })), h("div", { key: 'cef45e2cf170b9cada37921339fc42349e8a2bab', class: "bs-app-shell__aside", part: "aside" }, h("slot", { key: 'fc72f095f04b9ed1adb60853d7bd94c7a9d3fc8b', name: "aside" }))));
+        return (h("div", { key: 'ff8c3b56c5ef688cc6c0ea56506ff11276e8d3e3', class: "bs-app-shell", part: "container" }, h("div", { key: 'd5774240964b2983194a2159a0a1144a21a6d283', class: "bs-app-shell__header", part: "header" }, h("slot", { key: '277a167b2f8bedde05303de0c40d3eba2ca2d991', name: "header" })), h("div", { key: '239b9188f0d433fead73cbef56adf4c2814481e8', class: "bs-app-shell__navigation", part: "navigation" }, h("slot", { key: '40ae1bad1999bc8d7ab42fd3d42871a5ca6f7e6f', name: "navigation" })), h("main", { key: '4ac23628e313bce91c8ba91b988cef538561d5db', class: "bs-app-shell__main", part: "main" }, h("slot", { key: '33b33785532d89474eaba090fdb4dc46975f0e2b' })), h("div", { key: '5b746ae7fb368233c68cc67f983b34229d5103d1', class: "bs-app-shell__aside", part: "aside" }, h("slot", { key: 'c68ae0b5809ad6ea9e4f02e0bdb9364e0ccc914b', 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;
+}