@brandsync/wc 1.9.0 → 1.11.0

package/dist/collection/components/bs-onboarding-checklist/bs-onboarding-checklist.stories.js

@@ -0,0 +1,92 @@
+import { html } from "lit";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { componentDescription, propDescription } from "../../stories-utils";
+const STEPS = [
+    { id: 'company', label: 'Add company details', done: true },
+    { id: 'team', label: 'Invite your team', done: true },
+    { id: 'customers', label: 'Import customers', done: true },
+    {
+        id: 'bank',
+        label: 'Connect your bank',
+        description: 'Import transactions automatically so payments are matched to invoices.',
+        estimate: 'About 3 min',
+        actionLabel: 'Connect bank',
+    },
+    { id: 'template', label: 'Choose an invoice template' },
+    { id: 'invoice', label: 'Send your first invoice' },
+];
+const ALL_DONE = STEPS.map(s => ({ ...s, done: true }));
+const meta = {
+    title: 'Components/bs-onboarding-checklist',
+    parameters: { docs: { description: { component: componentDescription('bs-onboarding-checklist') } } },
+    decorators: [story => html `<div style="padding: 16px; background: var(--bs-color-neutral-container);">${story()}</div>`],
+    render: args => html `
+    <bs-onboarding-checklist
+      type=${args.type}
+      launcher-layout=${args.launcherLayout}
+      heading=${ifDefined(args.heading || undefined)}
+      description=${ifDefined(args.description || undefined)}
+      ?closable=${args.closable}
+      .steps=${args.type === 'completion' ? ALL_DONE : STEPS}
+      @bsStepAction=${(ev) => console.log('bsStepAction', ev.detail)}
+      @bsStepSkip=${(ev) => console.log('bsStepSkip', ev.detail)}
+      @bsClose=${() => console.log('bsClose')}
+      @bsOpen=${() => console.log('bsOpen')}
+      @bsDone=${() => console.log('bsDone')}
+      @bsHide=${() => console.log('bsHide')}
+    ></bs-onboarding-checklist>
+  `,
+    argTypes: {
+        type: { control: 'inline-radio', options: ['panel', 'dashboard', 'launcher', 'completion'], description: propDescription('bs-onboarding-checklist', 'type') },
+        launcherLayout: { control: 'inline-radio', options: ['icon', 'ring', 'inline'], description: propDescription('bs-onboarding-checklist', 'launcherLayout') },
+        heading: { control: 'text', description: propDescription('bs-onboarding-checklist', 'heading') },
+        description: { control: 'text', description: propDescription('bs-onboarding-checklist', 'description') },
+        closable: { control: 'boolean', description: propDescription('bs-onboarding-checklist', 'closable') },
+    },
+    args: {
+        type: 'panel',
+        launcherLayout: 'icon',
+        heading: '',
+        description: 'Set up Nordlys Handel AS in about 15 minutes. You can come back to this at any time.',
+        closable: true,
+    },
+};
+export default meta;
+export const Panel = {};
+export const Dashboard = {
+    args: { type: 'dashboard', heading: '', description: '3 of 6 steps done. The rest takes about 8 minutes.' },
+};
+export const LauncherIcon = {
+    name: 'Launcher (icon with description)',
+    args: { type: 'launcher', launcherLayout: 'icon' },
+};
+export const LauncherRing = {
+    name: 'Launcher (circular progress)',
+    args: { type: 'launcher', launcherLayout: 'ring' },
+};
+export const LauncherInline = {
+    name: 'Launcher (inline)',
+    args: { type: 'launcher', launcherLayout: 'inline' },
+};
+export const Completion = {
+    args: { type: 'completion', description: 'Nordlys Handel AS is ready to send invoices and match payments.' },
+};
+// Your app owns the steps: mark one done and the current step moves on, the bar fills.
+export const Interactive = {
+    render: () => html `
+    <bs-onboarding-checklist
+      closable
+      .steps=${STEPS}
+      @bsStepAction=${(ev) => {
+        const el = ev.currentTarget;
+        el.steps = el.steps.map(s => (s.id === ev.detail.id ? { ...s, done: true } : s));
+    }}
+      @bsStepSkip=${(ev) => {
+        const el = ev.currentTarget;
+        // "Skip for now" moves the step to the end of the list instead of marking it done.
+        const skipped = el.steps.find(s => s.id === ev.detail.id);
+        el.steps = [...el.steps.filter(s => s.id !== ev.detail.id), { ...skipped, description: undefined, estimate: undefined, actionLabel: undefined }];
+    }}
+    ></bs-onboarding-checklist>
+  `,
+};

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

