@andespindola/ui-core 0.2.0 → 0.4.0

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

@@ -0,0 +1,134 @@
+import { h, Host, } from "@stencil/core";
+export class UiRating {
+    constructor() {
+        /** 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 (h(Host, { key: '8425460115d823dbf165a46145e67721fe26160d' }, h("div", { key: 'efdc85de267af2789a96e3072b819a31886ddcd8', class: "rating", role: "radiogroup", "aria-label": "Avalia\u00E7\u00E3o", onMouseLeave: this.onLeave }, stars.map((index) => {
+            const filled = index <= active;
+            return (h("button", { class: { star: true, filled, readonly: this.readonly }, type: "button", role: "radio", "aria-checked": index === this.value ? "true" : "false", "aria-label": `${index} estrelas`, onClick: () => this.select(index), onMouseEnter: () => this.onEnter(index) }, h("svg", { viewBox: "0 0 24 24", width: "100%", height: "100%" }, 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" }))));
+        }))));
+    }
+    static get is() { return "ui-rating"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ui-rating.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ui-rating.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "number",
+                "mutable": true,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Valor selecionado."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "0"
+            },
+            "max": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Quantidade de estrelas."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max",
+                "defaultValue": "5"
+            },
+            "readonly": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Apenas leitura, sem intera\u00E7\u00E3o."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "readonly",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "hoverValue": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "uiChange",
+                "name": "uiChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitido quando o valor muda."
+                },
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                }
+            }];
+    }
+}

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

@@ -26,7 +26,7 @@ export class UiReveal {
         this.observer?.disconnect();
     }
     render() {
-        return (h(Host, { key: '4ab570c0eaa9fb6b4d6a9d01887fde6edd72ba8d' }, h("div", { key: 'cf0287499bfa5107fb49cadc85c85f2f70063967', class: { reveal: true, visible: this.visible }, style: { transitionDelay: `${this.delay}ms` } }, h("slot", { key: 'b46502732e597f13d60ec55be0d456dba8181386' }))));
+        return (h(Host, { key: 'e4d72fb7d28b5107aeee2dfbce303d726569caa3' }, h("div", { key: '4da09ffd02e072562da35831063377b7083def33', class: { reveal: true, visible: this.visible }, style: { transitionDelay: `${this.delay}ms` } }, h("slot", { key: '9501798c821935d87e6fdf2e595443e251e89192' }))));
     }
     static get is() { return "ui-reveal"; }
     static get encapsulation() { return "shadow"; }

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

@@ -23,7 +23,7 @@ export class UiScrollProgress {
         window.removeEventListener("scroll", this.onScroll);
     }
     render() {
-        return (h(Host, { key: 'cb2d746b6e0ca3642a0460cff5685f2eb83a6301' }, h("div", { key: '7fdb8b414f833110c389aef8620c313fb8c001c7', class: "bar", role: "progressbar", "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": Math.round(this.progress * 100), style: { transform: `scaleX(${this.progress})` } })));
+        return (h(Host, { key: '28ba2f0c5eb50a1fa2a2ef68ad8fb7017447cc5e' }, h("div", { key: '546cd39172466bc069eee65930fbf96706105b5c', class: "bar", role: "progressbar", "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": Math.round(this.progress * 100), style: { transform: `scaleX(${this.progress})` } })));
     }
     static get is() { return "ui-scroll-progress"; }
     static get encapsulation() { return "shadow"; }

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

@@ -9,7 +9,7 @@ export class UiSection {
         this.description = "";
     }
     render() {
-        return (h(Host, { key: '71344e4d5a4c6bccade1bf5151aeba1dffa14d7f' }, h("section", { key: '404cb27c6db128f60608b4eff44fa6e05520016b' }, this.eyebrow && h("p", { key: '204ced95531d3bf77c2a32f940c3ec4bc0e76f53', class: "eyebrow" }, this.eyebrow), this.heading && h("h2", { key: '46818123dd264ef60db8ff9c7a2ad93979d71434', class: "heading" }, this.heading), this.description && h("p", { key: 'eaba39853cd12a874c9079e2181aca9e0fc130b7', class: "description" }, this.description), h("slot", { key: '24d02b1d9176e42d7906ef43881807d7cfda2e52' }))));
+        return (h(Host, { key: 'f9ca72986e90e560d62a8aae824e46ca054bfc60' }, h("section", { key: '2920c329302e4f263ea5f69d94e99f470d13b796' }, this.eyebrow && h("p", { key: '42a40e4eee0f4428669c07ef41f409fbb3050b90', class: "eyebrow" }, this.eyebrow), this.heading && h("h2", { key: 'e48b4a964d0afe76a4057e44393136fb85aece0b', class: "heading" }, this.heading), this.description && h("p", { key: '90aa856c92f63324f5cc31fb4e67378eef4150c2', class: "description" }, this.description), h("slot", { key: '7629ee2f0e291b5b9614819e82aea2bdc1cc1d8c' }))));
     }
     static get is() { return "ui-section"; }
     static get encapsulation() { return "shadow"; }

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

@@ -13,7 +13,7 @@ export class UiSegmented {
         };
     }
     render() {
-        return (h(Host, { key: '92649a392383aebb62bab90e3f20a008783f2ed2' }, h("div", { key: '22983cd496ee1f9ed1dbf49d989c409cdca3c8b4', class: "track", role: "radiogroup" }, this.items.map((item) => {
+        return (h(Host, { key: 'c33baee8f155b53bd94170e442b4e2bcc815e19a' }, h("div", { key: 'daf332aeaff637736164a429c5166a1277c301df', class: "track", role: "radiogroup" }, this.items.map((item) => {
             const active = item.value === this.value;
             return (h("button", { key: item.value, class: { segment: true, active }, type: "button", role: "radio", "aria-checked": active ? "true" : "false", onClick: () => this.select(item.value) }, item.label));
         }))));

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

@@ -13,7 +13,7 @@ export class UiSelect {
     }
     render() {
         const hasValue = this.value !== undefined && this.value !== "";
-        return (h(Host, { key: '5f41047362d77643cc663925900c15c6cd10ec60' }, h("div", { key: '53ec77b2100bdd6de568ad549a42ad8fd080ac6a', class: "wrapper" }, h("select", { key: 'b0b4b1def7b7166bf24f996f9736a670a9b7b052', class: "select", name: this.name, disabled: this.disabled, onChange: this.onChange }, this.placeholder && (h("option", { key: 'e83b039418ac74bb3124c151dca9af43ff05dd61', value: "", disabled: true, selected: !hasValue }, this.placeholder)), this.options.map((option) => (h("option", { value: option.value, selected: option.value === this.value }, option.label)))), h("svg", { key: 'bb3165c856d11b352b2c7a64cc12ab4284541fb4', class: "chevron", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, h("polyline", { key: 'ab5e3cb2419dc63fbcd3804740b781c856ae8240', points: "6 9 12 15 18 9" })))));
+        return (h(Host, { key: '64c33b02b0515d5c2e3484aef7e3261c1edb5af4' }, h("div", { key: '0bbd78b01e44c403636d54930441a6576f2821e0', class: "wrapper" }, h("select", { key: '2435c3bf0053fc0f3670fd8aaa0506f2945eca39', class: "select", name: this.name, disabled: this.disabled, onChange: this.onChange }, this.placeholder && (h("option", { key: 'cfba5ce9961f1960cf1e54e8efb27aaf82eeb2db', value: "", disabled: true, selected: !hasValue }, this.placeholder)), this.options.map((option) => (h("option", { value: option.value, selected: option.value === this.value }, option.label)))), h("svg", { key: '0af4fe1625061d35fd3e793f59fdbfc46429eb84', class: "chevron", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, h("polyline", { key: '27787d33345ce50eafa3696c1d17f21768819fcf', points: "6 9 12 15 18 9" })))));
     }
     static get is() { return "ui-select"; }
     static get encapsulation() { return "shadow"; }

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

@@ -5,7 +5,7 @@ export class UiSeparator {
         this.orientation = "horizontal";
     }
     render() {
-        return (h(Host, { key: '33e452485ff7838e37a378f9acba10f242069cfc', role: "separator", "aria-orientation": this.orientation, class: `orientation-${this.orientation}` }));
+        return (h(Host, { key: '8ad0a4bc68cdc9e2213c2236d61a7c882297a15f', role: "separator", "aria-orientation": this.orientation, class: `orientation-${this.orientation}` }));
     }
     static get is() { return "ui-separator"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,7 +1,7 @@
 import { h, Host } from "@stencil/core";
 export class UiSkeleton {
     render() {
-        return (h(Host, { key: '8f839817a493a8221e9d3b2e95fd7ae5ece2e70e' }, h("span", { key: '295dce8e9e6489def8b20a703f04c65ad3740ce8', class: "skeleton" })));
+        return (h(Host, { key: '6f8614815e2d8fb536225748b0883a0a1b3a34e7' }, h("span", { key: '41f6f75b31f55f0c468bdb7566983aca0c20f8c2', class: "skeleton" })));
     }
     static get is() { return "ui-skeleton"; }
     static get encapsulation() { return "shadow"; }

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

@@ -21,7 +21,7 @@ export class UiSlider {
         };
     }
     render() {
-        return (h(Host, { key: '22fe57f0e95edb2e169718c8b1fb5c2f3d78ddfe' }, h("input", { key: 'a9e16ef8f97f412c22911f72c4b7212f6d04a293', class: "slider", type: "range", min: this.min, max: this.max, step: this.step, value: this.value, disabled: this.disabled, onInput: this.onInput, onChange: this.onChange })));
+        return (h(Host, { key: 'c1175e775a1861d332064d8229f16ff46b2e2330' }, h("input", { key: 'ea65fc85d9f7c034560de24ed0df42340ee2509a', class: "slider", type: "range", min: this.min, max: this.max, step: this.step, value: this.value, disabled: this.disabled, onInput: this.onInput, onChange: this.onChange })));
     }
     static get is() { return "ui-slider"; }
     static get encapsulation() { return "shadow"; }

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

@@ -5,7 +5,7 @@ export class UiSpinner {
         this.size = "md";
     }
     render() {
-        return (h(Host, { key: '0414d6e3be8588ad4c71c5e4cf227075ac7494ab', role: "status" }, h("span", { key: '61e5d0a16b5fd566767ef098477c3144a9c1c987', class: { spinner: true, [`size-${this.size}`]: true } }), h("span", { key: 'ea33b6e6603ba23e7a117ef978329c83818a044b', class: "sr-only" }, "Carregando")));
+        return (h(Host, { key: 'fdbe42a3b0cd906ff4c0dd79cc661370aa36cf22', role: "status" }, h("span", { key: 'aab2633191dd34f3b9ba49d4335ec3aaafcfb0a8', class: { spinner: true, [`size-${this.size}`]: true } }), h("span", { key: 'bd4d9cf78c4b05dcf5e1146a13f9754dce2d5127', class: "sr-only" }, "Carregando")));
     }
     static get is() { return "ui-spinner"; }
     static get encapsulation() { return "shadow"; }

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

@@ -39,7 +39,7 @@ export class UiStack {
             justifyContent: JUSTIFY[this.justify],
             flexWrap: this.wrap ? "wrap" : "nowrap",
         };
-        return (h(Host, { key: 'ba9547e72877aa05a5e93afbe098d7402b315df3' }, h("div", { key: 'e0fd73777e2211925435f2fd8bfcb74ad2eb8085', class: "stack", style: style }, h("slot", { key: '3a5aa50721c641f0cc81328a21262ff5d375e55c' }))));
+        return (h(Host, { key: '27299e680537c9b2cc57c2922f28ec01f2ff12f8' }, h("div", { key: '8201e2dadf2462e2f48113a6b4bf7f57b55328b2', class: "stack", style: style }, h("slot", { key: 'b2e1715ca077e101ba2519662b4365b6e2c52db4' }))));
     }
     static get is() { return "ui-stack"; }
     static get encapsulation() { return "shadow"; }

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

@@ -14,7 +14,7 @@ export class UiStat {
         return null;
     }
     render() {
-        return (h(Host, { key: '7afc03397921ff23d08da136999896a40d8a31be' }, h("div", { key: '35a7d594e9ebb426f10ff256ba4805ee88a0100c', class: "card" }, h("p", { key: '92a82cf415c22f884ed782d410e25559ff391017', class: "label" }, this.label), h("div", { key: '1c8d08800ca0a6f38e574930c5187ec979666a62', class: "value-row" }, h("span", { key: '0bb5e825e9d51a045638f48616c24bdc7a4a0ee0', class: "value" }, this.value), this.delta && (h("span", { key: '01aa434582c8eee2c1fd6b69c16de0262fb89daf', class: { delta: true, [`trend-${this.trend}`]: true } }, this.renderArrow(), this.delta))), h("div", { key: '4446e15c156412cc8b6c72f823a49396f31e8e74', class: "extra" }, h("slot", { key: 'ca4e0cc60f588840d3fd88e3efaecabb84cd633d' })))));
+        return (h(Host, { key: 'bb31e4f164bd4e3b2d20b9639b4271358fb4a7b9' }, h("div", { key: 'f025dd01a43bde3377053710e752501dfe4a7960', class: "card" }, h("p", { key: '6c56a97d9bdf6cad4929bea1700cbccb0dafdb15', class: "label" }, this.label), h("div", { key: '9cb668b141f0db11700d58254821771ff0a6cdbf', class: "value-row" }, h("span", { key: '2cd39bc3703da766aa7bc0daafb078d0670376b7', class: "value" }, this.value), this.delta && (h("span", { key: '95ed79c13f055ffe672b3c3c6f7430c70639b096', class: { delta: true, [`trend-${this.trend}`]: true } }, this.renderArrow(), this.delta))), h("div", { key: '13c159ddb3b5aa850c543cba6bc8a507f7986e84', class: "extra" }, h("slot", { key: 'bd58d52d17e408952564f5984216d73ccb7c90a5' })))));
     }
     static get is() { return "ui-stat"; }
     static get encapsulation() { return "shadow"; }

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

@@ -19,7 +19,7 @@ export class UiSwitch {
         };
     }
     render() {
-        return (h(Host, { key: '018ccd47d567e5c16ce40a600c15a9e2281301d2' }, h("button", { key: '7975d671d3c6d048b760b285a68e9ae832c93ebc', class: "switch", type: "button", role: "switch", "aria-checked": this.checked ? "true" : "false", disabled: this.disabled, onClick: this.toggle, onKeyDown: this.onKeyDown }, h("span", { key: '4ac740348a215ff97e0cae3bbbbd411163760792', class: "thumb" }))));
+        return (h(Host, { key: '9b6a322fd7129b403e8ef9b8dcfa686904af0a3f' }, h("button", { key: '263e42e0bdc147a3fe8b99f6d153ef8a38165b57', class: "switch", type: "button", role: "switch", "aria-checked": this.checked ? "true" : "false", disabled: this.disabled, onClick: this.toggle, onKeyDown: this.onKeyDown }, h("span", { key: 'd8c2917fa03aa147e86e9ba812bd2bf791bc3d5e', class: "thumb" }))));
     }
     static get is() { return "ui-switch"; }
     static get encapsulation() { return "shadow"; }

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

@@ -0,0 +1,46 @@
+:host {
+  display: block;
+}
+
+.wrapper {
+  overflow: hidden;
+  border: 1px solid var(--ui-border);
+  background: var(--ui-panel);
+  box-shadow: var(--ui-shadow-lg);
+  backdrop-filter: blur(22px) saturate(140%);
+  border-radius: var(--ui-radius-lg);
+  font-family: var(--ui-font-sans);
+}
+
+.table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.table thead th {
+  padding: 0.75rem 1rem;
+  font-size: 0.7rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--ui-text-faint);
+  background: var(--ui-chip);
+}
+
+.table tbody td {
+  padding: 0.75rem 1rem;
+  font-size: 0.875rem;
+  color: var(--ui-text-soft);
+}
+
+.table tbody tr {
+  border-top: 1px solid var(--ui-border);
+}
+
+.table.striped tbody tr:nth-child(even) {
+  background: color-mix(in srgb, var(--ui-chip) 50%, transparent);
+}
+
+.table.hoverable tbody tr:hover {
+  background: var(--ui-chip);
+}

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

@@ -0,0 +1,119 @@
+import { h, Host } from "@stencil/core";
+export class UiTable {
+    constructor() {
+        /** Definição das colunas. */
+        this.columns = [];
+        /** Linhas de dados. */
+        this.rows = [];
+        /** Aplica fundo alternado nas linhas pares. */
+        this.striped = false;
+        /** Destaca a linha sob o cursor. */
+        this.hoverable = true;
+    }
+    render() {
+        return (h(Host, { key: 'aa3d75a6092f69ee274a7148e35ab54b83d6c356' }, h("div", { key: '4953b1c3e26eeaa1250185c559328e037a634985', class: "wrapper" }, h("table", { key: '2029b63484460261f8f46ae5d1a669019f3103f8', class: { table: true, striped: this.striped, hoverable: this.hoverable } }, h("thead", { key: '8a963402f6e7204c84e54cc07c2458ac4994c75c' }, h("tr", { key: '764743907d21a69235f1c55db12372348c876cee' }, this.columns.map((column) => (h("th", { key: column.key, style: { textAlign: column.align ?? "left" } }, column.label))))), h("tbody", { key: '60e287ad516e4280ce4f0878669325e9be977461' }, this.rows.map((row, rowIndex) => (h("tr", { key: rowIndex }, this.columns.map((column) => (h("td", { key: column.key, style: { textAlign: column.align ?? "left" } }, String(row[column.key] ?? ""))))))))))));
+    }
+    static get is() { return "ui-table"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ui-table.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ui-table.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "columns": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "UiTableColumn[]",
+                    "resolved": "UiTableColumn[]",
+                    "references": {
+                        "UiTableColumn": {
+                            "location": "local",
+                            "path": "/Users/andersonespindola/.ghq/github.com/andersonflima/ui/packages/core/src/components/ui-table/ui-table.tsx",
+                            "id": "src/components/ui-table/ui-table.tsx::UiTableColumn"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Defini\u00E7\u00E3o das colunas."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "rows": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Record<string, unknown>[]",
+                    "resolved": "Record<string, unknown>[]",
+                    "references": {
+                        "Record": {
+                            "location": "global",
+                            "id": "global::Record"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Linhas de dados."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "striped": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Aplica fundo alternado nas linhas pares."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "striped",
+                "defaultValue": "false"
+            },
+            "hoverable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Destaca a linha sob o cursor."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "hoverable",
+                "defaultValue": "true"
+            }
+        };
+    }
+}

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

@@ -13,10 +13,10 @@ export class UiTabs {
         };
     }
     render() {
-        return (h(Host, { key: 'fc0926743b6a547c13660f574fc56abefc6e6c2e' }, h("div", { key: 'a1582c6234e1faaa5cb6b563a51ecf2192a88d40', class: "tablist", role: "tablist" }, this.items.map((item) => {
+        return (h(Host, { key: '41f5832ef24470811c6c1d64958bc3c2cb56bc2b' }, h("div", { key: 'fed127dfc1cea76ff1bd2a1ce4b6091244c89f4e', class: "tablist", role: "tablist" }, this.items.map((item) => {
             const active = item.value === this.value;
             return (h("button", { key: item.value, class: { tab: true, active }, type: "button", role: "tab", "aria-selected": active ? "true" : "false", onClick: () => this.select(item.value) }, item.label));
-        })), h("div", { key: '5d9b8d61e8005b7e6baa216ffd571f7b9403acd5', class: "panel", role: "tabpanel" }, h("slot", { key: '8ba0cf22e6e837f038c2ec7fad8d533287325119', name: this.value }))));
+        })), h("div", { key: '533f8c0dafcb55782d13c42d864cb1eb508b4d20', class: "panel", role: "tabpanel" }, h("slot", { key: 'dd75f808647deeb70991a366dd91d9ac65f78268', name: this.value }))));
     }
     static get is() { return "ui-tabs"; }
     static get encapsulation() { return "shadow"; }

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

