@brandsync/wc 0.0.12 → 1.0.0

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

@@ -0,0 +1,42 @@
+import { render, h, describe, it, expect } from "@stencil/vitest";
+describe('bs-stepper', () => {
+    it('propagates computedState to slotted steps based on position relative to currentStep', async () => {
+        const { root, waitForChanges } = await render(h("bs-stepper", { currentStep: 2 }, h("bs-stepper-step", { name: "Cart" }), h("bs-stepper-step", { name: "Shipping" }), h("bs-stepper-step", { name: "Payment" }), h("bs-stepper-step", { name: "Confirm" })));
+        await waitForChanges();
+        const steps = root.querySelectorAll('bs-stepper-step');
+        expect(steps[0].computedState).toBe('done');
+        expect(steps[1].computedState).toBe('done');
+        expect(steps[2].computedState).toBe('current');
+        expect(steps[3].computedState).toBe('enabled');
+    });
+    it('re-propagates computedState when currentStep changes', async () => {
+        const { root, waitForChanges } = await render(h("bs-stepper", { currentStep: 0 }, h("bs-stepper-step", { name: "A" }), h("bs-stepper-step", { name: "B" })));
+        await waitForChanges();
+        root.currentStep = 1;
+        await waitForChanges();
+        const steps = root.querySelectorAll('bs-stepper-step');
+        expect(steps[0].computedState).toBe('done');
+        expect(steps[1].computedState).toBe('current');
+    });
+    it('propagates direction and showDescription to slotted steps', async () => {
+        const { root, waitForChanges } = await render(h("bs-stepper", { direction: "vertical", showDescription: false }, h("bs-stepper-step", { name: "A" })));
+        await waitForChanges();
+        const step = root.querySelector('bs-stepper-step');
+        expect(step.direction).toBe('vertical');
+        expect(step.showDescription).toBe(false);
+    });
+    it('propagates the current props to a step added after initial render', async () => {
+        // currentStep=0 and this being the only (so index-0) step once appended -- 0 === 0 -> "current".
+        const { root, waitForChanges } = await render(h("bs-stepper", { currentStep: 0 }));
+        await waitForChanges();
+        const step = document.createElement('bs-stepper-step');
+        step.setAttribute('name', 'Late add');
+        root.appendChild(step);
+        await waitForChanges();
+        expect(step.computedState).toBe('current');
+    });
+    it('reflects the direction attribute for the container itself', async () => {
+        const { root } = await render(h("bs-stepper", { direction: "vertical" }));
+        expect(root).toEqualAttribute('direction', 'vertical');
+    });
+});

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

@@ -0,0 +1,29 @@
+/**
+ * @prop --bs-stepper-edge-padding: Horizontal padding, direction="horizontal" only. Aliased to
+ * --bs-spacing-800. Every step's name/description centers under its own icon (see
+ * bs-stepper-step.css), including the first and last steps -- whose icons sit flush against this
+ * container's own edges. Without this padding, a first/last step's centered text has room to
+ * overflow in only one direction and clips against the container edge (confirmed by measuring a
+ * real render: a description clipped to a negative x position). This padding exists purely to give
+ * that overflow somewhere to go; it isn't a general "breathing room" affordance for content that
+ * fits.
+ */
+/* This container renders a bare <slot> with no wrapping element (see bs-stepper.tsx), so :host
+   itself is what establishes the flex row/column context each slotted bs-stepper-step's own
+   `:host(.bs-stepper-step--horizontal) { flex: 1 1 0; }` (etc.) expects from its parent. */
+:host {
+  display: flex;
+  width: 100%;
+
+  --bs-stepper-edge-padding: var(--bs-spacing-800);
+}
+
+:host([direction='vertical']) {
+  flex-direction: column;
+}
+
+:host(:not([direction='vertical'])) {
+  flex-direction: row;
+  align-items: flex-start;
+  padding: 0 var(--bs-stepper-edge-padding);
+}

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

