@brandsync/wc 1.18.0 → 1.20.0

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

@@ -31,6 +31,7 @@ import { h } from "@stencil/core";
  * @part label - The label wrapper.
  * @part badge - The badge wrapper.
  * @part indicator - The selection/hover underline indicator.
+ * @part ripple - The press-ripple layer (a `bs-ripple`). Tune it with `::part(ripple) { --bs-ripple-color: ...; }`.
  */
 // Note: this component's CSS Custom Properties (--bs-tab-*) are documented via @prop comments in
 // bs-tab.css, not here -- Stencil's docs generator only parses @prop out of CSS file comments, not
@@ -107,7 +108,7 @@ export class BsTab {
         const iconOnly = this.hasIcon && !this.hasLabel;
         const vertical = this.hasIcon && this.hasLabel && this.iconPosition === 'top';
         const showBadge = this.hasBadge && !iconOnly && !vertical;
-        return (h("button", { key: 'fe8218735ca725926530b81f4d24ecab9a02674a', type: "button", part: "tab", role: "tab", class: `bs-tab ${this.selected ? 'bs-tab--selected' : ''} ${this.disabled ? 'bs-tab--disabled' : ''} ${iconOnly ? 'bs-tab--icon-only' : ''} ${vertical ? 'bs-tab--vertical' : ''}`, disabled: this.disabled, "aria-selected": String(this.selected), "aria-disabled": this.disabled ? 'true' : undefined, "aria-label": this.ariaLabel, tabIndex: this.tabbable === undefined ? undefined : this.tabbable ? 0 : -1, onClick: this.onClick }, h("span", { key: '3402d5e392bd7f564c8af40db99c6f6dc8afaf00', part: "icon", class: `bs-tab__icon ${this.hasIcon ? 'bs-tab__icon--has-content' : ''}` }, h("slot", { key: '38ad5a0cd85e9f02e4b4f42ded831b9acbc4e9df', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: 'a10798abf3a7e42801a82589b4993a54fc0d4bd4', part: "label", class: `bs-tab__label ${this.hasLabel ? 'bs-tab__label--has-content' : ''}` }, h("slot", { key: '123d097e2515fc709c6e0785cb8373d97da30673', onSlotchange: this.onLabelSlotchange })), h("span", { key: 'a44fc02f45dbebdf11cc7a57440d9b065087adf9', part: "badge", class: `bs-tab__badge ${showBadge ? 'bs-tab__badge--has-content' : ''}` }, h("slot", { key: '855acb39e1ca31c0fc9de6ad2728dc83b47ea3e6', name: "badge", onSlotchange: this.onBadgeSlotchange })), h("span", { key: 'f2312b0e3dbfbcc48a02a201760f18dc4afd6e89', part: "indicator", class: "bs-tab__indicator" })));
+        return (h("button", { key: 'b2d2de98c36ee3f1a234b26d02301444511c7fa6', type: "button", part: "tab", role: "tab", class: `bs-tab ${this.selected ? 'bs-tab--selected' : ''} ${this.disabled ? 'bs-tab--disabled' : ''} ${iconOnly ? 'bs-tab--icon-only' : ''} ${vertical ? 'bs-tab--vertical' : ''}`, disabled: this.disabled, "aria-selected": String(this.selected), "aria-disabled": this.disabled ? 'true' : undefined, "aria-label": this.ariaLabel, tabIndex: this.tabbable === undefined ? undefined : this.tabbable ? 0 : -1, onClick: this.onClick }, h("bs-ripple", { key: 'ce6536ce97610f7de52ee6015af383a696c1bc27', part: "ripple", centered: false, disabled: this.disabled }), h("span", { key: 'c3ac3b7cf5d2991375d5dc1ccde201b3295f80c5', part: "icon", class: `bs-tab__icon ${this.hasIcon ? 'bs-tab__icon--has-content' : ''}` }, h("slot", { key: '1a07b29dd8a41480a1ddeb74ee5f3064d4b3b270', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: 'c8e7f3d6a30231994203e5ed44dc84896b23f6ca', part: "label", class: `bs-tab__label ${this.hasLabel ? 'bs-tab__label--has-content' : ''}` }, h("slot", { key: '5fb9c0fd9b6b71e07d037d9e6a3404c54dab822a', onSlotchange: this.onLabelSlotchange })), h("span", { key: '566c636af2dcb775170b1807c6d022dab2e4a811', part: "badge", class: `bs-tab__badge ${showBadge ? 'bs-tab__badge--has-content' : ''}` }, h("slot", { key: 'e762c6a042a248ef61d6cd4449e94395788784d2', name: "badge", onSlotchange: this.onBadgeSlotchange })), h("span", { key: '0ca377dce1ddb8dcafe2bc808355ffdbd3759959', part: "indicator", class: "bs-tab__indicator" })));
     }
     static get is() { return "bs-tab"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-tab/bs-tabs/bs-tabs.cmp.test.js

@@ -146,4 +146,39 @@ describe('bs-tabs', () => {
             expect(root.querySelector('bs-tab').getAttribute('value')).toBe('overview');
         });
     });
+    it('a value that matches no tab does not clear a tab already marked selected', async () => {
+        const { root, waitForChanges } = await render(h("bs-tabs", null, h("bs-tab", { selected: true }, "Overview"), h("bs-tab", null, "Details")));
+        await waitForChanges();
+        root.value = '';
+        await waitForChanges();
+        expect(Array.from(root.querySelectorAll('bs-tab')).map(t => t.selected)).toEqual([true, false]);
+    });
+    it('bs-tab groups have a 4px gap between tabs', async () => {
+        const { root } = await render(h("bs-tabs", null, h("bs-tab", null, "A"), h("bs-tab", null, "B")));
+        expect(getComputedStyle(root.shadowRoot.querySelector('[part="tablist"]')).columnGap).toBe('4px');
+    });
+    describe('geometry', () => {
+        it('type="bs-inline-tab" container is 48px tall, and a disabled inline tab matches its background', async () => {
+            const { root } = await render(h("bs-tabs", { type: "bs-inline-tab" }, h("bs-inline-tab", { selected: true }, "Overview"), h("bs-inline-tab", null, "Details"), h("bs-inline-tab", { disabled: true }, "Settings")));
+            const tablist = root.shadowRoot.querySelector('[part="tablist"]');
+            expect(tablist.getBoundingClientRect().height).toBe(48);
+            const disabled = root.querySelector('bs-inline-tab:last-child').shadowRoot.querySelector('[part="tab"]');
+            expect(getComputedStyle(disabled).backgroundColor).toBe(getComputedStyle(tablist).backgroundColor);
+        });
+        it('icon-only bs-tab is 56px wide with the icon and indicator centred', async () => {
+            const { root } = await render(h("bs-tabs", null, h("bs-tab", { selected: true, ariaLabel: "Home" }, h("svg", { slot: "icon", viewBox: "0 0 24 24" }))));
+            const tab = root.querySelector('bs-tab');
+            const button = tab.shadowRoot.querySelector('[part="tab"]');
+            const bw = button.getBoundingClientRect();
+            expect(Math.round(tab.getBoundingClientRect().width)).toBe(56);
+            expect(Math.round(bw.width)).toBe(56);
+            const center = (el) => {
+                const r = el.getBoundingClientRect();
+                return r.left + r.width / 2;
+            };
+            const mid = bw.left + bw.width / 2;
+            expect(Math.abs(center(tab.shadowRoot.querySelector('[part="icon"]')) - mid)).toBeLessThan(1);
+            expect(Math.abs(center(tab.shadowRoot.querySelector('[part="indicator"]')) - mid)).toBeLessThan(1);
+        });
+    });
 });

