@brandsync/wc 0.1.0 → 1.1.0

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);
+}

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

@@ -0,0 +1,231 @@
+import { Host, h } from "@stencil/core";
+/**
+ * A single step within a `<bs-stepper>` sequence: an icon/indicator plus a name and optional
+ * description, connected to the next step by a trailing rail.
+ *
+ * `computedState` is set automatically by the parent `<bs-stepper>` based on this step's position
+ * relative to its `currentStep` (before it = "done", at it = "current", after it = "enabled") --
+ * same "container pushes state onto its slotted children" pattern `bs-tabs` uses for `selected`
+ * and `bs-breadcrumbs` uses for `size`. This step's own `error`/`disabled` props, when set directly
+ * by the consumer, override that computed value -- e.g. a step before `currentStep` would normally
+ * read as "done", but `error` on that step wins regardless.
+ *
+ * The trailing rail is owned by this component, not the container: `:host(:last-child)` hides it
+ * on whichever step is visually last, mirroring `bs-breadcrumb`'s own `:host(:first-child)` rule
+ * for its leading separator (same technique, opposite end -- see that component for why pure DOM
+ * position, not CSS `:last-of-type`, is what actually needs checking here too).
+ *
+ * ## When to use
+ * - As a child of `<bs-stepper>`, one per step in the sequence.
+ *
+ * ## When not to use
+ * - Standalone, outside a `<bs-stepper>` wrapper -- `computedState`/`direction`/`showDescription`
+ *   depend on that parent propagating them; alone, this defaults to `enabled`/`horizontal`/`true`.
+ *
+ * @slot - None: `name`/`description` fully drive the label content.
+ * @part icon - The icon/indicator wrapper.
+ * @part label - The name+description wrapper.
+ * @part name - The name text.
+ * @part description - The description text (only rendered when `showDescription` is true and
+ * `description` is set).
+ * @part connector - The trailing rail segment (not rendered on the last step).
+ */
+export class BsStepperStep {
+    /** This step's name/title. */
+    name = '';
+    /** Optional supporting text below the name. Only rendered when `showDescription` (propagated
+     * from the parent `<bs-stepper>`) is also true. */
+    description;
+    /** Shows the error treatment for this step, regardless of its `computedState`. */
+    error = false;
+    /** Shows the disabled treatment for this step, regardless of its `computedState`. Takes priority
+     * over `error` if both are somehow set. */
+    disabled = false;
+    /** Set automatically by the parent `<bs-stepper>` from this step's position relative to its
+     * `currentStep` -- see the class doc above. Can be set directly for a standalone step. */
+    computedState = 'enabled';
+    /** Set automatically by the parent `<bs-stepper>`, propagated to every slotted step. */
+    direction = 'horizontal';
+    /** Set automatically by the parent `<bs-stepper>`, propagated to every slotted step. */
+    showDescription = true;
+    get state() {
+        if (this.disabled)
+            return 'disabled';
+        if (this.error)
+            return 'error';
+        return this.computedState;
+    }
+    render() {
+        const state = this.state;
+        return (h(Host, { key: '23bdc6334a36d9b2dd28719b9b23fbc17ad8f29b', role: "listitem", class: `bs-stepper-step--${this.direction}` }, h("div", { key: '388e17882bb5215c33e0665107acbcff5c7b4c9c', class: "bs-stepper-step__top" }, h("span", { key: '6cf79ab50a94f9578e76f14ca23cdfa984ef394b', part: "icon", class: `bs-stepper-step__icon bs-stepper-step__icon--${state}` }, state === 'current' && h("span", { key: '8081181e8865a29f703c74d5a20183513bdf2b66', class: "bs-stepper-step__icon-dot" }), state === 'done' && h(CheckIcon, { key: '92755c827c9c09b1bae504daabd2067fc498b355' }), state === 'error' && h(ExclamationIcon, { key: '62ac0a0826b8f8b507fcd0a7c47bff3c39f804b4' })), h("span", { key: 'a1c15ede35ab01d876a0289552dffc37c75626d1', part: "connector", class: "bs-stepper-step__connector", "aria-hidden": "true" }, h("span", { key: '5029f8f629af1091bcb8fa2a47ebe12a7bd6628e', class: "bs-stepper-step__connector-line" }))), h("span", { key: '3835e986646f619751043ab0eeb1b5d977f22a58', part: "label", class: `bs-stepper-step__label bs-stepper-step__label--${state}` }, h("span", { key: '5da4053ea5ecf588853b5d9678737a67b7aadbe1', part: "name", class: "bs-stepper-step__name" }, this.name), this.showDescription && this.description && (h("span", { key: 'd5544b97eefe9311ac13f0cbcd4bf6d87bc24ca5', part: "description", class: "bs-stepper-step__description" }, this.description)))));
+    }
+    static get is() { return "bs-stepper-step"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bs-stepper-step.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bs-stepper-step.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "This step's name/title."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name",
+                "defaultValue": "''"
+            },
+            "description": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional supporting text below the name. Only rendered when `showDescription` (propagated\nfrom the parent `<bs-stepper>`) is also true."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "description"
+            },
+            "error": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Shows the error treatment for this step, regardless of its `computedState`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "error",
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Shows the disabled treatment for this step, regardless of its `computedState`. Takes priority\nover `error` if both are somehow set."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "computedState": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BsStepperStepComputedState",
+                    "resolved": "\"current\" | \"done\" | \"enabled\"",
+                    "references": {
+                        "BsStepperStepComputedState": {
+                            "location": "local",
+                            "path": "/home/runner/work/Brandsync-web-components/Brandsync-web-components/packages/wc/src/components/bs-stepper/bs-stepper-step/bs-stepper-step.tsx",
+                            "id": "src/components/bs-stepper/bs-stepper-step/bs-stepper-step.tsx::BsStepperStepComputedState"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set automatically by the parent `<bs-stepper>` from this step's position relative to its\n`currentStep` -- see the class doc above. Can be set directly for a standalone step."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "computed-state",
+                "defaultValue": "'enabled'"
+            },
+            "direction": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BsStepperDirection",
+                    "resolved": "\"horizontal\" | \"vertical\"",
+                    "references": {
+                        "BsStepperDirection": {
+                            "location": "local",
+                            "path": "/home/runner/work/Brandsync-web-components/Brandsync-web-components/packages/wc/src/components/bs-stepper/bs-stepper-step/bs-stepper-step.tsx",
+                            "id": "src/components/bs-stepper/bs-stepper-step/bs-stepper-step.tsx::BsStepperDirection"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set automatically by the parent `<bs-stepper>`, propagated to every slotted step."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "direction",
+                "defaultValue": "'horizontal'"
+            },
+            "showDescription": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set automatically by the parent `<bs-stepper>`, propagated to every slotted step."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-description",
+                "defaultValue": "true"
+            }
+        };
+    }
+}
+const CheckIcon = () => (h("svg", { viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, h("path", { d: "M2.5 9L6 12.5L14 4.5", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })));
+const ExclamationIcon = () => (h("svg", { viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, h("path", { d: "M8 3V9.5", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("circle", { cx: "8", cy: "12.5", r: "1", fill: "currentColor" })));

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

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

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

@@ -86,7 +86,7 @@ export class BsInlineTab {
     };
     render() {
         const iconOnly = this.hasIcon && !this.hasLabel;
-        return (h("button", { key: '5e864cce26e8aafa1427dc6095e55e29b1a323a5', type: "button", part: "tab", role: "tab", class: `bs-inline-tab ${this.selected ? 'bs-inline-tab--selected' : ''} ${this.disabled ? 'bs-inline-tab--disabled' : ''} ${iconOnly ? 'bs-inline-tab--icon-only' : ''} ${this.hasIcon ? 'bs-inline-tab--has-icon' : ''}`, disabled: this.disabled, "aria-selected": String(this.selected), "aria-disabled": this.disabled ? 'true' : undefined, "aria-label": this.ariaLabel, onClick: this.onClick }, h("span", { key: '7c1284b951d12ce59d5619fe3d2ab9c346ceed0e', part: "icon", class: `bs-inline-tab__icon ${this.hasIcon ? 'bs-inline-tab__icon--has-content' : ''}` }, h("slot", { key: '3be708db5d08b628046b2c60303a829430dc875d', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: '9a8a11172c8c694f3eaa193bffc424e73f712970', part: "label", class: `bs-inline-tab__label ${this.hasLabel ? 'bs-inline-tab__label--has-content' : ''}` }, h("slot", { key: '089d1858503b4c834e1d3b9bd4763b57fbc2f273', onSlotchange: this.onLabelSlotchange }))));
+        return (h("button", { key: '6313c5d454cd53665dee3180dcf17d37548fa5c5', type: "button", part: "tab", role: "tab", class: `bs-inline-tab ${this.selected ? 'bs-inline-tab--selected' : ''} ${this.disabled ? 'bs-inline-tab--disabled' : ''} ${iconOnly ? 'bs-inline-tab--icon-only' : ''} ${this.hasIcon ? 'bs-inline-tab--has-icon' : ''}`, disabled: this.disabled, "aria-selected": String(this.selected), "aria-disabled": this.disabled ? 'true' : undefined, "aria-label": this.ariaLabel, onClick: this.onClick }, h("span", { key: '14255949e0df5e3d7c763841844964b2d507bc86', part: "icon", class: `bs-inline-tab__icon ${this.hasIcon ? 'bs-inline-tab__icon--has-content' : ''}` }, h("slot", { key: 'f81037da9dbff2c105f0eacad4acd8a7eef84cbe', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: '176c52323b9df0ca53aae20cc80dfc8d5625aa97', part: "label", class: `bs-inline-tab__label ${this.hasLabel ? 'bs-inline-tab__label--has-content' : ''}` }, h("slot", { key: 'b8db261b88931be4e822b2849bd50530d9acc196', onSlotchange: this.onLabelSlotchange }))));
     }
     static get is() { return "bs-inline-tab"; }
     static get encapsulation() { return "shadow"; }

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

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

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

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

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

@@ -42,7 +42,7 @@ export class BsTooltip {
      */
     placement = 'top';
     render() {
-        return (h("div", { key: '715de45f88b8228c415b70045067232a9d859f96', class: "bs-tooltip" }, h("span", { key: '1fb4350dbe0b36fe18cb34d0ed3e120ad3f863d0', part: "arrow", class: "bs-tooltip__arrow" }), h("div", { key: '78132e1f37d311355fdd4a7bb3a0d5f8ad2c9e97', part: "bubble", class: "bs-tooltip__bubble" }, h("slot", { key: '31316481f106d69e1d08423eb7432e3b16ffdfaa' }))));
+        return (h("div", { key: '826c86a864ed2b09e1889908daf64fe8cc7062b8', class: "bs-tooltip" }, h("span", { key: 'e04ca83b8422ccd1fdb64c8a91e2e4e332f226ed', part: "arrow", class: "bs-tooltip__arrow" }), h("div", { key: 'c02cf0ed9cfeedc3c6ca71e5770e546b841bf70f', part: "bubble", class: "bs-tooltip__bubble" }, h("slot", { key: '2279ab519e7372a339823c252e0e9da2aa7a6789' }))));
     }
     static get is() { return "bs-tooltip"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ui-shell/bs-navigation-drawer/bs-navigation-drawer/bs-navigation-drawer.js

@@ -117,7 +117,7 @@ export class BsNavigationDrawer {
         this.bsSearchClick.emit();
     };
     render() {
-        return (h("nav", { key: '0b6979dbab9e8b0bfcd1a4bdceead7b87c8d2b88', class: "bs-navigation-drawer", "aria-label": this.heading }, this.showLogo && (h("div", { key: 'f7b4b0238118d95f48a60da815738673db41da9f', part: "logo", class: "bs-navigation-drawer__logo bs-navigation-drawer__logo--full" }, h("bs-logo", { key: '9d40a85424f2931b251eb1e90991f3fa6b6eaccf', variant: "full", background: this.logoBackground }))), this.showLogo && (h("div", { key: '77250a1f5f66e7fcd981bfd6494ee38722a7406f', part: "logo", class: "bs-navigation-drawer__logo bs-navigation-drawer__logo--mark" }, h("bs-logo", { key: '0365624f3796b1c44af10488e8a3cab93e296169', variant: "mark", background: this.logoBackground }))), h("div", { key: '4c5b0de2a90df7f6462fac6d6b79abb62829293e', class: "bs-navigation-drawer__title-row" }, h("span", { key: 'f9507d3c31687abcaa99340ca4e413f8d47559bc', part: "title", class: "bs-navigation-drawer__title" }, this.heading), this.collapsible && (h("button", { key: 'f07c9f1f04d0b3e745273d8f61b3c1af02a5bc08', type: "button", part: "collapse", class: "bs-navigation-drawer__collapse", "aria-label": this.collapsed ? 'Expand' : 'Collapse', "aria-pressed": this.collapsed ? 'true' : 'false', onClick: this.onCollapseClick }, h(CaretLeftIcon, { key: '9731cf6bd727b753c99b5969059997a6800ec3a4' })))), h("div", { key: '7b1cc15eb095988451c32e4ba429fa5f36a5bbb8', part: "search", class: "bs-navigation-drawer__search" }, h("slot", { key: '1cf0fa19d789ea44ef29a9a3fbc7852ea012045e', name: "search" })), h("button", { key: '9a7c7bf69a7ef92144e60641279fbaca47395d4f', type: "button", part: "search-trigger", class: "bs-navigation-drawer__search-trigger", "aria-label": "Search", onClick: this.onSearchTriggerClick }, h(SearchIcon, { key: '6c55207e0b45a07c2be7aa350c07bbab4018696b' })), h("div", { key: 'e22497a133d16a622ef68ff5de4796eaa96a25fb', part: "items", class: "bs-navigation-drawer__items" }, h("slot", { key: '465d9447ef355558ffd0d79306abd9a9204517a1' }))));
+        return (h("nav", { key: '17b56ce49345a5b231562b93813062eaf21e4428', class: "bs-navigation-drawer", "aria-label": this.heading }, this.showLogo && (h("div", { key: '09ef0345e3c0036d4998aa6acc5f8c4bda0b534f', part: "logo", class: "bs-navigation-drawer__logo bs-navigation-drawer__logo--full" }, h("bs-logo", { key: 'c3c32c4e56e7b48b0af47ffc6bde76380906377b', variant: "full", background: this.logoBackground }))), this.showLogo && (h("div", { key: 'ddb44276e763d7ac380023bb73da2de8ff937b5b', part: "logo", class: "bs-navigation-drawer__logo bs-navigation-drawer__logo--mark" }, h("bs-logo", { key: '983e33610e902ba037c7c25a3f7c31d5f6a36cfa', variant: "mark", background: this.logoBackground }))), h("div", { key: 'db121c85fdd60dceee275d252c525e6ee85e24c9', class: "bs-navigation-drawer__title-row" }, h("span", { key: '6b8588a9fbfb3c015690ac7b0d144a852599a3c5', part: "title", class: "bs-navigation-drawer__title" }, this.heading), this.collapsible && (h("button", { key: '3ec776f2552d99deaa02468e659efd9d061fdbd3', type: "button", part: "collapse", class: "bs-navigation-drawer__collapse", "aria-label": this.collapsed ? 'Expand' : 'Collapse', "aria-pressed": this.collapsed ? 'true' : 'false', onClick: this.onCollapseClick }, h(CaretLeftIcon, { key: '60490f60829b436bd7ddd66631152f01a8b8790d' })))), h("div", { key: '72ec3f2adeaa8cb5f1d771151424ab8f41cfb8c2', part: "search", class: "bs-navigation-drawer__search" }, h("slot", { key: '6ed64f9cae2c25102e96eb92802304e77e31b3ee', name: "search" })), h("button", { key: '314a6a509224ee5a1ccac82ac13b9ac958d0add7', type: "button", part: "search-trigger", class: "bs-navigation-drawer__search-trigger", "aria-label": "Search", onClick: this.onSearchTriggerClick }, h(SearchIcon, { key: 'e68d5d4812d35c043feabca90b560deca2a69b6b' })), h("div", { key: '8dd4c3a0249a290ad313c4bf68c5a2f9bd903835', part: "items", class: "bs-navigation-drawer__items" }, h("slot", { key: '82a2278750f673a714fa9ed44c78636387e621b8' }))));
     }
     static get is() { return "bs-navigation-drawer"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ui-shell/bs-navigation-drawer/bs-navigation-drawer-item/bs-navigation-drawer-item.js

@@ -131,7 +131,7 @@ export class BsNavigationDrawerItem {
         // incorrectly also toggle this parent row on every child click. Both are wrapped in a
         // `display: contents` container so render() still returns a single root node (this codebase's
         // convention, e.g. bs-input.tsx) without that wrapper affecting layout at all.
-        return (h("div", { key: '6fd089698cd27459fc10a2806fba5a792dbfec2b', class: "bs-navigation-drawer-item__root" }, h("button", { key: '5c4448c9f16dfe9356ce069a5f069db9ed084f3b', type: "button", part: "item", class: rowClasses, "aria-expanded": this.expandable ? String(this.expanded) : undefined, "aria-label": this.ariaLabel ?? undefined, onClick: this.onClick }, !this.nested && (h("span", { key: 'bcfd23ef22e33ed6dcb3ec70b8263a4dccb14914', part: "icon", class: `bs-navigation-drawer-item__icon ${this.hasIcon ? 'bs-navigation-drawer-item__icon--has-content' : ''}` }, h("slot", { key: '170f97cc6ca93bf5e9e336b7c39c3d3bb02adca8', name: "icon", onSlotchange: this.onIconSlotchange }))), h("span", { key: 'abbc25976aa21e94e503497430d2be0895fd8987', part: "label", class: "bs-navigation-drawer-item__label" }, h("slot", { key: '0b9e12703c42e326634bb5adb49f1994b9c19754' })), this.expandable && (h("span", { key: '25e2a8517451cced2993390cd194420d57ee5489', part: "chevron", class: `bs-navigation-drawer-item__chevron ${this.expanded ? 'bs-navigation-drawer-item__chevron--expanded' : ''}` }, h(ChevronDownIcon, { key: '7b15770e5a071f8f49b06d811dbe1925ff9b5054' })))), this.expandable && (h("span", { key: '861ac7d088e527486c43f80a933e796c05980bc0', part: "children", class: "bs-navigation-drawer-item__children" }, h("slot", { key: 'fc673a4f19b0aee8c4c3d9d718cb239746e04221', name: "children" })))));
+        return (h("div", { key: 'bfe99fe12d0f7711a63aa09318693bb5b02eaa18', class: "bs-navigation-drawer-item__root" }, h("button", { key: 'bbe285abbb7bd1ae15f459fff7bd1e274f7f6606', type: "button", part: "item", class: rowClasses, "aria-expanded": this.expandable ? String(this.expanded) : undefined, "aria-label": this.ariaLabel ?? undefined, onClick: this.onClick }, !this.nested && (h("span", { key: 'fdb4d09986ac79e63e108bebd8196906c55c742b', part: "icon", class: `bs-navigation-drawer-item__icon ${this.hasIcon ? 'bs-navigation-drawer-item__icon--has-content' : ''}` }, h("slot", { key: 'f3221a3744673d4fe10a818f3bbb1ea1b60f9dea', name: "icon", onSlotchange: this.onIconSlotchange }))), h("span", { key: 'e521b658b2fe4d759b0c62cd273990d355e3390d', part: "label", class: "bs-navigation-drawer-item__label" }, h("slot", { key: '5f9588c89694c3627fee9e3c780b450968c40685' })), this.expandable && (h("span", { key: '51d58e4689ed36e55282b91dee092795edecfd75', part: "chevron", class: `bs-navigation-drawer-item__chevron ${this.expanded ? 'bs-navigation-drawer-item__chevron--expanded' : ''}` }, h(ChevronDownIcon, { key: 'a799c9de8e7a4dff5a47bb451890f1793d0d5adc' })))), this.expandable && (h("span", { key: '5ced1a13696acc1a11c8af1accf706e52588994a', part: "children", class: "bs-navigation-drawer-item__children" }, h("slot", { key: '4a2e90d828b3f8cbc5be529c48a77a3a9383c197', name: "children" })))));
     }
     static get is() { return "bs-navigation-drawer-item"; }
     static get encapsulation() { return "shadow"; }