@andespindola/ui-core 0.1.0 → 0.2.0

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

@@ -0,0 +1,38 @@
+:host {
+  display: block;
+  width: 100%;
+}
+
+.container {
+  margin-inline: auto;
+  width: 100%;
+  font-family: var(--ui-font-sans);
+}
+
+/* Tamanhos */
+.size-sm {
+  max-width: 40rem;
+}
+.size-md {
+  max-width: 48rem;
+}
+.size-lg {
+  max-width: 64rem;
+}
+.size-xl {
+  max-width: 80rem;
+}
+.size-full {
+  max-width: none;
+}
+
+/* Padding lateral responsivo */
+.padded {
+  padding-inline: 1.25rem;
+}
+
+@media (min-width: 640px) {
+  .padded {
+    padding-inline: 2rem;
+  }
+}

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

@@ -0,0 +1,79 @@
+import { h, Host } from "@stencil/core";
+export class UiContainer {
+    constructor() {
+        /** Largura máxima do container. */
+        this.size = "lg";
+        /** Aplica padding lateral responsivo. */
+        this.padded = true;
+    }
+    render() {
+        const classes = {
+            container: true,
+            [`size-${this.size}`]: true,
+            padded: this.padded,
+        };
+        return (h(Host, { key: '4f00ee39f0ae347fafac349ee8e42c991c8013dd' }, h("div", { key: 'a0f8f0c6d418f119c6631d0387f9328af8fbb416', class: classes }, h("slot", { key: '86178f8371c958123fcf8b7e6bfe059aeed9f690' }))));
+    }
+    static get is() { return "ui-container"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ui-container.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ui-container.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "UiContainerSize",
+                    "resolved": "\"full\" | \"lg\" | \"md\" | \"sm\" | \"xl\"",
+                    "references": {
+                        "UiContainerSize": {
+                            "location": "local",
+                            "path": "/Users/andersonespindola/.ghq/github.com/andersonflima/ui/packages/core/src/components/ui-container/ui-container.tsx",
+                            "id": "src/components/ui-container/ui-container.tsx::UiContainerSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Largura m\u00E1xima do container."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "\"lg\""
+            },
+            "padded": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Aplica padding lateral responsivo."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "padded",
+                "defaultValue": "true"
+            }
+        };
+    }
+}

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

@@ -37,7 +37,7 @@ export class UiDialog {
         this.open = false;
     }
     render() {
-        return (h(Host, { key: 'c61dad5c30282e7a0ff063b713fff567be0b2183' }, h("dialog", { key: '55e3de816fcdaafce020a8edb30e469f6d579df7', class: "dialog", ref: (el) => (this.dialogEl = el), onClose: this.onClose, onCancel: this.onClose, onClick: this.onBackdropClick }, h("div", { key: '39b8436aca48ee79ff63a1cd81640697be8007cf', class: "content" }, h("slot", { key: 'e8d509cd882aa1e3a97f66486baf4afacdf36767' })))));
+        return (h(Host, { key: 'e6c34700dc04fd3754eedeab279a67cd3997fb3d' }, h("dialog", { key: 'fdb23f89bd4b9aef79abaec586bf39add47ce013', class: "dialog", ref: (el) => (this.dialogEl = el), onClose: this.onClose, onCancel: this.onClose, onClick: this.onBackdropClick }, h("div", { key: '8a86f47c263d4fac68debdcef9cc8ed7e0be7ca8', class: "content" }, h("slot", { key: 'fe9d9105c13670104b5a60c939f9256b44694e8e' })))));
     }
     static get is() { return "ui-dialog"; }
     static get encapsulation() { return "shadow"; }

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

