origam 2.17.1 → 2.18.0

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

@@ -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,8 @@ 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 },
@@ -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;
 			}
 		}
 

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

@@ -1,5 +1,6 @@
 <template>
 	<div
+			:id="styleId"
 			:aria-label="label || undefined"
 			:class="otpInputFieldClasses"
 			:style="otpInputFieldStyles"
@@ -148,7 +149,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, nextTick, ref, StyleValue, useAttrs, useSlots, watch } from "vue";
+import { computed, nextTick, onBeforeUnmount, ref, StyleValue, useAttrs, useSlots, watch } from "vue";
 import OrigamField from "../Field/OrigamField.vue";
 import OrigamOverlay from "../Overlay/OrigamOverlay.vue";
 import OrigamProgress from "../Progress/OrigamProgress.vue";
@@ -201,6 +202,8 @@ 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 },
   borderTop: { type: [Boolean, Number, String], required: false },
   borderLeft: { type: [Boolean, Number, String], required: false },
@@ -261,14 +264,26 @@ const props = defineProps({
   readonly: { type: Boolean, required: false },
   rules: { type: Array, required: false },
   validateOn: { type: null, required: false },
-  validationValue: { type: null, required: false },
-  appendAvatar: { type: String, required: false },
-  appendIcon: { type: null, required: false },
-  prependAvatar: { type: String, required: false },
-  prependIcon: { type: null, required: false }
+  validationValue: { type: null, required: false }
 });
 const emits = defineEmits(["finish", "click:control", "mousedown:control", "update:modelValue", "update:focused", "click:appendInner", "click:prependInner", "click:clear"]);
 defineSlots();
+let disposed = false;
+const frames = /* @__PURE__ */ new Set();
+const scheduleFrame = (cb) => {
+  if (disposed) return;
+  const id2 = requestAnimationFrame(() => {
+    frames.delete(id2);
+    if (disposed) return;
+    cb();
+  });
+  frames.add(id2);
+};
+onBeforeUnmount(() => {
+  disposed = true;
+  for (const id2 of frames) cancelAnimationFrame(id2);
+  frames.clear();
+});
 const { filterProps } = useProps(props);
 const { t } = useLocale();
 const attrs = useAttrs();
@@ -376,12 +391,12 @@ const handleKeydown = (e) => {
     if (focusIndex.value > 0 && e.key === "Backspace") {
       target = "prev";
     } else {
-      requestAnimationFrame(() => {
+      scheduleFrame(() => {
         inputRef.value[index]?.select();
       });
     }
   }
-  requestAnimationFrame(() => {
+  scheduleFrame(() => {
     if (target != null) {
       focusChild(contentRef.value, target);
     }
@@ -454,7 +469,7 @@ const otpInputFieldClasses = computed(() => {
     props.class
   ];
 });
-const { id: styleId, css, load, isLoaded, unload } = useStyle(otpInputFieldStyles);
+const { id: styleId, css, load, isLoaded, unload } = useStyle(otpInputFieldStyles, () => props.id);
 defineExpose(forwardRefs({
   blur: () => {
     inputRef.value?.forEach((input) => input.blur());
@@ -493,8 +508,17 @@ defineExpose(forwardRefs({
 
 		.origam-field {
 			height: 100%;
-			--origam-field---padding-start: 0;
-			--origam-field---padding-end: 0;
+			// ⛔ #800 — une cellule OTP n'a ni etiquette ni texte aligne au bord :
+			// son chiffre est CENTRE. Le plancher de degagement des coins d'
+			// `OrigamField` n'y protege de rien et decentre le chiffre de 2px
+			// (mesure Chromium : `padding-inline` 4px / 0px). On le neutralise
+			// explicitement. Jusqu'a #800 le meme rendu etait obtenu par un `0`
+			// SANS UNITE qui rendait la declaration invalide — le bon rendu
+			// reposait donc sur une erreur de parse, et serait tombe au premier
+			// refactor du `max()`.
+			--origam-field---corner-clearance: 0px;
+			--origam-field---padding-start: 0px;
+			--origam-field---padding-end: 0px;
 		}
 
 		&__divider {

package/dist/src/components/PasswordField/OrigamPasswordField.vue

@@ -389,6 +389,8 @@ 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 },
   borderTop: { type: [Boolean, Number, String], required: false },
   borderLeft: { type: [Boolean, Number, String], required: false },
@@ -456,7 +458,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", "update:strength", "update:focused", "click:appendInner", "click:prependInner", "click:clear", "update:modelValue", "click:append", "click:prepend"]);
 defineSlots();

package/dist/src/components/Radio/OrigamRadio.vue

@@ -182,6 +182,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/Radio/OrigamRadioGroup.vue

@@ -13,16 +13,21 @@
 					v-bind="{id, messagesId, isDisabled, isReadonly, isValid}"
 			>
 
-				<slot
-						name="label"
-						v-bind="{label, required}"
+				<div
+						:id="groupLabelId"
+						class="origam-radio-group__label"
 				>
-					<origam-label
-							:id="id"
-							:required="required"
-							:text="label"
-					/>
-				</slot>
+					<slot
+							name="label"
+							v-bind="{label, required}"
+					>
+						<origam-label
+								:required="required"
+								:text="label"
+								tag="span"
+						/>
+					</slot>
+				</div>
 
 				<origam-defaults-provider :defaults="radioDefaults">
 					<origam-selection-control-group
@@ -30,7 +35,7 @@
 							ref="origamSelectionControlGroupRef"
 							v-model="model"
 							:aria-describedby="messagesId"
-							:aria-labelledby="label ? id : undefined"
+							:aria-labelledby="groupLabelledBy"
 							:disabled="isDisabled"
 							:items="items"
 							:multiple="false"
@@ -141,6 +146,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 },
@@ -161,7 +168,7 @@ const props = defineProps({
   activeClass: { type: String, required: false },
   items: { type: [Array, Object], required: false }
 });
-defineSlots();
+const slots = defineSlots();
 defineEmits(["update:modelValue"]);
 const { filterProps } = useProps(props);
 const origamSelectionControlGroupRef = ref();
@@ -172,6 +179,10 @@ const id = computed(() => {
   return props.id || `radio-group-${uid}`;
 });
 const model = useVModel(props, "modelValue");
+const groupLabelId = computed(() => `${id.value}-label`);
+const groupLabelledBy = computed(() => {
+  return props.label || slots.label ? groupLabelId.value : void 0;
+});
 const [rootAttrs, controlAttrs] = filterInputAttrs(attrs);
 const inputProps = computed(() => {
   return origamInputRef.value?.filterProps(props, ["modelValue", "id", "focused", "style", "class"]);
@@ -213,3 +224,17 @@ defineExpose({
   styleId
 });
 </script>
+
+<style lang="scss" scoped>
+	/*
+	 * Le wrapper n'existe que pour porter l'id cible d'`aria-labelledby`
+	 * (#814). `display: contents` le retire de l'arbre des boites : les
+	 * enfants du slot `label` restent les elements flex directs de
+	 * `.origam-input__control`, donc la mise en page est inchangee — mesure
+	 * avant/apres identique au pixel sur les variantes « Default » et
+	 * « Slots - Label ».
+	 */
+	.origam-radio-group__label {
+		display: contents;
+	}
+</style>