@@ -0,0 +1,162 @@
+import { h } from "@stencil/core";
+/**
+ * A sequence of named steps showing overall progress through a multi-step flow (e.g. a checkout,
+ * an onboarding wizard) -- each step reads as enabled (not yet reached), current, done, error, or
+ * disabled, connected by a rail between them.
+ *
+ * This container is intentionally thin: it renders a `<slot>` for `<bs-stepper-step>` children and
+ * propagates `currentStep`/`direction`/`showDescription` down to them as JS properties whenever any
+ * of those change or the slotted children themselves change -- the same "container pushes state
+ * onto its slotted children" pattern `bs-tabs` uses for `selected` and `bs-breadcrumbs` uses for
+ * `size`. Each step computes its own `enabled`/`current`/`done` state from its position among its
+ * siblings relative to `currentStep`, unless that step's own `error`/`disabled` prop overrides it.
+ *
+ * This is a static status display, not an interactive control -- Figma's spec shows no
+ * hover/pressed treatment on any step, so nothing here is clickable.
+ *
+ * ## When to use
+ * - Showing where the user is in a fixed, ordered, multi-step flow.
+ *
+ * ## When not to use
+ * - A flow whose steps aren't fixed/known in advance -- a stepper implies the full sequence is
+ *   already known.
+ * - As a substitute for actual in-page navigation between steps -- pair this with real controls
+ *   (Next/Back buttons) elsewhere in the flow, this component only displays status.
+ *
+ * @slot - Default slot: the `<bs-stepper-step>` elements making up the sequence, in order.
+ */
+export class BsStepper {
+    el;
+    /** 0-indexed: which step is current. Every step before this index reads as "done" (unless that
+     * step's own `error`/`disabled` overrides it), every step after reads as "enabled". */
+    currentStep = 0;
+    /** `horizontal` (icon above name/description, connected by a horizontal rail) or `vertical`
+     * (icon beside name/description, connected by a vertical rail). Propagated to every slotted
+     * `bs-stepper-step`, and reflected as an attribute so this container's own `:host` CSS can switch
+     * its `flex-direction` to match -- a bare `<slot>` with no wrapping element (see `render()`)
+     * means the slotted steps' flex-row/column layout comes directly from `:host` here, not from any
+     * wrapper div. */
+    direction = 'horizontal';
+    /** Whether each step's description renders at all. Propagated to every slotted
+     * `bs-stepper-step`. */
+    showDescription = true;
+    onPropChange() {
+        this.propagateToSteps();
+    }
+    componentDidLoad() {
+        this.propagateToSteps();
+    }
+    onSlotChange = () => {
+        this.propagateToSteps();
+    };
+    propagateToSteps() {
+        const steps = this.el.querySelectorAll(':scope > bs-stepper-step');
+        steps.forEach((step, index) => {
+            const computedState = index < this.currentStep ? 'done' : index === this.currentStep ? 'current' : 'enabled';
+            Object.assign(step, {
+                computedState,
+                direction: this.direction,
+                showDescription: this.showDescription,
+            });
+        });
+    }
+    render() {
+        return h("slot", { key: 'aed14a6d1d81b19d7d53fe9a536b2eb4912a2108', onSlotchange: this.onSlotChange });
+    }
+    static get is() { return "bs-stepper"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bs-stepper.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bs-stepper.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "currentStep": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "0-indexed: which step is current. Every step before this index reads as \"done\" (unless that\nstep's own `error`/`disabled` overrides it), every step after reads as \"enabled\"."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "current-step",
+                "defaultValue": "0"
+            },
+            "direction": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BsStepperDirection",
+                    "resolved": "\"horizontal\" | \"vertical\"",
+                    "references": {
+                        "BsStepperDirection": {
+                            "location": "import",
+                            "path": "../bs-stepper-step/bs-stepper-step",
+                            "id": "src/components/bs-stepper/bs-stepper-step/bs-stepper-step.tsx::BsStepperDirection",
+                            "referenceLocation": "BsStepperDirection"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "`horizontal` (icon above name/description, connected by a horizontal rail) or `vertical`\n(icon beside name/description, connected by a vertical rail). Propagated to every slotted\n`bs-stepper-step`, and reflected as an attribute so this container's own `:host` CSS can switch\nits `flex-direction` to match -- a bare `<slot>` with no wrapping element (see `render()`)\nmeans the slotted steps' flex-row/column layout comes directly from `:host` here, not from any\nwrapper div."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "direction",
+                "defaultValue": "'horizontal'"
+            },
+            "showDescription": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether each step's description renders at all. Propagated to every slotted\n`bs-stepper-step`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-description",
+                "defaultValue": "true"
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "currentStep",
+                "methodName": "onPropChange"
+            }, {
+                "propName": "direction",
+                "methodName": "onPropChange"
+            }, {
+                "propName": "showDescription",
+                "methodName": "onPropChange"
+            }];
+    }
+}

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

