@lazhus/kg-ui 0.3.2 → 0.4.0

package/custom-elements.json

@@ -171,6 +171,227 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/kg-avatar.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "kgavatar",
+          "members": [
+            {
+              "kind": "field",
+              "name": "properties",
+              "type": {
+                "text": "object"
+              },
+              "static": true,
+              "default": "{ src: { type: String }, alt: { type: String }, name: { type: String }, size: { type: String }, // tiny, small, medium, large, huge, massive shape: { type: String }, // circle, square, rounded status: { type: String }, // online, offline, away, busy badge: { type: String }, // numeric or simple dot color: { type: String }, // primary, secondary, tertiary, etc. or hex }"
+            },
+            {
+              "kind": "field",
+              "name": "styles",
+              "static": true,
+              "default": "css` :host { display: inline-block; vertical-align: middle; position: relative; line-height: 0; } .avatar-wrapper { display: flex; align-items: center; justify-content: center; background: var(--kg-bg-secondary, #eee); color: var(--kg-text-muted, #666); font-weight: 700; overflow: hidden; user-select: none; transition: all 0.2s ease; position: relative; } .avatar-img { width: 100%; height: 100%; object-fit: cover; } .initials { text-transform: uppercase; } /* Shapes */ .circle { border-radius: 50%; } .square { border-radius: 0; } .rounded { border-radius: var(--kg-radius-md, 8px); } /* Sizes */ .tiny { width: 24px; height: 24px; font-size: 0.7rem; } .small { width: 32px; height: 32px; font-size: 0.85rem; } .medium { width: 48px; height: 48px; font-size: 1.1rem; } .large { width: 64px; height: 64px; font-size: 1.5rem; } .huge { width: 96px; height: 96px; font-size: 2.2rem; } .massive { width: 128px; height: 128px; font-size: 3rem; } /* Status Badge */ .status-badge { position: absolute; bottom: 0; right: 0; width: 25%; height: 25%; border-radius: 50%; border: 2px solid var(--kg-bg, white); z-index: 1; } .online { background-color: #41ab34; } .offline { background-color: #9e9e9e; } .away { background-color: #fbb140; } .busy { background-color: #db2828; } .numeric-badge { position: absolute; top: -4px; right: -4px; background: #db2828; color: white; font-size: 10px; padding: 2px 6px; border-radius: 10px; border: 2px solid var(--kg-bg, white); font-weight: bold; line-height: 1; z-index: 2; } /* Semantic Colors for Avatar Background */ .primary { background-color: var(--kg-primary); color: white; } .secondary { background-color: var(--kg-secondary); color: white; } .tertiary { background-color: var(--kg-tertiary); color: white; } .error { background-color: #db2828; color: white; } .success { background-color: #41ab34; color: white; } .warning { background-color: #fbb140; color: white; } .info { background-color: #1367FF; color: white; } /* Custom Color Helper */ .custom-color { background-color: var(--avatar-bg); color: white; } `"
+            },
+            {
+              "kind": "method",
+              "name": "getInitials"
+            },
+            {
+              "kind": "method",
+              "name": "render"
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "string"
+              },
+              "default": "'medium'"
+            },
+            {
+              "kind": "field",
+              "name": "shape",
+              "type": {
+                "text": "string"
+              },
+              "default": "'circle'"
+            },
+            {
+              "kind": "field",
+              "name": "alt",
+              "type": {
+                "text": "string"
+              },
+              "default": "'Avatar'"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "kg-avatar",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "kgavatar",
+          "declaration": {
+            "name": "kgavatar",
+            "module": "src/components/kg-avatar.js"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "kg-avatar",
+          "declaration": {
+            "name": "kgavatar",
+            "module": "src/components/kg-avatar.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/kg-breadcrumbs.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "kgbreadcrumbs",
+          "members": [
+            {
+              "kind": "field",
+              "name": "properties",
+              "type": {
+                "text": "object"
+              },
+              "static": true,
+              "default": "{ separator: { type: String }, }"
+            },
+            {
+              "kind": "field",
+              "name": "styles",
+              "static": true,
+              "default": "css` :host { display: block; } nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding: 0; margin: 0; list-style: none; font-size: 0.9rem; color: var(--kg-text-muted, #666); } ::slotted(a), ::slotted(span) { display: flex; align-items: center; gap: 0.25rem; color: inherit; text-decoration: none; transition: color 0.2s; } ::slotted(a:hover) { color: var(--kg-primary, #41ab34); } ::slotted(.active) { color: var(--kg-text, #1a1a1a); font-weight: 600; pointer-events: none; } .separator { display: flex; align-items: center; user-select: none; font-size: 0.8em; opacity: 0.5; } `"
+            },
+            {
+              "kind": "method",
+              "name": "_handleSlotChange",
+              "parameters": [
+                {
+                  "name": "e"
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "render"
+            },
+            {
+              "kind": "field",
+              "name": "separator",
+              "type": {
+                "text": "string"
+              },
+              "default": "'/'"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "kg-breadcrumbs",
+          "customElement": true
+        },
+        {
+          "kind": "class",
+          "description": "",
+          "name": "kgbreadcrumbitem",
+          "members": [
+            {
+              "kind": "field",
+              "name": "properties",
+              "type": {
+                "text": "object"
+              },
+              "static": true,
+              "default": "{ href: { type: String }, active: { type: Boolean, reflect: true }, separator: { type: String }, }"
+            },
+            {
+              "kind": "field",
+              "name": "styles",
+              "static": true,
+              "default": "css` :host { display: inline-flex; align-items: center; gap: 0.5rem; } .item { color: var(--kg-text-muted, #666); text-decoration: none; transition: color 0.2s; display: flex; align-items: center; gap: 0.4rem; cursor: pointer; } .item:hover { color: var(--kg-primary, #41ab34); } .item.active { color: var(--kg-text, #1a1a1a); font-weight: 600; pointer-events: none; } .separator { color: var(--kg-text-muted, #999); opacity: 0.6; font-size: 0.85em; user-select: none; margin: 0 2px; } :host(:last-child) .separator { display: none; } `"
+            },
+            {
+              "kind": "method",
+              "name": "render"
+            },
+            {
+              "kind": "field",
+              "name": "active",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "separator",
+              "type": {
+                "text": "string"
+              },
+              "default": "'/'"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "kg-breadcrumb-item",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "kgbreadcrumbs",
+          "declaration": {
+            "name": "kgbreadcrumbs",
+            "module": "src/components/kg-breadcrumbs.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "kgbreadcrumbitem",
+          "declaration": {
+            "name": "kgbreadcrumbitem",
+            "module": "src/components/kg-breadcrumbs.js"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "kg-breadcrumbs",
+          "declaration": {
+            "name": "kgbreadcrumbs",
+            "module": "src/components/kg-breadcrumbs.js"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "kg-breadcrumb-item",
+          "declaration": {
+            "name": "kgbreadcrumbitem",
+            "module": "src/components/kg-breadcrumbs.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/components/kg-button.js",
@@ -2011,101 +2232,196 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/kg-loader.js",
+      "path": "src/components/kg-list.js",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "kgloader",
+          "name": "kglist",
           "members": [
-            {
-              "kind": "field",
-              "name": "properties",
-              "type": {
-                "text": "object"
-              },
-              "static": true,
-              "default": "{ src: { type: String }, text: { type: String }, visible: { type: Boolean, reflect: true }, glass: { type: Boolean, reflect: true } }"
-            },
             {
               "kind": "field",
               "name": "styles",
               "static": true,
-              "default": "css` :host { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 999999; background-color: var(--kg-bg, #ffffff); visibility: hidden; opacity: 0; transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); pointer-events: none; } :host([visible]) { visibility: visible; opacity: 1; pointer-events: auto; } :host([glass]) { background-color: rgba(255, 255, 255, 0.4); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); } /* Dark Mode Support */ :host-context([data-theme='dark']) { background-color: #0f172a; } :host-context([data-theme='dark']):host([glass]) { background-color: rgba(15, 23, 42, 0.6); } .loader-container { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; } /* Decorative Orbits */ .orbit { position: absolute; border: 2px solid var(--kg-primary); border-radius: 50%; opacity: 0.1; pointer-events: none; } .orbit-1 { width: 140px; height: 140px; animation: rotate 3s linear infinite; border-top-color: transparent; } .orbit-2 { width: 180px; height: 180px; animation: rotate 5s linear reverse infinite; border-right-color: transparent; } @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .loader-content { display: flex; flex-direction: column; align-items: center; gap: 1rem; text-align: center; padding: 3rem; z-index: 2; } .image-wrapper { position: relative; min-width: 140px; min-height: 140px; display: flex; align-items: center; justify-content: center; opacity: 0; transform: scale(0.8); transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); transition-delay: 0.1s; } :host([visible]) .image-wrapper { opacity: 1; transform: scale(1); } .loader-image { max-width: 200px; max-height: 140px; object-fit: contain; filter: drop-shadow(0 4px 12px rgba(0,0,0,0.1)); } .loader-info { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; opacity: 0; transform: translateY(10px); transition: all 0.6s ease; transition-delay: 0.3s; width: 100%; max-width: 240px; } :host([visible]) .loader-info { opacity: 1; transform: translateY(0); } .loader-text { font-size: 1.25rem; font-weight: 700; color: var(--kg-text, #1e293b); letter-spacing: -0.01em; } :host-context([data-theme='dark']) .loader-text { color: #f8fafc; } `"
+              "default": "css` :host { display: block; width: 100%; } .list-container { display: flex; flex-direction: column; gap: 2px; } ::slotted(kg-list-item:not(:last-child)) { border-bottom: 1px solid var(--kg-border, #eee); } `"
             },
             {
               "kind": "method",
               "name": "render"
-            },
-            {
-              "kind": "field",
-              "name": "src",
-              "type": {
-                "text": "string"
-              },
-              "default": "''"
-            },
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "kg-list",
+          "customElement": true
+        },
+        {
+          "kind": "class",
+          "description": "",
+          "name": "kglistitem",
+          "members": [
             {
               "kind": "field",
-              "name": "text",
+              "name": "properties",
               "type": {
-                "text": "string"
+                "text": "object"
               },
-              "default": "''"
+              "static": true,
+              "default": "{ active: { type: Boolean, reflect: true }, clickable: { type: Boolean, reflect: true }, }"
             },
             {
               "kind": "field",
-              "name": "visible",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false"
+              "name": "styles",
+              "static": true,
+              "default": "css` :host { display: block; } .item-wrapper { display: flex; align-items: center; gap: 1rem; padding: 0.75rem 1rem; transition: all 0.2s ease; background: transparent; border-radius: var(--kg-radius-sm, 4px); } :host([clickable]) .item-wrapper { cursor: pointer; } :host([clickable]:hover) .item-wrapper { background: var(--kg-bg-secondary, rgba(0,0,0,0.03)); } :host([active]) .item-wrapper { background: var(--kg-bg-secondary, rgba(0,0,0,0.05)); border-left: 3px solid var(--kg-primary); } .content { flex: 1; display: flex; flex-direction: column; gap: 2px; } ::slotted([slot=\"header\"]) { margin: 0; font-weight: 600; font-size: 0.95rem; color: var(--kg-text); } ::slotted([slot=\"description\"]) { margin: 0; font-size: 0.85rem; color: var(--kg-text-muted); } `"
             },
             {
-              "kind": "field",
-              "name": "glass",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false"
+              "kind": "method",
+              "name": "render"
             }
           ],
           "superclass": {
             "name": "LitElement",
             "package": "lit"
           },
-          "tagName": "kg-loader",
+          "tagName": "kg-list-item",
           "customElement": true
-        },
-        {
-          "kind": "variable",
-          "name": "loader",
-          "type": {
-            "text": "object"
-          },
-          "default": "{ _instance: null, show(options = {}) { if (!this._instance) { this._instance = document.createElement('kg-loader'); document.body.appendChild(this._instance); } this._instance.src = options.src !== undefined ? options.src : ''; this._instance.text = options.text !== undefined ? options.text : ''; this._instance.glass = options.glass !== undefined ? options.glass : true; // Ensure styles are applied before making visible requestAnimationFrame(() => { this._instance.visible = true; }); }, hide() { if (this._instance) { this._instance.visible = false; } } }"
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "kgloader",
+          "name": "kglist",
           "declaration": {
-            "name": "kgloader",
-            "module": "src/components/kg-loader.js"
+            "name": "kglist",
+            "module": "src/components/kg-list.js"
           }
         },
         {
-          "kind": "custom-element-definition",
-          "name": "kg-loader",
+          "kind": "js",
+          "name": "kglistitem",
           "declaration": {
-            "name": "kgloader",
-            "module": "src/components/kg-loader.js"
+            "name": "kglistitem",
+            "module": "src/components/kg-list.js"
           }
         },
         {
-          "kind": "js",
-          "name": "loader",
+          "kind": "custom-element-definition",
+          "name": "kg-list",
+          "declaration": {
+            "name": "kglist",
+            "module": "src/components/kg-list.js"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "kg-list-item",
+          "declaration": {
+            "name": "kglistitem",
+            "module": "src/components/kg-list.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/kg-loader.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "kgloader",
+          "members": [
+            {
+              "kind": "field",
+              "name": "properties",
+              "type": {
+                "text": "object"
+              },
+              "static": true,
+              "default": "{ src: { type: String }, text: { type: String }, visible: { type: Boolean, reflect: true }, glass: { type: Boolean, reflect: true } }"
+            },
+            {
+              "kind": "field",
+              "name": "styles",
+              "static": true,
+              "default": "css` :host { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 999999; background-color: var(--kg-bg, #ffffff); visibility: hidden; opacity: 0; transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); pointer-events: none; } :host([visible]) { visibility: visible; opacity: 1; pointer-events: auto; } :host([glass]) { background-color: rgba(255, 255, 255, 0.4); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); } /* Dark Mode Support */ :host-context([data-theme='dark']) { background-color: #0f172a; } :host-context([data-theme='dark']):host([glass]) { background-color: rgba(15, 23, 42, 0.6); } .loader-container { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; } /* Decorative Orbits */ .orbit { position: absolute; border: 2px solid var(--kg-primary); border-radius: 50%; opacity: 0.1; pointer-events: none; } .orbit-1 { width: 140px; height: 140px; animation: rotate 3s linear infinite; border-top-color: transparent; } .orbit-2 { width: 180px; height: 180px; animation: rotate 5s linear reverse infinite; border-right-color: transparent; } @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .loader-content { display: flex; flex-direction: column; align-items: center; gap: 1rem; text-align: center; padding: 3rem; z-index: 2; } .image-wrapper { position: relative; min-width: 140px; min-height: 140px; display: flex; align-items: center; justify-content: center; opacity: 0; transform: scale(0.8); transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); transition-delay: 0.1s; } :host([visible]) .image-wrapper { opacity: 1; transform: scale(1); } .loader-image { max-width: 200px; max-height: 140px; object-fit: contain; filter: drop-shadow(0 4px 12px rgba(0,0,0,0.1)); } .loader-info { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; opacity: 0; transform: translateY(10px); transition: all 0.6s ease; transition-delay: 0.3s; width: 100%; max-width: 240px; } :host([visible]) .loader-info { opacity: 1; transform: translateY(0); } .loader-text { font-size: 1.25rem; font-weight: 700; color: var(--kg-text, #1e293b); letter-spacing: -0.01em; } :host-context([data-theme='dark']) .loader-text { color: #f8fafc; } `"
+            },
+            {
+              "kind": "method",
+              "name": "render"
+            },
+            {
+              "kind": "field",
+              "name": "src",
+              "type": {
+                "text": "string"
+              },
+              "default": "''"
+            },
+            {
+              "kind": "field",
+              "name": "text",
+              "type": {
+                "text": "string"
+              },
+              "default": "''"
+            },
+            {
+              "kind": "field",
+              "name": "visible",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "glass",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "kg-loader",
+          "customElement": true
+        },
+        {
+          "kind": "variable",
+          "name": "loader",
+          "type": {
+            "text": "object"
+          },
+          "default": "{ _instance: null, show(options = {}) { if (!this._instance) { this._instance = document.createElement('kg-loader'); document.body.appendChild(this._instance); } this._instance.src = options.src !== undefined ? options.src : ''; this._instance.text = options.text !== undefined ? options.text : ''; this._instance.glass = options.glass !== undefined ? options.glass : true; // Ensure styles are applied before making visible requestAnimationFrame(() => { this._instance.visible = true; }); }, hide() { if (this._instance) { this._instance.visible = false; } } }"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "kgloader",
+          "declaration": {
+            "name": "kgloader",
+            "module": "src/components/kg-loader.js"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "kg-loader",
+          "declaration": {
+            "name": "kgloader",
+            "module": "src/components/kg-loader.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "loader",
           "declaration": {
             "name": "loader",
             "module": "src/components/kg-loader.js"
@@ -3470,6 +3786,95 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/kg-tag.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "kgtag",
+          "members": [
+            {
+              "kind": "field",
+              "name": "properties",
+              "type": {
+                "text": "object"
+              },
+              "static": true,
+              "default": "{ color: { type: String }, // primary, secondary, tertiary, error, success, info, warning size: { type: String }, // mini, tiny, small, medium, large pill: { type: Boolean }, basic: { type: Boolean }, closable: { type: Boolean }, }"
+            },
+            {
+              "kind": "field",
+              "name": "styles",
+              "static": true,
+              "default": "css` :host { display: inline-flex; } .tag { display: inline-flex; align-items: center; justify-content: center; padding: 0.25em 0.8em; border-radius: var(--kg-radius-sm, 4px); font-size: 0.85rem; font-weight: 600; line-height: 1; gap: 0.4em; background: var(--kg-bg-secondary, #eee); color: var(--kg-text, #333); border: 1px solid transparent; user-select: none; transition: all 0.2s ease; white-space: nowrap; } .pill { border-radius: 100px; } /* Sizes */ .mini { font-size: 0.65rem; padding: 0.2em 0.5em; } .tiny { font-size: 0.75rem; padding: 0.22em 0.6em; } .small { font-size: 0.8rem; padding: 0.25em 0.7em; } .medium { font-size: 0.9rem; padding: 0.3em 0.85em; } .large { font-size: 1rem; padding: 0.35em 1em; } /* Colors */ .primary { background: var(--kg-primary); color: white; } .secondary { background: var(--kg-secondary); color: white; } .tertiary { background: var(--kg-tertiary); color: white; } .error { background: #DB2828; color: white; } .success { background: #41ab34; color: white; } .warning { background: #FBB140; color: white; } /* Basic (Outlined) */ .basic { background: transparent; border-color: currentColor; color: var(--kg-text-muted); } .basic.primary { color: var(--kg-primary); } .basic.secondary { color: var(--kg-secondary); } .basic.tertiary { color: var(--kg-tertiary); } .basic.error { color: #DB2828; } .basic.success { color: #41ab34; } .close-icon { cursor: pointer; opacity: 0.7; display: flex; align-items: center; margin-right: -0.3em; font-size: 1.1em; } .close-icon:hover { opacity: 1; } /* Custom Colors */ .custom-color { background: var(--kg-tag-color); color: white; } .basic.custom-color { background: transparent; border-color: var(--kg-tag-color); color: var(--kg-tag-color); } `"
+            },
+            {
+              "kind": "method",
+              "name": "_handleClose",
+              "parameters": [
+                {
+                  "name": "e"
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "render"
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "string"
+              },
+              "default": "'medium'"
+            },
+            {
+              "kind": "field",
+              "name": "color",
+              "type": {
+                "text": "string"
+              },
+              "default": "''"
+            }
+          ],
+          "events": [
+            {
+              "name": "kg-close",
+              "type": {
+                "text": "CustomEvent"
+              }
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "kg-tag",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "kgtag",
+          "declaration": {
+            "name": "kgtag",
+            "module": "src/components/kg-tag.js"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "kg-tag",
+          "declaration": {
+            "name": "kgtag",
+            "module": "src/components/kg-tag.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/components/kg-text.js",
@@ -3810,6 +4215,239 @@
           }
         }
       ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/kg-tooltip.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "kgtooltip",
+          "members": [
+            {
+              "kind": "field",
+              "name": "properties",
+              "type": {
+                "text": "object"
+              },
+              "static": true,
+              "default": "{ content: { type: String }, position: { type: String, reflect: true }, // top, bottom, left, right trigger: { type: String, reflect: true }, // hover, click visible: { type: Boolean, reflect: true }, }"
+            },
+            {
+              "kind": "field",
+              "name": "styles",
+              "static": true,
+              "default": "css` :host { display: inline-block; position: relative; } .tooltip-trigger { display: inline-block; cursor: pointer; } .tooltip-content { position: absolute; background: #333; color: white; padding: 0.5rem 0.75rem; border-radius: 6px; font-size: 0.85rem; white-space: nowrap; z-index: 1000; opacity: 0; visibility: hidden; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 4px 12px rgba(0,0,0,0.15); pointer-events: none; } /* Position Styles */ .top { bottom: 100%; left: 50%; transform: translateX(-50%) translateY(-8px); margin-bottom: 8px; } .bottom { top: 100%; left: 50%; transform: translateX(-50%) translateY(8px); margin-top: 8px; } .left { top: 50%; right: 100%; transform: translateY(-50%) translateX(-8px); margin-right: 8px; } .right { top: 50%; left: 100%; transform: translateY(-50%) translateX(8px); margin-left: 8px; } /* Arrow */ .tooltip-content::after { content: ''; position: absolute; border: 5px solid transparent; } .top::after { top: 100%; left: 50%; transform: translateX(-50%); border-top-color: #333; } .bottom::after { bottom: 100%; left: 50%; transform: translateX(-50%); border-bottom-color: #333; } .left::after { left: 100%; top: 50%; transform: translateY(-50%); border-left-color: #333; } .right::after { right: 100%; top: 50%; transform: translateY(-50%); border-right-color: #333; } /* Visibility Logic */ :host([trigger=\"hover\"]:hover) .tooltip-content, :host([visible]) .tooltip-content { opacity: 1; visibility: visible; } /* Transform Adjustment for Visible State */ :host([trigger=\"hover\"]:hover) .tooltip-content.top, :host([visible]) .tooltip-content.top { transform: translateX(-50%) translateY(-4px); } :host([trigger=\"hover\"]:hover) .tooltip-content.bottom, :host([visible]) .tooltip-content.bottom { transform: translateX(-50%) translateY(4px); } :host([trigger=\"hover\"]:hover) .tooltip-content.left, :host([visible]) .tooltip-content.left { transform: translateY(-50%) translateX(-4px); } :host([trigger=\"hover\"]:hover) .tooltip-content.right, :host([visible]) .tooltip-content.right { transform: translateY(-50%) translateX(4px); } `"
+            },
+            {
+              "kind": "method",
+              "name": "_show"
+            },
+            {
+              "kind": "method",
+              "name": "_hide"
+            },
+            {
+              "kind": "method",
+              "name": "_handleOutsideClick",
+              "parameters": [
+                {
+                  "name": "e"
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "render"
+            },
+            {
+              "kind": "field",
+              "name": "position",
+              "type": {
+                "text": "string"
+              },
+              "default": "'top'"
+            },
+            {
+              "kind": "field",
+              "name": "trigger",
+              "type": {
+                "text": "string"
+              },
+              "default": "'hover'"
+            },
+            {
+              "kind": "field",
+              "name": "visible",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "kg-tooltip",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "kgtooltip",
+          "declaration": {
+            "name": "kgtooltip",
+            "module": "src/components/kg-tooltip.js"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "kg-tooltip",
+          "declaration": {
+            "name": "kgtooltip",
+            "module": "src/components/kg-tooltip.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/kg-tree.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "kgtree",
+          "members": [
+            {
+              "kind": "field",
+              "name": "styles",
+              "static": true,
+              "default": "css` :host { display: block; width: 100%; user-select: none; } .tree-container { display: flex; flex-direction: column; } `"
+            },
+            {
+              "kind": "method",
+              "name": "render"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "kg-tree",
+          "customElement": true
+        },
+        {
+          "kind": "class",
+          "description": "",
+          "name": "kgtreeitem",
+          "members": [
+            {
+              "kind": "field",
+              "name": "properties",
+              "type": {
+                "text": "object"
+              },
+              "static": true,
+              "default": "{ label: { type: String }, expanded: { type: Boolean, reflect: true }, selected: { type: Boolean, reflect: true }, level: { type: Number }, page: { type: String }, // For doc navigation }"
+            },
+            {
+              "kind": "field",
+              "name": "styles",
+              "static": true,
+              "default": "css` :host { display: block; } .item-row { display: flex; align-items: center; padding: 0.4rem 0.5rem; cursor: pointer; border-radius: var(--kg-radius-sm, 4px); transition: all 0.2s; gap: 0.4rem; font-size: 0.9rem; color: var(--kg-text-muted); } .item-row:hover { background: var(--kg-bg-secondary, rgba(0,0,0,0.03)); color: var(--kg-text); } :host([selected]) > .item-row { background: var(--kg-bg-secondary, rgba(0,0,0,0.05)); color: var(--kg-primary); font-weight: 600; } .arrow { width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; transition: transform 0.2s; opacity: 0.5; } :host([expanded]) > .item-row .arrow { transform: rotate(90deg); } .arrow-placeholder { width: 16px; } .children { display: none; padding-left: 1.2rem; } :host([expanded]) > .children { display: block; } /* Icon slot styling */ ::slotted([slot=\"icon\"]) { width: 16px; height: 16px; opacity: 0.7; } `"
+            },
+            {
+              "kind": "method",
+              "name": "_toggle",
+              "parameters": [
+                {
+                  "name": "e"
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "render"
+            },
+            {
+              "kind": "field",
+              "name": "expanded",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "selected",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "level",
+              "type": {
+                "text": "number"
+              },
+              "default": "0"
+            }
+          ],
+          "events": [
+            {
+              "name": "kg-select",
+              "type": {
+                "text": "CustomEvent"
+              }
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "kg-tree-item",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "kgtree",
+          "declaration": {
+            "name": "kgtree",
+            "module": "src/components/kg-tree.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "kgtreeitem",
+          "declaration": {
+            "name": "kgtreeitem",
+            "module": "src/components/kg-tree.js"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "kg-tree",
+          "declaration": {
+            "name": "kgtree",
+            "module": "src/components/kg-tree.js"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "kg-tree-item",
+          "declaration": {
+            "name": "kgtreeitem",
+            "module": "src/components/kg-tree.js"
+          }
+        }
+      ]
     }
   ]
 }