@brandsync/wc 0.0.12 → 0.1.0

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

@@ -0,0 +1,273 @@
+import { h } from "@stencil/core";
+/**
+ * An overlay dialog that interrupts the current flow for a focused task or confirmation.
+ * Closes itself on backdrop click, Escape, or its own close button, and emits `bsClose`.
+ *
+ * ## When to use
+ * - Confirming a consequential action (e.g. "Confirm booking") before it takes effect.
+ * - A short, focused task that doesn't warrant navigating to a new page.
+ *
+ * ## When not to use
+ * - For non-blocking status messages — use a toast/notification instead of interrupting the user.
+ * - For a long, multi-step flow — a full page or a dedicated route is usually a better fit than a
+ *   dialog that just gets taller and taller.
+ *
+ * Two additional slots cover the Figma "Dialog" component's other states: `image` (a hero image
+ * across the top, close button floats over it instead of sitting in the header row) and `icon`
+ * (only rendered when `centered` is set, e.g. a success checkmark above a centered heading). The
+ * close button "floats" (absolute-positioned, top-right of the dialog, with its own background)
+ * whenever `centered` is true or the `image` slot has content -- otherwise it's the plain inline
+ * button in the header row next to the heading, same as before this addition.
+ *
+ * @slot - Default slot: the dialog body content.
+ * @slot image - Optional hero image across the top of the dialog. Presence of assigned content
+ * switches the close button to float over it; doesn't affect layout when empty.
+ * @slot icon - Optional icon shown above the heading, only rendered at all when `centered` is true.
+ * @slot footer - Optional footer content (typically action buttons).
+ * @part backdrop - The full-viewport overlay behind the dialog.
+ * @part dialog - The dialog box itself.
+ * @part image - The hero image wrapper (only visible when the `image` slot has content).
+ * @part icon - The icon wrapper (only rendered when `centered` is true).
+ * @part header - The header row (heading + close button, when the close button isn't floating).
+ * @part close - The close button (inline in the header, or floating -- see the class doc above).
+ * @part body - The body content wrapper.
+ * @part footer - The footer wrapper (only visible when the footer slot has content).
+ */
+export class BsDialog {
+    /** Mutable + reflected so the component can close itself (backdrop click, Escape, close button)
+     * the same way a native `<dialog>` does, while still emitting `bsClose` for the consumer to react to. */
+    open = false;
+    heading;
+    size = 'md';
+    /** Switches to the Figma "Icon Centered" layout: heading/body text centered, the `icon` slot
+     * rendered above the heading, and the close button floating top-right of the dialog instead of
+     * inline in the header row. Doesn't hide a slotted `image` if one is also provided -- Figma's
+     * spec doesn't show the two combined, so this is unspecified rather than actively blocked.
+     * Reflected so consumers/CSS can target `bs-dialog[centered]`. */
+    centered = false;
+    bsClose;
+    /** Tracks whether the `footer` slot has assigned content, so the footer bar (border + padding)
+     * only renders when there's actually something to put in it. */
+    hasFooter = false;
+    /** Tracks whether the `image` slot has assigned content -- drives both whether the image wrapper
+     * is visible and whether the close button floats over it (see `floatingClose` in `render()`). */
+    hasImage = false;
+    /** Tracks whether the `icon` slot has assigned content, so the icon wrapper only reserves layout
+     * space when there's actually an icon -- same pattern as `bs-tab`'s `hasIcon`. Only relevant when
+     * `centered` is true, since the icon wrapper isn't rendered at all otherwise. */
+    hasIcon = false;
+    onFooterSlotchange = (ev) => {
+        this.hasFooter = ev.target.assignedNodes().length > 0;
+    };
+    onImageSlotchange = (ev) => {
+        this.hasImage = ev.target.assignedNodes().length > 0;
+    };
+    onIconSlotchange = (ev) => {
+        this.hasIcon = ev.target.assignedNodes().length > 0;
+    };
+    dialogRef;
+    previouslyFocused;
+    previousBodyOverflow;
+    wasOpen = false;
+    close = () => {
+        this.open = false;
+        this.bsClose.emit();
+    };
+    onKeydown(ev) {
+        if (this.open && ev.key === 'Escape') {
+            this.close();
+        }
+    }
+    onBackdropClick = (ev) => {
+        if (ev.target === ev.currentTarget) {
+            this.close();
+        }
+    };
+    // Simple focus containment: rather than manually enumerating focusable elements (which can't
+    // reliably walk into slotted children's own Shadow DOM anyway), redirect any focus that lands
+    // outside the dialog back to it. composedPath() correctly reports elements across Shadow DOM
+    // boundaries, unlike a plain `.contains()` check.
+    onFocusIn(ev) {
+        if (this.open && this.dialogRef && !ev.composedPath().includes(this.dialogRef)) {
+            this.dialogRef.focus();
+        }
+    }
+    componentDidRender() {
+        if (this.open && !this.wasOpen) {
+            this.previouslyFocused = document.activeElement;
+            this.dialogRef?.focus();
+            // Locks the page behind the dialog from scrolling while it's open -- a fixed-position
+            // backdrop/dialog doesn't block scroll on its own, since scroll input still targets whatever
+            // element is under the pointer/has focus, not the topmost painted layer.
+            this.previousBodyOverflow = document.body.style.overflow;
+            document.body.style.overflow = 'hidden';
+        }
+        else if (!this.open && this.wasOpen) {
+            this.previouslyFocused?.focus();
+            document.body.style.overflow = this.previousBodyOverflow ?? '';
+        }
+        this.wasOpen = this.open;
+    }
+    disconnectedCallback() {
+        // Covers the case where the host is removed from the DOM entirely while still open (e.g. a
+        // consumer conditionally rendering `<bs-dialog>` itself rather than toggling `open`) -- without
+        // this, the page would be left permanently unscrollable since componentDidRender's own
+        // open->closed transition never runs.
+        if (this.wasOpen) {
+            document.body.style.overflow = this.previousBodyOverflow ?? '';
+        }
+    }
+    render() {
+        if (!this.open) {
+            return null;
+        }
+        // The close button floats (absolute, over the top of the dialog) whenever there's a hero image
+        // to sit over, or the centered layout has no header row to put an inline close button in.
+        const floatingClose = this.centered || this.hasImage;
+        return (h("div", { part: "backdrop", class: "bs-dialog__backdrop", onClick: this.onBackdropClick }, h("div", { ref: el => (this.dialogRef = el), tabIndex: -1, part: "dialog", class: `bs-dialog__dialog bs-dialog__dialog--${this.size}`, role: "dialog", "aria-modal": "true", "aria-label": this.heading }, floatingClose && (h("bs-icon-button", { part: "close", class: "bs-dialog__close--floating", variant: "neutral", size: "md", "aria-label": "Close", onClick: this.close }, h(CloseIcon, null))), h("div", { part: "image", class: `bs-dialog__image ${this.hasImage ? 'bs-dialog__image--visible' : ''}` }, h("slot", { name: "image", onSlotchange: this.onImageSlotchange })), this.centered && (h("div", { part: "icon", class: `bs-dialog__icon ${this.hasIcon ? 'bs-dialog__icon--visible' : ''}` }, h("slot", { name: "icon", onSlotchange: this.onIconSlotchange }))), h("div", { part: "header", class: `bs-dialog__header ${this.centered ? 'bs-dialog__header--centered' : ''}` }, h("span", { class: "bs-dialog__heading" }, this.heading), !floatingClose && (h("bs-icon-button", { part: "close", variant: "subtle", size: "md", "aria-label": "Close", onClick: this.close }, h(CloseIcon, null)))), h("div", { part: "body", class: `bs-dialog__body ${this.centered ? 'bs-dialog__body--centered' : ''}` }, h("slot", null)), h("div", { part: "footer", class: `bs-dialog__footer ${this.hasFooter ? 'bs-dialog__footer--visible' : ''}` }, h("slot", { name: "footer", onSlotchange: this.onFooterSlotchange })))));
+    }
+    static get is() { return "bs-dialog"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bs-dialog.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bs-dialog.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "open": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Mutable + reflected so the component can close itself (backdrop click, Escape, close button)\nthe same way a native `<dialog>` does, while still emitting `bsClose` for the consumer to react to."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "open",
+                "defaultValue": "false"
+            },
+            "heading": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "heading"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BsDialogSize",
+                    "resolved": "\"lg\" | \"md\" | \"sm\"",
+                    "references": {
+                        "BsDialogSize": {
+                            "location": "local",
+                            "path": "/Users/vivka/brandsync-web-components/src/components/bs-dialog/bs-dialog.tsx",
+                            "id": "src/components/bs-dialog/bs-dialog.tsx::BsDialogSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "'md'"
+            },
+            "centered": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Switches to the Figma \"Icon Centered\" layout: heading/body text centered, the `icon` slot\nrendered above the heading, and the close button floating top-right of the dialog instead of\ninline in the header row. Doesn't hide a slotted `image` if one is also provided -- Figma's\nspec doesn't show the two combined, so this is unspecified rather than actively blocked.\nReflected so consumers/CSS can target `bs-dialog[centered]`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "centered",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "hasFooter": {},
+            "hasImage": {},
+            "hasIcon": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "bsClose",
+                "name": "bsClose",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "keydown",
+                "method": "onKeydown",
+                "target": "document",
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "focusin",
+                "method": "onFocusIn",
+                "target": "document",
+                "capture": false,
+                "passive": false
+            }];
+    }
+}
+// 16x16 native viewBox, matching bs-attachment's own CloseIcon proportions (two crossing diagonal
+// strokes) -- shared between both close button variants above rather than duplicated inline.
+const CloseIcon = () => (h("svg", { viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, h("path", { d: "M12.5 3.5L3.5 12.5", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { d: "M12.5 12.5L3.5 3.5", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })));

package/dist/collection/components/bs-dialog/bs-dialog.stories.js

@@ -0,0 +1,115 @@
+import { componentDescription, propDescription } from "../../stories-utils";
+const meta = {
+    title: 'Components/bs-dialog',
+    parameters: {
+        docs: {
+            description: { component: componentDescription('bs-dialog') },
+            // bs-dialog's backdrop/dialog are `position: fixed`, which resolves against the nearest
+            // *viewport*. Storybook's Docs page normally inlines every story's markup directly into the
+            // long, single-scroll Docs page itself -- so "fixed" ends up relative to that entire page's
+            // iframe (which Storybook grows to fit ALL of it, often several thousand px tall), not the
+            // small visible slice of it a reader is actually looking at. That's what produced a phantom
+            // page-level scrollbar with the dialog rendering off in the wrong spot when reviewed on the
+            // Docs page (worked fine on each story's own isolated Canvas view, which doesn't have this
+            // problem). `inline: false` renders each Canvas in its own separate, normally-sized iframe
+            // instead, giving `position: fixed` the correctly-scoped small viewport to resolve against.
+            story: { inline: false, height: '650px' },
+        },
+    },
+    argTypes: {
+        heading: { control: 'text', description: propDescription('bs-dialog', 'heading') },
+        size: { control: 'select', options: ['sm', 'md', 'lg'], description: propDescription('bs-dialog', 'size') },
+    },
+    args: {
+        heading: 'Confirm booking',
+        size: 'md',
+    },
+};
+export default meta;
+export const Default = {
+    render: args => {
+        const container = document.createElement('div');
+        const trigger = document.createElement('bs-button');
+        trigger.textContent = 'Open dialog';
+        const dialog = document.createElement('bs-dialog');
+        dialog.heading = args.heading;
+        dialog.size = args.size;
+        dialog.innerHTML = `
+      <p>Meeting Room 4B, 2:00pm - 3:00pm. This will send a calendar invite to all attendees.</p>
+      <bs-button slot="footer" variant="subtle" size="sm">Cancel</bs-button>
+      <bs-button slot="footer" size="sm">Confirm</bs-button>
+    `;
+        trigger.addEventListener('click', () => {
+            dialog.open = true;
+        });
+        dialog.addEventListener('bsClose', () => {
+            dialog.open = false;
+        });
+        container.appendChild(trigger);
+        container.appendChild(dialog);
+        return container;
+    },
+};
+// A real photo (Unsplash, free-to-use license) matching the "premium commercial space" copy below
+// -- trades the previous inline-SVG placeholder's zero-network-dependency guarantee for a demo that
+// actually looks like the Figma spec's hero image. Verified this URL resolves (200, image/jpeg)
+// before using it.
+const placeholderImage = 'https://images.unsplash.com/photo-1660496247667-3fb697c396af?fm=jpg&q=80&w=920&h=400&fit=crop&auto=format';
+export const WithImage = {
+    name: 'With image',
+    render: args => {
+        const container = document.createElement('div');
+        const trigger = document.createElement('bs-button');
+        trigger.textContent = 'Open dialog';
+        const dialog = document.createElement('bs-dialog');
+        dialog.heading = args.heading;
+        dialog.size = args.size;
+        dialog.innerHTML = `
+      <img slot="image" src="${placeholderImage}" alt="" />
+      <p>Sunset Towers is a premium commercial space located in the heart of the city. It offers flexible office layouts, modern amenities, and 24/7 security.</p>
+      <bs-button slot="footer" variant="subtle" size="sm">Cancel</bs-button>
+      <bs-button slot="footer" size="sm">Confirm</bs-button>
+    `;
+        trigger.addEventListener('click', () => {
+            dialog.open = true;
+        });
+        dialog.addEventListener('bsClose', () => {
+            dialog.open = false;
+        });
+        container.appendChild(trigger);
+        container.appendChild(dialog);
+        return container;
+    },
+};
+const checkCircleIcon = `
+  <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+    <circle cx="12" cy="12" r="9" stroke="currentColor" stroke-width="1.5" />
+    <path d="M8 12.5L10.5 15L16 9" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+  </svg>
+`;
+export const Centered = {
+    render: args => {
+        const container = document.createElement('div');
+        const trigger = document.createElement('bs-button');
+        trigger.textContent = 'Open dialog';
+        const dialog = document.createElement('bs-dialog');
+        dialog.heading = args.heading;
+        dialog.size = args.size;
+        dialog.centered = true;
+        dialog.innerHTML = `
+      <span slot="icon" style="color: var(--bs-color-primary-default)">${checkCircleIcon}</span>
+      <p>Sunset Towers is a premium commercial space located in the heart of the city. It offers flexible office layouts, modern amenities, and 24/7 security.</p>
+      <bs-button slot="footer" variant="subtle" size="sm">Cancel</bs-button>
+      <bs-button slot="footer" size="sm">Confirm</bs-button>
+    `;
+        trigger.addEventListener('click', () => {
+            dialog.open = true;
+        });
+        dialog.addEventListener('bsClose', () => {
+            dialog.open = false;
+        });
+        container.appendChild(trigger);
+        container.appendChild(dialog);
+        return container;
+    },
+};

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

@@ -349,6 +349,21 @@ describe('bs-input', () => {
             select.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
             expect(bsTitleChangeSpy).toHaveReceivedEventDetail('Mr.');
         });
+        it('renders the title select and the text input in two separate [part="field"] boxes, not one shared field', async () => {
+            const { root } = await render(h("bs-input", { type: "initials", titleOptions: ['Mrs.', 'Mr.'] }));
+            const fields = root.shadowRoot.querySelectorAll('[part="field"]');
+            expect(fields).toHaveLength(2);
+            expect(fields[0]).toHaveClass('bs-input__field--initials-title');
+            expect(fields[0].querySelector('select')).not.toBeNull();
+            expect(fields[1]).toHaveClass('bs-input__field--initials-value');
+            expect(fields[1].querySelector('input')).not.toBeNull();
+        });
+        it('applies the error class to both the title box and the value box', async () => {
+            const { root } = await render(h("bs-input", { type: "initials", titleOptions: ['Mrs.'], error: "Required" }));
+            const fields = root.shadowRoot.querySelectorAll('[part="field"]');
+            expect(fields[0]).toHaveClass('bs-input__field--error');
+            expect(fields[1]).toHaveClass('bs-input__field--error');
+        });
     });
     describe('type="country"', () => {
         it('renders a country select followed by a text input', async () => {
@@ -393,5 +408,10 @@ describe('bs-input', () => {
             cells[0].dispatchEvent(new InputEvent('input', { bubbles: true, composed: true }));
             expect(bsChangeSpy).toHaveReceivedEventDetail('4');
         });
+        it('applies the error class to the pin field when error is set', async () => {
+            const { root } = await render(h("bs-input", { type: "pin", length: 4, error: "Invalid code" }));
+            const field = root.shadowRoot.querySelector('[part="field"]');
+            expect(field).toHaveClass('bs-input__field--error');
+        });
     });
 });

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

