@dropi/ui 0.1.19 → 0.1.20

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

@@ -0,0 +1,272 @@
+import { h } from "@stencil/core";
+const COUNTRIES = [
+    { name: 'Colombia', code: 'CO', dial: '+57', maxLength: 10 },
+    { name: 'Ecuador', code: 'EC', dial: '+593', maxLength: 9 },
+    { name: 'México', code: 'MX', dial: '+52', maxLength: 10 },
+    { name: 'Perú', code: 'PE', dial: '+51', maxLength: 9 },
+    { name: 'Chile', code: 'CL', dial: '+56', maxLength: 9 },
+    { name: 'Argentina', code: 'AR', dial: '+54', maxLength: 10 },
+    { name: 'Venezuela', code: 'VE', dial: '+58', maxLength: 10 },
+    { name: 'Brasil', code: 'BR', dial: '+55', maxLength: 11 },
+    { name: 'Estados Unidos', code: 'US', dial: '+1', maxLength: 10 },
+    { name: 'España', code: 'ES', dial: '+34', maxLength: 9 },
+];
+/**
+ * @component dropi-phone-input
+ * Phone number input with country code selector.
+ * Validates max length per country and emits changes.
+ */
+export class DropiPhoneInput {
+    /** Initial country dial code (e.g. "+57") */
+    codArea = '+57';
+    /** Phone number value */
+    value = '';
+    /** Input placeholder */
+    placeholder = 'Número de teléfono';
+    /** Disabled state */
+    disabled = false;
+    /** Show error state */
+    isValid = true;
+    /** Error message */
+    errorMessage = 'Número inválido';
+    /** Label */
+    label = '';
+    open = false;
+    search = '';
+    /** Emitted when country dial code changes. e.detail = dial code string */
+    dropiCodeChange;
+    /** Emitted when phone number changes. e.detail = phone number string */
+    dropiPhoneChange;
+    codAreaChanged() {
+        this.value = '';
+    }
+    get selectedCountry() {
+        return COUNTRIES.find(c => c.dial === this.codArea) ?? COUNTRIES[0];
+    }
+    get filtered() {
+        if (!this.search)
+            return COUNTRIES;
+        const q = this.search.toLowerCase();
+        return COUNTRIES.filter(c => c.name.toLowerCase().includes(q) || c.dial.includes(q));
+    }
+    selectCountry(c) {
+        this.codArea = c.dial;
+        this.open = false;
+        this.search = '';
+        this.dropiCodeChange.emit(c.dial);
+    }
+    handleInput(e) {
+        const raw = e.target.value.replace(/\D/g, '');
+        this.value = raw.slice(0, this.selectedCountry.maxLength);
+        e.target.value = this.value;
+        this.dropiPhoneChange.emit(this.value);
+    }
+    render() {
+        const country = this.selectedCountry;
+        return (h("div", { key: '8a22ead8fdf5d8916dd6d5376600ded1528f23e3', class: "phone-wrap" }, this.label && h("label", { key: '5d531f606de5691eeb608a3a32b71bd1b7925ae1', class: "phone-label" }, this.label), h("div", { key: '97d858e4dd57114e63bb460970ea5e0a22e3a4a7', class: { 'phone-row': true, 'phone-row--error': !this.isValid, 'phone-row--disabled': this.disabled } }, h("button", { key: '2f18bc35a7698d9c5f24dad68458ff27161c1b9d', type: "button", class: "phone-selector", disabled: this.disabled, onClick: () => {
+                if (!this.disabled)
+                    this.open = !this.open;
+            }, "aria-haspopup": "listbox", "aria-expanded": this.open }, h("span", { key: 'e0e5c9c22eab18335ce75ba273bf98934ad2fec0', class: "phone-selector__flag" }, country.code), h("span", { key: '9494233c07ed5f5fe6f6ad71f1f9d4c2b94be249', class: "phone-selector__dial" }, country.dial), h("dropi-icon", { key: '721e47d92b5dc9f973a5ce08b383a87371fdb736', name: "Arrow-Down-2", width: "12px", height: "12px", color: "Gray-Gray-400" })), h("div", { key: '93183e161f42b12cd42daa488c49318b2c378351', class: "phone-divider" }), h("input", { key: 'd9b4254f760cf967b2e0ca27946968d2cfc0ca86', class: "phone-input", type: "tel", inputmode: "numeric", placeholder: this.placeholder, value: this.value, disabled: this.disabled, maxLength: country.maxLength, onInput: (e) => this.handleInput(e) })), !this.isValid && (h("p", { key: '62a89722bdab5c9b3a67c444543679acfc91f4e9', class: "phone-error" }, this.errorMessage)), this.open && (h("div", { key: 'd51d4d3a43eb6d823dd9039d534f97e6a456b343', class: "phone-dropdown" }, h("div", { key: 'd3f5912e02d62fdbec2b8a859b49c80b94047a2c', class: "phone-dropdown__search-wrap" }, h("input", { key: '2349669feca48b0760277a4288420f2680eb41c4', class: "phone-dropdown__search", type: "text", placeholder: "Buscar pa\u00EDs...", value: this.search, onInput: (e) => this.search = e.target.value })), this.filtered.length === 0 ? (h("div", { class: "phone-dropdown__empty" }, "Sin resultados")) : (this.filtered.map(c => (h("div", { class: { 'phone-dropdown__item': true, 'phone-dropdown__item--active': c.dial === this.codArea }, onMouseDown: (e) => { e.preventDefault(); this.selectCountry(c); } }, h("span", { class: "phone-dropdown__code" }, c.code), h("span", { class: "phone-dropdown__name" }, c.name), h("span", { class: "phone-dropdown__dial" }, c.dial)))))))));
+    }
+    static get is() { return "dropi-phone-input"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["dropi-phone-input.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["dropi-phone-input.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "codArea": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Initial country dial code (e.g. \"+57\")"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "cod-area",
+                "defaultValue": "'+57'"
+            },
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Phone number value"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "''"
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Input placeholder"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placeholder",
+                "defaultValue": "'N\u00FAmero de tel\u00E9fono'"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disabled state"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "isValid": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show error state"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "is-valid",
+                "defaultValue": "true"
+            },
+            "errorMessage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Error message"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "error-message",
+                "defaultValue": "'N\u00FAmero inv\u00E1lido'"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label",
+                "defaultValue": "''"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "open": {},
+            "search": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "dropiCodeChange",
+                "name": "dropiCodeChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when country dial code changes. e.detail = dial code string"
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "dropiPhoneChange",
+                "name": "dropiPhoneChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when phone number changes. e.detail = phone number string"
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "codArea",
+                "methodName": "codAreaChanged"
+            }];
+    }
+}

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

