origam 2.17.0 → 2.18.0

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

@@ -115,7 +115,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, nextTick, onMounted, ref, shallowRef, StyleValue, toRef } from "vue";
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, shallowRef, StyleValue, toRef } from "vue";
 import OrigamBtn from "../Btn/OrigamBtn.vue";
 import OrigamInfiniteScrollIntersect from "./OrigamInfiniteScrollIntersect.vue";
 import OrigamProgress from "../Progress/OrigamProgress.vue";
@@ -125,6 +125,7 @@ import { useLocale } from "../../composables/Commons/locale.composable";
 import { useProps } from "../../composables/Commons/props.composable";
 import { useStyle } from "../../composables/Commons/style.composable";
 import { useTypography } from "../../composables/Commons/typography.composable";
+import { IN_BROWSER } from "../../consts/Commons/commons.const";
 import { DIRECTION } from "../../enums/Commons/direction.enum";
 import { INFINITE_SCROLL_MODE, INFINITE_SCROLL_SIDE, INFINITE_SCROLL_STATUS } from "../../enums/InfiniteScroll/infinite-scroll.enum";
 import { PROGRESS_TYPE } from "../../enums/Progress/progress.enum";
@@ -213,25 +214,40 @@ const handleIntersect = ({ side, isIntersecting: _isIntersecting }) => {
     intersecting(side);
   }
 };
+const frames = /* @__PURE__ */ new Set();
+let disposed = false;
+const scheduleFrame = (cb) => {
+  if (disposed || !IN_BROWSER) return;
+  const id2 = window.requestAnimationFrame(() => {
+    frames.delete(id2);
+    cb();
+  });
+  frames.add(id2);
+};
+onBeforeUnmount(() => {
+  disposed = true;
+  for (const id2 of frames) window.cancelAnimationFrame(id2);
+  frames.clear();
+});
+const scheduleFrames = (count, cb) => {
+  scheduleFrame(count <= 1 ? cb : () => scheduleFrames(count - 1, cb));
+};
+const rearmIntersect = () => {
+  intersecting(currentSide.value);
+};
+const afterDoneTick = () => {
+  if (disposed) return;
+  if (status.value === INFINITE_SCROLL_STATUS.EMPTY || status.value === INFINITE_SCROLL_STATUS.ERROR) return;
+  if (status.value === INFINITE_SCROLL_STATUS.OK && currentSide.value === INFINITE_SCROLL_SIDE.START) {
+    setScrollAmount(getScrollSize() - previousScrollSize + getScrollAmount());
+  }
+  if (props.mode !== INFINITE_SCROLL_MODE.MANUAL) {
+    nextTick(() => scheduleFrames(3, rearmIntersect));
+  }
+};
 const done = (_status) => {
   status.value = _status;
-  nextTick(() => {
-    if (status.value === INFINITE_SCROLL_STATUS.EMPTY || status.value === INFINITE_SCROLL_STATUS.ERROR) return;
-    if (status.value === INFINITE_SCROLL_STATUS.OK && currentSide.value === INFINITE_SCROLL_SIDE.START) {
-      setScrollAmount(getScrollSize() - previousScrollSize + getScrollAmount());
-    }
-    if (props.mode !== INFINITE_SCROLL_MODE.MANUAL) {
-      nextTick(() => {
-        window.requestAnimationFrame(() => {
-          window.requestAnimationFrame(() => {
-            window.requestAnimationFrame(() => {
-              intersecting(currentSide.value);
-            });
-          });
-        });
-      });
-    }
-  });
+  nextTick(afterDoneTick);
 };
 const intersecting = (side) => {
   if (props.mode !== "manual" && !isIntersecting.value) return;

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

@@ -2,6 +2,7 @@
 	<component
 			:is="tag"
 			:id="id"
+			ref="rootRef"
 			class="origam-inline-edit"
 			:class="rootClasses"
 			:style="rootStyles"
@@ -76,8 +77,8 @@
 						data-cy="origam-inline-edit-input"
 						hide-details
 						@update:model-value="handleInput"
+						@focusout="handleFocusOut"
 						@keydown="handleKeyDown"
-						@blur="handleBlur"
 				>
 					<template
 							v-if="showActions"
@@ -131,8 +132,8 @@
 						data-cy="origam-inline-edit-input"
 						hide-details
 						@update:model-value="handleInput"
+						@focusout="handleFocusOut"
 						@keydown="handleKeyDown"
-						@blur="handleBlur"
 				>
 					<template
 							v-if="showActions"
@@ -260,6 +261,13 @@ const {
 }));
 const inputRef = ref(null);
 const errorId = `origam-inline-edit-error-${useId()}`;
