@brandsync/wc 0.0.11 → 0.1.0

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

@@ -0,0 +1,130 @@
+.bs-dialog__backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: var(--bs-z-index-modal);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.4);
+}
+
+.bs-dialog__dialog {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  max-height: calc(100vh - var(--bs-spacing-800));
+  background: var(--bs-surface-base);
+  /* Only .bs-dialog__heading set a themed color before this -- body/footer slot content had no
+     color rule anywhere in this file, so it inherited whatever color the *consuming page* happened
+     to have, not this dialog's own dark/light-themed token. Invisible in dark mode specifically
+     because the surface flipped dark via --bs-surface-raised while the text stayed whatever the
+     page's own default was. Setting it here gives every slotted section a themed default to
+     inherit, unless a section (like heading) needs its own explicit override anyway. */
+  color: var(--bs-text-default);
+  border-radius: var(--bs-border-radius-200);
+  box-shadow: var(--bs-shadow-xl);
+  font-family: inherit;
+}
+
+.bs-dialog__dialog--sm {
+  width: 360px;
+}
+.bs-dialog__dialog--md {
+  width: 560px;
+}
+.bs-dialog__dialog--lg {
+  width: 800px;
+}
+
+/* Vertical rhythm follows the Figma "Dialog" spec: 16px between the dialog edge/image/icon and the
+   heading, 8px between the heading and body content, 16px between the body and footer/dialog edge
+   -- no divider lines anywhere. Achieved with a mix of each section's own padding (top 16, bottom 8
+   here) and the sibling-selector rule below, rather than a single flex `gap` on the dialog, since a
+   `gap` would add unwanted space even when the preceding image/icon wrapper is empty. */
+.bs-dialog__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--bs-spacing-200) var(--bs-spacing-200) var(--bs-spacing-100);
+}
+
+/* The image/icon wrapper above already provides its own bottom margin when it has content (see
+   .bs-dialog__image--visible / .bs-dialog__icon--visible below) -- without this, the header's own
+   top padding would stack on top of that margin for a doubled gap. */
+.bs-dialog__image--visible + .bs-dialog__header,
+.bs-dialog__icon--visible + .bs-dialog__header {
+  padding-top: 0;
+}
+
+.bs-dialog__heading {
+  font-size: var(--bs-font-size-lg);
+  font-weight: var(--bs-font-weight-semibold);
+  color: var(--bs-text-default);
+}
+
+/* Both close buttons are real <bs-icon-button> elements now (variant="subtle" inline in the header,
+   variant="neutral" floating -- that variant/token pairing is an exact match for the Figma "Dialog"
+   spec's raised, bordered floating close, confirmed against bs-icon-button.css's own token aliases),
+   so this only needs to position the floating one -- everything else (size, background, border,
+   hover/focus states) already comes from bs-icon-button itself. */
+.bs-dialog__close--floating {
+  position: absolute;
+  top: var(--bs-spacing-200);
+  right: var(--bs-spacing-200);
+  z-index: 1;
+}
+
+.bs-dialog__body {
+  /* No top padding -- the header's own bottom padding (8px) already provides the heading-to-body
+     gap, so this only needs to handle the sides and the bottom gap to the footer/dialog edge. */
+  padding: 0 var(--bs-spacing-200) var(--bs-spacing-200);
+  overflow-y: auto;
+}
+
+.bs-dialog__body--centered {
+  text-align: center;
+}
+
+.bs-dialog__footer--visible {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--bs-spacing-200);
+  /* No top padding -- the body's own bottom padding (16px) already provides the body-to-footer
+     gap, avoiding a doubled gap. */
+  padding: 0 var(--bs-spacing-200) var(--bs-spacing-200);
+}
+
+/* Empty by default (no padding/margin) -- only visible when the image slot has content, same
+   "reserve no space when empty" pattern as .bs-dialog__footer--visible above. */
+.bs-dialog__image--visible {
+  overflow: hidden;
+  border-radius: var(--bs-border-radius-200) var(--bs-border-radius-200) 0 0;
+  margin-bottom: var(--bs-spacing-200);
+}
+
+.bs-dialog__image--visible ::slotted(img) {
+  display: block;
+  width: 100%;
+  height: auto;
+  object-fit: cover;
+}
+
+/* Only rendered at all when `centered` is true (see render()) -- empty by default, same
+   "reserve no space when empty" pattern as .bs-dialog__footer--visible above. */
+.bs-dialog__icon--visible {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--bs-spacing-200) var(--bs-spacing-200) 0;
+  margin-bottom: var(--bs-spacing-200);
+}
+
+.bs-dialog__icon--visible ::slotted(*) {
+  width: 64px;
+  height: 64px;
+}
+
+.bs-dialog__header--centered {
+  justify-content: center;
+  text-align: center;
+}

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