@brandsync/wc 0.1.0 → 1.1.0

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

@@ -105,7 +105,7 @@ export class BsLogo {
                     "references": {
                         "BsLogoVariant": {
                             "location": "local",
-                            "path": "/Users/vivka/brandsync-web-components/src/components/bs-logo/bs-logo.tsx",
+                            "path": "/home/runner/work/Brandsync-web-components/Brandsync-web-components/packages/wc/src/components/bs-logo/bs-logo.tsx",
                             "id": "src/components/bs-logo/bs-logo.tsx::BsLogoVariant"
                         }
                     }
@@ -131,7 +131,7 @@ export class BsLogo {
                     "references": {
                         "BsLogoBackground": {
                             "location": "local",
-                            "path": "/Users/vivka/brandsync-web-components/src/components/bs-logo/bs-logo.tsx",
+                            "path": "/home/runner/work/Brandsync-web-components/Brandsync-web-components/packages/wc/src/components/bs-logo/bs-logo.tsx",
                             "id": "src/components/bs-logo/bs-logo.tsx::BsLogoBackground"
                         }
                     }

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

@@ -22,7 +22,7 @@ import { h } from "@stencil/core";
  */
 export class BsMenu {
     render() {
-        return (h("div", { key: 'bc71082acfa568690283c2ec3b63aae4a20324a5', part: "list", class: "bs-menu", role: "menu" }, h("slot", { key: 'febe3b20843441e630d68a215191f2b73b3aab20' })));
+        return (h("div", { key: '23a5c16e982c711bfa9f8e914869601be45812b9', part: "list", class: "bs-menu", role: "menu" }, h("slot", { key: 'a7d9116f56d91721231b3f94e727626c6c221aa8' })));
     }
     static get is() { return "bs-menu"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-menu-item/bs-menu-item.js

@@ -47,7 +47,7 @@ export class BsMenuItem {
         this.bsSelect.emit();
     };
     render() {
-        return (h("button", { key: 'c9334385fe956335f2ed9d55338a2198f16f1712', type: "button", part: "item", role: "menuitem", class: `bs-menu-item ${this.disabled ? 'bs-menu-item--disabled' : ''}`, disabled: this.disabled, "aria-disabled": this.disabled ? 'true' : undefined, onClick: this.onClick }, h("span", { key: 'a00e7ce2d8d632442736d975149a6d7b449779bb', part: "icon", class: `bs-menu-item__icon ${this.hasIcon ? 'bs-menu-item__icon--has-content' : ''}` }, h("slot", { key: '568de93e2c15385c3244cb79cba8b0982d9469b0', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: '85954b9c36d0418af5468a7514ca3e0d2d51619c', part: "label", class: "bs-menu-item__label" }, h("slot", { key: '72d5df4c8c3201418e634ffb28a80b3830ca2a65' }))));
+        return (h("button", { key: 'f328aa848cc8ae0c908640a23834f3fd8d8ffea7', type: "button", part: "item", role: "menuitem", class: `bs-menu-item ${this.disabled ? 'bs-menu-item--disabled' : ''}`, disabled: this.disabled, "aria-disabled": this.disabled ? 'true' : undefined, onClick: this.onClick }, h("span", { key: '75a23a3ee9a9896e2607222b18155651d6ada39f', part: "icon", class: `bs-menu-item__icon ${this.hasIcon ? 'bs-menu-item__icon--has-content' : ''}` }, h("slot", { key: '08d468b52d6913d89f2443e8597a44bfacc4f2ea', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: '148053d9ff48297dfa276ddbf46f57c13675a5c4', part: "label", class: "bs-menu-item__label" }, h("slot", { key: '05d417308229673796e014788f25de2b4c2d4eaf' }))));
     }
     static get is() { return "bs-menu-item"; }
     static get encapsulation() { return "shadow"; }

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: '5c11c5d41a0ea748a6564dd6afe95acd1e1f7233', "aria-label": "Pagination" }, h("ul", { key: 'bbb88ec648d773e31cdfb5afadba74f465510acb', part: "list", class: "bs-pagination__list" }, h("li", { key: '7eb6c6c6b4e4f129d1b0ad09d6ad33bd1e529c39', part: "item", class: "bs-pagination__item" }, h("button", { key: '1b30bbf87077802e5fb70d0b5d5bde9b1556efbe', 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: 'e5f834332744d5caace2ff2da50dc9ea0fad6c51' }))), 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: '5e52c579ff5c2501470af0749f44dddf97bf268c', part: "item", class: "bs-pagination__item" }, h("button", { key: '6ae764d141460b432834dc79be6e094149e6f7c5', 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: 'c4e25fa5b69848ca35b9e907b0f90d0a2d8fbf14' }))))));
+        return (h("nav", { key: '1a60cd70c34f8d1f8f2d3a8aa62f99d4d38ab462', "aria-label": "Pagination" }, h("ul", { key: '42381f91ef2ebff6c4cc1a9c4ffb28a993931c43', part: "list", class: "bs-pagination__list" }, h("li", { key: '655ad21a3198ea47f85d6dbfa09df9fb05d09e4f', part: "item", class: "bs-pagination__item" }, h("button", { key: '8342d94ae7f7164445a09356acee9ce4d0cb6d1b', 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: '8f7b7a32551781a04c5525dedbeeae586453bb7f' }))), 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: '0a7d4a39c332130e865a16d7f3751db44ea777bb', part: "item", class: "bs-pagination__item" }, h("button", { key: 'e3b5276ca79d150bd8fe89f86973a9fb3458c481', 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: 'fe89db6f4c5bbd4fdaa3ee499b448c8603a7f132' }))))));
     }
     static get is() { return "bs-pagination"; }
     static get encapsulation() { return "shadow"; }

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