+const rootRef = ref(null);
+const rootEl = () => {
+  const r = rootRef.value;
+  if (!r) return null;
+  const el = r instanceof Element ? r : r.$el;
+  return el instanceof HTMLElement ? el : null;
+};
 const displayValue = computed(() => {
   const v = props.modelValue;
   if (v === null || v === void 0) return "";
@@ -280,16 +288,34 @@ const handleEnterEdit = () => {
   edit();
   emit("edit");
 };
+let restoreFocusOnLeave = false;
+const noteTransition = (fromFocusOut) => {
+  if (fromFocusOut) {
+    restoreFocusOnLeave = false;
+    return;
+  }
+  if (typeof document === "undefined") {
+    restoreFocusOnLeave = false;
+    return;
+  }
+  const root = rootEl();
+  const active = document.activeElement;
+  restoreFocusOnLeave = !!root && !!active && root.contains(active);
+};
 const handleConfirm = () => {
+  noteTransition(false);
   void confirm();
 };
 const handleCancel = () => {
+  noteTransition(false);
   cancel();
 };
 const handleInput = (value) => {
   setValue(value ?? "");
 };
 const handleKeyDown = (event) => {
+  const target = event.target;
+  if (!(target instanceof HTMLInputElement) && !(target instanceof HTMLTextAreaElement)) return;
   if (event.key === "Enter" && props.confirmOnEnter && !props.multiline) {
     event.preventDefault();
     handleConfirm();
@@ -305,13 +331,28 @@ const handleKeyDown = (event) => {
     handleCancel();
   }
 };
-const handleBlur = () => {
+const handleFocusOut = (event) => {
   if (!props.confirmOnBlur) return;
+  if (!isEditing.value) return;
   if (isPending.value) return;
-  handleConfirm();
+  const root = rootEl();
+  const next = event.relatedTarget;
+  if (root && next instanceof Node && root.contains(next)) return;
+  noteTransition(true);
+  void confirm();
+};
+const restoreFocusAfterEdit = async () => {
+  if (!restoreFocusOnLeave) return;
+  restoreFocusOnLeave = false;
+  await nextTick();
+  const target = rootEl()?.querySelector('[data-cy="origam-inline-edit-display"]');
+  if (target && typeof target.focus === "function") target.focus();
 };
 watch(isEditing, async (next) => {
-  if (!next) return;
+  if (!next) {
+    void restoreFocusAfterEdit();
+    return;
+  }
   if (!props.autoFocus) return;
   await nextTick();
   const el = inputRef.value;

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

@@ -9,8 +9,7 @@
 		    v-if="hasPrepend"
 		    key="prepend"
 		    class="origam-input__prepend"
-		    :role="isPrependClickable ? 'button' : undefined"
-		    :tabindex="isPrependClickable ? 0 : undefined"
+		    v-bind="prependCommandAttrs"
 		    @click="handleClickPrepend"
 		    @keydown="handleKeydownPrepend"
     >
@@ -44,8 +43,7 @@
 				v-if="hasAppend"
 				key="append"
 				class="origam-input__append"
-				:role="isAppendClickable ? 'button' : undefined"
-				:tabindex="isAppendClickable ? 0 : undefined"
+				v-bind="appendCommandAttrs"
 				@click="handleClickAppend"
 				@keydown="handleKeydownAppend"
 		>
@@ -191,6 +189,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 },
@@ -226,8 +226,8 @@ const {
   onClickAppend: handleClickAppend,
   onKeydownPrepend: handleKeydownPrepend,
   onKeydownAppend: handleKeydownAppend,
-  isPrependClickable,
-  isAppendClickable
+  prependCommandAttrs,
+  appendCommandAttrs
 } = useAdjacent(props, toRef(props, "prependIcon"), toRef(props, "appendIcon"));
 const messages = computed(() => {
   if (props.errorMessages?.length || !isPristine.value && errorMessages.value.length) {

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

@@ -16,8 +16,10 @@
 						<origam-list-item
 								:active="isOpen"
 								:append-avatar="appendAvatar"
+								:append-aria-label="appendAriaLabel"
 								:append-icon="appendActivatorIcon"
 								:prepend-avatar="prependAvatar"
+								:prepend-aria-label="prependAriaLabel"
 								:prepend-icon="prependActivatorIcon"
 								:title="title"
 								:value="value"
@@ -112,6 +114,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 },
   activeClass: { type: String, required: false },
   hover: { type: [Boolean, Object], required: false },
   hoverClass: { type: String, required: false }

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

@@ -28,8 +28,7 @@
 					v-if="hasPrepend"
 					key="prepend"
 					class="origam-list-item__prepend"
-					:role="isPrependZoneFocusable ? 'button' : undefined"
-					:tabindex="isPrependZoneFocusable ? 0 : undefined"
+					v-bind="prependCommandAttrs"
 					@click="handleClickPrepend"
 					@keydown="handleKeydownPrepend"
 			>
@@ -92,8 +91,7 @@
 					v-if="hasAppend"
 					key="append"
 					class="origam-list-item__append"
-					:role="isAppendZoneFocusable ? 'button' : undefined"
-					:tabindex="isAppendZoneFocusable ? 0 : undefined"
+					v-bind="appendCommandAttrs"
 					@click="handleClickAppend"
 					@keydown="handleKeydownAppend"
 			>
@@ -123,6 +121,7 @@
 import { computed, onBeforeMount, StyleValue, toRef, useAttrs, useSlots, watch } from "vue";
 import OrigamAvatar from "../Avatar/OrigamAvatar.vue";
 import OrigamIcon from "../Icon/OrigamIcon.vue";
+import { useAccessibleCommand } from "../../composables/Commons/accessibleCommand.composable";
 import { useAdjacent } from "../../composables/Commons/adjacent.composable";
 import { useBothColor } from "../../composables/Commons/bothColor.composable";
 import { useDensity } from "../../composables/Commons/density.composable";
@@ -207,6 +206,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 },
   hover: { type: [Boolean, Object], required: false },
   hoverClass: { type: String, required: false },
   fontSize: { type: null, required: false },
@@ -261,6 +262,20 @@ const {
 } = useAdjacent(props, toRef(props, "prependIcon"), toRef(props, "appendIcon"));
 const isPrependZoneFocusable = computed(() => isPrependClickable.value && !link.isLink.value);
 const isAppendZoneFocusable = computed(() => isAppendClickable.value && !link.isLink.value);
+const prependCommandAttrs = useAccessibleCommand({
+  component: "OrigamListItem",
+  zone: "prepend",
+  prop: "prependAriaLabel",
+  active: isPrependZoneFocusable,
+  label: () => props.prependAriaLabel
+});
+const appendCommandAttrs = useAccessibleCommand({
+  component: "OrigamListItem",
+  zone: "append",
+  prop: "appendAriaLabel",
+  active: isAppendZoneFocusable,
+  label: () => props.appendAriaLabel
+});
 const isActive = computed(() => {
   return isActiveFlag.value || link.isActive?.value || isSelected.value;
 });
@@ -473,6 +488,55 @@ defineExpose({
 			--origam-list-item---padding-inline-end: var(--origam-list-item--slim---padding-inline-end, 8px);
 		}
 
+		/*********************************************************
+		 * Densité — la LIGNE fait autorité, la liste ne pose qu'un défaut
+		 *
+		 * @description
+		 * Ces trois règles REDÉCLARENT `--origam-list---density`, la même
+		 * custom property que `.origam-list--density-*` pose sur la liste
+		 * (`OrigamList.vue:453-463`), avec les mêmes valeurs. Elles
+		 * n'ajoutent PAS un second terme au `calc()` de la règle de base.
+		 *
+		 * @description
+		 * ⛔ CETTE DISTINCTION EST TOUT LE TICKET (#571). Mesuré en
+		 * Chromium, liste en `compact` :
+		 *
+		 *   redéclaration (ici)          min-height = 48px  — inchangé
+		 *   second terme dans le calc()  min-height = 40px  — -8px compté DEUX FOIS
+		 *
+		 * Une redéclaration écrit la même valeur sur un élément plus
+		 * proche : le `calc()` la lit une fois. C'est ce qui rend ce
+		 * câblage gratuit en rendu à l'intérieur d'une liste, et c'est la
+		 * promesse sur laquelle l'arbitrage a été rendu.
+		 *
+		 * @description
+		 * Ce que ça répare : une ligne SANS liste ancêtre n'avait aucune
+		 * densité — la variable ne venait que de la liste, donc la prop
+		 * rendait 56px quelle que soit sa valeur. Mesuré avant/après :
+		 * `density="compact"` hors liste passe de 56px à 48px.
+		 *
+		 * @description
+		 * ⚠️ `withDefaults` ne pose AUCUNE densité par défaut et
+		 * `useDensity` n'émet rien sur `null`/`undefined` : une ligne à
+		 * laquelle personne ne passe `density` n'émet donc aucune de ces
+		 * classes, et la valeur de la liste la traverse intacte. C'est ce
+		 * qui préserve `<origam-list density="comfortable">`. Le thème
+		 * livré posait `density: 'compact'` sur CHAQUE ligne, ce qui aurait
+		 * fait gagner la ligne contre la liste sur tout le catalogue —
+		 * l'entrée a été retirée de `origam.theme.ts` dans le même lot.
+		 ********************************************************/
+		&--density-default {
+			--origam-list---density: 0px;
+		}
+
+		&--density-compact {
+			--origam-list---density: -8px;
+		}
+
+		&--density-comfortable {
+			--origam-list---density: 8px;
+		}
+
 		// Row-height scale, aligned rung for rung on the control-height scale
 		// (`--origam-input__control---height-{sm,md,lg,xl}` = 28/36/44/52px) so
 		// a row and a field of the same `size` share an identical vertical

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

@@ -20,7 +20,7 @@
 					:style="getItemStyle(idx)"
 			>
 				<component
-						:is="{ render: () => child }"
+						:is="child"
 				/>
 			</div>
 		</template>
@@ -30,6 +30,7 @@
 <script lang="ts" setup>
 import {
   computed,
+  onBeforeUnmount,
   onMounted,
   ref,
   StyleValue,
@@ -138,14 +139,29 @@ const { containerRef, setItem, layout, relayout } = useMasonry({
   breakpointsRef: toRef(props, "columnBreakpoints"),
   alignRef: toRef(props, "align")
 });
+const frames = /* @__PURE__ */ new Set();
+let disposed = false;
+const scheduleFrame = (cb) => {
+  if (disposed || typeof window === "undefined") return;
+  const id = window.requestAnimationFrame(() => {
+    frames.delete(id);
+    cb();
+  });
+  frames.add(id);
+};
+onBeforeUnmount(() => {
+  disposed = true;
+  for (const id of frames) window.cancelAnimationFrame(id);
+  frames.clear();
+});
 onMounted(() => {
   containerRef.value = rootEl.value;
   resolveGapPx();
-  requestAnimationFrame(() => relayout());
+  scheduleFrame(() => relayout());
 });
 const { theme, mode } = useTheme();
 watch([() => props.gap, theme, mode], () => {
-  requestAnimationFrame(resolveGapPx);
+  scheduleFrame(resolveGapPx);
 });
 const childrenVNodes = computed(() => {
   const raw = slots.default?.() ?? [];

package/dist/src/components/Menu/OrigamMenu.vue

@@ -76,7 +76,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, inject, mergeProps, nextTick, provide, ref, shallowRef, StyleValue, toRef, watch } from "vue";
+import { computed, inject, mergeProps, nextTick, onBeforeUnmount, provide, ref, shallowRef, StyleValue, toRef, watch } from "vue";
 import OrigamList from "../List/OrigamList.vue";
 import OrigamListGroup from "../List/OrigamListGroup.vue";
 import OrigamListItem from "../List/OrigamListItem.vue";
@@ -206,10 +206,6 @@ const props = defineProps({
   to: { type: null, required: false },
   exact: { type: Boolean, required: false },
   ripple: { type: [Boolean, Object], required: false },
-  appendAvatar: { type: String, required: false },
-  appendIcon: { type: null, required: false },
-  prependAvatar: { type: String, required: false },
-  prependIcon: { type: null, required: false },
   hover: { type: [Boolean, Object], required: false },
   hoverClass: { type: String, required: false },
   fontSize: { type: null, required: false },
@@ -240,6 +236,22 @@ const id = computed(() => props.id || `origam-menu-${uid}`);
 const origamOverlayRef = ref();
 const parent = inject(ORIGAM_MENU_KEY, null);
 const openChildren = shallowRef(0);
+let disposed = false;
+const timers = /* @__PURE__ */ new Set();
+const scheduleTimeout = (cb, delay) => {
+  if (disposed) return;
+  const id2 = setTimeout(() => {
+    timers.delete(id2);
+    if (disposed) return;
+    cb();
+  }, delay);
+  timers.add(id2);
+};
+onBeforeUnmount(() => {
+  disposed = true;
+  for (const id2 of timers) clearTimeout(id2);
+  timers.clear();
+});
 provide(ORIGAM_MENU_KEY, {
   register() {
     ++openChildren.value;
@@ -248,7 +260,7 @@ provide(ORIGAM_MENU_KEY, {
     --openChildren.value;
   },
   closeParents() {
-    setTimeout(() => {
+    scheduleTimeout(() => {
       if (!openChildren.value) {
         isActive.value = false;
         parent?.closeParents();
@@ -316,7 +328,7 @@ const handleActivatorKeydown = (e) => {
   } else if (keyDown.includes(e.key)) {
     isActive.value = true;
     e.preventDefault();
-    setTimeout(() => setTimeout(() => handleActivatorKeydown(e)));
+    scheduleTimeout(() => scheduleTimeout(() => handleActivatorKeydown(e)));
   }
 };
 const activatorProps = computed(() => {
@@ -382,6 +394,50 @@ defineExpose(forwardRefs({
 		box-shadow: none;
 	}
 
+	/**
+	 * #742 — le plafond de hauteur et le défilement DOIVENT porter sur la
+	 * même boîte.
+	 *
+	 * Deux plafonds coexistent, et aucun des deux n'était le scrollport :
+	 *
+	 *   1. `.origam-overlay__content` — plafond posé en INLINE par
+	 *      `useDimension` quand le consommateur passe `max-height`
+	 *      (c'est le chemin d'`OrigamSelect`, qui passe `:max-height="310"`),
+	 *      ou par la stratégie de placement quand il n'y a pas de prop.
+	 *   2. `.origam-menu__content` — plafond du token
+	 *      `--origam-menu---max-height`.
+	 *
+	 * Le `overflow` était, lui, posé sur `.origam-menu__list` — une boîte
+	 * SANS plafond (`max-height: none`), donc `clientHeight === scrollHeight`
+	 * et rien à faire défiler. Mesuré avant correctif, Chromium, 30 options :
+	 * overlay 240/1453, menu__content 580/1448, list 1448/1448, les trois à
+	 * `scrollTop === 0`. Le nom même du token (`--origam-menu__content---overflow`)
+	 * disait déjà où la règle devait vivre.
+	 *
+	 * Le correctif rend `.origam-menu__content` — la boîte qui porte la
+	 * surface visible, donc celle dont l'ascenseur doit épouser le rayon et
+	 * le fond — scrollport :
+	 *
+	 *   • `overflow` revient sur `.origam-menu__content` (token inchangé) ;
+	 *   • le parent `.origam-overlay__content` devient un conteneur flex
+	 *     colonne, ce qui rend son plafond (inline ou calculé) opposable à
+	 *     son enfant : sans cela un `max-height` posé sur le PARENT ne
+	 *     contraint pas un enfant en flux normal, et le contenu ressort.
+	 *   • `min-height: 0` lève le plancher `min-height: auto` des items
+	 *     flex, sans quoi l'enfant refuserait de descendre sous la hauteur
+	 *     de son contenu et ne défilerait toujours pas.
+	 *
+	 * Les sous-menus ne sont PAS rognés : `useTeleport` résout
+	 * `props.attach || props.contained` à `false` → `document.body`, donc
+	 * chaque niveau est téléporté dans `body > .origam-overlay-container` et
+	 * n'est jamais un descendant DOM du scrollport. Vérifié en runtime
+	 * (`root.contains(flyout) === false`).
+	 */
+	.origam-menu :deep(.origam-overlay__content) {
+		display: flex;
+		flex-direction: column;
+	}
+
 	.origam-menu__content {
 		background: var(--origam-menu---background, var(--origam-color__surface---raised));
 		backdrop-filter: var(--origam-menu---backdrop-filter, none);
@@ -390,11 +446,25 @@ defineExpose(forwardRefs({
 		border-radius: var(--origam-menu---border-radius, 8px);
 		box-shadow: var(--origam-menu---box-shadow);
 		max-height: var(--origam-menu---max-height, calc(100vh - 32px));
-		display: inline-block;
+		min-height: 0;
+		overflow: var(--origam-menu__content---overflow, auto);
+		/**
+		 * `block`, plus `inline-block`. Un item flex est BLOCKIFIÉ : depuis
+		 * que le parent est un conteneur flex, `inline-block` ne pouvait
+		 * plus gagner — le déclarer aurait été exactement le genre de
+		 * déclaration morte que ce ticket corrige. Le rétrécissement au
+		 * contenu était déjà assuré par `width: max-content`, pas par
+		 * `inline-block` : mesuré avant/après sur 8 panneaux (menu, select,
+		 * contextual-menu, date-picker-field, color-picker-field,
+		 * media-controller), le rectangle du panneau est IDENTIQUE au pixel.
+		 * Seule la boîte parente perd 5px — le descendeur de la line-box
+		 * qu'un enfant inline-block imposait à son bloc parent, bande
+		 * transparente sous chaque panneau.
+		 */
+		display: block;
 		width: max-content;
 
 		.origam-menu__list {
-			overflow: var(--origam-menu__content---overflow, auto);
 			max-width: var(--origam-menu__content---max-width, 320px);
 			padding: var(--origam-menu__content---padding, 4px);
 		}

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

@@ -348,6 +348,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 },
   density: { type: null, required: false },
   text: { type: String, required: false },
@@ -367,19 +382,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 },
@@ -415,7 +417,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", "click:clear", "increment", "decrement", "update:focused", "click:appendInner", "click:prependInner", "update:modelValue", "click:append", "click:prepend"]);
 defineSlots();
@@ -733,7 +737,11 @@ defineExpose(forwardRefs({
 		}
 
 		:deep(.origam-field--appended) {
-			--origam-field---padding-end: 0;
+			// #800 — l'unite est obligatoire (`0` nu = `<number>`, jete toute
+			// declaration `max()` / `calc()` qui le lit). Sans effet de rendu ici
+			// (mesure Chromium) : `--padding-end` n'est pas un terme du plancher,
+			// il est passe tel quel comme seconde valeur de `padding-inline`.
+			--origam-field---padding-end: 0px;
 		}
 
 		&__control {
@@ -761,7 +769,9 @@ defineExpose(forwardRefs({
 			}
 
 			:deep(.origam-field--prepended) {
-				--origam-field---padding-start: 0;
+				// #800 — idem : l'unite est obligatoire. Sans effet de rendu, la
+				// cible etant `--prepended`, qui n'applique pas le plancher.
+				--origam-field---padding-start: 0px;
 			}
 		}