@sonny-ui/core 0.1.0-alpha.20 → 0.1.0-alpha.21

package/package.json

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

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

@@ -70,7 +70,7 @@ export class SnyDrawerSideDirective {
   protected readonly computedClass = computed(() => {
     const isOpen = this.drawer.isOpen();
     const s = this.side();
-    const base = 'fixed inset-y-0 z-40 w-64 bg-background border-r border-border transition-transform duration-300 ease-in-out';
+    const base = 'fixed inset-y-0 z-50 w-64 bg-background border-r border-border transition-transform duration-300 ease-in-out overflow-y-auto';
     const sideClass = s === 'left' ? 'left-0' : 'right-0 border-l border-r-0';
     const transformClass = isOpen
       ? 'translate-x-0'

package/src/lib/modal/dialog.directives.ts

@@ -9,7 +9,7 @@ import { cn } from '../core/utils/cn';
 export class SnyDialogHeaderDirective {
   readonly class = input<string>('');
   protected readonly computedClass = computed(() =>
-    cn('flex flex-col space-y-1.5 text-center sm:text-left', this.class())
+    cn('flex flex-col space-y-1.5 text-center sm:text-left px-6 pt-6 shrink-0', this.class())
   );
 }
 
@@ -43,7 +43,7 @@ export class SnyDialogContentDirective {
   readonly class = input<string>('');
   protected readonly computedClass = computed(() =>
     cn(
-      'relative bg-background rounded-sm border border-border shadow-lg p-6 w-full max-w-lg mx-auto',
+      'flex-1 overflow-y-auto px-6 py-4',
       this.class()
     )
   );
@@ -56,7 +56,7 @@ export class SnyDialogContentDirective {
 export class SnyDialogFooterDirective {
   readonly class = input<string>('');
   protected readonly computedClass = computed(() =>
-    cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', this.class())
+    cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2 px-6 pb-6 shrink-0', this.class())
   );
 }
 
@@ -71,7 +71,7 @@ export class SnyDialogCloseDirective {
   readonly class = input<string>('');
   protected readonly computedClass = computed(() =>
     cn(
-      'absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none',
+      'absolute right-4 top-4 z-10 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none cursor-pointer',
       this.class()
     )
   );

package/src/styles/sonny-theme.css

@@ -125,6 +125,18 @@
   background-color: rgba(0, 0, 0, 0.5) !important;
 }
 
+.sny-dialog-panel {
+  position: relative;
+  background-color: var(--sny-background);
+  border: 1px solid var(--sny-border);
+  border-radius: 0.5rem;
+  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+  max-height: 85vh;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
 /* Sheet panel — styling only; positioning handled by CDK GlobalPositionStrategy */
 .sny-sheet-panel {
   background-color: var(--sny-background);