@brandsync/wc 1.0.0 → 1.1.0

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

@@ -0,0 +1,156 @@
+/**
+ * @prop --bs-chip-filter-height-md: Height at size="md". Aliased to --bs-spacing-300.
+ * @prop --bs-chip-filter-height-lg: Height at size="lg". Aliased to --bs-spacing-400.
+ * @prop --bs-chip-filter-gap: Gap between icon/label/caret. Aliased to --bs-spacing-50.
+ * @prop --bs-chip-filter-icon-size: Icon/caret glyph size. 16px, matching Figma exactly --
+ * constant across both sizes, only the chip's own height changes.
+ * @prop --bs-chip-filter-padding-x-glyph-side: Horizontal padding on an edge adjacent to the icon
+ * or the caret. Aliased to --bs-spacing-100.
+ * @prop --bs-chip-filter-padding-x-plain-side: Horizontal padding on a label-only edge, when the
+ * opposite edge has a glyph. Aliased to --bs-spacing-150.
+ * @prop --bs-chip-filter-padding-x-text-only: Horizontal padding on both edges, when neither has
+ * a glyph. Aliased to --bs-spacing-200 -- deliberately not the same as
+ * --bs-chip-filter-padding-x-plain-side; verified against Figma that a plain-text chip (no icon,
+ * no dropdown) uses a bigger value on both sides rather than the smaller one-sided compensating
+ * value used when only one edge lacks a glyph.
+ * @prop --bs-chip-filter-font-size: Aliased to --bs-font-size-sm.
+ * @prop --bs-chip-filter-line-height: Aliased to --bs-line-height-body-sm.
+ * @prop --bs-chip-filter-font-weight: Aliased to --bs-font-weight-regular.
+ *
+ * Color (background/text per selected/hover/focus/pressed/disabled state) comes directly from
+ * brandsync-tokens' own pre-built chip token set (--bs-chip-bg-..., --bs-chip-text-...,
+ * --bs-chip-border-...) below -- those are shared across the whole bs-chip family, not local to
+ * this component, so they're consumed directly rather than re-aliased under a
+ * bs-chip-filter-specific name.
+ */
+:host {
+  display: inline-flex;
+
+  --bs-chip-filter-height-md: var(--bs-spacing-300);
+  --bs-chip-filter-height-lg: var(--bs-spacing-400);
+  --bs-chip-filter-gap: var(--bs-spacing-50);
+  --bs-chip-filter-icon-size: 16px;
+  --bs-chip-filter-padding-x-glyph-side: var(--bs-spacing-100);
+  --bs-chip-filter-padding-x-plain-side: var(--bs-spacing-150);
+  --bs-chip-filter-padding-x-text-only: var(--bs-spacing-200);
+  --bs-chip-filter-font-size: var(--bs-font-size-sm);
+  --bs-chip-filter-line-height: var(--bs-line-height-body-sm);
+  --bs-chip-filter-font-weight: var(--bs-font-weight-regular);
+}
+
+.bs-chip-filter {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--bs-chip-filter-gap);
+  box-sizing: border-box;
+  border: none;
+  border-radius: var(--bs-border-radius-full);
+  font-family: inherit;
+  font-size: var(--bs-chip-filter-font-size);
+  font-weight: var(--bs-chip-filter-font-weight);
+  line-height: calc(var(--bs-chip-filter-line-height) * 1px);
+  white-space: nowrap;
+  cursor: pointer;
+  background: var(--bs-chip-bg-primary-container);
+  color: var(--bs-chip-text-primary);
+  transition: background-color var(--bs-duration-fast, 120ms) var(--bs-easing-standard, ease);
+}
+
+.bs-chip-filter--md {
+  height: var(--bs-chip-filter-height-md);
+}
+
+.bs-chip-filter--lg {
+  height: var(--bs-chip-filter-height-lg);
+}
+
+.bs-chip-filter--icon-dropdown {
+  padding: 0 var(--bs-chip-filter-padding-x-glyph-side);
+}
+
+.bs-chip-filter--icon-only {
+  padding-left: var(--bs-chip-filter-padding-x-glyph-side);
+  padding-right: var(--bs-chip-filter-padding-x-plain-side);
+}
+
+.bs-chip-filter--dropdown-only {
+  padding-left: var(--bs-chip-filter-padding-x-plain-side);
+  padding-right: var(--bs-chip-filter-padding-x-glyph-side);
+}
+
+.bs-chip-filter--text-only {
+  padding: 0 var(--bs-chip-filter-padding-x-text-only);
+}
+
+.bs-chip-filter__icon {
+  display: none;
+  flex-shrink: 0;
+  width: var(--bs-chip-filter-icon-size);
+  height: var(--bs-chip-filter-icon-size);
+}
+
+.bs-chip-filter__icon--visible {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.bs-chip-filter__icon ::slotted(*) {
+  display: block;
+  width: var(--bs-chip-filter-icon-size);
+  height: var(--bs-chip-filter-icon-size);
+}
+
+.bs-chip-filter__label {
+  display: flex;
+  align-items: center;
+}
+
+.bs-chip-filter__caret {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  width: var(--bs-chip-filter-icon-size);
+  height: var(--bs-chip-filter-icon-size);
+}
+
+/* Unselected (default): the light "container" background set. */
+.bs-chip-filter:hover:not(:disabled) {
+  background: var(--bs-chip-bg-primary-container-hover);
+}
+
+.bs-chip-filter:active:not(:disabled) {
+  background: var(--bs-chip-bg-primary-container-pressed);
+}
+
+.bs-chip-filter:focus-visible {
+  background: var(--bs-chip-bg-primary-container-focused);
+  outline: 2px solid var(--bs-chip-border-focus);
+  outline-offset: 2px;
+}
+
+/* Selected: the dark "primary" background set, inverse (white) text -- swaps every state above
+   to its --primary-* (not --primary-container-*) counterpart. */
+.bs-chip-filter--selected {
+  background: var(--bs-chip-bg-primary);
+  color: var(--bs-chip-text-inverse);
+}
+
+.bs-chip-filter--selected:hover:not(:disabled) {
+  background: var(--bs-chip-bg-primary-hover);
+}
+
+.bs-chip-filter--selected:active:not(:disabled) {
+  background: var(--bs-chip-bg-primary-pressed);
+}
+
+.bs-chip-filter--selected:focus-visible {
+  background: var(--bs-chip-bg-primary-focused);
+}
+
+.bs-chip-filter:disabled {
+  background: var(--bs-chip-bg-disabled);
+  color: var(--bs-chip-text-disabled);
+  cursor: not-allowed;
+}

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

@@ -0,0 +1,222 @@
+import { h } from "@stencil/core";
+/**
+ * A pill-shaped, selectable toggle used to filter a list or dataset (e.g. a "Filter chip" row
+ * above a table or search results), optionally paired with a leading icon and/or a dropdown caret
+ * that signals it opens a menu of further options.
+ *
+ * ## When to use
+ * - Letting a user toggle a filter on/off, or open a menu of filter options (pair `dropdown` with
+ *   your own `bs-menu` -- this component only renders the caret affordance, it doesn't manage a
+ *   menu itself).
+ *
+ * ## When not to use
+ * - A static, non-interactive status/category label -- use `bs-badge` instead.
+ * - A single primary action -- use `bs-button`.
+ *
+ * @slot - Default slot: the chip's label content.
+ * @slot icon - Optional leading icon, rendered before the label.
+ * @part icon - The icon wrapper element.
+ * @part label - The text label element.
+ * @part caret - The dropdown caret wrapper element, when `dropdown` is set.
+ */
+export class BsChipFilter {
+    el;
+    /** Sizing scale. Controls the chip's height only -- icon size, gap, and font size stay
+     * constant across sizes, matching the Figma spec exactly. */
+    size = 'lg';
+    /** Whether the chip reads as toggled on. Mutable so clicking it toggles directly, and
+     * reflected so consumers can target `bs-chip-filter[selected]` via CSS. */
+    selected = false;
+    /** Shows a trailing dropdown caret, signaling this chip opens a menu of further options.
+     * Purely a visual affordance -- wire up the actual menu (e.g. `bs-menu`) yourself. */
+    dropdown = false;
+    /** Disables the chip: sets the native `disabled` attribute, suppresses hover/focus/pressed
+     * styling, and prevents toggling. */
+    disabled = false;
+    /**
+     * Accessible name override. The visible label (default slot) already gives the native button
+     * an accessible name, so this is only needed if that text isn't sufficient on its own (e.g. it
+     * doesn't convey that activating the chip toggles a filter).
+     */
+    ariaLabel = null;
+    /** Tracks whether the `icon` slot has assigned content, so the icon/label gap only applies
+     * when there's actually a leading icon. */
+    hasIcon = false;
+    /** Emitted when `selected` changes via user interaction, with the new value. */
+    bsChange;
+    /** Same reasoning as bs-button's identical method: computes the initial state directly from
+     * the host's light DOM children, since a slot that starts (and stays) empty never fires
+     * `slotchange`. */
+    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;
+    };
+    onClick = () => {
+        this.selected = !this.selected;
+        this.bsChange.emit(this.selected);
+    };
+    render() {
+        // Matches the four Icon x Dropdown combinations verified against Figma (node 1905:9151):
+        // whichever edge is adjacent to a glyph (icon and/or caret) gets tighter padding, and a
+        // label-only edge gets more -- except when NEITHER edge has a glyph, where both edges use a
+        // third, larger value rather than the label-only one (see bs-chip-filter.css's own comment).
+        const paddingVariant = this.hasIcon && this.dropdown ? 'icon-dropdown' : this.hasIcon ? 'icon-only' : this.dropdown ? 'dropdown-only' : 'text-only';
+        return (h("button", { key: 'c585746cca27a4d60d2a0c242e26e19ba8b41677', type: "button", class: `bs-chip-filter bs-chip-filter--${this.size} bs-chip-filter--${paddingVariant} ${this.selected ? 'bs-chip-filter--selected' : ''}`, disabled: this.disabled, "aria-pressed": String(this.selected), "aria-label": this.ariaLabel, onClick: this.onClick }, h("span", { key: 'f62eda39d506b130e5cfe0881bfa80dd0241e1cf', part: "icon", class: `bs-chip-filter__icon ${this.hasIcon ? 'bs-chip-filter__icon--visible' : ''}` }, h("slot", { key: '233f80cba2500aa4fed6e1ccdb6d19f14fb64384', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: '74d101de8d1dd20bda1fbc789733282ae1a3784a', part: "label", class: "bs-chip-filter__label" }, h("slot", { key: '15db7eea134a9d3eac56a159c920141daed4e467' })), this.dropdown && (h("span", { key: 'e070c37932fa4bdc4f494472f361870e2f3d6b22', part: "caret", class: "bs-chip-filter__caret", "aria-hidden": "true" }, h(ChevronDownIcon, { key: '642401f2ddc833731875cfdd3b7d5d96f2272167' })))));
+    }
+    static get is() { return "bs-chip-filter"; }
+    static get encapsulation() { return "shadow"; }
+    static get delegatesFocus() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bs-chip-filter.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bs-chip-filter.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BsChipFilterSize",
+                    "resolved": "\"lg\" | \"md\"",
+                    "references": {
+                        "BsChipFilterSize": {
+                            "location": "local",
+                            "path": "/home/runner/work/Brandsync-web-components/Brandsync-web-components/packages/wc/src/components/bs-chip/bs-chip-filter/bs-chip-filter.tsx",
+                            "id": "src/components/bs-chip/bs-chip-filter/bs-chip-filter.tsx::BsChipFilterSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sizing scale. Controls the chip's height only -- icon size, gap, and font size stay\nconstant across sizes, matching the Figma spec exactly."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "'lg'"
+            },
+            "selected": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the chip reads as toggled on. Mutable so clicking it toggles directly, and\nreflected so consumers can target `bs-chip-filter[selected]` via CSS."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "selected",
+                "defaultValue": "false"
+            },
+            "dropdown": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Shows a trailing dropdown caret, signaling this chip opens a menu of further options.\nPurely a visual affordance -- wire up the actual menu (e.g. `bs-menu`) yourself."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "dropdown",
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disables the chip: sets the native `disabled` attribute, suppresses hover/focus/pressed\nstyling, and 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 override. The visible label (default slot) already gives the native button\nan accessible name, so this is only needed if that text isn't sufficient on its own (e.g. it\ndoesn't convey that activating the chip toggles a filter)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aria-label",
+                "defaultValue": "null"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "hasIcon": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "bsChange",
+                "name": "bsChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when `selected` changes via user interaction, with the new value."
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+}
+// Same icon already established for this exact "expand/collapse" affordance in
+// bs-navigation-drawer-item -- reused verbatim rather than pulling in Figma's own CaretDown
+// asset, per this library's existing icon for this purpose.
+const ChevronDownIcon = () => (h("svg", { viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, h("path", { d: "M4 6L8 10L12 6", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })));

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);
+}