@brandsync/wc 1.0.0 → 1.2.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-webcomponents/Brandsync-webcomponents/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-webcomponents/Brandsync-webcomponents/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: '274c9fe8ed3c71e81758bbbc04880c365a79da14', part: "list", class: "bs-menu", role: "menu" }, h("slot", { key: '0011856560d7b7e7ef0e72ef54e151e26d192eaf' })));
+        return (h("div", { key: '3eec5b00fa0448900321d3f0b4b60f924b404c82', part: "list", class: "bs-menu", role: "menu" }, h("slot", { key: '4ba792af9042becd0b4dc9733fb835e2e9429442' })));
     }
     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: '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' }))));
+        return (h("button", { key: '7f167cd83f9a8eeae18f128355d5ffb8f436ac79', 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: '4df57b5696b2c4853f6ea94b0316b6ae5094708b', part: "icon", class: `bs-menu-item__icon ${this.hasIcon ? 'bs-menu-item__icon--has-content' : ''}` }, h("slot", { key: '31a576332ed664d476376d1ae526dea00f6b9a3d', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: 'fc59ab3bb2c7229a97c3aff9a0442e8c3d346e96', part: "label", class: "bs-menu-item__label" }, h("slot", { key: '1d295c872f60b32e8230acbc2f63474b4d869bc8' }))));
     }
     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: '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' }))))));
+        return (h("nav", { key: 'd9f5e2b792e86a7d4d2571986a4fac1ae4f44fdc', "aria-label": "Pagination" }, h("ul", { key: 'cd277ba70a358c6425ed507378190373f4e39ecc', part: "list", class: "bs-pagination__list" }, h("li", { key: 'a0a1071f87a56c4c7c060261382ab70a4dc8c1fa', part: "item", class: "bs-pagination__item" }, h("button", { key: '6a6f0a0141db4c12f9a3d39c6ae609d003be308a', 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: '8687c2b631c801a89104718f370ac811d75b6ba4' }))), 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: '27dfa774e3e541706a45a8d078c6ce1299128733', part: "item", class: "bs-pagination__item" }, h("button", { key: 'eaf59317f590798049f9206596b7ffd6b30c3429', 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: 'ecbc2337e1db1dcf15f69f098b28c0d560aece9a' }))))));
     }
     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: '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' }))));
+        return (h("label", { key: 'd2b90d388d4a165490c9e97f4716dc7b07a97d48', class: `bs-radio ${this.disabled ? 'bs-radio--disabled' : ''}` }, h("input", { key: 'a748a2fbcf810332d4046c4daec9c4a138ee127d', class: "bs-radio__input", type: "radio", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, onChange: this.onChange }), h("span", { key: 'f4aa8ca7333a598d921cad22c2ceb9e44745dbf4', class: "bs-radio__hit-area" }, h("span", { key: 'ecc93fe3be2284e86d2e8a8539edad55d40ce176', class: "bs-radio__state-layer" }, h("span", { key: 'e0f23810c8a7608654a75718aff71c468c24aecf', part: "circle", class: `bs-radio__circle ${this.checked ? 'bs-radio__circle--selected' : ''}` }, this.checked && h("span", { key: 'bb25cca2041b6c8a8978ee81d3c745530a1b660c', part: "dot", class: "bs-radio__dot" })))), h("span", { key: 'f8acfe4cac4182d922c63d7d9e96241c3eefabe9', part: "label", class: "bs-radio__label" }, h("slot", { key: '4b50c3944202d40f268c1e55bea8804273339e51' }))));
     }
     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-webcomponents/Brandsync-webcomponents/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-webcomponents/Brandsync-webcomponents/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: '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' })),
+            h("span", { key: '2729f16097550b7d60f116006c0cce86085e7fe4', class: "bs-source-link__left" }, h("span", { key: 'ba631a3a1c9c42e855dcbeb9554808dbb1b1f564', class: "bs-source-link__filename-row" }, h("span", { key: '324fec2cf91add6f8b7d7a5eeecfb8d5bcf8d087', part: "icon", class: "bs-source-link__icon" }, h("slot", { key: '504e4702cfe7c49c1c8186f12e5e893dc0cf166d', name: "icon" }, h(FileTextIcon, { key: 'c7eeca554f6b7fa7b4a7091676ccf6344292abc4' }))), h("p", { key: '7631367fe476e307120ea7e6f0f529016bbc86f7', part: "filename", class: "bs-source-link__filename" }, this.fileName)), h("span", { key: 'd67eaeb3e770d9119698bafe8f5c952b99999f5d', class: "bs-source-link__meta" }, this.sourceName && (h("span", { key: '67a08ca2742a10ac99734724e6a4ff0e1abfe870', part: "source", class: "bs-source-link__source" }, this.sourceName)), this.sourceName && this.version && h("span", { key: '5416ffb3915e03d901901455a47fd97ee7eadde5', class: "bs-source-link__dot", "aria-hidden": "true" }), this.version && (h("span", { key: '2c404027613850e260f93ed561306aa73a9eefd0', part: "version", class: "bs-source-link__version" }, this.version)))),
+            h("span", { key: '92e95ac26643f3035dc827a568512032622071e3', part: "arrow", class: "bs-source-link__arrow", "aria-hidden": "true" }, h(ArrowUpRightIcon, { key: 'baf53b5ec528ddf042f1717efdf51658a03aae3f' })),
         ];
         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.js

