origam 2.17.0 → 2.18.0

package/dist/src/components/DatePicker/OrigamDatePickerHeader.vue

@@ -12,8 +12,7 @@
 			<div
 					key="prepend"
 					class="origam-date-picker-header__prepend"
-					:role="isPrependClickable ? 'button' : undefined"
-					:tabindex="isPrependClickable ? 0 : undefined"
+					v-bind="prependCommandAttrs"
 					@click="handleClickPrepend"
 					@keydown="handleKeydownPrepend"
 			>
@@ -54,8 +53,7 @@
 			<div
 					key="append"
 					class="origam-date-picker-header__append"
-					:role="isAppendClickable ? 'button' : undefined"
-					:tabindex="isAppendClickable ? 0 : undefined"
+					v-bind="appendCommandAttrs"
 					@click="handleClickAppend"
 					@keydown="handleKeydownAppend"
 			>
@@ -102,6 +100,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 },
   density: { type: null, required: false }
 });
 const emits = defineEmits(["click"]);
@@ -117,8 +117,8 @@ const {
   onClickAppend: handleClickAppend,
   onKeydownPrepend: handleKeydownPrepend,
   onKeydownAppend: handleKeydownAppend,
-  isPrependClickable,
-  isAppendClickable,
+  prependCommandAttrs,
+  appendCommandAttrs,
   hasAppend,
   hasPrepend
 } = useAdjacent(props, toRef(props, "prependIcon"), toRef(props, "appendIcon"));

package/dist/src/components/DatePickerField/OrigamDatePickerField.vue

@@ -16,6 +16,7 @@
 			@blur="handleBlur"
 			@change="handleChange"
 			@click:clear="handleClear"
+			@input="handleInput"
 			@mousedown:control="handleMousedownControl"
 	>
 		<template
@@ -244,6 +245,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 },
@@ -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, 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 },
@@ -312,6 +315,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 },
   transition: { type: [Boolean, String, Object], required: false, default: () => ({ component: OrigamTranslateScale }) }
 });
 defineEmits(["update:menu", "update:modelValue"]);
