@lazhus/kg-ui 0.10.11 → 0.10.13

package/custom-elements.json

@@ -1520,13 +1520,13 @@
                 "text": "object"
               },
               "static": true,
-              "default": "{ columns: { type: Array }, // [{ label: 'Name', field: 'name', width: '100px', align: 'left', sortable: true }] data: { type: Array }, loading: { type: Boolean }, striped: { type: Boolean, reflect: true }, bordered: { type: Boolean, reflect: true }, hover: { type: Boolean, reflect: true }, selectable: { type: Boolean }, selectionMode: { type: String, attribute: 'selection-mode' }, // 'single' | 'multiple', default 'multiple' selectedRows: { type: Array, state: true }, // Row styling: (row) => string. Returns extra class name(s) for a row. // Property-only (no attribute) because the value is a function. rowClassName: { attribute: false }, // Sorting sortable: { type: Boolean }, // Global sort enable/disable _sortColumn: { type: String, state: true }, _sortDirection: { type: String, state: true }, // 'asc' | 'desc' // Pagination pagination: { type: Boolean }, pageSize: { type: Number, attribute: 'page-size' }, pageSizeOptions: { type: Array, attribute: 'page-size-options' }, total: { type: Number }, // Total records for server-side serverSide: { type: Boolean, attribute: 'server-side' }, currentPage: { type: Number, attribute: 'current-page' } }"
+              "default": "{ columns: { type: Array }, // [{ label: 'Name', field: 'name', width: '100px', align: 'left', sortable: true }] data: { type: Array }, loading: { type: Boolean }, striped: { type: Boolean, reflect: true }, bordered: { type: Boolean, reflect: true }, hover: { type: Boolean, reflect: true }, selectable: { type: Boolean }, selectionMode: { type: String, attribute: 'selection-mode' }, // 'single' | 'multiple', default 'multiple' selectedRows: { type: Array, state: true }, // Row styling: (row) => string. Returns extra class name(s) for a row. // Property-only (no attribute) because the value is a function. rowClassName: { attribute: false }, // Sorting sortable: { type: Boolean }, // Global sort enable/disable _sortColumn: { type: String, state: true }, _sortDirection: { type: String, state: true }, // 'asc' | 'desc' // Pagination pagination: { type: Boolean }, pageSize: { type: Number, attribute: 'page-size' }, pageSizeOptions: { type: Array, attribute: 'page-size-options' }, total: { type: Number }, // Total records for server-side serverSide: { type: Boolean, attribute: 'server-side' }, currentPage: { type: Number, attribute: 'current-page' }, // Sticky Header stickyHeader: { type: Boolean, reflect: true, attribute: 'sticky-header' }, maxHeight: { type: String, attribute: 'max-height' } }"
             },
             {
               "kind": "field",
               "name": "styles",
               "static": true,
-              "default": "css` :host { display: block; width: 100%; font-family: inherit; color: var(--kg-text); --datagrid-border: var(--kg-border, #e2e8f0); --datagrid-header-bg: var(--kg-surface, #f8fafc); --datagrid-selected-bg: rgba(var(--kg-primary-rgb, 65, 171, 52), 0.08); } .wrapper { display: flex; flex-direction: column; gap: 1rem; width: 100%; } .table-container { width: 100%; overflow-x: auto; border: 1px solid var(--datagrid-border); border-radius: var(--kg-radius-md, 8px); background: var(--kg-bg); } table { width: 100%; border-collapse: collapse; text-align: left; font-size: 0.9rem; } thead { background-color: var(--datagrid-header-bg); border-bottom: 2px solid var(--datagrid-border); } th { padding: 12px 16px; font-weight: 600; color: var(--kg-text-muted); user-select: none; transition: background 0.2s; } th.sortable { cursor: pointer; } th.sortable:hover { background-color: rgba(0,0,0,0.03); color: var(--kg-text); } td { padding: 12px 16px; border-bottom: 1px solid var(--datagrid-border); transition: background 0.2s; } tr:last-child td { border-bottom: none; } /* Modifiers */ :host([striped]) tbody tr:nth-child(even) { background-color: var(--kg-surface); } :host([bordered]) td, :host([bordered]) th { border-right: 1px solid var(--datagrid-border); } :host([bordered]) td:last-child, :host([bordered]) th:last-child { border-right: none; } tbody tr { transition: background-color 0.2s; } :host([hover]) tbody tr:hover { background-color: var(--datagrid-hover-bg, rgba(0, 0, 0, 0.04)); } /* Selection */ .checkbox-cell { width: 48px; text-align: center; padding: 0 8px; } /* kg-checkbox and kg-radio handle their own sizing and cursor */ tr.selected { background-color: var(--datagrid-selected-bg) !important; } /* Row status highlights (opt-in via the rowClassName property). Uses !important so it wins over the striped/hover modifiers. */ tbody tr.row-danger { background-color: var(--datagrid-row-danger-bg, #fdecea) !important; } /* Alignment */ .align-left { text-align: left; } .align-center { text-align: center; } .align-right { text-align: right; } /* Empty State */ .empty-state { padding: 3rem; text-align: center; color: var(--kg-text-muted); } /* Sort Icons */ .sort-icon { display: inline-block; margin-left: 4px; vertical-align: middle; opacity: 0.3; font-size: 0.8em; } th.sortable:hover .sort-icon { opacity: 0.7; } th.active-sort .sort-icon { opacity: 1; color: var(--kg-primary); } /* Pagination */ .pagination-footer { display: flex; align-items: center; justify-content: space-between; padding: 1rem 0; gap: 1rem; flex-wrap: wrap; border-top: 1px solid var(--datagrid-border); margin-top: -1px; /* Overlap with table border if needed, or keeping it separate */ } .pagination-info { font-size: 0.85rem; color: var(--kg-text-muted); font-weight: 500; } .pagination-controls { display: flex; align-items: center; gap: 0.25rem; } .page-size-selector { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; color: var(--kg-text-muted); } .page-size-select { padding: 4px 8px; border: 1px solid var(--datagrid-border); border-radius: var(--kg-radius-sm, 4px); background: var(--kg-surface); color: var(--kg-text); outline: none; cursor: pointer; } `"
+              "default": "css` :host { display: block; width: 100%; font-family: inherit; color: var(--kg-text); --datagrid-border: var(--kg-border, #e2e8f0); --datagrid-header-bg: var(--kg-surface, #f8fafc); --datagrid-selected-bg: rgba(var(--kg-primary-rgb, 65, 171, 52), 0.08); } .wrapper { display: flex; flex-direction: column; gap: 1rem; width: 100%; } .table-container { width: 100%; overflow-x: auto; border: 1px solid var(--datagrid-border); border-radius: var(--kg-radius-md, 8px); background: var(--kg-bg); } table { width: 100%; border-collapse: collapse; text-align: left; font-size: 0.9rem; } thead { background-color: var(--datagrid-header-bg); border-bottom: 2px solid var(--datagrid-border); } th { padding: 12px 16px; font-weight: 600; color: var(--kg-text-muted); user-select: none; transition: background 0.2s; } th.sortable { cursor: pointer; } th.sortable:hover { background-color: rgba(0,0,0,0.03); color: var(--kg-text); } td { padding: 12px 16px; border-bottom: 1px solid var(--datagrid-border); transition: background 0.2s; } tr:last-child td { border-bottom: none; } /* Modifiers */ :host([striped]) tbody tr:nth-child(even) { background-color: var(--kg-surface); } :host([bordered]) td, :host([bordered]) th { border-right: 1px solid var(--datagrid-border); } :host([bordered]) td:last-child, :host([bordered]) th:last-child { border-right: none; } tbody tr { transition: background-color 0.2s; } :host([hover]) tbody tr:hover { background-color: var(--datagrid-hover-bg, rgba(0, 0, 0, 0.04)); } /* Selection */ .checkbox-cell { width: 48px; text-align: center; padding: 0 8px; } /* kg-checkbox and kg-radio handle their own sizing and cursor */ tr.selected { background-color: var(--datagrid-selected-bg) !important; } /* Row status highlights (opt-in via the rowClassName property). Uses !important so it wins over the striped/hover modifiers. */ tbody tr.row-danger { background-color: var(--datagrid-row-danger-bg, #fdecea) !important; } /* Alignment */ .align-left { text-align: left; } .align-center { text-align: center; } .align-right { text-align: right; } /* Empty State */ .empty-state { padding: 3rem; text-align: center; color: var(--kg-text-muted); } /* Sort Icons */ .sort-icon { display: inline-block; margin-left: 4px; vertical-align: middle; opacity: 0.3; font-size: 0.8em; } th.sortable:hover .sort-icon { opacity: 0.7; } th.active-sort .sort-icon { opacity: 1; color: var(--kg-primary); } /* Pagination */ .pagination-footer { display: flex; align-items: center; justify-content: space-between; padding: 1rem 0; gap: 1rem; flex-wrap: wrap; border-top: 1px solid var(--datagrid-border); margin-top: -1px; /* Overlap with table border if needed, or keeping it separate */ } .pagination-info { font-size: 0.85rem; color: var(--kg-text-muted); font-weight: 500; } .pagination-controls { display: flex; align-items: center; gap: 0.25rem; } .page-size-selector { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; color: var(--kg-text-muted); } .page-size-select { padding: 4px 8px; border: 1px solid var(--datagrid-border); border-radius: var(--kg-radius-sm, 4px); background: var(--kg-surface); color: var(--kg-text); outline: none; cursor: pointer; } /* Sticky Header & Sticky Columns */ :host([sticky-header]) .table-container { overflow: auto; max-height: var(--datagrid-max-height, 70vh); } :host([sticky-header]) thead th { position: sticky; top: 0; z-index: 10; background-color: var(--datagrid-header-bg); box-shadow: inset 0 -1px 0 var(--datagrid-border); } th.sticky-col, td.sticky-col, th.sticky-checkbox, td.sticky-checkbox { position: sticky; } th.sticky-checkbox { left: 0; z-index: 15; background-color: var(--datagrid-header-bg); } :host([sticky-header]) th.sticky-checkbox { top: 0; left: 0; z-index: 25; background-color: var(--datagrid-header-bg); box-shadow: inset 0 -1px 0 var(--datagrid-border); } td.sticky-checkbox { left: 0; z-index: 8; background-color: var(--kg-bg, #ffffff); } th.sticky-col { z-index: 12; background-color: var(--datagrid-header-bg); } :host([sticky-header]) th.sticky-col { top: 0; z-index: 20; background-color: var(--datagrid-header-bg); box-shadow: inset 0 -1px 0 var(--datagrid-border), 2px 0 5px -2px rgba(0, 0, 0, 0.12); } td.sticky-col { z-index: 5; background-color: var(--kg-bg, #ffffff); box-shadow: 2px 0 5px -2px rgba(0, 0, 0, 0.12); } /* Striped rows */ :host([striped]) tbody tr:nth-child(even) td.sticky-col, :host([striped]) tbody tr:nth-child(even) td.sticky-checkbox { background-color: var(--kg-surface, #f8fafc); } /* Hover: Must remain completely opaque so scrolled columns behind do not bleed through */ :host([hover]) tbody tr:hover td.sticky-col, :host([hover]) tbody tr:hover td.sticky-checkbox { background-color: var(--kg-bg, #ffffff); background-image: linear-gradient(var(--datagrid-hover-bg, rgba(0, 0, 0, 0.04)), var(--datagrid-hover-bg, rgba(0, 0, 0, 0.04))), linear-gradient(var(--kg-bg, #ffffff), var(--kg-bg, #ffffff)); } :host([hover][striped]) tbody tr:nth-child(even):hover td.sticky-col, :host([hover][striped]) tbody tr:nth-child(even):hover td.sticky-checkbox { background-color: var(--kg-surface, #f8fafc); background-image: linear-gradient(var(--datagrid-hover-bg, rgba(0, 0, 0, 0.04)), var(--datagrid-hover-bg, rgba(0, 0, 0, 0.04))), linear-gradient(var(--kg-surface, #f8fafc), var(--kg-surface, #f8fafc)); } /* Selected rows */ tbody tr.selected td.sticky-col, tbody tr.selected td.sticky-checkbox, :host([hover]) tbody tr.selected:hover td.sticky-col, :host([hover]) tbody tr.selected:hover td.sticky-checkbox { background-color: var(--kg-bg, #ffffff) !important; background-image: linear-gradient(var(--datagrid-selected-bg, rgba(65, 171, 52, 0.08)), var(--datagrid-selected-bg, rgba(65, 171, 52, 0.08))), linear-gradient(var(--kg-bg, #ffffff), var(--kg-bg, #ffffff)) !important; } /* Row danger */ tbody tr.row-danger td.sticky-col, tbody tr.row-danger td.sticky-checkbox, :host([hover]) tbody tr.row-danger:hover td.sticky-col, :host([hover]) tbody tr.row-danger:hover td.sticky-checkbox { background-color: var(--datagrid-row-danger-bg, #fdecea) !important; background-image: none !important; } `"
             },
             {
               "kind": "method",
@@ -1660,6 +1660,31 @@
               "kind": "method",
               "name": "_getHeaderRows"
             },
