@brandsync/wc 1.2.0 → 1.4.0

package/dist/collection/components/bs-data-table/bs-data-table.css

@@ -1,5 +1,7 @@
 :host {
   display: block;
+  --bs-data-table-cell-padding-y: var(--bs-spacing-200);
+  --bs-data-table-cell-padding-x: var(--bs-spacing-300);
 }
 
 .bs-data-table {
@@ -12,7 +14,7 @@
 
 .bs-data-table__header-cell {
   text-align: left;
-  padding: var(--bs-spacing-200) var(--bs-spacing-300);
+  padding: var(--bs-data-table-cell-padding-y) var(--bs-data-table-cell-padding-x);
   border-bottom: 1px solid var(--bs-border-default);
   font-weight: var(--bs-font-weight-semibold);
   color: var(--bs-text-secondary);
@@ -45,12 +47,12 @@
 }
 
 .bs-data-table__cell {
-  padding: var(--bs-spacing-200) var(--bs-spacing-300);
+  padding: var(--bs-data-table-cell-padding-y) var(--bs-data-table-cell-padding-x);
   border-bottom: 1px solid var(--bs-border-default);
 }
 
 .bs-data-table__select-col {
   width: var(--bs-spacing-500);
-  padding: var(--bs-spacing-200) var(--bs-spacing-300);
+  padding: var(--bs-data-table-cell-padding-y) var(--bs-data-table-cell-padding-x);
   border-bottom: 1px solid var(--bs-border-default);
 }

package/dist/collection/components/bs-data-table/bs-data-table.js

@@ -53,12 +53,29 @@ export class BsDataTable {
         this.selectedIds = next;
         this.bsRowSelect.emit({ id: row.id, selected });
     };
+    onSelectAllChange = (ev) => {
+        const selected = ev.target.checked;
+        this.selectedIds = selected ? new Set(this.rows.map(row => row.id)) : new Set();
+        for (const row of this.rows) {
+            this.bsRowSelect.emit({ id: row.id, selected });
+        }
+    };
+    /** Clears the current row selection and emits `bsRowSelect` for each row that was selected, so
+     * parent-held selection state stays in sync. Lets consumers reset selection without remounting
+     * the whole table. */
+    async clearSelection() {
+        const previouslySelected = Array.from(this.selectedIds);
+        this.selectedIds = new Set();
+        for (const id of previouslySelected) {
+            this.bsRowSelect.emit({ id, selected: false });
+        }
+    }
     render() {
-        return (h("table", { key: 'c997c047867ae5d446eda4f2ad5260bd956b4255', part: "table", class: "bs-data-table" }, h("thead", { key: 'bdbe3f8c07ef23115d3a8a32a15e84a02e162894', part: "head" }, h("tr", { key: '84f7e89fefe44c680b397bd92bf2b8070e9b943d' }, this.selectable && h("th", { key: '925dbfa36580ef0818e2739ba602161668eedfd5', class: "bs-data-table__select-col" }), this.columns.map(column => {
+        return (h("table", { key: '76fd11f8cad916ca3f33d1da13465246982ded6d', part: "table", class: "bs-data-table" }, h("thead", { key: 'd95c8c072858c50c8f02a2858dbe82c8ab532491', part: "head" }, h("tr", { key: '949e31f6329a890a8602bf487c0436007b58b517' }, this.selectable && (h("th", { key: '228053a10aeb0dc45e2449708fdad3c0de91977f', class: "bs-data-table__select-col" }, this.rows.length > 0 && (h("input", { key: 'd460d518e751e66071e73d65b2bf460b25a282a0', type: "checkbox", "aria-label": "Select all rows", checked: this.selectedIds.size > 0 && this.selectedIds.size === this.rows.length, indeterminate: this.selectedIds.size > 0 && this.selectedIds.size < this.rows.length, onChange: this.onSelectAllChange })))), this.columns.map(column => {
             const isSorted = this.sortColumn === column.key;
             const ariaSort = column.sortable ? (isSorted ? (this.sortDirection === 'asc' ? 'ascending' : 'descending') : 'none') : undefined;
             return (h("th", { part: "header-cell", class: "bs-data-table__header-cell", "aria-sort": ariaSort }, column.sortable ? (h("button", { type: "button", class: "bs-data-table__sort-button", onClick: () => this.onHeaderClick(column) }, column.label, isSorted && h("span", { class: "bs-data-table__sort-indicator" }, this.sortDirection === 'asc' ? ' ▲' : ' ▼'))) : (column.label)));
-        }))), h("tbody", { key: '96985dc5ace9126094984bd1b876c5eb5209bb39', part: "body" }, this.rows.map(row => (h("tr", { part: "row", class: "bs-data-table__row" }, this.selectable && (h("td", { class: "bs-data-table__select-col" }, h("input", { type: "checkbox", checked: this.selectedIds.has(row.id), onChange: ev => this.onRowCheckboxChange(row, ev) }))), this.columns.map(column => this.cellRenderer ? (
+        }))), h("tbody", { key: '2f935040a6fd3a3356f178ce23724f95248c2730', part: "body" }, this.rows.map(row => (h("tr", { part: "row", class: "bs-data-table__row" }, this.selectable && (h("td", { class: "bs-data-table__select-col" }, h("input", { type: "checkbox", checked: this.selectedIds.has(row.id), onChange: ev => this.onRowCheckboxChange(row, ev) }))), this.columns.map(column => this.cellRenderer ? (
         // cellRenderer is a developer-supplied, trusted function (JS-property-only, never
         // derived from untrusted input) -- its HTML output is intentionally not escaped,
         // same trust model as React's dangerouslySetInnerHTML.
@@ -256,4 +273,25 @@ export class BsDataTable {
                 }
             }];
     }
+    static get methods() {
+        return {
+            "clearSelection": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Clears the current row selection and emits `bsRowSelect` for each row that was selected, so\nparent-held selection state stays in sync. Lets consumers reset selection without remounting\nthe whole table.",
+                    "tags": []
+                }
+            }
+        };
+    }
 }

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: 'd9cf2c23e899ddf058e58e17856ff45fbc94aefe', class: `bs-input ${this.error ? 'bs-input--error' : ''}` }, this.label && (
+        return (h("div", { key: '94db3f8937d133fc88269d7701401f596f384e32', 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: '717e519713f58bf226319378415e2c52fbfddfb1', part: "label", class: "bs-input__label", htmlFor: "control" }, this.label, this.required && (h("span", { key: 'e3352ca754e5d579bfbda81c14ea491d4091c80c', 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: '19ab0ecbf95c9184c68f6b503ddb7371de678eb3', part: "label", class: "bs-input__label", htmlFor: "control" }, this.label, this.required && (h("span", { key: '5c9198c26c50d03723e333a2071a663448c1ff62', 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: '3eec5b00fa0448900321d3f0b4b60f924b404c82', part: "list", class: "bs-menu", role: "menu" }, h("slot", { key: '4ba792af9042becd0b4dc9733fb835e2e9429442' })));
+        return (h("div", { key: '9ddd41b5264edea07a8fd9861a5f0c6bcf922e50', part: "list", class: "bs-menu", role: "menu" }, h("slot", { key: '011a7b612195dbd38047c02acb00756fba1cfc69' })));
     }
     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: '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' }))));
+        return (h("button", { key: 'dc2ecd8c91134844ee1aeb520295fc6dc0fb2fba', 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: '0f20ceeb37ddaf28f231f2ce0897ade44c69d98a', part: "icon", class: `bs-menu-item__icon ${this.hasIcon ? 'bs-menu-item__icon--has-content' : ''}` }, h("slot", { key: '0ba45aa14671240b68113a3ed1e1c923552de077', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: 'fdf7916b79e66b3164260ef399de1e7f8654a246', part: "label", class: "bs-menu-item__label" }, h("slot", { key: '66583fc1d0a0958f0e57c1e4c66f01f77900513d' }))));
     }
     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: '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' }))))));
+        return (h("nav", { key: 'a717e0c64697d3c0da2f15fcd7d12fc4f25d700b', "aria-label": "Pagination" }, h("ul", { key: 'b18b2e0c20057be81a03af983b9fb59ce5f1e782', part: "list", class: "bs-pagination__list" }, h("li", { key: '8255be4c2d821b54f76e2a48e68d68b2efda5b32', part: "item", class: "bs-pagination__item" }, h("button", { key: '35d48190d024595bd5c99c6a897a617b65a08eee', 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: 'c9f3323e63eb497ab717682c0fa28feec19d8033' }))), 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: '809ebb893783eea55974081032bf489761298dce', part: "item", class: "bs-pagination__item" }, h("button", { key: '794f0b9ffd022b5dd973612a54a1c1ac19d46397', 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: 'bb639f2573b34133a77a364a3d3ff2c1e071c694' }))))));
     }
     static get is() { return "bs-pagination"; }
     static get encapsulation() { return "shadow"; }

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

