@brandsync/wc 1.9.0 → 1.11.0

package/dist/collection/components/bs-product-tour/bs-product-tour.js

@@ -0,0 +1,391 @@
+import { h } from "@stencil/core";
+/**
+ * One step of a product tour: a centred **welcome** or **success** card with an art tile, or a
+ * **pointer** card -- a compact step with a close button, a "1 of 3" progress label and Back/Next
+ * actions -- whose arrow points at the thing it describes. Matches the Figma "Product Tour" and
+ * "Pointer" components.
+ *
+ * This is the step *card* only. It doesn't run a tour: it has no overlay, no spotlight, no
+ * positioning against a target and no step sequencing. Your code decides which step is showing,
+ * places the card next to its target (the arrow can sit on any of 12 positions via `direction`),
+ * and moves on from `bsPrimary`/`bsSecondary`.
+ *
+ * **Built from:** `bs-card` (the surface), `bs-icon-tile` (the art tile), `bs-button` (the actions), `bs-icon-button` (the close button).
+ *
+ * ## When to use
+ * - Introducing a feature on first run (`welcome`), confirming a finished tour (`success`), or
+ *   walking through the UI one pointer at a time (`pointer`).
+ *
+ * ## When not to use
+ * - A blocking decision or form -- use `bs-dialog`.
+ * - A hint on hover or focus -- use `bs-tooltip`.
+ *
+ * @slot icon - The art glyph in the `welcome`/`success` tile, replacing the default sparkle/check.
+ *   Draw it with `currentColor`.
+ * @part container - The card (the arrow is drawn outside it).
+ * @part art - The tinted art tile (`welcome`/`success`).
+ * @part close - The close button (`pointer`, when `closable`).
+ * @part heading - The heading.
+ * @part description - The paragraph.
+ * @part footer - The row with the progress label and actions (`pointer`).
+ * @part progress - The "1 of 3" label.
+ * @part actions - The secondary + primary buttons.
+ * @part secondary - The secondary button.
+ * @part primary - The primary button.
+ * @part arrow - The arrow (`pointer`).
+ */
+export class BsProductTour {
+    /** `welcome` and `success` are centred cards with an art tile; `pointer` is the compact step
+     * with an arrow. */
+    type = 'welcome';
+    /** Where the arrow sits (`pointer` only): the side of the card it's on, and for corners/edges
+     * which end it's near, e.g. `top-left` = on the top edge, near the left corner. */
+    direction = 'top';
+    /** Heading. */
+    heading;
+    /** Paragraph under the heading. */
+    description;
+    /** Current step, 1-based (`pointer`). Used with `total` for the progress label. */
+    step = 1;
+    /** Number of steps (`pointer`). The progress label is hidden when this is 0. */
+    total = 0;
+    /** Template of the progress label; `{step}` and `{total}` are replaced. */
+    progressLabel = '{step} of {total}';
+    /** Label of the primary button. Defaults to "Start" (`welcome`), "Done" (`success`) or "Next"
+     * (`pointer`). Set it to an empty string to hide the button. */
+    primaryLabel;
+    /** Label of the secondary button. Defaults to "Later" (`welcome`) or "Back" (`pointer`); none for
+     * `success`. Set it to an empty string to hide the button. */
+    secondaryLabel;
+    /** Shows a close button in the corner (`pointer`). */
+    closable = false;
+    /** Accessible name of the close button. */
+    closeLabel = 'Close';
+    /** Fires when the primary button is pressed. */
+    bsPrimary;
+    /** Fires when the secondary button is pressed. */
+    bsSecondary;
+    /** Fires when the close button is pressed. */
+    bsClose;
+    get primary() {
+        if (this.primaryLabel !== undefined)
+            return this.primaryLabel;
+        return { welcome: 'Start', success: 'Done', pointer: 'Next' }[this.type] ?? '';
+    }
+    get secondary() {
+        if (this.secondaryLabel !== undefined)
+            return this.secondaryLabel;
+        return { welcome: 'Later', success: '', pointer: 'Back' }[this.type] ?? '';
+    }
+    renderActions(buttonSize, secondaryVariant) {
+        const { primary, secondary } = this;
+        if (!primary && !secondary)
+            return null;
+        return (h("div", { part: "actions", class: "bs-product-tour__actions" }, secondary && (h("bs-button", { part: "secondary", variant: secondaryVariant, size: buttonSize, onClick: () => this.bsSecondary.emit() }, secondary)), primary && (h("bs-button", { part: "primary", variant: "primary", size: buttonSize, onClick: () => this.bsPrimary.emit() }, primary))));
+    }
+    renderCard() {
+        const success = this.type === 'success';
+        return (h("bs-card", { part: "container", class: "bs-product-tour bs-product-tour--card", surface: "base" }, h("div", { class: "bs-product-tour__body" }, h("bs-icon-tile", { part: "art", class: "bs-product-tour__art", intent: success ? 'success' : 'brand', size: "lg" }, h("slot", { name: "icon" }, success ? h(CheckIcon, null) : h(SparkleIcon, null))), this.heading && (h("p", { part: "heading", class: "bs-product-tour__heading" }, this.heading)), this.description && (h("p", { part: "description", class: "bs-product-tour__description" }, this.description)), this.renderActions('md', 'outlined'))));
+    }
+    renderPointer() {
+        const progress = this.total > 0 ? this.progressLabel.replace('{step}', String(this.step)).replace('{total}', String(this.total)) : '';
+        return (h("div", { class: "bs-product-tour bs-product-tour--pointer" }, h("div", { part: "arrow", class: "bs-product-tour__arrow", "aria-hidden": "true" }), h("bs-card", { part: "container", class: "bs-product-tour__card", surface: "base" }, this.closable && (h("bs-icon-button", { part: "close", class: "bs-product-tour__close", variant: "subtle", size: "sm", ariaLabel: this.closeLabel, onClick: () => this.bsClose.emit() }, h("svg", { viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", "stroke-width": "1.6", "stroke-linecap": "round", "aria-hidden": "true" }, h("path", { d: "M5 5L15 15M15 5L5 15" })))), h("div", { class: "bs-product-tour__body" }, h("div", { class: "bs-product-tour__text" }, this.heading && (h("p", { part: "heading", class: "bs-product-tour__heading" }, this.heading)), this.description && (h("p", { part: "description", class: "bs-product-tour__description" }, this.description))), h("div", { part: "footer", class: "bs-product-tour__footer" }, progress ? (h("span", { part: "progress", class: "bs-product-tour__progress" }, progress)) : (h("span", null)), this.renderActions('sm', 'subtle'))))));
+    }
+    render() {
+        return this.type === 'pointer' ? this.renderPointer() : this.renderCard();
+    }
+    static get is() { return "bs-product-tour"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bs-product-tour.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bs-product-tour.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BsProductTourType",
+                    "resolved": "\"pointer\" | \"success\" | \"welcome\"",
+                    "references": {
+                        "BsProductTourType": {
+                            "location": "local",
+                            "path": "/home/runner/work/eg-brandsync-storybook/eg-brandsync-storybook/packages/wc/src/components/bs-product-tour/bs-product-tour.tsx",
+                            "id": "src/components/bs-product-tour/bs-product-tour.tsx::BsProductTourType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "`welcome` and `success` are centred cards with an art tile; `pointer` is the compact step\nwith an arrow."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "type",
+                "defaultValue": "'welcome'"
+            },
+            "direction": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BsProductTourDirection",
+                    "resolved": "\"bottom\" | \"bottom-left\" | \"bottom-right\" | \"left\" | \"left-bottom\" | \"left-top\" | \"right\" | \"right-bottom\" | \"right-top\" | \"top\" | \"top-left\" | \"top-right\"",
+                    "references": {
+                        "BsProductTourDirection": {
+                            "location": "local",
+                            "path": "/home/runner/work/eg-brandsync-storybook/eg-brandsync-storybook/packages/wc/src/components/bs-product-tour/bs-product-tour.tsx",
+                            "id": "src/components/bs-product-tour/bs-product-tour.tsx::BsProductTourDirection"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Where the arrow sits (`pointer` only): the side of the card it's on, and for corners/edges\nwhich end it's near, e.g. `top-left` = on the top edge, near the left corner."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "direction",
+                "defaultValue": "'top'"
+            },
+            "heading": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Heading."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "heading"
+            },
+            "description": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Paragraph under the heading."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "description"
+            },
+            "step": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Current step, 1-based (`pointer`). Used with `total` for the progress label."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "step",
+                "defaultValue": "1"
+            },
+            "total": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Number of steps (`pointer`). The progress label is hidden when this is 0."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "total",
+                "defaultValue": "0"
+            },
+            "progressLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Template of the progress label; `{step}` and `{total}` are replaced."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "progress-label",
+                "defaultValue": "'{step} of {total}'"
+            },
+            "primaryLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Label of the primary button. Defaults to \"Start\" (`welcome`), \"Done\" (`success`) or \"Next\"\n(`pointer`). Set it to an empty string to hide the button."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "primary-label"
+            },
+            "secondaryLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Label of the secondary button. Defaults to \"Later\" (`welcome`) or \"Back\" (`pointer`); none for\n`success`. Set it to an empty string to hide the button."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "secondary-label"
+            },
+            "closable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Shows a close button in the corner (`pointer`)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "closable",
+                "defaultValue": "false"
+            },
+            "closeLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible name of the close button."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "close-label",
+                "defaultValue": "'Close'"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "bsPrimary",
+                "name": "bsPrimary",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires when the primary button is pressed."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "bsSecondary",
+                "name": "bsSecondary",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires when the secondary button is pressed."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "bsClose",
+                "name": "bsClose",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires when the close button is pressed."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+}
+const SparkleIcon = () => (h("svg", { class: "bs-product-tour__glyph", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "1.6", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, h("path", { d: "M9.5 4L11.2 9.3L16.5 11L11.2 12.7L9.5 18L7.8 12.7L2.5 11L7.8 9.3L9.5 4Z" }), h("path", { d: "M18.5 3V7" }), h("path", { d: "M16.5 5H20.5" }), h("path", { d: "M18 16V20" }), h("path", { d: "M16 18H20" })));
+const CheckIcon = () => (h("svg", { class: "bs-product-tour__glyph", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "1.8", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, h("circle", { cx: "12", cy: "12", r: "9" }), h("path", { d: "M8 12.5L10.8 15.3L16 9.5" })));

package/dist/collection/components/bs-product-tour/bs-product-tour.stories.js

@@ -0,0 +1,68 @@
+import { html } from "lit";
+import { componentDescription, propDescription } from "../../stories-utils";
+const DIRECTIONS = ['top', 'top-left', 'top-right', 'bottom', 'bottom-left', 'bottom-right', 'left', 'left-top', 'left-bottom', 'right', 'right-top', 'right-bottom'];
+const meta = {
+    title: 'Components/bs-product-tour',
+    parameters: { docs: { description: { component: componentDescription('bs-product-tour') } } },
+    // The arrow sticks out of the card, so leave room around it.
+    decorators: [story => html `<div style="padding: 32px 48px; background: var(--bs-color-neutral-container);">${story()}</div>`],
+    render: args => html `
+    <bs-product-tour
+      type=${args.type}
+      direction=${args.direction}
+      heading=${args.heading}
+      description=${args.description}
+      step=${args.step}
+      total=${args.total}
+      ?closable=${args.closable}
+      @bsPrimary=${() => console.log('bsPrimary')}
+      @bsSecondary=${() => console.log('bsSecondary')}
+      @bsClose=${() => console.log('bsClose')}
+    ></bs-product-tour>
+  `,
+    argTypes: {
+        type: { control: 'inline-radio', options: ['welcome', 'success', 'pointer'], description: propDescription('bs-product-tour', 'type') },
+        direction: { control: 'select', options: DIRECTIONS, description: propDescription('bs-product-tour', 'direction') },
+        heading: { control: 'text', description: propDescription('bs-product-tour', 'heading') },
+        description: { control: 'text', description: propDescription('bs-product-tour', 'description') },
+        step: { control: { type: 'number', min: 1 }, description: propDescription('bs-product-tour', 'step') },
+        total: { control: { type: 'number', min: 0 }, description: propDescription('bs-product-tour', 'total') },
+        closable: { control: 'boolean', description: propDescription('bs-product-tour', 'closable') },
+    },
+    args: {
+        type: 'welcome',
+        direction: 'top',
+        heading: 'Welcome to Orders',
+        description: 'Take a 30-second tour of the new order view.',
+        step: 1,
+        total: 3,
+        closable: false,
+    },
+};
+export default meta;
+export const Welcome = {};
+export const Success = {
+    args: { type: 'success', heading: "You're all set", description: 'You can replay this tour from the Help menu.' },
+};
+export const Pointer = {
+    args: { type: 'pointer', heading: 'Filter the list', description: 'Narrow orders by status or date.', closable: true },
+};
+export const PointerDirections = {
+    name: 'Pointer directions',
+    decorators: [story => html `<div style="padding: 24px; background: var(--bs-color-neutral-container);">${story()}</div>`],
+    render: () => html `
+    <div style="display: grid; grid-template-columns: repeat(3, auto); gap: 40px 56px;">
+      ${DIRECTIONS.map(d => html `<bs-product-tour type="pointer" direction=${d} heading=${d} description="Arrow on the ${d} edge." step="1" total="3" closable></bs-product-tour>`)}
+    </div>
+  `,
+};
+export const CustomIcon = {
+    name: 'Custom icon',
+    render: () => html `
+    <bs-product-tour heading="New: saved views" description="Keep your favourite filters one click away." primary-label="Show me">
+      <svg slot="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
+        <path d="M12 3L14.5 9L21 9.5L16 14L17.5 21L12 17.5L6.5 21L8 14L3 9.5L9.5 9L12 3Z" />
+      </svg>
+    </bs-product-tour>
+  `,
+};

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

@@ -69,7 +69,7 @@ export class BsProgress {
         const isDeterminate = this.type === 'determinate';
         const value = this.clampedValue;
         const dashOffset = circumference * (1 - value / 100);
-        return (h("div", { key: 'add8dfafdbee4eaa9712c6e2ba6ddff6f8f6c47f', part: "container", class: "bs-progress" }, h("div", { key: 'fd89c73aa247fc3770187a45dc4681857e257d4e', class: "bs-progress__box", style: { width: `${diameter}px`, height: `${diameter}px` }, role: "progressbar", "aria-label": this.ariaLabel, "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 }))) : (
+        return (h("div", { key: '9d9c371ea92f67811e9ab927d346f2bece833cf5', part: "container", class: "bs-progress" }, h("div", { key: '5753f1db2b3f79a55b2ff7936cdb836f10c29bc3', class: "bs-progress__box", style: { width: `${diameter}px`, height: `${diameter}px` }, role: "progressbar", "aria-label": this.ariaLabel, "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
@@ -78,7 +78,7 @@ export class BsProgress {
         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: '9c86dc195204f28c06e05bf09f823241bf9f3a86', part: "label", class: `bs-progress__label bs-progress__label--${this.size}` }, value, "%"))));
+            } }))), isDeterminate && this.showLabel && (h("span", { key: '68381d4570b3f4d29d4b671f5069c7f4c02669e7', part: "label", class: `bs-progress__label bs-progress__label--${this.size}` }, value, "%"))));
     }
     static get is() { return "bs-progress"; }
     static get encapsulation() { return "shadow"; }

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

@@ -21,7 +21,7 @@
   display: flex;
 
   --bs-progress-linear-gap: var(--bs-spacing-100);
-  --bs-progress-linear-track: var(--bs-surface-container);
+  --bs-progress-linear-track: var(--bs-surface-hover);
   --bs-progress-linear-fill: var(--bs-color-primary-default);
   --bs-progress-linear-radius: 120px;
   --bs-progress-linear-height-sm: 4px;

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

@@ -51,13 +51,13 @@ export class BsProgressLinear {
     render() {
         const isDeterminate = this.type === 'determinate';
         const value = this.clampedValue;
-        return (h("div", { key: '279dbb0cd17b9584b500570d58cc09bd91e8a0d7', part: "container", class: "bs-progress-linear" }, h("div", { key: '9299c229184d172f743fb7fb0dce2a9c55a4496f', part: "track", class: `bs-progress-linear__track bs-progress-linear__track--${this.size}`, role: "progressbar", "aria-label": this.ariaLabel, "aria-valuemin": isDeterminate ? '0' : undefined, "aria-valuemax": isDeterminate ? '100' : undefined, "aria-valuenow": isDeterminate ? String(value) : undefined, "aria-busy": isDeterminate ? undefined : 'true' }, isDeterminate ? (h("div", { part: "fill", class: "bs-progress-linear__fill", style: { width: `${value}%` } })) : (
+        return (h("div", { key: '783f94f3ea320d9a8169c1d253037ae3631179e1', part: "container", class: "bs-progress-linear" }, h("div", { key: '9b5e0c1f0a641683bf9e763b2e3ede0b814f26cf', part: "track", class: `bs-progress-linear__track bs-progress-linear__track--${this.size}`, role: "progressbar", "aria-label": this.ariaLabel, "aria-valuemin": isDeterminate ? '0' : undefined, "aria-valuemax": isDeterminate ? '100' : undefined, "aria-valuenow": isDeterminate ? String(value) : undefined, "aria-busy": isDeterminate ? undefined : 'true' }, isDeterminate ? (h("div", { part: "fill", class: "bs-progress-linear__fill", style: { width: `${value}%` } })) : (
         // Figma's indeterminate bar is a soft "comet" gradient segment (transparent -> blue ->
         // transparent) sliding left-to-right across the track's full width in a loop -- the
         // same fade concept as bs-progress's indeterminate ring's conic-gradient comet tail,
         // but along a straight line via a linear-gradient + `transform: translateX(...)`
         // keyframe animation instead of a rotating conic-gradient.
-        h("div", { part: "fill", class: "bs-progress-linear__fill bs-progress-linear__fill--indeterminate" }))), this.showLabel && this.hasLabelContent && (h("span", { key: '51a75cae90630fec1d8757d483c239a534385aa7', part: "label", class: "bs-progress-linear__label" }, h("slot", { key: '7e6639ff4f7219cbb3fa09d7c7570268534530b4' })))));
+        h("div", { part: "fill", class: "bs-progress-linear__fill bs-progress-linear__fill--indeterminate" }))), this.showLabel && this.hasLabelContent && (h("span", { key: 'bb81cebfe79bb6e722fe0fb3cd561318a5f06ac6', part: "label", class: "bs-progress-linear__label" }, h("slot", { key: 'df04863716047f5b1fa4c70f20744ac25713840b' })))));
     }
     // The default slot's assigned content lives in the host's light DOM regardless of whether a
     // <slot> is currently rendered in the shadow tree, so this can be computed directly from the