update, fixed table issues

projects/docs/public/llm-ctx.txt

@@ -37,14 +37,17 @@ export const appConfig: ApplicationConfig = {
 
 #### Tailwind Configuration (tailwind.config.js)
 ```javascript
-const { tolleUi } = require('@tolle_/tolle-ui/tailwind');
-
+/** @type {import('tailwindcss').Config} */
 module.exports = {
+  darkMode: 'class',
+  presets: [
+    require('@tolle_/tolle-ui/preset') // Point to your library preset
+  ],
   content: [
     "./src/**/*.{html,ts}",
-    "./node_modules/@tolle_/tolle-ui/**/*.{html,ts,mjs}"
+    "./node_modules/@tolle_/tolle-ui/**/*.{html,ts,mjs,html}"
   ],
-  plugins: [tolleUi()],
+  plugins: [],
 };
 ```
 
@@ -53,7 +56,7 @@ module.exports = {
 {
   "styles": [
     "src/styles.css",
-    "node_modules/@tolle_/tolle-ui/styles/theme.css"
+    "node_modules/@tolle_/tolle-ui/theme.css"
   ]
 }
 ```
@@ -1806,32 +1809,25 @@ export const appConfig: ApplicationConfig = {
 {
   "styles": [
     "src/styles.css",
-    "node_modules/@tolle_/tolle-ui/styles/theme.css" 
+    "node_modules/@tolle_/tolle-ui/styles/theme.css"
   ]
 }
 ```
 
 #### tailwindConfig
 ```html
-const { tolleUi } = require('@tolle_/tolle-ui/tailwind');
-
 /** @type {import('tailwindcss').Config} */
 module.exports = {
+  darkMode: 'class',
+  presets: [
+    require('@tolle_/tolle-ui/preset') // Point to your library preset
+  ],
   content: [
     "./src/**/*.{html,ts}",
-    // Include Tolle UI sources
-    "./node_modules/@tolle_/tolle-ui/**/*.{html,ts,mjs}"
-  ],
-  theme: {
-    extend: {},
-  },
-  plugins: [
-    tolleUi({
-       // Optional: override prefix
-       // prefix: 'tolle-'
-    })
+    "./node_modules/@tolle_/tolle-ui/**/*.{html,ts,mjs,html}"
   ],
-}
+  plugins: [],
+};
 ```
 
 

projects/docs/src/app/components/alert-dialog-docs/alert-dialog-interactive/alert-dialog-interactive.component.ts

@@ -66,7 +66,15 @@ import { ButtonComponent } from '../../../../../../tolle/src/lib/button.componen
             </tolle-alert-dialog-portal>
           </tolle-alert-dialog>
 
-          <tolle-button (click)="openFromService()">Service-based Trigger</tolle-button>
+          <div class="flex flex-wrap gap-2">
+            <tolle-button (click)="openFromService('xs')">Size: XS</tolle-button>
+            <tolle-button (click)="openFromService('sm')">Size: SM</tolle-button>
+            <tolle-button (click)="openFromService('md')">Size: MD</tolle-button>
+            <tolle-button (click)="openFromService('lg')">Size: LG</tolle-button>
+            <tolle-button (click)="openFromService('xl')">Size: XL</tolle-button>
+            <tolle-button (click)="openFromService('2xl')">Size: 2XL</tolle-button>
+            <tolle-button (click)="openFromService('full')">Size: Full</tolle-button>
+          </div>
         </div>
       </app-playground>
     </section>
@@ -75,12 +83,13 @@ import { ButtonComponent } from '../../../../../../tolle/src/lib/button.componen
 export class AlertDialogInteractiveComponent {
   private alertDialog = inject(AlertDialogService);
 
-  openFromService() {
+  openFromService(size: any = 'lg') {
     this.alertDialog.open({
       title: "Delete Project?",
       description: "This will permanently delete the selected project. This action cannot be undone.",
       actionText: "Delete",
-      variant: "destructive"
+      variant: "destructive",
+      size: size
     });
   }
 

projects/docs/src/app/components/data-table-docs/data-table-docs.component.html

@@ -6,6 +6,7 @@
     <app-column-hiding-docs id="column-hiding" />
     <app-pagination-docs id="pagination" />
     <app-searchable-docs id="searchable" />
+    <app-sticky-docs id="sticky-header" />
     <app-data-table-api id="api-reference" />
   </div>
 
@@ -55,6 +56,12 @@
           </li>
         </ul>
       </li>
+      <li>
+        <a (click)="baseService.scrollTo('sticky-header')"
+          class="block cursor-pointer text-[0.8rem] text-muted-foreground transition-all duration-200 hover:ml-2 hover:text-foreground">
+          Sticky Header
+        </a>
+      </li>
       <li>
         <a (click)="baseService.scrollTo('api-reference')"
           class="block cursor-pointer text-[0.8rem] text-muted-foreground transition-all duration-200 hover:ml-2 hover:text-foreground">
@@ -63,4 +70,4 @@
       </li>
     </ul>
   </ng-template>
-</app-docs-wrapper>
+</app-docs-wrapper>

projects/docs/src/app/components/data-table-docs/data-table-docs.component.ts

@@ -7,8 +7,9 @@ import { ColumnHidingDocsComponent } from './column-hiding-docs/column-hiding-do
 import { PaginationDocsComponent } from './pagination-docs/pagination-docs.component';
 import { SearchableDocsComponent } from './searchable-docs/searchable-docs.component';
 import { DataTableApiComponent } from './data-table-api/data-table-api.component';
-import { DocsWrapperComponent } from '../shared/docs-wrapper/docs-wrapper.component';
 
+import { DocsWrapperComponent } from '../shared/docs-wrapper/docs-wrapper.component';
+import { StickyDocsComponent } from './sticky-docs/sticky-docs.component';
 
 @Component({
   selector: 'app-data-table-docs',
@@ -21,7 +22,8 @@ import { DocsWrapperComponent } from '../shared/docs-wrapper/docs-wrapper.compon
     PaginationDocsComponent,
     SearchableDocsComponent,
     DataTableApiComponent,
-    DocsWrapperComponent
+    DocsWrapperComponent,
+    StickyDocsComponent
 
   ],
   templateUrl: './data-table-docs.component.html',

projects/docs/src/app/components/data-table-docs/sticky-docs/sticky-docs.component.html

@@ -0,0 +1,55 @@
+<section class="mb-16" id="sticky-header">
+    <h2 class="text-2xl font-bold mb-6 flex items-center">
+        Sticky Header
+    </h2>
+
+    <div class="space-y-4">
+        <div class="w-full md:w-1/4">
+            <tolle-segment [items]="viewOptions" [(ngModel)]="activeCallback" />
+        </div>
+
+        <div *ngIf="activeCallback === 'preview'"
+            class="p-4 rounded-lg bg-background flex flex-col gap-4 justify-center items-center border border-border">
+            <div class="w-full">
+                <app-sticky />
+            </div>
+        </div>
+
+        <div *ngIf="activeCallback === 'code'"
+            class="w-full rounded-xl bg-neutral-900 border border-neutral-800 overflow-hidden">
+            <div class="w-full md:w-1/4 p-2">
+                <tolle-segment [items]="codeOptions" [(ngModel)]="codeType" />
+            </div>
+
+            <ng-container *ngIf="codeType === 'html'">
+                <div class="flex items-center justify-between px-4 py-2 border-b border-neutral-800">
+                    <div class="flex items-center gap-2 text-neutral-300 text-sm font-medium">
+                        <span class="w-3 h-3 rounded-full bg-green-600"></span>
+                        <span class="w-3 h-3 rounded-full bg-yellow-500"></span>
+                        <span class="w-3 h-3 rounded-full bg-red-600"></span>
+                    </div>
+                    <button *ngIf="htmlCode$ | async as code" (click)="baseService.copyTo(code)"
+                        class="text-neutral-400 hover:text-neutral-200 transition">
+                        <i class="ri-file-copy-line"></i>
+                    </button>
+                </div>
+                <app-base-editor [code]="(htmlCode$ | async) ?? ''" language="html" />
+            </ng-container>
+
+            <ng-container *ngIf="codeType === 'typescript'">
+                <div class="flex items-center justify-between px-4 py-2 border-b border-neutral-800">
+                    <div class="flex items-center gap-2 text-neutral-300 text-sm font-medium">
+                        <span class="w-3 h-3 rounded-full bg-green-600"></span>
+                        <span class="w-3 h-3 rounded-full bg-yellow-500"></span>
+                        <span class="w-3 h-3 rounded-full bg-red-600"></span>
+                    </div>
+                    <button *ngIf="tsCode$ | async as code" (click)="baseService.copyTo(code)"
+                        class="text-neutral-400 hover:text-neutral-200 transition">
+                        <i class="ri-file-copy-line"></i>
+                    </button>
+                </div>
+                <app-base-editor [code]="(tsCode$ | async) ?? ''" language="javascript" />
+            </ng-container>
+        </div>
+    </div>
+</section>

projects/docs/src/app/components/data-table-docs/sticky-docs/sticky-docs.component.ts

@@ -0,0 +1,47 @@
+import { Component, inject, OnInit } from '@angular/core';
+import { BaseService } from '../../../shared/base.service';
+import { SourceCodeService } from '../../../shared/source-code.service';
+import { Observable } from 'rxjs';
+import { AsyncPipe, NgIf } from '@angular/common';
+import { BaseEditorComponent } from '../../../shared/base-editor/base-editor.component';
+import { SegmentedComponent } from '../../../../../../tolle/src/lib/segment.component';
+import { FormsModule } from '@angular/forms';
+import { StickyComponent } from '../../../docs-examples/data-table/sticky/sticky.component';
+
+@Component({
+    selector: 'app-sticky-docs',
+    standalone: true,
+    imports: [
+        AsyncPipe,
+        BaseEditorComponent,
+        NgIf,
+        SegmentedComponent,
+        FormsModule,
+        StickyComponent
+    ],
+    templateUrl: './sticky-docs.component.html'
+})
+export class StickyDocsComponent implements OnInit {
+    baseService = inject(BaseService);
+    sourceService = inject(SourceCodeService);
+
+    htmlCode$!: Observable<string>;
+    tsCode$!: Observable<string>;
+
+    activeCallback = 'preview';
+    viewOptions = [
+        { label: 'Preview', value: 'preview' },
+        { label: 'Code', value: 'code' }
+    ];
+
+    codeType = 'html';
+    codeOptions = [
+        { label: 'HTML', value: 'html' },
+        { label: 'TypeScript', value: 'typescript' }
+    ];
+
+    ngOnInit(): void {
+        this.htmlCode$ = this.sourceService.getFile('data-table/sticky/sticky.component.html');
+        this.tsCode$ = this.sourceService.getFile('data-table/sticky/sticky.component.ts');
+    }
+}

projects/docs/src/app/components/getting-started-docs/gs-installation/gs-installation.component.ts

@@ -8,5 +8,5 @@ import { BaseService } from '../../../shared/base.service';
 })
 export class GSInstallationComponent {
     baseService = inject(BaseService);
-    install = 'npm install @tolle_/tolle-ui@18.2.1 date-fns@4.1.0 tailwind-merge@3.4.2 clsx@2.1.1 embla-carousel@8.5.2 @floating-ui/dom@1.7.4 class-variance-authority@0.7.1 remixicon@4.5.0';
+    install = 'npm install @tolle_/tolle-ui@18.2.2 date-fns@4.1.0 tailwind-merge@3.4.2 clsx@2.1.1 embla-carousel@8.5.2 @floating-ui/dom@1.7.4 class-variance-authority@0.7.1 remixicon@4.5.0';
 }

projects/docs/src/app/docs-examples/data-table/column-def.ts

@@ -0,0 +1,8 @@
+import {TableColumn} from '../../../../../tolle/src/lib/data-table.component';
+
+
+export const columns: TableColumn[] = [
+  { key: 'name', label: 'Name', sortable: true },
+  { key: 'email', label: 'Email', sortable: true },
+  { key: 'actions', label: 'Actions', class: 'text-right w-[100px]' }
+];

projects/docs/src/app/docs-examples/data-table/sticky/sticky.component.html

@@ -0,0 +1,2 @@
+<tolle-data-table [columns]="columns" [data]="users" [stickyHeader]="true" maxHeight="300px">
+</tolle-data-table>

projects/docs/src/app/docs-examples/data-table/sticky/sticky.component.ts

@@ -0,0 +1,42 @@
+import { Component } from '@angular/core';
+import { DataTableComponent, TableColumn } from '../../../../../../tolle/src/lib/data-table.component';
+
+@Component({
+    selector: 'app-sticky',
+    standalone: true,
+    imports: [
+        DataTableComponent
+    ],
+    templateUrl: './sticky.component.html'
+})
+export class StickyComponent {
+    columns: TableColumn[] = [
+        { key: 'name', label: 'Name', sortable: true },
+        { key: 'email', label: 'Email', sortable: true },
+        { key: 'role', label: 'Role', sortable: true },
+        { key: 'status', label: 'Status' }
+    ];
+
+    users = [
+        { id: 1, name: 'Alex Rivera', email: 'alex@example.com', role: 'Admin', status: 'Active' },
+        { id: 2, name: 'Jordan Smith', email: 'jordan@example.com', role: 'User', status: 'Inactive' },
+        { id: 3, name: 'Taylor Johnson', email: 'taylor.johnson@example.com', role: 'Editor', status: 'Active' },
+        { id: 4, name: 'Morgan Lee', email: 'morgan.lee@example.com', role: 'User', status: 'Active' },
+        { id: 5, name: 'Casey Brown', email: 'casey.brown@example.com', role: 'User', status: 'Pending' },
+        { id: 6, name: 'Riley Anderson', email: 'riley.anderson@example.com', role: 'Admin', status: 'Active' },
+        { id: 7, name: 'Jamie Clark', email: 'jamie.clark@example.com', role: 'User', status: 'Active' },
+        { id: 8, name: 'Avery Martinez', email: 'avery.martinez@example.com', role: 'User', status: 'Inactive' },
+        { id: 9, name: 'Quinn Walker', email: 'quinn.walker@example.com', role: 'Editor', status: 'Active' },
+        { id: 10, name: 'Drew Thompson', email: 'drew.thompson@example.com', role: 'User', status: 'Suspended' },
+        { id: 11, name: 'Parker Lewis', email: 'parker.lewis@example.com', role: 'User', status: 'Active' },
+        { id: 12, name: 'Rowan Harris', email: 'rowan.harris@example.com', role: 'Admin', status: 'Active' },
+        { id: 13, name: 'Logan White', email: 'logan.white@example.com', role: 'User', status: 'Pending' },
+        { id: 14, name: 'Skyler Hall', email: 'skyler.hall@example.com', role: 'Editor', status: 'Active' },
+        { id: 15, name: 'Reese Young', email: 'reese.young@example.com', role: 'User', status: 'Active' },
+        { id: 16, name: 'Cameron King', email: 'cameron.king@example.com', role: 'User', status: 'Inactive' },
+        { id: 17, name: 'Emerson Wright', email: 'emerson.wright@example.com', role: 'Admin', status: 'Active' },
+        { id: 18, name: 'Harper Lopez', email: 'harper.lopez@example.com', role: 'User', status: 'Active' },
+        { id: 19, name: 'Finley Scott', email: 'finley.scott@example.com', role: 'Editor', status: 'Active' },
+        { id: 20, name: 'Dakota Green', email: 'dakota.green@example.com', role: 'User', status: 'Pending' }
+    ];
+}

projects/docs/src/app/layout/doc-layout/doc-layout.component.html

@@ -6,8 +6,7 @@
     <div class="fixed inset-0 bg-black/50 z-40 transition-opacity" (click)="closeMobileMenu()"></div>
     }
 
-    <div [class]="(isHandset$ | async) ? 
-           'fixed inset-y-0 left-0 z-50 transform transition-transform duration-300 ease-in-out ' + (mobileMenuOpen ? 'translate-x-0' : '-translate-x-full') : 
+    <div [class]="(isHandset$ | async) ? 'fixed inset-y-0 left-0 z-50 transform transition-transform duration-300 ease-in-out ' + (mobileMenuOpen ? 'translate-x-0' : '-translate-x-full') :
            'relative'">
       <tolle-sidebar [items]="navGroups" [collapsed]="isCollapsed" (click)="closeMobileMenu()">
         <!-- Header with improved shrinking logic -->
@@ -59,4 +58,4 @@
       </div>
     </main>
   </div>
-</div>
+</div>

projects/docs/src/app/shared/prop-table/prop-table.component.ts

@@ -20,7 +20,7 @@ import { PropEntry } from '../types';
         <tbody class="divide-y divide-neutral-200 dark:divide-neutral-800 bg-white dark:bg-transparent">
           @for (prop of props; track prop.name) {
             <tr class="hover:bg-neutral-50 dark:hover:bg-neutral-900/50 transition-colors">
-              <td class="px-6 py-4 font-mono font-medium text-primary-foreground">
+              <td class="px-6 py-4 font-mono font-medium text-foreground">
                 {{ prop.name }}
               </td>
               <td class="px-6 py-4">

projects/docs/src/assets/docs-content.json

@@ -1220,8 +1220,8 @@
         "name": "GSSetupComponent",
         "examples": {
           "appConfigCode": "import { ApplicationConfig } from '@angular/core';\nimport { provideTolleConfig } from '@tolle_/tolle-ui';\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideTolleConfig({\n      primaryColor: '#8b5cf6', // Indigo\n      radius: '0.5rem',\n      darkByDefault: false\n    })\n  ]\n};",
-          "tailwindConfigCode": "const { tolleUi } = require('@tolle_/tolle-ui/tailwind');\n\nmodule.exports = {\n  content: [\n    \"./src/**/*.{html,ts}\",\n    \"./node_modules/@tolle_/tolle-ui/**/*.{html,ts,mjs}\"\n  ],\n  plugins: [tolleUi()],\n};",
-          "globalStyles": "{\n  \"styles\": [\n    \"src/styles.css\",\n    \"node_modules/@tolle_/tolle-ui/styles/theme.css\"\n  ]\n}"
+          "tailwindConfigCode": "/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n  darkMode: 'class',\n  presets: [\n    require('@tolle_/tolle-ui/preset') // Point to your library preset\n  ],\n  content: [\n    \"./src/**/*.{html,ts}\",\n    \"./node_modules/@tolle_/tolle-ui/**/*.{html,ts,mjs,html}\"\n  ],\n  plugins: [],\n};",
+          "globalStyles": "{\n  \"styles\": [\n    \"src/styles.css\",\n    \"node_modules/@tolle_/tolle-ui/theme.css\"\n  ]\n}"
         },
         "props": {},
         "selector": "app-gs-setup"
@@ -2472,8 +2472,8 @@
       {
         "name": "ThemingIntegrationComponent",
         "examples": {
-          "globalStyles": "{\n  \"styles\": [\n    \"src/styles.css\",\n    \"node_modules/@tolle_/tolle-ui/styles/theme.css\" \n  ]\n}",
-          "tailwindConfigCode": "const { tolleUi } = require('@tolle_/tolle-ui/tailwind');\n\n/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n  content: [\n    \"./src/**/*.{html,ts}\",\n    // Include Tolle UI sources\n    \"./node_modules/@tolle_/tolle-ui/**/*.{html,ts,mjs}\"\n  ],\n  theme: {\n    extend: {},\n  },\n  plugins: [\n    tolleUi({\n       // Optional: override prefix\n       // prefix: 'tolle-'\n    })\n  ],\n}"
+          "globalStyles": "{\n  \"styles\": [\n    \"src/styles.css\",\n    \"node_modules/@tolle_/tolle-ui/styles/theme.css\"\n  ]\n}",
+          "tailwindConfigCode": "/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n  darkMode: 'class',\n  presets: [\n    require('@tolle_/tolle-ui/preset') // Point to your library preset\n  ],\n  content: [\n    \"./src/**/*.{html,ts}\",\n    \"./node_modules/@tolle_/tolle-ui/**/*.{html,ts,mjs,html}\"\n  ],\n  plugins: [],\n};"
         },
         "props": {},
         "selector": "app-theming-integration"

projects/tolle/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tolle_/tolle-ui",
-  "version": "18.2.2",
+  "version": "18.2.7",
   "publishConfig": {
     "access": "public"
   },