@brandsync/wc 1.0.0 → 1.1.0

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

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

@@ -0,0 +1,172 @@
+/**
+ * @prop --bs-chip-input-height-md: Height at size="md". Aliased to --bs-spacing-300.
+ * @prop --bs-chip-input-height-lg: Height at size="lg". Aliased to --bs-spacing-400.
+ * @prop --bs-chip-input-gap: Gap between icon/label/remove. Aliased to --bs-spacing-50.
+ * @prop --bs-chip-input-padding-x-glyph-side: Horizontal padding on an edge adjacent to a glyph
+ * (the icon on the left, or the remove button on the right, which is always present). Aliased to
+ * --bs-spacing-100.
+ * @prop --bs-chip-input-padding-x-plain-side: Left-edge padding when there's no leading icon.
+ * Aliased to --bs-spacing-150.
+ * @prop --bs-chip-input-font-size: Aliased to --bs-font-size-sm.
+ * @prop --bs-chip-input-line-height: Aliased to --bs-line-height-body-sm.
+ * @prop --bs-chip-input-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 -- shared across the whole bs-chip family, not local to this
+ * component, consumed directly rather than re-aliased under a bs-chip-input-specific name.
+ */
+:host {
+  display: inline-flex;
+  align-items: center;
+  box-sizing: border-box;
+  gap: var(--bs-chip-input-gap);
+  border-radius: var(--bs-border-radius-full);
+  font-family: inherit;
+  font-size: var(--bs-chip-input-font-size);
+  font-weight: var(--bs-chip-input-font-weight);
+  line-height: calc(var(--bs-chip-input-line-height) * 1px);
+  white-space: nowrap;
+  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-input-height-md: var(--bs-spacing-300);
+  --bs-chip-input-height-lg: var(--bs-spacing-400);
+  --bs-chip-input-gap: var(--bs-spacing-50);
+  --bs-chip-input-padding-x-glyph-side: var(--bs-spacing-100);
+  --bs-chip-input-padding-x-plain-side: var(--bs-spacing-150);
+  --bs-chip-input-font-size: var(--bs-font-size-sm);
+  --bs-chip-input-line-height: var(--bs-line-height-body-sm);
+  --bs-chip-input-font-weight: var(--bs-font-weight-regular);
+}
+
+:host(.bs-chip-input--md) {
+  height: var(--bs-chip-input-height-md);
+}
+
+:host(.bs-chip-input--lg) {
+  height: var(--bs-chip-input-height-lg);
+}
+
+/* Reset -- both are plain, borderless, transparent flex items. Background/color/focus-ring all
+   live on :host (see below), so the whole pill reacts uniformly no matter which button is
+   actually hovered/focused/pressed -- :hover/:focus-within/:active on a host all match whenever
+   the pointer/focus is on any shadow-DOM descendant, not just the host element itself. */
+.bs-chip-input__body,
+.bs-chip-input__remove {
+  display: flex;
+  align-items: center;
+  height: 100%;
+  border: none;
+  background: transparent;
+  padding: 0;
+  margin: 0;
+  font: inherit;
+  color: inherit;
+  cursor: pointer;
+}
+
+.bs-chip-input__body {
+  gap: var(--bs-chip-input-gap);
+  padding-right: 0;
+}
+
+:host(.bs-chip-input--icon) .bs-chip-input__body {
+  padding-left: var(--bs-chip-input-padding-x-glyph-side);
+}
+
+:host(.bs-chip-input--text) .bs-chip-input__body {
+  padding-left: var(--bs-chip-input-padding-x-plain-side);
+}
+
+.bs-chip-input__remove {
+  padding-left: 0;
+  padding-right: var(--bs-chip-input-padding-x-glyph-side);
+}
+
+.bs-chip-input__icon {
+  display: none;
+  flex-shrink: 0;
+}
+
+.bs-chip-input__icon--visible {
+  display: flex;
+  align-items: center;
+}
+
+/* Defaults slotted content to 16px, matching bs-chip-filter's icon slot -- a plain <svg> with no
+   intrinsic width/height otherwise collapses to 0x0 as a flex item (confirmed by measuring a real
+   render). bs-avatar is exempted: Figma specs it at 24px with its own border ring matching
+   --chip/border-inverse exactly (verified, --bs-border-neutral-container resolves to the same
+   #c2c7d3 hex), so it needs to keep sizing itself via its own `size` prop instead. */
+.bs-chip-input__icon ::slotted(*) {
+  display: block;
+  width: 16px;
+  height: 16px;
+}
+
+.bs-chip-input__icon ::slotted(bs-avatar) {
+  width: auto;
+  height: auto;
+}
+
+.bs-chip-input__label {
+  display: flex;
+  align-items: center;
+}
+
+.bs-chip-input__remove svg {
+  display: block;
+  width: 16px;
+  height: 16px;
+}
+
+/* Unselected (default): the light "container" background set. :active is declared AFTER
+   :focus-within so a mouse click's pressed background wins the cascade -- a mousedown makes both
+   equally true at once (clicking a button focuses it too), and with matching specificity the
+   later rule otherwise wins, which put the focused (not pressed) color on a plain click
+   (confirmed via a real computed-style check). The focus outline itself still applies regardless
+   of source order, since the active rule below only ever sets background. */
+:host(:hover:not([disabled])) {
+  background: var(--bs-chip-bg-primary-container-hover);
+}
+
+:host(:focus-within:not([disabled])) {
+  background: var(--bs-chip-bg-primary-container-focused);
+  outline: 2px solid var(--bs-chip-border-focus);
+  outline-offset: 2px;
+}
+
+:host(:active:not([disabled])) {
+  background: var(--bs-chip-bg-primary-container-pressed);
+}
+
+/* Selected: the dark "primary" background set, inverse (white) text -- swaps every state above
+   to its --primary-* (not --primary-container-*) counterpart. */
+:host([selected]) {
+  background: var(--bs-chip-bg-primary);
+  color: var(--bs-chip-text-inverse);
+}
+
+:host([selected]:hover:not([disabled])) {
+  background: var(--bs-chip-bg-primary-hover);
+}
+
+:host([selected]:focus-within:not([disabled])) {
+  background: var(--bs-chip-bg-primary-focused);
+}
+
+:host([selected]:active:not([disabled])) {
+  background: var(--bs-chip-bg-primary-pressed);
+}
+
+:host([disabled]) {
+  background: var(--bs-chip-bg-disabled);
+  color: var(--bs-chip-text-disabled);
+}
+
+.bs-chip-input__body:disabled,
+.bs-chip-input__remove:disabled {
+  cursor: not-allowed;
+}