@dropi/ui 0.1.18 → 0.1.20

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

@@ -0,0 +1,110 @@
+'use strict';
+
+var index = require('./index-DcOH2ZjX.js');
+
+const dropiSearchCss = () => `:host{display:block;width:100%;position:relative}*,*::before,*::after{box-sizing:border-box}.search-label{display:block;font-size:var(--font-size-xs, 10px);color:var(--Gray-Gray-600, #475066);margin-bottom:4px}.search-input-row{position:relative;display:flex;align-items:center;width:100%}.search-icon{position:absolute;left:10px;pointer-events:none;z-index:1}.search-input{width:100%;height:40px;padding:0 36px 0 34px;border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);background:var(--Neutral-White, #fff);font-size:var(--font-size-s, 12px);font-family:inherit;color:var(--Gray-Gray-700, #32394d);outline:none;transition:border-color 0.2s}.search-input:focus{border-color:var(--Info-Info-500, #50a5f1)}.search-input::placeholder{color:var(--Gray-Gray-400, #858ea6)}.search-clear{position:absolute;right:10px;display:flex;align-items:center;background:none;border:none;padding:0;cursor:pointer;z-index:1}.search-dropdown{position:absolute;top:calc(100% + 4px);left:0;right:0;max-height:var(--dropdown-height, 240px);overflow-y:auto;background:var(--Neutral-White, #fff);border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);box-shadow:0 4px 16px rgba(0, 0, 0, 0.08);z-index:100}.search-option{display:flex;align-items:center;gap:var(--Size-2, 8px);padding:var(--Size-2, 8px) var(--Size-3, 12px);cursor:pointer;transition:background 0.15s;user-select:none}.search-option:hover{background:var(--Gray-Gray-50, #f7f8fa)}.search-option--selected{background:var(--Primary-Primary-50, #fff5eb)}.search-option__label{flex:1;font-size:var(--font-size-s, 12px);color:var(--Gray-Gray-700, #32394d);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.search-no-results{padding:var(--Size-3, 12px);font-size:var(--font-size-s, 12px);color:var(--Gray-Gray-400, #858ea6);text-align:center}`;
+
+const DropiSearch = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.dropiInput = index.createEvent(this, "dropiInput", 7);
+        this.dropiBlur = index.createEvent(this, "dropiBlur", 7);
+        this.dropiKeyEnter = index.createEvent(this, "dropiKeyEnter", 7);
+        this.dropiClear = index.createEvent(this, "dropiClear", 7);
+        this.dropiChange = index.createEvent(this, "dropiChange", 7);
+    }
+    /** Placeholder text */
+    placeholder = 'Buscar...';
+    /** Controlled input value */
+    value = '';
+    /** Max character length */
+    maxlength;
+    /** Show clear (×) button when input has text */
+    showClear = true;
+    /** Data source to filter. Pass as array or JSON string */
+    options = [];
+    /** Property name to display and search */
+    labelKey = 'name';
+    /** Allow multiple selection */
+    multiSelect = false;
+    /** Max height of dropdown (CSS value) */
+    dropdownHeight = '240px';
+    /** Label shown above the input */
+    label = '';
+    open = false;
+    selected = [];
+    parsedOptions = [];
+    /** Emitted on input change. e.detail = current text */
+    dropiInput;
+    /** Emitted on blur */
+    dropiBlur;
+    /** Emitted when Enter is pressed. e.detail = current text */
+    dropiKeyEnter;
+    /** Emitted when clear button clicked */
+    dropiClear;
+    /** Emitted when selection changes. e.detail = selected items */
+    dropiChange;
+    optionsChanged(val) {
+        this.parsedOptions = typeof val === 'string' ? JSON.parse(val) : (val || []);
+    }
+    componentWillLoad() {
+        this.optionsChanged(this.options);
+    }
+    get filtered() {
+        if (!this.value)
+            return this.parsedOptions;
+        const q = this.value.toLowerCase();
+        return this.parsedOptions.filter(o => String(o[this.labelKey] ?? '').toLowerCase().includes(q));
+    }
+    handleInput(e) {
+        this.value = e.target.value;
+        this.open = this.parsedOptions.length > 0;
+        this.dropiInput.emit(this.value);
+    }
+    handleKeyDown(e) {
+        if (e.key === 'Enter')
+            this.dropiKeyEnter.emit(this.value);
+        if (e.key === 'Escape')
+            this.open = false;
+    }
+    handleClear() {
+        this.value = '';
+        this.open = false;
+        this.dropiClear.emit();
+        this.dropiInput.emit('');
+    }
+    isSelected(opt) {
+        return this.selected.some(s => s[this.labelKey] === opt[this.labelKey]);
+    }
+    selectOption(opt) {
+        if (this.multiSelect) {
+            if (this.isSelected(opt)) {
+                this.selected = this.selected.filter(s => s[this.labelKey] !== opt[this.labelKey]);
+            }
+            else {
+                this.selected = [...this.selected, opt];
+            }
+        }
+        else {
+            this.value = opt[this.labelKey] ?? '';
+            this.selected = [opt];
+            this.open = false;
+        }
+        this.dropiChange.emit(this.selected);
+    }
+    render() {
+        const showDropdown = this.open && this.parsedOptions.length > 0;
+        return (index.h("div", { key: 'f7b5b5256a42dc534286dd02248b419fddd74d39', class: "search-wrap" }, this.label && index.h("label", { key: '721b09602381aad6f1f72acdc1029556222144c8', class: "search-label" }, this.label), index.h("div", { key: 'a6c9cff477367a5a6e3653ddd2ae56066acc9236', class: "search-input-row" }, index.h("dropi-icon", { key: '95a51114f701aa87c258e620ccd60e2282830554', class: "search-icon", name: "Search", width: "16px", height: "16px", color: "Gray-Gray-400" }), index.h("input", { key: 'fc0f13786b69d08a1fa71accf5316ca98d6e3823', class: "search-input", type: "text", placeholder: this.placeholder, value: this.value, maxLength: this.maxlength, onInput: (e) => this.handleInput(e), onKeyDown: (e) => this.handleKeyDown(e), onFocus: () => {
+                if (this.parsedOptions.length)
+                    this.open = true;
+            }, onBlur: () => { setTimeout(() => this.open = false, 150); this.dropiBlur.emit(); } }), this.showClear && this.value && (index.h("button", { key: 'e16e8746a1800927966aec5268c73bf8c4c10275', class: "search-clear", onClick: () => this.handleClear(), "aria-label": "Limpiar" }, index.h("dropi-icon", { key: '691106cf972751b909d1a0a467268098e3ff02e8', name: "Close-small", width: "16px", height: "16px", color: "Gray-Gray-400" })))), showDropdown && (index.h("div", { key: '41f2d2f38dbe9d5fb1c48e1b960888fb8cc5738b', class: "search-dropdown", style: { '--dropdown-height': this.dropdownHeight } }, this.filtered.length === 0 ? (index.h("div", { class: "search-no-results" }, "Sin resultados")) : (this.filtered.map((opt, i) => (index.h("div", { class: { 'search-option': true, 'search-option--selected': this.isSelected(opt) }, key: i, onMouseDown: (e) => { e.preventDefault(); this.selectOption(opt); } }, this.multiSelect && index.h("dropi-checkbox", { checked: this.isSelected(opt) }), index.h("span", { class: "search-option__label" }, opt[this.labelKey])))))))));
+    }
+    static get watchers() { return {
+        "options": [{
+                "optionsChanged": 0
+            }]
+    }; }
+};
+DropiSearch.style = dropiSearchCss();
+
+exports.dropi_search = DropiSearch;

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

