origam 2.16.0 → 2.17.0

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

@@ -1,6 +1,7 @@
 <template>
 	<component
 			:is="tag"
+			:id="id"
 			:class="mainClasses"
 			:style="mainStyles"
 	>
@@ -15,18 +16,17 @@
 
 <script lang="ts" setup>
 import { computed, StyleValue, toRef } from "vue";
-import {
-  useBorder,
-  useBothColor,
-  useElevation,
-  useLayout,
-  useMargin,
-  usePadding,
-  useProps,
-  useRounded,
-  useSsrBoot,
-  useStyle
-} from "../../composables";
+import { useDimension } from "../../composables/Commons/dimension.composable";
+import { useBorder } from "../../composables/Commons/border.composable";
+import { useBothColor } from "../../composables/Commons/bothColor.composable";
+import { useElevation } from "../../composables/Commons/elevation.composable";
+import { useLayout } from "../../composables/Commons/layout.composable";
+import { useMargin } from "../../composables/Commons/margin.composable";
+import { usePadding } from "../../composables/Commons/padding.composable";
+import { useProps } from "../../composables/Commons/props.composable";
+import { useRounded } from "../../composables/Commons/rounded.composable";
+import { useSsrBoot } from "../../composables/Commons/ssrBoot.composable";
+import { useStyle } from "../../composables/Commons/style.composable";
 const props = defineProps({
   scrollable: { type: Boolean, required: false },
   tag: { type: String, required: false, default: "main" },
@@ -76,6 +76,7 @@ const props = defineProps({
   color: { type: [String, Object, Boolean, null], required: false, skipCheck: true }
 });
 const { filterProps } = useProps(props);
+defineEmits([]);
 defineSlots();
 const { mainStyles: mainLayoutStyles } = useLayout();
 const { ssrBootStyles } = useSsrBoot();
@@ -85,8 +86,10 @@ const { roundedClasses, roundedStyles } = useRounded(props);
 const { borderClasses, borderStyles } = useBorder(props);
 const { paddingClasses, paddingStyles } = usePadding(props);
 const { marginClasses, marginStyles } = useMargin(props);
+const { dimensionStyles } = useDimension(props);
 const mainStyles = computed(() => {
   return [
+    dimensionStyles.value,
     mainLayoutStyles.value,
     ssrBootStyles.value,
     colorStyles.value,
@@ -112,7 +115,7 @@ const mainClasses = computed(() => {
     props.class
   ];
 });
-const { id, css, load, isLoaded, unload } = useStyle(mainStyles);
+const { id, css, load, isLoaded, unload } = useStyle(mainStyles, () => props.id);
 defineExpose({
   filterProps,
   css,
@@ -129,6 +132,8 @@ defineExpose({
 
 		flex: var(--origam-main---flex);
 		max-width: var(--origam-main---max-width);
+		background-color: var(--origam-main---background-color);
+		color: var(--origam-main---color);
 		transition-duration: var(--origam-main---transition-duration);
 		transition-property: var(--origam-main---transition-property);
 		transition-timing-function: var(--origam-main---transition-timing-function);

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

@@ -1,6 +1,7 @@
 <template>
 	<component
 			:is="tag"
+			:id="id"
 			ref="rootEl"
 			role="list"
 			:class="masonryClasses"
@@ -36,21 +37,19 @@ import {
   useSlots,
   watch
 } from "vue";
-import {
-  useBorder,
-  useBothColor,
-  useCssSupport,
-  useDimension,
-  useElevation,
-  useMargin,
-  useMasonry,
-  usePadding,
-  useProps,
-  useRounded,
-  useTheme
-} from "../../composables";
-import { GRID_GAP_SIZE_VAR } from "../../consts";
-import { MASONRY_ALIGN } from "../../enums";
+import { useBorder } from "../../composables/Commons/border.composable";
+import { useBothColor } from "../../composables/Commons/bothColor.composable";
+import { useCssSupport } from "../../composables/Commons/cssSupport.composable";
+import { useDimension } from "../../composables/Commons/dimension.composable";
+import { useElevation } from "../../composables/Commons/elevation.composable";
+import { useMargin } from "../../composables/Commons/margin.composable";
+import { useMasonry } from "../../composables/Masonry/masonry.composable";
+import { usePadding } from "../../composables/Commons/padding.composable";
+import { useProps } from "../../composables/Commons/props.composable";
+import { useRounded } from "../../composables/Commons/rounded.composable";
+import { useTheme } from "../../composables/Commons/theme.composable";
+import { GRID_GAP_SIZE_VAR } from "../../consts/Grid/grid.const";
+import { MASONRY_ALIGN } from "../../enums/Masonry/masonry.enum";
 const props = defineProps({
   columns: { type: Number, required: false, default: 3 },
   columnBreakpoints: { type: Object, required: false, default: void 0 },
@@ -104,6 +103,7 @@ const props = defineProps({
   borderLeftColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true }
 });
 const { filterProps } = useProps(props);
+defineEmits([]);
 defineSlots();
 const slots = useSlots();
 const rootEl = ref(null);

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

@@ -1,5 +1,6 @@
 <template>
 	<div
+			:id="id"
 			class="origam-media-controller"
 			:class="rootClasses"
 			:style="style"
@@ -70,6 +71,7 @@
 				/>
 
 				<origam-media-volume-control
+						density="compact"
 						:volume="state.volume.value"
 						:muted="state.muted.value"
 						:mute-label="muteLabel"
@@ -100,9 +102,9 @@
 						variant="text"
 						density="compact"
 						:icon="ICONS.SHUFFLE"
-						:active="internalShuffle"
+						:active="shuffleModel"
 						:aria-label="shuffleLabel"
-						:aria-pressed="internalShuffle"
+						:aria-pressed="shuffleModel"
 						data-cy="origam-media-controller-shuffle"
 						@click="toggleShuffle"
 				/>
@@ -160,12 +162,13 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, ref, useSlots, watch } from "vue";
+import { computed, onBeforeUnmount, ref, useSlots } from "vue";
 import { OrigamBtn } from "../Btn";
 import { OrigamMenu } from "../Menu";
-import { useLocale } from "../../composables";
-import { MDI_ICONS } from "../../enums";
-import { formatMediaTime } from "../../utils";
+import { useLocale } from "../../composables/Commons/locale.composable";
+import { useVModel } from "../../composables/Commons/vModel.composable";
+import { MDI_ICONS } from "../../enums/Commons/mdi.enum";
+import { formatMediaTime } from "../../utils/Media/format-time.util";
 import OrigamMediaScrubber from "./OrigamMediaScrubber.vue";
 import OrigamMediaVolumeControl from "./OrigamMediaVolumeControl.vue";
 const { t } = useLocale();
@@ -206,26 +209,26 @@ const ICONS = {
   CAST: MDI_ICONS.CAST,
   DOWNLOAD: MDI_ICONS.DOWNLOAD
 };
-const playLabel = computed(() => t("origam.media.play", "Play"));
-const pauseLabel = computed(() => t("origam.media.pause", "Pause"));
-const muteLabel = computed(() => t("origam.media.mute", "Mute"));
-const unmuteLabel = computed(() => t("origam.media.unmute", "Unmute"));
-const volumeLabel = computed(() => t("origam.media.volume", "Volume"));
-const seekLabel = computed(() => t("origam.media.seek", "Seek"));
-const previousLabel = computed(() => t("origam.media.previous_track", "Previous track"));
-const nextLabel = computed(() => t("origam.media.next_track", "Next track"));
-const loopAllLabel = computed(() => t("origam.media.loop_all", "Loop playlist"));
-const loopOneLabel = computed(() => t("origam.media.loop_one", "Loop track"));
-const loopOffLabel = computed(() => t("origam.media.loop_off", "Loop off"));
-const shuffleLabel = computed(() => t("origam.media.shuffle", "Shuffle"));
-const castLabel = computed(() => t("origam.media.cast_to_device", "Cast to device"));
-const stopCastLabel = computed(() => t("origam.media.stop_casting", "Stop casting"));
-const settingsLabel = computed(() => t("origam.media.settings", "Settings"));
-const downloadLabel = computed(() => t("origam.media.download", "Download"));
-const speedLabel = computed(() => t("origam.media.playback_speed", "Playback speed"));
-const normalSpeedLabel = computed(() => t("origam.media.normal_speed", "Normal"));
-const qualityLabel = computed(() => t("origam.media.quality", "Quality"));
-const transportLabel = computed(() => t("origam.media.transport", "Transport controls"));
+const playLabel = computed(() => t("origam.media.play"));
+const pauseLabel = computed(() => t("origam.media.pause"));
+const muteLabel = computed(() => t("origam.media.mute"));
+const unmuteLabel = computed(() => t("origam.media.unmute"));
+const volumeLabel = computed(() => t("origam.media.volume"));
+const seekLabel = computed(() => t("origam.media.seek"));
+const previousLabel = computed(() => t("origam.media.previous_track"));
+const nextLabel = computed(() => t("origam.media.next_track"));
+const loopAllLabel = computed(() => t("origam.media.loop_all"));
+const loopOneLabel = computed(() => t("origam.media.loop_one"));
+const loopOffLabel = computed(() => t("origam.media.loop_off"));
+const shuffleLabel = computed(() => t("origam.media.shuffle"));
+const castLabel = computed(() => t("origam.media.cast_to_device"));
+const stopCastLabel = computed(() => t("origam.media.stop_casting"));
+const settingsLabel = computed(() => t("origam.media.settings"));
+const downloadLabel = computed(() => t("origam.media.download"));
+const speedLabel = computed(() => t("origam.media.playback_speed"));
+const normalSpeedLabel = computed(() => t("origam.media.normal_speed"));
+const qualityLabel = computed(() => t("origam.media.quality"));
+const transportLabel = computed(() => t("origam.media.transport"));
 const state = computed(() => props.state);
 const methods = computed(() => props.methods);
 function onTogglePlay() {
@@ -267,15 +270,11 @@ function emitPrevious() {
 function emitNext() {
   emit("next");
 }
-const internalLoopMode = ref(props.loopMode ?? "none");
-watch(() => props.loopMode, (next) => {
-  if (next && next !== internalLoopMode.value) internalLoopMode.value = next;
-});
-const resolvedLoopMode = computed(() => internalLoopMode.value);
+const loopModeModel = useVModel(props, "loopMode", () => "none");
+const resolvedLoopMode = computed(() => loopModeModel.value);
 function cycleLoopMode() {
-  const next = internalLoopMode.value === "none" ? "all" : internalLoopMode.value === "all" ? "one" : "none";
-  internalLoopMode.value = next;
-  emit("update:loopMode", next);
+  const next = loopModeModel.value === "none" ? "all" : loopModeModel.value === "all" ? "one" : "none";
+  loopModeModel.value = next;
 }
 const loopIcon = computed(() => {
   return resolvedLoopMode.value === "one" ? ICONS.LOOP_ONE : ICONS.LOOP;
@@ -286,15 +285,9 @@ const loopAriaLabel = computed(() => {
   if (resolvedLoopMode.value === "all") return loopAllLabel.value;
   return loopOffLabel.value;
 });
-const internalShuffle = ref(props.shuffle ?? false);
-watch(() => props.shuffle, (next) => {
-  if (typeof next === "boolean" && next !== internalShuffle.value) {
-    internalShuffle.value = next;
-  }
-});
+const shuffleModel = useVModel(props, "shuffle", () => false);
 function toggleShuffle() {
-  internalShuffle.value = !internalShuffle.value;
-  emit("update:shuffle", internalShuffle.value);
+  shuffleModel.value = !shuffleModel.value;
 }
 const configMenuOpen = ref(false);
 const hasQualityOptions = computed(() => props.qualityOptions.length >= 2);
@@ -377,6 +370,16 @@ function onConfigSelect(item) {
     return;
   }
 }
+const downloadAbort = new AbortController();
+const pendingRevokes = /* @__PURE__ */ new Map();
+onBeforeUnmount(() => {
+  downloadAbort.abort();
+  for (const [blobUrl, handle] of pendingRevokes) {
+    window.clearTimeout(handle);
+    URL.revokeObjectURL(blobUrl);
+  }
+  pendingRevokes.clear();
+});
 function handleDownloadClick(event) {
   emit("download");
   configMenuOpen.value = false;
@@ -408,14 +411,20 @@ function handleDownloadClick(event) {
     a.click();
     document.body.removeChild(a);
   };
-  fetch(url, { mode: "cors", credentials: "omit" }).then((response) => {
+  fetch(url, { mode: "cors", credentials: "omit", signal: downloadAbort.signal }).then((response) => {
     if (!response.ok) throw new Error(`HTTP ${response.status}`);
     return response.blob();
   }).then((blob) => {
+    if (downloadAbort.signal.aborted) return;
     const blobUrl = URL.createObjectURL(blob);
     triggerAnchor(blobUrl);
-    setTimeout(() => URL.revokeObjectURL(blobUrl), 3e4);
+    const handle = window.setTimeout(() => {
+      pendingRevokes.delete(blobUrl);
+      URL.revokeObjectURL(blobUrl);
+    }, 3e4);
+    pendingRevokes.set(blobUrl, handle);
   }).catch(() => {
+    if (downloadAbort.signal.aborted) return;
     window.open(url, "_blank", "noopener,noreferrer");
   });
 }
@@ -430,7 +439,7 @@ const style = computed(() => props.style);
 defineExpose({
   configMenuOpen,
   resolvedLoopMode,
-  internalShuffle
+  internalShuffle: shuffleModel
 });
 </script>
 
@@ -472,8 +481,8 @@ defineExpose({
 	}
 
 	.origam-media-controller__buttons-row :deep(.origam-btn--active) {
-		color: var(--origam-media-controller---accent-color, var(--origam-color__action--primary---bg));
-		background-color: color-mix(in srgb, var(--origam-media-controller---accent-color, var(--origam-color__action--primary---bg)) 14%, transparent);
+		color: var(--origam-media-controller---accent-color);
+		background-color: color-mix(in srgb, var(--origam-media-controller---accent-color) 14%, transparent);
 	}
 
 	.origam-media-controller--inset {
@@ -509,16 +518,16 @@ defineExpose({
 		font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
 		font-size: 12px;
 		font-variant-numeric: tabular-nums;
-		color: var(--origam-media-controller__time---color, inherit);
+		color: var(--origam-media-controller__time---color);
 		white-space: nowrap;
 		user-select: none;
 	}
 
 	.origam-media-controller__time-sep {
-		opacity: 0.6;
+		color: var(--origam-media-controller__time-sep---color);
 	}
 
 	.origam-media-controller__time-total {
-		opacity: 0.7;
+		color: var(--origam-media-controller__time-total---color);
 	}
 </style>

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

@@ -64,12 +64,10 @@ import {
   ref,
   toRef
 } from "vue";
-import {
-  useBackgroundColor,
-  useRounded
-} from "../../composables";
-import { MEDIA_SCRUBBER_MIN_RANGE } from "../../consts";
-import { DIRECTION } from "../../enums";
+import { useBackgroundColor } from "../../composables/Commons/backgroundColor.composable";
+import { useRounded } from "../../composables/Commons/rounded.composable";
+import { MEDIA_SCRUBBER_MIN_RANGE } from "../../consts/Media/media.const";
+import { DIRECTION } from "../../enums/Commons/direction.enum";
 const props = defineProps({
   modelValue: { type: Number, required: true },
   min: { type: Number, required: false, default: 0 },

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

@@ -8,11 +8,12 @@
 		<template #activator="{ props: activatorProps }">
 			<button
 					v-bind="activatorProps"
+					:id="id"
 					type="button"
 					class="origam-media-volume-control__btn"
 					:class="rootClasses"
-					:style="rootStyle"
-					:aria-label="muted ? unmuteLabel : muteLabel"
+					:style="rootStyles"
+					:aria-label="toggleLabel"
 					:data-cy="btnDataCy"
 					@click="onToggleMute"
 			>
@@ -43,11 +44,15 @@
 </template>
 
 <script lang="ts" setup>
-import { computed } from "vue";
+import { computed, toRef } from "vue";
 import { OrigamIcon } from "../Icon";
 import { OrigamTooltip } from "../Tooltip";
 import OrigamMediaScrubber from "./OrigamMediaScrubber.vue";
-import { MDI_ICONS } from "../../enums";
+import { useDensity } from "../../composables/Commons/density.composable";
+import { useRounded } from "../../composables/Commons/rounded.composable";
+import { useSize } from "../../composables/Commons/size.composable";
+import { useTextColor } from "../../composables/Commons/textColor.composable";
+import { MDI_ICONS } from "../../enums/Commons/mdi.enum";
 const props = defineProps({
   volume: { type: Number, required: true },
   muted: { type: Boolean, required: true },
@@ -57,17 +62,42 @@ const props = defineProps({
   dataCy: { type: String, required: false, default: "origam-media-volume-control" },
   id: { type: String, required: false },
   class: { type: [String, Array, Object], required: false },
-  style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true }
+  style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
+  color: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  rounded: { type: [Boolean, Number, String, null], required: false, skipCheck: true },
+  roundedTopRight: { type: [Boolean, Number, String], required: false },
+  roundedTopLeft: { type: [Boolean, Number, String], required: false },
+  roundedBottomLeft: { type: [Boolean, Number, String], required: false },
+  roundedBottomRight: { type: [Boolean, Number, String], required: false },
+  size: { type: null, required: false },
+  density: { type: null, required: false }
 });
 const emit = defineEmits(["update:muted", "update:volume"]);
+defineSlots();
 const ICONS = {
   VOLUME_HIGH: MDI_ICONS.VOLUME_HIGH,
   VOLUME_MEDIUM: MDI_ICONS.VOLUME_MEDIUM,
   VOLUME_LOW: MDI_ICONS.VOLUME_LOW,
   VOLUME_OFF: MDI_ICONS.VOLUME_OFF
 };
-const rootClasses = computed(() => [props.class]);
-const rootStyle = computed(() => props.style);
+const { textColorClasses, textColorStyles } = useTextColor(toRef(props, "color"));
+const { roundedClasses, roundedStyles } = useRounded(props);
+const { sizeClasses, sizeStyles } = useSize(props);
+const { densityClasses } = useDensity(props);
+const rootClasses = computed(() => [
+  props.class,
+  textColorClasses.value,
+  roundedClasses.value,
+  sizeClasses.value,
+  densityClasses.value
+]);
+const rootStyles = computed(() => [
+  props.style,
+  textColorStyles.value,
+  roundedStyles.value,
+  sizeStyles.value
+]);
+const toggleLabel = computed(() => props.muted ? props.unmuteLabel : props.muteLabel);
 const btnDataCy = computed(() => `${props.dataCy}-mute`);
 const wrapperDataCy = computed(() => `${props.dataCy}-wrapper`);
 const scrubberDataCy = computed(() => props.dataCy);
@@ -102,41 +132,83 @@ function onVolumeFromScrubber(value) {
 		display: inline-flex;
 		align-items: center;
 		justify-content: center;
-		width: var(--origam-media-volume-control---btn-size, 36px);
-		height: var(--origam-media-volume-control---btn-size, 36px);
-		border-radius: var(--origam-media-volume-control---btn-border-radius, 50%);
+		width: calc(var(--origam-media-volume-control__btn---size) + var(--origam-media-volume-control---density));
+		height: calc(var(--origam-media-volume-control__btn---size) + var(--origam-media-volume-control---density));
+		border-radius: var(--origam-media-volume-control__btn---border-radius);
 		cursor: pointer;
-		color: var(--origam-media-volume-control---color, inherit);
-		transition: background-color 120ms ease, transform 120ms ease, opacity 120ms ease;
-		opacity: 0.95;
+		color: var(--origam-media-volume-control__btn---color);
+		background-color: var(--origam-media-volume-control__btn---background-color);
+		transition:
+			background-color var(--origam-media-volume-control__btn---transition-duration) ease,
+			transform var(--origam-media-volume-control__btn---transition-duration) ease,
+			opacity var(--origam-media-volume-control__btn---transition-duration) ease;
+		opacity: var(--origam-media-volume-control__btn---opacity);
 	}
 
 	.origam-media-volume-control__btn:hover,
 	.origam-media-volume-control__btn:focus-visible {
-		opacity: 1;
-		background-color: var(--origam-media-volume-control---hover-background-color, color-mix(in srgb, currentColor 12%, transparent));
+		opacity: var(--origam-media-volume-control__btn--hover---opacity);
+		background-color: var(--origam-media-volume-control__btn--hover---background-color);
 	}
 
 	.origam-media-volume-control__btn:active {
-		transform: scale(0.92);
+		transform: scale(var(--origam-media-volume-control__btn--active---scale));
 	}
 
-	.origam-media-volume-control__btn .origam-icon {
-		font-size: var(--origam-media-volume-control---icon-size, 20px);
+	.origam-media-volume-control__btn :deep(.origam-icon) {
+		font-size: var(--origam-media-volume-control__icon---font-size);
 		line-height: 1;
 	}
 
+	.origam-media-volume-control--size-x-small {
+		--origam-media-volume-control__btn---size: var(--origam-media-volume-control__btn---size-xs);
+		--origam-media-volume-control__icon---font-size: var(--origam-media-volume-control__icon---font-size-xs);
+	}
+
+	.origam-media-volume-control--size-small {
+		--origam-media-volume-control__btn---size: var(--origam-media-volume-control__btn---size-sm);
+		--origam-media-volume-control__icon---font-size: var(--origam-media-volume-control__icon---font-size-sm);
+	}
+
+	.origam-media-volume-control--size-default {
+		--origam-media-volume-control__btn---size: var(--origam-media-volume-control__btn---size-md);
+		--origam-media-volume-control__icon---font-size: var(--origam-media-volume-control__icon---font-size-md);
+	}
+
+	.origam-media-volume-control--size-large {
+		--origam-media-volume-control__btn---size: var(--origam-media-volume-control__btn---size-lg);
+		--origam-media-volume-control__icon---font-size: var(--origam-media-volume-control__icon---font-size-lg);
+	}
+
+	.origam-media-volume-control--size-x-large {
+		--origam-media-volume-control__btn---size: var(--origam-media-volume-control__btn---size-xl);
+		--origam-media-volume-control__icon---font-size: var(--origam-media-volume-control__icon---font-size-xl);
+	}
+
+	.origam-media-volume-control--density-comfortable {
+		--origam-media-volume-control---density: var(--origam-media-volume-control--comfortable---density);
+	}
+
+	.origam-media-volume-control--density-default {
+		--origam-media-volume-control---density: var(--origam-media-volume-control--default---density);
+	}
+
+	.origam-media-volume-control--density-compact {
+		--origam-media-volume-control---density: var(--origam-media-volume-control--compact---density);
+	}
+
 	:deep(.origam-media-volume-control__tooltip) {
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		padding: 10px 8px;
-		background-color: var(--origam-media-volume-control---tooltip-background-color, rgba(28, 28, 28, 0.92));
+		padding: var(--origam-media-volume-control__tooltip---padding);
+		color: var(--origam-media-volume-control__tooltip---color);
+		background-color: var(--origam-media-volume-control__tooltip---background-color);
 	}
 
 	.origam-media-volume-control__wrapper {
-		width: 14px;
-		height: 80px;
+		width: var(--origam-media-volume-control__wrapper---width);
+		height: var(--origam-media-volume-control__wrapper---height);
 		display: flex;
 		align-items: stretch;
 		justify-content: center;
@@ -144,9 +216,9 @@ function onVolumeFromScrubber(value) {
 
 	.origam-media-volume-control__scrubber {
 		--origam-media-scrubber---color: currentColor;
-		--origam-media-scrubber---track-background-color: color-mix(in srgb, currentColor 30%, transparent);
-		--origam-media-scrubber---track-size: 4px;
-		--origam-media-scrubber---track-size-active: 4px;
-		--origam-media-scrubber---thumb-diameter: 10px;
+		--origam-media-scrubber---track-background-color: var(--origam-media-volume-control__scrubber---track-background-color);
+		--origam-media-scrubber---track-size: var(--origam-media-volume-control__scrubber---track-size);
+		--origam-media-scrubber---track-size-active: var(--origam-media-volume-control__scrubber---track-size);
+		--origam-media-scrubber---thumb-diameter: var(--origam-media-volume-control__scrubber---thumb-diameter);
 	}
 </style>

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

@@ -16,10 +16,10 @@
 			@keydown="handleKeydown"
 			@click:outside="handleClickOutside"
 	>
-		<template #activator="{props}">
+		<template #activator="{props: activatorSlotProps}">
 			<slot
 					name="activator"
-					v-bind="{props}"
+					v-bind="{props: mergeProps(activatorSlotProps, {onContextmenu: handleContextMenu})}"
 			/>
 		</template>
 
@@ -77,27 +77,28 @@
 
 <script lang="ts" setup>
 import { computed, inject, mergeProps, nextTick, provide, ref, shallowRef, StyleValue, toRef, watch } from "vue";
-import {
-  OrigamList,
-  OrigamListGroup,
-  OrigamListItem,
-  OrigamListSubheader,
-  OrigamOverlay,
-  OrigamTranslateScale
-} from "../../components";
-import {
-  useBothColor,
-  useDefaults,
-  useProps,
-  useScopeId,
-  useStateEffect,
-  useStyle,
-  useVModel
-} 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, getPropertyFromItem, getUid, omit } from "../../utils";
-const _props = defineProps({
+import OrigamList from "../List/OrigamList.vue";
+import OrigamListGroup from "../List/OrigamListGroup.vue";
+import OrigamListItem from "../List/OrigamListItem.vue";
+import OrigamListSubheader from "../List/OrigamListSubheader.vue";
+import OrigamOverlay from "../Overlay/OrigamOverlay.vue";
+import OrigamTranslateScale from "../Transition/OrigamTranslateScale.vue";
+import { useBothColor } from "../../composables/Commons/bothColor.composable";
+import { useProps } from "../../composables/Commons/props.composable";
+import { useScopeId } from "../../composables/Commons/scopeId.composable";
+import { useStateEffect } from "../../composables/Commons/stateEffect.composable";
+import { useStyle } from "../../composables/Commons/style.composable";
+import { useVModel } from "../../composables/Commons/vModel.composable";
+import { ORIGAM_MENU_KEY } from "../../consts/Menu/menu.const";
+import { INLINE } from "../../enums/Commons/anchor.enum";
+import { KEYBOARD_VALUES } from "../../enums/Commons/hotkey.enum";
+import { LOCATION_STRATEGIES } from "../../enums/Commons/location.enum";
+import { MDI_ICONS } from "../../enums/Commons/mdi.enum";
+import { SCROLL_STRATEGIES } from "../../enums/Commons/scroll.enum";
+import { focusableChildren, focusChild, getNextElement, getPropertyFromItem, omit } from "../../utils/Commons/commons.util";
+import { forwardRefs } from "../../utils/Commons/forwardRefs.util";
+import { getUid } from "../../utils/Commons/getCurrentInstance.util";
+const props = defineProps({
   id: { type: String, required: false },
   absolute: { type: Boolean, required: false },
   attach: { type: [Boolean, String], required: false, skipCheck: true },
@@ -210,13 +211,12 @@ const _props = defineProps({
   prependAvatar: { type: String, required: false },
   prependIcon: { type: null, required: false },
   hover: { type: [Boolean, Object], required: false },
-  fontFamily: { type: null, required: false },
+  hoverClass: { type: String, 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(["contextmenu", "select", "update:modelValue"]);
 defineSlots();
 const { filterProps } = useProps(props);
@@ -236,7 +236,7 @@ const {
 const isActive = useVModel(props, "modelValue");
 const { scopeId } = useScopeId();
 const uid = getUid();
-const id = computed(() => props.id || `origam-menu--${uid}`);
+const id = computed(() => props.id || `origam-menu-${uid}`);
 const origamOverlayRef = ref();
 const parent = inject(ORIGAM_MENU_KEY, null);
 const openChildren = shallowRef(0);
@@ -280,6 +280,9 @@ watch(isActive, (val) => {
 const handleClickOutside = () => {
   parent?.closeParents();
 };
+const handleContextMenu = (e) => {
+  emit("contextmenu", e);
+};
 const handleSelect = (item) => {
   if (props.disabled) return;
   emit("select", item);