origam 2.15.0 → 2.17.0

package/dist/src/components/List/OrigamListSubheader.vue

@@ -1,6 +1,7 @@
 <template>
 	<component
 			:is="tag"
+			:id="id"
 			v-contrast
 			:class="listSubheaderClasses"
 			:style="listSubheaderStyles"
@@ -21,17 +22,15 @@
 
 <script lang="ts" setup>
 import { computed, StyleValue, toRef, useSlots } from "vue";
-import {
-  useBorder,
-  useBothColor,
-  useMargin,
-  usePadding,
-  useProps,
-  useRounded,
-  useStyle,
-  useTypography
-} from "../../composables";
-import { vContrast } from "../../directives";
+import { useBorder } from "../../composables/Commons/border.composable";
+import { useBothColor } from "../../composables/Commons/bothColor.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 { useStyle } from "../../composables/Commons/style.composable";
+import { useTypography } from "../../composables/Commons/typography.composable";
+import vContrast from "../../directives/Contrast/contrast.directive";
 const props = defineProps({
   inset: { type: Boolean, required: false },
   sticky: { type: Boolean, required: false },
@@ -74,12 +73,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 }
+  fontSize: { type: null, required: false },
+  fontWeight: { type: null, required: false },
+  lineHeight: { type: null, required: false }
 });
+defineEmits([]);
 defineSlots();
 const { filterProps } = useProps(props);
 const { colorClasses, colorStyles } = useBothColor(toRef(props, "bgColor"), toRef(props, "color"));
@@ -118,7 +116,7 @@ const listSubheaderClasses = computed(() => {
     props.class
   ];
 });
