@brandsync/wc 1.19.0 → 1.20.0

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; }
+}

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

@@ -0,0 +1,392 @@
+import { h } from "@stencil/core";
+let tocId = 0;
+/**
+ * An "On this page" navigation: a nested list of in-page links with a scroll spy that marks the
+ * section currently in view (`aria-current="location"`), optionally sticky beside long content.
+ *
+ * Give it entries in either of two ways:
+ * - **`items` property** (a JS array, `{ label, href, children? }`) -- the data-driven way.
+ * - **Slotted anchors** -- `<a href="#intro">Intro</a>`, optionally inside nested `<ul>`/`<li>` or with
+ *   `data-level="2"` for sub-sections. The component reads them and renders its own styled links (the
+ *   slotted markup is not displayed; it is the no-JavaScript fallback). Used when `items` is empty.
+ *
+ * The scroll spy uses an `IntersectionObserver` on the elements the links point at. The current section
+ * is the first one (in link order) that intersects the top band of the viewport defined by `rootMargin`;
+ * when none does (between two sections) the previous one stays current. Observers are disconnected when
+ * the element is removed from the DOM and re-created when it is re-attached.
+ *
+ * Link targets are looked up by id in the same document (or shadow tree) as the component. Links whose
+ * target does not exist are still shown but never become current.
+ *
+ * ## When to use
+ * - Long single-page content (documentation, policies, settings pages) with several headed sections.
+ *
+ * ## When not to use
+ * - Navigating between pages -- use `bs-navigation-drawer` or `bs-breadcrumbs`.
+ * - Switching between panels of content that are not all on the page -- use `bs-tabs`.
+ *
+ * Composition: leaf element (a nav landmark with anchors); no existing `bs-*` component renders links.
+ *
+ * @slot - Default slot: anchors (`<a href="#id">`) used as entries when `items` is empty. Not displayed.
+ * @part container - The `<nav>` landmark.
+ * @part title - The visible heading (unless `hideTitle`).
+ * @part list - Every `<ul>` (top level and nested).
+ * @part item - Every `<li>`.
+ * @part link - Every anchor. The current one also matches `[aria-current]`.
+ */
+// Note: CSS Custom Properties (--bs-toc-*) are documented via @prop comments in bs-table-of-contents.css.
+export class BsTableOfContents {
+    el;
+    /** Entries as a JS array (set as a property, not an attribute). Takes precedence over slotted anchors. */
+    items = [];
+    /** Accessible name of the `nav` landmark, and the visible title text. */
+    label = 'On this page';
+    /** Hides the visible title; the landmark keeps its accessible name. */
+    hideTitle = false;
+    /** The `href` (`#id`) of the current section. Reflected; follows the scroll spy and clicks, and can be
+     * set to force a section. */
+    current;
+    /** Turns the scroll spy on or off. Off: `current` only changes when a link is clicked or it is set. */
+    scrollSpy = true;
+    /** `rootMargin` of the spy's `IntersectionObserver`: shrinks the viewport to the band in which a
+     * section counts as "current". The default is the top 40% of the viewport. Raise the top value (e.g.
+     * `-64px 0px -60% 0px`) when a fixed header covers the top of the page. */
+    rootMargin = '0px 0px -60% 0px';
+    /** Sticks the table of contents to the top of its scroll container (`position: sticky`) so it stays
+     * in view beside long content. Offset with `--bs-toc-sticky-top`. */
+    sticky = false;
+    /** Fires when a link is clicked, before navigation. **Cancelable**: `preventDefault()` stops the
+     * browser jump so you can scroll/route yourself. Detail is `{ href }`. Modified clicks are ignored. */
+    bsNavigate;
+    /** Fires when the current section changes (scroll spy or click), with its `href`. */
+    bsChange;
+    slotted = [];
+    titleId = `bs-toc-title-${++tocId}`;
+    observer;
+    visible = new Set();
+    order = [];
+    connectedCallback() {
+        if (this.el.shadowRoot?.querySelector('nav'))
+            this.setupSpy();
+    }
+    componentWillLoad() {
+        this.readSlotted();
+    }
+    componentDidLoad() {
+        this.setupSpy();
+    }
+    disconnectedCallback() {
+        this.teardownSpy();
+    }
+    onSpyConfigChange() {
+        // Wait for the new list to render so the targets are known.
+        requestAnimationFrame(() => this.setupSpy());
+    }
+    tree() {
+        if (this.items && this.items.length) {
+            const conv = (i) => ({ label: i.label, href: i.href, children: (i.children ?? []).map(conv) });
+            return this.items.map(conv);
+        }
+        return this.slotted;
+    }
+    flat(nodes = this.tree()) {
+        return nodes.flatMap(n => [n, ...this.flat(n.children)]);
+    }
+    readSlotted = () => {
+        const anchors = Array.from(this.el.querySelectorAll('a[href]'));
+        const root = [];
+        const stack = [];
+        anchors.forEach(a => {
+            const explicit = parseInt(a.dataset.level ?? '', 10);
+            let depth = 0;
+            for (let p = a.parentElement; p && p !== this.el; p = p.parentElement)
+                if (p.tagName === 'UL' || p.tagName === 'OL')
+                    depth++;
+            const level = Number.isFinite(explicit) ? explicit : Math.max(depth, 1);
+            const node = { label: (a.textContent ?? '').trim(), href: a.getAttribute('href') ?? '', children: [] };
+            while (stack.length && stack[stack.length - 1].level >= level)
+                stack.pop();
+            if (stack.length)
+                stack[stack.length - 1].node.children.push(node);
+            else
+                root.push(node);
+            stack.push({ level, node });
+        });
+        this.slotted = root;
+        requestAnimationFrame(() => this.setupSpy());
+    };
+    targetOf(href) {
+        if (!href || !href.startsWith('#') || href.length < 2)
+            return null;
+        const id = decodeURIComponent(href.slice(1));
+        const root = this.el.getRootNode();
+        return (root.getElementById?.(id) ?? document.getElementById(id));
+    }
+    teardownSpy() {
+        this.observer?.disconnect();
+        this.observer = undefined;
+        this.visible.clear();
+    }
+    setupSpy() {
+        this.teardownSpy();
+        if (!this.scrollSpy || typeof IntersectionObserver === 'undefined' || !this.el.isConnected)
+            return;
+        const targets = [];
+        this.flat().forEach(n => {
+            const t = this.targetOf(n.href);
+            if (t)
+                targets.push([n.href, t]);
+        });
+        if (!targets.length)
+            return;
+        this.order = targets.map(([href]) => href);
+        const byEl = new Map(targets.map(([href, t]) => [t, href]));
+        this.observer = new IntersectionObserver(entries => {
+            entries.forEach(e => {
+                const href = byEl.get(e.target);
+                if (!href)
+                    return;
+                if (e.isIntersecting)
+                    this.visible.add(href);
+                else
+                    this.visible.delete(href);
+            });
+            const first = this.order.find(h => this.visible.has(h));
+            if (first && first !== this.current)
+                this.setCurrent(first);
+        }, { rootMargin: this.rootMargin, threshold: 0 });
+        targets.forEach(([, t]) => this.observer.observe(t));
+    }
+    setCurrent(href) {
+        this.current = href;
+        this.bsChange.emit(href);
+    }
+    onLinkClick = (ev, href) => {
+        if (ev.defaultPrevented || ev.button !== 0 || ev.metaKey || ev.ctrlKey || ev.shiftKey || ev.altKey)
+            return;
+        const go = this.bsNavigate.emit({ href });
+        if (go.defaultPrevented) {
+            ev.preventDefault();
+            return;
+        }
+        if (href !== this.current)
+            this.setCurrent(href);
+    };
+    renderList(nodes, level) {
+        return (h("ul", { part: "list", class: `bs-toc__list bs-toc__list--level-${level}` }, nodes.map(n => (h("li", { part: "item", class: "bs-toc__item" }, h("a", { part: "link", class: "bs-toc__link", href: n.href, "aria-current": n.href === this.current ? 'location' : undefined, onClick: (ev) => this.onLinkClick(ev, n.href) }, n.label), n.children.length > 0 && this.renderList(n.children, level + 1))))));
+    }
+    render() {
+        const nodes = this.tree();
+        return (h("nav", { key: '76e2a4abce943d0dd8e567c7ab2beef7b0d5b1c4', part: "container", class: "bs-toc", "aria-label": this.label }, !this.hideTitle && (h("p", { key: 'ba45bce72e66d2b8ccb1bcd3960c0af0f3fc3717', part: "title", id: this.titleId, class: "bs-toc__title" }, this.label)), nodes.length > 0 && this.renderList(nodes, 1), h("slot", { key: '8c1b4c8cb93c35b43cd8bf91d1473d9fe5311aa9', onSlotchange: this.readSlotted })));
+    }
+    static get is() { return "bs-table-of-contents"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bs-table-of-contents.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bs-table-of-contents.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "items": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "BsTocItem[]",
+                    "resolved": "BsTocItem[]",
+                    "references": {
+                        "BsTocItem": {
+                            "location": "local",
+                            "path": "/home/runner/work/eg-brandsync-storybook/eg-brandsync-storybook/packages/wc/src/components/bs-table-of-contents/bs-table-of-contents.tsx",
+                            "id": "src/components/bs-table-of-contents/bs-table-of-contents.tsx::BsTocItem"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Entries as a JS array (set as a property, not an attribute). Takes precedence over slotted anchors."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible name of the `nav` landmark, and the visible title text."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label",
+                "defaultValue": "'On this page'"
+            },
+            "hideTitle": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Hides the visible title; the landmark keeps its accessible name."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "hide-title",
+                "defaultValue": "false"
+            },
+            "current": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The `href` (`#id`) of the current section. Reflected; follows the scroll spy and clicks, and can be\nset to force a section."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "current"
+            },
+            "scrollSpy": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Turns the scroll spy on or off. Off: `current` only changes when a link is clicked or it is set."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "scroll-spy",
+                "defaultValue": "true"
+            },
+            "rootMargin": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "`rootMargin` of the spy's `IntersectionObserver`: shrinks the viewport to the band in which a\nsection counts as \"current\". The default is the top 40% of the viewport. Raise the top value (e.g.\n`-64px 0px -60% 0px`) when a fixed header covers the top of the page."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "root-margin",
+                "defaultValue": "'0px 0px -60% 0px'"
+            },
+            "sticky": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sticks the table of contents to the top of its scroll container (`position: sticky`) so it stays\nin view beside long content. Offset with `--bs-toc-sticky-top`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "sticky",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "slotted": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "bsNavigate",
+                "name": "bsNavigate",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires when a link is clicked, before navigation. **Cancelable**: `preventDefault()` stops the\nbrowser jump so you can scroll/route yourself. Detail is `{ href }`. Modified clicks are ignored."
+                },
+                "complexType": {
+                    "original": "{ href: string }",
+                    "resolved": "{ href: string; }",
+                    "references": {}
+                }
+            }, {
+                "method": "bsChange",
+                "name": "bsChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires when the current section changes (scroll spy or click), with its `href`."
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "items",
+                "methodName": "onSpyConfigChange"
+            }, {
+                "propName": "scrollSpy",
+                "methodName": "onSpyConfigChange"
+            }, {
+                "propName": "rootMargin",
+                "methodName": "onSpyConfigChange"
+            }];
+    }
+}