origam 2.15.0 → 2.16.0

package/dist/src/components/Icon/OrigamComponentIcon.vue

@@ -14,12 +14,20 @@
 </template>
 
 <script lang="ts" setup>
-import { useProps, useStyle } from "../../composables";
+import {
+  useBorder,
+  useBothColor,
+  useDimension,
+  useMargin,
+  usePadding,
+  useProps,
+  useRounded,
+  useStyle
+} from "../../composables";
 import { SIZES_ARRAY } from "../../consts";
-import { computed, StyleValue } from "vue";
+import { computed, StyleValue, toRef } from "vue";
 import { convertToUnit } from "../../utils";
 const props = defineProps({
-  disabled: { type: Boolean, required: false },
   icon: { type: null, required: false },
   color: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
@@ -75,6 +83,12 @@ const hasIcon = computed(() => {
 const iconComponent = computed(() => {
   return props.icon;
 });
+const { colorClasses, colorStyles } = useBothColor(toRef(props, "bgColor"), toRef(props, "color"));
+const { borderClasses, borderStyles } = useBorder(props);
+const { paddingClasses, paddingStyles } = usePadding(props);
+const { marginClasses, marginStyles } = useMargin(props);
+const { roundedClasses, roundedStyles } = useRounded(props);
+const { dimensionStyles } = useDimension(props);
 const iconStyles = computed(() => {
   const numericSize = typeof props.size === "number" ? convertToUnit(props.size) : void 0;
   return [
@@ -83,6 +97,12 @@ const iconStyles = computed(() => {
       "width": numericSize,
       "height": numericSize
     },
+    colorStyles.value,
+    borderStyles.value,
+    roundedStyles.value,
+    dimensionStyles.value,
+    marginStyles.value,
+    paddingStyles.value,
     props.style
   ];
 });
@@ -92,6 +112,11 @@ const iconClasses = computed(() => {
     "origam-icon",
     "origam-icon--component",
     namedSize,
+    colorClasses.value,
+    borderClasses.value,
+    roundedClasses.value,
+    paddingClasses.value,
+    marginClasses.value,
     props.class
   ];
 });

package/dist/src/components/Icon/OrigamIcon.vue

@@ -30,7 +30,6 @@ import {
 import { flattenFragments } from "../../utils";
 const attrs = useAttrs();
 const props = defineProps({
-  disabled: { type: Boolean, required: false },
   icon: { type: null, required: false },
   color: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },

package/dist/src/components/Icon/OrigamLigatureIcon.vue

@@ -9,12 +9,20 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, StyleValue } from "vue";
-import { useProps, useStyle } from "../../composables";
+import { computed, StyleValue, toRef } from "vue";
+import {
+  useBorder,
+  useBothColor,
+  useDimension,
+  useMargin,
+  usePadding,
+  useProps,
+  useRounded,
+  useStyle
+} from "../../composables";
 import { SIZES_ARRAY } from "../../consts";
 import { convertToUnit } from "../../utils";
 const props = defineProps({
-  disabled: { type: Boolean, required: false },
   icon: { type: null, required: false },
   color: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
@@ -63,6 +71,12 @@ const props = defineProps({
   roundedBottomRight: { type: [Boolean, Number, String], required: false }
 });
 const { filterProps } = useProps(props);
+const { colorClasses, colorStyles } = useBothColor(toRef(props, "bgColor"), toRef(props, "color"));
+const { borderClasses, borderStyles } = useBorder(props);
+const { paddingClasses, paddingStyles } = usePadding(props);
+const { marginClasses, marginStyles } = useMargin(props);
+const { roundedClasses, roundedStyles } = useRounded(props);
+const { dimensionStyles } = useDimension(props);
 const iconStyles = computed(() => {
   const numericSize = typeof props.size === "number" ? convertToUnit(props.size) : void 0;
   return [
@@ -70,6 +84,12 @@ const iconStyles = computed(() => {
       "font-size": numericSize,
       "line-height": numericSize
     },
+    colorStyles.value,
+    borderStyles.value,
+    roundedStyles.value,
+    dimensionStyles.value,
+    marginStyles.value,
+    paddingStyles.value,
     props.style
   ];
 });
@@ -79,6 +99,11 @@ const iconClasses = computed(() => {
     "origam-icon",
     "origam-icon--ligature",
     namedSize,
+    colorClasses.value,
+    borderClasses.value,
+    roundedClasses.value,
+    paddingClasses.value,
+    marginClasses.value,
     props.class
   ];
 });

package/dist/src/components/Icon/OrigamSvgIcon.vue

@@ -35,12 +35,20 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, StyleValue } from "vue";
-import { useProps, useStyle } from "../../composables";
+import { computed, StyleValue, toRef } from "vue";
+import {
+  useBorder,
+  useBothColor,
+  useDimension,
+  useMargin,
+  usePadding,
+  useProps,
+  useRounded,
+  useStyle
+} from "../../composables";
 import { SIZES_ARRAY } from "../../consts";
 import { convertToUnit } from "../../utils";
 const props = defineProps({
-  disabled: { type: Boolean, required: false },
   icon: { type: null, required: false },
   color: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
@@ -92,6 +100,12 @@ const { filterProps } = useProps(props);
 const isArray = (data) => {
   return Array.isArray(data);
 };
+const { colorClasses, colorStyles } = useBothColor(toRef(props, "bgColor"), toRef(props, "color"));
+const { borderClasses, borderStyles } = useBorder(props);
+const { paddingClasses, paddingStyles } = usePadding(props);
+const { marginClasses, marginStyles } = useMargin(props);
+const { roundedClasses, roundedStyles } = useRounded(props);
+const { dimensionStyles } = useDimension(props);
 const iconStyles = computed(() => {
   const numericSize = typeof props.size === "number" ? convertToUnit(props.size) : void 0;
   return [
@@ -100,6 +114,12 @@ const iconStyles = computed(() => {
       "width": numericSize,
       "height": numericSize
     },
+    colorStyles.value,
+    borderStyles.value,
+    roundedStyles.value,
+    dimensionStyles.value,
+    marginStyles.value,
+    paddingStyles.value,
     props.style
   ];
 });
@@ -109,6 +129,11 @@ const iconClasses = computed(() => {
     "origam-icon",
     "origam-icon--svg",
     namedSize,
+    colorClasses.value,
+    borderClasses.value,
+    roundedClasses.value,
+    paddingClasses.value,
+    marginClasses.value,
     props.class
   ];
 });

package/dist/src/components/InfiniteScroll/OrigamInfiniteScroll.vue

@@ -150,11 +150,11 @@ const props = defineProps({
   width: { type: [Number, String], required: false },
   tag: { type: String, required: false, default: "div" },
   direction: { type: null, required: false, default: DIRECTION.VERTICAL },
-  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(["load"]);
 defineSlots();

package/dist/src/components/InlineEdit/OrigamInlineEdit.vue

@@ -218,11 +218,11 @@ const props = defineProps({
   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" },
-  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 emit = defineEmits(["update:modelValue", "edit", "cancel", "confirm", "validate-error"]);
 defineSlots();

package/dist/src/components/Input/OrigamInput.vue

@@ -98,11 +98,16 @@ import { OrigamMessages } from "../../components/Messages";
 import { vContrast } from "../../directives";
 import {
   useAdjacent,
+  useBorder,
   useBothColor,
   useDefaults,
   useDensity,
   useDimension,
+  useElevation,
+  useMargin,
+  usePadding,
   useProps,
+  useRounded,
   useRtl,
   useSize,
   useStyle,
@@ -181,11 +186,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 }
 });
 const props = useDefaults(_props);
 defineEmits(["update:modelValue", "click:append", "click:prepend", "update:focused"]);
@@ -252,11 +257,21 @@ const { colorClasses, colorStyles } = useBothColor(toRef(props.bgColor), toRef(p
 const { rtlClasses } = useRtl();
 const { sizeClasses } = useSize(props, "origam-input");
 const { typographyStyles } = useTypography(props, "input");
+const { paddingClasses, paddingStyles } = usePadding(props);
+const { marginClasses, marginStyles } = useMargin(props);
+const { borderClasses, borderStyles } = useBorder(props);
+const { roundedClasses, roundedStyles } = useRounded(props);
+const { elevationClasses, elevationStyles } = useElevation(props);
 const inputStyles = computed(() => {
   return [
     dimensionStyles.value,
     colorStyles.value,
     typographyStyles.value,
+    borderStyles.value,
+    roundedStyles.value,
+    elevationStyles.value,
+    marginStyles.value,
+    paddingStyles.value,
     props.style
   ];
 });
@@ -273,6 +288,11 @@ const inputClasses = computed(() => {
     sizeClasses.value,
     validationClasses.value,
     rtlClasses.value,
+    borderClasses.value,
+    roundedClasses.value,
+    elevationClasses.value,
+    paddingClasses.value,
+    marginClasses.value,
     props.class
   ];
 });

package/dist/src/components/ItemGroup/OrigamItemGroup.vue

@@ -18,10 +18,12 @@ import { computed, StyleValue } from "vue";
 import { OrigamDefaultsProvider } from "../../components";
 import {
   useGroup,
+  usePassedProps,
   useProps,
   useStyle
 } from "../../composables";
 import { ORIGAM_ITEM_GROUP_KEY } from "../../consts";
+import { omitUndefined } from "../../utils";
 const props = defineProps({
   tag: { type: String, required: false, default: "div" },
   id: { type: String, required: false },
@@ -38,10 +40,11 @@ defineEmits(["update:modelValue"]);
 defineSlots();
 const { filterProps } = useProps(props);
 const { isSelected, select, next, prev, selected } = useGroup(props, ORIGAM_ITEM_GROUP_KEY);
+const wasPropPassed = usePassedProps(props);
 const slotDefaults = computed(() => ({
-  "origam-item": {
-    selectedClass: props.selectedClass
-  }
+  "origam-item": omitUndefined({
+    selectedClass: wasPropPassed("selectedClass") ? props.selectedClass : void 0
+  })
 }));
 const slotProps = computed(() => ({
   isSelected,

package/dist/src/components/Kbd/OrigamKbd.vue

@@ -31,6 +31,7 @@ import { vContrast } from "../../directives";
 import {
   useBorder,
   useBothColor,
+  useDefaults,
   useProps,
   useRounded,
   useSize,
@@ -42,7 +43,7 @@ const _props = defineProps({
   text: { type: String, required: false },
   combination: { type: Array, required: false },
   separator: { type: String, required: false, default: "+" },
-  variant: { type: String, required: false, default: "outlined" },
+  variant: { type: null, required: false, default: "outlined" },
   id: { type: String, required: false },
   class: { type: [String, Array, Object], required: false },
   style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
@@ -67,13 +68,13 @@ 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 }
 });
-const props = _props;
+const props = useDefaults(_props);
 const { filterProps } = useProps(props);
 defineSlots();
 const { sizeClasses, sizeStyles } = useSize(props);

package/dist/src/components/Label/OrigamLabel.vue

@@ -71,11 +71,11 @@ const _props = defineProps({
   color: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   tag: { type: String, required: false, default: "label" },
-  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);
 const emits = defineEmits(["click"]);

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

@@ -99,12 +99,13 @@ import {
   useMargin,
   useNested,
   usePadding,
+  usePassedProps,
   useProps,
   useRounded,
   useStyle
 } from "../../composables";
 import { DENSITY, KEYBOARD_VALUES, LINES, OPEN_STRATEGY, SELECT_STRATEGY } from "../../enums";
-import { deepEqual, focusChild } from "../../utils";
+import { deepEqual, focusChild, omitUndefined } from "../../utils";
 const props = defineProps({
   activeClass: { type: String, required: false },
   disabled: { type: Boolean, required: false },
@@ -177,13 +178,14 @@ const props = defineProps({
 defineEmits(["update:selected", "update:opened", "click:open", "click:select"]);
 defineSlots();
 const { filterProps } = useProps(props);
+const wasPropPassed = usePassedProps(props);
 const slotDefaults = computed(() => ({
-  "origam-list-item": {
-    density: props.density,
-    size: props.size,
-    color: props.color,
-    bgColor: props.bgColor
-  }
+  "origam-list-item": omitUndefined({
+    density: wasPropPassed("density") ? props.density : void 0,
+    size: wasPropPassed("size") ? props.size : void 0,
+    color: wasPropPassed("color") ? props.color : void 0,
+    bgColor: wasPropPassed("bgColor") ? props.bgColor : void 0
+  })
 }));
 const { items } = useItems(props);
 const { colorClasses, colorStyles } = useBothColor(toRef(props, "bgColor"), toRef(props, "color"));

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

@@ -50,12 +50,14 @@ import {
   useHover,
   useList,
   useNestedItem,
+  usePassedProps,
   useProps,
   useSsrBoot,
   useStateEffect,
   useStyle
 } from "../../composables";
 import { vContrast } from "../../directives";
+import { omitUndefined } from "../../utils";
 import { MDI_ICONS } from "../../enums";
 const props = defineProps({
   collapseIcon: { type: null, required: false, default: MDI_ICONS.CHEVRON_UP },
@@ -123,11 +125,12 @@ const {
   marginStyles
 } = useStateEffect(props, isHover, void 0, hoverState, void 0);
 const { filterProps } = useProps(props);
+const wasPropPassed = usePassedProps(props);
 const slotDefaults = computed(() => ({
-  "origam-list-item": {
-    color: props.color,
-    bgColor: props.bgColor
-  }
+  "origam-list-item": omitUndefined({
+    color: wasPropPassed("color") ? props.color : void 0,
+    bgColor: wasPropPassed("bgColor") ? props.bgColor : void 0
+  })
 }));
 const { colorClasses, colorStyles } = useBothColor(toRef(props, "bgColor"), toRef(props, "color"));
 const { isOpen, open, id: _id } = useNestedItem(toRef(props, "value"), true);

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

@@ -200,11 +200,11 @@ 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);
 const emits = defineEmits(["click", "click:append", "click:prepend"]);

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

@@ -74,11 +74,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 }
 });
 defineSlots();
 const { filterProps } = useProps(props);

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

@@ -46,15 +46,17 @@ import {
   useMasonry,
   usePadding,
   useProps,
-  useRounded
+  useRounded,
+  useTheme
 } from "../../composables";
 import { GRID_GAP_SIZE_VAR } from "../../consts";
+import { MASONRY_ALIGN } from "../../enums";
 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 },
@@ -107,7 +109,7 @@ 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

@@ -137,7 +137,6 @@
 						:items="configMenuItems"
 						:item-children="'children'"
 						data-cy="origam-media-controller-config"
-						@select="onConfigSelect"
 				>
 					<template #activator="{ props: activatorProps }">
 						<origam-btn
@@ -377,10 +376,6 @@ function onConfigSelect(item) {
     configMenuOpen.value = false;
     return;
   }
-  if (item.key === "download") {
-    emit("download");
-    configMenuOpen.value = false;
-  }
 }
 function handleDownloadClick(event) {
   emit("download");

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
@@ -67,6 +68,8 @@ import {
   useBackgroundColor,
   useRounded
 } from "../../composables";
+import { MEDIA_SCRUBBER_MIN_RANGE } from "../../consts";
+import { DIRECTION } from "../../enums";
 const props = defineProps({
   modelValue: { type: Number, required: true },
   min: { type: Number, required: false, default: 0 },
@@ -94,12 +97,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 +111,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 +119,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 +130,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 +205,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 +222,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 +245,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