@@ -1,17 +1,17 @@
 'use strict';
 
-var index = require('./index-B6R6Ojma.js');
+var index = require('./index-DcOH2ZjX.js');
 
 const dropiSelectCss = () => `:host{display:block;width:100%;text-align:left}*,*::before,*::after{box-sizing:border-box}.custom-select{position:relative;width:100%}.custom-select label{display:block;font-size:var(--font-size-xs, 10px);font-weight:var(--font-weight-regular, 400);color:var(--Gray-Gray-600, #475066)}.disabled-label{color:var(--Gray-Gray-400, #858ea6) !important}.asterisk{color:var(--Error-Error-500, #f46a6b)}.dropdown-container{display:flex;align-items:center;gap:4px}.left-label{color:var(--Gray-Gray-600, #475066);font-size:var(--font-size-m, 14px);white-space:nowrap}.select-button{box-sizing:border-box;width:100%;height:40px;padding:0 0.75rem;border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);background:var(--Neutral-White, #fff);color:var(--Gray-Gray-500, #69738c);font-size:var(--font-size-s, 12px);font-family:inherit;display:flex;justify-content:space-between;align-items:center;text-align:left;cursor:pointer;transition:border-color 0.2s ease;gap:8px}.select-button:focus{outline:none;border-color:var(--Info-Info-500, #50a5f1)}.select-button:disabled{border-color:var(--Gray-Gray-200, #c3c9d9);color:var(--Gray-Gray-400, #858ea6);background-color:var(--Gray-Gray-50, #f7f8fa);cursor:not-allowed}.select-completed{border-color:var(--Gray-Gray-400, #858ea6);color:var(--Gray-Gray-600, #475066)}.select-button-error{border-color:var(--Error-Error-500, #f46a6b) !important}.no-border{border:none !important;color:var(--Gray-Gray-600, #475066);padding:var(--Size-4, 16px);background-color:transparent !important;gap:var(--Size-2, 8px)}.no-border:disabled{background-color:transparent !important}.button-content{display:flex;align-items:center;gap:8px;overflow:hidden;flex:1;min-width:0}.elipsis{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.select-dropdown-overlay{position:fixed;max-height:250px;overflow-y:auto;list-style:none;padding:var(--Size-4, 16px) var(--Size-4, 16px) var(--Size-3, 12px);margin:0;border-radius:var(--Border-2, 8px);background:var(--Neutral-White, #fff);box-shadow:0px 8px 24px rgba(0, 0, 0, 0.12);z-index:9999;animation:dropdown-open 120ms ease-out}@keyframes dropdown-open{from{opacity:0;transform:scaleY(0.95);transform-origin:top}to{opacity:1;transform:scaleY(1);transform-origin:top}}.option{box-sizing:border-box;width:100%;min-height:40px;border-radius:var(--Border-2, 8px);padding:var(--Size-3, 12px) var(--Size-4, 16px);border:none;background:transparent;text-align:left;color:var(--Gray-Gray-600, #475066);font-size:var(--font-size-s, 12px);font-family:inherit;cursor:pointer;display:flex;align-items:center;gap:var(--Size-2, 8px);transition:background 0.15s ease}.option:hover:not(:disabled){background:var(--Gray-Gray-50, #f7f8fa)}.option:disabled,.disabled-option{opacity:0.5;cursor:not-allowed}.option.selected-option:not(.option-radio){background:var(--Primary-Primary-50, #fef8f2);color:var(--Primary-Primary-500, #f49a3d)}.option-group-title{padding:var(--Size-3, 12px) var(--Size-4, 16px);font-size:var(--font-size-s, 12px);font-weight:var(--font-weight-medium, 500);color:var(--Gray-Gray-500, #69738c);list-style:none}.option-group{padding-left:var(--Size-6, 32px)}.sticky-search{position:sticky;top:calc(-1 * var(--Size-4, 16px));background:var(--Neutral-White, #fff);z-index:10;margin:calc(-1 * var(--Size-4, 16px)) calc(-1 * var(--Size-4, 16px)) 0;padding:var(--Size-2, 8px) var(--Size-4, 16px);border-bottom:1px solid var(--Gray-Gray-100, #e6eaf2);list-style:none}.search-wrapper{display:flex;align-items:center;gap:8px;border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);padding:6px 10px;background:var(--Neutral-White, #fff)}.search-input{flex:1;border:none;outline:none;font-size:var(--font-size-s, 12px);font-family:inherit;color:var(--Gray-Gray-700, #32394d);background:transparent}.search-input::placeholder{color:var(--Gray-Gray-400, #858ea6)}.search-clear{background:none;border:none;cursor:pointer;padding:0;display:flex;align-items:center}.multi-checkbox{width:18px;height:18px;min-width:18px;border-radius:var(--Border-1, 4px);border:2px solid var(--Gray-Gray-200, #c3c9d9);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background 0.15s, border-color 0.15s}.multi-checkbox.checked{background:var(--Primary-Primary-500, #f49a3d);border-color:var(--Primary-Primary-500, #f49a3d)}.option-radio{display:flex;align-items:center;gap:12px}.option-radio.selected-option{border-radius:var(--Border-2, 8px);background:var(--Primary-Primary-50, #fef8f2);color:var(--Primary-Primary-500, #f49a3d)}.option-radio.selected-option .option-second-label{color:var(--Primary-Primary-500, #f49a3d)}.radio{width:20px;height:20px;min-width:20px;border-radius:50%;border:2px solid var(--Gray-Gray-200, #c3c9d9);display:flex;align-items:center;justify-content:center;flex-shrink:0}.radio.selected{border-color:var(--Primary-Primary-500, #f49a3d)}.circle{width:12px;height:12px;border-radius:50%;background:var(--Primary-Primary-500, #f49a3d)}.labels-container{display:flex;justify-content:space-between;width:100%;min-width:0}.option-image{width:24px;height:24px;border-radius:60px;object-fit:cover;flex-shrink:0}.small-image{width:20px;height:20px}.option-image-fallback{width:24px;height:24px;border-radius:60px;background:var(--Primary-Primary-500, #f49a3d);color:white;font-size:13px;font-weight:bold;display:flex;justify-content:center;align-items:center;flex-shrink:0}.small-image.option-image-fallback{width:20px;height:20px}.option-second-label{color:var(--Gray-Gray-700, #32394d);font-weight:700;white-space:nowrap}.flag-placeholder{font-size:11px;font-weight:600;color:var(--Gray-Gray-500, #69738c);flex-shrink:0}.select-helper,.select-helper-error{display:flex;gap:var(--Size-1, 4px);align-items:center;margin-top:var(--Size-1, 4px)}.select-helper span{color:var(--Gray-Gray-600, #475066);font-size:var(--font-size-xs, 10px)}.select-helper-error span{color:var(--Error-Error-500, #f46a6b);font-size:var(--font-size-xs, 10px)}.no-results{padding:var(--Size-3, 12px) var(--Size-4, 16px);color:var(--Gray-Gray-400, #858ea6);font-size:var(--font-size-s, 12px);list-style:none;text-align:center}`;
 
 const DropiSelect = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.dropiChange = index.createEvent(this, "dropiChange");