@@ -51,7 +51,7 @@ export class BsRadio {
         }
     };
     render() {
-        return (h("label", { key: '4c6ce599b279240445e60b89fc909f55e105cc69', class: `bs-radio ${this.disabled ? 'bs-radio--disabled' : ''}` }, h("input", { key: '26ca5de7011a9c0b1d2d61c35e8859ebe5e2041f', class: "bs-radio__input", type: "radio", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, onChange: this.onChange }), h("span", { key: '3cd825f6153e79c6aede28a9ebb9f4d9ee3b2d6e', class: "bs-radio__hit-area" }, h("span", { key: '3a1e5b58a14a6f94770ae9dca5a541ade38efcfc', class: "bs-radio__state-layer" }, h("span", { key: '83391c2364a58a1cb1582fca112abd77886e5b10', part: "circle", class: `bs-radio__circle ${this.checked ? 'bs-radio__circle--selected' : ''}` }, this.checked && h("span", { key: '799e979b2b299f05b535a66604fa7c975fd43456', part: "dot", class: "bs-radio__dot" })))), h("span", { key: '89271b1d0c8460b4fce80a21b3c3fe2029630046', part: "label", class: "bs-radio__label" }, h("slot", { key: 'e5401f3f384330a51e51b7309a459bcb237e9034' }))));
+        return (h("label", { key: '349589d9d20270aedcbd67d528057b9b0c41c486', class: `bs-radio ${this.disabled ? 'bs-radio--disabled' : ''}` }, h("input", { key: '36da81bb4a82a78cd1e49ca2d27b4837e6077bd9', class: "bs-radio__input", type: "radio", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, onChange: this.onChange }), h("span", { key: '1f5e0d0a2c49875b63b70bf1618f1c374d7f5dae', class: "bs-radio__hit-area" }, h("span", { key: '63f4e1e619aa3faca1cda08ad878f23b83836d0c', class: "bs-radio__state-layer" }, h("span", { key: '5487d7782497766e8d3c1261c035214055b4ecf3', part: "circle", class: `bs-radio__circle ${this.checked ? 'bs-radio__circle--selected' : ''}` }, this.checked && h("span", { key: '6a8cd123cf6588c8e18c5841176556bf8f22b1bb', part: "dot", class: "bs-radio__dot" })))), h("span", { key: 'b21075cb92382cbdcb3d11404b5db27ac5823308', part: "label", class: "bs-radio__label" }, h("slot", { key: '8ca2bb29e32c2f0d52832b42643c0efd7cc89e9a' }))));
     }
     static get is() { return "bs-radio"; }
     static get encapsulation() { return "shadow"; }

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

