@brandsync/wc 0.1.0 → 1.1.0

package/dist/collection/components/bs-chip/bs-chip-filter/bs-chip-filter.stories.js

@@ -0,0 +1,76 @@
+import { html } from "lit";
+import { componentDescription, propDescription } from "../../../stories-utils";
+const meta = {
+    title: 'Components/bs-chip/bs-chip-filter',
+    parameters: { docs: { description: { component: componentDescription('bs-chip-filter') } } },
+    render: args => html `
+    <bs-chip-filter size=${args.size} ?selected=${args.selected} ?dropdown=${args.dropdown} ?disabled=${args.disabled}>${args.label}</bs-chip-filter>
+  `,
+    argTypes: {
+        size: { control: { type: 'select' }, options: ['md', 'lg'], description: propDescription('bs-chip-filter', 'size') },
+        selected: { control: 'boolean', description: propDescription('bs-chip-filter', 'selected') },
+        dropdown: { control: 'boolean', description: propDescription('bs-chip-filter', 'dropdown') },
+        disabled: { control: 'boolean', description: propDescription('bs-chip-filter', 'disabled') },
+        label: { control: 'text', description: 'Slotted label content (not a real attribute -- see the default slot).' },
+    },
+    args: {
+        size: 'lg',
+        selected: false,
+        dropdown: false,
+        disabled: false,
+        label: 'Label',
+    },
+};
+export default meta;
+export const Default = {};
+export const Selected = {
+    args: { selected: true },
+};
+export const WithDropdown = {
+    name: 'With dropdown caret',
+    args: { dropdown: true },
+};
+export const WithIcon = {
+    name: 'With icon',
+    render: args => html `
+    <bs-chip-filter size=${args.size} ?selected=${args.selected} ?dropdown=${args.dropdown} ?disabled=${args.disabled}>
+      <svg slot="icon" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+        <rect x="3" y="2" width="10" height="12" rx="1.5" stroke="currentColor" stroke-width="1.5" />
+        <path d="M7 12H9" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
+      </svg>
+      ${args.label}
+    </bs-chip-filter>
+  `,
+};
+export const WithIconAndDropdown = {
+    name: 'With icon and dropdown caret',
+    args: { dropdown: true },
+    render: args => html `
+    <bs-chip-filter size=${args.size} ?selected=${args.selected} ?dropdown=${args.dropdown} ?disabled=${args.disabled}>
+      <svg slot="icon" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+        <rect x="3" y="2" width="10" height="12" rx="1.5" stroke="currentColor" stroke-width="1.5" />
+        <path d="M7 12H9" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
+      </svg>
+      ${args.label}
+    </bs-chip-filter>
+  `,
+};
+export const Disabled = {
+    args: { disabled: true },
+};
+export const Medium = {
+    args: { size: 'md' },
+};
+export const AllVariants = {
+    name: 'All variants',
+    render: () => html `
+    <div style="display:flex; gap:12px; flex-wrap:wrap; align-items:center;">
+      <bs-chip-filter>Label</bs-chip-filter>
+      <bs-chip-filter selected>Label</bs-chip-filter>
+      <bs-chip-filter dropdown>Label</bs-chip-filter>
+      <bs-chip-filter selected dropdown>Label</bs-chip-filter>
+      <bs-chip-filter disabled>Label</bs-chip-filter>
+      <bs-chip-filter size="md">Label</bs-chip-filter>
+    </div>
+  `,
+};

package/dist/collection/components/bs-chip/bs-chip-informative/bs-chip-informative.cmp.test.js

