origam 2.14.0 → 2.15.0

package/dist/src/components/Loader/OrigamLoader.vue

@@ -38,6 +38,7 @@ const props = defineProps({
   tag: { type: String, required: false, default: "span" },
   color: { type: [String, Object, Boolean, null], required: false, skipCheck: true }
 });
+defineSlots();
 const { filterProps } = useProps(props);
 const isLoading = computed(() => {
   return !!props.loading;

package/dist/src/components/Main/OrigamMain.vue

@@ -76,6 +76,7 @@ const props = defineProps({
   color: { type: [String, Object, Boolean, null], required: false, skipCheck: true }
 });
 const { filterProps } = useProps(props);
+defineSlots();
 const { mainStyles: mainLayoutStyles } = useLayout();
 const { ssrBootStyles } = useSsrBoot();
 const { colorClasses, colorStyles } = useBothColor(toRef(props, "bgColor"), toRef(props, "color"));

package/dist/src/components/Masonry/OrigamMasonry.vue

@@ -52,7 +52,7 @@ import { GRID_GAP_SIZE_VAR } from "../../consts";
 const props = defineProps({
   columns: { type: Number, required: false, default: 3 },
   columnBreakpoints: { type: Object, required: false, default: void 0 },
-  gap: { type: [String, Number], required: false, default: "md" },
+  gap: { type: null, required: false, default: "md" },
   animated: { type: Boolean, required: false, default: true },
   align: { type: String, required: false, default: "top" },
   id: { type: String, required: false },
@@ -102,6 +102,7 @@ const props = defineProps({
   borderLeftColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true }
 });
 const { filterProps } = useProps(props);
+defineSlots();
 const slots = useSlots();
 const rootEl = ref(null);
 const { css } = useCssSupport();

package/dist/src/components/Media/OrigamMediaScrubber.vue

@@ -73,7 +73,7 @@ const props = defineProps({
   max: { type: Number, required: true },
   step: { type: Number, required: false, default: 0 },
   buffered: { type: Number, required: false, default: void 0 },
-  orientation: { type: String, required: false, default: "horizontal" },
+  orientation: { type: null, required: false, default: "horizontal" },
   disabled: { type: Boolean, required: false, default: false },
   showThumbOnHoverOnly: { type: Boolean, required: false, default: false },
   showHoverTooltip: { type: Boolean, required: false, default: false },

package/dist/src/components/Menu/OrigamMenu.vue

@@ -216,6 +216,7 @@ const _props = defineProps({
 });
 const props = useDefaults(_props);
 defineEmits(["contextmenu", "update:modelValue"]);
+defineSlots();
 const { filterProps } = useProps(props);
 const { colorClasses, colorStyles } = useBothColor(toRef(props, "bgColor"), toRef(props, "color"));
 const {

package/dist/src/components/NumberFormat/OrigamNumberFormat.vue

@@ -41,6 +41,7 @@ const props = defineProps({
   style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
   tag: { type: String, required: false, default: "span" }
 });
+defineSlots();
 const resolvedOptions = computed(() => ({
   format: props.format,
   locale: props.locale,

package/dist/src/components/Overlay/OrigamOverlay.vue

@@ -115,6 +115,7 @@ const props = defineProps({
   scrim: { type: [Boolean, String], required: false, default: true }
 });
 const emits = defineEmits(["afterEnter", "afterLeave", "keydown", "update:modelValue", "click:outside"]);
+defineSlots();
 const { filterProps } = useProps(props);
 const model = useVModel(props, "modelValue");
 const isActive = computed({

package/dist/src/components/Pagination/OrigamPagination.vue

@@ -256,6 +256,7 @@ const props = defineProps({
   letterSpacing: { type: String, required: false }
 });
 const emits = defineEmits(["first", "prev", "next", "last", "update:modelValue"]);
+defineSlots();
 const { filterProps } = useProps(props);
 const { t } = useLocale();
 const page = useVModel(props, "modelValue", props.start);

package/dist/src/components/Parallax/OrigamParallax.vue

@@ -115,7 +115,7 @@ const props = defineProps({
   currentTrackIndex: { type: Number, required: false },
   preload: { type: String, required: false },
   crossorigin: { type: String, required: false },
-  controls: { type: String, required: false },
+  controls: { type: null, required: false },
   playbackRates: { type: Array, required: false },
   playbackRate: { type: Number, required: false },
   allowRemotePlayback: { type: Boolean, required: false },
@@ -136,6 +136,7 @@ const props = defineProps({
 });
 const emit = defineEmits(["enter", "leave", "scroll-progress"]);
 const { filterProps } = useProps(props);
+defineSlots();
 const { audioRef, audioData, onStop: handleStop } = useAudio(props);
 const { platform } = useDisplay();
 const { dimensionStyles } = useDimension(props);
@@ -166,7 +167,16 @@ const eventActions = computed(() => {
     },
     orientation: {
       action: orientationElement,
-      condition: props.event === "move" && isTouch.value,
+      // `handleMovement` looks up `eventActions.value[props.event]` — when
+      // `props.event === 'orientation'` we are ALREADY in this branch, so
+      // gating on `props.event === 'move'` here can never be true. That
+      // left `<origam-parallax event="orientation">` permanently inert:
+      // the `deviceorientation` listener fired (registered via
+      // `eventMap.value.orientation`) but `condition` always evaluated to
+      // `false`, so `movement.value` never updated regardless of a real
+      // sensor being present. Mirrors the `scroll` branch's guard (a
+      // measured target box must exist before applying movement).
+      condition: props.event === "orientation" && !!shape.value?.height,
       type: "deviceorientation"
     }
   };

package/dist/src/components/Parallax/OrigamParallaxElement.vue

@@ -75,6 +75,7 @@ const props = defineProps({
   type: { type: null, required: false, default: PARALLAX_ELEMENT_TYPE.TRANSLATE }
 });
 const { filterProps } = useProps(props);
+defineSlots();
 const { borderClasses, borderStyles } = useBorder(props);
 const { roundedClasses, roundedStyles } = useRounded(props);
 const { elevationClasses } = useElevation(props);

package/dist/src/components/Parallax/OrigamParallaxLayer.vue

@@ -24,6 +24,7 @@ const props = defineProps({
   tag: { type: String, required: false, default: "div" }
 });
 const { filterProps } = useProps(props);
+defineSlots();
 const parallax = inject(ORIGAM_PARALLAX_LAYER_KEY);
 if (!parallax) {
   throw new Error("[Origam] OrigamParallaxLayer must be nested inside OrigamParallax (use direction/easing/disabled props on the host).");

package/dist/src/components/Picker/OrigamPicker.vue

@@ -120,6 +120,7 @@ const props = defineProps({
 });
 const slots = useSlots();
 const { filterProps } = useProps(props);
+defineSlots();
 const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(toRef(props, "bgColor"));
 const hasTitle = computed(() => {
   return !!(props.title || slots.title);

package/dist/src/components/Picker/OrigamPickerTitle.vue

@@ -28,6 +28,7 @@ const props = defineProps({
   letterSpacing: { type: String, required: false }
 });
 const { filterProps } = useProps(props);
+defineSlots();
 const { colorClasses, colorStyles } = useBothColor(toRef(props, "bgColor"), toRef(props, "color"));
 const { typographyStyles } = useTypography(props, "picker-title");
 const pickerTitleStyles = computed(() => {

package/dist/src/components/Progress/OrigamProgress.vue

@@ -76,6 +76,7 @@ const props = defineProps({
   size: { type: null, required: false, default: SIZES.DEFAULT }
 });
 const { filterProps } = useProps(props);
+defineSlots();
 const origamProgressRef = ref();
 const { sizeClasses, sizeStyles } = useSize(props);
 const { normalizedValue, hasContent } = useProgress(props);

package/dist/src/components/Progress/OrigamProgressCircular.vue

@@ -93,6 +93,7 @@ const props = defineProps({
   marginInline: { type: [Boolean, Number, String], required: false },
   size: { type: null, required: false, default: SIZES.DEFAULT }
 });
+defineSlots();
 const { filterProps } = useProps(props);
 const root = ref();
 const { progressClasses, progressStyles, normalizedValue, thickness, hasContent } = useProgress(props);

package/dist/src/components/Progress/OrigamProgressLinear.vue

@@ -103,6 +103,7 @@ const props = defineProps({
   roundedBottomRight: { type: [Boolean, Number, String], required: false },
   location: { type: null, required: false }
 });
+defineSlots();
 const { filterProps } = useProps(props);
 const { locationStyles } = useLocation(props);
 const { progressClasses, progressStyles, normalizedValue, thickness, progress, max, hasContent } = useProgress(props);

package/dist/src/components/Radio/OrigamRadio.vue

@@ -209,6 +209,7 @@ const _props = defineProps({
 });
 const props = useDefaults(_props);
 const emits = defineEmits(["update:modelValue", "update:focused", "click:label"]);
+defineSlots();
 const { isHover, hoverState } = useHover(props);
 useStateEffect(props, isHover, void 0, hoverState, void 0);
 const { filterProps } = useProps(props);

package/dist/src/components/Radio/OrigamRadioBtn.vue

@@ -95,6 +95,7 @@ const props = defineProps({
   elevation: { type: [Number, String], required: false }
 });
 const emits = defineEmits(["update:modelValue", "update:focused", "click:label"]);
+defineSlots();
 const { filterProps } = useProps(props);
 const origamSelectionControlRef = ref();
 const model = useVModel(props, "modelValue");

package/dist/src/components/Radio/OrigamRadioGroup.vue

@@ -159,6 +159,7 @@ const props = defineProps({
   hover: { type: [Boolean, Object], required: false },
   items: { type: [Array, Object], required: false }
 });
+defineSlots();
 const { filterProps } = useProps(props);
 const origamSelectionControlGroupRef = ref();
 const origamInputRef = ref();

package/dist/src/components/RatingField/OrigamRatingField.vue

@@ -243,6 +243,7 @@ const props = defineProps({
   required: { type: Boolean, required: false }
 });
 defineEmits(["update:modelValue"]);
+defineSlots();
 const { filterProps } = useProps(props);
 const origamInputRef = ref();
 const origamRatingFieldItemRef = ref();

package/dist/src/components/RatingField/OrigamRatingFieldItem.vue

@@ -100,6 +100,7 @@ const props = defineProps({
   elevation: { type: [Number, String], required: false }
 });
 const emits = defineEmits(["mouseenter", "mouseleave", "click"]);
+defineSlots();
 const { filterProps } = useProps(props);
 const { t } = useLocale();
 const origamBtnRef = ref();

package/dist/src/components/Responsive/OrigamResponsive.vue

@@ -75,6 +75,7 @@ const props = defineProps({
   roundedBottomLeft: { type: [Boolean, Number, String], required: false },
   roundedBottomRight: { type: [Boolean, Number, String], required: false }
 });
+defineSlots();
 const { filterProps } = useProps(props);
 const { aspectStyles } = useAspectRatio(props);
 const { dimensionStyles } = useDimension(props);

package/dist/src/components/Select/OrigamSelect.vue

@@ -298,6 +298,7 @@ import {
   useProps,
   useScrolling,
   useStyle,
+  useTeleportTypography,
   useTextColor,
   useVModel
 } from "../../composables";
@@ -460,6 +461,7 @@ const _props = defineProps({
 });
 const props = useDefaults(_props);
 defineEmits(["click:control", "mousedown:control", "update:menu", "update:modelValue", "update:focused", "click:append", "click:prepend", "click:appendInner", "click:prependInner", "click:clear"]);
+defineSlots();
 const { filterProps } = useProps(props);
 const { t } = useLocale();
 const origamTextFieldRef = ref();
@@ -541,9 +543,23 @@ const displayItems = computed(() => {
 const menuDisabled = computed(() => {
   return props.hideNoData && !displayItems.value.length || props.readonly || form?.isReadonly.value;
 });
+const { typographyStyles: menuTypographyStyles } = useTeleportTypography(origamTextFieldRef, menu, (fontSize) => ({
+  "--origam-list-item__title---font-size": fontSize,
+  // Kept proportional to the title rather than pinned, so the pair
+  // keeps its relationship at any scale.
+  "--origam-list-item__subtitle---font-size": `calc(${fontSize} * 0.875)`
+}));
 const menuProps = computed(() => {
+  const consumerProps = props.menuProps ?? {};
+  const consumerContentProps = consumerProps.contentProps ?? {};
   return {
-    ...props.menuProps
+    ...consumerProps,
+    contentProps: {
+      ...consumerContentProps,
+      // The consumer's own style is listed last so it still wins —
+      // the bridge is a default, not a lock.
+      style: [menuTypographyStyles.value, consumerContentProps.style]
+    }
   };
 });
 const comboboxAriaAttrs = computed(() => {

package/dist/src/components/Sheet/OrigamSheet.vue

@@ -104,6 +104,7 @@ const props = defineProps({
   hover: { type: [Boolean, Object], required: false }
 });
 const emit = defineEmits(["update:snap", "update:open"]);
+defineSlots();
 const { filterProps } = useProps(props);
 const { colorClasses, colorStyles } = useBothColor(
   toRef(props, "bgColor"),

package/dist/src/components/Skeleton/OrigamSkeleton.vue

@@ -74,6 +74,7 @@ const props = defineProps({
   roundedBottomRight: { type: [Boolean, Number, String], required: false }
 });
 const { filterProps } = useProps(props);
+defineSlots();
 const { roundedClasses, roundedStyles } = useRounded(props);
 const { sizeClasses, sizeStyles } = useSize(props);
 const { colorClasses, colorStyles } = useBothColor(toRef(props, "bgColor"), toRef(props, "color"));

package/dist/src/components/Slide/OrigamSlideGroup.vue

@@ -134,6 +134,7 @@ const props = defineProps({
   mobileBreakpoint: { type: null, required: false }
 });
 defineEmits(["update:modelValue"]);
+defineSlots();
 const { filterProps } = useProps(props);
 const { roundedClasses, roundedStyles } = useRounded(props);
 const { borderClasses, borderStyles } = useBorder(props);

package/dist/src/components/SliderField/OrigamSliderField.vue

@@ -533,6 +533,7 @@ const _props = defineProps({
 });
 const props = useDefaults(_props);
 const emits = defineEmits(["start", "end", "update:modelValue", "update:focused"]);
+defineSlots();
 const { filterProps } = useProps(props);
 const origamInputRef = ref();
 const slots = useSlots();

package/dist/src/components/SliderField/OrigamSliderFieldTrack.vue

@@ -80,6 +80,7 @@ const props = defineProps({
   roundedBottomLeft: { type: [Boolean, Number, String], required: false },
   roundedBottomRight: { type: [Boolean, Number, String], required: false }
 });
+defineSlots();
 const { filterProps } = useProps(props);
 const slots = useSlots();
 const isDisabled = computed(() => {

package/dist/src/components/Snackbar/OrigamSnackbar.vue

@@ -202,6 +202,7 @@ const _props = defineProps({
   hover: { type: [Boolean, Object], required: false }
 });
 const props = useDefaults(_props);
+defineSlots();
 const { filterProps } = useProps(props);
 const slots = useSlots();
 const isActive = useVModel(props, "modelValue");

package/dist/src/components/Snackbar/OrigamSnackbarItem.vue

@@ -78,7 +78,7 @@ import { useLocale, useProps, useTypography } from "../../composables";
 import { vContrast } from "../../directives";
 import { MDI_ICONS } from "../../enums";
 const props = defineProps({
-  intent: { type: String, required: false, default: "info" },
+  intent: { type: null, required: false, default: "info" },
   title: { type: String, required: false },
   message: { type: String, required: false },
   icon: { type: [String, Array, Boolean], required: false, skipCheck: true },
@@ -103,6 +103,7 @@ const { filterProps } = useProps(props);
 const { typographyStyles } = useTypography(props, "snackbar-item");
 const slots = useSlots();
 const emit = defineEmits(["dismiss", "action"]);
+defineSlots();
 const INTENT_ICONS = {
   primary: MDI_ICONS.INFORMATION,
   secondary: MDI_ICONS.INFORMATION,

package/dist/src/components/Stepper/OrigamStepper.vue

@@ -100,6 +100,7 @@ const props = defineProps({
 });
 const { t } = useLocale();
 const emit = defineEmits(["update:modelValue"]);
+defineSlots();
 const { filterProps } = useProps(props);
 const slots = useSlots();
 const internalModel = ref(props.modelValue ?? 0);

package/dist/src/components/Switch/OrigamSwitch.vue

@@ -257,6 +257,7 @@ const _props = defineProps({
 });
 const props = useDefaults(_props);
 defineEmits(["update:modelValue", "update:focused", "update:indeterminate", "click:label"]);
+defineSlots();
 const { isHover, hoverState } = useHover(props);
 useStateEffect(props, isHover, void 0, hoverState, void 0);
 const { filterProps } = useProps(props);

package/dist/src/components/SystemBar/OrigamSystemBar.vue

@@ -68,6 +68,7 @@ const props = defineProps({
   letterSpacing: { type: String, required: false }
 });
 const { filterProps } = useProps(props);
+defineSlots();
 const { dimensionStyles } = useDimension(props);
 const { borderClasses, borderStyles } = useBorder(props);
 const { roundedStyles, roundedClasses } = useRounded(props);

package/dist/src/components/Table/OrigamTable.vue

@@ -99,6 +99,7 @@ const _props = defineProps({
   letterSpacing: { type: String, required: false }
 });
 const props = useDefaults(_props);
+defineSlots();
 const { filterProps } = useProps(props);
 const slots = useSlots();
 const { densityClasses } = useDensity(props);

package/dist/src/components/Tabs/OrigamTab.vue

@@ -17,10 +17,19 @@
 			@click="handleClick"
 	>
 		<span
-				v-if="icon"
+				v-if="hasPrependMedia"
 				class="origam-tab__prepend"
 		>
-			<origam-icon :icon="icon"/>
+			<origam-avatar
+					v-if="prependAvatar"
+					key="prepend-avatar"
+					:image="prependAvatar"
+			/>
+			<origam-icon
+					v-if="resolvedPrependIcon"
+					key="prepend-icon"
+					:icon="resolvedPrependIcon"
+			/>
 		</span>
 
 		<span class="origam-tab__label">
@@ -33,10 +42,19 @@
 		</span>
 
 		<span
-				v-if="appendIcon"
+				v-if="hasAppendMedia"
 				class="origam-tab__append"
 		>
-			<origam-icon :icon="appendIcon"/>
+			<origam-avatar
+					v-if="appendAvatar"
+					key="append-avatar"
+					:image="appendAvatar"
+			/>
+			<origam-icon
+					v-if="appendIcon"
+					key="append-icon"
+					:icon="appendIcon"
+			/>
 		</span>
 
 		<span
@@ -48,9 +66,10 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, inject, ref, StyleValue } from "vue";
-import { OrigamIcon } from "../../components";
+import { computed, inject, ref, StyleValue, toRef } from "vue";
+import { OrigamAvatar, OrigamIcon } from "../../components";
 import {
+  useAdjacent,
   useDefaults,
   useGroupItem,
   useProps,
@@ -60,11 +79,10 @@ import {
 import { vContrast } from "../../directives";
 import { ORIGAM_TABS_KEY, ORIGAM_TAB_PANELS_KEY } from "../../consts";
 const _props = defineProps({
+  tag: { type: String, required: false, default: "button" },
   text: { type: String, required: false, default: "" },
   variant: { type: null, required: false, default: void 0 },
-  tag: { type: String, required: false, default: "button" },
   icon: { type: null, required: false },
-  appendIcon: { type: null, required: false },
   id: { type: String, required: false },
   class: { type: [String, Array, Object], required: false },
   style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
@@ -75,11 +93,21 @@ const _props = defineProps({
   fontSize: { type: String, required: false },
   fontWeight: { type: String, required: false },
   lineHeight: { type: String, required: false },
-  letterSpacing: { type: String, required: false }
+  letterSpacing: { type: String, required: false },
+  appendAvatar: { type: String, required: false },
+  appendIcon: { type: null, required: false },
+  prependAvatar: { type: String, required: false },
+  prependIcon: { type: null, required: false }
 });
 const props = useDefaults(_props);
+defineSlots();
 const { filterProps } = useProps(props);
 const rootRef = ref();
+const resolvedPrependIcon = computed(() => props.prependIcon ?? props.icon);
+const {
+  hasPrependMedia,
+  hasAppendMedia
+} = useAdjacent(props, resolvedPrependIcon, toRef(props, "appendIcon"));
 const groupItem = useGroupItem(props, ORIGAM_TABS_KEY);
 const panelsGroup = inject(ORIGAM_TAB_PANELS_KEY, null);
 if (!groupItem) {
@@ -123,8 +151,8 @@ const tabClasses = computed(() => {
     groupItem.selectedClass.value,
     {
       "origam-tab--disabled": isDisabled.value,
-      "origam-tab--with-prepend": !!props.icon,
-      "origam-tab--with-append": !!props.appendIcon
+      "origam-tab--with-prepend": hasPrependMedia.value,
+      "origam-tab--with-append": hasAppendMedia.value
     },
     props.class
   ];

package/dist/src/components/Tabs/OrigamTabPanel.vue

@@ -43,6 +43,7 @@ const props = defineProps({
   eager: { type: Boolean, required: false, default: false }
 });
 const { filterProps } = useProps(props);
+defineSlots();
 const rootRef = ref();
 const groupItem = useGroupItem(props, ORIGAM_TAB_PANELS_KEY);
 const tabsGroup = inject(ORIGAM_TABS_KEY, null);

package/dist/src/components/Tabs/OrigamTabPanels.vue

@@ -43,6 +43,7 @@ const props = defineProps({
   selectedClass: { type: String, required: false, default: "origam-tab-panel--active" }
 });
 defineEmits(["update:modelValue"]);
+defineSlots();
 const { filterProps } = useProps(props);
 const { isSelected, select, next, prev, selected, items } = useGroup(props, ORIGAM_TAB_PANELS_KEY);
 const rootRef = ref();

package/dist/src/components/Tabs/OrigamTabs.vue

@@ -57,6 +57,7 @@ const _props = defineProps({
 });
 const props = useDefaults(_props);
 defineEmits(["update:modelValue"]);
+defineSlots();
 const { filterProps } = useProps(props);
 const { isSelected, select, next, prev, selected, items } = useGroup(props, ORIGAM_TABS_KEY);
 const rootRef = ref();

package/dist/src/components/TextMask/OrigamTextMask.vue

@@ -34,6 +34,7 @@ const props = defineProps({
   lineHeight: { type: String, required: false },
   letterSpacing: { type: String, required: false }
 });
+defineSlots();
 const slots = useSlots();
 const resolvedBackground = computed(() => {
   const fromGradient = resolveGradient(props.background);

package/dist/src/components/ThemeProvider/OrigamThemeProvider.vue

@@ -19,6 +19,7 @@ const props = defineProps({
   mode: { type: String, required: false, default: "auto" },
   tag: { type: String, required: false, default: "div" }
 });
+defineSlots();
 const attrs = useAttrs();
 const dataTheme = computed(() => props.theme === "auto" ? void 0 : props.theme);
 const dataMode = computed(() => props.mode === "auto" ? void 0 : props.mode);

package/dist/src/components/Timeline/OrigamTimeline.vue

@@ -61,7 +61,7 @@ import {
 import { TIMELINE_CONTEXT_KEY } from "../../consts";
 const props = defineProps({
   items: { type: Array, required: false },
-  orientation: { type: String, required: false, default: "vertical" },
+  orientation: { type: null, required: false, default: "vertical" },
   side: { type: String, required: false, default: "start" },
   truncateLine: { type: Boolean, required: false, default: false },
   ariaLabel: { type: String, required: false },
@@ -74,6 +74,7 @@ const props = defineProps({
   density: { type: null, required: false }
 });
 const { filterProps } = useProps(props);
+defineSlots();
 const orientation = computed(() => props.orientation ?? "vertical");
 const { densityClasses } = useDensity(props);
 const { sizeClasses } = useSize(props);

package/dist/src/components/Timeline/OrigamTimelineItem.vue

@@ -54,11 +54,11 @@ const props = defineProps({
   title: { type: String, required: false },
   subtitle: { type: String, required: false },
   icon: { type: null, required: false },
-  intent: { type: String, required: false },
+  intent: { type: null, required: false },
   isLast: { type: Boolean, required: false, default: false },
   truncateLine: { type: Boolean, required: false, default: false },
   side: { type: String, required: false, default: "start" },
-  orientation: { type: String, required: false, default: "vertical" },
+  orientation: { type: null, required: false, default: "vertical" },
   index: { type: Number, required: false, default: 0 },
   id: { type: String, required: false },
   class: { type: [String, Array, Object], required: false },
@@ -70,6 +70,7 @@ const props = defineProps({
 });
 const timelineCtx = inject(TIMELINE_CONTEXT_KEY, null);
 const { filterProps } = useProps(props);
+defineSlots();
 const { densityClasses } = useDensity(props);
 const { sizeClasses } = useSize(props);
 const effectiveSide = computed(() => {

package/dist/src/components/Title/OrigamTitle.vue

@@ -73,6 +73,7 @@ const _props = defineProps({
 });
 const props = useDefaults(_props);
 const { filterProps } = useProps(props);
+defineSlots();
 const { colorClasses, colorStyles } = useBothColor(toRef(props, "bgColor"), toRef(props, "color"));
 const { densityClasses } = useDensity(props);
 const slots = useSlots();

package/dist/src/components/Toolbar/OrigamToolbar.vue

@@ -119,6 +119,7 @@ const props = defineProps({
   lineHeight: { type: String, required: false },
   letterSpacing: { type: String, required: false }
 });
+defineSlots();
 const { filterProps } = useProps(props);
 const slots = useSlots();
 const hasPrepend = computed(() => {

package/dist/src/components/Tooltip/OrigamTooltip.vue

@@ -101,6 +101,7 @@ const props = defineProps({
   letterSpacing: { type: String, required: false }
 });
 defineEmits(["update:modelValue"]);
+defineSlots();
 const { filterProps } = useProps(props);
 const { colorClasses, colorStyles } = useBothColor(toRef(props, "bgColor"), toRef(props, "color"));
 const { typographyStyles } = useTypography(props, "tooltip");

package/dist/src/components/Transition/OrigamExpandX.vue

@@ -28,6 +28,7 @@ const props = defineProps({
   origin: { type: String, required: false }
 });
 const { filterProps } = useProps(props);
+defineSlots();
 const expandedParentClass = "";
 const sizeProperty = "width";
 const offsetProperty = camelize(`offset-${sizeProperty}`);

package/dist/src/components/Transition/OrigamExpandY.vue

@@ -28,6 +28,7 @@ const props = defineProps({
   origin: { type: String, required: false }
 });
 const { filterProps } = useProps(props);
+defineSlots();
 const expandedParentClass = "";
 const sizeProperty = "height";
 const offsetProperty = camelize(`offset-${sizeProperty}`);

package/dist/src/components/Transition/OrigamFade.vue

@@ -20,6 +20,7 @@ const props = defineProps({
   origin: { type: String, required: false }
 });
 const { filterProps } = useProps(props);
+defineSlots();
 const { name, tag, transitionProps } = useCssTransition(props);
 defineExpose({
   filterProps

package/dist/src/components/Transition/OrigamReverseTranslatePicker.vue

@@ -20,6 +20,7 @@ const props = defineProps({
   origin: { type: String, required: false }
 });
 const { filterProps } = useProps(props);
+defineSlots();
 const { name, tag, transitionProps } = useCssTransition(props);
 defineExpose({
   filterProps