@andespindola/ui-core 0.2.0 → 0.3.0

package/dist/collection/components/ui-file-upload/ui-file-upload.js

@@ -0,0 +1,151 @@
+import { h, Host, } from "@stencil/core";
+export class UiFileUpload {
+    constructor() {
+        /** 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 (h(Host, { key: '675f04b6b96fcdcd10f1344c20225501671e456b' }, h("button", { key: 'bcc1bb63fa043f0778f38370d919eabfb37930f5', type: "button", class: { dropzone: true, dragging: this.dragging }, onClick: this.openPicker, onDragOver: this.onDragOver, onDragLeave: this.onDragLeave, onDrop: this.onDrop }, 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" }, h("path", { key: '093a31bf1257a470ad7447c20ff02f4ca3ce1957', d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }), h("polyline", { key: 'c1eaf0285b47c402fefba5d16d3e1418df06405e', points: "17 8 12 3 7 8" }), h("line", { key: '4655c3de2b0df216d7f520eb81dc8e8a839fde25', x1: "12", y1: "3", x2: "12", y2: "15" })), h("span", { key: 'afa948d851f9df7944a2c669f9e0432fb1bb017b', class: "label" }, this.label), this.accept ? (h("span", { class: "hint" }, this.accept)) : null), 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 ? (h("ul", { class: "files" }, this.files.map((file) => (h("li", { class: "file" }, h("span", { class: "file-name" }, file.name), h("span", { class: "file-size" }, this.formatSize(file.size))))))) : null));
+    }
+    static get is() { return "ui-file-upload"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ui-file-upload.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ui-file-upload.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "accept": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Tipos de arquivo aceitos (atributo accept do input)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "accept"
+            },
+            "multiple": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Permite m\u00FAltiplos arquivos."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "multiple",
+                "defaultValue": "false"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Texto principal da zona de upload."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label",
+                "defaultValue": "\"Arraste arquivos ou clique para enviar\""
+            }
+        };
+    }
+    static get states() {
+        return {
+            "files": {},
+            "dragging": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "uiChange",
+                "name": "uiChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitido quando arquivos s\u00E3o selecionados."
+                },
+                "complexType": {
+                    "original": "File[]",
+                    "resolved": "File[]",
+                    "references": {
+                        "File": {
+                            "location": "global",
+                            "id": "global::File"
+                        }
+                    }
+                }
+            }];
+    }
+}

package/dist/collection/components/ui-grid/ui-grid.js

@@ -20,7 +20,7 @@ export class UiGrid {
                 : `repeat(${this.columns}, minmax(0, 1fr))`,
             gap: GAP[this.gap],
         };
-        return (h(Host, { key: '465a816e064af42d8282185ee92e32477a6112fd' }, h("div", { key: 'da2e151c56959ced55477e3fe6c99aa5563b38aa', class: "grid", style: style }, h("slot", { key: '5bb285ce0feaf16d066b627010fc3fb595a85c15' }))));
+        return (h(Host, { key: 'fa78c94117bc998616e3f30ef936527d5be66e13' }, h("div", { key: '8594c436b71b7f49434b3366ec70ea24c6b437dc', class: "grid", style: style }, h("slot", { key: '79bb94baa8dd68e82b88734d57f6e31b033a7f5f' }))));
     }
     static get is() { return "ui-grid"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ui-input/ui-input.js

@@ -27,7 +27,7 @@ export class UiInput {
     }
     render() {
         const showClear = this.clearable && !!this.value && !this.disabled;
-        return (h(Host, { key: 'a87a7c9a1aba5631099f2f9c3a3083a9e7374854' }, h("div", { key: '04d3493ab32a4636f3f2540aaba0b30e4c018225', class: { field: true, invalid: this.invalid, disabled: this.disabled } }, h("span", { key: '66fa079a8b6ccc62dca78f4266d92800dd8727b0', class: "affix" }, h("slot", { key: 'c9db74515db3226bc730beb42a2a8f2d8eb6ee9f', name: "prefix" })), h("input", { key: 'a8f4db568e49ee22b5eeae078c4e4b3fdbc48983', 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 && (h("button", { key: 'e38a2279db1b1c677274a6e22019bf3183ae1920', class: "clear", type: "button", "aria-label": "Limpar", onClick: this.clear }, h("svg", { key: '0982ea65d3b1598620953fcd600b1eb1945348ee', viewBox: "0 0 24 24", width: "14", height: "14", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round" }, h("path", { key: '26f833d4ccf8feab9f2ec4f4527b8c8e9c00d09b', d: "M18 6 6 18M6 6l12 12" })))), h("span", { key: '22c7d4d4a030157a4a9eb73ef0a260f4db56c848', class: "affix" }, h("slot", { key: 'fa74011b1237908aa9eea78f88294afcdf09f0f5', name: "suffix" })))));
+        return (h(Host, { key: 'cfe13feedab47ba88763ae727eb77ca15a0c52a3' }, h("div", { key: '7c79750f2ad87a55462a2416e9d46b4558f9b279', class: { field: true, invalid: this.invalid, disabled: this.disabled } }, h("span", { key: 'dafa1e0120f0de7a041ecfdb98db4203c1d67a28', class: "affix" }, h("slot", { key: '80aef681671784cd65f473975e441027d038c340', name: "prefix" })), 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 && (h("button", { key: '4b26604a6c1ff8004afa6ef0964490ba82553d61', class: "clear", type: "button", "aria-label": "Limpar", onClick: this.clear }, h("svg", { key: '87195594cef1db73b86f1117233fdef13ee9fa1a', viewBox: "0 0 24 24", width: "14", height: "14", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round" }, h("path", { key: '66be8eddf982847bf22f59f9113b66b4e47ca005', d: "M18 6 6 18M6 6l12 12" })))), h("span", { key: '749bf6ba578fd22b2d6c34b0fb7522f5a87a33e3', class: "affix" }, h("slot", { key: 'b226025774cedd33f915c6155061044b272d77a1', name: "suffix" })))));
     }
     static get is() { return "ui-input"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ui-label/ui-label.js

@@ -1,7 +1,7 @@
 import { h, Host } from "@stencil/core";
 export class UiLabel {
     render() {
-        return (h(Host, { key: '15695a208223a3270e49d72972a49c26fe3acd4d' }, h("label", { key: 'a6d0290c845797368e59fa936b80c8fee55dbcb1', class: "label" }, h("slot", { key: 'daae42c194f0c31d69a82bfad95a97b85cf2cdf2' }))));
+        return (h(Host, { key: '45a53d43b29ba78ac9852334536e9d7cb93e9c3c' }, h("label", { key: 'f8209140ec401f7a055d398181a421f281307a9b', class: "label" }, h("slot", { key: '50ba3bbce082e8f0c402c7acb3cd25ce822e3728' }))));
     }
     static get is() { return "ui-label"; }
     static get encapsulation() { return "shadow"; }

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

@@ -0,0 +1,36 @@
+: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;
+}

package/dist/collection/components/ui-navbar/ui-navbar.js

@@ -0,0 +1,18 @@
+import { h, Host } from "@stencil/core";
+export class UiNavbar {
+    render() {
+        return (h(Host, { key: 'db6c3b0a7eee0812d931d4fb4c8b5ce444749b5e' }, h("nav", { key: '990bc62b051ca9f24ee5be4bf4e383873e5d8269', class: "navbar" }, h("div", { key: '999b46029fb0e0b6f5a04942d9326b30f7b0e392', class: "brand" }, h("slot", { key: '189a4521a16efdec4eee5c433b17a71028f05c90', name: "brand" })), h("div", { key: 'b3e129ad603ed6d32ec676aab96cf39e51834dec', class: "center" }, h("slot", { key: 'dc1fff1b9c536df2d88b5e92a83634d1e3bca384' })), h("div", { key: '854fac1322e96c7c67bf204af17ea665494c0fc5', class: "actions" }, h("slot", { key: '0f07b817547c866df0137f8667790b3caa65bea8', name: "actions" })))));
+    }
+    static get is() { return "ui-navbar"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ui-navbar.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ui-navbar.css"]
+        };
+    }
+}

package/dist/collection/components/ui-pagination/ui-pagination.js

@@ -42,13 +42,13 @@ export class UiPagination {
         const total = Math.max(this.total, 1);
         const current = this.clamp(this.current);
         const entries = this.buildRange();
-        return (h(Host, { key: '405a1c41db3850f25ffc14a053b12c0767809b1e' }, h("nav", { key: 'bd9baa3307cb5576ca81ab82653b44ccd4cb0385', class: "pagination", role: "navigation", "aria-label": "Pagina\u00E7\u00E3o" }, h("button", { key: '8efdfeb278037fabab6b82ba4083a7d23a00d612', class: "page nav", type: "button", "aria-label": "P\u00E1gina anterior", disabled: current <= 1, onClick: () => this.go(current - 1) }, "\u2039"), entries.map((entry, index) => {
+        return (h(Host, { key: '23be36b9c734a9c43e9644337a58e4ede719215d' }, h("nav", { key: '618c7c85d1ea8f93bdd058d7ba4e61a62991e2d6', class: "pagination", role: "navigation", "aria-label": "Pagina\u00E7\u00E3o" }, 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) => {
             if (entry === "...") {
                 return (h("span", { key: `ellipsis-${index}`, class: "ellipsis", "aria-hidden": "true" }, "\u2026"));
             }
             const active = entry === current;
             return (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));
-        }), h("button", { key: '5ba13b9a59857423e65a4d10630eb66cc32c30fe', class: "page nav", type: "button", "aria-label": "Pr\u00F3xima p\u00E1gina", disabled: current >= total, onClick: () => this.go(current + 1) }, "\u203A"))));
+        }), h("button", { key: '38fb86bda60934768f24c117e8586acb35f88513', class: "page nav", type: "button", "aria-label": "Pr\u00F3xima p\u00E1gina", disabled: current >= total, onClick: () => this.go(current + 1) }, "\u203A"))));
     }
     static get is() { return "ui-pagination"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ui-popover/ui-popover.js

@@ -73,7 +73,7 @@ export class UiPopover {
         this.cleanup = undefined;
     }
     render() {
-        return (h(Host, { key: '61b4088ff4d61701a3466619274e60ac64fcc420' }, h("span", { key: 'd2d00f4dbf391ea1bc119870e399187d98634de6', class: "trigger", ref: (el) => (this.triggerEl = el), onClick: this.onTriggerClick }, h("slot", { key: 'ece70edbdda096821de68295e55a3fba3caeada4', name: "trigger" })), h("div", { key: 'f30e5a570e49eb9c7056fd820bc57408dd78e013', class: { panel: true, "is-open": this.open }, ref: (el) => (this.floatingEl = el) }, h("slot", { key: '5823d3c7ed47946d812a2c34002fc5fd0cfc8a29' }))));
+        return (h(Host, { key: '005686226a579c5a9968f9b99bc177bfc523f4bc' }, h("span", { key: '3c43cbdfd37c6ec5243c94069fb3e417fb4fde8b', class: "trigger", ref: (el) => (this.triggerEl = el), onClick: this.onTriggerClick }, h("slot", { key: 'bcc68719623c4035cb4b811d52d916c86b814657', name: "trigger" })), h("div", { key: '04865b639bcb5ba267d1ed3e0399f8b677c1befa', class: { panel: true, "is-open": this.open }, ref: (el) => (this.floatingEl = el) }, h("slot", { key: '2a518fa968650f9e844996b21d421f5e96834fbd' }))));
     }
     static get is() { return "ui-popover"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ui-progress/ui-progress.js

@@ -19,7 +19,7 @@ export class UiProgress {
     }
     render() {
         const determinate = !this.isIndeterminate;
-        return (h(Host, { key: '8f40e0e4a439959e1474d2952f0f891438fb3ecf', role: "progressbar", "aria-valuenow": determinate ? String(this.value) : undefined, "aria-valuemin": determinate ? "0" : undefined, "aria-valuemax": determinate ? String(this.max) : undefined }, h("div", { key: '9bfd7557efbfad05a8b170764b96935f00cbdaeb', class: "track" }, h("div", { key: '02205ac65e75f27f52869991b168c6397c8b2760', class: { indicator: true, indeterminate: this.isIndeterminate }, style: determinate ? { width: `${this.percent}%` } : undefined }))));
+        return (h(Host, { key: '0d53e528a9a2176e683310c375ff63a3785b7bc6', role: "progressbar", "aria-valuenow": determinate ? String(this.value) : undefined, "aria-valuemin": determinate ? "0" : undefined, "aria-valuemax": determinate ? String(this.max) : undefined }, h("div", { key: '5e7511d189ebc53dfffa6f9aabf0c6d110d2ba0f', class: "track" }, h("div", { key: '7d68e2e258c8d31a46815a66416853ea31af1b79', class: { indicator: true, indeterminate: this.isIndeterminate }, style: determinate ? { width: `${this.percent}%` } : undefined }))));
     }
     static get is() { return "ui-progress"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ui-progress-circular/ui-progress-circular.css

@@ -0,0 +1,46 @@
+: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);
+  }
+}

package/dist/collection/components/ui-progress-circular/ui-progress-circular.js

@@ -0,0 +1,171 @@
+import { h, Host } from "@stencil/core";
+export class UiProgressCircular {
+    constructor() {
+        /** 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 (h(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 } }, h("svg", { key: 'fe9226a711cbdd751baf6fd06e8acef3af63349e', class: { ring: true, indeterminate: this.isIndeterminate }, width: this.size, height: this.size, viewBox: "0 0 100 100" }, h("circle", { key: 'c7dc8282a2295ac97009f575bb7f116d54b0f917', class: "track", cx: "50", cy: "50", r: String(radius), "stroke-width": String(this.strokeWidth) }), 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 ? (h("div", { class: "value" }, Math.round(this.percent * 100), "%")) : null));
+    }
+    static get is() { return "ui-progress-circular"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ui-progress-circular.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ui-progress-circular.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number | null",
+                    "resolved": "null | number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Valor atual do progresso. `null` torna o componente indeterminado."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "null"
+            },
+            "max": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Valor m\u00E1ximo."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max",
+                "defaultValue": "100"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Tamanho do anel (qualquer unidade CSS)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "\"3rem\""
+            },
+            "strokeWidth": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Espessura do tra\u00E7o."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "stroke-width",
+                "defaultValue": "4"
+            },
+            "indeterminate": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "For\u00E7a o estado indeterminado."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "indeterminate",
+                "defaultValue": "false"
+            },
+            "showValue": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Exibe o percentual no centro quando determinado."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-value",
+                "defaultValue": "false"
+            }
+        };
+    }
+}

package/dist/collection/components/ui-radio-group/ui-radio-group.js

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

package/dist/collection/components/ui-rating/ui-rating.css

@@ -0,0 +1,52 @@
+: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;
+}