@brandsync/wc 1.12.0 → 1.13.0

package/dist/collection/components/bs-side-panel/bs-side-panel.cmp.test.js

@@ -0,0 +1,117 @@
+import { render, h, describe, it, expect } from "@stencil/vitest";
+describe('bs-side-panel', () => {
+    it('renders nothing when closed', async () => {
+        const { root } = await render(h("bs-side-panel", { heading: "History" }, "Body"));
+        expect(root.shadowRoot.querySelector('[role="dialog"]')).toBeNull();
+    });
+    it('renders a labelled dialog when open', async () => {
+        const { root } = await render(h("bs-side-panel", { open: true, heading: "History" }, "Body"));
+        const dialog = root.shadowRoot.querySelector('[role="dialog"]');
+        const heading = root.shadowRoot.querySelector('[part="heading"]');
+        expect(dialog.getAttribute('aria-labelledby')).toBe(heading.id);
+        expect(heading).toHaveTextContent('History');
+    });
+    it('closes on Escape and emits bsClose', async () => {
+        const { root, waitForChanges, spyOnEvent } = await render(h("bs-side-panel", { open: true, heading: "History" }, "Body"));
+        const spy = spyOnEvent('bsClose');
+        root.shadowRoot.querySelector('[role="dialog"]').dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true, composed: true }));
+        await waitForChanges();
+        expect(spy).toHaveReceivedEvent();
+        expect(root.open).toBe(false);
+    });
+    it('closes via the close button, using closeLabel', async () => {
+        const { root, waitForChanges, spyOnEvent } = await render(h("bs-side-panel", { open: true, heading: "H", closeLabel: "Dismiss" }, "Body"));
+        const spy = spyOnEvent('bsClose');
+        const btn = root.shadowRoot.querySelector('bs-icon-button');
+        expect(btn.getAttribute('aria-label') ?? btn.ariaLabel).toBe('Dismiss');
+        btn.click();
+        await waitForChanges();
+        expect(spy).toHaveReceivedEvent();
+        expect(root.open).toBe(false);
+    });
+    it('only renders the overlay when requested, and overlay click closes', async () => {
+        const { root, waitForChanges } = await render(h("bs-side-panel", { open: true, overlay: true, heading: "H" }, "Body"));
+        const overlay = root.shadowRoot.querySelector('[part="overlay"]');
+        expect(overlay).not.toBeNull();
+        overlay.click();
+        await waitForChanges();
+        expect(root.open).toBe(false);
+    });
+    it('has no overlay by default and reflects side', async () => {
+        const { root } = await render(h("bs-side-panel", { open: true, side: "start", heading: "H" }));
+        expect(root.shadowRoot.querySelector('[part="overlay"]')).toBeNull();
+        expect(root).toEqualAttribute('side', 'start');
+    });
+    it('moves focus in on open and restores it on close', async () => {
+        const outer = document.createElement('button');
+        document.body.appendChild(outer);
+        outer.focus();
+        const { root, waitForChanges } = await render(h("bs-side-panel", { heading: "H" }, "Body"));
+        outer.focus();
+        root.open = true;
+        await waitForChanges();
+        expect(document.activeElement).toBe(root);
+        expect(root.shadowRoot.activeElement).toBe(root.shadowRoot.querySelector('[role="dialog"]'));
+        root.open = false;
+        await waitForChanges();
+        expect(document.activeElement).toBe(outer);
+        outer.remove();
+    });
+    it('sets aria-modal on the dialog', async () => {
+        const { root } = await render(h("bs-side-panel", { open: true, heading: "H" }));
+        expect(root.shadowRoot.querySelector('[role="dialog"]')).toEqualAttribute('aria-modal', 'true');
+    });
+    it('traps Tab and Shift+Tab through slotted content', async () => {
+        const { root, waitForChanges } = await render(h("bs-side-panel", { open: true, heading: "H" }, h("button", { id: "a" }, "A"), h("button", { id: "b" }, "B")));
+        await waitForChanges();
+        const a = root.querySelector('#a');
+        const b = root.querySelector('#b');
+        const key = (target, shiftKey = false) => {
+            const ev = new KeyboardEvent('keydown', { key: 'Tab', shiftKey, bubbles: true, composed: true, cancelable: true });
+            target.dispatchEvent(ev);
+            return ev;
+        };
+        b.focus();
+        expect(key(b).defaultPrevented).toBe(true);
+        // Forward from the last focusable wraps to the first (the header close button).
+        expect(root.shadowRoot.activeElement).not.toBeNull();
+        expect(document.activeElement).toBe(root);
+        a.focus();
+        expect(key(a, true).defaultPrevented).toBe(false);
+        // Shift+Tab from the first focusable (close button) wraps to the last slotted element.
+        const close = root.shadowRoot.querySelector('bs-icon-button');
+        close.focus();
+        expect(key(close, true).defaultPrevented).toBe(true);
+        expect(document.activeElement).toBe(b);
+    });
+    it('makes siblings inert with overlay and restores prior state', async () => {
+        const plain = document.createElement('div');
+        const already = document.createElement('div');
+        already.inert = true;
+        const { root, waitForChanges } = await render(h("bs-side-panel", { heading: "H", overlay: true }));
+        document.body.append(plain, already);
+        root.open = true;
+        await waitForChanges();
+        expect(plain.inert).toBe(true);
+        expect(root.inert).toBe(false);
+        root.open = false;
+        await waitForChanges();
+        expect(plain.inert).toBe(false);
+        expect(already.inert).toBe(true);
+        plain.remove();
+        already.remove();
+    });
+    it('does not set inert without overlay, and restores on disconnect', async () => {
+        const plain = document.createElement('div');
+        const { root, waitForChanges } = await render(h("bs-side-panel", { heading: "H", open: true }));
+        document.body.append(plain);
+        await waitForChanges();
+        expect(plain.inert).toBe(false);
+        root.overlay = true;
+        await waitForChanges();
+        expect(plain.inert).toBe(true);
+        root.remove();
+        expect(plain.inert).toBe(false);
+        plain.remove();
+    });
+});