package/dist/collection/components/bs-tab/bs-tabs/bs-tabs.css

@@ -1,18 +1,20 @@
 /**
- * @prop --bs-tabs-tab-gap: Gap between tabs when type="bs-tab". Aliased to --bs-spacing-100.
+ * @prop --bs-tabs-tab-gap: Gap between tabs when type="bs-tab". Aliased to --bs-spacing-50 (4px).
  * @prop --bs-tabs-inline-tab-bg: Bar background when type="bs-inline-tab". Aliased to --bs-color-neutral-container.
  * @prop --bs-tabs-inline-tab-padding-x: Bar horizontal padding when type="bs-inline-tab". Aliased to --bs-spacing-50.
  * @prop --bs-tabs-inline-tab-radius: Bar corner radius when type="bs-inline-tab". Aliased to --bs-border-radius-full.
+ * @prop --bs-tabs-inline-tab-height: Bar height when type="bs-inline-tab". Aliased to --bs-spacing-600 (48px).
  * @prop --bs-tabs-inline-tab-gap: Gap between tabs when type="bs-inline-tab". Aliased to --bs-spacing-50.
  */
 :host {
   display: inline-block;
 
-  --bs-tabs-tab-gap: var(--bs-spacing-100);
+  --bs-tabs-tab-gap: var(--bs-spacing-50);
 
   --bs-tabs-inline-tab-bg: var(--bs-color-neutral-container);
   --bs-tabs-inline-tab-padding-x: var(--bs-spacing-50);
   --bs-tabs-inline-tab-radius: var(--bs-border-radius-full);
+  --bs-tabs-inline-tab-height: var(--bs-spacing-600);
   --bs-tabs-inline-tab-gap: var(--bs-spacing-50);
 }
 
