@dropi/ui 0.1.17 → 0.1.19

package/dist/cjs/dropi-time-line.cjs.entry.js

@@ -0,0 +1,34 @@
+'use strict';
+
+var index = require('./index-B6R6Ojma.js');
+
+const dropiTimeLineCss = () => `: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)}.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)}.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)}.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)}`;
+
+const DropiTimeLine = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    /** 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 (index.h("div", { key: '9391536f472117d8788456df24de433fc9f6ae1e', class: "timeline" }, steps.map((step, i) => {
+            const isLast = i === steps.length - 1;
+            return (index.h("div", { class: { 'tl-step': true, [`tl-step--${step.status}`]: true }, key: step.id || i }, index.h("div", { class: "tl-step__marker" }, index.h("div", { class: "tl-step__icon" }, step.icon ? (index.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' })) : (index.h("span", { class: "tl-step__dot" }))), !isLast && index.h("div", { class: "tl-step__line" })), index.h("div", { class: "tl-step__content" }, index.h("span", { class: "tl-step__label" }, step.label), step.subtitle && index.h("span", { class: "tl-step__subtitle" }, step.subtitle))));
+        })));
+    }
+};
+DropiTimeLine.style = dropiTimeLineCss();
+
+exports.dropi_time_line = DropiTimeLine;

package/dist/cjs/dropi-toast.cjs.entry.js

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

package/dist/cjs/dropi-tooltip.cjs.entry.js

@@ -34,7 +34,7 @@ const DropiTooltip = class {
         this.visible = false;
     };
     render() {
-        return (index.h("div", { key: 'c6179d8dfb9f4c3cc2a6a4e79f2e1a9ff8bbd641', class: "tooltip-wrapper", onMouseEnter: this.show, onMouseLeave: this.hide, onFocusin: this.show, onFocusout: this.hide }, index.h("slot", { key: 'aee7bae9d384369faaa5b078e40f3a8763690bb3' }), this.text && (index.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, index.h("span", { key: 'aec6a936bbc6677b0e1abf3a18233d90d757cd96', class: `tooltip-arrow tooltip-arrow--${this.position}` })))));
+        return (index.h("div", { key: 'fa52d7ff250fe76fefd529f2dab27338d0a8bd0a', class: "tooltip-wrapper", onMouseEnter: this.show, onMouseLeave: this.hide, onFocusin: this.show, onFocusout: this.hide }, index.h("slot", { key: 'e301fead7186cec3b817a9339a0878006b750cbf' }), this.text && (index.h("div", { key: 'e24cb85fd227d0f96935dfe6095804ad9fcbc140', class: { 'tooltip-bubble': true, [`tooltip-bubble--${this.position}`]: true, 'tooltip-bubble--visible': this.visible }, style: { maxWidth: this.maxWidth }, role: "tooltip" }, this.text, index.h("span", { key: 'a2dbe5693bfb2c0894d20bc2831d303b5634869e', class: `tooltip-arrow tooltip-arrow--${this.position}` })))));
     }
 };
 DropiTooltip.style = dropiTooltipCss();

package/dist/cjs/dropi-ui.cjs.js

@@ -18,7 +18,7 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await index.globalScripts();
-  return index.bootstrapLazy([["dropi-icon.cjs",[[513,"dropi-icon",{"name":[1],"width":[1],"height":[1],"color":[1]},null,{"color":[{"colorChanged":0}]}]]],["dropi-empty-state.cjs",[[769,"dropi-empty-state",{"header":[1],"description":[1],"imageUrl":[1,"image-url"],"imageAlt":[1,"image-alt"],"actionLabel":[1,"action-label"],"secondaryLabel":[1,"secondary-label"]}]]],["dropi-accordion.cjs",[[769,"dropi-accordion",{"header":[1],"open":[1540],"disabled":[4],"preIcon":[1,"pre-icon"],"contentHeight":[32]},null,{"open":[{"openChanged":0}]}]]],["dropi-input.cjs",[[577,"dropi-input",{"inputId":[1,"input-id"],"name":[1],"label":[1],"placeholder":[1],"value":[1025],"maxlength":[2],"disabled":[516],"required":[516],"showAsterisk":[4,"show-asterisk"],"fixedLabel":[4,"fixed-label"],"inputMode":[1,"input-mode"],"passwordInput":[4,"password-input"],"moneyFormat":[4,"money-format"],"thousandSeparator":[4,"thousand-separator"],"onlyNumbers":[4,"only-numbers"],"allowDecimals":[4,"allow-decimals"],"onlyLetters":[4,"only-letters"],"icon":[1],"iconColor":[1,"icon-color"],"invalid":[4],"helperText":[1,"helper-text"],"showHelperOnlyOnError":[4,"show-helper-only-on-error"],"showPassword":[32],"touched":[32]},null,{"value":[{"valueChanged":0}],"disabled":[{"disabledChanged":0}]}]]],["dropi-modal.cjs",[[769,"dropi-modal",{"visible":[1540],"header":[1],"showCloseIcon":[4,"show-close-icon"],"dismissable":[4],"closeOnEscape":[4,"close-on-escape"],"modal":[4],"showHeader":[4,"show-header"],"position":[1],"size":[1],"isOpen":[32],"isClosing":[32],"mounted":[32],"hide":[64],"show":[64]},null,{"visible":[{"visibleChanged":0}]}]]],["dropi-paginator.cjs",[[513,"dropi-paginator",{"total":[2],"pageSize":[1026,"page-size"],"page":[1538],"maxPages":[2,"max-pages"],"showPageSizeSelector":[4,"show-page-size-selector"],"pageSizeOptions":[1,"page-size-options"],"parsedOptions":[32]},null,{"pageSizeOptions":[{"optionsChanged":0}]}]]],["dropi-select.cjs",[[577,"dropi-select",{"label":[1],"placeholder":[1],"options":[1040],"name":[1],"disabled":[516],"invalid":[4],"errorText":[1,"error-text"],"helperText":[1,"helper-text"],"showObligatory":[4,"show-obligatory"],"searchEnabled":[4,"search-enabled"],"multiSelect":[4,"multi-select"],"dropdownType":[4,"dropdown-type"],"showCountryFlags":[4,"show-country-flags"],"radioOptions":[4,"radio-options"],"placeHolderSearch":[1,"place-holder-search"],"preIcon":[1,"pre-icon"],"defaultSelectedId":[1032,"default-selected-id"],"value":[1040],"isOpen":[32],"selectedOption":[32],"multiSelected":[32],"filteredOptions":[32],"searchTerm":[32],"dropdownStyle":[32],"setById":[64],"setByLabel":[64],"clearSelection":[64],"resetMultiSelect":[64]},[[4,"click","handleOutsideClick"]],{"options":[{"optionsChanged":0}],"defaultSelectedId":[{"defaultChanged":0}],"value":[{"valueChanged":0}]}]]],["dropi-tabs.cjs",[[513,"dropi-tabs",{"tabs":[1],"activeTab":[1544,"active-tab"],"showIcon":[4,"show-icon"],"parsedTabs":[32]},null,{"tabs":[{"tabsChanged":0}]}]]],["dropi-tag.cjs",[[513,"dropi-tag",{"type":[1],"state":[1],"showIcon":[4,"show-icon"],"icon":[1],"text":[1]},null,{"type":[{"propsChanged":0}],"state":[{"propsChanged":0}]}]]],["dropi-text-area.cjs",[[577,"dropi-text-area",{"inputId":[1,"input-id"],"name":[1],"label":[1],"placeholder":[1],"value":[1025],"maxlength":[2],"minlength":[2],"rows":[2],"resize":[1],"disabled":[516],"required":[516],"showAsterisk":[4,"show-asterisk"],"helperText":[1,"helper-text"],"invalid":[4],"touched":[32]},null,{"value":[{"valueChanged":0}]}]]],["dropi-toast.cjs",[[513,"dropi-toast",{"position":[1],"life":[2],"items":[32],"show":[64],"clear":[64]}]]],["dropi-badge.cjs",[[513,"dropi-badge",{"state":[1]}]]],["dropi-checkbox.cjs",[[577,"dropi-checkbox",{"checked":[1540],"disabled":[516]}]]],["dropi-radio-button.cjs",[[577,"dropi-radio-button",{"label":[1],"name":[1],"inputId":[1,"input-id"],"checked":[1540],"resetTrigger":[4,"reset-trigger"]},null,{"resetTrigger":[{"onResetTrigger":0}]}]]],["dropi-skeleton.cjs",[[513,"dropi-skeleton",{"variant":[1],"width":[1],"height":[1],"borderRadius":[1,"border-radius"],"lines":[2]}]]],["dropi-switch.cjs",[[577,"dropi-switch",{"isChecked":[1540,"is-checked"],"disabled":[516]}]]],["dropi-tooltip.cjs",[[769,"dropi-tooltip",{"text":[1],"position":[1],"maxWidth":[1,"max-width"],"showDelay":[2,"show-delay"],"visible":[32]}]]],["dropi-button.cjs",[[769,"dropi-button",{"type":[1],"severity":[1],"size":[1],"state":[1],"preIcon":[1,"pre-icon"],"postIcon":[1,"post-icon"],"text":[1]}]]]], options);
+  return index.bootstrapLazy([["dropi-icon.cjs",[[513,"dropi-icon",{"name":[1],"width":[1],"height":[1],"color":[1]},null,{"color":[{"colorChanged":0}]}]]],["dropi-card-section.cjs",[[513,"dropi-card-section",{"sectionTitle":[1,"section-title"],"description":[1],"typeElement":[1,"type-element"],"type":[1],"isChecked":[1028,"is-checked"]}]]],["dropi-checkbox-selection-list.cjs",[[513,"dropi-checkbox-selection-list",{"options":[1],"showFilter":[4,"show-filter"],"filterPlaceholder":[1,"filter-placeholder"],"showNotFound":[4,"show-not-found"],"notFoundMessage":[1,"not-found-message"],"multiSelect":[4,"multi-select"],"filterText":[32],"selected":[32],"parsedOptions":[32]},null,{"options":[{"optionsChanged":0}]}]]],["dropi-empty-state.cjs",[[769,"dropi-empty-state",{"header":[1],"description":[1],"imageUrl":[1,"image-url"],"imageAlt":[1,"image-alt"],"actionLabel":[1,"action-label"],"secondaryLabel":[1,"secondary-label"]}]]],["dropi-search.cjs",[[513,"dropi-search",{"placeholder":[1],"value":[1025],"maxlength":[2],"showClear":[4,"show-clear"],"options":[1],"labelKey":[1,"label-key"],"multiSelect":[4,"multi-select"],"dropdownHeight":[1,"dropdown-height"],"label":[1],"open":[32],"selected":[32],"parsedOptions":[32]},null,{"options":[{"optionsChanged":0}]}]]],["dropi-accordion.cjs",[[769,"dropi-accordion",{"header":[1],"open":[1540],"disabled":[4],"preIcon":[1,"pre-icon"],"contentHeight":[32]},null,{"open":[{"openChanged":0}]}]]],["dropi-alert.cjs",[[513,"dropi-alert",{"message":[1],"type":[1],"state":[1],"dismissable":[4],"showButton":[4,"show-button"],"buttonText":[1,"button-text"],"anchorText":[1,"anchor-text"],"anchorUrl":[1,"anchor-url"],"showAlert":[1028,"show-alert"]}]]],["dropi-chips.cjs",[[769,"dropi-chips",{"chipStyle":[1,"chip-style"],"type":[1],"urlImg":[1,"url-img"],"showIcon":[4,"show-icon"],"icon":[1]}]]],["dropi-dropdown.cjs",[[513,"dropi-dropdown",{"options":[1],"valueModel":[1,"value-model"],"imageModel":[1,"image-model"],"height":[1],"selected":[32],"parsedOptions":[32]},null,{"options":[{"optionsChanged":0}]}]]],["dropi-favorite-button.cjs",[[513,"dropi-favorite-button",{"isFavorite":[1028,"is-favorite"],"hovered":[32]}]]],["dropi-image-miniature.cjs",[[513,"dropi-image-miniature",{"label":[1],"images":[1],"width":[1],"height":[1]}]]],["dropi-image-overlay.cjs",[[513,"dropi-image-overlay",{"visible":[1028],"images":[1],"activeIndex":[1026,"active-index"],"current":[32],"parsedImages":[32]},null,{"images":[{"imagesChanged":0}],"activeIndex":[{"indexChanged":0}],"visible":[{"visibleChanged":0}]}]]],["dropi-input.cjs",[[577,"dropi-input",{"inputId":[1,"input-id"],"name":[1],"label":[1],"placeholder":[1],"value":[1025],"maxlength":[2],"disabled":[516],"required":[516],"showAsterisk":[4,"show-asterisk"],"fixedLabel":[4,"fixed-label"],"inputMode":[1,"input-mode"],"passwordInput":[4,"password-input"],"moneyFormat":[4,"money-format"],"thousandSeparator":[4,"thousand-separator"],"onlyNumbers":[4,"only-numbers"],"allowDecimals":[4,"allow-decimals"],"onlyLetters":[4,"only-letters"],"icon":[1],"iconColor":[1,"icon-color"],"invalid":[4],"helperText":[1,"helper-text"],"showHelperOnlyOnError":[4,"show-helper-only-on-error"],"showPassword":[32],"touched":[32]},null,{"value":[{"valueChanged":0}],"disabled":[{"disabledChanged":0}]}]]],["dropi-modal.cjs",[[769,"dropi-modal",{"visible":[1540],"header":[1],"showCloseIcon":[4,"show-close-icon"],"dismissable":[4],"closeOnEscape":[4,"close-on-escape"],"modal":[4],"showHeader":[4,"show-header"],"position":[1],"size":[1],"isOpen":[32],"isClosing":[32],"mounted":[32],"hide":[64],"show":[64]},null,{"visible":[{"visibleChanged":0}]}]]],["dropi-paginator.cjs",[[513,"dropi-paginator",{"total":[2],"pageSize":[1026,"page-size"],"page":[1538],"maxPages":[2,"max-pages"],"noLabels":[4,"no-labels"],"showPageSizeSelector":[4,"show-page-size-selector"],"pageSizeOptions":[1,"page-size-options"],"parsedOptions":[32]},null,{"pageSizeOptions":[{"optionsChanged":0}]}]]],["dropi-radio-selection-list.cjs",[[513,"dropi-radio-selection-list",{"options":[1],"selectedOption":[1032,"selected-option"],"showFilter":[4,"show-filter"],"filterPlaceholder":[1,"filter-placeholder"],"typeLayout":[1,"type-layout"],"filterText":[32],"parsedOptions":[32]},null,{"options":[{"optionsChanged":0}]}]]],["dropi-select.cjs",[[577,"dropi-select",{"label":[1],"placeholder":[1],"options":[1040],"name":[1],"disabled":[516],"invalid":[4],"errorText":[1,"error-text"],"helperText":[1,"helper-text"],"showObligatory":[4,"show-obligatory"],"searchEnabled":[4,"search-enabled"],"multiSelect":[4,"multi-select"],"dropdownType":[4,"dropdown-type"],"showCountryFlags":[4,"show-country-flags"],"radioOptions":[4,"radio-options"],"placeHolderSearch":[1,"place-holder-search"],"preIcon":[1,"pre-icon"],"defaultSelectedId":[1032,"default-selected-id"],"value":[1040],"isOpen":[32],"selectedOption":[32],"multiSelected":[32],"filteredOptions":[32],"searchTerm":[32],"dropdownStyle":[32],"setById":[64],"setByLabel":[64],"clearSelection":[64],"resetMultiSelect":[64]},[[4,"click","handleOutsideClick"]],{"options":[{"optionsChanged":0}],"defaultSelectedId":[{"defaultChanged":0}],"value":[{"valueChanged":0}]}]]],["dropi-steps.cjs",[[513,"dropi-steps",{"stepsCount":[2,"steps-count"],"showNumberOfStep":[4,"show-number-of-step"],"currentStep":[2,"current-step"],"stepLabels":[1,"step-labels"]}]]],["dropi-tabs.cjs",[[513,"dropi-tabs",{"tabs":[1],"activeTab":[1544,"active-tab"],"showIcon":[4,"show-icon"],"parsedTabs":[32]},null,{"tabs":[{"tabsChanged":0}]}]]],["dropi-tag.cjs",[[513,"dropi-tag",{"type":[1],"state":[1],"showIcon":[4,"show-icon"],"icon":[1],"text":[1]},null,{"type":[{"propsChanged":0}],"state":[{"propsChanged":0}]}]]],["dropi-text-area.cjs",[[577,"dropi-text-area",{"inputId":[1,"input-id"],"name":[1],"label":[1],"placeholder":[1],"value":[1025],"maxlength":[2],"minlength":[2],"rows":[2],"resize":[1],"disabled":[516],"required":[516],"showAsterisk":[4,"show-asterisk"],"helperText":[1,"helper-text"],"invalid":[4],"touched":[32]},null,{"value":[{"valueChanged":0}]}]]],["dropi-time-line.cjs",[[513,"dropi-time-line",{"steps":[1]}]]],["dropi-toast.cjs",[[513,"dropi-toast",{"position":[1],"life":[2],"items":[32],"show":[64],"clear":[64]}]]],["dropi-vertical-steps.cjs",[[513,"dropi-vertical-steps",{"steps":[1],"currentStep":[2,"current-step"],"clickable":[4],"showCheckIcon":[4,"show-check-icon"]}]]],["dropi-avatars.cjs",[[513,"dropi-avatars",{"image":[1],"alt":[1],"type":[1],"initials":[1]}]]],["dropi-badge.cjs",[[513,"dropi-badge",{"state":[1]}]]],["dropi-logo.cjs",[[513,"dropi-logo",{"urlLogo":[1,"url-logo"],"size":[1],"theme":[1]}]]],["dropi-lottie-loader.cjs",[[513,"dropi-lottie-loader",{"visible":[4],"loadingAnimation":[1,"loading-animation"],"loaderTitle":[1,"loader-title"],"message":[1]}]]],["dropi-otp-send-code.cjs",[[513,"dropi-otp-send-code",{"engine":[1],"labelContact":[1,"label-contact"],"showLabelContact":[4,"show-label-contact"],"errorMessage":[1,"error-message"],"digits":[32],"digitStates":[32],"countdown":[32],"canResend":[32],"error":[32]}]]],["dropi-radio-button.cjs",[[577,"dropi-radio-button",{"label":[1],"name":[1],"inputId":[1,"input-id"],"checked":[1540],"resetTrigger":[4,"reset-trigger"]},null,{"resetTrigger":[{"onResetTrigger":0}]}]]],["dropi-read-more.cjs",[[513,"dropi-read-more",{"text":[1],"maxWords":[2,"max-words"],"showSeeLess":[4,"show-see-less"],"expanded":[32]}]]],["dropi-simple-stepper.cjs",[[513,"dropi-simple-stepper",{"stepsCount":[2,"steps-count"],"typeStep":[1,"type-step"],"currentStep":[2,"current-step"],"labelStepper":[1,"label-stepper"],"flowMode":[1,"flow-mode"]}]]],["dropi-skeleton.cjs",[[513,"dropi-skeleton",{"variant":[1],"width":[1],"height":[1],"borderRadius":[1,"border-radius"],"lines":[2]}]]],["dropi-tooltip.cjs",[[769,"dropi-tooltip",{"text":[1],"position":[1],"maxWidth":[1,"max-width"],"showDelay":[2,"show-delay"],"visible":[32]}]]],["dropi-button.cjs",[[769,"dropi-button",{"type":[1],"severity":[1],"size":[1],"state":[1],"preIcon":[1,"pre-icon"],"postIcon":[1,"post-icon"],"text":[1]}]]],["dropi-switch.cjs",[[577,"dropi-switch",{"isChecked":[1540,"is-checked"],"disabled":[516]}]]],["dropi-checkbox.cjs",[[577,"dropi-checkbox",{"checked":[1540],"disabled":[516]}]]]], options);
 });
 
 exports.setNonce = index.setNonce;

package/dist/cjs/dropi-vertical-steps.cjs.entry.js

@@ -0,0 +1,55 @@
+'use strict';
+
+var index = require('./index-B6R6Ojma.js');
+
+const dropiVerticalStepsCss = () => `: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}.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)}.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)}.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)}`;
+
+const DropiVerticalSteps = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.dropiStepClick = index.createEvent(this, "dropiStepClick");
+    }
+    /** 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 (index.h("div", { key: '4e23932cbc36257cf0f435735d95fc68be174cb7', 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 (index.h("div", { class: { 'v-step': true, 'v-step--clickable': isClickable }, key: i, onClick: () => isClickable && this.dropiStepClick.emit(i + 1) }, index.h("div", { class: "v-step__indicator" }, index.h("div", { class: { 'v-step__circle': true, [`v-step__circle--${state}`]: true } }, state === 'completed' && this.showCheckIcon ? (index.h("dropi-icon", { name: "Check", width: "12px", height: "12px", color: "Neutral-White" })) : (index.h("span", { class: "v-step__number" }, i + 1))), !isLast && index.h("div", { class: { 'v-step__line': true, 'v-step__line--done': state === 'completed' } })), index.h("span", { class: { 'v-step__label': true, [`v-step__label--${state}`]: true } }, step.label)));
+        })));
+    }
+};
+DropiVerticalSteps.style = dropiVerticalStepsCss();
+
+exports.dropi_vertical_steps = DropiVerticalSteps;

package/dist/cjs/loader.cjs.js

@@ -5,7 +5,7 @@ var index = require('./index-B6R6Ojma.js');
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await index.globalScripts();
-  return index.bootstrapLazy([["dropi-icon.cjs",[[513,"dropi-icon",{"name":[1],"width":[1],"height":[1],"color":[1]},null,{"color":[{"colorChanged":0}]}]]],["dropi-empty-state.cjs",[[769,"dropi-empty-state",{"header":[1],"description":[1],"imageUrl":[1,"image-url"],"imageAlt":[1,"image-alt"],"actionLabel":[1,"action-label"],"secondaryLabel":[1,"secondary-label"]}]]],["dropi-accordion.cjs",[[769,"dropi-accordion",{"header":[1],"open":[1540],"disabled":[4],"preIcon":[1,"pre-icon"],"contentHeight":[32]},null,{"open":[{"openChanged":0}]}]]],["dropi-input.cjs",[[577,"dropi-input",{"inputId":[1,"input-id"],"name":[1],"label":[1],"placeholder":[1],"value":[1025],"maxlength":[2],"disabled":[516],"required":[516],"showAsterisk":[4,"show-asterisk"],"fixedLabel":[4,"fixed-label"],"inputMode":[1,"input-mode"],"passwordInput":[4,"password-input"],"moneyFormat":[4,"money-format"],"thousandSeparator":[4,"thousand-separator"],"onlyNumbers":[4,"only-numbers"],"allowDecimals":[4,"allow-decimals"],"onlyLetters":[4,"only-letters"],"icon":[1],"iconColor":[1,"icon-color"],"invalid":[4],"helperText":[1,"helper-text"],"showHelperOnlyOnError":[4,"show-helper-only-on-error"],"showPassword":[32],"touched":[32]},null,{"value":[{"valueChanged":0}],"disabled":[{"disabledChanged":0}]}]]],["dropi-modal.cjs",[[769,"dropi-modal",{"visible":[1540],"header":[1],"showCloseIcon":[4,"show-close-icon"],"dismissable":[4],"closeOnEscape":[4,"close-on-escape"],"modal":[4],"showHeader":[4,"show-header"],"position":[1],"size":[1],"isOpen":[32],"isClosing":[32],"mounted":[32],"hide":[64],"show":[64]},null,{"visible":[{"visibleChanged":0}]}]]],["dropi-paginator.cjs",[[513,"dropi-paginator",{"total":[2],"pageSize":[1026,"page-size"],"page":[1538],"maxPages":[2,"max-pages"],"showPageSizeSelector":[4,"show-page-size-selector"],"pageSizeOptions":[1,"page-size-options"],"parsedOptions":[32]},null,{"pageSizeOptions":[{"optionsChanged":0}]}]]],["dropi-select.cjs",[[577,"dropi-select",{"label":[1],"placeholder":[1],"options":[1040],"name":[1],"disabled":[516],"invalid":[4],"errorText":[1,"error-text"],"helperText":[1,"helper-text"],"showObligatory":[4,"show-obligatory"],"searchEnabled":[4,"search-enabled"],"multiSelect":[4,"multi-select"],"dropdownType":[4,"dropdown-type"],"showCountryFlags":[4,"show-country-flags"],"radioOptions":[4,"radio-options"],"placeHolderSearch":[1,"place-holder-search"],"preIcon":[1,"pre-icon"],"defaultSelectedId":[1032,"default-selected-id"],"value":[1040],"isOpen":[32],"selectedOption":[32],"multiSelected":[32],"filteredOptions":[32],"searchTerm":[32],"dropdownStyle":[32],"setById":[64],"setByLabel":[64],"clearSelection":[64],"resetMultiSelect":[64]},[[4,"click","handleOutsideClick"]],{"options":[{"optionsChanged":0}],"defaultSelectedId":[{"defaultChanged":0}],"value":[{"valueChanged":0}]}]]],["dropi-tabs.cjs",[[513,"dropi-tabs",{"tabs":[1],"activeTab":[1544,"active-tab"],"showIcon":[4,"show-icon"],"parsedTabs":[32]},null,{"tabs":[{"tabsChanged":0}]}]]],["dropi-tag.cjs",[[513,"dropi-tag",{"type":[1],"state":[1],"showIcon":[4,"show-icon"],"icon":[1],"text":[1]},null,{"type":[{"propsChanged":0}],"state":[{"propsChanged":0}]}]]],["dropi-text-area.cjs",[[577,"dropi-text-area",{"inputId":[1,"input-id"],"name":[1],"label":[1],"placeholder":[1],"value":[1025],"maxlength":[2],"minlength":[2],"rows":[2],"resize":[1],"disabled":[516],"required":[516],"showAsterisk":[4,"show-asterisk"],"helperText":[1,"helper-text"],"invalid":[4],"touched":[32]},null,{"value":[{"valueChanged":0}]}]]],["dropi-toast.cjs",[[513,"dropi-toast",{"position":[1],"life":[2],"items":[32],"show":[64],"clear":[64]}]]],["dropi-badge.cjs",[[513,"dropi-badge",{"state":[1]}]]],["dropi-checkbox.cjs",[[577,"dropi-checkbox",{"checked":[1540],"disabled":[516]}]]],["dropi-radio-button.cjs",[[577,"dropi-radio-button",{"label":[1],"name":[1],"inputId":[1,"input-id"],"checked":[1540],"resetTrigger":[4,"reset-trigger"]},null,{"resetTrigger":[{"onResetTrigger":0}]}]]],["dropi-skeleton.cjs",[[513,"dropi-skeleton",{"variant":[1],"width":[1],"height":[1],"borderRadius":[1,"border-radius"],"lines":[2]}]]],["dropi-switch.cjs",[[577,"dropi-switch",{"isChecked":[1540,"is-checked"],"disabled":[516]}]]],["dropi-tooltip.cjs",[[769,"dropi-tooltip",{"text":[1],"position":[1],"maxWidth":[1,"max-width"],"showDelay":[2,"show-delay"],"visible":[32]}]]],["dropi-button.cjs",[[769,"dropi-button",{"type":[1],"severity":[1],"size":[1],"state":[1],"preIcon":[1,"pre-icon"],"postIcon":[1,"post-icon"],"text":[1]}]]]], options);
+  return index.bootstrapLazy([["dropi-icon.cjs",[[513,"dropi-icon",{"name":[1],"width":[1],"height":[1],"color":[1]},null,{"color":[{"colorChanged":0}]}]]],["dropi-card-section.cjs",[[513,"dropi-card-section",{"sectionTitle":[1,"section-title"],"description":[1],"typeElement":[1,"type-element"],"type":[1],"isChecked":[1028,"is-checked"]}]]],["dropi-checkbox-selection-list.cjs",[[513,"dropi-checkbox-selection-list",{"options":[1],"showFilter":[4,"show-filter"],"filterPlaceholder":[1,"filter-placeholder"],"showNotFound":[4,"show-not-found"],"notFoundMessage":[1,"not-found-message"],"multiSelect":[4,"multi-select"],"filterText":[32],"selected":[32],"parsedOptions":[32]},null,{"options":[{"optionsChanged":0}]}]]],["dropi-empty-state.cjs",[[769,"dropi-empty-state",{"header":[1],"description":[1],"imageUrl":[1,"image-url"],"imageAlt":[1,"image-alt"],"actionLabel":[1,"action-label"],"secondaryLabel":[1,"secondary-label"]}]]],["dropi-search.cjs",[[513,"dropi-search",{"placeholder":[1],"value":[1025],"maxlength":[2],"showClear":[4,"show-clear"],"options":[1],"labelKey":[1,"label-key"],"multiSelect":[4,"multi-select"],"dropdownHeight":[1,"dropdown-height"],"label":[1],"open":[32],"selected":[32],"parsedOptions":[32]},null,{"options":[{"optionsChanged":0}]}]]],["dropi-accordion.cjs",[[769,"dropi-accordion",{"header":[1],"open":[1540],"disabled":[4],"preIcon":[1,"pre-icon"],"contentHeight":[32]},null,{"open":[{"openChanged":0}]}]]],["dropi-alert.cjs",[[513,"dropi-alert",{"message":[1],"type":[1],"state":[1],"dismissable":[4],"showButton":[4,"show-button"],"buttonText":[1,"button-text"],"anchorText":[1,"anchor-text"],"anchorUrl":[1,"anchor-url"],"showAlert":[1028,"show-alert"]}]]],["dropi-chips.cjs",[[769,"dropi-chips",{"chipStyle":[1,"chip-style"],"type":[1],"urlImg":[1,"url-img"],"showIcon":[4,"show-icon"],"icon":[1]}]]],["dropi-dropdown.cjs",[[513,"dropi-dropdown",{"options":[1],"valueModel":[1,"value-model"],"imageModel":[1,"image-model"],"height":[1],"selected":[32],"parsedOptions":[32]},null,{"options":[{"optionsChanged":0}]}]]],["dropi-favorite-button.cjs",[[513,"dropi-favorite-button",{"isFavorite":[1028,"is-favorite"],"hovered":[32]}]]],["dropi-image-miniature.cjs",[[513,"dropi-image-miniature",{"label":[1],"images":[1],"width":[1],"height":[1]}]]],["dropi-image-overlay.cjs",[[513,"dropi-image-overlay",{"visible":[1028],"images":[1],"activeIndex":[1026,"active-index"],"current":[32],"parsedImages":[32]},null,{"images":[{"imagesChanged":0}],"activeIndex":[{"indexChanged":0}],"visible":[{"visibleChanged":0}]}]]],["dropi-input.cjs",[[577,"dropi-input",{"inputId":[1,"input-id"],"name":[1],"label":[1],"placeholder":[1],"value":[1025],"maxlength":[2],"disabled":[516],"required":[516],"showAsterisk":[4,"show-asterisk"],"fixedLabel":[4,"fixed-label"],"inputMode":[1,"input-mode"],"passwordInput":[4,"password-input"],"moneyFormat":[4,"money-format"],"thousandSeparator":[4,"thousand-separator"],"onlyNumbers":[4,"only-numbers"],"allowDecimals":[4,"allow-decimals"],"onlyLetters":[4,"only-letters"],"icon":[1],"iconColor":[1,"icon-color"],"invalid":[4],"helperText":[1,"helper-text"],"showHelperOnlyOnError":[4,"show-helper-only-on-error"],"showPassword":[32],"touched":[32]},null,{"value":[{"valueChanged":0}],"disabled":[{"disabledChanged":0}]}]]],["dropi-modal.cjs",[[769,"dropi-modal",{"visible":[1540],"header":[1],"showCloseIcon":[4,"show-close-icon"],"dismissable":[4],"closeOnEscape":[4,"close-on-escape"],"modal":[4],"showHeader":[4,"show-header"],"position":[1],"size":[1],"isOpen":[32],"isClosing":[32],"mounted":[32],"hide":[64],"show":[64]},null,{"visible":[{"visibleChanged":0}]}]]],["dropi-paginator.cjs",[[513,"dropi-paginator",{"total":[2],"pageSize":[1026,"page-size"],"page":[1538],"maxPages":[2,"max-pages"],"noLabels":[4,"no-labels"],"showPageSizeSelector":[4,"show-page-size-selector"],"pageSizeOptions":[1,"page-size-options"],"parsedOptions":[32]},null,{"pageSizeOptions":[{"optionsChanged":0}]}]]],["dropi-radio-selection-list.cjs",[[513,"dropi-radio-selection-list",{"options":[1],"selectedOption":[1032,"selected-option"],"showFilter":[4,"show-filter"],"filterPlaceholder":[1,"filter-placeholder"],"typeLayout":[1,"type-layout"],"filterText":[32],"parsedOptions":[32]},null,{"options":[{"optionsChanged":0}]}]]],["dropi-select.cjs",[[577,"dropi-select",{"label":[1],"placeholder":[1],"options":[1040],"name":[1],"disabled":[516],"invalid":[4],"errorText":[1,"error-text"],"helperText":[1,"helper-text"],"showObligatory":[4,"show-obligatory"],"searchEnabled":[4,"search-enabled"],"multiSelect":[4,"multi-select"],"dropdownType":[4,"dropdown-type"],"showCountryFlags":[4,"show-country-flags"],"radioOptions":[4,"radio-options"],"placeHolderSearch":[1,"place-holder-search"],"preIcon":[1,"pre-icon"],"defaultSelectedId":[1032,"default-selected-id"],"value":[1040],"isOpen":[32],"selectedOption":[32],"multiSelected":[32],"filteredOptions":[32],"searchTerm":[32],"dropdownStyle":[32],"setById":[64],"setByLabel":[64],"clearSelection":[64],"resetMultiSelect":[64]},[[4,"click","handleOutsideClick"]],{"options":[{"optionsChanged":0}],"defaultSelectedId":[{"defaultChanged":0}],"value":[{"valueChanged":0}]}]]],["dropi-steps.cjs",[[513,"dropi-steps",{"stepsCount":[2,"steps-count"],"showNumberOfStep":[4,"show-number-of-step"],"currentStep":[2,"current-step"],"stepLabels":[1,"step-labels"]}]]],["dropi-tabs.cjs",[[513,"dropi-tabs",{"tabs":[1],"activeTab":[1544,"active-tab"],"showIcon":[4,"show-icon"],"parsedTabs":[32]},null,{"tabs":[{"tabsChanged":0}]}]]],["dropi-tag.cjs",[[513,"dropi-tag",{"type":[1],"state":[1],"showIcon":[4,"show-icon"],"icon":[1],"text":[1]},null,{"type":[{"propsChanged":0}],"state":[{"propsChanged":0}]}]]],["dropi-text-area.cjs",[[577,"dropi-text-area",{"inputId":[1,"input-id"],"name":[1],"label":[1],"placeholder":[1],"value":[1025],"maxlength":[2],"minlength":[2],"rows":[2],"resize":[1],"disabled":[516],"required":[516],"showAsterisk":[4,"show-asterisk"],"helperText":[1,"helper-text"],"invalid":[4],"touched":[32]},null,{"value":[{"valueChanged":0}]}]]],["dropi-time-line.cjs",[[513,"dropi-time-line",{"steps":[1]}]]],["dropi-toast.cjs",[[513,"dropi-toast",{"position":[1],"life":[2],"items":[32],"show":[64],"clear":[64]}]]],["dropi-vertical-steps.cjs",[[513,"dropi-vertical-steps",{"steps":[1],"currentStep":[2,"current-step"],"clickable":[4],"showCheckIcon":[4,"show-check-icon"]}]]],["dropi-avatars.cjs",[[513,"dropi-avatars",{"image":[1],"alt":[1],"type":[1],"initials":[1]}]]],["dropi-badge.cjs",[[513,"dropi-badge",{"state":[1]}]]],["dropi-logo.cjs",[[513,"dropi-logo",{"urlLogo":[1,"url-logo"],"size":[1],"theme":[1]}]]],["dropi-lottie-loader.cjs",[[513,"dropi-lottie-loader",{"visible":[4],"loadingAnimation":[1,"loading-animation"],"loaderTitle":[1,"loader-title"],"message":[1]}]]],["dropi-otp-send-code.cjs",[[513,"dropi-otp-send-code",{"engine":[1],"labelContact":[1,"label-contact"],"showLabelContact":[4,"show-label-contact"],"errorMessage":[1,"error-message"],"digits":[32],"digitStates":[32],"countdown":[32],"canResend":[32],"error":[32]}]]],["dropi-radio-button.cjs",[[577,"dropi-radio-button",{"label":[1],"name":[1],"inputId":[1,"input-id"],"checked":[1540],"resetTrigger":[4,"reset-trigger"]},null,{"resetTrigger":[{"onResetTrigger":0}]}]]],["dropi-read-more.cjs",[[513,"dropi-read-more",{"text":[1],"maxWords":[2,"max-words"],"showSeeLess":[4,"show-see-less"],"expanded":[32]}]]],["dropi-simple-stepper.cjs",[[513,"dropi-simple-stepper",{"stepsCount":[2,"steps-count"],"typeStep":[1,"type-step"],"currentStep":[2,"current-step"],"labelStepper":[1,"label-stepper"],"flowMode":[1,"flow-mode"]}]]],["dropi-skeleton.cjs",[[513,"dropi-skeleton",{"variant":[1],"width":[1],"height":[1],"borderRadius":[1,"border-radius"],"lines":[2]}]]],["dropi-tooltip.cjs",[[769,"dropi-tooltip",{"text":[1],"position":[1],"maxWidth":[1,"max-width"],"showDelay":[2,"show-delay"],"visible":[32]}]]],["dropi-button.cjs",[[769,"dropi-button",{"type":[1],"severity":[1],"size":[1],"state":[1],"preIcon":[1,"pre-icon"],"postIcon":[1,"post-icon"],"text":[1]}]]],["dropi-switch.cjs",[[577,"dropi-switch",{"isChecked":[1540,"is-checked"],"disabled":[516]}]]],["dropi-checkbox.cjs",[[577,"dropi-checkbox",{"checked":[1540],"disabled":[516]}]]]], options);
 };
 
 exports.setNonce = index.setNonce;

package/dist/collection/collection-manifest.json

@@ -1,21 +1,40 @@
 {
   "entries": [
+    "components/dropi-alert/dropi-alert.js",
+    "components/dropi-avatars/dropi-avatars.js",
     "components/dropi-badge/dropi-badge.js",
     "components/dropi-button/dropi-button.js",
+    "components/dropi-checkbox-selection-list/dropi-checkbox-selection-list.js",
+    "components/dropi-chips/dropi-chips.js",
+    "components/dropi-dropdown/dropi-dropdown.js",
     "components/dropi-input/dropi-input.js",
     "components/dropi-modal/dropi-modal.js",
+    "components/dropi-radio-selection-list/dropi-radio-selection-list.js",
+    "components/dropi-search/dropi-search.js",
+    "components/dropi-simple-stepper/dropi-simple-stepper.js",
     "components/dropi-skeleton/dropi-skeleton.js",
+    "components/dropi-steps/dropi-steps.js",
     "components/dropi-tabs/dropi-tabs.js",
     "components/dropi-tag/dropi-tag.js",
     "components/dropi-text-area/dropi-text-area.js",
+    "components/dropi-time-line/dropi-time-line.js",
     "components/dropi-toast/dropi-toast.js",
     "components/dropi-tooltip/dropi-tooltip.js",
+    "components/dropi-vertical-steps/dropi-vertical-steps.js",
     "components/dropi-accordion/dropi-accordion.js",
+    "components/dropi-card-section/dropi-card-section.js",
     "components/dropi-checkbox/dropi-checkbox.js",
     "components/dropi-empty-state/dropi-empty-state.js",
+    "components/dropi-favorite-button/dropi-favorite-button.js",
     "components/dropi-icon/dropi-icon.js",
+    "components/dropi-image-miniature/dropi-image-miniature.js",
+    "components/dropi-image-overlay/dropi-image-overlay.js",
+    "components/dropi-logo/dropi-logo.js",
+    "components/dropi-lottie-loader/dropi-lottie-loader.js",
+    "components/dropi-otp-send-code/dropi-otp-send-code.js",
     "components/dropi-paginator/dropi-paginator.js",
     "components/dropi-radio-button/dropi-radio-button.js",
+    "components/dropi-read-more/dropi-read-more.js",
     "components/dropi-select/dropi-select.js",
     "components/dropi-switch/dropi-switch.js"
   ],

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

@@ -40,7 +40,7 @@ export class DropiAccordion {
         setTimeout(() => this.updateHeight(this.open), 0);
     }
     render() {
-        return (h("div", { key: '4da35da859fc9fdb7c874c026ef1178c93b7bfd5', class: { 'accordion': true, 'accordion--open': this.open, 'accordion--disabled': this.disabled } }, h("button", { key: '77af39a3e990b23b5e185fa99176dadce219a911', class: "accordion-header", onClick: () => this.handleToggle(), "aria-expanded": String(this.open), disabled: this.disabled }, h("span", { key: 'cda6c545f4d8342a5e9604245b102defe88be227', class: "accordion-header-left" }, this.preIcon && h("dropi-icon", { key: 'b73a39adc40193ae93b235ad5a4169a6ec4caa16', name: this.preIcon, width: "20px", height: "20px", color: "Gray-Gray-600" }), h("span", { key: 'd7c4543d5c5580ce421deeca47752c850918efd2', class: "accordion-title" }, this.header)), h("span", { key: '9e8884a62c4f9a20e6e15ee69499990db9ded865', class: { 'accordion-chevron': true, 'accordion-chevron--open': this.open } }, h("dropi-icon", { key: 'a4eb14dc1f0ac9c45865e8ee69cf698e1a5c50a7', name: "Dropdown-down", width: "20px", height: "20px", color: "Gray-Gray-500" }))), h("div", { key: 'a23b40bb950b86dafca96851319aee3c8bb6656e', class: "accordion-body", style: { maxHeight: this.contentHeight }, ref: (el) => this.contentRef = el }, h("div", { key: 'bf69ecafa7d59d776d38c55df10fa25d84d2152a', class: "accordion-content" }, h("slot", { key: 'bcb928fd4551e65b9e286770979e2e67ff9fb1aa' })))));
+        return (h("div", { key: 'af11e06f8e10d85d6dffdbcb639479ce7095ed6e', class: { 'accordion': true, 'accordion--open': this.open, 'accordion--disabled': this.disabled } }, h("button", { key: '5c3e5303dc6e5a37dece808559dcf6a8c6245980', class: "accordion-header", onClick: () => this.handleToggle(), "aria-expanded": String(this.open), disabled: this.disabled }, h("span", { key: '062be2726403e5b9d90694555317db406c70d93f', class: "accordion-header-left" }, this.preIcon && h("dropi-icon", { key: 'c626c98aaab3074cdf754460d5eff45739683404', name: this.preIcon, width: "20px", height: "20px", color: "Gray-Gray-600" }), h("span", { key: '3143e043a462df9e2b794fd2ff608ab910972a54', class: "accordion-title" }, this.header)), h("span", { key: '3ffd80e303fa17582b57a0778b2bc610c6dff899', class: { 'accordion-chevron': true, 'accordion-chevron--open': this.open } }, h("dropi-icon", { key: 'b353a6cbfbd3b51d408ced11c29eeb8a8cded9a6', name: "Dropdown-down", width: "20px", height: "20px", color: "Gray-Gray-500" }))), h("div", { key: '0754969bc5483586224ddb3774f65328dd8cd3cb', class: "accordion-body", style: { maxHeight: this.contentHeight }, ref: (el) => this.contentRef = el }, h("div", { key: '96e87adb7ca8de258541be0d4626ba9ce09e1f97', class: "accordion-content" }, h("slot", { key: '5b82c186bc11b7e9e5a714217454c0c6058be5cf' })))));
     }
     static get is() { return "dropi-accordion"; }
     static get encapsulation() { return "shadow"; }

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

@@ -0,0 +1,123 @@
+:host {
+  display: block;
+  width: 100%;
+}
+
+*, *::before, *::after { box-sizing: border-box; }
+
+.alert {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--Size-2, 8px);
+  padding: var(--Size-3, 12px) var(--Size-4, 16px);
+  border-radius: var(--Border-2, 8px);
+  border: 1px solid transparent;
+  width: 100%;
+  animation: fadeIn 0.3s ease-in-out;
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(-4px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+
+/* ── State colors ───────────────────────────────────────── */
+.alert--success {
+  background: var(--Success-Success-50, #f0fdf4);
+  border-color: var(--Success-Success-200, #bbf7d0);
+}
+
+.alert--error {
+  background: var(--Error-Error-50, #fff5f5);
+  border-color: var(--Error-Error-200, #fecaca);
+}
+
+.alert--warning {
+  background: var(--Warning-Warning-50, #fffbeb);
+  border-color: var(--Warning-Warning-200, #fde68a);
+}
+
+.alert--info {
+  background: var(--Info-Info-50, #eff6ff);
+  border-color: var(--Info-Info-200, #bfdbfe);
+}
+
+/* ── Flag type (left accent border) ────────────────────── */
+.alert--flag {
+  border-left-width: 4px;
+  border-radius: 0 var(--Border-2, 8px) var(--Border-2, 8px) 0;
+}
+
+/* ── Icon ───────────────────────────────────────────────── */
+.alert__icon {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  padding-top: 1px;
+}
+
+/* ── Body ───────────────────────────────────────────────── */
+.alert__body {
+  flex: 1;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--Size-1, 4px);
+}
+
+.alert__message {
+  font-size: var(--font-size-s, 12px);
+  color: var(--Gray-Gray-700, #32394d);
+  line-height: 1.5;
+}
+
+.alert__link {
+  font-size: var(--font-size-s, 12px);
+  font-weight: var(--font-weight-bold, 700);
+  color: var(--Primary-Primary-500, #f49a3d);
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+/* ── Actions ────────────────────────────────────────────── */
+.alert__actions {
+  display: flex;
+  align-items: center;
+  gap: var(--Size-2, 8px);
+  flex-shrink: 0;
+}
+
+.alert__btn {
+  height: 28px;
+  padding: 0 var(--Size-3, 12px);
+  border-radius: var(--Border-2, 8px);
+  border: 1px solid var(--Primary-Primary-500, #f49a3d);
+  background: transparent;
+  color: var(--Primary-Primary-500, #f49a3d);
+  font-size: var(--font-size-xs, 10px);
+  font-family: inherit;
+  font-weight: var(--font-weight-bold, 700);
+  cursor: pointer;
+  transition: background 0.15s, color 0.15s;
+}
+
+.alert__btn:hover {
+  background: var(--Primary-Primary-500, #f49a3d);
+  color: var(--Neutral-White, #fff);
+}
+
+.alert__close {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: none;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  opacity: 0.6;
+  transition: opacity 0.15s;
+}
+
+.alert__close:hover {
+  opacity: 1;
+}