package/dist/collection/components/bs-side-panel/bs-side-panel.css

@@ -0,0 +1,77 @@
+:host {
+  --bs-side-panel-bg: var(--bs-surface-raised);
+  --bs-side-panel-width: calc(var(--bs-scale-1600) * 3);
+  --bs-side-panel-padding: var(--bs-spacing-200);
+  --bs-side-panel-shadow: var(--bs-shadow-md);
+  --bs-side-panel-overlay-bg: var(--bs-surface-overlay);
+  --bs-side-panel-color: var(--bs-text-default);
+  --bs-side-panel-z-index: var(--bs-z-index-modal);
+}
+
+.bs-side-panel {
+  position: fixed;
+  inset: 0;
+  z-index: var(--bs-side-panel-z-index);
+  pointer-events: none;
+}
+
+.bs-side-panel__overlay {
+  position: absolute;
+  inset: 0;
+  background: var(--bs-side-panel-overlay-bg);
+  pointer-events: auto;
+}
+
+.bs-side-panel__panel {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  width: var(--bs-side-panel-width);
+  max-width: 100%;
+  background: var(--bs-side-panel-bg);
+  color: var(--bs-side-panel-color);
+  box-shadow: var(--bs-side-panel-shadow);
+  pointer-events: auto;
+  outline: none;
+}
+
+.bs-side-panel--start .bs-side-panel__panel {
+  left: 0;
+}
+
+.bs-side-panel--end .bs-side-panel__panel {
+  right: 0;
+}
+
+.bs-side-panel__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--bs-spacing-100);
+  padding: var(--bs-side-panel-padding);
+}
+
+.bs-side-panel__heading {
+  margin: 0;
+  font-size: var(--bs-font-size-lg);
+  font-weight: var(--bs-font-weight-semibold);
+}
+
+.bs-side-panel__actions {
+  display: flex;
+  align-items: center;
+  gap: var(--bs-spacing-100);
+}
+
+.bs-side-panel__body {
+  flex: 1;
+  overflow-y: auto;
+  padding: 0 var(--bs-side-panel-padding);
+}
+
+.bs-side-panel__footer {
+  padding: var(--bs-side-panel-padding);
+}

package/dist/collection/components/bs-side-panel/bs-side-panel.js