-        this.dropiClear = index.createEvent(this, "dropiClear");
-        this.dropiSearch = index.createEvent(this, "dropiSearch");
-        this.dropiScrollEnd = index.createEvent(this, "dropiScrollEnd");
-        this.dropiKeyEnter = index.createEvent(this, "dropiKeyEnter");
+        this.dropiChange = index.createEvent(this, "dropiChange", 7);
+        this.dropiClear = index.createEvent(this, "dropiClear", 7);
+        this.dropiSearch = index.createEvent(this, "dropiSearch", 7);
+        this.dropiScrollEnd = index.createEvent(this, "dropiScrollEnd", 7);
+        this.dropiKeyEnter = index.createEvent(this, "dropiKeyEnter", 7);
         if (hostRef.$hostElement$["s-ei"]) {
             this.internals = hostRef.$hostElement$["s-ei"];
         }
@@ -315,7 +315,7 @@ const DropiSelect = class {
         ]), !this.isGrouped && this.filteredOptions.map(opt => this.renderOption(opt)), this.filteredOptions.length === 0 && (index.h("li", { class: "no-results" }, "Sin resultados"))));
     }
     render() {
-        return (index.h("div", { key: '0062ad3d0ca25d9126dff2f8130c9159a6b356f6', class: "custom-select" }, !this.dropdownType && this.label && (index.h("label", { key: 'ad5db5fa4fe19ee2200ab65fd1f3fcdf65bd851f', class: { 'disabled-label': this.disabled } }, this.label, this.showObligatory && !this.disabled && index.h("span", { key: '27e474c585d345168d01e156acf8fdaa9c70dbfc', class: "asterisk" }, " *"))), index.h("div", { key: '2cc4da6a0109022a7bdb21b4b7410cf1ea2a6c01', class: "dropdown-container" }, this.dropdownType && this.label && (index.h("div", { key: 'c60838f5ce7a250bb36164a989b68c93973aa661', class: "left-label" }, this.label)), this.renderTrigger()), this.helperText && !this.invalid && (index.h("div", { key: 'a30c3cb4f8abf4b820c1e1d73005547398c8ff12', class: "select-helper" }, index.h("span", { key: '239dffdcdc8bceca6c21b0160a78078acf96eb09' }, this.helperText))), this.invalid && this.errorText && (index.h("div", { key: '76fced13295c9dff83389920caf128430c2fd35c', class: "select-helper-error" }, index.h("dropi-icon", { key: 'f1c5798ee5f504387ba80a4ddeca817a6416b770', name: "Warning-circle", width: "12px", height: "12px", color: "Error-Error-500" }), index.h("span", { key: '84a93d1b293b2abe0027316c6fd9824410f20efd' }, this.errorText))), this.renderDropdown()));
+        return (index.h("div", { key: '65b15f83612bdb8b11eb321b2c92321b4c621862', class: "custom-select" }, !this.dropdownType && this.label && (index.h("label", { key: '10688d90de470bdc4cdd70c21fd62cc820475c9b', class: { 'disabled-label': this.disabled } }, this.label, this.showObligatory && !this.disabled && index.h("span", { key: 'c8c7e5d8fcc9e029bfd944b4a061289affe39c58', class: "asterisk" }, " *"))), index.h("div", { key: '6a5d1230282ec67dcaed51d9ecda4570f155a895', class: "dropdown-container" }, this.dropdownType && this.label && (index.h("div", { key: '83842d69f63c2738cc3bd7b0fbb1232cb4bc7adf', class: "left-label" }, this.label)), this.renderTrigger()), this.helperText && !this.invalid && (index.h("div", { key: 'a3c1b7552bac043d3d32bfe703f44961bf95df3d', class: "select-helper" }, index.h("span", { key: '060c5a578be91210aec96d8bdb08eddd9446ea41' }, this.helperText))), this.invalid && this.errorText && (index.h("div", { key: '97c6348abd628bb5def8b3a2a667e90f7f27d951', class: "select-helper-error" }, index.h("dropi-icon", { key: '08ab2f0397605bfe0c82ef5ba8ae4b623f98bdb3', name: "Warning-circle", width: "12px", height: "12px", color: "Error-Error-500" }), index.h("span", { key: '97e1d844b586c2da1518bc9a7c0b69aa856515e7' }, this.errorText))), this.renderDropdown()));
     }
     static get formAssociated() { return true; }
     static get watchers() { return {

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

@@ -0,0 +1,67 @@
+'use strict';
+
+var index = require('./index-DcOH2ZjX.js');
+
+const dropiSidebarCss = () => `:host{display:block;height:100%}*,*::before,*::after{box-sizing:border-box}.sidebar{display:flex;flex-direction:column;height:100%;background:var(--Neutral-White, #fff);border-right:1px solid var(--Gray-Gray-100, #eceef4);transition:width 0.25s ease;overflow:hidden;flex-shrink:0}.sidebar__logo-wrap{display:flex;align-items:center;justify-content:center;padding:var(--Size-4, 16px) var(--Size-3, 12px);border-bottom:1px solid var(--Gray-Gray-100, #eceef4)}.sidebar__logo{height:28px;object-fit:contain;max-width:100%}.sidebar__toggle{align-self:flex-end;margin:var(--Size-2, 8px);background:none;border:1px solid var(--Gray-Gray-100, #eceef4);border-radius:var(--Border-1, 4px);width:24px;height:24px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background 0.15s;flex-shrink:0}.sidebar__toggle:hover{background:var(--Gray-Gray-50, #f7f8fa)}.sidebar__nav{flex:1;overflow-y:auto;padding:var(--Size-2, 8px) 0}.sidebar__list,.sidebar__sub{list-style:none;margin:0;padding:0}.sidebar__item{width:100%;display:flex;align-items:center;gap:var(--Size-2, 8px);padding:var(--Size-2, 8px) var(--Size-3, 12px);background:none;border:none;font-size:var(--font-size-s, 12px);font-family:inherit;color:var(--Gray-Gray-600, #475066);cursor:pointer;text-align:left;transition:background 0.15s, color 0.15s;white-space:nowrap;overflow:hidden}.sidebar__item:hover{background:var(--Gray-Gray-50, #f7f8fa)}.sidebar__item--active{background:var(--Primary-Primary-50, #fff5eb);color:var(--Primary-Primary-500, #f49a3d);font-weight:var(--font-weight-bold, 700)}.sidebar__item--depth1{font-size:var(--font-size-xs, 10px)}.sidebar__item-label{flex:1;overflow:hidden;text-overflow:ellipsis}.sidebar__badge{background:var(--Error-Error-500, #f46a6b);color:var(--Neutral-White, #fff);font-size:9px;font-weight:700;min-width:16px;height:16px;border-radius:100px;display:flex;align-items:center;justify-content:center;padding:0 4px;flex-shrink:0}.sidebar__sub{padding-left:0}.sidebar__footer{padding:var(--Size-3, 12px);border-top:1px solid var(--Gray-Gray-100, #eceef4);flex-shrink:0}.sidebar__footer:empty{display:none}.sidebar--collapsed .sidebar__item{justify-content:center;padding:var(--Size-2, 8px)}`;
+
+const DropiSidebar = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.dropiSidebarItemClick = index.createEvent(this, "dropiSidebarItemClick", 7);
+        this.dropiCollapse = index.createEvent(this, "dropiCollapse", 7);
+    }
+    /** Navigation items (array or JSON string) */
+    items = [];
+    /** Active item ID */
+    activeId = '';
+    /** Collapsed state (icon-only) */
+    collapsed = false;
+    /** Show collapse toggle button */
+    showToggle = true;
+    /** Logo URL (shown at top) */
+    logoUrl = '';
+    /** Sidebar width when expanded */
+    width = '240px';
+    expandedIds = new Set();
+    /** Emitted when an item is clicked. e.detail = item id */
+    dropiSidebarItemClick;
+    /** Emitted when collapse state changes. e.detail = collapsed */
+    dropiCollapse;
+    get parsedItems() {
+        const val = this.items;
+        return typeof val === 'string' ? JSON.parse(val) : (val || []);
+    }
+    toggleExpand(id) {
+        if (this.expandedIds.has(id))
+            this.expandedIds.delete(id);
+        else
+            this.expandedIds.add(id);
+        // Force re-render
+        this.expandedIds = new Set(this.expandedIds);
+    }
+    renderItem(item, depth = 0) {
+        const hasChildren = item.children && item.children.length > 0;
+        const isExpanded = this.expandedIds.has(item.id);
+        const isActive = item.id === this.activeId;
+        return (index.h("li", null, index.h("button", { class: {
+                'sidebar__item': true,
+                'sidebar__item--active': isActive,
+                'sidebar__item--depth1': depth === 1,
+            }, style: { paddingLeft: depth > 0 ? `${12 + depth * 12}px` : undefined }, onClick: () => {
+                if (hasChildren)
+                    this.toggleExpand(item.id);
+                else
+                    this.dropiSidebarItemClick.emit(item.id);
+            }, type: "button", title: this.collapsed ? item.label : undefined }, item.icon && (index.h("dropi-icon", { name: item.icon, width: "18px", height: "18px", color: isActive ? 'Primary-Primary-500' : 'Gray-Gray-600' })), !this.collapsed && (index.h("span", { class: "sidebar__item-label" }, item.label)), !this.collapsed && item.badge != null && String(item.badge) !== '0' && (index.h("span", { class: "sidebar__badge" }, item.badge)), !this.collapsed && hasChildren && (index.h("dropi-icon", { name: isExpanded ? 'Arrow-Up-2' : 'Arrow-Down-2', width: "12px", height: "12px", color: "Gray-Gray-400" }))), hasChildren && isExpanded && !this.collapsed && (index.h("ul", { class: "sidebar__sub" }, item.children.map(child => this.renderItem(child, depth + 1))))));
+    }
+    render() {
+        const items = this.parsedItems;
+        return (index.h("aside", { key: '97c46e8c84a9e389fb67b34364321c35b0c5ebf2', class: { 'sidebar': true, 'sidebar--collapsed': this.collapsed }, style: { width: this.collapsed ? '56px' : this.width } }, this.logoUrl && (index.h("div", { key: '211e43514bcdd6b613aa1001ef630e5b9629091a', class: "sidebar__logo-wrap" }, index.h("img", { key: 'ce6b7a3b9ce26f4caa1eafd4821f5a2fa70e4dda', class: "sidebar__logo", src: this.logoUrl, alt: "Logo" }))), this.showToggle && (index.h("button", { key: 'ba66d7664b76ecdea519f9d128e998331106da8f', class: "sidebar__toggle", onClick: () => {
+                this.collapsed = !this.collapsed;
+                this.dropiCollapse.emit(this.collapsed);
+            }, "aria-label": this.collapsed ? 'Expandir' : 'Colapsar', type: "button" }, index.h("dropi-icon", { key: '3a362cb657dfa881523ae29c1e677e6cc16afb61', name: this.collapsed ? 'Arrow-Right-2' : 'Arrow-Left-2', width: "16px", height: "16px", color: "Gray-Gray-400" }))), index.h("nav", { key: '02152d2e92f7802daa1192bd9d00d21c13619de4', class: "sidebar__nav" }, index.h("ul", { key: '9e90a7d2d25a63885713b881c6d091528027ec57', class: "sidebar__list" }, items.map(item => this.renderItem(item)))), index.h("div", { key: 'b70d89a324de1b56e022ec66b52ecb2b01031d34', class: "sidebar__footer" }, index.h("slot", { key: '6ead0e515e6a59194cd3495bd691ae9acdb0dd05', name: "footer" }))));
+    }
+};
+DropiSidebar.style = dropiSidebarCss();
+
+exports.dropi_sidebar = DropiSidebar;

