@brandsync/wc 1.6.0 → 1.8.0

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

@@ -0,0 +1,531 @@
+import { h } from "@stencil/core";
+/**
+ * A carousel that shows a page of slides at a time, with a tracker (dots or numbered blocks) and
+ * previous/next controls, and optional auto-advance with a Pause/Play button.
+ *
+ * Slides are the default slot's direct children (a `bs-card`, an image, anything). The carousel
+ * shows `slidesPerView` of them at once, so there are `ceil(slides / slidesPerView)` pages. It
+ * manages two things on those slide elements: the `hidden` attribute (off-page slides are hidden,
+ * so they leave the tab order and the accessibility tree) and, only when not already set,
+ * `role="group"`, `aria-roledescription="slide"` and an `aria-label` of "n of N".
+ *
+ * Composes `bs-pagination` (`tracker="numbers"`), `bs-icon-button` (previous/next for
+ * `tracker="dots"`) and `bs-button` (Pause/Play) rather than re-implementing them.
+ *
+ * ## When to use
+ * - Browsing a set of related items (cards, images, announcements) where only a few fit at once.
+ * - Rotating promotional or highlight content, where auto-advance with a Pause control is wanted.
+ *
+ * ## When not to use
+ * - Content users must see in full to complete a task -- hiding it behind paging hurts discovery;
+ *   lay it out in a list or grid instead.
+ * - A strict sequence of steps -- use `bs-stepper`.
+ * - Paging through a large, addressable result set -- use `bs-pagination`.
+ *
+ * @slot - Default slot: the slides. Each direct child is one slide.
+ * @part carousel - The outer region (`role="region"`, `aria-roledescription="carousel"`).
+ * @part slides - The row holding the visible slides.
+ * @part tracker - The row holding the tracker and the Pause/Play button.
+ * @part prev - The previous button (`tracker="dots"`).
+ * @part next - The next button (`tracker="dots"`).
+ * @part dots - The dot group (`tracker="dots"`).
+ * @part dot - Each dot (`tracker="dots"`).
+ * @part current - The current page's dot (in addition to `dot`).
+ * @part pagination - The numbered tracker (`tracker="numbers"`).
+ * @part pause - The Pause/Play button (only rendered when `autoplay`).
+ */
+// Note: this component's CSS Custom Properties (--bs-carousel-*) are documented via @prop comments
+// in bs-carousel.css, not here -- Stencil's docs generator only parses @prop out of CSS file
+// comments (see bs-input.tsx's equivalent note).
+export class BsCarousel {
+    el;
+    /** Which tracker to show under the slides. `dots` is a compact dot row between previous/next
+     * buttons (the dots are an indicator, not buttons); `numbers` is a numbered `bs-pagination`
+     * where each page can be jumped to directly. */
+    tracker = 'dots';
+    /** How many slides are visible at once. The tracker counts pages: `ceil(slides / slidesPerView)`. */
+    slidesPerView = 3;
+    /** The visible page, 1-based (same convention as `bs-pagination`). Mutable so the carousel
+     * advances it itself (tracker, previous/next, autoplay). Clamped to the available pages. */
+    currentPage = 1;
+    /** Auto-advances to the next page every `interval` ms, looping from the last page to the first.
+     * Off by default. The Pause/Play button is only rendered when this is set. Auto-advance also
+     * stops while the pointer is over the carousel or focus is inside it, and starts paused for
+     * users who prefer reduced motion. */
+    autoplay = false;
+    /** Milliseconds between auto-advances, when `autoplay` is set. */
+    interval = 5000;
+    /** Whether auto-advance is paused by the user (the Pause/Play button). Mutable and reflected so
+     * the state is visible to CSS and settable from outside. Only meaningful with `autoplay`. */
+    paused = false;
+    /** Accessible name of the carousel region (e.g. "Featured articles"). */
+    label = 'Carousel';
+    /** Accessible name of the previous button (`tracker="dots"`) -- override for localisation. */
+    previousLabel = 'Previous slide';
+    /** Accessible name of the next button (`tracker="dots"`) -- override for localisation. */
+    nextLabel = 'Next slide';
+    /** Label of the Pause/Play button while auto-advance is running. */
+    pauseLabel = 'Pause';
+    /** Label of the Pause/Play button while auto-advance is paused. */
+    playLabel = 'Play';
+    /** Fires after the visible page changes via the tracker, previous/next or autoplay, with the
+     * new 1-based page. */
+    bsPageChange;
+    /** Fires when the user toggles the Pause/Play button, with the new `paused` value. */
+    bsPauseChange;
+    slideCount = 0;
+    /** True while the pointer is over the carousel or focus is inside it (auto-advance holds). */
+    interacting = false;
+    timer;
+    get slides() {
+        return Array.from(this.el.children).filter(c => !c.hasAttribute('slot'));
+    }
+    get perView() {
+        return Number.isFinite(this.slidesPerView) && this.slidesPerView >= 1 ? Math.floor(this.slidesPerView) : 1;
+    }
+    get pageCount() {
+        return Math.max(1, Math.ceil(this.slideCount / this.perView));
+    }
+    get page() {
+        return Math.min(Math.max(1, Math.floor(this.currentPage) || 1), this.pageCount);
+    }
+    componentWillLoad() {
+        this.slideCount = this.slides.length;
+        // @Watch doesn't fire for the initial value, so clamp an out-of-range currentPage here too.
+        if (this.currentPage !== this.page)
+            this.currentPage = this.page;
+        // Honor reduced-motion: a user who asked for less motion shouldn't have content move on its
+        // own. They can still start it with the Play button.
+        if (this.autoplay && window.matchMedia?.('(prefers-reduced-motion: reduce)').matches) {
+            this.paused = true;
+        }
+    }
+    componentDidLoad() {
+        this.applySlides();
+        this.updateTimer();
+    }
+    componentDidRender() {
+        // Slide visibility depends on page/slidesPerView/slideCount; cheap and idempotent.
+        this.applySlides();
+    }
+    disconnectedCallback() {
+        this.stopTimer();
+    }
+    onCurrentPageChange() {
+        // Keep the mutable prop honest if it was set out of range from outside.
+        if (this.currentPage !== this.page)
+            this.currentPage = this.page;
+    }
+    updateTimer() {
+        this.stopTimer();
+        if (this.autoplay && !this.paused && !this.interacting && this.pageCount > 1) {
+            this.timer = window.setInterval(() => this.goTo(this.page >= this.pageCount ? 1 : this.page + 1), Math.max(250, this.interval));
+        }
+    }
+    stopTimer() {
+        if (this.timer !== undefined) {
+            window.clearInterval(this.timer);
+            this.timer = undefined;
+        }
+    }
+    onMouseEnter() {
+        this.interacting = true;
+    }
+    onMouseLeave() {
+        this.interacting = this.el.matches(':focus-within');
+    }
+    onFocusIn() {
+        this.interacting = true;
+    }
+    onFocusOut() {
+        this.interacting = this.el.matches(':hover');
+    }
+    goTo(next) {
+        const target = Math.min(Math.max(1, next), this.pageCount);
+        if (target === this.page)
+            return;
+        this.currentPage = target;
+        this.bsPageChange.emit(target);
+    }
+    /** Shows only the current page's slides and labels each slide. */
+    applySlides() {
+        const slides = this.slides;
+        const start = (this.page - 1) * this.perView;
+        slides.forEach((slide, i) => {
+            slide.hidden = i < start || i >= start + this.perView;
+            if (!slide.hasAttribute('role'))
+                slide.setAttribute('role', 'group');
+            if (!slide.hasAttribute('aria-roledescription'))
+                slide.setAttribute('aria-roledescription', 'slide');
+            if (!slide.hasAttribute('aria-label'))
+                slide.setAttribute('aria-label', `${i + 1} of ${slides.length}`);
+        });
+    }
+    onSlotChange = () => {
+        this.slideCount = this.slides.length;
+    };
+    onTogglePause = () => {
+        this.paused = !this.paused;
+        this.bsPauseChange.emit(this.paused);
+    };
+    renderPause() {
+        if (!this.autoplay)
+            return null;
+        return (h("bs-button", { part: "pause", variant: "neutral", size: "md", onClick: this.onTogglePause }, this.paused ? h(PlayIcon, null) : h(PauseIcon, null), this.paused ? this.playLabel : this.pauseLabel));
+    }
+    renderDotsTracker() {
+        const page = this.page;
+        return [
+            h("bs-icon-button", { part: "prev", variant: "subtle", size: "sm", ariaLabel: this.previousLabel, disabled: page <= 1, onClick: () => this.goTo(page - 1) }, h(ChevronLeftIcon, null)),
+            h("div", { part: "dots", class: "bs-carousel__dots", "aria-hidden": "true" }, Array.from({ length: this.pageCount }, (_, i) => (h("span", { part: i + 1 === page ? 'dot current' : 'dot', class: `bs-carousel__dot ${i + 1 === page ? 'bs-carousel__dot--active' : ''}` })))),
+            h("bs-icon-button", { part: "next", variant: "subtle", size: "sm", ariaLabel: this.nextLabel, disabled: page >= this.pageCount, onClick: () => this.goTo(page + 1) }, h(ChevronRightIcon, null)),
+        ];
+    }
+    render() {
+        const showTracker = this.pageCount > 1;
+        // While auto-advance is actually running, slide changes must not be announced (it would
+        // interrupt the user constantly); otherwise announce them politely.
+        const rotating = this.autoplay && !this.paused && !this.interacting;
+        return (h("section", { key: '4d3a0024b4f407a595769bc3dce7270104a0aeb7', part: "carousel", class: "bs-carousel", role: "region", "aria-roledescription": "carousel", "aria-label": this.label, style: { '--bs-carousel-slides-per-view': String(this.perView) } }, h("div", { key: '7160dbff92ce24112a5ebe54f10cfb4034d29750', part: "slides", class: "bs-carousel__slides", "aria-live": rotating ? 'off' : 'polite' }, h("slot", { key: 'fee4505b4a303719c62f9a7b76bea784ef920a20', onSlotchange: this.onSlotChange })), showTracker && (h("div", { key: 'd70a3780f4d9c00c087d931fb4b50401890a2c38', part: "tracker", class: "bs-carousel__tracker" }, this.tracker === 'numbers' ? (h("bs-pagination", { part: "pagination", totalPages: this.pageCount, currentPage: this.page, onBsPageChange: (ev) => {
+                ev.stopPropagation();
+                this.goTo(ev.detail);
+            } })) : (h("div", { class: "bs-carousel__nav" }, this.renderDotsTracker())), this.renderPause()))));
+    }
+    static get is() { return "bs-carousel"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bs-carousel.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bs-carousel.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "tracker": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BsCarouselTracker",
+                    "resolved": "\"dots\" | \"numbers\"",
+                    "references": {
+                        "BsCarouselTracker": {
+                            "location": "local",
+                            "path": "/home/runner/work/eg-brandsync-storybook/eg-brandsync-storybook/packages/wc/src/components/bs-carousel/bs-carousel.tsx",
+                            "id": "src/components/bs-carousel/bs-carousel.tsx::BsCarouselTracker"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Which tracker to show under the slides. `dots` is a compact dot row between previous/next\nbuttons (the dots are an indicator, not buttons); `numbers` is a numbered `bs-pagination`\nwhere each page can be jumped to directly."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "tracker",
+                "defaultValue": "'dots'"
+            },
+            "slidesPerView": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "How many slides are visible at once. The tracker counts pages: `ceil(slides / slidesPerView)`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "slides-per-view",
+                "defaultValue": "3"
+            },
+            "currentPage": {
+                "type": "number",
+                "mutable": true,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The visible page, 1-based (same convention as `bs-pagination`). Mutable so the carousel\nadvances it itself (tracker, previous/next, autoplay). Clamped to the available pages."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "current-page",
+                "defaultValue": "1"
+            },
+            "autoplay": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Auto-advances to the next page every `interval` ms, looping from the last page to the first.\nOff by default. The Pause/Play button is only rendered when this is set. Auto-advance also\nstops while the pointer is over the carousel or focus is inside it, and starts paused for\nusers who prefer reduced motion."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "autoplay",
+                "defaultValue": "false"
+            },
+            "interval": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Milliseconds between auto-advances, when `autoplay` is set."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "interval",
+                "defaultValue": "5000"
+            },
+            "paused": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether auto-advance is paused by the user (the Pause/Play button). Mutable and reflected so\nthe state is visible to CSS and settable from outside. Only meaningful with `autoplay`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "paused",
+                "defaultValue": "false"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible name of the carousel region (e.g. \"Featured articles\")."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label",
+                "defaultValue": "'Carousel'"
+            },
+            "previousLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible name of the previous button (`tracker=\"dots\"`) -- override for localisation."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "previous-label",
+                "defaultValue": "'Previous slide'"
+            },
+            "nextLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible name of the next button (`tracker=\"dots\"`) -- override for localisation."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "next-label",
+                "defaultValue": "'Next slide'"
+            },
+            "pauseLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label of the Pause/Play button while auto-advance is running."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "pause-label",
+                "defaultValue": "'Pause'"
+            },
+            "playLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label of the Pause/Play button while auto-advance is paused."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "play-label",
+                "defaultValue": "'Play'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "slideCount": {},
+            "interacting": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "bsPageChange",
+                "name": "bsPageChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires after the visible page changes via the tracker, previous/next or autoplay, with the\nnew 1-based page."
+                },
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                }
+            }, {
+                "method": "bsPauseChange",
+                "name": "bsPauseChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires when the user toggles the Pause/Play button, with the new `paused` value."
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "currentPage",
+                "methodName": "onCurrentPageChange"
+            }, {
+                "propName": "autoplay",
+                "methodName": "updateTimer"
+            }, {
+                "propName": "paused",
+                "methodName": "updateTimer"
+            }, {
+                "propName": "interval",
+                "methodName": "updateTimer"
+            }, {
+                "propName": "interacting",
+                "methodName": "updateTimer"
+            }, {
+                "propName": "slideCount",
+                "methodName": "updateTimer"
+            }, {
+                "propName": "slidesPerView",
+                "methodName": "updateTimer"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "mouseenter",
+                "method": "onMouseEnter",
+                "target": undefined,
+                "capture": false,
+                "passive": true
+            }, {
+                "name": "mouseleave",
+                "method": "onMouseLeave",
+                "target": undefined,
+                "capture": false,
+                "passive": true
+            }, {
+                "name": "focusin",
+                "method": "onFocusIn",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "focusout",
+                "method": "onFocusOut",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}
+const ChevronLeftIcon = () => (h("svg", { class: "bs-carousel__chevron", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, h("path", { d: "M15 18L9 12L15 6", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })));
+const ChevronRightIcon = () => (h("svg", { class: "bs-carousel__chevron", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, h("path", { d: "M9 18L15 12L9 6", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })));
+const PauseIcon = () => (h("svg", { slot: "icon", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, h("rect", { x: "6", y: "5", width: "4", height: "14", rx: "1", stroke: "currentColor", "stroke-width": "1.5", "stroke-linejoin": "round" }), h("rect", { x: "14", y: "5", width: "4", height: "14", rx: "1", stroke: "currentColor", "stroke-width": "1.5", "stroke-linejoin": "round" })));
+const PlayIcon = () => (h("svg", { slot: "icon", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, h("path", { d: "M7 5L19 12L7 19V5Z", stroke: "currentColor", "stroke-width": "1.5", "stroke-linejoin": "round" })));

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

@@ -0,0 +1,68 @@
+import { html } from "lit";
+import { componentDescription, propDescription } from "../../stories-utils";
+const trackers = ['dots', 'numbers'];
+// Real photos (Unsplash, free-to-use license) -- every ID below was checked to resolve (200,
+// image/jpeg), same approach as bs-card.stories.ts. The Figma frames use a dashed "slot" placeholder
+// that "can be replaced with a card or an image"; this is that image. More slides than photos cycle
+// back through the list.
+const PHOTO_IDS = [
+    'photo-1506744038136-46273834b3fb',
+    'photo-1469474968028-56623f02e42e',
+    'photo-1441974231531-c6227db76b6e',
+    'photo-1501785888041-af3ef285b470',
+    'photo-1470071459604-3b5ec3a7fe05',
+    'photo-1472214103451-9374bd1c798e',
+    'photo-1465146344425-f00d5f5c8f07',
+    'photo-1426604966848-d7adac402bff',
+    'photo-1447752875215-b2761acb3c5d',
+    'photo-1433086966358-54859d0ed716',
+    'photo-1512917774080-9991f1c4c750',
+    'photo-1660496247667-3fb697c396af',
+];
+const slot = (n) => html `
+  <img
+    src="https://images.unsplash.com/${PHOTO_IDS[(n - 1) % PHOTO_IDS.length]}?fm=jpg&q=80&w=640&h=360&fit=crop&auto=format"
+    alt="Landscape photograph ${n}"
+    style="display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--bs-border-radius-100);"
+  />
+`;
+const meta = {
+    title: 'Components/bs-carousel',
+    parameters: { docs: { description: { component: componentDescription('bs-carousel') } } },
+    render: args => html `
+    <bs-carousel
+      tracker=${args.tracker}
+      slides-per-view=${args.slidesPerView}
+      ?autoplay=${args.autoplay}
+      interval=${args.interval}
+      label=${args.label}
+    >
+      ${Array.from({ length: args.slides }, (_, i) => slot(i + 1))}
+    </bs-carousel>
+  `,
+    argTypes: {
+        tracker: { control: { type: 'select' }, options: trackers, description: propDescription('bs-carousel', 'tracker') },
+        slidesPerView: { control: { type: 'number', min: 1 }, description: propDescription('bs-carousel', 'slidesPerView') },
+        slides: { control: { type: 'number', min: 1 }, description: 'Number of slides rendered in the story (not a prop -- the default slot\'s children).' },
+        autoplay: { control: 'boolean', description: propDescription('bs-carousel', 'autoplay') },
+        interval: { control: { type: 'number', min: 250, step: 250 }, description: propDescription('bs-carousel', 'interval') },
+        label: { control: 'text', description: propDescription('bs-carousel', 'label') },
+    },
+    args: { tracker: 'dots', slidesPerView: 3, slides: 12, autoplay: true, interval: 5000, label: 'Carousel' },
+};
+export default meta;
+// Dot tracker, 12 slides / 3 per view = 4 pages (the Figma "Carousel marker" frame).
+export const Default = {};
+// Numbered tracker, 15 slides / 3 per view = 5 pages (the Figma "Carousel Number Tracker" frame).
+export const Numbers = {
+    name: 'Number tracker',
+    args: { tracker: 'numbers', slides: 15 },
+};
+export const NoAutoplay = {
+    name: 'Without autoplay',
+    args: { autoplay: false },
+};
+export const OneSlideAtATime = {
+    name: 'One slide at a time',
+    args: { slidesPerView: 1, slides: 5 },
+};

package/dist/collection/components/bs-chatbot-feedback/bs-chatbot-feedback.css

@@ -41,7 +41,7 @@
   box-sizing: border-box;
   position: absolute;
   top: var(--bs-spacing-100);
-  right: var(--bs-spacing-100);
+  inset-inline-end: var(--bs-spacing-100);
   display: inline-flex;
   align-items: center;
   justify-content: center;

package/dist/collection/components/bs-chatbot-feedback/bs-chatbot-feedback.js

@@ -123,7 +123,7 @@ export class BsChatbotFeedback {
     }
     render() {
         const stars = [1, 2, 3, 4, 5];
-        return (h("div", { key: '6c5056134f1d6447aeda1ae857061c365fdacb4e', class: "bs-chatbot-feedback", role: "region", "aria-label": this.computedHeading() }, h("button", { key: '8d1e595b3a7967845110a98b3760562b074084e1', type: "button", part: "close", class: "bs-chatbot-feedback__close", "aria-label": "Close", onClick: this.onCloseClick }, h(CloseIcon, { key: '751dd5a8131bedb5746be7ff51c44511ebdda6ca' })), h("div", { key: 'e27641222fb536f8d942d7f0b24a1d0d1b35488d', class: "bs-chatbot-feedback__top" }, h("div", { key: 'f5dc2910630a2062bd470ad18fe15cb8fe50337f', class: "bs-chatbot-feedback__text" }, h("p", { key: '9b2302645703362eb21f864504eb223baeee9baa', part: "heading", class: "bs-chatbot-feedback__heading" }, this.computedHeading()), h("p", { key: 'e1d4790ef748ae54b35c3d8044b52c1bca06388f', part: "subtitle", class: "bs-chatbot-feedback__subtitle" }, this.computedSubtitle())), h("div", { key: '8218bd93c344643644a29669a5ec3c0f01d9f07f', class: "bs-chatbot-feedback__stars", role: "radiogroup", "aria-label": "Rating" }, stars.map(value => (h("button", { type: "button", part: "star", class: "bs-chatbot-feedback__star", role: "radio", "aria-checked": (this.rating >= value).toString(), "aria-label": `${value} star${value > 1 ? 's' : ''}`, disabled: this.submitted, onClick: () => this.onStarClick(value) }, h(StarIcon, { filled: this.rating >= value }))))), !this.submitted && (h("div", { key: '66dc2fee80c61f23942b05cf0e6f7d37aba0e51c', class: "bs-chatbot-feedback__field" }, h("label", { key: '907d81ab2873fcb8545a1f6e0211ae4470cd47ea', part: "label", class: "bs-chatbot-feedback__label", htmlFor: "bs-chatbot-feedback-comment" }, "Tell us what you think"), h("textarea", { key: 'fbb611bfe9e9cf8ce26c1f6fd2b5cf6f6fe6ae94', part: "textarea", id: "bs-chatbot-feedback-comment", class: "bs-chatbot-feedback__textarea", placeholder: "e.g.The response was helpful ....", value: this.comment, onInput: this.onCommentInput }))), this.submitted && this.comment && (h("p", { key: 'edd24d5f9ffa0d615af9cf4d61fbc97e8a99e2f5', part: "comment", class: "bs-chatbot-feedback__comment" }, this.comment))), h("div", { key: 'a33f6632072258d658e66826f1a65e6fe15df00d', class: "bs-chatbot-feedback__actions" }, !this.submitted && (h("button", { key: '8fc50735381620c4b93e05d72f2045f3890f6307', type: "button", part: "submit", class: "bs-chatbot-feedback__submit", disabled: this.rating === 0, onClick: this.onSubmitClick }, h(SendIcon, { key: '3fce1f0219ee83a209f0eafa7a427349b6d00d7b' }), "Submit feedback")), h("button", { key: 'f0e4a2cb9115e513506248812ae025772e7b3b2b', type: "button", part: "new-chat", class: `bs-chatbot-feedback__new-chat ${this.submitted ? 'bs-chatbot-feedback__new-chat--primary' : 'bs-chatbot-feedback__new-chat--outlined'}`, onClick: this.onNewChatClick }, h(EditIcon, { key: '18ed5c41bc2fcfff8ea8505d3c893ae7f9fb3a81' }), "Start new chat"))));
+        return (h("div", { key: 'a0b98bb7dad05b9b2a03d56f7c1d56a969b8e9c1', class: "bs-chatbot-feedback", role: "region", "aria-label": this.computedHeading() }, h("button", { key: '2a4aae0fd5ac35bf0d399c6d0a2f9a2c8ab11e08', type: "button", part: "close", class: "bs-chatbot-feedback__close", "aria-label": "Close", onClick: this.onCloseClick }, h(CloseIcon, { key: 'fa79bfca02a4b098d5c1695de4ae149f9aef7296' })), h("div", { key: '2f921033f1797610773778dc078b754cd6ce90a2', class: "bs-chatbot-feedback__top" }, h("div", { key: 'a7e86fca322312a90674b8f3ae7250551a56609b', class: "bs-chatbot-feedback__text" }, h("p", { key: 'eff8c54234588b9e990c48c9aa01d72d1f12e4b8', part: "heading", class: "bs-chatbot-feedback__heading" }, this.computedHeading()), h("p", { key: 'a742285c906efd60feb339484af1a7e310b929fb', part: "subtitle", class: "bs-chatbot-feedback__subtitle" }, this.computedSubtitle())), h("div", { key: '700e4903e909bfe6fec476092a84407c84eea5fa', class: "bs-chatbot-feedback__stars", role: "radiogroup", "aria-label": "Rating" }, stars.map(value => (h("button", { type: "button", part: "star", class: "bs-chatbot-feedback__star", role: "radio", "aria-checked": (this.rating >= value).toString(), "aria-label": `${value} star${value > 1 ? 's' : ''}`, disabled: this.submitted, onClick: () => this.onStarClick(value) }, h(StarIcon, { filled: this.rating >= value }))))), !this.submitted && (h("div", { key: '8a00fa2e36f0206725af72814843cc9197e23eaf', class: "bs-chatbot-feedback__field" }, h("label", { key: '49a347d77ee0670c120141b7d5d1faf52a5ff68c', part: "label", class: "bs-chatbot-feedback__label", htmlFor: "bs-chatbot-feedback-comment" }, "Tell us what you think"), h("textarea", { key: 'dbf93923d2e234d20a12d01d826dfaf0d5a3c567', part: "textarea", id: "bs-chatbot-feedback-comment", class: "bs-chatbot-feedback__textarea", placeholder: "e.g.The response was helpful ....", value: this.comment, onInput: this.onCommentInput }))), this.submitted && this.comment && (h("p", { key: 'ca73192186871074989c44ea80c419d0c0765419', part: "comment", class: "bs-chatbot-feedback__comment" }, this.comment))), h("div", { key: '9a244b833310b3e43bbe46833998591482b0dde7', class: "bs-chatbot-feedback__actions" }, !this.submitted && (h("button", { key: '27f8921c9c57bf5b0c1f0e6d7b9e95203b33622a', type: "button", part: "submit", class: "bs-chatbot-feedback__submit", disabled: this.rating === 0, onClick: this.onSubmitClick }, h(SendIcon, { key: '29a7c5b279b82036b5d066b6946ca529e04ee25e' }), "Submit feedback")), h("button", { key: '64676e0e917e0464cf9cfe84b8fecdcb5db26d50', type: "button", part: "new-chat", class: `bs-chatbot-feedback__new-chat ${this.submitted ? 'bs-chatbot-feedback__new-chat--primary' : 'bs-chatbot-feedback__new-chat--outlined'}`, onClick: this.onNewChatClick }, h(EditIcon, { key: '6756913ca0e15a119123d4f78bb7b6c4edc3fd32' }), "Start new chat"))));
     }
     static get is() { return "bs-chatbot-feedback"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-chatbot-header/bs-chatbot-header.js

@@ -74,7 +74,7 @@ export class BsChatbotHeader {
         this.bsClose.emit();
     };
     render() {
-        return (h("div", { key: '6c7b3f85022255ed23112784225bfa73d3a895dc', class: "bs-chatbot-header", role: "banner", "aria-label": this.heading }, h("div", { key: 'c1352cfd77ffa0086524169f70f539224efdfece', part: "logo", class: "bs-chatbot-header__logo", role: "img", "aria-label": this.heading, innerHTML: GENIE_LOGO_SVG }), h("div", { key: '0fc7a712371d9376cf27255bc8673e3534958f90', class: "bs-chatbot-header__actions" }, h("span", { key: 'ec7e2263549ceadea2cab8d525e79536498c8638', class: "bs-chatbot-header__tooltip-wrapper" }, h("button", { key: 'e18b8a1479e39ac7ffb9296d6937a0ae43ed8085', type: "button", part: "new-chat", class: "bs-chatbot-header__button", "aria-label": "New chat", onClick: this.onNewChatClick }, h("slot", { key: 'b4d2cbc7178fedb8fd913a78d553ff8dd7434629', name: "new-chat-icon" }, h(NewChatIcon, { key: 'b08f81e176c9bd375149953c16ac9015abb45e82' }))), h("bs-tooltip", { key: 'f9ce231519487ecef288ba4cfbb9be6f0c365d13', class: "bs-chatbot-header__tooltip", placement: "top", "aria-hidden": "true" }, "New chat")), h("span", { key: '518d7a9e5b706032c2bcd8b07ba233149d0b91c2', class: "bs-chatbot-header__tooltip-wrapper" }, h("button", { key: '0fe038dd159d5b789c068e8b5897bb7d4ecce13f', type: "button", part: "history", class: "bs-chatbot-header__button", "aria-label": "History", onClick: this.onHistoryClick }, h("slot", { key: '08eafbec56e26a5b1ee031760fe5cb536f8e2dfb', name: "history-icon" }, h(HistoryIcon, { key: 'c7146fda0171aad403c60e85487422f9435ecb5b' }))), h("bs-tooltip", { key: '75472a421f6e7deae9251f8ba8154ed1e27d7561', class: "bs-chatbot-header__tooltip", placement: "top", "aria-hidden": "true" }, "History")), h("span", { key: '80205eed7c1859d9294169340eb32675093cc3b6', class: "bs-chatbot-header__tooltip-wrapper" }, h("button", { key: '50f7bc159d86e96402f1dfcd669d9cb0db47d5db', type: "button", part: "expand", class: "bs-chatbot-header__button", "aria-label": this.expanded ? 'Collapse' : 'Expand', "aria-pressed": this.expanded ? 'true' : 'false', onClick: this.onExpandClick }, h("slot", { key: 'ec985a221f8ad106d9e166fe41b61d12bb76ed1c', name: "expand-icon" }, h(ExpandIcon, { key: '8c2115fda94eb2751fb1d578790217b7791329a4' }))), h("bs-tooltip", { key: 'd81aac0eeab0c95e4255bb996acdfce822e8264d', class: "bs-chatbot-header__tooltip", placement: "top", "aria-hidden": "true" }, this.expanded ? 'Collapse' : 'Expand')), h("span", { key: 'c7400a3de2bf5f094dd54bf1308355d0e0f762a8', class: "bs-chatbot-header__tooltip-wrapper" }, h("button", { key: 'b6b06b62243f7e1058b1f09426e4159fe185c1ad', type: "button", part: "close", class: "bs-chatbot-header__button", "aria-label": "Close", onClick: this.onCloseClick }, h("slot", { key: '407db5c670302391b0196716de157b6cdaeb029f', name: "close-icon" }, h(CloseIcon, { key: '2593ea028a266cb7a9cc55ead8d1888cb491cf05' }))), h("bs-tooltip", { key: 'b230b5107c88e56f4e695f2d8b065208affe3fd2', class: "bs-chatbot-header__tooltip", placement: "top", "aria-hidden": "true" }, "Close")))));
+        return (h("div", { key: 'ace9458a7d7a57dd371274deceb493714fc953e2', class: "bs-chatbot-header", role: "banner", "aria-label": this.heading }, h("div", { key: 'a4b4b0c3df647f978f5d473f050d87d6d88fb417', part: "logo", class: "bs-chatbot-header__logo", role: "img", "aria-label": this.heading, innerHTML: GENIE_LOGO_SVG }), h("div", { key: '94ea222a987e644f60d5c1e7f8c3e6f90100dcbf', class: "bs-chatbot-header__actions" }, h("span", { key: '411727c2c8274381cf41a08d9fe99150ff7ce4f7', class: "bs-chatbot-header__tooltip-wrapper" }, h("button", { key: '3fa054ae17e01d61a27c01f59798cfe8dc451e76', type: "button", part: "new-chat", class: "bs-chatbot-header__button", "aria-label": "New chat", onClick: this.onNewChatClick }, h("slot", { key: '4151abddb9737773b8d7c30715e3a226752bc4d7', name: "new-chat-icon" }, h(NewChatIcon, { key: '8c626ad045ad9e501e9d68f42b6811170ef780e9' }))), h("bs-tooltip", { key: 'cf7e1370c68f7ee2480970b628b0f43b5c31e7c2', class: "bs-chatbot-header__tooltip", placement: "top", "aria-hidden": "true" }, "New chat")), h("span", { key: '50de92e37c966442cc8785dd7294a2769aca4cca', class: "bs-chatbot-header__tooltip-wrapper" }, h("button", { key: '37fd0763df000a5a98eb0ce99c3808c4307b3ea6', type: "button", part: "history", class: "bs-chatbot-header__button", "aria-label": "History", onClick: this.onHistoryClick }, h("slot", { key: 'a8751f3d787f24225b8cdd2e12a92e51f46ff759', name: "history-icon" }, h(HistoryIcon, { key: '426227289c53d661ae1c79f33dfca5dc68dfb701' }))), h("bs-tooltip", { key: 'f22b93a3e898b6dad241de7d6d1a1def1e2fd127', class: "bs-chatbot-header__tooltip", placement: "top", "aria-hidden": "true" }, "History")), h("span", { key: 'b7671f7ccc56d59a41a2bbb648ec38c3ae6da071', class: "bs-chatbot-header__tooltip-wrapper" }, h("button", { key: '94b47506fddd5b21b38f6dc63d2e2da76f5bce46', type: "button", part: "expand", class: "bs-chatbot-header__button", "aria-label": this.expanded ? 'Collapse' : 'Expand', "aria-pressed": this.expanded ? 'true' : 'false', onClick: this.onExpandClick }, h("slot", { key: '033e0cf8cab7a62fc562fd9b3a6b39d0a6f45bc1', name: "expand-icon" }, h(ExpandIcon, { key: 'a05f02a22f4faa22704c66ce6705377878bbc63b' }))), h("bs-tooltip", { key: 'b1170cfecb1e28f18aae64053bf053b35c8456dd', class: "bs-chatbot-header__tooltip", placement: "top", "aria-hidden": "true" }, this.expanded ? 'Collapse' : 'Expand')), h("span", { key: '2ec5e1c8e875bf390680dc003325456f8c7304fd', class: "bs-chatbot-header__tooltip-wrapper" }, h("button", { key: '45c7865b57760e8acfb375ab4fab9d76db97d01a', type: "button", part: "close", class: "bs-chatbot-header__button", "aria-label": "Close", onClick: this.onCloseClick }, h("slot", { key: 'dc00d32a101d05c3468f37de7a4d06d5f9f36718', name: "close-icon" }, h(CloseIcon, { key: '63dc3094f4b9a637ebcd68541efc562d091f1e96' }))), h("bs-tooltip", { key: 'f735fcc2cc2a24a9bb58a9f5b479c369b11133c6', class: "bs-chatbot-header__tooltip", placement: "top", "aria-hidden": "true" }, "Close")))));
     }
     static get is() { return "bs-chatbot-header"; }
     static get encapsulation() { return "shadow"; }