@@ -0,0 +1,325 @@
+import { h } from "@stencil/core";
+let panelId = 0;
+/**
+ * A generic slide-in panel (drawer) anchored to the start or end edge, for history, filters, FAQ
+ * and similar secondary content. Closes via its close button or Escape and emits `bsClose`.
+ *
+ * Composed from `bs-icon-button` (close button).
+ *
+ * While open, Tab/Shift+Tab are trapped in the panel; with `overlay`, the rest of the page is made `inert`.
+ *
+ * ## When to use
+ * - Secondary content that sits beside the page without leaving it.
+ *
+ * ## When not to use
+ * - A blocking confirmation (use `bs-dialog`).
+ *
+ * @slot - Default slot: the panel body.
+ * @slot header-actions - Extra actions shown in the header next to the close button.
+ * @slot footer - Optional footer area (e.g. apply/reset buttons).
+ * @part overlay - The backdrop (only when `overlay` is set).
+ * @part panel - The panel surface (role="dialog").
+ * @part header - The header row.
+ * @part heading - The heading text.
+ * @part body - The scrollable body.
+ * @part footer - The footer wrapper.
+ * @prop --bs-side-panel-bg - Panel background. Aliased to `--bs-surface-raised`.
+ * @prop --bs-side-panel-width - Panel width. Aliased to `calc(var(--bs-scale-1600) * 3)`.
+ * @prop --bs-side-panel-padding - Header/body/footer padding. Aliased to `--bs-spacing-200`.
+ * @prop --bs-side-panel-shadow - Panel shadow. Aliased to `--bs-shadow-md`.
+ * @prop --bs-side-panel-overlay-bg - Backdrop color. Aliased to `--bs-surface-overlay`.
+ * @prop --bs-side-panel-color - Text color. Aliased to `--bs-text-default`.
+ * @prop --bs-side-panel-z-index - Stacking order. Aliased to `--bs-z-index-modal`.
+ */
+export class BsSidePanel {
+    el;
+    /** Whether the panel is visible. */
+    open = false;
+    /** Panel title; also its accessible name. */
+    heading = '';
+    /** Edge the panel is anchored to. */
+    side = 'end';
+    /** Accessible label of the close button. */
+    closeLabel = 'Close';
+    /** Shows a backdrop behind the panel; clicking it closes the panel. */
+    overlay = false;
+    /** Emitted when the panel requests to close (close button, Escape, overlay click). */
+    bsClose;
+    headingId = `bs-side-panel-heading-${++panelId}`;
+    previouslyFocused = null;
+    panelEl;
+    /** Elements we set `inert` on (so we only undo our own changes). */
+    inertified = [];
+    onOpenChange(next) {
+        if (next) {
+            this.previouslyFocused = document.activeElement ?? null;
+            this.applyInert();
+        }
+        else {
+            this.restoreInert();
+            this.previouslyFocused?.focus?.();
+            this.previouslyFocused = null;
+        }
+    }
+    onOverlayChange() {
+        if (!this.open)
+            return;
+        this.restoreInert();
+        this.applyInert();
+    }
+    connectedCallback() {
+        if (this.open)
+            this.applyInert();
+    }
+    disconnectedCallback() {
+        this.restoreInert();
+    }
+    /** Marks everything outside the panel as inert (modal overlay only). */
+    applyInert() {
+        if (!this.overlay || this.inertified.length)
+            return;
+        let node = this.el;
+        while (node && node !== document.body) {
+            const parent = node.parentElement;
+            if (!parent)
+                break;
+            Array.from(parent.children).forEach(sib => {
+                if (sib === node || !(sib instanceof HTMLElement) || sib.inert)
+                    return;
+                sib.inert = true;
+                this.inertified.push(sib);
+            });
+            node = parent;
+        }
+    }
+    restoreInert() {
+        this.inertified.forEach(el => (el.inert = false));
+        this.inertified = [];
+    }
+    getFocusables() {
+        const sel = 'a[href],button:not([disabled]),input:not([disabled]):not([type="hidden"]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"]),bs-icon-button,[contenteditable="true"]';
+        const out = [];
+        const visit = (root) => {
+            Array.from(root.children).forEach(child => {
+                if (child instanceof HTMLSlotElement) {
+                    const assigned = child.assignedElements({ flatten: true });
+                    assigned.forEach(a => consider(a));
+                }
+                else
+                    consider(child);
+            });
+        };
+        const consider = (el) => {
+            if (!(el instanceof HTMLElement) || el.hidden || el.inert)
+                return;
+            if (el.matches(sel) && el.getAttribute('tabindex') !== '-1') {
+                // A custom element that delegates focus is itself the tab stop.
+                out.push(el);
+                return;
+            }
+            visit(el.shadowRoot ?? el);
+        };
+        if (this.panelEl)
+            visit(this.panelEl);
+        return out;
+    }
+    trapTab(ev) {
+        const items = this.getFocusables();
+        if (!items.length) {
+            ev.preventDefault();
+            this.panelEl?.focus();
+            return;
+        }
+        const first = items[0];
+        const last = items[items.length - 1];
+        const path = ev.composedPath();
+        const active = items.find(i => path.includes(i));
+        const atPanel = path[0] === this.panelEl;
+        if (ev.shiftKey && (atPanel || active === first || !active)) {
+            ev.preventDefault();
+            last.focus();
+        }
+        else if (!ev.shiftKey && (active === last || (!active && !atPanel))) {
+            ev.preventDefault();
+            first.focus();
+        }
+    }
+    componentDidRender() {
+        if (this.open && this.panelEl && !this.focusedIn) {
+            this.focusedIn = true;
+            this.panelEl.focus();
+        }
+        else if (!this.open) {
+            this.focusedIn = false;
+        }
+    }
+    focusedIn = false;
+    close = () => {
+        this.open = false;
+        this.bsClose.emit();
+    };
+    onKeyDown = (ev) => {
+        if (ev.key === 'Escape' && this.open) {
+            ev.stopPropagation();
+            this.close();
+        }
+        else if (ev.key === 'Tab' && this.open) {
+            this.trapTab(ev);
+        }
+    };
+    render() {
+        if (!this.open)
+            return null;
+        return (h("div", { class: `bs-side-panel bs-side-panel--${this.side}`, onKeyDown: this.onKeyDown }, this.overlay && h("div", { part: "overlay", class: "bs-side-panel__overlay", onClick: this.close }), h("div", { part: "panel", class: "bs-side-panel__panel", role: "dialog", "aria-modal": "true", "aria-labelledby": this.headingId, tabindex: "-1", ref: el => (this.panelEl = el) }, h("div", { part: "header", class: "bs-side-panel__header" }, h("h2", { part: "heading", id: this.headingId, class: "bs-side-panel__heading" }, this.heading), h("div", { class: "bs-side-panel__actions" }, h("slot", { name: "header-actions" }), h("bs-icon-button", { variant: "subtle", ariaLabel: this.closeLabel, onClick: this.close }, h("svg", { viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true" }, h("path", { d: "M6 6L18 18M18 6L6 18", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round" }))))), h("div", { part: "body", class: "bs-side-panel__body" }, h("slot", null)), h("div", { part: "footer", class: "bs-side-panel__footer" }, h("slot", { name: "footer" })))));
+    }
+    static get is() { return "bs-side-panel"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bs-side-panel.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bs-side-panel.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "open": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the panel is visible."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "open",
+                "defaultValue": "false"
+            },
+            "heading": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Panel title; also its accessible name."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "heading",
+                "defaultValue": "''"
+            },
+            "side": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BsSidePanelSide",
+                    "resolved": "\"end\" | \"start\"",
+                    "references": {
+                        "BsSidePanelSide": {
+                            "location": "local",
+                            "path": "/home/runner/work/eg-brandsync-storybook/eg-brandsync-storybook/packages/wc/src/components/bs-side-panel/bs-side-panel.tsx",
+                            "id": "src/components/bs-side-panel/bs-side-panel.tsx::BsSidePanelSide"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Edge the panel is anchored to."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "side",
+                "defaultValue": "'end'"
+            },
+            "closeLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible label of the close button."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "close-label",
+                "defaultValue": "'Close'"
+            },
+            "overlay": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Shows a backdrop behind the panel; clicking it closes the panel."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "overlay",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "bsClose",
+                "name": "bsClose",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the panel requests to close (close button, Escape, overlay click)."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "open",
+                "methodName": "onOpenChange"
+            }, {
+                "propName": "overlay",
+                "methodName": "onOverlayChange"
+            }];
+    }
+}

