@andespindola/ui-core 0.1.1 → 0.2.0

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

@@ -5,7 +5,7 @@ export class UiAvatar {
         this.alt = "";
     }
     render() {
-        return (h(Host, { key: '7a6bbef0807d0d3dc25692a6bf87171131579e46' }, h("span", { key: '6b548ed4e5ec0dc7bb52dcb3660ffc188705439f', class: "avatar" }, this.src ? (h("img", { class: "image", src: this.src, alt: this.alt })) : (h("span", { class: "fallback" }, this.fallback)))));
+        return (h(Host, { key: '0a3b07acb18d2ddeecf3b072fcd6913dbc187474' }, h("span", { key: '9b6c302f378ef47385f43d24a3fe491cdec0bfe0', class: "wrapper" }, h("span", { key: '5093f8e180da9c3b1583da7f651bc69be89821b9', class: "avatar" }, this.src ? (h("img", { class: "image", src: this.src, alt: this.alt })) : (h("span", { class: "fallback" }, this.fallback))), this.status && (h("span", { key: '920d70149458e747aef1ac35c945a0b403986928', class: `status status-${this.status}`, "aria-label": this.status })))));
     }
     static get is() { return "ui-avatar"; }
     static get encapsulation() { return "shadow"; }
@@ -78,6 +78,25 @@ export class UiAvatar {
                 "setter": false,
                 "reflect": false,
                 "attribute": "fallback"
+            },
+            "status": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"online\" | \"offline\" | \"busy\" | \"away\"",
+                    "resolved": "\"away\" | \"busy\" | \"offline\" | \"online\" | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Indicador de status."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "status"
             }
         };
     }

package/dist/collection/components/ui-avatar-group/ui-avatar-group.css

@@ -0,0 +1,22 @@
+:host {
+  display: inline-flex;
+}
+
+.group {
+  display: inline-flex;
+  align-items: center;
+}
+
+/* Sobreposição: cada avatar (exceto o primeiro) recua e ganha um anel. */
+::slotted(*) {
+  border-radius: var(--ui-radius-full);
+}
+
+::slotted(*:not(:first-child)) {
+  margin-left: -0.6rem;
+}
+
+::slotted(ui-avatar) {
+  outline: 2px solid var(--ui-background);
+  border-radius: var(--ui-radius-full);
+}

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

@@ -0,0 +1,21 @@
+import { h, Host } from "@stencil/core";
+/**
+ * Agrupa avatares sobrepostos. Use com elementos `<ui-avatar>` no slot default.
+ */
+export class UiAvatarGroup {
+    render() {
+        return (h(Host, { key: '2413b9065333e5beb192143529b60daceefc11fe' }, h("div", { key: 'df93cb1e73bc05abfee09226111da32f50bf908d', class: "group" }, h("slot", { key: 'fa7fc7b57b009355e32c904cc78b46848403c0eb' }))));
+    }
+    static get is() { return "ui-avatar-group"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ui-avatar-group.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ui-avatar-group.css"]
+        };
+    }
+}

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

@@ -44,3 +44,29 @@
   background: color-mix(in srgb, var(--ui-info) 15%, transparent);
   color: var(--ui-info);
 }
+
+.dot {
+  width: 0.4rem;
+  height: 0.4rem;
+  border-radius: var(--ui-radius-full);
+  background: currentColor;
+}
+
+.remove {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0 -0.25rem 0 0.125rem;
+  padding: 0.125rem;
+  border: none;
+  border-radius: var(--ui-radius-full);
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  opacity: 0.7;
+  transition: opacity var(--ui-duration) var(--ui-ease);
+}
+
+.remove:hover {
+  opacity: 1;
+}

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

