@dropi/ui 0.1.20 → 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: '9db1e2f4fdd15fc4ea4407d83fe33c562270acec', 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.js

@@ -48,7 +48,7 @@ export class DropiTag {
         return typeof this.text === 'string' && this.text.trim().length > 0;
     }
     render() {
-        return (h("div", { key: 'ca7fdd40b3d059abe34a6c4ccfba5cbfbdb5c786', class: "container-chips" }, h("div", { key: '897f4ab4a9d2d5ecb7088c6732f59c6cc3138c43', class: { tags: true, 'icon-only': this.showIcon && !this.hasContent }, style: { backgroundColor: this.bgColor, color: this.textColor } }, this.showIcon && this.icon && (h("dropi-icon", { key: '77b9315e4d1d4bd257331a4ce4cb3b82480430c0', class: "file-icon", name: this.icon, width: "16px", height: "16px", color: this.iconColor })), this.hasContent && h("span", { key: 'c55aede3070168989b8ebefa85480968f71eb08a' }, 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

@@ -4,11 +4,11 @@
 
 .type-variation {
   border-radius: 4px;
-  background: #f1b44c;
+  background: var(--Warning-Warning-500);
   padding: 2px 6px;
-  font-size: 12px;
-  color: #fff;
+  font-size: var(--font-size-xs);
+  color: var(--Neutral-White);
   text-transform: capitalize;
-  font-weight: 400;
+  font-weight: var(--font-weight-regular);
   width: fit-content;
 }

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

@@ -7,7 +7,7 @@ export class DropiTagTypeProduct {
     /** Label text. Default: VARIABLE */
     label = 'VARIABLE';
     render() {
-        return h("div", { key: '7002748963348a2361665d0d307f4d8eb3a24e3a', class: "type-variation" }, this.label);
+        return h("div", { key: '505c4833064fa691575e38aa16b6046bc101c7eb', class: "type-variation" }, this.label);
     }
     static get is() { return "dropi-tag-type-product"; }
     static get encapsulation() { return "shadow"; }

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

@@ -26,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);
@@ -38,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: '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: {
+        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: '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)))));
+            }, 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: 'b8a4dee055ec85242e2a62a497a6b13fcea29bbc', 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: '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" })))))))));
+        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"
             }
         };
     }

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

@@ -1,67 +1,32 @@
-:host { display: inline-block; }
-*, *::before, *::after { box-sizing: border-box; }
-
-.tooltip-wrapper { position: relative; display: inline-flex; align-items: center; justify-content: center; }
-
-.tooltip-bubble {
-  position: absolute; z-index: 9999;
-  background: #1f2433; color: var(--Neutral-White,#fff);
-  font-size: var(--font-size-s,14px); line-height: 1.5;
-  padding: 8px 12px; border-radius: 8px;
-  white-space: normal; pointer-events: none;
-  opacity: 0; transition: opacity 0.15s ease, transform 0.15s ease;
-  word-break: break-word;
-  box-shadow: var(--Shadow-medium);
-  text-align: left;
-  width: max-content;
+:host {
+  display: inline-block;
+  position: relative;
 }
-.tooltip-bubble--visible { opacity: 1; }
 
-.tooltip-bubble--top    { bottom: calc(100% + 12px); left: 50%; transform: translateX(-50%); }
-.tooltip-bubble--bottom { top: calc(100% + 12px);    left: 50%; transform: translateX(-50%); }
-.tooltip-bubble--left   { right: calc(100% + 12px);  top: 50%;  transform: translateY(-50%); }
-.tooltip-bubble--right  { left: calc(100% + 12px);   top: 50%;  transform: translateY(-50%); }
-
-.tooltip-arrow { position: absolute; width: 12px; height: 6px; }
-.tooltip-arrow::before {
-  content: '';
+.tooltip-simple-bubble {
   position: absolute;
-  width: 0;
-  height: 0;
-}
-
-.tooltip-arrow--top {
-  top: 100%; left: 50%; transform: translateX(-50%);
-}
-.tooltip-arrow--top::before {
-  border-left: 6px solid transparent;
-  border-right: 6px solid transparent;
-  border-top: 6px solid #1f2433;
-}
-
-.tooltip-arrow--bottom {
-  bottom: 100%; left: 50%; transform: translateX(-50%);
-}
-.tooltip-arrow--bottom::before {
-  border-left: 6px solid transparent;
-  border-right: 6px solid transparent;
-  border-bottom: 6px solid #1f2433;
-}
-
-.tooltip-arrow--left {
-  left: 100%; top: 50%; transform: translateY(-50%);
-}
-.tooltip-arrow--left::before {
-  border-top: 6px solid transparent;
-  border-bottom: 6px solid transparent;
-  border-left: 6px solid #1f2433;
-}
-
-.tooltip-arrow--right {
-  right: 100%; top: 50%; transform: translateY(-50%);
-}
-.tooltip-arrow--right::before {
-  border-top: 6px solid transparent;
-  border-bottom: 6px solid transparent;
-  border-right: 6px solid #1f2433;
+  background: var(--Gray-Gray-800, #1e293b);
+  color: white;
+  padding: 4px 8px;
+  border-radius: 4px;
+  font-size: 12px;
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  margin-bottom: 8px;
+  white-space: nowrap;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 0.2s;
+  z-index: 1000;
+}
+
+:host(:hover) .tooltip-simple-bubble {
+  opacity: 1;
+}
+
+.tooltip-simple--outlined .tooltip-simple-bubble {
+  border: 1px solid var(--Gray-Gray-300);
+  background: white;
+  color: var(--Gray-Gray-800);
 }