@@ -0,0 +1,96 @@
+import { render, h, describe, it, expect } from "@stencil/vitest";
+// Same math as the component's own private `circumference`/`dashOffset` getters, for computing an
+// expected stroke-dashoffset independently of the implementation.
+const expectedDashOffset = (diameter, strokeWidth, value) => {
+    const radius = (diameter - strokeWidth) / 2;
+    const circumference = 2 * Math.PI * radius;
+    const clamped = Math.min(100, Math.max(0, value));
+    return circumference * (1 - clamped / 100);
+};
+describe('bs-progress', () => {
+    describe('size/type combinations', () => {
+        ['small', 'medium', 'large'].forEach(size => {
+            it(`renders size="${size}" type="determinate"`, async () => {
+                const { root } = await render(h("bs-progress", { size: size, type: "determinate", value: 40 }));
+                expect(root.shadowRoot.querySelector('.bs-progress__ring')).not.toBeNull();
+                expect(root.shadowRoot.querySelector('[part="track"]')).not.toBeNull();
+                expect(root.shadowRoot.querySelector('[part="arc"]')).not.toBeNull();
+            });
+            it(`renders size="${size}" type="indeterminate"`, async () => {
+                const { root } = await render(h("bs-progress", { size: size, type: "indeterminate" }));
+                expect(root.shadowRoot.querySelector('.bs-progress__spinner')).not.toBeNull();
+                expect(root.shadowRoot.querySelector('[part="arc"]')).not.toBeNull();
+            });
+        });
+    });
+    describe('arc sweep', () => {
+        [0, 50, 100].forEach(value => {
+            it(`computes stroke-dashoffset for value=${value} at default size/stroke-width`, async () => {
+                const { root } = await render(h("bs-progress", { value: value }));
+                const arc = root.shadowRoot.querySelector('[part="arc"]');
+                const expected = expectedDashOffset(44, 4, value);
+                expect(Number(arc.getAttribute('stroke-dashoffset'))).toBeCloseTo(expected, 5);
+            });
+        });
+        it('produces a smaller (non-zero) dashoffset for a larger value', async () => {
+            const { root: rootLow } = await render(h("bs-progress", { value: 10 }));
+            const { root: rootHigh } = await render(h("bs-progress", { value: 90 }));
+            const lowOffset = Number(rootLow.shadowRoot.querySelector('[part="arc"]').getAttribute('stroke-dashoffset'));
+            const highOffset = Number(rootHigh.shadowRoot.querySelector('[part="arc"]').getAttribute('stroke-dashoffset'));
+            expect(highOffset).toBeLessThan(lowOffset);
+        });
+    });
+    describe('value clamping', () => {
+        it('clamps a value above 100 down to 100', async () => {
+            const { root } = await render(h("bs-progress", { value: 150 }));
+            const label = root.shadowRoot.querySelector('[part="label"]');
+            expect(label.textContent).toBe('100%');
+            const arc = root.shadowRoot.querySelector('[part="arc"]');
+            expect(Number(arc.getAttribute('stroke-dashoffset'))).toBeCloseTo(0, 5);
+        });
+        it('clamps a negative value up to 0', async () => {
+            const { root } = await render(h("bs-progress", { value: -10 }));
+            const label = root.shadowRoot.querySelector('[part="label"]');
+            expect(label.textContent).toBe('0%');
+            const arc = root.shadowRoot.querySelector('[part="arc"]');
+            const expected = expectedDashOffset(44, 4, 0);
+            expect(Number(arc.getAttribute('stroke-dashoffset'))).toBeCloseTo(expected, 5);
+        });
+    });
+    describe('label', () => {
+        it('renders "${value}%" when determinate and showLabel is true (default)', async () => {
+            const { root } = await render(h("bs-progress", { value: 42 }));
+            const label = root.shadowRoot.querySelector('[part="label"]');
+            expect(label).not.toBeNull();
+            expect(label.textContent).toBe('42%');
+        });
+        it('omits the label when showLabel is false', async () => {
+            const { root } = await render(h("bs-progress", { value: 42, showLabel: false }));
+            expect(root.shadowRoot.querySelector('[part="label"]')).toBeNull();
+        });
+        it('omits the label when type is indeterminate, even with showLabel true', async () => {
+            const { root } = await render(h("bs-progress", { type: "indeterminate", showLabel: true }));
+            expect(root.shadowRoot.querySelector('[part="label"]')).toBeNull();
+        });
+    });
+    describe('aria attributes', () => {
+        it('sets aria-valuemin/max/now for determinate', async () => {
+            const { root } = await render(h("bs-progress", { type: "determinate", value: 65 }));
+            const box = root.shadowRoot.querySelector('.bs-progress__box');
+            expect(box).toEqualAttribute('role', 'progressbar');
+            expect(box).toEqualAttribute('aria-valuemin', '0');
+            expect(box).toEqualAttribute('aria-valuemax', '100');
+            expect(box).toEqualAttribute('aria-valuenow', '65');
+            expect(box.hasAttribute('aria-busy')).toBe(false);
+        });
+        it('omits aria-valuenow and sets aria-busy for indeterminate', async () => {
+            const { root } = await render(h("bs-progress", { type: "indeterminate" }));
+            const box = root.shadowRoot.querySelector('.bs-progress__box');
+            expect(box).toEqualAttribute('role', 'progressbar');
+            expect(box.hasAttribute('aria-valuenow')).toBe(false);
+            expect(box.hasAttribute('aria-valuemin')).toBe(false);
+            expect(box.hasAttribute('aria-valuemax')).toBe(false);
+            expect(box).toEqualAttribute('aria-busy', 'true');
+        });
+    });
+});

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

