@tolle_/tolle-ui 0.0.31-beta → 0.0.32-beta

package/fesm2022/tolle-ui.mjs

@@ -29,7 +29,7 @@ const buttonVariants = cva("tolle-button-base inline-flex items-center justify-c
             outline: "border border-input bg-transparent hover:bg-accent hover:text-accent-foreground",
             secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
             ghost: "hover:bg-accent hover:text-accent-foreground",
-            link: "text-primary underline-offset-4 hover:underline",
+            link: "text-primary-foreground underline-offset-4 hover:underline",
         },
         size: {
             default: "h-10 px-4 py-2",
@@ -1135,7 +1135,7 @@ class BadgeComponent {
     get computedClass() {
         return cn(
         // Base styles - Pills are always rounded-full
-        'inline-flex items-center justify-center rounded-md border px-2 py-0.5 font-medium transition-colors gap-1', 
+        'flex items-center justify-center rounded-md border px-2 py-0.5 font-medium transition-colors gap-1', 
         // Variants (Google Dark Mode theme)
         this.variant === 'default' && 'border-transparent bg-primary text-primary-foreground', this.variant === 'secondary' && 'border-transparent bg-secondary text-secondary-foreground', this.variant === 'outline' && 'text-foreground border-border bg-transparent', this.variant === 'destructive' && 'border-transparent bg-destructive text-destructive-foreground', 
         // Sizing
@@ -1153,9 +1153,8 @@ class BadgeComponent {
       <button
         *ngIf="removable"
         (click)="onRemove.emit($event)"
-        class="ml-1 -mr-1 rounded-md p-0.5 hover:bg-foreground/20 transition-colors outline-none focus:ring-1 focus:ring-ring"
-      >
-        <i class="ri-close-line text-[1.1em]"></i>
+        class="ml-1 -mr-1 rounded-md hover:bg-foreground/20 transition-colors outline-none">
+        <i class="ri-close-line"></i>
       </button>
     </div>
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
@@ -1177,9 +1176,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
       <button
         *ngIf="removable"
         (click)="onRemove.emit($event)"
-        class="ml-1 -mr-1 rounded-md p-0.5 hover:bg-foreground/20 transition-colors outline-none focus:ring-1 focus:ring-ring"
-      >
-        <i class="ri-close-line text-[1.1em]"></i>
+        class="ml-1 -mr-1 rounded-md hover:bg-foreground/20 transition-colors outline-none">
+        <i class="ri-close-line"></i>
       </button>
     </div>
   `,
@@ -6588,7 +6586,7 @@ class SegmentedComponent {
       role="tablist"
     >
       <div
-        class="absolute top-1 bottom-1 bg-background shadow-sm rounded-md transition-all duration-300 ease-[cubic-bezier(0.2,0.0,0.2,1)]"
+        class="absolute top-1 bottom-1 bg-primary shadow-sm rounded-md transition-all duration-300 ease-[cubic-bezier(0.2,0.0,0.2,1)]"
         [style.left.px]="gliderLeft"
         [style.width.px]="gliderWidth"
         [class.opacity-0]="!hasValue"
@@ -6606,7 +6604,7 @@ class SegmentedComponent {
           'relative z-10 flex-1 px-3 py-1.5 text-sm font-medium transition-colors duration-200 rounded-md text-center focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
           'flex items-center justify-center gap-2',
           value === item.value
-            ? 'text-foreground'
+            ? 'text-primary-foreground'
             : 'text-muted-foreground hover:text-foreground/70',
           item.disabled && 'opacity-50 cursor-not-allowed',
           item.class
@@ -6643,7 +6641,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
       role="tablist"
     >
       <div
-        class="absolute top-1 bottom-1 bg-background shadow-sm rounded-md transition-all duration-300 ease-[cubic-bezier(0.2,0.0,0.2,1)]"
+        class="absolute top-1 bottom-1 bg-primary shadow-sm rounded-md transition-all duration-300 ease-[cubic-bezier(0.2,0.0,0.2,1)]"
         [style.left.px]="gliderLeft"
         [style.width.px]="gliderWidth"
         [class.opacity-0]="!hasValue"
@@ -6661,7 +6659,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
           'relative z-10 flex-1 px-3 py-1.5 text-sm font-medium transition-colors duration-200 rounded-md text-center focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
           'flex items-center justify-center gap-2',
           value === item.value
-            ? 'text-foreground'
+            ? 'text-primary-foreground'
             : 'text-muted-foreground hover:text-foreground/70',
           item.disabled && 'opacity-50 cursor-not-allowed',
           item.class
@@ -6696,9 +6694,28 @@ class SidebarComponent {
     items = [];
     collapsed = false;
     class = '';
+    /**
+     * Styling variant for active items.
+     * - default: Solid primary background, light text (Matches Badge Default)
+     * - secondary: Solid secondary background
+     * - ghost: Transparent background, accent text (Shadcn standard)
+     * - outline: Bordered
+     */
+    variant = 'default';
     expandedParents = new Set();
     expandedChildren = new Set();
     cn = cn;
+    get activeClasses() {
+        return cn('transition-colors', 
+        // Default: Solid Primary (Badge-like) with lighter opacity (80% instead of 90%)
+        this.variant === 'default' && 'bg-primary/80 text-primary-foreground hover:bg-primary hover:text-primary-foreground', 
+        // Secondary: Solid Secondary
+        this.variant === 'secondary' && 'bg-secondary text-secondary-foreground hover:bg-secondary/80', 
+        // Ghost: Subtle background (Sidebar standard)
+        this.variant === 'ghost' && 'bg-accent text-accent-foreground', 
+        // Outline: Bordered
+        this.variant === 'outline' && 'border border-border bg-background text-foreground hover:bg-accent hover:text-accent-foreground');
+    }
     ngOnChanges(changes) {
         if (changes['collapsed'] && this.collapsed) {
             this.collapseAll();
@@ -6731,7 +6748,7 @@ class SidebarComponent {
             });
         });
     }
-    // --- ID GENERATORS (Now using Group Index correctly) ---
+    // --- ID GENERATORS ---
     getGroupId(group, index) {
         return group.id || group.title || `g-${index}`;
     }
@@ -6750,7 +6767,6 @@ class SidebarComponent {
         if (this.collapsed)
             return;
         const id = this.getParentId(group, item, gIndex, iIndex);
-        // Create new Set reference to ensure Change Detection triggers
         const newSet = new Set(this.expandedParents);
         if (newSet.has(id)) {
             newSet.delete(id);
@@ -6762,7 +6778,6 @@ class SidebarComponent {
     }
     toggleChild(group, parent, subItem, gIndex, iIndex, sIndex) {
         const id = this.getChildId(group, parent, subItem, gIndex, iIndex, sIndex);
-        // Create new Set reference
         const newSet = new Set(this.expandedChildren);
         if (newSet.has(id)) {
             newSet.delete(id);
@@ -6784,13 +6799,13 @@ class SidebarComponent {
         return this.expandedChildren.has(this.getChildId(group, parent, subItem, gIndex, iIndex, sIndex));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: SidebarComponent, isStandalone: true, selector: "tolle-sidebar", inputs: { items: "items", collapsed: "collapsed", class: "class" }, usesOnChanges: true, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: SidebarComponent, isStandalone: true, selector: "tolle-sidebar", inputs: { items: "items", collapsed: "collapsed", class: "class", variant: "variant" }, usesOnChanges: true, ngImport: i0, template: `
     <aside [class]="cn(
-      'flex flex-col h-full border-r bg-background transition-[width] duration-300 ease-in-out shrink-0 overflow-hidden',
+      'flex flex-col h-full bg-background transition-[width] duration-300 ease-in-out shrink-0 overflow-hidden',
       collapsed ? 'w-16' : 'w-64',
       class
     )">
-      <div class="flex h-14 shrink-0 items-center border-b px-3 overflow-hidden whitespace-nowrap">
+      <div class="flex h-14 shrink-0 items-center px-3 overflow-hidden whitespace-nowrap">
         <ng-content select="[header]"></ng-content>
       </div>
 
@@ -6810,6 +6825,7 @@ class SidebarComponent {
               @for (item of group.items; track item.id || item.title || $index; let i = $index) {
 
                 @if (item.items && item.items.length) {
+                  <!-- Parent Item (Group) -->
                   <div class="relative">
                     <button
                       type="button"
@@ -6844,6 +6860,7 @@ class SidebarComponent {
                       }
                     </button>
 
+                    <!-- Submenu Grid Transition -->
                     <div [class]="cn(
                       'grid transition-[grid-template-rows] duration-300 ease-in-out',
                       isParentExpanded(group, item, gIndex, i) && !collapsed ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'
@@ -6852,8 +6869,8 @@ class SidebarComponent {
                         <div class="flex flex-col gap-1 mt-1 ml-4 border-l border-border/50 pl-2">
 
                           @for (subItem of item.items; track subItem.id || subItem.title || $index; let j = $index) {
-
                             @if (subItem.items && subItem.items.length) {
+                              <!-- Grandchild Item Group (Recursive-ish logic for depth 2) -->
                               <div class="relative">
                                 <button
                                   type="button"
@@ -6881,7 +6898,7 @@ class SidebarComponent {
                                       @for (grandChild of subItem.items; track grandChild.title) {
                                         <a
                                           [routerLink]="grandChild.url"
-                                          routerLinkActive="bg-accent/50 text-accent-foreground"
+                                          [routerLinkActive]="activeClasses"
                                           [routerLinkActiveOptions]="{ exact: true }"
                                           class="flex items-center gap-2 hover:no-underline rounded-md px-3 py-1.5 text-sm transition-colors hover:bg-accent hover:text-accent-foreground text-muted-foreground whitespace-nowrap"
                                         >
@@ -6895,9 +6912,10 @@ class SidebarComponent {
                               </div>
                             }
                             @else {
+                              <!-- Standard Sub Item -->
                               <a
                                 [routerLink]="subItem.url"
-                                routerLinkActive="bg-accent/50 text-accent-foreground"
+                                [routerLinkActive]="activeClasses"
                                 [routerLinkActiveOptions]="{ exact: true }"
                                 class="flex items-center gap-2 hover:no-underline rounded-md px-3 py-1.5 text-sm transition-colors hover:bg-accent hover:text-accent-foreground text-muted-foreground whitespace-nowrap"
                               >
@@ -6912,9 +6930,10 @@ class SidebarComponent {
                   </div>
                 }
                 @else {
+                  <!-- Standard Top-Level Item -->
                   <a
                     [routerLink]="item.url"
-                    routerLinkActive="bg-primary/10 text-primary"
+                    [routerLinkActive]="activeClasses"
                     [routerLinkActiveOptions]="{ exact: true }"
                     [class]="cn(
                       'group relative hover:no-underline flex items-center rounded-md px-3 py-2 text-sm font-medium transition-colors',
@@ -6941,21 +6960,21 @@ class SidebarComponent {
         }
       </div>
 
-      <div class="border-t shrink-0 p-3 overflow-hidden whitespace-nowrap">
+      <div class="shrink-0 p-3 overflow-hidden whitespace-nowrap">
         <ng-content select="[footer]"></ng-content>
       </div>
     </aside>
-  `, isInline: true, styles: [":host{display:block;height:100%}.custom-scrollbar{scrollbar-width:thin;scrollbar-color:rgba(156,163,175,.3) transparent}.custom-scrollbar::-webkit-scrollbar{width:4px}.custom-scrollbar::-webkit-scrollbar-track{background:transparent}.custom-scrollbar::-webkit-scrollbar-thumb{background-color:#9ca3af4d;border-radius:20px}button:disabled{cursor:not-allowed;opacity:.6}*{transition-timing-function:cubic-bezier(.4,0,.2,1)}.ml-4{margin-left:1rem}.border-l{border-left-width:1px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }] });
+  `, isInline: true, styles: [":host{display:block;height:100%}.custom-scrollbar{scrollbar-width:thin;scrollbar-color:rgba(156,163,175,.3) transparent}.custom-scrollbar::-webkit-scrollbar{width:4px}.custom-scrollbar::-webkit-scrollbar-track{background:transparent}.custom-scrollbar::-webkit-scrollbar-thumb{background-color:#9ca3af4d;border-radius:20px}button:disabled{cursor:not-allowed;opacity:.6}*{transition-timing-function:cubic-bezier(.4,0,.2,1)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SidebarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'tolle-sidebar', standalone: true, imports: [CommonModule, RouterModule], template: `
     <aside [class]="cn(
-      'flex flex-col h-full border-r bg-background transition-[width] duration-300 ease-in-out shrink-0 overflow-hidden',
+      'flex flex-col h-full bg-background transition-[width] duration-300 ease-in-out shrink-0 overflow-hidden',
       collapsed ? 'w-16' : 'w-64',
       class
     )">
-      <div class="flex h-14 shrink-0 items-center border-b px-3 overflow-hidden whitespace-nowrap">
+      <div class="flex h-14 shrink-0 items-center px-3 overflow-hidden whitespace-nowrap">
         <ng-content select="[header]"></ng-content>
       </div>
 
@@ -6975,6 +6994,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
               @for (item of group.items; track item.id || item.title || $index; let i = $index) {
 
                 @if (item.items && item.items.length) {
+                  <!-- Parent Item (Group) -->
                   <div class="relative">
                     <button
                       type="button"
@@ -7009,6 +7029,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                       }
                     </button>
 
+                    <!-- Submenu Grid Transition -->
                     <div [class]="cn(
                       'grid transition-[grid-template-rows] duration-300 ease-in-out',
                       isParentExpanded(group, item, gIndex, i) && !collapsed ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'
@@ -7017,8 +7038,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         <div class="flex flex-col gap-1 mt-1 ml-4 border-l border-border/50 pl-2">
 
                           @for (subItem of item.items; track subItem.id || subItem.title || $index; let j = $index) {
-
                             @if (subItem.items && subItem.items.length) {
+                              <!-- Grandchild Item Group (Recursive-ish logic for depth 2) -->
                               <div class="relative">
                                 <button
                                   type="button"
@@ -7046,7 +7067,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                                       @for (grandChild of subItem.items; track grandChild.title) {
                                         <a
                                           [routerLink]="grandChild.url"
-                                          routerLinkActive="bg-accent/50 text-accent-foreground"
+                                          [routerLinkActive]="activeClasses"
                                           [routerLinkActiveOptions]="{ exact: true }"
                                           class="flex items-center gap-2 hover:no-underline rounded-md px-3 py-1.5 text-sm transition-colors hover:bg-accent hover:text-accent-foreground text-muted-foreground whitespace-nowrap"
                                         >
@@ -7060,9 +7081,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                               </div>
                             }
                             @else {
+                              <!-- Standard Sub Item -->
                               <a
                                 [routerLink]="subItem.url"
-                                routerLinkActive="bg-accent/50 text-accent-foreground"
+                                [routerLinkActive]="activeClasses"
                                 [routerLinkActiveOptions]="{ exact: true }"
                                 class="flex items-center gap-2 hover:no-underline rounded-md px-3 py-1.5 text-sm transition-colors hover:bg-accent hover:text-accent-foreground text-muted-foreground whitespace-nowrap"
                               >
@@ -7077,9 +7099,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                   </div>
                 }
                 @else {
+                  <!-- Standard Top-Level Item -->
                   <a
                     [routerLink]="item.url"
-                    routerLinkActive="bg-primary/10 text-primary"
+                    [routerLinkActive]="activeClasses"
                     [routerLinkActiveOptions]="{ exact: true }"
                     [class]="cn(
                       'group relative hover:no-underline flex items-center rounded-md px-3 py-2 text-sm font-medium transition-colors',
@@ -7106,17 +7129,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
         }
       </div>
 
-      <div class="border-t shrink-0 p-3 overflow-hidden whitespace-nowrap">
+      <div class="shrink-0 p-3 overflow-hidden whitespace-nowrap">
         <ng-content select="[footer]"></ng-content>
       </div>
     </aside>
-  `, styles: [":host{display:block;height:100%}.custom-scrollbar{scrollbar-width:thin;scrollbar-color:rgba(156,163,175,.3) transparent}.custom-scrollbar::-webkit-scrollbar{width:4px}.custom-scrollbar::-webkit-scrollbar-track{background:transparent}.custom-scrollbar::-webkit-scrollbar-thumb{background-color:#9ca3af4d;border-radius:20px}button:disabled{cursor:not-allowed;opacity:.6}*{transition-timing-function:cubic-bezier(.4,0,.2,1)}.ml-4{margin-left:1rem}.border-l{border-left-width:1px}\n"] }]
+  `, styles: [":host{display:block;height:100%}.custom-scrollbar{scrollbar-width:thin;scrollbar-color:rgba(156,163,175,.3) transparent}.custom-scrollbar::-webkit-scrollbar{width:4px}.custom-scrollbar::-webkit-scrollbar-track{background:transparent}.custom-scrollbar::-webkit-scrollbar-thumb{background-color:#9ca3af4d;border-radius:20px}button:disabled{cursor:not-allowed;opacity:.6}*{transition-timing-function:cubic-bezier(.4,0,.2,1)}\n"] }]
         }], propDecorators: { items: [{
                 type: Input
             }], collapsed: [{
                 type: Input
             }], class: [{
                 type: Input
+            }], variant: [{
+                type: Input
             }] } });
 
 /*