@@ -3,9 +3,13 @@ export class UiBadge {
     constructor() {
         /** Variante visual. */
         this.variant = "default";
+        /** Exibe um ponto colorido à esquerda. */
+        this.dot = false;
+        /** Exibe um botão para remover o badge. */
+        this.removable = false;
     }
     render() {
-        return (h(Host, { key: '260e9e23ffa9a624e17e5a794217402ab2167f31' }, h("span", { key: '1b0d40c5b9a46c5928132d050e3c2f9e3bcd4ea8', class: { badge: true, [`variant-${this.variant}`]: true } }, h("slot", { key: '9680659040a4d48bdb53415e40bbbef9819063d9' }))));
+        return (h(Host, { key: '30760a471c805c011e45b1ee2c59507de0774b3c' }, h("span", { key: 'f06905297a3c5641634104a014452737d34918cc', class: { badge: true, [`variant-${this.variant}`]: true } }, this.dot && h("span", { key: '255e4debacda174708abb165159347c6aeeffced', class: "dot" }), h("slot", { key: 'e8fb22f25b0b1c805289e3e6d1108a1cb93b5e28' }), this.removable && (h("button", { key: 'a30d3213f31780e4c3fa80d98b45ae539b711f43', class: "remove", type: "button", "aria-label": "Remover", onClick: () => this.uiRemove.emit() }, h("svg", { key: 'e57df3139096ea131fa1c3fbddf51f6507423346', viewBox: "0 0 24 24", width: "12", height: "12", fill: "none", stroke: "currentColor", "stroke-width": "2.5", "stroke-linecap": "round" }, h("path", { key: 'da3810852846ac9cda68957d7dadcb3737be348d', d: "M18 6 6 18M6 6l12 12" })))))));
     }
     static get is() { return "ui-badge"; }
     static get encapsulation() { return "shadow"; }
@@ -46,7 +50,65 @@ export class UiBadge {
                 "reflect": false,
                 "attribute": "variant",
                 "defaultValue": "\"default\""
+            },
+            "dot": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Exibe um ponto colorido \u00E0 esquerda."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "dot",
+                "defaultValue": "false"
+            },
+            "removable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Exibe um bot\u00E3o para remover o badge."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "removable",
+                "defaultValue": "false"
             }
         };
     }
+    static get events() {
+        return [{
+                "method": "uiRemove",
+                "name": "uiRemove",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitido ao clicar no bot\u00E3o de remover."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
 }

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

@@ -0,0 +1,15 @@
+:host {
+  display: block;
+}
+
+ol {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.5rem;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  font-family: var(--ui-font-sans);
+  font-size: 0.875rem;
+}

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

@@ -0,0 +1,18 @@
+import { h, Host } from "@stencil/core";
+export class UiBreadcrumb {
+    render() {
+        return (h(Host, { key: '3c86ea43e5dde2c8486b49f8c2ece55f66c4dec5' }, h("nav", { key: '6da35c2ffc4b7c2aa13d3321ed6227d97be59e80', "aria-label": "breadcrumb" }, h("ol", { key: '567cb7aaf4e8ae8f1e15369b45b482104f1264da' }, h("slot", { key: '5f942426d1195ea0eae8256ebfb01d25b6f350ab' })))));
+    }
+    static get is() { return "ui-breadcrumb"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ui-breadcrumb.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ui-breadcrumb.css"]
+        };
+    }
+}

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

@@ -0,0 +1,30 @@
+:host {
+  display: inline-flex;
+  align-items: center;
+}
+
+.link {
+  color: var(--ui-text-muted);
+  text-decoration: none;
+  transition: color var(--ui-duration) var(--ui-ease);
+}
+
+.link:hover {
+  color: var(--ui-accent);
+}
+
+.current {
+  color: var(--ui-foreground);
+  font-weight: 500;
+}
+
+.separator {
+  display: inline-flex;
+  align-items: center;
+  margin: 0 0.5rem;
+  color: var(--ui-text-faint);
+}
+
+.separator svg {
+  display: block;
+}

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

@@ -0,0 +1,69 @@
+import { h, Host } from "@stencil/core";
+export class UiBreadcrumbItem {
+    constructor() {
+        /** Indica o item atual (página corrente). */
+        this.current = false;
+    }
+    renderSeparator() {
+        return (h("span", { class: "separator", "aria-hidden": "true" }, h("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("polyline", { points: "9 18 15 12 9 6" }))));
+    }
+    render() {
+        const isLink = this.href && !this.current;
+        return (h(Host, { key: '20d22dde2f7b6b4c03a76b4e6be851a0c4cd39d5' }, isLink ? (h("a", { class: "link", href: this.href }, h("slot", null))) : (h("span", { class: "current", "aria-current": this.current ? "page" : undefined }, h("slot", null))), !this.current && this.renderSeparator()));
+    }
+    static get is() { return "ui-breadcrumb-item"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ui-breadcrumb-item.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ui-breadcrumb-item.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "href": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Destino do link."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "href"
+            },
+            "current": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indica o item atual (p\u00E1gina corrente)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "current",
+                "defaultValue": "false"
+            }
+        };
+    }
+}

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

@@ -2,6 +2,15 @@
   display: inline-block;
 }
 
