origam 2.17.1 → 2.18.1

package/dist/src/assets/scss/tokens/_light.scss

@@ -11,16 +11,78 @@
  * This file is now HAND-MAINTAINED SOURCE: edit it directly. There is no
  * regeneration step, and no "do not edit" rule any more. A design-token
  * pipeline may be reintroduced later, once the DS is stable.
+ *
+ * ── #789 — CONTRASTE : POURQUOI CES PALIERS-LÀ ─────────────────────────────
+ * `feedback--{success,warning,info}---bg` portent tous un `---fg` BLANC. Le
+ * couple doit donc tenir 4.5:1 (WCAG AA, texte). Mesuré en Chromium, alpha
+ * composité, avec témoins calculables à la main :
+ *
+ *     success   green-500 #4caf50  2.78  →  green-700 #15803d  5.02
+ *     warning   amber-600 #fb8c00  2.37  →  amber-700 #b45309  5.02
+ *     info      blue-500  #2196f3  3.12  →            #2563eb  5.17
+ *
+ * ⛔ Ne pas « re-éclaircir » ces trois paliers sans remesurer : sur cette
+ * palette, aucun palier plus clair ne tient AA avec du texte blanc. La
+ * mesure et ses témoins vivent dans
+ * `packages/tests/e2e/token-intent-contrast.spec.ts` — elle rougit ici.
+ *
+ * `info---bg` est le seul littéral du lot : `#2563eb` n'existe pas dans la
+ * palette primitive (son `blue---600` vaut `#1d4ed8`, soit le 700 de
+ * Tailwind). La valeur est celle de `origam.theme.ts`, ce qui ferme du même
+ * coup la divergence feuille ↔ thème que #793 suit.
+ *
+ * ── #871 — POURQUOI `[data-mode="light"]` DANS LA LISTE ────────────────────
+ * Les ~1 792 déclarations DÉRIVÉES de ce bloc — la forme
+ * `--origam-title---color: var(--origam-color__text---primary)` —
+ * ne se ré-évaluent QUE sur un élément que ce sélecteur matche. Sur tout autre
+ * élément, la valeur héritée est déjà SUBSTITUÉE — c'est la sémantique des
+ * custom properties, pas un bug : `--a: var(--b)` posé à `:root`, `--b`
+ * réécrit sur un enfant, et `--a` garde sur l'enfant la valeur calculée à la
+ * racine.
+ *
+ * Sans `[data-mode="light"]`, un sous-arbre `<OrigamThemeProvider mode="light">`
+ * à l'intérieur d'une page sombre gardait donc les 1 792 dérivés GELÉS sur les
+ * valeurs sombres de la racine. C'est le pendant clair du défaut mesuré en
+ * sombre par #871.
+ *
+ * ⛔ SPÉCIFICITÉ (0,1,0), VOLONTAIREMENT. Le bloc runtime d'une marque claire
+ * (`applyThemes()` sérialise `[data-theme="cartoon"]` sans `data-mode`) est
+ * lui aussi (0,1,0) et est injecté dans `<head>` APRÈS cette feuille : à
+ * égalité, l'ordre source tranche et la marque gagne. Monter ce sélecteur à
+ * (0,2,0) (p. ex. `[data-mode="light"]:not([data-theme="dark"])`) le ferait
+ * perdre, et cette feuille repeindrait par-dessus chaque marque claire.
+ *
+ * ── #871 — `system-bar` / `tooltip` : RIEN NE CHANGE ICI ──────────────────
+ * Ces deux composants peignent une surface SOMBRE dans les deux modes
+ * (`neutral---700` / `neutral---800`) et lisent `text---inverse`, qui vaut
+ * blanc EN CLAIR — correct, donc inchangé. C'est en SOMBRE que le même token
+ * vaut de l'encre et rend le texte illisible ; le correctif est donc dans
+ * `dark.css` seul. Voir son en-tête, y compris la piste écartée (passer les
+ * DEUX feuilles à `text---onColor`, qui a mesuré +2 violations en clair sur
+ * la marque `cartoon`).
  */
 :root,