@@ -0,0 +1,59 @@
+import { html } from "lit";
+import { componentDescription, propDescription } from "../../../stories-utils";
+const meta = {
+    title: 'Components/bs-stepper',
+    parameters: { docs: { description: { component: componentDescription('bs-stepper') } } },
+    render: args => html `
+    <bs-stepper current-step=${args.currentStep} direction=${args.direction} show-description=${args.showDescription}>
+      <bs-stepper-step name="Cart" description="Review items"></bs-stepper-step>
+      <bs-stepper-step name="Shipping" description="Delivery address"></bs-stepper-step>
+      <bs-stepper-step name="Payment" description="Card details"></bs-stepper-step>
+      <bs-stepper-step name="Confirm" description="Review order"></bs-stepper-step>
+    </bs-stepper>
+  `,
+    argTypes: {
+        currentStep: { control: { type: 'number', min: 0, max: 3 }, description: propDescription('bs-stepper', 'currentStep') },
+        direction: { control: { type: 'select' }, options: ['horizontal', 'vertical'], description: propDescription('bs-stepper', 'direction') },
+        showDescription: { control: 'boolean', description: propDescription('bs-stepper', 'showDescription') },
+    },
+    args: {
+        currentStep: 1,
+        direction: 'horizontal',
+        showDescription: true,
+    },
+};
+export default meta;
+export const Default = {};
+export const Vertical = {
+    args: { direction: 'vertical' },
+};
+// A step's own `error` attribute overrides its position-derived state -- Shipping shows the error
+// treatment even though it's before currentStep (which would normally read as "done").
+export const WithError = {
+    name: 'With an error step',
+    args: { currentStep: 2 },
+    render: args => html `
+    <bs-stepper current-step=${args.currentStep} direction=${args.direction} show-description=${args.showDescription}>
+      <bs-stepper-step name="Cart" description="Review items"></bs-stepper-step>
+      <bs-stepper-step name="Shipping" description="Delivery address" error></bs-stepper-step>
+      <bs-stepper-step name="Payment" description="Card details"></bs-stepper-step>
+      <bs-stepper-step name="Confirm" description="Review order"></bs-stepper-step>
+    </bs-stepper>
+  `,
+};
+export const WithDisabledStep = {
+    name: 'With a disabled step',
+    args: { currentStep: 2 },
+    render: args => html `
+    <bs-stepper current-step=${args.currentStep} direction=${args.direction} show-description=${args.showDescription}>
+      <bs-stepper-step name="Cart" description="Review items"></bs-stepper-step>
+      <bs-stepper-step name="Shipping" description="Delivery address"></bs-stepper-step>
+      <bs-stepper-step name="Payment" description="Card details"></bs-stepper-step>
+      <bs-stepper-step name="Confirm" description="Review order" disabled></bs-stepper-step>
+    </bs-stepper>
+  `,
+};
+export const NoDescription = {
+    name: 'No description',
+    args: { showDescription: false },
+};

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