+:host([full]) {
+  display: block;
+  width: 100%;
+}
+
+:host([full]) .btn {
+  width: 100%;
+}
+
 .btn {
   display: inline-flex;
   align-items: center;
@@ -84,10 +93,11 @@
 
 .variant-outline {
   color: var(--ui-foreground);
-  border-color: var(--ui-border-strong);
+  border-color: color-mix(in srgb, var(--ui-foreground) 30%, transparent);
 }
 .variant-outline:hover {
   background: var(--ui-chip);
+  border-color: color-mix(in srgb, var(--ui-foreground) 45%, transparent);
 }
 
 .variant-ghost {

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

@@ -11,13 +11,15 @@ export class UiButton {
         this.loading = false;
         /** Tipo do botão nativo. */
         this.type = "button";
+        /** Ocupa 100% da largura disponível. */
+        this.full = false;
     }
     render() {
-        return (h(Host, { key: 'bf18a1f72babada2698ce42f54bf2d73b0d41d0b' }, h("button", { key: 'f08a766e14d139d7031dac4fa5846fbc0749328f', class: {
+        return (h(Host, { key: 'fa9886a20cac8424b127be543c0fd1ad04cc2fb1' }, h("button", { key: 'c54077dabce85b286733efcae8a08a435b81d72e', class: {
                 btn: true,
                 [`variant-${this.variant}`]: true,
                 [`size-${this.size}`]: true,
-            }, type: this.type, disabled: this.disabled || this.loading, "aria-busy": this.loading ? "true" : null }, this.loading && h("span", { key: 'a3e87dd124b697050a657b9957884c231aa58c54', class: "spinner", "aria-hidden": "true" }), h("slot", { key: '87a720f06602011042d70a91918a0b2157abb163' }))));
+            }, type: this.type, disabled: this.disabled || this.loading, "aria-busy": this.loading ? "true" : null }, this.loading && h("span", { key: '8e557bd098d5655be256ea7fc0748990b7f11026', class: "spinner", "aria-hidden": "true" }), h("slot", { key: '36946d065411700928e3541f351a3f6f75018ae9' }))));
     }
     static get is() { return "ui-button"; }
     static get encapsulation() { return "shadow"; }
@@ -144,6 +146,26 @@ export class UiButton {
                 "reflect": false,
                 "attribute": "type",
                 "defaultValue": "\"button\""
+            },
+            "full": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Ocupa 100% da largura dispon\u00EDvel."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "full",
+                "defaultValue": "false"
             }
         };
     }

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

@@ -1,7 +1,7 @@
 import { h, Host } from "@stencil/core";
 export class UiCard {
     render() {
-        return (h(Host, { key: '1608f7f7bd8addc04064a70965fdb28a67a1abef' }, h("div", { key: '976e8fa507f78649789161f5eaaa2308547c7040', class: "card" }, h("slot", { key: '803ef160438006449051c2068246fd6f20562cc5', name: "title" }), h("slot", { key: '84bfdd0d56b015d09598e53e0002b9ac5e69934d', name: "description" }), h("slot", { key: '97d8522f426b54ab6a8b51038bd8f2b8e2413d0e' }), h("slot", { key: '8b36ab658e61cdebb391d6bb8dc427d809a81b30', name: "footer" }))));
+        return (h(Host, { key: '39ddf0a9974086fcc9ad3fc89f1e1d6858e2fead' }, h("div", { key: 'e8e510a468dc662f9fc76affce785a9b37edc205', class: "card" }, h("slot", { key: 'ee92d4bc2fa1738d84689d989d4e113d515acc83', name: "title" }), h("slot", { key: '6e87c2406474b6ea2aa370d1602ff02a89c4f4d5', name: "description" }), h("slot", { key: 'a388b4bc2d9c5e328ade55ac38c870afc9ade82c' }), h("slot", { key: '071ce297db672e332cf2d354a395b07e100b16a1', name: "footer" }))));
     }
     static get is() { return "ui-card"; }
     static get encapsulation() { return "shadow"; }

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

@@ -9,14 +9,18 @@
   width: 1.25rem;
   height: 1.25rem;
   padding: 0;
-  border: 1px solid var(--ui-border-strong);
+  border: 1.5px solid color-mix(in srgb, var(--ui-foreground) 32%, transparent);
   border-radius: var(--ui-radius-sm);
-  background: var(--ui-panel);
+  background: var(--ui-chip);
   cursor: pointer;
   outline: none;
   transition: all var(--ui-duration) var(--ui-ease);
 }
 