@@ -23,6 +23,14 @@
  * @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
+ *   content-based sizing. Applied to the box itself (`.bs-input__field--initials-title`), not the
+ *   `<select>` directly -- see that class's own comment for why type="initials" renders two
+ *   separate bordered boxes instead of sharing one field the way every other composite type does.
+ * @prop --bs-input-initials-gap: Gap between the title box and the name box for type="initials".
+ *   Aliased to --bs-spacing-50 (4px), matching Figma's own gap-[4px] on this same pairing exactly.
  */
 :host {
   display: block;
@@ -56,6 +64,9 @@
 
   --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);
 }
 
 .bs-input {
@@ -329,8 +340,10 @@
   min-width: 60px;
 }
 
-/* Initials/Country composite selects (type="initials"/"country") */
-.bs-input__title-select,
+/* Country composite select (type="country") -- unlike type="initials" below, this shares one
+   field box with its adjacent text input (no confirmed Figma spec yet for splitting it into two
+   separate boxes the same way), so its own <select> still needs the flex/width override here to
+   keep it from stretching to fill the shared row via .bs-input__control's own `flex: 1`. */
 .bs-input__country-select {
   flex-shrink: 0;
   width: auto;
@@ -342,6 +355,67 @@
   font-family: inherit;
 }
 
