@brandsync/wc 1.1.0 → 1.3.0

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: '359251959b842695100d52b8fb4707708ed8fb5d', part: "container", class: "bs-progress" }, h("div", { key: '397c8cecc86bc564c9c7e4fadbbbcf05bae71c58', 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: '90b9d66a1e5cb7c8bc392e99636386c765e6479c', 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"
+            }
+        };
+    }
+}

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

@@ -0,0 +1,72 @@
+import { html } from "lit";
+import { componentDescription, propDescription } from "../../stories-utils";
+const types = ['determinate', 'indeterminate'];
+const sizes = ['small', 'medium', 'large'];
+const strokeWidths = [4, 8];
+const meta = {
+    title: 'Components/bs-progress/Circular',
+    parameters: { docs: { description: { component: componentDescription('bs-progress') } } },
+    render: args => html `
+    <bs-progress
+      type=${args.type}
+      size=${args.size}
+      stroke-width=${args.strokeWidth}
+      value=${args.value}
+      show-label=${args.showLabel}
+    ></bs-progress>
+  `,
+    argTypes: {
+        type: { control: { type: 'select' }, options: types, description: propDescription('bs-progress', 'type') },
+        size: { control: { type: 'select' }, options: sizes, description: propDescription('bs-progress', 'size') },
+        strokeWidth: {
+            control: { type: 'select' },
+            options: strokeWidths,
+            description: propDescription('bs-progress', 'stroke-width'),
+        },
+        value: { control: { type: 'range', min: 0, max: 100 }, description: propDescription('bs-progress', 'value') },
+        showLabel: { control: 'boolean', description: propDescription('bs-progress', 'show-label') },
+    },
+    args: {
+        type: 'determinate',
+        size: 'small',
+        strokeWidth: 4,
+        value: 50,
+        showLabel: true,
+    },
+};
+export default meta;
+export const Default = {};
+// One instance per size, side by side, at a fixed mid-range value.
+export const Sizes = {
+    name: 'Sizes',
+    render: () => html `
+    <div style="display: flex; align-items: flex-end; gap: 24px;">
+      ${sizes.map(size => html `<bs-progress size=${size} value="50"></bs-progress>`)}
+    </div>
+  `,
+};
+// One instance per stroke width, at a fixed size/value, to compare ring thickness directly.
+export const StrokeWidths = {
+    name: 'Stroke widths',
+    render: () => html `
+    <div style="display: flex; align-items: flex-end; gap: 24px;">
+      ${strokeWidths.map(strokeWidth => html `<bs-progress size="large" stroke-width=${strokeWidth} value="50"></bs-progress>`)}
+    </div>
+  `,
+};
+// A few sample values across the range, illustrating the arc sweep from empty to full.
+export const Values = {
+    name: 'Values',
+    render: () => html `
+    <div style="display: flex; align-items: flex-end; gap: 24px;">
+      ${[0, 25, 50, 75, 100].map(value => html `<bs-progress value=${value}></bs-progress>`)}
+    </div>
+  `,
+};
+export const WithoutLabel = {
+    name: 'Without label',
+    args: { showLabel: false },
+};
+export const Indeterminate = {
+    args: { type: 'indeterminate' },
+};

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

