@sonny-ui/core 0.1.0-alpha.17 → 0.1.0-alpha.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sonny-ui/core",
-  "version": "0.1.0-alpha.17",
+  "version": "0.1.0-alpha.18",
   "description": "Angular UI component library inspired by shadcn/ui — signals, zoneless, Tailwind CSS v4",
   "peerDependencies": {
     "@angular/common": "^21.0.0",

package/src/lib/accordion/accordion.directives.ts

@@ -6,7 +6,6 @@ export const SNY_ACCORDION_ITEM = new InjectionToken<SnyAccordionItemDirective>(
 
 @Directive({
   selector: '[snyAccordion]',
-  standalone: true,
   exportAs: 'snyAccordion',
   providers: [{ provide: SNY_ACCORDION, useExisting: SnyAccordionDirective }],
   host: {
@@ -81,7 +80,6 @@ export class SnyAccordionDirective {
 
 @Directive({
   selector: '[snyAccordionItem]',
-  standalone: true,
   exportAs: 'snyAccordionItem',
   providers: [{ provide: SNY_ACCORDION_ITEM, useExisting: SnyAccordionItemDirective }],
   host: { '[class]': 'computedClass()' },
@@ -104,7 +102,6 @@ export class SnyAccordionItemDirective {
 
 @Directive({
   selector: '[snyAccordionTrigger]',
-  standalone: true,
   host: {
     '[class]': 'computedClass()',
     '[attr.aria-expanded]': 'item.isOpen()',
@@ -127,7 +124,6 @@ export class SnyAccordionTriggerDirective {
 
 @Directive({
   selector: '[snyAccordionContent]',
-  standalone: true,
   host: {
     '[class]': 'computedClass()',
     role: 'region',

package/src/lib/alert/alert.directives.ts

@@ -5,7 +5,6 @@ import { alertVariants, type AlertVariant } from './alert.variants';
 @Directive({
   selector: '[snyAlert]',
   exportAs: 'snyAlert',
-  standalone: true,
   host: {
     '[class]': 'computedClass()',
     '[attr.role]': 'role()',
@@ -41,7 +40,6 @@ export class SnyAlertDirective {
 
 @Directive({
   selector: '[snyAlertTitle]',
-  standalone: true,
   host: {
     '[class]': 'computedClass()',
   },
@@ -56,7 +54,6 @@ export class SnyAlertTitleDirective {
 
 @Directive({
   selector: '[snyAlertDescription]',
-  standalone: true,
   host: {
     '[class]': 'computedClass()',
   },

package/src/lib/avatar/avatar.component.ts

@@ -4,7 +4,6 @@ import { avatarVariants, type AvatarSize, type AvatarVariant } from './avatar.va
 
 @Component({
   selector: 'sny-avatar',
-  standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
   host: { '[class]': 'computedClass()' },
   template: `

package/src/lib/avatar-group/avatar-group.component.ts

@@ -28,7 +28,6 @@ export type AvatarGroupSpacing = 'tight' | 'normal';
 
 @Component({
   selector: 'sny-avatar-group',
-  standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
     <div [class]="containerClass()" role="group" [attr.aria-label]="'Group of ' + items().length + ' users'">

package/src/lib/badge/badge.directive.ts

@@ -4,7 +4,6 @@ import { badgeVariants, type BadgeVariant, type BadgeSize } from './badge.varian
 
 @Directive({
   selector: '[snyBadge]',
-  standalone: true,
   host: { '[class]': 'computedClass()' },
 })
 export class SnyBadgeDirective {

package/src/lib/breadcrumb/breadcrumb.directives.ts

@@ -3,7 +3,6 @@ import { cn } from '../core/utils/cn';
 
 @Directive({
   selector: 'nav[snyBreadcrumb]',
-  standalone: true,
   host: {
     '[class]': 'computedClass()',
     'aria-label': 'Breadcrumb',
@@ -16,7 +15,6 @@ export class SnyBreadcrumbDirective {
 
 @Directive({
   selector: 'ol[snyBreadcrumbList]',
-  standalone: true,
   host: { '[class]': 'computedClass()' },
 })
 export class SnyBreadcrumbListDirective {
@@ -28,7 +26,6 @@ export class SnyBreadcrumbListDirective {
 
 @Directive({
   selector: 'li[snyBreadcrumbItem]',
-  standalone: true,
   host: { '[class]': 'computedClass()' },
 })
 export class SnyBreadcrumbItemDirective {
@@ -40,7 +37,6 @@ export class SnyBreadcrumbItemDirective {
 
 @Directive({
   selector: '[snyBreadcrumbLink]',
-  standalone: true,
   host: { '[class]': 'computedClass()' },
 })
 export class SnyBreadcrumbLinkDirective {
@@ -52,7 +48,6 @@ export class SnyBreadcrumbLinkDirective {
 
 @Directive({
   selector: '[snyBreadcrumbSeparator]',
-  standalone: true,
   host: {
     role: 'presentation',
     '[aria-hidden]': 'true',
@@ -68,7 +63,6 @@ export class SnyBreadcrumbSeparatorDirective {
 
 @Directive({
   selector: '[snyBreadcrumbPage]',
-  standalone: true,
   host: {
     role: 'link',
     'aria-disabled': 'true',

package/src/lib/button/button.directive.ts

@@ -4,7 +4,6 @@ import { buttonVariants, type ButtonVariant, type ButtonSize } from './button.va
 
 @Directive({
   selector: 'button[snyBtn], a[snyBtn]',
-  standalone: true,
   host: {
     '[class]': 'computedClass()',
     '[attr.aria-disabled]': 'disabled() || loading() || null',

package/src/lib/button-group/button-group.directive.ts

@@ -4,7 +4,6 @@ import { buttonGroupVariants, type ButtonGroupOrientation } from './button-group
 
 @Directive({
   selector: '[snyButtonGroup]',
-  standalone: true,
   host: {
     role: 'group',
     '[class]': 'computedClass()',

package/src/lib/calendar/calendar.component.ts

@@ -14,7 +14,6 @@ import type { CalendarDay, CalendarMode, DateRange } from './calendar.types';
 
 @Component({
   selector: 'sny-calendar',
-  standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
   host: {
     '[class]': 'hostClass()',

package/src/lib/card/card.directives.ts

@@ -4,7 +4,6 @@ import { cardVariants, type CardVariant, type CardPadding } from './card.variant
 
 @Directive({
   selector: '[snyCard]',
-  standalone: true,
   host: { '[class]': 'computedClass()' },
 })
 export class SnyCardDirective {
@@ -19,7 +18,6 @@ export class SnyCardDirective {
 
 @Directive({
   selector: '[snyCardHeader]',
-  standalone: true,
   host: { '[class]': 'computedClass()' },
 })
 export class SnyCardHeaderDirective {
@@ -31,7 +29,6 @@ export class SnyCardHeaderDirective {
 
 @Directive({
   selector: '[snyCardTitle]',
-  standalone: true,
   host: { '[class]': 'computedClass()' },
 })
 export class SnyCardTitleDirective {
@@ -43,7 +40,6 @@ export class SnyCardTitleDirective {
 
 @Directive({
   selector: '[snyCardDescription]',
-  standalone: true,
   host: { '[class]': 'computedClass()' },
 })
 export class SnyCardDescriptionDirective {
@@ -55,7 +51,6 @@ export class SnyCardDescriptionDirective {
 
 @Directive({
   selector: '[snyCardContent]',
-  standalone: true,
   host: { '[class]': 'computedClass()' },
 })
 export class SnyCardContentDirective {
@@ -67,7 +62,6 @@ export class SnyCardContentDirective {
 
 @Directive({
   selector: '[snyCardFooter]',
-  standalone: true,
   host: { '[class]': 'computedClass()' },
 })
 export class SnyCardFooterDirective {

package/src/lib/carousel/carousel.directives.ts

@@ -7,7 +7,6 @@ export const SNY_CAROUSEL = new InjectionToken<SnyCarouselDirective>('SnyCarouse
 
 @Directive({
   selector: '[snyCarouselItem]',
-  standalone: true,
   host: {
     'role': 'group',
     '[attr.aria-roledescription]': '"slide"',
@@ -23,7 +22,6 @@ export class SnyCarouselItemDirective {
 
 @Directive({
   selector: '[snyCarouselContent]',
-  standalone: true,
   host: {
     '[class]': 'computedClass()',
     '[style.transform]': 'transformStyle()',
@@ -44,7 +42,6 @@ export class SnyCarouselContentDirective {
 
 @Directive({
   selector: '[snyCarousel]',
-  standalone: true,
   exportAs: 'snyCarousel',
   providers: [{ provide: SNY_CAROUSEL, useExisting: SnyCarouselDirective }],
   host: {
@@ -131,7 +128,6 @@ export class SnyCarouselDirective implements OnDestroy {
 
 @Directive({
   selector: '[snyCarouselPrev]',
-  standalone: true,
   host: {
     '(click)': 'carousel.prev()',
     '[attr.aria-label]': '"Previous slide"',
@@ -148,7 +144,6 @@ export class SnyCarouselPrevDirective {
 
 @Directive({
   selector: '[snyCarouselNext]',
-  standalone: true,
   host: {
     '(click)': 'carousel.next()',
     '[attr.aria-label]': '"Next slide"',

package/src/lib/chat-bubble/chat-bubble.directives.ts

@@ -8,7 +8,6 @@ export const SNY_CHAT_BUBBLE = new InjectionToken<SnyChatBubbleDirective>('SnyCh
 
 @Directive({
   selector: '[snyChatBubble]',
-  standalone: true,
   providers: [{ provide: SNY_CHAT_BUBBLE, useExisting: SnyChatBubbleDirective }],
   host: {
     'role': 'article',
@@ -30,7 +29,6 @@ export class SnyChatBubbleDirective {
 
 @Directive({
   selector: '[snyChatBubbleAvatar]',
-  standalone: true,
   host: { '[class]': 'computedClass()' },
 })
 export class SnyChatBubbleAvatarDirective {
@@ -42,7 +40,6 @@ export class SnyChatBubbleAvatarDirective {
 
 @Directive({
   selector: '[snyChatBubbleHeader]',
-  standalone: true,
   host: { '[class]': 'computedClass()' },
 })
 export class SnyChatBubbleHeaderDirective {
@@ -54,7 +51,6 @@ export class SnyChatBubbleHeaderDirective {
 
 @Directive({
   selector: '[snyChatBubbleContent]',
-  standalone: true,
   host: { '[class]': 'computedClass()' },
 })
 export class SnyChatBubbleContentDirective {
@@ -74,7 +70,6 @@ export class SnyChatBubbleContentDirective {
 
 @Directive({
   selector: '[snyChatBubbleFooter]',
-  standalone: true,
   host: { '[class]': 'computedClass()' },
 })
 export class SnyChatBubbleFooterDirective {
@@ -86,7 +81,6 @@ export class SnyChatBubbleFooterDirective {
 
 @Directive({
   selector: '[snyChatBubbleBody]',
-  standalone: true,
   host: { '[class]': 'computedClass()' },
 })
 export class SnyChatBubbleBodyDirective {

package/src/lib/checkbox/checkbox.directive.ts

@@ -4,7 +4,6 @@ import { checkboxVariants, type CheckboxSize } from './checkbox.variants';
 
 @Directive({
   selector: 'input[type="checkbox"][snyCheckbox]',
-  standalone: true,
   host: { '[class]': 'computedClass()' },
 })
 export class SnyCheckboxDirective {

package/src/lib/color-picker/color-picker.component.ts

@@ -5,7 +5,6 @@ import {
   effect,
   ElementRef,
   forwardRef,
-  HostListener,
   inject,
   input,
   model,
@@ -30,9 +29,12 @@ import { colorPickerTriggerVariants, type ColorPickerSize } from './color-picker
 
 @Component({
   selector: 'sny-color-picker',
-  standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
-  host: { class: 'relative inline-block' },
+  host: {
+    class: 'relative inline-block',
+    '(document:click)': 'onDocumentClick($event)',
+    '(keydown.escape)': 'onEscape()',
+  },
   providers: [
     { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SnyColorPickerComponent), multi: true },
   ],
@@ -518,14 +520,12 @@ export class SnyColorPickerComponent implements ControlValueAccessor, OnDestroy
     }
   }
 
-  @HostListener('document:click', ['$event'])
   onDocumentClick(event: MouseEvent): void {
     if (!this.elRef.nativeElement.contains(event.target)) {
       this.close();
     }
   }
 
-  @HostListener('keydown.escape')
   onEscape(): void {
     this.close();
   }

package/src/lib/combobox/combobox.component.ts

@@ -4,7 +4,6 @@ import {
   computed,
   ElementRef,
   forwardRef,
-  HostListener,
   inject,
   input,
   model,
@@ -23,10 +22,10 @@ export interface ComboboxOption {
 
 @Component({
   selector: 'sny-combobox',
-  standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
   host: {
     class: 'relative inline-block w-full',
+    '(document:click)': 'onDocumentClick($event)',
   },
   providers: [
     { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SnyComboboxComponent), multi: true },
@@ -257,7 +256,6 @@ export class SnyComboboxComponent implements ControlValueAccessor, OnDestroy {
     }
   }
 
-  @HostListener('document:click', ['$event'])
   onDocumentClick(event: MouseEvent): void {
     if (!this.elRef.nativeElement.contains(event.target)) {
       this.close();

package/src/lib/command-palette/command-palette.component.ts

@@ -15,7 +15,6 @@ import type { Command, CommandGroup, CommandPaletteConfig } from './command-pale
 
 @Component({
   selector: 'sny-command-palette',
-  standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [SnyInputDirective],
   host: {

package/src/lib/data-table/data-table.component.ts

@@ -54,7 +54,6 @@ const DEFAULT_PAGINATION: DataTablePaginationConfig = {
 
 @Component({
   selector: 'sny-data-table',
-  standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
     NgTemplateOutlet,

package/src/lib/data-table/data-table.directives.ts

@@ -2,7 +2,6 @@ import { Directive, TemplateRef, inject, input } from '@angular/core';
 
 @Directive({
   selector: '[snyCell]',
-  standalone: true,
 })
 export class SnyCellDefDirective {
   readonly snyCell = input.required<string>();
@@ -11,7 +10,6 @@ export class SnyCellDefDirective {
 
 @Directive({
   selector: '[snyHeaderCell]',
-  standalone: true,
 })
 export class SnyHeaderCellDefDirective {
   readonly snyHeaderCell = input.required<string>();
@@ -20,7 +18,6 @@ export class SnyHeaderCellDefDirective {
 
 @Directive({
   selector: '[snyBulkActions]',
-  standalone: true,
 })
 export class SnyBulkActionsDefDirective {
   readonly template = inject(TemplateRef);
@@ -28,7 +25,6 @@ export class SnyBulkActionsDefDirective {
 
 @Directive({
   selector: '[snyRowExpand]',
-  standalone: true,
 })
 export class SnyRowExpandDefDirective {
   readonly template = inject(TemplateRef);

package/src/lib/date-picker/date-picker.component.ts

@@ -4,7 +4,6 @@ import {
   computed,
   ElementRef,
   forwardRef,
-  HostListener,
   inject,
   input,
   model,
@@ -19,10 +18,13 @@ import { datePickerTriggerVariants, type DatePickerSize } from './date-picker.va
 
 @Component({
   selector: 'sny-date-picker',
-  standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [SnyCalendarComponent],
-  host: { class: 'relative inline-block w-full' },
+  host: {
+    class: 'relative inline-block w-full',
+    '(document:click)': 'onDocumentClick($event)',
+    '(keydown.escape)': 'onEscape()',
+  },
   providers: [
     { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SnyDatePickerComponent), multi: true },
   ],
@@ -206,14 +208,12 @@ export class SnyDatePickerComponent implements ControlValueAccessor, OnDestroy {
     this.removeGlobalListeners();
   }
 
-  @HostListener('document:click', ['$event'])
   onDocumentClick(event: MouseEvent): void {
     if (!this.elRef.nativeElement.contains(event.target)) {
       this.close();
     }
   }
 
-  @HostListener('keydown.escape')
   onEscape(): void {
     this.close();
   }

package/src/lib/date-range-picker/date-range-picker.component.ts

@@ -4,7 +4,6 @@ import {
   computed,
   ElementRef,
   forwardRef,
-  HostListener,
   inject,
   input,
   model,
@@ -20,10 +19,13 @@ import { datePickerTriggerVariants, type DatePickerSize } from '../date-picker/d
 
 @Component({
   selector: 'sny-date-range-picker',
-  standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [SnyCalendarComponent],
-  host: { class: 'relative inline-block w-full' },
+  host: {
+    class: 'relative inline-block w-full',
+    '(document:click)': 'onDocumentClick($event)',
+    '(keydown.escape)': 'onEscape()',
+  },
   providers: [
     { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SnyDateRangePickerComponent), multi: true },
   ],
@@ -326,14 +328,12 @@ export class SnyDateRangePickerComponent implements ControlValueAccessor, OnDest
     this.removeGlobalListeners();
   }
 
-  @HostListener('document:click', ['$event'])
   onDocumentClick(event: MouseEvent): void {
     if (!this.elRef.nativeElement.contains(event.target)) {
       this.close();
     }
   }
 
-  @HostListener('keydown.escape')
   onEscape(): void {
     this.close();
   }

package/src/lib/diff/diff.component.ts

@@ -3,7 +3,6 @@ import { cn } from '../core/utils/cn';
 
 @Component({
   selector: 'sny-diff',
-  standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
   host: {
     '[class]': '"relative overflow-hidden select-none w-full"',

package/src/lib/divider/divider.component.ts

@@ -8,7 +8,6 @@ import {
 
 @Component({
   selector: 'sny-divider',
-  standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
   host: {
     'role': 'separator',

package/src/lib/dock/dock.directives.ts

@@ -5,7 +5,6 @@ export type DockPosition = 'bottom' | 'top';
 
 @Directive({
   selector: '[snyDock]',
-  standalone: true,
   host: {
     'role': 'toolbar',
     'aria-label': 'Dock',
@@ -63,7 +62,6 @@ export class SnyDockDirective {
 
 @Directive({
   selector: '[snyDockItem]',
-  standalone: true,
   host: {
     '[class]': 'computedClass()',
     '[attr.tabindex]': 'active() ? 0 : -1',

package/src/lib/drawer/drawer.directives.ts

@@ -5,7 +5,6 @@ export const SNY_DRAWER = new InjectionToken<SnyDrawerLayoutComponent>('SnyDrawe
 
 @Component({
   selector: '[snyDrawerLayout]',
-  standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
   exportAs: 'snyDrawerLayout',
   providers: [{ provide: SNY_DRAWER, useExisting: SnyDrawerLayoutComponent }],
@@ -41,7 +40,6 @@ export const SnyDrawerLayoutDirective = SnyDrawerLayoutComponent;
 
 @Directive({
   selector: '[snyDrawerContent]',
-  standalone: true,
   host: {
     '[class]': 'computedClass()',
   },
@@ -57,7 +55,6 @@ export type DrawerSide = 'left' | 'right';
 
 @Directive({
   selector: '[snyDrawerSide]',
-  standalone: true,
   host: {
     'role': 'navigation',
     'aria-label': 'Sidebar navigation',

package/src/lib/dropdown/dropdown.directives.ts

@@ -1,4 +1,4 @@
-import { Directive, ElementRef, HostListener, InjectionToken, computed, inject, input, signal } from '@angular/core';
+import { Directive, ElementRef, InjectionToken, computed, inject, input, signal } from '@angular/core';
 import { cn } from '../core/utils/cn';
 import {
   dropdownContentVariants,
@@ -10,11 +10,12 @@ export const SNY_DROPDOWN = new InjectionToken<SnyDropdownDirective>('SnyDropdow
 
 @Directive({
   selector: '[snyDropdown]',
-  standalone: true,
   exportAs: 'snyDropdown',
   providers: [{ provide: SNY_DROPDOWN, useExisting: SnyDropdownDirective }],
   host: {
     '[class]': '"relative inline-block"',
+    '(document:click)': 'onDocumentClick($event)',
+    '(keydown.escape)': 'onEscape()',
   },
 })
 export class SnyDropdownDirective {
@@ -25,14 +26,12 @@ export class SnyDropdownDirective {
   open(): void { this.isOpen.set(true); }
   close(): void { this.isOpen.set(false); }
 
-  @HostListener('document:click', ['$event'])
   onDocumentClick(event: MouseEvent): void {
     if (!this.elementRef.nativeElement.contains(event.target)) {
       this.close();
     }
   }
 
-  @HostListener('keydown.escape')
   onEscape(): void {
     this.close();
   }
@@ -40,7 +39,6 @@ export class SnyDropdownDirective {
 
 @Directive({
   selector: '[snyDropdownTrigger]',
-  standalone: true,
   host: {
     '(click)': 'dropdown.toggle()',
     '[attr.aria-expanded]': 'dropdown.isOpen()',
@@ -53,7 +51,6 @@ export class SnyDropdownTriggerDirective {
 
 @Directive({
   selector: '[snyDropdownContent]',
-  standalone: true,
   host: {
     'role': 'menu',
     '[class]': 'computedClass()',
@@ -75,7 +72,6 @@ export class SnyDropdownContentDirective {
 
 @Directive({
   selector: '[snyMenuContent]',
-  standalone: true,
   host: {
     '[class]': 'computedClass()',
   },
@@ -90,7 +86,6 @@ export class SnyMenuContentDirective {
 
 @Directive({
   selector: '[snyMenuItem]',
-  standalone: true,
   host: {
     'role': 'menuitem',
     '[class]': 'computedClass()',
@@ -113,7 +108,6 @@ export class SnyMenuItemDirective {
 
 @Directive({
   selector: '[snyMenuSeparator]',
-  standalone: true,
   host: {
     'role': 'separator',
     '[class]': 'computedClass()',
@@ -129,7 +123,6 @@ export class SnyMenuSeparatorDirective {
 
 @Directive({
   selector: '[snyMenuLabel]',
-  standalone: true,
   host: {
     '[class]': 'computedClass()',
   },

package/src/lib/fab/fab.directives.ts

@@ -14,7 +14,6 @@ const positionMap: Record<FabPosition, string> = {
 
 @Directive({
   selector: '[snyFab]',
-  standalone: true,
   exportAs: 'snyFab',
   providers: [{ provide: SNY_FAB, useExisting: SnyFabDirective }],
   host: { '[class]': 'computedClass()' },
@@ -36,7 +35,6 @@ export class SnyFabDirective {
 
 @Directive({
   selector: '[snyFabTrigger]',
-  standalone: true,
   host: {
     '(click)': 'fab.toggle()',
     '[attr.aria-expanded]': 'fab.isOpen()',
@@ -59,7 +57,6 @@ export class SnyFabTriggerDirective {
 
 @Directive({
   selector: '[snyFabAction]',
-  standalone: true,
   host: {
     'role': 'menuitem',
     '[attr.aria-label]': 'ariaLabel() || null',