origam 2.15.0 → 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,14 @@ 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"));
@@ -278,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) {
@@ -321,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,20 +22,20 @@ 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 },

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/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,11 +264,11 @@ 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();
@@ -509,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",
@@ -519,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

@@ -126,11 +126,11 @@ 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 }
 });
@@ -218,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();
@@ -273,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" },
@@ -133,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/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,11 +112,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 }
 });
 const slots = useSlots();
 const { filterProps } = useProps(props);

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

@@ -21,11 +21,11 @@ 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();

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 },

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 },
@@ -160,6 +161,7 @@ const props = defineProps({
   items: { type: [Array, Object], required: false }
 });
 defineSlots();
+defineEmits(["update:modelValue"]);
 const { filterProps } = useProps(props);
 const origamSelectionControlGroupRef = ref();
 const origamInputRef = ref();
@@ -176,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 },

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

@@ -411,11 +411,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/SelectionControl/OrigamSelectionControl.vue

@@ -159,9 +159,10 @@ const isMultiple = computed(() => {
 const valueComparator = computed(() => {
   return props.valueComparator ?? deepEqual;
 });
+const currentModel = () => group ? group.modelValue.value : modelValue.value;
 const model = computed({
   get() {
-    const val = group ? group.modelValue.value : modelValue.value;
+    const val = currentModel();
     return isMultiple.value ? wrapInArray(val).some((v) => valueComparator.value(v, trueValue.value)) : valueComparator.value(val, trueValue.value);
   },
   set(val) {
@@ -169,7 +170,8 @@ const model = computed({
     const currentValue = val ? trueValue.value : falseValue.value;
     let newVal = currentValue;
     if (isMultiple.value) {
-      newVal = val ? [...wrapInArray(modelValue.value), currentValue] : wrapInArray(modelValue.value).filter((item) => !valueComparator.value(item, trueValue.value));
+      const previous = currentModel();
+      newVal = val ? [...wrapInArray(previous), currentValue] : wrapInArray(previous).filter((item) => !valueComparator.value(item, trueValue.value));
     }
     if (group) {
       group.modelValue.value = newVal;

package/dist/src/components/SelectionControl/OrigamSelectionControlGroup.vue

@@ -33,13 +33,14 @@
 import { computed, onScopeDispose, provide, StyleValue } from "vue";
 import { OrigamDefaultsProvider } from "../../components";
 import {
+  usePassedProps,
   useProps,
   useStyle,
   useVModel
 } from "../../composables";
 import { ORIGAM_SELECTION_CONTROL_GROUP_KEY } from "../../consts";
 import { DENSITY } from "../../enums";
-import { getUid } from "../../utils";
+import { getUid, omitUndefined } from "../../utils";
 const props = defineProps({
   disabled: { type: Boolean, required: false },
   error: { type: [String, Boolean], required: false },
@@ -63,21 +64,22 @@ const props = defineProps({
 defineEmits(["update:modelValue"]);
 defineSlots();
 const { filterProps } = useProps(props);
+const wasPropPassed = usePassedProps(props);
 const slotDefaults = computed(() => ({
-  "origam-selection-control": {
-    density: props.density,
-    color: props.color,
-    type: props.type,
-    disabled: props.disabled,
-    readonly: props.readonly,
-    error: props.error,
-    multiple: props.multiple,
-    name: props.name,
-    ripple: props.ripple,
-    falseIcon: props.falseIcon,
-    trueIcon: props.trueIcon,
-    valueComparator: props.valueComparator
-  }
+  "origam-selection-control": omitUndefined({
+    density: wasPropPassed("density") ? props.density : void 0,
+    color: wasPropPassed("color") ? props.color : void 0,
+    type: wasPropPassed("type") ? props.type : void 0,
+    disabled: wasPropPassed("disabled") ? props.disabled : void 0,
+    readonly: wasPropPassed("readonly") ? props.readonly : void 0,
+    error: wasPropPassed("error") ? props.error : void 0,
+    multiple: wasPropPassed("multiple") ? props.multiple : void 0,
+    name: wasPropPassed("name") ? props.name : void 0,
+    ripple: wasPropPassed("ripple") ? props.ripple : void 0,
+    falseIcon: wasPropPassed("falseIcon") ? props.falseIcon : void 0,
+    trueIcon: wasPropPassed("trueIcon") ? props.trueIcon : void 0,
+    valueComparator: wasPropPassed("valueComparator") ? props.valueComparator : void 0
+  })
 }));
 const modelValue = useVModel(props, "modelValue");
 const uid = getUid();

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

@@ -44,7 +44,7 @@ const props = defineProps({
   side: { type: null, required: false, default: void 0 },
   swipeable: { type: Boolean, required: false, default: false },
   snapPoints: { type: Array, required: false },
-  defaultSnap: { type: [String, Object], required: false, default: "half" },
+  defaultSnap: { type: null, required: false, default: "half" },
   open: { type: Boolean, required: false, default: void 0 },
   disabled: { type: Boolean, required: false, default: false },
   persistent: { type: Boolean, required: false, default: false },
@@ -103,7 +103,7 @@ const props = defineProps({
   activeClass: { type: String, required: false },
   hover: { type: [Boolean, Object], required: false }
 });
-const emit = defineEmits(["update:snap", "update:open"]);
+const emit = defineEmits(["update:snap", "update:open", "update:active"]);
 defineSlots();
 const { filterProps } = useProps(props);
 const { colorClasses, colorStyles } = useBothColor(

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

@@ -56,7 +56,7 @@ import {
 import { convertToUnit } from "../../utils";
 import { computed, toRef } from "vue";
 const props = defineProps({
-  variant: { type: String, required: false, default: "rectangular" },
+  variant: { type: null, required: false, default: "rectangular" },
   width: { type: [String, Number], required: false },
   height: { type: [String, Number], required: false },
   loading: { type: Boolean, required: false, default: true },

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

@@ -146,7 +146,7 @@ const isOverflowing = shallowRef(false);
 const scrollOffset = shallowRef(0);
 const containerSize = shallowRef(0);
 const contentSize = shallowRef(0);
-const isHorizontal = computed(() => props.direction === "horizontal");
+const isHorizontal = computed(() => props.direction === DIRECTION.HORIZONTAL);
 const { resizeRef: containerRef, contentRect: containerRect } = useResizeObserver();
 const { resizeRef: contentRef, contentRect } = useResizeObserver();
 const { isRtl } = useRtl();