package/dist/cjs/dropi-simple-stepper.cjs.entry.js

@@ -0,0 +1,51 @@
+'use strict';
+
+var index = require('./index-DcOH2ZjX.js');
+
+const dropiSimpleStepperCss = () => `:host{display:block;width:100%}*,*::before,*::after{box-sizing:border-box}.stepper{display:flex;align-items:flex-start;width:100%}.stepper__item{display:flex;flex-direction:column;align-items:center;flex:1}.stepper__circle-row{display:flex;align-items:center;width:100%}.stepper__circle{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background 0.2s, border-color 0.2s}.stepper__circle--pending{background:var(--Gray-Gray-100, #e6eaf2);border:2px solid var(--Gray-Gray-200, #c3c9d9)}.stepper__circle--active{background:var(--Primary-Primary-500, #f49a3d);border:2px solid var(--Primary-Primary-500, #f49a3d)}.stepper__circle--completed{background:var(--Primary-Primary-500, #f49a3d);border:2px solid var(--Primary-Primary-500, #f49a3d)}.stepper__dot{width:8px;height:8px;border-radius:50%;background:var(--Neutral-White, #fff);display:block}.stepper__circle--pending .stepper__dot{background:var(--Gray-Gray-400, #858ea6)}.stepper__number{font-size:var(--font-size-xs, 10px);font-weight:var(--font-weight-bold, 700);color:var(--Neutral-White, #fff)}.stepper__circle--pending .stepper__number{color:var(--Gray-Gray-500, #69738c)}.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)}.stepper__label{margin-top:6px;font-size:var(--font-size-xs, 10px);color:var(--Gray-Gray-600, #475066);text-align:center}`;
+
+const DropiSimpleStepper = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    /** Total steps */
+    stepsCount = 3;
+    /** Circle content: 'point' (dot) | 'number' */
+    typeStep = 'number';
+    /** Current active step (1-based) */
+    currentStep = 1;
+    /** Labels shown below each step. Pass as JSON string or array */
+    labelStepper = [];
+    /** Flow mode (visual only) */
+    flowMode = 'Sequential';
+    get parsedLabels() {
+        if (typeof this.labelStepper === 'string') {
+            try {
+                return JSON.parse(this.labelStepper);
+            }
+            catch {
+                return [];
+            }
+        }
+        return this.labelStepper || [];
+    }
+    render() {
+        const labels = this.parsedLabels;
+        const steps = Array.from({ length: this.stepsCount }, (_, i) => i + 1);
+        return (index.h("div", { key: '9991a928ba08a7720d8ded5aea01b3bc77372e71', class: "stepper" }, steps.map((step, i) => {
+            const isCompleted = step < this.currentStep;
+            const isActive = step === this.currentStep;
+            const isLast = i === steps.length - 1;
+            const label = labels[i];
+            return (index.h("div", { class: "stepper__item", key: step }, index.h("div", { class: "stepper__circle-row" }, index.h("div", { class: {
+                    'stepper__circle': true,
+                    'stepper__circle--active': isActive,
+                    'stepper__circle--completed': isCompleted,
+                    'stepper__circle--pending': !isActive && !isCompleted,
+                } }, this.typeStep === 'point' ? (index.h("span", { class: "stepper__dot" })) : (index.h("span", { class: "stepper__number" }, step))), !isLast && index.h("div", { class: { 'stepper__line': true, 'stepper__line--done': isCompleted } })), label && index.h("span", { class: "stepper__label" }, label)));
+        })));
+    }
+};
+DropiSimpleStepper.style = dropiSimpleStepperCss();
+
+exports.dropi_simple_stepper = DropiSimpleStepper;

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-B6R6Ojma.js');
+var index = require('./index-DcOH2ZjX.js');
 
 const dropiSkeletonCss = () => `:host{display:block}*,*::before,*::after{box-sizing:border-box}.skeleton-lines{display:flex;flex-direction:column;gap:8px}.skeleton{background:linear-gradient(     90deg,     var(--Gray-Gray-100, #e6eaf2) 25%,     var(--Gray-Gray-50, #f7f8fa) 50%,     var(--Gray-Gray-100, #e6eaf2) 75%   );background-size:200% 100%;animation:shimmer 1.6s ease-in-out infinite}@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}`;
 

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