package/dist/collection/components/bs-side-panel/bs-side-panel.stories.js

@@ -0,0 +1,24 @@
+import { html } from "lit";
+import { componentDescription } from "../../stories-utils";
+const meta = {
+    title: 'Components/bs-side-panel',
+    parameters: { docs: { description: { component: componentDescription('bs-side-panel') } } },
+    render: args => html `
+    <bs-side-panel ?open=${args.open} heading=${args.heading} side=${args.side} close-label=${args.closeLabel} ?overlay=${args.overlay}>
+      <p>Panel body content.</p>
+      <bs-button slot="footer">Apply</bs-button>
+    </bs-side-panel>
+  `,
+    argTypes: {
+        open: { control: 'boolean' },
+        heading: { control: 'text' },
+        side: { control: 'inline-radio', options: ['start', 'end'] },
+        closeLabel: { control: 'text' },
+        overlay: { control: 'boolean' },
+    },
+    args: { open: true, heading: 'History', side: 'end', closeLabel: 'Close', overlay: false },
+};
+export default meta;
+export const Default = {};
+export const WithOverlay = { name: 'With overlay', args: { overlay: true } };
+export const Start = { name: 'Start side', args: { side: 'start' } };

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

@@ -0,0 +1,49 @@
+import { render, h, describe, it, expect } from "@stencil/vitest";
+describe('bs-skeleton', () => {
+    it('is aria-hidden by default with no role', async () => {
+        const { root } = await render(h("bs-skeleton", null));
+        const c = root.shadowRoot.querySelector('[part="container"]');
+        expect(c).toEqualAttribute('aria-hidden', 'true');
+        expect(c.hasAttribute('role')).toBe(false);
+    });
+    it('uses role="status" + aria-label when label is set', async () => {
+        const { root } = await render(h("bs-skeleton", { label: "Loading profile" }));
+        const c = root.shadowRoot.querySelector('[part="container"]');
+        expect(c).toEqualAttribute('role', 'status');
+        expect(c).toEqualAttribute('aria-label', 'Loading profile');
+        expect(c.hasAttribute('aria-hidden')).toBe(false);
+    });
+    it('renders one line per `lines` for text, with a shorter last line', async () => {
+        const { root } = await render(h("bs-skeleton", { lines: 3 }));
+        const lines = root.shadowRoot.querySelectorAll('[part="line"]');
+        expect(lines.length).toBe(3);
+        expect(lines[2]).toHaveClass('bs-skeleton__line--short');
+        expect(lines[0]).not.toHaveClass('bs-skeleton__line--short');
+    });
+    it('ignores `lines` for non-text variants and clamps invalid values', async () => {
+        const { root, setProps } = await render(h("bs-skeleton", { variant: "rect", lines: 4 }));
+        expect(root.shadowRoot.querySelectorAll('[part="line"]').length).toBe(1);
+        await setProps({ variant: 'text', lines: 0 });
+        expect(root.shadowRoot.querySelectorAll('[part="line"]').length).toBe(1);
+    });
+    it('applies the variant class and width/height inline', async () => {
+        const { root } = await render(h("bs-skeleton", { variant: "rect", width: "200px", height: "40px" }));
+        const line = root.shadowRoot.querySelector('[part="line"]');
+        expect(line).toHaveClass('bs-skeleton__line--rect');
+        expect(line.style.width).toBe('200px');
+        expect(line.style.height).toBe('40px');
+    });
+    it('circle mirrors a single dimension', async () => {
+        const { root } = await render(h("bs-skeleton", { variant: "circle", width: "48px" }));
+        const line = root.shadowRoot.querySelector('[part="line"]');
+        expect(line.style.width).toBe('48px');
+        expect(line.style.height).toBe('48px');
+    });
+    it('animated toggles the animation class', async () => {
+        const { root, setProps } = await render(h("bs-skeleton", null));
+        const c = root.shadowRoot.querySelector('[part="container"]');
+        expect(c).toHaveClass('bs-skeleton--animated');
+        await setProps({ animated: false });
+        expect(c).not.toHaveClass('bs-skeleton--animated');
+    });
+});

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