@@ -28,7 +28,7 @@ export class DropiRadioButton {
         this.dropiChange.emit(e);
     }
     render() {
-        return (h("div", { key: 'd1f58dca9ddeacc153cfd1808fdc19d8c830e738', class: "dropi-radio-button" }, h("label", { key: '569169ec20f9d8fe69abe1869aed04f80f569fe8', htmlFor: this.inputId }, h("input", { key: '47f93ccdeedb805ec79e3f349aefb1b5e818437d', id: this.inputId, type: "radio", name: this.name, checked: this.checked, onChange: (e) => this.handleChange(e) }), this.label)));
+        return (h("div", { key: '50ae300b1dc5972c7c8979f7711edd5f59109653', class: "dropi-radio-button" }, h("label", { key: 'c91a4ee63c63fe9ae437f344fa1b249db227a4cb', htmlFor: this.inputId }, h("input", { key: 'ad993a1748315909539f512c09176713693a99d9', id: this.inputId, type: "radio", name: this.name, checked: this.checked, onChange: (e) => this.handleChange(e) }), this.label)));
     }
     static get is() { return "dropi-radio-button"; }
     static get encapsulation() { return "shadow"; }

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

@@ -31,10 +31,10 @@ export class DropiRadioSelectionList {
         return this.parsedOptions.filter(o => o.name?.toLowerCase().includes(q));
     }
     render() {
-        return (h("div", { key: '211875c5fad7a56c67628e888d6d2d497d0c8e8b', class: "rsl" }, this.showFilter && (h("div", { key: '324adac3e9c8f3a9e93d7da82144395bdb619345', class: "rsl__search" }, h("dropi-icon", { key: 'fb6dd199750ffb508f75404faa4a3014350aa52a', name: "Search", width: "16px", height: "16px", color: "Gray-Gray-400" }), h("input", { key: 'f2121473bdfe6b98441f12f2751a9d954468110b', class: "rsl__search-input", type: "text", placeholder: this.filterPlaceholder, value: this.filterText, onInput: (e) => {
+        return (h("div", { key: '162776e2e2c09a26761b276a078d526308d205fd', class: "rsl" }, this.showFilter && (h("div", { key: 'ea0d6f907ff1ff79ce672b0cbb75572f48d6c44b', class: "rsl__search" }, h("dropi-icon", { key: 'c7dc88e18883942492f778f53932fd99cbd1a9bc', name: "Search", width: "16px", height: "16px", color: "Gray-Gray-400" }), h("input", { key: '07ea27e2502f8aeaedb24ab4cfdb42c1573f6125', class: "rsl__search-input", type: "text", placeholder: this.filterPlaceholder, value: this.filterText, onInput: (e) => {
                 this.filterText = e.target.value;
                 this.dropiSearch.emit(this.filterText);
-            } }))), h("div", { key: '6ad89bc1840bc512bb7c78839186092d7fc73d3b', class: "rsl__list" }, this.filtered.map(opt => {
+            } }))), h("div", { key: '95a4463b79a0795c8c0e7a30047f4ccd5f1d656d', class: "rsl__list" }, this.filtered.map(opt => {
             const isSelected = opt.id === this.selectedOption;
             return (h("div", { class: { 'rsl__item': true, 'rsl__item--selected': isSelected }, key: opt.id, onClick: () => { this.selectedOption = opt.id; this.dropiChange.emit(opt.id); } }, h("div", { class: { 'rsl__radio': true, 'rsl__radio--checked': isSelected } }, isSelected && h("div", { class: "rsl__radio-dot" })), h("div", { class: "rsl__content" }, h("span", { class: "rsl__name" }, opt.name), this.typeLayout === 'description' && opt.description && (h("span", { class: "rsl__desc" }, opt.description)))));
         }))));

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

@@ -24,7 +24,7 @@ export class DropiReadMore {
     }
     render() {
         const showToggle = this.needsTruncation && (this.expanded ? this.showSeeLess : true);
-        return (h("div", { key: 'c1f9429714adae91cbc8431ef890304091415618', class: "read-more" }, h("p", { key: 'f17394eeeec531bdc2d77e3ad853cfb5079864bc', class: "read-more__text" }, this.displayText), showToggle && (h("button", { key: 'c5a1febc2557c2d96114edb10479048ab3af10b8', class: "read-more__toggle", onClick: () => this.expanded = !this.expanded }, this.expanded ? 'Ver menos' : 'Ver más'))));
+        return (h("div", { key: '82c3554cc4488391be3b70c5e3bbb5a38a957ec8', class: "read-more" }, h("p", { key: '48287caef84486c77d8e8f36080c59c32c90cd00', class: "read-more__text" }, this.displayText), showToggle && (h("button", { key: 'b808d8cf10d65381e16cdda460db8ceb4d8467c0', class: "read-more__toggle", onClick: () => this.expanded = !this.expanded }, this.expanded ? 'Ver menos' : 'Ver más'))));
     }
     static get is() { return "dropi-read-more"; }
     static get encapsulation() { return "shadow"; }

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

@@ -86,10 +86,10 @@ export class DropiSearch {
     }
     render() {
         const showDropdown = this.open && this.parsedOptions.length > 0;
-        return (h("div", { key: '279addf53afde1573747ffaf657a13160eeb3743', class: "search-wrap" }, this.label && h("label", { key: '1f85892d998de1e9086ea6d8d077ace4d92ec6bd', class: "search-label" }, this.label), h("div", { key: 'af9a3592bb880598d6aa9790a2929d813a268b83', class: "search-input-row" }, h("dropi-icon", { key: '02bfc0bb9319e7918dcd9e24ebe5bd8d4c23df24', class: "search-icon", name: "Search", width: "16px", height: "16px", color: "Gray-Gray-400" }), h("input", { key: '62faea9197d2f376d0befe0c740865386877474a', 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: () => {
+        return (h("div", { key: 'f7b5b5256a42dc534286dd02248b419fddd74d39', class: "search-wrap" }, this.label && h("label", { key: '721b09602381aad6f1f72acdc1029556222144c8', class: "search-label" }, this.label), h("div", { key: 'a6c9cff477367a5a6e3653ddd2ae56066acc9236', class: "search-input-row" }, h("dropi-icon", { key: '95a51114f701aa87c258e620ccd60e2282830554', class: "search-icon", name: "Search", width: "16px", height: "16px", color: "Gray-Gray-400" }), 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 && (h("button", { key: '9ca3eb1c01aa527768fe0b34d60f2e8e4637fd20', class: "search-clear", onClick: () => this.handleClear(), "aria-label": "Limpiar" }, h("dropi-icon", { key: '4dbd5f3d1226b6925a832fc4651e5c3610f33575', name: "Close-small", width: "16px", height: "16px", color: "Gray-Gray-400" })))), showDropdown && (h("div", { key: '0f60b572e94cd5d9c4ef0595a2345314ea2622eb', class: "search-dropdown", style: { '--dropdown-height': this.dropdownHeight } }, this.filtered.length === 0 ? (h("div", { class: "search-no-results" }, "Sin resultados")) : (this.filtered.map((opt, i) => (h("div", { class: { 'search-option': true, 'search-option--selected': this.isSelected(opt) }, key: i, onMouseDown: (e) => { e.preventDefault(); this.selectOption(opt); } }, this.multiSelect && h("dropi-checkbox", { checked: this.isSelected(opt) }), h("span", { class: "search-option__label" }, opt[this.labelKey])))))))));
+            }, onBlur: () => { setTimeout(() => this.open = false, 150); this.dropiBlur.emit(); } }), this.showClear && this.value && (h("button", { key: 'e16e8746a1800927966aec5268c73bf8c4c10275', class: "search-clear", onClick: () => this.handleClear(), "aria-label": "Limpiar" }, h("dropi-icon", { key: '691106cf972751b909d1a0a467268098e3ff02e8', name: "Close-small", width: "16px", height: "16px", color: "Gray-Gray-400" })))), showDropdown && (h("div", { key: '41f2d2f38dbe9d5fb1c48e1b960888fb8cc5738b', class: "search-dropdown", style: { '--dropdown-height': this.dropdownHeight } }, this.filtered.length === 0 ? (h("div", { class: "search-no-results" }, "Sin resultados")) : (this.filtered.map((opt, i) => (h("div", { class: { 'search-option': true, 'search-option--selected': this.isSelected(opt) }, key: i, onMouseDown: (e) => { e.preventDefault(); this.selectOption(opt); } }, this.multiSelect && h("dropi-checkbox", { checked: this.isSelected(opt) }), h("span", { class: "search-option__label" }, opt[this.labelKey])))))))));
     }
     static get is() { return "dropi-search"; }
     static get encapsulation() { return "shadow"; }

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

@@ -315,7 +315,7 @@ export class DropiSelect {
         ]), !this.isGrouped && this.filteredOptions.map(opt => this.renderOption(opt)), this.filteredOptions.length === 0 && (h("li", { class: "no-results" }, "Sin resultados"))));
     }
     render() {
-        return (h("div", { key: '276daabfaed1bf21977f4dfee1c5da3aefed63ba', class: "custom-select" }, !this.dropdownType && this.label && (h("label", { key: '59a04e375f10bf2f9f85f17aaa47fe7b169f98d3', class: { 'disabled-label': this.disabled } }, this.label, this.showObligatory && !this.disabled && h("span", { key: 'e801bfc29322e1e389b0d838a38b04168cb5a6b3', class: "asterisk" }, " *"))), h("div", { key: '190fdc37fc2b7464aea841514fb3ab7f71ef0d04', class: "dropdown-container" }, this.dropdownType && this.label && (h("div", { key: '41c952f237f08af7d499d82fb49b9230fccfed99', class: "left-label" }, this.label)), this.renderTrigger()), this.helperText && !this.invalid && (h("div", { key: 'f87a7f09f8c0cb3f4768e4c18604dc626a8769a7', class: "select-helper" }, h("span", { key: 'fc967f18d637b2469997ec67d252e0f28c66ec7d' }, this.helperText))), this.invalid && this.errorText && (h("div", { key: '3b59c1c81921f5a5890d464c4d9072ef09965232', class: "select-helper-error" }, h("dropi-icon", { key: '83d0975b4e606ec11e1f8f1a43ec8407d0b22c0e', name: "Warning-circle", width: "12px", height: "12px", color: "Error-Error-500" }), h("span", { key: 'ab365dad523b9069006d12942b169477b26a242e' }, this.errorText))), this.renderDropdown()));
+        return (h("div", { key: '65b15f83612bdb8b11eb321b2c92321b4c621862', class: "custom-select" }, !this.dropdownType && this.label && (h("label", { key: '10688d90de470bdc4cdd70c21fd62cc820475c9b', class: { 'disabled-label': this.disabled } }, this.label, this.showObligatory && !this.disabled && h("span", { key: 'c8c7e5d8fcc9e029bfd944b4a061289affe39c58', class: "asterisk" }, " *"))), h("div", { key: '6a5d1230282ec67dcaed51d9ecda4570f155a895', class: "dropdown-container" }, this.dropdownType && this.label && (h("div", { key: '83842d69f63c2738cc3bd7b0fbb1232cb4bc7adf', class: "left-label" }, this.label)), this.renderTrigger()), this.helperText && !this.invalid && (h("div", { key: 'a3c1b7552bac043d3d32bfe703f44961bf95df3d', class: "select-helper" }, h("span", { key: '060c5a578be91210aec96d8bdb08eddd9446ea41' }, this.helperText))), this.invalid && this.errorText && (h("div", { key: '97c6348abd628bb5def8b3a2a667e90f7f27d951', class: "select-helper-error" }, h("dropi-icon", { key: '08ab2f0397605bfe0c82ef5ba8ae4b623f98bdb3', name: "Warning-circle", width: "12px", height: "12px", color: "Error-Error-500" }), h("span", { key: '97e1d844b586c2da1518bc9a7c0b69aa856515e7' }, this.errorText))), this.renderDropdown()));
     }
     static get is() { return "dropi-select"; }
     static get encapsulation() { return "shadow"; }

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

@@ -0,0 +1,117 @@
+: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;
+}
+
+/* Logo */
+.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%;
+}
+
+/* Toggle */
+.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); }
+
+/* Nav */
+.sidebar__nav { flex: 1; overflow-y: auto; padding: var(--Size-2, 8px) 0; }
+.sidebar__list, .sidebar__sub {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+/* Items */
+.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; }
+
+/* Footer */
+.sidebar__footer {
+  padding: var(--Size-3, 12px);
+  border-top: 1px solid var(--Gray-Gray-100, #eceef4);
+  flex-shrink: 0;
+}
+.sidebar__footer:empty { display: none; }
+
+/* Collapsed state */
+.sidebar--collapsed .sidebar__item {
+  justify-content: center;
+  padding: var(--Size-2, 8px);
+}