+.checkbox:hover:not(:disabled):not([aria-checked="true"]) {
+  border-color: var(--ui-accent);
+}
+
 .checkbox:focus-visible {
   box-shadow: 0 0 0 2px var(--ui-background), 0 0 0 4px var(--ui-ring);
 }

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

@@ -19,7 +19,7 @@ export class UiCheckbox {
         };
     }
     render() {
-        return (h(Host, { key: '3702acd47b1980ddf23df427a68c69ee782756e4' }, h("button", { key: '8cc709719dd004d01ca6ed82c0fab53ed38f8962', class: "checkbox", type: "button", role: "checkbox", "aria-checked": this.checked ? "true" : "false", disabled: this.disabled, onClick: this.toggle, onKeyDown: this.onKeyDown }, h("svg", { key: 'fa4875d7a2809133496a543fa6efd0de8c8c4c06', class: "check", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "3", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, h("polyline", { key: '34a601d25b20fdf1ad697349531888648795f4bf', points: "20 6 9 17 4 12" })))));
+        return (h(Host, { key: '73477b35af6a093e87ae8a5b33232690888ca98c' }, h("button", { key: '235b0102bbdd9a0ef23c3230acbba9aebdb06898', class: "checkbox", type: "button", role: "checkbox", "aria-checked": this.checked ? "true" : "false", disabled: this.disabled, onClick: this.toggle, onKeyDown: this.onKeyDown }, h("svg", { key: '3aaa64d1d173991b2c785298586aab66471e9285', class: "check", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "3", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, h("polyline", { key: 'baaca1ba97901e5a9d4e97640221f35cdeb02351', points: "20 6 9 17 4 12" })))));
     }
     static get is() { return "ui-checkbox"; }
     static get encapsulation() { return "shadow"; }

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: 'df811bec2a6a250e90cbb6d9c85202b2d3c2c964' }, h("dialog", { key: '49572b35ec17863fb83e9973c548a8cafa0308b6', class: "dialog", ref: (el) => (this.dialogEl = el), onClose: this.onClose, onCancel: this.onClose, onClick: this.onBackdropClick }, h("div", { key: '53c82b2c7a1b8831d64a060b4665a60bbdc7e39a', class: "content" }, h("slot", { key: 'b398a9692fdf2826b86125723bc232791e6b9e4b' })))));
+        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: '9f2f27dcc087f608a3aeed4fe64a65eb8fe4011b' }, h("dialog", { key: '92471e4a732f00e4187efb37cbba553651c2f9dd', class: `drawer side-${this.side}`, ref: (el) => (this.dialogEl = el), onClose: this.onClose, onCancel: this.onClose, onClick: this.onBackdropClick }, h("div", { key: 'd6706d4943f8559aee320b6df509138c44857bf0', class: "content" }, h("slot", { key: '5cb218bde44c73fd02c640c1d0da736427f2707c' })))));
+        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: '57af1c437b63fb19cfe297741b2b0f8d34564be9' }, h("button", { key: 'e3df81eb4c921d8b447c46da5140d21fb8126417', type: "button", class: "item", role: "menuitem", disabled: this.disabled, onClick: this.onClick }, h("slot", { key: '162d876af4ed9913c79964afcdceda7539feb95b' }))));
+        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: '65adc044508abd9ebf4b866fba02058bdcd22d5d' }, h("span", { key: 'e70a23e1b41c7936ab1dc3a87cd3593b3db43088', class: "trigger", ref: (el) => (this.triggerEl = el), onClick: this.onTriggerClick }, h("slot", { key: '40f2226b6ba6f1d3032cd2b2f2477fbcdf9617b5', name: "trigger" })), h("div", { key: '6af4ab3c98a9334d805e75da724d5572e4c986aa', class: { menu: true, "is-open": this.open }, role: "menu", ref: (el) => (this.floatingEl = el) }, h("slot", { key: '7f99ba16ab9544d5cf63b28f77f18fd4d0fbbed2' }))));
+        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: '5656c6d47f71364d26db0e4998e64b8780ee3840' }, h("div", { key: '6adc292e3ae0829c7f5533b2be732644f7e95dab', class: "field" }, this.label && (h("label", { key: 'e7c2e2fa1c3b0bc6edadb1385062fe53e5b2f5f7', class: "label", htmlFor: this.fieldId }, this.label, this.required && (h("span", { key: '06e56259184b4618eb9f2b3602ebb691e6b0ef1b', class: "required", "aria-hidden": "true" }, " *")))), h("slot", { key: 'bd44f4f425f257671eff1ed536051fb318671afc' }), 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);
+}