@katlux/toolkit 0.1.0-beta.47 → 0.1.0-beta.49

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@katlux/toolkit",
   "configKey": "katluxToolkit",
-  "version": "0.1.0-beta.47",
+  "version": "0.1.0-beta.49",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/runtime/components/KButton/KButton.logic.d.ts

@@ -22,7 +22,7 @@ export interface KButtonEmits {
 export declare function useKButtonLogic(props: KButtonProps, emit: KButtonEmits): {
     isLink: import("vue").ComputedRef<boolean>;
     isDisabled: import("vue").ComputedRef<boolean | undefined>;
-    buttonClasses: import("vue").ComputedRef<("info" | "default" | "primary" | "danger" | "success" | "warning" | "light" | "dark" | "small" | "large" | "medium" | {
+    buttonClasses: import("vue").ComputedRef<("info" | "default" | "small" | "primary" | "danger" | "success" | "warning" | "light" | "dark" | "large" | "medium" | {
         disabled: boolean | undefined;
     })[]>;
     onClick: () => void;

package/dist/runtime/components/KCalendar/KCalendar.global.d.vue.ts

@@ -9,19 +9,19 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         default: number;
     };
     definedDays: {
-        type: PropType<import("./types.js").IDefinedDay[]>;
+        type: import("vue").PropType<import("./types.js").IDefinedDay[]>;
         default: () => never[];
     };
     markedDays: {
-        type: PropType<import("./types.js").IMarkedDay[]>;
+        type: import("vue").PropType<import("./types.js").IMarkedDay[]>;
         default: () => never[];
     };
     day: {
-        type: PropType<Date | String>;
+        type: import("vue").PropType<Date | String>;
         required: boolean;
     };
     selectedDay: {
-        type: PropType<Date | String>;
+        type: import("vue").PropType<Date | String>;
         default: null;
     };
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
@@ -38,19 +38,19 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         default: number;
     };
     definedDays: {
-        type: PropType<import("./types.js").IDefinedDay[]>;
+        type: import("vue").PropType<import("./types.js").IDefinedDay[]>;
         default: () => never[];
     };
     markedDays: {
-        type: PropType<import("./types.js").IMarkedDay[]>;
+        type: import("vue").PropType<import("./types.js").IMarkedDay[]>;
         default: () => never[];
     };
     day: {
-        type: PropType<Date | String>;
+        type: import("vue").PropType<Date | String>;
         required: boolean;
     };
     selectedDay: {
-        type: PropType<Date | String>;
+        type: import("vue").PropType<Date | String>;
         default: null;
     };
 }>> & Readonly<{
@@ -59,10 +59,9 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
 }>, {
     view: string;
     viewCount: number;
-    definedDays: any;
-    markedDays: any;
-    day: any;
-    selectedDay: any;
+    definedDays: import("./types.js").IDefinedDay[];
+    markedDays: import("./types.js").IMarkedDay[];
+    selectedDay: String | Date;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/KCalendar/KCalendar.global.vue.d.ts

@@ -9,19 +9,19 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         default: number;
     };
     definedDays: {
-        type: PropType<import("./types.js").IDefinedDay[]>;
+        type: import("vue").PropType<import("./types.js").IDefinedDay[]>;
         default: () => never[];
     };
     markedDays: {
-        type: PropType<import("./types.js").IMarkedDay[]>;
+        type: import("vue").PropType<import("./types.js").IMarkedDay[]>;
         default: () => never[];
     };
     day: {
-        type: PropType<Date | String>;
+        type: import("vue").PropType<Date | String>;
         required: boolean;
     };
     selectedDay: {
-        type: PropType<Date | String>;
+        type: import("vue").PropType<Date | String>;
         default: null;
     };
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
@@ -38,19 +38,19 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         default: number;
     };
     definedDays: {
-        type: PropType<import("./types.js").IDefinedDay[]>;
+        type: import("vue").PropType<import("./types.js").IDefinedDay[]>;
         default: () => never[];
     };
     markedDays: {
-        type: PropType<import("./types.js").IMarkedDay[]>;
+        type: import("vue").PropType<import("./types.js").IMarkedDay[]>;
         default: () => never[];
     };
     day: {
-        type: PropType<Date | String>;
+        type: import("vue").PropType<Date | String>;
         required: boolean;
     };
     selectedDay: {
-        type: PropType<Date | String>;
+        type: import("vue").PropType<Date | String>;
         default: null;
     };
 }>> & Readonly<{
@@ -59,10 +59,9 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
 }>, {
     view: string;
     viewCount: number;
-    definedDays: any;
-    markedDays: any;
-    day: any;
-    selectedDay: any;
+    definedDays: import("./types.js").IDefinedDay[];
+    markedDays: import("./types.js").IMarkedDay[];
+    selectedDay: String | Date;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/KCalendar/KCalendar.logic.d.ts

@@ -1,3 +1,4 @@
+import { type PropType } from 'vue';
 import type { IMarkedDay, IDefinedDay } from './types.js';
 export interface KCalendarProps {
     view?: string;

package/dist/runtime/components/KCalendar/KCalendar.logic.js

@@ -33,14 +33,30 @@ export function useKCalendarLogic(props, emit) {
   const actualWeek = ref();
   const actualYear = ref();
   const currentView = computed(() => props.view ?? "month");
+  function initViewFromDate(dateInput) {
+    if (!dateInput) return false;
+    const date = typeof dateInput === "string" ? new Date(dateInput) : dateInput;
+    if (!isNaN(date.getTime())) {
+      actualMonth.value = date.getMonth() + 1;
+      actualYear.value = date.getFullYear();
+      return true;
+    }
+    return false;
+  }
   watch(
     () => props.day,
     (newVal) => {
       if (!newVal) return;
-      const date = typeof newVal === "string" ? new Date(newVal) : newVal;
-      if (!isNaN(date.getTime())) {
-        actualMonth.value = date.getMonth() + 1;
-        actualYear.value = date.getFullYear();
+      initViewFromDate(newVal);
+    },
+    { immediate: true }
+  );
+  watch(
+    () => props.selectedDay,
+    (newValue) => {
+      monthSelectedDay.value = newValue ?? "";
+      if (!props.day && actualYear.value === void 0) {
+        initViewFromDate(newValue);
       }
     },
     { immediate: true }
@@ -52,14 +68,13 @@ export function useKCalendarLogic(props, emit) {
         emit("update:selectedDay", newValue);
     }
   );
-  watch(
-    () => props.selectedDay,
-    (newValue) => {
-      monthSelectedDay.value = newValue;
-    }
-  );
   onMounted(() => {
     monthSelectedDay.value = props.selectedDay || "";
+    if (actualYear.value === void 0) {
+      const now = /* @__PURE__ */ new Date();
+      actualMonth.value = now.getMonth() + 1;
+      actualYear.value = now.getFullYear();
+    }
   });
   const months = [
     "January",

package/dist/runtime/components/KDatatable/KDataIterator.logic.d.ts

@@ -1,20 +0,0 @@
-import { ADataProvider } from '@katlux/providers';
-export interface KDataIteratorProps {
-    dataProvider: ADataProvider;
-    visibleFields?: Array<string> | null;
-    loading?: boolean;
-    search?: string;
-    itemsPerPage?: number;
-    page?: number;
-}
-export declare const KDataIteratorDefaultProps: {
-    visibleFields: null;
-    loading: boolean;
-    search: string;
-    itemsPerPage: number;
-    page: number;
-};
-export declare function useKDataIteratorLogic(props: KDataIteratorProps): {
-    selectedRows: import("vue").Ref<any[], any[]>;
-    selectAll: import("vue").Ref<boolean, boolean>;
-};

package/dist/runtime/components/KDatatable/KDatatable.logic.d.ts

@@ -1,12 +0,0 @@
-import { ADataProvider } from '@katlux/providers';
-export interface KDatatableProps {
-    dataProvider: ADataProvider;
-    visibleFields?: Array<string> | null;
-}
-export declare const KDatatableDefaultProps: {
-    visibleFields: null;
-};
-export declare function useKDatatableLogic(props: KDatatableProps): {
-    selectedRows: import("vue").Ref<any[], any[]>;
-    selectAll: import("vue").Ref<boolean, boolean>;
-};

package/dist/runtime/components/KDatePicker/KDatePicker.global.d.vue.ts

@@ -78,8 +78,8 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
     "onUpdate:isOpen"?: ((value: boolean) => any) | undefined;
 }>, {
     isOpen: boolean;
-    day: string | Date;
     modelValue: string | Date;
+    day: string | Date;
     teleportTo: string;
     format: string;
     showClear: boolean;

package/dist/runtime/components/KDatePicker/KDatePicker.global.vue.d.ts

@@ -78,8 +78,8 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
     "onUpdate:isOpen"?: ((value: boolean) => any) | undefined;
 }>, {
     isOpen: boolean;
-    day: string | Date;
     modelValue: string | Date;
+    day: string | Date;
     teleportTo: string;
     format: string;
     showClear: boolean;

package/dist/runtime/components/KDatePicker/KDatePicker.logic.js

@@ -46,18 +46,14 @@ export function useKDatePickerLogic(props) {
     }
     const format = props.format;
     let day = "", month = "", year = "";
-    let rawIdx = 0;
     for (let i = 0; i < format.length; i++) {
       const char = format[i];
       if (char === "M") {
-        month += newVal[rawIdx] || "";
-        rawIdx++;
+        month += newVal[i] || "";
       } else if (char === "D") {
-        day += newVal[rawIdx] || "";
-        rawIdx++;
+        day += newVal[i] || "";
       } else if (char === "Y") {
-        year += newVal[rawIdx] || "";
-        rawIdx++;
+        year += newVal[i] || "";
       }
     }
     if (month.length === 2 && day.length === 2 && year.length === 4) {

package/dist/runtime/components/KDateTimePicker/KDateTimePicker.global.d.vue.ts

@@ -92,8 +92,8 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
     "onUpdate:isOpen"?: ((value: boolean) => any) | undefined;
 }>, {
     isOpen: boolean;
-    day: string | Date;
     modelValue: string | Date;
+    day: string | Date;
     teleportTo: string;
     format: string;
     showClear: boolean;

package/dist/runtime/components/KDateTimePicker/KDateTimePicker.global.vue.d.ts

@@ -92,8 +92,8 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
     "onUpdate:isOpen"?: ((value: boolean) => any) | undefined;
 }>, {
     isOpen: boolean;
-    day: string | Date;
     modelValue: string | Date;
+    day: string | Date;
     teleportTo: string;
     format: string;
     showClear: boolean;

package/dist/runtime/components/KDropdown/KDropdown.global.vue

@@ -1,12 +1,17 @@
 <script setup>
 import { useKDropdownLogic, KDropdownDefaultProps } from "./KDropdown.logic";
 import { usePresetComponent } from "../../composables/usePresetComponent";
-import { computed } from "vue";
+import { computed, watch } from "vue";
 import KDropdownDefault from "../../presets/default/components/KDropdown/KDropdown.vue";
 const props = defineProps(KDropdownDefaultProps);
 const emit = defineEmits(["update:isOpen"]);
-const { open, dropdownRect, clickoutside, teleportTarget, isInModal } = useKDropdownLogic(props, emit);
+const { open, dropdownRect, clickoutside, teleportTarget, isInModal, updatePosition } = useKDropdownLogic(props, emit);
 const presetComponent = usePresetComponent("KDropdown", KDropdownDefault);
+watch(presetComponent, () => {
+  if (open.value) {
+    updatePosition();
+  }
+});
 const templateProps = computed(() => ({
   open: open.value,
   fullWidth: props.fullWidth,

package/dist/runtime/components/KDropdown/KDropdown.logic.d.ts

@@ -1,4 +1,4 @@
-import { type PropType } from 'vue';
+import { type PropType, type Ref } from 'vue';
 export interface KDropdownProps {
     isOpen: boolean;
     fullWidth: boolean;
@@ -27,8 +27,8 @@ export declare const KDropdownDefaultProps: {
     };
 };
 export declare function useKDropdownLogic(props: KDropdownProps, emit: KDropdownEmits): {
-    open: import("vue").Ref<boolean, boolean>;
-    dropdownRect: import("vue").Ref<{
+    open: Ref<boolean, boolean>;
+    dropdownRect: Ref<{
         top: number;
         left: number;
         width: number;
@@ -44,4 +44,5 @@ export declare function useKDropdownLogic(props: KDropdownProps, emit: KDropdown
     clickoutside: () => void;
     teleportTarget: import("vue").ComputedRef<string>;
     isInModal: import("vue").ComputedRef<boolean>;
+    updatePosition: () => void;
 };

package/dist/runtime/components/KDropdown/KDropdown.logic.js

@@ -20,10 +20,17 @@ export const KDropdownDefaultProps = {
 };
 export function useKDropdownLogic(props, emit) {
   const modalPortalId = inject(KMODAL_PORTAL_ID_KEY, null);
-  const isInModal = computed(() => !!modalPortalId);
+  const isInModal = computed(() => !!modalPortalId?.value);
   const teleportTarget = computed(() => {
     if (props.teleportTo) return props.teleportTo;
-    if (isInModal.value) return `#${modalPortalId}`;
+    if (isInModal.value && modalPortalId?.value) {
+      const targetId = `#${modalPortalId.value}`;
+      if (typeof document !== "undefined" && !document.querySelector(targetId)) {
+        const activePortal = document.querySelector(".modal-portal");
+        if (activePortal && activePortal.id) return `#${activePortal.id}`;
+      }
+      return targetId;
+    }
     return "body";
   });
   const open = ref(false);
@@ -87,12 +94,6 @@ export function useKDropdownLogic(props, emit) {
     }
   );
   onMounted(() => {
-    if (props.isOpen) {
-      updatePosition();
-      nextTick(() => {
-        open.value = true;
-      });
-    }
     window.addEventListener("scroll", onScrollResize, true);
     window.addEventListener("resize", onScrollResize);
   });
@@ -105,6 +106,7 @@ export function useKDropdownLogic(props, emit) {
     dropdownRect,
     clickoutside,
     teleportTarget,
-    isInModal
+    isInModal,
+    updatePosition
   };
 }

package/dist/runtime/components/KModal/KModal.global.vue

@@ -4,7 +4,8 @@ import { usePresetComponent } from "../../composables/usePresetComponent";
 import { computed } from "vue";
 import KModalDefault from "../../presets/default/components/KModal/KModal.vue";
 const props = defineProps(KModalDefaultProps);
-const stableId = globalThis.useId ? globalThis.useId() : `k-modal-${Math.random().toString(36).slice(2, 9)}`;
+const useId = globalThis.useId || (() => `k-modal-${Math.random().toString(36).slice(2, 9)}`);
+const stableId = useId();
 const { modalId, opened, openModal, closeModal } = useKModalLogic(props, stableId);
 defineExpose({
   openModal,
@@ -12,7 +13,7 @@ defineExpose({
 });
 const presetComponent = usePresetComponent("KModal", KModalDefault);
 const templateProps = computed(() => ({
-  modalId,
+  modalId: modalId.value,
   opened: opened.value,
   closeModal
 }));

package/dist/runtime/components/KModal/KModal.logic.d.ts

@@ -3,7 +3,7 @@ export interface KModalProps {
 }
 export declare const KModalDefaultProps: {};
 export declare function useKModalLogic(props: KModalProps, stableId: string): {
-    modalId: string;
+    modalId: import("vue").ComputedRef<string>;
     opened: import("vue").Ref<boolean, boolean>;
     openModal: () => void;
     closeModal: () => void;

package/dist/runtime/components/KModal/KModal.logic.js

@@ -1,8 +1,8 @@
-import { ref, provide } from "vue";
+import { ref, provide, computed } from "vue";
 export const KMODAL_PORTAL_ID_KEY = "KMODAL_PORTAL_ID";
 export const KModalDefaultProps = {};
 export function useKModalLogic(props, stableId) {
-  const modalId = stableId;
+  const modalId = computed(() => stableId);
   provide(KMODAL_PORTAL_ID_KEY, modalId);
   const opened = ref(false);
   function openModal() {

package/dist/runtime/components/KTreePicker/KTreePicker.global.d.vue.ts

@@ -103,8 +103,6 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
     onChange?: ((value: any) => any) | undefined;
     "onUpdate:modelValue"?: ((value: any) => any) | undefined;
 }>, {
-    parentKey: string;
-    idKey: string;
     disabled: boolean;
     loading: boolean;
     modelValue: any;
@@ -114,6 +112,8 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
     closeOnSelect: boolean;
     multiSelect: boolean;
     iconField: string;
+    idKey: string;
+    parentKey: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/KTreePicker/KTreePicker.global.vue.d.ts

@@ -103,8 +103,6 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
     onChange?: ((value: any) => any) | undefined;
     "onUpdate:modelValue"?: ((value: any) => any) | undefined;
 }>, {
-    parentKey: string;
-    idKey: string;
     disabled: boolean;
     loading: boolean;
     modelValue: any;
@@ -114,6 +112,8 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
     closeOnSelect: boolean;
     multiSelect: boolean;
     iconField: string;
+    idKey: string;
+    parentKey: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/KTreeView/KTreeView.global.d.vue.ts

@@ -81,14 +81,14 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         default: () => {};
     };
 }>> & Readonly<{}>, {
-    parentKey: string;
-    idKey: string;
-    expandedByDefault: boolean;
     bulkActions: import("@katlux/providers").IKDatatableAction[];
     rowActions: import("./KTreeView.logic.js").IRowAction[];
     cellSlots: Record<string, any>;
     headerSlots: Record<string, any>;
     treeColumnIndex: number;
+    idKey: string;
+    parentKey: string;
+    expandedByDefault: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/KTreeView/KTreeView.global.vue.d.ts

@@ -81,14 +81,14 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         default: () => {};
     };
 }>> & Readonly<{}>, {
-    parentKey: string;
-    idKey: string;
-    expandedByDefault: boolean;
     bulkActions: import("@katlux/providers").IKDatatableAction[];
     rowActions: import("./KTreeView.logic.js").IRowAction[];
     cellSlots: Record<string, any>;
     headerSlots: Record<string, any>;
     treeColumnIndex: number;
+    idKey: string;
+    parentKey: string;
+    expandedByDefault: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/presets/default/assets/scss/css-variables.css

@@ -124,9 +124,11 @@
   --button-bg-dark: var(--neutral-900);
   --button-text-dark: var(--font-color-light);
   --button-hover-bg-dark: var(--neutral-700);
-  --panel-bg-default: var(--yellow-300);
-  --panel-header-bg-default: var(--yellow-500);
-  --panel-footer-bg-default: var(--blue-100);
+  --panel-bg-opacity: 1;
+  --panel-blur: 0px;
+  --panel-bg-default: var(--neutral-50);
+  --panel-header-bg-default: var(--neutral-100);
+  --panel-footer-bg-default: var(--neutral-100);
   --panel-bg-primary: var(--blue-300);
   --panel-header-bg-primary: var(--blue-500);
   --panel-footer-bg-primary: var(--blue-100);
@@ -162,6 +164,7 @@
   --component-gap: var(--gap-sm);
   --layover: var(--neutral-600);
   --modal-overlay-bg: rgba(0, 0, 0, 0.5);
+  --modal-backdrop-blur: 0px;
   --layout-header-height: 60px;
   --layout-header-bg: var(--background-color);
   --layout-sidebar-width: 200px;

package/dist/runtime/presets/default/assets/scss/css-variables.scss

@@ -178,9 +178,11 @@
 	--button-hover-bg-dark: var(--neutral-700);
 
 	// Panel Colors - Default
-	--panel-bg-default: var(--yellow-300);
-	--panel-header-bg-default: var(--yellow-500);
-	--panel-footer-bg-default: var(--blue-100);
+	--panel-bg-opacity: 1;
+	--panel-blur: 0px;
+	--panel-bg-default: var(--neutral-50);
+	--panel-header-bg-default: var(--neutral-100);
+	--panel-footer-bg-default: var(--neutral-100);
 
 	// Panel Colors - Primary
 	--panel-bg-primary: var(--blue-300);
@@ -236,6 +238,7 @@
 	--component-gap: var(--gap-sm);
 	--layover: var(--neutral-600);
 	--modal-overlay-bg: rgba(0, 0, 0, 0.5);
+	--modal-backdrop-blur: 0px;
 
 	// Layout Variables
 	--layout-header-height: 60px;

package/dist/runtime/presets/default/assets/scss/index.css

@@ -141,9 +141,11 @@ li {
   --button-bg-dark: var(--neutral-900);
   --button-text-dark: var(--font-color-light);
   --button-hover-bg-dark: var(--neutral-700);
-  --panel-bg-default: var(--yellow-300);
-  --panel-header-bg-default: var(--yellow-500);
-  --panel-footer-bg-default: var(--blue-100);
+  --panel-bg-opacity: 1;
+  --panel-blur: 0px;
+  --panel-bg-default: var(--neutral-50);
+  --panel-header-bg-default: var(--neutral-100);
+  --panel-footer-bg-default: var(--neutral-100);
   --panel-bg-primary: var(--blue-300);
   --panel-header-bg-primary: var(--blue-500);
   --panel-footer-bg-primary: var(--blue-100);
@@ -179,6 +181,7 @@ li {
   --component-gap: var(--gap-sm);
   --layover: var(--neutral-600);
   --modal-overlay-bg: rgba(0, 0, 0, 0.5);
+  --modal-backdrop-blur: 0px;
   --layout-header-height: 60px;
   --layout-header-bg: var(--background-color);
   --layout-sidebar-width: 200px;

package/dist/runtime/presets/default/components/KModal/KModal.vue

@@ -1,6 +1,6 @@
 <template lang="pug">
 dialog.k-dialog(ref="dialogRef" @close="closeModal" @click="handleBackdropClick")
-	.modal-portal(:id="modalId" style="position: absolute; top: 0; left: 0;")
+	.modal-portal(:id="modalId" style="position: absolute; top: 0; left: 0; z-index: 2000;")
 	KPanel(no-gap flex-content scrollable).modal-container
 		template(#header)
 			slot(name="header")
@@ -57,6 +57,7 @@ const handleBackdropClick = (event: MouseEvent) => {
 	
 	&::backdrop {
 		background-color: var(--modal-overlay-bg);
+		backdrop-filter: blur(var(--modal-backdrop-blur));
 	}
 
 	.modal-container {

package/dist/runtime/presets/default/components/KPanel/KPanel.vue

@@ -33,8 +33,8 @@ const props = withDefaults(defineProps<{
 	border-radius: var(--border-radius-lg);
 	border: 1px solid var(--neutral-200);
 	box-shadow: var(--shadow-md);
-	background-color: color-mix(in srgb, var(--current-panel-bg), transparent 99%);
-	backdrop-filter: blur(8px);
+	background-color: color-mix(in srgb, var(--current-panel-bg), transparent calc((1 - var(--panel-bg-opacity)) * 100%));
+	backdrop-filter: blur(var(--panel-blur));
 	width: 100%;
 	display: flex;
 	flex-direction: column;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@katlux/toolkit",
-	"version": "0.1.0-beta.47",
+	"version": "0.1.0-beta.49",
 	"description": "Core UI toolkit and utilities for the Katlux ecosystem",
 	"author": "Katlux",
 	"license": "MIT",