@@ -0,0 +1,43 @@
+import { render, h, describe, it, expect } from "@stencil/vitest";
+describe('bs-chip-informative', () => {
+    it('defaults to color="neutral" and size="lg"', async () => {
+        const { root } = await render(h("bs-chip-informative", null, "Label"));
+        expect(root).toHaveClass('bs-chip-informative--neutral');
+        expect(root).toHaveClass('bs-chip-informative--lg');
+    });
+    ['neutral', 'warning', 'success', 'info', 'error'].forEach(color => {
+        it(`renders color="${color}" with the matching modifier class`, async () => {
+            const { root } = await render(h("bs-chip-informative", { color: color }, "Label"));
+            expect(root).toHaveClass(`bs-chip-informative--${color}`);
+        });
+    });
+    ['sm', 'md', 'lg'].forEach(size => {
+        it(`renders size="${size}" with the matching modifier class`, async () => {
+            const { root } = await render(h("bs-chip-informative", { size: size }, "Label"));
+            expect(root).toHaveClass(`bs-chip-informative--${size}`);
+        });
+    });
+    it('reflects disabled to the host attribute regardless of color', async () => {
+        const { root } = await render(h("bs-chip-informative", { color: "error", disabled: true }, "Label"));
+        expect(root).toEqualAttribute('disabled', '');
+        // The color class is still applied -- CSS source order makes the [disabled] rule win, not JS.
+        expect(root).toHaveClass('bs-chip-informative--error');
+    });
+    describe('icon slot and padding variant', () => {
+        it('has no icon and the text padding variant by default', async () => {
+            const { root } = await render(h("bs-chip-informative", null, "Label"));
+            expect(root.shadowRoot.querySelector('[part="icon"]')).not.toHaveClass('bs-chip-informative__icon--visible');
+            expect(root).toHaveClass('bs-chip-informative--text');
+        });
+        it('marks the icon visible and picks the icon padding variant when the icon slot has content', async () => {
+            const { root, waitForChanges } = await render(h("bs-chip-informative", null, h("svg", { slot: "icon" }), "Label"));
+            await waitForChanges();
+            expect(root.shadowRoot.querySelector('[part="icon"]')).toHaveClass('bs-chip-informative__icon--visible');
+            expect(root).toHaveClass('bs-chip-informative--icon');
+        });
+    });
+    it('renders label slot content', async () => {
+        const { root } = await render(h("bs-chip-informative", null, "Active"));
+        expect(root).toHaveTextContent('Active');
+    });
+});

package/dist/collection/components/bs-chip/bs-chip-informative/bs-chip-informative.css