@@ -19,7 +19,7 @@ export class UiTextarea {
         };
     }
     render() {
-        return (h(Host, { key: 'ba1b88ab3fa990a903e6d61f31fbbade7b58eb27' }, h("textarea", { key: 'f9ac9e1aff98e94b3562b812cef34fcc138cd350', class: { textarea: true, invalid: this.invalid }, name: this.name, rows: this.rows, placeholder: this.placeholder, disabled: this.disabled, "aria-invalid": this.invalid ? "true" : null, onInput: this.onInput, onChange: this.onChange }, this.value)));
+        return (h(Host, { key: '66f45ad55373e76406aebfac1a7b9358757df9cb' }, h("textarea", { key: '05343ebf1f04bcef8c39c2e26e07973930a52417', class: { textarea: true, invalid: this.invalid }, name: this.name, rows: this.rows, placeholder: this.placeholder, disabled: this.disabled, "aria-invalid": this.invalid ? "true" : null, onInput: this.onInput, onChange: this.onChange }, this.value)));
     }
     static get is() { return "ui-textarea"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ui-theme-toggle/ui-theme-toggle.js

@@ -50,7 +50,7 @@ export class UiThemeToggle {
         return (h("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, h("circle", { cx: "12", cy: "12", r: "4" }), h("line", { x1: "12", y1: "2", x2: "12", y2: "4" }), h("line", { x1: "12", y1: "20", x2: "12", y2: "22" }), h("line", { x1: "2", y1: "12", x2: "4", y2: "12" }), h("line", { x1: "20", y1: "12", x2: "22", y2: "12" }), h("line", { x1: "4.93", y1: "4.93", x2: "6.34", y2: "6.34" }), h("line", { x1: "17.66", y1: "17.66", x2: "19.07", y2: "19.07" }), h("line", { x1: "4.93", y1: "19.07", x2: "6.34", y2: "17.66" }), h("line", { x1: "17.66", y1: "6.34", x2: "19.07", y2: "4.93" })));
     }
     render() {
-        return (h(Host, { key: 'da51d59a9d5b28dec214d4fe63f5cebf78d80a51' }, h("button", { key: '55436252c82f49628c4b0394905623bc5a78dc00', class: "toggle", type: "button", "aria-label": this.isDark ? "Ativar tema claro" : "Ativar tema escuro", "aria-pressed": this.isDark ? "true" : "false", onClick: this.toggle }, this.renderIcon())));
+        return (h(Host, { key: '941b9c3a71cbbf850d292e95e11311ec4e53dcd4' }, h("button", { key: 'd4db89ef140e4d4f5ec2198d69f3c6645db64853', class: "toggle", type: "button", "aria-label": this.isDark ? "Ativar tema claro" : "Ativar tema escuro", "aria-pressed": this.isDark ? "true" : "false", onClick: this.toggle }, this.renderIcon())));
     }
     static get is() { return "ui-theme-toggle"; }
     static get encapsulation() { return "shadow"; }

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

@@ -0,0 +1,8 @@
+:host {
+  display: block;
+}
+
+.timeline {
+  display: flex;
+  flex-direction: column;
+}

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

@@ -0,0 +1,18 @@
+import { h, Host } from "@stencil/core";
+export class UiTimeline {
+    render() {
+        return (h(Host, { key: '1d67e561676e216a05e314ffeb14e88e5cd6be7d' }, h("div", { key: '50bf6f54546237a55b4589cfe3ed52b20cb0f6cb', class: "timeline" }, h("slot", { key: 'e7c94095dcf74efaa81d1b1d0fb124e4595609ee' }))));
+    }
+    static get is() { return "ui-timeline"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ui-timeline.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ui-timeline.css"]
+        };
+    }
+}

package/dist/collection/components/ui-timeline-item/ui-timeline-item.css

@@ -0,0 +1,83 @@
+:host {
+  display: block;
+}
+
+.item {
+  position: relative;
+  display: flex;
+  gap: 0.75rem;
+  padding-bottom: 1.5rem;
+  font-family: var(--ui-font-sans);
+}
+
+.marker {
+  position: relative;
+  flex: 0 0 1.5rem;
+  display: flex;
+  justify-content: center;
+}
+
+.dot {
+  position: relative;
+  z-index: 1;
+  width: 0.75rem;
+  height: 0.75rem;
+  margin-top: 0.125rem;
+  border-radius: var(--ui-radius-full);
+  background: var(--dot-color, var(--ui-accent));
+  box-shadow: 0 0 0 2px var(--ui-background);
+}
+
+.line {
+  position: absolute;
+  top: 0.5rem;
+  bottom: -1.5rem;
+  left: 50%;
+  width: 2px;
+  transform: translateX(-50%);
+  background: var(--ui-border);
+}
+
+:host(:last-child) .line {
+  display: none;
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  min-width: 0;
+}
+
+.time {
+  font-size: 0.7rem;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--ui-text-faint);
+}
+
+.heading {
+  font-weight: 600;
+  color: var(--ui-foreground);
+}
+
+.body {
+  font-size: 0.875rem;
+  color: var(--ui-text-soft);
+}
+
+.variant-accent {
+  --dot-color: var(--ui-accent);
+}
+.variant-success {
+  --dot-color: var(--ui-success);
+}
+.variant-warning {
+  --dot-color: var(--ui-warning);
+}
+.variant-danger {
+  --dot-color: var(--ui-danger);
+}
+.variant-muted {
+  --dot-color: var(--ui-text-faint);
+}