origam 2.14.1 → 2.16.0

package/dist/src/components/Clipboard/OrigamClipboard.vue

@@ -88,13 +88,14 @@ const props = defineProps({
   paddingRight: { type: [Boolean, Number, String], required: false },
   paddingBlock: { type: [Boolean, Number, String], required: false },
   paddingInline: { type: [Boolean, Number, String], required: false },
-  fontFamily: { type: String, required: false },
-  fontSize: { type: String, required: false },
-  fontWeight: { type: String, required: false },
-  lineHeight: { type: String, required: false },
-  letterSpacing: { type: String, required: false }
+  fontFamily: { type: null, required: false },
+  fontSize: { type: null, required: false },
+  fontWeight: { type: null, required: false },
+  lineHeight: { type: null, required: false },
+  letterSpacing: { type: null, required: false }
 });
 const emit = defineEmits(["copy", "error"]);
+defineSlots();
 const { colorClasses, colorStyles } = useBothColor(toRef(props, "bgColor"), toRef(props, "color"));
 const { borderClasses, borderStyles } = useBorder(props);
 const { roundedClasses, roundedStyles } = useRounded(props);

package/dist/src/components/Code/OrigamCode.vue

@@ -148,14 +148,15 @@ const _props = defineProps({
   width: { type: [Number, String], required: false },
   color: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
-  fontFamily: { type: String, required: false },
-  fontSize: { type: String, required: false },
-  fontWeight: { type: String, required: false },
-  lineHeight: { type: String, required: false },
-  letterSpacing: { type: String, required: false }
+  fontFamily: { type: null, required: false },
+  fontSize: { type: null, required: false },
+  fontWeight: { type: null, required: false },
+  lineHeight: { type: null, required: false },
+  letterSpacing: { type: null, required: false }
 });
 const props = useDefaults(_props);
 const emit = defineEmits(["copy"]);
+defineSlots();
 const slots = useSlots();
 const { borderClasses, borderStyles } = useBorder(props);
 const { roundedClasses, roundedStyles } = useRounded(props);

package/dist/src/components/ColorPicker/OrigamColorPicker.vue