@@ -61,7 +61,7 @@ export class BsStepper {
         });
     }
     render() {
-        return h("slot", { key: 'aed14a6d1d81b19d7d53fe9a536b2eb4912a2108', onSlotchange: this.onSlotChange });
+        return h("slot", { key: 'e897ba6e9153f8449bb5189245a22153d0e7e02e', onSlotchange: this.onSlotChange });
     }
     static get is() { return "bs-stepper"; }
     static get encapsulation() { return "shadow"; }

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

@@ -57,7 +57,7 @@ export class BsStepperStep {
     }
     render() {
         const state = this.state;
-        return (h(Host, { key: '434e05ca150a24b2c9d5e3017198b1c5938460ba', role: "listitem", class: `bs-stepper-step--${this.direction}` }, h("div", { key: 'b9c924f3f834a6c4bb45f6f2b5a655c48f5439fb', class: "bs-stepper-step__top" }, h("span", { key: '89b61162775733afef65c862e60b66e3eb732382', part: "icon", class: `bs-stepper-step__icon bs-stepper-step__icon--${state}` }, state === 'current' && h("span", { key: '7633c0612a65bbbc48fee9da55be642c22e8cc8f', class: "bs-stepper-step__icon-dot" }), state === 'done' && h(CheckIcon, { key: '608682cbba1ad1f3bff467b1139cbd76d703ac2f' }), state === 'error' && h(ExclamationIcon, { key: '51123ab8c6a73faad6905c52065af8b59325a819' })), h("span", { key: '93d157b4df08963ab5febcf0cf855575cc1ed53f', part: "connector", class: "bs-stepper-step__connector", "aria-hidden": "true" }, h("span", { key: '1af364efa632e94cf6e51a3e95f94b82dd1a51fd', class: "bs-stepper-step__connector-line" }))), h("span", { key: '3fb8c121d7180d82000ce516955e2597a43cefff', part: "label", class: `bs-stepper-step__label bs-stepper-step__label--${state}` }, h("span", { key: '07c716576b437a6e936be7746fa5db130bdf5e70', part: "name", class: "bs-stepper-step__name" }, this.name), this.showDescription && this.description && (h("span", { key: '8240af6eca62f42101c3101e653d6e4b3c1470da', part: "description", class: "bs-stepper-step__description" }, this.description)))));
+        return (h(Host, { key: '23bdc6334a36d9b2dd28719b9b23fbc17ad8f29b', role: "listitem", class: `bs-stepper-step--${this.direction}` }, h("div", { key: '388e17882bb5215c33e0665107acbcff5c7b4c9c', class: "bs-stepper-step__top" }, h("span", { key: '6cf79ab50a94f9578e76f14ca23cdfa984ef394b', part: "icon", class: `bs-stepper-step__icon bs-stepper-step__icon--${state}` }, state === 'current' && h("span", { key: '8081181e8865a29f703c74d5a20183513bdf2b66', class: "bs-stepper-step__icon-dot" }), state === 'done' && h(CheckIcon, { key: '92755c827c9c09b1bae504daabd2067fc498b355' }), state === 'error' && h(ExclamationIcon, { key: '62ac0a0826b8f8b507fcd0a7c47bff3c39f804b4' })), h("span", { key: 'a1c15ede35ab01d876a0289552dffc37c75626d1', part: "connector", class: "bs-stepper-step__connector", "aria-hidden": "true" }, h("span", { key: '5029f8f629af1091bcb8fa2a47ebe12a7bd6628e', class: "bs-stepper-step__connector-line" }))), h("span", { key: '3835e986646f619751043ab0eeb1b5d977f22a58', part: "label", class: `bs-stepper-step__label bs-stepper-step__label--${state}` }, h("span", { key: '5da4053ea5ecf588853b5d9678737a67b7aadbe1', part: "name", class: "bs-stepper-step__name" }, this.name), this.showDescription && this.description && (h("span", { key: 'd5544b97eefe9311ac13f0cbcd4bf6d87bc24ca5', part: "description", class: "bs-stepper-step__description" }, this.description)))));
     }
     static get is() { return "bs-stepper-step"; }
     static get encapsulation() { return "shadow"; }
