origam 2.2.1 → 2.5.0

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

@@ -8,7 +8,7 @@
 				:class="messagesClasses"
 				:style="messagesStyles"
 				aria-live="polite"
-				role="alert"
+				role="status"
 		>
 			<template
 					v-for="(message, index) in messages"
@@ -56,7 +56,7 @@ const _props = defineProps({
   tag: { type: String, required: false, default: "div" },
   transition: { type: [Boolean, String, Object], required: false, default: () => ({ component: OrigamSlideY }) },
   disabled: { type: Boolean, required: false },
-  color: { type: [String, Boolean, null], required: false, skipCheck: true },
+  color: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   border: { type: [Boolean, Number, String, Array], required: false, skipCheck: true },
   borderTop: { type: [Boolean, Number, String], required: false },
   borderLeft: { type: [Boolean, Number, String], required: false },

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

@@ -274,11 +274,6 @@ const props = defineProps({
   split: { type: Boolean, required: false, default: false },
   hideControls: { type: Boolean, required: false },
   compact: { type: Boolean, required: false, default: false },
-  id: { type: String, required: false },
-  class: { type: [String, Array, Object], required: false },
-  style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
-  color: { type: [String, Boolean, null], required: false, skipCheck: true },
-  density: { type: null, required: false },
   centerAffix: { type: Boolean, required: false, default: true },
   dirty: { type: Boolean, required: false },
   disabled: { type: Boolean, required: false },
@@ -292,10 +287,14 @@ const props = defineProps({
   reverse: { type: Boolean, required: false },
   singleLine: { type: Boolean, required: false },
   required: { type: Boolean, required: false },
+  id: { type: String, required: false },
+  class: { type: [String, Array, Object], required: false },
+  style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
   loading: { type: [Boolean, Number, Object], required: false },
   loadingText: { type: String, required: false },
   tag: { type: String, required: false },
-  bgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
+  color: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   appendInnerAvatar: { type: String, required: false },
   appendInnerIcon: { type: null, required: false },
   prependInnerAvatar: { type: String, required: false },
@@ -303,6 +302,7 @@ const props = defineProps({
   clearIcon: { type: null, required: false },
   clearable: { type: Boolean, required: false },
   focused: { type: Boolean, required: false },
+  density: { type: null, required: false },
   text: { type: String, required: false },
   floating: { type: Boolean, required: false },
   name: { type: String, required: false },

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

@@ -0,0 +1,97 @@
+<template>
+	<component
+			:is="tag"
+			class="origam-number-format"
+			:class="rootClasses"
+			:style="rootStyles"
+			:aria-label="ariaLabel"
+			data-cy="origam-number-format"
+	>
+		<slot
+				:formatted="formatted"
+				:parts="parts"
+				:value="numericValue"
+		>{{ formatted }}</slot>
+	</component>
+</template>
+
+<script setup>
+import {
+  computed
+} from "vue";
+import { useNumberFormat } from "../../composables";
+const props = defineProps({
+  value: { type: [Number, String], required: true },
+  format: { type: String, 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" },
+  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" },
+  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" },
+  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" }
+});
+const resolvedOptions = computed(() => ({
+  format: props.format,
+  locale: props.locale,
+  currency: props.currency,
+  currencyDisplay: props.currencyDisplay,
+  unit: props.unit,
+  unitDisplay: props.unitDisplay,
+  notation: props.notation,
+  compactDisplay: props.compactDisplay,
+  minimumFractionDigits: props.minimumFractionDigits,
+  maximumFractionDigits: props.maximumFractionDigits,
+  minimumSignificantDigits: props.minimumSignificantDigits,
+  maximumSignificantDigits: props.maximumSignificantDigits,
+  useGrouping: props.useGrouping,
+  signDisplay: props.signDisplay
+}));
+const { format, formatToParts } = useNumberFormat(resolvedOptions);
+const numericValue = computed(() => {
+  if (typeof props.value === "number") return props.value;
+  const parsed = Number(props.value);
+  return Number.isFinite(parsed) ? parsed : 0;
+});
+const formatted = computed(() => format(props.value));
+const parts = computed(() => formatToParts(props.value));
+const ariaLabel = computed(() => {
+  const useCompact = props.format === "compact" || props.notation === "compact";
+  if (!useCompact) return void 0;
+  try {
+    const longIntl = new Intl.NumberFormat(
+      props.locale === "auto" || !props.locale ? typeof navigator !== "undefined" ? navigator.language : "en-US" : props.locale,
+      { notation: "compact", compactDisplay: "long" }
+    );
+    return longIntl.format(numericValue.value);
+  } catch {
+    return void 0;
+  }
+});
+const rootClasses = computed(() => [
+  `origam-number-format--${props.format}`,
+  props.class
+]);
+const rootStyles = computed(() => [props.style]);
+defineExpose({
+  formatted,
+  parts,
+  value: numericValue
+});
+</script>
+
+<style lang="scss" scoped>
+	.origam-number-format {
+		font-variant-numeric: tabular-nums;
+	}
+</style>

package/dist/src/components/NumberFormat/index.cjs

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "OrigamNumberFormat", {
+  enumerable: true,
+  get: function () {
+    return _OrigamNumberFormat.default;
+  }
+});
+var _OrigamNumberFormat = _interopRequireDefault(require("./OrigamNumberFormat.vue"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/dist/src/components/NumberFormat/index.d.ts

@@ -0,0 +1 @@
+export { default as OrigamNumberFormat } from './OrigamNumberFormat.vue';

package/dist/src/components/NumberFormat/index.js

@@ -0,0 +1 @@
+export { default as OrigamNumberFormat } from "./OrigamNumberFormat.vue";

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

@@ -144,17 +144,6 @@ const props = defineProps({
   persistentPlaceholder: { type: Boolean, required: false },
   role: { type: String, required: false },
   type: { type: null, required: false, default: OTP_INPUT_FIELD_TYPE.NUMBER },
-  id: { type: String, required: false },
-  class: { type: [String, Array, Object], required: false },
-  style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
-  color: { type: [String, Boolean, null], required: false, skipCheck: true },
-  density: { type: null, required: false },
-  height: { type: [Number, String], required: false },
-  maxHeight: { type: [Number, String], required: false },
-  maxWidth: { type: [Number, String], required: false },
-  minHeight: { type: [Number, String], required: false },
-  minWidth: { type: [Number, String], required: false },
-  width: { type: [Number, String], required: false },
   centerAffix: { type: Boolean, required: false },
   dirty: { type: Boolean, required: false },
   disabled: { type: Boolean, required: false },
@@ -168,10 +157,14 @@ const props = defineProps({
   reverse: { type: Boolean, required: false },
   singleLine: { type: Boolean, required: false },
   required: { type: Boolean, required: false },
+  id: { type: String, required: false },
+  class: { type: [String, Array, Object], required: false },
+  style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
   loading: { type: [Boolean, Number, Object], required: false },
   loadingText: { type: String, required: false },
   tag: { type: String, required: false },
-  bgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
+  color: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   appendInnerAvatar: { type: String, required: false },
   appendInnerIcon: { type: null, required: false },
   prependInnerAvatar: { type: String, required: false },
@@ -179,6 +172,7 @@ const props = defineProps({
   clearIcon: { type: null, required: false },
   clearable: { type: Boolean, required: false },
   focused: { type: Boolean, required: false },
+  density: { type: null, required: false },
   text: { type: String, required: false },
   floating: { type: Boolean, required: false },
   name: { type: String, required: false },
@@ -220,6 +214,12 @@ const props = defineProps({
   hint: { type: String, required: false },
   persistentHint: { type: Boolean, required: false },
   messages: { type: [Array, String], required: false },
+  height: { type: [Number, String], required: false },
+  maxHeight: { type: [Number, String], required: false },
+  maxWidth: { type: [Number, String], required: false },
+  minHeight: { type: [Number, String], required: false },
+  minWidth: { type: [Number, String], required: false },
+  width: { type: [Number, String], required: false },
   direction: { type: null, required: false },
   errorMessages: { type: [Array, String], required: false },
   maxErrors: { type: [Number, String], required: false },

package/dist/src/components/Overlay/OrigamOverlay.vue

@@ -114,7 +114,7 @@ const props = defineProps({
   transition: { type: [Boolean, String, Object], required: false, default: () => ({ component: OrigamFade }) },
   scrim: { type: [Boolean, String], required: false, default: true }
 });
-const emits = defineEmits(["click:outside", "update:modelValue", "afterEnter", "afterLeave", "keydown"]);
+const emits = defineEmits(["afterEnter", "afterLeave", "keydown", "update:modelValue", "click:outside"]);
 const { filterProps } = useProps(props);
 const model = useVModel(props, "modelValue");
 const isActive = computed({

package/dist/src/components/Overlay/OrigamOverlayScrim.vue

@@ -4,6 +4,7 @@
 				v-if="active"
 				:class="scrimClasses"
 				:style="scrimStyles"
+				aria-hidden="true"
 				v-bind="$attrs"
 				@click="handleClick"
 				@mouseenter="handleMouseenter"
@@ -30,7 +31,7 @@ const props = defineProps({
   disabled: { type: Boolean, required: false },
   scrim: { type: [Boolean, String], required: false }
 });
-const emits = defineEmits(["click", "mouseenter", "mouseleave"]);
+const emits = defineEmits(["mouseenter", "mouseleave", "click"]);
 const { filterProps } = useProps(props);
 const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(computed(() => {
   return typeof props.scrim === "string" ? props.scrim : null;

package/dist/src/components/Pagination/OrigamPagination.vue

@@ -211,8 +211,8 @@ 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: "div" },
-  color: { type: [String, Boolean, null], required: false, skipCheck: true },
-  bgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
+  color: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   border: { type: [Boolean, Number, String, Array], required: false, skipCheck: true },
   borderTop: { type: [Boolean, Number, String], required: false },
   borderLeft: { type: [Boolean, Number, String], required: false },
@@ -240,13 +240,7 @@ const props = defineProps({
   size: { type: null, required: false },
   density: { type: null, required: false }
 });
-const emits = defineEmits([
-  "update:modelValue",
-  "first",
-  "next",
-  "prev",
-  "last"
-]);
+const emits = defineEmits(["first", "prev", "next", "last", "update:modelValue"]);
 const { filterProps } = useProps(props);
 const { t } = useLocale();
 const page = useVModel(props, "modelValue", props.start);
@@ -378,7 +372,7 @@ const items = computed(() => {
           // behaviour the user expects from a uniform row
           // of nav buttons.
           active: isActive,
-          "aria-current": isActive,
+          "aria-current": isActive ? "page" : void 0,
           "aria-label": t(isActive ? props.currentPageAriaLabel : props.pageAriaLabel, item),
           onClick: (e) => setValue(e, item)
         }

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

@@ -31,27 +31,32 @@ import {
   useElevation,
   useMargin,
   usePadding,
+  useParallaxRuntime,
   useProps,
   useRounded,
   useStyle,
   useThrottleFn
 } from "../../composables";
-import { ORIGAM_PARALLAX_KEY } from "../../consts";
-import { PARALLAX_EVENT } from "../../enums";
+import { ORIGAM_PARALLAX_KEY, ORIGAM_PARALLAX_LAYER_KEY } from "../../consts";
+import { PARALLAX_DIRECTION, PARALLAX_EASING, PARALLAX_EVENT } from "../../enums";
 import { getCenter, getTargetBox, inViewport } from "../../utils";
 const props = defineProps({
   animationDuration: { type: Number, required: false },
-  easing: { type: String, required: false, default: "cubic-bezier(0.23, 1, 0.32, 1)" },
+  easing: { type: null, required: false, default: PARALLAX_EASING.LINEAR },
   perspective: { type: Number, required: false, default: 1e3 },
   event: { type: null, required: false, default: PARALLAX_EVENT.MOVE },
   active: { type: Boolean, required: false, default: true },
   duration: { type: Number, required: false, default: 1e3 },
+  direction: { type: null, required: false, default: PARALLAX_DIRECTION.VERTICAL },
+  speed: { type: Number, required: false, default: 0.5 },
+  disabled: { type: Boolean, required: false, default: false },
+  threshold: { type: Number, required: false, default: 0 },
   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: "div" },
-  color: { type: [String, Boolean, null], required: false, skipCheck: true },
-  bgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
+  color: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   padding: { type: [Boolean, Number, String], required: false },
   paddingTop: { type: [Boolean, Number, String], required: false },
   paddingLeft: { type: [Boolean, Number, String], required: false },
@@ -87,9 +92,38 @@ const props = defineProps({
   minHeight: { type: [Number, String], required: false },
   minWidth: { type: [Number, String], required: false },
   width: { type: [Number, String], required: false },
-  audio: { type: String, required: false },
-  playAudio: { type: Boolean, required: false }
+  variant: { type: null, required: false },
+  coverPosition: { type: null, required: false },
+  src: { type: [String, Object, Array], required: true },
+  tracks: { type: Array, required: false },
+  title: { type: String, required: false },
+  artist: { type: String, required: false },
+  album: { type: String, required: false },
+  cover: { type: [String, Object], required: false },
+  waveform: { type: [Boolean, String], required: false },
+  waveformColor: { type: String, required: false },
+  autoplay: { type: Boolean, required: false },
+  muted: { type: Boolean, required: false },
+  loop: { type: Boolean, required: false },
+  loopMode: { type: null, required: false },
+  shuffle: { type: Boolean, required: false },
+  playlist: { type: Array, required: false },
+  currentTrackIndex: { type: Number, required: false },
+  preload: { type: String, required: false },
+  crossorigin: { type: String, required: false },
+  controls: { type: String, required: false },
+  playbackRates: { type: Array, required: false },
+  playbackRate: { type: Number, required: false },
+  allowRemotePlayback: { type: Boolean, required: false },
+  downloadable: { type: Boolean, required: false },
+  downloadFilename: { type: String, required: false },
+  position: { type: null, required: false },
+  top: { type: [Number, String], required: false },
+  bottom: { type: [Number, String], required: false },
+  left: { type: [Number, String], required: false },
+  right: { type: [Number, String], required: false }
 });
+const emit = defineEmits(["enter", "leave", "scroll-progress"]);
 const { filterProps } = useProps(props);
 const { audioRef, audioData, onStop: handleStop } = useAudio(props);
 const { platform } = useDisplay();
@@ -104,14 +138,9 @@ const root = ref();
 const isMoving = ref(false);
 const leftOnce = ref(false);
 const shape = ref(null);
-const movement = ref({
-  x: 0,
-  y: 0
-});
+const movement = ref({ x: 0, y: 0 });
 const data = ref();
-const isTouch = computed(() => {
-  return platform.value.touch;
-});
+const isTouch = computed(() => platform.value.touch);
 const eventActions = computed(() => {
   return {
     move: {
@@ -144,11 +173,9 @@ const mouseMovement = ({ target, event }) => {
   const relativeX = x - target.left;
   const relativeY = y - target.top;
   const center = getCenter(target);
-  const mouseMovementX = relativeX / center.x;
-  const mouseMovementY = relativeY / center.y;
   return {
-    x: mouseMovementX,
-    y: mouseMovementY,
+    x: relativeX / center.x,
+    y: relativeY / center.y,
     target
   };
 };
@@ -158,11 +185,9 @@ const scrollMovement = ({ target }) => {
   const relativeX = x - target.left;
   const relativeY = y - target.top;
   const center = getCenter(target);
-  const mouseMovementX = relativeX / center.x;
-  const mouseMovementY = relativeY / center.y;
   return {
-    x: mouseMovementX,
-    y: mouseMovementY,
+    x: relativeX / center.x,
+    y: relativeY / center.y,
     target
   };
 };
@@ -181,10 +206,7 @@ const handleMovement = useThrottleFn((event) => {
   const condition = eventActions.value[props.event].condition;
   const action = eventActions.value[props.event].action;
   if (isInViewport && condition) {
-    movement.value = action({
-      target: shape.value,
-      event
-    });
+    movement.value = action({ target: shape.value, event });
     data.value = { x: event.clientX, y: event.clientY };
   }
 }, 100);
@@ -207,12 +229,8 @@ const handleMovementStop = () => {
   leftOnce.value = true;
   isMoving.value = false;
 };
-onMounted(() => {
-  addEvents();
-});
-onBeforeUnmount(() => {
-  removeEvents();
-});
+onMounted(() => addEvents());
+onBeforeUnmount(() => removeEvents());
 watch(() => props.event, (newEvent, oldEvent) => {
   if (newEvent === oldEvent) return;
   removeEvents(oldEvent);
@@ -240,6 +258,35 @@ provide(ORIGAM_PARALLAX_KEY, {
   easing: toRef(props, "easing"),
   shape
 });
+const {
+  progress,
+  mouseRatio,
+  cssScrollDriven,
+  reducedMotion,
+  register,
+  unregister
+} = useParallaxRuntime({
+  target: root,
+  direction: toRef(props, "direction"),
+  easing: toRef(props, "easing"),
+  threshold: toRef(props, "threshold"),
+  disabled: toRef(props, "disabled"),
+  speed: toRef(props, "speed"),
+  onEnter: () => emit("enter"),
+  onLeave: () => emit("leave"),
+  onProgress: (p) => emit("scroll-progress", p)
+});
+provide(ORIGAM_PARALLAX_LAYER_KEY, {
+  direction: toRef(props, "direction"),
+  easing: toRef(props, "easing"),
+  disabled: toRef(props, "disabled"),
+  progress,
+  mouseRatio,
+  cssScrollDriven,
+  reducedMotion,
+  register,
+  unregister
+});
 const parallaxStyles = computed(() => {
   return [
     dimensionStyles.value,
@@ -248,11 +295,6 @@ const parallaxStyles = computed(() => {
     roundedStyles.value,
     paddingStyles.value,
     marginStyles.value,
-    // Forward `perspective` as a component-scoped CSS variable so
-    // the SCSS owns the actual `perspective:` declaration. Lets the
-    // design-token layer override the default per-theme without
-    // touching the JS, and keeps the Style-Dictionary chromique
-    // pattern consistent across components.
     {
       "--origam-parallax---perspective": `${props.perspective}px`
     },
@@ -262,6 +304,12 @@ const parallaxStyles = computed(() => {
 const parallaxClasses = computed(() => {
   return [
     "origam-parallax",
+    {
+      "origam-parallax--disabled": props.disabled,
+      "origam-parallax--reduced-motion": reducedMotion.value,
+      "origam-parallax--css-driven": cssScrollDriven.value,
+      [`origam-parallax--${props.direction}`]: !!props.direction
+    },
     colorClasses.value,
     borderClasses.value,
     roundedClasses.value,
@@ -278,7 +326,10 @@ defineExpose({
   id,
   load,
   unload,
-  isLoaded
+  isLoaded,
+  progress,
+  cssScrollDriven,
+  reducedMotion
 });
 </script>
 
@@ -299,4 +350,12 @@ defineExpose({
 		background-color: var(--origam-parallax---background-color, transparent);
 		color: var(--origam-parallax---color, inherit);
 	}
+
+	.origam-parallax--disabled,
+	.origam-parallax--reduced-motion {
+		:deep(.origam-parallax__layer) {
+			animation: none !important;
+			transition: none !important;
+		}
+	}
 </style>

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

@@ -0,0 +1,119 @@
+<template>
+	<component
+			:is="tag"
+			ref="layerRef"
+			:class="layerClasses"
+			:style="layerStyles"
+	>
+		<slot name="default"/>
+	</component>
+</template>
+
+<script setup>
+import { computed, inject, onBeforeUnmount, onMounted, ref, StyleValue } from "vue";
+import { useProps } from "../../composables";
+import { ORIGAM_PARALLAX_LAYER_KEY } from "../../consts";
+const props = defineProps({
+  speed: { type: Number, required: false, default: 1 },
+  offsetX: { type: Number, required: false, default: 0 },
+  offsetY: { type: Number, required: false, default: 0 },
+  zIndex: { type: Number, required: false },
+  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: "div" }
+});
+const { filterProps } = useProps(props);
+const parallax = inject(ORIGAM_PARALLAX_LAYER_KEY);
+if (!parallax) {
+  throw new Error("[Origam] OrigamParallaxLayer must be nested inside OrigamParallax (use direction/easing/disabled props on the host).");
+}
+const layerRef = ref();
+const id = Symbol("origam:parallax-layer");
+onMounted(() => {
+  if (!layerRef.value) return;
+  const registry = {
+    id,
+    speed: props.speed ?? 1,
+    offsetX: props.offsetX ?? 0,
+    offsetY: props.offsetY ?? 0,
+    target: layerRef.value
+  };
+  parallax.register(registry);
+});
+onBeforeUnmount(() => {
+  parallax.unregister(id);
+});
+const layerStyles = computed(() => {
+  const styles = {
+    willChange: "var(--origam-parallax__layer---will-change, transform)",
+    transformOrigin: "var(--origam-parallax__layer---transform-origin, center center)"
+  };
+  if (props.zIndex !== void 0) {
+    styles.zIndex = String(props.zIndex);
+  }
+  styles.transform = `translate3d(${props.offsetX ?? 0}px, ${props.offsetY ?? 0}px, 0)`;
+  return [styles, props.style];
+});
+const layerClasses = computed(() => {
+  return [
+    "origam-parallax__layer",
+    {
+      "origam-parallax__layer--css-driven": parallax.cssScrollDriven.value,
+      "origam-parallax__layer--reduced-motion": parallax.reducedMotion.value
+    },
+    props.class
+  ];
+});
+defineExpose({ filterProps });
+</script>
+
+<style lang="scss" scoped>
+	.origam-parallax__layer {
+		position: absolute;
+		inset: 0;
+		display: block;
+		will-change: var(--origam-parallax__layer---will-change, transform);
+		transform-origin: var(--origam-parallax__layer---transform-origin, center center);
+	}
+
+	.origam-parallax__layer--reduced-motion {
+		transform: translate3d(
+			var(--origam-parallax__layer---offset-x, 0),
+			var(--origam-parallax__layer---offset-y, 0),
+			0
+		) !important;
+	}
+
+	@supports (animation-timeline: scroll()) {
+		.origam-parallax__layer--css-driven {
+			animation: origam-parallax-layer linear both;
+			animation-timeline: view();
+			animation-range: cover 0% cover 100%;
+		}
+
+		@keyframes origam-parallax-layer {
+			from {
+				transform: translate3d(
+					calc(var(--origam-parallax__layer---offset-x, 0px) + var(--origam-parallax__layer---speed, 1) * -50%),
+					calc(var(--origam-parallax__layer---offset-y, 0px) + var(--origam-parallax__layer---speed, 1) * -50%),
+					0
+				);
+			}
+			to {
+				transform: translate3d(
+					calc(var(--origam-parallax__layer---offset-x, 0px) + var(--origam-parallax__layer---speed, 1) * 50%),
+					calc(var(--origam-parallax__layer---offset-y, 0px) + var(--origam-parallax__layer---speed, 1) * 50%),
+					0
+				);
+			}
+		}
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.origam-parallax__layer {
+			animation: none !important;
+			transition: none !important;
+		}
+	}
+</style>

package/dist/src/components/Parallax/index.cjs

@@ -15,6 +15,13 @@ Object.defineProperty(exports, "OrigamParallaxElement", {
     return _OrigamParallaxElement.default;
   }
 });
+Object.defineProperty(exports, "OrigamParallaxLayer", {
+  enumerable: true,
+  get: function () {
+    return _OrigamParallaxLayer.default;
+  }
+});
 var _OrigamParallaxElement = _interopRequireDefault(require("./OrigamParallaxElement.vue"));
+var _OrigamParallaxLayer = _interopRequireDefault(require("./OrigamParallaxLayer.vue"));
 var _OrigamParallax = _interopRequireDefault(require("./OrigamParallax.vue"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/dist/src/components/Parallax/index.d.ts

@@ -1,2 +1,3 @@
 export { default as OrigamParallaxElement } from './OrigamParallaxElement.vue';
+export { default as OrigamParallaxLayer } from './OrigamParallaxLayer.vue';
 export { default as OrigamParallax } from './OrigamParallax.vue';

package/dist/src/components/Parallax/index.js

@@ -1,2 +1,3 @@
 export { default as OrigamParallaxElement } from "./OrigamParallaxElement.vue";
+export { default as OrigamParallaxLayer } from "./OrigamParallaxLayer.vue";
 export { default as OrigamParallax } from "./OrigamParallax.vue";