@@ -39,7 +39,7 @@ export class UiDrawer {
         this.open = false;
     }
     render() {
-        return (h(Host, { key: '96c4f4cec0fdc9a8601448bfc9a16dda37b33507' }, h("dialog", { key: '72ef71e674d116c9d2f47bf4d997fc9d5ca1472d', class: `drawer side-${this.side}`, ref: (el) => (this.dialogEl = el), onClose: this.onClose, onCancel: this.onClose, onClick: this.onBackdropClick }, h("div", { key: '25e537c059dcc33085bd0c0c47aa39448a16176b', class: "content" }, h("slot", { key: '3c0b746055fb6f1ac6a8c0c4713aa9cd47fd1a00' })))));
+        return (h(Host, { key: '5d44e7d604eab21d2d30d5cbaaa225658c8e7e71' }, h("dialog", { key: 'ecdfc2057a8864f6b8dc961ddcd51c3f349b2b54', class: `drawer side-${this.side}`, ref: (el) => (this.dialogEl = el), onClose: this.onClose, onCancel: this.onClose, onClick: this.onBackdropClick }, h("div", { key: 'c14965ebb97a2c77d06c4a50466d00bf4036bafa', class: "content" }, h("slot", { key: '2bdbb4cbd2cd30ade870090c5383d398cfb6772b' })))));
     }
     static get is() { return "ui-drawer"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ui-dropdown-item/ui-dropdown-item.js

@@ -11,7 +11,7 @@ export class UiDropdownItem {
         };
     }
     render() {
-        return (h(Host, { key: '9e88bb2a1ccec0a6c5f088cdd40a7881cba6e3ac' }, h("button", { key: '371c531f920cbd1a5374b8c6812d9b67c97e44f4', type: "button", class: "item", role: "menuitem", disabled: this.disabled, onClick: this.onClick }, h("slot", { key: 'fe16aad1402e098180719edd9110c83ee550224c' }))));
+        return (h(Host, { key: 'a73d394ff94b232151c37e749d398f4485f46bde' }, h("button", { key: '3827857b88fc5d63681e80dc2cc470b58faf69e1', type: "button", class: "item", role: "menuitem", disabled: this.disabled, onClick: this.onClick }, h("slot", { key: 'a6dbd79c7b171ef6a8a53aa5da39fbca37725e1c' }))));
     }
     static get is() { return "ui-dropdown-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ui-dropdown-menu/ui-dropdown-menu.js

@@ -76,7 +76,7 @@ export class UiDropdownMenu {
         this.cleanup = undefined;
     }
     render() {
-        return (h(Host, { key: '83694eb278f8a9c711ae30677254a4168dbd825f' }, h("span", { key: 'dabab12417ed473e22097578c07842f36a05e397', class: "trigger", ref: (el) => (this.triggerEl = el), onClick: this.onTriggerClick }, h("slot", { key: '6e3b0f1c2c83a48c0c70a2416c6e0ac34b05c68e', name: "trigger" })), h("div", { key: '2b6059c9bfa98c6f5bc9656d86ffeaf1009a887b', class: { menu: true, "is-open": this.open }, role: "menu", ref: (el) => (this.floatingEl = el) }, h("slot", { key: 'af01e24903f705ef30174ba37735d774b8e5aa99' }))));
+        return (h(Host, { key: '6d1ac3cd9096527745a84f24443a3b230bf2aaf0' }, h("span", { key: '5594e37030b1fd69260b4de30393aacfbc636ca3', class: "trigger", ref: (el) => (this.triggerEl = el), onClick: this.onTriggerClick }, h("slot", { key: '763b6bf28fe4c79a13a2cc5a620d19e51ae5f6e2', name: "trigger" })), h("div", { key: '0bec01181593abbcb1a8634eb027ce0cef0d860d', class: { menu: true, "is-open": this.open }, role: "menu", ref: (el) => (this.floatingEl = el) }, h("slot", { key: '1b1fa528fc1186c81dd433d0cb9b775df8357641' }))));
     }
     static get is() { return "ui-dropdown-menu"; }
     static get encapsulation() { return "shadow"; }

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

@@ -5,7 +5,7 @@ export class UiField {
         this.required = false;
     }
     render() {
-        return (h(Host, { key: '1f944085a10d6c795ce06a7a91021fee46780347' }, h("div", { key: 'a2f2fde238292d543c65bf6e1ed0dfd0dce424f9', class: "field" }, this.label && (h("label", { key: '4f450b5e43f1ea8dda3b3134022a010391a2f404', class: "label", htmlFor: this.fieldId }, this.label, this.required && (h("span", { key: '1853d16b19752584b646a294dcbe2b8359ec12b4', class: "required", "aria-hidden": "true" }, " *")))), h("slot", { key: '75adc24c2264e3e954618737769232535caa13e4' }), this.error ? (h("p", { class: "error", role: "alert" }, this.error)) : (this.description && h("p", { class: "description" }, this.description)))));
+        return (h(Host, { key: '1910a6ce3a389ab7faa9e3b46e0397e6a9bfbaab' }, h("div", { key: 'fb76fb030b9af9129578f7b2f0b85eaffefc8d67', class: "field" }, this.label && (h("label", { key: '659a7c0982360c133891a1a22a98cdae32a529ed', class: "label", htmlFor: this.fieldId }, this.label, this.required && (h("span", { key: 'de93f19b8a2dd063df1175c00c68c0b7c9b092d6', class: "required", "aria-hidden": "true" }, " *")))), h("slot", { key: 'a510f107aab90a202c178f1d22727689db828fdc' }), this.error ? (h("p", { class: "error", role: "alert" }, this.error)) : (this.description && h("p", { class: "description" }, this.description)))));
     }
     static get is() { return "ui-field"; }
     static get encapsulation() { return "shadow"; }

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

@@ -0,0 +1,8 @@
+:host {
+  display: block;
+}
+
+.grid {
+  display: grid;
+  font-family: var(--ui-font-sans);
+}

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

@@ -0,0 +1,106 @@
+import { h, Host } from "@stencil/core";
+const GAP = {
+    xs: "0.25rem",
+    sm: "0.5rem",
+    md: "1rem",
+    lg: "1.5rem",
+    xl: "2rem",
+};
+export class UiGrid {
+    constructor() {
+        /** 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 (h(Host, { key: '465a816e064af42d8282185ee92e32477a6112fd' }, h("div", { key: 'da2e151c56959ced55477e3fe6c99aa5563b38aa', class: "grid", style: style }, h("slot", { key: '5bb285ce0feaf16d066b627010fc3fb595a85c15' }))));
+    }
+    static get is() { return "ui-grid"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ui-grid.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ui-grid.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "columns": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "N\u00FAmero de colunas da grade."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "columns",
+                "defaultValue": "12"
+            },
+            "gap": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "UiGridGap",
+                    "resolved": "\"lg\" | \"md\" | \"sm\" | \"xl\" | \"xs\"",
+                    "references": {
+                        "UiGridGap": {
+                            "location": "local",
+                            "path": "/Users/andersonespindola/.ghq/github.com/andersonflima/ui/packages/core/src/components/ui-grid/ui-grid.tsx",
+                            "id": "src/components/ui-grid/ui-grid.tsx::UiGridGap"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Espa\u00E7amento entre c\u00E9lulas."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "gap",
+                "defaultValue": "\"md\""
+            },
+            "minItemWidth": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Largura m\u00EDnima por item para layout responsivo (auto-fit)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "min-item-width"
+            }
+        };
+    }
+}

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

@@ -2,39 +2,90 @@
   display: block;
 }
 
-.input {
+.field {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
   width: 100%;
   height: 2.75rem;
-  padding: 0 1rem;
+  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;
-  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);
+.field:hover:not(.disabled) {
+  border-color: var(--ui-border-strong);
 }
 
-.input:focus-visible {
+.field:focus-within {
   border-color: var(--ui-accent);
   box-shadow: 0 0 0 2px var(--ui-ring);
 }
 
-.input:disabled {
+.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.invalid {
-  border-color: var(--ui-danger);
+.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.invalid:focus-visible {
-  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ui-danger) 40%, transparent);
+
+.input::placeholder {
+  color: var(--ui-text-faint);
+}
+
+/* Slots de prefixo/sufixo (ícones). Vazios não ocupam espaço. */
+.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);
 }

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

@@ -9,6 +9,8 @@ export class UiInput {
         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;
@@ -17,9 +19,15 @@ export class UiInput {
         this.onChange = (event) => {
             this.uiChange.emit(event.target.value);
         };
+        this.clear = () => {
+            this.value = "";
+            this.uiInput.emit("");
+            this.uiChange.emit("");
+        };
     }
     render() {
-        return (h(Host, { key: 'e2ca2973fb898cde6988d2422f8b346662caf375' }, h("input", { key: '6e2b0358dc583f448a71f95f319d0fd675536c60', 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 (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" })))));
     }
     static get is() { return "ui-input"; }
     static get encapsulation() { return "shadow"; }
@@ -152,6 +160,26 @@ export class UiInput {
                 "setter": false,
                 "reflect": false,
                 "attribute": "name"
+            },
+            "clearable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Exibe um bot\u00E3o para limpar o valor quando preenchido."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "clearable",
+                "defaultValue": "false"
             }
         };
     }

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: 'bb726d8b26a82776e688532b6fbe69c178308c75' }, h("label", { key: 'bfd33ad1561fcee62395be37e83894cdce0ec259', class: "label" }, h("slot", { key: 'c0ac5938df3aea7219a59caf46cb7cd152046770' }))));
+        return (h(Host, { key: '15695a208223a3270e49d72972a49c26fe3acd4d' }, h("label", { key: 'a6d0290c845797368e59fa936b80c8fee55dbcb1', class: "label" }, h("slot", { key: 'daae42c194f0c31d69a82bfad95a97b85cf2cdf2' }))));
     }
     static get is() { return "ui-label"; }
     static get encapsulation() { return "shadow"; }

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

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

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

@@ -0,0 +1,147 @@
+import { h, Host } from "@stencil/core";
+export class UiPagination {
+    constructor() {
+        /** 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 (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) => {
+            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"))));
+    }
+    static get is() { return "ui-pagination"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ui-pagination.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ui-pagination.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "total": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Total de p\u00E1ginas."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "total",
+                "defaultValue": "1"
+            },
+            "current": {
+                "type": "number",
+                "mutable": true,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "P\u00E1gina atual."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "current",
+                "defaultValue": "1"
+            },
+            "siblings": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Quantidade de p\u00E1ginas ao redor da atual."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "siblings",
+                "defaultValue": "1"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "uiChange",
+                "name": "uiChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitido quando a p\u00E1gina muda."
+                },
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                }
+            }];
+    }
+}