@brandsync/wc 0.0.11 → 0.1.0

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

@@ -0,0 +1,196 @@
+/**
+ * @prop --bs-switch-radius: Corner radius of the track, constant across all sizes. Aliased to --bs-border-radius-full.
+ * @prop --bs-switch-padding: Internal padding of the track around the knob, constant across all sizes. Aliased to --bs-spacing-25.
+ * @prop --bs-switch-gap: Gap between the track and the label text. Aliased to --bs-spacing-100.
+ * @prop --bs-switch-track-width-md: Track width at size="md".
+ * @prop --bs-switch-track-height-md: Track height at size="md".
+ * @prop --bs-switch-track-width-lg: Track width at size="lg".
+ * @prop --bs-switch-track-height-lg: Track height at size="lg".
+ * @prop --bs-switch-knob-size-md: Knob width/height at size="md".
+ * @prop --bs-switch-knob-size-lg: Knob width/height at size="lg".
+ * @prop --bs-switch-border-width: Track border width, constant across all sizes.
+ * @prop --bs-switch-track-bg: Track background, unchecked/resting. Aliased to --bs-switch-track-bg-default.
+ * @prop --bs-switch-track-bg-hover: Track background, unchecked/hovered. This is the global vendored token directly (src/global/tokens.css) -- not locally re-aliased under a different name here, since it already carries this exact name; see the :host comment below for why.
+ * @prop --bs-switch-track-bg-checked: Track background, checked/resting. Aliased to --bs-switch-track-bg-checked-default.
+ * @prop --bs-switch-track-bg-checked-hover: Track background, checked/hovered. The global vendored token directly, same reasoning as --bs-switch-track-bg-hover above.
+ * @prop --bs-switch-track-bg-checked-focus: Track background, checked/focused. Aliased to --bs-switch-track-bg-checked-focused.
+ * @prop --bs-switch-track-bg-disabled: Track background, disabled (either checked state). The global vendored token directly, same reasoning as --bs-switch-track-bg-hover above.
+ * @prop --bs-switch-track-border: Track border color, resting/disabled. Aliased to --bs-switch-track-border-default.
+ * @prop --bs-switch-track-border-hover: Track border color, hovered or focused. The global vendored token directly, same reasoning as --bs-switch-track-bg-hover above.
+ * @prop --bs-switch-focus-ring-color: Outer focus ring color, drawn outside the track. Aliased to --bs-switch-track-border-focus.
+ * @prop --bs-switch-knob-bg: Knob background, resting. Aliased to --bs-switch-thumb-bg-default.
+ * @prop --bs-switch-knob-bg-hover: Knob background, hovered. Aliased to --bs-switch-thumb-bg-hover.
+ * @prop --bs-switch-knob-bg-checked: Knob background, checked. Aliased to --bs-switch-thumb-bg-checked.
+ * @prop --bs-switch-knob-bg-disabled: Knob background, disabled. Aliased to --bs-switch-thumb-bg-disabled.
+ * @prop --bs-switch-label-color: Label text color. Aliased to --bs-text-default.
+ * @prop --bs-switch-label-color-disabled: Label text color, disabled. Aliased to --bs-text-on-disabled.
+ */
+:host {
+  display: inline-block;
+
+  --bs-switch-radius: var(--bs-border-radius-full);
+  --bs-switch-padding: var(--bs-spacing-25);
+  --bs-switch-gap: var(--bs-spacing-100);
+
+  --bs-switch-track-width-md: 36px;
+  --bs-switch-track-height-md: 20px;
+  --bs-switch-track-width-lg: 48px;
+  --bs-switch-track-height-lg: 28px;
+
+  --bs-switch-knob-size-md: 16px;
+  --bs-switch-knob-size-lg: 24px;
+
+  --bs-switch-border-width: 1px;
+
+  /* --bs-switch-track-bg-hover/-checked-hover/-disabled and --bs-switch-track-border-hover are
+     deliberately NOT re-declared here, unlike their siblings below -- the global vendored tokens
+     in src/global/tokens.css already use these exact same names (they were pre-vendored
+     specifically for this component), so a local :host alias under the identical name would be a
+     self-reference (var(--x) used inside the declaration of --x on the same element), which per
+     the CSS spec resolves to invalid/empty, not "inherit the global value" as it might look --
+     verified empirically: with the self-referencing declaration in place, all four resolved to ""
+     and the track's hover background rendered fully transparent. Omitting the local declaration
+     entirely lets the global token inherit through unchanged, which is the correct/only fix. */
+  --bs-switch-track-bg: var(--bs-switch-track-bg-default);
+  --bs-switch-track-bg-checked: var(--bs-switch-track-bg-checked-default);
+  --bs-switch-track-bg-checked-focus: var(--bs-switch-track-bg-checked-focused);
+
+  --bs-switch-track-border: var(--bs-switch-track-border-default);
+  --bs-switch-focus-ring-color: var(--bs-switch-track-border-focus);
+
+  --bs-switch-knob-bg: var(--bs-switch-thumb-bg-default);
+  --bs-switch-knob-bg-hover: var(--bs-switch-thumb-bg-hover);
+  --bs-switch-knob-bg-checked: var(--bs-switch-thumb-bg-checked);
+  --bs-switch-knob-bg-disabled: var(--bs-switch-thumb-bg-disabled);
+
+  --bs-switch-label-color: var(--bs-text-default);
+  --bs-switch-label-color-disabled: var(--bs-text-on-disabled);
+}
+
+.bs-switch {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--bs-switch-gap);
+  font-family: inherit;
+  cursor: pointer;
+}
+
+.bs-switch--disabled {
+  cursor: not-allowed;
+}
+
+/* The native input is visually hidden but stays in the layout/focus/keyboard chain -- opacity: 0
+   (not display: none) so it can still receive and show focus. */
+.bs-switch__input {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  opacity: 0;
+  cursor: pointer;
+}
+
+.bs-switch__input:disabled {
+  cursor: not-allowed;
+}
+
+.bs-switch__track {
+  box-sizing: border-box;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  flex-shrink: 0;
+  padding: var(--bs-switch-padding);
+  border: var(--bs-switch-border-width) solid var(--bs-switch-track-border);
+  border-radius: var(--bs-switch-radius);
+  background: var(--bs-switch-track-bg);
+  transition: background-color 0.15s ease, border-color 0.15s ease;
+}
+
+.bs-switch__track--md {
+  width: var(--bs-switch-track-width-md);
+  height: var(--bs-switch-track-height-md);
+}
+
+.bs-switch__track--lg {
+  width: var(--bs-switch-track-width-lg);
+  height: var(--bs-switch-track-height-lg);
+}
+
+.bs-switch__track--checked {
+  justify-content: flex-end;
+  background: var(--bs-switch-track-bg-checked);
+}
+
+.bs-switch__knob {
+  box-sizing: border-box;
+  border-radius: var(--bs-border-radius-full);
+  background: var(--bs-switch-knob-bg);
+  transition: background-color 0.15s ease;
+}
+
+.bs-switch__knob--md {
+  width: var(--bs-switch-knob-size-md);
+  height: var(--bs-switch-knob-size-md);
+}
+
+.bs-switch__knob--lg {
+  width: var(--bs-switch-knob-size-lg);
+  height: var(--bs-switch-knob-size-lg);
+}
+
+.bs-switch__track--checked .bs-switch__knob {
+  background: var(--bs-switch-knob-bg-checked);
+}
+
+/* Hover/focus -- keyed off the hidden native input's pseudo-classes, since it sits on top of and
+   is the same size as the track, so it always reflects the user's actual pointer/keyboard target. */
+.bs-switch__input:hover:not(:disabled) ~ .bs-switch__track {
+  background: var(--bs-switch-track-bg-hover);
+  border-color: var(--bs-switch-track-border-hover);
+}
+
+.bs-switch__input:hover:not(:disabled) ~ .bs-switch__track .bs-switch__knob {
+  background: var(--bs-switch-knob-bg-hover);
+}
+
+.bs-switch__input:hover:not(:disabled) ~ .bs-switch__track--checked {
+  background: var(--bs-switch-track-bg-checked-hover);
+}
+
+.bs-switch__input:focus-visible ~ .bs-switch__track {
+  border-color: var(--bs-switch-track-border-hover);
+  outline: 2px solid var(--bs-switch-focus-ring-color);
+  outline-offset: 2px;
+}
+
+.bs-switch__input:focus-visible ~ .bs-switch__track--checked {
+  background: var(--bs-switch-track-bg-checked-focus);
+}
+
+.bs-switch__track--disabled {
+  background: var(--bs-switch-track-bg-disabled);
+  border-color: var(--bs-switch-track-border);
+}
+
+.bs-switch__track--disabled.bs-switch__track--checked {
+  background: var(--bs-switch-track-bg-disabled);
+}
+
+.bs-switch__knob--disabled {
+  background: var(--bs-switch-knob-bg-disabled);
+}
+
+.bs-switch__label {
+  font-size: var(--bs-font-size-md);
+  color: var(--bs-switch-label-color);
+}
+
+.bs-switch--disabled .bs-switch__label {
+  color: var(--bs-switch-label-color-disabled);
+}

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

