@brandsync/wc 0.1.0 → 1.0.0

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: 'e0ea19eeb010af536dba9981ed9859181445dfe3', class: "bs-chatbot-header", role: "banner", "aria-label": this.heading }, h("div", { key: 'b2e9ebadd61e80ad1f4559dd0e0130d6b36f625c', part: "logo", class: "bs-chatbot-header__logo", role: "img", "aria-label": this.heading, innerHTML: GENIE_LOGO_SVG }), h("div", { key: '51a96ee8e2c456e00d090ef329a0a7625e8a22dd', class: "bs-chatbot-header__actions" }, h("span", { key: '26f392cb56b496da1e4c26fe378246bb47f0a7e9', class: "bs-chatbot-header__tooltip-wrapper" }, h("button", { key: '7418cea294cc509323049494464fc292c643d881', type: "button", part: "new-chat", class: "bs-chatbot-header__button", "aria-label": "New chat", onClick: this.onNewChatClick }, h("slot", { key: '510a66d1d0cc7baccf0f2d9f2dc6b26acfc76d0b', name: "new-chat-icon" }, h(NewChatIcon, { key: 'b135187338a185bda4f145f2311c7ea3b21839d5' }))), h("bs-tooltip", { key: '55605b4ec0d3c51fc5fc5546676e240a64bb5278', class: "bs-chatbot-header__tooltip", placement: "top", "aria-hidden": "true" }, "New chat")), h("span", { key: 'bab4c50dcf6d0931f90de7a1c45249559149aa9c', class: "bs-chatbot-header__tooltip-wrapper" }, h("button", { key: 'a70f0acd00a29476800e0cc1367a1f11ab159c75', type: "button", part: "history", class: "bs-chatbot-header__button", "aria-label": "History", onClick: this.onHistoryClick }, h("slot", { key: 'dfbd816dee51c428359509c4d9fc97efbd290a0e', name: "history-icon" }, h(HistoryIcon, { key: '5550515b799ab3d494d812aa9567781f86c7381a' }))), h("bs-tooltip", { key: '66cc280bc34b411b4ad8d0640acafbc14259bfab', class: "bs-chatbot-header__tooltip", placement: "top", "aria-hidden": "true" }, "History")), h("span", { key: '21bd18c8221473430d5afa844d0a8fd6072fabe4', class: "bs-chatbot-header__tooltip-wrapper" }, h("button", { key: 'fe794fafeb13f4aa5ae1f228b8b28eeb82317631', 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: '457d0ca096b2f44aee67db3ca6cae24d440b9bb0', name: "expand-icon" }, h(ExpandIcon, { key: '207caae0afda63b8ddc55b13c9de0abf991a5650' }))), h("bs-tooltip", { key: '12251a2b24cd651f0ee91307d62f7179e67fb066', class: "bs-chatbot-header__tooltip", placement: "top", "aria-hidden": "true" }, this.expanded ? 'Collapse' : 'Expand')), h("span", { key: '25d6e11049392522aa8a0b1b9bc6327850a10084', class: "bs-chatbot-header__tooltip-wrapper" }, h("button", { key: 'ed9df95ed3922f23d135980ffc2e1306c3d09da2', type: "button", part: "close", class: "bs-chatbot-header__button", "aria-label": "Close", onClick: this.onCloseClick }, h("slot", { key: '73fbf236b91e874ebc40a51b565b772d8b4f65fd', name: "close-icon" }, h(CloseIcon, { key: '26ab31c650988a86860790fd9591b5cd2d0daf3c' }))), h("bs-tooltip", { key: 'f51ce61c93ba84116545d95c6ce89b21e791dc4c', class: "bs-chatbot-header__tooltip", placement: "top", "aria-hidden": "true" }, "Close")))));
+        return (h("div", { key: '976c52c3c5fc7d4b3a71669075263053abc7b253', class: "bs-chatbot-header", role: "banner", "aria-label": this.heading }, h("div", { key: 'ee3e0f4478ccbbe293c555f4f49c040dff3347de', part: "logo", class: "bs-chatbot-header__logo", role: "img", "aria-label": this.heading, innerHTML: GENIE_LOGO_SVG }), h("div", { key: '189372f43f8d38ae906498f3eb54d0c3023b32f9', class: "bs-chatbot-header__actions" }, h("span", { key: 'f0346193fa5927156265da9a785a6f1f6920eee9', class: "bs-chatbot-header__tooltip-wrapper" }, h("button", { key: '8c4efc93a8f9ff06e0640635670117a05a363e6b', type: "button", part: "new-chat", class: "bs-chatbot-header__button", "aria-label": "New chat", onClick: this.onNewChatClick }, h("slot", { key: '95c55f8631203dd8addeca3814f075635f403a33', name: "new-chat-icon" }, h(NewChatIcon, { key: '2472c8aab26a9f78ca3f8ee5c9c7742bc6c4fd0a' }))), h("bs-tooltip", { key: '5eea9d22cad778e51af7ea2cf5bb7b049efeddab', class: "bs-chatbot-header__tooltip", placement: "top", "aria-hidden": "true" }, "New chat")), h("span", { key: 'fa4c416c88908a72e1e60808786eaedb4682988e', class: "bs-chatbot-header__tooltip-wrapper" }, h("button", { key: 'cdc4c7ecf2fceb64ea9e5ff2bcb684e5773094ff', type: "button", part: "history", class: "bs-chatbot-header__button", "aria-label": "History", onClick: this.onHistoryClick }, h("slot", { key: 'f4dd57016f0d070fcef8bd108bee57c7541d9234', name: "history-icon" }, h(HistoryIcon, { key: '361f3512015127ded2802df421238e247cb21b39' }))), h("bs-tooltip", { key: '55170d0bc19d6c27327af2b637d97d9659f28d36', class: "bs-chatbot-header__tooltip", placement: "top", "aria-hidden": "true" }, "History")), h("span", { key: 'b7e2916d6b821fa1a5399dc4b136a56cffa74262', class: "bs-chatbot-header__tooltip-wrapper" }, h("button", { key: '8708ed4e461c1267fa269b26d28c161c189c1545', 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: '89051c53a9023d97a46caea933c266d317854a19', name: "expand-icon" }, h(ExpandIcon, { key: '7da6d2c1d998aa81a2799451cd2e179d48c2bac0' }))), h("bs-tooltip", { key: '4e310620ee98ab1a86c431f8793973769cbcabe8', class: "bs-chatbot-header__tooltip", placement: "top", "aria-hidden": "true" }, this.expanded ? 'Collapse' : 'Expand')), h("span", { key: '4591bee15e6b9bffa8040886afd779be8b1ddf04', class: "bs-chatbot-header__tooltip-wrapper" }, h("button", { key: 'ed8f7b652940e0075a254705d503b872d9cb54dd', type: "button", part: "close", class: "bs-chatbot-header__button", "aria-label": "Close", onClick: this.onCloseClick }, h("slot", { key: '46fd676c08f046269ed459867733bfade7ee6347', name: "close-icon" }, h(CloseIcon, { key: '58ec3e580328eb7ed51579c03c02cd9b369a8cdf' }))), h("bs-tooltip", { key: '5808c60d8d56763f6dcc39e5862178190830f4bc', class: "bs-chatbot-header__tooltip", placement: "top", "aria-hidden": "true" }, "Close")))));
     }
     static get is() { return "bs-chatbot-header"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-chatbot-response-action/bs-chatbot-response-action.js

@@ -105,7 +105,7 @@ export class BsChatbotResponseAction {
     };
     render() {
         const hasSources = !!this.sourcesCount && this.sourcesCount > 0;
-        return (h("div", { key: '6f0fe6d237fa76a44aebc5452d77619f8a6f3e07', class: "bs-chatbot-response-action" }, h("button", { key: 'e46a78f8a28c8b23780d86ea52618bb96003bbc6', type: "button", part: "like", class: "bs-chatbot-response-action__button", "aria-label": "Like", onClick: this.onLikeClick }, h("slot", { key: 'cf59ea0115e99fef5e5398f8101ecd4702f6d13c', name: "like-icon" }, h(ThumbsUpIcon, { key: '0597457db34f2e4677f63a7253dd59015bbcbaf5' }))), h("button", { key: '9dd6db57941126a2b50f3c1c45653e35cc4e9113', type: "button", part: "dislike", class: "bs-chatbot-response-action__button", "aria-label": "Dislike", onClick: this.onDislikeClick }, h("slot", { key: '8ab78179e979275461cd420e1ab7919396e6126e', name: "dislike-icon" }, h(ThumbsDownIcon, { key: '5f9eeeb87c3bb3f635468dfcdddb323069c20c6f' }))), h("button", { key: '6bf0a37024846ababcfc0c1593f6d9fd4bd2b6af', type: "button", part: "copy", class: "bs-chatbot-response-action__button", "aria-label": "Copy", onClick: this.onCopyClick }, h("slot", { key: '68c68be3274b3bf2c0f59178640e6009ec5869da', name: "copy-icon" }, h(CopyIcon, { key: '229bd54acaad25cc05da69361142be1588c723f9' }))), h("button", { key: '1cc152937d132b179b72daf1342f63cbabcc67f2', type: "button", part: "regenerate", class: "bs-chatbot-response-action__button", "aria-label": "Regenerate", onClick: this.onRegenerateClick }, h("slot", { key: '407f9527d50f75d0063b92a6f68ed6a4364b72bc', name: "regenerate-icon" }, h(RegenerateIcon, { key: 'f1d5fca176ef8f90c167a62307bda06bdc86b4a6' }))), h("div", { key: '2fe454900888c46dc17d24ce28c3af1d2d9afcf6', class: "bs-chatbot-response-action__menu-wrapper" }, h("button", { key: '3046ca6507dd70c734a37e6aed89613167ce5e29', type: "button", part: "menu", class: "bs-chatbot-response-action__button", "aria-label": "More options", "aria-haspopup": "menu", "aria-expanded": this.menuOpen ? 'true' : 'false', onClick: this.onMenuClick }, h("slot", { key: '3e6814659655c0ba61bc84a3eacae0a13b2c9cd6', name: "menu-icon" }, h(MenuIcon, { key: '70a898b1158a284f1c8e07a6d92ce11de1265844' }))), this.menuOpen && (h("div", { key: '95bc1e4c5a8e8d160a6b59c36bf3485ecfdc8505', class: "bs-chatbot-response-action__menu-popup" }, h("slot", { key: '80dd0220745586c213c4372ded2f2138c4e3dadb', name: "menu" })))), hasSources && (h("button", { key: '4f1036874d1a02347820bb0d19a77c18f5d33bc0', type: "button", part: "sources", class: "bs-chatbot-response-action__sources", onClick: this.onSourcesClick }, h("slot", { key: '11c4b6b5399ffd011bb60da19265e19bc4407061', name: "sources-icon" }, h(SourcesIcon, { key: 'fd64afb252fb5b32332cc46ff664fc947df22ea5' })), h("span", { key: 'ef47e93369d033e3306e7006516470d5b1c9c13f', class: "bs-chatbot-response-action__sources-label" }, this.sourcesCount, " ", this.sourcesCount === 1 ? 'source' : 'sources')))));
+        return (h("div", { key: '36a3a372af16e57f0747d0afacede280c75e2baa', class: "bs-chatbot-response-action" }, h("button", { key: '5d67c3cb0b3488d3f3ac84fe593cacc66e119a3b', type: "button", part: "like", class: "bs-chatbot-response-action__button", "aria-label": "Like", onClick: this.onLikeClick }, h("slot", { key: 'b9447e9cb87c841cb75b015324780a926275643d', name: "like-icon" }, h(ThumbsUpIcon, { key: 'd5b8b4cb03eb08d12ef92d6ef7e8747830f496f0' }))), h("button", { key: 'e510cc2d7edf1b85b9c298f7d988b994f716821b', type: "button", part: "dislike", class: "bs-chatbot-response-action__button", "aria-label": "Dislike", onClick: this.onDislikeClick }, h("slot", { key: '94aa62133ad644a1423539a2854e24bd809ae934', name: "dislike-icon" }, h(ThumbsDownIcon, { key: '5770a79e906a6ff99ca9e632a2dbcfccf3478756' }))), h("button", { key: 'b8477c11b99ba291406ebc8fcb953ca87d21e5d5', type: "button", part: "copy", class: "bs-chatbot-response-action__button", "aria-label": "Copy", onClick: this.onCopyClick }, h("slot", { key: 'f2ebadfff852af1e1f1462257a1132ef16fd538d', name: "copy-icon" }, h(CopyIcon, { key: '57c470579a282b8fbd0aad5e1153e4e5666c8c04' }))), h("button", { key: 'd27f9d32f57296011f8c69848b678b745e068074', type: "button", part: "regenerate", class: "bs-chatbot-response-action__button", "aria-label": "Regenerate", onClick: this.onRegenerateClick }, h("slot", { key: 'eb8dc45632ecf993cbdb78a4174eee93fc8a1df8', name: "regenerate-icon" }, h(RegenerateIcon, { key: 'a1a72e6fdc499b4f76caeb747c4711b31985e5b8' }))), h("div", { key: 'e51c762ded01dcacbfcc554b858992ecf818b890', class: "bs-chatbot-response-action__menu-wrapper" }, h("button", { key: '43cb51c908e6e57f35d6ff84a0e7fba850c3c410', type: "button", part: "menu", class: "bs-chatbot-response-action__button", "aria-label": "More options", "aria-haspopup": "menu", "aria-expanded": this.menuOpen ? 'true' : 'false', onClick: this.onMenuClick }, h("slot", { key: '515f26fb7b3c861c5fb67e6831fa0cff568006d2', name: "menu-icon" }, h(MenuIcon, { key: '93c50b2d7ed0d710c30d33a0483943e12111f479' }))), this.menuOpen && (h("div", { key: '098e59c3e121fe9565d349372d84cc8106762968', class: "bs-chatbot-response-action__menu-popup" }, h("slot", { key: 'bc7a4ec19beeaf66d7dbd506914d185233677760', name: "menu" })))), hasSources && (h("button", { key: '703c714cf207a1475069cc8c93155b9be002310a', type: "button", part: "sources", class: "bs-chatbot-response-action__sources", onClick: this.onSourcesClick }, h("slot", { key: '8184596f5a98cbaaa276d337269aea27f3de5ba4', name: "sources-icon" }, h(SourcesIcon, { key: 'eb5984310dc77e1aa082c9275105bbca923cc7ab' })), h("span", { key: '52ba085dd94415e7ee36fce236375bd9d66f6145', class: "bs-chatbot-response-action__sources-label" }, this.sourcesCount, " ", this.sourcesCount === 1 ? 'source' : 'sources')))));
     }
     static get is() { return "bs-chatbot-response-action"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-chatbot-sources-drawer/bs-chatbot-sources-drawer.js

@@ -57,7 +57,7 @@ export class BsChatbotSourcesDrawer {
     };
     render() {
         const displayCount = this.count ?? this.slottedCount;
-        return (h("div", { key: '4f5ba818b20615f14f05744f7da90293687fb571', class: "bs-chatbot-sources-drawer", role: "region", "aria-label": this.heading }, h("div", { key: 'e42b0c3ea3c33da5ab3c5aff08a27dfdf91f9213', class: "bs-chatbot-sources-drawer__header" }, h("div", { key: '47364bc1d824a102c63a8f3fbca310c3c50996db', class: "bs-chatbot-sources-drawer__title-group" }, h("h2", { key: 'ad91fd640f31ad585438ed0da4fa6964321d0839', part: "heading", class: "bs-chatbot-sources-drawer__heading" }, this.heading), displayCount > 0 && (h("span", { key: 'c46163c92ba3d15e384101d5e37d72c1e2034534', part: "count", class: "bs-chatbot-sources-drawer__count" }, displayCount))), h("button", { key: 'f82bf6ec52abb532b3fd5f4b6d7d4405d71685a0', type: "button", part: "collapse", class: "bs-chatbot-sources-drawer__collapse", "aria-label": "Collapse sources", onClick: this.onCollapseClick }, h("slot", { key: 'f7e7edab6658cbf745f06fa18931d9522e488723', name: "collapse-icon" }, h(CaretRightIcon, { key: '6e3ac570d6a5ca716b39c611b2f6d0c15078cbbf' })))), h("div", { key: '5006ed497dec22fb534a8805edbf24a8196e3cbc', part: "list", class: "bs-chatbot-sources-drawer__list" }, h("slot", { key: 'f32856392781219b2f0102181cbcfb768a331cea', onSlotchange: this.onSlotchange }))));
+        return (h("div", { key: 'bbec982298c928942775b7543865781a3fd0c555', class: "bs-chatbot-sources-drawer", role: "region", "aria-label": this.heading }, h("div", { key: '9e6e7c89bdf061c89a608fcdc9aa9e85a8de731c', class: "bs-chatbot-sources-drawer__header" }, h("div", { key: '648efdba7da08457adf1e9fe5cb69b1a4d2f9266', class: "bs-chatbot-sources-drawer__title-group" }, h("h2", { key: '08557ea95eae88878c3c0971ce8aa5fa6a72bdcc', part: "heading", class: "bs-chatbot-sources-drawer__heading" }, this.heading), displayCount > 0 && (h("span", { key: '3aaf595afc3170bf8f18cf06a119555ff386aaa4', part: "count", class: "bs-chatbot-sources-drawer__count" }, displayCount))), h("button", { key: 'ccf98e8772366e8c91e6cb6f824194d4ec8a8b35', type: "button", part: "collapse", class: "bs-chatbot-sources-drawer__collapse", "aria-label": "Collapse sources", onClick: this.onCollapseClick }, h("slot", { key: 'd1f41711fd871e0f5ef0d23fd7ffb8ae0d6aa595', name: "collapse-icon" }, h(CaretRightIcon, { key: '55dea932bcfa2dcdb776cf452737362c52ea879e' })))), h("div", { key: 'f3f8e5fd96df856ecb965c7e75b706c1f8fe6488', part: "list", class: "bs-chatbot-sources-drawer__list" }, h("slot", { key: '27f35d19a5f00275c983f17a2709932fdf2f2b61', onSlotchange: this.onSlotchange }))));
     }
     static get is() { return "bs-chatbot-sources-drawer"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-chatbot-suggestion-button/bs-chatbot-suggestion-button.js

@@ -45,7 +45,7 @@ export class BsChatbotSuggestionButton {
         this.bsSelect.emit();
     };
     render() {
-        return (h("button", { key: '6382d81881701ca9363c0031e8db634812f233f7', type: "button", part: "button", class: "bs-chatbot-suggestion-button", disabled: this.disabled, onClick: this.onClick }, h("slot", { key: 'cc6a6586b36c70f5420f08ebc44db5452fe184bc' })));
+        return (h("button", { key: '26a03adfaace4fffed0f3c371b665f49a68dbfae', type: "button", part: "button", class: "bs-chatbot-suggestion-button", disabled: this.disabled, onClick: this.onClick }, h("slot", { key: 'e40d0b911d11329ea5f07cffe1a0f60acf777dd5' })));
     }
     static get is() { return "bs-chatbot-suggestion-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-checkbox/bs-checkbox-skeleton/bs-checkbox-skeleton.js

@@ -33,7 +33,7 @@ export class BsCheckboxSkeleton {
      * (unusual) default `bs-checkbox` itself uses. */
     size = 'lg';
     render() {
-        return (h("span", { key: '3ce0fec776997d16edcb84d3fe46c461721230b1', part: "container", class: "bs-checkbox-skeleton", role: "status", "aria-label": "Loading" }, h("span", { key: 'b59ec36ba925cb95545a4836bfa3b631a5ac54f6', part: "box", class: `bs-checkbox-skeleton__box bs-checkbox-skeleton__box--${this.size}` }), h("span", { key: '847024bd9c5d30157fe2e2cf3ef7421c8741dc21', part: "label", class: "bs-checkbox-skeleton__label" })));
+        return (h("span", { key: 'c2a6166646dde6d30242d16582706d0e422eb4d6', part: "container", class: "bs-checkbox-skeleton", role: "status", "aria-label": "Loading" }, h("span", { key: 'f1be3fc565db55eac147901c8035b9b83a75911d', part: "box", class: `bs-checkbox-skeleton__box bs-checkbox-skeleton__box--${this.size}` }), h("span", { key: '4dcce33b22c6930795d2c1ea3bc5d0aa84f3601b', part: "label", class: "bs-checkbox-skeleton__label" })));
     }
     static get is() { return "bs-checkbox-skeleton"; }
     static get encapsulation() { return "shadow"; }

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

@@ -341,10 +341,10 @@ export class BsInput {
         return (h("div", { part: "field", class: `bs-input__field bs-input__field--pin ${errorClass} ${disabledClass}` }, Array.from({ length: this.length }).map((_, i) => (h("input", { id: i === 0 ? 'control' : undefined, ref: el => (this.pinInputs[i] = el), part: "control", class: "bs-input__pin-cell", type: "text", inputMode: "numeric", maxLength: 1, value: this.value[i] ?? '', disabled: this.disabled, "aria-required": this.required ? 'true' : undefined, onInput: this.onPinInput(i), onKeyDown: this.onPinKeydown(i) })))));
     }
     render() {
-        return (h("div", { key: '3647d132e96c281ba68522647ab422040c6752c2', class: `bs-input ${this.error ? 'bs-input--error' : ''}` }, this.label && (
+        return (h("div", { key: '453a7f62d3fc7f9127ad3cdd56d1ab5eb8ec443d', class: `bs-input ${this.error ? 'bs-input--error' : ''}` }, this.label && (
         // "control" is a fixed id, not a generated one -- safe because Shadow DOM scopes ids
         // to this instance's own shadow root, so it can never collide with another bs-input.
-        h("label", { key: '95eb3e3308a746797565480318b35ea2f20c36d0', part: "label", class: "bs-input__label", htmlFor: "control" }, this.label, this.required && (h("span", { key: '5c30e73a9e474ac3138aff9868e6b98d42d3771c', part: "required", class: "bs-input__required", "aria-hidden": "true" }, "*")))), this.type === 'pin' ? this.renderPinField() : this.type === 'initials' ? this.renderInitialsField() : this.renderField(), this.error ? (h("span", { id: "description-or-error", part: "error", class: "bs-input__error" }, h("svg", { part: "error-icon", class: "bs-input__error-icon", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" }, h("circle", { cx: "8", cy: "8", r: "6.5", stroke: "currentColor", "stroke-width": "1.2" }), h("path", { d: "M8 5V8.5", stroke: "currentColor", "stroke-width": "1.2", "stroke-linecap": "round" }), h("circle", { cx: "8", cy: "11", r: "0.75", fill: "currentColor" })), this.error)) : this.description ? (h("span", { id: "description-or-error", part: "description", class: "bs-input__description" }, this.description)) : null));
+        h("label", { key: '3c416fdcd928a9c96d902b6367ee9a5eb0680f28', part: "label", class: "bs-input__label", htmlFor: "control" }, this.label, this.required && (h("span", { key: 'a22575f1ba2bbce601b9bf65d475bdd3abd4c4b9', part: "required", class: "bs-input__required", "aria-hidden": "true" }, "*")))), this.type === 'pin' ? this.renderPinField() : this.type === 'initials' ? this.renderInitialsField() : this.renderField(), this.error ? (h("span", { id: "description-or-error", part: "error", class: "bs-input__error" }, h("svg", { part: "error-icon", class: "bs-input__error-icon", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" }, h("circle", { cx: "8", cy: "8", r: "6.5", stroke: "currentColor", "stroke-width": "1.2" }), h("path", { d: "M8 5V8.5", stroke: "currentColor", "stroke-width": "1.2", "stroke-linecap": "round" }), h("circle", { cx: "8", cy: "11", r: "0.75", fill: "currentColor" })), this.error)) : this.description ? (h("span", { id: "description-or-error", part: "description", class: "bs-input__description" }, this.description)) : null));
     }
     static get is() { return "bs-input"; }
     static get encapsulation() { return "shadow"; }

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: '274c9fe8ed3c71e81758bbbc04880c365a79da14', part: "list", class: "bs-menu", role: "menu" }, h("slot", { key: '0011856560d7b7e7ef0e72ef54e151e26d192eaf' })));
     }
     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: 'ea5c64d6f4e5809b323cc55aeceb306666d57693', 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: '7e3ca7fcfabfc54151608b12a49c43d9192d449d', part: "icon", class: `bs-menu-item__icon ${this.hasIcon ? 'bs-menu-item__icon--has-content' : ''}` }, h("slot", { key: '49e8e51c8521b5c5bc0d341a1b915b9ed9b4274b', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: 'e453517c12cea42f93c8eae4f663269984dffe59', part: "label", class: "bs-menu-item__label" }, h("slot", { key: 'b268cced23bebc40560209eaab856dab51c2cd38' }))));
     }
     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: '0672f1f0264fb21d352bcdc1400d9cc712e703d0', "aria-label": "Pagination" }, h("ul", { key: '525ba6927de5a4b37a258a1513ac08d0e72ecef7', part: "list", class: "bs-pagination__list" }, h("li", { key: 'c40905f2ccf7fa9df67cde3c106d5f176f7bda4e', part: "item", class: "bs-pagination__item" }, h("button", { key: 'e09624f4c9a006a69d2c4dab14c744abb347b804', 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: '52e2a323c484f208c2dcbd0a783241eecdb6435d' }))), 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: '01a3a6e391db347827cad882dcd762a246b2dd38', part: "item", class: "bs-pagination__item" }, h("button", { key: 'cf7389e94bf91d3878caefe6053aaa923d509b29', 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: 'a77f841c472840f7d1560715e88b823ce65c8e9b' }))))));
     }
     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: '6d78b0c2ec41903227ff468952ac1972a1948f61', class: `bs-radio ${this.disabled ? 'bs-radio--disabled' : ''}` }, h("input", { key: '0d777f016ccc089ef96c66ae36bab7bdda398e4b', class: "bs-radio__input", type: "radio", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, onChange: this.onChange }), h("span", { key: '7fbcc84ffad6dfb7304b7d62396ef3733c8ac30c', class: "bs-radio__hit-area" }, h("span", { key: 'a818b5bea42ebdd0713c92a1e70db3c27fe1bd20', class: "bs-radio__state-layer" }, h("span", { key: 'ac42d940f1ad3f868e940ec8507a51595829f369', part: "circle", class: `bs-radio__circle ${this.checked ? 'bs-radio__circle--selected' : ''}` }, this.checked && h("span", { key: 'b56060d980c6579b31f8f9de0cd7367b0c145955', part: "dot", class: "bs-radio__dot" })))), h("span", { key: '287cadc837f4477c12c46e01c94799d951746ce6', part: "label", class: "bs-radio__label" }, h("slot", { key: '0230d91af5c327b7a941c6e5b0459f82fda2b516' }))));
     }
     static get is() { return "bs-radio"; }
     static get encapsulation() { return "shadow"; }

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: '753542a7656a7794bc572c25530f0a5eb1669d90', class: "bs-source-link__left" }, h("span", { key: 'fd80592c0236828d9a42c5e38136f8ef0534cb4c', class: "bs-source-link__filename-row" }, h("span", { key: '94343cc0f4defb5db6398758ae415dbf15b78496', part: "icon", class: "bs-source-link__icon" }, h("slot", { key: '3c07138dd24d92ee705185fa911aea7afff12a80', name: "icon" }, h(FileTextIcon, { key: 'ec9732d23d30f5b6a2300a25195369bd5f48db28' }))), h("p", { key: 'a74356f5ccc3afb88900b726432f3205d8a10fc5', part: "filename", class: "bs-source-link__filename" }, this.fileName)), h("span", { key: '682fcd2ecc83004dc0f59f93c3cf7b60dd9c6399', class: "bs-source-link__meta" }, this.sourceName && (h("span", { key: '6dc9967534fb2cf0d23f50a00e837d2979438af2', part: "source", class: "bs-source-link__source" }, this.sourceName)), this.sourceName && this.version && h("span", { key: '3e8679e0495224b3e178ec963da886c520880e74', class: "bs-source-link__dot", "aria-hidden": "true" }), this.version && (h("span", { key: '9ccb6b36baebadb43531c58a1668838d3073fc05', part: "version", class: "bs-source-link__version" }, this.version)))),
+            h("span", { key: '0dd405de92bbda04ddf6aeb137cc2bfa4687bcb9', part: "arrow", class: "bs-source-link__arrow", "aria-hidden": "true" }, h(ArrowUpRightIcon, { key: '4b07b527923871b6ece0a48800a1bf30812c53df' })),
         ];
         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: 'aed14a6d1d81b19d7d53fe9a536b2eb4912a2108', 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();
+    });
+});