@brandsync/wc 0.0.8 → 0.0.9

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

@@ -0,0 +1,184 @@
+:host {
+  display: inline-block;
+  --bs-attachment-size: 112px;
+  --bs-attachment-radius: var(--bs-border-radius-100);
+  --bs-attachment-border-color: var(--bs-border-default);
+  --bs-attachment-card-bg: var(--bs-surface-base);
+  --bs-attachment-filename-color: var(--bs-text-default);
+  --bs-attachment-badge-bg-pdf: var(--bs-badge-bg-error);
+  --bs-attachment-badge-bg-document: var(--bs-badge-bg-info);
+  --bs-attachment-remove-bg: var(--bs-button-neutral-container);
+  --bs-attachment-remove-hover: var(--bs-button-neutral-hover);
+  --bs-attachment-remove-pressed: var(--bs-button-neutral-pressed);
+  --bs-attachment-remove-focus: var(--bs-border-neutral-focus);
+}
+
+.bs-attachment {
+  box-sizing: border-box;
+  position: relative;
+  display: inline-flex;
+  font-family: inherit;
+}
+
+/* --- Image thumbnail --- */
+
+.bs-attachment__thumbnail {
+  position: relative;
+  width: var(--bs-attachment-size);
+  height: var(--bs-attachment-size);
+  border-radius: var(--bs-attachment-radius);
+  overflow: hidden;
+}
+
+.bs-attachment--loading .bs-attachment__thumbnail {
+  border: var(--bs-border-width-thin) solid var(--bs-attachment-border-color);
+}
+
+.bs-attachment__image {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.bs-attachment--loading .bs-attachment__image {
+  filter: blur(2px);
+}
+
+.bs-attachment__spinner--overlay {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+}
+
+/* --- PDF / document card --- */
+
+.bs-attachment__card {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--bs-spacing-100);
+  width: var(--bs-attachment-size);
+  height: var(--bs-attachment-size);
+  padding: var(--bs-spacing-100);
+  background: var(--bs-attachment-card-bg);
+  border: var(--bs-border-width-thin) solid var(--bs-attachment-border-color);
+  border-radius: var(--bs-attachment-radius);
+}
+
+.bs-attachment__filename {
+  margin: 0;
+  flex: 1 0 0;
+  min-height: 0;
+  width: 100%;
+  overflow: hidden;
+  color: var(--bs-attachment-filename-color);
+  font-size: var(--bs-font-size-xs);
+  line-height: calc(var(--bs-line-height-caption-sm) * 1px);
+  text-overflow: ellipsis;
+  word-break: break-word;
+}
+
+.bs-attachment__badge {
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  padding: var(--bs-spacing-50);
+  border-radius: var(--bs-border-radius-50);
+}
+
+.bs-attachment__badge--pdf {
+  background: var(--bs-attachment-badge-bg-pdf);
+}
+
+.bs-attachment__badge--document {
+  background: var(--bs-attachment-badge-bg-document);
+}
+
+/* --- Remove button --- */
+
+.bs-attachment__remove {
+  box-sizing: border-box;
+  position: absolute;
+  top: var(--bs-spacing-50);
+  right: var(--bs-spacing-50);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  padding: 0;
+  background: var(--bs-attachment-remove-bg);
+  border: none;
+  border-radius: var(--bs-border-radius-50);
+  color: var(--bs-icon-default);
+  cursor: pointer;
+  opacity: 0;
+  pointer-events: none;
+  transition: background-color var(--bs-duration-fast) var(--bs-easing-standard), opacity var(--bs-duration-fast) var(--bs-easing-standard);
+}
+
+.bs-attachment__remove:hover {
+  background: var(--bs-attachment-remove-hover);
+}
+
+.bs-attachment__remove:active {
+  background: var(--bs-attachment-remove-pressed);
+}
+
+.bs-attachment:hover .bs-attachment__remove,
+.bs-attachment:focus-within .bs-attachment__remove {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.bs-attachment__remove:focus-visible {
+  outline: 2px solid var(--bs-attachment-remove-focus);
+  outline-offset: 1px;
+}
+
+/* --- Spinner --- */
+
+.bs-attachment__spinner {
+  display: inline-block;
+  box-sizing: border-box;
+  border: 2px solid rgba(255, 255, 255, 0.35);
+  border-top-color: var(--bs-white);
+  border-radius: 50%;
+  animation: bs-attachment-spin 0.8s linear infinite;
+}
+
+/* The overlay variant is also positioned via `transform: translate(-50%, -50%)` (see
+ * .bs-attachment__spinner--overlay) for centering. `bs-attachment-spin`'s keyframes only define
+ * `transform` at the "to" stop, so the browser would interpolate from that static translate to a
+ * bare rotate() -- different transform functions, decomposed into a matrix and interpolated,
+ * producing a lateral swoop instead of an in-place spin. This compound selector (higher
+ * specificity than either single-class rule, so it applies regardless of source order) swaps in
+ * a keyframe set that bakes the same translate into every stop, so only the rotation animates. */
+.bs-attachment__spinner.bs-attachment__spinner--overlay {
+  animation-name: bs-attachment-spin-centered;
+}
+
+@keyframes bs-attachment-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes bs-attachment-spin-centered {
+  from {
+    transform: translate(-50%, -50%) rotate(0deg);
+  }
+  to {
+    transform: translate(-50%, -50%) rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .bs-attachment__spinner {
+    animation: none;
+  }
+}

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

@@ -0,0 +1,230 @@
+import { h } from "@stencil/core";
+/**
+ * A single file attachment preview for `bs-composer` -- an image thumbnail, or a filename card
+ * with a colored file-type badge (PDF/Document), with an optional upload-in-progress spinner and
+ * a hover/focus-revealed remove button.
+ *
+ * ## When to use
+ * - Rendered by the consuming app for each file a user has attached to a Genie AI chat message,
+ *   typically alongside or inside `bs-composer`.
+ *
+ * ## When not to use
+ * - A generic file-upload control -- this is a preview-only presentational component. The
+ *   consuming app owns the actual file picker/upload logic and drives `loading` from that state.
+ *
+ * @part thumbnail - The image thumbnail wrapper (type="image" only).
+ * @part card - The filename card (type="pdf" / type="document" only).
+ * @part filename - The truncated filename text inside the card.
+ * @part badge - The colored file-type badge inside the card.
+ * @part remove - The remove button.
+ * @prop --bs-attachment-size - Width/height of the image thumbnail and of the card. Defaults to 112px.
+ * @prop --bs-attachment-radius - Corner radius of the thumbnail/card. Aliased to
+ *   `--bs-border-radius-100`.
+ * @prop --bs-attachment-border-color - Border color of the card / loading image wrap. Aliased to
+ *   `--bs-border-default`.
+ * @prop --bs-attachment-card-bg - Card background. Aliased to `--bs-surface-base`.
+ * @prop --bs-attachment-filename-color - Filename text color. Aliased to `--bs-text-default`.
+ * @prop --bs-attachment-badge-bg-pdf - PDF badge background. Aliased to `--bs-badge-bg-error`.
+ * @prop --bs-attachment-badge-bg-document - Document badge background. Aliased to
+ *   `--bs-badge-bg-info`.
+ * @prop --bs-attachment-remove-bg - Remove button (neutral icon button) default background.
+ *   Aliased to `--bs-button-neutral-container`.
+ * @prop --bs-attachment-remove-hover - Remove button hover background. Aliased to
+ *   `--bs-button-neutral-hover`.
+ * @prop --bs-attachment-remove-pressed - Remove button active/pressed background. Aliased to
+ *   `--bs-button-neutral-pressed`.
+ * @prop --bs-attachment-remove-focus - Remove button focus outline color. Aliased to
+ *   `--bs-border-neutral-focus`.
+ */
+export class BsAttachment {
+    /** Which kind of attachment preview to render. */
+    type = 'image';
+    /** The filename shown on the card. Only used when `type` is "pdf" or "document". */
+    fileName = 'Attachment';
+    /** The thumbnail image URL. Only used when `type` is "image". */
+    imageSrc;
+    /** Accessible alt text for the image thumbnail. Only used when `type` is "image". */
+    imageAlt = '';
+    /** Shows an upload-in-progress spinner (blurred + overlaid for images, in the badge for files). */
+    loading = false;
+    /** Whether the hover/focus-revealed remove button is rendered at all. */
+    removable = true;
+    /** Fires when the remove button is clicked. */
+    bsRemove;
+    onRemoveClick = () => {
+        this.bsRemove.emit();
+    };
+    render() {
+        const isImage = this.type === 'image';
+        return (h("div", { key: '7cebfc51b0453ac6c1fa57d38856b4b54f15def9', class: { 'bs-attachment': true, 'bs-attachment--loading': this.loading }, "aria-busy": this.loading ? 'true' : 'false' }, isImage ? this.renderImage() : this.renderCard(), this.removable && (h("button", { key: '935eb0f9507a9c9d24a1a6121c2fcd0575ac9d16', type: "button", part: "remove", class: "bs-attachment__remove", "aria-label": "Remove attachment", onClick: this.onRemoveClick }, h(CloseIcon, { key: '00e45c411ec831a66dd29d039568f57fc97b3930' })))));
+    }
+    renderImage() {
+        return (h("div", { part: "thumbnail", class: "bs-attachment__thumbnail" }, h("img", { class: "bs-attachment__image", src: this.imageSrc, alt: this.imageAlt }), this.loading && h(Spinner, { class: "bs-attachment__spinner bs-attachment__spinner--overlay", size: 16 })));
+    }
+    renderCard() {
+        return (h("div", { part: "card", class: "bs-attachment__card" }, h("p", { part: "filename", class: "bs-attachment__filename" }, this.fileName), h("span", { part: "badge", class: `bs-attachment__badge bs-attachment__badge--${this.type}` }, this.loading ? h(Spinner, { size: 16 }) : this.type === 'pdf' ? h(FilePdfIcon, null) : h(FileDocIcon, null))));
+    }
+    static get is() { return "bs-attachment"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bs-attachment.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bs-attachment.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BsAttachmentType",
+                    "resolved": "\"document\" | \"image\" | \"pdf\"",
+                    "references": {
+                        "BsAttachmentType": {
+                            "location": "local",
+                            "path": "/Users/vivka/brandsync-web-components/src/components/bs-attachment/bs-attachment.tsx",
+                            "id": "src/components/bs-attachment/bs-attachment.tsx::BsAttachmentType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Which kind of attachment preview to render."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "type",
+                "defaultValue": "'image'"
+            },
+            "fileName": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The filename shown on the card. Only used when `type` is \"pdf\" or \"document\"."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "file-name",
+                "defaultValue": "'Attachment'"
+            },
+            "imageSrc": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The thumbnail image URL. Only used when `type` is \"image\"."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "image-src"
+            },
+            "imageAlt": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible alt text for the image thumbnail. Only used when `type` is \"image\"."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "image-alt",
+                "defaultValue": "''"
+            },
+            "loading": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Shows an upload-in-progress spinner (blurred + overlaid for images, in the badge for files)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "loading",
+                "defaultValue": "false"
+            },
+            "removable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the hover/focus-revealed remove button is rendered at all."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "removable",
+                "defaultValue": "true"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "bsRemove",
+                "name": "bsRemove",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires when the remove button is clicked."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+}
+const Spinner = ({ class: className, size = 16 }) => (h("span", { class: `bs-attachment__spinner ${className ?? ''}`, style: { width: `${size}px`, height: `${size}px` }, role: "status", "aria-label": "Uploading" }));
+const CloseIcon = () => (h("svg", { width: "8", height: "8", viewBox: "0 0 8 8", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, h("path", { d: "M6.25 1.75L1.75 6.25", stroke: "currentColor", "stroke-width": "0.666667", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { d: "M6.25 6.25L1.75 1.75", stroke: "currentColor", "stroke-width": "0.666667", "stroke-linecap": "round", "stroke-linejoin": "round" })));
+const FilePdfIcon = () => (h("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, h("path", { d: "M13.5 9.5H11.5V13", stroke: "white", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { d: "M13 11.5H11.5", stroke: "white", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { d: "M3 12H4C4.33152 12 4.64946 11.8683 4.88388 11.6339C5.1183 11.3995 5.25 11.0815 5.25 10.75C5.25 10.4185 5.1183 10.1005 4.88388 9.86612C4.64946 9.6317 4.33152 9.5 4 9.5H3V13", stroke: "white", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { d: "M7 9.5V13H8C8.46413 13 8.90925 12.8156 9.23744 12.4874C9.56563 12.1592 9.75 11.7141 9.75 11.25C9.75 10.7859 9.56563 10.3408 9.23744 10.0126C8.90925 9.68437 8.46413 9.5 8 9.5H7Z", stroke: "white", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { d: "M3 7V2.5C3 2.36739 3.05268 2.24021 3.14645 2.14645C3.24021 2.05268 3.36739 2 3.5 2H9.5L13 5.5V7", stroke: "white", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { d: "M9.5 2V5.5H13", stroke: "white", "stroke-linecap": "round", "stroke-linejoin": "round" })));
+const FileDocIcon = () => (h("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, h("path", { d: "M2.25 9.5V13H3.25C3.71413 13 4.15925 12.8156 4.48744 12.4874C4.81563 12.1592 5 11.7141 5 11.25C5 10.7859 4.81563 10.3408 4.48744 10.0126C4.15925 9.68437 3.71413 9.5 3.25 9.5H2.25Z", stroke: "white", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { d: "M13.5 12.5544C13.3724 12.6928 13.2179 12.8038 13.046 12.8804C12.874 12.957 12.6882 12.9977 12.5 13C11.6712 13 11 12.2163 11 11.25C11 10.2837 11.6712 9.5 12.5 9.5C12.6882 9.50228 12.874 9.54298 13.046 9.61961C13.2179 9.69624 13.3724 9.80718 13.5 9.94563", stroke: "white", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { d: "M3 7V2.5C3 2.36739 3.05268 2.24021 3.14645 2.14645C3.24021 2.05268 3.36739 2 3.5 2H9.5L13 5.5V7", stroke: "white", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { d: "M9.5 2V5.5H13", stroke: "white", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { d: "M8 13C8.82843 13 9.5 12.2165 9.5 11.25C9.5 10.2835 8.82843 9.5 8 9.5C7.17157 9.5 6.5 10.2835 6.5 11.25C6.5 12.2165 7.17157 13 8 13Z", stroke: "white", "stroke-linecap": "round", "stroke-linejoin": "round" })));

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

@@ -0,0 +1,58 @@
+import { html } from "lit";
+import { componentDescription, propDescription } from "../../stories-utils";
+const SAMPLE_IMAGE = 'https://images.unsplash.com/photo-1512917774080-9991f1c4c750?w=200&h=200&fit=crop';
+const meta = {
+    title: 'Genie AI Components/bs-attachment',
+    parameters: { docs: { description: { component: componentDescription('bs-attachment') } } },
+    render: args => html `
+    <bs-attachment
+      type=${args.type}
+      file-name=${args.fileName}
+      image-src=${args.imageSrc}
+      ?loading=${args.loading}
+      ?removable=${args.removable}
+    ></bs-attachment>
+  `,
+    argTypes: {
+        type: { control: 'select', options: ['image', 'pdf', 'document'], description: propDescription('bs-attachment', 'type') },
+        fileName: { control: 'text', description: propDescription('bs-attachment', 'fileName') },
+        imageSrc: { control: 'text', description: propDescription('bs-attachment', 'imageSrc') },
+        loading: { control: 'boolean', description: propDescription('bs-attachment', 'loading') },
+        removable: { control: 'boolean', description: propDescription('bs-attachment', 'removable') },
+    },
+    args: {
+        type: 'image',
+        fileName: 'Dummy-pdf-in-here',
+        imageSrc: SAMPLE_IMAGE,
+        loading: false,
+        removable: true,
+    },
+};
+export default meta;
+export const Default = {};
+export const Pdf = {
+    args: { type: 'pdf' },
+};
+export const Document = {
+    args: { type: 'document' },
+};
+export const ImageLoading = {
+    name: 'Image (loading)',
+    args: { loading: true },
+};
+export const PdfLoading = {
+    name: 'PDF (loading)',
+    args: { type: 'pdf', loading: true },
+};
+export const Gallery = {
+    render: () => html `
+    <div style="display: flex; gap: 8px; flex-wrap: wrap;">
+      <bs-attachment type="image" image-src=${SAMPLE_IMAGE}></bs-attachment>
+      <bs-attachment type="pdf" file-name="Dummy-pdf-in-here"></bs-attachment>
+      <bs-attachment type="document" file-name="Dummy-pdf-in-here"></bs-attachment>
+      <bs-attachment type="image" image-src=${SAMPLE_IMAGE} loading></bs-attachment>
+      <bs-attachment type="pdf" file-name="Dummy-pdf-in-here" loading></bs-attachment>
+      <bs-attachment type="document" file-name="Dummy-pdf-in-here" loading></bs-attachment>
+    </div>
+  `,
+};

package/dist/collection/components/bs-attachment-list/bs-attachment-list.cmp.test.js

@@ -0,0 +1,28 @@
+import { render, h, describe, it, expect, vi } from "@stencil/vitest";
+describe('bs-attachment-list', () => {
+    it('renders slotted attachments inside the scrollable row', async () => {
+        const { root } = await render(h("bs-attachment-list", null, h("bs-attachment", { type: "pdf", "file-name": "report.pdf" })));
+        const row = root.shadowRoot.querySelector('[part="row"]');
+        expect(row).not.toBeNull();
+        expect(root.querySelector('bs-attachment')).not.toBeNull();
+    });
+    it('has an accessible group label on the row by default', async () => {
+        const { root } = await render(h("bs-attachment-list", null));
+        expect(root.shadowRoot.querySelector('[part="row"]').getAttribute('aria-label')).toBe('Attachments');
+    });
+    it('does not render the fade overlay when content fits without scrolling', async () => {
+        const { root } = await render(h("bs-attachment-list", null));
+        expect(root.shadowRoot.querySelector('[part="fade"]')).toBeNull();
+    });
+    it('shows the fade overlay once the row has more content than fits', async () => {
+        const { root, waitForChanges } = await render(h("bs-attachment-list", null));
+        const row = root.shadowRoot.querySelector('[part="row"]');
+        // jsdom never actually lays out content, so scrollWidth/clientWidth are always 0 -- fake the
+        // "more content than fits" condition directly rather than relying on real layout.
+        vi.spyOn(row, 'scrollWidth', 'get').mockReturnValue(500);
+        vi.spyOn(row, 'clientWidth', 'get').mockReturnValue(300);
+        row.dispatchEvent(new Event('scroll'));
+        await waitForChanges();
+        expect(root.shadowRoot.querySelector('[part="fade"]')).not.toBeNull();
+    });
+});

package/dist/collection/components/bs-attachment-list/bs-attachment-list.css

@@ -0,0 +1,56 @@
+:host {
+  display: block;
+  --bs-attachment-list-gap: 10px;
+  --bs-attachment-list-padding: var(--bs-spacing-150);
+  --bs-attachment-list-fade-color: var(--bs-static-white);
+  --bs-attachment-list-fade-width: var(--bs-spacing-800);
+  --bs-attachment-list-scrollbar-thumb: var(--bs-neutral-300);
+}
+
+.bs-attachment-list {
+  box-sizing: border-box;
+  position: relative;
+}
+
+.bs-attachment-list__row {
+  box-sizing: border-box;
+  display: flex;
+  align-items: flex-start;
+  gap: var(--bs-attachment-list-gap);
+  padding: var(--bs-attachment-list-padding);
+  overflow-x: auto;
+  /* Hidden by default (Firefox); WebKit/Blink hide it via the ::-webkit-scrollbar rules below
+   * instead, then reveal a styled thumb on hover/focus -- see the comment there for why this
+   * can't be a single cross-browser rule. */
+  scrollbar-width: none;
+}
+
+.bs-attachment-list__row::-webkit-scrollbar {
+  height: 4px;
+}
+
+.bs-attachment-list__row::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.bs-attachment-list__row::-webkit-scrollbar-thumb {
+  /* Transparent (not display:none) so the thumb still reserves its track space and the reveal on
+   * hover/focus below is just a color change, not a layout shift. */
+  background: transparent;
+  border-radius: var(--bs-border-radius-full);
+}
+
+.bs-attachment-list__row:hover::-webkit-scrollbar-thumb,
+.bs-attachment-list__row:focus-within::-webkit-scrollbar-thumb {
+  background: var(--bs-attachment-list-scrollbar-thumb);
+}
+
+.bs-attachment-list__fade {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: var(--bs-attachment-list-fade-width);
+  pointer-events: none;
+  background: linear-gradient(to right, transparent, var(--bs-attachment-list-fade-color));
+}

package/dist/collection/components/bs-attachment-list/bs-attachment-list.js

@@ -0,0 +1,105 @@
+import { h } from "@stencil/core";
+/**
+ * A horizontally-scrolling row wrapper for one or more `bs-attachment` previews, for slotting into
+ * `bs-composer`'s `attachments` slot when a Genie AI chat message has file attachments.
+ *
+ * ## When to use
+ * - Wrapping any number of `bs-attachment` elements the user has attached to a message, so they
+ *   lay out in a single row and scroll horizontally instead of wrapping/overflowing once there
+ *   are more than fit the available width.
+ *
+ * ## When not to use
+ * - A single attachment on its own — just render `bs-attachment` directly, this wrapper's
+ *   scroll/fade affordance only matters once there's more content than fits.
+ *
+ * @slot - One or more `bs-attachment` elements.
+ * @part row - The scrollable flex row containing the slotted attachments.
+ * @part fade - The right-edge fade-out overlay shown only while the row has more content to
+ *   scroll to.
+ * @prop --bs-attachment-list-gap - Gap between attachments. Matches the 10px Figma spec (not tied
+ *   to the `--bs-spacing-*` scale, which only has 8px/12px neighbors).
+ * @prop --bs-attachment-list-padding - Padding around the row. Aliased to `--bs-spacing-150`.
+ * @prop --bs-attachment-list-fade-color - Color the right-edge fade blends into. Aliased to
+ *   `--bs-static-white`.
+ * @prop --bs-attachment-list-fade-width - Width of the right-edge fade overlay. Aliased to
+ *   `--bs-spacing-800`.
+ * @prop --bs-attachment-list-scrollbar-thumb - Color of the scrollbar thumb that appears on
+ *   hover/focus once the row is scrollable. Aliased to `--bs-neutral-300`.
+ */
+export class BsAttachmentList {
+    el;
+    /** Accessible name for the scrollable region. */
+    ariaLabel = 'Attachments';
+    /** Whether the row currently has more content than fits (drives the fade + scrollbar-on-hover). */
+    canScrollRight = false;
+    row;
+    resizeObserver;
+    componentDidLoad() {
+        this.updateScrollState();
+        this.resizeObserver = new ResizeObserver(() => this.updateScrollState());
+        this.resizeObserver.observe(this.el);
+    }
+    disconnectedCallback() {
+        this.resizeObserver?.disconnect();
+    }
+    onSlotchange = () => {
+        this.updateScrollState();
+    };
+    onScroll = () => {
+        this.updateScrollState();
+    };
+    updateScrollState = () => {
+        const row = this.row;
+        if (!row)
+            return;
+        // +1 tolerance: some browsers report fractional scrollWidth/clientWidth that differ by less
+        // than a pixel even when there's nothing left to scroll, which would otherwise leave the fade
+        // stuck on permanently.
+        this.canScrollRight = row.scrollWidth - row.clientWidth - row.scrollLeft > 1;
+    };
+    render() {
+        return (h("div", { key: 'adf8ddac319b3d891d0895cb7e488b875f4bce5e', class: "bs-attachment-list" }, h("div", { key: 'd4247a77596a1a33d03f8657ec015f2d00b4138d', part: "row", class: "bs-attachment-list__row", ref: el => (this.row = el), onScroll: this.onScroll, role: "group", "aria-label": this.ariaLabel, tabIndex: 0 }, h("slot", { key: 'b4745ab38ca82a43bc48a7bc02669942b2eb0e0f', onSlotchange: this.onSlotchange })), this.canScrollRight && h("div", { key: '58bb4815a8fb296f0788c8a4adfb9780049d641d', part: "fade", class: "bs-attachment-list__fade", "aria-hidden": "true" })));
+    }
+    static get is() { return "bs-attachment-list"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bs-attachment-list.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bs-attachment-list.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "ariaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible name for the scrollable region."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aria-label",
+                "defaultValue": "'Attachments'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "canScrollRight": {}
+        };
+    }
+    static get elementRef() { return "el"; }
+}