@@ -0,0 +1,119 @@
+/**
+ * @prop --bs-progress-gap: Gap between the ring and the label. Aliased to --bs-spacing-100.
+ * @prop --bs-progress-track: Track circle color (background ring). Aliased to --bs-neutral-200.
+ * @prop --bs-progress-arc: Arc/spinner circle color. Aliased to --bs-color-primary-default (the
+ *   same brand-blue accent bs-button's primary variant uses).
+ * @prop --bs-progress-label-color: Percentage label text color. Aliased to --bs-color-primary-default.
+ * @prop --bs-progress-label-font-size-sm: Label font size, size="small"/"medium". Aliased to --bs-fontsize-caption-md.
+ * @prop --bs-progress-label-line-height-sm: Label line height, size="small"/"medium". Aliased to --bs-line-height-caption-md.
+ * @prop --bs-progress-label-font-size-lg: Label font size, size="large". Aliased to --bs-fontsize-body-md.
+ * @prop --bs-progress-label-line-height-lg: Label line height, size="large". Aliased to --bs-line-height-body-md.
+ * @prop --bs-progress-label-font-weight: Label font weight. Aliased to --bs-font-weight-medium.
+ * @prop --bs-progress-spin-duration: Indeterminate spin duration. Aliased to --bs-duration-slower
+ *   if defined by brandsync-tokens, otherwise a plain 1.4s fallback.
+ */
+:host {
+  display: inline-flex;
+
+  --bs-progress-gap: var(--bs-spacing-100);
+  --bs-progress-track: var(--bs-neutral-200);
+  --bs-progress-arc: var(--bs-color-primary-default);
+  --bs-progress-label-color: var(--bs-color-primary-default);
+  --bs-progress-label-font-size-sm: var(--bs-fontsize-caption-md);
+  --bs-progress-label-line-height-sm: var(--bs-line-height-caption-md);
+  --bs-progress-label-font-size-lg: var(--bs-fontsize-body-md);
+  --bs-progress-label-line-height-lg: var(--bs-line-height-body-md);
+  --bs-progress-label-font-weight: var(--bs-font-weight-medium);
+  --bs-progress-spin-duration: 1.4s;
+}
+
+.bs-progress {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--bs-progress-gap);
+  font-family: inherit;
+}
+
+.bs-progress__box {
+  position: relative;
+  display: inline-flex;
+}
+
+.bs-progress__ring {
+  /* SVG rings are drawn starting at 3 o'clock by default -- rotate -90deg so the determinate
+     sweep starts at 12 o'clock, matching the Figma spec. */
+  transform: rotate(-90deg);
+  overflow: visible;
+}
+
+.bs-progress__track {
+  stroke: var(--bs-progress-track);
+}
+
+.bs-progress__arc {
+  stroke: var(--bs-progress-arc);
+  transition: stroke-dashoffset 0.3s ease;
+}
+
+/* Indeterminate: Figma's ring is a fading "comet tail" (transparent -> solid color) sweeping
+   around with a visible gap, not a flat-colored partial arc -- SVG has no angular/conic gradient
+   primitive, so this uses a CSS conic-gradient (color varies by angle) for the fade, masked down
+   from a solid disc to a ring of exactly `strokeWidth` via a radial-gradient mask, then rotated
+   continuously. `--bs-progress-spinner-stroke-width`/`--bs-progress-spinner-sweep` are set
+   per-instance inline (they depend on the `strokeWidth` prop). */
+.bs-progress__spinner {
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  background: conic-gradient(from 0deg, transparent 0deg, var(--bs-progress-arc) var(--bs-progress-spinner-sweep), transparent var(--bs-progress-spinner-sweep));
+  -webkit-mask: radial-gradient(
+    farthest-side,
+    transparent calc(100% - var(--bs-progress-spinner-stroke-width) - 1px),
+    #000 calc(100% - var(--bs-progress-spinner-stroke-width))
+  );
+  mask: radial-gradient(
+    farthest-side,
+    transparent calc(100% - var(--bs-progress-spinner-stroke-width) - 1px),
+    #000 calc(100% - var(--bs-progress-spinner-stroke-width))
+  );
+  animation: bs-progress-spin var(--bs-progress-spin-duration) linear infinite;
+}
+
+@keyframes bs-progress-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* Reduced motion: freezing the spin entirely would remove the only visual signal that work is
+   still in progress (there's no label for indeterminate to fall back on), so this slows the
+   rotation to a slow, low-frequency pulse instead of stopping it -- still obviously "in progress"
+   without being motion-sickness-inducing. Same intent as bs-snackbar's spinner, applied as a
+   duration change rather than `animation: none` since indeterminate has no static fallback state
+   to freeze on. */
+@media (prefers-reduced-motion: reduce) {
+  .bs-progress__spinner {
+    animation-duration: calc(var(--bs-progress-spin-duration) * 4);
+  }
+}
+
+.bs-progress__label {
+  color: var(--bs-progress-label-color);
+  font-weight: var(--bs-progress-label-font-weight);
+  text-align: center;
+}
+
+.bs-progress__label--small,
+.bs-progress__label--medium {
+  font-size: var(--bs-progress-label-font-size-sm);
+  line-height: calc(var(--bs-progress-label-line-height-sm) * 1px);
+}
+
+.bs-progress__label--large {
+  font-size: var(--bs-progress-label-font-size-lg);
+  line-height: calc(var(--bs-progress-label-line-height-lg) * 1px);
+}

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

@@ -0,0 +1,212 @@
+import { h } from "@stencil/core";
+// Diameter in px per `size` -- matches the Figma spec's three fixed sizes exactly.
+const DIAMETERS = {
+    small: 44,
+    medium: 48,
+    large: 64,
+};
+// How much of the ring the indeterminate sweep covers before fading back to transparent -- the
+// remainder (to 360deg) is the visible "gap" in the ring. Matches the Figma mock's proportions.
+const INDETERMINATE_SWEEP_DEGREES = 300;
+/**
+ * A circular progress indicator -- either a static ring showing a percentage sweep
+ * (`type="determinate"`) or a continuously spinning ring signaling in-progress work with no known
+ * completion percentage (`type="indeterminate"`).
+ *
+ * ## When to use
+ * - Showing the progress of a task with a known, quantifiable completion percentage (`determinate`).
+ * - Signaling that work is happening in the background with no meaningful percentage to report
+ *   (`indeterminate`), e.g. while waiting on a network response.
+ *
+ * ## When not to use
+ * - For a horizontal, bar-shaped progress indicator -- this component is a ring, not a bar.
+ * - For a percentage that's better expressed as plain text, without the reserved space and visual
+ *   weight of a ring.
+ *
+ * @part container - The outer wrapper (ring + optional label).
+ * @part track - The background track circle.
+ * @part arc - The colored progress/spinner arc circle.
+ * @part label - The percentage label (`determinate` + `showLabel` only).
+ */
+export class BsProgress {
+    /** `determinate` renders a static arc sweep reflecting `value` (with an optional percentage
+     * label); `indeterminate` renders a continuously spinning ring and never shows a label, since
+     * there's no known percentage to report. */
+    type = 'determinate';
+    /** Overall diameter: `small` (44px), `medium` (48px), or `large` (64px). */
+    size = 'small';
+    /** Ring stroke width in px -- `4` or `8`, matching Figma's two stroke-width variants. A number,
+     * not the Figma label's literal `"4 px"` string. */
+    strokeWidth = 4;
+    /** Progress percentage, `0`-`100`. Only meaningful for `type="determinate"` -- ignored (and
+     * never rendered) for `type="indeterminate"`. Out-of-range values are clamped defensively. */
+    value = 0;
+    /** Shows the `${value}%` label below the ring. Only takes effect for `type="determinate"` --
+     * `indeterminate` never shows a label regardless of this prop, since there's no percentage to
+     * show. Defaults to `true`. */
+    showLabel = true;
+    get clampedValue() {
+        return Math.min(100, Math.max(0, this.value));
+    }
+    get diameter() {
+        return DIAMETERS[this.size];
+    }
+    get radius() {
+        return (this.diameter - this.strokeWidth) / 2;
+    }
+    get circumference() {
+        return 2 * Math.PI * this.radius;
+    }
+    render() {
+        const diameter = this.diameter;
+        const radius = this.radius;
+        const circumference = this.circumference;
+        const isDeterminate = this.type === 'determinate';
+        const value = this.clampedValue;
+        const dashOffset = circumference * (1 - value / 100);
+        return (h("div", { key: '19bbc9dc90c75faa2c9cc1571eb782f2df76e14b', part: "container", class: "bs-progress" }, h("div", { key: '5e63bdd093f3bcf09740617fe489b9ed9f2f55ca', class: "bs-progress__box", style: { width: `${diameter}px`, height: `${diameter}px` }, role: "progressbar", "aria-valuemin": isDeterminate ? '0' : undefined, "aria-valuemax": isDeterminate ? '100' : undefined, "aria-valuenow": isDeterminate ? String(value) : undefined, "aria-busy": isDeterminate ? undefined : 'true' }, isDeterminate ? (h("svg", { class: "bs-progress__ring", width: diameter, height: diameter, viewBox: `0 0 ${diameter} ${diameter}` }, h("circle", { part: "track", class: "bs-progress__track", cx: diameter / 2, cy: diameter / 2, r: radius, "stroke-width": this.strokeWidth, fill: "none" }), h("circle", { part: "arc", class: "bs-progress__arc", cx: diameter / 2, cy: diameter / 2, r: radius, "stroke-width": this.strokeWidth, fill: "none", "stroke-linecap": "round", "stroke-dasharray": circumference, "stroke-dashoffset": dashOffset }))) : (
+        // Figma's indeterminate ring is a fading "comet tail" (transparent -> solid color),
+        // not a flat-colored partial arc -- SVG has no angular/conic gradient primitive, so a
+        // CSS conic-gradient (color varying by angle) + a radial-gradient mask (carving the
+        // gradient disc down to a ring of exactly `strokeWidth`) is used instead of the
+        // stroke-dasharray technique the determinate ring uses.
+        h("div", { part: "arc", class: "bs-progress__spinner", style: {
+                '--bs-progress-spinner-stroke-width': `${this.strokeWidth}px`,
+                '--bs-progress-spinner-sweep': `${INDETERMINATE_SWEEP_DEGREES}deg`,
+            } }))), isDeterminate && this.showLabel && (h("span", { key: '9010120dc7781c3ac3c25ced301bc52ad07f4fa6', part: "label", class: `bs-progress__label bs-progress__label--${this.size}` }, value, "%"))));
+    }
+    static get is() { return "bs-progress"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bs-progress.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bs-progress.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BsProgressType",
+                    "resolved": "\"determinate\" | \"indeterminate\"",
+                    "references": {
+                        "BsProgressType": {
+                            "location": "local",
+                            "path": "/home/runner/work/Brandsync-webcomponents/Brandsync-webcomponents/packages/wc/src/components/bs-progress/bs-progress.tsx",
+                            "id": "src/components/bs-progress/bs-progress.tsx::BsProgressType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "`determinate` renders a static arc sweep reflecting `value` (with an optional percentage\nlabel); `indeterminate` renders a continuously spinning ring and never shows a label, since\nthere's no known percentage to report."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "type",
+                "defaultValue": "'determinate'"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BsProgressSize",
+                    "resolved": "\"large\" | \"medium\" | \"small\"",
+                    "references": {
+                        "BsProgressSize": {
+                            "location": "local",
+                            "path": "/home/runner/work/Brandsync-webcomponents/Brandsync-webcomponents/packages/wc/src/components/bs-progress/bs-progress.tsx",
+                            "id": "src/components/bs-progress/bs-progress.tsx::BsProgressSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Overall diameter: `small` (44px), `medium` (48px), or `large` (64px)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "'small'"
+            },
+            "strokeWidth": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "BsProgressStrokeWidth",
+                    "resolved": "4 | 8",
+                    "references": {
+                        "BsProgressStrokeWidth": {
+                            "location": "local",
+                            "path": "/home/runner/work/Brandsync-webcomponents/Brandsync-webcomponents/packages/wc/src/components/bs-progress/bs-progress.tsx",
+                            "id": "src/components/bs-progress/bs-progress.tsx::BsProgressStrokeWidth"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Ring stroke width in px -- `4` or `8`, matching Figma's two stroke-width variants. A number,\nnot the Figma label's literal `\"4 px\"` string."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "stroke-width",
+                "defaultValue": "4"
+            },
+            "value": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Progress percentage, `0`-`100`. Only meaningful for `type=\"determinate\"` -- ignored (and\nnever rendered) for `type=\"indeterminate\"`. Out-of-range values are clamped defensively."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "0"
+            },
+            "showLabel": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Shows the `${value}%` label below the ring. Only takes effect for `type=\"determinate\"` --\n`indeterminate` never shows a label regardless of this prop, since there's no percentage to\nshow. Defaults to `true`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-label",
+                "defaultValue": "true"
+            }
+        };
+    }
+}