@@ -0,0 +1,50 @@
+'use strict';
+
+var index = require('./index-DcOH2ZjX.js');
+
+const dropiStepsCss = () => `:host{display:block;width:100%}*,*::before,*::after{box-sizing:border-box}.stepper{display:flex;align-items:flex-start;width:100%}.stepper__step{display:flex;flex-direction:column;align-items:center;flex:1;position:relative}.stepper__circle-wrap{display:flex;align-items:center;width:100%;position:relative}.stepper__circle{width:28px;height:28px;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);flex-shrink:0;z-index:1;transition:background 0.2s, border-color 0.2s}.stepper__circle--pending{background:var(--Neutral-White, #fff);border:2px solid var(--Gray-Gray-200, #c3c9d9);color:var(--Gray-Gray-400, #858ea6)}.stepper__circle--focus{background:var(--Neutral-White, #fff);border:2px solid var(--Primary-Primary-500, #f49a3d);color:var(--Primary-Primary-500, #f49a3d)}.stepper__circle--completed{background:var(--Primary-Primary-500, #f49a3d);border:2px solid var(--Primary-Primary-500, #f49a3d);color:var(--Neutral-White, #fff)}.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)}.stepper__label{display:flex;flex-direction:column;align-items:center;gap:2px;margin-top:var(--Size-2, 8px);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)}.stepper__desc{font-size:var(--font-size-xs, 10px);color:var(--Gray-Gray-500, #69738c)}`;
+
+const DropiSteps = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    /** Total number of steps */
+    stepsCount = 3;
+    /** Show step number inside the circle */
+    showNumberOfStep = true;
+    /** Active/current step index (1-based) */
+    currentStep = 1;
+    /** Labels for each step. Pass as JSON string or array */
+    stepLabels = [];
+    get parsedLabels() {
+        if (typeof this.stepLabels === 'string') {
+            try {
+                return JSON.parse(this.stepLabels);
+            }
+            catch {
+                return [];
+            }
+        }
+        return this.stepLabels || [];
+    }
+    stepState(index) {
+        if (index < this.currentStep)
+            return 'completed';
+        if (index === this.currentStep)
+            return 'focus';
+        return 'pending';
+    }
+    render() {
+        const labels = this.parsedLabels;
+        const steps = Array.from({ length: this.stepsCount }, (_, i) => i + 1);
+        return (index.h("div", { key: '95573c2ac185f7fc63fa804a03873499ba296e5c', class: "stepper" }, steps.map((step) => {
+            const state = this.stepState(step);
+            const label = labels[step - 1];
+            const isLast = step === this.stepsCount;
+            return (index.h("div", { class: "stepper__step", key: step }, index.h("div", { class: "stepper__circle-wrap" }, index.h("div", { class: { 'stepper__circle': true, [`stepper__circle--${state}`]: true } }, state === 'completed' ? (index.h("dropi-icon", { name: "Check", width: "12px", height: "12px", color: "Neutral-White" })) : (this.showNumberOfStep ? index.h("span", null, step) : null)), !isLast && index.h("div", { class: { 'stepper__line': true, 'stepper__line--done': state === 'completed' } })), label && (index.h("div", { class: "stepper__label" }, label.title && index.h("span", { class: "stepper__title" }, label.title), label.description && index.h("span", { class: "stepper__desc" }, label.description)))));
+        })));
+    }
+};
+DropiSteps.style = dropiStepsCss();
+
+exports.dropi_steps = DropiSteps;

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

