@dropi/ui 0.1.52 → 0.1.53

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

@@ -1,4 +1,5 @@
-:host { display: contents; }
+:host { display: contents; font-family: var(--font-family-01, 'Inter', sans-serif); }
+button, input, select, textarea { font-family: var(--font-family-01, 'Inter', sans-serif); }
 *, *::before, *::after { box-sizing: border-box; }
 
 .modal-root {

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

@@ -1,4 +1,5 @@
 :host { display: block; width: 100%; }
+button, input, select, textarea { font-family: var(--font-family-01, 'Inter', sans-serif); }
 *, *::before, *::after { box-sizing: border-box; }
 
 .navbar {
@@ -57,7 +58,7 @@
   border: none;
   border-radius: var(--Border-1, 4px);
   font-size: var(--font-size-s, 12px);
-  font-family: inherit;
+  font-family: var(--font-family-01, 'Inter', sans-serif);
   color: var(--Gray-Gray-600, #475066);
   cursor: pointer;
   transition: background 0.15s, color 0.15s;
@@ -132,7 +133,7 @@
   border-radius: var(--Border-1, 4px);
   cursor: pointer;
   transition: background 0.15s;
-  font-family: inherit;
+  font-family: var(--font-family-01, 'Inter', sans-serif);
 }
 .navbar__user-btn:hover { background: var(--Gray-Gray-50, #f7f8fa); }
 

package/dist/collection/components/dropi-otp-send-code/dropi-otp-send-code.css

@@ -1,4 +1,5 @@
 :host { display: block; width: 100%; }
+button, input, select, textarea { font-family: var(--font-family-01, 'Inter', sans-serif); }
 *, *::before, *::after { box-sizing: border-box; }
 
 .otp { display: flex; flex-direction: column; align-items: center; gap: var(--Size-4, 16px); }
@@ -23,7 +24,7 @@
   text-align: center;
   font-size: 22px;
   font-weight: var(--font-weight-bold, 700);
-  font-family: inherit;
+  font-family: var(--font-family-01, 'Inter', sans-serif);
   color: var(--Gray-Gray-800, #1f2433);
   outline: none;
   transition: border-color 0.15s ease;

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

@@ -1,4 +1,5 @@
 :host {
+button, input, select, textarea { font-family: var(--font-family-01, 'Inter', sans-serif); }
   display: block;
 }
 
@@ -27,7 +28,7 @@
   background: transparent;
   color: var(--Gray-Gray-600, #475066);
   font-size: var(--font-size-s, 12px);
-  font-family: inherit;
+  font-family: var(--font-family-01, 'Inter', sans-serif);
   cursor: pointer;
   display: flex;
   align-items: center;
@@ -97,7 +98,7 @@
   background: var(--Neutral-White, #ffffff);
   color: var(--Gray-Gray-600, #475066);
   font-size: var(--font-size-s, 12px);
-  font-family: inherit;
+  font-family: var(--font-family-01, 'Inter', sans-serif);
   cursor: pointer;
   outline: none;
 }

package/dist/collection/components/dropi-phone-input/dropi-phone-input.css

@@ -1,4 +1,5 @@
-:host { display: block; width: 100%; position: relative; font-family: 'Inter', sans-serif; }
+:host { display: block; width: 100%; position: relative; font-family: var(--font-family-01, 'Inter', sans-serif); }
+button, input, select, textarea { font-family: var(--font-family-01, 'Inter', sans-serif); }
 *, *::before, *::after { box-sizing: border-box; }
 
 /* Ocultar spin buttons en inputs numéricos */
@@ -41,7 +42,7 @@ input[type='number'] {
   border: 1px solid var(--Gray-Gray-200, #c3c9d9);
   border-radius: 5px;
   font-size: 14px;
-  font-family: inherit;
+  font-family: var(--font-family-01, 'Inter', sans-serif);
   transition: border-color 0.3s ease-in-out;
   height: 40px;
   padding: 0 12px;
@@ -85,7 +86,7 @@ input[type='number'] {
   background: var(--Neutral-White, #ffffff);
   color: var(--Gray-Gray-500, #69738c);
   font-size: var(--font-size-s, 12px);
-  font-family: inherit;
+  font-family: var(--font-family-01, 'Inter', sans-serif);
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -176,7 +177,7 @@ input[type='number'] {
   text-align: left;
   color: var(--Gray-Gray-600, #475066);
   font-size: var(--font-size-s, 12px);
-  font-family: inherit;
+  font-family: var(--font-family-01, 'Inter', sans-serif);
   cursor: pointer;
   display: flex;
   align-items: center;

package/dist/collection/components/dropi-progress-bar/dropi-progress-bar.css

@@ -1,4 +1,5 @@
 :host {
+button, input, select, textarea { font-family: var(--font-family-01, 'Inter', sans-serif); }
   display: block;
   width: 100%;
 }

package/dist/collection/components/dropi-radio-button/dropi-radio-button.css

@@ -3,6 +3,7 @@
 }
 
 *, *::before, *::after { box-sizing: border-box; }
+button, input, select, textarea { font-family: var(--font-family-01, 'Inter', sans-serif); }
 
 .dropi-radio-button {
   display: flex;

package/dist/collection/components/dropi-radio-selection-list/dropi-radio-selection-list.css

@@ -1,4 +1,5 @@
 :host { display: block; width: 100%; }
+button, input, select, textarea { font-family: var(--font-family-01, 'Inter', sans-serif); }
 *, *::before, *::after { box-sizing: border-box; }
 
 .rsl__search {
@@ -16,7 +17,7 @@
   border: none;
   outline: none;
   font-size: var(--font-size-s, 12px);
-  font-family: inherit;
+  font-family: var(--font-family-01, 'Inter', sans-serif);
   color: var(--Gray-Gray-700, #32394d);
   background: transparent;
 }

package/dist/collection/components/dropi-read-more/dropi-read-more.css

@@ -1,11 +1,12 @@
 :host {
+button, input, select, textarea { font-family: var(--font-family-01, 'Inter', sans-serif); }
   display: block;
 }
 
 .read-more__text {
   margin: 0;
   font-size: var(--font-size-s, 12px);
-  font-family: inherit;
+  font-family: var(--font-family-01, 'Inter', sans-serif);
   color: var(--Gray-Gray-800, #1f2433);
   line-height: 1.5;
 }
@@ -14,7 +15,7 @@
   all: unset;
   display: inline;
   font-size: var(--font-size-s, 12px);
-  font-family: inherit;
+  font-family: var(--font-family-01, 'Inter', sans-serif);
   font-weight: var(--font-weight-bold, 700);
   color: var(--Gray-Gray-600);
   cursor: pointer;

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

@@ -1,4 +1,5 @@
 :host {
+button, input, select, textarea { font-family: var(--font-family-01, 'Inter', sans-serif); }
   display: block;
   width: 100%;
   position: relative;
@@ -36,7 +37,7 @@
   border-radius: var(--Border-2, 8px);
   background: var(--Neutral-White, #ffffff);
   font-size: var(--font-size-s, 12px);
-  font-family: inherit;
+  font-family: var(--font-family-01, 'Inter', sans-serif);
   color: var(--Gray-Gray-700, #32394d);
   outline: none;
   transition: border-color 0.2s;

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

@@ -1,4 +1,5 @@
 :host {
+button, input, select, textarea { font-family: var(--font-family-01, 'Inter', sans-serif); }
   display: block;
   width: 100%;
   text-align: left;
@@ -51,7 +52,7 @@
   background: var(--Neutral-White, #ffffff);
   color: var(--Gray-Gray-500, #69738c);
   font-size: var(--font-size-s, 12px);
-  font-family: inherit;
+  font-family: var(--font-family-01, 'Inter', sans-serif);
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -148,7 +149,7 @@
   text-align: left;
   color: var(--Gray-Gray-600, #475066);
   font-size: var(--font-size-s, 12px);
-  font-family: inherit;
+  font-family: var(--font-family-01, 'Inter', sans-serif);
   cursor: pointer;
   display: flex;
   align-items: center;
@@ -211,7 +212,7 @@
   border: none;
   outline: none;
   font-size: var(--font-size-s, 12px);
-  font-family: inherit;
+  font-family: var(--font-family-01, 'Inter', sans-serif);
   color: var(--Gray-Gray-700, #32394d);
   background: transparent;
 }

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

@@ -1,4 +1,5 @@
 :host {
+button, input, select, textarea { font-family: var(--font-family-01, 'Inter', sans-serif); }
   display: block;
 }
 

package/dist/collection/components/dropi-simple-stepper/dropi-simple-stepper.css

@@ -4,6 +4,7 @@
 }
 
 *, *::before, *::after { box-sizing: border-box; }
+button, input, select, textarea { font-family: var(--font-family-01, 'Inter', sans-serif); }
 
 .stepper {
   display: flex;

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

@@ -3,6 +3,7 @@
 }
 
 *, *::before, *::after { box-sizing: border-box; }
+button, input, select, textarea { font-family: var(--font-family-01, 'Inter', sans-serif); }
 
 .skeleton-lines {
   display: flex;

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

@@ -4,6 +4,7 @@
 }
 
 *, *::before, *::after { box-sizing: border-box; }
+button, input, select, textarea { font-family: var(--font-family-01); }
 
 .stepper {
   display: flex;
@@ -17,59 +18,59 @@
   flex-direction: column;
   align-items: center;
   flex: 1;
-  position: relative;
 }
 
-/* ── Circle row (circle + connecting line) ──────────────── */
+/* ── Circle row: [left-line][circle][right-line] ────────── */
 .stepper__circle-wrap {
   display: flex;
   align-items: center;
   width: 100%;
-  position: relative;
+}
+
+.stepper__line {
+  flex: 1;
+  height: 2px;
+  background: var(--Gray-Gray-200);
+  transition: background 0.2s;
+}
+
+.stepper__line--done {
+  background: var(--Primary-Primary-500);
+}
+
+.stepper__line--invisible {
+  background: transparent;
 }
 
 .stepper__circle {
-  width: 28px;
-  height: 28px;
+  width: 24px;
+  height: 24px;
   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);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-bold);
   flex-shrink: 0;
-  z-index: 1;
   transition: background 0.2s, border-color 0.2s;
 }
 
 .stepper__circle--pending {
-  background: var(--Neutral-White, #ffffff);
-  border: 2px solid var(--Gray-Gray-200, #c3c9d9);
-  color: var(--Gray-Gray-400, #858ea6);
+  background: var(--Neutral-White);
+  border: 2px solid var(--Gray-Gray-200);
+  color: var(--Gray-Gray-400);
 }
 
 .stepper__circle--focus {
-  background: var(--Neutral-White, #ffffff);
-  border: 2px solid var(--Primary-Primary-500, #f49a3d);
-  color: var(--Primary-Primary-500, #f49a3d);
+  background: var(--Neutral-White);
+  border: 2px solid var(--Primary-Primary-500);
+  color: var(--Primary-Primary-500);
 }
 
 .stepper__circle--completed {
-  background: var(--Primary-Primary-500, #f49a3d);
-  border: 2px solid var(--Primary-Primary-500, #f49a3d);
-  color: var(--Neutral-White, #ffffff);
-}
-
-/* ── 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);
+  background: var(--Primary-Primary-500);
+  border: 2px solid var(--Primary-Primary-500);
+  color: var(--Neutral-White);
 }
 
 /* ── Labels ─────────────────────────────────────────────── */
@@ -78,18 +79,34 @@
   flex-direction: column;
   align-items: center;
   gap: 2px;
-  margin-top: var(--Size-2, 8px);
+  margin-top: var(--Size-2);
   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);
+  font-size: var(--font-size-s);
+  font-weight: var(--font-weight-semibold);
+  color: var(--Gray-Gray-400);
 }
 
 .stepper__desc {
-  font-size: var(--font-size-xs, 10px);
-  color: var(--Gray-Gray-500, #69738c);
+  font-size: var(--font-size-xs);
+  color: var(--Gray-Gray-400);
+}
+
+.stepper__step--focus .stepper__title {
+  color: var(--Gray-Gray-700);
+  font-weight: var(--font-weight-bold);
+}
+.stepper__step--focus .stepper__desc {
+  color: var(--Gray-Gray-500);
+}
+
+.stepper__step--completed .stepper__title {
+  color: var(--Gray-Gray-600);
+  font-weight: var(--font-weight-semibold);
+}
+.stepper__step--completed .stepper__desc {
+  color: var(--Gray-Gray-500);
 }

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

@@ -38,8 +38,18 @@ export class DropiSteps {
         return (h("div", { key: '35c28210675370e76f16e2525fdf785b6205ec78', class: "stepper" }, steps.map((step) => {
             const state = this.stepState(step);
             const label = labels[step - 1];
+            const isFirst = 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", iconWidth: "12px", iconHeight: "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)))));
+            const prevState = step > 1 ? this.stepState(step - 1) : null;
+            return (h("div", { class: { 'stepper__step': true, [`stepper__step--${state}`]: true }, key: step }, h("div", { class: "stepper__circle-wrap" }, h("div", { class: {
+                    'stepper__line': true,
+                    'stepper__line--done': prevState === 'completed',
+                    'stepper__line--invisible': isFirst,
+                } }), h("div", { class: { 'stepper__circle': true, [`stepper__circle--${state}`]: true } }, state === 'completed' ? (h("dropi-icon", { name: "Check", iconWidth: "12px", iconHeight: "12px", color: "Neutral-White" })) : (this.showNumberOfStep ? h("span", null, step) : null)), h("div", { class: {
+                    'stepper__line': true,
+                    'stepper__line--done': state === 'completed' || state === 'focus',
+                    'stepper__line--invisible': isLast,
+                } })), 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"; }

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

@@ -3,6 +3,7 @@
 }
 
 *, *::before, *::after { box-sizing: border-box; }
+button, input, select, textarea { font-family: var(--font-family-01, 'Inter', sans-serif); }
 
 .toggle-switch {
   position: relative;

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

@@ -1,4 +1,5 @@
-:host { display: block; width: 100%; min-width: 0; }
+:host { display: block; font-family: var(--font-family-01, 'Inter', sans-serif); width: 100%; min-width: 0; }
+button, input, select, textarea { font-family: var(--font-family-01, 'Inter', sans-serif); }
 *, *::before, *::after { box-sizing: border-box; }
 
 /* ── Contenedor principal ─────────────────────────────────────────── */

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

@@ -1,4 +1,5 @@
-:host { display: block; width: 100%; }
+:host { display: block; font-family: var(--font-family-01, 'Inter', sans-serif); width: 100%; }
+button, input, select, textarea { font-family: var(--font-family-01, 'Inter', sans-serif); }
 *, *::before, *::after { box-sizing: border-box; }
 
 .tabs-container {

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

@@ -3,6 +3,7 @@
 }
 
 *, *::before, *::after { box-sizing: border-box; }
+button, input, select, textarea { font-family: var(--font-family-01, 'Inter', sans-serif); }
 
 .container-chips {
   display: flex;

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

@@ -1,4 +1,5 @@
 :host {
+button, input, select, textarea { font-family: var(--font-family-01, 'Inter', sans-serif); }
   display: inline-block;
 }
 

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

@@ -1,4 +1,5 @@
 :host {
+button, input, select, textarea { font-family: var(--font-family-01, 'Inter', sans-serif); }
   display: flex;
   flex-direction: column;
   width: 100%;
@@ -39,7 +40,7 @@ textarea.form-control {
   border: 1px solid var(--Gray-Gray-200, #c3c9d9);
   border-radius: var(--Border-2, 8px);
   font-size: var(--font-size-s, 12px);
-  font-family: inherit;
+  font-family: var(--font-family-01, 'Inter', sans-serif);
   color: var(--Gray-Gray-700, #32394d);
   background: var(--Neutral-White, #ffffff);
   transition: border-color 0.3s ease-in-out;

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

@@ -3,6 +3,7 @@
 }
 
 *, *::before, *::after { box-sizing: border-box; }
+button, input, select, textarea { font-family: var(--font-family-01, 'Inter', sans-serif); }
 
 .timeline {
   display: flex;

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

@@ -1,63 +1,54 @@
-:host { display: contents; }
-*, *::before, *::after { box-sizing: border-box; }
-
-.toast-container { position: fixed; z-index: var(--dropi-z-index-toast, 12000); display: flex; flex-direction: column; gap: 8px; max-width: 380px; width: 100%; pointer-events: none; }
-.toast-container--top-right    { top: 80px; right: 0; padding: var(--Size-2, 8px); }
-.toast-container--top-left     { top: 80px; left: 0; padding: var(--Size-2, 8px); }
-.toast-container--bottom-right { bottom: 24px; right: 0; padding: var(--Size-2, 8px); flex-direction: column-reverse; }
-.toast-container--bottom-left  { bottom: 24px; left: 0; padding: var(--Size-2, 8px); flex-direction: column-reverse; }
-.toast-container--top-center    { top: 80px; left: 50%; transform: translateX(-50%); padding: var(--Size-2, 8px); }
-.toast-container--bottom-center { bottom: 24px; left: 50%; transform: translateX(-50%); padding: var(--Size-2, 8px); flex-direction: column-reverse; }
-
-.toast-wrapper { pointer-events: auto; animation: toast-in 0.28s ease; transition: opacity 0.28s ease, transform 0.28s ease, max-height 0.32s ease; overflow: hidden; max-height: 200px; }
-.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, #ffffff); box-shadow: 0.5px -1px 7px 0px rgba(0, 0, 0, 0.06), 0px 4px 20px 0px rgba(0, 0, 0, 0.12); 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); }
-.toast--info    { border-color: var(--Info-Info-500,#50a5f1); }
-
-.toast-content {
+:host { display: contents; font-family: var(--font-family-01, 'Inter', sans-serif); }
+button, input, select, textarea { font-family: var(--font-family-01, 'Inter', sans-serif); }
+
+.dropi-toast-container { position: fixed; z-index: var(--dropi-z-index-toast, 12000); display: flex; flex-direction: column; gap: 8px; max-width: 380px; width: 100%; pointer-events: none; box-sizing: border-box; }
+.dropi-toast-container--top-right    { top: 80px; right: 0; padding: var(--Size-2, 8px); }
+.dropi-toast-container--top-left     { top: 80px; left: 0; padding: var(--Size-2, 8px); }
+.dropi-toast-container--bottom-right { bottom: 24px; right: 0; padding: var(--Size-2, 8px); flex-direction: column-reverse; }
+.dropi-toast-container--bottom-left  { bottom: 24px; left: 0; padding: var(--Size-2, 8px); flex-direction: column-reverse; }
+.dropi-toast-container--top-center    { top: 80px; left: 50%; transform: translateX(-50%); padding: var(--Size-2, 8px); }
+.dropi-toast-container--bottom-center { bottom: 24px; left: 50%; transform: translateX(-50%); padding: var(--Size-2, 8px); flex-direction: column-reverse; }
+
+.dropi-toast-wrapper { pointer-events: auto; animation: dropi-toast-in 0.28s ease; transition: opacity 0.28s ease, transform 0.28s ease, max-height 0.32s ease; overflow: hidden; max-height: 200px; box-sizing: border-box; }
+.dropi-toast-wrapper--leaving { opacity: 0; transform: translateX(20px); max-height: 0; pointer-events: none; }
+@keyframes dropi-toast-in { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }
+
+.dropi-toast-item { position: relative; display: flex; align-items: center; border-radius: 8px; background: #ffffff; box-shadow: 0.5px -1px 7px 0px rgba(0,0,0,0.06), 0px 4px 20px 0px rgba(0,0,0,0.12); border-left: 8px solid; overflow: hidden; min-width: 300px; box-sizing: border-box; }
+.dropi-toast-item--success { border-color: var(--Success-Success-500,#34c38f); }
+.dropi-toast-item--error   { border-color: var(--Error-Error-500,#f46a6b); }
+.dropi-toast-item--warn    { border-color: var(--Warning-Warning-500,#f1b44c); }
+.dropi-toast-item--info    { border-color: var(--Info-Info-500,#50a5f1); }
+
+.dropi-toast-content {
   display: flex;
   flex-direction: row;
-  align-items: flex-start;
-  padding: var(--Size-5) var(--Size-5) var(--Size-5) calc(var(--Size-5) - var(--Size-2, 8px));
-  gap: var(--Size-4, 16px);
-}
-
-.lottie-img {
-  width: 50px;
-  height: 50px;
-  flex-shrink: 0;
-  display: flex;
   align-items: center;
-  justify-content: center;
-  position: relative;
+  padding: 16px 16px 16px 8px;
+  gap: 16px;
+  box-sizing: border-box;
+  flex: 1;
 }
 
-.lottie-player-container {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 2;
+.dropi-toast-lottie {
+  width: 56px;
+  height: 56px;
+  flex-shrink: 0;
   display: flex;
   align-items: center;
   justify-content: center;
+  overflow: hidden;
 }
 
-lottie-player {
-  width: 100%;
-  height: 100%;
+.dropi-toast-lottie lottie-player {
   display: block;
+  width: 56px;
+  height: 56px;
+  flex-shrink: 0;
 }
 
-.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, #69738c); line-height: 1.4; text-align: left; max-width: 250px; }
+.dropi-toast-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--Size-1, 4px); }
+.dropi-toast-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; }
+.dropi-toast-detail { 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; }
+.dropi-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; }
+.dropi-toast-close:hover { opacity: 0.7; }

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

@@ -1,4 +1,5 @@
 import { h } from "@stencil/core";
+import { LOTTIE_MAP } from "../../utils/lottie-map.generated";
 /**
  * @component dropi-toast
  * Global toast notification stack. Place once in the app root, call show() from JS.
@@ -38,20 +39,16 @@ export class DropiToast {
             this.items = this.items.filter(i => i.msg.id !== id);
         }, 320);
     }
-    lottieMap = {
-        success: '/assets/lottie-files/success.json',
-        error: '/assets/lottie-files/failure.json',
-        warn: '/assets/lottie-files/warning.json',
-        info: '/assets/lottie-files/question.json',
+    severityToLottieKey = {
+        success: 'success',
+        error: 'error',
+        warn: 'warning',
+        info: 'question',
     };
-    getLottieHtml(severity) {
-        return `<lottie-player src="${this.lottieMap[severity]}" background="transparent" speed="1" loop autoplay></lottie-player>`;
-    }
     render() {
-        return (h("div", { key: '962972e53e84a968b538feb28c2588f9051276ff', 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", iconWidth: "20px", iconHeight: "20px", color: "Gray-Gray-400" })))))))));
+        return (h("div", { key: 'e7d23323039ed09e5317fc24f86a4e51af14b249', class: `dropi-toast-container dropi-toast-container--${this.position}` }, (this.items ?? []).map(item => (h("div", { key: item.msg.id, class: { 'dropi-toast-wrapper': true, 'dropi-toast-wrapper--leaving': item.leaving } }, h("div", { class: `dropi-toast-item dropi-toast-item--${item.msg.severity}` }, h("div", { class: "dropi-toast-content" }, h("div", { class: "dropi-toast-lottie" }, h("lottie-player", { key: item.msg.severity, src: LOTTIE_MAP[this.severityToLottieKey[item.msg.severity]], background: "transparent", speed: "1", loop: true, autoplay: true })), h("div", { class: "dropi-toast-info" }, h("p", { class: "dropi-toast-title" }, item.msg.summary), item.msg.detail && h("p", { class: "dropi-toast-detail" }, item.msg.detail))), item.msg.closable && (h("button", { class: "dropi-toast-close", onClick: () => this.remove(item.msg.id) }, h("dropi-icon", { name: "Close-small", iconWidth: "20px", iconHeight: "20px", color: "Gray-Gray-400" })))))))));
     }
     static get is() { return "dropi-toast"; }
-    static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "$": ["dropi-toast.css"]

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

@@ -1,4 +1,5 @@
 :host {
+button, input, select, textarea { font-family: var(--font-family-01, 'Inter', sans-serif); }
   display: inline-block;
   position: relative;
 }

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

@@ -1,5 +1,6 @@
 :host { display: inline-block; }
 *, *::before, *::after { box-sizing: border-box; }
+button, input, select, textarea { font-family: var(--font-family-01, 'Inter', sans-serif); }
 
 .tooltip-wrapper { position: relative; display: inline-flex; align-items: center; justify-content: center; }
 

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

@@ -3,6 +3,7 @@
 }
 
 *, *::before, *::after { box-sizing: border-box; }
+button, input, select, textarea { font-family: var(--font-family-01, 'Inter', sans-serif); }
 
 .vertical-steps {
   display: flex;

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

@@ -1,4 +1,5 @@
 :host {
+button, input, select, textarea { font-family: var(--font-family-01, 'Inter', sans-serif); }
   display: block;
   width: 100%;
 }