@brandsync/wc 1.10.0 → 1.12.0

package/dist/collection/components/bs-icon-tile/bs-icon-tile.css

@@ -0,0 +1,112 @@
+/**
+ * @prop --bs-icon-tile-size: Width/height of the tile. Set per `size` on the host: 24px / 32px / 48px (Figma).
+ * @prop --bs-icon-tile-radius: Corner radius. Set per `size`: 4px (--bs-border-radius-50) / 5.33px / 8px (--bs-border-radius-100).
+ * @prop --bs-icon-tile-icon-size: Width/height of the icon. Set per `size`: 12px / 16px / 24px.
+ * @prop --bs-icon-tile-bg: Background. Set per `intent`. Success, warning, error and information read mode-aware --bs-icon-tile-<intent>-bg properties from base.css (light and dark values from the Figma); default and brand use the neutral / primary container tokens, which already switch with the theme.
+ * @prop --bs-icon-tile-text-color: Colour of the text slotted into the `text` slot. Aliased to --bs-text-default.
+ * @prop --bs-icon-tile-text-gap: Gap between the square and the `text` slot. Aliased to --bs-spacing-100.
+ * @prop --bs-icon-tile-color: Icon colour. Set per `intent`: --bs-icon-tile-<intent>-color from base.css for success, warning, error and information; --bs-icon-default for default and --bs-icon-action for brand.
+ */
+:host {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--bs-icon-tile-text-gap);
+  vertical-align: middle;
+
+  /* size: sm (default) */
+  --bs-icon-tile-size: 24px;
+  --bs-icon-tile-radius: var(--bs-border-radius-50);
+  --bs-icon-tile-icon-size: 12px;
+  --bs-icon-tile-text-color: var(--bs-text-default);
+  --bs-icon-tile-text-gap: var(--bs-spacing-100);
+
+  /* intent: default */
+  --bs-icon-tile-bg: var(--bs-color-neutral-container);
+  --bs-icon-tile-color: var(--bs-icon-default);
+}
+
+:host([size='md']) {
+  --bs-icon-tile-size: 32px;
+  /* Figma: 5.333px -- two thirds of the large radius, which has no token of its own. */
+  --bs-icon-tile-radius: calc(var(--bs-border-radius-100) * 2 / 3);
+  --bs-icon-tile-icon-size: 16px;
+}
+
+:host([size='lg']) {
+  --bs-icon-tile-size: 48px;
+  --bs-icon-tile-radius: var(--bs-border-radius-100);
+  --bs-icon-tile-icon-size: 24px;
+}
+
+:host([intent='success']) {
+  --bs-icon-tile-bg: var(--bs-icon-tile-success-bg, var(--bs-success-50));
+  --bs-icon-tile-color: var(--bs-icon-tile-success-color, var(--bs-icon-success));
+}
+
+:host([intent='warning']) {
+  --bs-icon-tile-bg: var(--bs-icon-tile-warning-bg, var(--bs-color-warning-container));
+  --bs-icon-tile-color: var(--bs-icon-tile-warning-color, var(--bs-icon-warning));
+}
+
+:host([intent='error']) {
+  --bs-icon-tile-bg: var(--bs-icon-tile-error-bg, var(--bs-color-error-container));
+  --bs-icon-tile-color: var(--bs-icon-tile-error-color, var(--bs-icon-error));
+}
+
+:host([intent='brand']) {
+  --bs-icon-tile-bg: var(--bs-color-primary-container);
+  --bs-icon-tile-color: var(--bs-icon-action);
+}
+
+:host([intent='information']) {
+  --bs-icon-tile-bg: var(--bs-icon-tile-information-bg, var(--bs-information-50));
+  --bs-icon-tile-color: var(--bs-icon-tile-information-color, var(--bs-icon-info));
+}
+
+.bs-icon-tile {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  width: var(--bs-icon-tile-size);
+  height: var(--bs-icon-tile-size);
+  border-radius: var(--bs-icon-tile-radius);
+  background: var(--bs-icon-tile-bg);
+  color: var(--bs-icon-tile-color);
+  overflow: hidden;
+}
+
+.bs-icon-tile__icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--bs-icon-tile-icon-size);
+  height: var(--bs-icon-tile-icon-size);
+}
+
+.bs-icon-tile__icon svg,
+::slotted(svg),
+::slotted(img) {
+  width: var(--bs-icon-tile-icon-size);
+  height: var(--bs-icon-tile-icon-size);
+}
+
+/* The text beside the square. Hidden (no box, so no gap) until something is slotted, so a tile with no text
+   is still exactly its square. */
+.bs-icon-tile__text {
+  display: none;
+  color: var(--bs-icon-tile-text-color);
+  font-size: var(--bs-font-size-md);
+  line-height: 24px;
+}
+
+.bs-icon-tile__text--visible {
+  display: block;
+}
+
+:host([size='sm']) .bs-icon-tile__text {
+  font-size: var(--bs-font-size-sm);
+  line-height: 20px;
+}
+

