@tolle_/tolle-ui 0.0.25-beta → 0.0.27-beta

package/lib/button.component.d.ts

@@ -2,7 +2,7 @@ import { type VariantProps } from 'class-variance-authority';
 import * as i0 from "@angular/core";
 declare const buttonVariants: (props?: ({
     variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | null | undefined;
-    size?: "default" | "xs" | "sm" | "lg" | "icon-xs" | "icon-sm" | "icon" | "icon-lg" | null | undefined;
+    size?: "xs" | "sm" | "default" | "lg" | "icon-xs" | "icon-sm" | "icon" | "icon-lg" | null | undefined;
     busy?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export type ButtonProps = VariantProps<typeof buttonVariants>;

package/lib/modal.d.ts

@@ -26,4 +26,5 @@ export declare class Modal<T = any> {
      * Accessed via `let-val` in the HTML.
      */
     context?: T;
+    showCloseButton?: boolean;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tolle_/tolle-ui",
-  "version": "0.0.25-beta",
+  "version": "0.0.27-beta",
   "publishConfig": {
     "access": "public"
   },

package/theme.css

@@ -194,36 +194,49 @@ tolle-select button:focus {
 }
 
 /* -------------------------------------------------------------------------- */
-/* 6. CDK OVERLAY STYLES                                                      */
+/* 5. CDK OVERLAY & MODAL SYSTEM (Structural)                                 */
 /* -------------------------------------------------------------------------- */
 .cdk-overlay-container {
   position: fixed;
+  z-index: 1000;
   top: 0;
   left: 0;
-  right: 0;
-  bottom: 0;
-  z-index: 50;
+  width: 100%;
+  height: 100%;
   pointer-events: none;
 }
 
-.cdk-overlay-backdrop {
-  position: fixed;
+.cdk-global-overlay-wrapper {
+  display: flex;
+  position: absolute;
+  z-index: 1001;
   top: 0;
   left: 0;
-  right: 0;
-  bottom: 0;
-  z-index: 50;
-  background-color: rgba(0, 0, 0, 0.8);
-  backdrop-filter: blur(4px);
-  transition-property: opacity;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 150ms;
-  opacity: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
 }
 
 .cdk-overlay-pane {
-  position: fixed;
-  z-index: 50;
+  position: absolute;
+  pointer-events: auto;
+  box-sizing: border-box;
+  z-index: 1001;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Backdrop Styles */
+.cdk-overlay-backdrop {
+  position: absolute;
+  top: 0; bottom: 0; left: 0; right: 0;
+  z-index: 1000;
+  pointer-events: auto;
+  -webkit-tap-highlight-color: transparent;
+  transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1);
+  opacity: 0;
 }
 
 .cdk-overlay-backdrop-showing {
@@ -233,6 +246,7 @@ tolle-select button:focus {
 .tolle-modal-backdrop {
   background-color: rgba(0, 0, 0, 0.8);
   backdrop-filter: blur(4px);
+  z-index: 50;
 }
 
 /* Add these to your theme.css file */