@@ -1,13 +1,13 @@
 'use strict';
 
-var index = require('./index-B6R6Ojma.js');
+var index = require('./index-DcOH2ZjX.js');
 
 const dropiSwitchCss = () => `:host{display:inline-block}*,*::before,*::after{box-sizing:border-box}.toggle-switch{position:relative;display:inline-block;width:40px;height:21px;margin-bottom:0;cursor:pointer}.toggle-switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:var(--Gray-Gray-200, #c3c9d9);transition:0.4s;border-radius:34px}.slider::before{position:absolute;content:'';height:17px;width:17px;left:3px;bottom:2px;background-color:var(--Neutral-White, #ffffff);transition:0.4s;border-radius:50%}input:checked+.slider{background-color:var(--Primary-Primary-500, #f49a3d)}input:checked+.slider::before{transform:translateX(17px)}:host([disabled]) .toggle-switch{cursor:not-allowed;opacity:0.5}`;
 
 const DropiSwitch = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.dropiChange = index.createEvent(this, "dropiChange");
+        this.dropiChange = index.createEvent(this, "dropiChange", 7);
     }
     /** Whether the switch is on */
     isChecked = false;
@@ -21,7 +21,7 @@ const DropiSwitch = class {
         this.dropiChange.emit(this.isChecked);
     }
     render() {
-        return (index.h("label", { key: '790db7283a976472fd3f8de502f73ece29134878', class: "toggle-switch" }, index.h("input", { key: '7199dcfb1a4f81eb30d7510966d56fd0111d648f', type: "checkbox", checked: this.isChecked, disabled: this.disabled, onChange: (e) => this.onToggleChange(e) }), index.h("span", { key: '2c62e927e77e58993ab44f2b4fafefcea556b71e', class: "slider" })));
+        return (index.h("label", { key: 'f02520c1b71af187ddfb766e4bac4e16482bb5cc', class: "toggle-switch" }, index.h("input", { key: '13b41ec9b7f69512be6d556f1946a3506d9557a3', type: "checkbox", checked: this.isChecked, disabled: this.disabled, onChange: (e) => this.onToggleChange(e) }), index.h("span", { key: '0bb19ad9767c1e7c5956ef834228a6a2406c225c', class: "slider" })));
     }
     static get formAssociated() { return true; }
 };

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