@@ -199,7 +199,7 @@ export class BsSlider {
     render() {
         const isRange = this.type === 'range';
         const rootClasses = ['bs-slider', this.disabled ? 'bs-slider--disabled' : ''].filter(Boolean).join(' ');
-        return (h("div", { key: '94e7804dd4e03881c5b53e3eb60ad6d4908b3c6d', class: rootClasses }, this.showLabel && (h("div", { key: '5a175e2c755c316e31637a99f32bbee4529a060e', class: "bs-slider__header" }, h("span", { key: '31c8b1ee83e4f86d9df201bb3e98be143c1bb4fb', id: "bs-slider-label", part: "label", class: "bs-slider__label" }, this.label), isRange ? (h("span", { class: "bs-slider__value-fields" }, this.renderPercentField(this.percent(this.effectiveValueStart), this.onStartPercentFieldChange, this.ariaLabel ?? 'Start value'), h("span", { class: "bs-slider__separator" }, "\u2013"), this.renderPercentField(this.percent(this.effectiveValueEnd), this.onEndPercentFieldChange, this.ariaLabel ? `${this.ariaLabel} end` : 'End value'))) : (this.renderPercentField(this.percent(this.value), this.onPercentFieldChange, this.ariaLabel ? `${this.ariaLabel} value` : 'Value')))), h("div", { key: '3e76e43398df4e013544e14cda18d61297f586c1', class: "bs-slider__row" }, this.showLabel && (h("span", { key: '68b68fb76315c024e8a58ef6e69ef5d3bcef8b8a', part: "bound", class: "bs-slider__bound" }, this.min)), isRange ? this.renderRangeThumbs() : this.renderSingleThumb(), this.showLabel && (h("span", { key: '37cd8e768c6c374f972ab7e00893193eeaaa14ec', part: "bound", class: "bs-slider__bound" }, this.max)))));
+        return (h("div", { key: 'e4647158959bb507711a1d9872e68f64d5f7bd34', class: rootClasses }, this.showLabel && (h("div", { key: 'eb5d67b8717cc627b63a17f85471e757d35cec85', class: "bs-slider__header" }, h("span", { key: '48f6184206774111a5beb1869857020d7008f013', id: "bs-slider-label", part: "label", class: "bs-slider__label" }, this.label), isRange ? (h("span", { class: "bs-slider__value-fields" }, this.renderPercentField(this.percent(this.effectiveValueStart), this.onStartPercentFieldChange, this.ariaLabel ?? 'Start value'), h("span", { class: "bs-slider__separator" }, "\u2013"), this.renderPercentField(this.percent(this.effectiveValueEnd), this.onEndPercentFieldChange, this.ariaLabel ? `${this.ariaLabel} end` : 'End value'))) : (this.renderPercentField(this.percent(this.value), this.onPercentFieldChange, this.ariaLabel ? `${this.ariaLabel} value` : 'Value')))), h("div", { key: '1ee4796e51f2d29b1b5bad812d81f037d1d2d29f', class: "bs-slider__row" }, this.showLabel && (h("span", { key: '4bfdfd86f9c5ae5c2f8ca08c0758be9fce483056', part: "bound", class: "bs-slider__bound" }, this.min)), isRange ? this.renderRangeThumbs() : this.renderSingleThumb(), this.showLabel && (h("span", { key: '06ee3063570c858bcdf49960b9021a301e56288e', part: "bound", class: "bs-slider__bound" }, this.max)))));
     }
     static get is() { return "bs-slider"; }
     static get encapsulation() { return "shadow"; }
@@ -225,7 +225,7 @@ export class BsSlider {
                     "references": {
                         "BsSliderType": {
                             "location": "local",
-                            "path": "/Users/vivka/brandsync-web-components/src/components/bs-slider/bs-slider.tsx",
+                            "path": "/home/runner/work/Brandsync-web-components/Brandsync-web-components/packages/wc/src/components/bs-slider/bs-slider.tsx",
                             "id": "src/components/bs-slider/bs-slider.tsx::BsSliderType"
                         }
                     }

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

@@ -51,7 +51,7 @@ export class BsSnackbar {
         this.bsDismiss.emit();
     };
     render() {
-        return (h("div", { key: '9106411da12b9a4687fc15cf51c3398e9f44cf61', part: "container", class: `bs-snackbar bs-snackbar--${this.variant}`, role: "status", "aria-live": this.variant === 'error' ? 'assertive' : 'polite' }, h("div", { key: '47d66fbf472070db51cc4ef1da513068a06bd4cf', class: "bs-snackbar__content" }, h("span", { key: 'aabe82b54a892ae9ce0ec299a8a8282b9c64a158', part: "icon", class: "bs-snackbar__icon", "aria-hidden": "true" }, this.loading ? h("span", { class: "bs-snackbar__spinner" }) : h(CheckCircleIcon, null)), h("span", { key: '0d349ebe58140aed06a6a887a71105aab8218c55', part: "message", class: "bs-snackbar__message" }, h("slot", { key: 'c95af54cae4327a956196c5e252c2e1bafc26e92' }))), h("div", { key: '9d85cb2e47cc696523bc3921afa804648ea13553', class: "bs-snackbar__actions" }, this.actionLabel && (h("button", { key: '59e85117a9351385d258ec9b5bac6cfb6b2d88bf', part: "action", type: "button", class: "bs-snackbar__action", onClick: this.onAction }, this.actionLabel)), h("button", { key: '9e60406a369a599d9a43fb3c9c321e1aa8e1144d', part: "close", type: "button", class: "bs-snackbar__close", "aria-label": "Dismiss", onClick: this.onDismiss }, h(CloseIcon, { key: '93e815dace277cbee4f0f67a2ec1b3321c9ff495' })))));
+        return (h("div", { key: '3dc0997bd057ef72d7322d28ad5c561fb5e24730', part: "container", class: `bs-snackbar bs-snackbar--${this.variant}`, role: "status", "aria-live": this.variant === 'error' ? 'assertive' : 'polite' }, h("div", { key: '3b77e4ac957cd73368883afbb7b47fb5cc46966b', class: "bs-snackbar__content" }, h("span", { key: '45a8c01714b0a3bec9ffcc470a83959a1d9f0539', part: "icon", class: "bs-snackbar__icon", "aria-hidden": "true" }, this.loading ? h("span", { class: "bs-snackbar__spinner" }) : h(CheckCircleIcon, null)), h("span", { key: '6738316060e8da63c45ceda8ec2a2fce0dbcbc24', part: "message", class: "bs-snackbar__message" }, h("slot", { key: 'f88fe59ad8c970a222b2349a86df8c9ccb2836ab' }))), h("div", { key: '171fa694e2faccca014bb75234958cd458b17fe7', class: "bs-snackbar__actions" }, this.actionLabel && (h("button", { key: '2f529c556bbc9b6d01fddb23b434a6e381f38529', part: "action", type: "button", class: "bs-snackbar__action", onClick: this.onAction }, this.actionLabel)), h("button", { key: '1f45a977afdd80ee603e122fe8ac36b8161d6ee3', part: "close", type: "button", class: "bs-snackbar__close", "aria-label": "Dismiss", onClick: this.onDismiss }, h(CloseIcon, { key: 'f16229c70fdbd0329e4a91fe7fbbf58e43e7870f' })))));
     }
     static get is() { return "bs-snackbar"; }
     static get encapsulation() { return "shadow"; }
@@ -76,7 +76,7 @@ export class BsSnackbar {
                     "references": {
                         "BsSnackbarVariant": {
                             "location": "local",
-                            "path": "/Users/vivka/brandsync-web-components/src/components/bs-snackbar/bs-snackbar.tsx",
+                            "path": "/home/runner/work/Brandsync-web-components/Brandsync-web-components/packages/wc/src/components/bs-snackbar/bs-snackbar.tsx",
                             "id": "src/components/bs-snackbar/bs-snackbar.tsx::BsSnackbarVariant"
                         }
                     }

package/dist/collection/components/bs-source-link/bs-source-link.js

@@ -51,8 +51,8 @@ export class BsSourceLink {
     };
     render() {
         const inner = [
-            h("span", { key: '87d5b005650458dac01edfc249af98f004281345', class: "bs-source-link__left" }, h("span", { key: '8eff72ca308f2617826f29312a755925526ffbd6', class: "bs-source-link__filename-row" }, h("span", { key: 'f0d435557cabaf12ee9bd2d155e432accf2fe858', part: "icon", class: "bs-source-link__icon" }, h("slot", { key: '51d36a29f3d77280bc575e32929a64e31e953fb3', name: "icon" }, h(FileTextIcon, { key: 'c51889f0f2cb3ab048b0a6cca1541accb720c4b2' }))), h("p", { key: '213eeb131f508e49f0b22aedce477cc68d0ebe54', part: "filename", class: "bs-source-link__filename" }, this.fileName)), h("span", { key: 'c6ca408b2707ed208f02a85baf393330536a126e', class: "bs-source-link__meta" }, this.sourceName && (h("span", { key: '7ec7920ab0a44d2169e53e24c958b0ad5c9ee58c', part: "source", class: "bs-source-link__source" }, this.sourceName)), this.sourceName && this.version && h("span", { key: 'e5687303c97b0cc5c655c5646c7be367d41d35b8', class: "bs-source-link__dot", "aria-hidden": "true" }), this.version && (h("span", { key: 'b0abbfc1b477d85ac25fe281d0404da62f2f21b0', part: "version", class: "bs-source-link__version" }, this.version)))),
-            h("span", { key: 'a2b93f18243778d72c77e2790ee43a4c3b7214a5', part: "arrow", class: "bs-source-link__arrow", "aria-hidden": "true" }, h(ArrowUpRightIcon, { key: '2cc849857b592ea425ea43cf55a202adde726826' })),
+            h("span", { key: 'f439433f45bc81b4c515903661311431d99637cd', class: "bs-source-link__left" }, h("span", { key: '4ede9ae3793da7453679723866a519e73ee963aa', class: "bs-source-link__filename-row" }, h("span", { key: '6b4b95fde466988248d34d27705df76acce5927a', part: "icon", class: "bs-source-link__icon" }, h("slot", { key: '24cf2dcc3d04fb2d6e543d1e8bae0e96d0df2d14', name: "icon" }, h(FileTextIcon, { key: 'f04e008075912dfac619c1a2e676346bc7d226d5' }))), h("p", { key: '16b2120d5391930dfc239cb5dd18c40de0cb7aa0', part: "filename", class: "bs-source-link__filename" }, this.fileName)), h("span", { key: 'ec10ed741f33eba57624e0840253f96851f1481a', class: "bs-source-link__meta" }, this.sourceName && (h("span", { key: '56d4a784e30ceff1568bb393d4c3b368f81a0f3e', part: "source", class: "bs-source-link__source" }, this.sourceName)), this.sourceName && this.version && h("span", { key: '95db8a3be1c61741e7d30229c642fea7d321b6b0', class: "bs-source-link__dot", "aria-hidden": "true" }), this.version && (h("span", { key: '4f8caac5193d8671811f9972654ab049f23bac49', part: "version", class: "bs-source-link__version" }, this.version)))),
+            h("span", { key: '6009485aa7f7d802a82195c50374693f66782737', part: "arrow", class: "bs-source-link__arrow", "aria-hidden": "true" }, h(ArrowUpRightIcon, { key: '1032169a5bfb02f9fbf1d7a5d5d255f313e1da29' })),
         ];
         return this.href ? (h("a", { class: "bs-source-link", href: this.href, target: this.target, rel: "noopener noreferrer", onClick: this.onClick }, inner)) : (h("button", { type: "button", class: "bs-source-link", onClick: this.onClick }, inner));
     }

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

@@ -0,0 +1,42 @@
+import { render, h, describe, it, expect } from "@stencil/vitest";
+describe('bs-stepper', () => {
+    it('propagates computedState to slotted steps based on position relative to currentStep', async () => {
+        const { root, waitForChanges } = await render(h("bs-stepper", { currentStep: 2 }, h("bs-stepper-step", { name: "Cart" }), h("bs-stepper-step", { name: "Shipping" }), h("bs-stepper-step", { name: "Payment" }), h("bs-stepper-step", { name: "Confirm" })));
+        await waitForChanges();
+        const steps = root.querySelectorAll('bs-stepper-step');
+        expect(steps[0].computedState).toBe('done');
+        expect(steps[1].computedState).toBe('done');
+        expect(steps[2].computedState).toBe('current');
+        expect(steps[3].computedState).toBe('enabled');
+    });
+    it('re-propagates computedState when currentStep changes', async () => {
+        const { root, waitForChanges } = await render(h("bs-stepper", { currentStep: 0 }, h("bs-stepper-step", { name: "A" }), h("bs-stepper-step", { name: "B" })));
+        await waitForChanges();
+        root.currentStep = 1;
+        await waitForChanges();
+        const steps = root.querySelectorAll('bs-stepper-step');
+        expect(steps[0].computedState).toBe('done');
+        expect(steps[1].computedState).toBe('current');
+    });
+    it('propagates direction and showDescription to slotted steps', async () => {
+        const { root, waitForChanges } = await render(h("bs-stepper", { direction: "vertical", showDescription: false }, h("bs-stepper-step", { name: "A" })));
+        await waitForChanges();
+        const step = root.querySelector('bs-stepper-step');
+        expect(step.direction).toBe('vertical');
+        expect(step.showDescription).toBe(false);
+    });
+    it('propagates the current props to a step added after initial render', async () => {
+        // currentStep=0 and this being the only (so index-0) step once appended -- 0 === 0 -> "current".
+        const { root, waitForChanges } = await render(h("bs-stepper", { currentStep: 0 }));
+        await waitForChanges();
+        const step = document.createElement('bs-stepper-step');
+        step.setAttribute('name', 'Late add');
+        root.appendChild(step);
+        await waitForChanges();
+        expect(step.computedState).toBe('current');
+    });
+    it('reflects the direction attribute for the container itself', async () => {
+        const { root } = await render(h("bs-stepper", { direction: "vertical" }));
+        expect(root).toEqualAttribute('direction', 'vertical');
+    });
+});

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

@@ -0,0 +1,29 @@
+/**
+ * @prop --bs-stepper-edge-padding: Horizontal padding, direction="horizontal" only. Aliased to
+ * --bs-spacing-800. Every step's name/description centers under its own icon (see
+ * bs-stepper-step.css), including the first and last steps -- whose icons sit flush against this
+ * container's own edges. Without this padding, a first/last step's centered text has room to
+ * overflow in only one direction and clips against the container edge (confirmed by measuring a
+ * real render: a description clipped to a negative x position). This padding exists purely to give
+ * that overflow somewhere to go; it isn't a general "breathing room" affordance for content that
+ * fits.
+ */
+/* This container renders a bare <slot> with no wrapping element (see bs-stepper.tsx), so :host
+   itself is what establishes the flex row/column context each slotted bs-stepper-step's own
+   `:host(.bs-stepper-step--horizontal) { flex: 1 1 0; }` (etc.) expects from its parent. */
+:host {
+  display: flex;
+  width: 100%;
+
+  --bs-stepper-edge-padding: var(--bs-spacing-800);
+}
+
+:host([direction='vertical']) {
+  flex-direction: column;
+}
+
+:host(:not([direction='vertical'])) {
+  flex-direction: row;
+  align-items: flex-start;
+  padding: 0 var(--bs-stepper-edge-padding);
+}

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

@@ -0,0 +1,162 @@
+import { h } from "@stencil/core";
+/**
+ * A sequence of named steps showing overall progress through a multi-step flow (e.g. a checkout,
+ * an onboarding wizard) -- each step reads as enabled (not yet reached), current, done, error, or
+ * disabled, connected by a rail between them.
+ *
+ * This container is intentionally thin: it renders a `<slot>` for `<bs-stepper-step>` children and
+ * propagates `currentStep`/`direction`/`showDescription` down to them as JS properties whenever any
+ * of those change or the slotted children themselves change -- the same "container pushes state
+ * onto its slotted children" pattern `bs-tabs` uses for `selected` and `bs-breadcrumbs` uses for
+ * `size`. Each step computes its own `enabled`/`current`/`done` state from its position among its
+ * siblings relative to `currentStep`, unless that step's own `error`/`disabled` prop overrides it.
+ *
+ * This is a static status display, not an interactive control -- Figma's spec shows no
+ * hover/pressed treatment on any step, so nothing here is clickable.
+ *
+ * ## When to use
+ * - Showing where the user is in a fixed, ordered, multi-step flow.
+ *
+ * ## When not to use
+ * - A flow whose steps aren't fixed/known in advance -- a stepper implies the full sequence is
+ *   already known.
+ * - As a substitute for actual in-page navigation between steps -- pair this with real controls
+ *   (Next/Back buttons) elsewhere in the flow, this component only displays status.
+ *
+ * @slot - Default slot: the `<bs-stepper-step>` elements making up the sequence, in order.
+ */
+export class BsStepper {
+    el;
+    /** 0-indexed: which step is current. Every step before this index reads as "done" (unless that
+     * step's own `error`/`disabled` overrides it), every step after reads as "enabled". */
+    currentStep = 0;
+    /** `horizontal` (icon above name/description, connected by a horizontal rail) or `vertical`
+     * (icon beside name/description, connected by a vertical rail). Propagated to every slotted
+     * `bs-stepper-step`, and reflected as an attribute so this container's own `:host` CSS can switch
+     * its `flex-direction` to match -- a bare `<slot>` with no wrapping element (see `render()`)
+     * means the slotted steps' flex-row/column layout comes directly from `:host` here, not from any
+     * wrapper div. */
+    direction = 'horizontal';
+    /** Whether each step's description renders at all. Propagated to every slotted
+     * `bs-stepper-step`. */
+    showDescription = true;
+    onPropChange() {
+        this.propagateToSteps();
+    }
+    componentDidLoad() {
+        this.propagateToSteps();
+    }
+    onSlotChange = () => {
+        this.propagateToSteps();
+    };
+    propagateToSteps() {
+        const steps = this.el.querySelectorAll(':scope > bs-stepper-step');
+        steps.forEach((step, index) => {
+            const computedState = index < this.currentStep ? 'done' : index === this.currentStep ? 'current' : 'enabled';
+            Object.assign(step, {
+                computedState,
+                direction: this.direction,
+                showDescription: this.showDescription,
+            });
+        });
+    }
+    render() {
+        return h("slot", { key: '1c5d7d0c6a9fef9c06dfd08bd529a1582fe18478', onSlotchange: this.onSlotChange });
+    }
+    static get is() { return "bs-stepper"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bs-stepper.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bs-stepper.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "currentStep": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "0-indexed: which step is current. Every step before this index reads as \"done\" (unless that\nstep's own `error`/`disabled` overrides it), every step after reads as \"enabled\"."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "current-step",
+                "defaultValue": "0"
+            },
+            "direction": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BsStepperDirection",
+                    "resolved": "\"horizontal\" | \"vertical\"",
+                    "references": {
+                        "BsStepperDirection": {
+                            "location": "import",
+                            "path": "../bs-stepper-step/bs-stepper-step",
+                            "id": "src/components/bs-stepper/bs-stepper-step/bs-stepper-step.tsx::BsStepperDirection",
+                            "referenceLocation": "BsStepperDirection"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "`horizontal` (icon above name/description, connected by a horizontal rail) or `vertical`\n(icon beside name/description, connected by a vertical rail). Propagated to every slotted\n`bs-stepper-step`, and reflected as an attribute so this container's own `:host` CSS can switch\nits `flex-direction` to match -- a bare `<slot>` with no wrapping element (see `render()`)\nmeans the slotted steps' flex-row/column layout comes directly from `:host` here, not from any\nwrapper div."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "direction",
+                "defaultValue": "'horizontal'"
+            },
+            "showDescription": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether each step's description renders at all. Propagated to every slotted\n`bs-stepper-step`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-description",
+                "defaultValue": "true"
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "currentStep",
+                "methodName": "onPropChange"
+            }, {
+                "propName": "direction",
+                "methodName": "onPropChange"
+            }, {
+                "propName": "showDescription",
+                "methodName": "onPropChange"
+            }];
+    }
+}

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

@@ -0,0 +1,59 @@
+import { html } from "lit";
+import { componentDescription, propDescription } from "../../../stories-utils";
+const meta = {
+    title: 'Components/bs-stepper',
+    parameters: { docs: { description: { component: componentDescription('bs-stepper') } } },
+    render: args => html `
+    <bs-stepper current-step=${args.currentStep} direction=${args.direction} show-description=${args.showDescription}>
+      <bs-stepper-step name="Cart" description="Review items"></bs-stepper-step>
+      <bs-stepper-step name="Shipping" description="Delivery address"></bs-stepper-step>
+      <bs-stepper-step name="Payment" description="Card details"></bs-stepper-step>
+      <bs-stepper-step name="Confirm" description="Review order"></bs-stepper-step>
+    </bs-stepper>
+  `,
+    argTypes: {
+        currentStep: { control: { type: 'number', min: 0, max: 3 }, description: propDescription('bs-stepper', 'currentStep') },
+        direction: { control: { type: 'select' }, options: ['horizontal', 'vertical'], description: propDescription('bs-stepper', 'direction') },
+        showDescription: { control: 'boolean', description: propDescription('bs-stepper', 'showDescription') },
+    },
+    args: {
+        currentStep: 1,
+        direction: 'horizontal',
+        showDescription: true,
+    },
+};
+export default meta;
+export const Default = {};
+export const Vertical = {
+    args: { direction: 'vertical' },
+};
+// A step's own `error` attribute overrides its position-derived state -- Shipping shows the error
+// treatment even though it's before currentStep (which would normally read as "done").
+export const WithError = {
+    name: 'With an error step',
+    args: { currentStep: 2 },
+    render: args => html `
+    <bs-stepper current-step=${args.currentStep} direction=${args.direction} show-description=${args.showDescription}>
+      <bs-stepper-step name="Cart" description="Review items"></bs-stepper-step>
+      <bs-stepper-step name="Shipping" description="Delivery address" error></bs-stepper-step>
+      <bs-stepper-step name="Payment" description="Card details"></bs-stepper-step>
+      <bs-stepper-step name="Confirm" description="Review order"></bs-stepper-step>
+    </bs-stepper>
+  `,
+};
+export const WithDisabledStep = {
+    name: 'With a disabled step',
+    args: { currentStep: 2 },
+    render: args => html `
+    <bs-stepper current-step=${args.currentStep} direction=${args.direction} show-description=${args.showDescription}>
+      <bs-stepper-step name="Cart" description="Review items"></bs-stepper-step>
+      <bs-stepper-step name="Shipping" description="Delivery address"></bs-stepper-step>
+      <bs-stepper-step name="Payment" description="Card details"></bs-stepper-step>
+      <bs-stepper-step name="Confirm" description="Review order" disabled></bs-stepper-step>
+    </bs-stepper>
+  `,
+};
+export const NoDescription = {
+    name: 'No description',
+    args: { showDescription: false },
+};

package/dist/collection/components/bs-stepper/bs-stepper-step/bs-stepper-step.cmp.test.js

@@ -0,0 +1,73 @@
+import { render, h, describe, it, expect } from "@stencil/vitest";
+describe('bs-stepper-step', () => {
+    it('defaults to enabled/horizontal/showDescription=true when used standalone', async () => {
+        const { root } = await render(h("bs-stepper-step", { name: "Cart" }));
+        expect(root.shadowRoot.querySelector('[part="icon"]')).toHaveClass('bs-stepper-step__icon--enabled');
+        expect(root).toHaveClass('bs-stepper-step--horizontal');
+    });
+    it('renders the name text', async () => {
+        const { root } = await render(h("bs-stepper-step", { name: "Shipping" }));
+        expect(root.shadowRoot.querySelector('[part="name"]').textContent.trim()).toBe('Shipping');
+    });
+    describe('state resolution', () => {
+        it('error overrides computedState', async () => {
+            const { root } = await render(h("bs-stepper-step", { name: "A", computedState: "done", error: true }));
+            expect(root.shadowRoot.querySelector('[part="icon"]')).toHaveClass('bs-stepper-step__icon--error');
+        });
+        it('disabled overrides both computedState and error', async () => {
+            const { root } = await render(h("bs-stepper-step", { name: "A", computedState: "current", error: true, disabled: true }));
+            expect(root.shadowRoot.querySelector('[part="icon"]')).toHaveClass('bs-stepper-step__icon--disabled');
+        });
+        it('falls back to computedState when neither error nor disabled is set', async () => {
+            const { root } = await render(h("bs-stepper-step", { name: "A", computedState: "done" }));
+            expect(root.shadowRoot.querySelector('[part="icon"]')).toHaveClass('bs-stepper-step__icon--done');
+        });
+    });
+    describe('icon content per state', () => {
+        it('done shows a checkmark', async () => {
+            const { root } = await render(h("bs-stepper-step", { name: "A", computedState: "done" }));
+            expect(root.shadowRoot.querySelector('[part="icon"] svg')).not.toBeNull();
+        });
+        it('current shows an inner dot, no svg', async () => {
+            const { root } = await render(h("bs-stepper-step", { name: "A", computedState: "current" }));
+            expect(root.shadowRoot.querySelector('.bs-stepper-step__icon-dot')).not.toBeNull();
+            expect(root.shadowRoot.querySelector('[part="icon"] svg')).toBeNull();
+        });
+        it('enabled shows neither', async () => {
+            const { root } = await render(h("bs-stepper-step", { name: "A", computedState: "enabled" }));
+            expect(root.shadowRoot.querySelector('.bs-stepper-step__icon-dot')).toBeNull();
+            expect(root.shadowRoot.querySelector('[part="icon"] svg')).toBeNull();
+        });
+        it('error shows an exclamation icon', async () => {
+            const { root } = await render(h("bs-stepper-step", { name: "A", error: true }));
+            expect(root.shadowRoot.querySelector('[part="icon"] svg')).not.toBeNull();
+        });
+    });
+    describe('showDescription', () => {
+        it('renders the description when set and showDescription is true', async () => {
+            const { root } = await render(h("bs-stepper-step", { name: "A", description: "Some detail", showDescription: true }));
+            expect(root.shadowRoot.querySelector('[part="description"]').textContent.trim()).toBe('Some detail');
+        });
+        it('does not render a description when showDescription is false', async () => {
+            const { root } = await render(h("bs-stepper-step", { name: "A", description: "Some detail", showDescription: false }));
+            expect(root.shadowRoot.querySelector('[part="description"]')).toBeNull();
+        });
+        it('does not render a description that was never set, even with showDescription true', async () => {
+            const { root } = await render(h("bs-stepper-step", { name: "A", showDescription: true }));
+            expect(root.shadowRoot.querySelector('[part="description"]')).toBeNull();
+        });
+    });
+    it('hides its own trailing connector when last in its parent, regardless of tag mix', async () => {
+        const container = document.createElement('div');
+        container.innerHTML = '<bs-stepper-step name="A"></bs-stepper-step><bs-stepper-step name="B"></bs-stepper-step>';
+        document.body.appendChild(container);
+        await new Promise(resolve => requestAnimationFrame(resolve));
+        await new Promise(resolve => requestAnimationFrame(resolve));
+        const [first, second] = Array.from(container.querySelectorAll('bs-stepper-step'));
+        const firstConnector = first.shadowRoot.querySelector('.bs-stepper-step__connector');
+        const secondConnector = second.shadowRoot.querySelector('.bs-stepper-step__connector');
+        expect(getComputedStyle(firstConnector).visibility).not.toBe('hidden');
+        expect(getComputedStyle(secondConnector).visibility).toBe('hidden');
+        container.remove();
+    });
+});