@brandsync/wc 1.18.0 → 1.20.0

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

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

@@ -0,0 +1,58 @@
+import { html } from "lit";
+import { componentDescription, propDescription } from "../../stories-utils";
+const items = [
+    { label: 'Introduction', href: '#toc-demo-intro' },
+    { label: 'Usage', href: '#toc-demo-usage', children: [{ label: 'Props', href: '#toc-demo-props' }, { label: 'Events', href: '#toc-demo-events' }] },
+    { label: 'Accessibility', href: '#toc-demo-a11y' },
+];
+const sections = [
+    ['toc-demo-intro', 'Introduction'],
+    ['toc-demo-usage', 'Usage'],
+    ['toc-demo-props', 'Props'],
+    ['toc-demo-events', 'Events'],
+    ['toc-demo-a11y', 'Accessibility'],
+];
+const meta = {
+    title: 'Components/bs-table-of-contents',
+    parameters: { docs: { description: { component: componentDescription('bs-table-of-contents') } } },
+    render: args => html `
+    <div style="display: flex; gap: 32px; height: 320px; overflow: auto;">
+      <bs-table-of-contents
+        .items=${items}
+        label=${args.label}
+        ?hide-title=${args.hideTitle}
+        .scrollSpy=${args.scrollSpy}
+        ?sticky=${args.sticky}
+        root-margin=${args.rootMargin}
+        style="min-width: 200px;"
+      ></bs-table-of-contents>
+      <div>
+        ${sections.map(([id, title]) => html `<section id=${id} style="min-height: 260px;"><h2 style="margin: 0 0 8px;">${title}</h2><p>Section content for ${title}.</p></section>`)}
+      </div>
+    </div>
+  `,
+    argTypes: {
+        label: { control: 'text', description: propDescription('bs-table-of-contents', 'label') },
+        hideTitle: { control: 'boolean', description: propDescription('bs-table-of-contents', 'hideTitle') },
+        scrollSpy: { control: 'boolean', description: propDescription('bs-table-of-contents', 'scrollSpy') },
+        sticky: { control: 'boolean', description: propDescription('bs-table-of-contents', 'sticky') },
+        rootMargin: { control: 'text', description: propDescription('bs-table-of-contents', 'rootMargin') },
+    },
+    args: { label: 'On this page', hideTitle: false, scrollSpy: true, sticky: true, rootMargin: '0px 0px -60% 0px' },
+};
+export default meta;
+export const Default = {};
+export const SlottedAnchors = {
+    name: 'Slotted anchors',
+    render: () => html `
+    <bs-table-of-contents label="On this page" .scrollSpy=${false}>
+      <ul>
+        <li><a href="#toc-demo-intro">Introduction</a></li>
+        <li><a href="#toc-demo-usage">Usage</a>
+          <ul><li><a href="#toc-demo-props">Props</a></li></ul>
+        </li>
+        <li><a href="#toc-demo-a11y">Accessibility</a></li>
+      </ul>
+    </bs-table-of-contents>
+  `,
+};

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

@@ -0,0 +1,66 @@
+import { render, h, describe, it, expect } from "@stencil/vitest";
+import { assertShadowParts, assertCssCustomProperties, runAxeCheck } from "../../test/helpers/conventions";
+import { blockLinkNavigation } from "../../test/helpers/block-link-navigation";
+blockLinkNavigation();
+const q = (el, s) => el.shadowRoot.querySelector(s);
+describe('bs-tag', () => {
+    it('renders a neutral md tag with its label and no remove button or link', async () => {
+        const { root } = await render(h("bs-tag", null, "Design"));
+        expect(root).toEqualAttribute('color', 'neutral');
+        expect(root).toEqualAttribute('size', 'md');
+        expect(q(root, '[part="label"]').tagName).toBe('SPAN');
+        expect(q(root, '[part="remove"]')).toBeNull();
+        assertShadowParts(root.shadowRoot, ['container', 'icon', 'label']);
+        assertCssCustomProperties(root, ['--bs-tag-height', '--bs-tag-bg', '--bs-tag-color', '--bs-tag-padding-x']);
+    });
+    it('sizes change the height', async () => {
+        const heights = [];
+        for (const size of ['sm', 'md', 'lg']) {
+            const { root } = await render(h("bs-tag", { size: size }, "T"));
+            heights.push(Math.round(q(root, '[part="container"]').getBoundingClientRect().height));
+        }
+        expect(heights[0]).toBeLessThan(heights[1]);
+        expect(heights[1]).toBeLessThan(heights[2]);
+    });
+    it('colours change the background', async () => {
+        const bgs = new Set();
+        for (const color of ['neutral', 'info', 'success', 'warning', 'error']) {
+            const { root } = await render(h("bs-tag", { color: color }, "T"));
+            bgs.add(getComputedStyle(q(root, '[part="container"]')).backgroundColor);
+        }
+        expect(bgs.size).toBeGreaterThan(1);
+    });
+    it('renders the label as a link with href, adding rel for _blank', async () => {
+        const { root } = await render(h("bs-tag", { href: "/topics/design", target: "_blank" }, "Design"));
+        const a = q(root, '[part="label"]');
+        expect(a.tagName).toBe('A');
+        expect(a.getAttribute('href')).toBe('/topics/design');
+        expect(a.getAttribute('rel')).toBe('noopener noreferrer');
+    });
+    it('removable shows a remove bs-icon-button named after the label and emits bsRemove', async () => {
+        const { root, waitForChanges } = await render(h("bs-tag", { removable: true }, "Design"));
+        const btn = q(root, '[part="remove"]');
+        expect(btn.tagName).toBe('BS-ICON-BUTTON');
+        expect(btn.size).toBe('xs');
+        expect(btn.ariaLabel).toBe('Remove Design');
+        let n = 0;
+        root.addEventListener('bsRemove', () => n++);
+        btn.click();
+        await waitForChanges();
+        expect(n).toBe(1);
+    });
+    it('uses a custom removeLabel', async () => {
+        const { root } = await render(h("bs-tag", { removable: true, removeLabel: "Fjern" }, "Design"));
+        expect(q(root, '[part="remove"]').ariaLabel).toBe('Fjern Design');
+    });
+    it('shows the icon wrapper only with slotted icon', async () => {
+        const { root } = await render(h("bs-tag", null, h("svg", { slot: "icon", viewBox: "0 0 16 16" }), "Design"));
+        expect(getComputedStyle(q(root, '[part="icon"]')).display).toBe('flex');
+        const { root: plain } = await render(h("bs-tag", null, "Design"));
+        expect(getComputedStyle(q(plain, '[part="icon"]')).display).toBe('none');
+    });
+    it('passes axe (plain, link, removable)', async () => {
+        const { root } = await render(h("div", null, h("bs-tag", { color: "success" }, "Done"), h("bs-tag", { href: "/x" }, "Link"), h("bs-tag", { removable: true }, "Removable")));
+        await runAxeCheck(root);
+    });
+});

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