@@ -0,0 +1,92 @@
+import { render, h, describe, it, expect } from "@stencil/vitest";
+describe('bs-progress-linear', () => {
+    describe('size/type combinations', () => {
+        ['small', 'large'].forEach(size => {
+            it(`renders size="${size}" type="determinate"`, async () => {
+                const { root } = await render(h("bs-progress-linear", { size: size, type: "determinate", value: 40 }));
+                expect(root.shadowRoot.querySelector(`.bs-progress-linear__track--${size}`)).not.toBeNull();
+                expect(root.shadowRoot.querySelector('[part="track"]')).not.toBeNull();
+                expect(root.shadowRoot.querySelector('[part="fill"]')).not.toBeNull();
+            });
+            it(`renders size="${size}" type="indeterminate"`, async () => {
+                const { root } = await render(h("bs-progress-linear", { size: size, type: "indeterminate" }));
+                expect(root.shadowRoot.querySelector('.bs-progress-linear__fill--indeterminate')).not.toBeNull();
+                expect(root.shadowRoot.querySelector('[part="fill"]')).not.toBeNull();
+            });
+        });
+    });
+    describe('fill width', () => {
+        [0, 50, 100].forEach(value => {
+            it(`sets fill width to ${value}% for value=${value}`, async () => {
+                const { root } = await render(h("bs-progress-linear", { value: value }));
+                const fill = root.shadowRoot.querySelector('[part="fill"]');
+                expect(fill.style.width).toBe(`${value}%`);
+            });
+        });
+        it('produces a larger width for a larger value', async () => {
+            const { root: rootLow } = await render(h("bs-progress-linear", { value: 10 }));
+            const { root: rootHigh } = await render(h("bs-progress-linear", { value: 90 }));
+            const lowFill = rootLow.shadowRoot.querySelector('[part="fill"]');
+            const highFill = rootHigh.shadowRoot.querySelector('[part="fill"]');
+            expect(parseFloat(highFill.style.width)).toBeGreaterThan(parseFloat(lowFill.style.width));
+        });
+    });
+    describe('value clamping', () => {
+        it('clamps a value above 100 down to 100', async () => {
+            const { root } = await render(h("bs-progress-linear", { value: 150 }));
+            const fill = root.shadowRoot.querySelector('[part="fill"]');
+            expect(fill.style.width).toBe('100%');
+            const track = root.shadowRoot.querySelector('[part="track"]');
+            expect(track).toEqualAttribute('aria-valuenow', '100');
+        });
+        it('clamps a negative value up to 0', async () => {
+            const { root } = await render(h("bs-progress-linear", { value: -10 }));
+            const fill = root.shadowRoot.querySelector('[part="fill"]');
+            expect(fill.style.width).toBe('0%');
+            const track = root.shadowRoot.querySelector('[part="track"]');
+            expect(track).toEqualAttribute('aria-valuenow', '0');
+        });
+    });
+    describe('label', () => {
+        it('renders slotted content when showLabel is true (default)', async () => {
+            const { root } = await render(h("bs-progress-linear", { value: 42 }, "Uploading..."));
+            const label = root.shadowRoot.querySelector('[part="label"]');
+            expect(label).not.toBeNull();
+            // `label.textContent` only reflects a <slot>'s own fallback content, not its assigned
+            // (projected) nodes -- the projected text lives on the host itself.
+            expect(root.textContent.trim()).toBe('Uploading...');
+        });
+        it('omits the label when showLabel is false', async () => {
+            const { root } = await render(h("bs-progress-linear", { value: 42, showLabel: false }, "Uploading..."));
+            expect(root.shadowRoot.querySelector('[part="label"]')).toBeNull();
+        });
+        it('omits the label when showLabel is true but there is no slotted content', async () => {
+            const { root } = await render(h("bs-progress-linear", { value: 42 }));
+            expect(root.shadowRoot.querySelector('[part="label"]')).toBeNull();
+        });
+        it('omits the label when slotted content is only whitespace', async () => {
+            const { root } = await render(h("bs-progress-linear", { value: 42 }, " "));
+            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-linear", { type: "determinate", value: 65 }));
+            const track = root.shadowRoot.querySelector('[part="track"]');
+            expect(track).toEqualAttribute('role', 'progressbar');
+            expect(track).toEqualAttribute('aria-valuemin', '0');
+            expect(track).toEqualAttribute('aria-valuemax', '100');
+            expect(track).toEqualAttribute('aria-valuenow', '65');
+            expect(track.hasAttribute('aria-busy')).toBe(false);
+        });
+        it('omits aria-valuenow and sets aria-busy for indeterminate', async () => {
+            const { root } = await render(h("bs-progress-linear", { type: "indeterminate" }));
+            const track = root.shadowRoot.querySelector('[part="track"]');
+            expect(track).toEqualAttribute('role', 'progressbar');
+            expect(track.hasAttribute('aria-valuenow')).toBe(false);
+            expect(track.hasAttribute('aria-valuemin')).toBe(false);
+            expect(track.hasAttribute('aria-valuemax')).toBe(false);
+            expect(track).toEqualAttribute('aria-busy', 'true');
+        });
+    });
+});

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

