@dropi/ui 0.1.18 → 0.1.20

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

@@ -1,5 +1,6 @@
 :host {
-  display: block;
+  display: flex;
+  flex-direction: column;
   width: 100%;
 }
 
@@ -83,7 +84,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: 'ea3be8cb6a7316f6c7e7b41b51e14db24654db7a', class: "textarea-wrapper" }, this.label && (h("label", { key: 'd6b48ca844611e26ac378070863334a481179cd5', htmlFor: this.resolvedId, style: { color: this.disabled ? 'var(--Gray-Gray-400)' : 'var(--Gray-Gray-600)' } }, this.label, showAsterisk && h("span", { key: 'a3f28346716188fd46ae411e54a64242856c9ec1', class: "asterisk" }, " *"))), h("div", { key: 'c0532ad518a267ff14884c687e49b005ff39c381', class: "textarea-container" }, h("textarea", { key: '3bdd909fb0b1710bba23d348fe46058414a0f244', 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: '7c4f136b776dd9d5d930d690401d422d856139d1', class: "char-counter" }, this.charCount, "/", this.maxlength))), showHelper && (h("div", { key: 'e72f689564b1c58cb706b5ad607044ec7cc267e7', class: "form-control-helper" }, this.isInvalid && (h("dropi-icon", { key: '93308a1c97c96da20dd246ecc23c10ed6fd656a8', name: "Warning-circle", width: "12px", height: "12px", color: "Error-Error-500" })), h("span", { key: '18df68d1cb37302d3bfeb5742432bf89806e0d98', 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: 'b8a4dee055ec85242e2a62a497a6b13fcea29bbc', 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: 'c29bfdfa90eb237f24a4d682ae05e7c29b754404', 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: '9f328904e1954d08cf18d51ca765f07ec8b9d3c1', class: "tooltip-wrapper", onMouseEnter: this.show, onMouseLeave: this.hide, onFocusin: this.show, onFocusout: this.hide }, h("slot", { key: '697ebc090a9b3d7db25666b6ae8726bc9c389d3c' }), this.text && (h("div", { key: 'f82c4ad44cd13b3eb7fd3bbfa54bb598166fba1c', 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: 'f850e6f1b5a66a686e9741b3d5e9df3bd5b81e95', 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);
+}

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

@@ -0,0 +1,167 @@
+import { h } from "@stencil/core";
+/**
+ * @component dropi-vertical-steps
+ * Vertical step-by-step progress indicator with optional click navigation.
+ */
+export class DropiVerticalSteps {
+    /** Array of steps. Pass as JSON string or array */
+    steps = [];
+    /** Currently active step (1-based) */
+    currentStep = 1;
+    /** Allow clicking completed steps to navigate back */
+    clickable = false;
+    /** Show check icon inside completed step circles */
+    showCheckIcon = true;
+    /** Emitted when a step is clicked. e.detail = step number (1-based) */
+    dropiStepClick;
+    get parsedSteps() {
+        if (typeof this.steps === 'string') {
+            try {
+                return JSON.parse(this.steps);
+            }
+            catch {
+                return [];
+            }
+        }
+        return this.steps || [];
+    }
+    resolveState(index, step) {
+        if (step.state)
+            return step.state;
+        const n = index + 1;
+        if (n < this.currentStep)
+            return 'completed';
+        if (n === this.currentStep)
+            return 'current';
+        return 'pending';
+    }
+    render() {
+        const steps = this.parsedSteps;
+        return (h("div", { key: 'ec06949df14eae6937921d930e37cf7638454263', class: "vertical-steps" }, steps.map((step, i) => {
+            const state = this.resolveState(i, step);
+            const isLast = i === steps.length - 1;
+            const isClickable = this.clickable && state === 'completed';
+            return (h("div", { class: { 'v-step': true, 'v-step--clickable': isClickable }, key: i, onClick: () => isClickable && this.dropiStepClick.emit(i + 1) }, h("div", { class: "v-step__indicator" }, h("div", { class: { 'v-step__circle': true, [`v-step__circle--${state}`]: true } }, state === 'completed' && this.showCheckIcon ? (h("dropi-icon", { name: "Check", width: "12px", height: "12px", color: "Neutral-White" })) : (h("span", { class: "v-step__number" }, i + 1))), !isLast && h("div", { class: { 'v-step__line': true, 'v-step__line--done': state === 'completed' } })), h("span", { class: { 'v-step__label': true, [`v-step__label--${state}`]: true } }, step.label)));
+        })));
+    }
+    static get is() { return "dropi-vertical-steps"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["dropi-vertical-steps.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["dropi-vertical-steps.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "steps": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "VerticalStep[] | string",
+                    "resolved": "VerticalStep[] | string",
+                    "references": {
+                        "VerticalStep": {
+                            "location": "local",
+                            "path": "/Users/mac-ti/Documents/dropi/dropi-ui/src/components/dropi-vertical-steps/dropi-vertical-steps.tsx",
+                            "id": "src/components/dropi-vertical-steps/dropi-vertical-steps.tsx::VerticalStep"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Array of steps. Pass as JSON string or array"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "steps",
+                "defaultValue": "[]"
+            },
+            "currentStep": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Currently active step (1-based)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "current-step",
+                "defaultValue": "1"
+            },
+            "clickable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Allow clicking completed steps to navigate back"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "clickable",
+                "defaultValue": "false"
+            },
+            "showCheckIcon": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show check icon inside completed step circles"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-check-icon",
+                "defaultValue": "true"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "dropiStepClick",
+                "name": "dropiStepClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when a step is clicked. e.detail = step number (1-based)"
+                },
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                }
+            }];
+    }
+}

package/dist/collection/components/dropi-youtube-lazy-video/dropi-youtube-lazy-video.css

@@ -0,0 +1,73 @@
+:host {
+  display: block;
+  width: 100%;
+}
+
+.video-wrapper {
+  position: relative;
+  width: 100%;
+  padding-bottom: 56.25%;
+  background: #000;
+  overflow: hidden;
+  border-radius: 12px;
+}
+
+.video-wrapper iframe {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border: none;
+}
+
+.thumbnail {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+}
+
+.thumbnail img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transition: transform 0.3s ease;
+}
+
+.thumbnail:hover img {
+  transform: scale(1.05);
+}
+
+.play-button {
+  position: absolute;
+  color: white;
+  border: none;
+  border-radius: 50%;
+  width: 70px;
+  height: 70px;
+  cursor: pointer;
+  transition: background 0.3s ease;
+  background: rgba(14, 17, 26, 0.6);
+  backdrop-filter: blur(2px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.play-button:hover {
+  background: rgba(0, 0, 0, 0.8);
+}
+
+@media screen and (max-width: 768px) {
+  .play-button {
+    width: 40px;
+    height: 40px;
+  }
+}