@@ -0,0 +1,101 @@
+/**
+ * @prop --bs-tag-height: Height. Set per `size` (sm: --bs-spacing-250, md: --bs-spacing-300, lg: --bs-spacing-400).
+ * @prop --bs-tag-padding-x: Horizontal padding. Aliased to --bs-spacing-150.
+ * @prop --bs-tag-gap: Gap between icon, label and remove button. Aliased to --bs-spacing-50.
+ * @prop --bs-tag-radius: Corner radius. Aliased to --bs-border-radius-50.
+ * @prop --bs-tag-icon-size: Icon size. 16px.
+ * @prop --bs-tag-font-size: Set per `size` (sm: --bs-font-size-xs, otherwise --bs-font-size-sm).
+ * @prop --bs-tag-font-weight: Aliased to --bs-font-weight-regular.
+ * @prop --bs-tag-bg: Background. Set per `color` from the shared --bs-chip-bg-*-container tokens.
+ * @prop --bs-tag-color: Text colour. Set per `color` from the shared --bs-chip-text-* tokens.
+ * @prop --bs-tag-focus-ring: Link focus ring colour. Aliased to --bs-border-neutral-focus.
+ */
+:host {
+  display: inline-flex;
+  vertical-align: middle;
+  --bs-tag-height: var(--bs-spacing-300);
+  --bs-tag-padding-x: var(--bs-spacing-150);
+  --bs-tag-gap: var(--bs-spacing-50);
+  --bs-tag-radius: var(--bs-border-radius-50);
+  --bs-tag-icon-size: 16px;
+  --bs-tag-font-size: var(--bs-font-size-sm);
+  --bs-tag-font-weight: var(--bs-font-weight-regular);
+  --bs-tag-bg: var(--bs-chip-bg-neutral-container);
+  --bs-tag-color: var(--bs-chip-text-neutral);
+  --bs-tag-focus-ring: var(--bs-border-neutral-focus);
+}
+:host([size='sm']) {
+  --bs-tag-height: var(--bs-spacing-250);
+  --bs-tag-font-size: var(--bs-font-size-xs);
+}
+:host([size='lg']) {
+  --bs-tag-height: var(--bs-spacing-400);
+}
+:host([color='info']) {
+  --bs-tag-bg: var(--bs-chip-bg-info-container);
+  --bs-tag-color: var(--bs-chip-text-info);
+}
+:host([color='success']) {
+  --bs-tag-bg: var(--bs-chip-bg-success-container);
+  --bs-tag-color: var(--bs-chip-text-success);
+}
+:host([color='warning']) {
+  --bs-tag-bg: var(--bs-chip-bg-warning-container);
+  --bs-tag-color: var(--bs-chip-text-warning);
+}
+:host([color='error']) {
+  --bs-tag-bg: var(--bs-chip-bg-error-container);
+  --bs-tag-color: var(--bs-chip-text-error);
+}
+
+.bs-tag {
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--bs-tag-gap);
+  height: var(--bs-tag-height);
+  padding: 0 var(--bs-tag-padding-x);
+  border-radius: var(--bs-tag-radius);
+  background: var(--bs-tag-bg);
+  color: var(--bs-tag-color);
+  font-family: inherit;
+  font-size: var(--bs-tag-font-size);
+  font-weight: var(--bs-tag-font-weight);
+  line-height: 1;
+  white-space: nowrap;
+}
+.bs-tag--removable {
+  padding-inline-end: var(--bs-spacing-50);
+}
+.bs-tag__icon {
+  display: none;
+  flex-shrink: 0;
+  width: var(--bs-tag-icon-size);
+  height: var(--bs-tag-icon-size);
+}
+.bs-tag__icon--visible {
+  display: flex;
+}
+.bs-tag__icon ::slotted(*) {
+  display: block;
+  width: var(--bs-tag-icon-size);
+  height: var(--bs-tag-icon-size);
+}
+.bs-tag__label {
+  color: inherit;
+}
+.bs-tag__label--link {
+  text-decoration: underline;
+  border-radius: var(--bs-border-radius-50);
+}
+.bs-tag__label--link:hover {
+  text-decoration-thickness: 2px;
+}
+.bs-tag__label--link:focus-visible {
+  outline: 2px solid var(--bs-tag-focus-ring);
+  outline-offset: 2px;
+}
+.bs-tag__remove {
+  flex-shrink: 0;
+  color: inherit;
+}