@@ -148,7 +148,7 @@ const props = defineProps({
   side: { type: null, required: false },
   swipeable: { type: Boolean, required: false },
   snapPoints: { type: Array, required: false },
-  defaultSnap: { type: [String, Object], required: false },
+  defaultSnap: { type: null, required: false },
   open: { type: Boolean, required: false },
   disabled: { type: Boolean, required: false },
   persistent: { type: Boolean, required: false },
@@ -171,11 +171,11 @@ const props = defineProps({
   activeClass: { type: String, required: false },
   hover: { type: [Boolean, Object], required: false },
   title: { type: String, required: false },
-  fontFamily: { type: String, required: false },
-  fontSize: { type: String, required: false },
-  fontWeight: { type: String, required: false },
-  lineHeight: { type: String, required: false },
-  letterSpacing: { type: String, required: false },
+  fontFamily: { type: null, required: false },
+  fontSize: { type: null, required: false },
+  fontWeight: { type: null, required: false },
+  lineHeight: { type: null, required: false },
+  letterSpacing: { type: null, required: false },
   colorHsv: { type: [Object, null], required: false },
   dotSize: { type: [String, Number], required: false, default: 10 },
   ariaLabel: { type: String, required: false },
@@ -185,6 +185,7 @@ const props = defineProps({
   swatches: { type: Array, required: false }
 });
 defineEmits(["update:modelValue", "update:mode"]);
+defineSlots();
 const slots = useSlots();
 const { filterProps } = useProps(props);
 const { rtlClasses } = useRtl();

package/dist/src/components/ColorPicker/OrigamColorPickerCanvas.vue

@@ -29,6 +29,7 @@
 
 <script lang="ts" setup>
 import { useLocale, useProps, useResizeObserver, useStyle } from "../../composables";
+import { COLOR_NULL } from "../../consts";
 import { KEYBOARD_VALUES } from "../../enums";
 import { clamp, convertToUnit, getEventCoordinates, int } from "../../utils";
 import { computed, onMounted, ref, shallowRef, StyleValue, watch } from "vue";
@@ -140,8 +141,7 @@ const STEP_LARGE = 0.05;
 const handleKeyDown = (e) => {
   if (props.disabled) return;
   const step = e.shiftKey ? STEP_LARGE : STEP_SMALL;
-  const hsv = props.colorHsv;
-  if (!hsv) return;
+  const hsv = props.colorHsv ?? COLOR_NULL;
   const { h, a } = hsv;
   let { s, v } = hsv;
   let handled = false;

package/dist/src/components/ColorPickerField/OrigamColorPickerField.vue

@@ -216,11 +216,11 @@ const _props = defineProps({
   roundedTopLeft: { type: [Boolean, Number, String], required: false },
   roundedBottomLeft: { type: [Boolean, Number, String], required: false },
   roundedBottomRight: { type: [Boolean, Number, String], required: false },
-  fontFamily: { type: String, required: false },
-  fontSize: { type: String, required: false },
-  fontWeight: { type: String, required: false },
-  lineHeight: { type: String, required: false },
-  letterSpacing: { type: String, required: false },
+  fontFamily: { type: null, required: false },
+  fontSize: { type: null, required: false },
+  fontWeight: { type: null, required: false },
+  lineHeight: { type: null, required: false },
+  letterSpacing: { type: null, required: false },
   active: { type: [Boolean, Object], required: false },
   activeClass: { type: String, required: false },
   variant: { type: null, required: false },
@@ -253,6 +253,7 @@ const _props = defineProps({
 });
 const props = useDefaults(_props);
 const { filterProps } = useProps(props);
+defineSlots();
 const { t } = useLocale();
 const origamTextFieldRef = ref();
 const origamMenuRef = ref();

package/dist/src/components/CommandPalette/OrigamCommandPalette.vue

@@ -194,11 +194,11 @@ const props = defineProps({
   id: { type: String, required: false },
   class: { type: [String, Array, Object], required: false },
   style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
-  fontFamily: { type: String, required: false },
-  fontSize: { type: String, required: false },
-  fontWeight: { type: String, required: false },
-  lineHeight: { type: String, required: false },
-  letterSpacing: { type: String, required: false }
+  fontFamily: { type: null, required: false },
+  fontSize: { type: null, required: false },
+  fontWeight: { type: null, required: false },
+  lineHeight: { type: null, required: false },
+  letterSpacing: { type: null, required: false }
 });
 const emit = defineEmits(["update:modelValue", "select", "query"]);
 defineSlots();

package/dist/src/components/ContextualMenu/OrigamContextualMenu.vue

@@ -141,11 +141,11 @@ const props = defineProps({
   prependAvatar: { type: String, required: false },
   prependIcon: { type: null, required: false },
   hover: { type: [Boolean, Object], required: false },
-  fontFamily: { type: String, required: false },
-  fontSize: { type: String, required: false },
-  fontWeight: { type: String, required: false },
-  lineHeight: { type: String, required: false },
-  letterSpacing: { type: String, required: false }
+  fontFamily: { type: null, required: false },
+  fontSize: { type: null, required: false },
+  fontWeight: { type: null, required: false },
+  lineHeight: { type: null, required: false },
+  letterSpacing: { type: null, required: false }
 });
 const { filterProps } = useProps(props);
 const modelValue = useVModel(props, "modelValue", false);

package/dist/src/components/Counter/OrigamCounter.vue

@@ -21,7 +21,18 @@
 
 <script lang="ts" setup>
 import { OrigamSlideY, OrigamTransition } from "../../components";
-import { useBothColor, useProps, useSsrBoot, useStyle } from "../../composables";
+import {
+  useBorder,
+  useBothColor,
+  useDensity,
+  useElevation,
+  useMargin,
+  usePadding,
+  useProps,
+  useRounded,
+  useSsrBoot,
+  useStyle
+} from "../../composables";
 import { computed, StyleValue, toRef } from "vue";
 const props = defineProps({
   active: { type: Boolean, required: false },
@@ -70,8 +81,15 @@ const props = defineProps({
   density: { type: null, required: false },
   transition: { type: [Boolean, String, Object], required: false, default: () => ({ component: OrigamSlideY }) }
 });
+defineSlots();
 const { filterProps } = useProps(props);
 const { colorClasses, colorStyles } = useBothColor(toRef(props, "bgColor"), toRef(props, "color"));
+const { paddingClasses, paddingStyles } = usePadding(props);
+const { marginClasses, marginStyles } = useMargin(props);
+const { borderClasses, borderStyles } = useBorder(props);
+const { roundedClasses, roundedStyles } = useRounded(props);
+const { elevationClasses, elevationStyles } = useElevation(props);
+const { densityClasses } = useDensity(props);
 const { isBooted } = useSsrBoot();
 const counter = computed(() => {
   return props.max ? `${props.value} / ${props.max}` : String(props.value);
@@ -79,6 +97,11 @@ const counter = computed(() => {
 const counterStyles = computed(() => {
   return [
     colorStyles.value,
+    borderStyles.value,
+    roundedStyles.value,
+    elevationStyles.value,
+    marginStyles.value,
+    paddingStyles.value,
     props.style
   ];
 });
@@ -89,6 +112,12 @@ const counterClasses = computed(() => {
       "origam-counter--error": props.max && !props.disabled && parseFloat(props.value) > parseFloat(props.max)
     },
     colorClasses.value,
+    borderClasses.value,
+    roundedClasses.value,
+    elevationClasses.value,
+    densityClasses.value,
+    paddingClasses.value,
+    marginClasses.value,
     props.class
   ];
 });
@@ -107,7 +136,19 @@ defineExpose({
 	.origam-counter {
 		color: currentColor;
 		flex: 0 1 auto;
-		font-size: 12px;
+		font-size: var(--origam-counter---font-size, 12px);
 		transition-duration: 150ms;
+
+		&--density-comfortable {
+			--origam-counter---font-size: 13px;
+		}
+
+		&--density-default {
+			--origam-counter---font-size: 12px;
+		}
+
+		&--density-compact {
+			--origam-counter---font-size: 11px;
+		}
 	}
 </style>

package/dist/src/components/DataList/OrigamDataList.vue

@@ -190,7 +190,7 @@ import { vContrast } from "../../directives";
 import { isDataListKVItemValueComponent } from "../../utils";
 import { isEmpty, toKebabCase } from "../../utils";
 const props = defineProps({
-  mode: { type: String, required: false, default: "avatar" },
+  mode: { type: null, required: false, default: "avatar" },
   items: { type: [Array, Object], required: false },
   id: { type: String, required: false },
   class: { type: [String, Array, Object], required: false },
@@ -235,12 +235,13 @@ const props = defineProps({
   roundedBottomLeft: { type: [Boolean, Number, String], required: false },
   roundedBottomRight: { type: [Boolean, Number, String], required: false },
   elevation: { type: [Number, String], required: false },
-  fontFamily: { type: String, required: false },
-  fontSize: { type: String, required: false },
-  fontWeight: { type: String, required: false },
-  lineHeight: { type: String, required: false },
-  letterSpacing: { type: String, required: false }
+  fontFamily: { type: null, required: false },
+  fontSize: { type: null, required: false },
+  fontWeight: { type: null, required: false },
+  lineHeight: { type: null, required: false },
+  letterSpacing: { type: null, required: false }
 });
+defineSlots();
 const { filterProps } = useProps(props);
 const slots = useSlots();
 const { densityClasses } = useDensity(props);

package/dist/src/components/DataList/OrigamDataText.vue

@@ -93,6 +93,7 @@ const props = defineProps({
   color: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true }
 });
+defineSlots();
 const { filterProps } = useProps(props);
 const { densityClasses } = useDensity(props);
 const { paddingClasses, paddingStyles } = usePadding(props);

package/dist/src/components/DataList/OrigamDataTitle.vue

@@ -96,6 +96,7 @@ const props = defineProps({
   color: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true }
 });
+defineSlots();
 const { filterProps } = useProps(props);
 const { densityClasses } = useDensity(props);
 const { paddingClasses, paddingStyles } = usePadding(props);

package/dist/src/components/DataTable/OrigamDataTable.vue

@@ -51,12 +51,9 @@
 
 						<template
 								v-if="slots['header.loader']"
-								#loader="headerLoaderProps"
+								#loader
 						>
-							<slot
-									name="header.loader"
-									v-bind="headerLoaderProps"
-							/>
+							<slot name="header.loader"/>
 						</template>
 					</origam-data-table-headers>
 					</thead>
@@ -194,11 +191,11 @@ const props = defineProps({
   width: { type: [Number, String], required: false },
   density: { type: null, required: false, default: DENSITY.DEFAULT },
   tag: { type: String, required: false, default: "div" },
-  fontFamily: { type: String, required: false },
-  fontSize: { type: String, required: false },
-  fontWeight: { type: String, required: false },
-  lineHeight: { type: String, required: false },
-  letterSpacing: { type: String, required: false },
+  fontFamily: { type: null, required: false },
+  fontSize: { type: null, required: false },
+  fontWeight: { type: null, required: false },
+  lineHeight: { type: null, required: false },
+  letterSpacing: { type: null, required: false },
   item: { type: Object, required: true },
   cellProps: { type: [Object, Function], required: false },
   mobileBreakpoint: { type: null, required: false, default: "xs" },
@@ -255,6 +252,7 @@ const props = defineProps({
   alignXxl: { type: null, required: false }
 });
 defineEmits(["update:page", "update:itemsPerPage", "update:sortBy", "update:options", "update:groupBy", "update:expanded", "update:currentItems", "update:modelValue"]);
+defineSlots();
 const { filterProps } = useProps(props);
 const attrs = useAttrs();
 const origamTableRef = ref();

package/dist/src/components/DataTable/OrigamDataTableColumnCell.vue

@@ -43,6 +43,7 @@ const props = defineProps({
   paddingBlock: { type: [Boolean, Number, String], required: false },
   paddingInline: { type: [Boolean, Number, String], required: false }
 });
+defineSlots();
 const { filterProps } = useProps(props);
 const { dimensionStyles } = useDimension(props);
 const { paddingStyles, paddingClasses } = usePadding(props);

package/dist/src/components/DataTable/OrigamDataTableFooter.vue

@@ -82,6 +82,7 @@ const props = defineProps({
   alignXl: { type: null, required: false },
   alignXxl: { type: null, required: false }
 });
+defineSlots();
 const { filterProps } = useProps(props);
 const { t } = useLocale();
 const origamPaginationRef = ref();

package/dist/src/components/DataTable/OrigamDataTableGroupHeaderRow.vue

@@ -74,6 +74,7 @@ const props = defineProps({
   paddingBlock: { type: [Boolean, Number, String], required: false },
   paddingInline: { type: [Boolean, Number, String], required: false }
 });
+defineSlots();
 const { filterProps } = useProps(props);
 const { isGroupOpen, toggleGroup, extractRows } = useGroupBy();
 const { isSelected, isSomeSelected, select } = useSelection();

package/dist/src/components/DataTable/OrigamDataTableHeaderCell.vue

@@ -86,6 +86,7 @@ const props = defineProps({
   color: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true }
 });
+defineSlots();
 const { filterProps } = useProps(props);
 const { toggleSort, sortBy, isSorted } = useSort();
 const { someSelected, allSelected, selectAll } = useSelection();

package/dist/src/components/DataTable/OrigamDataTableHeaders.vue

@@ -63,7 +63,7 @@ import {
   useSort,
   useStyle
 } from "../../composables";
-import { PROGRESS_TYPE } from "../../enums";
+import { LOADER_KIND, PROGRESS_TYPE } from "../../enums";
 import { computed, ref, StyleValue } from "vue";
 const props = defineProps({
   id: { type: String, required: false },
@@ -81,13 +81,14 @@ const props = defineProps({
   sortAscIcon: { type: null, required: false },
   sortDescIcon: { type: null, required: false }
 });
+defineSlots();
 const { filterProps } = useProps(props);
 const origamDataTableHeadersCellRef = ref();
 const origamDataTableHeadersCellMobileRef = ref();
 const { toggleSort, sortBy, isSorted } = useSort();
 const { someSelected, allSelected, selectAll } = useSelection();
 const { columns, headers } = useHeaders();
-const { loaderClasses, loaderConfig } = useLoader(props, "line");
+const { loaderClasses, loaderConfig } = useLoader(props, LOADER_KIND.LINE);
 const { getSortIcon } = useHeadersCell(props);
 const { displayClasses, mobile } = useDisplay(props);
 const slotProps = computed(() => {

package/dist/src/components/DataTable/OrigamDataTableHeadersCellMobile.vue

@@ -20,6 +20,7 @@
 							clearable
 							@click:clear="handleClear"
 							@click:append="handleAppendCLick"
+							@click:prepend="handlePrependClick"
 					>
 						<template
 								v-if="slots['select.prepend']"
@@ -211,6 +212,7 @@ const props = defineProps({
   color: { type: [String, Object, Boolean, null], required: false, skipCheck: true }
 });
 const emits = defineEmits(["click:clear", "click:append", "click:prepend"]);
+defineSlots();
 const { filterProps } = useProps(props);
 const { t } = useLocale();
 const slots = useSlots();
@@ -238,6 +240,9 @@ const handleAppendCLick = (e) => {
   selectAll(!allSelected);
   emits("click:append", e);
 };
+const handlePrependClick = (e) => {
+  emits("click:prepend", e);
+};
 const handleChipClick = (item) => {
   if (item.raw?.sortable) {
     toggleSort(item.raw);

package/dist/src/components/DataTable/OrigamDataTableRow.vue

@@ -108,6 +108,7 @@ const props = defineProps({
 });
 const { t } = useLocale();
 const emits = defineEmits(["expand", "select"]);
+defineSlots();
 const { filterProps } = useProps(props);
 const showSelect = inject(ORIGAM_DATA_TABLE_SHOW_SELECT_KEY, ref(false));
 const { displayClasses, mobile } = useDisplay(props, "origam-data-table-row");
@@ -135,9 +136,9 @@ const columnSlotProps = (column) => {
     selectAll,
     isSorted,
     toggleSort,
-    sortBy,
-    someSelected,
-    allSelected,
+    sortBy: sortBy.value,
+    someSelected: someSelected.value,
+    allSelected: allSelected.value,
     getSortIcon: () => ""
   };
 };

package/dist/src/components/DataTable/OrigamDataTableRows.vue

@@ -73,7 +73,7 @@
 				<template v-if="isExpanded(item)">
 					<slot
 							name="expanded-row"
-							v-bind="slotProps"
+							v-bind="slotProps(item, index)"
 					/>
 				</template>
 			</template>
@@ -84,6 +84,7 @@
 <script lang="ts" setup>
 import { OrigamDataTableGroupHeaderRow, OrigamDataTableRow, OrigamSkeleton } from "../../components";
 import { useDisplay, useExpanded, useGroupBy, useHeaders, useLoader, useLocale, usePagination, useProps, useSelection } from "../../composables";
+import { LOADER_KIND } from "../../enums";
 import { getPrefixedEventHandlers } from "../../utils";
 import { mergeProps, useAttrs } from "vue";
 const attrs = useAttrs();
@@ -102,10 +103,11 @@ const props = defineProps({
   color: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   mobileBreakpoint: { type: null, required: false }
 });
+defineSlots();
 const { filterProps } = useProps(props);
 const { t } = useLocale();
 const SKELETON_ROW_COUNT = 5;
-const { loaderConfig } = useLoader(props, "line");
+const { loaderConfig } = useLoader(props, LOADER_KIND.LINE);
 const { columns } = useHeaders();
 const { expandOnClick, toggleExpand, isExpanded } = useExpanded();
 const { isSelected, toggleSelect } = useSelection();

package/dist/src/components/DatePicker/OrigamDatePicker.vue

@@ -153,7 +153,7 @@ const props = defineProps({
   side: { type: null, required: false },
   swipeable: { type: Boolean, required: false },
   snapPoints: { type: Array, required: false },
-  defaultSnap: { type: [String, Object], required: false },
+  defaultSnap: { type: null, required: false },
   open: { type: Boolean, required: false },
   disabled: { type: Boolean, required: false },
   persistent: { type: Boolean, required: false },
@@ -175,11 +175,11 @@ const props = defineProps({
   activeClass: { type: String, required: false },
   hover: { type: [Boolean, Object], required: false },
   title: { type: String, required: false, default: "origam.date_picker.title" },
-  fontFamily: { type: String, required: false },
-  fontSize: { type: String, required: false },
-  fontWeight: { type: String, required: false },
-  lineHeight: { type: String, required: false },
-  letterSpacing: { type: String, required: false },
+  fontFamily: { type: null, required: false },
+  fontSize: { type: null, required: false },
+  fontWeight: { type: null, required: false },
+  lineHeight: { type: null, required: false },
+  letterSpacing: { type: null, required: false },
   disabledMonth: { type: Boolean, required: false },
   disabledYear: { type: Boolean, required: false },
   disabledNext: { type: Boolean, required: false },
@@ -214,6 +214,7 @@ const props = defineProps({
   density: { type: null, required: false }
 });
 const emits = defineEmits(["update:month", "update:year", "update:viewMode", "update:modelValue"]);
+defineSlots();
 const slots = useSlots();
 const { filterProps } = useProps(props);
 const { t } = useLocale();

package/dist/src/components/DatePicker/OrigamDatePickerHeader.vue

@@ -86,6 +86,7 @@ const props = defineProps({
   density: { type: null, required: false }
 });
 const emits = defineEmits(["click"]);
+defineSlots();
 const { filterProps } = useProps(props);
 const slots = useSlots();
 const { densityClasses } = useDensity(props);

package/dist/src/components/DatePicker/OrigamDatePickerMonth.vue

@@ -121,6 +121,7 @@ const props = defineProps({
   weeksInMonth: { type: null, required: false, default: CALENDAR_STRATEGY.DYNAMIC },
   firstDayOfWeek: { type: Number, required: false }
 });
+defineSlots();
 const { filterProps } = useProps(props);
 const daysRef = ref();
 const { daysInMonth, model, weekNumbers } = useDatePickerCalendar(props);

package/dist/src/components/DatePicker/OrigamDatePickerMonths.vue

@@ -38,6 +38,7 @@ const props = defineProps({
   width: { type: [Number, String], required: false }
 });
 const emits = defineEmits(["update:month"]);
+defineSlots();
 const { filterProps } = useProps(props);
 const adapter = useDate();
 const model = useVModel(props, "month", adapter.getMonth(adapter.date()), (v) => {

package/dist/src/components/DatePicker/OrigamDatePickerYears.vue

@@ -37,6 +37,7 @@ const props = defineProps({
   width: { type: [Number, String], required: false }
 });
 const emits = defineEmits(["update:year"]);
+defineSlots();
 const { filterProps } = useProps(props);
 const adapter = useDate();
 const model = useVModel(props, "year", adapter.getYear(adapter.date()), (v) => {

package/dist/src/components/DatePickerField/OrigamDatePickerField.vue

@@ -272,11 +272,11 @@ const _props = defineProps({
   roundedTopLeft: { type: [Boolean, Number, String], required: false },
   roundedBottomLeft: { type: [Boolean, Number, String], required: false },
   roundedBottomRight: { type: [Boolean, Number, String], required: false },
-  fontFamily: { type: String, required: false },
-  fontSize: { type: String, required: false },
-  fontWeight: { type: String, required: false },
-  lineHeight: { type: String, required: false },
-  letterSpacing: { type: String, required: false },
+  fontFamily: { type: null, required: false },
+  fontSize: { type: null, required: false },
+  fontWeight: { type: null, required: false },
+  lineHeight: { type: null, required: false },
+  letterSpacing: { type: null, required: false },
   active: { type: [Boolean, Object], required: false },
   activeClass: { type: String, required: false },
   variant: { type: null, required: false },
@@ -308,6 +308,7 @@ const _props = defineProps({
   transition: { type: [Boolean, String, Object], required: false, default: () => ({ component: OrigamTranslateScale }) }
 });
 const props = useDefaults(_props);
+defineSlots();
 const { filterProps } = useProps(props);
 const { t } = useLocale();
 const origamTextFieldRef = ref();

package/dist/src/components/Dialog/OrigamDialog.vue

@@ -253,6 +253,7 @@ const props = defineProps({
   icon: { type: null, required: false }
 });
 const emits = defineEmits(["isRead", "update:modelValue", "click:outside"]);
+defineSlots();
 const { filterProps } = useProps(props);
 const isActive = useVModel(props, "modelValue");
 const { scopeId } = useScopeId();

package/dist/src/components/Dialog/OrigamDialogConfirmation.vue

@@ -236,7 +236,8 @@ const props = defineProps({
   statusIconPosition: { type: null, required: false },
   icon: { type: null, required: false }
 });
-const emits = defineEmits(["validate", "cancel"]);
+const emits = defineEmits(["validate", "cancel", "update:modelValue"]);
+defineSlots();
 const { filterProps } = useProps(props);
 const origamDialogRef = ref();
 const slots = useSlots();

package/dist/src/components/Drawer/OrigamDrawer.vue

@@ -155,6 +155,7 @@ const props = defineProps({
   hover: { type: [Boolean, Object], required: false }
 });
 const emits = defineEmits(["update:rail"]);
+defineSlots();
 const { filterProps } = useProps(props);
 const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(toRef(props, "bgColor"));
 const { densityClasses } = useDensity(props);

package/dist/src/components/EmptyState/OrigamEmptyState.vue

@@ -57,23 +57,24 @@ import { OrigamIcon } from "../Icon";
 import { useTypography } from "../../composables";
 import { EMPTY_STATE_PRESET_CONFIG } from "../../consts/EmptyState/empty-state.const";
 const props = defineProps({
-  preset: { type: String, required: false, default: "no-data" },
+  preset: { type: null, required: false, default: "no-data" },
   title: { type: String, required: false },
   description: { type: String, required: false },
   icon: { type: null, required: false },
-  iconColor: { type: String, required: false },
+  iconColor: { type: null, required: false },
   size: { type: String, required: false, default: "md" },
-  align: { type: String, required: false, default: "center" },
+  align: { type: null, required: false, default: "center" },
   id: { type: String, required: false },
   class: { type: [String, Array, Object], required: false },
   style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
   tag: { type: String, required: false, default: "div" },
-  fontFamily: { type: String, required: false },
-  fontSize: { type: String, required: false },
-  fontWeight: { type: String, required: false },
-  lineHeight: { type: String, required: false },
-  letterSpacing: { type: String, required: false }
+  fontFamily: { type: null, required: false },
+  fontSize: { type: null, required: false },
+  fontWeight: { type: null, required: false },
+  lineHeight: { type: null, required: false },
+  letterSpacing: { type: null, required: false }
 });
+defineSlots();
 const slots = useSlots();
 const presetConfig = computed(() => EMPTY_STATE_PRESET_CONFIG[props.preset]);
 const resolvedIcon = computed(() => props.icon ?? presetConfig.value.icon);