@andespindola/ui-core 0.1.1 → 0.3.0

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

@@ -0,0 +1,134 @@
+import { h, Host, } from "@stencil/core";
+export class UiAlert {
+    constructor() {
+        /** Variante visual. */
+        this.variant = "info";
+        /** Exibe o botão de fechar. */
+        this.dismissible = false;
+        /** Controla a visibilidade interna do alerta. */
+        this.open = true;
+        this.dismiss = () => {
+            this.open = false;
+            this.uiClose.emit();
+        };
+    }
+    renderIcon() {
+        switch (this.variant) {
+            case "success":
+                return (h("svg", { class: "icon", 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: "10" }), h("path", { d: "M8 12l3 3 5-6" })));
+            case "warning":
+                return (h("svg", { class: "icon", 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("path", { d: "M10.3 3.3 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.3a2 2 0 0 0-3.4 0Z" }), h("line", { x1: "12", y1: "9", x2: "12", y2: "13" }), h("line", { x1: "12", y1: "17", x2: "12.01", y2: "17" })));
+            case "danger":
+                return (h("svg", { class: "icon", 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: "10" }), h("line", { x1: "15", y1: "9", x2: "9", y2: "15" }), h("line", { x1: "9", y1: "9", x2: "15", y2: "15" })));
+            default:
+                return (h("svg", { class: "icon", 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: "10" }), h("line", { x1: "12", y1: "11", x2: "12", y2: "16" }), h("line", { x1: "12", y1: "8", x2: "12.01", y2: "8" })));
+        }
+    }
+    render() {
+        return (h(Host, { key: '0de470e0aec991fe0ed4b47d4b14075d0153ef54' }, this.open && (h("div", { key: 'd17b7326f4c76fe99a32f402fb53a095721bf209', class: { alert: true, [`variant-${this.variant}`]: true }, role: "alert" }, h("span", { key: '124489a92f47b4c7751f9af674b13add775bf3d3', class: "indicator" }, this.renderIcon()), h("div", { key: '9c0741a48bee7225f7831b18ab492156c217f5a5', class: "body" }, this.heading && h("p", { key: 'f883db0bdd9b48cfc1915d209675f681cc846d95', class: "heading" }, this.heading), h("div", { key: '4a1de1b6a5f6fc84eead49a0a0357067b6c3dcab', class: "content" }, h("slot", { key: '21ac76a2d287bb4e8629bac25cd3753886d14b5d' }))), this.dismissible && (h("button", { key: 'f96e21942bed9489b296f76b6bdcc026f4351141', class: "close", type: "button", "aria-label": "Fechar", onClick: this.dismiss }, h("svg", { key: 'a64eaf844dbc6a0fd4fbc699deac73702a7ff300', width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, h("line", { key: 'e05e78664e7161af63d9e420a77726b52f14fff5', x1: "18", y1: "6", x2: "6", y2: "18" }), h("line", { key: 'f6e62b74f93061762881b30866c105b332e79870', x1: "6", y1: "6", x2: "18", y2: "18" }))))))));
+    }
+    static get is() { return "ui-alert"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ui-alert.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ui-alert.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "UiAlertVariant",
+                    "resolved": "\"danger\" | \"info\" | \"success\" | \"warning\"",
+                    "references": {
+                        "UiAlertVariant": {
+                            "location": "local",
+                            "path": "/Users/andersonespindola/.ghq/github.com/andersonflima/ui/packages/core/src/components/ui-alert/ui-alert.tsx",
+                            "id": "src/components/ui-alert/ui-alert.tsx::UiAlertVariant"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Variante visual."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant",
+                "defaultValue": "\"info\""
+            },
+            "heading": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "T\u00EDtulo do alerta."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "heading"
+            },
+            "dismissible": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Exibe o bot\u00E3o de fechar."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "dismissible",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "open": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "uiClose",
+                "name": "uiClose",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitido quando o alerta \u00E9 fechado."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+}

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

@@ -28,3 +28,34 @@
   color: var(--ui-text-muted);
   line-height: 1;
 }
+
+.wrapper {
+  position: relative;
+  display: inline-flex;
+}
+
+.status {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  width: 28%;
+  height: 28%;
+  min-width: 0.55rem;
+  min-height: 0.55rem;
+  border-radius: var(--ui-radius-full);
+  border: 2px solid var(--ui-background);
+  box-sizing: border-box;
+}
+
+.status-online {
+  background: var(--ui-success);
+}
+.status-busy {
+  background: var(--ui-danger);
+}
+.status-away {
+  background: var(--ui-warning);
+}
+.status-offline {
+  background: var(--ui-text-faint);
+}

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: '3f5862531fd7c0df254cca0be373c4f5661bac1c' }, h("span", { key: '2c831417964e89d68f3535321868aa0fab82df26', class: "wrapper" }, h("span", { key: '7573d9b9bdd3c07e7913002923722e19eb652d8e', 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: 'adb6bf39438427a853fffe2eb84b95474aa8c123', 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: 'ffbc4f069a58a5c5e9bf014ec9fc41d11ceb24b8' }, h("div", { key: 'c6f7c559740f193c0347f7834169fbd2eb252272', class: "group" }, h("slot", { key: 'd66719ad68488098d753eefc8da5cc65bf6a85a4' }))));
+    }
+    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: '93726eb6ef05c505f409ec5b313e7db50c0d0a78' }, h("nav", { key: 'dc02b8d95d1c0998e2e7533ab8ed214fb9c19a63', "aria-label": "breadcrumb" }, h("ol", { key: '41dc2d7fe3cbf1b684723d759ef0d00f17bf2e00' }, h("slot", { key: 'eb64652ac37ca5ce1ebd865260ad1ac2c5dd7548' })))));
+    }
+    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: '20f1a108e5275c29e2fbb243720a8b70efb10b24' }, 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;
@@ -10,6 +19,8 @@
   white-space: nowrap;
   border: 1px solid transparent;
   border-radius: var(--ui-radius-full);
+  background: transparent;
+  color: var(--ui-foreground);
   font-family: var(--ui-font-sans);
   font-weight: 500;
   cursor: pointer;
@@ -84,10 +95,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: '2f6568112992159a78a5c9dac99bd1a453cd779a' }, h("div", { key: '3d76798bf20f98b20a8d7b1847896f9641585cda', class: "card" }, h("slot", { key: 'cf396f9448c56b96859072327f5f82bb00f0c36d', name: "title" }), h("slot", { key: '04fdf85b8c4ffa318b084616ba902998d085a990', name: "description" }), h("slot", { key: 'a716446f123d47c8f47bea6915ac7489dd41fd45' }), h("slot", { key: '9b2e4abc3987a04e72b13eff8cacf3257b89f174', 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: 'ec07dd3898dfb9eeac1a07d41895be145a8f03f0' }, h("button", { key: '7d1e72daf042994ba140703e5f8ce2bb5558932d', class: "checkbox", type: "button", role: "checkbox", "aria-checked": this.checked ? "true" : "false", disabled: this.disabled, onClick: this.toggle, onKeyDown: this.onKeyDown }, h("svg", { key: 'f1a59bc59f90e6bce5b289a4a05da51778788c19', 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: '6ea7bc0406e6e8befd6ceea7193423bd433d9a63', points: "20 6 9 17 4 12" })))));
     }
     static get is() { return "ui-checkbox"; }
     static get encapsulation() { return "shadow"; }