@@ -0,0 +1,73 @@
+import { render, h, describe, it, expect } from "@stencil/vitest";
+describe('bs-stepper-step', () => {
+    it('defaults to enabled/horizontal/showDescription=true when used standalone', async () => {
+        const { root } = await render(h("bs-stepper-step", { name: "Cart" }));
+        expect(root.shadowRoot.querySelector('[part="icon"]')).toHaveClass('bs-stepper-step__icon--enabled');
+        expect(root).toHaveClass('bs-stepper-step--horizontal');
+    });
+    it('renders the name text', async () => {
+        const { root } = await render(h("bs-stepper-step", { name: "Shipping" }));
+        expect(root.shadowRoot.querySelector('[part="name"]').textContent.trim()).toBe('Shipping');
+    });
+    describe('state resolution', () => {
+        it('error overrides computedState', async () => {
+            const { root } = await render(h("bs-stepper-step", { name: "A", computedState: "done", error: true }));
+            expect(root.shadowRoot.querySelector('[part="icon"]')).toHaveClass('bs-stepper-step__icon--error');
+        });
+        it('disabled overrides both computedState and error', async () => {
+            const { root } = await render(h("bs-stepper-step", { name: "A", computedState: "current", error: true, disabled: true }));
+            expect(root.shadowRoot.querySelector('[part="icon"]')).toHaveClass('bs-stepper-step__icon--disabled');
+        });
+        it('falls back to computedState when neither error nor disabled is set', async () => {
+            const { root } = await render(h("bs-stepper-step", { name: "A", computedState: "done" }));
+            expect(root.shadowRoot.querySelector('[part="icon"]')).toHaveClass('bs-stepper-step__icon--done');
+        });
+    });
+    describe('icon content per state', () => {
+        it('done shows a checkmark', async () => {
+            const { root } = await render(h("bs-stepper-step", { name: "A", computedState: "done" }));
+            expect(root.shadowRoot.querySelector('[part="icon"] svg')).not.toBeNull();
+        });
+        it('current shows an inner dot, no svg', async () => {
+            const { root } = await render(h("bs-stepper-step", { name: "A", computedState: "current" }));
+            expect(root.shadowRoot.querySelector('.bs-stepper-step__icon-dot')).not.toBeNull();
+            expect(root.shadowRoot.querySelector('[part="icon"] svg')).toBeNull();
+        });
+        it('enabled shows neither', async () => {
+            const { root } = await render(h("bs-stepper-step", { name: "A", computedState: "enabled" }));
+            expect(root.shadowRoot.querySelector('.bs-stepper-step__icon-dot')).toBeNull();
+            expect(root.shadowRoot.querySelector('[part="icon"] svg')).toBeNull();
+        });
+        it('error shows an exclamation icon', async () => {
+            const { root } = await render(h("bs-stepper-step", { name: "A", error: true }));
+            expect(root.shadowRoot.querySelector('[part="icon"] svg')).not.toBeNull();
+        });
+    });
+    describe('showDescription', () => {
+        it('renders the description when set and showDescription is true', async () => {
+            const { root } = await render(h("bs-stepper-step", { name: "A", description: "Some detail", showDescription: true }));
+            expect(root.shadowRoot.querySelector('[part="description"]').textContent.trim()).toBe('Some detail');
+        });
+        it('does not render a description when showDescription is false', async () => {
+            const { root } = await render(h("bs-stepper-step", { name: "A", description: "Some detail", showDescription: false }));
+            expect(root.shadowRoot.querySelector('[part="description"]')).toBeNull();
+        });
+        it('does not render a description that was never set, even with showDescription true', async () => {
+            const { root } = await render(h("bs-stepper-step", { name: "A", showDescription: true }));
+            expect(root.shadowRoot.querySelector('[part="description"]')).toBeNull();
+        });
+    });
+    it('hides its own trailing connector when last in its parent, regardless of tag mix', async () => {
+        const container = document.createElement('div');
+        container.innerHTML = '<bs-stepper-step name="A"></bs-stepper-step><bs-stepper-step name="B"></bs-stepper-step>';
+        document.body.appendChild(container);
+        await new Promise(resolve => requestAnimationFrame(resolve));
+        await new Promise(resolve => requestAnimationFrame(resolve));
+        const [first, second] = Array.from(container.querySelectorAll('bs-stepper-step'));
+        const firstConnector = first.shadowRoot.querySelector('.bs-stepper-step__connector');
+        const secondConnector = second.shadowRoot.querySelector('.bs-stepper-step__connector');
+        expect(getComputedStyle(firstConnector).visibility).not.toBe('hidden');
+        expect(getComputedStyle(secondConnector).visibility).toBe('hidden');
+        container.remove();
+    });
+});

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

