origam 2.17.0 → 2.18.0

package/dist/src/components/Select/OrigamSelect.vue

@@ -275,6 +275,7 @@ import {
   inject,
   mergeProps,
   nextTick,
+  onBeforeUnmount,
   onMounted,
   ref,
   shallowRef,
@@ -374,6 +375,21 @@ const props = defineProps({
   prependInnerIcon: { type: null, required: false },
   clearIcon: { type: null, required: false },
   clearable: { type: Boolean, required: false },
+  prependInnerAriaLabel: { type: String, required: false },
+  appendInnerAriaLabel: { type: String, required: false },
+  border: { type: [Boolean, Number, String, Array], required: false, skipCheck: true, default: true },
+  borderTop: { type: [Boolean, Number, String], required: false },
+  borderLeft: { type: [Boolean, Number, String], required: false },
+  borderBottom: { type: [Boolean, Number, String], required: false },
+  borderRight: { type: [Boolean, Number, String], required: false },
+  borderBlock: { type: [Boolean, Number, String], required: false },
+  borderInline: { type: [Boolean, Number, String], required: false },
+  borderColor: { type: String, required: false },
+  borderStyle: { type: String, required: false },
+  borderTopColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  borderRightColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  borderBottomColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  borderLeftColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   focused: { type: Boolean, required: false },
   text: { type: String, required: false },
   floating: { type: Boolean, required: false },
@@ -392,19 +408,6 @@ const props = defineProps({
   paddingRight: { type: [Boolean, Number, String], required: false },
   paddingBlock: { type: [Boolean, Number, String], required: false },
   paddingInline: { type: [Boolean, Number, String], required: false },
-  border: { type: [Boolean, Number, String, Array], required: false, skipCheck: true, default: true },
-  borderTop: { type: [Boolean, Number, String], required: false },
-  borderLeft: { type: [Boolean, Number, String], required: false },
-  borderBottom: { type: [Boolean, Number, String], required: false },
-  borderRight: { type: [Boolean, Number, String], required: false },
-  borderBlock: { type: [Boolean, Number, String], required: false },
-  borderInline: { type: [Boolean, Number, String], required: false },
-  borderColor: { type: String, required: false },
-  borderStyle: { type: String, required: false },
-  borderTopColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
-  borderRightColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
-  borderBottomColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
-  borderLeftColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   rounded: { type: [Boolean, Number, String, null], required: false, skipCheck: true, default: true },
   roundedTopRight: { type: [Boolean, Number, String], required: false },
   roundedTopLeft: { type: [Boolean, Number, String], required: false },
@@ -442,6 +445,8 @@ const props = defineProps({
   appendIcon: { type: null, required: false },
   prependAvatar: { type: String, required: false },
   prependIcon: { type: null, required: false },
+  prependAriaLabel: { type: String, required: false },
+  appendAriaLabel: { type: String, required: false },
   items: { type: Array, required: false, default: () => [] },
   itemTitle: { type: null, required: false, default: "title" },
   itemValue: { type: null, required: false, default: "value" },
@@ -592,6 +597,32 @@ const {
   onListScroll: handleListScroll,
   onListKeydown: handleListKeydown
 } = useScrolling(origamListRef, origamTextFieldRef);
+const scrollFrames = /* @__PURE__ */ new Set();
+let disposed = false;
+const scheduleScrollFrame = (cb) => {
+  if (disposed || !IN_BROWSER) return;
+  const id2 = window.requestAnimationFrame(() => {
+    scrollFrames.delete(id2);
+    cb();
+  });
+  scrollFrames.add(id2);
+};
+const macrotasks = /* @__PURE__ */ new Set();
+const scheduleMacrotask = (cb) => {
+  if (disposed || !IN_BROWSER) return;
+  const id2 = window.setTimeout(() => {
+    macrotasks.delete(id2);
+    cb();
+  }, 0);
+  macrotasks.add(id2);
+};
+onBeforeUnmount(() => {
+  disposed = true;
+  for (const id2 of scrollFrames) window.cancelAnimationFrame(id2);
+  for (const id2 of macrotasks) window.clearTimeout(id2);
+  scrollFrames.clear();
+  macrotasks.clear();
+});
 const handleSelect = (item, set = true) => {
   if (item.props?.disabled) return;
   if (props.multiple) {
@@ -648,11 +679,11 @@ const handleMousedownControl = (e) => {
   if (menuDisabled.value) return;
   menu.value = !menu.value;
   if (props.autocomplete && !props.multiple && search.value) {
-    setTimeout(() => {
+    scheduleMacrotask(() => {
       const root = vm?.proxy?.$el;
       const input = root?.querySelector("input");
       input?.select();
-    }, 0);
+    });
   }
 };
 const handleMousedownMenuIcon = (e) => {
@@ -759,13 +790,11 @@ const handleKeydown = (e) => {
     if (item !== void 0) {
       model.value = [item];
       const index = displayItems.value.indexOf(item);
-      if (IN_BROWSER) {
-        window.requestAnimationFrame(() => {
-          if (index >= 0) {
-            origamVirtualScrollRef.value?.scrollToIndex(index);
-          }
-        });
-      }
+      scheduleScrollFrame(() => {
+        if (index >= 0) {
+          origamVirtualScrollRef.value?.scrollToIndex(index);
+        }
+      });
     }
   }
 };
@@ -791,7 +820,7 @@ const handleAfterLeave = () => {
 };
 const handleFocusin = () => {
   isFocused.value = true;
-  setTimeout(() => {
+  scheduleMacrotask(() => {
     listHasFocus.value = true;
   });
 };
@@ -880,13 +909,11 @@ watch(menu, () => {
     const index = displayItems.value.findIndex(
       (item) => model.value.some((s) => props.valueComparator ? props.valueComparator(s.value, item.value) : deepEqual(s.value, item.value))
     );
-    if (IN_BROWSER) {
-      window.requestAnimationFrame(() => {
-        if (index >= 0) {
-          origamVirtualScrollRef.value?.scrollToIndex(index);
-        }
-      });
-    }
+    scheduleScrollFrame(() => {
+      if (index >= 0) {
+        origamVirtualScrollRef.value?.scrollToIndex(index);
+      }
+    });
   }
 });
 watch(() => props.items, (newVal, oldVal) => {
@@ -1134,10 +1161,6 @@ defineExpose(forwardRefs({
 		max-width: none;
 	}
 
-	.origam-select__content .origam-menu__list {
-		max-width: none;
-	}
-
 	.origam-select__content .origam-list-item {
 		--origam-list-item---padding-inline-start: 32px;
 	}

package/dist/src/components/SliderField/OrigamSliderField.vue

@@ -113,7 +113,7 @@
 						<input
 								:id="`${id}__start`"
 								:aria-describedby="messagesId"
-								:aria-label="label ? `${label} (start)` : undefined"
+								:aria-label="rangeStartAriaLabel"
 								:class="nativeInputClasses(false)"
 								:disabled="isDisabled"
 								:max="resolvedMax"
@@ -139,7 +139,7 @@
 						<input
 								:id="`${id}__stop`"
 								:aria-describedby="messagesId"
-								:aria-label="label ? `${label} (end)` : undefined"
+								:aria-label="rangeEndAriaLabel"
 								:class="nativeInputClasses(true)"
 								:disabled="isDisabled"
 								:max="resolvedMax"
@@ -327,7 +327,7 @@
 			</template>
 			<template v-else>
 				<input
-						:aria-label="label ? `${label} (start)` : undefined"
+						:aria-label="rangeStartAriaLabel"
 						:class="nativeInputClasses(false)"
 						:disabled="disabled"
 						:max="resolvedMax"
@@ -351,7 +351,7 @@
 				/>
 
 				<input
-						:aria-label="label ? `${label} (end)` : undefined"
+						:aria-label="rangeEndAriaLabel"
 						:class="nativeInputClasses(true)"
 						:disabled="disabled"
 						:max="resolvedMax"
@@ -416,6 +416,7 @@ import OrigamSliderFieldTrack from "./OrigamSliderFieldTrack.vue";
 import { OrigamAudioWaveform } from "../Audio";
 import { useBackgroundColor } from "../../composables/Commons/backgroundColor.composable";
 import { useFocus } from "../../composables/Commons/focus.composable";
+import { useLocale } from "../../composables/Commons/locale.composable";
 import { useProps } from "../../composables/Commons/props.composable";
 import { useRounded } from "../../composables/Commons/rounded.composable";
 import { useRtl } from "../../composables/Commons/rtl.composable";
@@ -513,6 +514,8 @@ const props = defineProps({
   appendIcon: { type: null, required: false },
   prependAvatar: { type: String, required: false },
   prependIcon: { type: null, required: false },
+  prependAriaLabel: { type: String, required: false },
+  appendAriaLabel: { type: String, required: false },
   size: { type: null, required: false },
   fontSize: { type: null, required: false },
   fontWeight: { type: null, required: false },
@@ -524,6 +527,7 @@ defineSlots();
 const { filterProps } = useProps(props);
 const origamInputRef = ref();
 const slots = useSlots();
+const { t } = useLocale();
 const isFieldVariant = computed(() => props.variant === SLIDER_FIELD_VARIANT.FIELD);
 const isAudioVariant = computed(() => props.variant === SLIDER_FIELD_VARIANT.AUDIO);
 const isBareVariant = computed(() => !isFieldVariant.value);
@@ -531,6 +535,12 @@ const isRange = computed(() => !!props.range);
 const isVertical = computed(() => props.direction === DIRECTION.VERTICAL);
 const isReversed = computed(() => !!props.reverse);
 const indexFromEnd = computed(() => isVertical.value !== isReversed.value);
+const rangeStartAriaLabel = computed(() => {
+  return props.label ? t("origam.slider_field.thumb_start_aria_label", props.label) : void 0;
+});
+const rangeEndAriaLabel = computed(() => {
+  return props.label ? t("origam.slider_field.thumb_end_aria_label", props.label) : void 0;
+});
 const steps = useSteps(props);
 const { min: resolvedMin, max: resolvedMax, step: resolvedStep, roundValue } = steps;
 const model = useVModel(
@@ -642,8 +652,8 @@ const parsedTicks = computed(() => {
     if (!step || span <= 0) return [];
     const count = span / step;
     if (!isFinite(count)) return [];
-    return createRange(count + 1).map((t) => {
-      const value = resolvedMin.value + t * step;
+    return createRange(count + 1).map((t2) => {
+      const value = resolvedMin.value + t2 * step;
       return {
         value,
         position: toPercent(value)
@@ -651,10 +661,10 @@ const parsedTicks = computed(() => {
     });
   }
   if (Array.isArray(ticksProp)) {
-    return ticksProp.map((t) => ({
-      value: t,
-      position: toPercent(t),
-      label: String(t)
+    return ticksProp.map((t2) => ({
+      value: t2,
+      position: toPercent(t2),
+      label: String(t2)
     }));
   }
   if (typeof ticksProp === "object" && ticksProp !== null) {

package/dist/src/components/Snackbar/OrigamSnackbarGroup.vue

@@ -123,7 +123,7 @@ const stackClasses = computed(() => {
   ];
 });
 const resolvedDomId = computed(() => `origam-snackbar-group-${props.id}`);
-const { id: styleId, css, load, isLoaded, unload } = useStyle(stackStyles);
+const { id: styleId, css, load, isLoaded, unload } = useStyle(stackStyles, () => resolvedDomId.value);
 defineExpose({
   filterProps,
   visibleItems,

package/dist/src/components/Switch/OrigamSwitch.vue

@@ -229,6 +229,8 @@ const props = defineProps({
   appendIcon: { type: null, required: false },
   prependAvatar: { type: String, required: false },
   prependIcon: { type: null, required: false },
+  prependAriaLabel: { type: String, required: false },
+  appendAriaLabel: { type: String, required: false },
   size: { type: null, required: false },
   fontSize: { type: null, required: false },
   fontWeight: { type: null, required: false },

package/dist/src/components/Switch/OrigamSwitchTrack.vue

@@ -149,8 +149,28 @@ defineExpose({
 		// Without `:where()`, this scoped rule's [data-v-hash] pushes it
 		// to (0,2,0), beating the utility's (0,1,0), and the `rounded`
 		// prop's scale form goes silently inert.
+		//
+		// #727 — the border longhands ride in the SAME zero-specificity
+		// block, for the same reason AND for one more. Before this, the
+		// track declared NO border at all outside `forced-colors`: the two
+		// tokens `--origam-switch__track---border-{width,color}` existed in
+		// `light.css` / `dark.css` but were read by nobody (both sat in
+		// `baseline/token-var-channels-dormant.json`). Giving them a
+		// visible value alone changed nothing — the declaration reading
+		// them had to be added here.
+		//
+		// Zero specificity is what keeps the default OVERRIDABLE, which is
+		// the explicit half of the request: `useBorder` emits `border`
+		// through the INLINE style channel (`border-width` / `border-style`
+		// / `border-color`), which outranks any selector, and the
+		// `.origam--border-{none,thin,thick}` utility at (0,1,0) also wins
+		// over `:where()` at (0,0,0). A consumer passing `border="none"`
+		// therefore still gets no border.
 		:where(&) {
 			border-radius: var(--origam-switch__track---border-radius, 9999px);
+			border-width: var(--origam-switch__track---border-width, 1px);
+			border-style: var(--origam-switch__track---border-style, solid);
+			border-color: var(--origam-switch__track---border-color, currentColor);
 		}
 
 		height: var(--origam-switch__track---height, 14px);

package/dist/src/components/Tabs/OrigamTab.vue

@@ -13,7 +13,6 @@
 			:aria-disabled="isDisabled || undefined"
 			:tabindex="tabIndex"
 			:disabled="isDisabled || undefined"
-			:data-origam-tab-id="groupItem?.id"
 			@click="handleClick"
 	>
 		<span
@@ -75,6 +74,7 @@ import { useProps } from "../../composables/Commons/props.composable";
 import { useStyle } from "../../composables/Commons/style.composable";
 import { useTypography } from "../../composables/Commons/typography.composable";
 import vContrast from "../../directives/Contrast/contrast.directive";
+import { getUid } from "../../utils/Commons/getCurrentInstance.util";
 import { ORIGAM_TABS_KEY, ORIGAM_TAB_PANELS_LINK_KEY } from "../../consts/Tabs/tabs.const";
 const props = defineProps({
   tag: { type: String, required: false, default: "button" },
@@ -93,7 +93,9 @@ const props = defineProps({
   appendAvatar: { type: String, required: false },
   appendIcon: { type: null, required: false },
   prependAvatar: { type: String, required: false },
-  prependIcon: { type: null, required: false }
+  prependIcon: { type: null, required: false },
+  prependAriaLabel: { type: String, required: false },
+  appendAriaLabel: { type: String, required: false }
 });
 defineEmits(["group:selected"]);
 defineSlots();
@@ -116,7 +118,8 @@ const slotProps = computed(() => ({
   value: groupItem.value.value,
   disabled: groupItem.disabled.value
 }));
-const tabDomId = computed(() => props.id || `origam-tab-${groupItem.id}`);
+const uid = getUid();
+const tabDomId = computed(() => props.id || `origam-tab-${uid}`);
 watchEffect(() => {
   const self = groupItem.group.items.value.find((item) => item.id === groupItem.id);
   if (self) self.domId = tabDomId.value;
@@ -126,7 +129,7 @@ const panelId = computed(() => {
   if (!panelsGroup) return void 0;
   const panel = panelsGroup.items.value.find((item) => item.value === groupItem.value.value);
   if (!panel) return void 0;
-  return panel.domId || `origam-tab-panel-${panel.id}`;
+  return panel.domId;
 });
 const ariaSelected = computed(() => groupItem.isSelected.value ? "true" : "false");
 const tabIndex = computed(() => {

package/dist/src/components/Tabs/OrigamTabPanel.vue

@@ -27,6 +27,7 @@
 import { computed, inject, ref, StyleValue, watchEffect } from "vue";
 import { useGroupItem } from "../../composables/Commons/groupItem.composable";
 import { useLazy } from "../../composables/Commons/lazy.composable";
+import { getUid } from "../../utils/Commons/getCurrentInstance.util";
 import { useProps } from "../../composables/Commons/props.composable";
 import { useStyle } from "../../composables/Commons/style.composable";
 import {
@@ -54,7 +55,8 @@ const panelsCtx = inject(ORIGAM_TAB_PANELS_CTX_KEY, null);
 if (!groupItem) {
   throw new Error("[Origam] <OrigamTabPanel> must be used inside an <OrigamTabPanels>");
 }
-const panelDomId = computed(() => props.id || `origam-tab-panel-${groupItem.id}`);
+const uid = getUid();
+const panelDomId = computed(() => props.id || `origam-tab-panel-${uid}`);
 watchEffect(() => {
   const self = groupItem.group.items.value.find((item) => item.id === groupItem.id);
   if (self) self.domId = panelDomId.value;
@@ -64,7 +66,7 @@ const tabLabelledBy = computed(() => {
   if (!tabsGroup) return void 0;
   const tab = tabsGroup.items.value.find((item) => item.value === groupItem.value.value);
   if (!tab) return void 0;
-  return tab.domId || `origam-tab-${tab.id}`;
+  return tab.domId;
 });
 const isShown = computed(() => groupItem.isSelected.value);
 const { hasContent } = useLazy({ eager: !!props.eager }, isShown);

package/dist/src/components/Tabs/OrigamTabs.vue

@@ -85,7 +85,9 @@ const slotDefaults = computed(() => ({
 const ariaOrientation = computed(() => props.direction === DIRECTION.VERTICAL ? "vertical" : "horizontal");
 const focusTab = (id2) => {
   if (!rootRef.value) return;
-  const target = rootRef.value.querySelector(`[data-origam-tab-id="${id2}"]`);
+  const domId = items.value.find((item) => item.id === id2)?.domId;
+  if (!domId) return;
+  const target = rootRef.value.querySelector(`[id=${JSON.stringify(domId)}]`);
   target?.focus();
 };
 const focusFirstNonDisabled = (offset) => {
@@ -109,12 +111,12 @@ const handleKeydown = (event) => {
   const currentId = selected.value[0];
   if (event.key === prevKey) {
     event.preventDefault();
-    prev();
-    if (selected.value[0] != null) focusTab(selected.value[0]);
+    const movedTo = prev();
+    if (movedTo != null) focusTab(movedTo);
   } else if (event.key === nextKey) {
     event.preventDefault();
-    next();
-    if (selected.value[0] != null) focusTab(selected.value[0]);
+    const movedTo = next();
+    if (movedTo != null) focusTab(movedTo);
   } else if (event.key === "Home") {
     event.preventDefault();
     focusFirstNonDisabled(1);

package/dist/src/components/TextField/OrigamTextField.vue

@@ -197,6 +197,7 @@ import { useMask } from "../../composables/Commons/mask.composable";
 import { useProps } from "../../composables/Commons/props.composable";
 import { useStyle } from "../../composables/Commons/style.composable";
 import { useVModel } from "../../composables/Commons/vModel.composable";
+import { BORDER_PROP_KEYS } from "../../consts/Commons/border.const";
 import { ACTIVE_TEXT_FIELD_TYPE, INPUT_TEXT_FIELD_TYPE } from "../../consts/TextField/text-field.const";
 import vIntersect from "../../directives/Intersect/intersect.directive";
 import { DENSITY } from "../../enums/Commons/density.enum";
@@ -244,6 +245,21 @@ const props = defineProps({
   prependInnerIcon: { type: null, required: false },
   clearIcon: { type: null, required: false, default: MDI_ICONS.CLOSE_CIRCLE_OUTLINE },
   clearable: { type: Boolean, required: false },
+  prependInnerAriaLabel: { type: String, required: false },
+  appendInnerAriaLabel: { type: String, required: false },
+  border: { type: [Boolean, Number, String, Array], required: false, skipCheck: true },
+  borderTop: { type: [Boolean, Number, String], required: false },
+  borderLeft: { type: [Boolean, Number, String], required: false },
+  borderBottom: { type: [Boolean, Number, String], required: false },
+  borderRight: { type: [Boolean, Number, String], required: false },
+  borderBlock: { type: [Boolean, Number, String], required: false },
+  borderInline: { type: [Boolean, Number, String], required: false },
+  borderColor: { type: String, required: false },
+  borderStyle: { type: String, required: false },
+  borderTopColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  borderRightColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  borderBottomColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  borderLeftColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   focused: { type: Boolean, required: false },
   text: { type: String, required: false },
   floating: { type: Boolean, required: false },
@@ -262,19 +278,6 @@ const props = defineProps({
   paddingRight: { type: [Boolean, Number, String], required: false },
   paddingBlock: { type: [Boolean, Number, String], required: false },
   paddingInline: { type: [Boolean, Number, String], required: false },
-  border: { type: [Boolean, Number, String, Array], required: false, skipCheck: true },
-  borderTop: { type: [Boolean, Number, String], required: false },
-  borderLeft: { type: [Boolean, Number, String], required: false },
-  borderBottom: { type: [Boolean, Number, String], required: false },
-  borderRight: { type: [Boolean, Number, String], required: false },
-  borderBlock: { type: [Boolean, Number, String], required: false },
-  borderInline: { type: [Boolean, Number, String], required: false },
-  borderColor: { type: String, required: false },
-  borderStyle: { type: String, required: false },
-  borderTopColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
-  borderRightColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
-  borderBottomColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
-  borderLeftColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   rounded: { type: [Boolean, Number, String, null], required: false, skipCheck: true, default: true },
   roundedTopRight: { type: [Boolean, Number, String], required: false },
   roundedTopLeft: { type: [Boolean, Number, String], required: false },
@@ -311,7 +314,9 @@ const props = defineProps({
   appendAvatar: { type: String, required: false },
   appendIcon: { type: null, required: false },
   prependAvatar: { type: String, required: false },
-  prependIcon: { type: null, required: false }
+  prependIcon: { type: null, required: false },
+  prependAriaLabel: { type: String, required: false },
+  appendAriaLabel: { type: String, required: false }
 });
 const emits = defineEmits(["click:control", "mousedown:control", "valid", "complete", "update:focused", "click:appendInner", "click:prependInner", "click:clear", "update:modelValue", "click:append", "click:prepend"]);
 defineSlots();
@@ -482,7 +487,7 @@ const enrichedRules = computed(() => {
 });
 const [rootAttrs, inputAttrs] = filterInputAttrs(attrs);
 const inputProps = computed(() => {
-  return origamInputRef.value?.filterProps(props, ["modelValue", "class", "style", "focused"]);
+  return origamInputRef.value?.filterProps(props, ["modelValue", "class", "style", "focused", ...BORDER_PROP_KEYS]);
 });
 const fieldProps = computed(() => {
   return origamFieldRef.value?.filterProps(props, ["class", "id", "active", "dirty", "disabled", "focused", "error", "style"]);

package/dist/src/components/TextareaField/OrigamTextareaField.vue

@@ -277,6 +277,7 @@ import { useTextareaRich } from "../../composables/TextareaField/textarea-field-
 import { useTheme } from "../../composables/Commons/theme.composable";
 import { useTypography } from "../../composables/Commons/typography.composable";
 import { useVModel } from "../../composables/Commons/vModel.composable";
+import { BORDER_PROP_KEYS } from "../../consts/Commons/border.const";
 import { DEFAULT_TOOLBAR } from "../../consts/TextareaField/textarea-field.const";
 import vIntersect from "../../directives/Intersect/intersect.directive";
 import { AXIS } from "../../enums/Commons/drag.enum";
@@ -331,6 +332,21 @@ const props = defineProps({
   prependInnerIcon: { type: null, required: false },
   clearIcon: { type: null, required: false, default: MDI_ICONS.CLOSE_CIRCLE_OUTLINE },
   clearable: { type: Boolean, required: false },
+  prependInnerAriaLabel: { type: String, required: false },
+  appendInnerAriaLabel: { type: String, required: false },
+  border: { type: [Boolean, Number, String, Array], required: false, skipCheck: true },
+  borderTop: { type: [Boolean, Number, String], required: false },
+  borderLeft: { type: [Boolean, Number, String], required: false },
+  borderBottom: { type: [Boolean, Number, String], required: false },
+  borderRight: { type: [Boolean, Number, String], required: false },
+  borderBlock: { type: [Boolean, Number, String], required: false },
+  borderInline: { type: [Boolean, Number, String], required: false },
+  borderColor: { type: String, required: false },
+  borderStyle: { type: String, required: false },
+  borderTopColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  borderRightColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  borderBottomColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  borderLeftColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   focused: { type: Boolean, required: false },
   text: { type: String, required: false },
   floating: { type: Boolean, required: false },
@@ -349,19 +365,6 @@ const props = defineProps({
   paddingRight: { type: [Boolean, Number, String], required: false },
   paddingBlock: { type: [Boolean, Number, String], required: false },
   paddingInline: { type: [Boolean, Number, String], required: false },
-  border: { type: [Boolean, Number, String, Array], required: false, skipCheck: true },
-  borderTop: { type: [Boolean, Number, String], required: false },
-  borderLeft: { type: [Boolean, Number, String], required: false },
-  borderBottom: { type: [Boolean, Number, String], required: false },
-  borderRight: { type: [Boolean, Number, String], required: false },
-  borderBlock: { type: [Boolean, Number, String], required: false },
-  borderInline: { type: [Boolean, Number, String], required: false },
-  borderColor: { type: String, required: false },
-  borderStyle: { type: String, required: false },
-  borderTopColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
-  borderRightColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
-  borderBottomColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
-  borderLeftColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   rounded: { type: [Boolean, Number, String, null], required: false, skipCheck: true, default: true },
   roundedTopRight: { type: [Boolean, Number, String], required: false },
   roundedTopLeft: { type: [Boolean, Number, String], required: false },
@@ -398,7 +401,9 @@ const props = defineProps({
   appendAvatar: { type: String, required: false },
   appendIcon: { type: null, required: false },
   prependAvatar: { type: String, required: false },
-  prependIcon: { type: null, required: false }
+  prependIcon: { type: null, required: false },
+  prependAriaLabel: { type: String, required: false },
+  appendAriaLabel: { type: String, required: false }
 });
 const emits = defineEmits(["update:height", "click:control", "mousedown:control", "format", "update:focused", "click:appendInner", "click:prependInner", "click:clear", "update:modelValue", "click:append", "click:prepend"]);
 defineSlots();
@@ -636,7 +641,7 @@ const enrichedRules = computed(() => {
 });
 const [rootAttrs, inputAttrs] = filterInputAttrs(attrs);
 const inputProps = computed(() => {
-  return origamInputRef.value?.filterProps(props, ["modelValue", "class", "style", "focused", "centerAffix"]);
+  return origamInputRef.value?.filterProps(props, ["modelValue", "class", "style", "focused", "centerAffix", ...BORDER_PROP_KEYS]);
 });
 const fieldProps = computed(() => {
   return origamFieldRef.value?.filterProps(props, ["class", "id", "style", "active", "dirty", "disabled", "focused", "error", "centerAffix"]);

package/dist/src/components/Transition/OrigamExpandX.vue

@@ -15,7 +15,7 @@
 </template>
 
 <script lang="ts" setup>
-import { camelize, computed, Transition, TransitionGroup } from "vue";
+import { camelize, computed, onBeforeUnmount, Transition, TransitionGroup } from "vue";
 import { useProps } from "../../composables/Commons/props.composable";
 import { TRANSITION_MODE } from "../../enums/Transition/transition.enum";
 const props = defineProps({
@@ -29,6 +29,22 @@ const props = defineProps({
 const { filterProps } = useProps(props);
 defineEmits([]);
 defineSlots();
+let disposed = false;
+const frames = /* @__PURE__ */ new Set();
+const scheduleFrame = (cb) => {
+  if (disposed) return;
+  const id = requestAnimationFrame(() => {
+    frames.delete(id);
+    if (disposed) return;
+    cb();
+  });
+  frames.add(id);
+};
+onBeforeUnmount(() => {
+  disposed = true;
+  for (const id of frames) cancelAnimationFrame(id);
+  frames.clear();
+});
 const tag = computed(() => props.group ? TransitionGroup : Transition);
 const rootProps = computed(() => {
   const bind = {
@@ -88,7 +104,7 @@ const handleEnter = (el) => {
   if (expandedParentClass && element._parent) {
     element._parent.classList.add(expandedParentClass);
   }
-  requestAnimationFrame(() => {
+  scheduleFrame(() => {
     element.style[sizeProperty] = offset;
   });
 };
@@ -128,7 +144,7 @@ const handleLeave = (el) => {
   if (props.hideOnLeave) {
     element.style.setProperty("display", "none", "important");
   } else {
-    requestAnimationFrame(() => element.style[sizeProperty] = "0");
+    scheduleFrame(() => element.style[sizeProperty] = "0");
   }
 };
 const handleAfterLeave = (el) => {

package/dist/src/components/Transition/OrigamExpandY.vue

@@ -15,7 +15,7 @@
 </template>
 
 <script lang="ts" setup>
-import { camelize, computed, Transition, TransitionGroup } from "vue";
+import { camelize, computed, onBeforeUnmount, Transition, TransitionGroup } from "vue";
 import { useProps } from "../../composables/Commons/props.composable";
 import { TRANSITION_MODE } from "../../enums/Transition/transition.enum";
 const props = defineProps({
@@ -29,6 +29,22 @@ const props = defineProps({
 const { filterProps } = useProps(props);
 defineEmits([]);
 defineSlots();
+let disposed = false;
+const frames = /* @__PURE__ */ new Set();
+const scheduleFrame = (cb) => {
+  if (disposed) return;
+  const id = requestAnimationFrame(() => {
+    frames.delete(id);
+    if (disposed) return;
+    cb();
+  });
+  frames.add(id);
+};
+onBeforeUnmount(() => {
+  disposed = true;
+  for (const id of frames) cancelAnimationFrame(id);
+  frames.clear();
+});
 const tag = computed(() => props.group ? TransitionGroup : Transition);
 const rootProps = computed(() => {
   const bind = {
@@ -88,7 +104,7 @@ const handleEnter = (el) => {
   if (expandedParentClass && element._parent) {
     element._parent.classList.add(expandedParentClass);
   }
-  requestAnimationFrame(() => {
+  scheduleFrame(() => {
     element.style[sizeProperty] = offset;
   });
 };
@@ -128,7 +144,7 @@ const handleLeave = (el) => {
   if (props.hideOnLeave) {
     element.style.setProperty("display", "none", "important");
   } else {
-    requestAnimationFrame(() => element.style[sizeProperty] = "0");
+    scheduleFrame(() => element.style[sizeProperty] = "0");
   }
 };
 const handleAfterLeave = (el) => {