@@ -0,0 +1,108 @@
+/**
+ * @prop --bs-progress-linear-gap: Gap between the bar and the label. Aliased to --bs-spacing-100.
+ * @prop --bs-progress-linear-track: Track bar background color. Aliased to --bs-surface-container
+ *   (matches the Figma spec's `--color/surface/container` token exactly).
+ * @prop --bs-progress-linear-fill: Determinate fill / indeterminate comet color. Aliased to
+ *   --bs-color-primary-default (the same brand-blue accent bs-progress's arc and bs-button's
+ *   primary variant already use).
+ * @prop --bs-progress-linear-radius: Track/fill border-radius (full pill). A fixed 120px, matching
+ *   the Figma spec's "rounded-full" treatment.
+ * @prop --bs-progress-linear-height-sm: Bar height, size="small". Fixed at 4px per the Figma spec.
+ * @prop --bs-progress-linear-height-lg: Bar height, size="large". Fixed at 8px per the Figma spec.
+ * @prop --bs-progress-linear-label-color: Label text color. Aliased to --bs-text-default.
+ * @prop --bs-progress-linear-label-font-size: Label font size (body/md). Aliased to --bs-fontsize-body-md.
+ * @prop --bs-progress-linear-label-line-height: Label line height (body/md). Aliased to --bs-line-height-body-md.
+ * @prop --bs-progress-linear-transition-duration: Determinate fill width transition. Aliased to
+ *   --bs-duration-default if defined by brandsync-tokens, otherwise a plain 0.3s fallback.
+ * @prop --bs-progress-linear-slide-duration: Indeterminate comet slide duration. Aliased to
+ *   --bs-duration-slower if defined by brandsync-tokens, otherwise a plain 1.6s fallback.
+ */
+:host {
+  display: flex;
+
+  --bs-progress-linear-gap: var(--bs-spacing-100);
+  --bs-progress-linear-track: var(--bs-surface-container);
+  --bs-progress-linear-fill: var(--bs-color-primary-default);
+  --bs-progress-linear-radius: 120px;
+  --bs-progress-linear-height-sm: 4px;
+  --bs-progress-linear-height-lg: 8px;
+  --bs-progress-linear-label-color: var(--bs-text-default);
+  --bs-progress-linear-label-font-size: var(--bs-fontsize-body-md);
+  --bs-progress-linear-label-line-height: var(--bs-line-height-body-md);
+  --bs-progress-linear-transition-duration: 0.3s;
+  --bs-progress-linear-slide-duration: 1.6s;
+}
+
+.bs-progress-linear {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  gap: var(--bs-progress-linear-gap);
+  font-family: inherit;
+}
+
+.bs-progress-linear__track {
+  position: relative;
+  width: 100%;
+  border-radius: var(--bs-progress-linear-radius);
+  background: var(--bs-progress-linear-track);
+  overflow: hidden;
+}
+
+.bs-progress-linear__track--small {
+  height: var(--bs-progress-linear-height-sm);
+}
+
+.bs-progress-linear__track--large {
+  height: var(--bs-progress-linear-height-lg);
+}
+
+.bs-progress-linear__fill {
+  height: 100%;
+  border-radius: var(--bs-progress-linear-radius);
+  background: var(--bs-progress-linear-fill);
+  transition: width var(--bs-progress-linear-transition-duration) ease;
+}
+
+/* Indeterminate: Figma's bar is a soft "comet" gradient segment (transparent -> solid color ->
+   transparent) sliding across the track's full width, not a flat-colored partial fill -- the same
+   fade concept as bs-progress's indeterminate ring's conic-gradient comet tail, but along a
+   straight line. A fixed-width gradient band is animated via `transform: translateX(...)` from
+   fully off-screen left to fully off-screen right, looping continuously. */
+.bs-progress-linear__fill--indeterminate {
+  position: absolute;
+  top: 0;
+  left: 0;
+  /* Figma's static snapshot (left-9.01%/right-66.58% of the track) puts the comet band at ~24% of
+     the track's width -- matching that proportion here rather than the wider 40% guess this was
+     originally built with. */
+  width: 24%;
+  min-width: 80px;
+  background: linear-gradient(90deg, transparent 0%, var(--bs-progress-linear-fill) 50%, transparent 100%);
+  animation: bs-progress-linear-slide var(--bs-progress-linear-slide-duration) ease-in-out infinite;
+}
+
+@keyframes bs-progress-linear-slide {
+  from {
+    transform: translateX(-100%);
+  }
+  to {
+    transform: translateX(250%);
+  }
+}
+
+/* Reduced motion: freezing the slide entirely would remove the only visual signal that work is
+   still in progress (indeterminate has no percentage to fall back on), so this slows the slide to
+   a much slower loop instead of stopping it -- still obviously "in progress" without being
+   motion-sickness-inducing. Same intent/rationale as bs-progress's indeterminate ring. */
+@media (prefers-reduced-motion: reduce) {
+  .bs-progress-linear__fill--indeterminate {
+    animation-duration: calc(var(--bs-progress-linear-slide-duration) * 4);
+  }
+}
+
+.bs-progress-linear__label {
+  color: var(--bs-progress-linear-label-color);
+  font-size: var(--bs-progress-linear-label-font-size);
+  line-height: calc(var(--bs-progress-linear-label-line-height) * 1px);
+}