@@ -87,7 +87,7 @@ export class BsPagination {
     }
     render() {
         const pageList = this.getPageList();
-        return (h("nav", { key: 'f5f1e20a72ffc81ca14b05ad735e3ca714069ed3', "aria-label": "Pagination" }, h("ul", { key: '416ef86fe6aca589869e529d1248cbca7ad254ac', part: "list", class: "bs-pagination__list" }, h("li", { key: 'c550eada1eb765db7734e0971f4a2222ad1488e8', part: "item", class: "bs-pagination__item" }, h("button", { key: '8a88280dc813abe71ba3315048ca8931ef2b20cf', part: "prev", type: "button", class: "bs-pagination__control", "aria-label": this.previousLabel, disabled: this.currentPage <= 1, onClick: () => this.goToPage(this.currentPage - 1) }, h(ChevronLeftIcon, { key: 'ea30181c70ff4c7c39852cb978b4cc9307bfa736' }))), pageList.map((item, index) => item === 'ellipsis' ? (h("li", { part: "item", class: "bs-pagination__item", key: `ellipsis-${index}` }, h("span", { part: "ellipsis", class: "bs-pagination__ellipsis", "aria-hidden": "true" }, h(EllipsisIcon, null)))) : (h("li", { part: "item", class: "bs-pagination__item", key: item }, h("button", { part: item === this.currentPage ? 'page current' : 'page', type: "button", class: `bs-pagination__control bs-pagination__page ${item === this.currentPage ? 'bs-pagination__page--current' : ''}`, "aria-label": `Go to page ${item}`, "aria-current": item === this.currentPage ? 'page' : undefined, onClick: () => this.goToPage(item) }, item)))), h("li", { key: '1c587333c1795e4b189c793b442c03e75937ab11', part: "item", class: "bs-pagination__item" }, h("button", { key: '707144112eb882431b9d6ad43f7557be32d08e78', part: "next", type: "button", class: "bs-pagination__control", "aria-label": this.nextLabel, disabled: this.currentPage >= this.safeTotalPages, onClick: () => this.goToPage(this.currentPage + 1) }, h(ChevronRightIcon, { key: '5c94c76cbda7938da625f326ea2ef7ddadce3929' }))))));
+        return (h("nav", { key: 'd0fec9b9d17ddc5b338ed77c4e97a7006d7e665e', "aria-label": "Pagination" }, h("ul", { key: '82fff342952ea13a84f97e549039edd18a8b6626', part: "list", class: "bs-pagination__list" }, h("li", { key: '124c33b04fe0dcdef83f8ff9c4d539518c7557d7', part: "item", class: "bs-pagination__item" }, h("button", { key: '4d702cb7cdeb7df86c4844b313943cf8d8c607d5', part: "prev", type: "button", class: "bs-pagination__control", "aria-label": this.previousLabel, disabled: this.currentPage <= 1, onClick: () => this.goToPage(this.currentPage - 1) }, h(ChevronLeftIcon, { key: '6c747a6bcdf0a9a4a2dfb8260ff85ad95eb1acdf' }))), pageList.map((item, index) => item === 'ellipsis' ? (h("li", { part: "item", class: "bs-pagination__item", key: `ellipsis-${index}` }, h("span", { part: "ellipsis", class: "bs-pagination__ellipsis", "aria-hidden": "true" }, h(EllipsisIcon, null)))) : (h("li", { part: "item", class: "bs-pagination__item", key: item }, h("button", { part: item === this.currentPage ? 'page current' : 'page', type: "button", class: `bs-pagination__control bs-pagination__page ${item === this.currentPage ? 'bs-pagination__page--current' : ''}`, "aria-label": `Go to page ${item}`, "aria-current": item === this.currentPage ? 'page' : undefined, onClick: () => this.goToPage(item) }, item)))), h("li", { key: '987698c1f798053e6f9e7ac63373c04e68868d0f', part: "item", class: "bs-pagination__item" }, h("button", { key: '95220bdb47507697a0742dbfad4fa0d37d7b4d55', part: "next", type: "button", class: "bs-pagination__control", "aria-label": this.nextLabel, disabled: this.currentPage >= this.safeTotalPages, onClick: () => this.goToPage(this.currentPage + 1) }, h(ChevronRightIcon, { key: 'd6bdac44109e11fa11c2f7d32ed732c5364e6513' }))))));
     }
     static get is() { return "bs-pagination"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-product-tour/bs-product-tour.cmp.test.js

@@ -0,0 +1,116 @@
+import { render, h, describe, it, expect } from "@stencil/vitest";
+const sr = (root) => root.shadowRoot;
+const part = (root, p) => sr(root).querySelector(`[part~="${p}"]`);
+describe('bs-product-tour', () => {
+    it('defaults to a 400px welcome card with an art tile, heading, paragraph and Later/Start', async () => {
+        const { root } = await render(h("bs-product-tour", { heading: "Welcome", description: "Take a quick tour." }));
+        expect(root).toEqualAttribute('type', 'welcome');
+        expect(part(root, 'container').getBoundingClientRect().width).toBe(400);
+        expect(part(root, 'art')).not.toBeNull();
+        expect(part(root, 'heading').textContent).toBe('Welcome');
+        expect(part(root, 'description').textContent).toBe('Take a quick tour.');
+        expect(part(root, 'secondary').textContent).toBe('Later');
+        expect(part(root, 'primary').textContent).toBe('Start');
+        expect(part(root, 'arrow')).toBeNull();
+    });
+    it('success uses the success tile and a single Done button', async () => {
+        const { root } = await render(h("bs-product-tour", { type: "success", heading: "All set" }));
+        expect(part(root, 'art').intent).toBe('success');
+        expect(part(root, 'secondary')).toBeNull();
+        expect(part(root, 'primary').textContent).toBe('Done');
+    });
+    it('welcome uses the brand tile', async () => {
+        const { root } = await render(h("bs-product-tour", null));
+        expect(part(root, 'art').intent).toBe('brand');
+    });
+    it('lets you replace the glyph via the icon slot', async () => {
+        const { root } = await render(h("bs-product-tour", null, h("svg", { slot: "icon", id: "mine", viewBox: "0 0 24 24" }, h("path", { d: "M0 0" }))));
+        const slot = sr(root).querySelector('slot[name="icon"]');
+        expect(slot.assignedElements().map(e => e.id)).toEqual(['mine']);
+    });
+    it('labels and hiding: custom labels, and an empty label hides the button', async () => {
+        const { root } = await render(h("bs-product-tour", { primaryLabel: "Let's go", secondaryLabel: "" }));
+        expect(part(root, 'primary').textContent).toBe("Let's go");
+        expect(part(root, 'secondary')).toBeNull();
+    });
+    it('emits bsPrimary / bsSecondary', async () => {
+        const { root, waitForChanges } = await render(h("bs-product-tour", null));
+        const events = [];
+        root.addEventListener('bsPrimary', () => events.push('primary'));
+        root.addEventListener('bsSecondary', () => events.push('secondary'));
+        part(root, 'secondary').click();
+        part(root, 'primary').click();
+        await waitForChanges();
+        expect(events).toEqual(['secondary', 'primary']);
+    });
+    describe('pointer', () => {
+        it('is a 320px card with Back/Next, a progress label and an arrow', async () => {
+            const { root } = await render(h("bs-product-tour", { type: "pointer", heading: "Filters", description: "Narrow it.", step: 1, total: 3 }));
+            expect(part(root, 'container').getBoundingClientRect().width).toBe(320);
+            expect(part(root, 'progress').textContent).toBe('1 of 3');
+            expect(part(root, 'secondary').textContent).toBe('Back');
+            expect(part(root, 'primary').textContent).toBe('Next');
+            expect(part(root, 'arrow')).not.toBeNull();
+            expect(part(root, 'art')).toBeNull();
+        });
+        it('hides the progress label without a total, and customises its template', async () => {
+            const a = await render(h("bs-product-tour", { type: "pointer" }));
+            expect(part(a.root, 'progress')).toBeNull();
+            const b = await render(h("bs-product-tour", { type: "pointer", step: 2, total: 5, progressLabel: "Step {step}/{total}" }));
+            expect(part(b.root, 'progress').textContent).toBe('Step 2/5');
+        });
+        it('shows the close button only when closable, and emits bsClose', async () => {
+            const a = await render(h("bs-product-tour", { type: "pointer" }));
+            expect(part(a.root, 'close')).toBeNull();
+            const { root, waitForChanges } = await render(h("bs-product-tour", { type: "pointer", closable: true }));
+            let closed = 0;
+            root.addEventListener('bsClose', () => closed++);
+            part(root, 'close').click();
+            await waitForChanges();
+            expect(closed).toBe(1);
+        });
+        it('is at least 140px tall (Figma)', async () => {
+            const { root } = await render(h("bs-product-tour", { type: "pointer", heading: "H", description: "P" }));
+            expect(part(root, 'container').getBoundingClientRect().height).toBeGreaterThanOrEqual(140);
+        });
+        // The arrow sits outside the card, on the side named first in `direction`.
+        it.each([
+            ['top', 'above'],
+            ['top-left', 'above'],
+            ['top-right', 'above'],
+            ['bottom', 'below'],
+            ['bottom-left', 'below'],
+            ['bottom-right', 'below'],
+            ['left', 'before'],
+            ['left-top', 'before'],
+            ['left-bottom', 'before'],
+            ['right', 'after'],
+            ['right-top', 'after'],
+            ['right-bottom', 'after'],
+        ])('direction %s puts the arrow %s the card', async (direction, where) => {
+            const { root } = await render(h("div", { style: { padding: '40px' } }, h("bs-product-tour", { type: "pointer", direction: direction, heading: "H", description: "P" })));
+            const tour = root.querySelector('bs-product-tour');
+            const card = part(tour, 'container').getBoundingClientRect();
+            const arrow = part(tour, 'arrow').getBoundingClientRect();
+            const mid = (a, b) => (a + b) / 2;
+            if (where === 'above')
+                expect(arrow.bottom).toBeLessThanOrEqual(card.top + 1.5);
+            if (where === 'below')
+                expect(arrow.top).toBeGreaterThanOrEqual(card.bottom - 1.5);
+            if (where === 'before')
+                expect(arrow.right).toBeLessThanOrEqual(card.left + 1.5);
+            if (where === 'after')
+                expect(arrow.left).toBeGreaterThanOrEqual(card.right - 1.5);
+            // Position along the edge: centred, or toward the named end.
+            const horizontalEdge = where === 'above' || where === 'below';
+            const along = horizontalEdge ? mid(arrow.left, arrow.right) - card.left : mid(arrow.top, arrow.bottom) - card.top;
+            const length = horizontalEdge ? card.width : card.height;
+            if (!direction.includes('-'))
+                expect(Math.abs(along - length / 2)).toBeLessThan(2);
+            else if (direction.endsWith('left') || direction.endsWith('top'))
+                expect(along).toBeLessThan(length / 3);
+            else
+                expect(along).toBeGreaterThan((length * 2) / 3);
+        });
+    });
+});

package/dist/collection/components/bs-product-tour/bs-product-tour.css

@@ -0,0 +1,265 @@
+/**
+ * @prop --bs-product-tour-bg: Card background. Aliased to --bs-paper-bg-base (the `bs-card` base surface).
+ * @prop --bs-product-tour-radius: Card corner radius. 12px, --bs-border-radius-150 (Figma).
+ * @prop --bs-product-tour-width: Card width. Set per `type`: 400px (`welcome`/`success`), 320px (`pointer`).
+ * @prop --bs-product-tour-padding: Card padding. Set per `type`: --bs-spacing-300 (`welcome`/`success`), --bs-spacing-200 (`pointer`).
+ * @prop --bs-product-tour-gap: Gap between the card's rows. Set per `type`: --bs-spacing-150 / --bs-spacing-100.
+ * @prop --bs-product-tour-shadow-color: Drop-shadow colour. Set per `type`: --bs-elevation-medium (cards), --bs-elevation-high (pointer).
+ * @prop --bs-product-tour-color: Heading colour. Aliased to --bs-text-default.
+ * @prop --bs-product-tour-color-secondary: Description and progress colour. Aliased to --bs-text-secondary.
+ * @prop --bs-product-tour-art-size: Width/height of the art tile. 64px (Figma).
+ * @prop --bs-product-tour-art-icon-size: Size of the glyph in the art tile. 28px (Figma).
+ * @prop --bs-product-tour-arrow-width: Length of the arrow's base. 22px (Figma).
+ * @prop --bs-product-tour-arrow-height: How far the arrow sticks out of the card. 16px (Figma).
+ * @prop --bs-product-tour-arrow-offset: Distance from the card's corner to the arrow's centre for the corner/edge directions (`top-left`, `left-bottom`, ...). 36px.
+ */
+:host {
+  display: inline-block;
+
+  --bs-product-tour-bg: var(--bs-paper-bg-base);
+  --bs-product-tour-radius: var(--bs-border-radius-150);
+  --bs-product-tour-color: var(--bs-text-default);
+  --bs-product-tour-color-secondary: var(--bs-text-secondary);
+  --bs-product-tour-art-size: 64px;
+  --bs-product-tour-art-icon-size: 28px;
+  --bs-product-tour-arrow-width: 22px;
+  --bs-product-tour-arrow-height: 16px;
+  --bs-product-tour-arrow-offset: 36px;
+
+  /* type: welcome (default) */
+  --bs-product-tour-width: 400px;
+  --bs-product-tour-padding: var(--bs-spacing-300);
+  --bs-product-tour-gap: var(--bs-spacing-150);
+  --bs-product-tour-shadow-color: var(--bs-elevation-medium);
+}
+
+:host([type='pointer']) {
+  --bs-product-tour-width: 320px;
+  --bs-product-tour-padding: var(--bs-spacing-200);
+  --bs-product-tour-gap: var(--bs-spacing-100);
+  --bs-product-tour-shadow-color: var(--bs-elevation-high);
+}
+
+.bs-product-tour {
+  position: relative;
+  width: var(--bs-product-tour-width);
+  max-width: 100%;
+  color: var(--bs-product-tour-color);
+  font-family: inherit;
+}
+
+/* bs-card supplies the surface; this only sets how it looks here. */
+.bs-product-tour,
+.bs-product-tour__card {
+  --bs-card-bg: var(--bs-product-tour-bg);
+  --bs-card-radius: var(--bs-product-tour-radius);
+  --bs-card-padding: var(--bs-product-tour-padding);
+}
+
+.bs-product-tour__body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--bs-product-tour-gap);
+}
+
+.bs-product-tour p {
+  margin: 0;
+}
+
+/* --- welcome / success --------------------------------------------------------------------- */
+.bs-product-tour--card {
+  --bs-card-shadow: 0 4px 8px var(--bs-product-tour-shadow-color);
+}
+
+.bs-product-tour--card .bs-product-tour__body {
+  align-items: center;
+  text-align: center;
+}
+
+.bs-product-tour__art {
+  --bs-icon-tile-size: var(--bs-product-tour-art-size);
+  --bs-icon-tile-icon-size: var(--bs-product-tour-art-icon-size);
+}
+
+.bs-product-tour__glyph,
+::slotted([slot='icon']) {
+  width: var(--bs-product-tour-art-icon-size);
+  height: var(--bs-product-tour-art-icon-size);
+}
+
+.bs-product-tour--card .bs-product-tour__heading {
+  align-self: stretch;
+  font-size: var(--bs-font-size-2xl);
+  font-weight: var(--bs-font-weight-bold);
+  line-height: 32px;
+}
+
+.bs-product-tour--card .bs-product-tour__description {
+  align-self: stretch;
+  color: var(--bs-product-tour-color-secondary);
+  font-size: var(--bs-font-size-sm);
+  line-height: 20px;
+}
+
+.bs-product-tour--card .bs-product-tour__actions {
+  padding-top: var(--bs-spacing-100);
+}
+
+.bs-product-tour--card .bs-product-tour__actions bs-button {
+  --bs-button-height-md: var(--bs-spacing-550);
+  min-width: 94px;
+}
+
+/* --- pointer ------------------------------------------------------------------------------- */
+/* The pointer is a wrapper, not the card itself: a filter shadow on the wrapper gives the card and
+   its arrow one shared silhouette (bs-card's own box-shadow is turned off). */
+.bs-product-tour--pointer {
+  filter: drop-shadow(0 4px 4px var(--bs-product-tour-shadow-color));
+}
+
+.bs-product-tour__card {
+  display: block;
+  --bs-card-shadow: none;
+}
+
+.bs-product-tour--pointer .bs-product-tour__body {
+  /* Figma: the pointer is 140px tall; this keeps the footer pinned to the bottom. */
+  min-height: calc(140px - var(--bs-product-tour-padding) * 2);
+}
+
+.bs-product-tour--pointer .bs-product-tour__text {
+  display: flex;
+  flex-direction: column;
+  gap: var(--bs-spacing-25);
+  /* leave room for the close button */
+  padding-inline-end: var(--bs-spacing-500);
+}
+
+.bs-product-tour--pointer .bs-product-tour__heading {
+  font-size: var(--bs-font-size-md);
+  font-weight: var(--bs-font-weight-semibold);
+  line-height: 24px;
+}
+
+.bs-product-tour--pointer .bs-product-tour__description {
+  color: var(--bs-product-tour-color-secondary);
+  font-size: var(--bs-font-size-sm);
+  line-height: 20px;
+}
+
+.bs-product-tour__close {
+  position: absolute;
+  top: 3px;
+  inset-inline-end: 3px;
+}
+
+.bs-product-tour__close svg {
+  width: 20px;
+  height: 20px;
+}
+
+.bs-product-tour__footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--bs-spacing-100);
+  margin-top: auto;
+  padding-top: 4px;
+}
+
+.bs-product-tour__progress {
+  color: var(--bs-product-tour-color-secondary);
+  font-size: var(--bs-font-size-xs);
+  line-height: 16px;
+  white-space: nowrap;
+}
+
+/* Figma: the pointer's buttons are 32px high (bs-button's sm is 40px). */
+.bs-product-tour--pointer .bs-product-tour__actions {
+  display: flex;
+  align-items: center;
+  gap: var(--bs-spacing-100);
+}
+
+.bs-product-tour--pointer .bs-product-tour__actions bs-button {
+  --bs-button-height-sm: var(--bs-spacing-400);
+}
+
+.bs-product-tour--card .bs-product-tour__actions {
+  display: flex;
+  align-items: center;
+  gap: var(--bs-spacing-100);
+}
+
+/* --- arrow --------------------------------------------------------------------------------- */
+.bs-product-tour__arrow {
+  position: absolute;
+  background: var(--bs-product-tour-bg);
+  pointer-events: none;
+}
+
+/* Top/bottom edges: the arrow is wide and short. 1px of overlap hides the seam with the card. */
+:host([direction^='top']) .bs-product-tour__arrow,
+:host([direction^='bottom']) .bs-product-tour__arrow {
+  width: var(--bs-product-tour-arrow-width);
+  height: calc(var(--bs-product-tour-arrow-height) + 1px);
+}
+
+:host([direction^='top']) .bs-product-tour__arrow {
+  bottom: calc(100% - 1px);
+  clip-path: polygon(50% 0, 100% 100%, 0 100%);
+}
+
+:host([direction^='bottom']) .bs-product-tour__arrow {
+  top: calc(100% - 1px);
+  clip-path: polygon(0 0, 100% 0, 50% 100%);
+}
+
+:host([direction='top']) .bs-product-tour__arrow,
+:host([direction='bottom']) .bs-product-tour__arrow {
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+:host([direction$='-left']) .bs-product-tour__arrow {
+  left: var(--bs-product-tour-arrow-offset);
+  transform: translateX(-50%);
+}
+
+:host([direction$='-right']) .bs-product-tour__arrow {
+  right: var(--bs-product-tour-arrow-offset);
+  transform: translateX(50%);
+}
+
+/* Left/right edges: the arrow is tall and narrow. */
+:host([direction^='left']) .bs-product-tour__arrow,
+:host([direction^='right']) .bs-product-tour__arrow {
+  width: calc(var(--bs-product-tour-arrow-height) + 1px);
+  height: var(--bs-product-tour-arrow-width);
+}
+
+:host([direction^='left']) .bs-product-tour__arrow {
+  right: calc(100% - 1px);
+  clip-path: polygon(0 50%, 100% 0, 100% 100%);
+}
+
+:host([direction^='right']) .bs-product-tour__arrow {
+  left: calc(100% - 1px);
+  clip-path: polygon(0 0, 100% 50%, 0 100%);
+}
+
+:host([direction='left']) .bs-product-tour__arrow,
+:host([direction='right']) .bs-product-tour__arrow {
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+:host([direction$='-top']) .bs-product-tour__arrow {
+  top: var(--bs-product-tour-arrow-offset);
+  transform: translateY(-50%);
+}
+
+:host([direction$='-bottom']) .bs-product-tour__arrow {
+  bottom: var(--bs-product-tour-arrow-offset);
+  transform: translateY(50%);
+}