+/* Suppress the browser's own select arrow (varies by OS/browser -- e.g. an up+down double
+   arrow on some platforms) in favor of a single chevron-down rendered via renderSelectChevron(),
+   matching type="dropdown"'s own chevron. */
+.bs-input__title-select,
+.bs-input__country-select {
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+}
+
+.bs-input__title-select::-ms-expand,
+.bs-input__country-select::-ms-expand {
+  display: none;
+}
+
+.bs-input__select-chevron {
+  flex-shrink: 0;
+  width: var(--bs-input-icon-size);
+  height: var(--bs-input-icon-size);
+  color: var(--bs-input-icon-color);
+  pointer-events: none;
+}
+
+.bs-input__field--disabled .bs-input__select-chevron {
+  color: var(--bs-input-icon-color-disabled);
+}
+
+/* Initials (type="initials") -- two genuinely separate bordered boxes side by side (see the class
+   doc on renderInitialsField() in bs-input.tsx for why), not one shared field the way country
+   above still is. Each box is a plain .bs-input__field, so the <select>/<input> inside either one
+   already gets normal .bs-input__control styling (flex: 1 filling ITS OWN box) with no extra
+   override needed -- only the title box's own OUTER width needs constraining, not its select. */
+.bs-input__initials-row {
+  display: flex;
+  gap: var(--bs-input-initials-gap);
+  width: 100%;
+}
+
+.bs-input__field--initials-title {
+  flex: 0 0 auto;
+  width: var(--bs-input-initials-title-width);
+  /* Tighter gap and a smaller chevron than the field default -- at this box's compact fixed
+     width, the full-size icon/gap would crowd out the title text (e.g. "Mrs." truncating to
+     "M"). */
+  gap: var(--bs-spacing-50);
+}
+
+.bs-input__field--initials-title .bs-input__select-chevron {
+  width: 10px;
+  height: 10px;
+}
+
+.bs-input__field--initials-value {
+  flex: 1;
+  min-width: 0;
+}
+
+.bs-input__country-select {
+  width: auto;
+}
+
 /* Pin input (type="pin") */
 .bs-input__field--pin {
   border: none;
@@ -372,3 +446,7 @@
   background: var(--bs-input-field-bg-disabled);
   cursor: not-allowed;
 }