@@ -0,0 +1,124 @@
+'use strict';
+
+var index = require('./index-DcOH2ZjX.js');
+
+const dropiTableCss = () => `:host{display:block;width:100%}*,*::before,*::after{box-sizing:border-box}.table-wrap{width:100%;overflow-x:auto;border:1px solid var(--Gray-Gray-100, #eceef4);border-radius:var(--Border-2, 8px)}.table{width:100%;border-collapse:collapse;font-size:var(--font-size-s, 12px);color:var(--Gray-Gray-700, #32394d);background:var(--Neutral-White, #fff)}.table__th{padding:var(--Size-3, 12px) var(--Size-3, 12px);background:var(--Gray-Gray-50, #f7f8fa);font-weight:var(--font-weight-bold, 700);color:var(--Gray-Gray-600, #475066);font-size:var(--font-size-xs, 10px);text-transform:uppercase;letter-spacing:0.5px;white-space:nowrap;border-bottom:1px solid var(--Gray-Gray-100, #eceef4);user-select:none}.table__th--check{width:40px}.table__th--sortable{cursor:pointer}.table__th--sortable:hover{background:var(--Gray-Gray-100, #eceef4)}.table__th-inner{display:inline-flex;align-items:center;gap:4px}.table__tr{cursor:pointer;transition:background 0.15s}.table__tr:hover{background:var(--Gray-Gray-50, #f7f8fa)}.table__tr--selected{background:var(--Primary-Primary-50, #fff5eb)}.table--striped .table__tr:nth-child(even){background:var(--Gray-Gray-50, #f7f8fa)}.table--striped .table__tr:nth-child(even):hover{background:var(--Gray-Gray-100, #eceef4)}.table__td{padding:var(--Size-3, 12px);border-bottom:1px solid var(--Gray-Gray-100, #eceef4);vertical-align:middle}.table__td--check{width:40px}.table__td--empty{text-align:center;padding:var(--Size-8, 48px) var(--Size-4, 16px);color:var(--Gray-Gray-400, #858ea6)}.table__td--empty p{margin:var(--Size-2, 8px) 0 0}.skeleton{height:14px;background:linear-gradient(90deg, var(--Gray-Gray-100, #eceef4) 25%, var(--Gray-Gray-50, #f7f8fa) 50%, var(--Gray-Gray-100, #eceef4) 75%);background-size:200% 100%;animation:shimmer 1.4s infinite;border-radius:var(--Border-1, 4px)}.skeleton--sm{width:20px}@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}`;
+
+const DropiTable = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.dropiSort = index.createEvent(this, "dropiSort", 7);
+        this.dropiSelection = index.createEvent(this, "dropiSelection", 7);
+        this.dropiRowClick = index.createEvent(this, "dropiRowClick", 7);
+    }
+    /** Column definitions (array or JSON string) */
+    columns = [];
+    /** Row data (array or JSON string) */
+    rows = [];
+    /** Enable row selection (checkboxes) */
+    selectable = false;
+    /** Show loading skeleton */
+    loading = false;
+    /** Text shown when no rows */
+    emptyMessage = 'No hay datos disponibles';
+    /** Stripe alternate rows */
+    striped = false;
+    parsedColumns = [];
+    parsedRows = [];
+    sortKey = '';
+    sortDir = null;
+    selectedKeys = new Set();
+    /** Emitted when sort changes. e.detail = { key, dir } */
+    dropiSort;
+    /** Emitted when selection changes. e.detail = selected row indices */
+    dropiSelection;
+    /** Emitted when a row is clicked. e.detail = { row, index } */
+    dropiRowClick;
+    columnsChanged(val) {
+        this.parsedColumns = typeof val === 'string' ? JSON.parse(val) : (val || []);
+    }
+    rowsChanged(val) {
+        this.parsedRows = typeof val === 'string' ? JSON.parse(val) : (val || []);
+        this.selectedKeys = new Set();
+    }
+    componentWillLoad() {
+        this.columnsChanged(this.columns);
+        this.rowsChanged(this.rows);
+    }
+    get sortedRows() {
+        if (!this.sortKey || !this.sortDir)
+            return this.parsedRows;
+        const key = this.sortKey;
+        const dir = this.sortDir === 'asc' ? 1 : -1;
+        return [...this.parsedRows].sort((a, b) => {
+            const av = a[key] ?? '';
+            const bv = b[key] ?? '';
+            if (av < bv)
+                return -dir;
+            if (av > bv)
+                return dir;
+            return 0;
+        });
+    }
+    handleSort(col) {
+        if (!col.sortable)
+            return;
+        if (this.sortKey === col.key) {
+            this.sortDir = this.sortDir === 'asc' ? 'desc' : this.sortDir === 'desc' ? null : 'asc';
+            if (this.sortDir === null)
+                this.sortKey = '';
+        }
+        else {
+            this.sortKey = col.key;
+            this.sortDir = 'asc';
+        }
+        this.dropiSort.emit({ key: this.sortKey, dir: this.sortDir });
+    }
+    toggleRow(idx) {
+        const next = new Set(this.selectedKeys);
+        if (next.has(idx))
+            next.delete(idx);
+        else
+            next.add(idx);
+        this.selectedKeys = next;
+        this.dropiSelection.emit(Array.from(next));
+    }
+    toggleAll(checked) {
+        this.selectedKeys = checked
+            ? new Set(this.sortedRows.map((_, i) => i))
+            : new Set();
+        this.dropiSelection.emit(Array.from(this.selectedKeys));
+    }
+    sortIcon(col) {
+        if (!col.sortable)
+            return null;
+        if (this.sortKey !== col.key) {
+            return index.h("dropi-icon", { name: "Sort", width: "12px", height: "12px", color: "Gray-Gray-300" });
+        }
+        return this.sortDir === 'asc'
+            ? index.h("dropi-icon", { name: "Arrow-Up-2", width: "12px", height: "12px", color: "Primary-Primary-500" })
+            : index.h("dropi-icon", { name: "Arrow-Down-2", width: "12px", height: "12px", color: "Primary-Primary-500" });
+    }
+    render() {
+        const rows = this.sortedRows;
+        const allSelected = rows.length > 0 && this.selectedKeys.size === rows.length;
+        return (index.h("div", { key: '3e06da209d1f71b8a4a250f4bcd8a8213f34781d', class: "table-wrap" }, index.h("table", { key: '20056c30e2652f2a405eeb00954dd7b9c9b5924b', class: { 'table': true, 'table--striped': this.striped } }, index.h("thead", { key: '1a1ea1914f81d1ef8814f202de4d60308801dc1d' }, index.h("tr", { key: '22447d7fef0cf22c27c6249570c454d44b0865d3' }, this.selectable && (index.h("th", { key: 'd51aa876d97e01840a5adc34a5ec53f30fc2cac6', class: "table__th table__th--check" }, index.h("dropi-checkbox", { key: '192639cf8599dc5f3b095092a403509050e43efa', checked: allSelected, onDropiChange: (e) => this.toggleAll(e.detail) }))), this.parsedColumns.map(col => (index.h("th", { class: {
+                'table__th': true,
+                'table__th--sortable': !!col.sortable,
+            }, style: { width: col.width, textAlign: col.align || 'left' }, onClick: () => this.handleSort(col) }, index.h("span", { class: "table__th-inner" }, col.label, this.sortIcon(col))))))), index.h("tbody", { key: '93f65647369b59f913b381f541a18a215e8e0e9a' }, this.loading ? (Array.from({ length: 5 }).map(() => (index.h("tr", { class: "table__tr--skeleton" }, this.selectable && index.h("td", { class: "table__td" }, index.h("div", { class: "skeleton skeleton--sm" })), this.parsedColumns.map(() => (index.h("td", { class: "table__td" }, index.h("div", { class: "skeleton" })))))))) : rows.length === 0 ? (index.h("tr", null, index.h("td", { class: "table__td table__td--empty", colSpan: this.parsedColumns.length + (this.selectable ? 1 : 0) }, index.h("dropi-icon", { name: "Document", width: "24px", height: "24px", color: "Gray-Gray-300" }), index.h("p", null, this.emptyMessage)))) : (rows.map((row, i) => (index.h("tr", { class: {
+                'table__tr': true,
+                'table__tr--selected': this.selectedKeys.has(i),
+            }, onClick: () => this.dropiRowClick.emit({ row, index: i }) }, this.selectable && (index.h("td", { class: "table__td table__td--check", onClick: (e) => e.stopPropagation() }, index.h("dropi-checkbox", { checked: this.selectedKeys.has(i), onDropiChange: () => this.toggleRow(i) }))), this.parsedColumns.map(col => (index.h("td", { class: "table__td", style: { textAlign: col.align || 'left' } }, row[col.key] ?? '—')))))))))));
+    }
+    static get watchers() { return {
+        "columns": [{
+                "columnsChanged": 0
+            }],
+        "rows": [{
+                "rowsChanged": 0
+            }]
+    }; }
+};
+DropiTable.style = dropiTableCss();
+
+exports.dropi_table = DropiTable;

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

@@ -1,13 +1,13 @@
 'use strict';
 