@@ -0,0 +1,135 @@
+/**
+ * @prop --bs-chip-informative-height-sm: Height at size="sm". Aliased to --bs-spacing-250.
+ * @prop --bs-chip-informative-height-md: Height at size="md". Aliased to --bs-spacing-300.
+ * @prop --bs-chip-informative-height-lg: Height at size="lg". Aliased to --bs-spacing-400.
+ * @prop --bs-chip-informative-gap: Gap between icon and label. Aliased to --bs-spacing-50.
+ * @prop --bs-chip-informative-icon-size: Icon glyph size. 16px, matching Figma exactly -- constant
+ * across all sizes, only the chip's own height/font changes.
+ * @prop --bs-chip-informative-padding-x-glyph-side: Left-edge padding when there's a leading icon.
+ * Aliased to --bs-spacing-100.
+ * @prop --bs-chip-informative-padding-x-plain-side: Both edges' padding when there's no leading
+ * icon. Aliased to --bs-spacing-200 -- deliberately not the icon variant's own right-edge value
+ * (--bs-spacing-150) below; verified against Figma that the no-icon variant uses a bigger value on
+ * both sides rather than reusing the icon variant's smaller one-sided value.
+ * @prop --bs-chip-informative-padding-right-icon-variant: Right-edge padding specifically when
+ * there's a leading icon (the label-only edge in that case). Aliased to --bs-spacing-150.
+ * @prop --bs-chip-informative-font-size-sm: Aliased to --bs-font-size-xs (size="sm" only --
+ * every other size uses --bs-chip-informative-font-size below).
+ * @prop --bs-chip-informative-line-height-sm: Aliased to --bs-line-height-caption-sm (size="sm"
+ * only).
+ * @prop --bs-chip-informative-font-size: Aliased to --bs-font-size-sm (size="md"/"lg").
+ * @prop --bs-chip-informative-line-height: Aliased to --bs-line-height-body-sm (size="md"/"lg").
+ * @prop --bs-chip-informative-font-weight: Aliased to --bs-font-weight-regular.
+ *
+ * Color (background/text per color/disabled) comes directly from brandsync-tokens' own pre-built
+ * chip token set below -- shared across the whole bs-chip family, not local to this component,
+ * consumed directly rather than re-aliased under a bs-chip-informative-specific name.
+ */
+:host {
+  display: inline-flex;
+  align-items: center;
+  box-sizing: border-box;
+  gap: var(--bs-chip-informative-gap);
+  border-radius: var(--bs-border-radius-full);
+  font-family: inherit;
+  font-weight: var(--bs-chip-informative-font-weight);
+  white-space: nowrap;
+
+  --bs-chip-informative-height-sm: var(--bs-spacing-250);
+  --bs-chip-informative-height-md: var(--bs-spacing-300);
+  --bs-chip-informative-height-lg: var(--bs-spacing-400);
+  --bs-chip-informative-gap: var(--bs-spacing-50);
+  --bs-chip-informative-icon-size: 16px;
+  --bs-chip-informative-padding-x-glyph-side: var(--bs-spacing-100);
+  --bs-chip-informative-padding-right-icon-variant: var(--bs-spacing-150);
+  --bs-chip-informative-padding-x-plain-side: var(--bs-spacing-200);
+  --bs-chip-informative-font-size-sm: var(--bs-font-size-xs);
+  --bs-chip-informative-line-height-sm: var(--bs-line-height-caption-sm);
+  --bs-chip-informative-font-size: var(--bs-font-size-sm);
+  --bs-chip-informative-line-height: var(--bs-line-height-body-sm);
+  --bs-chip-informative-font-weight: var(--bs-font-weight-regular);
+}
+
+:host(.bs-chip-informative--lg) {
+  height: var(--bs-chip-informative-height-lg);
+  font-size: var(--bs-chip-informative-font-size);
+  line-height: calc(var(--bs-chip-informative-line-height) * 1px);
+}
+
+:host(.bs-chip-informative--md) {
+  height: var(--bs-chip-informative-height-md);
+  font-size: var(--bs-chip-informative-font-size);
+  line-height: calc(var(--bs-chip-informative-line-height) * 1px);
+}
+
+:host(.bs-chip-informative--sm) {
+  height: var(--bs-chip-informative-height-sm);
+  font-size: var(--bs-chip-informative-font-size-sm);
+  line-height: calc(var(--bs-chip-informative-line-height-sm) * 1px);
+}
+
+:host(.bs-chip-informative--icon) {
+  padding-left: var(--bs-chip-informative-padding-x-glyph-side);
+  padding-right: var(--bs-chip-informative-padding-right-icon-variant);
+}
+
+:host(.bs-chip-informative--text) {
+  padding-left: var(--bs-chip-informative-padding-x-plain-side);
+  padding-right: var(--bs-chip-informative-padding-x-plain-side);
+}
+
+.bs-chip-informative__icon {
+  display: none;
+  flex-shrink: 0;
+  width: var(--bs-chip-informative-icon-size);
+  height: var(--bs-chip-informative-icon-size);
+}
+
+.bs-chip-informative__icon--visible {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.bs-chip-informative__icon ::slotted(*) {
+  display: block;
+  width: var(--bs-chip-informative-icon-size);
+  height: var(--bs-chip-informative-icon-size);
+}
+
+.bs-chip-informative__label {
+  display: flex;
+  align-items: center;
+}
+
+:host(.bs-chip-informative--neutral) {
+  background: var(--bs-chip-bg-neutral-container);
+  color: var(--bs-chip-text-neutral);
+}
+
+:host(.bs-chip-informative--warning) {
+  background: var(--bs-chip-bg-warning-container);
+  color: var(--bs-chip-text-warning);
+}
+
+:host(.bs-chip-informative--success) {
+  background: var(--bs-chip-bg-success-container);
+  color: var(--bs-chip-text-success);
+}
+
+:host(.bs-chip-informative--info) {
+  background: var(--bs-chip-bg-info-container);
+  color: var(--bs-chip-text-info);
+}
+
+:host(.bs-chip-informative--error) {
+  background: var(--bs-chip-bg-error-container);
+  color: var(--bs-chip-text-error);
+}
+
+/* Overrides whichever color class is also present -- declared last, plain attribute selector
+   specificity (0,1,0) ties with the color classes' own (0,1,0), so source order decides. */
+:host([disabled]) {
+  background: var(--bs-chip-bg-disabled);
+  color: var(--bs-chip-text-disabled);
+}

package/dist/collection/components/bs-chip/bs-chip-informative/bs-chip-informative.js

@@ -0,0 +1,143 @@
+import { Host, h } from "@stencil/core";
+/**
+ * A pill-shaped, non-interactive label for conveying a category or status at a glance, optionally
+ * paired with a leading icon. Unlike `bs-chip-filter`/`bs-chip-input`, this is purely informational
+ * -- no click/select/remove behavior, no hover/focus/pressed states.
+ *
+ * ## When to use
+ * - Conveying a category or status inline with other content, with more color options and an
+ *   optional icon than `bs-badge` offers.
+ *
+ * ## When not to use
+ * - Anything clickable/selectable -- use `bs-chip-filter`.
+ * - A short, fixed status label with no color/icon needs -- `bs-badge` is the simpler choice.
+ *
+ * @slot - Default slot: the chip's label content.
+ * @slot icon - Optional leading icon.
+ * @part icon - The icon wrapper element.
+ * @part label - The text label element.
+ */
+export class BsChipInformative {
+    el;
+    /** Semantic color. Maps directly to the brandsync-tokens `--bs-chip-bg-*-container`/
+     * `--bs-chip-text-*` sets. Ignored (in favor of the disabled token set) when `disabled` is
+     * set -- same override relationship `bs-stepper-step`'s `error`/`disabled` props have. */
+    color = 'neutral';
+    /** Sizing scale. Controls height and font-size/line-height together -- unlike
+     * `bs-chip-filter`/`bs-chip-input`, Figma specs a distinct (smaller) font at `size="sm"`, not
+     * just a shorter pill. */
+    size = 'lg';
+    /** Overrides `color` with the disabled token set, regardless of its value. Reflected so
+     * `:host([disabled])` can apply it in CSS. */
+    disabled = false;
+    /** Tracks whether the `icon` slot has assigned content, so the icon/label gap and left-edge
+     * padding only apply when there's actually a leading icon. */
+    hasIcon = false;
+    componentWillLoad() {
+        this.hasIcon = this.hasSlottedContent('icon');
+    }
+    hasSlottedContent(slotName) {
+        return Array.from(this.el.childNodes).some(node => node.nodeType === Node.ELEMENT_NODE && node.getAttribute('slot') === slotName);
+    }
+    onIconSlotchange = (ev) => {
+        this.hasIcon = ev.target.assignedNodes().length > 0;
+    };
+    render() {
+        const paddingVariant = this.hasIcon ? 'icon' : 'text';
+        return (h(Host, { key: '333f8eb96435393dc676b7422de79a43f0e3d9d8', class: `bs-chip-informative bs-chip-informative--${this.color} bs-chip-informative--${this.size} bs-chip-informative--${paddingVariant}` }, h("span", { key: '5af00525b1ce8e1cee16e896c6fd1bee1e8344c0', part: "icon", class: `bs-chip-informative__icon ${this.hasIcon ? 'bs-chip-informative__icon--visible' : ''}` }, h("slot", { key: 'd6e72f0ea1a913b2a313441b83f1430549dcc5cc', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: '617013d83715e1d916e4bfc40185d31879acfab3', part: "label", class: "bs-chip-informative__label" }, h("slot", { key: 'dc6db50bff31169c3da18f472002528a78ed210a' }))));
+    }
+    static get is() { return "bs-chip-informative"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bs-chip-informative.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bs-chip-informative.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "color": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BsChipInformativeColor",
+                    "resolved": "\"error\" | \"info\" | \"neutral\" | \"success\" | \"warning\"",
+                    "references": {
+                        "BsChipInformativeColor": {
+                            "location": "local",
+                            "path": "/home/runner/work/Brandsync-web-components/Brandsync-web-components/packages/wc/src/components/bs-chip/bs-chip-informative/bs-chip-informative.tsx",
+                            "id": "src/components/bs-chip/bs-chip-informative/bs-chip-informative.tsx::BsChipInformativeColor"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Semantic color. Maps directly to the brandsync-tokens `--bs-chip-bg-*-container`/\n`--bs-chip-text-*` sets. Ignored (in favor of the disabled token set) when `disabled` is\nset -- same override relationship `bs-stepper-step`'s `error`/`disabled` props have."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "color",
+                "defaultValue": "'neutral'"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BsChipInformativeSize",
+                    "resolved": "\"lg\" | \"md\" | \"sm\"",
+                    "references": {
+                        "BsChipInformativeSize": {
+                            "location": "local",
+                            "path": "/home/runner/work/Brandsync-web-components/Brandsync-web-components/packages/wc/src/components/bs-chip/bs-chip-informative/bs-chip-informative.tsx",
+                            "id": "src/components/bs-chip/bs-chip-informative/bs-chip-informative.tsx::BsChipInformativeSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sizing scale. Controls height and font-size/line-height together -- unlike\n`bs-chip-filter`/`bs-chip-input`, Figma specs a distinct (smaller) font at `size=\"sm\"`, not\njust a shorter pill."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "'lg'"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Overrides `color` with the disabled token set, regardless of its value. Reflected so\n`:host([disabled])` can apply it in CSS."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "hasIcon": {}
+        };
+    }
+    static get elementRef() { return "el"; }
+}

package/dist/collection/components/bs-chip/bs-chip-informative/bs-chip-informative.stories.js

@@ -0,0 +1,70 @@
+import { html } from "lit";
+import { componentDescription, propDescription } from "../../../stories-utils";
+const colors = ['neutral', 'warning', 'success', 'info', 'error'];
+const meta = {
+    title: 'Components/bs-chip/bs-chip-informative',
+    parameters: { docs: { description: { component: componentDescription('bs-chip-informative') } } },
+    render: args => html ` <bs-chip-informative color=${args.color} size=${args.size} ?disabled=${args.disabled}>${args.label}</bs-chip-informative> `,
+    argTypes: {
+        color: { control: { type: 'select' }, options: colors, description: propDescription('bs-chip-informative', 'color') },
+        size: { control: { type: 'select' }, options: ['sm', 'md', 'lg'], description: propDescription('bs-chip-informative', 'size') },
+        disabled: { control: 'boolean', description: propDescription('bs-chip-informative', 'disabled') },
+        label: { control: 'text', description: 'Slotted label content (not a real attribute -- see the default slot).' },
+    },
+    args: {
+        color: 'neutral',
+        size: 'lg',
+        disabled: false,
+        label: 'Label',
+    },
+};
+export default meta;
+export const Neutral = {};
+export const Warning = {
+    args: { color: 'warning' },
+};
+export const Success = {
+    args: { color: 'success' },
+};
+export const Info = {
+    args: { color: 'info' },
+};
+export const Error = {
+    args: { color: 'error' },
+};
+export const WithIcon = {
+    name: 'With icon',
+    render: args => html `
+    <bs-chip-informative color=${args.color} 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="M8 3.5V12.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
+        <path d="M3.5 8H12.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
+      </svg>
+      ${args.label}
+    </bs-chip-informative>
+  `,
+};
+export const Disabled = {
+    args: { disabled: true },
+};
+export const Small = {
+    args: { size: 'sm' },
+};
+export const Medium = {
+    args: { size: 'md' },
+};
+export const AllVariants = {
+    name: 'All variants',
+    render: () => html `
+    <div style="display:flex; gap:12px; flex-wrap:wrap; align-items:center;">
+      <bs-chip-informative color="neutral">Neutral</bs-chip-informative>
+      <bs-chip-informative color="warning">Warning</bs-chip-informative>
+      <bs-chip-informative color="success">Success</bs-chip-informative>
+      <bs-chip-informative color="info">Info</bs-chip-informative>
+      <bs-chip-informative color="error">Error</bs-chip-informative>
+      <bs-chip-informative disabled>Disabled</bs-chip-informative>
+      <bs-chip-informative size="md">Medium</bs-chip-informative>
+      <bs-chip-informative size="sm">Small</bs-chip-informative>
+    </div>
+  `,
+};

package/dist/collection/components/bs-chip/bs-chip-input/bs-chip-input.cmp.test.js

@@ -0,0 +1,93 @@
+import { render, h, describe, it, expect } from "@stencil/vitest";
+describe('bs-chip-input', () => {
+    it('renders an unselected chip by default', async () => {
+        const { root } = await render(h("bs-chip-input", null, "Label"));
+        const body = root.shadowRoot.querySelector('[part="body"]');
+        expect(body).toEqualAttribute('aria-pressed', 'false');
+        expect(root).not.toEqualAttribute('selected', '');
+    });
+    it('reflects the selected prop to the host attribute and the body button', async () => {
+        const { root } = await render(h("bs-chip-input", { selected: true }, "Label"));
+        expect(root).toEqualAttribute('selected', '');
+        const body = root.shadowRoot.querySelector('[part="body"]');
+        expect(body).toEqualAttribute('aria-pressed', 'true');
+    });
+    it('clicking the body toggles selected and emits bsChange with the new value', async () => {
+        const { root, waitForChanges, spyOnEvent } = await render(h("bs-chip-input", null, "Label"));
+        const bsChangeSpy = spyOnEvent('bsChange');
+        const body = root.shadowRoot.querySelector('[part="body"]');
+        body.click();
+        await waitForChanges();
+        expect(root.selected).toBe(true);
+        expect(bsChangeSpy).toHaveReceivedEventTimes(1);
+        expect(bsChangeSpy).toHaveReceivedEventDetail(true);
+        body.click();
+        await waitForChanges();
+        expect(root.selected).toBe(false);
+        expect(bsChangeSpy).toHaveReceivedEventTimes(2);
+        expect(bsChangeSpy).toHaveReceivedEventDetail(false);
+    });
+    it('clicking the remove button emits bsRemove and does not affect selected', async () => {
+        const { root, waitForChanges, spyOnEvent } = await render(h("bs-chip-input", { selected: true }, "Label"));
+        const bsRemoveSpy = spyOnEvent('bsRemove');
+        const bsChangeSpy = spyOnEvent('bsChange');
+        const removeButton = root.shadowRoot.querySelector('[part="remove"]');
+        removeButton.click();
+        await waitForChanges();
+        expect(bsRemoveSpy).toHaveReceivedEventTimes(1);
+        expect(bsChangeSpy).toHaveReceivedEventTimes(0);
+        expect(root.selected).toBe(true);
+    });
+    it('sets the remove button accessible name from the slotted label text', async () => {
+        const { root } = await render(h("bs-chip-input", null, "Active users"));
+        const removeButton = root.shadowRoot.querySelector('[part="remove"]');
+        expect(removeButton).toEqualAttribute('aria-label', 'Remove Active users');
+    });
+    describe('disabled', () => {
+        it('sets the disabled attribute on both the body and remove buttons', async () => {
+            const { root } = await render(h("bs-chip-input", { disabled: true }, "Label"));
+            expect(root.shadowRoot.querySelector('[part="body"]')).toHaveAttribute('disabled');
+            expect(root.shadowRoot.querySelector('[part="remove"]')).toHaveAttribute('disabled');
+        });
+        it('prevents toggling selected via click', async () => {
+            const { root, waitForChanges, spyOnEvent } = await render(h("bs-chip-input", { disabled: true }, "Label"));
+            const bsChangeSpy = spyOnEvent('bsChange');
+            const body = root.shadowRoot.querySelector('[part="body"]');
+            body.click();
+            await waitForChanges();
+            expect(root.selected).toBe(false);
+            expect(bsChangeSpy).toHaveReceivedEventTimes(0);
+        });
+        it('prevents removal via click', async () => {
+            const { root, waitForChanges, spyOnEvent } = await render(h("bs-chip-input", { disabled: true }, "Label"));
+            const bsRemoveSpy = spyOnEvent('bsRemove');
+            const removeButton = root.shadowRoot.querySelector('[part="remove"]');
+            removeButton.click();
+            await waitForChanges();
+            expect(bsRemoveSpy).toHaveReceivedEventTimes(0);
+        });
+    });
+    ['md', 'lg'].forEach(size => {
+        it(`renders size="${size}" with the matching modifier class`, async () => {
+            const { root } = await render(h("bs-chip-input", { size: size }, "Label"));
+            expect(root).toHaveClass(`bs-chip-input--${size}`);
+        });
+    });
+    describe('icon slot and padding variant', () => {
+        it('has no icon and the text padding variant by default', async () => {
+            const { root } = await render(h("bs-chip-input", null, "Label"));
+            expect(root.shadowRoot.querySelector('[part="icon"]')).not.toHaveClass('bs-chip-input__icon--visible');
+            expect(root).toHaveClass('bs-chip-input--text');
+        });
+        it('marks the icon visible and picks the icon padding variant when the icon slot has content', async () => {
+            const { root, waitForChanges } = await render(h("bs-chip-input", null, h("svg", { slot: "icon" }), "Label"));
+            await waitForChanges();
+            expect(root.shadowRoot.querySelector('[part="icon"]')).toHaveClass('bs-chip-input__icon--visible');
+            expect(root).toHaveClass('bs-chip-input--icon');
+        });
+    });
+    it('renders label slot content', async () => {
+        const { root } = await render(h("bs-chip-input", null, "Active users"));
+        expect(root).toHaveTextContent('Active users');
+    });
+});