@brandsync/wc 1.19.0 → 1.20.0

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

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

@@ -0,0 +1,233 @@
+import { Host, h } from "@stencil/core";
+/**
+ * A small label that categorises or annotates an item (a topic, a keyword, a status of a record). It can be
+ * neutral or coloured, optionally removable, and optionally a link.
+ *
+ * ## When to use
+ * - Metadata on a record: topics, categories, keywords, owners.
+ * - A removable tag in a list of applied values you edit one by one (`removable`).
+ * - A tag that leads to a filtered view or detail page (`href`).
+ *
+ * ## When not to use
+ * - A pure count or notification marker -- use `bs-badge`.
+ * - A read-only status pill with a leading icon -- use `bs-chip-informative`.
+ * - Toggling a filter on and off -- use `bs-chip-filter`; entering free text values -- use `bs-chip-input`.
+ *
+ * **Built from:** `bs-icon-button` (the remove control, `size="xs"`).
+ *
+ * @slot - The tag label.
+ * @slot icon - Optional leading icon (16px).
+ * @part container - The tag surface.
+ * @part icon - The icon wrapper.
+ * @part label - The label (a link when `href` is set).
+ * @part remove - The remove button (`bs-icon-button`), only when `removable`.
+ */
+export class BsTag {
+    el;
+    /** Semantic colour. `neutral` is the default. */
+    color = 'neutral';
+    /** Sizing scale. */
+    size = 'md';
+    /** Shows a remove button that emits `bsRemove`. The consumer removes the tag. */
+    removable = false;
+    /** Turns the label into a link to this URL. */
+    href;
+    /** Link target, only used with `href`. */
+    target;
+    /** Prefix of the remove button's accessible name ("Remove {label}"). */
+    removeLabel = 'Remove';
+    /** Fires when the remove button is activated. No payload; the consumer removes the element. */
+    bsRemove;
+    hasIcon = false;
+    labelText = '';
+    componentWillLoad() {
+        this.hasIcon = Array.from(this.el.children).some(c => c.getAttribute('slot') === 'icon');
+        this.labelText = this.readLabel();
+    }
+    readLabel() {
+        return Array.from(this.el.childNodes)
+            .filter(n => !(n.nodeType === Node.ELEMENT_NODE && n.hasAttribute('slot')))
+            .map(n => n.textContent || '')
+            .join('')
+            .trim();
+    }
+    onRemove = () => {
+        this.bsRemove.emit();
+    };
+    render() {
+        const rel = this.href && this.target === '_blank' ? 'noopener noreferrer' : undefined;
+        const label = h("slot", { key: '08ceba56454f3419009e4714cdb264cf377a2ca1', onSlotchange: () => (this.labelText = this.readLabel()) });
+        return (h(Host, { key: '02747ac2c8afd9204257bbcd212bdf6db5c061fe' }, h("span", { key: '2f65cb5c37463a196f79e5a0149e0be810ae15ff', part: "container", class: { 'bs-tag': true, 'bs-tag--removable': this.removable } }, h("span", { key: '7520ed22f21e2fb3dbaa24113cf7740de1a52dcc', part: "icon", class: { 'bs-tag__icon': true, 'bs-tag__icon--visible': this.hasIcon } }, h("slot", { key: 'e6ccfd5de8815950e466a107d731a817fa5d2f06', name: "icon", onSlotchange: (e) => (this.hasIcon = e.target.assignedNodes().length > 0) })), this.href ? (h("a", { part: "label", class: "bs-tag__label bs-tag__label--link", href: this.href, target: this.target, rel: rel }, label)) : (h("span", { part: "label", class: "bs-tag__label" }, label)), this.removable && (h("bs-icon-button", { key: 'fddf2c1f5c3e8a12cd317a19652e800837c741ea', part: "remove", class: "bs-tag__remove", size: "xs", variant: "subtle", ariaLabel: `${this.removeLabel} ${this.labelText}`.trim(), onClick: this.onRemove }, h("svg", { key: '7c708bd1a08d9c8897bdb9e76b133fa2ed52a3e7', viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" }, h("path", { key: 'b7641a61417f15eddf96fa9e580dd999b2077d08', d: "M12.5 3.5L3.5 12.5M12.5 12.5L3.5 3.5", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })))))));
+    }
+    static get is() { return "bs-tag"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bs-tag.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bs-tag.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "color": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BsTagColor",
+                    "resolved": "\"error\" | \"info\" | \"neutral\" | \"success\" | \"warning\"",
+                    "references": {
+                        "BsTagColor": {
+                            "location": "local",
+                            "path": "/home/runner/work/eg-brandsync-storybook/eg-brandsync-storybook/packages/wc/src/components/bs-tag/bs-tag.tsx",
+                            "id": "src/components/bs-tag/bs-tag.tsx::BsTagColor"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Semantic colour. `neutral` is the default."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "color",
+                "defaultValue": "'neutral'"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BsTagSize",
+                    "resolved": "\"lg\" | \"md\" | \"sm\"",
+                    "references": {
+                        "BsTagSize": {
+                            "location": "local",
+                            "path": "/home/runner/work/eg-brandsync-storybook/eg-brandsync-storybook/packages/wc/src/components/bs-tag/bs-tag.tsx",
+                            "id": "src/components/bs-tag/bs-tag.tsx::BsTagSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sizing scale."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "size",
+                "defaultValue": "'md'"
+            },
+            "removable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Shows a remove button that emits `bsRemove`. The consumer removes the tag."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "removable",
+                "defaultValue": "false"
+            },
+            "href": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Turns the label into a link to this URL."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "href"
+            },
+            "target": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Link target, only used with `href`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "target"
+            },
+            "removeLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Prefix of the remove button's accessible name (\"Remove {label}\")."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "remove-label",
+                "defaultValue": "'Remove'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "hasIcon": {},
+            "labelText": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "bsRemove",
+                "name": "bsRemove",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires when the remove button is activated. No payload; the consumer removes the element."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+}

package/dist/collection/components/bs-tag/bs-tag.stories.js

@@ -0,0 +1,59 @@
+import { html } from "lit";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { componentDescription } from "../../stories-utils";
+const meta = {
+    title: 'Components/bs-tag',
+    parameters: { docs: { description: { component: componentDescription('bs-tag') } } },
+    argTypes: {
+        label: { control: 'text' },
+        color: { control: 'select', options: ['neutral', 'info', 'success', 'warning', 'error'] },
+        size: { control: 'select', options: ['sm', 'md', 'lg'] },
+        removable: { control: 'boolean' },
+        href: { control: 'text' },
+    },
+    args: { label: 'Design', color: 'neutral', size: 'md', removable: false, href: '' },
+    render: args => html `
+    <bs-tag color=${args.color} size=${args.size} ?removable=${args.removable} href=${ifDefined(args.href || undefined)}>${args.label}</bs-tag>
+  `,
+};
+export default meta;
+export const Default = {};
+export const Colors = {
+    render: () => html `
+    <div style="display:flex;gap:8px;flex-wrap:wrap">
+      <bs-tag>Neutral</bs-tag>
+      <bs-tag color="info">Info</bs-tag>
+      <bs-tag color="success">Success</bs-tag>
+      <bs-tag color="warning">Warning</bs-tag>
+      <bs-tag color="error">Error</bs-tag>
+    </div>
+  `,
+};
+export const Sizes = {
+    render: () => html `
+    <div style="display:flex;gap:8px;align-items:center">
+      <bs-tag size="sm">Small</bs-tag>
+      <bs-tag size="md">Medium</bs-tag>
+      <bs-tag size="lg">Large</bs-tag>
+    </div>
+  `,
+};
+export const Removable = {
+    parameters: { docs: { description: { story: 'Clicking the remove button only emits `bsRemove`; here the handler removes the element.' } } },
+    render: () => html `
+    <div style="display:flex;gap:8px;flex-wrap:wrap" @bsRemove=${(e) => e.target.remove()}>
+      <bs-tag removable>Design</bs-tag>
+      <bs-tag removable color="info">Research</bs-tag>
+      <bs-tag removable color="success">Shipped</bs-tag>
+    </div>
+  `,
+};
+export const AsLink = {
+    name: 'As link',
+    render: () => html `
+    <div style="display:flex;gap:8px">
+      <bs-tag href="#design">Design</bs-tag>
+      <bs-tag href="#research" color="info">Research</bs-tag>
+    </div>
+  `,
+};

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

@@ -0,0 +1,33 @@
+import { render, h, describe, it, expect } from "@stencil/vitest";
+import { runAxeCheck } from "../../test/helpers/conventions";
+const el = (host) => host.shadowRoot.querySelector('[part="text"]');
+describe('bs-text', () => {
+    it('renders a body paragraph by default', async () => {
+        const { root } = await render(h("bs-text", null, "Hello"));
+        expect(el(root).tagName).toBe('P');
+        expect(getComputedStyle(el(root)).fontSize).toBe('16px');
+    });
+    it('maps variants to the type scale', async () => {
+        const sizes = { lead: '18px', body: '16px', small: '14px', caption: '12px' };
+        for (const [variant, px] of Object.entries(sizes)) {
+            const { root } = await render(h("bs-text", { variant: variant }, "T"));
+            expect(getComputedStyle(el(root)).fontSize).toBe(px);
+        }
+    });
+    it('`as` picks the element independently of the variant', async () => {
+        const { root } = await render(h("bs-text", { as: "span", variant: "caption" }, "T"));
+        expect(el(root).tagName).toBe('SPAN');
+        expect(getComputedStyle(el(root)).fontSize).toBe('12px');
+        expect(getComputedStyle(root).display).toBe('inline');
+    });
+    it('tone switches the colour; inherit follows the parent', async () => {
+        const { root } = await render(h("div", { style: { color: 'rgb(9, 8, 7)' } }, h("bs-text", { tone: "inherit" }, "T")));
+        expect(getComputedStyle(el(root.querySelector('bs-text'))).color).toBe('rgb(9, 8, 7)');
+        const { root: err } = await render(h("bs-text", { tone: "error" }, "T"));
+        expect(getComputedStyle(el(err)).color).not.toBe('rgb(9, 8, 7)');
+    });
+    it('passes axe', async () => {
+        const { root } = await render(h("bs-text", null, "Some text"));
+        await runAxeCheck(root);
+    });
+});

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

@@ -0,0 +1,48 @@
+/**
+ * @prop --bs-text-color: Text colour. Set per `tone` on the host from the --bs-text-* tokens (default: --bs-text-default).
+ * @prop --bs-text-font-family: Font family. Aliased to --bs-typography-font-family-body.
+ * @prop --bs-text-font-weight: Font weight. Aliased to --bs-font-weight-regular.
+ * @prop --bs-text-font-size: Font size. Set per `variant`: lead --bs-font-size-lg, body --bs-font-size-md, small --bs-font-size-sm, caption --bs-font-size-xs.
+ * @prop --bs-text-line-height: Line height. Aliased to --bs-line-height-normal.
+ */
+:host {
+  display: block;
+
+  --bs-text-color: var(--bs-text-default);
+  --bs-text-font-family: var(--bs-typography-font-family-body);
+  --bs-text-font-weight: var(--bs-font-weight-regular);
+  --bs-text-line-height: var(--bs-line-height-normal);
+}
+
+:host([as='span']),
+:host([as='small']),
+:host([as='strong']),
+:host([as='em']),
+:host([as='label']) {
+  display: inline;
+}
+
+:host([tone='secondary']) { --bs-text-color: var(--bs-text-secondary); }
+:host([tone='muted']) { --bs-text-color: var(--bs-text-muted); }
+:host([tone='action']) { --bs-text-color: var(--bs-text-action); }
+:host([tone='link']) { --bs-text-color: var(--bs-text-link); }
+:host([tone='success']) { --bs-text-color: var(--bs-text-success); }
+:host([tone='info']) { --bs-text-color: var(--bs-text-info); }
+:host([tone='warning']) { --bs-text-color: var(--bs-text-warning); }
+:host([tone='error']) { --bs-text-color: var(--bs-text-error); }
+:host([tone='inverse']) { --bs-text-color: var(--bs-text-inverse); }
+:host([tone='inherit']) { --bs-text-color: inherit; }
+
+.bs-text {
+  margin: 0;
+  font-family: var(--bs-text-font-family);
+  font-weight: var(--bs-text-font-weight);
+  font-size: var(--bs-text-font-size);
+  line-height: var(--bs-text-line-height);
+  color: var(--bs-text-color);
+}
+
+.bs-text--lead { --bs-text-font-size: var(--bs-font-size-lg); }
+.bs-text--body { --bs-text-font-size: var(--bs-font-size-md); }
+.bs-text--small { --bs-text-font-size: var(--bs-font-size-sm); }
+.bs-text--caption { --bs-text-font-size: var(--bs-font-size-xs); }