origam 2.15.0 → 2.17.0

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

@@ -1,9 +1,10 @@
 <template>
 	<origam-input
 			v-if="compact"
+			:id="id"
 			ref="origamCompactInputRef"
 			v-model="model"
-			:validation-value="model"
+			:validation-value="effectiveValidationValue"
 			:focused="isFocused"
 			:rules="rules"
 			:error="error"
@@ -28,15 +29,22 @@
 						:disabled="!canDecrease"
 						size="small"
 						data-cy="numberfield-compact-decrement"
-						aria-label="Decrement"
+						:aria-label="t(decrementAriaLabel)"
 						@click="handleCompactDecrement"
 				/>
 				<input
+						:id="id"
 						v-model="compactInputText"
 						type="text"
 						inputmode="numeric"
+						role="spinbutton"
 						class="origam-number-field__compact-input"
 						:aria-label="label"
+						:aria-valuenow="model ?? undefined"
+						:aria-valuemin="min"
+						:aria-valuemax="max"
+						:aria-valuetext="compactInputText || undefined"
+						:aria-required="required ? 'true' : undefined"
 						data-cy="numberfield-compact-input"
 						@blur="handleBlur"
 						@focus="handleFocus"
@@ -48,7 +56,7 @@
 						:disabled="!canIncrease"
 						size="small"
 						data-cy="numberfield-compact-increment"
-						aria-label="Increment"
+						:aria-label="t(incrementAriaLabel)"
 						@click="handleCompactIncrement"
 				/>
 			</div>
@@ -56,12 +64,17 @@
 	</origam-input>
 	<origam-text-field
 			v-else
+			:id="id"
 			ref="origamTextFieldRef"
 			v-model:model-value="inputText"
 			:class="numberFieldClasses"
 			:style="numberFieldStyles"
-			:validation-value="model"
+			:validation-value="effectiveValidationValue"
 			inputmode="decimal"
+			:aria-valuenow="model ?? undefined"
+			:aria-valuemin="min"
+			:aria-valuemax="max"
+			:aria-valuetext="inputText || undefined"
 			v-bind="textFieldProps"
 			@beforeinput="handleBeforeInput"
 			@blur="handleBlur"
@@ -70,6 +83,8 @@
 			@keydown="handleKeydown"
 			@mousedown="handleMousedown"
 			@click:clear="handleClear"
+			@click:prepend="handleClickPrepend"
+			@click:append="handleClickAppend"
 			@click:prepend-inner="handleClickPrependInner"
 			@click:append-inner="handleClickAppendInner"
 	>
