@andespindola/ui-core 0.2.0 → 0.4.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: 'a8ca0fb9e4fbbfdba11a8f290124af65a0480093' }, h("button", { key: 'fd077d08e014e28b1f2411bb09a7d8a49afd7ceb', type: "button", class: { dropzone: true, dragging: this.dragging }, onClick: this.openPicker, onDragOver: this.onDragOver, onDragLeave: this.onDragLeave, onDrop: this.onDrop }, h("svg", { key: '2d68e2377435eeb88645a887091c0b6c2d707c5c', 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: '677380bbdb141a320a97d1163c5410312b003ed4', d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }), h("polyline", { key: '42deea2aa62b6908fdd0e45ec64e9cabcf225da6', points: "17 8 12 3 7 8" }), h("line", { key: '12a28663905914b21b4c355bc96064d8e9ae4045', x1: "12", y1: "3", x2: "12", y2: "15" })), h("span", { key: '77bedaa863521eb1960fedd51b82e453606fe3e5', class: "label" }, this.label), this.accept ? (h("span", { class: "hint" }, this.accept)) : null), h("input", { key: '9facb4fee3805f4c0a9286e5bed67eae1b8e799b', 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: 'ecafabf2b7902db681cd4ce15e8d4f8d8480f0d6' }, h("div", { key: '52aac0fe0cea374a7a083c5fb385882c1fd7b2e7', class: "grid", style: style }, h("slot", { key: '8b686a8e53fb33a94def9b6675df0df94dad14a6' }))));
     }
     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: 'e9eb32b17bc234a3e97c570f6a2e0eaabf3763f9' }, h("div", { key: '8545c0a5c3a4ac48e11ebe7d9f0bc46738cf967f', class: { field: true, invalid: this.invalid, disabled: this.disabled } }, h("span", { key: '5f2273b9913a6e3c4f2328aedd1c68f5481ffc33', class: "affix" }, h("slot", { key: 'a6430217baeb4bf8f794c3b3da9d8a5d1f1934ea', name: "prefix" })), h("input", { key: '878396509802ac7fd2e6527fd9ff134280271981', 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: '07328458e2c91c87affea1ae462e97c45c2861b7', class: "clear", type: "button", "aria-label": "Limpar", onClick: this.clear }, h("svg", { key: '604ecae919eb8c115e4fc46d8a3b9ecc2f1f8937', viewBox: "0 0 24 24", width: "14", height: "14", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round" }, h("path", { key: '824a4aeff8afcd9a87bb386232d7c541fb9aad5a', d: "M18 6 6 18M6 6l12 12" })))), h("span", { key: 'c0c577e12a4f01520286da06512130de943781dc', class: "affix" }, h("slot", { key: '5b2f1281359134f2714ede53446cf853b7a2eb61', 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: '213a75753c53932901162e5ddae563d8fae95e7e' }, h("label", { key: '12718a028e0e7986e107ebe3c189339e1cbde003', class: "label" }, h("slot", { key: 'd83412a17a6cf21d5b99fc16e365d67911f4f515' }))));
     }
     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: '940a8e9cc97673bb8142fe9be09a5744d6d61a06' }, h("nav", { key: 'd802871dd15c8ebbf21cbe40bb07a820b60c784a', class: "navbar" }, h("div", { key: 'ee85458ac62b6de535df4c7a3d258debbb35372e', class: "brand" }, h("slot", { key: 'f7748f6b9c8d2d8a72e4bae46e6d75689e19ffe2', name: "brand" })), h("div", { key: '60396a2ca70f078373108615989e0c4761d9d30b', class: "center" }, h("slot", { key: 'f260618d58d6e09fa5847489b1bc679813b29f2f' })), h("div", { key: '2ba5af2e7f45be35f1427249e68356c5445a513f', class: "actions" }, h("slot", { key: '5cf983d9fb58a516bd0f70e9ec0cc6b48b6607ef', 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: '58d36fd4a14897c7a01573b6d626e4b6282fbeda' }, h("nav", { key: '80f0b2a4dceba2aea9d6e957a694aaa82eb86823', class: "pagination", role: "navigation", "aria-label": "Pagina\u00E7\u00E3o" }, h("button", { key: '9d102598d2216b0ddee599ba622287a62cd67598', 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: '8aa783a48a5ee13b6af2ad2e7b9e05d99f67df79', 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: '965392d6028b26b71bd908d277a5817fee2216c9' }, h("span", { key: '09a9ce8d7aa698fe4d29f0950846cae6584563d9', class: "trigger", ref: (el) => (this.triggerEl = el), onClick: this.onTriggerClick }, h("slot", { key: '5c0caa0a3a783cd4046e5b52ff4796053a645298', name: "trigger" })), h("div", { key: '096cf2835c48662d2e159afb6c05208adcd4547c', class: { panel: true, "is-open": this.open }, ref: (el) => (this.floatingEl = el) }, h("slot", { key: '661584c0d9519b94a4d16cd3477b84026b6add21' }))));
     }
     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: 'a7b5aeeca1588edd18fa15429fefdb85590bd078', role: "progressbar", "aria-valuenow": determinate ? String(this.value) : undefined, "aria-valuemin": determinate ? "0" : undefined, "aria-valuemax": determinate ? String(this.max) : undefined }, h("div", { key: '2996d36f222bafc4501b1dbd7c8cf73e235f056a', class: "track" }, h("div", { key: '95ba4a179b5bfae636bdfe7860f7da4966f0a127', 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: '897f7b89a108759cc23a9445c4cc9b86891b2ece', 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: 'ab55aaf976f0d1ffbfc2332c916b740c25ead28f', class: { ring: true, indeterminate: this.isIndeterminate }, width: this.size, height: this.size, viewBox: "0 0 100 100" }, h("circle", { key: 'c1e43611349b214522f5d4a734f105be9b0735d7', class: "track", cx: "50", cy: "50", r: String(radius), "stroke-width": String(this.strokeWidth) }), h("circle", { key: '6589b238758c3b620a9dad7673ea756a267945f0', 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: 'a9f1842629179cbbf695a9392609b1391437c374' }, h("div", { key: '43637af51dcca8b3b77181de48bdca69257c8606', 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;
+}