-[data-theme="light"] {
+[data-theme="light"],
+[data-mode="light"] {
   --origam-color__surface---default: var(--origam-color__neutral---0);
   --origam-color__surface---raised: var(--origam-color__neutral---0);
   --origam-color__surface---overlay: var(--origam-color__neutral---100);
   --origam-color__surface---sunken: var(--origam-color__neutral---50);
   --origam-color__surface---disabled: var(--origam-color__neutral---200);
   --origam-color__surface---inverse: var(--origam-color__neutral---900);
-  --origam-color__text---primary: var(--origam-color__neutral---900);
+  /* #615 — `950`, PAS `900`. Cette feuille NE gagne PAS la cascade au niveau
+     document : `createOrigam()` appelle `applyThemes()`, qui serialise
+     `origamLightTheme` (src/themes/origam.theme.ts) en un bloc `:root { … }`
+     injecte dans <head> APRES cette feuille. A specificite egale (0,1,0) c'est
+     l'ordre source qui tranche, donc le bloc runtime gagne — et il pose
+     `#0a0a0a`, soit neutral-950. Tant que cette ligne disait `900`, le meme
+     theme « light » peignait DEUX couleurs : `#0a0a0a` a la racine et
+     `#171717` dans un sous-arbre `<OrigamThemeProvider theme="light">` (ou
+     `[data-theme="light"]` matche alors que `:root` ne matche plus). Les deux
+     valeurs mesurees en Chromium ; le contraste sur `surface.default` passe de
+     17.93:1 a 19.80:1. Si cette ligne doit revenir a `900`, c'est
+     `origam.theme.ts` qu'il faut changer AVEC, sinon la divergence revient. */
+  --origam-color__text---primary: var(--origam-color__neutral---950);
   --origam-color__text---secondary: var(--origam-color__neutral---600);
   --origam-color__text---disabled: var(--origam-color__neutral---400);
   --origam-color__text---inverse: var(--origam-color__neutral---0);
@@ -48,26 +110,26 @@
   --origam-color__action--ghost---bgDisabled: rgba(0, 0, 0, 0);
   --origam-color__action--ghost---fg: var(--origam-color__primary---600);
   --origam-color__action--ghost---fgDisabled: var(--origam-color__neutral---400);
-  --origam-color__feedback--success---bg: var(--origam-color__green---500);
+  --origam-color__feedback--success---bg: var(--origam-color__green---700);
   --origam-color__feedback--success---bgSubtle: var(--origam-color__green---50);
   --origam-color__feedback--success---fg: var(--origam-color__neutral---0);
   --origam-color__feedback--success---fgSubtle: var(--origam-color__green---700);
-  --origam-color__feedback--success---border: var(--origam-color__green---500);
-  --origam-color__feedback--warning---bg: var(--origam-color__amber---600);
+  --origam-color__feedback--success---border: var(--origam-color__green---700);
+  --origam-color__feedback--warning---bg: var(--origam-color__amber---700);
   --origam-color__feedback--warning---bgSubtle: var(--origam-color__amber---50);
   --origam-color__feedback--warning---fg: var(--origam-color__neutral---0);
   --origam-color__feedback--warning---fgSubtle: var(--origam-color__amber---700);
-  --origam-color__feedback--warning---border: var(--origam-color__amber---600);
+  --origam-color__feedback--warning---border: var(--origam-color__amber---700);
   --origam-color__feedback--danger---bg: var(--origam-color__red---600);
   --origam-color__feedback--danger---bgSubtle: var(--origam-color__red---50);
   --origam-color__feedback--danger---fg: var(--origam-color__neutral---0);
   --origam-color__feedback--danger---fgSubtle: var(--origam-color__red---700);
   --origam-color__feedback--danger---border: var(--origam-color__red---400);
-  --origam-color__feedback--info---bg: var(--origam-color__blue---500);
+  --origam-color__feedback--info---bg: #2563eb;
   --origam-color__feedback--info---bgSubtle: var(--origam-color__blue---50);
   --origam-color__feedback--info---fg: var(--origam-color__neutral---0);
   --origam-color__feedback--info---fgSubtle: var(--origam-color__blue---700);
-  --origam-color__feedback--info---border: var(--origam-color__blue---500);
+  --origam-color__feedback--info---border: #2563eb;
   --origam-color__overlay---scrim: var(--origam-color---white);
   --origam-gradient---sunset: linear-gradient(135deg, #ff7e5f, #feb47b);
   --origam-gradient---ocean: linear-gradient(135deg, #2193b0, #6dd5ed);
@@ -89,7 +151,7 @@
   --origam-btn---border-style: solid;
   --origam-btn---border-color: currentColor;
   --origam-btn---position: relative;
-  --origam-btn---density: 0;
+  --origam-btn---density: 0px;
   --origam-btn---width: auto;
   --origam-btn---min-width: 64px;
   --origam-btn---max-width: 100%;
@@ -920,8 +982,8 @@
   --origam-field__input---padding-block-filled: 20px;
   --origam-field__input---padding-top: var(--origam-field__input---padding-block-md);
   --origam-field__input---padding-bottom: var(--origam-field__input---padding-block-md);
-  --origam-field__input---padding-start: 0;
-  --origam-field__input---padding-end: 0;
+  --origam-field__input---padding-start: 0px;
+  --origam-field__input---padding-end: 0px;
   --origam-field__input---opacity: 0.7;
   --origam-field__label---font-size: 0.75em;
   --origam-field__label---transition-duration: var(--origam-motion__duration---normal);
@@ -1431,6 +1493,11 @@
   --origam-table__header-cell---padding-inline: var(--origam-space---4);
   --origam-table__header-cell---border-bottom-color: var(--origam-color__border---default);
   --origam-table__header-cell---border-bottom-width: var(--origam-border__width---2);
+  /* #840 — derived from the SAME density-aware padding-block token, so it
+     never drifts out of sync with it: 2 * padding-block + border-bottom
+     + 18px (measured content-box line height of a single-line header
+     cell in Chromium, constant across the 3 density rungs). */
+  --origam-table__header-cell---height: calc((2 * var(--origam-table__header-cell---padding-block, 12px)) + var(--origam-table__header-cell---border-bottom-width, 2px) + 18px);
   --origam-table__cell---padding-block: var(--origam-space---3);
   --origam-table__cell---padding-inline: var(--origam-space---4);
   --origam-table__cell---border-color: var(--origam-color__border---subtle);

package/dist/src/components/Alert/OrigamAlert.vue

@@ -20,8 +20,7 @@
         <div
           key="prepend"
           class="origam-alert__prepend"
-          :role="isPrependClickable ? 'button' : undefined"
-          :tabindex="isPrependClickable ? 0 : undefined"
+          v-bind="prependCommandAttrs"
           @click="handleClickPrepend"
           @keydown="handleKeydownPrepend"
         >
@@ -71,8 +70,7 @@
         <div
           key="append"
           class="origam-alert__append"
-          :role="isAppendClickable ? 'button' : undefined"
-          :tabindex="isAppendClickable ? 0 : undefined"
+          v-bind="appendCommandAttrs"
           @click="handleClickAppend"
           @keydown="handleKeydownAppend"
         >
@@ -202,6 +200,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 },
   fontSize: { type: null, required: false },
   fontWeight: { type: null, required: false },
   lineHeight: { type: null, required: false },
@@ -241,8 +241,8 @@ const {
   onClickAppend: handleClickAppend,
   onKeydownPrepend: handleKeydownPrepend,
   onKeydownAppend: handleKeydownAppend,
-  isPrependClickable,
-  isAppendClickable,
+  prependCommandAttrs,
+  appendCommandAttrs,
   hasAppend,
   hasPrepend
 } = useAdjacent(props, prependIcon, appendIcon);

package/dist/src/components/Avatar/OrigamAvatar.vue

@@ -56,6 +56,7 @@ import { useStateFlag } from "../../composables/Commons/stateFlag.composable";
 import { useStyle } from "../../composables/Commons/style.composable";
 import { useTypography } from "../../composables/Commons/typography.composable";
 import { isEmpty } from "../../utils/Commons/commons.util";
+import { isIntent, tokenStylesForIntent } from "../../utils/Commons/color.util";
 import { computed, useSlots } from "vue";
 const props = defineProps({
   icon: { type: null, required: false },
@@ -116,7 +117,19 @@ defineSlots();
 const { filterProps } = useProps(props);
 const { classes: hoverClasses, isOn: isHover, config: hoverState, unset: handleMouseleave, set: handleMouseenter } = useStateFlag(props, { state: "hover" });
 const { classes: activeClasses, isOn: isActive, config: activeState, toggle: handleClick } = useStateFlag(props, { state: "active" });
-const { colorClasses, colorStyles, borderClasses, borderStyles, roundedClasses, roundedStyles, elevationClasses, elevationStyles, paddingClasses, paddingStyles, marginClasses, marginStyles } = useStateEffect(props, isHover, isActive, hoverState, activeState);
+const { color: effectiveColor, bgColor: effectiveBgColor, colorClasses, colorStyles, borderClasses, borderStyles, roundedClasses, roundedStyles, elevationClasses, elevationStyles, paddingClasses, paddingStyles, marginClasses, marginStyles } = useStateEffect(props, isHover, isActive, hoverState, activeState);
+const avatarColorStyles = computed(() => {
+  const bg = effectiveBgColor.value;
+  const fg = effectiveColor.value;
+  if (!bg || bg === "ghost" || !isIntent(bg) || fg != null && isIntent(fg)) {
+    return colorStyles.value;
+  }
+  const intentFg = tokenStylesForIntent(bg, "default").color;
+  return [
+    ...colorStyles.value.filter((decl) => !decl.startsWith("color:")),
+    `color: ${intentFg}`
+  ];
+});
 const { typographyStyles } = useTypography(props, "avatar");
 const slots = useSlots();
 const hasImage = computed(() => {
@@ -149,7 +162,7 @@ const avatarStyles = computed(() => {
     paddingStyles.value,
     marginStyles.value,
     sizeStyles.value,
-    colorStyles.value,
+    avatarColorStyles.value,
     elevationStyles.value,
     typographyStyles.value,
     props.style

package/dist/src/components/Badge/OrigamBadge.vue

@@ -29,8 +29,7 @@
 								<span
 										key="prepend"
 										class="origam-badge__prepend"
-										:role="isPrependClickable ? 'button' : undefined"
-										:tabindex="isPrependClickable ? 0 : undefined"
+										v-bind="prependCommandAttrs"
 										@click="handleClickPrepend"
 										@keydown="handleKeydownPrepend"
 								>
@@ -63,8 +62,7 @@
 								<span
 										key="append"
 										class="origam-badge__append"
-										:role="isAppendClickable ? 'button' : undefined"
-										:tabindex="isAppendClickable ? 0 : undefined"
+										v-bind="appendCommandAttrs"
 										@click="handleClickAppend"
 										@keydown="handleKeydownAppend"
 								>
@@ -154,7 +152,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(["click:append", "click:prepend", "update:hover"]);
 defineSlots();
@@ -171,8 +171,8 @@ const {
   onClickAppend: handleClickAppend,
   onKeydownPrepend: handleKeydownPrepend,
   onKeydownAppend: handleKeydownAppend,
-  isPrependClickable,
-  isAppendClickable,
+  prependCommandAttrs,
+  appendCommandAttrs,
   hasAppend,
   hasPrepend
 } = useAdjacent(props, prependIcon, appendIcon);

package/dist/src/components/Breadcrumb/OrigamBreadcrumbItem.vue

@@ -15,8 +15,7 @@
       <span
 		      key="prepend"
 		      class="origam-breadcrumb-item__prepend"
-		      :role="isPrependZoneFocusable ? 'button' : undefined"
-		      :tabindex="isPrependZoneFocusable ? 0 : undefined"
+		      v-bind="prependCommandAttrs"
 		      @click="handleClickPrepend"
 		      @keydown="handleKeydownPrepend"
       >
@@ -45,8 +44,7 @@
       <span
 		      key="append"
 		      class="origam-breadcrumb-item__append"
-		      :role="isAppendZoneFocusable ? 'button' : undefined"
-		      :tabindex="isAppendZoneFocusable ? 0 : undefined"
+		      v-bind="appendCommandAttrs"
 		      @click="handleClickAppend"
 		      @keydown="handleKeydownAppend"
       >
@@ -73,6 +71,7 @@
 import OrigamAvatar from "../Avatar/OrigamAvatar.vue";
 import OrigamIcon from "../Icon/OrigamIcon.vue";
 import vContrast from "../../directives/Contrast/contrast.directive";
+import { useAccessibleCommand } from "../../composables/Commons/accessibleCommand.composable";
 import { useAdjacent } from "../../composables/Commons/adjacent.composable";
 import { useDensity } from "../../composables/Commons/density.composable";
 import { useLink } from "../../composables/Commons/link.composable";
@@ -132,6 +131,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 },
   active: { type: [Boolean, Object], required: false },
@@ -160,6 +161,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: "OrigamBreadcrumbItem",
+  zone: "prepend",
+  prop: "prependAriaLabel",
+  active: isPrependZoneFocusable,
+  label: () => props.prependAriaLabel
+});
+const appendCommandAttrs = useAccessibleCommand({
+  component: "OrigamBreadcrumbItem",
+  zone: "append",
+  prop: "appendAriaLabel",
+  active: isAppendZoneFocusable,
+  label: () => props.appendAriaLabel
+});
 const { densityClasses } = useDensity(props);
 const breadcrumbItemStyles = computed(() => {
   return [
@@ -252,6 +267,10 @@ defineExpose({
 			pointer-events: none;
 		}
 
+		&[aria-current='page'] {
+			--origam-breadcrumb-item---opacity: var(--origam-opacity---100);
+		}
+
 		&--density-comfortable {
 			--origam-breadcrumb-item---density: -8px;
 		}

package/dist/src/components/Btn/OrigamBtn.vue

@@ -62,7 +62,6 @@
 		          v-if="hasPrepend"
 		          key="prepend"
 		          class="origam-btn__prepend"
-		          @click="handleClickPrepend"
           >
             <slot name="prepend">
               <origam-avatar
@@ -101,7 +100,6 @@
 							v-if="hasAppend"
 							key="append"
 							class="origam-btn__append"
-							@click="handleClickAppend"
 					>
             <slot name="append">
              <origam-avatar
@@ -125,7 +123,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, onMounted, ref, StyleValue, toRef, useAttrs, useSlots } from "vue";
+import { computed, ref, StyleValue, toRef, useAttrs, useSlots, watchEffect } from "vue";
 import OrigamAvatar from "../Avatar/OrigamAvatar.vue";
 import OrigamIcon from "../Icon/OrigamIcon.vue";
 import OrigamLoader from "../Loader/OrigamLoader.vue";
@@ -148,8 +146,7 @@ import { useStatus } from "../../composables/Commons/status.composable";
 import { useStyle } from "../../composables/Commons/style.composable";
 import { useTypography } from "../../composables/Commons/typography.composable";
 import { useVariant } from "../../composables/Commons/variant.composable";
-import { warnDeprecatedEmit } from "../../utils/Commons/color.util";
-import { ADJACENT_EMIT_REPLACEMENT } from "../../consts/Btn/btn.const";
+import { warnMissingNativeControlName } from "../../utils/Commons/a11y.util";
 import { ORIGAM_BTN_TOGGLE_KEY } from "../../consts/Btn/btn-toggle.const";
 import vContrast from "../../directives/Contrast/contrast.directive";
 import vRipple from "../../directives/Ripple/ripple.directive";
@@ -234,6 +231,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 },
   active: { type: [Boolean, Object], required: false, default: void 0 },
@@ -245,7 +244,7 @@ const props = defineProps({
   letterSpacing: { type: null, required: false }
 });
 const colorLocked = computed(() => props.color ? "true" : void 0);
-defineEmits(["click:append", "click:prepend", "group:selected"]);
+defineEmits(["group:selected"]);
 defineSlots();
 const { filterProps } = useProps(props);
 const origamProgressRef = ref();
@@ -309,17 +308,9 @@ const {
 } = useStateEffect(props, isHover, isActive, hoverState, activeState, isDisabled, toRef(props, "flat"));
 const { variantClasses } = useVariant(props);
 const {
-  onClickPrepend: handleClickPrepend,
-  onClickAppend: handleClickAppend,
-  isPrependClickable,
-  isAppendClickable,
   hasAppend,
   hasPrepend
 } = useAdjacent(props, prependIcon, appendIcon);
-onMounted(() => {
-  if (isPrependClickable.value) warnDeprecatedEmit("OrigamBtn", "click:prepend", ADJACENT_EMIT_REPLACEMENT);
-  if (isAppendClickable.value) warnDeprecatedEmit("OrigamBtn", "click:append", ADJACENT_EMIT_REPLACEMENT);
-});
 const handleClick = (e) => {
   if (isDisabled.value || link.isLink.value && (e.metaKey || e.ctrlKey || e.shiftKey || e.button !== 0 || attrs.target === "_blank")) return;
   link.navigate?.(e);
@@ -331,6 +322,21 @@ const hasIcon = computed(() => {
 const hasLoader = computed(() => {
   return slots.loader || loaderConfig.value.isActive;
 });
+const isUnnamedIconOnly = computed(() => {
+  if (!hasIcon.value) return false;
+  if (slots.default || props.text) return false;
+  return !(attrs["aria-label"] || attrs["aria-labelledby"] || attrs.title);
+});
+if (import.meta.env?.DEV) {
+  watchEffect(() => {
+    if (isUnnamedIconOnly.value) {
+      warnMissingNativeControlName(
+        "OrigamBtn",
+        "icon-only mode renders a <button> whose only content is an aria-hidden glyph"
+      );
+    }
+  });
+}
 const isSkeletonLoading = computed(() => {
   return loaderConfig.value.isActive && loaderConfig.value.kind === "skeleton";
 });
@@ -1136,7 +1142,7 @@ defineExpose({
 		--origam-btn__prepend---margin-inline-start: calc(var(--origam-btn---height) / -9);
 		--origam-btn__prepend---margin-inline-end: calc(var(--origam-btn---height) / 4.5);
 
-		--origam-btn---min-width: calc(var(--origam-btn---width, 36px) + var(--origam-btn---density, 0));
-		--origam-btn---min-height: calc(var(--origam-btn---height, 36px) + var(--origam-btn---density, 0));
+		--origam-btn---min-width: calc(var(--origam-btn---width, 36px) + var(--origam-btn---density, 0px));
+		--origam-btn---min-height: calc(var(--origam-btn---height, 36px) + var(--origam-btn---density, 0px));
 	}
 </style>

package/dist/src/components/Btn/OrigamBtnGroup.vue

@@ -442,7 +442,7 @@ defineExpose({
 
 <style>
 	:root {
-		--origam-btn-group---density: 0;
+		--origam-btn-group---density: 0px;
 
 		--origam-btn-group---border-radius: var(--origam-btn---border-radius, 4px);
 		--origam-btn-group---border-width: var(--origam-btn---border-width, 0);

package/dist/src/components/Calendar/OrigamCalendar.vue

@@ -896,7 +896,7 @@ function onKeydown(event) {
     internalDate.value = next;
     emit("update:currentDate", next);
     const focusTarget = next;
-    void nextTick(() => focusDayCell(focusTarget));
+    nextTick(() => focusDayCell(focusTarget));
   }
 }
 const {

package/dist/src/components/Card/OrigamCard.vue

@@ -246,6 +246,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 }
 });

package/dist/src/components/Card/OrigamCardHeader.vue

@@ -16,8 +16,7 @@
 					v-if="hasPrepend"
 					key="prepend"
 					class="origam-card-header__prepend"
-					:role="isPrependClickable ? 'button' : undefined"
-					:tabindex="isPrependClickable ? 0 : undefined"
+					v-bind="prependCommandAttrs"
 					@click="handleClickPrepend"
 					@keydown="handleKeydownPrepend"
 			>
@@ -75,8 +74,7 @@
 					v-if="hasAppend"
 					key="append"
 					class="origam-card-header__append"
-					:role="isAppendClickable ? 'button' : undefined"
-					:tabindex="isAppendClickable ? 0 : undefined"
+					v-bind="appendCommandAttrs"
 					@click="handleClickAppend"
 					@keydown="handleKeydownAppend"
 			>
@@ -157,6 +155,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 },
   fontSize: { type: null, required: false },
   fontWeight: { type: null, required: false },
   lineHeight: { type: null, required: false },
@@ -178,8 +178,8 @@ const {
   onClickAppend: handleClickAppend,
   onKeydownPrepend: handleKeydownPrepend,
   onKeydownAppend: handleKeydownAppend,
-  isPrependClickable,
-  isAppendClickable,
+  prependCommandAttrs,
+  appendCommandAttrs,
   hasPrepend,
   hasAppend
 } = useAdjacent(props, toRef(props, "prependIcon"), toRef(props, "appendIcon"));
@@ -479,7 +479,7 @@ defineExpose({
 		--origam-card-header__title---line-height: 1.5rem;
 		--origam-card-header__title---text-transform: none;
 
-		--origam-card-header__subtitle---color: var(--origam-color__text---secondary);
+		--origam-card-header__subtitle---color: currentColor;
 		--origam-card-header__subtitle---display: -webkit-box;
 		--origam-card-header__subtitle---overflow: hidden;
 

package/dist/src/components/Carousel/OrigamCarousel.vue

@@ -194,6 +194,8 @@ const { t } = useLocale();
 const model = useVModel(props, "modelValue");
 const origamWindowRef = ref();
 let slideTimeout = -1;
+let restartFrame = -1;
+let disposed = false;
 const progressPercent = ref(0);
 let progressRaf = -1;
 let progressStart = 0;
@@ -253,7 +255,13 @@ const playPauseIcon = computed(() => {
 });
 const restartTimeout = () => {
   window.clearTimeout(slideTimeout);
-  window.requestAnimationFrame(startTimeout);
+  if (disposed) return;
+  window.cancelAnimationFrame(restartFrame);
+  restartFrame = window.requestAnimationFrame(() => {
+    restartFrame = -1;
+    if (disposed) return;
+    startTimeout();
+  });
 };
 watch(model, restartTimeout);
 watch(() => props.interval, restartTimeout);
@@ -271,6 +279,11 @@ watch(() => props.progress, (val) => {
 });
 onMounted(startTimeout);
 onBeforeUnmount(() => {
+  disposed = true;
+  if (restartFrame !== -1) {
+    window.cancelAnimationFrame(restartFrame);
+    restartFrame = -1;
+  }
   window.clearTimeout(slideTimeout);
   stopProgress();
 });

package/dist/src/components/Chart/OrigamChartBoxPlot.vue

@@ -589,7 +589,7 @@ const svgDesc = computed(() => {
 });
 const boxAriaLabel = (box) => {
   const { min, q1, median, q3, max } = box.rawStats;
-  return `${box.category}: min=${min} Q1=${q1} median=${median} Q3=${q3} max=${max}`;
+  return t("origam.chart.box_plot.box_aria_label", box.category, min, q1, median, q3, max);
 };
 const onBoxEnter = (box) => {
   hoveredIndex.value = box.index;

package/dist/src/components/Chart/OrigamChartBullet.vue

@@ -536,7 +536,8 @@ const rootClasses = computed(() => [
   elevationClasses.value,
   marginClasses.value,
   paddingClasses.value,
-  roundedClasses.value
+  roundedClasses.value,
+  props.class
 ]);
 const rootStyles = computed(() => {
   const out = {};
@@ -562,7 +563,7 @@ const svgDesc = computed(() => {
 });
 const bulletAriaLabel = (bullet) => {
   const pct = bullet.datum.target ? Math.round(bullet.datum.value / bullet.datum.target * 100) : 0;
-  return `${bullet.category}: value ${bullet.datum.value}, target ${bullet.datum.target}, ${pct}% achievement`;
+  return t("origam.chart.bullet.bullet_aria_label", bullet.category, bullet.datum.value, bullet.datum.target, pct);
 };
 const onBulletEnter = (bullet) => {
   hoveredIndex.value = bullet.index;

package/dist/src/components/Chart/OrigamChartCandlestick.vue

@@ -475,8 +475,8 @@ const svgDesc = computed(() => {
 });
 const candleAriaLabel = (candle) => {
   const d = candle.datum;
-  const direction = candle.isBullish ? "bullish" : "bearish";
-  return `${d.date}: ${direction}, open ${d.open}, high ${d.high}, low ${d.low}, close ${d.close}`;
+  const direction = candle.isBullish ? t("origam.chart.candlestick.direction_bullish") : t("origam.chart.candlestick.direction_bearish");
+  return t("origam.chart.candlestick.candle_aria_label", d.date, direction, d.open, d.high, d.low, d.close);
 };
 const onCandleEnter = (candle) => {
   hoveredIndex.value = candle.index;