package/dist/collection/components/bs-icon-tile/bs-icon-tile.js

@@ -0,0 +1,158 @@
+import { h } from "@stencil/core";
+/**
+ * A small rounded square holding an icon, tinted by intent -- the visual marker next to a status,
+ * a list item or a feature. Matches the Figma "Icon tile" component (3 sizes x 6 intents).
+ *
+ * Each intent shows a default glyph (house, check, warning, cross, grid, info); put your own icon in
+ * the default slot to replace it. A slotted icon is sized to the tile (12/16/24px) and coloured
+ * with the intent's icon colour, as long as it draws with `currentColor`.
+ *
+ * The tile is decorative by default (hidden from assistive tech). Don't rely on the colour or glyph
+ * alone to convey status: slot text into `text` (it sits beside the square, in
+ * `--bs-icon-tile-text-color`), or set `label` to give the tile its own accessible name.
+ *
+ * ## When to use
+ * - Marking a row, card or message with a status or category icon.
+ *
+ * ## When not to use
+ * - As a button -- it isn't interactive. Use `bs-icon-button`.
+ *
+ * @slot - Optional icon replacing the intent's default glyph.
+ * @slot text - Optional text shown beside the square (e.g. "Payment received"), in `--bs-icon-tile-text-color`.
+ * @part container - The tinted square.
+ * @part icon - The wrapper around the glyph (default or slotted).
+ * @part text - The wrapper around the `text` slot (only shown when something is slotted).
+ */
+export class BsIconTile {
+    /** Tile size: `sm` 24px, `md` 32px, `lg` 48px. */
+    size = 'sm';
+    /** Colour and default glyph. `brand` uses the brand colours; `information` the info palette. */
+    intent = 'default';
+    /** Accessible name. When set, the tile is exposed as an image with this name; when empty it is
+     * decorative and hidden from assistive tech. */
+    label;
+    /** True while the default slot holds a real element or non-blank text (a custom icon), not just whitespace. */
+    hasCustomIcon = false;
+    /** True while something is assigned to the `text` slot, so the text wrapper (and its gap) only exists then. */
+    hasText = false;
+    render() {
+        const labelled = !!this.label;
+        return [
+            h("div", { key: 'f23caf72680e3224fc8618cbebceac30590d36ce', part: "container", class: "bs-icon-tile", role: labelled ? 'img' : undefined, "aria-label": labelled ? this.label : undefined, "aria-hidden": labelled ? undefined : 'true' }, h("span", { key: '944d594e4492b30544f935b217691ec7e53f398d', part: "icon", class: "bs-icon-tile__icon" }, h("slot", { key: 'cd62ccaf12a2ff398d506b865665eae42b2e43ff', onSlotchange: (ev) => (this.hasCustomIcon = hasContent(ev.target)) }), !this.hasCustomIcon && (GLYPHS[this.intent] ?? GLYPHS.default))),
+            h("span", { key: 'f33a9fa50a2db0aee33fd8346681a5f56f22f685', part: "text", class: { 'bs-icon-tile__text': true, 'bs-icon-tile__text--visible': this.hasText } }, h("slot", { key: 'cb79316ee18a13c4f8d0dcb1d2271a22a6e71471', name: "text", onSlotchange: (ev) => (this.hasText = ev.target.assignedNodes().length > 0) })),
+        ];
+    }
+    static get is() { return "bs-icon-tile"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bs-icon-tile.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bs-icon-tile.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BsIconTileSize",
+                    "resolved": "\"lg\" | \"md\" | \"sm\"",
+                    "references": {
+                        "BsIconTileSize": {
+                            "location": "local",
+                            "path": "/home/runner/work/eg-brandsync-storybook/eg-brandsync-storybook/packages/wc/src/components/bs-icon-tile/bs-icon-tile.tsx",
+                            "id": "src/components/bs-icon-tile/bs-icon-tile.tsx::BsIconTileSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Tile size: `sm` 24px, `md` 32px, `lg` 48px."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "size",
+                "defaultValue": "'sm'"
+            },
+            "intent": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BsIconTileIntent",
+                    "resolved": "\"brand\" | \"default\" | \"error\" | \"information\" | \"success\" | \"warning\"",
+                    "references": {
+                        "BsIconTileIntent": {
+                            "location": "local",
+                            "path": "/home/runner/work/eg-brandsync-storybook/eg-brandsync-storybook/packages/wc/src/components/bs-icon-tile/bs-icon-tile.tsx",
+                            "id": "src/components/bs-icon-tile/bs-icon-tile.tsx::BsIconTileIntent"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Colour and default glyph. `brand` uses the brand colours; `information` the info palette."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "intent",
+                "defaultValue": "'default'"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible name. When set, the tile is exposed as an image with this name; when empty it is\ndecorative and hidden from assistive tech."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "hasCustomIcon": {},
+            "hasText": {}
+        };
+    }
+}
+function hasContent(slot) {
+    return slot.assignedNodes().some(n => n.nodeType === Node.ELEMENT_NODE || (n.nodeType === Node.TEXT_NODE && !!n.textContent?.trim()));
+}
+const svgProps = {
+    viewBox: '0 0 24 24',
+    fill: 'none',
+    stroke: 'currentColor',
+    'stroke-width': '2',
+    'stroke-linecap': 'round',
+    'stroke-linejoin': 'round',
+    'aria-hidden': 'true',
+};
+const GLYPHS = {
+    default: (h("svg", { ...svgProps }, h("path", { d: "M4 10.5L12 3.5L20 10.5V19.5H4V10.5Z" }))),
+    success: (h("svg", { ...svgProps }, h("circle", { cx: "12", cy: "12", r: "9" }), h("path", { d: "M8 12.5L10.8 15.3L16 9.5" }))),
+    warning: (h("svg", { ...svgProps }, h("circle", { cx: "12", cy: "12", r: "9" }), h("path", { d: "M12 7.5V12.5" }), h("path", { d: "M12 16.2V16.3" }))),
+    error: (h("svg", { ...svgProps }, h("path", { d: "M5 5L19 19" }), h("path", { d: "M19 5L5 19" }))),
+    brand: (h("svg", { ...svgProps }, h("rect", { x: "4", y: "4", width: "6.5", height: "6.5", rx: "0.5" }), h("rect", { x: "13.5", y: "4", width: "6.5", height: "6.5", rx: "0.5" }), h("rect", { x: "4", y: "13.5", width: "6.5", height: "6.5", rx: "0.5" }), h("rect", { x: "13.5", y: "13.5", width: "6.5", height: "6.5", rx: "0.5" }))),
+    information: (h("svg", { ...svgProps }, h("circle", { cx: "12", cy: "12", r: "9" }), h("path", { d: "M12 11V16.5" }), h("path", { d: "M12 7.7V7.8" }))),
+};

package/dist/collection/components/bs-icon-tile/bs-icon-tile.stories.js

@@ -0,0 +1,45 @@
+import { html } from "lit";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { componentDescription, propDescription } from "../../stories-utils";
+const INTENTS = ['default', 'success', 'warning', 'error', 'brand', 'information'];
+const SIZES = ['sm', 'md', 'lg'];
+const meta = {
+    title: 'Components/bs-icon-tile',
+    parameters: { docs: { description: { component: componentDescription('bs-icon-tile') } } },
+    render: args => html `<bs-icon-tile size=${args.size} intent=${args.intent} label=${ifDefined(args.label || undefined)}></bs-icon-tile>`,
+    argTypes: {
+        size: { control: 'inline-radio', options: SIZES, description: propDescription('bs-icon-tile', 'size') },
+        intent: { control: 'select', options: INTENTS, description: propDescription('bs-icon-tile', 'intent') },
+        label: { control: 'text', description: propDescription('bs-icon-tile', 'label') },
+    },
+    args: { size: 'sm', intent: 'default', label: '' },
+};
+export default meta;
+export const Default = {};
+// The Figma frame: 3 sizes (rows) x 6 intents (columns).
+export const AllSizesAndIntents = {
+    name: 'All sizes and intents',
+    render: () => html `
+    <div style="display: grid; grid-template-columns: repeat(6, auto); gap: 24px; align-items: center; justify-items: center;">
+      ${SIZES.flatMap(size => INTENTS.map(intent => html `<bs-icon-tile size=${size} intent=${intent}></bs-icon-tile>`))}
+    </div>
+  `,
+};
+export const CustomIcon = {
+    name: 'Custom icon',
+    render: () => html `
+    <bs-icon-tile size="lg" intent="brand">
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <path d="M12 3L14.5 9L21 9.5L16 14L17.5 21L12 17.5L6.5 21L8 14L3 9.5L9.5 9L12 3Z" />
+      </svg>
+    </bs-icon-tile>
+  `,
+};
+export const WithText = {
+    name: 'With text (status)',
+    render: () => html `
+    <bs-icon-tile size="md" intent="success">
+      <span slot="text">Payment received</span>
+    </bs-icon-tile>
+  `,
+};

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

@@ -310,7 +310,7 @@ describe('bs-input', () => {
     describe('type="chip"', () => {
         it('renders a chip per entry with a remove button', async () => {
             const { root } = await render(h("bs-input", { type: "chip", chips: ['red', 'blue'] }));
-            const chips = root.shadowRoot.querySelectorAll('.bs-input__chip');
+            const chips = root.shadowRoot.querySelectorAll('bs-chip-informative');
             expect(chips.length).toBe(2);
             expect(chips[0]).toHaveTextContent('red');
         });
@@ -326,7 +326,7 @@ describe('bs-input', () => {
         it('emits bsChipRemove when a chip remove button is clicked', async () => {
             const { root, spyOnEvent } = await render(h("bs-input", { type: "chip", chips: ['red'] }));
             const bsChipRemoveSpy = spyOnEvent('bsChipRemove');
-            const removeBtn = root.shadowRoot.querySelector('.bs-input__chip-remove');
+            const removeBtn = root.shadowRoot.querySelector('bs-icon-button.bs-input__chip-remove');
             removeBtn.click();
             expect(bsChipRemoveSpy).toHaveReceivedEventDetail('red');
         });
@@ -414,4 +414,18 @@ describe('bs-input', () => {
             expect(field).toHaveClass('bs-input__field--error');
         });
     });
+    describe('label custom properties', () => {
+        it('keeps the 14px medium label by default', async () => {
+            const { root } = await render(h("bs-input", { label: "Name" }));
+            const label = getComputedStyle(root.shadowRoot.querySelector('.bs-input__label'));
+            expect(label.fontSize).toBe('14px');
+            expect(label.fontWeight).toBe('500');
+        });
+        it('can restyle the label through --bs-input-label-font-size/-weight', async () => {
+            const { root } = await render(h("bs-input", { label: "Name", style: { '--bs-input-label-font-size': '16px', '--bs-input-label-font-weight': '600' } }));
+            const label = getComputedStyle(root.shadowRoot.querySelector('.bs-input__label'));
+            expect(label.fontSize).toBe('16px');
+            expect(label.fontWeight).toBe('600');
+        });
+    });
 });

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

@@ -1,6 +1,6 @@
 /**
  * @prop --bs-input-radius: Corner radius of the field. Aliased to --bs-border-radius-100.
- * @prop --bs-input-height: Height of the field. Aliased to --bs-spacing-600.
+ * @prop --bs-input-height: Height of the field. Aliased to --bs-spacing-550 (44px, per Figma).
  * @prop --bs-input-padding-x: Horizontal padding inside the field. Aliased to --bs-spacing-150.
  * @prop --bs-input-padding-y: Vertical padding inside the field. Aliased to --bs-spacing-100.
  * @prop --bs-input-gap: Gap between the icon(s) and the native input. Aliased to --bs-spacing-200.
@@ -19,10 +19,11 @@
  * @prop --bs-input-field-text: Input text color. Aliased to --bs-input-text.
  * @prop --bs-input-field-placeholder: Placeholder text color. Aliased to --bs-input-placeholder.
  * @prop --bs-input-label-color: Label text color. Aliased to --bs-input-label.
+ * @prop --bs-input-label-font-size: Label font size. Aliased to --bs-font-size-sm.
+ * @prop --bs-input-label-font-weight: Label font weight. Aliased to --bs-font-weight-medium.
+ * @prop --bs-input-label-line-height: Label line height. `normal` by default (the label sizes to its font).
  * @prop --bs-input-description-color: Description text color. Aliased to --bs-input-description.
  * @prop --bs-input-error-color: Error message text color. Aliased to --bs-input-error.
- * @prop --bs-input-chip-bg: Chip pill background for type="chip". Aliased to --bs-input-bg-disabled.
- * @prop --bs-input-chip-text: Chip pill text color for type="chip". Aliased to --bs-input-text.
  * @prop --bs-input-initials-title-width: Width of the title box for type="initials" (e.g.
  *   "Mrs."/"Mr."/"Dr."). A literal 80px, not aliased to a spacing token -- Figma specs this
  *   sub-field as a fixed, compact width regardless of option content (node 10306:101047), not
@@ -36,7 +37,7 @@
   display: block;
 
   --bs-input-radius: var(--bs-border-radius-100);
-  --bs-input-height: var(--bs-spacing-600);
+  --bs-input-height: var(--bs-spacing-550);
   --bs-input-padding-x: var(--bs-spacing-150);
   --bs-input-padding-y: var(--bs-spacing-100);
   --bs-input-gap: var(--bs-spacing-200);
@@ -53,6 +54,9 @@
   --bs-input-field-text: var(--bs-input-text);
   --bs-input-field-placeholder: var(--bs-input-placeholder);
   --bs-input-label-color: var(--bs-input-label);
+  --bs-input-label-font-size: var(--bs-font-size-sm);
+  --bs-input-label-font-weight: var(--bs-font-weight-medium);
+  --bs-input-label-line-height: normal;
   --bs-input-description-color: var(--bs-input-description);
   --bs-input-error-color: var(--bs-input-error);
 
@@ -62,9 +66,6 @@
   --bs-input-icon-color-error: var(--bs-input-icon-error);
   --bs-input-icon-color-disabled: var(--bs-input-icon-disabled);
 
-  --bs-input-chip-bg: var(--bs-input-bg-disabled);
-  --bs-input-chip-text: var(--bs-input-text);
-
   --bs-input-initials-title-width: 80px;
   --bs-input-initials-gap: var(--bs-spacing-50);
 }
@@ -77,8 +78,9 @@
 }
 
 .bs-input__label {
-  font-size: var(--bs-font-size-sm);
-  font-weight: var(--bs-font-weight-medium);
+  font-size: var(--bs-input-label-font-size);
+  font-weight: var(--bs-input-label-font-weight);
+  line-height: var(--bs-input-label-line-height);
   color: var(--bs-input-label-color);
 }
 
@@ -316,23 +318,13 @@
 }
 
 .bs-input__chip {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  background: var(--bs-input-chip-bg);
-  color: var(--bs-input-chip-text);
-  border-radius: var(--bs-input-radius);
-  padding: 2px 6px;
-  font-size: var(--bs-font-size-sm);
+  --bs-chip-informative-padding-x-plain-side: var(--bs-spacing-150);
 }
 
 .bs-input__chip-remove {
-  border: none;
-  background: transparent;
-  color: inherit;
-  cursor: pointer;
-  padding: 0;
-  line-height: 1;
+  --bs-icon-button-size-xs: 20px;
+  --bs-icon-button-icon-size-xs: 12px;
+  margin-inline-end: calc(var(--bs-spacing-50) * -1);
 }
 
 .bs-input__chip-input {

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

@@ -5,6 +5,8 @@ import { h } from "@stencil/core";
  * select, textarea, chip input, initials, country, and pin) via the `type` prop, since they all
  * share the same label/description/error/icon-slot chrome.
  *
+ * Built from: `bs-menu`/`bs-menu-item` (`type="dropdown"`) and `bs-chip-informative` + `bs-icon-button` (`type="chip"`).
+ *
  * ## When to use
  * - Collecting a single line of free-text, email, password, or numeric input.
  * - Any of the other supported `type`s (search, date, dropdown, select, textarea, chip, initials,
@@ -39,7 +41,8 @@ import { h } from "@stencil/core";
  * @part control - The native control element (`<input>`, `<select>`, or `<textarea>` depending on
  *   `type`). Composite types (`initials`, `country`) render this part on more than one element.
  * @part end-icon - The trailing icon wrapper element.
- * @part chip - A single chip pill, when `type="chip"`.
+ * @part chip - A single chip pill (a `bs-chip-informative`), when `type="chip"`.
+ * @part chip-remove - A chip's remove button (a `bs-icon-button`), when `type="chip"`.
  * @part description - The helper text element (hidden when `error` is set).
  * @part error - The error message element.
  * @part error-icon - The warning icon shown before the error message.
@@ -326,7 +329,7 @@ export class BsInput {
         return (h("textarea", { id: "control", part: "control", class: "bs-input__control bs-input__control--textarea", rows: this.rows, value: this.value, placeholder: this.placeholder, disabled: this.disabled, "aria-describedby": this.error || this.description ? 'description-or-error' : undefined, "aria-invalid": this.error ? 'true' : undefined, "aria-required": this.required ? 'true' : undefined, onInput: this.onInput, onChange: this.onChange }));
     }
     renderChipControl() {
-        return (h("div", { class: "bs-input__chips" }, this.chips.map(chip => (h("span", { part: "chip", class: "bs-input__chip" }, chip, h("button", { type: "button", class: "bs-input__chip-remove", "aria-label": `Remove ${chip}`, onClick: this.onChipRemove(chip) }, "\u00D7")))), h("input", { id: "control", part: "control", class: "bs-input__control bs-input__chip-input", type: "text", value: this.chipDraft, placeholder: this.placeholder, disabled: this.disabled, "aria-required": this.required ? 'true' : undefined, onInput: this.onChipDraftInput, onKeyDown: this.onChipDraftKeydown })));
+        return (h("div", { class: "bs-input__chips" }, this.chips.map(chip => (h("bs-chip-informative", { part: "chip", class: "bs-input__chip", size: "sm", disabled: this.disabled }, chip, h("bs-icon-button", { part: "chip-remove", class: "bs-input__chip-remove", variant: "subtle", size: "md", ariaLabel: `Remove ${chip}`, disabled: this.disabled, onClick: this.onChipRemove(chip) }, h(ChipRemoveIcon, null))))), h("input", { id: "control", part: "control", class: "bs-input__control bs-input__chip-input", type: "text", value: this.chipDraft, placeholder: this.placeholder, disabled: this.disabled, "aria-required": this.required ? 'true' : undefined, onInput: this.onChipDraftInput, onKeyDown: this.onChipDraftKeydown })));
     }
     // type="initials" renders two genuinely separate bordered boxes side by side (each with its own
     // border/radius/background, a small gap between them), not one shared field wrapper -- Figma
@@ -386,10 +389,10 @@ export class BsInput {
         return (h("div", { part: "field", class: `bs-input__field bs-input__field--pin ${errorClass} ${disabledClass}` }, Array.from({ length: this.length }).map((_, i) => (h("input", { id: i === 0 ? 'control' : undefined, ref: el => (this.pinInputs[i] = el), part: "control", class: "bs-input__pin-cell", type: "text", inputMode: "numeric", maxLength: 1, value: this.value[i] ?? '', disabled: this.disabled, "aria-required": this.required ? 'true' : undefined, onInput: this.onPinInput(i), onKeyDown: this.onPinKeydown(i) })))));
     }
     render() {
-        return (h("div", { key: '70497bf30b0a244e1df36075d0db77cec5345d6c', class: `bs-input ${this.error ? 'bs-input--error' : ''}` }, this.label && (
+        return (h("div", { key: '6921873fb72be6f26a2389697f6b2f816d8011a9', class: `bs-input ${this.error ? 'bs-input--error' : ''}` }, this.label && (
         // "control" is a fixed id, not a generated one -- safe because Shadow DOM scopes ids
         // to this instance's own shadow root, so it can never collide with another bs-input.
-        h("label", { key: '527e0d146170d9d11a004d452fa2cb363c5cc7d2', part: "label", class: "bs-input__label", htmlFor: "control" }, this.label, this.required && (h("span", { key: '9dd54a626ec80c774d6deacc3c9dcf02d1fef8a9', part: "required", class: "bs-input__required", "aria-hidden": "true" }, "*")))), this.type === 'pin' ? this.renderPinField() : this.type === 'initials' ? this.renderInitialsField() : this.renderField(), this.error ? (h("span", { id: "description-or-error", part: "error", class: "bs-input__error" }, h("svg", { part: "error-icon", class: "bs-input__error-icon", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" }, h("circle", { cx: "8", cy: "8", r: "6.5", stroke: "currentColor", "stroke-width": "1.2" }), h("path", { d: "M8 5V8.5", stroke: "currentColor", "stroke-width": "1.2", "stroke-linecap": "round" }), h("circle", { cx: "8", cy: "11", r: "0.75", fill: "currentColor" })), this.error)) : this.description ? (h("span", { id: "description-or-error", part: "description", class: "bs-input__description" }, this.description)) : null));
+        h("label", { key: '64ec1ba4a6c8c87db6b45dfd38731adbdfd5d6a8', part: "label", class: "bs-input__label", htmlFor: "control" }, this.label, this.required && (h("span", { key: '5176edfc672132f1c6aaec978002851ff27179a0', part: "required", class: "bs-input__required", "aria-hidden": "true" }, "*")))), this.type === 'pin' ? this.renderPinField() : this.type === 'initials' ? this.renderInitialsField() : this.renderField(), this.error ? (h("span", { id: "description-or-error", part: "error", class: "bs-input__error" }, h("svg", { part: "error-icon", class: "bs-input__error-icon", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" }, h("circle", { cx: "8", cy: "8", r: "6.5", stroke: "currentColor", "stroke-width": "1.2" }), h("path", { d: "M8 5V8.5", stroke: "currentColor", "stroke-width": "1.2", "stroke-linecap": "round" }), h("circle", { cx: "8", cy: "11", r: "0.75", fill: "currentColor" })), this.error)) : this.description ? (h("span", { id: "description-or-error", part: "description", class: "bs-input__description" }, this.description)) : null));
     }
     static get is() { return "bs-input"; }
     static get encapsulation() { return "shadow"; }
@@ -963,3 +966,4 @@ export class BsInput {
     }
     static get attachInternalsMemberName() { return "internals"; }
 }
+const ChipRemoveIcon = () => (h("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, h("path", { d: "M18.75 5.25L5.25 18.75", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { d: "M18.75 18.75L5.25 5.25", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })));

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

@@ -44,7 +44,7 @@ export class BsMenu {
         items[next].shadowRoot?.querySelector('button')?.focus();
     }
     render() {
-        return (h("div", { key: '24e54ac14b17bc1e45bcd5d7d0fda3250350672a', part: "list", class: "bs-menu", role: "menu" }, h("slot", { key: '57e28eafbb83da6bb14dfe588793edd33b2b5316' })));
+        return (h("div", { key: 'ba99d3c35c0c7ab4427155ac13e89c434068ef49', part: "list", class: "bs-menu", role: "menu" }, h("slot", { key: '817f29507503adcaad013a8035d35bc1f35ffdef' })));
     }
     static get is() { return "bs-menu"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-menu-item/bs-menu-item.js

@@ -47,7 +47,7 @@ export class BsMenuItem {
         this.bsSelect.emit();
     };
     render() {
-        return (h("button", { key: '5aabea2ec3ad0181e3ff53b3f22873563da69ccd', type: "button", part: "item", role: "menuitem", class: `bs-menu-item ${this.disabled ? 'bs-menu-item--disabled' : ''}`, disabled: this.disabled, "aria-disabled": this.disabled ? 'true' : undefined, onClick: this.onClick }, h("span", { key: '7e180921d99d4f430d72d8dbfeda0ca00881b74a', part: "icon", class: `bs-menu-item__icon ${this.hasIcon ? 'bs-menu-item__icon--has-content' : ''}` }, h("slot", { key: '9d6d15f2d51c271de699b0101f781d8c0f3ab7e9', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: '88645fe2991eb91a145e33a4f5e5e59a9ade3248', part: "label", class: "bs-menu-item__label" }, h("slot", { key: 'd3cc0ffcf0f354ffa9c48cbc88a99ec99d4f2db4' }))));
+        return (h("button", { key: '419a5d4d35f47ea9cf72b02407a45a7d5645fc4b', type: "button", part: "item", role: "menuitem", class: `bs-menu-item ${this.disabled ? 'bs-menu-item--disabled' : ''}`, disabled: this.disabled, "aria-disabled": this.disabled ? 'true' : undefined, onClick: this.onClick }, h("span", { key: '733f8e5f702496bbb2788cc4db84a9c7c128f1be', part: "icon", class: `bs-menu-item__icon ${this.hasIcon ? 'bs-menu-item__icon--has-content' : ''}` }, h("slot", { key: '566ca7b7f011090efa131c6bf0fb74515db11fee', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: 'c717ab8efef92c338581953c60f617057f9eaadc', part: "label", class: "bs-menu-item__label" }, h("slot", { key: 'c0006ae3c36798eabfb2e001faade51ec4cc10c9' }))));
     }
     static get is() { return "bs-menu-item"; }
     static get encapsulation() { return "shadow"; }