@@ -161,7 +161,7 @@ export class BsStepperStep {
                     "references": {
                         "BsStepperStepComputedState": {
                             "location": "local",
-                            "path": "/Users/vivka/brandsync-web-components/src/components/bs-stepper/bs-stepper-step/bs-stepper-step.tsx",
+                            "path": "/home/runner/work/Brandsync-webcomponents/Brandsync-webcomponents/packages/wc/src/components/bs-stepper/bs-stepper-step/bs-stepper-step.tsx",
                             "id": "src/components/bs-stepper/bs-stepper-step/bs-stepper-step.tsx::BsStepperStepComputedState"
                         }
                     }
@@ -187,7 +187,7 @@ export class BsStepperStep {
                     "references": {
                         "BsStepperDirection": {
                             "location": "local",
-                            "path": "/Users/vivka/brandsync-web-components/src/components/bs-stepper/bs-stepper-step/bs-stepper-step.tsx",
+                            "path": "/home/runner/work/Brandsync-webcomponents/Brandsync-webcomponents/packages/wc/src/components/bs-stepper/bs-stepper-step/bs-stepper-step.tsx",
                             "id": "src/components/bs-stepper/bs-stepper-step/bs-stepper-step.tsx::BsStepperDirection"
                         }
                     }

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

@@ -58,7 +58,7 @@ export class BsSwitch {
         const knobClasses = ['bs-switch__knob', `bs-switch__knob--${this.size}`, this.disabled ? 'bs-switch__knob--disabled' : '']
             .filter(Boolean)
             .join(' ');
-        return (h("label", { key: '166f681e2f776beda7d084c59437f1fff09a4ca8', class: `bs-switch ${this.disabled ? 'bs-switch--disabled' : ''}` }, h("input", { key: '15a147b4c9ce829ffd1a233331eb0dc177d95f87', class: "bs-switch__input", type: "checkbox", role: "switch", checked: this.checked, disabled: this.disabled, "aria-checked": String(this.checked), "aria-label": this.ariaLabel, onChange: this.onChange }), h("span", { key: '97e17ef669469c8b0751c2c950fcf9b17a12cb77', part: "track", class: trackClasses }, h("span", { key: '218b41fc9943769b41a8959d7715740dc3a14f4e', part: "knob", class: knobClasses })), h("span", { key: 'd967c820aeb62b522726ad7aff0aeb96ff59276f', part: "label", class: "bs-switch__label" }, h("slot", { key: '507e82bc8eb6389c79cc27cd8ae98b583ec6bc1c' }))));
+        return (h("label", { key: '72a1a031e9ed8763a2b60f3c23de18973cc7409d', class: `bs-switch ${this.disabled ? 'bs-switch--disabled' : ''}` }, h("input", { key: '90427f6930abcb294526caa912331a568f6eaaeb', class: "bs-switch__input", type: "checkbox", role: "switch", checked: this.checked, disabled: this.disabled, "aria-checked": String(this.checked), "aria-label": this.ariaLabel, onChange: this.onChange }), h("span", { key: 'be4eb4528f413527e67f38201c20ca86eeef37c1', part: "track", class: trackClasses }, h("span", { key: '030a60024a77bfae2f78a40128dd62a8581f5fd1', part: "knob", class: knobClasses })), h("span", { key: '5792002eed1c0489a1456e362f0fd3c290522834', part: "label", class: "bs-switch__label" }, h("slot", { key: '9dadf202bcde1760dcda56ca84155ecdb117b746' }))));
     }
     static get is() { return "bs-switch"; }
     static get encapsulation() { return "shadow"; }
@@ -84,7 +84,7 @@ export class BsSwitch {
                     "references": {
                         "BsSwitchSize": {
                             "location": "local",
-                            "path": "/Users/vivka/brandsync-web-components/src/components/bs-switch/bs-switch.tsx",
+                            "path": "/home/runner/work/Brandsync-webcomponents/Brandsync-webcomponents/packages/wc/src/components/bs-switch/bs-switch.tsx",
                             "id": "src/components/bs-switch/bs-switch.tsx::BsSwitchSize"
                         }
                     }

package/dist/collection/components/bs-tab/bs-inline-tab/bs-inline-tab.js

@@ -86,7 +86,7 @@ export class BsInlineTab {
     };
     render() {
         const iconOnly = this.hasIcon && !this.hasLabel;
-        return (h("button", { key: 'f500457efe9f3397d7137a3dc647758e59d601a1', type: "button", part: "tab", role: "tab", class: `bs-inline-tab ${this.selected ? 'bs-inline-tab--selected' : ''} ${this.disabled ? 'bs-inline-tab--disabled' : ''} ${iconOnly ? 'bs-inline-tab--icon-only' : ''} ${this.hasIcon ? 'bs-inline-tab--has-icon' : ''}`, disabled: this.disabled, "aria-selected": String(this.selected), "aria-disabled": this.disabled ? 'true' : undefined, "aria-label": this.ariaLabel, onClick: this.onClick }, h("span", { key: '8ebede54d5ebd8a4e67a721dfc62e9c7d022fef9', part: "icon", class: `bs-inline-tab__icon ${this.hasIcon ? 'bs-inline-tab__icon--has-content' : ''}` }, h("slot", { key: '1e742bf36b7342966829aad269ce21754653fd1f', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: 'b457e2134cde29157add1d315835e081727dbf17', part: "label", class: `bs-inline-tab__label ${this.hasLabel ? 'bs-inline-tab__label--has-content' : ''}` }, h("slot", { key: '2d50e9691930fac8b0dada3614f3a19b52e6bb8d', onSlotchange: this.onLabelSlotchange }))));
+        return (h("button", { key: '613b3ae3cfc8f3589a4c98d834cebadeb7d251c2', type: "button", part: "tab", role: "tab", class: `bs-inline-tab ${this.selected ? 'bs-inline-tab--selected' : ''} ${this.disabled ? 'bs-inline-tab--disabled' : ''} ${iconOnly ? 'bs-inline-tab--icon-only' : ''} ${this.hasIcon ? 'bs-inline-tab--has-icon' : ''}`, disabled: this.disabled, "aria-selected": String(this.selected), "aria-disabled": this.disabled ? 'true' : undefined, "aria-label": this.ariaLabel, onClick: this.onClick }, h("span", { key: 'ee761ca1154bc2c111f5691dc2958f191ec75170', part: "icon", class: `bs-inline-tab__icon ${this.hasIcon ? 'bs-inline-tab__icon--has-content' : ''}` }, h("slot", { key: '2387c2f156ba8207ab337e8f32662a50765b70c4', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: 'e5c4ede4855ba79deffb7566c178c3339605b56c', part: "label", class: `bs-inline-tab__label ${this.hasLabel ? 'bs-inline-tab__label--has-content' : ''}` }, h("slot", { key: '20d73f50caad707f3f5b6853bbda906ced0e3620', onSlotchange: this.onLabelSlotchange }))));
     }
     static get is() { return "bs-inline-tab"; }
     static get encapsulation() { return "shadow"; }

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

@@ -99,7 +99,7 @@ export class BsTab {
         const iconOnly = this.hasIcon && !this.hasLabel;
         const vertical = this.hasIcon && this.hasLabel && this.iconPosition === 'top';
         const showBadge = this.hasBadge && !iconOnly && !vertical;
-        return (h("button", { key: '9459bb70d5a9d6152f8339505c9b2bdeac846040', type: "button", part: "tab", role: "tab", class: `bs-tab ${this.selected ? 'bs-tab--selected' : ''} ${this.disabled ? 'bs-tab--disabled' : ''} ${iconOnly ? 'bs-tab--icon-only' : ''} ${vertical ? 'bs-tab--vertical' : ''}`, disabled: this.disabled, "aria-selected": String(this.selected), "aria-disabled": this.disabled ? 'true' : undefined, "aria-label": this.ariaLabel, onClick: this.onClick }, h("span", { key: '270fc529b567e7acf1cd087d11ca1486a4f57398', part: "icon", class: `bs-tab__icon ${this.hasIcon ? 'bs-tab__icon--has-content' : ''}` }, h("slot", { key: '679bbd689b8381b57e44ce12ecd7a0fc13bcdb28', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: '48cc55b855d58ebefcb1aeed92e8d23c5245778a', part: "label", class: `bs-tab__label ${this.hasLabel ? 'bs-tab__label--has-content' : ''}` }, h("slot", { key: 'f35e484c8d52507b81f96cad42f169a388f15a4d', onSlotchange: this.onLabelSlotchange })), h("span", { key: '637e767ef63781c97675bd296f45778025bd23bb', part: "badge", class: `bs-tab__badge ${showBadge ? 'bs-tab__badge--has-content' : ''}` }, h("slot", { key: '66bd5e481528d69d5f6a15641bdd8f911ea7b2aa', name: "badge", onSlotchange: this.onBadgeSlotchange })), h("span", { key: '5ecc8124efb448f67bc470bd2473e3e988619fbf', part: "indicator", class: "bs-tab__indicator" })));
+        return (h("button", { key: '108e2a145203f9686056af4ef0afaccb9d2db30a', type: "button", part: "tab", role: "tab", class: `bs-tab ${this.selected ? 'bs-tab--selected' : ''} ${this.disabled ? 'bs-tab--disabled' : ''} ${iconOnly ? 'bs-tab--icon-only' : ''} ${vertical ? 'bs-tab--vertical' : ''}`, disabled: this.disabled, "aria-selected": String(this.selected), "aria-disabled": this.disabled ? 'true' : undefined, "aria-label": this.ariaLabel, onClick: this.onClick }, h("span", { key: '16ac002486b78656a93cdb79ec2c496784fc97bd', part: "icon", class: `bs-tab__icon ${this.hasIcon ? 'bs-tab__icon--has-content' : ''}` }, h("slot", { key: '18eb1f6346db1658af06d4fd0fe3b9e647459abe', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: 'f97b7760370940a57d240635aa5680ffab053be8', part: "label", class: `bs-tab__label ${this.hasLabel ? 'bs-tab__label--has-content' : ''}` }, h("slot", { key: '2ba740311a892af6d6db0d84ad0f126ca35c48de', onSlotchange: this.onLabelSlotchange })), h("span", { key: 'f1090ed9db4149673c29d1e62ec62db024c50868', part: "badge", class: `bs-tab__badge ${showBadge ? 'bs-tab__badge--has-content' : ''}` }, h("slot", { key: 'a594d11d28f47d5e2665d3f1378892f8fb68c4aa', name: "badge", onSlotchange: this.onBadgeSlotchange })), h("span", { key: '1fd376b6321eeeec0e0a67000bd0c9d5166f9a40', part: "indicator", class: "bs-tab__indicator" })));
     }
     static get is() { return "bs-tab"; }
     static get encapsulation() { return "shadow"; }
@@ -164,7 +164,7 @@ export class BsTab {
                     "references": {
                         "BsTabIconPosition": {
                             "location": "local",
-                            "path": "/Users/vivka/brandsync-web-components/src/components/bs-tab/bs-tab/bs-tab.tsx",
+                            "path": "/home/runner/work/Brandsync-webcomponents/Brandsync-webcomponents/packages/wc/src/components/bs-tab/bs-tab/bs-tab.tsx",
                             "id": "src/components/bs-tab/bs-tab/bs-tab.tsx::BsTabIconPosition"
                         }
                     }

package/dist/collection/components/bs-tab/bs-tabs/bs-tabs.js

@@ -50,7 +50,7 @@ export class BsTabs {
     }
     render() {
         const vertical = this.orientation === 'vertical';
-        return (h("div", { key: '0b871aaeed20b903217a2c458df5d507f4fed4e0', part: "tablist", role: "tablist", "aria-orientation": this.orientation, class: `bs-tabs bs-tabs--${this.type} ${vertical ? 'bs-tabs--vertical' : ''}` }, h("slot", { key: '0d8f3a81a14b1225f4c1d1ef2c241b16b39122ad' })));
+        return (h("div", { key: '625a82decaddca7fc41585696f15a8fdd19c3127', part: "tablist", role: "tablist", "aria-orientation": this.orientation, class: `bs-tabs bs-tabs--${this.type} ${vertical ? 'bs-tabs--vertical' : ''}` }, h("slot", { key: '059943f777aaf60a2de4026bcb25f561f66a5020' })));
     }
     static get is() { return "bs-tabs"; }
     static get encapsulation() { return "shadow"; }
@@ -75,7 +75,7 @@ export class BsTabs {
                     "references": {
                         "BsTabsType": {
                             "location": "local",
-                            "path": "/Users/vivka/brandsync-web-components/src/components/bs-tab/bs-tabs/bs-tabs.tsx",
+                            "path": "/home/runner/work/Brandsync-webcomponents/Brandsync-webcomponents/packages/wc/src/components/bs-tab/bs-tabs/bs-tabs.tsx",
                             "id": "src/components/bs-tab/bs-tabs/bs-tabs.tsx::BsTabsType"
                         }
                     }
@@ -101,7 +101,7 @@ export class BsTabs {
                     "references": {
                         "BsTabsOrientation": {
                             "location": "local",
-                            "path": "/Users/vivka/brandsync-web-components/src/components/bs-tab/bs-tabs/bs-tabs.tsx",
+                            "path": "/home/runner/work/Brandsync-webcomponents/Brandsync-webcomponents/packages/wc/src/components/bs-tab/bs-tabs/bs-tabs.tsx",
                             "id": "src/components/bs-tab/bs-tabs/bs-tabs.tsx::BsTabsOrientation"
                         }
                     }

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

@@ -0,0 +1,59 @@
+import { render, h, describe, it, expect } from "@stencil/vitest";
+describe('bs-toast', () => {
+    it('defaults to the "info" state', async () => {
+        const { root } = await render(h("bs-toast", null, "Files uploaded successfully."));
+        const container = root.shadowRoot.querySelector('[part="container"]');
+        expect(container).toHaveClass('bs-toast--info');
+    });
+    ['info', 'success', 'warning', 'error'].forEach(state => {
+        it(`applies the "${state}" state class`, async () => {
+            const { root } = await render(h("bs-toast", { state: state }, "Message"));
+            const container = root.shadowRoot.querySelector('[part="container"]');
+            expect(container).toHaveClass(`bs-toast--${state}`);
+        });
+    });
+    it('renders the slotted message', async () => {
+        const { root } = await render(h("bs-toast", null, "Files uploaded successfully."));
+        expect(root).toHaveTextContent('Files uploaded successfully.');
+    });
+    describe('icon per state', () => {
+        it('renders an icon for the info state', async () => {
+            const { root } = await render(h("bs-toast", { state: "info" }, "Message"));
+            const icon = root.shadowRoot.querySelector('[part="icon"]');
+            expect(icon.querySelector('svg')).not.toBeNull();
+        });
+        it('renders a different icon markup per state', async () => {
+            const renders = await Promise.all(['info', 'success', 'warning', 'error'].map(async (state) => {
+                const { root } = await render(h("bs-toast", { state: state }, "Message"));
+                return root.shadowRoot.querySelector('[part="icon"]').innerHTML;
+            }));
+            expect(new Set(renders).size).toBe(renders.length);
+        });
+    });
+    describe('close button', () => {
+        it('always renders a close button with an accessible name', async () => {
+            const { root } = await render(h("bs-toast", null, "Message"));
+            const close = root.shadowRoot.querySelector('[part="close"]');
+            expect(close).not.toBeNull();
+            expect(close).toEqualAttribute('aria-label', 'Dismiss');
+        });
+        it('emits bsDismiss when the close button is clicked', async () => {
+            const { root, spyOnEvent } = await render(h("bs-toast", null, "Message"));
+            const dismissSpy = spyOnEvent('bsDismiss');
+            root.shadowRoot.querySelector('[part="close"]').click();
+            expect(dismissSpy).toHaveReceivedEventTimes(1);
+        });
+    });
+    describe('aria-live', () => {
+        it('uses aria-live="polite" for non-error states', async () => {
+            const { root } = await render(h("bs-toast", { state: "success" }, "Message"));
+            const container = root.shadowRoot.querySelector('[part="container"]');
+            expect(container).toEqualAttribute('aria-live', 'polite');
+        });
+        it('uses aria-live="assertive" for the error state', async () => {
+            const { root } = await render(h("bs-toast", { state: "error" }, "Message"));
+            const container = root.shadowRoot.querySelector('[part="container"]');
+            expect(container).toEqualAttribute('aria-live', 'assertive');
+        });
+    });
+});

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

@@ -0,0 +1,151 @@
+/**
+ * @prop --bs-toast-radius: Corner radius of the toast. Aliased to --bs-border-radius-100.
+ * @prop --bs-toast-shadow: Elevation shadow, since a toast floats above page content. Aliased to --bs-shadow-md.
+ * @prop --bs-toast-content-padding-y: Top/bottom padding of the content area. Aliased to --bs-spacing-200.
+ * @prop --bs-toast-content-padding-x: Left padding of the content area (the toast's own left edge). Aliased to --bs-spacing-200.
+ * @prop --bs-toast-content-gap: Gap between the icon and the message. Aliased to --bs-spacing-150.
+ * @prop --bs-toast-font-size: Message font size. Aliased to --bs-font-size-md.
+ * @prop --bs-toast-line-height: Message line height. Aliased to --bs-line-height-body-md.
+ * @prop --bs-toast-actions-padding-y: Top/bottom padding of the actions area. Aliased to --bs-spacing-50.
+ * @prop --bs-toast-actions-padding-x: Right padding of the actions area (the toast's own right edge). Aliased to --bs-spacing-100.
+ * @prop --bs-toast-close-radius: Corner radius of the close button. Aliased to --bs-border-radius-100.
+ * @prop --bs-toast-surface-info: Toast background, state="info". Aliased to --bs-color-info-container.
+ * @prop --bs-toast-text-info: Icon/message/close color, state="info". Aliased to --bs-text-info.
+ * @prop --bs-toast-surface-warning: Toast background, state="warning". Aliased to --bs-color-warning-container.
+ * @prop --bs-toast-text-warning: Icon/message/close color, state="warning". Aliased to --bs-text-warning.
+ * @prop --bs-toast-surface-success: Toast background, state="success". Aliased to --bs-color-success-container.
+ * @prop --bs-toast-text-success: Icon/message/close color, state="success". Aliased to --bs-text-success.
+ * @prop --bs-toast-surface-error: Toast background, state="error". Aliased to --bs-color-error-container.
+ * @prop --bs-toast-text-error: Icon/message/close color, state="error". Aliased to --bs-text-error.
+ */
+:host {
+  display: inline-flex;
+
+  --bs-toast-radius: var(--bs-border-radius-100);
+  --bs-toast-shadow: var(--bs-shadow-md);
+  --bs-toast-content-padding-y: var(--bs-spacing-200);
+  --bs-toast-content-padding-x: var(--bs-spacing-200);
+  --bs-toast-content-gap: var(--bs-spacing-150);
+  --bs-toast-font-size: var(--bs-font-size-md);
+  --bs-toast-line-height: var(--bs-line-height-body-md);
+  --bs-toast-actions-padding-y: var(--bs-spacing-50);
+  --bs-toast-actions-padding-x: var(--bs-spacing-100);
+  --bs-toast-close-radius: var(--bs-border-radius-100);
+
+  --bs-toast-surface-info: var(--bs-color-info-container);
+  --bs-toast-text-info: var(--bs-text-info);
+
+  --bs-toast-surface-warning: var(--bs-color-warning-container);
+  --bs-toast-text-warning: var(--bs-text-warning);
+
+  --bs-toast-surface-success: var(--bs-color-success-container);
+  --bs-toast-text-success: var(--bs-text-success);
+
+  --bs-toast-surface-error: var(--bs-color-error-container);
+  --bs-toast-text-error: var(--bs-text-error);
+}
+
+.bs-toast {
+  display: flex;
+  align-items: center;
+  border-radius: var(--bs-toast-radius);
+  box-shadow: var(--bs-toast-shadow);
+  font-family: inherit;
+}
+
+/* Each state sets its own surface/text pair -- .bs-toast__icon, .bs-toast__message, and
+   .bs-toast__close all inherit `color` from here rather than each redeclaring it. */
+.bs-toast--info {
+  background: var(--bs-toast-surface-info);
+  color: var(--bs-toast-text-info);
+}
+
+.bs-toast--warning {
+  background: var(--bs-toast-surface-warning);
+  color: var(--bs-toast-text-warning);
+}
+
+.bs-toast--success {
+  background: var(--bs-toast-surface-success);
+  color: var(--bs-toast-text-success);
+}
+
+.bs-toast--error {
+  background: var(--bs-toast-surface-error);
+  color: var(--bs-toast-text-error);
+}
+
+.bs-toast__content {
+  display: flex;
+  align-items: center;
+  gap: var(--bs-toast-content-gap);
+  flex: 1 1 auto;
+  min-width: 0;
+  padding: var(--bs-toast-content-padding-y) 0 var(--bs-toast-content-padding-y) var(--bs-toast-content-padding-x);
+}
+
+.bs-toast__icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  flex-shrink: 0;
+  color: inherit;
+}
+
+.bs-toast__icon svg {
+  width: 24px;
+  height: 24px;
+}
+
+.bs-toast__message {
+  flex: 1 1 auto;
+  min-width: 0;
+  font-size: var(--bs-toast-font-size);
+  line-height: calc(var(--bs-toast-line-height) * 1px);
+}
+
+.bs-toast__actions {
+  display: flex;
+  align-items: center;
+  align-self: stretch;
+  flex-shrink: 0;
+  padding: var(--bs-toast-actions-padding-y) var(--bs-toast-actions-padding-x) var(--bs-toast-actions-padding-y) 0;
+}
+
+.bs-toast__close {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 44px;
+  height: 44px;
+  flex-shrink: 0;
+  padding: 0;
+  border: none;
+  background: transparent;
+  border-radius: var(--bs-toast-close-radius);
+  color: inherit;
+  cursor: pointer;
+}
+
+.bs-toast__close svg {
+  width: 24px;
+  height: 24px;
+}
+
+/* Same color-mix tint technique as bs-snackbar's close button -- a transparent background with
+   only text color, so a real added tint (not an opacity blend toward whatever's behind) is needed
+   for hover/pressed feedback to read correctly on the light pastel state surfaces. */
+.bs-toast__close:hover {
+  background: color-mix(in srgb, currentColor 12%, transparent);
+}
+
+.bs-toast__close:active {
+  background: color-mix(in srgb, currentColor 24%, transparent);
+}
+
+.bs-toast__close:focus-visible {
+  outline: 2px solid currentColor;
+  outline-offset: 2px;
+}

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

@@ -0,0 +1,108 @@
+import { h } from "@stencil/core";
+/**
+ * A transient status message for confirming the result of an action (e.g. "Files uploaded
+ * successfully.") -- a state-specific icon, a message, and a close button.
+ *
+ * This component only renders the toast itself -- it doesn't manage its own visibility, timing, or
+ * stacking. A consumer (typically a small "toast manager" utility) creates one per message and
+ * removes it from the DOM again, whether on a timer or on `bsDismiss`. Figma's spec doesn't show
+ * auto-dismiss timing at all (it's a static visual spec), so this deliberately doesn't invent one.
+ *
+ * @slot - Default slot: the message text.
+ * @part container - The outer toast.
+ * @part icon - The leading icon wrapper.
+ * @part message - The message text wrapper.
+ * @part close - The close button.
+ */
+export class BsToast {
+    /** Semantic state. Each state has its own icon and matching container/text tokens -- there is
+     * no neutral/default state. */
+    state = 'info';
+    /** Fires when the close button is clicked. This component doesn't remove itself from the DOM --
+     * the consumer is expected to do that (or hide it) in response to this event. */
+    bsDismiss;
+    onDismiss = () => {
+        this.bsDismiss.emit();
+    };
+    render() {
+        return (h("div", { key: '46791568d11373681bdb2eae526fc29f93cc1ba6', part: "container", class: `bs-toast bs-toast--${this.state}`, role: "status", "aria-live": this.state === 'error' ? 'assertive' : 'polite' }, h("div", { key: '77b3faf40813c86dd624ec665e6e4eb0e6cb80b8', class: "bs-toast__content" }, h("span", { key: 'b8c2e8d6c729b8aaaf540906f55feaf95ea0d42c', part: "icon", class: "bs-toast__icon", "aria-hidden": "true" }, h(StateIcon, { key: '4c69c6dc371c2f7bc1cf393c293fadfd30fabcea', state: this.state })), h("span", { key: '3938894f0ad2c99bece035b5049b806847b6fc69', part: "message", class: "bs-toast__message" }, h("slot", { key: '35566107844c74a57b37b00d369a8396db821f5f' }))), h("div", { key: 'df56dba231fa2e6cf4ad5bd57bb2b4608161294d', class: "bs-toast__actions" }, h("button", { key: 'c0f78562bd1acbc421b87d6915d48c7768795e78', part: "close", type: "button", class: "bs-toast__close", "aria-label": "Dismiss", onClick: this.onDismiss }, h(CloseIcon, { key: 'b74a4cbb76307190bf9af2651e52791ba814b2af' })))));
+    }
+    static get is() { return "bs-toast"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bs-toast.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bs-toast.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "state": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BsToastState",
+                    "resolved": "\"error\" | \"info\" | \"success\" | \"warning\"",
+                    "references": {
+                        "BsToastState": {
+                            "location": "local",
+                            "path": "/home/runner/work/Brandsync-webcomponents/Brandsync-webcomponents/packages/wc/src/components/bs-toast/bs-toast.tsx",
+                            "id": "src/components/bs-toast/bs-toast.tsx::BsToastState"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Semantic state. Each state has its own icon and matching container/text tokens -- there is\nno neutral/default state."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "state",
+                "defaultValue": "'info'"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "bsDismiss",
+                "name": "bsDismiss",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires when the close button is clicked. This component doesn't remove itself from the DOM --\nthe consumer is expected to do that (or hide it) in response to this event."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+}
+const StateIcon = ({ state }) => {
+    switch (state) {
+        case 'success':
+            return h(CheckCircleIcon, null);
+        case 'warning':
+            return h(WarningIcon, null);
+        case 'error':
+            return h(XCircleIcon, null);
+        case 'info':
+        default:
+            return h(InfoIcon, null);
+    }
+};
+const InfoIcon = () => (h("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, h("path", { d: "M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { d: "M12 11V16.5", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { d: "M12 8.25V7.75", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })));
+const CheckCircleIcon = () => (h("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, h("path", { d: "M8.25 12.75L10.5 15L15.75 9.75", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { d: "M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })));
+const WarningIcon = () => (h("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, h("path", { d: "M10.4384 4.42212C11.1155 3.22528 12.8845 3.22528 13.5616 4.42212L20.6023 16.8508C21.2627 18.0182 20.4022 19.5 19.0407 19.5H4.95933C3.5978 19.5 2.73734 18.0182 3.39773 16.8508L10.4384 4.42212Z", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { d: "M12 9.75V13.5", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { d: "M12 16.25V16.75", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })));
+const XCircleIcon = () => (h("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, h("path", { d: "M9.75 9.75L14.25 14.25", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { d: "M14.25 9.75L9.75 14.25", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { d: "M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })));
+const CloseIcon = () => (h("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, h("path", { d: "M18.75 5.25L5.25 18.75", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { d: "M18.75 18.75L5.25 5.25", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })));