@dropi/ui 0.1.18 → 0.1.19

package/dist/collection/components/dropi-steps/dropi-steps.css

@@ -0,0 +1,95 @@
+:host {
+  display: block;
+  width: 100%;
+}
+
+*, *::before, *::after { box-sizing: border-box; }
+
+.stepper {
+  display: flex;
+  align-items: flex-start;
+  width: 100%;
+}
+
+/* ── Each step ──────────────────────────────────────────── */
+.stepper__step {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex: 1;
+  position: relative;
+}
+
+/* ── Circle row (circle + connecting line) ──────────────── */
+.stepper__circle-wrap {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  position: relative;
+}
+
+.stepper__circle {
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--font-size-xs, 10px);
+  font-weight: var(--font-weight-bold, 700);
+  flex-shrink: 0;
+  z-index: 1;
+  transition: background 0.2s, border-color 0.2s;
+}
+
+.stepper__circle--pending {
+  background: var(--Neutral-White, #fff);
+  border: 2px solid var(--Gray-Gray-200, #c3c9d9);
+  color: var(--Gray-Gray-400, #858ea6);
+}
+
+.stepper__circle--focus {
+  background: var(--Neutral-White, #fff);
+  border: 2px solid var(--Primary-Primary-500, #f49a3d);
+  color: var(--Primary-Primary-500, #f49a3d);
+}
+
+.stepper__circle--completed {
+  background: var(--Primary-Primary-500, #f49a3d);
+  border: 2px solid var(--Primary-Primary-500, #f49a3d);
+  color: var(--Neutral-White, #fff);
+}
+
+/* ── Connecting line ────────────────────────────────────── */
+.stepper__line {
+  flex: 1;
+  height: 2px;
+  background: var(--Gray-Gray-200, #c3c9d9);
+  transition: background 0.2s;
+}
+
+.stepper__line--done {
+  background: var(--Primary-Primary-500, #f49a3d);
+}
+
+/* ── Labels ─────────────────────────────────────────────── */
+.stepper__label {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 2px;
+  margin-top: var(--Size-2, 8px);
+  text-align: center;
+  padding: 0 4px;
+}
+
+.stepper__title {
+  font-size: var(--font-size-s, 12px);
+  font-weight: var(--font-weight-bold, 700);
+  color: var(--Gray-Gray-700, #32394d);
+}
+
+.stepper__desc {
+  font-size: var(--font-size-xs, 10px);
+  color: var(--Gray-Gray-500, #69738c);
+}

package/dist/collection/components/dropi-steps/dropi-steps.js

@@ -0,0 +1,145 @@
+import { h } from "@stencil/core";
+/**
+ * @component dropi-steps
+ * Horizontal stepper showing step progress with number/title/description.
+ */
+export class DropiSteps {
+    /** Total number of steps */
+    stepsCount = 3;
+    /** Show step number inside the circle */
+    showNumberOfStep = true;
+    /** Active/current step index (1-based) */
+    currentStep = 1;
+    /** Labels for each step. Pass as JSON string or array */
+    stepLabels = [];
+    get parsedLabels() {
+        if (typeof this.stepLabels === 'string') {
+            try {
+                return JSON.parse(this.stepLabels);
+            }
+            catch {
+                return [];
+            }
+        }
+        return this.stepLabels || [];
+    }
+    stepState(index) {
+        if (index < this.currentStep)
+            return 'completed';
+        if (index === this.currentStep)
+            return 'focus';
+        return 'pending';
+    }
+    render() {
+        const labels = this.parsedLabels;
+        const steps = Array.from({ length: this.stepsCount }, (_, i) => i + 1);
+        return (h("div", { key: '446597aa40fdfd1c5e5274a89d3cc45a98003da9', class: "stepper" }, steps.map((step) => {
+            const state = this.stepState(step);
+            const label = labels[step - 1];
+            const isLast = step === this.stepsCount;
+            return (h("div", { class: "stepper__step", key: step }, h("div", { class: "stepper__circle-wrap" }, h("div", { class: { 'stepper__circle': true, [`stepper__circle--${state}`]: true } }, state === 'completed' ? (h("dropi-icon", { name: "Check", width: "12px", height: "12px", color: "Neutral-White" })) : (this.showNumberOfStep ? h("span", null, step) : null)), !isLast && h("div", { class: { 'stepper__line': true, 'stepper__line--done': state === 'completed' } })), label && (h("div", { class: "stepper__label" }, label.title && h("span", { class: "stepper__title" }, label.title), label.description && h("span", { class: "stepper__desc" }, label.description)))));
+        })));
+    }
+    static get is() { return "dropi-steps"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["dropi-steps.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["dropi-steps.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "stepsCount": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Total number of steps"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "steps-count",
+                "defaultValue": "3"
+            },
+            "showNumberOfStep": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show step number inside the circle"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-number-of-step",
+                "defaultValue": "true"
+            },
+            "currentStep": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Active/current step index (1-based)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "current-step",
+                "defaultValue": "1"
+            },
+            "stepLabels": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "StepLabel[] | string",
+                    "resolved": "StepLabel[] | string",
+                    "references": {
+                        "StepLabel": {
+                            "location": "local",
+                            "path": "/Users/mac-ti/Documents/dropi/dropi-ui/src/components/dropi-steps/dropi-steps.tsx",
+                            "id": "src/components/dropi-steps/dropi-steps.tsx::StepLabel"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Labels for each step. Pass as JSON string or array"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "step-labels",
+                "defaultValue": "[]"
+            }
+        };
+    }
+}

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

@@ -16,7 +16,7 @@ export class DropiSwitch {
         this.dropiChange.emit(this.isChecked);
     }
     render() {
-        return (h("label", { key: '790db7283a976472fd3f8de502f73ece29134878', class: "toggle-switch" }, h("input", { key: '7199dcfb1a4f81eb30d7510966d56fd0111d648f', type: "checkbox", checked: this.isChecked, disabled: this.disabled, onChange: (e) => this.onToggleChange(e) }), h("span", { key: '2c62e927e77e58993ab44f2b4fafefcea556b71e', class: "slider" })));
+        return (h("label", { key: 'd756605f85a24fdbf8714824921b17e618bde921', class: "toggle-switch" }, h("input", { key: '8d774e122778bd286269552ebabac1c04aa894c4', type: "checkbox", checked: this.isChecked, disabled: this.disabled, onChange: (e) => this.onToggleChange(e) }), h("span", { key: 'ff8d52dec5653e82fa965bca0ddd19ecb49cdad3', class: "slider" })));
     }
     static get is() { return "dropi-switch"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/dropi-tabs/dropi-tabs.js

@@ -32,7 +32,7 @@ export class DropiTabs {
         this.dropiTabChange.emit(tab);
     }
     render() {
-        return (h("div", { key: '5b28faac5789a5e29aa68fe2892854cdebccda75', class: "tabs-container", role: "tablist" }, this.parsedTabs.map(tab => {
+        return (h("div", { key: '73bb4c928411c00cd9c6cfa6c0ed591c4573bbb1', class: "tabs-container", role: "tablist" }, this.parsedTabs.map(tab => {
             const isActive = tab.id === this.activeTab;
             return (h("div", { role: "tab", "aria-selected": String(isActive), class: { 'tab-item': true, 'tab-item--active': isActive && !tab.disabled, 'tab-item--disabled': !!tab.disabled }, onClick: () => this.handleClick(tab) }, h("span", { class: "tab-label-row" }, h("span", { class: "tab-label" }, tab.label), tab.counter !== undefined && tab.counter !== null && (h("span", { class: { 'tab-counter': true, 'tab-counter--active': isActive } }, tab.counter))), this.showIcon && (tab.completed
                 ? h("dropi-icon", { name: "Check-circle", width: "12px", height: "12px", color: "Success-Success-500" })

package/dist/collection/components/dropi-tag/dropi-tag.js

@@ -48,7 +48,7 @@ export class DropiTag {
         return typeof this.text === 'string' && this.text.trim().length > 0;
     }
     render() {
-        return (h("div", { key: 'd559f6c2ed27d543f018d3533d8d972bc47ceb9d', class: "container-chips" }, h("div", { key: 'd131a4626ead2d3d53d5c77875f8ebb19acc3b52', class: { tags: true, 'icon-only': this.showIcon && !this.hasContent }, style: { backgroundColor: this.bgColor, color: this.textColor } }, this.showIcon && this.icon && (h("dropi-icon", { key: '54775a2ca1bd87be3293b3d6417f4a26c6da0c85', class: "file-icon", name: this.icon, width: "16px", height: "16px", color: this.iconColor })), this.hasContent && h("span", { key: 'bce897f4094c33fd53dc98571cae60cd456e0706' }, this.text))));
+        return (h("div", { key: '65711113151698b330e945197d0b626130dc06ef', class: "container-chips" }, h("div", { key: 'c49964c1bcdfd96f538a1782a4b564a0e73fa87e', class: { tags: true, 'icon-only': this.showIcon && !this.hasContent }, style: { backgroundColor: this.bgColor, color: this.textColor } }, this.showIcon && this.icon && (h("dropi-icon", { key: 'cb1ed97b3f33c8e4171899f78a84e3572a37e462', class: "file-icon", name: this.icon, width: "16px", height: "16px", color: this.iconColor })), this.hasContent && h("span", { key: '92d71bb6f51dd7fa362023c230f27f9fa59744c0' }, this.text))));
     }
     static get is() { return "dropi-tag"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/dropi-text-area/dropi-text-area.css

@@ -83,7 +83,6 @@ textarea.form-control:disabled {
   display: flex;
   gap: 4px;
   align-items: center;
-  margin-top: 4px;
 }
 
 .form-control-helper span {

package/dist/collection/components/dropi-text-area/dropi-text-area.js

@@ -70,12 +70,12 @@ export class DropiTextArea {
     render() {
         const showAsterisk = this.required && this.showAsterisk && !this.disabled;
         const showHelper = this.helperText || this.isInvalid;
-        return (h("div", { key: '652b432e3f23f6ca383ca4c44ad3b0da599ecbfb', class: "textarea-wrapper" }, this.label && (h("label", { key: '370698235edc4d8f8d449e66ee4ef90ea9e191d0', htmlFor: this.resolvedId, style: { color: this.disabled ? 'var(--Gray-Gray-400)' : 'var(--Gray-Gray-600)' } }, this.label, showAsterisk && h("span", { key: 'd7c90f3a45b987d7b3229410f141d7fa51fd003d', class: "asterisk" }, " *"))), h("div", { key: '579fadaf791012ab93ddcdff06d237dab27efc9a', class: "textarea-container" }, h("textarea", { key: 'd81a5f25b541e044f7f632512570f53966b156cf', id: this.resolvedId, class: {
+        return (h("div", { key: 'e61f93feb18b6ed2fd3a9e2b7a301b3383c59ef1', class: "textarea-wrapper" }, this.label && (h("label", { key: '3dce1ef5e6335f838778c09de911235115111623', htmlFor: this.resolvedId, style: { color: this.disabled ? 'var(--Gray-Gray-400)' : 'var(--Gray-Gray-600)' } }, this.label, showAsterisk && h("span", { key: 'bdeb923cb358ea947bbf22cb0a76545aef5d7b80', class: "asterisk" }, " *"))), h("div", { key: '402aae3d238a559ac670e69aa3a003baa36fd2c2', class: "textarea-container" }, h("textarea", { key: 'afe5dae36cb27dbd461ab9d4f998f83a43babf90', id: this.resolvedId, class: {
                 'form-control': true,
                 'Body-M-Regular': true,
                 'form-control-valid': !this.isInvalid && this.touched && !!this.value,
                 'form-control-invalid': this.isInvalid,
-            }, rows: this.rows, placeholder: this.placeholder, maxLength: this.maxlength, minLength: this.minlength, disabled: this.disabled, required: this.required, style: { resize: this.resize }, onInput: (e) => this.handleInput(e), onFocus: () => this.dropiFocus.emit(), onBlur: () => this.handleBlur() }, this.value), this.maxlength > 0 && (h("div", { key: 'd6c80f4f693e12069a2b1147b489717d61e53e53', class: "char-counter" }, this.charCount, "/", this.maxlength))), showHelper && (h("div", { key: 'af317619d37311746ceefa083bb44ceff6514f92', class: "form-control-helper" }, this.isInvalid && (h("dropi-icon", { key: '2d92acfcb808a67319c8c1aa1a2c9c6c05affcef', name: "Warning-circle", width: "12px", height: "12px", color: "Error-Error-500" })), h("span", { key: 'd2fad4506be938c8376d41ed41186a808364adbf', class: { 'invalid-color': this.isInvalid }, style: { color: this.disabled ? 'var(--Gray-Gray-400)' : undefined } }, this.helperText)))));
+            }, rows: this.rows, placeholder: this.placeholder, maxLength: this.maxlength, minLength: this.minlength, disabled: this.disabled, required: this.required, style: { resize: this.resize }, onInput: (e) => this.handleInput(e), onFocus: () => this.dropiFocus.emit(), onBlur: () => this.handleBlur() }, this.value), this.maxlength > 0 && (h("div", { key: '0c9a7c6555594e7101f72b47c819838e2ffe5236', class: "char-counter" }, this.charCount, "/", this.maxlength))), showHelper && (h("div", { key: 'ad4d6435c21ec013a271b490c74f66839de4d6c2', class: "form-control-helper" }, this.isInvalid && (h("dropi-icon", { key: '11e480a0cb3f59f1838915850d09a0758160b2fc', name: "Warning-circle", width: "12px", height: "12px", color: "Error-Error-500" })), h("span", { key: '461e0f727feecb2fd6d5f21e51f39d017ff275b3', class: { 'invalid-color': this.isInvalid }, style: { color: this.disabled ? 'var(--Gray-Gray-400)' : undefined } }, this.helperText)))));
     }
     static get is() { return "dropi-text-area"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/dropi-time-line/dropi-time-line.css

@@ -0,0 +1,108 @@
+:host {
+  display: block;
+}
+
+*, *::before, *::after { box-sizing: border-box; }
+
+.timeline {
+  display: flex;
+  flex-direction: column;
+}
+
+.tl-step {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--Size-3, 12px);
+}
+
+/* ── Left column: icon + line ───────────────────────────── */
+.tl-step__marker {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+.tl-step__icon {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background 0.2s, border-color 0.2s;
+}
+
+.tl-step--pending .tl-step__icon {
+  background: var(--Gray-Gray-100, #e6eaf2);
+  border: 2px solid var(--Gray-Gray-200, #c3c9d9);
+}
+
+.tl-step--active .tl-step__icon {
+  background: var(--Neutral-White, #fff);
+  border: 2px solid var(--Primary-Primary-500, #f49a3d);
+  box-shadow: 0 0 0 4px var(--Primary-Primary-100, #fde9d0);
+}
+
+.tl-step--done .tl-step__icon {
+  background: var(--Primary-Primary-500, #f49a3d);
+  border: 2px solid var(--Primary-Primary-500, #f49a3d);
+}
+
+.tl-step__dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  display: block;
+}
+
+.tl-step--pending .tl-step__dot {
+  background: var(--Gray-Gray-300, #a3abbf);
+}
+
+.tl-step--active .tl-step__dot {
+  background: var(--Primary-Primary-500, #f49a3d);
+}
+
+.tl-step--done .tl-step__dot {
+  background: var(--Neutral-White, #fff);
+}
+
+/* ── Vertical connector ─────────────────────────────────── */
+.tl-step__line {
+  flex: 1;
+  width: 2px;
+  min-height: 24px;
+  margin: 4px 0;
+  background: var(--Gray-Gray-200, #c3c9d9);
+}
+
+.tl-step--done + .tl-step .tl-step__line,
+.tl-step--done .tl-step__line {
+  background: var(--Primary-Primary-500, #f49a3d);
+}
+
+/* ── Content ────────────────────────────────────────────── */
+.tl-step__content {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding-top: 6px;
+  padding-bottom: var(--Size-4, 16px);
+}
+
+.tl-step__label {
+  font-size: var(--font-size-s, 12px);
+  font-weight: var(--font-weight-bold, 700);
+  color: var(--Gray-Gray-700, #32394d);
+}
+
+.tl-step--pending .tl-step__label {
+  color: var(--Gray-Gray-400, #858ea6);
+  font-weight: var(--font-weight-regular, 400);
+}
+
+.tl-step__subtitle {
+  font-size: var(--font-size-xs, 10px);
+  color: var(--Gray-Gray-500, #69738c);
+}

package/dist/collection/components/dropi-time-line/dropi-time-line.js

@@ -0,0 +1,69 @@
+import { h } from "@stencil/core";
+/**
+ * @component dropi-time-line
+ * Vertical timeline showing ordered steps with status indicators.
+ */
+export class DropiTimeLine {
+    /** Array of timeline steps. Pass as JSON string or array */
+    steps = [];
+    get parsedSteps() {
+        if (typeof this.steps === 'string') {
+            try {
+                return JSON.parse(this.steps);
+            }
+            catch {
+                return [];
+            }
+        }
+        return this.steps || [];
+    }
+    render() {
+        const steps = this.parsedSteps;
+        return (h("div", { key: '9391536f472117d8788456df24de433fc9f6ae1e', class: "timeline" }, steps.map((step, i) => {
+            const isLast = i === steps.length - 1;
+            return (h("div", { class: { 'tl-step': true, [`tl-step--${step.status}`]: true }, key: step.id || i }, h("div", { class: "tl-step__marker" }, h("div", { class: "tl-step__icon" }, step.icon ? (h("dropi-icon", { name: step.icon, width: "16px", height: "16px", color: step.status === 'done' ? 'Neutral-White' : step.status === 'active' ? 'Primary-Primary-500' : 'Gray-Gray-400' })) : (h("span", { class: "tl-step__dot" }))), !isLast && h("div", { class: "tl-step__line" })), h("div", { class: "tl-step__content" }, h("span", { class: "tl-step__label" }, step.label), step.subtitle && h("span", { class: "tl-step__subtitle" }, step.subtitle))));
+        })));
+    }
+    static get is() { return "dropi-time-line"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["dropi-time-line.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["dropi-time-line.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "steps": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TimelineStep[] | string",
+                    "resolved": "TimelineStep[] | string",
+                    "references": {
+                        "TimelineStep": {
+                            "location": "local",
+                            "path": "/Users/mac-ti/Documents/dropi/dropi-ui/src/components/dropi-time-line/dropi-time-line.tsx",
+                            "id": "src/components/dropi-time-line/dropi-time-line.tsx::TimelineStep"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Array of timeline steps. Pass as JSON string or array"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "steps",
+                "defaultValue": "[]"
+            }
+        };
+    }
+}

package/dist/collection/components/dropi-toast/dropi-toast.js

@@ -47,7 +47,7 @@ export class DropiToast {
         return `<lottie-player src="${this.lottieMap[severity]}" background="transparent" speed="1" loop autoplay></lottie-player>`;
     }
     render() {
-        return (h("div", { key: '8cce9f62a0b8cac6415881be5f2e6d82bd35668e', class: `toast-container toast-container--${this.position}` }, this.items.map(item => (h("div", { key: item.msg.id, class: { 'toast-wrapper': true, 'toast-wrapper--leaving': item.leaving } }, h("div", { class: `toast toast--${item.msg.severity}` }, h("div", { class: "toast-content" }, h("div", { class: "lottie-img" }, h("div", { class: "lottie-player-container", innerHTML: this.getLottieHtml(item.msg.severity) })), h("div", { class: "info-container" }, h("p", { class: "title" }, item.msg.summary), item.msg.detail && h("p", { class: "description" }, item.msg.detail))), item.msg.closable && (h("button", { class: "toast-close", onClick: () => this.remove(item.msg.id) }, h("dropi-icon", { name: "Close-small", width: "20px", height: "20px", color: "Gray-Gray-400" })))))))));
+        return (h("div", { key: 'ee7e397e3ae32ac5a30b9a37777823315d2e653d', class: `toast-container toast-container--${this.position}` }, this.items.map(item => (h("div", { key: item.msg.id, class: { 'toast-wrapper': true, 'toast-wrapper--leaving': item.leaving } }, h("div", { class: `toast toast--${item.msg.severity}` }, h("div", { class: "toast-content" }, h("div", { class: "lottie-img" }, h("div", { class: "lottie-player-container", innerHTML: this.getLottieHtml(item.msg.severity) })), h("div", { class: "info-container" }, h("p", { class: "title" }, item.msg.summary), item.msg.detail && h("p", { class: "description" }, item.msg.detail))), item.msg.closable && (h("button", { class: "toast-close", onClick: () => this.remove(item.msg.id) }, h("dropi-icon", { name: "Close-small", width: "20px", height: "20px", color: "Gray-Gray-400" })))))))));
     }
     static get is() { return "dropi-toast"; }
     static get encapsulation() { return "shadow"; }

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

@@ -35,7 +35,7 @@ export class DropiTooltip {
         this.visible = false;
     };
     render() {
-        return (h("div", { key: 'c6179d8dfb9f4c3cc2a6a4e79f2e1a9ff8bbd641', class: "tooltip-wrapper", onMouseEnter: this.show, onMouseLeave: this.hide, onFocusin: this.show, onFocusout: this.hide }, h("slot", { key: 'aee7bae9d384369faaa5b078e40f3a8763690bb3' }), this.text && (h("div", { key: 'd00e75f536c5f88c7062ac6359dec3fe7d866cd0', class: { 'tooltip-bubble': true, [`tooltip-bubble--${this.position}`]: true, 'tooltip-bubble--visible': this.visible }, style: { maxWidth: this.maxWidth }, role: "tooltip" }, this.text, h("span", { key: 'aec6a936bbc6677b0e1abf3a18233d90d757cd96', class: `tooltip-arrow tooltip-arrow--${this.position}` })))));
+        return (h("div", { key: 'fa52d7ff250fe76fefd529f2dab27338d0a8bd0a', class: "tooltip-wrapper", onMouseEnter: this.show, onMouseLeave: this.hide, onFocusin: this.show, onFocusout: this.hide }, h("slot", { key: 'e301fead7186cec3b817a9339a0878006b750cbf' }), this.text && (h("div", { key: 'e24cb85fd227d0f96935dfe6095804ad9fcbc140', class: { 'tooltip-bubble': true, [`tooltip-bubble--${this.position}`]: true, 'tooltip-bubble--visible': this.visible }, style: { maxWidth: this.maxWidth }, role: "tooltip" }, this.text, h("span", { key: 'a2dbe5693bfb2c0894d20bc2831d303b5634869e', class: `tooltip-arrow tooltip-arrow--${this.position}` })))));
     }
     static get is() { return "dropi-tooltip"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/dropi-vertical-steps/dropi-vertical-steps.css

@@ -0,0 +1,95 @@
+:host {
+  display: block;
+}
+
+*, *::before, *::after { box-sizing: border-box; }
+
+.vertical-steps {
+  display: flex;
+  flex-direction: column;
+}
+
+.v-step {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--Size-3, 12px);
+}
+
+.v-step--clickable {
+  cursor: pointer;
+}
+
+/* ── Left indicator column ──────────────────────────────── */
+.v-step__indicator {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+.v-step__circle {
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  transition: background 0.2s, border-color 0.2s;
+}
+
+.v-step__circle--pending {
+  background: var(--Neutral-White, #fff);
+  border: 2px solid var(--Gray-Gray-200, #c3c9d9);
+}
+
+.v-step__circle--current {
+  background: var(--Neutral-White, #fff);
+  border: 2px solid var(--Primary-Primary-500, #f49a3d);
+}
+
+.v-step__circle--completed {
+  background: var(--Primary-Primary-500, #f49a3d);
+  border: 2px solid var(--Primary-Primary-500, #f49a3d);
+}
+
+.v-step__number {
+  font-size: var(--font-size-xs, 10px);
+  font-weight: var(--font-weight-bold, 700);
+  color: var(--Gray-Gray-500, #69738c);
+}
+
+.v-step__circle--current .v-step__number {
+  color: var(--Primary-Primary-500, #f49a3d);
+}
+
+/* ── Vertical connecting line ───────────────────────────── */
+.v-step__line {
+  flex: 1;
+  width: 2px;
+  min-height: 24px;
+  background: var(--Gray-Gray-200, #c3c9d9);
+  margin: 4px 0;
+  transition: background 0.2s;
+}
+
+.v-step__line--done {
+  background: var(--Primary-Primary-500, #f49a3d);
+}
+
+/* ── Label ──────────────────────────────────────────────── */
+.v-step__label {
+  padding-top: 4px;
+  font-size: var(--font-size-s, 12px);
+  color: var(--Gray-Gray-600, #475066);
+  line-height: 1.4;
+}
+
+.v-step__label--current {
+  color: var(--Gray-Gray-800, #1a2033);
+  font-weight: var(--font-weight-bold, 700);
+}
+
+.v-step__label--completed {
+  color: var(--Gray-Gray-500, #69738c);
+}