-const { id, css, load, isLoaded, unload } = useStyle(listSubheaderStyles);
+const { id, css, load, isLoaded, unload } = useStyle(listSubheaderStyles, () => props.id);
 defineExpose({
   filterProps,
   css,
@@ -135,7 +133,7 @@ defineExpose({
 		background: inherit;
 		color: var(--origam-list-subheader---color, var(--origam-color__text---secondary));
 		display: flex;
-		font-size: var(--origam-list-subheader---font-size, 0.875rem);
+		font-size: var(--origam-list-subheader---font-size, var(--origam-list__subheader---font-size, 0.875rem));
 		font-weight: var(--origam-list-subheader---font-weight, 400);
 		line-height: var(--origam-list-subheader---line-height, 1.375rem);
 		padding-inline-end: var(--origam-list-subheader---padding-inline-end, 16px);

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

@@ -1,8 +1,9 @@
 <template>
 	<component
 			:is="tag"
+			:id="id"
 			:aria-busy="isLoading || undefined"
-			:aria-label="isLoading ? 'Loading' : undefined"
+			:aria-label="isLoading ? t(loadingText) : undefined"
 			:class="loaderClasses"
 			:style="loaderStyles"
 	>
@@ -26,18 +27,24 @@
 
 <script lang="ts" setup>
 import { computed, StyleValue } from "vue";
-import { OrigamProgress } from "../../components";
-import { useProps, useStyle } from "../../composables";
-import { PROGRESS_TYPE } from "../../enums";
+import OrigamProgress from "../Progress/OrigamProgress.vue";
+import { useLocale } from "../../composables/Commons/locale.composable";
+import { useProps } from "../../composables/Commons/props.composable";
+import { useStyle } from "../../composables/Commons/style.composable";
+import { PROGRESS_TYPE } from "../../enums/Progress/progress.enum";
 const props = defineProps({
+  fullscreen: { type: Boolean, required: false },
   loading: { type: [Boolean, Number, Object], required: false },
-  loadingText: { type: String, required: false },
+  loadingText: { type: String, required: false, default: "origam.loading" },
   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" },
   color: { type: [String, Object, Boolean, null], required: false, skipCheck: true }
 });
+const locale = useLocale(false);
+const t = (key) => locale?.t(key) ?? key;
+defineEmits([]);
 defineSlots();
 const { filterProps } = useProps(props);
 const isLoading = computed(() => {
@@ -51,10 +58,13 @@ const loaderStyles = computed(() => {
 const loaderClasses = computed(() => {
   return [
     "origam-loader",
+    {
+      "origam-loader--fullscreen": props.fullscreen
+    },
     props.class
   ];
 });
-const { id, css, load, isLoaded, unload } = useStyle(loaderStyles);
+const { id, css, load, isLoaded, unload } = useStyle(loaderStyles, () => props.id);
 defineExpose({
   filterProps,
   css,

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,25 +37,25 @@ import {
   useSlots,
   watch
 } from "vue";
-import {
-  useBorder,
-  useBothColor,
-  useCssSupport,
-  useDimension,
-  useElevation,
-  useMargin,
-  useMasonry,
-  usePadding,
-  useProps,
-  useRounded
-} from "../../composables";
-import { GRID_GAP_SIZE_VAR } from "../../consts";
+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 },
   gap: { type: null, required: false, default: "md" },
   animated: { type: Boolean, required: false, default: true },
-  align: { type: String, required: false, default: "top" },
+  align: { type: null, required: false, default: "top" },
   id: { type: String, required: false },
   class: { type: [String, Array, Object], required: false },
   style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
@@ -102,12 +103,13 @@ 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);
 const { css } = useCssSupport();
 const supportsCssMasonry = computed(
-  () => css.value.masonry && props.align === "top"
+  () => css.value.masonry && props.align === MASONRY_ALIGN.TOP
 );
 const serialiseGap = (value) => {
   if (value == null) return GRID_GAP_SIZE_VAR.md;
@@ -141,7 +143,8 @@ onMounted(() => {
   resolveGapPx();
   requestAnimationFrame(() => relayout());
 });
-watch(() => props.gap, () => {
+const { theme, mode } = useTheme();
+watch([() => props.gap, theme, mode], () => {
   requestAnimationFrame(resolveGapPx);
 });
 const childrenVNodes = computed(() => {

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"
 				/>
@@ -137,7 +139,6 @@
 						:items="configMenuItems"
 						:item-children="'children'"
 						data-cy="origam-media-controller-config"
-						@select="onConfigSelect"
 				>
 					<template #activator="{ props: activatorProps }">
 						<origam-btn
@@ -161,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();
@@ -207,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() {
@@ -268,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;
@@ -287,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,11 +369,17 @@ function onConfigSelect(item) {
     configMenuOpen.value = false;
     return;
   }
-  if (item.key === "download") {
-    emit("download");
-    configMenuOpen.value = false;
-  }
 }
+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;
@@ -413,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");
   });
 }
@@ -435,7 +439,7 @@ const style = computed(() => props.style);
 defineExpose({
   configMenuOpen,
   resolvedLoopMode,
-  internalShuffle
+  internalShuffle: shuffleModel
 });
 </script>
 
@@ -477,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 {
@@ -514,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

@@ -1,5 +1,6 @@
 <template>
 	<div
+			:id="id"
 			ref="rootEl"
 			class="origam-media-scrubber"
 			:class="rootClasses"
@@ -13,7 +14,7 @@
 			:aria-valuetext="ariaValueText || undefined"
 			:aria-label="ariaLabel"
 			:aria-disabled="disabled || undefined"
-			data-cy="origam-media-scrubber"
+			:data-cy="resolvedDataCy"
 			@pointerdown="onPointerDown"
 			@pointermove="onPointerMove"
 			@pointerleave="onPointerLeave"
@@ -22,7 +23,7 @@
 		<div
 				class="origam-media-scrubber__track"
 				:class="[colorClasses, roundedClasses]"
-				:style="colorStyles"
+				:style="[colorStyles, roundedStyles]"
 				aria-hidden="true"
 		>
 			<div
@@ -63,10 +64,10 @@ import {
   ref,
   toRef
 } from "vue";
-import {
-  useBackgroundColor,
-  useRounded
-} from "../../composables";
+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 },
@@ -94,12 +95,12 @@ const props = defineProps({
 const emit = defineEmits(["update:modelValue", "change", "dragstart", "dragend", "hover"]);
 defineSlots();
 const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(toRef(props, "color"));
-const { roundedClasses } = useRounded(toRef(props, "rounded"));
+const { roundedClasses, roundedStyles } = useRounded(props);
 const colorClasses = computed(() => backgroundColorClasses.value);
 const colorStyles = computed(() => backgroundColorStyles.value);
 const resolvedMin = computed(() => props.min);
-const resolvedMax = computed(() => Math.max(props.max, props.min + 1e-7));
-const range = computed(() => resolvedMax.value - resolvedMin.value);
+const resolvedMax = computed(() => Math.max(props.max, props.min));
+const range = computed(() => Math.max(resolvedMax.value - resolvedMin.value, MEDIA_SCRUBBER_MIN_RANGE));
 const resolvedValue = computed(() => clamp(props.modelValue, resolvedMin.value, resolvedMax.value));
 const valuePct = computed(() => (resolvedValue.value - resolvedMin.value) / range.value * 100);
 const bufferPct = computed(() => {
@@ -108,6 +109,7 @@ const bufferPct = computed(() => {
   return (clamped - resolvedMin.value) / range.value * 100;
 });
 const hasBuffer = computed(() => typeof props.buffered === "number" && Number.isFinite(props.buffered));
+const resolvedDataCy = computed(() => props.dataCy ?? "origam-media-scrubber");
 const resolvedRole = computed(() => props.disabled ? void 0 : "slider");
 const resolvedTabIndex = computed(() => props.disabled ? -1 : 0);
 const rootEl = ref(null);
@@ -115,7 +117,7 @@ const isScrubbing = ref(false);
 const hoverValue = ref(null);
 const hoverPct = ref(null);
 const showTooltip = computed(
-  () => props.showHoverTooltip && props.orientation === "horizontal" && hoverPct.value !== null && !props.disabled
+  () => props.showHoverTooltip && props.orientation === DIRECTION.HORIZONTAL && hoverPct.value !== null && !props.disabled
 );
 const tooltipLabel = computed(() => {
   const fn = props.formatHoverTooltip;
@@ -126,7 +128,7 @@ function pctFromPointer(event) {
   const el = rootEl.value;
   if (!el) return 0;
   const rect = el.getBoundingClientRect();
-  if (props.orientation === "vertical") {
+  if (props.orientation === DIRECTION.VERTICAL) {
     const y = clamp(event.clientY, rect.top, rect.bottom);
     return (rect.bottom - y) / Math.max(1, rect.height) * 100;
   }
@@ -201,7 +203,7 @@ function keyStep() {
 }
 function onKeyDown(event) {
   if (props.disabled) return;
-  const isVertical = props.orientation === "vertical";
+  const isVertical = props.orientation === DIRECTION.VERTICAL;
   const step = keyStep();
   let next = null;
   if (event.key === "ArrowRight" && !isVertical) next = resolvedValue.value + step;
@@ -218,19 +220,19 @@ function onKeyDown(event) {
   commit(snapped, true);
 }
 const progressStyles = computed(() => {
-  if (props.orientation === "vertical") {
+  if (props.orientation === DIRECTION.VERTICAL) {
     return { height: `${valuePct.value}%` };
   }
   return { width: `${valuePct.value}%` };
 });
 const bufferStyles = computed(() => {
-  if (props.orientation === "vertical") {
+  if (props.orientation === DIRECTION.VERTICAL) {
     return { height: `${bufferPct.value}%` };
   }
   return { width: `${bufferPct.value}%` };
 });
 const thumbStyles = computed(() => {
-  if (props.orientation === "vertical") {
+  if (props.orientation === DIRECTION.VERTICAL) {
     return { bottom: `${valuePct.value}%` };
   }
   return { left: `${valuePct.value}%` };
@@ -241,8 +243,8 @@ const tooltipStyles = computed(() => {
 });
 const rootClasses = computed(() => [
   {
-    "origam-media-scrubber--horizontal": props.orientation === "horizontal",
-    "origam-media-scrubber--vertical": props.orientation === "vertical",
+    "origam-media-scrubber--horizontal": props.orientation === DIRECTION.HORIZONTAL,
+    "origam-media-scrubber--vertical": props.orientation === DIRECTION.VERTICAL,
     "origam-media-scrubber--disabled": props.disabled,
     "origam-media-scrubber--scrubbing": isScrubbing.value,
     "origam-media-scrubber--thumb-on-hover": props.showThumbOnHoverOnly