+
+.bs-input__field--pin.bs-input__field--error .bs-input__pin-cell {
+  border-color: var(--bs-input-field-border-error);
+}

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

@@ -25,6 +25,12 @@ import { h } from "@stencil/core";
  *   toggle), or `dropdown` (chevron) -- those types always render their own trailing control there.
  *   For `type="date"`, the slot is used if provided, otherwise a default calendar icon is shown.
  * @part field - The bordered field wrapper containing the icon(s) and native control(s).
+ *   `type="initials"` renders this part on TWO separate elements instead of one (the title
+ *   `<select>`'s own small box, and the name `<input>`'s own box) -- Figma specs these as two
+ *   genuinely independent bordered containers with a gap between them, not one shared field the
+ *   way every other composite type (`country` included) renders, so `::part(field)` reaches
+ *   whichever of the two a given selector context matches, same "multiple elements, one shared
+ *   part name" convention as `bs-attachment`'s own `star` part.
  * @part menu - The `bs-menu` rendered below the field for `type="dropdown"` when `open` and
  *   `options` is non-empty.
  * @part label - The `<label>` element.
@@ -277,15 +283,27 @@ export class BsInput {
     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 })));
     }
-    renderInitialsControl() {
-        return [
-            h("select", { part: "control", class: "bs-input__control bs-input__title-select", disabled: this.disabled, onChange: this.onTitleChange }, this.titleOptions.map(opt => (h("option", { value: opt, selected: opt === this.initialsTitle }, opt)))),
-            h("input", { id: "control", part: "control", class: "bs-input__control", type: "text", value: this.value, placeholder: this.placeholder, disabled: this.disabled, "aria-required": this.required ? 'true' : undefined, onInput: this.onInput, onChange: this.onChange }),
-        ];
+    // 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
+    // node 10306:101047 specs this as two independent "Base Input" containers, unlike every other
+    // composite type in this file (`country` included) which shares one field box across its
+    // sub-controls. Bypasses renderField()/renderControl() entirely for this reason, the same way
+    // `pin` already does with its own renderPinField().
+    renderInitialsField() {
+        const disabledClass = this.disabled ? 'bs-input__field--disabled' : '';
+        return (h("div", { class: "bs-input__initials-row" }, h("div", { part: "field", class: `bs-input__field bs-input__field--initials-title ${this.error ? 'bs-input__field--error' : ''} ${disabledClass}` }, h("select", { part: "control", class: "bs-input__control bs-input__title-select", disabled: this.disabled, onChange: this.onTitleChange }, this.titleOptions.map(opt => (h("option", { value: opt, selected: opt === this.initialsTitle }, opt)))), this.renderSelectChevron()), h("div", { part: "field", class: `bs-input__field bs-input__field--initials-value ${this.error ? 'bs-input__field--error' : ''} ${disabledClass}` }, h("input", { id: "control", part: "control", class: "bs-input__control", type: "text", value: this.value, placeholder: this.placeholder, disabled: this.disabled, "aria-required": this.required ? 'true' : undefined, onInput: this.onInput, onChange: this.onChange }))));
+    }
+    /* Both the initials title <select> and the country <select> have their native OS arrow
+       suppressed (appearance: none in CSS) in favor of this single chevron-down, matching
+       type="dropdown"'s own chevron -- native rendering varies by OS/browser (e.g. an up+down
+       double arrow on some platforms), which this replaces with one consistent icon. */
+    renderSelectChevron() {
+        return (h("svg", { class: "bs-input__select-chevron", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" }, h("path", { d: "M4 6L8 10L12 6", stroke: "currentColor", "stroke-width": "1.3", "stroke-linecap": "round", "stroke-linejoin": "round" })));
     }
     renderCountryControl() {
         return [
             h("select", { part: "control", class: "bs-input__control bs-input__country-select", disabled: this.disabled, onChange: this.onCountryChange }, this.countryOptions.map(opt => (h("option", { value: opt.code, selected: opt.code === this.country }, opt.flagIcon ? `${opt.flagIcon} ` : '', opt.code, " ", opt.label)))),
+            this.renderSelectChevron(),
             h("input", { id: "control", part: "control", class: "bs-input__control", type: "text", value: this.value, placeholder: this.placeholder, disabled: this.disabled, "aria-required": this.required ? 'true' : undefined, onInput: this.onInput, onChange: this.onChange }),
         ];
     }
@@ -297,8 +315,6 @@ export class BsInput {
                 return this.renderTextareaControl();
             case 'chip':
                 return this.renderChipControl();
-            case 'initials':
-                return this.renderInitialsControl();
             case 'country':
                 return this.renderCountryControl();
             default:
@@ -320,13 +336,15 @@ export class BsInput {
     }
     renderPinField() {
         this.pinInputs = [];
-        return (h("div", { part: "field", class: `bs-input__field bs-input__field--pin ${this.disabled ? 'bs-input__field--disabled' : ''}` }, 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) })))));
+        const errorClass = this.error ? 'bs-input__field--error' : '';
+        const disabledClass = this.disabled ? 'bs-input__field--disabled' : '';
+        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: '766dae0bf2565f45a9fffffc9684a83c89cea122', class: `bs-input ${this.error ? 'bs-input--error' : ''}` }, this.label && (
+        return (h("div", { key: '3647d132e96c281ba68522647ab422040c6752c2', 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: '7935c91837b4882a9b2a416e43f43b1e0d311c8f', part: "label", class: "bs-input__label", htmlFor: "control" }, this.label, this.required && (h("span", { key: '4db3ccc8647ebb5e0fb6635fb9c0e6050872b10c', part: "required", class: "bs-input__required", "aria-hidden": "true" }, "*")))), this.type === 'pin' ? this.renderPinField() : 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: '95eb3e3308a746797565480318b35ea2f20c36d0', part: "label", class: "bs-input__label", htmlFor: "control" }, this.label, this.required && (h("span", { key: '5c30e73a9e474ac3138aff9868e6b98d42d3771c', 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"; }