@dropi/ui 0.1.19 → 0.1.21

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

@@ -9,7 +9,7 @@
 
 .tab-item {
   padding: var(--Size-4,16px) var(--Size-5,20px);
-  background: var(--Neutral-White,#fff);
+  background: var(--Neutral-White, #ffffff);
   border-bottom: 2px solid var(--Gray-Gray-100,#e6eaf2);
   cursor: pointer; display: flex; gap: 16px; align-items: center;
   white-space: nowrap; flex-shrink: 0;
@@ -20,17 +20,22 @@
 .tab-item--disabled { background: rgba(223,228,237,0.22); cursor: not-allowed; opacity: 0.7; pointer-events: none; }
 
 .tab-label-row { display: flex; align-items: center; gap: 8px; }
-.tab-label { font-size: var(--font-size-m,14px); font-weight: var(--font-weight-bold,700); color: var(--Gray-Gray-400,#858ea6); line-height: 20px; }
+.tab-label { font-size: var(--font-size-s,14px); font-weight: var(--font-weight-bold,700); color: var(--Gray-Gray-400,#858ea6); line-height: 20px; }
 .tab-item--active .tab-label { color: var(--Gray-Gray-600,#475066); }
-.tab-item--disabled .tab-label { font-weight: 300; color: var(--Gray-Gray-300,#a3abbf); }
+.tab-item--disabled .tab-label { font-weight: var(--font-weight-light); color: var(--Gray-Gray-300,#a3abbf); }
 
 .tab-counter {
   display: inline-flex; align-items: center; justify-content: center;
   min-width: 20px; height: 20px; padding: 0 6px; border-radius: 20px;
-  font-size: var(--font-size-xs,10px); font-weight: var(--font-weight-medium,500);
+  font-size: var(--font-size-xxs);
+  font-weight: var(--font-weight-bold);
+  line-height: var(--lineheight-simple);
   background: var(--Gray-Gray-100,#e6eaf2); color: var(--Gray-Gray-500,#69738c);
 }
-.tab-counter--active { background: var(--Primary-Primary-100,#fde8d0); color: var(--Primary-Primary-500,#f49a3d); }
+.tab-counter--active { 
+  background-color: var(--Primary-Primary-500, #F49A3D);
+  color: var(--Neutral-White);
+}
 
 .tab-status-dot {
   display: inline-block;

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

@@ -10,29 +10,31 @@ import { h } from "@stencil/core";
  * />
  */
 export class DropiTabs {
-    /** Array of TabItem or JSON string */
-    tabs = [];
+    /** Array of TabItem or JSON string (matches Angular 'configuration') */
+    configuration = [];
     /** Id of the active tab */
     activeTab = 0;
     /** Whether to show a check/pending icon per tab */
     showIcon = false;
+    /** Stop tab action programmatically */
+    stopAction = false;
     /** Emitted on tab click. e.detail = TabItem */
-    dropiTabChange;
+    onIndexChanged;
     parsedTabs = [];
     tabsChanged(val) {
         this.parsedTabs = typeof val === 'string' ? JSON.parse(val) : (val ?? []);
     }
     componentWillLoad() {
-        this.tabsChanged(this.tabs);
+        this.tabsChanged(this.configuration);
     }
     handleClick(tab) {
-        if (tab.disabled)
+        if (tab.disabled || this.stopAction)
             return;
         this.activeTab = tab.id;
-        this.dropiTabChange.emit(tab);
+        this.onIndexChanged.emit(tab);
     }
     render() {
-        return (h("div", { key: '73bb4c928411c00cd9c6cfa6c0ed591c4573bbb1', class: "tabs-container", role: "tablist" }, this.parsedTabs.map(tab => {
+        return (h("div", { key: '35d0e29a1b788e7895d31ed6040cd86ecc6a28b3', 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" })
@@ -53,7 +55,7 @@ export class DropiTabs {
     }
     static get properties() {
         return {
-            "tabs": {
+            "configuration": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -71,12 +73,12 @@ export class DropiTabs {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Array of TabItem or JSON string"
+                    "text": "Array of TabItem or JSON string (matches Angular 'configuration')"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "tabs",
+                "attribute": "configuration",
                 "defaultValue": "[]"
             },
             "activeTab": {
@@ -118,6 +120,26 @@ export class DropiTabs {
                 "reflect": false,
                 "attribute": "show-icon",
                 "defaultValue": "false"
+            },
+            "stopAction": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Stop tab action programmatically"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "stop-action",
+                "defaultValue": "false"
             }
         };
     }
@@ -128,8 +150,8 @@ export class DropiTabs {
     }
     static get events() {
         return [{
-                "method": "dropiTabChange",
-                "name": "dropiTabChange",
+                "method": "onIndexChanged",
+                "name": "onIndexChanged",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
@@ -152,7 +174,7 @@ export class DropiTabs {
     }
     static get watchers() {
         return [{
-                "propName": "tabs",
+                "propName": "configuration",
                 "methodName": "tabsChanged"
             }];
     }

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

@@ -1,5 +1,5 @@
 :host {
-  display: inline-block;
+  display: inline-flex;
 }
 
 *, *::before, *::after { box-sizing: border-box; }
@@ -31,7 +31,6 @@
 
 .file-icon {
   display: flex;
-  margin-right: 4px;
 }
 
 @keyframes fade-in {

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: '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))));
+        return (h("div", { key: 'b949409e06cf0ba23112c5cb5c2f49e605ddc730', class: "container-chips" }, h("div", { key: '3013650803f96e0f77e1631ba824e378ad9d5296', class: { tags: true, 'icon-only': this.showIcon && !this.hasContent }, style: { backgroundColor: this.bgColor, color: this.textColor } }, this.showIcon && this.icon && (h("dropi-icon", { key: '5f8b72bef223fbf1ab47a1fcef7b016bfa8d7b91', class: "file-icon", name: this.icon, width: "16px", height: "16px", color: this.iconColor })), this.hasContent && h("span", { key: '63921861c9549d70fc432bb1252c2af2b76cbaa1' }, this.text))));
     }
     static get is() { return "dropi-tag"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/dropi-tag-type-product/dropi-tag-type-product.css

@@ -0,0 +1,14 @@
+:host {
+  display: inline-block;
+}
+
+.type-variation {
+  border-radius: 4px;
+  background: var(--Warning-Warning-500);
+  padding: 2px 6px;
+  font-size: var(--font-size-xs);
+  color: var(--Neutral-White);
+  text-transform: capitalize;
+  font-weight: var(--font-weight-regular);
+  width: fit-content;
+}

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

@@ -0,0 +1,48 @@
+import { h } from "@stencil/core";
+/**
+ * @component dropi-tag-type-product
+ * Tag badge showing the product variation type.
+ */
+export class DropiTagTypeProduct {
+    /** Label text. Default: VARIABLE */
+    label = 'VARIABLE';
+    render() {
+        return h("div", { key: '505c4833064fa691575e38aa16b6046bc101c7eb', class: "type-variation" }, this.label);
+    }
+    static get is() { return "dropi-tag-type-product"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["dropi-tag-type-product.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["dropi-tag-type-product.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label text. Default: VARIABLE"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label",
+                "defaultValue": "'VARIABLE'"
+            }
+        };
+    }
+}

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%;
 }
 
@@ -25,11 +26,14 @@
 
 .textarea-container {
   position: relative;
+  display: flex;
+  flex-direction: column;
 }
 
 textarea.form-control {
   box-sizing: border-box;
   width: 100%;
+  flex: 1;
   overflow: auto;
   padding: var(--Size-3, 12px);
   border: 1px solid var(--Gray-Gray-200, #c3c9d9);
@@ -37,7 +41,7 @@ textarea.form-control {
   font-size: var(--font-size-s, 12px);
   font-family: inherit;
   color: var(--Gray-Gray-700, #32394d);
-  background: var(--Neutral-White, #fff);
+  background: var(--Neutral-White, #ffffff);
   transition: border-color 0.3s ease-in-out;
   outline: none;
   appearance: none;

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

@@ -7,7 +7,7 @@ import { h } from "@stencil/core";
 export class DropiTextArea {
     internals;
     /** Input id. Defaults to label. */
-    inputId = '';
+    id = '';
     /** Name for native form submission */
     name = '';
     /** Label shown above the textarea */
@@ -17,9 +17,9 @@ export class DropiTextArea {
     /** Current value (controlled) */
     value = '';
     /** Max character length */
-    maxlength;
+    maxLength;
     /** Min character length */
-    minlength = 0;
+    minLength = 0;
     /** Number of visible rows */
     rows = 4;
     /** Resize behavior */
@@ -29,11 +29,37 @@ export class DropiTextArea {
     /** Mark as required */
     required = false;
     /** Show the required asterisk */
-    showAsterisk = false;
+    showObligatoryAsterisk = false;
     /** Helper / error text below the field */
-    helperText = '';
+    textHelper = '';
     /** Mark the field as invalid (consumer-controlled) */
-    invalid = false;
+    hasError = false;
+    /**
+     * Convenience object prop — matches Angular `textAreaProperties: TextAreaProperties`.
+     * When provided, its non-null fields override individual props.
+     * Note: `formControl` is not supported in web components; use `value` + dropiInput instead.
+     */
+    textAreaProperties = null;
+    textAreaPropertiesChanged(val) {
+        if (!val)
+            return;
+        if (val.id !== undefined)
+            this.id = val.id;
+        if (val.label !== undefined)
+            this.label = val.label;
+        if (val.placeholder !== undefined)
+            this.placeholder = val.placeholder;
+        if (val.maxLength !== undefined)
+            this.maxLength = val.maxLength;
+        if (val.minLength !== undefined)
+            this.minLength = val.minLength;
+        if (val.textHelper !== undefined)
+            this.textHelper = val.textHelper;
+        if (val.rows !== undefined)
+            this.rows = val.rows;
+        if (val.resize !== undefined)
+            this.resize = val.resize;
+    }
     touched = false;
     /** Emitted on every keystroke */
     dropiInput;
@@ -46,6 +72,8 @@ export class DropiTextArea {
     }
     componentWillLoad() {
         this.internals.setFormValue(this.value ?? '');
+        if (this.textAreaProperties)
+            this.textAreaPropertiesChanged(this.textAreaProperties);
     }
     handleInput(e) {
         const val = e.target.value;
@@ -59,23 +87,23 @@ export class DropiTextArea {
         this.dropiBlur.emit();
     }
     get resolvedId() {
-        return this.inputId || this.label;
+        return this.id || this.label;
     }
     get isInvalid() {
-        return this.invalid && this.touched;
+        return this.hasError && this.touched;
     }
     get charCount() {
         return this.value?.length ?? 0;
     }
     render() {
-        const showAsterisk = this.required && this.showAsterisk && !this.disabled;
-        const showHelper = this.helperText || this.isInvalid;
-        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: {
+        const showAsterisk = this.required && this.showObligatoryAsterisk && !this.disabled;
+        const showHelper = this.textHelper || this.isInvalid;
+        return (h("div", { key: '8afff91e57583589acbc62da64543b522141fe4e', class: "textarea-wrapper" }, this.label && (h("label", { key: 'b80d26f1a0231b101b475c525aca3c759aa89912', htmlFor: this.resolvedId, style: { color: this.disabled ? 'var(--Gray-Gray-400)' : 'var(--Gray-Gray-600)' } }, this.label, showAsterisk && h("span", { key: 'fa331063536907c43d869079edad0ed3be1989c5', class: "asterisk" }, " *"))), h("div", { key: 'a98ca8f71bb5165115785c41d5ba58e846cd8d64', class: "textarea-container" }, h("textarea", { key: 'dd21883e18ab5819cbac034371036afb9566e902', 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: '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)))));
+            }, 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: '3955ef2341745b33a1e6fe88d4b6cf8ac6eecdca', class: "char-counter" }, this.charCount, "/", this.maxLength))), showHelper && (h("div", { key: '03c4f4c51fb653a09dd81cb4f4b0114ffcdf414c', class: "form-control-helper" }, this.isInvalid && (h("dropi-icon", { key: 'e85cfdc13637d349f679132bc88d2bdfa18878da', name: "Warning-circle", width: "12px", height: "12px", color: "Error-Error-500" })), h("span", { key: 'e4724f2509681e3c72b8e1b5df7e9f8f5e042dc0', class: { 'invalid-color': this.isInvalid }, style: { color: this.disabled ? 'var(--Gray-Gray-400)' : undefined } }, this.textHelper)))));
     }
     static get is() { return "dropi-text-area"; }
     static get encapsulation() { return "shadow"; }
@@ -92,9 +120,9 @@ export class DropiTextArea {
     }
     static get properties() {
         return {
-            "inputId": {
+            "id": {
                 "type": "string",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "string",
                     "resolved": "string",
@@ -109,7 +137,7 @@ export class DropiTextArea {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "input-id",
+                "attribute": "id",
                 "defaultValue": "''"
             },
             "name": {
@@ -134,7 +162,7 @@ export class DropiTextArea {
             },
             "label": {
                 "type": "string",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "string",
                     "resolved": "string",
@@ -154,7 +182,7 @@ export class DropiTextArea {
             },
             "placeholder": {
                 "type": "string",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "string",
                     "resolved": "string",
@@ -192,9 +220,9 @@ export class DropiTextArea {
                 "attribute": "value",
                 "defaultValue": "''"
             },
-            "maxlength": {
+            "maxLength": {
                 "type": "number",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "number",
                     "resolved": "number",
@@ -209,11 +237,11 @@ export class DropiTextArea {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "maxlength"
+                "attribute": "max-length"
             },
-            "minlength": {
+            "minLength": {
                 "type": "number",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "number",
                     "resolved": "number",
@@ -228,12 +256,12 @@ export class DropiTextArea {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "minlength",
+                "attribute": "min-length",
                 "defaultValue": "0"
             },
             "rows": {
                 "type": "number",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "number",
                     "resolved": "number",
@@ -253,7 +281,7 @@ export class DropiTextArea {
             },
             "resize": {
                 "type": "string",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "ResizeMode",
                     "resolved": "\"both\" | \"horizontal\" | \"none\" | \"vertical\"",
@@ -317,7 +345,7 @@ export class DropiTextArea {
                 "attribute": "required",
                 "defaultValue": "false"
             },
-            "showAsterisk": {
+            "showObligatoryAsterisk": {
                 "type": "boolean",
                 "mutable": false,
                 "complexType": {
@@ -334,12 +362,12 @@ export class DropiTextArea {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "show-asterisk",
+                "attribute": "show-obligatory-asterisk",
                 "defaultValue": "false"
             },
-            "helperText": {
+            "textHelper": {
                 "type": "string",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "string",
                     "resolved": "string",
@@ -354,10 +382,10 @@ export class DropiTextArea {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "helper-text",
+                "attribute": "text-helper",
                 "defaultValue": "''"
             },
-            "invalid": {
+            "hasError": {
                 "type": "boolean",
                 "mutable": false,
                 "complexType": {
@@ -374,8 +402,32 @@ export class DropiTextArea {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "invalid",
+                "attribute": "has-error",
                 "defaultValue": "false"
+            },
+            "textAreaProperties": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "TextAreaProperties | null",
+                    "resolved": "TextAreaProperties",
+                    "references": {
+                        "TextAreaProperties": {
+                            "location": "local",
+                            "path": "/Users/mac-ti/Documents/dropi/dropi-ui/src/components/dropi-text-area/dropi-text-area.tsx",
+                            "id": "src/components/dropi-text-area/dropi-text-area.tsx::TextAreaProperties"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Convenience object prop \u2014 matches Angular `textAreaProperties: TextAreaProperties`.\nWhen provided, its non-null fields override individual props.\nNote: `formControl` is not supported in web components; use `value` + dropiInput instead."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "null"
             }
         };
     }
@@ -449,6 +501,9 @@ export class DropiTextArea {
     }
     static get watchers() {
         return [{
+                "propName": "textAreaProperties",
+                "methodName": "textAreaPropertiesChanged"
+            }, {
                 "propName": "value",
                 "methodName": "valueChanged"
             }];

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

@@ -39,7 +39,7 @@
 }
 
 .tl-step--active .tl-step__icon {
-  background: var(--Neutral-White, #fff);
+  background: var(--Neutral-White, #ffffff);
   border: 2px solid var(--Primary-Primary-500, #f49a3d);
   box-shadow: 0 0 0 4px var(--Primary-Primary-100, #fde9d0);
 }
@@ -65,7 +65,7 @@
 }
 
 .tl-step--done .tl-step__dot {
-  background: var(--Neutral-White, #fff);
+  background: var(--Neutral-White, #ffffff);
 }
 
 /* ── Vertical connector ─────────────────────────────────── */

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

@@ -19,7 +19,7 @@ export class DropiTimeLine {
     }
     render() {
         const steps = this.parsedSteps;
-        return (h("div", { key: '9391536f472117d8788456df24de433fc9f6ae1e', class: "timeline" }, steps.map((step, i) => {
+        return (h("div", { key: '988abfa70af8e37135bc70ca4f5727e5a5eb1295', 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))));
         })));

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

@@ -13,7 +13,7 @@
 .toast-wrapper--leaving { opacity: 0; transform: translateX(20px); max-height: 0; pointer-events: none; }
 @keyframes toast-in { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }
 
-.toast { position: relative; display: flex; align-items: flex-start; border-radius: var(--Border-2,8px); background: var(--Neutral-White,#fff); box-shadow: 0.5px -1px 7px 0px rgba(0, 0, 0, 0.06); border-left: var(--Size-2, 8px) solid; overflow: hidden; min-width: 300px; }
+.toast { position: relative; display: flex; align-items: flex-start; border-radius: var(--Border-2,8px); background: var(--Neutral-White, #ffffff); box-shadow: 0.5px -1px 7px 0px rgba(0, 0, 0, 0.06); border-left: var(--Size-2, 8px) solid; overflow: hidden; min-width: 300px; }
 .toast--success { border-color: var(--Success-Success-500,#34c38f); }
 .toast--error   { border-color: var(--Error-Error-500,#f46a6b); }
 .toast--warn    { border-color: var(--Warning-Warning-500,#f1b44c); }
@@ -57,7 +57,7 @@ lottie-player {
 
 .info-container { flex: 1; min-width: 0; align-self: center; display: flex; flex-direction: column; gap: var(--Size-1, 4px); }
 .title { margin: 0; font-size: var(--font-size-l,18px); font-weight: var(--font-weight-bold,700); color: var(--Gray-Gray-700,#32394d); line-height: 1.1; text-align: left; max-width: 250px; }
-.description  { margin: 0; font-size: var(--font-size-s,14px); color: var(--Gray-Gray-500,#6b7280); line-height: 1.4; text-align: left; max-width: 250px; }
+.description  { margin: 0; font-size: var(--font-size-s,14px); color: var(--Gray-Gray-500, #69738c); line-height: 1.4; text-align: left; max-width: 250px; }
 
 .toast-close { position: absolute; top: 18px; right: 10px; background: none; border: none; cursor: pointer; padding: 0; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
 .toast-close:hover { opacity: 0.7; }

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

@@ -11,7 +11,7 @@ export class DropiToast {
     /** Toast position */
     position = 'top-right';
     /** Default auto-close ms (0 = manual) */
-    life = 4000;
+    life = 3000;
     items = [];
     idCounter = 0;
     /** Show a toast */
@@ -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: '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" })))))))));
+        return (h("div", { key: '468855704e1a9dcb00b0927423326b312a2ca900', 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"; }
@@ -101,7 +101,7 @@ export class DropiToast {
                 "setter": false,
                 "reflect": false,
                 "attribute": "life",
-                "defaultValue": "4000"
+                "defaultValue": "3000"
             }
         };
     }