@@ -0,0 +1,62 @@
+:host {
+  display: block;
+  --bs-skeleton-bg: var(--bs-color-neutral-container);
+  --bs-skeleton-radius: var(--bs-border-radius-100);
+  --bs-skeleton-width: 100%;
+  --bs-skeleton-text-height: 1em;
+  --bs-skeleton-rect-height: 96px;
+  --bs-skeleton-gap: var(--bs-spacing-100);
+  --bs-skeleton-duration: 1.5s;
+}
+
+.bs-skeleton {
+  display: flex;
+  flex-direction: column;
+  gap: var(--bs-skeleton-gap);
+}
+
+.bs-skeleton__line {
+  display: block;
+  max-width: 100%;
+  width: var(--bs-skeleton-width);
+  background: var(--bs-skeleton-bg);
+  border-radius: var(--bs-skeleton-radius);
+}
+
+.bs-skeleton__line--text {
+  height: var(--bs-skeleton-text-height);
+}
+
+.bs-skeleton__line--rect {
+  height: var(--bs-skeleton-rect-height);
+}
+
+.bs-skeleton__line--circle {
+  height: var(--bs-skeleton-rect-height);
+  width: var(--bs-skeleton-rect-height);
+  border-radius: var(--bs-border-radius-full);
+}
+
+.bs-skeleton__line--short {
+  width: 60%;
+}
+
+.bs-skeleton--animated .bs-skeleton__line {
+  animation: bs-skeleton-pulse var(--bs-skeleton-duration) ease-in-out infinite;
+}
+
+@keyframes bs-skeleton-pulse {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .bs-skeleton--animated .bs-skeleton__line {
+    animation: none;
+  }
+}