@brandsync/wc 0.0.10 → 0.0.12

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

@@ -0,0 +1,216 @@
+/**
+ * @prop --bs-tab-radius: Corner radius of the tab button. Aliased to --bs-border-radius-100.
+ * @prop --bs-tab-padding-y: Top/bottom padding. Aliased to --bs-spacing-150.
+ * @prop --bs-tab-padding-x: Left/right padding. Aliased to --bs-spacing-200.
+ * @prop --bs-tab-gap: Gap between icon and label, icon+text horizontal layout. Aliased to --bs-spacing-75.
+ * @prop --bs-tab-gap-vertical: Gap between icon and label, icon+text vertical layout. Aliased to --bs-spacing-50.
+ * @prop --bs-tab-color-default: Text/icon color, deselected/enabled. Aliased to --bs-text-muted.
+ * @prop --bs-tab-icon-color-default: Icon color, deselected/enabled. Aliased to --bs-icon-muted.
+ * @prop --bs-tab-color-hover: Text/icon color, deselected/hovered, focused or pressed. Aliased to --bs-text-default.
+ * @prop --bs-tab-icon-color-hover: Icon color, deselected/hovered, focused or pressed. Aliased to --bs-icon-default.
+ * @prop --bs-tab-indicator-hover: Underline color, deselected/hovered, focused or pressed. Aliased to --bs-border-neutral-hover.
+ * @prop --bs-tab-color-selected: Text/icon color, selected. Aliased to --bs-color-primary-default.
+ * @prop --bs-tab-color-selected-hover: Text/icon color, selected/hovered or focused. Aliased to --bs-color-primary-hover.
+ * @prop --bs-tab-color-selected-pressed: Text/icon color, selected/pressed. Aliased to --bs-color-primary-pressed.
+ * @prop --bs-tab-indicator-selected: Underline color, selected. Aliased to --bs-color-primary-default.
+ * @prop --bs-tab-indicator-selected-hover: Underline color, selected/hovered or focused. Aliased to --bs-color-primary-hover.
+ * @prop --bs-tab-indicator-selected-pressed: Underline color, selected/pressed. Aliased to --bs-color-primary-pressed.
+ * @prop --bs-tab-focus-ring-color: Focus ring color. Aliased to --bs-border-neutral-focus.
+ * @prop --bs-tab-color-disabled: Text/icon color, disabled. Aliased to --bs-text-on-disabled.
+ * @prop --bs-tab-icon-color-disabled: Icon color, disabled. Aliased to --bs-icon-disabled.
+ * @prop --bs-tab-font-size: Aliased to --bs-font-size-md.
+ * @prop --bs-tab-line-height: Aliased to --bs-line-height-body-md.
+ */
+:host {
+  display: inline-block;
+
+  --bs-tab-radius: var(--bs-border-radius-100);
+  --bs-tab-padding-y: var(--bs-spacing-150);
+  --bs-tab-padding-x: var(--bs-spacing-200);
+  --bs-tab-gap: var(--bs-spacing-75);
+  --bs-tab-gap-vertical: var(--bs-spacing-50);
+
+  --bs-tab-color-default: var(--bs-text-muted);
+  --bs-tab-icon-color-default: var(--bs-icon-muted);
+
+  --bs-tab-color-hover: var(--bs-text-default);
+  --bs-tab-icon-color-hover: var(--bs-icon-default);
+  --bs-tab-indicator-hover: var(--bs-border-neutral-hover);
+
+  --bs-tab-color-selected: var(--bs-color-primary-default);
+  --bs-tab-color-selected-hover: var(--bs-color-primary-hover);
+  --bs-tab-color-selected-pressed: var(--bs-color-primary-pressed);
+  --bs-tab-indicator-selected: var(--bs-color-primary-default);
+  --bs-tab-indicator-selected-hover: var(--bs-color-primary-hover);
+  --bs-tab-indicator-selected-pressed: var(--bs-color-primary-pressed);
+
+  --bs-tab-focus-ring-color: var(--bs-border-neutral-focus);
+
+  --bs-tab-color-disabled: var(--bs-text-on-disabled);
+  --bs-tab-icon-color-disabled: var(--bs-icon-disabled);
+
+  --bs-tab-font-size: var(--bs-font-size-md);
+  --bs-tab-line-height: var(--bs-line-height-body-md);
+}
+
+.bs-tab {
+  box-sizing: border-box;
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  cursor: pointer;
+  background: transparent;
+  color: var(--bs-tab-color-default);
+  font-family: inherit;
+  border-radius: var(--bs-tab-radius);
+  padding: var(--bs-tab-padding-y) var(--bs-tab-padding-x);
+  gap: var(--bs-tab-gap);
+  transition:
+    color var(--bs-duration-fast) var(--bs-easing-standard),
+    background-color var(--bs-duration-fast) var(--bs-easing-standard);
+}
+
+.bs-tab--vertical {
+  flex-direction: column;
+  gap: var(--bs-tab-gap-vertical);
+}
+
+.bs-tab:focus-visible {
+  outline: 2px solid var(--bs-tab-focus-ring-color);
+  outline-offset: 2px;
+}
+
+/* Deselected hover/focus/pressed: text/icon becomes the default (non-muted) color, and the
+   underline "preview" appears in a muted neutral color. */
+.bs-tab:not(.bs-tab--selected):not(.bs-tab--disabled):hover,
+.bs-tab:not(.bs-tab--selected):not(.bs-tab--disabled):focus-visible,
+.bs-tab:not(.bs-tab--selected):not(.bs-tab--disabled):active {
+  color: var(--bs-tab-color-hover);
+}
+
+.bs-tab:not(.bs-tab--selected):not(.bs-tab--disabled):hover .bs-tab__icon,
+.bs-tab:not(.bs-tab--selected):not(.bs-tab--disabled):focus-visible .bs-tab__icon,
+.bs-tab:not(.bs-tab--selected):not(.bs-tab--disabled):active .bs-tab__icon {
+  color: var(--bs-tab-icon-color-hover);
+}
+
+.bs-tab:not(.bs-tab--selected):not(.bs-tab--disabled):hover .bs-tab__indicator,
+.bs-tab:not(.bs-tab--selected):not(.bs-tab--disabled):focus-visible .bs-tab__indicator,
+.bs-tab:not(.bs-tab--selected):not(.bs-tab--disabled):active .bs-tab__indicator {
+  background: var(--bs-tab-indicator-hover);
+}
+
+/* Selected: text/icon in the primary color, underline always present, in any interaction state --
+   darkening slightly on hover/focus/pressed. */
+.bs-tab--selected {
+  color: var(--bs-tab-color-selected);
+}
+
+.bs-tab--selected .bs-tab__icon--has-content {
+  color: var(--bs-tab-color-selected);
+}
+
+.bs-tab--selected .bs-tab__indicator {
+  background: var(--bs-tab-indicator-selected);
+}
+
+.bs-tab--selected:not(.bs-tab--disabled):hover,
+.bs-tab--selected:not(.bs-tab--disabled):focus-visible {
+  color: var(--bs-tab-color-selected-hover);
+}
+
+.bs-tab--selected:not(.bs-tab--disabled):hover .bs-tab__icon--has-content,
+.bs-tab--selected:not(.bs-tab--disabled):focus-visible .bs-tab__icon--has-content {
+  color: var(--bs-tab-color-selected-hover);
+}
+
+.bs-tab--selected:not(.bs-tab--disabled):hover .bs-tab__indicator,
+.bs-tab--selected:not(.bs-tab--disabled):focus-visible .bs-tab__indicator {
+  background: var(--bs-tab-indicator-selected-hover);
+}
+
+/* Pressed (:active) is a distinctly darker shade than hover/focus, per the Figma spec (selected
+   pressed uses color/primary/pressed, not color/primary/hover) -- not the same rule as above. */
+.bs-tab--selected:not(.bs-tab--disabled):active {
+  color: var(--bs-tab-color-selected-pressed);
+}
+
+.bs-tab--selected:not(.bs-tab--disabled):active .bs-tab__icon--has-content {
+  color: var(--bs-tab-color-selected-pressed);
+}
+
+.bs-tab--selected:not(.bs-tab--disabled):active .bs-tab__indicator {
+  background: var(--bs-tab-indicator-selected-pressed);
+}
+
+.bs-tab--disabled {
+  color: var(--bs-tab-color-disabled);
+  cursor: not-allowed;
+}
+
+.bs-tab--disabled .bs-tab__icon--has-content {
+  color: var(--bs-tab-icon-color-disabled);
+}
+
+/* Disabled always wins over selected for the underline -- no indicator when disabled, even if the
+   tab is also selected. */
+.bs-tab--disabled .bs-tab__indicator {
+  background: transparent;
+}
+
+.bs-tab__icon {
+  display: none;
+  width: 24px;
+  height: 24px;
+  flex-shrink: 0;
+  color: var(--bs-tab-icon-color-default);
+}
+
+.bs-tab__icon--has-content {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.bs-tab__icon ::slotted(svg) {
+  width: 24px;
+  height: 24px;
+}
+
+.bs-tab__label {
+  display: none;
+  font-size: var(--bs-tab-font-size);
+  line-height: calc(var(--bs-tab-line-height) * 1px);
+  white-space: nowrap;
+}
+
+.bs-tab__label--has-content {
+  display: inline-block;
+}
+
+.bs-tab__badge {
+  display: none;
+}
+
+.bs-tab__badge--has-content {
+  display: inline-flex;
+  align-items: center;
+}
+
+/* The underline indicator: a real element (not a ::after pseudo-element) so it's independently
+   inspectable/stylable via ::part(indicator) -- this codebase doesn't use ::after anywhere else,
+   and generally prefers real parts as the customization surface for anything that might need its
+   own styling. Absolutely positioned along the bottom edge, transparent (no fill) until an
+   enabled/selected/hover state above sets its background. */
+.bs-tab__indicator {
+  position: absolute;
+  left: var(--bs-tab-padding-x);
+  right: var(--bs-tab-padding-x);
+  bottom: 0;
+  height: 2px;
+  background: transparent;
+  border-radius: var(--bs-border-radius-50, 2px);
+}

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

@@ -0,0 +1,232 @@
+import { h } from "@stencil/core";
+/**
+ * A single tab button -- an optional icon plus a text label, rendered as a real `<button>` so it
+ * participates correctly in tab order and native click/keyboard activation.
+ *
+ * ## When to use
+ * - As one button within a 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-tab`'s visual language (muted
+ *   until selected/hovered, underline indicator) only makes sense as part of a set.
+ *
+ * `selected` is NOT self-toggling -- clicking a `bs-tab` only emits `bsSelect`, it does not set its
+ * own `selected` prop, and it does not unselect any sibling tabs. Wrap your `<bs-tab>` elements in
+ * `<bs-tabs type="bs-tab">` -- it owns `role="tablist"` and coordinates selection (listening for
+ * `bsSelect` and setting `selected`/`false` across siblings) for you. Using `bs-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-radio.mdx` documents for `bs-radio`'s missing
+ * `bs-radio-group`. See `bs-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 icon (24x24). When empty (text-only), no space is reserved for it.
+ * @slot badge - Optional trailing badge, rendered after the label (e.g. an unread count). Typically
+ * a `bs-badge` element -- consumer's responsibility to style/populate, this component just reserves
+ * a slot for it. Only rendered for text-only and icon+text-horizontal layouts, per the design spec
+ * (not icon-only or icon+text-vertical).
+ * @part tab - The button element.
+ * @part icon - The icon wrapper.
+ * @part label - The label wrapper.
+ * @part badge - The badge wrapper.
+ * @part indicator - The selection/hover underline indicator.
+ */
+// Note: this component's CSS Custom Properties (--bs-tab-*) are documented via @prop comments in
+// bs-tab.css, not here -- Stencil's docs generator only parses @prop out of CSS file comments, not
+// the class-level JSDoc (see bs-checkbox.tsx's/bs-radio.tsx's equivalent note).
+export class BsTab {
+    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-tab[selected]`. */
+    selected = false;
+    /** Disables the tab: sets the native `disabled` attribute, suppresses hover/focus styling, and
+     * prevents clicking from emitting `bsSelect`. */
+    disabled = false;
+    /** Where the icon sits relative to the label, when both `icon` and the default slot are
+     * populated. Ignored for icon-only/text-only layouts. */
+    iconPosition = 'start';
+    /** 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-button`'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;
+    /** Tracks whether the `badge` slot has assigned content. */
+    hasBadge = false;
+    /** Fires when the tab is clicked. Does not toggle `selected` itself -- see the class JSDoc. */
+    bsSelect;
+    /**
+     * Computes the initial `hasIcon`/`hasLabel`/`hasBadge` state directly from the host's light DOM
+     * children, before first render -- same reasoning as `bs-button.componentWillLoad` (a slot with
+     * zero assigned nodes from the start never fires `slotchange`).
+     */
+    componentWillLoad() {
+        this.hasIcon = this.hasSlottedContent('icon');
+        this.hasLabel = this.hasSlottedContent(null);
+        this.hasBadge = this.hasSlottedContent('badge');
+    }
+    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;
+    };
+    onBadgeSlotchange = (ev) => {
+        this.hasBadge = ev.target.assignedNodes().length > 0;
+    };
+    onClick = () => {
+        if (this.disabled)
+            return;
+        this.bsSelect.emit();
+    };
+    render() {
+        const iconOnly = this.hasIcon && !this.hasLabel;
+        const vertical = this.hasIcon && this.hasLabel && this.iconPosition === 'top';
+        const showBadge = this.hasBadge && !iconOnly && !vertical;
+        return (h("button", { key: 'de1416c9ee8414405513dd4b9a828d7a3d0ae330', type: "button", part: "tab", role: "tab", class: `bs-tab ${this.selected ? 'bs-tab--selected' : ''} ${this.disabled ? 'bs-tab--disabled' : ''} ${iconOnly ? 'bs-tab--icon-only' : ''} ${vertical ? 'bs-tab--vertical' : ''}`, disabled: this.disabled, "aria-selected": String(this.selected), "aria-disabled": this.disabled ? 'true' : undefined, "aria-label": this.ariaLabel, onClick: this.onClick }, h("span", { key: 'd884d90267fac3ec8fc9e9bcd8b9cefc5153b47e', part: "icon", class: `bs-tab__icon ${this.hasIcon ? 'bs-tab__icon--has-content' : ''}` }, h("slot", { key: '2194a3d72bafda2d0f830e4f9f5a6a92d08c5aa3', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: '181abd3f489648a7bf53a11b77bed47c56b2fd94', part: "label", class: `bs-tab__label ${this.hasLabel ? 'bs-tab__label--has-content' : ''}` }, h("slot", { key: '683020efc34ea270b700b5034631a549796510f1', onSlotchange: this.onLabelSlotchange })), h("span", { key: '02dfede0c88b1b2f805128ce11a5134fd4c83b6d', part: "badge", class: `bs-tab__badge ${showBadge ? 'bs-tab__badge--has-content' : ''}` }, h("slot", { key: 'e712da5b095aa9e3c6c8b7f8fa0bee86c0ef7b20', name: "badge", onSlotchange: this.onBadgeSlotchange })), h("span", { key: 'a743816f44a8c0cb08dbe518ae521bf05d5c5a08', part: "indicator", class: "bs-tab__indicator" })));
+    }
+    static get is() { return "bs-tab"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bs-tab.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bs-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-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"
+            },
+            "iconPosition": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BsTabIconPosition",
+                    "resolved": "\"start\" | \"top\"",
+                    "references": {
+                        "BsTabIconPosition": {
+                            "location": "local",
+                            "path": "/Users/vivka/brandsync-web-components/src/components/bs-tab/bs-tab/bs-tab.tsx",
+                            "id": "src/components/bs-tab/bs-tab/bs-tab.tsx::BsTabIconPosition"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Where the icon sits relative to the label, when both `icon` and the default slot are\npopulated. Ignored for icon-only/text-only layouts."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon-position",
+                "defaultValue": "'start'"
+            },
+            "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-button`'s identical prop."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aria-label",
+                "defaultValue": "null"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "hasIcon": {},
+            "hasLabel": {},
+            "hasBadge": {}
+        };
+    }
+    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-tab/bs-tab.stories.js

@@ -0,0 +1,138 @@
+import { html, nothing } from "lit";
+import { componentDescription, propDescription } from "../../../stories-utils";
+const iconPositions = ['start', 'top'];
+// `start`/`top` are the real prop values, but "Horizontal"/"Vertical" is what the layout actually
+// looks like -- Storybook's select control supports a separate display-label map for this.
+const iconPositionLabels = { start: 'Horizontal', top: 'Vertical' };
+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-tab',
+    parameters: { docs: { description: { component: componentDescription('bs-tab') } } },
+    // role="tab" is only valid ARIA inside a role="tablist" ancestor (axe-core flags a lone bs-tab
+    // as a critical aria-required-parent violation otherwise -- see bs-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-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-tab
+        ?selected=${args.selected}
+        ?disabled=${args.disabled}
+        icon-position=${args.iconPosition}
+        aria-label=${args.ariaLabel || nothing}
+      >
+        ${args.icon ? homeIcon : ''}${args.label}
+        ${args.badge ? html `<bs-badge slot="badge" variant="primary">3</bs-badge>` : ''}
+      </bs-tab>
+    </div>
+  `,
+    argTypes: {
+        selected: { control: 'boolean', description: propDescription('bs-tab', 'selected') },
+        disabled: { control: 'boolean', description: propDescription('bs-tab', 'disabled') },
+        icon: { control: 'boolean', description: 'Toggles an icon (not a real attribute -- see the `icon` slot).' },
+        iconPosition: {
+            control: { type: 'select', labels: iconPositionLabels },
+            options: iconPositions,
+            description: propDescription('bs-tab', 'iconPosition'),
+        },
+        badge: { control: 'boolean', description: 'Toggles a trailing badge (not a real attribute -- see the `badge` slot).' },
+        label: { control: 'text', description: "Slotted label content (not a real attribute -- see the default slot)." },
+        ariaLabel: { control: 'text', description: propDescription('bs-tab', 'ariaLabel') },
+    },
+    args: {
+        selected: false,
+        disabled: false,
+        icon: false,
+        iconPosition: 'start',
+        badge: false,
+        label: 'Overview',
+        ariaLabel: '',
+    },
+};
+export default meta;
+export const Default = {};
+export const IconOnly = {
+    name: 'Icon only',
+    args: { icon: true, label: '', ariaLabel: 'Home' },
+};
+export const IconAndTextHorizontal = {
+    name: 'Icon and text (horizontal)',
+    args: { icon: true },
+};
+export const IconAndTextVertical = {
+    name: 'Icon and text (vertical)',
+    args: { icon: true, iconPosition: 'top' },
+};
+export const Selected = {
+    args: { selected: true },
+};
+export const Disabled = {
+    args: { disabled: true },
+};
+export const WithBadge = {
+    name: 'With a badge',
+    args: { badge: true, label: 'Inbox' },
+};
+const groupTabLabels = ['Overview', 'Details', 'Settings', 'Archived'];
+const groupOrientations = ['horizontal', 'vertical'];
+const groupOrientationLabels = { horizontal: 'Horizontal', vertical: 'Vertical' };
+// 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 BsTabArgs.
+//
+// `groupOrientation` is a story-only concept, not a bs-tab prop: it's the layout direction of the
+// TAB BAR itself (a horizontal row of tabs across the top vs. a vertical stack, e.g. a sidebar
+// tab list) -- distinct from `iconPosition`, which is about the icon/label arrangement WITHIN one
+// tab. It's fed straight into <bs-tabs orientation=...>, which owns this layout.
+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 an icon on every tab in the group (not a real attribute -- see the `icon` slot).' },
+        iconPosition: {
+            control: { type: 'select', labels: iconPositionLabels },
+            options: iconPositions,
+            description: propDescription('bs-tab', 'iconPosition'),
+        },
+        badge: {
+            control: 'boolean',
+            description: 'Toggles a badge on every tab in the group (not a real attribute -- see the `badge` slot).',
+        },
+        groupOrientation: {
+            control: { type: 'select', labels: groupOrientationLabels },
+            options: groupOrientations,
+            description: 'Layout direction of the tab bar itself (not a bs-tab prop -- see the note above this story).',
+        },
+    },
+    args: {
+        selectedTab: 'Overview',
+        icon: false,
+        iconPosition: 'start',
+        badge: false,
+        groupOrientation: 'horizontal',
+    },
+    render: args => html `
+    <bs-tabs type="bs-tab" orientation=${args.groupOrientation}>
+      ${groupTabLabels.map(label => html `
+          <bs-tab ?selected=${label === args.selectedTab} ?disabled=${label === 'Archived'} icon-position=${args.iconPosition}>
+            ${args.icon ? homeIcon : ''}${label}
+            ${args.badge ? html `<bs-badge slot="badge" variant="primary">3</bs-badge>` : ''}
+          </bs-tab>
+        `)}
+    </bs-tabs>
+  `,
+};

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

@@ -0,0 +1,61 @@
+import { render, h, describe, it, expect } from "@stencil/vitest";
+describe('bs-tabs', () => {
+    it('renders a wrapper with role="tablist" and part="tablist"', async () => {
+        const { root } = await render(h("bs-tabs", null, h("bs-tab", null, "Overview")));
+        const tablist = root.shadowRoot.querySelector('[part="tablist"]');
+        expect(tablist).not.toBeNull();
+        expect(tablist.getAttribute('role')).toBe('tablist');
+    });
+    it('defaults type to "bs-tab" and orientation to "horizontal", reflecting aria-orientation', async () => {
+        const { root } = await render(h("bs-tabs", null, h("bs-tab", null, "Overview")));
+        const tablist = root.shadowRoot.querySelector('[part="tablist"]');
+        expect(tablist).toHaveClass('bs-tabs--bs-tab');
+        expect(tablist).not.toHaveClass('bs-tabs--vertical');
+        expect(tablist).toEqualAttribute('aria-orientation', 'horizontal');
+    });
+    it('orientation="vertical" applies the vertical layout class and aria-orientation', async () => {
+        const { root } = await render(h("bs-tabs", { orientation: "vertical" }, h("bs-tab", null, "Overview")));
+        const tablist = root.shadowRoot.querySelector('[part="tablist"]');
+        expect(tablist).toHaveClass('bs-tabs--vertical');
+        expect(tablist).toEqualAttribute('aria-orientation', 'vertical');
+    });
+    it('type="bs-inline-tab" applies the inline-tab wrapper class', async () => {
+        const { root } = await render(h("bs-tabs", { type: "bs-inline-tab" }, h("bs-inline-tab", null, "Overview")));
+        const tablist = root.shadowRoot.querySelector('[part="tablist"]');
+        expect(tablist).toHaveClass('bs-tabs--bs-inline-tab');
+    });
+    it('coordinates selection across slotted bs-tab children on click', async () => {
+        const { root, waitForChanges } = await render(h("bs-tabs", null, h("bs-tab", { selected: true }, "Overview"), h("bs-tab", null, "Details"), h("bs-tab", null, "Settings")));
+        const tabs = Array.from(root.querySelectorAll('bs-tab'));
+        const [first, second, third] = tabs;
+        expect(first.selected).toBe(true);
+        const secondButton = second.shadowRoot.querySelector('[part="tab"]');
+        secondButton.click();
+        await waitForChanges();
+        expect(first.selected).toBe(false);
+        expect(second.selected).toBe(true);
+        expect(third.selected).toBe(false);
+    });
+    it('coordinates selection across slotted bs-inline-tab children on click', async () => {
+        const { root, waitForChanges } = await render(h("bs-tabs", { type: "bs-inline-tab" }, h("bs-inline-tab", { selected: true }, "Overview"), h("bs-inline-tab", null, "Details"), h("bs-inline-tab", null, "Settings")));
+        const tabs = Array.from(root.querySelectorAll('bs-inline-tab'));
+        const [first, second, third] = tabs;
+        expect(first.selected).toBe(true);
+        const thirdButton = third.shadowRoot.querySelector('[part="tab"]');
+        thirdButton.click();
+        await waitForChanges();
+        expect(first.selected).toBe(false);
+        expect(second.selected).toBe(false);
+        expect(third.selected).toBe(true);
+    });
+    it('does not select a disabled slotted tab on click', async () => {
+        const { root, waitForChanges } = await render(h("bs-tabs", null, h("bs-tab", { selected: true }, "Overview"), h("bs-tab", { disabled: true }, "Details")));
+        const tabs = Array.from(root.querySelectorAll('bs-tab'));
+        const [first, second] = tabs;
+        const secondButton = second.shadowRoot.querySelector('[part="tab"]');
+        secondButton.click();
+        await waitForChanges();
+        expect(first.selected).toBe(true);
+        expect(second.selected).toBe(false);
+    });
+});