@@ -267,12 +282,26 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, nextTick, onMounted, ref, shallowRef, StyleValue, useSlots, watch } from "vue";
-import { OrigamBtn, OrigamDivider, OrigamInput, OrigamTextField } from "../../components";
-import { useAdjacentInner, useDefaults, useFocus, useHold, useProps, useVModel, useStyle } from "../../composables";
-import { DIRECTION, MDI_ICONS, TEXT_FIELD_TYPE } from "../../enums";
-import { clamp, forwardRefs } from "../../utils";
-const _props = defineProps({
+import { computed, getCurrentInstance, nextTick, onMounted, ref, shallowRef, StyleValue, useSlots, watch, watchEffect } from "vue";
+import OrigamBtn from "../Btn/OrigamBtn.vue";
+import OrigamDivider from "../Divider/OrigamDivider.vue";
+import OrigamInput from "../Input/OrigamInput.vue";
+import OrigamTextField from "../TextField/OrigamTextField.vue";
+import { useAdjacent } from "../../composables/Commons/adjacent.composable";
+import { useAdjacentInner } from "../../composables/Commons/adjacentInner.composable";
+import { useFocus } from "../../composables/Commons/focus.composable";
+import { useHold } from "../../composables/NumberField/hold.composable";
+import { useLocale } from "../../composables/Commons/locale.composable";
+import { useProps } from "../../composables/Commons/props.composable";
+import { useVModel } from "../../composables/Commons/vModel.composable";
+import { useStyle } from "../../composables/Commons/style.composable";
+import { UNSEEDED } from "../../consts/Commons/vmodel.const";
+import { DIRECTION } from "../../enums/Commons/direction.enum";
+import { MDI_ICONS } from "../../enums/Commons/mdi.enum";
+import { TEXT_FIELD_TYPE } from "../../enums/TextField/text-field.enum";
+import { clamp } from "../../utils/Commons/commons.util";
+import { forwardRefs } from "../../utils/Commons/forwardRefs.util";
+const props = defineProps({
   autofocus: { type: Boolean, required: false },
   placeholder: { type: String, required: false },
   persistentPlaceholder: { type: Boolean, required: false },
@@ -292,21 +321,19 @@ const _props = defineProps({
   split: { type: Boolean, required: false, default: false },
   hideControls: { type: Boolean, required: false },
   compact: { type: Boolean, required: false, default: false },
+  decrementAriaLabel: { type: String, required: false, default: "origam.number_field.aria_label.decrement" },
+  incrementAriaLabel: { type: String, required: false, default: "origam.number_field.aria_label.increment" },
   centerAffix: { type: Boolean, required: false, default: true },
   dirty: { type: Boolean, required: false },
   disabled: { type: Boolean, required: false },
   error: { type: [String, Boolean], required: false },
-  flat: { type: Boolean, required: false },
   inline: { type: Boolean, required: false },
   label: { type: String, required: false },
   prefix: { type: String, required: false },
   suffix: { type: String, required: false },
   persistentClear: { type: Boolean, required: false },
-  reverse: { type: Boolean, required: false },
   singleLine: { type: Boolean, required: false },
   required: { type: Boolean, required: false },
-  activeColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
-  activeBgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   id: { type: String, required: false },
   class: { type: [String, Array, Object], required: false },
   style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
@@ -358,11 +385,10 @@ 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 },
+  letterSpacing: { type: null, required: false },
   active: { type: [Boolean, Object], required: false },
   activeClass: { type: String, required: false },
   variant: { type: null, required: false },
@@ -391,10 +417,11 @@ const _props = defineProps({
   prependAvatar: { type: String, required: false },
   prependIcon: { type: null, required: false }
 });
-const props = useDefaults(_props);
-const emits = defineEmits(["click:control", "mousedown:control", "click:clear", "increment", "decrement", "update:focused", "update:modelValue", "click:appendInner", "click:prependInner", "update:active", "click:append", "click:prepend"]);
+const emits = defineEmits(["click:control", "mousedown:control", "click:clear", "increment", "decrement", "update:focused", "click:appendInner", "click:prependInner", "update:modelValue", "click:append", "click:prepend"]);
 defineSlots();
 const { filterProps } = useProps(props);
+const { t } = useLocale();
+const vm = getCurrentInstance();
 const slots = useSlots();
 const origamTextFieldRef = ref();
 const origamCompactInputRef = ref();
@@ -406,18 +433,37 @@ const model = useVModel(
   (val) => val ?? null,
   (val) => val == null ? val ?? null : clamp(Number(val), props.min, props.max)
 );
+const effectiveValidationValue = computed(() => {
+  return props.validationValue === void 0 ? model.value : props.validationValue;
+});
 const { isFocused, onFocus, onBlur } = useFocus(props);
 const {
   onClickPrependInner: handleClickPrependInner,
   onClickAppendInner: handleClickAppendInner
 } = useAdjacentInner(props);
+const {
+  onClickPrepend: handleClickPrepend,
+  onClickAppend: handleClickAppend
+} = useAdjacent(props);
 const correctPrecision = (val, precision = props.precision) => {
   const num = typeof val === "number" ? val : Number(val);
   if (Number.isNaN(num)) return String(val);
   const fixed = precision == null ? String(num) : num.toFixed(precision);
   return isFocused.value ? Number(fixed).toString() : fixed;
 };
-const _inputText = shallowRef(null);
+const _inputTextRaw = shallowRef(UNSEEDED);
+const seedInputText = () => {
+  const val = props.modelValue;
+  if (val == null) return null;
+  if (!isNaN(val)) return correctPrecision(val);
+  return null;
+};
+const _inputText = computed({
+  get: () => _inputTextRaw.value === UNSEEDED ? seedInputText() : _inputTextRaw.value,
+  set: (val) => {
+    _inputTextRaw.value = val;
+  }
+});
 watch(() => props.modelValue, (val) => {
   if (isFocused.value && !controlsDisabled.value) return;
   if (val == null) {
@@ -425,7 +471,7 @@ watch(() => props.modelValue, (val) => {
   } else if (!isNaN(val)) {
     _inputText.value = correctPrecision(val);
   }
-}, { immediate: true });
+});
 const inputText = computed({
   get: () => _inputText.value,
   set(val) {
@@ -450,6 +496,12 @@ watch(() => props.precision, () => formatInputValue());
 onMounted(() => {
   clampModel();
 });
+watchEffect(() => {
+  if (props.compact) return;
+  const root = vm?.proxy?.$el;
+  const input = root?.querySelector?.("input");
+  input?.setAttribute("role", "spinbutton");
+}, { flush: "post" });
 const inferPrecision = (value) => {
   if (value == null) return 0;
   const str = value.toString();
@@ -476,7 +528,7 @@ const toggleUpDown = (increment = true) => {
     }
   }
 };
-const { holdStart, holdStop } = useHold({ toggleUpDown }, props.holdRepeat, props.holdDelay);
+const { holdStart, holdStop } = useHold({ toggleUpDown }, () => props.holdRepeat, () => props.holdDelay);
 const handleBeforeInput = (e) => {
   if (!e.data) return;
   const existingTxt = e.target?.value;
@@ -599,8 +651,7 @@ const numberFieldClasses = computed(() => {
       "origam-number-field--hide-input": props.hideInput,
       "origam-number-field--inset": props.inset,
       "origam-number-field--split": props.split,
-      "origam-number-field--hide-controls": props.hideControls,
-      "origam-number-field--reverse": props.reverse
+      "origam-number-field--hide-controls": props.hideControls
     },
     props.class
   ];
@@ -639,7 +690,7 @@ const handleCompactIncrement = () => {
 const handleCompactDecrement = () => {
   toggleUpDown(false);
 };
-const { id, css, load, isLoaded, unload } = useStyle(numberFieldStyles);
+const { id, css, load, isLoaded, unload } = useStyle(numberFieldStyles, () => props.id);
 defineExpose(forwardRefs({
   filterProps,
   css,
@@ -692,6 +743,7 @@ defineExpose(forwardRefs({
 			.origam-btn {
 				background-color: var(--origam-number-field__control---background-color, transparent);
 				border-radius: var(--origam-number-field__control---border-radius, 0);
+				cursor: var(--origam-number-field__control---cursor, pointer);
 			}
 		}
 

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

@@ -1,6 +1,7 @@
 <template>
 	<component
 			:is="tag"
+			:id="id"
 			class="origam-number-format"
 			:class="rootClasses"
 			:style="rootStyles"
@@ -19,28 +20,29 @@
 import {
   computed
 } from "vue";
-import { useNumberFormat } from "../../composables";
+import { useNumberFormat } from "../../composables/NumberFormat/number-format.composable";
 const props = defineProps({
   value: { type: [Number, String], required: true },
-  format: { type: String, required: false, default: "decimal" },
+  format: { type: null, required: false, default: "decimal" },
   locale: { type: [String, Array], required: false, default: "auto" },
   currency: { type: String, required: false, default: void 0 },
-  currencyDisplay: { type: String, required: false, default: "symbol" },
+  currencyDisplay: { type: null, required: false, default: "symbol" },
   unit: { type: String, required: false, default: void 0 },
-  unitDisplay: { type: String, required: false, default: "short" },
-  notation: { type: String, required: false, default: void 0 },
-  compactDisplay: { type: String, required: false, default: "short" },
+  unitDisplay: { type: null, required: false, default: "short" },
+  notation: { type: null, required: false, default: void 0 },
+  compactDisplay: { type: null, required: false, default: "short" },
   minimumFractionDigits: { type: Number, required: false, default: void 0 },
   maximumFractionDigits: { type: Number, required: false, default: void 0 },
   minimumSignificantDigits: { type: Number, required: false, default: void 0 },
   maximumSignificantDigits: { type: Number, required: false, default: void 0 },
-  useGrouping: { type: [Boolean, String], required: false, default: true },
-  signDisplay: { type: String, required: false, default: "auto" },
+  useGrouping: { type: Boolean, required: false, skipCheck: true, default: true },
+  signDisplay: { type: null, required: false, default: "auto" },
   id: { type: String, required: false },
   class: { type: [String, Array, Object], required: false },
   style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
   tag: { type: String, required: false, default: "span" }
 });
+defineEmits([]);
 defineSlots();
 const resolvedOptions = computed(() => ({
   format: props.format,

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

@@ -1,13 +1,17 @@
 <template>
 	<div
+			:aria-label="label || undefined"
 			:class="otpInputFieldClasses"
 			:style="otpInputFieldStyles"
+			:role="role"
 			v-bind="{ ...rootAttrs }"
 	>
 		<div
 				ref="contentRef"
 				:style="dimensionStyles"
 				class="origam-otp-input-field__content"
+				@click="handleControlClick"
+				@mousedown="handleControlMousedown"
 		>
 			<template
 					v-for="(_, i) in fields"
@@ -23,6 +27,9 @@
 						ref="origamFieldRef"
 						:focused="(isFocused && focusAll) || focusIndex === i"
 						v-bind="{...fieldProps(i)}"
+						@click:clear="handleClear"
+						@click:append-inner="handleClickAppendInner"
+						@click:prepend-inner="handleClickPrependInner"
 				>
 					<template
 							v-if="slots.prependInner"
@@ -111,7 +118,7 @@
 					content-class="origam-otp-input-field__loader"
 					persistent
 			>
-				<template #loader>
+				<template #default>
 					<slot name="loader">
 						<origam-progress
 								:color="typeof loading === 'string' ? loading : undefined"
@@ -142,11 +149,24 @@
 
 <script lang="ts" setup>
 import { computed, nextTick, ref, StyleValue, useAttrs, useSlots, watch } from "vue";
-import { OrigamField, OrigamOverlay, OrigamProgress } from "../../components";
+import OrigamField from "../Field/OrigamField.vue";
+import OrigamOverlay from "../Overlay/OrigamOverlay.vue";
+import OrigamProgress from "../Progress/OrigamProgress.vue";
 import { OrigamMessages } from "../../components/Messages";
-import { useDimension, useFocus, useLocale, useProps, useTypography, useValidation, useVModel, useStyle } from "../../composables";
-import { OTP_INPUT_FIELD_TYPE, PROGRESS_TYPE } from "../../enums";
-import { filterInputAttrs, focusChild, forwardRefs, getUid, wrapInArray } from "../../utils";
+import { useDimension } from "../../composables/Commons/dimension.composable";
+import { useFocus } from "../../composables/Commons/focus.composable";
+import { useLocale } from "../../composables/Commons/locale.composable";
+import { useProps } from "../../composables/Commons/props.composable";
+import { useTypography } from "../../composables/Commons/typography.composable";
+import { useValidation } from "../../composables/Commons/validation.composable";
+import { useVModel } from "../../composables/Commons/vModel.composable";
+import { useStyle } from "../../composables/Commons/style.composable";
+import { OTP_INPUT_FIELD_TYPE } from "../../enums/OtpInputField/otp-input-field.enum";
+import { PROGRESS_TYPE } from "../../enums/Progress/progress.enum";
+import { filterInputAttrs } from "../../utils/Input/input.util";
+import { focusChild, wrapInArray } from "../../utils/Commons/commons.util";
+import { forwardRefs } from "../../utils/Commons/forwardRefs.util";
+import { getUid } from "../../utils/Commons/getCurrentInstance.util";
 const props = defineProps({
   autofocus: { type: Boolean, required: false },
   divider: { type: String, required: false },
@@ -154,24 +174,19 @@ const props = defineProps({
   length: { type: [Number, String], required: false, default: 6 },
   modelValue: { type: [Number, String, null], required: false },
   placeholder: { type: String, required: false },
-  persistentPlaceholder: { type: Boolean, required: false },
-  role: { type: String, required: false },
+  role: { type: String, required: false, default: "group" },
   type: { type: null, required: false, default: OTP_INPUT_FIELD_TYPE.NUMBER },
   centerAffix: { type: Boolean, required: false },
   dirty: { type: Boolean, required: false },
   disabled: { type: Boolean, required: false },
   error: { type: [String, Boolean], required: false },
-  flat: { type: Boolean, required: false },
   inline: { type: Boolean, required: false },
   label: { type: String, required: false },
   prefix: { type: String, required: false },
   suffix: { type: String, required: false },
   persistentClear: { type: Boolean, required: false },
-  reverse: { type: Boolean, required: false },
   singleLine: { type: Boolean, required: false },
   required: { type: Boolean, required: false },
-  activeColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
-  activeBgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   id: { type: String, required: false },
   class: { type: [String, Array, Object], required: false },
   style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
@@ -223,11 +238,7 @@ 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 },
   active: { type: [Boolean, Object], required: false },
   activeClass: { type: String, required: false },
   variant: { type: null, required: false },
@@ -256,7 +267,7 @@ const props = defineProps({
   prependAvatar: { type: String, required: false },
   prependIcon: { type: null, required: false }
 });
-const emits = defineEmits(["finish", "click:control", "mousedown:control", "click:clear", "update:focused", "update:modelValue", "click:appendInner", "click:prependInner", "update:active", "click:append", "click:prepend"]);
+const emits = defineEmits(["finish", "click:control", "mousedown:control", "update:modelValue", "update:focused", "click:appendInner", "click:prependInner", "click:clear"]);
 defineSlots();
 const { filterProps } = useProps(props);
 const { t } = useLocale();
@@ -395,6 +406,23 @@ const handleBlur = () => {
   blur();
   focusIndex.value = -1;
 };
+const handleControlClick = (e) => {
+  emits("click:control", e);
+};
+const handleControlMousedown = (e) => {
+  emits("mousedown:control", e);
+};
+const handleClear = (e) => {
+  e.stopPropagation();
+  reset();
+  emits("click:clear", e);
+};
+const handleClickAppendInner = (e) => {
+  emits("click:appendInner", e);
+};
+const handleClickPrependInner = (e) => {
+  emits("click:prependInner", e);
+};
 const isInvalidValue = (value) => {
   return props.type === OTP_INPUT_FIELD_TYPE.NUMBER && /[^0-9]/g.test(value);
 };
@@ -488,10 +516,10 @@ defineExpose(forwardRefs({
 		&__field {
 			color: var(--origam-otp-input-field__cell---color, inherit);
 			font-size: var(--origam-otp-input-field__cell---font-size, 1.25rem);
-			height: 100%;
+			height: var(--origam-otp-input-field__cell---height, 100%);
 			outline: var(--origam-otp-input-field__cell---outline, none);
 			text-align: var(--origam-otp-input-field__cell---text-align, center);
-			width: 100%;
+			width: var(--origam-otp-input-field__cell---width, 100%);
 			border: var(--origam-otp-input-field__cell---border, none);
 			background: var(--origam-otp-input-field__cell---background, transparent);
 
@@ -536,7 +564,7 @@ defineExpose(forwardRefs({
 		&--error {
 			#{$this}__details {
 				> .origam-messages {
-					color: var(--origam-otp-input-field---error-color, var(--origam-color__feedback--danger---fg-subtle));
+					color: var(--origam-otp-input-field---error-color, var(--origam-color__feedback--danger---fgSubtle));
 					opacity: 1;
 				}
 			}

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

@@ -9,6 +9,7 @@
 				:to="teleportTarget"
 		>
 			<div
+					:id="id"
 					ref="root"
 					:class="overlayClasses"
 					:style="overlayStyles"
@@ -25,6 +26,7 @@
 						:transition="transition"
 						appear
 						persisted
+						@after-enter="handleAfterEnter"
 						@after-leave="handleAfterLeave"
 				>
 					<div
@@ -48,30 +50,36 @@
 
 <script lang="ts" setup>
 import { computed, mergeProps, onBeforeUnmount, ref, StyleValue, toRef, watch } from "vue";
-import { OrigamFade, OrigamOverlayScrim, OrigamTransition } from "../../components";
-import {
-  useActivator,
-  useBackButton,
-  useBackgroundColor,
-  useDimension,
-  useHydration,
-  useLazy,
-  useLocationStrategies,
-  useProps,
-  useRouter,
-  useRtl,
-  useScopeId,
-  useScrollStrategies,
-  useStack,
-  useStyle,
-  useTeleport,
-  useToggleScope,
-  useVModel
-} from "../../composables";
-import { IN_BROWSER } from "../../consts";
-import { vClickOutside } from "../../directives";
-import { BLOCK, EASING, KEYBOARD_VALUES, LOCATION_STRATEGIES, SCROLL_STRATEGIES } from "../../enums";
-import { animate, convertToUnit, getScrollParent } from "../../utils";
+import OrigamFade from "../Transition/OrigamFade.vue";
+import OrigamOverlayScrim from "./OrigamOverlayScrim.vue";
+import OrigamTransition from "../Transition/OrigamTransition.vue";
+import { useActivator } from "../../composables/Commons/activator.composable";
+import { useBackButton } from "../../composables/Commons/backButton.composable";
+import { useBackgroundColor } from "../../composables/Commons/backgroundColor.composable";
+import { useDimension } from "../../composables/Commons/dimension.composable";
+import { useHydration } from "../../composables/Commons/hydration.composable";
+import { useLazy } from "../../composables/Commons/lazy.composable";
+import { useLocationStrategies } from "../../composables/Commons/locationStrategies.composable";
+import { useProps } from "../../composables/Commons/props.composable";
+import { useRouter } from "../../composables/Commons/router.composable";
+import { useRtl } from "../../composables/Commons/rtl.composable";
+import { useScopeId } from "../../composables/Commons/scopeId.composable";
+import { useScrollStrategies } from "../../composables/Commons/scrollStrategies.composable";
+import { useStack } from "../../composables/Commons/stack.composable";
+import { useStyle } from "../../composables/Commons/style.composable";
+import { useTeleport } from "../../composables/Commons/teleport.composable";
+import { useToggleScope } from "../../composables/Commons/toggleScope.composable";
+import { useVModel } from "../../composables/Commons/vModel.composable";
+import { IN_BROWSER } from "../../consts/Commons/commons.const";
+import vClickOutside from "../../directives/ClickOutside/clickOutside.directive";
+import { BLOCK } from "../../enums/Commons/anchor.enum";
+import { EASING } from "../../enums/Transition/transition.enum";
+import { KEYBOARD_VALUES } from "../../enums/Commons/hotkey.enum";
+import { LOCATION_STRATEGIES } from "../../enums/Commons/location.enum";
+import { SCROLL_STRATEGIES } from "../../enums/Commons/scroll.enum";
+import { animate } from "../../utils/Commons/animation.util";
+import { convertToUnit } from "../../utils/Commons/commons.util";
+import { getScrollParent } from "../../utils/Commons/scroll.util";
 const props = defineProps({
   absolute: { type: Boolean, required: false },
   attach: { type: [Boolean, String], required: false, skipCheck: true },
@@ -126,7 +134,8 @@ const isActive = computed({
 });
 const { teleportTarget } = useTeleport(computed(() => props.attach || props.contained));
 const { hasContent, onAfterLeave } = useLazy(props, isActive);
-const { globalTop, localTop, stackStyles } = useStack(isActive, toRef(props, "zIndex"), props.disableGlobalStack);
+const disableGlobalStack = computed(() => !!props.disableGlobalStack);
+const { globalTop, localTop, stackStyles } = useStack(isActive, toRef(props, "zIndex"), disableGlobalStack);
 const {
   activatorEl,
   activatorRef,
@@ -180,6 +189,7 @@ const closeConditional = () => {
   return isActive.value && globalTop.value;
 };
 const handleKeydown = (e) => {
+  emits("keydown", e);
   if (e.key === KEYBOARD_VALUES.ESC && globalTop.value) {
     if (!props.persistent) {
       isActive.value = false;
@@ -236,6 +246,9 @@ const animateClick = () => {
     });
   }
 };
+const handleAfterEnter = () => {
+  emits("afterEnter");
+};
 const handleAfterLeave = () => {
   onAfterLeave();
   emits("afterLeave");
@@ -268,7 +281,7 @@ const overlayClasses = computed(() => {
     props.class
   ];
 });
-const { id, css, load, isLoaded, unload } = useStyle(overlayStyles);
+const { id, css, load, isLoaded, unload } = useStyle(overlayStyles, () => props.id);
 defineExpose({
   activatorEl,
   scrimEl,
@@ -291,41 +304,49 @@ defineExpose({
 	.origam-overlay {
 		$this: &;
 
-		border-radius: inherit;
-		display: flex;
+		border-radius: var(--origam-overlay---border-radius, inherit);
+		display: var(--origam-overlay---display, flex);
 		left: 0;
-		pointer-events: none;
-		position: fixed;
+		pointer-events: var(--origam-overlay---pointer-events, none);
+		position: var(--origam-overlay---position, fixed);
 		top: 0;
 		bottom: 0;
 		right: 0;
 
 		&__content {
-			outline: none;
-			position: absolute;
-			pointer-events: auto;
-			contain: layout;
+			outline: var(--origam-overlay__content---outline, none);
+			position: var(--origam-overlay__content---position, absolute);
+			pointer-events: var(--origam-overlay__content---pointer-events, auto);
+			contain: var(--origam-overlay__content---contain, layout);
 		}
 
 		&__scrim {
 			pointer-events: var(--origam-overlay__scrim---pointer-events, auto);
 			background-color: var(--origam-overlay__scrim---background-color, var(--origam-color__overlay---scrim)); // TODO: rename to color.overlay.backdrop once #arbitration2 resolved
-			border-radius: inherit;
-			bottom: 0;
-			left: 0;
+			border-radius: var(--origam-overlay__scrim---border-radius, inherit);
+			bottom: var(--origam-overlay__scrim---position-bottom, 0);
+			left: var(--origam-overlay__scrim---position-left, 0);
 			opacity: var(--origam-overlay__scrim---opacity, 0.32);
-			position: fixed;
-			right: 0;
-			top: 0;
+			position: var(--origam-overlay__scrim---position, fixed);
+			right: var(--origam-overlay__scrim---position-right, 0);
+			top: var(--origam-overlay__scrim---position-top, 0);
 		}
 
+    &--is-rtl {
+      direction: rtl;
+    }
+
+    &--is-ltr {
+      direction: ltr;
+    }
+
 		&--absolute {
-			position: absolute;
+			position: var(--origam-overlay__absolute---position, absolute);
 		}
 
 		&--contained {
 			#{$this}__scrim {
-				position: absolute;
+				position: var(--origam-overlay__contained---scrim-position, absolute);
 			}
 		}