@@ -0,0 +1,258 @@
+/**
+ * @prop --bs-stepper-step-gap: Gap between the icon/connector row (or column) and the label. Aliased to --bs-spacing-100.
+ * @prop --bs-stepper-step-icon-size: Width/height of the icon/indicator circle. 24px, matching Figma exactly.
+ * @prop --bs-stepper-step-icon-border-width: Border width of the icon circle. 1.5px, matching Figma exactly.
+ * @prop --bs-stepper-step-connector-color: Rail color to the next step. Aliased to --bs-border-default. Figma's spec shows one static rail color regardless of adjacent steps' state -- completion is conveyed by the icons, not the rail.
+ * @prop --bs-stepper-step-connector-thickness: Rail line thickness. 2px, matching Figma exactly.
+ * @prop --bs-stepper-step-icon-border-enabled: Icon border, state="enabled" (not yet reached). Aliased to --bs-border-default.
+ * @prop --bs-stepper-step-icon-border-current: Icon border, state="current". Aliased to --bs-color-primary-default.
+ * @prop --bs-stepper-step-icon-dot-current: Inner filled dot color, state="current". Aliased to --bs-color-primary-default.
+ * @prop --bs-stepper-step-icon-bg-done: Icon background, state="done". Aliased to --bs-color-primary-default.
+ * @prop --bs-stepper-step-icon-color-done: Checkmark icon color, state="done". Aliased to --bs-text-on-action.
+ * @prop --bs-stepper-step-icon-border-error: Icon border, state="error". Aliased to --bs-border-error.
+ * @prop --bs-stepper-step-icon-color-error: Exclamation icon color, state="error". Aliased to --bs-border-error.
+ * @prop --bs-stepper-step-icon-border-disabled: Icon border, state="disabled". Aliased to --bs-border-neutral-disabled.
+ * @prop --bs-stepper-step-text-enabled: Name/description color, state="enabled"/"error". Aliased to --bs-text-muted.
+ * @prop --bs-stepper-step-text-active: Name/description color, state="current"/"done". Aliased to --bs-text-default.
+ * @prop --bs-stepper-step-text-disabled: Name/description color, state="disabled". Aliased to --bs-text-on-disabled.
+ * @prop --bs-stepper-step-font-size: Aliased to --bs-font-size-md.
+ * @prop --bs-stepper-step-line-height: Aliased to --bs-line-height-body-md.
+ * @prop --bs-stepper-step-name-font-weight: Aliased to --bs-font-weight-semibold.
+ * @prop --bs-stepper-step-description-font-weight: Aliased to --bs-font-weight-regular.
+ */
+:host {
+  display: flex;
+  font-family: inherit;
+  font-size: var(--bs-stepper-step-font-size);
+  line-height: calc(var(--bs-stepper-step-line-height) * 1px);
+
+  --bs-stepper-step-gap: var(--bs-spacing-100);
+  --bs-stepper-step-icon-size: 24px;
+  --bs-stepper-step-icon-border-width: 1.5px;
+  --bs-stepper-step-connector-color: var(--bs-border-default);
+  --bs-stepper-step-connector-thickness: 2px;
+
+  --bs-stepper-step-icon-border-enabled: var(--bs-border-default);
+  --bs-stepper-step-icon-border-current: var(--bs-color-primary-default);
+  --bs-stepper-step-icon-dot-current: var(--bs-color-primary-default);
+  --bs-stepper-step-icon-bg-done: var(--bs-color-primary-default);
+  --bs-stepper-step-icon-color-done: var(--bs-text-on-action);
+  --bs-stepper-step-icon-border-error: var(--bs-border-error);
+  --bs-stepper-step-icon-color-error: var(--bs-border-error);
+  --bs-stepper-step-icon-border-disabled: var(--bs-border-neutral-disabled);
+
+  --bs-stepper-step-text-enabled: var(--bs-text-muted);
+  --bs-stepper-step-text-active: var(--bs-text-default);
+  --bs-stepper-step-text-disabled: var(--bs-text-on-disabled);
+
+  --bs-stepper-step-font-size: var(--bs-font-size-md);
+  --bs-stepper-step-line-height: var(--bs-line-height-body-md);
+  --bs-stepper-step-name-font-weight: var(--bs-font-weight-semibold);
+  --bs-stepper-step-description-font-weight: var(--bs-font-weight-regular);
+}
+
+/* Each step lays out and grows evenly across the row (horizontal) or stacks full-width (vertical)
+   -- the parent <bs-stepper> just renders a plain <slot>, it doesn't wrap children in any list/flex
+   scaffolding of its own. */
+:host(.bs-stepper-step--horizontal) {
+  flex: 1 1 0;
+  flex-direction: column;
+}
+
+:host(.bs-stepper-step--vertical) {
+  width: 100%;
+  flex-direction: row;
+  /* Same reasoning as above, just on the cross axis: default `stretch` makes .top match .label's
+     height, which the connector inside .top needs (via flex-grow) to visually reach the next step's
+     icon regardless of how many lines the label wraps to. */
+}
+
+/* The icon+connector pairing: a row in horizontal mode (icon left, rail extends right to the next
+   step), a column in vertical mode (icon on top, rail extends down to the next step). */
+.bs-stepper-step__top {
+  display: flex;
+  align-items: center;
+}
+
+/* Stretches to the step's full width (default `stretch`, from .top having no explicit width/
+   align-self) -- the icon (flex-shrink: 0, first child) stays pinned to its left edge, and the
+   connector below fills whatever's left via flex: 1 1 auto. This means every step's icon sits at
+   the same relative x (its own step's left edge), regardless of the step's role -- only .label's
+   *text* alignment (see below) needs to vary by first/middle/last, not the icon/connector row. */
+:host(.bs-stepper-step--horizontal) .bs-stepper-step__top {
+  flex-direction: row;
+}
+
+:host(.bs-stepper-step--vertical) .bs-stepper-step__top {
+  flex-direction: column;
+}
+
+.bs-stepper-step__icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: var(--bs-stepper-step-icon-size);
+  height: var(--bs-stepper-step-icon-size);
+  border-radius: 50%;
+  box-sizing: border-box;
+}
+
+.bs-stepper-step__icon svg {
+  width: 16px;
+  height: 16px;
+}
+
+.bs-stepper-step__icon--enabled {
+  border: var(--bs-stepper-step-icon-border-width) solid var(--bs-stepper-step-icon-border-enabled);
+}
+
+.bs-stepper-step__icon--current {
+  border: var(--bs-stepper-step-icon-border-width) solid var(--bs-stepper-step-icon-border-current);
+}
+
+.bs-stepper-step__icon-dot {
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background: var(--bs-stepper-step-icon-dot-current);
+}
+
+.bs-stepper-step__icon--done {
+  background: var(--bs-stepper-step-icon-bg-done);
+  color: var(--bs-stepper-step-icon-color-done);
+}
+
+.bs-stepper-step__icon--error {
+  border: var(--bs-stepper-step-icon-border-width) solid var(--bs-stepper-step-icon-border-error);
+  color: var(--bs-stepper-step-icon-color-error);
+}
+
+.bs-stepper-step__icon--disabled {
+  border: var(--bs-stepper-step-icon-border-width) solid var(--bs-stepper-step-icon-border-disabled);
+}
+
+.bs-stepper-step__connector {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* A normal flex child of .top, growing to fill whatever's left after the icon's fixed width --
+   NOT absolutely positioned. An earlier attempt anchored this to :host with a fixed left offset
+   assuming every icon sits at the step's left edge, which broke the moment .top's own alignment
+   varied (a centered/end-aligned icon no longer started where the connector assumed) -- the line
+   rendered straight through the icon on every middle/last step. Since .top (and therefore the icon)
+   is now always left-pinned (see .top's own comment above), a plain flex: 1 1 auto here reaches from
+   the icon's own right edge to .top's right edge with no positioning assumptions to get wrong. */
+:host(.bs-stepper-step--horizontal) .bs-stepper-step__connector {
+  flex: 1 1 auto;
+  margin-left: var(--bs-stepper-step-gap);
+}
+
+:host(.bs-stepper-step--vertical) .bs-stepper-step__connector {
+  /* Unlike horizontal mode above, vertical's connector stays in normal flex flow (inside .top,
+     which is itself flex-direction: column here) rather than switching to absolute positioning --
+     it doesn't have the same bug, since a taller icon+connector column doesn't shift .label's
+     horizontal position the way a wider one did for horizontal mode's centered/right-aligned text.
+     flex: 1 1 auto (grow to fill), not a percentage size -- a percentage only resolves against a
+     parent with a *definite* size along that axis, which .top doesn't reliably have (it's sized by
+     stretch/content, not an explicit value). flex-direction: column -- without this, the wrapper
+     stays row-direction (the base rule's default), so the line's own `flex: 1 1 auto` below tries
+     to grow WIDTH (the row's main axis) instead of height, while an explicit width: 2px pins it
+     right back down -- net effect, confirmed via a real measurement, was the line collapsing to 0
+     height. Also gives the wrapper an explicit width matching the icon, rather than shrinking to
+     the 2px-wide line's own size (which left the line off-center under the icon above it). */
+  flex: 1 1 auto;
+  flex-direction: column;
+  align-items: center;
+  width: var(--bs-stepper-step-icon-size);
+  margin: var(--bs-stepper-step-gap) 0;
+  min-height: var(--bs-stepper-step-icon-size);
+}
+
+.bs-stepper-step__connector-line {
+  display: block;
+  border-radius: calc(var(--bs-stepper-step-connector-thickness) / 2);
+  background: var(--bs-stepper-step-connector-color);
+}
+
+:host(.bs-stepper-step--horizontal) .bs-stepper-step__connector-line {
+  width: 100%;
+  height: var(--bs-stepper-step-connector-thickness);
+}
+
+:host(.bs-stepper-step--vertical) .bs-stepper-step__connector-line {
+  flex: 1 1 auto;
+  width: var(--bs-stepper-step-connector-thickness);
+}
+
+/* This step is visually last -- pure DOM position (:last-child, not :last-of-type), so it works
+   correctly even if something other than bs-stepper-step is ever mixed in as a sibling. Hides the
+   trailing rail entirely; the icon/label content is unaffected. */
+:host(:last-child) .bs-stepper-step__connector {
+  visibility: hidden;
+}
+
+.bs-stepper-step__label {
+  display: flex;
+  flex-direction: column;
+}
+
+/* width: icon-size (not the step's full width) + align-self: flex-start pins this box under the
+   icon specifically -- the icon is always at the step's own left edge (see .top's comment above),
+   so anchoring .label there too, then letting its *content* overflow via align-items/text-align
+   below, centers the actual text relative to the icon regardless of how wide the trailing connector
+   is. (A flex item with an explicit cross-size doesn't stretch to fill the column's width the way
+   an auto-sized one would, so this needs align-self spelled out rather than relying on the host's
+   default `stretch`.) Every step centers the same way, including the first/last -- no
+   :first-child/:last-child override to left/right-align those two, unlike .connector's
+   :last-child rule below (which is unrelated: that one hides the trailing rail, not text
+   alignment). */
+:host(.bs-stepper-step--horizontal) .bs-stepper-step__label {
+  margin-top: var(--bs-stepper-step-gap);
+  width: var(--bs-stepper-step-icon-size);
+  align-self: flex-start;
+  align-items: center;
+  text-align: center;
+}
+
+:host(.bs-stepper-step--vertical) .bs-stepper-step__label {
+  margin-left: var(--bs-stepper-step-gap);
+  text-align: left;
+}
+
+/* white-space: nowrap -- .label is deliberately narrowed to just the icon's width (see .label's own
+   comment above) so its *box* anchors under the icon while the *text* overflows past it. Without
+   this, a multi-word name/description doesn't overflow as one line -- a flex item's cross-axis
+   sizing (here, width, since .label is a column flex container) still wraps text word-by-word to
+   fit within the parent's available width before falling back to overflow, so e.g. "Review items"
+   split into "Review" / "items" onto two lines instead of extending past the 24px box as intended. */
+.bs-stepper-step__name {
+  font-weight: var(--bs-stepper-step-name-font-weight);
+  white-space: nowrap;
+}
+
+.bs-stepper-step__description {
+  font-weight: var(--bs-stepper-step-description-font-weight);
+  white-space: nowrap;
+}
+
+.bs-stepper-step__label--enabled .bs-stepper-step__name,
+.bs-stepper-step__label--enabled .bs-stepper-step__description,
+.bs-stepper-step__label--error .bs-stepper-step__name,
+.bs-stepper-step__label--error .bs-stepper-step__description {
+  color: var(--bs-stepper-step-text-enabled);
+}
+
+.bs-stepper-step__label--current .bs-stepper-step__name,
+.bs-stepper-step__label--current .bs-stepper-step__description,
+.bs-stepper-step__label--done .bs-stepper-step__name,
+.bs-stepper-step__label--done .bs-stepper-step__description {
+  color: var(--bs-stepper-step-text-active);
+}
+
+.bs-stepper-step__label--disabled .bs-stepper-step__name,
+.bs-stepper-step__label--disabled .bs-stepper-step__description {
+  color: var(--bs-stepper-step-text-disabled);
+}