origam 2.14.1 → 2.16.0

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

@@ -47,20 +47,22 @@
 								<origam-list-item
 										v-if="!hasChilds(item)"
 										class="origam-menu__item"
-										v-bind="item"
+										v-bind="menuItemProps(item)"
+										@click="handleSelect(item)"
 								/>
 								<origam-menu
 										v-else
+										v-bind="{...menuItemProps(item), ...overlayProps}"
+										:items="childItems(item)"
 										:offset="[8,8]"
 										:open-on-context-menu="false"
 										open-on-click
-										v-bind="{...item, ...overlayProps}"
 								>
 									<template #activator="{props}">
 										<origam-list-item
 												:append-icon="MDI_ICONS.CHEVRON_RIGHT"
 												class="origam-menu__item"
-												v-bind="{...props, ...item}"
+												v-bind="{...props, ...menuItemProps(item)}"
 										/>
 									</template>
 								</origam-menu>
@@ -94,7 +96,7 @@ import {
 } from "../../composables";
 import { ORIGAM_MENU_KEY } from "../../consts";
 import { INLINE, KEYBOARD_VALUES, LOCATION_STRATEGIES, MDI_ICONS, SCROLL_STRATEGIES } from "../../enums";
-import { focusableChildren, focusChild, forwardRefs, getNextElement, getUid } from "../../utils";
+import { focusableChildren, focusChild, forwardRefs, getNextElement, getPropertyFromItem, getUid, omit } from "../../utils";
 const _props = defineProps({
   id: { type: String, required: false },
   absolute: { type: Boolean, required: false },
@@ -173,7 +175,7 @@ const _props = defineProps({
   items: { type: Array, required: false },
   itemTitle: { type: null, required: false },
   itemValue: { type: null, required: false },
-  itemChildren: { type: null, required: false },
+  itemChildren: { type: null, required: false, default: "children" },
   itemProps: { type: null, required: false },
   returnObject: { type: Boolean, required: false },
   valueComparator: { type: null, required: false },
@@ -208,14 +210,15 @@ 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 props = useDefaults(_props);
-defineEmits(["contextmenu", "update:modelValue"]);
+const emit = defineEmits(["contextmenu", "select", "update:modelValue"]);
+defineSlots();
 const { filterProps } = useProps(props);
 const { colorClasses, colorStyles } = useBothColor(toRef(props, "bgColor"), toRef(props, "color"));
 const {
@@ -277,6 +280,10 @@ watch(isActive, (val) => {
 const handleClickOutside = () => {
   parent?.closeParents();
 };
+const handleSelect = (item) => {
+  if (props.disabled) return;
+  emit("select", item);
+};
 const handleKeydown = (e) => {
   if (props.disabled) return;
   if (e.key === KEYBOARD_VALUES.TAB) {
@@ -320,8 +327,15 @@ const activatorProps = computed(() => {
 const overlayProps = computed(() => {
   return origamOverlayRef.value?.filterProps(props, ["activatorProps", "id", "class", "style", "role", "modelValue", "absolute", "activator", "target", "openOnClick", "openOnContextMenu"]);
 });
+const childItems = (item) => {
+  const children = getPropertyFromItem(item, props.itemChildren);
+  return Array.isArray(children) ? children : [];
+};
 const hasChilds = (item) => {
-  return item?.items;
+  return childItems(item).length > 0;
+};
+const menuItemProps = (item) => {
+  return typeof props.itemChildren === "string" ? omit(item, [props.itemChildren]) : item;
 };
 const menuStyles = computed(() => {
   return [

package/dist/src/components/Messages/OrigamMessages.vue

@@ -94,11 +94,11 @@ const _props = defineProps({
   roundedBottomRight: { type: [Boolean, Number, String], required: false },
   density: { type: null, required: false, default: DENSITY.DEFAULT },
   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 }
 });
 const props = useDefaults(_props);
 defineSlots();

package/dist/src/components/NumberField/OrigamNumberField.vue

@@ -358,11 +358,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 },

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

@@ -22,25 +22,26 @@ import {
 import { useNumberFormat } from "../../composables";
 const props = defineProps({
   value: { type: [Number, String], required: true },
-  format: { type: String, required: false, default: "decimal" },
+  format: { type: null, required: false, default: "decimal" },
   locale: { type: [String, Array], required: false, default: "auto" },
   currency: { type: String, required: false, default: void 0 },
-  currencyDisplay: { type: String, required: false, default: "symbol" },
+  currencyDisplay: { type: null, required: false, default: "symbol" },
   unit: { type: String, required: false, default: void 0 },
-  unitDisplay: { type: String, required: false, default: "short" },
-  notation: { type: String, required: false, default: void 0 },
-  compactDisplay: { type: String, required: false, default: "short" },
+  unitDisplay: { type: null, required: false, default: "short" },
+  notation: { type: null, required: false, default: void 0 },
+  compactDisplay: { type: null, required: false, default: "short" },
   minimumFractionDigits: { type: Number, required: false, default: void 0 },
   maximumFractionDigits: { type: Number, required: false, default: void 0 },
   minimumSignificantDigits: { type: Number, required: false, default: void 0 },
   maximumSignificantDigits: { type: Number, required: false, default: void 0 },
-  useGrouping: { type: [Boolean, String], required: false, default: true },
-  signDisplay: { type: String, required: false, default: "auto" },
+  useGrouping: { type: Boolean, required: false, skipCheck: true, default: true },
+  signDisplay: { type: null, required: false, default: "auto" },
   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: "span" }
 });
+defineSlots();
 const resolvedOptions = computed(() => ({
   format: props.format,
   locale: props.locale,

package/dist/src/components/OtpInputField/OrigamOtpInputField.vue

@@ -223,11 +223,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 },

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

@@ -177,7 +177,22 @@
 <script lang="ts" setup>
 import { ComponentPublicInstance, computed, nextTick, ref, shallowRef, StyleValue } from "vue";
 import { OrigamBtn } from "../../components";
-import { useDensity, useDisplay, useLocale, useProps, useRefs, useResizeObserver, useSize, useTypography, useVModel, useStyle } from "../../composables";
+import {
+  useBorder,
+  useDensity,
+  useDisplay,
+  useElevation,
+  useLocale,
+  useMargin,
+  usePadding,
+  useProps,
+  useRefs,
+  useResizeObserver,
+  useSize,
+  useStyle,
+  useTypography,
+  useVModel
+} from "../../composables";
 import { KEYBOARD_VALUES, MDI_ICONS, VARIANT } from "../../enums";
 import { createRange, int } from "../../utils";
 const props = defineProps({
@@ -249,13 +264,14 @@ const props = defineProps({
   elevation: { type: [Number, String], required: false },
   size: { type: null, required: false },
   density: { type: null, 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 emits = defineEmits(["first", "prev", "next", "last", "update:modelValue"]);
+defineSlots();
 const { filterProps } = useProps(props);
 const { t } = useLocale();
 const page = useVModel(props, "modelValue", props.start);
@@ -508,6 +524,10 @@ const isColored = computed(() => !!(props.color || props.bgColor));
 const { sizeClasses } = useSize(props);
 const { densityClasses } = useDensity(props);
 const { typographyStyles } = useTypography(props, "pagination--info");
+const { paddingClasses, paddingStyles } = usePadding(props);
+const { marginClasses, marginStyles } = useMargin(props);
+const { borderClasses, borderStyles } = useBorder(props);
+const { elevationClasses, elevationStyles } = useElevation(props);
 const paginationClasses = computed(() => {
   return [
     "origam-pagination",
@@ -518,11 +538,19 @@ const paginationClasses = computed(() => {
     },
     sizeClasses.value,
     densityClasses.value,
+    borderClasses.value,
+    elevationClasses.value,
+    paddingClasses.value,
+    marginClasses.value,
     props.class
   ];
 });
 const paginationStyles = computed(() => {
   return [
+    borderStyles.value,
+    elevationStyles.value,
+    marginStyles.value,
+    paddingStyles.value,
     props.style
   ];
 });

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 },
@@ -126,16 +126,17 @@ const props = defineProps({
   bottom: { type: [Number, String], required: false },
   left: { type: [Number, String], required: false },
   right: { 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 },
   audio: { type: String, required: false },
   playAudio: { type: Boolean, required: false }
 });
 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"
     }
   };
@@ -208,6 +218,7 @@ const orientationElement = ({ event, target }) => {
   return { x, y, target };
 };
 const handleMovement = useThrottleFn((event) => {
+  if (props.disabled) return;
   if (!props.active && !root.value) return;
   if (!isMoving.value && !leftOnce.value) {
     handleMovementStart();
@@ -263,7 +274,24 @@ provide(ORIGAM_PARALLAX_KEY, {
   audioData,
   event: toRef(props, "event"),
   eventData: data,
-  isMoving: computed(() => isMoving.value || props.event === PARALLAX_EVENT.SCROLL),
+  // ⛔ THIS is the `disabled` kill-switch for the legacy
+  // <OrigamParallaxElement> path — the only gate whose removal reddens a
+  // test (`disabled — flipping it mid-hover…`). Before it, `disabled`
+  // reached only `useParallaxRuntime` (the <OrigamParallaxLayer> path) and
+  // the `origam-parallax--disabled` class, whose SCSS neutralises
+  // `.origam-parallax__layer` and nothing else — so a
+  // `<origam-parallax disabled event="move">` kept translating under the
+  // mouse (measured: matrix(1,0,0,1,-1,-1) → matrix(1,0,0,1,-50.58,-50.62)).
+  //
+  // It has to live HERE rather than only in `handleMovement`: stopping
+  // future updates leaves `movement` at whatever value it held when
+  // `disabled` flipped on, freezing the element mid-travel (measured at
+  // -91,-91) instead of returning to offset 0 as `IParallaxProps.disabled`
+  // documents. `OrigamParallaxElement.transformCalculation` short-circuits
+  // to `{x: 0, y: 0}` as soon as this ref reads false, so gating it here is
+  // what makes "translate stays at 0" literally true, and it covers the
+  // `event="scroll"` branch of this same expression too.
+  isMoving: computed(() => !props.disabled && (isMoving.value || props.event === PARALLAX_EVENT.SCROLL)),
   movement,
   duration: resolvedDuration,
   easing: toRef(props, "easing"),

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

@@ -21,7 +21,7 @@ import {
   useStyle
 } from "../../composables";
 import { ORIGAM_PARALLAX_KEY } from "../../consts";
-import { AXIS, PARALLAX_ELEMENT_TYPE } from "../../enums";
+import { AXIS, PARALLAX_ELEMENT_TYPE, PARALLAX_EVENT } from "../../enums";
 import { cyclicMovement, elementMovement } from "../../utils";
 const props = defineProps({
   transformOrigin: { type: null, required: false, default: "center" },
@@ -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);
@@ -132,16 +133,16 @@ const calculateMouseMovement = () => {
     maxX: props.maxX,
     maxY: props.maxY
   }) : cyclicMovement({
-    referencePosition: parallax.event.value === "scroll" ? { x: 0, y: 0 } : parallax.eventData.value,
+    referencePosition: parallax.event.value === PARALLAX_EVENT.SCROLL ? { x: 0, y: 0 } : parallax.eventData.value,
     shape: parallax.shape.value,
     event: parallax.event.value,
     cycles: props.cycle,
     strength: strength.value
   });
-  if (parallax.event.value !== "scroll") {
+  if (parallax.event.value !== PARALLAX_EVENT.SCROLL) {
     movementX = props.axis === AXIS.Y ? 0 : x;
     movementY = props.axis === AXIS.X ? 0 : y;
-  } else if (parallax.event.value === "scroll") {
+  } else if (parallax.event.value === PARALLAX_EVENT.SCROLL) {
     movementX = props.axis === AXIS.X ? y : 0;
     movementY = props.axis === AXIS.Y || !props.axis ? y : 0;
   } else if (props.cycle > 0) {

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/PasswordField/OrigamPasswordField.vue

@@ -431,11 +431,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 },

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

@@ -53,7 +53,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 },
@@ -112,14 +112,15 @@ 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 }
 });
 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

@@ -21,13 +21,14 @@ const props = defineProps({
   tag: { type: String, required: false, default: "div" },
   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 { 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/QrCode/OrigamQrCode.vue

@@ -68,7 +68,7 @@ const props = defineProps({
   value: { type: String, required: true },
   title: { type: String, required: false, default: void 0 },
   qrCodeProps: { type: Object, required: false, default: void 0 },
-  errorCorrectionLevel: { type: String, required: false, default: "M" },
+  errorCorrectionLevel: { type: null, required: false, default: "M" },
   quietZone: { type: Number, required: false, default: 4 },
   icon: { type: null, required: false, default: void 0 },
   image: { type: [String, Object], required: false, default: void 0 },

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

@@ -185,11 +185,11 @@ const _props = defineProps({
   prependAvatar: { type: String, required: false },
   prependIcon: { type: null, required: false },
   size: { type: null, 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 },
   trueValue: { type: null, required: false },
   falseValue: { type: null, required: false },
   value: { type: null, required: false },
@@ -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

@@ -62,12 +62,13 @@
 import { computed, ref, StyleValue, useAttrs } from "vue";
 import { OrigamDefaultsProvider, OrigamInput, OrigamLabel, OrigamRadio, OrigamSelectionControlGroup } from "../../components";
 import {
+  usePassedProps,
   useProps,
   useStyle,
   useVModel
 } from "../../composables";
 import { DENSITY } from "../../enums";
-import { filterInputAttrs, getUid } from "../../utils";
+import { filterInputAttrs, getUid, omitUndefined } from "../../utils";
 const props = defineProps({
   id: { type: String, required: false },
   class: { type: [String, Array, Object], required: false },
@@ -138,11 +139,11 @@ const props = defineProps({
   prependAvatar: { type: String, required: false },
   prependIcon: { type: null, required: false },
   size: { type: null, 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 },
   value: { type: null, required: false },
   required: { type: Boolean, required: false },
   activeColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
@@ -159,6 +160,8 @@ const props = defineProps({
   hover: { type: [Boolean, Object], required: false },
   items: { type: [Array, Object], required: false }
 });
+defineSlots();
+defineEmits(["update:modelValue"]);
 const { filterProps } = useProps(props);
 const origamSelectionControlGroupRef = ref();
 const origamInputRef = ref();
@@ -175,13 +178,14 @@ const inputProps = computed(() => {
 const controlProps = computed(() => {
   return origamSelectionControlGroupRef.value?.filterProps(props, ["modelValue", "id", "style", "class", "readonly", "disabled", "type", "multiple", "items"]);
 });
+const wasPropPassed = usePassedProps(props);
 const radioDefaults = computed(() => ({
-  "origam-radio": {
-    color: props.color,
-    bgColor: props.bgColor,
-    density: props.density,
-    size: props.size
-  }
+  "origam-radio": omitUndefined({
+    color: wasPropPassed("color") ? props.color : void 0,
+    bgColor: wasPropPassed("bgColor") ? props.bgColor : void 0,
+    density: wasPropPassed("density") ? props.density : void 0,
+    size: wasPropPassed("size") ? props.size : void 0
+  })
 }));
 const items = computed(() => {
   return props.items ?? [];

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

@@ -231,11 +231,11 @@ const props = defineProps({
   prependAvatar: { type: String, required: false },
   prependIcon: { type: null, required: false },
   size: { type: null, required: false, default: SIZES.DEFAULT },
-  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 },
   ripple: { type: [Boolean, Object], required: false },
   tag: { type: String, required: false, default: "div" },
   text: { type: String, required: false },
@@ -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);