@@ -373,6 +378,17 @@ const isMultiple = computed(() => {
 const isRange = computed(() => {
   return props.range && model.value.length > 1;
 });
+const commitTypedDate = (raw) => {
+  if (props.multiple || props.range) return;
+  if (raw === "") {
+    model.value = [];
+    return;
+  }
+  const parsed = adapter.date(raw);
+  if (!parsed || !adapter.isValid(parsed)) return;
+  if (adapter.format(parsed, "keyboardDate") !== raw) return;
+  model.value = [adapter.toISO(parsed)];
+};
 const isFocused = shallowRef(false);
 const form = inject(ORIGAM_FORM_KEY, null);
 const menuDisabled = computed(() => {
@@ -419,8 +435,12 @@ const handleBlur = (e) => {
     isFocused.value = true;
   }
 };
-const handleChange = () => {
+const handleInput = (e) => {
+  commitTypedDate(e.target?.value ?? "");
+};
+const handleChange = (e) => {
   if (matchesSelector(origamTextFieldRef.value, ":autofill") || matchesSelector(origamTextFieldRef.value, ":-webkit-autofill")) {
+    commitTypedDate(e.target?.value ?? "");
   }
 };
 const handleAfterLeave = () => {

package/dist/src/components/Dialog/OrigamDialog.vue

@@ -266,6 +266,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 },
   active: { type: [Boolean, Object], required: false },
   activeClass: { type: String, required: false },
   status: { type: null, required: false },
@@ -398,6 +400,29 @@ defineExpose(forwardRefs({
 			border-radius: var(--origam-dialog---border-radius, 12px);
 			box-shadow: var(--origam-dialog---box-shadow);
 
+			// #563 — la boite qui porte le PLAFOND doit porter le DEFILEMENT.
+			//
+			// `.origam-overlay__content` est `position: absolute` et de hauteur
+			// AUTO : le `max-height: 100%` pose plus bas sur `.origam-card` se
+			// resout donc en `none` (pourcentage contre un parent sans hauteur
+			// definie). La carte grandit sans plafond, et cette boite la laissait
+			// deborder en `overflow: visible`. Mesure Chromium sur `develop`,
+			// dialogue Design + 900px injectes dans `#footer` :
+			//
+			//   .origam-card       overflow hidden  clientH 1047  scrollH 1047  -> ne defile pas
+			//   .origam-overlay__content  visible                               -> ne rogne pas
+			//   document                                                        -> bloque (scrollStrategy 'block')
+			//   => pied du dialogue 459px SOUS le viewport, aucun recours.
+			//
+			// Contrairement a ce que decrit le ticket, `.origam-card__content`
+			// ne defilait pas davantage : sans hauteur definie en amont il
+			// grandit lui aussi (clientH 1647 === scrollH 1647). AUCUNE boite du
+			// dialogue ne defilait.
+			//
+			// La branche `&--fullscreen` ci-dessous pose deja exactement cette
+			// declaration : ceci aligne le mode par defaut sur elle.
+			overflow-y: auto;
+
 			&,
 			> form {
 				> .origam-card {

package/dist/src/components/Dialog/OrigamDialogConfirmation.vue

@@ -3,6 +3,8 @@
 			:id="id"
 			ref="origamDialogRef"
 			v-model="isActive"
+			:class="rootClasses"
+			:style="rootStyles"
 			v-bind="dialogProps"
 			@is-read="handleIsRead"
 	>
@@ -240,6 +242,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 },
   active: { type: [Boolean, Object], required: false },
   activeClass: { type: String, required: false },
   status: { type: null, required: false },
@@ -256,6 +260,8 @@ const origamDialogRef = ref();
 const slots = useSlots();
 const isActive = useVModel(props, "modelValue");
 const validatable = ref(false);
+const rootClasses = computed(() => [props.class]);
+const rootStyles = computed(() => props.style);
 const dialogProps = computed(() => {
   return origamDialogRef.value?.filterProps(props, ["class", "style", "id", "modelValue"]);
 });

package/dist/src/components/ExpansionPanel/OrigamExpansionPanel.vue

@@ -175,6 +175,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 },
   ripple: { type: [Boolean, Object], required: false },
   active: { type: [Boolean, Object], required: false },
   activeClass: { type: String, required: false },

package/dist/src/components/ExpansionPanel/OrigamExpansionPanelHeader.vue

@@ -20,8 +20,7 @@
 		      v-if="hasPrepend"
 		      key="prepend"
 		      class="origam-expansion-panel-header__prepend"
-		      :role="isPrependClickable ? 'button' : undefined"
-		      :tabindex="isPrependClickable ? 0 : undefined"
+		      v-bind="prependCommandAttrs"
 		      @click="handleClickPrepend"
 		      @keydown="handleKeydownPrepend"
       >
@@ -65,8 +64,7 @@
 					v-if="hasAppend || !hideActions"
 					key="append"
 					class="origam-expansion-panel-header__append"
-					:role="isAppendClickable ? 'button' : undefined"
-					:tabindex="isAppendClickable ? 0 : undefined"
+					v-bind="appendCommandAttrs"
 					@click="handleClickAppend"
 					@keydown="handleKeydownAppend"
 			>
@@ -163,6 +161,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 },
   ripple: { type: [Boolean, Object], required: false },
   active: { type: [Boolean, Object], required: false },
   activeClass: { type: String, required: false },
@@ -207,8 +207,8 @@ const hasTitle = computed(() => {
 const {
   hasAppend,
   hasPrepend,
-  isPrependClickable,
-  isAppendClickable,
+  prependCommandAttrs,
+  appendCommandAttrs,
   onClickPrepend: handleClickPrepend,
   onClickAppend: handleClickAppend,
   onKeydownPrepend: handleKeydownPrepend,

package/dist/src/components/Field/OrigamField.vue

@@ -40,8 +40,7 @@
 					v-if="hasPrependInner"
 					key="prependInner"
 					class="origam-field__prepend-inner"
-					:role="isPrependInnerClickable ? 'button' : undefined"
-					:tabindex="isPrependInnerClickable ? 0 : undefined"
+					v-bind="prependInnerCommandAttrs"
 					@click="handleClickPrependInner"
 					@keydown="handleKeydownPrependInner"
 			>
@@ -129,8 +128,7 @@
 					v-if="hasAppendInner"
 					key="appendInner"
 					class="origam-field__append-inner"
-					:role="isAppendInnerClickable ? 'button' : undefined"
-					:tabindex="isAppendInnerClickable ? 0 : undefined"
+					v-bind="appendInnerCommandAttrs"
 					@click="handleClickAppendInner"
 					@keydown="handleKeydownAppendInner"
 			>
@@ -174,7 +172,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, onMounted, ref, StyleValue, useAttrs, useSlots, watch } from "vue";
+import { computed, onBeforeUnmount, onMounted, ref, StyleValue, useAttrs, useSlots, watch } from "vue";
 import OrigamAvatar from "../Avatar/OrigamAvatar.vue";
 import OrigamExpandX from "../Transition/OrigamExpandX.vue";
 import OrigamIcon from "../Icon/OrigamIcon.vue";
@@ -182,6 +180,7 @@ import OrigamLabel from "../Label/OrigamLabel.vue";
 import OrigamProgress from "../Progress/OrigamProgress.vue";
 import OrigamSkeleton from "../Skeleton/OrigamSkeleton.vue";
 import { useAdjacentInner } from "../../composables/Commons/adjacentInner.composable";
+import { useBorder } from "../../composables/Commons/border.composable";
 import { useBothColor } from "../../composables/Commons/bothColor.composable";
 import { useDensity } from "../../composables/Commons/density.composable";
 import { useFocus } from "../../composables/Commons/focus.composable";
@@ -195,6 +194,7 @@ import { useStateFlag } from "../../composables/Commons/stateFlag.composable";
 import { useStyle } from "../../composables/Commons/style.composable";
 import { useTypography } from "../../composables/Commons/typography.composable";
 import { useVariant } from "../../composables/Commons/variant.composable";
+import { IN_BROWSER } from "../../consts/Commons/commons.const";
 import vContrast from "../../directives/Contrast/contrast.directive";
 import { DENSITY } from "../../enums/Commons/density.enum";
 import { EASING } from "../../enums/Transition/transition.enum";
@@ -232,6 +232,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 },
   density: { type: null, required: false, default: DENSITY.DEFAULT },
   text: { type: String, required: false },
@@ -251,19 +266,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 },
   roundedTopRight: { type: [Boolean, Number, String], required: false },
   roundedTopLeft: { type: [Boolean, Number, String], required: false },
@@ -285,13 +287,13 @@ const slots = useSlots();
 const attrs = useAttrs();
 const { t } = useLocale();
 const {
+  prependInnerCommandAttrs,
+  appendInnerCommandAttrs,
   hasAppendInner,
   onClickAppendInner: handleClickAppendInner,
   onClickPrependInner: handleClickPrependInner,
   onKeydownAppendInner: handleKeydownAppendInner,
   onKeydownPrependInner: handleKeydownPrependInner,
-  isAppendInnerClickable,
-  isPrependInnerClickable,
   clickClear: handleClickClear,
   hasPrependInner,
   hasClear
@@ -400,6 +402,21 @@ const { isOn: active, config: activeState, toggle: handleActive } = useStateFlag
 const isActive = computed(() => {
   return props.dirty || active.value || hasPrefix.value || hasSuffix.value;
 });
+const labelFrames = /* @__PURE__ */ new Set();
+let disposed = false;
+const scheduleLabelFrame = (cb) => {
+  if (disposed || !IN_BROWSER) return;
+  const id2 = requestAnimationFrame(() => {
+    labelFrames.delete(id2);
+    cb();
+  });
+  labelFrames.add(id2);
+};
+onBeforeUnmount(() => {
+  disposed = true;
+  for (const id2 of labelFrames) cancelAnimationFrame(id2);
+  labelFrames.clear();
+});
 onMounted(() => {
   watch(isFocused, (newVal, oldVal) => {
     if (newVal !== oldVal) {
@@ -410,7 +427,7 @@ onMounted(() => {
     if (hasLabel.value && newVal !== oldVal) {
       const el = origamLabelRef.value.$el;
       const targetEl = origamFloatingLabelRef.value.$el;
-      requestAnimationFrame(() => {
+      scheduleLabelFrame(() => {
         const rect = nullifyTransforms(el);
         const targetRect = targetEl.getBoundingClientRect();
         const x = targetRect.x - rect.x;
@@ -447,6 +464,7 @@ const bgColor = computed(() => {
   return isActive.value && isFocused.value && activeState.value?.bgColor ? activeState.value.bgColor : props.bgColor;
 });
 const { colorClasses, colorStyles } = useBothColor(bgColor, color);
+const { borderStyles } = useBorder(props);
 const { densityClasses } = useDensity(props);
 const {
   roundedClasses,
@@ -464,11 +482,32 @@ const fieldRadiusVarStyles = computed(() => {
   if (!radius) return [];
   return [`--origam-field---border-radius: ${radius.slice("border-radius:".length).trim()}`];
 });
+const fieldBorderVarStyles = computed(() => {
+  const declarations = borderStyles.value;
+  if (!Array.isArray(declarations)) return [];
+  const vars = [];
+  const lastValueOf = (property) => {
+    const prefix = `${property}:`;
+    const match = declarations.filter((declaration) => declaration.startsWith(prefix)).pop();
+    return match ? match.slice(prefix.length).trim() : null;
+  };
+  const width = lastValueOf("border-width");
+  const style = lastValueOf("border-style");
+  const color2 = lastValueOf("border-color");
+  if (width) vars.push(`--origam-field---border-width: ${width}`);
+  if (style) vars.push(`--origam-field__outline---border-style: ${style}`);
+  if (color2) {
+    vars.push(`--origam-field---border-color: ${color2}`);
+    vars.push("--origam-field---border-opacity: 1");
+  }
+  return vars;
+});
 const fieldStyles = computed(() => {
   return [
     colorStyles.value,
     roundedStyles.value,
     fieldRadiusVarStyles.value,
+    fieldBorderVarStyles.value,
     elevationStyles.value,
     props.style
   ];
@@ -546,8 +585,23 @@ defineExpose({
 		// Floor the inline padding at the effective radius (capped at the control
 		// height for pills). Prepended fields opt out below — their prepend icon
 		// already fills the corner.
+		//
+		// ⛔ LE PLANCHER EST UN CANAL, PAS UNE EXPRESSION FIGEE (#800).
+		// Un champ dont le contenu est CENTRE et sans etiquette (OtpInputField)
+		// n'a aucun risque de collision avec le coin : le plancher n'y a pas
+		// lieu d'etre, et l'appliquer decentre le chiffre. Ce cas s'exprimait
+		// jusqu'ici par un `--origam-field---padding-start: 0` SANS UNITE, qui
+		// melange `<number>` et `<length>` dans le `max()` et fait JETER la
+		// declaration entiere au computed-value time. Le rendu voulu etait donc
+		// obtenu par une erreur CSS — mesure Chromium : mettre l'unite donne
+		// `padding-inline-start: 4px` avec `padding-inline-end: 0px`, soit un
+		// chiffre decentre de 2px. Un consommateur qui veut vraiment zero met
+		// desormais `--origam-field---corner-clearance: 0px` : c'est explicite,
+		// ca survit a un refactor du `max()`, et ca ne repose sur rien d'invalide.
+		--origam-field---corner-clearance:
+			min(var(--origam-field---border-radius, 8px), var(--origam-input__control---height, 36px));
 		padding-inline:
-			max(var(--origam-field---padding-start), min(var(--origam-field---border-radius, 8px), var(--origam-input__control---height, 36px)))
+			max(var(--origam-field---padding-start), var(--origam-field---corner-clearance))
 			var(--origam-field---padding-end);
 		backdrop-filter: var(--origam-field---backdrop-filter, none);
 		-webkit-backdrop-filter: var(--origam-field---backdrop-filter, none);
@@ -591,7 +645,7 @@ defineExpose({
 			padding-bottom: var(--origam-field__input---padding-bottom);
 			position: relative;
 			width: 100%;
-			row-gap: calc(8px - var(--origam-input---density, 0));
+			row-gap: calc(8px - var(--origam-input---density, 0px));
 			border: none;
 			background: transparent;
 
@@ -723,9 +777,9 @@ defineExpose({
 		&__label {
 			contain: layout paint;
 			display: block;
-			margin-inline-start: var(--origam-field__input---padding-start, 0);
-			margin-inline-end: var(--origam-field__input---padding-end, 0);
-			max-width: calc(100% - var(--origam-field__input---padding-start, 0) - var(--origam-field__input---padding-end, 0));
+			margin-inline-start: var(--origam-field__input---padding-start, 0px);
+			margin-inline-end: var(--origam-field__input---padding-end, 0px);
+			max-width: calc(100% - var(--origam-field__input---padding-start, 0px) - var(--origam-field__input---padding-end, 0px));
 			pointer-events: none;
 			position: absolute;
 			top: calc(var(--origam-input---padding-top, 16px) + var(--origam-input---density, 0px) - 8px);
@@ -755,7 +809,8 @@ defineExpose({
 
 			#{$this}__outline {
 				&--start {
-					flex: 0 0 max(var(--origam-field---padding-start), min(var(--origam-field---border-radius, 8px), var(--origam-input__control---height, 36px)));
+					// Meme plancher que le padding, meme canal — cf. #800.
+					flex: 0 0 max(var(--origam-field---padding-start), var(--origam-field---corner-clearance));
 				}
 
 				&--end {
@@ -1060,7 +1115,7 @@ defineExpose({
 						// label"). Keep the 4px on the inline-end for notch
 						// breathing room.
 						margin-block: 0;
-						margin-inline: var(--origam-field__input---padding-start, 0) 4px;
+						margin-inline: var(--origam-field__input---padding-start, 0px) 4px;
 					}
 				}
 

package/dist/src/components/FileField/OrigamFileField.vue

@@ -387,6 +387,7 @@ import OrigamIcon from "../Icon/OrigamIcon.vue";
 import OrigamInput from "../Input/OrigamInput.vue";
 import OrigamFileFieldDragNDropItem from "./OrigamFileFieldDragNDropItem.vue";
 import OrigamFileFieldListItem from "./OrigamFileFieldListItem.vue";
+import { BORDER_PROP_KEYS } from "../../consts/Commons/border.const";
 import { useAdjacent } from "../../composables/Commons/adjacent.composable";
 import { useAdjacentInner } from "../../composables/Commons/adjacentInner.composable";
 import { useBothColor } from "../../composables/Commons/bothColor.composable";
@@ -453,6 +454,21 @@ const props = defineProps({
   prependInnerIcon: { type: null, required: false, default: MDI_ICONS.PAPERCLIP },
   clearIcon: { type: null, required: false },
   clearable: { type: Boolean, required: false, default: true },
+  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 },
@@ -471,19 +487,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 },
@@ -519,7 +522,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 isDropzoneMode = computed(() => Boolean(props.dropzone || props.dragndrop));
 const displayMode = computed(() => {
@@ -740,7 +745,7 @@ const dropzoneSubtitleText = 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", "style", "id", "active", "dirty", "disabled", "focused", "error"]);

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

@@ -6,7 +6,7 @@
 			:style="iconStyles"
 	>
 		<svg
-				aria-hidden="true"
+				:aria-hidden="ariaHidden"
 				class="origam-icon__svg"
 				focusable="false"
 				viewBox="0 0 24 24"
@@ -40,6 +40,7 @@ import { computed, StyleValue, toRef } from "vue";
 import { useBorder } from "../../composables/Commons/border.composable";
 import { useBothColor } from "../../composables/Commons/bothColor.composable";
 import { useDimension } from "../../composables/Commons/dimension.composable";
+import { useIconAccessibility } from "../../composables/Icon/iconAccessibility.composable";
 import { useMargin } from "../../composables/Commons/margin.composable";
 import { usePadding } from "../../composables/Commons/padding.composable";
 import { useProps } from "../../composables/Commons/props.composable";
@@ -101,6 +102,7 @@ defineSlots();
 const isArray = (data) => {
   return Array.isArray(data);
 };
+const { ariaHidden } = useIconAccessibility();
 const { colorClasses, colorStyles } = useBothColor(toRef(props, "bgColor"), toRef(props, "color"));
 const { borderClasses, borderStyles } = useBorder(props);
 const { paddingClasses, paddingStyles } = usePadding(props);

package/dist/src/components/Img/OrigamImg.vue

@@ -260,8 +260,11 @@ const getSrc = () => {
   if (img) currentSrc.value = img.currentSrc || img.src;
 };
 let timer = -1;
+const bootFrames = /* @__PURE__ */ new Set();
 onBeforeUnmount(() => {
   clearTimeout(timer);
+  for (const id2 of bootFrames) cancelAnimationFrame(id2);
+  bootFrames.clear();
 });
 const pollForSize = (img, timeout = 100) => {
   const poll = () => {
@@ -285,11 +288,15 @@ let stop = null;
 const markBooted = (val) => {
   if (val) {
     if (IN_BROWSER) {
-      requestAnimationFrame(() => {
-        requestAnimationFrame(() => {
+      const outer = requestAnimationFrame(() => {
+        bootFrames.delete(outer);
+        const inner = requestAnimationFrame(() => {
+          bootFrames.delete(inner);
           isBooted.value = true;
         });
+        bootFrames.add(inner);
       });
+      bootFrames.add(outer);
     }
     stop?.();
   }