@andespindola/ui-core 0.1.1 → 0.3.0

package/dist/cjs/ui-date-picker.cjs.entry.js

@@ -0,0 +1,171 @@
+'use strict';
+
+var index = require('./index-Cb1tfi_9.js');
+var floatingUi_dom = require('./floating-ui.dom-BZk7Blsu.js');
+
+const uiDatePickerCss = () => `:host{display:inline-block;font-family:var(--ui-font-sans)}.field{display:inline-flex;align-items:center;justify-content:space-between;gap:0.5rem;width:100%;min-width:12rem;height:2.75rem;padding:0 0.875rem;border:1px solid var(--ui-border);border-radius:var(--ui-radius-sm);background:var(--ui-panel);color:var(--ui-foreground);font-family:var(--ui-font-sans);font-size:0.875rem;text-align:left;cursor:pointer;backdrop-filter:blur(22px);transition:all var(--ui-duration) var(--ui-ease);box-sizing:border-box}.field:hover{border-color:var(--ui-border-strong)}.field:focus-visible{outline:none;border-color:var(--ui-accent);box-shadow:0 0 0 2px var(--ui-ring)}.label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ui-foreground)}.label.placeholder{color:var(--ui-text-faint)}.icon{flex:none;color:var(--ui-text-muted)}.calendar{position:fixed;top:0;left:0;z-index:50;width:17rem;max-width:calc(100vw - 1rem);padding:1rem;font-family:var(--ui-font-sans);color:var(--ui-foreground);border:1px solid var(--ui-border);background:var(--ui-panel-strong);box-shadow:var(--ui-shadow-lg);backdrop-filter:blur(22px);border-radius:var(--ui-radius);visibility:hidden;opacity:0;transform:scale(0.96);transition:opacity var(--ui-duration) var(--ui-ease),     transform var(--ui-duration) var(--ui-ease)}.calendar.is-open{visibility:visible;opacity:1;transform:scale(1)}.header{display:flex;align-items:center;justify-content:space-between;margin-bottom:0.75rem}.month-label{font-size:0.875rem;font-weight:600;text-transform:capitalize;color:var(--ui-foreground)}.nav{display:inline-flex;align-items:center;justify-content:center;flex:none;width:2rem;height:2rem;padding:0;border:none;border-radius:var(--ui-radius-full);background:transparent;color:var(--ui-text-soft);cursor:pointer;transition:all var(--ui-duration) var(--ui-ease)}.nav:hover{background:var(--ui-chip);color:var(--ui-foreground)}.weekdays{display:grid;grid-template-columns:repeat(7, 1fr);margin-bottom:0.25rem}.weekday{display:flex;align-items:center;justify-content:center;height:1.75rem;font-size:0.7rem;color:var(--ui-text-faint)}.grid{display:grid;grid-template-columns:repeat(7, 1fr);gap:0.125rem;justify-items:center}.day{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;padding:0;border:1px solid transparent;border-radius:var(--ui-radius-full);background:transparent;color:var(--ui-foreground);font-family:var(--ui-font-sans);font-size:0.8125rem;cursor:pointer;transition:all var(--ui-duration) var(--ui-ease)}.day.empty{cursor:default;pointer-events:none}.day:hover:not(.empty):not(.selected){background:var(--ui-chip)}.day.today{border-color:var(--ui-accent)}.day.selected{background:var(--ui-accent);color:var(--ui-accent-contrast);border-color:transparent}`;
+
+const WEEKDAYS = ["D", "S", "T", "Q", "Q", "S", "S"];
+const UiDatePicker = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.uiChange = index.createEvent(this, "uiChange");
+        /** Data selecionada no formato ISO "YYYY-MM-DD". */
+        this.value = "";
+        /** Texto exibido quando nenhuma data está selecionada. */
+        this.placeholder = "Selecione a data";
+        /** Controla a visibilidade do calendário. */
+        this.open = false;
+        this.onTriggerClick = (event) => {
+            event.stopPropagation();
+            this.setOpen(!this.open);
+        };
+        this.onDocumentClick = (event) => {
+            if (!this.open)
+                return;
+            if (event.composedPath().includes(this.host))
+                return;
+            this.setOpen(false);
+        };
+        this.onKeydown = (event) => {
+            if (event.key === "Escape" && this.open)
+                this.setOpen(false);
+        };
+        this.prevMonth = (event) => {
+            event.stopPropagation();
+            if (this.viewMonth === 0) {
+                this.viewMonth = 11;
+                this.viewYear -= 1;
+            }
+            else {
+                this.viewMonth -= 1;
+            }
+        };
+        this.nextMonth = (event) => {
+            event.stopPropagation();
+            if (this.viewMonth === 11) {
+                this.viewMonth = 0;
+                this.viewYear += 1;
+            }
+            else {
+                this.viewMonth += 1;
+            }
+        };
+    }
+    componentWillLoad() {
+        this.syncViewFromValue();
+    }
+    onValueChange() {
+        this.syncViewFromValue();
+    }
+    disconnectedCallback() {
+        this.stop();
+        document.removeEventListener("click", this.onDocumentClick);
+        document.removeEventListener("keydown", this.onKeydown);
+    }
+    syncViewFromValue() {
+        const parsed = this.parseValue(this.value);
+        const base = parsed ?? new Date();
+        this.viewYear = base.getFullYear();
+        this.viewMonth = base.getMonth();
+    }
+    /** Converte o ISO em Date local, evitando shift de fuso. */
+    parseValue(value) {
+        if (!value)
+            return null;
+        const match = /^(\d{4})-(\d{2})-(\d{2})$/.exec(value);
+        if (!match)
+            return null;
+        const [, y, m, d] = match;
+        return new Date(Number(y), Number(m) - 1, Number(d));
+    }
+    /** Gera o ISO "YYYY-MM-DD" a partir de componentes locais. */
+    toISO(year, month, day) {
+        const mm = String(month + 1).padStart(2, "0");
+        const dd = String(day).padStart(2, "0");
+        return `${year}-${mm}-${dd}`;
+    }
+    formatValue() {
+        const parsed = this.parseValue(this.value);
+        return parsed ? parsed.toLocaleDateString("pt-BR") : "";
+    }
+    monthLabel() {
+        return new Date(this.viewYear, this.viewMonth, 1).toLocaleDateString("pt-BR", { month: "long", year: "numeric" });
+    }
+    setOpen(value) {
+        if (this.open === value)
+            return;
+        this.open = value;
+        if (value) {
+            this.syncViewFromValue();
+            requestAnimationFrame(() => this.start());
+            document.addEventListener("click", this.onDocumentClick);
+            document.addEventListener("keydown", this.onKeydown);
+        }
+        else {
+            this.stop();
+            document.removeEventListener("click", this.onDocumentClick);
+            document.removeEventListener("keydown", this.onKeydown);
+        }
+    }
+    start() {
+        if (!this.triggerEl || !this.floatingEl)
+            return;
+        this.stop();
+        this.cleanup = floatingUi_dom.autoUpdate(this.triggerEl, this.floatingEl, () => {
+            if (!this.triggerEl || !this.floatingEl)
+                return;
+            floatingUi_dom.computePosition(this.triggerEl, this.floatingEl, {
+                placement: "bottom-start",
+                middleware: [floatingUi_dom.offset(6), floatingUi_dom.flip(), floatingUi_dom.shift({ padding: 8 })],
+            }).then(({ x, y }) => {
+                Object.assign(this.floatingEl.style, { left: `${x}px`, top: `${y}px` });
+            });
+        });
+    }
+    stop() {
+        this.cleanup?.();
+        this.cleanup = undefined;
+    }
+    selectDay(day) {
+        this.value = this.toISO(this.viewYear, this.viewMonth, day);
+        this.setOpen(false);
+        this.uiChange.emit(this.value);
+    }
+    buildDays() {
+        const firstWeekday = new Date(this.viewYear, this.viewMonth, 1).getDay();
+        const daysInMonth = new Date(this.viewYear, this.viewMonth + 1, 0).getDate();
+        const leading = Array.from({ length: firstWeekday }, () => 0);
+        const days = Array.from({ length: daysInMonth }, (_, i) => i + 1);
+        return [...leading, ...days];
+    }
+    isToday(day) {
+        const now = new Date();
+        return (day === now.getDate() &&
+            this.viewMonth === now.getMonth() &&
+            this.viewYear === now.getFullYear());
+    }
+    isSelected(day) {
+        return this.value === this.toISO(this.viewYear, this.viewMonth, day);
+    }
+    render() {
+        const display = this.formatValue();
+        return (index.h(index.Host, { key: '4ba4b256b16f49d1e65ffbe774c50065f097482f' }, index.h("button", { key: '0fa06810a3533cafcc808e680f61c3f289148ec5', type: "button", class: "field", ref: (el) => (this.triggerEl = el), onClick: this.onTriggerClick, "aria-haspopup": "dialog", "aria-expanded": this.open ? "true" : "false" }, index.h("span", { key: 'fd6c3f01d8ba6212284b70c8830a007fc6dc4fcb', class: { label: true, placeholder: !display } }, display || this.placeholder), index.h("svg", { key: 'aebef2e4b5928db3fdd0eee7754d6d7c430459d4', class: "icon", viewBox: "0 0 24 24", width: "18", height: "18", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, index.h("rect", { key: '8a87dd6a1230546145cd0d6626309c4c3835d379', x: "3", y: "4", width: "18", height: "18", rx: "2" }), index.h("path", { key: 'e3bca802e11ff11bbbd767c92233843a2b767e78', d: "M16 2v4M8 2v4M3 10h18" }))), index.h("div", { key: '1a8d439b816c7dcf0789e26788aee838e311b087', class: { calendar: true, "is-open": this.open }, role: "dialog", ref: (el) => (this.floatingEl = el) }, index.h("div", { key: '82d98e286b405ddfd12cc65cffe26b14ace1a31c', class: "header" }, index.h("button", { key: '6a01a9a3458d3e7b1dfc5ff153266106b9242511', type: "button", class: "nav", "aria-label": "M\u00EAs anterior", onClick: this.prevMonth }, index.h("svg", { key: 'cea0c6c7aecdf96eb2b4e42bf1b559fe7ea6e443', viewBox: "0 0 24 24", width: "16", height: "16", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, index.h("path", { key: '54d095e51205b3df5f52af6d2d28f89f2dd4db5c', d: "m15 18-6-6 6-6" }))), index.h("span", { key: '2dd822f49aa7f8bb419079a0c47f29bbfb7a22c4', class: "month-label" }, this.monthLabel()), index.h("button", { key: '553659e9903e96b84dcecbc86270d915dcd947f5', type: "button", class: "nav", "aria-label": "Pr\u00F3ximo m\u00EAs", onClick: this.nextMonth }, index.h("svg", { key: 'a73cdb32bedad0004a1d84b44e7866e008864fd8', viewBox: "0 0 24 24", width: "16", height: "16", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, index.h("path", { key: 'dac9e5c1fc22d2eefc73046269246ae07af53037', d: "m9 18 6-6-6-6" })))), index.h("div", { key: 'e731ae7eab8fee747826a58634cad540a60317a5', class: "weekdays" }, WEEKDAYS.map((label) => (index.h("span", { class: "weekday" }, label)))), index.h("div", { key: '4aa9f208fb5b20b3b35ae14f27d435918db3f380', class: "grid" }, this.buildDays().map((day) => day === 0 ? (index.h("span", { class: "day empty" })) : (index.h("button", { type: "button", class: {
+                day: true,
+                today: this.isToday(day),
+                selected: this.isSelected(day),
+            }, onClick: (event) => {
+                event.stopPropagation();
+                this.selectDay(day);
+            } }, day)))))));
+    }
+    get host() { return index.getElement(this); }
+    static get watchers() { return {
+        "value": [{
+                "onValueChange": 0
+            }]
+    }; }
+};
+UiDatePicker.style = uiDatePickerCss();
+
+exports.ui_date_picker = UiDatePicker;

package/dist/cjs/ui-dialog.cjs.entry.js

@@ -44,7 +44,7 @@ const UiDialog = class {
         this.open = false;
     }
     render() {
-        return (index.h(index.Host, { key: 'df811bec2a6a250e90cbb6d9c85202b2d3c2c964' }, index.h("dialog", { key: '49572b35ec17863fb83e9973c548a8cafa0308b6', class: "dialog", ref: (el) => (this.dialogEl = el), onClose: this.onClose, onCancel: this.onClose, onClick: this.onBackdropClick }, index.h("div", { key: '53c82b2c7a1b8831d64a060b4665a60bbdc7e39a', class: "content" }, index.h("slot", { key: 'b398a9692fdf2826b86125723bc232791e6b9e4b' })))));
+        return (index.h(index.Host, { key: 'f0ba1e147438e9941bd748b84cca800b93e0058a' }, index.h("dialog", { key: '54a38db84cc2bcd5064401499c8cbc48f9355021', class: "dialog", ref: (el) => (this.dialogEl = el), onClose: this.onClose, onCancel: this.onClose, onClick: this.onBackdropClick }, index.h("div", { key: '658cf9b13efe14c8db0c02b14b6ace5686ca686a', class: "content" }, index.h("slot", { key: '00cc3a3657049aabb7c80dfdefba059a5767da78' })))));
     }
     static get watchers() { return {
         "open": [{

package/dist/cjs/ui-drawer.cjs.entry.js

@@ -46,7 +46,7 @@ const UiDrawer = class {
         this.open = false;
     }
     render() {
-        return (index.h(index.Host, { key: '9f2f27dcc087f608a3aeed4fe64a65eb8fe4011b' }, index.h("dialog", { key: '92471e4a732f00e4187efb37cbba553651c2f9dd', class: `drawer side-${this.side}`, ref: (el) => (this.dialogEl = el), onClose: this.onClose, onCancel: this.onClose, onClick: this.onBackdropClick }, index.h("div", { key: 'd6706d4943f8559aee320b6df509138c44857bf0', class: "content" }, index.h("slot", { key: '5cb218bde44c73fd02c640c1d0da736427f2707c' })))));
+        return (index.h(index.Host, { key: '92e328d6068d3e183463e06897b9dc16e36c3be7' }, index.h("dialog", { key: 'd18eb940d959341831da313ee342f21f181aacfc', class: `drawer side-${this.side}`, ref: (el) => (this.dialogEl = el), onClose: this.onClose, onCancel: this.onClose, onClick: this.onBackdropClick }, index.h("div", { key: '9edf182db03b796ef944fbd4340d1d31db8b5321', class: "content" }, index.h("slot", { key: '34a67441244720ee301b9f4c2b871889a2a87d0b' })))));
     }
     static get watchers() { return {
         "open": [{

package/dist/cjs/ui-dropdown-item.cjs.entry.js

@@ -18,7 +18,7 @@ const UiDropdownItem = class {
         };
     }
     render() {
-        return (index.h(index.Host, { key: '57af1c437b63fb19cfe297741b2b0f8d34564be9' }, index.h("button", { key: 'e3df81eb4c921d8b447c46da5140d21fb8126417', type: "button", class: "item", role: "menuitem", disabled: this.disabled, onClick: this.onClick }, index.h("slot", { key: '162d876af4ed9913c79964afcdceda7539feb95b' }))));
+        return (index.h(index.Host, { key: '46fe995e0d6496002cb4ffda00e444731f195805' }, index.h("button", { key: '5938fcad75c81029a321bdce5c1b2c98cb4cb6a2', type: "button", class: "item", role: "menuitem", disabled: this.disabled, onClick: this.onClick }, index.h("slot", { key: '32227bb1f298ab6ba3d97d1bae86b6ce713703b8' }))));
     }
     get host() { return index.getElement(this); }
 };

package/dist/cjs/ui-dropdown-menu.cjs.entry.js

@@ -1,7 +1,7 @@
 'use strict';
 
 var index = require('./index-Cb1tfi_9.js');
-var floatingUi_dom = require('./floating-ui.dom-BPemvNRD.js');
+var floatingUi_dom = require('./floating-ui.dom-BZk7Blsu.js');
 
 const uiDropdownMenuCss = () => `:host{display:inline-block}.trigger{display:inline-flex}.menu{position:fixed;top:0;left:0;z-index:50;display:flex;flex-direction:column;gap:0.125rem;min-width:10rem;max-width:calc(100vw - 1rem);padding:0.375rem;font-family:var(--ui-font-sans);color:var(--ui-foreground);border:1px solid var(--ui-border);background:var(--ui-panel-strong);box-shadow:var(--ui-shadow-lg);backdrop-filter:blur(22px);border-radius:var(--ui-radius);visibility:hidden;opacity:0;transform:scale(0.96);transition:opacity var(--ui-duration) var(--ui-ease),     transform var(--ui-duration) var(--ui-ease)}.menu.is-open{visibility:visible;opacity:1;transform:scale(1)}`;
 
@@ -83,7 +83,7 @@ const UiDropdownMenu = class {
         this.cleanup = undefined;
     }
     render() {
-        return (index.h(index.Host, { key: '65adc044508abd9ebf4b866fba02058bdcd22d5d' }, index.h("span", { key: 'e70a23e1b41c7936ab1dc3a87cd3593b3db43088', class: "trigger", ref: (el) => (this.triggerEl = el), onClick: this.onTriggerClick }, index.h("slot", { key: '40f2226b6ba6f1d3032cd2b2f2477fbcdf9617b5', name: "trigger" })), index.h("div", { key: '6af4ab3c98a9334d805e75da724d5572e4c986aa', class: { menu: true, "is-open": this.open }, role: "menu", ref: (el) => (this.floatingEl = el) }, index.h("slot", { key: '7f99ba16ab9544d5cf63b28f77f18fd4d0fbbed2' }))));
+        return (index.h(index.Host, { key: '3224e4bac8bcfeda15aa6a5411a95574795231a8' }, index.h("span", { key: '5f0c50e0cb28c349469be5971ac0622f05d8dd19', class: "trigger", ref: (el) => (this.triggerEl = el), onClick: this.onTriggerClick }, index.h("slot", { key: '616a2917a7377d00414c8fe9745ef6c1297841fa', name: "trigger" })), index.h("div", { key: 'efa36b327e9ba6a89b939170c296a69ffbe18e90', class: { menu: true, "is-open": this.open }, role: "menu", ref: (el) => (this.floatingEl = el) }, index.h("slot", { key: 'aaffbbb6b8fe37072c8344d95a902dcb667416ba' }))));
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/ui-field.cjs.entry.js

@@ -11,7 +11,7 @@ const UiField = class {
         this.required = false;
     }
     render() {
-        return (index.h(index.Host, { key: '5656c6d47f71364d26db0e4998e64b8780ee3840' }, index.h("div", { key: '6adc292e3ae0829c7f5533b2be732644f7e95dab', class: "field" }, this.label && (index.h("label", { key: 'e7c2e2fa1c3b0bc6edadb1385062fe53e5b2f5f7', class: "label", htmlFor: this.fieldId }, this.label, this.required && (index.h("span", { key: '06e56259184b4618eb9f2b3602ebb691e6b0ef1b', class: "required", "aria-hidden": "true" }, " *")))), index.h("slot", { key: 'bd44f4f425f257671eff1ed536051fb318671afc' }), this.error ? (index.h("p", { class: "error", role: "alert" }, this.error)) : (this.description && index.h("p", { class: "description" }, this.description)))));
+        return (index.h(index.Host, { key: 'f39f480b04be85c60eaa8821358b8921d52a7801' }, index.h("div", { key: '22303a73ad07ca344ef29c25947443e4d43e95fb', class: "field" }, this.label && (index.h("label", { key: 'bf355b9c884ee0393c91f4d3cdaa38ab6d0132dc', class: "label", htmlFor: this.fieldId }, this.label, this.required && (index.h("span", { key: '94614ebcee5a68e180e135f5294370e272836b90', class: "required", "aria-hidden": "true" }, " *")))), index.h("slot", { key: '7d4b22b2741540aac3b017b882f9abfdb67c7492' }), this.error ? (index.h("p", { class: "error", role: "alert" }, this.error)) : (this.description && index.h("p", { class: "description" }, this.description)))));
     }
 };
 UiField.style = uiFieldCss();

package/dist/cjs/ui-file-upload.cjs.entry.js

@@ -0,0 +1,57 @@
+'use strict';
+
+var index = require('./index-Cb1tfi_9.js');
+
+const uiFileUploadCss = () => `:host{display:block}.dropzone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0.5rem;width:100%;padding:1.5rem;border:2px dashed var(--ui-border-strong);border-radius:var(--ui-radius-lg);background:transparent;font-family:var(--ui-font-sans);cursor:pointer;transition:background var(--ui-duration) var(--ui-ease),     border-color var(--ui-duration) var(--ui-ease)}.dropzone:hover,.dropzone.dragging{background:var(--ui-chip)}.dropzone:focus-visible{outline:none;box-shadow:0 0 0 2px var(--ui-ring)}.icon{color:var(--ui-text-soft)}.label{font-size:0.875rem;color:var(--ui-text-muted)}.hint{font-size:0.75rem;color:var(--ui-text-faint)}.files{list-style:none;margin:0.75rem 0 0;padding:0;display:flex;flex-direction:column;gap:0.375rem}.file{display:flex;align-items:center;justify-content:space-between;gap:0.75rem;padding:0.5rem 0.75rem;border:1px solid var(--ui-border);border-radius:var(--ui-radius);background:var(--ui-panel);font-family:var(--ui-font-sans)}.file-name{font-size:0.875rem;color:var(--ui-foreground);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.file-size{flex-shrink:0;font-size:0.75rem;color:var(--ui-text-muted)}`;
+
+const UiFileUpload = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.uiChange = index.createEvent(this, "uiChange");
+        /** Permite múltiplos arquivos. */
+        this.multiple = false;
+        /** Texto principal da zona de upload. */
+        this.label = "Arraste arquivos ou clique para enviar";
+        /** Arquivos atualmente selecionados. */
+        this.files = [];
+        /** Indica se há arraste sobre a zona. */
+        this.dragging = false;
+        this.openPicker = () => {
+            this.inputEl?.click();
+        };
+        this.onInputChange = (event) => {
+            const target = event.target;
+            this.setFiles(target.files);
+        };
+        this.onDragOver = (event) => {
+            event.preventDefault();
+            this.dragging = true;
+        };
+        this.onDragLeave = () => {
+            this.dragging = false;
+        };
+        this.onDrop = (event) => {
+            event.preventDefault();
+            this.dragging = false;
+            this.setFiles(event.dataTransfer?.files ?? null);
+        };
+    }
+    setFiles(list) {
+        if (!list)
+            return;
+        this.files = Array.from(list);
+        this.uiChange.emit(this.files);
+    }
+    formatSize(bytes) {
+        if (bytes >= 1024 * 1024) {
+            return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+        }
+        return `${(bytes / 1024).toFixed(1)} KB`;
+    }
+    render() {
+        return (index.h(index.Host, { key: '675f04b6b96fcdcd10f1344c20225501671e456b' }, index.h("button", { key: 'bcc1bb63fa043f0778f38370d919eabfb37930f5', type: "button", class: { dropzone: true, dragging: this.dragging }, onClick: this.openPicker, onDragOver: this.onDragOver, onDragLeave: this.onDragLeave, onDrop: this.onDrop }, index.h("svg", { key: 'a5836edcdf54284806125e0356f0a5d9bf3e075a', class: "icon", viewBox: "0 0 24 24", width: "2rem", height: "2rem", fill: "none", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }, index.h("path", { key: '093a31bf1257a470ad7447c20ff02f4ca3ce1957', d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }), index.h("polyline", { key: 'c1eaf0285b47c402fefba5d16d3e1418df06405e', points: "17 8 12 3 7 8" }), index.h("line", { key: '4655c3de2b0df216d7f520eb81dc8e8a839fde25', x1: "12", y1: "3", x2: "12", y2: "15" })), index.h("span", { key: 'afa948d851f9df7944a2c669f9e0432fb1bb017b', class: "label" }, this.label), this.accept ? (index.h("span", { class: "hint" }, this.accept)) : null), index.h("input", { key: 'd2b97f6a23121a701da7e9296f0f06d0175c6edc', type: "file", hidden: true, accept: this.accept, multiple: this.multiple, ref: (el) => (this.inputEl = el), onChange: this.onInputChange }), this.files.length > 0 ? (index.h("ul", { class: "files" }, this.files.map((file) => (index.h("li", { class: "file" }, index.h("span", { class: "file-name" }, file.name), index.h("span", { class: "file-size" }, this.formatSize(file.size))))))) : null));
+    }
+};
+UiFileUpload.style = uiFileUploadCss();
+
+exports.ui_file_upload = UiFileUpload;

package/dist/cjs/ui-grid.cjs.entry.js

@@ -0,0 +1,34 @@
+'use strict';
+
+var index = require('./index-Cb1tfi_9.js');
+
+const uiGridCss = () => `:host{display:block}.grid{display:grid;font-family:var(--ui-font-sans)}`;
+
+const GAP = {
+    xs: "0.25rem",
+    sm: "0.5rem",
+    md: "1rem",
+    lg: "1.5rem",
+    xl: "2rem",
+};
+const UiGrid = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        /** Número de colunas da grade. */
+        this.columns = 12;
+        /** Espaçamento entre células. */
+        this.gap = "md";
+    }
+    render() {
+        const style = {
+            gridTemplateColumns: this.minItemWidth
+                ? `repeat(auto-fit, minmax(${this.minItemWidth}, 1fr))`
+                : `repeat(${this.columns}, minmax(0, 1fr))`,
+            gap: GAP[this.gap],
+        };
+        return (index.h(index.Host, { key: 'fa78c94117bc998616e3f30ef936527d5be66e13' }, index.h("div", { key: '8594c436b71b7f49434b3366ec70ea24c6b437dc', class: "grid", style: style }, index.h("slot", { key: '79bb94baa8dd68e82b88734d57f6e31b033a7f5f' }))));
+    }
+};
+UiGrid.style = uiGridCss();
+
+exports.ui_grid = UiGrid;

package/dist/cjs/ui-input.cjs.entry.js

@@ -2,7 +2,7 @@
 
 var index = require('./index-Cb1tfi_9.js');
 
-const uiInputCss = () => `:host{display:block}.input{width:100%;height:2.75rem;padding:0 1rem;border:1px solid var(--ui-border);border-radius:var(--ui-radius-sm);background:var(--ui-panel);color:var(--ui-foreground);font-family:var(--ui-font-sans);font-size:0.875rem;outline:none;backdrop-filter:blur(22px);transition:all var(--ui-duration) var(--ui-ease);box-sizing:border-box}.input::placeholder{color:var(--ui-text-faint)}.input:focus-visible{border-color:var(--ui-accent);box-shadow:0 0 0 2px var(--ui-ring)}.input:disabled{opacity:0.5;pointer-events:none}.input.invalid{border-color:var(--ui-danger)}.input.invalid:focus-visible{box-shadow:0 0 0 2px color-mix(in srgb, var(--ui-danger) 40%, transparent)}`;
+const uiInputCss = () => `:host{display:block}.field{display:flex;align-items:center;gap:0.5rem;width:100%;height:2.75rem;padding:0 0.875rem;border:1px solid var(--ui-border);border-radius:var(--ui-radius-sm);background:var(--ui-panel);backdrop-filter:blur(22px);transition:all var(--ui-duration) var(--ui-ease);box-sizing:border-box}.field:hover:not(.disabled){border-color:var(--ui-border-strong)}.field:focus-within{border-color:var(--ui-accent);box-shadow:0 0 0 2px var(--ui-ring)}.field.invalid{border-color:var(--ui-danger)}.field.invalid:focus-within{box-shadow:0 0 0 2px color-mix(in srgb, var(--ui-danger) 40%, transparent)}.field.disabled{opacity:0.5;pointer-events:none}.input{flex:1;min-width:0;height:100%;border:none;background:transparent;color:var(--ui-foreground);font-family:var(--ui-font-sans);font-size:0.875rem;outline:none}.input::placeholder{color:var(--ui-text-faint)}.affix{display:inline-flex;align-items:center;color:var(--ui-text-muted)}.affix::slotted(svg),::slotted([slot="prefix"]),::slotted([slot="suffix"]){display:inline-flex;color:var(--ui-text-muted)}.clear{display:inline-flex;align-items:center;justify-content:center;flex:none;width:1.25rem;height:1.25rem;padding:0;border:none;border-radius:var(--ui-radius-full);background:var(--ui-chip);color:var(--ui-text-muted);cursor:pointer;transition:all var(--ui-duration) var(--ui-ease)}.clear:hover{color:var(--ui-foreground);background:var(--ui-panel-strong)}`;
 
 const UiInput = class {
     constructor(hostRef) {
@@ -17,6 +17,8 @@ const UiInput = class {
         this.disabled = false;
         /** Marca o campo como inválido (estilo + aria-invalid). */
         this.invalid = false;
+        /** Exibe um botão para limpar o valor quando preenchido. */
+        this.clearable = false;
         this.onInput = (event) => {
             const target = event.target;
             this.value = target.value;
@@ -25,9 +27,15 @@ const UiInput = class {
         this.onChange = (event) => {
             this.uiChange.emit(event.target.value);
         };
+        this.clear = () => {
+            this.value = "";
+            this.uiInput.emit("");
+            this.uiChange.emit("");
+        };
     }
     render() {
-        return (index.h(index.Host, { key: 'b904b919904db1677ed9480e43bf939138f09dfc' }, index.h("input", { key: '086b0bdd4a5f5c01af04be41cdee2e72af2376f1', class: { input: true, invalid: this.invalid }, type: this.type, value: this.value, name: this.name, placeholder: this.placeholder, disabled: this.disabled, "aria-invalid": this.invalid ? "true" : null, onInput: this.onInput, onChange: this.onChange })));
+        const showClear = this.clearable && !!this.value && !this.disabled;
+        return (index.h(index.Host, { key: 'cfe13feedab47ba88763ae727eb77ca15a0c52a3' }, index.h("div", { key: '7c79750f2ad87a55462a2416e9d46b4558f9b279', class: { field: true, invalid: this.invalid, disabled: this.disabled } }, index.h("span", { key: 'dafa1e0120f0de7a041ecfdb98db4203c1d67a28', class: "affix" }, index.h("slot", { key: '80aef681671784cd65f473975e441027d038c340', name: "prefix" })), index.h("input", { key: '8bad96710b4190784302fe9ce908f33aef0bc126', class: "input", type: this.type, value: this.value, name: this.name, placeholder: this.placeholder, disabled: this.disabled, "aria-invalid": this.invalid ? "true" : null, onInput: this.onInput, onChange: this.onChange }), showClear && (index.h("button", { key: '4b26604a6c1ff8004afa6ef0964490ba82553d61', class: "clear", type: "button", "aria-label": "Limpar", onClick: this.clear }, index.h("svg", { key: '87195594cef1db73b86f1117233fdef13ee9fa1a', viewBox: "0 0 24 24", width: "14", height: "14", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round" }, index.h("path", { key: '66be8eddf982847bf22f59f9113b66b4e47ca005', d: "M18 6 6 18M6 6l12 12" })))), index.h("span", { key: '749bf6ba578fd22b2d6c34b0fb7522f5a87a33e3', class: "affix" }, index.h("slot", { key: 'b226025774cedd33f915c6155061044b272d77a1', name: "suffix" })))));
     }
 };
 UiInput.style = uiInputCss();

package/dist/cjs/ui-label.cjs.entry.js

@@ -9,7 +9,7 @@ const UiLabel = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '5ded9464de8fe01a6bb830f4de51975cfd720746' }, index.h("label", { key: '1a14229c5e511eac3cb4244f546aee71a4f5d399', class: "label" }, index.h("slot", { key: '7c5def32e92ffdc6dcb1b83c044f5199957f5951' }))));
+        return (index.h(index.Host, { key: '45a53d43b29ba78ac9852334536e9d7cb93e9c3c' }, index.h("label", { key: 'f8209140ec401f7a055d398181a421f281307a9b', class: "label" }, index.h("slot", { key: '50ba3bbce082e8f0c402c7acb3cd25ce822e3728' }))));
     }
 };
 UiLabel.style = uiLabelCss();

package/dist/cjs/ui-navbar.cjs.entry.js

@@ -0,0 +1,17 @@
+'use strict';
+
+var index = require('./index-Cb1tfi_9.js');
+
+const uiNavbarCss = () => `:host{display:block}.navbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:0.75rem 1.25rem;background:var(--ui-panel-strong);backdrop-filter:blur(22px);border-bottom:1px solid var(--ui-border);font-family:var(--ui-font-sans);color:var(--ui-text-soft)}.brand{display:flex;align-items:center;gap:0.5rem;font-weight:600;color:var(--ui-foreground)}.center{display:flex;align-items:center;gap:1rem}.actions{display:flex;align-items:center;gap:0.75rem}`;
+
+const UiNavbar = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    render() {
+        return (index.h(index.Host, { key: 'db6c3b0a7eee0812d931d4fb4c8b5ce444749b5e' }, index.h("nav", { key: '990bc62b051ca9f24ee5be4bf4e383873e5d8269', class: "navbar" }, index.h("div", { key: '999b46029fb0e0b6f5a04942d9326b30f7b0e392', class: "brand" }, index.h("slot", { key: '189a4521a16efdec4eee5c433b17a71028f05c90', name: "brand" })), index.h("div", { key: 'b3e129ad603ed6d32ec676aab96cf39e51834dec', class: "center" }, index.h("slot", { key: 'dc1fff1b9c536df2d88b5e92a83634d1e3bca384' })), index.h("div", { key: '854fac1322e96c7c67bf204af17ea665494c0fc5', class: "actions" }, index.h("slot", { key: '0f07b817547c866df0137f8667790b3caa65bea8', name: "actions" })))));
+    }
+};
+UiNavbar.style = uiNavbarCss();
+
+exports.ui_navbar = UiNavbar;

package/dist/cjs/ui-pagination.cjs.entry.js

@@ -0,0 +1,63 @@
+'use strict';
+
+var index = require('./index-Cb1tfi_9.js');
+
+const uiPaginationCss = () => `:host{display:inline-block}.pagination{display:inline-flex;align-items:center;gap:0.25rem;font-family:var(--ui-font-sans)}.page{display:inline-flex;align-items:center;justify-content:center;min-width:2.25rem;height:2.25rem;padding:0 0.5rem;border:1px solid var(--ui-border);border-radius:var(--ui-radius-sm);background:transparent;color:var(--ui-foreground);font-family:var(--ui-font-sans);font-size:0.875rem;cursor:pointer;outline:none;transition:all var(--ui-duration) var(--ui-ease)}.page:hover{border-color:var(--ui-border-strong);background:var(--ui-chip)}.page:focus-visible{box-shadow:0 0 0 2px var(--ui-ring)}.page:disabled{pointer-events:none;opacity:0.5}.page.active{background:var(--ui-accent);color:var(--ui-accent-contrast);border-color:var(--ui-accent);box-shadow:var(--ui-shadow-sm)}.ellipsis{display:inline-flex;align-items:center;justify-content:center;min-width:2.25rem;height:2.25rem;color:var(--ui-text-faint);font-size:0.875rem}`;
+
+const UiPagination = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.uiChange = index.createEvent(this, "uiChange");
+        /** Total de páginas. */
+        this.total = 1;
+        /** Página atual. */
+        this.current = 1;
+        /** Quantidade de páginas ao redor da atual. */
+        this.siblings = 1;
+        this.clamp = (page) => Math.min(Math.max(page, 1), Math.max(this.total, 1));
+        this.go = (page) => {
+            const next = this.clamp(page);
+            if (next === this.current)
+                return;
+            this.current = next;
+            this.uiChange.emit(next);
+        };
+        this.buildRange = () => {
+            const total = Math.max(this.total, 1);
+            const current = this.clamp(this.current);
+            const siblings = Math.max(this.siblings, 0);
+            const start = Math.max(current - siblings, 1);
+            const end = Math.min(current + siblings, total);
+            const pages = new Set([1, total]);
+            for (let page = start; page <= end; page += 1)
+                pages.add(page);
+            const sorted = Array.from(pages)
+                .filter((page) => page >= 1 && page <= total)
+                .sort((a, b) => a - b);
+            const result = [];
+            let previous = 0;
+            for (const page of sorted) {
+                if (previous && page - previous > 1)
+                    result.push("...");
+                result.push(page);
+                previous = page;
+            }
+            return result;
+        };
+    }
+    render() {
+        const total = Math.max(this.total, 1);
+        const current = this.clamp(this.current);
+        const entries = this.buildRange();
+        return (index.h(index.Host, { key: '23be36b9c734a9c43e9644337a58e4ede719215d' }, index.h("nav", { key: '618c7c85d1ea8f93bdd058d7ba4e61a62991e2d6', class: "pagination", role: "navigation", "aria-label": "Pagina\u00E7\u00E3o" }, index.h("button", { key: 'a9c0cac9d2b2fb6c61e9627158efd08f1e20f597', class: "page nav", type: "button", "aria-label": "P\u00E1gina anterior", disabled: current <= 1, onClick: () => this.go(current - 1) }, "\u2039"), entries.map((entry, index$1) => {
+            if (entry === "...") {
+                return (index.h("span", { key: `ellipsis-${index$1}`, class: "ellipsis", "aria-hidden": "true" }, "\u2026"));
+            }
+            const active = entry === current;
+            return (index.h("button", { key: entry, class: { page: true, active }, type: "button", "aria-label": `Página ${entry}`, "aria-current": active ? "page" : undefined, onClick: () => this.go(entry) }, entry));
+        }), index.h("button", { key: '38fb86bda60934768f24c117e8586acb35f88513', class: "page nav", type: "button", "aria-label": "Pr\u00F3xima p\u00E1gina", disabled: current >= total, onClick: () => this.go(current + 1) }, "\u203A"))));
+    }
+};
+UiPagination.style = uiPaginationCss();
+
+exports.ui_pagination = UiPagination;

package/dist/cjs/ui-popover.cjs.entry.js

@@ -1,7 +1,7 @@
 'use strict';
 
 var index = require('./index-Cb1tfi_9.js');
-var floatingUi_dom = require('./floating-ui.dom-BPemvNRD.js');
+var floatingUi_dom = require('./floating-ui.dom-BZk7Blsu.js');
 
 const uiPopoverCss = () => `:host{display:inline-block}.trigger{display:inline-flex}.panel{position:fixed;top:0;left:0;z-index:50;width:18rem;max-width:calc(100vw - 1rem);padding:1rem;font-family:var(--ui-font-sans);color:var(--ui-foreground);border:1px solid var(--ui-border);background:var(--ui-panel-strong);box-shadow:var(--ui-shadow-lg);backdrop-filter:blur(22px);border-radius:var(--ui-radius);visibility:hidden;opacity:0;transform:scale(0.96);transition:opacity var(--ui-duration) var(--ui-ease),     transform var(--ui-duration) var(--ui-ease)}.panel.is-open{visibility:visible;opacity:1;transform:scale(1)}`;
 
@@ -80,7 +80,7 @@ const UiPopover = class {
         this.cleanup = undefined;
     }
     render() {
-        return (index.h(index.Host, { key: '583667abe2df75e7c9e058b7a668661527ec0b8a' }, index.h("span", { key: '46eaca2ca8c70acff629ccc5c3c201b42136c30d', class: "trigger", ref: (el) => (this.triggerEl = el), onClick: this.onTriggerClick }, index.h("slot", { key: 'd81cf859a9887d3b6964ac8e67829cf1a84c58b2', name: "trigger" })), index.h("div", { key: 'da09ed4fa3eee00ef72fb4c0eba6f0a1b827df15', class: { panel: true, "is-open": this.open }, ref: (el) => (this.floatingEl = el) }, index.h("slot", { key: 'f2483196e778a14fbe1d537dd7a3c8a6453c0daf' }))));
+        return (index.h(index.Host, { key: '005686226a579c5a9968f9b99bc177bfc523f4bc' }, index.h("span", { key: '3c43cbdfd37c6ec5243c94069fb3e417fb4fde8b', class: "trigger", ref: (el) => (this.triggerEl = el), onClick: this.onTriggerClick }, index.h("slot", { key: 'bcc68719623c4035cb4b811d52d916c86b814657', name: "trigger" })), index.h("div", { key: '04865b639bcb5ba267d1ed3e0399f8b677c1befa', class: { panel: true, "is-open": this.open }, ref: (el) => (this.floatingEl = el) }, index.h("slot", { key: '2a518fa968650f9e844996b21d421f5e96834fbd' }))));
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/ui-progress-circular.cjs.entry.js

@@ -0,0 +1,44 @@
+'use strict';
+
+var index = require('./index-Cb1tfi_9.js');
+
+const uiProgressCircularCss = () => `:host{display:inline-flex;position:relative;align-items:center;justify-content:center}.ring{display:block}.ring.indeterminate{animation:ui-progress-circular-spin 1s linear infinite;transform-origin:center}.track{fill:none;stroke:var(--ui-chip)}.indicator{fill:none;stroke:var(--ui-accent);transform:rotate(-90deg);transform-origin:center;transition:stroke-dashoffset var(--ui-duration) var(--ui-ease)}.value{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--ui-font-sans);font-size:0.8rem;font-weight:600;color:var(--ui-foreground)}@keyframes ui-progress-circular-spin{to{transform:rotate(360deg)}}`;
+
+const UiProgressCircular = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        /** Valor atual do progresso. `null` torna o componente indeterminado. */
+        this.value = null;
+        /** Valor máximo. */
+        this.max = 100;
+        /** Tamanho do anel (qualquer unidade CSS). */
+        this.size = "3rem";
+        /** Espessura do traço. */
+        this.strokeWidth = 4;
+        /** Força o estado indeterminado. */
+        this.indeterminate = false;
+        /** Exibe o percentual no centro quando determinado. */
+        this.showValue = false;
+    }
+    get isIndeterminate() {
+        return this.indeterminate || this.value === null;
+    }
+    get percent() {
+        if (this.value === null || this.max <= 0)
+            return 0;
+        const clamped = Math.min(Math.max(this.value, 0), this.max);
+        return clamped / this.max;
+    }
+    render() {
+        const determinate = !this.isIndeterminate;
+        const radius = 50 - this.strokeWidth;
+        const circumference = 2 * Math.PI * radius;
+        const dashoffset = determinate
+            ? circumference * (1 - this.percent)
+            : circumference * 0.75;
+        return (index.h(index.Host, { key: '4201e2e660c07a1b3d5ad6e2a464b3dc4075308a', role: "progressbar", "aria-valuenow": determinate ? String(this.value) : undefined, "aria-valuemin": determinate ? "0" : undefined, "aria-valuemax": determinate ? String(this.max) : undefined, style: { width: this.size, height: this.size } }, index.h("svg", { key: 'fe9226a711cbdd751baf6fd06e8acef3af63349e', class: { ring: true, indeterminate: this.isIndeterminate }, width: this.size, height: this.size, viewBox: "0 0 100 100" }, index.h("circle", { key: 'c7dc8282a2295ac97009f575bb7f116d54b0f917', class: "track", cx: "50", cy: "50", r: String(radius), "stroke-width": String(this.strokeWidth) }), index.h("circle", { key: '04f88283dde12b1e6c2206f7421fb4fa72c6d569', class: "indicator", cx: "50", cy: "50", r: String(radius), "stroke-width": String(this.strokeWidth), "stroke-linecap": "round", "stroke-dasharray": String(circumference), "stroke-dashoffset": String(dashoffset) })), this.showValue && determinate ? (index.h("div", { class: "value" }, Math.round(this.percent * 100), "%")) : null));
+    }
+};
+UiProgressCircular.style = uiProgressCircularCss();
+
+exports.ui_progress_circular = UiProgressCircular;

package/dist/cjs/ui-progress.cjs.entry.js

@@ -25,7 +25,7 @@ const UiProgress = class {
     }
     render() {
         const determinate = !this.isIndeterminate;
-        return (index.h(index.Host, { key: '66c467df7d762604b0da866268ea75bce4499472', role: "progressbar", "aria-valuenow": determinate ? String(this.value) : undefined, "aria-valuemin": determinate ? "0" : undefined, "aria-valuemax": determinate ? String(this.max) : undefined }, index.h("div", { key: 'fab67d49344ddd90fbca231212a495c7d2d7a0b1', class: "track" }, index.h("div", { key: 'dfbd8b412ad24a297e3dacfabd646b812066421e', class: { indicator: true, indeterminate: this.isIndeterminate }, style: determinate ? { width: `${this.percent}%` } : undefined }))));
+        return (index.h(index.Host, { key: '0d53e528a9a2176e683310c375ff63a3785b7bc6', role: "progressbar", "aria-valuenow": determinate ? String(this.value) : undefined, "aria-valuemin": determinate ? "0" : undefined, "aria-valuemax": determinate ? String(this.max) : undefined }, index.h("div", { key: '5e7511d189ebc53dfffa6f9aabf0c6d110d2ba0f', class: "track" }, index.h("div", { key: '7d68e2e258c8d31a46815a66416853ea31af1b79', class: { indicator: true, indeterminate: this.isIndeterminate }, style: determinate ? { width: `${this.percent}%` } : undefined }))));
     }
 };
 UiProgress.style = uiProgressCss();

package/dist/cjs/ui-radio-group.cjs.entry.js

@@ -38,7 +38,7 @@ const UiRadioGroup = class {
         };
     }
     render() {
-        return (index.h(index.Host, { key: '80b7e45cfc95e7e82015db2fa893b374ba73cf07' }, index.h("div", { key: '1133cd7ad3f9eb9ebaa0ac6c8a2ca3e2a52c46a9', class: "group", role: "radiogroup" }, this.options.map((option, index$1) => {
+        return (index.h(index.Host, { key: 'f7265dce62bf0d590da4b9d8f8756f11991680fb' }, index.h("div", { key: 'ba70adcb04fae5ba2f78089ac95f8dfed4014efd', class: "group", role: "radiogroup" }, this.options.map((option, index$1) => {
             const selected = option.value === this.value;
             return (index.h("button", { class: "radio", type: "button", role: "radio", "aria-checked": selected ? "true" : "false", tabindex: selected || (!this.value && index$1 === 0) ? "0" : "-1", disabled: this.disabled, onClick: () => this.select(option.value), onKeyDown: (event) => this.onKeyDown(event, index$1) }, index.h("span", { class: "indicator" }, index.h("span", { class: "dot" })), index.h("span", { class: "label" }, option.label)));
         }))));

package/dist/cjs/ui-rating.cjs.entry.js

@@ -0,0 +1,45 @@
+'use strict';
+
+var index = require('./index-Cb1tfi_9.js');
+
+const uiRatingCss = () => `:host{display:inline-flex}.rating{display:inline-flex;align-items:center;gap:0.125rem}.star{width:1.5rem;height:1.5rem;padding:0;border:none;background:none;cursor:pointer;color:var(--ui-border-strong);transition:color var(--ui-duration) var(--ui-ease),     transform var(--ui-duration) var(--ui-ease)}.star svg{display:block;fill:none;stroke:currentColor;stroke-width:1.5}.star.filled{color:var(--ui-warning)}.star.filled svg{fill:currentColor;stroke:currentColor}.star:not(.readonly):hover{transform:scale(1.15)}.star:focus-visible{outline:none;border-radius:var(--ui-radius);box-shadow:0 0 0 2px var(--ui-ring)}.star.readonly{pointer-events:none;cursor:default}`;
+
+const UiRating = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.uiChange = index.createEvent(this, "uiChange");
+        /** Valor selecionado. */
+        this.value = 0;
+        /** Quantidade de estrelas. */
+        this.max = 5;
+        /** Apenas leitura, sem interação. */
+        this.readonly = false;
+        /** Estrela atualmente sob o cursor (-1 quando sem hover). */
+        this.hoverValue = -1;
+        this.onLeave = () => {
+            this.hoverValue = -1;
+        };
+    }
+    select(index) {
+        if (this.readonly)
+            return;
+        this.value = index;
+        this.uiChange.emit(this.value);
+    }
+    onEnter(index) {
+        if (this.readonly)
+            return;
+        this.hoverValue = index;
+    }
+    render() {
+        const active = this.hoverValue > 0 ? this.hoverValue : this.value;
+        const stars = Array.from({ length: this.max }, (_, i) => i + 1);
+        return (index.h(index.Host, { key: 'b334c2aea5f4b15907ef5d386f344403b97f0324' }, index.h("div", { key: '635e2ec90f98eb3f90c4f365d32fc82b5763cf42', class: "rating", role: "radiogroup", "aria-label": "Avalia\u00E7\u00E3o", onMouseLeave: this.onLeave }, stars.map((index$1) => {
+            const filled = index$1 <= active;
+            return (index.h("button", { class: { star: true, filled, readonly: this.readonly }, type: "button", role: "radio", "aria-checked": index$1 === this.value ? "true" : "false", "aria-label": `${index$1} estrelas`, onClick: () => this.select(index$1), onMouseEnter: () => this.onEnter(index$1) }, index.h("svg", { viewBox: "0 0 24 24", width: "100%", height: "100%" }, index.h("path", { d: "M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" }))));
+        }))));
+    }
+};
+UiRating.style = uiRatingCss();
+
+exports.ui_rating = UiRating;

package/dist/cjs/ui-reveal.cjs.entry.js

@@ -32,7 +32,7 @@ const UiReveal = class {
         this.observer?.disconnect();
     }
     render() {
-        return (index.h(index.Host, { key: '0af93c131bf8564bf952ca61637041089b5c34b7' }, index.h("div", { key: '94a0fc0cf5445b9832994c19eb5600f6227ccc97', class: { reveal: true, visible: this.visible }, style: { transitionDelay: `${this.delay}ms` } }, index.h("slot", { key: '2a47e0af589790cbe5cfbc10ef49ffde1aced931' }))));
+        return (index.h(index.Host, { key: '5bb285428644e0c3e130178e5c34811ff5c52d5a' }, index.h("div", { key: '1884cbc6f94fdee392ed94ab8fbc4a449747138a', class: { reveal: true, visible: this.visible }, style: { transitionDelay: `${this.delay}ms` } }, index.h("slot", { key: '270ee6624c2ba58edc786d80fb3d777ff3cebb41' }))));
     }
     get host() { return index.getElement(this); }
 };