@@ -32,6 +34,8 @@
 }
 
 .bs-tabs--bs-inline-tab {
+  box-sizing: border-box;
+  height: var(--bs-tabs-inline-tab-height);
   background: var(--bs-tabs-inline-tab-bg);
   padding: 0 var(--bs-tabs-inline-tab-padding-x);
   border-radius: var(--bs-tabs-inline-tab-radius);

package/dist/collection/components/bs-tab/bs-tabs/bs-tabs.js

@@ -41,9 +41,11 @@ export class BsTabs {
      * or, for a tab without one, its zero-based position in the group as a string (`"0"`, `"1"`...).
      * If unset, it is read from whichever tab is already `selected` once the group loads. */
     value;
-    /** Fires when the user selects a different tab (click, or arrow/Home/End), with the new
-     * `value`. Does not fire when `value` is set programmatically. `bsSelect` on the individual tab
-     * still fires as before. */
+    /** Fires when the **selection changes** (click, or arrow/Home/End), with the new `value`. It does
+     * not fire when the already-selected tab is clicked again, nor when `value` is set
+     * programmatically. To react to every activation, including a click on the already-selected tab
+     * (e.g. to sync a URL), listen for `bsSelect` on the tab itself (it bubbles, so one listener on
+     * `<bs-tabs>` covers all tabs); it fires on every click. */
     bsChange;
     /**
      * Catches `bsSelect` bubbling up from any slotted `<bs-tab>`/`<bs-inline-tab>` (Stencil's
@@ -85,7 +87,12 @@ export class BsTabs {
     }
     /** Selects the tab whose value matches `this.value` (and deselects the rest). */
     applyValue() {
-        this.tabs().forEach((tab, i) => {
+        // A value that matches no tab (unset, empty, or set before the tabs exist -- e.g. a framework
+        // wrapper assigning props late) must not wipe a tab the consumer marked `selected`.
+        const tabs = this.tabs();
+        if (!tabs.some((tab, i) => this.tabValue(tab, i) === this.value))
+            return;
+        tabs.forEach((tab, i) => {
             tab.selected = this.tabValue(tab, i) === this.value;
         });
         this.syncRovingTabindex();
@@ -135,7 +142,7 @@ export class BsTabs {
     }
     render() {
         const vertical = this.orientation === 'vertical';
-        return (h("div", { key: 'a4d8ed9dc495a188c837bc2baaf39dc1f810d18a', part: "tablist", role: "tablist", "aria-orientation": this.orientation, class: `bs-tabs bs-tabs--${this.type} ${vertical ? 'bs-tabs--vertical' : ''}` }, h("slot", { key: 'd633cbbcabeb0e9e360dd0e83f4c726547770e3f', onSlotchange: () => this.syncRovingTabindex() })));
+        return (h("div", { key: 'a5e190b0439a02353c187f94db3c42f274936ce8', part: "tablist", role: "tablist", "aria-orientation": this.orientation, class: `bs-tabs bs-tabs--${this.type} ${vertical ? 'bs-tabs--vertical' : ''}` }, h("slot", { key: 'c20d0df9c448227a429dd42f9ec484225c172882', onSlotchange: () => this.syncRovingTabindex() })));
     }
     static get is() { return "bs-tabs"; }
     static get encapsulation() { return "shadow"; }
@@ -233,7 +240,7 @@ export class BsTabs {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Fires when the user selects a different tab (click, or arrow/Home/End), with the new\n`value`. Does not fire when `value` is set programmatically. `bsSelect` on the individual tab\nstill fires as before."
+                    "text": "Fires when the **selection changes** (click, or arrow/Home/End), with the new `value`. It does\nnot fire when the already-selected tab is clicked again, nor when `value` is set\nprogrammatically. To react to every activation, including a click on the already-selected tab\n(e.g. to sync a URL), listen for `bsSelect` on the tab itself (it bubbles, so one listener on\n`<bs-tabs>` covers all tabs); it fires on every click."
                 },
                 "complexType": {
                     "original": "{ value: string }",

package/dist/collection/components/bs-table-of-contents/bs-table-of-contents.cmp.test.js

@@ -0,0 +1,125 @@
+import { render, h, describe, it, expect } from "@stencil/vitest";
+import { runAxeCheck, assertShadowParts, assertCssCustomProperties } from "../../test/helpers/conventions";
+import { blockLinkNavigation } from "../../test/helpers/block-link-navigation";
+blockLinkNavigation();
+const tick = (ms = 80) => new Promise(r => setTimeout(r, ms));
+const items = [
+    { label: 'Intro', href: '#toc-intro' },
+    { label: 'Usage', href: '#toc-usage', children: [{ label: 'Props', href: '#toc-props' }] },
+    { label: 'Accessibility', href: '#toc-a11y' },
+];
+const page = (extra = {}) => (h("div", { style: { display: 'flex' } }, h("bs-table-of-contents", { items: items, ...extra }), h("div", { style: { height: '300px', overflow: 'auto' }, id: "toc-scroller" }, ['intro', 'usage', 'props', 'a11y'].map(id => (h("section", { id: `toc-${id}`, style: { height: '400px' } }, h("h2", null, id)))))));
+describe('bs-table-of-contents', () => {
+    it('renders a labelled nav with nested lists from items', async () => {
+        const { root } = await render(h("bs-table-of-contents", { items: items }));
+        const nav = root.shadowRoot.querySelector('nav');
+        expect(nav.getAttribute('aria-label')).toBe('On this page');
+        expect(root.shadowRoot.querySelectorAll('a')).toHaveLength(4);
+        expect(root.shadowRoot.querySelectorAll('ul ul a')).toHaveLength(1);
+        expect(root.shadowRoot.querySelector('ul ul a').textContent).toBe('Props');
+        assertShadowParts(root.shadowRoot, ['container', 'title', 'list', 'item', 'link']);
+        assertCssCustomProperties(root, ['--bs-toc-gap', '--bs-toc-indent', '--bs-toc-sticky-top']);
+    });
+    it('can hide the title and customise the label', async () => {
+        const { root } = await render(h("bs-table-of-contents", { items: items, label: "Contents", hideTitle: true }));
+        expect(root.shadowRoot.querySelector('nav').getAttribute('aria-label')).toBe('Contents');
+        expect(root.shadowRoot.querySelector('[part="title"]')).toBeNull();
+    });
+    it('builds entries from slotted anchors, using nesting and data-level', async () => {
+        const { root } = await render(h("bs-table-of-contents", null, h("ul", null, h("li", null, h("a", { href: "#toc-intro" }, "Intro"), h("ul", null, h("li", null, h("a", { href: "#toc-usage" }, "Usage")))), h("li", null, h("a", { href: "#toc-a11y" }, "Accessibility"))), h("a", { href: "#toc-props", "data-level": "2" }, "Props")));
+        await tick();
+        const links = Array.from(root.shadowRoot.querySelectorAll('a')).map(a => a.textContent);
+        expect(links).toEqual(['Intro', 'Usage', 'Accessibility', 'Props']);
+        expect(root.shadowRoot.querySelectorAll('ul ul a').length).toBe(2);
+    });
+    it('marks the clicked link as current with aria-current and emits events', async () => {
+        const { root } = await render(h("bs-table-of-contents", { items: items, scrollSpy: false }));
+        const nav = [];
+        const changes = [];
+        root.addEventListener('bsNavigate', (e) => {
+            nav.push(e.detail.href);
+            e.preventDefault();
+        });
+        root.addEventListener('bsChange', (e) => changes.push(e.detail));
+        root.shadowRoot.querySelectorAll('a')[1].click();
+        await tick(20);
+        expect(nav).toEqual(['#toc-usage']);
+        // cancelled navigation does not change current
+        expect(changes).toEqual([]);
+    });
+    it('sets current on an uncancelled click', async () => {
+        const { root } = await render(h("bs-table-of-contents", { items: [{ label: 'Intro', href: '#toc-intro' }], scrollSpy: false }));
+        const a = root.shadowRoot.querySelector('a');
+        a.addEventListener('click', e => e.preventDefault()); // keep the test page where it is
+        a.click();
+        await tick(20);
+        expect(root.shadowRoot.querySelector('a').getAttribute('aria-current')).toBe('location');
+        expect(root).toHaveAttribute('current');
+    });
+    it('reflects a programmatic current value', async () => {
+        const { root } = await render(h("bs-table-of-contents", { items: items, current: "#toc-a11y", scrollSpy: false }));
+        const current = root.shadowRoot.querySelectorAll('a[aria-current]');
+        expect(current).toHaveLength(1);
+        expect(current[0].textContent).toBe('Accessibility');
+    });
+    describe('scroll spy', () => {
+        it('follows the section in view', async () => {
+            const { root } = await render(page({ rootMargin: '0px 0px -50% 0px' }));
+            await tick(200);
+            const toc = root.querySelector('bs-table-of-contents');
+            const current = () => toc.shadowRoot.querySelector('a[aria-current]')?.textContent;
+            expect(current()).toBe('Intro');
+            document.getElementById('toc-usage').scrollIntoView();
+            await tick(300);
+            expect(current()).toBe('Usage');
+        });
+        it('disconnects the observer on removal', async () => {
+            const original = window.IntersectionObserver;
+            const instances = [];
+            let disconnected = 0;
+            window.IntersectionObserver = class extends original {
+                constructor(cb, o) {
+                    super(cb, o);
+                    instances.push(this);
+                }
+                disconnect() {
+                    disconnected++;
+                    super.disconnect();
+                }
+            };
+            try {
+                const { root } = await render(page());
+                await tick(150);
+                expect(instances.length).toBeGreaterThan(0);
+                const before = disconnected;
+                const toc = root.querySelector('bs-table-of-contents');
+                const parent = toc.parentElement;
+                toc.remove();
+                expect(disconnected).toBeGreaterThan(before);
+                // Re-attaching creates a fresh observer.
+                const count = instances.length;
+                parent.prepend(toc);
+                await tick(100);
+                expect(instances.length).toBeGreaterThan(count);
+            }
+            finally {
+                window.IntersectionObserver = original;
+            }
+        });
+    });
+    it('is sticky when asked', async () => {
+        const { root } = await render(h("bs-table-of-contents", { items: items, sticky: true }));
+        expect(getComputedStyle(root).position).toBe('sticky');
+        expect(root).toHaveAttribute('sticky');
+    });
+    it('has a visible focus style on links', async () => {
+        const { root } = await render(h("bs-table-of-contents", { items: items }));
+        const a = root.shadowRoot.querySelector('a');
+        a.focus();
+        expect(root.shadowRoot.activeElement).toBe(a);
+    });
+    it('has no axe violations', async () => {
+        const { root } = await render(h("bs-table-of-contents", { items: items, current: "#toc-usage" }));
+        await runAxeCheck(root);
+    });
+});

package/dist/collection/components/bs-table-of-contents/bs-table-of-contents.css

@@ -0,0 +1,115 @@
+/**
+ * @prop --bs-toc-gap: Vertical gap between entries. Aliased to --bs-spacing-50.
+ * @prop --bs-toc-indent: Extra start padding per nesting level. Aliased to --bs-spacing-200.
+ * @prop --bs-toc-link-padding-x: Horizontal padding of a link. Aliased to --bs-spacing-150.
+ * @prop --bs-toc-link-padding-y: Vertical padding of a link. Aliased to --bs-spacing-50.
+ * @prop --bs-toc-color: Link colour. Aliased to --bs-text-secondary.
+ * @prop --bs-toc-color-hover: Link colour on hover. Aliased to --bs-text-default.
+ * @prop --bs-toc-color-current: Colour of the current section's link. Aliased to --bs-text-action.
+ * @prop --bs-toc-title-color: Title colour. Aliased to --bs-text-default.
+ * @prop --bs-toc-font-size: Link font size. Aliased to --bs-font-size-sm.
+ * @prop --bs-toc-font-weight-current: Font weight of the current link. Aliased to --bs-font-weight-semibold.
+ * @prop --bs-toc-track-color: Colour of the line running along the list. Aliased to --bs-border-default.
+ * @prop --bs-toc-indicator-color: Colour of the marker on the current link. Aliased to --bs-border-primary.
+ * @prop --bs-toc-focus-ring-color: Focus ring colour. Aliased to --bs-border-neutral-focus.
+ * @prop --bs-toc-radius: Corner radius of a link (its focus ring and hover). Aliased to --bs-border-radius-50.
+ * @prop --bs-toc-sticky-top: Distance from the top edge when `sticky`. Aliased to --bs-spacing-200.
+ */
+:host {
+  display: block;
+
+  --bs-toc-gap: var(--bs-spacing-50);
+  --bs-toc-indent: var(--bs-spacing-200);
+  --bs-toc-link-padding-x: var(--bs-spacing-150);
+  --bs-toc-link-padding-y: var(--bs-spacing-50);
+  --bs-toc-color: var(--bs-text-secondary);
+  --bs-toc-color-hover: var(--bs-text-default);
+  --bs-toc-color-current: var(--bs-text-action);
+  --bs-toc-title-color: var(--bs-text-default);
+  --bs-toc-font-size: var(--bs-font-size-sm);
+  --bs-toc-font-weight-current: var(--bs-font-weight-semibold);
+  --bs-toc-track-color: var(--bs-border-default);
+  --bs-toc-indicator-color: var(--bs-border-primary);
+  --bs-toc-focus-ring-color: var(--bs-border-neutral-focus);
+  --bs-toc-radius: var(--bs-border-radius-50);
+  --bs-toc-sticky-top: var(--bs-spacing-200);
+}
+
+:host([sticky]) {
+  position: sticky;
+  top: var(--bs-toc-sticky-top);
+  align-self: flex-start;
+  max-height: calc(100vh - var(--bs-toc-sticky-top) * 2);
+  overflow-y: auto;
+}
+
+.bs-toc {
+  font-family: inherit;
+  font-size: var(--bs-toc-font-size);
+}
+
+.bs-toc__title {
+  margin: 0 0 var(--bs-spacing-100);
+  color: var(--bs-toc-title-color);
+  font-size: var(--bs-font-size-md);
+  font-weight: var(--bs-font-weight-semibold);
+}
+
+.bs-toc__list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--bs-toc-gap);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.bs-toc__list--level-1 {
+  border-inline-start: 2px solid var(--bs-toc-track-color);
+}
+
+.bs-toc__list .bs-toc__list {
+  margin-block-start: var(--bs-toc-gap);
+  padding-inline-start: var(--bs-toc-indent);
+}
+
+.bs-toc__link {
+  display: block;
+  margin-inline-start: -2px;
+  padding: var(--bs-toc-link-padding-y) var(--bs-toc-link-padding-x);
+  border-inline-start: 2px solid transparent;
+  border-radius: var(--bs-toc-radius);
+  color: var(--bs-toc-color);
+  text-decoration: none;
+  transition: color var(--bs-duration-fast) var(--bs-easing-standard);
+}
+
+/* Nested links sit inside the nested list's indent; the marker still aligns to the level-1 track. */
+.bs-toc__list .bs-toc__list .bs-toc__link {
+  margin-inline-start: calc(var(--bs-toc-indent) * -1 - 2px);
+  padding-inline-start: calc(var(--bs-toc-indent) + var(--bs-toc-link-padding-x));
+}
+
+.bs-toc__link:hover {
+  color: var(--bs-toc-color-hover);
+}
+
+.bs-toc__link[aria-current] {
+  border-inline-start-color: var(--bs-toc-indicator-color);
+  color: var(--bs-toc-color-current);
+  font-weight: var(--bs-toc-font-weight-current);
+}
+
+.bs-toc__link:focus-visible {
+  outline: 2px solid var(--bs-toc-focus-ring-color);
+  outline-offset: 2px;
+}
+
+/* The slotted anchors are only read, never shown. */
+slot {
+  display: none;
+}
+
+@media (forced-colors: active) {
+  .bs-toc__link[aria-current] { border-inline-start-color: Highlight; color: Highlight; }
+}