@brandsync/wc 0.0.10 → 0.0.12

package/dist/collection/components/bs-tab/bs-inline-tab/bs-inline-tab.css

@@ -0,0 +1,163 @@
+/**
+ * @prop --bs-inline-tab-radius: Corner radius of the pill. Aliased to --bs-border-radius-full.
+ * @prop --bs-inline-tab-padding-y: Top/bottom padding. Aliased to --bs-spacing-100.
+ * @prop --bs-inline-tab-padding-x: Left/right padding, no icon. Aliased to --bs-spacing-200.
+ * @prop --bs-inline-tab-padding-left-with-icon: Left padding, icon present. Aliased to --bs-spacing-150.
+ * @prop --bs-inline-tab-padding-right-with-icon: Right padding, icon present. Aliased to --bs-spacing-200.
+ * @prop --bs-inline-tab-gap: Gap between icon and label. Aliased to --bs-spacing-50.
+ * @prop --bs-inline-tab-bg-default: Background, deselected/enabled. Aliased to --bs-color-neutral-container.
+ * @prop --bs-inline-tab-color-default: Text/icon color, deselected/enabled. Aliased to --bs-text-secondary.
+ * @prop --bs-inline-tab-bg-hover: Background, deselected/hovered. Aliased to --bs-color-neutral-container-hover.
+ * @prop --bs-inline-tab-color-hover: Text/icon color, deselected/hovered, focused or pressed. Aliased to --bs-text-default.
+ * @prop --bs-inline-tab-bg-focus: Background, deselected/focused. Aliased to --bs-color-neutral-container-focused.
+ * @prop --bs-inline-tab-bg-pressed: Background, deselected/pressed. Aliased to --bs-color-neutral-container-pressed.
+ * @prop --bs-inline-tab-focus-ring-color: Focus ring color. Aliased to --bs-border-neutral-focus.
+ * @prop --bs-inline-tab-bg-disabled: Background, disabled (wins over selected). Aliased to --bs-surface-action-disabled.
+ * @prop --bs-inline-tab-color-disabled: Text/icon color, disabled (wins over selected). Aliased to --bs-text-on-disabled.
+ * @prop --bs-inline-tab-bg-selected: Background, selected/enabled. Aliased to --bs-color-primary-default.
+ * @prop --bs-inline-tab-color-selected: Text/icon color, selected. Aliased to --bs-text-on-action.
+ * @prop --bs-inline-tab-bg-selected-hover: Background, selected/hovered. Aliased to --bs-color-primary-hover.
+ * @prop --bs-inline-tab-bg-selected-focus: Background, selected/focused. Aliased to --bs-color-primary-focused.
+ * @prop --bs-inline-tab-bg-selected-pressed: Background, selected/pressed. Aliased to --bs-color-primary-pressed.
+ * @prop --bs-inline-tab-font-size: Aliased to --bs-font-size-sm.
+ * @prop --bs-inline-tab-font-weight: Aliased to --bs-font-weight-semibold.
+ * @prop --bs-inline-tab-line-height: Aliased to --bs-line-height-body-sm.
+ */
+:host {
+  display: inline-block;
+
+  --bs-inline-tab-radius: var(--bs-border-radius-full);
+  --bs-inline-tab-padding-y: var(--bs-spacing-100);
+  --bs-inline-tab-padding-x: var(--bs-spacing-200);
+  --bs-inline-tab-padding-left-with-icon: var(--bs-spacing-150);
+  --bs-inline-tab-padding-right-with-icon: var(--bs-spacing-200);
+  --bs-inline-tab-gap: var(--bs-spacing-50);
+
+  --bs-inline-tab-bg-default: var(--bs-color-neutral-container);
+  --bs-inline-tab-color-default: var(--bs-text-secondary);
+
+  --bs-inline-tab-bg-hover: var(--bs-color-neutral-container-hover);
+  --bs-inline-tab-color-hover: var(--bs-text-default);
+
+  --bs-inline-tab-bg-focus: var(--bs-color-neutral-container-focused);
+  --bs-inline-tab-bg-pressed: var(--bs-color-neutral-container-pressed);
+
+  --bs-inline-tab-focus-ring-color: var(--bs-border-neutral-focus);
+
+  --bs-inline-tab-bg-disabled: var(--bs-surface-action-disabled);
+  --bs-inline-tab-color-disabled: var(--bs-text-on-disabled);
+
+  --bs-inline-tab-bg-selected: var(--bs-color-primary-default);
+  --bs-inline-tab-color-selected: var(--bs-text-on-action);
+  --bs-inline-tab-bg-selected-hover: var(--bs-color-primary-hover);
+  --bs-inline-tab-bg-selected-focus: var(--bs-color-primary-focused);
+  --bs-inline-tab-bg-selected-pressed: var(--bs-color-primary-pressed);
+
+  --bs-inline-tab-font-size: var(--bs-font-size-sm);
+  --bs-inline-tab-font-weight: var(--bs-font-weight-semibold);
+  --bs-inline-tab-line-height: var(--bs-line-height-body-sm);
+}
+
+.bs-inline-tab {
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  cursor: pointer;
+  font-family: inherit;
+  border-radius: var(--bs-inline-tab-radius);
+  padding: var(--bs-inline-tab-padding-y) var(--bs-inline-tab-padding-x);
+  background: var(--bs-inline-tab-bg-default);
+  color: var(--bs-inline-tab-color-default);
+  transition:
+    color var(--bs-duration-fast) var(--bs-easing-standard),
+    background-color var(--bs-duration-fast) var(--bs-easing-standard);
+}
+
+.bs-inline-tab--has-icon {
+  padding-top: var(--bs-inline-tab-padding-y);
+  padding-bottom: var(--bs-inline-tab-padding-y);
+  padding-left: var(--bs-inline-tab-padding-left-with-icon);
+  padding-right: var(--bs-inline-tab-padding-right-with-icon);
+  gap: var(--bs-inline-tab-gap);
+}
+
+.bs-inline-tab:focus-visible {
+  outline: 2px solid var(--bs-inline-tab-focus-ring-color);
+  outline-offset: 2px;
+}
+
+/* Deselected hover/focus/pressed. */
+.bs-inline-tab:not(.bs-inline-tab--selected):not(.bs-inline-tab--disabled):hover {
+  background: var(--bs-inline-tab-bg-hover);
+  color: var(--bs-inline-tab-color-hover);
+}
+
+.bs-inline-tab:not(.bs-inline-tab--selected):not(.bs-inline-tab--disabled):focus-visible {
+  background: var(--bs-inline-tab-bg-focus);
+  color: var(--bs-inline-tab-color-hover);
+}
+
+.bs-inline-tab:not(.bs-inline-tab--selected):not(.bs-inline-tab--disabled):active {
+  background: var(--bs-inline-tab-bg-pressed);
+  color: var(--bs-inline-tab-color-hover);
+}
+
+/* Selected: primary-filled pill, in any interaction state -- darkening slightly on
+   hover/focus/pressed. */
+.bs-inline-tab--selected {
+  background: var(--bs-inline-tab-bg-selected);
+  color: var(--bs-inline-tab-color-selected);
+}
+
+.bs-inline-tab--selected:not(.bs-inline-tab--disabled):hover {
+  background: var(--bs-inline-tab-bg-selected-hover);
+}
+
+.bs-inline-tab--selected:not(.bs-inline-tab--disabled):focus-visible {
+  background: var(--bs-inline-tab-bg-selected-focus);
+}
+
+.bs-inline-tab--selected:not(.bs-inline-tab--disabled):active {
+  background: var(--bs-inline-tab-bg-selected-pressed);
+}
+
+/* Disabled always wins over selected -- no distinct "selected+disabled" treatment defined in the
+   Figma spec, so disabled's own bg/text applies unconditionally regardless of `selected`. */
+.bs-inline-tab--disabled {
+  background: var(--bs-inline-tab-bg-disabled);
+  color: var(--bs-inline-tab-color-disabled);
+  cursor: not-allowed;
+}
+
+.bs-inline-tab__icon {
+  display: none;
+  width: 24px;
+  height: 24px;
+  flex-shrink: 0;
+  color: inherit;
+}
+
+.bs-inline-tab__icon--has-content {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.bs-inline-tab__icon ::slotted(svg) {
+  width: 24px;
+  height: 24px;
+}
+
+.bs-inline-tab__label {
+  display: none;
+  font-size: var(--bs-inline-tab-font-size);
+  font-weight: var(--bs-inline-tab-font-weight);
+  line-height: calc(var(--bs-inline-tab-line-height) * 1px);
+  white-space: nowrap;
+}
+
+.bs-inline-tab__label--has-content {
+  display: inline-block;
+}

package/dist/collection/components/bs-tab/bs-inline-tab/bs-inline-tab.js

@@ -0,0 +1,192 @@
+import { h } from "@stencil/core";
+/**
+ * A pill-shaped tab button -- an optional leading icon plus a text label, rendered as a real
+ * `<button>` so it participates correctly in tab order and native click/keyboard activation.
+ * Unlike `bs-tab`'s underline indicator, selection here is communicated entirely by the pill's
+ * background fill color -- there is no separate indicator element.
+ *
+ * ## When to use
+ * - As one button within a segmented-control-style tab bar, where exactly one tab is
+ *   selected/active at a time.
+ *
+ * ## When not to use
+ * - As a standalone action button -- use `bs-button` instead, `bs-inline-tab`'s visual language
+ *   (muted pill until selected/hovered) only makes sense as part of a set.
+ *
+ * `selected` is NOT self-toggling -- clicking a `bs-inline-tab` only emits `bsSelect`, it does not
+ * set its own `selected` prop, and it does not unselect any sibling tabs. Wrap your
+ * `<bs-inline-tab>` elements in `<bs-tabs type="bs-inline-tab">` -- it owns `role="tablist"` and
+ * coordinates selection (listening for `bsSelect` and setting `selected`/`false` across siblings)
+ * for you. Using `bs-inline-tab` standalone, outside a `<bs-tabs>` wrapper, still means `selected`
+ * doesn't self-toggle and `role="tablist"` isn't provided automatically -- a consumer doing that
+ * would still need to coordinate `selected` and supply `role="tablist"` manually, same as
+ * `bs-tab.mdx`/`bs-radio.mdx` document for their own components. See `bs-inline-tab.mdx`'s
+ * Accessibility section for the full requirement, including `role="tabpanel"` on the corresponding
+ * content panels.
+ *
+ * @slot - Default slot: the tab's label text. When empty (icon-only), no space is reserved for it.
+ * @slot icon - Optional leading icon (24x24). When empty (text-only), no space is reserved for it.
+ * @part tab - The button element.
+ * @part icon - The icon wrapper.
+ * @part label - The label wrapper.
+ */
+// Note: this component's CSS Custom Properties (--bs-inline-tab-*) are documented via @prop
+// comments in bs-inline-tab.css, not here -- Stencil's docs generator only parses @prop out of CSS
+// file comments, not the class-level JSDoc (see bs-tab.tsx's equivalent note).
+export class BsInlineTab {
+    el;
+    /** Whether this tab is the currently active one. NOT mutable and NOT self-toggling -- see the
+     * "Known gap" note in the class JSDoc. Still reflected as an attribute so consumers/CSS can
+     * target `bs-inline-tab[selected]`. */
+    selected = false;
+    /** Disables the tab: sets the native `disabled` attribute, suppresses hover/focus styling, and
+     * prevents clicking from emitting `bsSelect`. */
+    disabled = false;
+    /** Accessible name for the tab. Required for icon-only usage (no visible label text via the
+     * default slot) so screen readers still announce what the tab does -- without it, an icon-only
+     * tab has no discernible name at all (axe-core flags this as a critical `button-name`
+     * violation). Stencil reflects this camelCase prop to the `aria-label` HTML attribute
+     * automatically, same as `bs-tab`'s identical prop. */
+    ariaLabel = null;
+    /** Tracks whether the `icon` slot has assigned content. */
+    hasIcon = false;
+    /** Tracks whether the default (label) slot has assigned content. */
+    hasLabel = false;
+    /** Fires when the tab is clicked. Does not toggle `selected` itself -- see the class JSDoc. */
+    bsSelect;
+    /**
+     * Computes the initial `hasIcon`/`hasLabel` state directly from the host's light DOM children,
+     * before first render -- same reasoning as `bs-tab.componentWillLoad` (a slot with zero assigned
+     * nodes from the start never fires `slotchange`).
+     */
+    componentWillLoad() {
+        this.hasIcon = this.hasSlottedContent('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;
+    };
+    onLabelSlotchange = (ev) => {
+        this.hasLabel = ev.target.assignedNodes().length > 0;
+    };
+    onClick = () => {
+        if (this.disabled)
+            return;
+        this.bsSelect.emit();
+    };
+    render() {
+        const iconOnly = this.hasIcon && !this.hasLabel;
+        return (h("button", { key: 'a0a20d6cb582852ae0276ae2dd91bc5c7708cbfa', type: "button", part: "tab", role: "tab", class: `bs-inline-tab ${this.selected ? 'bs-inline-tab--selected' : ''} ${this.disabled ? 'bs-inline-tab--disabled' : ''} ${iconOnly ? 'bs-inline-tab--icon-only' : ''} ${this.hasIcon ? 'bs-inline-tab--has-icon' : ''}`, disabled: this.disabled, "aria-selected": String(this.selected), "aria-disabled": this.disabled ? 'true' : undefined, "aria-label": this.ariaLabel, onClick: this.onClick }, h("span", { key: 'e2fea17db42da65d9ff8ff6d59749572a25c3eb2', part: "icon", class: `bs-inline-tab__icon ${this.hasIcon ? 'bs-inline-tab__icon--has-content' : ''}` }, h("slot", { key: '4551fc4b092105be399277e42bf343390ae18ff8', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: '99de7b930a840f482e0ad2c5e6eaf1b759c6f9ed', part: "label", class: `bs-inline-tab__label ${this.hasLabel ? 'bs-inline-tab__label--has-content' : ''}` }, h("slot", { key: 'dbedcadbb5b1b51c47d0fa44b8a41f67d6ef4ef0', onSlotchange: this.onLabelSlotchange }))));
+    }
+    static get is() { return "bs-inline-tab"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bs-inline-tab.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bs-inline-tab.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "selected": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether this tab is the currently active one. NOT mutable and NOT self-toggling -- see the\n\"Known gap\" note in the class JSDoc. Still reflected as an attribute so consumers/CSS can\ntarget `bs-inline-tab[selected]`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "selected",
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disables the tab: sets the native `disabled` attribute, suppresses hover/focus styling, and\nprevents clicking from emitting `bsSelect`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "ariaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible name for the tab. Required for icon-only usage (no visible label text via the\ndefault slot) so screen readers still announce what the tab does -- without it, an icon-only\ntab has no discernible name at all (axe-core flags this as a critical `button-name`\nviolation). Stencil reflects this camelCase prop to the `aria-label` HTML attribute\nautomatically, same as `bs-tab`'s identical prop."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aria-label",
+                "defaultValue": "null"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "hasIcon": {},
+            "hasLabel": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "bsSelect",
+                "name": "bsSelect",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires when the tab is clicked. Does not toggle `selected` itself -- see the class JSDoc."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+}

package/dist/collection/components/bs-tab/bs-inline-tab/bs-inline-tab.stories.js

@@ -0,0 +1,95 @@
+import { html, nothing } from "lit";
+import { componentDescription, propDescription } from "../../../stories-utils";
+const homeIcon = html `
+  <svg slot="icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+    <path d="M3 10.5L12 3L21 10.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+    <path d="M5 9V20H19V9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+  </svg>
+`;
+const meta = {
+    title: 'Components/bs-tab/bs-inline-tab',
+    parameters: { docs: { description: { component: componentDescription('bs-inline-tab') } } },
+    // role="tab" is only valid ARIA inside a role="tablist" ancestor (axe-core flags a lone
+    // bs-inline-tab as a critical aria-required-parent violation otherwise -- see
+    // bs-inline-tab.mdx's Accessibility section). NOT display: contents -- that has a known
+    // Chromium accessibility-tree quirk where it can strip the element's own role. A plain
+    // block-level div has no visual effect worth avoiding here (each story below is a single
+    // isolated demo, not part of a larger page layout).
+    //
+    // aria-label uses lit's `nothing` sentinel below, not null/'' -- a plain (non-boolean) lit
+    // attribute binding renders null/'' as aria-label="" (present but empty), not an absent
+    // attribute. axe-core then treats the light-DOM <bs-inline-tab> host as ARIA-meaningful in its
+    // own right and stops looking inside its shadow root for the real role="tab", which surfaces as
+    // an aria-required-children violation on the *parent* tablist -- a very confusing place to look.
+    render: args => html `
+    <div role="tablist">
+      <bs-inline-tab ?selected=${args.selected} ?disabled=${args.disabled} aria-label=${args.ariaLabel || nothing}>
+        ${args.icon ? homeIcon : ''}${args.label}
+      </bs-inline-tab>
+    </div>
+  `,
+    argTypes: {
+        selected: { control: 'boolean', description: propDescription('bs-inline-tab', 'selected') },
+        disabled: { control: 'boolean', description: propDescription('bs-inline-tab', 'disabled') },
+        icon: { control: 'boolean', description: 'Toggles a leading icon (not a real attribute -- see the `icon` slot).' },
+        label: { control: 'text', description: "Slotted label content (not a real attribute -- see the default slot)." },
+        ariaLabel: { control: 'text', description: propDescription('bs-inline-tab', 'ariaLabel') },
+    },
+    args: {
+        selected: false,
+        disabled: false,
+        icon: false,
+        label: 'Overview',
+        ariaLabel: '',
+    },
+};
+export default meta;
+export const Default = {};
+export const WithIcon = {
+    name: 'With icon',
+    args: { icon: true },
+};
+export const IconOnly = {
+    name: 'Icon only',
+    args: { icon: true, label: '', ariaLabel: 'Home' },
+};
+export const Selected = {
+    args: { selected: true },
+};
+export const SelectedWithIcon = {
+    name: 'Selected with icon',
+    args: { selected: true, icon: true },
+};
+export const Disabled = {
+    args: { disabled: true },
+};
+const groupTabLabels = ['Overview', 'Details', 'Settings', 'Archived'];
+// A separate args shape from the single-tab stories above (this story renders 4 instances, not
+// one) -- StoryObj is typed independently per export, so this doesn't need to fit BsInlineTabArgs.
+export const Group = {
+    name: 'Tab group',
+    argTypes: {
+        selectedTab: {
+            control: 'select',
+            options: groupTabLabels,
+            description: 'Which tab is selected (Archived is disabled and cannot be selected).',
+        },
+        icon: { control: 'boolean', description: 'Toggles a leading icon on every tab in the group (not a real attribute -- see the `icon` slot).' },
+    },
+    args: {
+        selectedTab: 'Overview',
+        icon: false,
+    },
+    // The group bar itself (background, pill-shaped padding/radius) is now owned by <bs-tabs
+    // type="bs-inline-tab">, not styled by hand here -- see bs-tabs.mdx for the redline this
+    // reproduces.
+    render: args => html `
+    <bs-tabs type="bs-inline-tab">
+      ${groupTabLabels.map(label => html `
+          <bs-inline-tab ?selected=${label === args.selectedTab} ?disabled=${label === 'Archived'}>
+            ${args.icon ? homeIcon : ''}${label}
+          </bs-inline-tab>
+        `)}
+    </bs-tabs>
+  `,
+};

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

@@ -0,0 +1,120 @@
+import { render, h, describe, it, expect } from "@stencil/vitest";
+describe('bs-tab', () => {
+    it('renders a button with role="tab" and part="tab"', async () => {
+        const { root } = await render(h("bs-tab", null, "Overview"));
+        const button = root.shadowRoot.querySelector('[part="tab"]');
+        expect(button).not.toBeNull();
+        expect(button.tagName).toBe('BUTTON');
+        expect(button.getAttribute('role')).toBe('tab');
+        expect(button.getAttribute('type')).toBe('button');
+    });
+    it('reflects ariaLabel to the aria-label attribute, for icon-only accessible names', async () => {
+        const { root } = await render(h("bs-tab", { ariaLabel: "Home" }, h("span", { slot: "icon" }, "ICON")));
+        const button = root.shadowRoot.querySelector('[part="tab"]');
+        expect(button).toEqualAttribute('aria-label', 'Home');
+    });
+    it('does not set aria-label when ariaLabel is not provided', async () => {
+        const { root } = await render(h("bs-tab", null, "Overview"));
+        const button = root.shadowRoot.querySelector('[part="tab"]');
+        expect(button).not.toHaveAttribute('aria-label');
+    });
+    describe('layout variants', () => {
+        it('text-only: renders the label, no icon space reserved', async () => {
+            const { root } = await render(h("bs-tab", null, "Overview"));
+            expect(root).toHaveTextContent('Overview');
+            const icon = root.shadowRoot.querySelector('[part="icon"]');
+            expect(icon).not.toHaveClass('bs-tab__icon--has-content');
+            expect(getComputedStyle(icon).display).toBe('none');
+            const label = root.shadowRoot.querySelector('[part="label"]');
+            expect(label).toHaveClass('bs-tab__label--has-content');
+        });
+        it('icon-only: renders the icon, no label space reserved', async () => {
+            const { root } = await render(h("bs-tab", null, h("span", { slot: "icon" }, "ICON")));
+            const icon = root.shadowRoot.querySelector('[part="icon"]');
+            expect(icon).toHaveClass('bs-tab__icon--has-content');
+            const label = root.shadowRoot.querySelector('[part="label"]');
+            expect(label).not.toHaveClass('bs-tab__label--has-content');
+            expect(getComputedStyle(label).display).toBe('none');
+            const button = root.shadowRoot.querySelector('[part="tab"]');
+            expect(button).toHaveClass('bs-tab--icon-only');
+        });
+        it('icon + text horizontal (default iconPosition): row layout, not vertical', async () => {
+            const { root } = await render(h("bs-tab", null, h("span", { slot: "icon" }, "ICON"), "Overview"));
+            const button = root.shadowRoot.querySelector('[part="tab"]');
+            expect(button).not.toHaveClass('bs-tab--vertical');
+            expect(button).not.toHaveClass('bs-tab--icon-only');
+        });
+        it('icon + text vertical (iconPosition="top"): column layout', async () => {
+            const { root } = await render(h("bs-tab", { iconPosition: "top" }, h("span", { slot: "icon" }, "ICON"), "Overview"));
+            const button = root.shadowRoot.querySelector('[part="tab"]');
+            expect(button).toHaveClass('bs-tab--vertical');
+        });
+    });
+    describe('badge slot', () => {
+        it('does not reserve badge space when empty', async () => {
+            const { root } = await render(h("bs-tab", null, "Overview"));
+            const badge = root.shadowRoot.querySelector('[part="badge"]');
+            expect(badge).not.toHaveClass('bs-tab__badge--has-content');
+            expect(getComputedStyle(badge).display).toBe('none');
+        });
+        it('reserves badge space in a text-only tab when populated', async () => {
+            const { root } = await render(h("bs-tab", null, "Overview", h("span", { slot: "badge" }, "3")));
+            const badge = root.shadowRoot.querySelector('[part="badge"]');
+            expect(badge).toHaveClass('bs-tab__badge--has-content');
+        });
+        it('does not reserve badge space in an icon-only tab, even when populated', async () => {
+            const { root } = await render(h("bs-tab", null, h("span", { slot: "icon" }, "ICON"), h("span", { slot: "badge" }, "3")));
+            const badge = root.shadowRoot.querySelector('[part="badge"]');
+            expect(badge).not.toHaveClass('bs-tab__badge--has-content');
+        });
+        it('does not reserve badge space in an icon+text vertical tab, even when populated', async () => {
+            const { root } = await render(h("bs-tab", { iconPosition: "top" }, h("span", { slot: "icon" }, "ICON"), "Overview", h("span", { slot: "badge" }, "3")));
+            const badge = root.shadowRoot.querySelector('[part="badge"]');
+            expect(badge).not.toHaveClass('bs-tab__badge--has-content');
+        });
+    });
+    describe('selected', () => {
+        it('applies selected styling and reflects the attribute, but is false by default', async () => {
+            const { root } = await render(h("bs-tab", null, "Overview"));
+            const button = root.shadowRoot.querySelector('[part="tab"]');
+            expect(button).not.toHaveClass('bs-tab--selected');
+            expect(button).toEqualAttribute('aria-selected', 'false');
+        });
+        it('reflects selected as an attribute and applies selected styling', async () => {
+            const { root } = await render(h("bs-tab", { selected: true }, "Overview"));
+            expect(root).toHaveAttribute('selected');
+            const button = root.shadowRoot.querySelector('[part="tab"]');
+            expect(button).toHaveClass('bs-tab--selected');
+            expect(button).toEqualAttribute('aria-selected', 'true');
+        });
+        it('does not self-toggle selected on click', async () => {
+            const { root, waitForChanges } = await render(h("bs-tab", null, "Overview"));
+            const button = root.shadowRoot.querySelector('[part="tab"]');
+            button.click();
+            await waitForChanges();
+            expect(root.selected).toBe(false);
+            expect(button).not.toHaveClass('bs-tab--selected');
+        });
+    });
+    it('emits bsSelect when clicked', async () => {
+        const { root, spyOnEvent } = await render(h("bs-tab", null, "Overview"));
+        const selectSpy = spyOnEvent('bsSelect');
+        root.shadowRoot.querySelector('[part="tab"]').click();
+        expect(selectSpy).toHaveReceivedEventTimes(1);
+    });
+    describe('disabled', () => {
+        it('applies disabled styling, sets the native disabled attribute and aria-disabled', async () => {
+            const { root } = await render(h("bs-tab", { disabled: true }, "Overview"));
+            const button = root.shadowRoot.querySelector('[part="tab"]');
+            expect(button).toHaveClass('bs-tab--disabled');
+            expect(button).toHaveAttribute('disabled');
+            expect(button).toEqualAttribute('aria-disabled', 'true');
+        });
+        it('does not emit bsSelect when clicked while disabled', async () => {
+            const { root, spyOnEvent } = await render(h("bs-tab", { disabled: true }, "Overview"));
+            const selectSpy = spyOnEvent('bsSelect');
+            root.shadowRoot.querySelector('[part="tab"]').click();
+            expect(selectSpy).toHaveReceivedEventTimes(0);
+        });
+    });
+});