@@ -0,0 +1,185 @@
+import { h } from "@stencil/core";
+/**
+ * A toggle switch for an on/off setting that takes effect immediately (no explicit form
+ * submission required).
+ *
+ * ## When to use
+ * - A binary setting that applies right away (e.g. "Enable notifications", "Dark mode").
+ *
+ * ## When not to use
+ * - A binary choice that's part of a form submitted later, or one item within a group of
+ *   independent choices -- use `bs-checkbox` instead.
+ * - A single mutually-exclusive choice from a set -- use a radio group instead.
+ *
+ * @slot - Default slot: the label text.
+ * @part track - The visual pill-shaped track.
+ * @part knob - The sliding circular knob.
+ * @part label - The label text wrapper.
+ */
+// Note: this component's CSS Custom Properties are documented via @prop comments in
+// bs-switch.css, not here.
+export class BsSwitch {
+    el;
+    /** Sizing scale. Controls the track's width/height and the knob's diameter. */
+    size = 'lg';
+    /** Whether the switch is on. Mutable so clicking the label/input toggles it directly, and
+     * reflected so consumers can target `bs-switch[checked]` via CSS. */
+    checked = false;
+    /** Disables the switch: sets the native `disabled` attribute, suppresses hover/focus styling,
+     * and prevents toggling. */
+    disabled = false;
+    /**
+     * Accessible name for the switch. Required whenever the default (label) slot is empty (e.g. a
+     * bare "enabled" switch in a table row) -- without it, the internal native `<input>` has no
+     * accessible name at all. Setting `aria-label` directly on the `<bs-switch>` host does NOT
+     * work for this: that attribute stays on the light-DOM host and is never forwarded into the
+     * shadow DOM by the browser, so the actual focusable element (the native `<input>` inside) stays
+     * nameless. This prop exists specifically to bridge that gap -- same pattern as `bs-button`'s and
+     * `bs-checkbox`'s identical `ariaLabel` prop, both of which explicitly bind it onto their own
+     * internal focusable element for the same reason.
+     */
+    ariaLabel = null;
+    /** Emitted when the checked state changes via user interaction, with the new `checked` value. */
+    bsChange;
+    onChange = (ev) => {
+        const checked = ev.target.checked;
+        this.checked = checked;
+        this.bsChange.emit(checked);
+    };
+    render() {
+        const trackClasses = [
+            'bs-switch__track',
+            `bs-switch__track--${this.size}`,
+            this.checked ? 'bs-switch__track--checked' : '',
+            this.disabled ? 'bs-switch__track--disabled' : '',
+        ]
+            .filter(Boolean)
+            .join(' ');
+        const knobClasses = ['bs-switch__knob', `bs-switch__knob--${this.size}`, this.disabled ? 'bs-switch__knob--disabled' : '']
+            .filter(Boolean)
+            .join(' ');
+        return (h("label", { key: '888dbe0671ca3c921bc3407c3b78f3cedc772054', class: `bs-switch ${this.disabled ? 'bs-switch--disabled' : ''}` }, h("input", { key: '8883e408fb0f81448bbe7acbf69e3ea73b27b372', class: "bs-switch__input", type: "checkbox", role: "switch", checked: this.checked, disabled: this.disabled, "aria-checked": String(this.checked), "aria-label": this.ariaLabel, onChange: this.onChange }), h("span", { key: '84aa58e74886151ed394543f493d09faa3d5cb89', part: "track", class: trackClasses }, h("span", { key: 'e4bceff4f3419d1f1aa7345fe2083e9e1f1e3b91', part: "knob", class: knobClasses })), h("span", { key: 'e9816fb5961fea50b9c51d395fc359a08d1c4df9', part: "label", class: "bs-switch__label" }, h("slot", { key: '7ec1076999b1a249756a61feee2f9caf969f71c2' }))));
+    }
+    static get is() { return "bs-switch"; }
+    static get encapsulation() { return "shadow"; }
+    static get delegatesFocus() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bs-switch.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bs-switch.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BsSwitchSize",
+                    "resolved": "\"lg\" | \"md\"",
+                    "references": {
+                        "BsSwitchSize": {
+                            "location": "local",
+                            "path": "/Users/vivka/brandsync-web-components/src/components/bs-switch/bs-switch.tsx",
+                            "id": "src/components/bs-switch/bs-switch.tsx::BsSwitchSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sizing scale. Controls the track's width/height and the knob's diameter."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "'lg'"
+            },
+            "checked": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the switch is on. Mutable so clicking the label/input toggles it directly, and\nreflected so consumers can target `bs-switch[checked]` via CSS."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "checked",
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disables the switch: sets the native `disabled` attribute, suppresses hover/focus styling,\nand prevents toggling."
+                },
+                "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 switch. Required whenever the default (label) slot is empty (e.g. a\nbare \"enabled\" switch in a table row) -- without it, the internal native `<input>` has no\naccessible name at all. Setting `aria-label` directly on the `<bs-switch>` host does NOT\nwork for this: that attribute stays on the light-DOM host and is never forwarded into the\nshadow DOM by the browser, so the actual focusable element (the native `<input>` inside) stays\nnameless. This prop exists specifically to bridge that gap -- same pattern as `bs-button`'s and\n`bs-checkbox`'s identical `ariaLabel` prop, both of which explicitly bind it onto their own\ninternal focusable element for the same reason."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aria-label",
+                "defaultValue": "null"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "bsChange",
+                "name": "bsChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the checked state changes via user interaction, with the new `checked` value."
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+}

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

