@brandsync/wc 0.0.1

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

@@ -0,0 +1,242 @@
+import { h } from "@stencil/core";
+/**
+ * A clickable action element for the single most important action in a given context.
+ *
+ * ## When to use
+ * - The primary call to action on a screen or within a card/modal (e.g. "Book room", "Confirm").
+ * - Secondary, lower-emphasis actions alongside it (use `variant="neutral"`).
+ * - `variant="error"` for destructive/irreversible actions (e.g. "Delete account") — per
+ *   BrandSync guidance, destructive actions should always use the error variant, never
+ *   `neutral`, so the visual weight matches the risk of the action.
+ *
+ * ## When not to use
+ * - For navigation between pages — use a link/nav component instead, a button implies an
+ *   in-page action, not a destination change.
+ * - For more than one primary-emphasis action in the same view — pick one, demote the rest to
+ *   `neutral`.
+ * - `error` purely for visual emphasis — it signals a destructive action to the user, so reserve
+ *   it for actions that actually delete/revoke/undo something.
+ *
+ * @slot - Default slot: the button's label content.
+ * @slot icon - Optional leading icon, rendered before the label.
+ * @slot end-icon - Optional trailing icon, rendered after the label.
+ * @part icon - The icon wrapper element.
+ * @part label - The text label element.
+ * @part end-icon - The trailing icon wrapper element.
+ * @prop --bs-button-radius - Corner radius. Aliased to `--bs-border-radius-100` by default.
+ * @prop --bs-button-height-sm - Height at `size="sm"`. Aliased to `--bs-spacing-500`.
+ * @prop --bs-button-height-md - Height at `size="md"`. Aliased to `--bs-spacing-600`.
+ * @prop --bs-button-height-lg - Height at `size="lg"`. Aliased to `--bs-spacing-700`.
+ */
+export class BsButton {
+    el;
+    /**
+     * Visual style. Maps directly to the brandsync-tokens `--bs-button-*` semantic set.
+     * `error` is for destructive/irreversible actions per BrandSync guidance, not a stronger
+     * emphasis alternative to `primary`.
+     */
+    variant = 'primary';
+    /** Sizing scale. */
+    size = 'md';
+    /** Disables the button and applies the disabled token set. */
+    disabled = false;
+    /** Native `<button>` type. */
+    type = 'button';
+    /**
+     * Accessible name for the button. Required for icon-only usage (no visible label text via the
+     * default slot) so screen readers still announce what the button does. Stencil reflects this
+     * camelCase prop to the `aria-label` HTML attribute automatically.
+     */
+    ariaLabel = null;
+    /** Tracks whether the `icon` slot has assigned content, so the icon/label gap only
+     * applies when there's actually an icon. */
+    hasIcon = false;
+    /** Tracks whether the `end-icon` slot has assigned content, so the icon/label gap only
+     * applies when there's actually a trailing icon. */
+    hasEndIcon = false;
+    /**
+     * Tracks whether the default (label) slot has assigned content, so an icon-only button can be
+     * styled/sized differently (see `bs-button--icon-only`).
+     *
+     * Known edge case (not fixed, same simplification `hasIcon`/similar flags elsewhere in this
+     * codebase already make): a default slot containing only whitespace (e.g. a lone space text
+     * node) still counts as `hasLabel = true`, since checking for assigned nodes doesn't
+     * distinguish whitespace-only text nodes from real content.
+     */
+    hasLabel = false;
+    /**
+     * Computes the initial `hasIcon`/`hasEndIcon`/`hasLabel` state directly from the host's light
+     * DOM children, before first render.
+     *
+     * This can't be left to the `slotchange` handlers below alone: `slotchange` only fires when a
+     * slot's *assigned nodes* change, and a slot that starts out with zero assigned nodes and stays
+     * that way never fires it (nothing changed). Relying on `slotchange` alone left an icon-only
+     * button (default slot empty from the start) permanently stuck on its initial `hasLabel`
+     * default, so `bs-button--icon-only` never applied.
+     */
+    componentWillLoad() {
+        this.hasIcon = this.hasSlottedContent('icon');
+        this.hasEndIcon = this.hasSlottedContent('end-icon');
+        this.hasLabel = this.hasSlottedContent(null);
+    }
+    hasSlottedContent(slotName) {
+        return Array.from(this.el.childNodes).some(node => {
+            if (node.nodeType === Node.ELEMENT_NODE) {
+                return node.getAttribute('slot') === slotName;
+            }
+            // Only elements can carry a `slot` attribute -- any other node type (text, comments) can
+            // only ever be assigned to the default slot.
+            return slotName === null;
+        });
+    }
+    onIconSlotchange = (ev) => {
+        this.hasIcon = ev.target.assignedNodes().length > 0;
+    };
+    onEndIconSlotchange = (ev) => {
+        this.hasEndIcon = ev.target.assignedNodes().length > 0;
+    };
+    onLabelSlotchange = (ev) => {
+        this.hasLabel = ev.target.assignedNodes().length > 0;
+    };
+    render() {
+        const iconOnly = (this.hasIcon || this.hasEndIcon) && !this.hasLabel;
+        return (h("button", { key: 'eae5915f036d18b43b9b1ff94272fe27aa119d0e', class: `bs-button bs-button--${this.variant} bs-button--${this.size} ${iconOnly ? 'bs-button--icon-only' : ''}`, type: this.type, disabled: this.disabled, "aria-label": this.ariaLabel }, h("span", { key: 'ee58ccc6f8390663e67a7d7a03fe6113782805e7', part: "icon", class: `bs-button__icon ${this.hasIcon ? 'bs-button__icon--visible' : ''}` }, h("slot", { key: '526ec7b4fd274bbdb6dc1edb38c33917c26337ee', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: '3e0121dc4dc975b449b03e5ac5f55d1f6001e806', part: "label", class: "bs-button__label" }, h("slot", { key: '4ab00b8b91f0513af74faac4ae7b39f9a975dde5', onSlotchange: this.onLabelSlotchange })), h("span", { key: '3f64f1122c5ed1da1bb9cb869490395f1e11b3fb', part: "end-icon", class: `bs-button__end-icon ${this.hasEndIcon ? 'bs-button__end-icon--visible' : ''}` }, h("slot", { key: 'ca79d7ed3cd80c6abc3f17c4f9d215ed69c13059', name: "end-icon", onSlotchange: this.onEndIconSlotchange }))));
+    }
+    static get is() { return "bs-button"; }
+    static get encapsulation() { return "shadow"; }
+    static get delegatesFocus() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bs-button.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bs-button.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BsButtonVariant",
+                    "resolved": "\"error\" | \"info\" | \"neutral\" | \"outlined\" | \"primary\" | \"subtle\" | \"success\" | \"warning\"",
+                    "references": {
+                        "BsButtonVariant": {
+                            "location": "local",
+                            "path": "/Users/vivka/brandsync-web-components/src/components/bs-button/bs-button.tsx",
+                            "id": "src/components/bs-button/bs-button.tsx::BsButtonVariant"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Visual style. Maps directly to the brandsync-tokens `--bs-button-*` semantic set.\n`error` is for destructive/irreversible actions per BrandSync guidance, not a stronger\nemphasis alternative to `primary`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant",
+                "defaultValue": "'primary'"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BsButtonSize",
+                    "resolved": "\"lg\" | \"md\" | \"sm\"",
+                    "references": {
+                        "BsButtonSize": {
+                            "location": "local",
+                            "path": "/Users/vivka/brandsync-web-components/src/components/bs-button/bs-button.tsx",
+                            "id": "src/components/bs-button/bs-button.tsx::BsButtonSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sizing scale."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "'md'"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disables the button and applies the disabled token set."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'button' | 'submit' | 'reset'",
+                    "resolved": "\"button\" | \"reset\" | \"submit\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Native `<button>` type."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "type",
+                "defaultValue": "'button'"
+            },
+            "ariaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible name for the button. Required for icon-only usage (no visible label text via the\ndefault slot) so screen readers still announce what the button does. Stencil reflects this\ncamelCase prop to the `aria-label` HTML attribute automatically."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aria-label",
+                "defaultValue": "null"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "hasIcon": {},
+            "hasEndIcon": {},
+            "hasLabel": {}
+        };
+    }
+    static get elementRef() { return "el"; }
+}

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

@@ -0,0 +1,145 @@
+import { html } from "lit";
+import { componentDescription, propDescription } from "../../stories-utils";
+const variants = ['primary', 'neutral', 'subtle', 'outlined', 'success', 'warning', 'info', 'error'];
+const sizes = ['sm', 'md', 'lg'];
+const meta = {
+    title: 'Components/bs-button',
+    parameters: { docs: { description: { component: componentDescription('bs-button') } } },
+    render: args => html `
+    <bs-button variant=${args.variant} size=${args.size} type=${args.type} ?disabled=${args.disabled}>
+      ${args.label}
+    </bs-button>
+  `,
+    argTypes: {
+        variant: { control: 'select', options: variants, description: propDescription('bs-button', 'variant') },
+        size: { control: 'select', options: sizes, description: propDescription('bs-button', 'size') },
+        disabled: { control: 'boolean', description: propDescription('bs-button', 'disabled') },
+        type: { control: 'select', options: ['button', 'submit', 'reset'], description: propDescription('bs-button', 'type') },
+        label: { control: 'text', description: 'Slotted label content (not a real attribute -- see the default slot).' },
+    },
+    args: {
+        variant: 'primary',
+        size: 'md',
+        disabled: false,
+        type: 'button',
+        label: 'Click me',
+    },
+};
+export default meta;
+export const Primary = {};
+export const Neutral = {
+    args: { variant: 'neutral' },
+};
+export const Subtle = {
+    args: { variant: 'subtle' },
+};
+export const Outlined = {
+    args: { variant: 'outlined' },
+};
+export const Success = {
+    args: { variant: 'success' },
+};
+export const Warning = {
+    args: { variant: 'warning' },
+};
+export const Info = {
+    args: { variant: 'info' },
+};
+export const Error = {
+    args: { variant: 'error' },
+};
+export const Disabled = {
+    args: { disabled: true },
+};
+export const NeutralDisabled = {
+    name: 'Neutral, disabled',
+    args: { variant: 'neutral', disabled: true },
+};
+export const Sizes = {
+    render: () => html `
+    <div style="display:flex; gap:12px; align-items:center;">
+      <bs-button size="sm">Small</bs-button>
+      <bs-button size="md">Medium</bs-button>
+      <bs-button size="lg">Large</bs-button>
+    </div>
+  `,
+};
+export const WithIcon = {
+    name: 'With icon',
+    render: args => html `
+    <bs-button variant=${args.variant} size=${args.size} ?disabled=${args.disabled}>
+      <svg slot="icon" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+        <path d="M13 4L6 11L3 8" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+      </svg>
+      ${args.label}
+    </bs-button>
+  `,
+};
+export const WithEndIcon = {
+    name: 'With end icon',
+    render: args => html `
+    <bs-button variant=${args.variant} size=${args.size} ?disabled=${args.disabled}>
+      ${args.label}
+      <svg slot="end-icon" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+        <path d="M6 3L11 8L6 13" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+      </svg>
+    </bs-button>
+  `,
+};
+export const IconOnly = {
+    name: 'Icon-only',
+    render: args => html `
+    <bs-button variant=${args.variant} size=${args.size} ?disabled=${args.disabled} aria-label="Delete">
+      <svg slot="icon" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+        <path
+          d="M2 4H14M6 4V2.5C6 2.22386 6.22386 2 6.5 2H9.5C9.77614 2 10 2.22386 10 2.5V4M12.5 4L12 13.5C12 13.7761 11.7761 14 11.5 14H4.5C4.22386 14 4 13.7761 4 13.5L3.5 4"
+          stroke="currentColor"
+          stroke-width="1.3"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+      </svg>
+    </bs-button>
+  `,
+};
+export const LongLabel = {
+    name: 'Long label (edge case)',
+    args: { label: 'This button has a much longer label than the icon-and-text layout was designed for' },
+    render: args => html `
+    <div style="max-width: 220px;">
+      <bs-button variant=${args.variant} size=${args.size} ?disabled=${args.disabled}> ${args.label} </bs-button>
+    </div>
+  `,
+};
+export const AllCombinations = {
+    name: 'All variant × size × disabled combinations',
+    render: () => html `
+    <table style="border-collapse: collapse;">
+      <thead>
+        <tr>
+          <th style="text-align:left; padding: 4px 12px;">Variant</th>
+          ${sizes.map(size => html `<th style="text-align:left; padding: 4px 12px;">${size}</th>`)}
+          ${sizes.map(size => html `<th style="text-align:left; padding: 4px 12px;">${size} (disabled)</th>`)}
+        </tr>
+      </thead>
+      <tbody>
+        ${variants.map(variant => html `
+            <tr>
+              <td style="padding: 8px 12px; font-family: monospace;">${variant}</td>
+              ${sizes.map(size => html `<td style="padding: 8px 12px;"><bs-button variant=${variant} size=${size}>Button</bs-button></td>`)}
+              ${sizes.map(size => html `<td style="padding: 8px 12px;"><bs-button variant=${variant} size=${size} disabled>Button</bs-button></td>`)}
+            </tr>
+          `)}
+      </tbody>
+    </table>
+  `,
+};
+export const Skeleton = {
+    render: () => html `
+    <div style="display:flex; gap:12px; align-items:center;">
+      <bs-button-skeleton size="sm"></bs-button-skeleton>
+      <bs-button-skeleton size="md"></bs-button-skeleton>
+      <bs-button-skeleton size="lg"></bs-button-skeleton>
+    </div>
+  `,
+};

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

@@ -0,0 +1,18 @@
+import { render, h, describe, it, expect } from "@stencil/vitest";
+describe('bs-button-skeleton', () => {
+    it('renders with role="status" and aria-label="Loading" by default', async () => {
+        const { root } = await render(h("bs-button-skeleton", null));
+        const container = root.shadowRoot.querySelector('.bs-button-skeleton');
+        expect(container).toEqualAttribute('role', 'status');
+        expect(container).toEqualAttribute('aria-label', 'Loading');
+        expect(container).toHaveClass('bs-button-skeleton--md');
+    });
+    it('applies the correct size class for each size value', async () => {
+        const { root, setProps } = await render(h("bs-button-skeleton", { size: "sm" }));
+        expect(root.shadowRoot.querySelector('.bs-button-skeleton')).toHaveClass('bs-button-skeleton--sm');
+        await setProps({ size: 'md' });
+        expect(root.shadowRoot.querySelector('.bs-button-skeleton')).toHaveClass('bs-button-skeleton--md');
+        await setProps({ size: 'lg' });
+        expect(root.shadowRoot.querySelector('.bs-button-skeleton')).toHaveClass('bs-button-skeleton--lg');
+    });
+});

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

@@ -0,0 +1,46 @@
+:host {
+  display: inline-block;
+  /* Mirrors bs-button.css's height tokens exactly so the skeleton matches the real button's
+   * dimensions -- this doesn't depend on bs-button's internal :host vars since these are two
+   * separate shadow roots. */
+  --bs-button-skeleton-height-sm: var(--bs-spacing-500);
+  --bs-button-skeleton-height-md: var(--bs-spacing-600);
+  --bs-button-skeleton-height-lg: var(--bs-spacing-700);
+  --bs-button-skeleton-width: 96px;
+}
+
+.bs-button-skeleton {
+  display: inline-block;
+  border-radius: var(--bs-border-radius-100);
+  width: var(--bs-button-skeleton-width);
+  background: var(--bs-color-neutral-container);
+  animation: bs-button-skeleton-pulse 1.5s ease-in-out infinite;
+}
+
+.bs-button-skeleton--sm {
+  height: var(--bs-button-skeleton-height-sm);
+}
+
+.bs-button-skeleton--md {
+  height: var(--bs-button-skeleton-height-md);
+}
+
+.bs-button-skeleton--lg {
+  height: var(--bs-button-skeleton-height-lg);
+}
+
+@keyframes bs-button-skeleton-pulse {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .bs-button-skeleton {
+    animation: none;
+  }
+}

package/dist/collection/components/bs-button-skeleton/bs-button-skeleton.js

@@ -0,0 +1,73 @@
+import { h } from "@stencil/core";
+/**
+ * A shape-matched loading placeholder for `bs-button`, shown while the real label/action isn't
+ * known yet (e.g. still being fetched from an API). Sized to match `bs-button`'s `sm`/`md`/`lg`
+ * heights so layout doesn't shift once the real button renders.
+ *
+ * This is not a submit-in-progress spinner — that's a different concern (a button that's
+ * already rendered but waiting on an async action it triggered). Use this component only when
+ * the button itself doesn't exist yet.
+ *
+ * ## When to use
+ * - In place of a `bs-button` whose label/visibility depends on data that hasn't loaded yet.
+ *
+ * ## When not to use
+ * - While a button's own click handler is running (e.g. a submit request in flight) — render the
+ *   real `bs-button` and show its own busy/spinner state instead.
+ *
+ * @part container - The pulsing placeholder element.
+ * @prop --bs-button-skeleton-height-sm - Height at `size="sm"`. Aliased to `--bs-spacing-500`.
+ * @prop --bs-button-skeleton-height-md - Height at `size="md"`. Aliased to `--bs-spacing-600`.
+ * @prop --bs-button-skeleton-height-lg - Height at `size="lg"`. Aliased to `--bs-spacing-700`.
+ * @prop --bs-button-skeleton-width - Placeholder width. Defaults to `96px`.
+ */
+export class BsButtonSkeleton {
+    /** Sizing scale, matching the `bs-button` size it stands in for. */
+    size = 'md';
+    render() {
+        return h("span", { key: 'c54e42fcf6eb065a1a33f2dee8518d12c5797cf3', part: "container", class: `bs-button-skeleton bs-button-skeleton--${this.size}`, role: "status", "aria-label": "Loading" });
+    }
+    static get is() { return "bs-button-skeleton"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bs-button-skeleton.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bs-button-skeleton.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BsButtonSize",
+                    "resolved": "\"lg\" | \"md\" | \"sm\"",
+                    "references": {
+                        "BsButtonSize": {
+                            "location": "import",
+                            "path": "../bs-button/bs-button",
+                            "id": "src/components/bs-button/bs-button.tsx::BsButtonSize",
+                            "referenceLocation": "BsButtonSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sizing scale, matching the `bs-button` size it stands in for."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "'md'"
+            }
+        };
+    }
+}

package/dist/collection/components/bs-button-skeleton/bs-button-skeleton.stories.js

@@ -0,0 +1,25 @@
+import { html } from "lit";
+import { componentDescription, propDescription } from "../../stories-utils";
+const sizes = ['sm', 'md', 'lg'];
+const meta = {
+    title: 'Components/bs-button-skeleton',
+    parameters: { docs: { description: { component: componentDescription('bs-button-skeleton') } } },
+    render: args => html `<bs-button-skeleton size=${args.size}></bs-button-skeleton>`,
+    argTypes: {
+        size: { control: 'select', options: sizes, description: propDescription('bs-button-skeleton', 'size') },
+    },
+    args: {
+        size: 'md',
+    },
+};
+export default meta;
+export const Default = {};
+export const Sizes = {
+    render: () => html `
+    <div style="display:flex; gap:12px; align-items:center;">
+      <bs-button-skeleton size="sm"></bs-button-skeleton>
+      <bs-button-skeleton size="md"></bs-button-skeleton>
+      <bs-button-skeleton size="lg"></bs-button-skeleton>
+    </div>
+  `,
+};

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

@@ -0,0 +1,42 @@
+import { render, h, describe, it, expect } from "@stencil/vitest";
+describe('bs-card', () => {
+    it('defaults to the "raised" surface', async () => {
+        const { root } = await render(h("bs-card", null, "Body content"));
+        const container = root.shadowRoot.querySelector('.bs-card');
+        expect(container).toHaveClass('bs-card--raised');
+    });
+    const surfaces = ['base', 'raised', 'container'];
+    surfaces.forEach(surface => {
+        it(`applies the "${surface}" surface class`, async () => {
+            const { root } = await render(h("bs-card", { surface: surface }, "Body content"));
+            const container = root.shadowRoot.querySelector('.bs-card');
+            expect(container).toHaveClass(`bs-card--${surface}`);
+        });
+    });
+    it('renders the header, default, and footer slot content in their respective parts', async () => {
+        const { root } = await render(h("bs-card", null, h("span", { slot: "header" }, "Booking summary"), "Main content", h("span", { slot: "footer" }, "Actions")));
+        expect(root).toHaveTextContent('Booking summary');
+        expect(root).toHaveTextContent('Main content');
+        expect(root).toHaveTextContent('Actions');
+        const headerSlot = root.shadowRoot.querySelector('[part="header"] slot[name="header"]');
+        const bodySlot = root.shadowRoot.querySelector('[part="body"] slot:not([name])');
+        const footerSlot = root.shadowRoot.querySelector('[part="footer"] slot[name="footer"]');
+        expect(headerSlot).toBeTruthy();
+        expect(bodySlot).toBeTruthy();
+        expect(footerSlot).toBeTruthy();
+    });
+    it('exposes container, header, body, and footer parts', async () => {
+        const { root } = await render(h("bs-card", null, "Body content"));
+        expect(root.shadowRoot.querySelector('[part="container"]')).toBeTruthy();
+        expect(root.shadowRoot.querySelector('[part="header"]')).toBeTruthy();
+        expect(root.shadowRoot.querySelector('[part="body"]')).toBeTruthy();
+        expect(root.shadowRoot.querySelector('[part="footer"]')).toBeTruthy();
+    });
+    it('renders empty header/footer wrappers when no slotted content is provided', async () => {
+        const { root } = await render(h("bs-card", null, "Body content only"));
+        const header = root.shadowRoot.querySelector('.bs-card__header');
+        const footer = root.shadowRoot.querySelector('.bs-card__footer');
+        expect(header.textContent.trim()).toBe('');
+        expect(footer.textContent.trim()).toBe('');
+    });
+});

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

@@ -0,0 +1,31 @@
+:host {
+  display: block;
+}
+
+.bs-card {
+  border: 1px solid var(--bs-paper-border-surface);
+  border-radius: var(--bs-border-radius-150);
+  padding: var(--bs-spacing-400);
+  font-family: inherit;
+}
+
+.bs-card--base {
+  background: var(--bs-paper-bg-base);
+}
+
+.bs-card--raised {
+  background: var(--bs-paper-bg-raised);
+  box-shadow: var(--bs-shadow-sm);
+}
+
+.bs-card--container {
+  background: var(--bs-paper-bg-container);
+}
+
+.bs-card__header ::slotted(*) {
+  margin: 0 0 var(--bs-spacing-300) 0;
+}
+
+.bs-card__footer ::slotted(*) {
+  margin: var(--bs-spacing-300) 0 0 0;
+}