-var index = require('./index-B6R6Ojma.js');
+var index = require('./index-DcOH2ZjX.js');
 
 const dropiTabsCss = () => `:host{display:block;width:100%}*,*::before,*::after{box-sizing:border-box}.tabs-container{display:flex;flex-wrap:nowrap;overflow-x:auto;width:100%;height:52px;scrollbar-width:none}.tabs-container::-webkit-scrollbar{width:0;height:0}.tab-item{padding:var(--Size-4,16px) var(--Size-5,20px);background:var(--Neutral-White,#fff);border-bottom:2px solid var(--Gray-Gray-100,#e6eaf2);cursor:pointer;display:flex;gap:16px;align-items:center;white-space:nowrap;flex-shrink:0;transition:border-color 0.15s ease;user-select:none}.tab-item:hover:not(.tab-item--disabled):not(.tab-item--active){border-color:var(--Gray-Gray-300,#a3abbf)}.tab-item--active{border-bottom:2px solid var(--Primary-Primary-500,#f49a3d)}.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-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-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);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-status-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background-color:var(--Primary-Primary-500, #f49a3d);flex-shrink:0}`;
 
 const DropiTabs = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.dropiTabChange = index.createEvent(this, "dropiTabChange");
+        this.dropiTabChange = index.createEvent(this, "dropiTabChange", 7);
     }
     /** Array of TabItem or JSON string */
     tabs = [];
@@ -31,7 +31,7 @@ const DropiTabs = class {
         this.dropiTabChange.emit(tab);
     }
     render() {
-        return (index.h("div", { key: '5b28faac5789a5e29aa68fe2892854cdebccda75', class: "tabs-container", role: "tablist" }, this.parsedTabs.map(tab => {
+        return (index.h("div", { key: '9db1e2f4fdd15fc4ea4407d83fe33c562270acec', class: "tabs-container", role: "tablist" }, this.parsedTabs.map(tab => {
             const isActive = tab.id === this.activeTab;
             return (index.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) }, index.h("span", { class: "tab-label-row" }, index.h("span", { class: "tab-label" }, tab.label), tab.counter !== undefined && tab.counter !== null && (index.h("span", { class: { 'tab-counter': true, 'tab-counter--active': isActive } }, tab.counter))), this.showIcon && (tab.completed
                 ? index.h("dropi-icon", { name: "Check-circle", width: "12px", height: "12px", color: "Success-Success-500" })

package/dist/cjs/dropi-tag-type-product.cjs.entry.js

@@ -0,0 +1,19 @@
+'use strict';
+
+var index = require('./index-DcOH2ZjX.js');
+
+const dropiTagTypeProductCss = () => `:host{display:inline-block}.type-variation{border-radius:4px;background:#f1b44c;padding:2px 6px;font-size:12px;color:#fff;text-transform:capitalize;font-weight:400;width:fit-content}`;
+
+const DropiTagTypeProduct = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    /** Label text. Default: VARIABLE */
+    label = 'VARIABLE';
+    render() {
+        return index.h("div", { key: '7002748963348a2361665d0d307f4d8eb3a24e3a', class: "type-variation" }, this.label);
+    }
+};
+DropiTagTypeProduct.style = dropiTagTypeProductCss();
+
+exports.dropi_tag_type_product = DropiTagTypeProduct;

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

@@ -1,8 +1,8 @@
 'use strict';
 
-var index = require('./index-B6R6Ojma.js');
+var index = require('./index-DcOH2ZjX.js');
 
-const dropiTagCss = () => `:host{display:inline-block}*,*::before,*::after{box-sizing:border-box}.container-chips{display:inline-block}.tags{display:inline-flex;padding:4px 8px;justify-content:center;align-items:center;gap:4px;border-radius:var(--Border-5, 9999px);overflow:hidden;text-align:center;text-overflow:ellipsis;font-size:var(--font-size-s, 12px);font-weight:var(--font-weight-medium, 500);line-height:var(--Size-5, 24px);animation:fade-in 200ms ease-out}.tags.icon-only{gap:0}.file-icon{display:flex;margin-right:4px}@keyframes fade-in{from{opacity:0;transform:scale(0.8)}to{opacity:1;transform:scale(1)}}`;
+const dropiTagCss = () => `:host{display:inline-flex}*,*::before,*::after{box-sizing:border-box}.container-chips{display:inline-block}.tags{display:inline-flex;padding:4px 8px;justify-content:center;align-items:center;gap:4px;border-radius:var(--Border-5, 9999px);overflow:hidden;text-align:center;text-overflow:ellipsis;font-size:var(--font-size-s, 12px);font-weight:var(--font-weight-medium, 500);line-height:var(--Size-5, 24px);animation:fade-in 200ms ease-out}.tags.icon-only{gap:0}.file-icon{display:flex}@keyframes fade-in{from{opacity:0;transform:scale(0.8)}to{opacity:1;transform:scale(1)}}`;
 
 const DropiTag = class {
     constructor(hostRef) {
@@ -52,7 +52,7 @@ const DropiTag = class {
         return typeof this.text === 'string' && this.text.trim().length > 0;
     }
     render() {
-        return (index.h("div", { key: 'd559f6c2ed27d543f018d3533d8d972bc47ceb9d', class: "container-chips" }, index.h("div", { key: 'd131a4626ead2d3d53d5c77875f8ebb19acc3b52', class: { tags: true, 'icon-only': this.showIcon && !this.hasContent }, style: { backgroundColor: this.bgColor, color: this.textColor } }, this.showIcon && this.icon && (index.h("dropi-icon", { key: '54775a2ca1bd87be3293b3d6417f4a26c6da0c85', class: "file-icon", name: this.icon, width: "16px", height: "16px", color: this.iconColor })), this.hasContent && index.h("span", { key: 'bce897f4094c33fd53dc98571cae60cd456e0706' }, this.text))));
+        return (index.h("div", { key: 'ca7fdd40b3d059abe34a6c4ccfba5cbfbdb5c786', class: "container-chips" }, index.h("div", { key: '897f4ab4a9d2d5ecb7088c6732f59c6cc3138c43', class: { tags: true, 'icon-only': this.showIcon && !this.hasContent }, style: { backgroundColor: this.bgColor, color: this.textColor } }, this.showIcon && this.icon && (index.h("dropi-icon", { key: '77b9315e4d1d4bd257331a4ce4cb3b82480430c0', class: "file-icon", name: this.icon, width: "16px", height: "16px", color: this.iconColor })), this.hasContent && index.h("span", { key: 'c55aede3070168989b8ebefa85480968f71eb08a' }, this.text))));
     }
     static get watchers() { return {
         "type": [{