@@ -0,0 +1,60 @@
+import { html } from "lit";
+import { componentDescription, propDescription } from "../../stories-utils";
+const sizes = ['md', 'lg'];
+const meta = {
+    title: 'Components/bs-switch',
+    parameters: { docs: { description: { component: componentDescription('bs-switch') } } },
+    render: args => html `
+    <bs-switch size=${args.size} ?checked=${args.checked} ?disabled=${args.disabled}>
+      ${args.label}
+    </bs-switch>
+  `,
+    argTypes: {
+        size: { control: 'select', options: sizes, description: propDescription('bs-switch', 'size') },
+        checked: { control: 'boolean', description: propDescription('bs-switch', 'checked') },
+        disabled: { control: 'boolean', description: propDescription('bs-switch', 'disabled') },
+        label: { control: 'text' },
+    },
+    args: {
+        size: 'lg',
+        checked: false,
+        disabled: false,
+        label: 'Enable notifications',
+    },
+};
+export default meta;
+export const Default = {};
+export const Checked = {
+    args: { checked: true },
+};
+export const Disabled = {
+    args: { disabled: true },
+};
+export const Medium = {
+    args: { size: 'md', checked: true },
+};
+export const Large = {
+    args: { size: 'lg', checked: true },
+};
+export const AllCombinations = {
+    name: 'All combinations',
+    render: () => html `
+    <div style="display: grid; grid-template-columns: repeat(5, auto); gap: 24px; align-items: center;">
+      <span></span>
+      <strong>Unchecked</strong>
+      <strong>Checked</strong>
+      <strong>Disabled</strong>
+      <strong>Disabled + checked</strong>
+      <strong>Md</strong>
+      <bs-switch size="md"></bs-switch>
+      <bs-switch size="md" checked></bs-switch>
+      <bs-switch size="md" disabled></bs-switch>
+      <bs-switch size="md" disabled checked></bs-switch>
+      <strong>Lg</strong>
+      <bs-switch size="lg"></bs-switch>
+      <bs-switch size="lg" checked></bs-switch>
+      <bs-switch size="lg" disabled></bs-switch>
+      <bs-switch size="lg" disabled checked></bs-switch>
+    </div>
+  `,
+};

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