+            {
+              "kind": "method",
+              "name": "_hasStickyColumn"
+            },
+            {
+              "kind": "method",
+              "name": "_isStickyCol",
+              "parameters": [
+                {
+                  "name": "col"
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_getStickyLeft",
+              "parameters": [
+                {
+                  "name": "col"
+                },
+                {
+                  "name": "colIndex"
+                }
+              ]
+            },
             {
               "kind": "method",
               "name": "render"
@@ -1792,6 +1817,22 @@
               },
               "default": "1"
             },
+            {
+              "kind": "field",
+              "name": "stickyHeader",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "maxHeight",
+              "type": {
+                "text": "string"
+              },
+              "default": "''"
+            },
             {
               "kind": "field",
               "name": "rowClassName",
@@ -6814,6 +6855,103 @@
         }
       ]
     },
+    {
+      "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",

package/dist/components/kg-datagrid.js

@@ -1,107 +1,107 @@
-var e=Object.defineProperty,t=(t,i,r)=>((t,i,r)=>i in t?e(t,i,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[i]=r)(t,"symbol"!=typeof i?i+"":i,r);import{LitElement as i,css as r,html as s}from"lit";import"lit/directives/class-map.js";import"./kg-checkbox.js";import"./kg-radio.js";import{unsafeHTML as a}from"lit/directives/unsafe-html.js";import"./kg-button.js";import"./kg-skeleton.js";class o extends i{constructor(){super(),this.columns=[],this.data=[],this.loading=!1,this.striped=!1,this.bordered=!1,this.hover=!0,this.selectable=!1,this.selectionMode="multiple",this.selectedRows=[],this.sortable=!1,this.pagination=!1,this.pageSize=10,this.pageSizeOptions=[10,20,50,100],this.total=0,this.serverSide=!1,this.currentPage=1,this.rowClassName=null,this._sortColumn=null,this._sortDirection=null}_handleSelectAll(e){if(!this.selectable||"single"===this.selectionMode)return;const t=e.detail.checked;this.selectedRows=t?[...this.data]:[],this._emitSelectionChange()}_handleRowSelect(e,t){if(this.selectable)if(t.stopPropagation(),"single"===this.selectionMode)this._isSelected(e)||(this.selectedRows=[e],this._emitSelectionChange());else{let i;i="change"===t.type&&void 0!==t.detail&&void 0!==t.detail.checked?t.detail.checked:!this._isSelected(e),this.selectedRows=i?[...this.selectedRows,e]:this.selectedRows.filter(t=>t!==e),this._emitSelectionChange()}}_isSelected(e){return this.selectedRows.includes(e)}_rowClasses(e){const t=[];if(this._isSelected(e)&&t.push("selected"),"function"==typeof this.rowClassName){const i=this.rowClassName(e);i&&t.push(i)}return t.join(" ")}_emitSelectionChange(){this.dispatchEvent(new CustomEvent("selection-change",{detail:{selectedRows:this.selectedRows},bubbles:!0,composed:!0}))}_handleSort(e){(e.sortable||this.sortable)&&(this._sortColumn===e.field?this._sortDirection="asc"===this._sortDirection?"desc":"asc":(this._sortColumn=e.field,this._sortDirection="asc"),this.dispatchEvent(new CustomEvent("sort",{detail:{column:this._sortColumn,direction:this._sortDirection},bubbles:!0,composed:!0})))}_getNormalizedPageSizeOptions(){let e=this.pageSizeOptions;if("string"==typeof e)try{e=JSON.parse(e)}catch(t){e=e.split(",").map(e=>Number(e.trim()))}return Array.isArray(e)&&0!==e.length||(e=[10,20,50,100]),e.map(e=>Number(e))}_getProcessedData(){if(this.serverSide)return{data:this.data||[],total:Number(this.total)||(this.data?this.data.length:0)};let e=[...this.data||[]];if(this._sortColumn&&e.sort((e,t)=>{const i=e[this._sortColumn],r=t[this._sortColumn];return i<r?"asc"===this._sortDirection?-1:1:i>r?"asc"===this._sortDirection?1:-1:0}),this.pagination){const t=Number(this.pageSize)||10,i=((Number(this.currentPage)||1)-1)*t,r=i+t;return{data:e.slice(i,r),total:e.length}}return{data:e,total:e.length}}_changePage(e){const t=Number(e);if(t<1)return;const i=Number(this.pageSize)||10,r=this.serverSide&&Number(this.total)||(this.data?this.data.length:0);if(t>Math.max(1,Math.ceil(r/i)))return;this.currentPage=t;const s={page:t,pageSize:i};this.dispatchEvent(new CustomEvent("page-change",{detail:s,bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("kg-page-change",{detail:s,bubbles:!0,composed:!0}))}_handlePageSizeChange(e){const t=parseInt(e.target.value,10)||10;this.pageSize=t,this.currentPage=1,this.requestUpdate();const i={pageSize:t,page:1},r={page:1,pageSize:t};this.dispatchEvent(new CustomEvent("page-size-change",{detail:i,bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("kg-page-size-change",{detail:i,bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("page-change",{detail:r,bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("kg-page-change",{detail:r,bubbles:!0,composed:!0}))}_renderCellContent(e,t){if(!e.render)return t[e.field];const i=e.render(t);return"string"==typeof i?a(i):i}_renderHeaderContent(e){if(e.headerRender){const t=e.headerRender(e);return"string"==typeof t?a(t):t}return e.label}_getMaxDepth(e){if(!e||0===e.length)return 1;let t=0;const i=(e,r)=>{t=Math.max(t,r),e.forEach(e=>{e.children&&e.children.length>0&&i(e.children,r+1)})};return i(e,1),t}_getLeafCount(e){return e.children&&0!==e.children.length?e.children.reduce((e,t)=>e+this._getLeafCount(t),0):1}_getLeafColumns(e=this.columns){if(!e)return[];const t=[],i=e=>{e.forEach(e=>{e.children&&e.children.length>0?i(e.children):t.push(e)})};return i(e),t}_getHeaderRows(){const e=this._getMaxDepth(this.columns),t=Array.from({length:e},()=>[]),i=(r,s)=>{r.forEach(r=>{const a=!r.children||0===r.children.length,o=this._getLeafCount(r),n=a?e-s:1;t[s].push({...r,colspan:o,rowspan:n}),r.children&&i(r.children,s+1)})};return i(this.columns,0),t}render(){const{data:e,total:t}=this._getProcessedData(),i=Number(this.pageSize)||10,r=Number(this.currentPage)||1,a=Number(t)||0,o=this.pagination?Math.max(1,Math.ceil(a/i)):1,n=this._getNormalizedPageSizeOptions(),l=this.data&&this.data.length>0&&this.selectedRows.length===this.data.length,d="single"===this.selectionMode,c=this._getHeaderRows(),h=c.length,g=this._getLeafColumns(),p=(()=>{const e=[],t=r-2,i=r+2+1;for(let r=1;r<=o;r++)(1===r||r===o||r>=t&&r<i)&&e.push(r);return e})();return s`
+var t=Object.defineProperty,e=(e,r,i)=>((e,r,i)=>r in e?t(e,r,{enumerable:!0,configurable:!0,writable:!0,value:i}):e[r]=i)(e,"symbol"!=typeof r?r+"":r,i);import{LitElement as r,css as i,html as a}from"lit";import"lit/directives/class-map.js";import"./kg-checkbox.js";import"./kg-radio.js";import{unsafeHTML as o}from"lit/directives/unsafe-html.js";import"./kg-button.js";import"./kg-skeleton.js";class s extends r{constructor(){super(),this.columns=[],this.data=[],this.loading=!1,this.striped=!1,this.bordered=!1,this.hover=!0,this.selectable=!1,this.selectionMode="multiple",this.selectedRows=[],this.sortable=!1,this.pagination=!1,this.pageSize=10,this.pageSizeOptions=[10,20,50,100],this.total=0,this.serverSide=!1,this.currentPage=1,this.stickyHeader=!1,this.maxHeight="",this.rowClassName=null,this._sortColumn=null,this._sortDirection=null}_handleSelectAll(t){if(!this.selectable||"single"===this.selectionMode)return;const e=t.detail.checked;this.selectedRows=e?[...this.data]:[],this._emitSelectionChange()}_handleRowSelect(t,e){if(this.selectable)if(e.stopPropagation(),"single"===this.selectionMode)this._isSelected(t)||(this.selectedRows=[t],this._emitSelectionChange());else{let r;r="change"===e.type&&void 0!==e.detail&&void 0!==e.detail.checked?e.detail.checked:!this._isSelected(t),this.selectedRows=r?[...this.selectedRows,t]:this.selectedRows.filter(e=>e!==t),this._emitSelectionChange()}}_isSelected(t){return this.selectedRows.includes(t)}_rowClasses(t){const e=[];if(this._isSelected(t)&&e.push("selected"),"function"==typeof this.rowClassName){const r=this.rowClassName(t);r&&e.push(r)}return e.join(" ")}_emitSelectionChange(){this.dispatchEvent(new CustomEvent("selection-change",{detail:{selectedRows:this.selectedRows},bubbles:!0,composed:!0}))}_handleSort(t){(t.sortable||this.sortable)&&(this._sortColumn===t.field?this._sortDirection="asc"===this._sortDirection?"desc":"asc":(this._sortColumn=t.field,this._sortDirection="asc"),this.dispatchEvent(new CustomEvent("sort",{detail:{column:this._sortColumn,direction:this._sortDirection},bubbles:!0,composed:!0})))}_getNormalizedPageSizeOptions(){let t=this.pageSizeOptions;if("string"==typeof t)try{t=JSON.parse(t)}catch(e){t=t.split(",").map(t=>Number(t.trim()))}return Array.isArray(t)&&0!==t.length||(t=[10,20,50,100]),t.map(t=>Number(t))}_getProcessedData(){if(this.serverSide)return{data:this.data||[],total:Number(this.total)||(this.data?this.data.length:0)};let t=[...this.data||[]];if(this._sortColumn&&t.sort((t,e)=>{const r=t[this._sortColumn],i=e[this._sortColumn];return r<i?"asc"===this._sortDirection?-1:1:r>i?"asc"===this._sortDirection?1:-1:0}),this.pagination){const e=Number(this.pageSize)||10,r=((Number(this.currentPage)||1)-1)*e,i=r+e;return{data:t.slice(r,i),total:t.length}}return{data:t,total:t.length}}_changePage(t){const e=Number(t);if(e<1)return;const r=Number(this.pageSize)||10,i=this.serverSide&&Number(this.total)||(this.data?this.data.length:0);if(e>Math.max(1,Math.ceil(i/r)))return;this.currentPage=e;const a={page:e,pageSize:r};this.dispatchEvent(new CustomEvent("page-change",{detail:a,bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("kg-page-change",{detail:a,bubbles:!0,composed:!0}))}_handlePageSizeChange(t){const e=parseInt(t.target.value,10)||10;this.pageSize=e,this.currentPage=1,this.requestUpdate();const r={pageSize:e,page:1},i={page:1,pageSize:e};this.dispatchEvent(new CustomEvent("page-size-change",{detail:r,bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("kg-page-size-change",{detail:r,bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("page-change",{detail:i,bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("kg-page-change",{detail:i,bubbles:!0,composed:!0}))}_renderCellContent(t,e){if(!t.render)return e[t.field];const r=t.render(e);return"string"==typeof r?o(r):r}_renderHeaderContent(t){if(t.headerRender){const e=t.headerRender(t);return"string"==typeof e?o(e):e}return t.label}_getMaxDepth(t){if(!t||0===t.length)return 1;let e=0;const r=(t,i)=>{e=Math.max(e,i),t.forEach(t=>{t.children&&t.children.length>0&&r(t.children,i+1)})};return r(t,1),e}_getLeafCount(t){return t.children&&0!==t.children.length?t.children.reduce((t,e)=>t+this._getLeafCount(e),0):1}_getLeafColumns(t=this.columns){if(!t)return[];const e=[],r=t=>{t.forEach(t=>{t.children&&t.children.length>0?r(t.children):e.push(t)})};return r(t),e}_getHeaderRows(){const t=this._getMaxDepth(this.columns),e=Array.from({length:t},()=>[]),r=(i,a)=>{i.forEach(i=>{const o=!i.children||0===i.children.length,s=this._getLeafCount(i),n=o?t-a:1;e[a].push({...i,colspan:s,rowspan:n}),i.children&&r(i.children,a+1)})};return r(this.columns,0),e}_hasStickyColumn(){return this._getLeafColumns().some(t=>this._isStickyCol(t))}_isStickyCol(t){return Boolean(t&&(t.sticky||"left"===t.fixed))}_getStickyLeft(t,e){if(!this._isStickyCol(t))return null;let r=0;this.selectable&&(r+=48);const i=this._getLeafColumns();for(let a=0;a<e;a++)this._isStickyCol(i[a])&&(r+=parseInt(i[a].width,10)||150);return`${r}px`}render(){const{data:t,total:e}=this._getProcessedData(),r=Number(this.pageSize)||10,i=Number(this.currentPage)||1,o=Number(e)||0,s=this.pagination?Math.max(1,Math.ceil(o/r)):1,n=this._getNormalizedPageSizeOptions(),d=this.data&&this.data.length>0&&this.selectedRows.length===this.data.length,c="single"===this.selectionMode,l=this._getHeaderRows(),h=l.length,g=this._getLeafColumns(),p=this._hasStickyColumn(),b=(()=>{const t=[],e=i-2,r=i+2+1;for(let i=1;i<=s;i++)(1===i||i===s||i>=e&&i<r)&&t.push(i);return t})();return a`
       <div class="wrapper">
-          <div class="table-container">
+          <div class="table-container" style="${this.maxHeight?`max-height: ${this.maxHeight};`:""}">
             <table>
               <thead>
-                ${c.map((e,t)=>s`
+                ${l.map((t,e)=>a`
                   <tr>
-                    ${0===t&&this.selectable?s`
-                      <th class="checkbox-cell" rowspan="${h}">
-                         ${d?"":s`
+                    ${0===e&&this.selectable?a`
+                      <th class="checkbox-cell ${p?"sticky-checkbox":""}" rowspan="${h}">
+                         ${c?"":a`
                           <kg-checkbox 
-                              .checked="${l}"
+                              .checked="${d}"
                               @change="${this._handleSelectAll}"
                           ></kg-checkbox>
                          `}
                       </th>
                     `:""}
                     
-                    ${e.map(e=>s`
+                    ${t.map((t,e)=>{const r=this._isStickyCol(t),i=this._getStickyLeft(t,e);let o=t.width?`width: ${t.width}; min-width: ${t.width}; max-width: ${t.width};`:"";return i&&(o+=` left: ${i};`),a`
                       <th 
-                          colspan="${e.colspan}"
-                          rowspan="${e.rowspan}"
-                          class="${e.sortable||this.sortable?"sortable":""} ${e.align?`align-${e.align}`:""} ${this._sortColumn===e.field?"active-sort":""}"
-                          style="${e.width?`width: ${e.width}; min-width: ${e.width}; max-width: ${e.width};`:""}"
-                          @click="${()=>e.children?null:this._handleSort(e)}"
+                          colspan="${t.colspan}"
+                          rowspan="${t.rowspan}"
+                          class="${t.sortable||this.sortable?"sortable":""} ${t.align?`align-${t.align}`:""} ${this._sortColumn===t.field?"active-sort":""} ${r?"sticky-col":""}"
+                          style="${o}"
+                          @click="${()=>t.children?null:this._handleSort(t)}"
                       >
-                        ${this._renderHeaderContent(e)}
-                        ${!e.sortable&&!this.sortable||e.children?"":s`
+                        ${this._renderHeaderContent(t)}
+                        ${!t.sortable&&!this.sortable||t.children?"":a`
                           <span class="sort-icon">
-                              ${this._sortColumn===e.field?"asc"===this._sortDirection?"▲":"▼":"⇅"}
+                              ${this._sortColumn===t.field?"asc"===this._sortDirection?"▲":"▼":"⇅"}
                           </span>
                         `}
                       </th>
-                    `)}
+                    `})}
                   </tr>
                 `)}
               </thead>
               <tbody>
-                ${this.loading?s`
-                    ${Array.from({length:this.pagination&&this.pageSize?this.pageSize:5}).map(()=>s`
+                ${this.loading?a`
+                    ${Array.from({length:this.pagination&&this.pageSize?this.pageSize:5}).map(()=>a`
                         <tr>
-                             ${this.selectable?s`
-                                <td class="checkbox-cell">
+                             ${this.selectable?a`
+                                <td class="checkbox-cell ${p?"sticky-checkbox":""}">
                                     <kg-skeleton variant="rect" width="16px" height="16px" style="border-radius: 4px; display: inline-block;"></kg-skeleton>
                                 </td>
                              `:""}
-                             ${g.map(()=>s`
-                                <td>
+                             ${g.map((t,e)=>{const r=this._isStickyCol(t),i=this._getStickyLeft(t,e);let o="";return i&&(o+=`left: ${i};`),a`
+                                <td class="${r?"sticky-col":""}" style="${o}">
                                     <kg-skeleton variant="text" width="${Math.floor(50*Math.random()+40)}%" height="1rem"></kg-skeleton>
                                 </td>
-                             `)}
+                             `})}
                         </tr>
                     `)}
-                `:0===e.length?s`
+                `:0===t.length?a`
                   <tr>
                      <td colspan="${g.length+(this.selectable?1:0)}" class="empty-state">
                         Veri bulunamadı.
                      </td>
                   </tr>
-                `:e.map(e=>s`
+                `:t.map(t=>a`
                   <tr
-                    class="${this._rowClasses(e)}"
-                    @click="${t=>this._handleRowSelect(e,t)}"
+                    class="${this._rowClasses(t)}"
+                    @click="${e=>this._handleRowSelect(t,e)}"
                   >
-                    ${this.selectable?s`
-                      <td class="checkbox-cell">
-                        ${d?s`
+                    ${this.selectable?a`
+                      <td class="checkbox-cell ${p?"sticky-checkbox":""}">
+                        ${c?a`
                             <kg-radio 
-                                .checked="${this._isSelected(e)}"
+                                .checked="${this._isSelected(t)}"
                                 style="pointer-events: none;" 
                             ></kg-radio>
-                        `:s`
+                        `:a`
                             <kg-checkbox 
-                                .checked="${this._isSelected(e)}"
-                                @change="${t=>this._handleRowSelect(e,t)}"
-                                @click="${e=>e.stopPropagation()}"
+                                .checked="${this._isSelected(t)}"
+                                @change="${e=>this._handleRowSelect(t,e)}"
+                                @click="${t=>t.stopPropagation()}"
                             ></kg-checkbox>
                         `}
                       </td>
                     `:""}
     
-                    ${g.map(t=>s`
-                      <td class="${t.align?`align-${t.align}`:""}">
-                        ${this._renderCellContent(t,e)}
+                    ${g.map((e,r)=>{const i=this._isStickyCol(e),o=this._getStickyLeft(e,r);let s="";return o&&(s+=`left: ${o};`),a`
+                      <td class="${e.align?`align-${e.align}`:""} ${i?"sticky-col":""}" style="${s}">
+                        ${this._renderCellContent(e,t)}
                       </td>
-                    `)}
+                    `})}
                   </tr>
                 `)}
               </tbody>
             </table>
           </div>
 
-          ${this.pagination&&a>0?s`
+          ${this.pagination&&o>0?a`
             <div class="pagination-footer">
                 <div style="display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap;">
                     <div class="pagination-info">
-                        Toplam <strong>${a}</strong> kayıttan <strong>${(r-1)*i+1} - ${Math.min(r*i,a)}</strong> arası gösteriliyor
+                        Toplam <strong>${o}</strong> kayıttan <strong>${(i-1)*r+1} - ${Math.min(i*r,o)}</strong> arası gösteriliyor
                     </div>
 
                     <div class="page-size-selector">
                         <span>Sayfa başına:</span>
-                        <select class="page-size-select" .value="${String(i)}" @change="${this._handlePageSizeChange}">
-                            ${n.map(e=>s`
-                                <option value="${e}" ?selected="${i===e}">${e}</option>
+                        <select class="page-size-select" .value="${String(r)}" @change="${this._handlePageSizeChange}">
+                            ${n.map(t=>a`
+                                <option value="${t}" ?selected="${r===t}">${t}</option>
                             `)}
                         </select>
                     </div>
@@ -133,22 +133,22 @@ var e=Object.defineProperty,t=(t,i,r)=>((t,i,r)=>i in t?e(t,i,{enumerable:!0,con
                     </kg-button>
 
                     <!-- Page Numbers -->
-                    ${p.map((e,t)=>s`
-                        ${t>0&&e-p[t-1]>1?s`<span class="pagination-info">...</span>`:""}
+                    ${b.map((t,e)=>a`
+                        ${e>0&&t-b[e-1]>1?a`<span class="pagination-info">...</span>`:""}
                         <kg-button 
-                            @click="${()=>this._changePage(e)}"
-                            color="${this.currentPage===e?"primary":"secondary"}"
-                            ?text="${this.currentPage!==e}"
+                            @click="${()=>this._changePage(t)}"
+                            color="${this.currentPage===t?"primary":"secondary"}"
+                            ?text="${this.currentPage!==t}"
                             size="medium"
                             square
                         >
-                            ${e}
+                            ${t}
                         </kg-button>
                     `)}
 
                     <!-- Next Page -->
                     <kg-button 
-                        ?disabled="${this.currentPage===o}"
+                        ?disabled="${this.currentPage===s}"
                         @click="${()=>this._changePage(this.currentPage+1)}"
                         text
                         color="secondary"
@@ -160,8 +160,8 @@ var e=Object.defineProperty,t=(t,i,r)=>((t,i,r)=>i in t?e(t,i,{enumerable:!0,con
                     
                     <!-- Last Page -->
                     <kg-button 
-                        ?disabled="${this.currentPage===o}"
-                        @click="${()=>this._changePage(o)}"
+                        ?disabled="${this.currentPage===s}"
+                        @click="${()=>this._changePage(s)}"
                         text
                         color="secondary"
                         size="medium"
@@ -173,7 +173,7 @@ var e=Object.defineProperty,t=(t,i,r)=>((t,i,r)=>i in t?e(t,i,{enumerable:!0,con
             </div>
           `:""}
       </div>
-    `}}t(o,"properties",{columns:{type:Array},data:{type:Array},loading:{type:Boolean},striped:{type:Boolean,reflect:!0},bordered:{type:Boolean,reflect:!0},hover:{type:Boolean,reflect:!0},selectable:{type:Boolean},selectionMode:{type:String,attribute:"selection-mode"},selectedRows:{type:Array,state:!0},rowClassName:{attribute:!1},sortable:{type:Boolean},_sortColumn:{type:String,state:!0},_sortDirection:{type:String,state:!0},pagination:{type:Boolean},pageSize:{type:Number,attribute:"page-size"},pageSizeOptions:{type:Array,attribute:"page-size-options"},total:{type:Number},serverSide:{type:Boolean,attribute:"server-side"},currentPage:{type:Number,attribute:"current-page"}}),t(o,"styles",r`
+    `}}e(s,"properties",{columns:{type:Array},data:{type:Array},loading:{type:Boolean},striped:{type:Boolean,reflect:!0},bordered:{type:Boolean,reflect:!0},hover:{type:Boolean,reflect:!0},selectable:{type:Boolean},selectionMode:{type:String,attribute:"selection-mode"},selectedRows:{type:Array,state:!0},rowClassName:{attribute:!1},sortable:{type:Boolean},_sortColumn:{type:String,state:!0},_sortDirection:{type:String,state:!0},pagination:{type:Boolean},pageSize:{type:Number,attribute:"page-size"},pageSizeOptions:{type:Array,attribute:"page-size-options"},total:{type:Number},serverSide:{type:Boolean,attribute:"server-side"},currentPage:{type:Number,attribute:"current-page"},stickyHeader:{type:Boolean,reflect:!0,attribute:"sticky-header"},maxHeight:{type:String,attribute:"max-height"}}),e(s,"styles",i`
     :host {
       display: block;
       width: 100%;
@@ -350,5 +350,99 @@ var e=Object.defineProperty,t=(t,i,r)=>((t,i,r)=>i in t?e(t,i,{enumerable:!0,con
         cursor: pointer;
     }
 
+    /* Sticky Header & Sticky Columns */
+    :host([sticky-header]) .table-container {
+      overflow: auto;
+      max-height: var(--datagrid-max-height, 70vh);
+    }
+
+    :host([sticky-header]) thead th {
+      position: sticky;
+      top: 0;
+      z-index: 10;
+      background-color: var(--datagrid-header-bg);
+      box-shadow: inset 0 -1px 0 var(--datagrid-border);
+    }
+
+    th.sticky-col,
+    td.sticky-col,
+    th.sticky-checkbox,
+    td.sticky-checkbox {
+      position: sticky;
+    }
+
+    th.sticky-checkbox {
+      left: 0;
+      z-index: 15;
+      background-color: var(--datagrid-header-bg);
+    }
+
+    :host([sticky-header]) th.sticky-checkbox {
+      top: 0;
+      left: 0;
+      z-index: 25;
+      background-color: var(--datagrid-header-bg);
+      box-shadow: inset 0 -1px 0 var(--datagrid-border);
+    }
+
+    td.sticky-checkbox {
+      left: 0;
+      z-index: 8;
+      background-color: var(--kg-bg, #ffffff);
+    }
+
+    th.sticky-col {
+      z-index: 12;
+      background-color: var(--datagrid-header-bg);
+    }
+
+    :host([sticky-header]) th.sticky-col {
+      top: 0;
+      z-index: 20;
+      background-color: var(--datagrid-header-bg);
+      box-shadow: inset 0 -1px 0 var(--datagrid-border), 2px 0 5px -2px rgba(0, 0, 0, 0.12);
+    }
+
+    td.sticky-col {
+      z-index: 5;
+      background-color: var(--kg-bg, #ffffff);
+      box-shadow: 2px 0 5px -2px rgba(0, 0, 0, 0.12);
+    }
+
+    /* Striped rows */
+    :host([striped]) tbody tr:nth-child(even) td.sticky-col,
+    :host([striped]) tbody tr:nth-child(even) td.sticky-checkbox {
+      background-color: var(--kg-surface, #f8fafc);
+    }
 
-  `),"undefined"==typeof customElements||customElements.get("kg-datagrid")||customElements.define("kg-datagrid",o);export{o as kgdatagrid};
+    /* Hover: Must remain completely opaque so scrolled columns behind do not bleed through */
+    :host([hover]) tbody tr:hover td.sticky-col,
+    :host([hover]) tbody tr:hover td.sticky-checkbox {
+      background-color: var(--kg-bg, #ffffff);
+      background-image: linear-gradient(var(--datagrid-hover-bg, rgba(0, 0, 0, 0.04)), var(--datagrid-hover-bg, rgba(0, 0, 0, 0.04))), linear-gradient(var(--kg-bg, #ffffff), var(--kg-bg, #ffffff));
+    }
+
+    :host([hover][striped]) tbody tr:nth-child(even):hover td.sticky-col,
+    :host([hover][striped]) tbody tr:nth-child(even):hover td.sticky-checkbox {
+      background-color: var(--kg-surface, #f8fafc);
+      background-image: linear-gradient(var(--datagrid-hover-bg, rgba(0, 0, 0, 0.04)), var(--datagrid-hover-bg, rgba(0, 0, 0, 0.04))), linear-gradient(var(--kg-surface, #f8fafc), var(--kg-surface, #f8fafc));
+    }
+
+    /* Selected rows */
+    tbody tr.selected td.sticky-col,
+    tbody tr.selected td.sticky-checkbox,
+    :host([hover]) tbody tr.selected:hover td.sticky-col,
+    :host([hover]) tbody tr.selected:hover td.sticky-checkbox {
+      background-color: var(--kg-bg, #ffffff) !important;
+      background-image: linear-gradient(var(--datagrid-selected-bg, rgba(65, 171, 52, 0.08)), var(--datagrid-selected-bg, rgba(65, 171, 52, 0.08))), linear-gradient(var(--kg-bg, #ffffff), var(--kg-bg, #ffffff)) !important;
+    }
+
+    /* Row danger */
+    tbody tr.row-danger td.sticky-col,
+    tbody tr.row-danger td.sticky-checkbox,
+    :host([hover]) tbody tr.row-danger:hover td.sticky-col,
+    :host([hover]) tbody tr.row-danger:hover td.sticky-checkbox {
+      background-color: var(--datagrid-row-danger-bg, #fdecea) !important;
+      background-image: none !important;
+    }
+  `),"undefined"==typeof customElements||customElements.get("kg-datagrid")||customElements.define("kg-datagrid",s);export{s as kgdatagrid};

package/dist/components/kg-tooltip.js

@@ -0,0 +1,95 @@
+var t=Object.defineProperty,o=(o,e,i)=>((o,e,i)=>e in o?t(o,e,{enumerable:!0,configurable:!0,writable:!0,value:i}):o[e]=i)(o,"symbol"!=typeof e?e+"":e,i);import{LitElement as e,css as i,html as r}from"lit";class n extends e{constructor(){super(),this.position="top",this.trigger="hover",this.visible=!1}_show(){"click"===this.trigger&&(this.visible=!this.visible)}_hide(){this.trigger}connectedCallback(){super.connectedCallback(),"click"===this.trigger&&document.addEventListener("click",this._handleOutsideClick.bind(this))}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("click",this._handleOutsideClick.bind(this))}_handleOutsideClick(t){this.visible&&!this.contains(t.target)&&(this.visible=!1)}render(){return r`
+      <div class="tooltip-trigger" 
+           @click="${this._show}"
+           role="tooltip" 
+           aria-haspopup="true">
+        <slot></slot>
+      </div>
+      <div class="tooltip-content ${this.position}">
+        ${this.content||r`<slot name="content"></slot>`}
+      </div>
+    `}}o(n,"properties",{content:{type:String},position:{type:String,reflect:!0},trigger:{type:String,reflect:!0},visible:{type:Boolean,reflect:!0}}),o(n,"styles",i`
+    :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); }
+  `),"undefined"==typeof customElements||customElements.get("kg-tooltip")||customElements.define("kg-tooltip",n);export{n as kgtooltip};

package/dist/index.js

@@ -1 +1 @@
-import{kgaccordionitem as o}from"./components/kg-accordion-item.js";import{kgaccordion as m}from"./components/kg-accordion.js";import{kgbutton as r}from"./components/kg-button.js";import{kgcard as t}from"./components/kg-card.js";import{kgcheckbox as s}from"./components/kg-checkbox.js";import{kgcolorpicker as p}from"./components/kg-colorpicker.js";import{kgcolumn as n}from"./components/kg-column.js";import{kgdatepicker as e}from"./components/kg-datepicker.js";import{kgdivider as i}from"./components/kg-divider.js";import{kgdrawer as c}from"./components/kg-drawer.js";import{kgfileupload as g}from"./components/kg-file-upload.js";import{kggrid as k}from"./components/kg-grid.js";import{kgdatagrid as f}from"./components/kg-datagrid.js";import{kginput as j}from"./components/kg-input.js";import{kgmodal as a}from"./components/kg-modal.js";import{kgradiogroup as d}from"./components/kg-radio-group.js";import{kgradio as l}from"./components/kg-radio.js";import{kgrow as b}from"./components/kg-row.js";import{kgselect as u}from"./components/kg-select.js";import{kgskeleton as x}from"./components/kg-skeleton.js";import{kgslider as w}from"./components/kg-slider.js";import{kgstepper as h}from"./components/kg-stepper.js";import{kgswitch as v}from"./components/kg-switch.js";import{kgtabpanel as q}from"./components/kg-tab-panel.js";import{kgtabs as y}from"./components/kg-tabs.js";import{kgtext as z}from"./components/kg-text.js";import{kgtextarea as A}from"./components/kg-textarea.js";import{kgtoast as B,toast as C}from"./components/kg-toast.js";import{kgimage as D}from"./components/kg-image.js";import{kgprogress as E}from"./components/kg-progress.js";import{kgspinner as F}from"./components/kg-spinner.js";import{kgloader as G,loader as H}from"./components/kg-loader.js";import{kgavatar as I}from"./components/kg-avatar.js";import{kgtag as J}from"./components/kg-tag.js";import{kgbreadcrumbitem as K,kgbreadcrumbs as L}from"./components/kg-breadcrumbs.js";import{kglink as M}from"./components/kg-link.js";import{kgtree as N,kgtreeitem as O}from"./components/kg-tree.js";import{kglist as P,kglistitem as Q}from"./components/kg-list.js";export{m as kgaccordion,o as kgaccordionitem,I as kgavatar,K as kgbreadcrumbitem,L as kgbreadcrumbs,r as kgbutton,t as kgcard,s as kgcheckbox,p as kgcolorpicker,n as kgcolumn,f as kgdatagrid,e as kgdatepicker,i as kgdivider,c as kgdrawer,g as kgfileupload,k as kggrid,D as kgimage,j as kginput,M as kglink,P as kglist,Q as kglistitem,G as kgloader,a as kgmodal,E as kgprogress,l as kgradio,d as kgradiogroup,b as kgrow,u as kgselect,x as kgskeleton,w as kgslider,F as kgspinner,h as kgstepper,v as kgswitch,q as kgtabpanel,y as kgtabs,J as kgtag,z as kgtext,A as kgtextarea,B as kgtoast,N as kgtree,O as kgtreeitem,H as loader,C as toast};
+import{kgaccordionitem as o}from"./components/kg-accordion-item.js";import{kgaccordion as m}from"./components/kg-accordion.js";import{kgbutton as r}from"./components/kg-button.js";import{kgcard as t}from"./components/kg-card.js";import{kgcheckbox as p}from"./components/kg-checkbox.js";import{kgcolorpicker as s}from"./components/kg-colorpicker.js";import{kgcolumn as n}from"./components/kg-column.js";import{kgdatepicker as e}from"./components/kg-datepicker.js";import{kgdivider as i}from"./components/kg-divider.js";import{kgdrawer as c}from"./components/kg-drawer.js";import{kgfileupload as g}from"./components/kg-file-upload.js";import{kggrid as k}from"./components/kg-grid.js";import{kgdatagrid as f}from"./components/kg-datagrid.js";import{kginput as j}from"./components/kg-input.js";import{kgmodal as a}from"./components/kg-modal.js";import{kgradiogroup as d}from"./components/kg-radio-group.js";import{kgradio as l}from"./components/kg-radio.js";import{kgrow as b}from"./components/kg-row.js";import{kgselect as u}from"./components/kg-select.js";import{kgskeleton as x}from"./components/kg-skeleton.js";import{kgslider as w}from"./components/kg-slider.js";import{kgstepper as h}from"./components/kg-stepper.js";import{kgswitch as v}from"./components/kg-switch.js";import{kgtabpanel as q}from"./components/kg-tab-panel.js";import{kgtabs as y}from"./components/kg-tabs.js";import{kgtext as z}from"./components/kg-text.js";import{kgtextarea as A}from"./components/kg-textarea.js";import{kgtoast as B,toast as C}from"./components/kg-toast.js";import{kgimage as D}from"./components/kg-image.js";import{kgprogress as E}from"./components/kg-progress.js";import{kgspinner as F}from"./components/kg-spinner.js";import{kgloader as G,loader as H}from"./components/kg-loader.js";import{kgavatar as I}from"./components/kg-avatar.js";import{kgtag as J}from"./components/kg-tag.js";import{kgbreadcrumbitem as K,kgbreadcrumbs as L}from"./components/kg-breadcrumbs.js";import{kglink as M}from"./components/kg-link.js";import{kgtree as N,kgtreeitem as O}from"./components/kg-tree.js";import{kglist as P,kglistitem as Q}from"./components/kg-list.js";import{kgtooltip as R}from"./components/kg-tooltip.js";export{m as kgaccordion,o as kgaccordionitem,I as kgavatar,K as kgbreadcrumbitem,L as kgbreadcrumbs,r as kgbutton,t as kgcard,p as kgcheckbox,s as kgcolorpicker,n as kgcolumn,f as kgdatagrid,e as kgdatepicker,i as kgdivider,c as kgdrawer,g as kgfileupload,k as kggrid,D as kgimage,j as kginput,M as kglink,P as kglist,Q as kglistitem,G as kgloader,a as kgmodal,E as kgprogress,l as kgradio,d as kgradiogroup,b as kgrow,u as kgselect,x as kgskeleton,w as kgslider,F as kgspinner,h as kgstepper,v as kgswitch,q as kgtabpanel,y as kgtabs,J as kgtag,z as kgtext,A as kgtextarea,B as kgtoast,R as kgtooltip,N as kgtree,O as kgtreeitem,H as loader,C as toast};

package/dist/react/KgTooltip.js

@@ -0,0 +1 @@
+import e from"react";import{o}from"../chunks/create-component-jQ1kjF1Z.js";import{kgtooltip as t}from"../components/kg-tooltip.js";"undefined"==typeof customElements||customElements.get("kg-tooltip")||customElements.define("kg-tooltip",t);const n=o({tagName:"kg-tooltip",elementClass:t,react:e,events:{onClick:"click",onKeyDown:"keydown",onKeyUp:"keyup"}});export{n as KgTooltip};

package/dist/react/index.js

@@ -1 +1 @@
-import{KgAccordion as r}from"./KgAccordion.js";import{KgAccordionItem as o}from"./KgAccordionItem.js";import{KgAvatar as m}from"./KgAvatar.js";import{KgBreadcrumbItem as t}from"./KgBreadcrumbItem.js";import{KgBreadcrumbs as i}from"./KgBreadcrumbs.js";import{KgButton as p}from"./KgButton.js";import{KgCard as s}from"./KgCard.js";import{KgCheckbox as g}from"./KgCheckbox.js";import{KgColorPicker as f}from"./KgColorPicker.js";import{KgColumn as j}from"./KgColumn.js";import{KgDataGrid as K}from"./KgDataGrid.js";import{KgDatePicker as e}from"./KgDatePicker.js";import{KgDivider as a}from"./KgDivider.js";import{KgDrawer as d}from"./KgDrawer.js";import{KgFileUpload as c}from"./KgFileUpload.js";import{KgGrid as n}from"./KgGrid.js";import{KgImage as l}from"./KgImage.js";import{KgInput as T}from"./KgInput.js";import{KgLink as u}from"./KgLink.js";import{KgList as I}from"./KgList.js";import{KgListItem as S}from"./KgListItem.js";import{KgLoader as b}from"./KgLoader.js";import{KgModal as k}from"./KgModal.js";import{KgProgress as x}from"./KgProgress.js";import{KgRadio as C}from"./KgRadio.js";import{KgRadioGroup as D}from"./KgRadioGroup.js";import{KgRow as L}from"./KgRow.js";import{KgSelect as P}from"./KgSelect.js";import{KgSkeleton as w}from"./KgSkeleton.js";import{KgSlider as A}from"./KgSlider.js";import{KgSpinner as B}from"./KgSpinner.js";import{KgStepper as G}from"./KgStepper.js";import{KgSwitch as R}from"./KgSwitch.js";import{KgTabPanel as h}from"./KgTabPanel.js";import{KgTabs as v}from"./KgTabs.js";import{KgTag as F}from"./KgTag.js";import{KgText as M}from"./KgText.js";import{KgTextarea as U}from"./KgTextarea.js";import{KgToast as q}from"./KgToast.js";import{KgTree as y}from"./KgTree.js";import{KgTreeItem as z}from"./KgTreeItem.js";export{r as KgAccordion,o as KgAccordionItem,m as KgAvatar,t as KgBreadcrumbItem,i as KgBreadcrumbs,p as KgButton,s as KgCard,g as KgCheckbox,f as KgColorPicker,j as KgColumn,K as KgDataGrid,e as KgDatePicker,a as KgDivider,d as KgDrawer,c as KgFileUpload,n as KgGrid,l as KgImage,T as KgInput,u as KgLink,I as KgList,S as KgListItem,b as KgLoader,k as KgModal,x as KgProgress,C as KgRadio,D as KgRadioGroup,L as KgRow,P as KgSelect,w as KgSkeleton,A as KgSlider,B as KgSpinner,G as KgStepper,R as KgSwitch,h as KgTabPanel,v as KgTabs,F as KgTag,M as KgText,U as KgTextarea,q as KgToast,y as KgTree,z as KgTreeItem};
+import{KgAccordion as r}from"./KgAccordion.js";import{KgAccordionItem as o}from"./KgAccordionItem.js";import{KgAvatar as m}from"./KgAvatar.js";import{KgBreadcrumbItem as t}from"./KgBreadcrumbItem.js";import{KgBreadcrumbs as i}from"./KgBreadcrumbs.js";import{KgButton as p}from"./KgButton.js";import{KgCard as s}from"./KgCard.js";import{KgCheckbox as g}from"./KgCheckbox.js";import{KgColorPicker as f}from"./KgColorPicker.js";import{KgColumn as j}from"./KgColumn.js";import{KgDataGrid as K}from"./KgDataGrid.js";import{KgDatePicker as e}from"./KgDatePicker.js";import{KgDivider as a}from"./KgDivider.js";import{KgDrawer as d}from"./KgDrawer.js";import{KgFileUpload as c}from"./KgFileUpload.js";import{KgGrid as l}from"./KgGrid.js";import{KgImage as n}from"./KgImage.js";import{KgInput as T}from"./KgInput.js";import{KgLink as u}from"./KgLink.js";import{KgList as I}from"./KgList.js";import{KgListItem as S}from"./KgListItem.js";import{KgLoader as b}from"./KgLoader.js";import{KgModal as k}from"./KgModal.js";import{KgProgress as x}from"./KgProgress.js";import{KgRadio as C}from"./KgRadio.js";import{KgRadioGroup as D}from"./KgRadioGroup.js";import{KgRow as L}from"./KgRow.js";import{KgSelect as P}from"./KgSelect.js";import{KgSkeleton as w}from"./KgSkeleton.js";import{KgSlider as A}from"./KgSlider.js";import{KgSpinner as B}from"./KgSpinner.js";import{KgStepper as G}from"./KgStepper.js";import{KgSwitch as R}from"./KgSwitch.js";import{KgTabPanel as h}from"./KgTabPanel.js";import{KgTabs as v}from"./KgTabs.js";import{KgTag as F}from"./KgTag.js";import{KgText as M}from"./KgText.js";import{KgTextarea as U}from"./KgTextarea.js";import{KgToast as q}from"./KgToast.js";import{KgTooltip as y}from"./KgTooltip.js";import{KgTree as z}from"./KgTree.js";import{KgTreeItem as E}from"./KgTreeItem.js";export{r as KgAccordion,o as KgAccordionItem,m as KgAvatar,t as KgBreadcrumbItem,i as KgBreadcrumbs,p as KgButton,s as KgCard,g as KgCheckbox,f as KgColorPicker,j as KgColumn,K as KgDataGrid,e as KgDatePicker,a as KgDivider,d as KgDrawer,c as KgFileUpload,l as KgGrid,n as KgImage,T as KgInput,u as KgLink,I as KgList,S as KgListItem,b as KgLoader,k as KgModal,x as KgProgress,C as KgRadio,D as KgRadioGroup,L as KgRow,P as KgSelect,w as KgSkeleton,A as KgSlider,B as KgSpinner,G as KgStepper,R as KgSwitch,h as KgTabPanel,v as KgTabs,F as KgTag,M as KgText,U as KgTextarea,q as KgToast,y as KgTooltip,z as KgTree,E as KgTreeItem};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lazhus/kg-ui",
-  "version": "0.10.11",
+  "version": "0.10.13",
   "type": "module",
   "files": [
     "dist",

package/types/components/kg-datagrid.d.ts

@@ -35,6 +35,10 @@ export class kgdatagrid extends LitElement {
   /**  */
   currentPage: number;
   /**  */
+  stickyHeader: boolean;
+  /**  */
+  maxHeight: string;
+  /**  */
   rowClassName: ((row: any) => string) | null;
 }
 
@@ -62,6 +66,8 @@ declare global {
       total?: number;
       serverSide?: boolean;
       currentPage?: number;
+      stickyHeader?: boolean;
+      maxHeight?: string;
       rowClassName?: ((row: any) => string) | null;
       onSelectionChange?: (e: any) => void;
       onSort?: (e: any) => void;

package/types/components/kg-tooltip.d.ts

@@ -0,0 +1,31 @@
+import { LitElement } from 'lit';
+
+/** @customElement kg-tooltip */
+export class kgtooltip extends LitElement {
+  /**  */
+  position: string;
+  /**  */
+  trigger: string;
+  /**  */
+  visible: boolean;
+  /** Generated from static properties */
+  content: string;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'kg-tooltip': kgtooltip;
+  }
+
+  namespace JSX {
+    interface IntrinsicElements {
+      'kg-tooltip': {
+      position?: string;
+      trigger?: string;
+      visible?: boolean;
+      content?: string;
+        [key: string]: any;
+      };
+    }
+  }
+}

package/types/index.d.ts

@@ -39,6 +39,7 @@ export { kgtag } from './components/kg-tag';
 export { kgtext } from './components/kg-text';
 export { kgtextarea } from './components/kg-textarea';
 export { kgtoast } from './components/kg-toast';
+export { kgtooltip } from './components/kg-tooltip';
 export { kgtree } from './components/kg-tree';
 export { kgtreeitem } from './components/kg-tree';
 
@@ -83,6 +84,7 @@ declare global {
     'kg-text': kgtext;
     'kg-textarea': kgtextarea;
     'kg-toast': kgtoast;
+    'kg-tooltip': kgtooltip;
     'kg-tree': kgtree;
     'kg-tree-item': kgtreeitem;
   }
@@ -206,6 +208,8 @@ declare global {
       total?: number;
       serverSide?: boolean;
       currentPage?: number;
+      stickyHeader?: boolean;
+      maxHeight?: string;
       rowClassName?: ((row: any) => string) | null;
       onSelectionChange?: (e: any) => void;
       onSort?: (e: any) => void;
@@ -502,6 +506,13 @@ declare global {
       onKgClose?: (e: any) => void;
       [key: string]: any;
     };
+    'kg-tooltip': {
+      position?: string;
+      trigger?: string;
+      visible?: boolean;
+      content?: string;
+      [key: string]: any;
+    };
     'kg-tree': {
 
       [key: string]: any;

package/types/react/KgTooltip.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { kgtooltip } from '../components/kg-tooltip';
+
+export const KgTooltip: React.ForwardRefExoticComponent<Partial<Omit<kgtooltip, keyof HTMLElement>> & React.HTMLAttributes<kgtooltip> & React.RefAttributes<kgtooltip> & {
+  [key: string]: any;
+}>;

package/types/react/index.d.ts

@@ -37,5 +37,6 @@ export { KgTag } from './KgTag';
 export { KgText } from './KgText';
 export { KgTextarea } from './KgTextarea';
 export { KgToast } from './KgToast';
+export { KgTooltip } from './KgTooltip';
 export { KgTree } from './KgTree';
 export { KgTreeItem } from './KgTreeItem';