@@ -0,0 +1,104 @@
+import { render, h, describe, it, expect } from "@stencil/vitest";
+describe('bs-inline-tab', () => {
+    it('renders a button with role="tab" and part="tab"', async () => {
+        const { root } = await render(h("bs-inline-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-inline-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-inline-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-inline-tab", null, "Overview"));
+            expect(root).toHaveTextContent('Overview');
+            const icon = root.shadowRoot.querySelector('[part="icon"]');
+            expect(icon).not.toHaveClass('bs-inline-tab__icon--has-content');
+            expect(getComputedStyle(icon).display).toBe('none');
+            const label = root.shadowRoot.querySelector('[part="label"]');
+            expect(label).toHaveClass('bs-inline-tab__label--has-content');
+        });
+        it('icon + label: renders both, no icon-only class', async () => {
+            const { root } = await render(h("bs-inline-tab", null, h("span", { slot: "icon" }, "ICON"), "Overview"));
+            const icon = root.shadowRoot.querySelector('[part="icon"]');
+            expect(icon).toHaveClass('bs-inline-tab__icon--has-content');
+            const label = root.shadowRoot.querySelector('[part="label"]');
+            expect(label).toHaveClass('bs-inline-tab__label--has-content');
+            const button = root.shadowRoot.querySelector('[part="tab"]');
+            expect(button).not.toHaveClass('bs-inline-tab--icon-only');
+            expect(button).toHaveClass('bs-inline-tab--has-icon');
+        });
+        it('icon-only: renders the icon, no label space reserved, requires ariaLabel', async () => {
+            const { root } = await render(h("bs-inline-tab", { ariaLabel: "Home" }, h("span", { slot: "icon" }, "ICON")));
+            const icon = root.shadowRoot.querySelector('[part="icon"]');
+            expect(icon).toHaveClass('bs-inline-tab__icon--has-content');
+            const label = root.shadowRoot.querySelector('[part="label"]');
+            expect(label).not.toHaveClass('bs-inline-tab__label--has-content');
+            expect(getComputedStyle(label).display).toBe('none');
+            const button = root.shadowRoot.querySelector('[part="tab"]');
+            expect(button).toHaveClass('bs-inline-tab--icon-only');
+            expect(button).toEqualAttribute('aria-label', 'Home');
+        });
+    });
+    describe('selected', () => {
+        it('applies selected styling and reflects the attribute, but is false by default', async () => {
+            const { root } = await render(h("bs-inline-tab", null, "Overview"));
+            const button = root.shadowRoot.querySelector('[part="tab"]');
+            expect(button).not.toHaveClass('bs-inline-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-inline-tab", { selected: true }, "Overview"));
+            expect(root).toHaveAttribute('selected');
+            const button = root.shadowRoot.querySelector('[part="tab"]');
+            expect(button).toHaveClass('bs-inline-tab--selected');
+            expect(button).toEqualAttribute('aria-selected', 'true');
+        });
+        it('does not self-toggle selected on click', async () => {
+            const { root, waitForChanges } = await render(h("bs-inline-tab", null, "Overview"));
+            const button = root.shadowRoot.querySelector('[part="tab"]');
+            button.click();
+            await waitForChanges();
+            expect(root.selected).toBe(false);
+            expect(button).not.toHaveClass('bs-inline-tab--selected');
+        });
+    });
+    it('emits bsSelect when clicked', async () => {
+        const { root, spyOnEvent } = await render(h("bs-inline-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-inline-tab", { disabled: true }, "Overview"));
+            const button = root.shadowRoot.querySelector('[part="tab"]');
+            expect(button).toHaveClass('bs-inline-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-inline-tab", { disabled: true }, "Overview"));
+            const selectSpy = spyOnEvent('bsSelect');
+            root.shadowRoot.querySelector('[part="tab"]').click();
+            expect(selectSpy).toHaveReceivedEventTimes(0);
+        });
+        it('applies both the disabled and selected classes when both are set (disabled always wins in CSS precedence)', async () => {
+            const { root } = await render(h("bs-inline-tab", { disabled: true, selected: true }, "Overview"));
+            const button = root.shadowRoot.querySelector('[part="tab"]');
+            expect(button).toHaveClass('bs-inline-tab--disabled');
+            expect(button).toHaveClass('bs-inline-tab--selected');
+            expect(button).toHaveAttribute('disabled');
+        });
+    });
+});