origam 2.17.0 → 2.18.0

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

@@ -8,7 +8,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed } from "vue";
+import { computed, onBeforeUnmount } from "vue";
 import { useProps } from "../../composables/Commons/props.composable";
 import { EASING } from "../../enums/Transition/transition.enum";
 import { animate } from "../../utils/Commons/animation.util";
@@ -22,6 +22,26 @@ const props = defineProps({
 const { filterProps } = useProps(props);
 defineEmits([]);
 defineSlots();
+let disposed = false;
+const frames = /* @__PURE__ */ new Set();
+const pending = /* @__PURE__ */ new Set();
+const nextFrame = () => new Promise((resolve) => {
+  if (disposed) return resolve();
+  pending.add(resolve);
+  const id = requestAnimationFrame(() => {
+    frames.delete(id);
+    pending.delete(resolve);
+    resolve();
+  });
+  frames.add(id);
+});
+onBeforeUnmount(() => {
+  disposed = true;
+  for (const id of frames) cancelAnimationFrame(id);
+  frames.clear();
+  for (const resolve of pending) resolve();
+  pending.clear();
+});
 const hasTarget = computed(() => {
   return !!props.target;
 });
@@ -36,8 +56,9 @@ const handleBeforeEnter = (el) => {
   el.style.visibility = "hidden";
 };
 const handleEnter = async (el, done) => {
-  await new Promise((resolve) => requestAnimationFrame(resolve));
-  await new Promise((resolve) => requestAnimationFrame(resolve));
+  await nextFrame();
+  await nextFrame();
+  if (disposed) return;
   el.style.visibility = "";
   const { x, y, sx, sy, speed } = getDimensions(props.target, el);
   const animation = animate(el, [
@@ -67,7 +88,8 @@ const handleBeforeLeave = (el) => {
   el.style.pointerEvents = "none";
 };
 const handleLeave = async (el, done) => {
-  await new Promise((resolve) => requestAnimationFrame(resolve));
+  await nextFrame();
+  if (disposed) return;
   const { x, y, sx, sy, speed } = getDimensions(props.target, el);
   const animation = animate(el, [
     {},

package/dist/src/components/Video/OrigamVideo.vue

@@ -576,11 +576,12 @@ const pipSupported = computed(() => {
 const showPosterOverlay = computed(() => {
   return Boolean(props.poster) && state.paused.value && state.currentTime.value === 0 && !state.error.value;
 });
+const genericErrorMessage = computed(() => t("origam.media.playback_error"));
 const errorMessage = computed(() => {
   const err = state.error.value;
-  if (!err) return "Playback error";
+  if (!err) return genericErrorMessage.value;
   if ("message" in err && err.message) return err.message;
-  return "Playback error";
+  return genericErrorMessage.value;
 });
 const captionsLabelKey = computed(() => {
   return captionsEnabled.value ? "origam.video.disable_captions" : "origam.video.enable_captions";

package/dist/src/components/VirtualScroll/OrigamVirtualScroll.vue

@@ -90,7 +90,7 @@ import { convertToUnit } from "../../utils/Commons/commons.util";
 import { getCurrentInstance } from "../../utils/Commons/getCurrentInstance.util";
 import { getScrollParent } from "../../utils/Commons/scroll.util";
 const props = defineProps({
-  items: { type: Array, required: false },
+  items: { type: Array, required: false, default: () => [] },
   renderless: { type: Boolean, required: false },
   id: { type: String, required: false },
   class: { type: [String, Array, Object], required: false },

package/dist/src/components/Window/OrigamWindow.vue

@@ -6,8 +6,7 @@
 			v-touch="touchOptions"
 			:class="windowClasses"
 			:style="windowStyles"
-			aria-roledescription="carousel"
-			role="region"
+			v-bind="landmarkAttrs"
 	>
 		<p
 				class="origam-window__live-region"
@@ -78,7 +77,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, provide, ref, shallowRef, StyleValue, watch } from "vue";
+import { computed, provide, ref, shallowRef, StyleValue, useAttrs, watch } from "vue";
 import OrigamBtn from "../Btn/OrigamBtn.vue";
 import OrigamSpacer from "../Grids/OrigamSpacer.vue";
 import { useBorder } from "../../composables/Commons/border.composable";
@@ -91,6 +90,7 @@ import { useProps } from "../../composables/Commons/props.composable";
 import { useRounded } from "../../composables/Commons/rounded.composable";
 import { useStyle } from "../../composables/Commons/style.composable";
 import { ORIGAM_WINDOW_GROUP_KEY, ORIGAM_WINDOW_KEY } from "../../consts/Window/window.const";
+import { warnMissingLandmarkName } from "../../utils/Commons/a11y.util";
 import vTouch from "../../directives/Touch/touch.directive";
 import { AXIS } from "../../enums/Commons/drag.enum";
 import { DIRECTION } from "../../enums/Commons/direction.enum";
@@ -154,6 +154,23 @@ defineEmits(["update:modelValue"]);
 defineSlots();
 const { filterProps } = useProps(props);
 const { t } = useLocale();
+const attrs = useAttrs();
+const hasAccessibleName = computed(() => {
+  const label = attrs["aria-label"];
+  const labelledBy = attrs["aria-labelledby"];
+  return !!(typeof label === "string" ? label.trim() : label) || !!(typeof labelledBy === "string" ? labelledBy.trim() : labelledBy);
+});
+const landmarkAttrs = computed(() => {
+  const roleDescription = t("origam.carousel.role_description");
+  const attributes = {};
+  if (!hasAccessibleName.value) {
+    warnMissingLandmarkName("OrigamWindow", "region", roleDescription);
+    return attributes;
+  }
+  attributes.role = "region";
+  attributes["aria-roledescription"] = roleDescription;
+  return attributes;
+});
 const group = useGroup(props, ORIGAM_WINDOW_GROUP_KEY);
 const rootRef = ref();
 const isReversed = shallowRef(false);

package/dist/src/composables/Commons/accessibleCommand.composable.cjs

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useAccessibleCommand = useAccessibleCommand;
+var _vue = require("vue");
+var _locale = require("./locale.composable.cjs");
+var _a11y = require("../../utils/Commons/a11y.util.cjs");
+function useAccessibleCommand(options) {
+  const locale = (0, _locale.useLocale)(false);
+  return (0, _vue.computed)(() => {
+    if (!options.active.value) return {};
+    const raw = options.label();
+    const name = raw ? locale ? locale.t(raw) : raw : "";
+    if (!name) {
+      (0, _a11y.warnMissingAccessibleName)(options.component, options.zone, options.prop);
+      return {};
+    }
+    return {
+      role: "button",
+      tabindex: 0,
+      "aria-label": name
+    };
+  });
+}

package/dist/src/composables/Commons/accessibleCommand.composable.d.ts

@@ -0,0 +1,78 @@
+import type { ComputedRef, Ref } from 'vue';
+/*********************************************************
+ * useAccessibleCommand
+ *
+ * @description
+ * ⛔ issues #747 / #653 / #660 — the ONE place the design system decides
+ * whether a non-native element may claim `role="button"`.
+ *
+ * The three tickets are three readings of the same defect: the DS puts an
+ * ARIA claim on an element it has no name for. `useAdjacent` /
+ * `useAdjacentInner` promote the prepend/append zone to `role="button"` +
+ * `tabindex="0"` the moment a consumer attaches `click:prepend` /
+ * `click:append` (#443) — but neither hook, nor any of the 13 templates
+ * that bind them, ever had a channel through which a name could arrive.
+ * Measured against axe-core in Chromium, that produced **54
+ * `aria-command-name` nodes (impact `serious`, WCAG 2.1 4.1.2 level A)
+ * across 17 components** on untouched `develop`, every one of them
+ * announced to a screen reader as "button" and nothing else.
+ *
+ * @description
+ * **The rule this hook encodes: the DS never emits an ARIA role it cannot
+ * name, and it never invents the name.**
+ *
+ * - A name IS available → `role="button"` + `tabindex="0"` + `aria-label`.
+ *   The zone is a real, reachable, announceable control.
+ * - No name → the returned object is EMPTY: no role, no tab stop. The
+ *   `@click` listener the template binds is untouched and still fires on
+ *   mouse, exactly as it did before #443 added the role; what disappears is
+ *   the false claim, not a working feature. A dev-only warning names the
+ *   prop to add.
+ *
+ * @description
+ * ⛔ The rejected third option was to keep the role and fabricate a
+ * default label ("Prepend action", or an i18n key resolving to it). It
+ * would silence axe while telling a screen-reader user strictly nothing
+ * about what the control does — the failure mode #622 already shipped
+ * once (an auto-label that overwrote a visible `<label for>`), and the
+ * reason #653 chose a warning over a fabricated string on the icon family.
+ * "No ARIA is better than bad ARIA" is the same principle
+ * `useIconAccessibility` applies when it refuses to announce a glyph as a
+ * control it cannot operate.
+ *
+ * @description
+ * ⛔ A NATIVE control cannot use this escape hatch — a `<button>` is a
+ * button whether or not anyone named it. `OrigamBtn`'s icon-only mode
+ * therefore keeps rendering its `<button>` and only warns; see
+ * `warnMissingAccessibleName` and `OrigamBtn.vue`.
+ *
+ * @description
+ * `label` is resolved through `useLocale().t`, matching the existing
+ * `closeLabel` contract on Alert / Chip / Dialog: an i18n key resolves,
+ * and any other string is returned verbatim by the builtin adapter — so
+ * a consumer may pass either. `useLocale(false)` (non-strict) is used on
+ * purpose: this hook runs inside 13 components, several of which are
+ * mounted in unit tests without `createOrigam()` installed, and a strict
+ * `useLocale()` would throw there.
+ *
+ * @description
+ * ADR-005: the label is read INSIDE the returned `computed`, never in the
+ * `setup()` body, so a value coming from a theme's `components` block is
+ * seen at render time rather than snapshotted too early.
+ *
+ * @description
+ * OPTIONS. `component` and `zone` name the offender in the dev warning
+ * (`OrigamCardHeader` / `prepend`); `prop` names the prop that fixes it
+ * (`prependAriaLabel`). `active` is true when the zone is meant to behave as
+ * a command — raw clickability for most consumers, clickability AND
+ * not-a-link for the three `useLink` ones, whose `<a>` root forbids a
+ * descendant tab stop. `label` is a GETTER, not a value, precisely so the
+ * read stays inside the computed.
+ ********************************************************/
+export declare function useAccessibleCommand(options: {
+    component: string;
+    zone: string;
+    prop: string;
+    active: Ref<boolean> | ComputedRef<boolean>;
+    label: () => string | undefined;
+}): ComputedRef<Record<string, unknown>>;

package/dist/src/composables/Commons/accessibleCommand.composable.js

@@ -0,0 +1,20 @@
+import { computed } from "vue";
+import { useLocale } from "./locale.composable.js";
+import { warnMissingAccessibleName } from "../../utils/Commons/a11y.util.js";
+export function useAccessibleCommand(options) {
+  const locale = useLocale(false);
+  return computed(() => {
+    if (!options.active.value) return {};
+    const raw = options.label();
+    const name = raw ? locale ? locale.t(raw) : raw : "";
+    if (!name) {
+      warnMissingAccessibleName(options.component, options.zone, options.prop);
+      return {};
+    }
+    return {
+      role: "button",
+      tabindex: 0,
+      "aria-label": name
+    };
+  });
+}

package/dist/src/composables/Commons/activator.composable.cjs

@@ -158,15 +158,24 @@ function useActivator(props, {
       isActive.value = false;
     }
   });
+  let cursorResetTimer;
   (0, _vue.watch)(isActive, val => {
     if (!val) {
-      setTimeout(() => {
+      clearTimeout(cursorResetTimer);
+      cursorResetTimer = setTimeout(() => {
+        cursorResetTimer = void 0;
         cursorTarget.value = void 0;
       });
     }
   }, {
     flush: "post"
   });
+  (0, _commons2.tryOnScopeDispose)(() => {
+    if (cursorResetTimer !== void 0) {
+      clearTimeout(cursorResetTimer);
+      cursorResetTimer = void 0;
+    }
+  });
   const activatorRef = (0, _vue.ref)();
   (0, _vue.watchEffect)(() => {
     if (!activatorRef.value) return;

package/dist/src/composables/Commons/activator.composable.js

@@ -3,7 +3,7 @@ import { useDelay } from "./delay.composable.js";
 import { IN_BROWSER } from "../../consts/Commons/commons.const.js";
 import { ORIGAM_MENU_KEY } from "../../consts/Menu/menu.const.js";
 import { activator, getTargetActivator } from "../../utils/Commons/activator.util.js";
-import { matchesSelector, refElement } from "../../utils/Commons/commons.util.js";
+import { matchesSelector, refElement, tryOnScopeDispose } from "../../utils/Commons/commons.util.js";
 import { getCurrentInstance } from "../../utils/Commons/getCurrentInstance.util.js";
 export function useActivator(props, { isActive, isTop }) {
   const vm = getCurrentInstance("useActivator");
@@ -146,13 +146,22 @@ export function useActivator(props, { isActive, isTop }) {
       isActive.value = false;
     }
   });
+  let cursorResetTimer;
   watch(isActive, (val) => {
     if (!val) {
-      setTimeout(() => {
+      clearTimeout(cursorResetTimer);
+      cursorResetTimer = setTimeout(() => {
+        cursorResetTimer = void 0;
         cursorTarget.value = void 0;
       });
     }
   }, { flush: "post" });
+  tryOnScopeDispose(() => {
+    if (cursorResetTimer !== void 0) {
+      clearTimeout(cursorResetTimer);
+      cursorResetTimer = void 0;
+    }
+  });
   const activatorRef = ref();
   watchEffect(() => {
     if (!activatorRef.value) return;

package/dist/src/composables/Commons/adjacent.composable.cjs

@@ -7,6 +7,7 @@ exports.useAdjacent = useAdjacent;
 var _vue = require("vue");
 var _hotkey = require("../../enums/Commons/hotkey.enum.cjs");
 var _commons = require("../../utils/Commons/commons.util.cjs");
+var _accessibleCommand = require("./accessibleCommand.composable.cjs");
 var _getCurrentInstance = require("../../utils/Commons/getCurrentInstance.util.cjs");
 function useAdjacent(props, prependIcon, appendIcon) {
   const vm = (0, _getCurrentInstance.getCurrentInstance)("OrigamAdjacent");
@@ -49,7 +50,23 @@ function useAdjacent(props, prependIcon, appendIcon) {
     e.preventDefault();
     onClickAppend(e);
   };
+  const prependCommandAttrs = (0, _accessibleCommand.useAccessibleCommand)({
+    component: vm.type?.__name ?? "Origam",
+    zone: "prepend",
+    prop: "prependAriaLabel",
+    active: isPrependClickable,
+    label: () => props.prependAriaLabel
+  });
+  const appendCommandAttrs = (0, _accessibleCommand.useAccessibleCommand)({
+    component: vm.type?.__name ?? "Origam",
+    zone: "append",
+    prop: "appendAriaLabel",
+    active: isAppendClickable,
+    label: () => props.appendAriaLabel
+  });
   return {
+    prependCommandAttrs,
+    appendCommandAttrs,
     hasPrependMedia,
     hasPrepend,
     hasAppendMedia,

package/dist/src/composables/Commons/adjacent.composable.d.ts

@@ -29,8 +29,20 @@ import type { IAdjacentProps } from '../../interfaces/Commons/adjacent.interface
  * consumer actually attached a `click:prepend`/`click:append`
  * listener — a decorative icon with nobody listening stays exactly
  * as inert as before, no spurious tab stop.
+ *
+ * @description
+ * ⛔ issue #747 — being CLICKABLE was never sufficient. `role="button"`
+ * with no accessible name is a WCAG 2.1 4.1.2 failure, and it was the
+ * shipped behaviour of every consumer of this hook: axe-core measured
+ * **54 `aria-command-name` nodes (`serious`) across 17 components** on
+ * untouched `develop`. `prependCommandAttrs` / `appendCommandAttrs`
+ * replace the raw `:role` / `:tabindex` bindings the templates used to
+ * write by hand — they emit the role AND the name together, or neither.
+ * See `useAccessibleCommand` for why no default label is fabricated.
  ********************************************************/
 export declare function useAdjacent(props: IAdjacentProps, prependIcon?: Ref | ComputedRef, appendIcon?: Ref | ComputedRef): {
+    prependCommandAttrs: ComputedRef<Record<string, unknown>>;
+    appendCommandAttrs: ComputedRef<Record<string, unknown>>;
     hasPrependMedia: ComputedRef<boolean>;
     hasPrepend: ComputedRef<boolean>;
     hasAppendMedia: ComputedRef<boolean>;

package/dist/src/composables/Commons/adjacent.composable.js

@@ -1,6 +1,7 @@
 import { computed, useSlots } from "vue";
 import { KEYBOARD_VALUES } from "../../enums/Commons/hotkey.enum.js";
 import { hasEvent } from "../../utils/Commons/commons.util.js";
+import { useAccessibleCommand } from "./accessibleCommand.composable.js";
 import { getCurrentInstance } from "../../utils/Commons/getCurrentInstance.util.js";
 export function useAdjacent(props, prependIcon, appendIcon) {
   const vm = getCurrentInstance("OrigamAdjacent");
@@ -43,7 +44,23 @@ export function useAdjacent(props, prependIcon, appendIcon) {
     e.preventDefault();
     onClickAppend(e);
   };
+  const prependCommandAttrs = useAccessibleCommand({
+    component: vm.type?.__name ?? "Origam",
+    zone: "prepend",
+    prop: "prependAriaLabel",
+    active: isPrependClickable,
+    label: () => props.prependAriaLabel
+  });
+  const appendCommandAttrs = useAccessibleCommand({
+    component: vm.type?.__name ?? "Origam",
+    zone: "append",
+    prop: "appendAriaLabel",
+    active: isAppendClickable,
+    label: () => props.appendAriaLabel
+  });
   return {
+    prependCommandAttrs,
+    appendCommandAttrs,
     hasPrependMedia,
     hasPrepend,
     hasAppendMedia,

package/dist/src/composables/Commons/adjacentInner.composable.cjs

@@ -7,6 +7,7 @@ exports.useAdjacentInner = useAdjacentInner;
 var _vue = require("vue");
 var _hotkey = require("../../enums/Commons/hotkey.enum.cjs");
 var _commons = require("../../utils/Commons/commons.util.cjs");
+var _accessibleCommand = require("./accessibleCommand.composable.cjs");
 var _getCurrentInstance = require("../../utils/Commons/getCurrentInstance.util.cjs");
 function useAdjacentInner(props) {
   const vm = (0, _getCurrentInstance.getCurrentInstance)("OrigamAdjacentInner");
@@ -41,19 +42,38 @@ function useAdjacentInner(props) {
   const isAppendInnerClickable = (0, _vue.computed)(() => {
     return (0, _commons.hasEvent)(vm.attrs, "click:appendInner") || (0, _commons.hasEvent)(vm.vnode.props ?? {}, "click:appendInner");
   });
+  const ownsKey = e => e.target === e.currentTarget;
   const onKeydownPrependInner = e => {
     if (!isPrependInnerClickable.value) return;
+    if (!ownsKey(e)) return;
     if (e.key !== _hotkey.KEYBOARD_VALUES.ENTER && e.key !== _hotkey.KEYBOARD_VALUES.EMPTY) return;
     e.preventDefault();
     onClickPrependInner(e);
   };
   const onKeydownAppendInner = e => {
     if (!isAppendInnerClickable.value) return;
+    if (!ownsKey(e)) return;
     if (e.key !== _hotkey.KEYBOARD_VALUES.ENTER && e.key !== _hotkey.KEYBOARD_VALUES.EMPTY) return;
     e.preventDefault();
     onClickAppendInner(e);
   };
+  const prependInnerCommandAttrs = (0, _accessibleCommand.useAccessibleCommand)({
+    component: vm.type?.__name ?? "Origam",
+    zone: "prependInner",
+    prop: "prependInnerAriaLabel",
+    active: isPrependInnerClickable,
+    label: () => props.prependInnerAriaLabel
+  });
+  const appendInnerCommandAttrs = (0, _accessibleCommand.useAccessibleCommand)({
+    component: vm.type?.__name ?? "Origam",
+    zone: "appendInner",
+    prop: "appendInnerAriaLabel",
+    active: isAppendInnerClickable,
+    label: () => props.appendInnerAriaLabel
+  });
   return {
+    prependInnerCommandAttrs,
+    appendInnerCommandAttrs,
     hasPrependInnerMedia,
     hasPrependInner,
     hasAppendInnerMedia,

package/dist/src/composables/Commons/adjacentInner.composable.d.ts

@@ -14,13 +14,32 @@ import type { IAdjacentInnerProps } from '../../interfaces/Commons/adjacent.inte
  * `click:appendInner` only ever fired from a literal DOM click inside
  * the zone, never from a keyboard activation of an ancestor. See the
  * long comment on `useAdjacent` for the full reasoning; mirrored here
- * for the inner zone. `isClearClickable` stays permanently true when
- * `hasClear` is — the clear zone only renders (`v-show="dirty"`) when
- * there is something to clear, so it is unconditionally actionable
- * whenever visible, unlike prependInner/appendInner whose
- * actionability depends on whether the consumer wired a listener.
+ * for the inner zone.
+ *
+ * @description
+ * ⛔ Cette banniere a longtemps decrit un `isClearClickable` — il
+ * n'existe NULLE PART dans le code, ni ici ni ailleurs dans
+ * `packages/ds/src` (verifie par recherche : la seule occurrence du depot
+ * etait cette phrase). Le generateur de `packages/docs/composables/Commons.md`
+ * recopie les bannieres, donc la doc publiee nommait un symbole
+ * inexistant — le defaut #493 exactement. La zone « clear » n'expose que
+ * `hasClear` et le handler `clickClear` ; elle ne passe par
+ * `useAccessibleCommand` ni par aucun test de clicabilite, parce qu'elle
+ * ne rend (`v-show="dirty"`) que lorsqu'il y a quelque chose a effacer.
+ *
+ * @description
+ * ⚠️ `hasPrependInner` / `hasAppendInner` / `hasClear` ne sont PAS des
+ * booleens : ils rendent la FONCTION de slot quand le slot correspondant
+ * existe (`slots.prependInner || …`), sinon le booleen du media, et
+ * `hasClear` rend `undefined` quand ni `clearable` ni le slot `clear` ne
+ * sont fournis. Les trois sont a consommer en verite/faussete, jamais en
+ * comparaison stricte a `true`/`false`. `useAdjacent`, lui, normalise
+ * (`!!slots.prepend || …`) et rend de vrais booleens — les deux jumeaux
+ * ne se comportent pas pareil sur ce point.
  ********************************************************/
 export declare function useAdjacentInner(props: IAdjacentInnerProps): {
+    prependInnerCommandAttrs: import("vue").ComputedRef<Record<string, unknown>>;
+    appendInnerCommandAttrs: import("vue").ComputedRef<Record<string, unknown>>;
     hasPrependInnerMedia: import("vue").ComputedRef<boolean>;
     hasPrependInner: import("vue").ComputedRef<boolean | import("vue").Slot<any>>;
     hasAppendInnerMedia: import("vue").ComputedRef<boolean>;

package/dist/src/composables/Commons/adjacentInner.composable.js

@@ -1,6 +1,7 @@
 import { computed, useSlots } from "vue";
 import { KEYBOARD_VALUES } from "../../enums/Commons/hotkey.enum.js";
 import { hasEvent } from "../../utils/Commons/commons.util.js";
+import { useAccessibleCommand } from "./accessibleCommand.composable.js";
 import { getCurrentInstance } from "../../utils/Commons/getCurrentInstance.util.js";
 export function useAdjacentInner(props) {
   const vm = getCurrentInstance("OrigamAdjacentInner");
@@ -35,19 +36,38 @@ export function useAdjacentInner(props) {
   const isAppendInnerClickable = computed(() => {
     return hasEvent(vm.attrs, "click:appendInner") || hasEvent(vm.vnode.props ?? {}, "click:appendInner");
   });
+  const ownsKey = (e) => e.target === e.currentTarget;
   const onKeydownPrependInner = (e) => {
     if (!isPrependInnerClickable.value) return;
+    if (!ownsKey(e)) return;
     if (e.key !== KEYBOARD_VALUES.ENTER && e.key !== KEYBOARD_VALUES.EMPTY) return;
     e.preventDefault();
     onClickPrependInner(e);
   };
   const onKeydownAppendInner = (e) => {
     if (!isAppendInnerClickable.value) return;
+    if (!ownsKey(e)) return;
     if (e.key !== KEYBOARD_VALUES.ENTER && e.key !== KEYBOARD_VALUES.EMPTY) return;
     e.preventDefault();
     onClickAppendInner(e);
   };
+  const prependInnerCommandAttrs = useAccessibleCommand({
+    component: vm.type?.__name ?? "Origam",
+    zone: "prependInner",
+    prop: "prependInnerAriaLabel",
+    active: isPrependInnerClickable,
+    label: () => props.prependInnerAriaLabel
+  });
+  const appendInnerCommandAttrs = useAccessibleCommand({
+    component: vm.type?.__name ?? "Origam",
+    zone: "appendInner",
+    prop: "appendInnerAriaLabel",
+    active: isAppendInnerClickable,
+    label: () => props.appendInnerAriaLabel
+  });
   return {
+    prependInnerCommandAttrs,
+    appendInnerCommandAttrs,
     hasPrependInnerMedia,
     hasPrependInner,
     hasAppendInnerMedia,

package/dist/src/composables/Commons/audio.composable.cjs

@@ -6,18 +6,31 @@ Object.defineProperty(exports, "__esModule", {
 exports.useAudio = useAudio;
 var _vue = require("vue");
 var _audio = require("../../consts/Audio/audio.const.cjs");
+var _commons = require("../../utils/Commons/commons.util.cjs");
 function useAudio(props) {
   const analyser = (0, _vue.ref)(null);
   const audioArray = (0, _vue.shallowRef)(null);
   const audioRef = (0, _vue.ref)();
   const wasPlayed = (0, _vue.ref)(false);
   const isPlaying = (0, _vue.ref)(false);
+  let frame = -1;
+  let disposed = false;
   const getSongData = () => {
+    if (disposed) return;
     if (isPlaying.value && audioArray.value) {
       analyser.value?.getByteFrequencyData(audioArray.value);
-      requestAnimationFrame(getSongData);
+      frame = requestAnimationFrame(getSongData);
+    } else {
+      frame = -1;
     }
   };
+  (0, _commons.tryOnScopeDispose)(() => {
+    disposed = true;
+    if (frame !== -1) {
+      cancelAnimationFrame(frame);
+      frame = -1;
+    }
+  });
   const onPlay = () => {
     if (!wasPlayed.value) {
       onAudio();

package/dist/src/composables/Commons/audio.composable.js

@@ -1,17 +1,30 @@
 import { ref, shallowRef, watch } from "vue";
 import { AUDIO_ANALYSER_FFT_SIZE } from "../../consts/Audio/audio.const.js";
+import { tryOnScopeDispose } from "../../utils/Commons/commons.util.js";
 export function useAudio(props) {
   const analyser = ref(null);
   const audioArray = shallowRef(null);
   const audioRef = ref();
   const wasPlayed = ref(false);
   const isPlaying = ref(false);
+  let frame = -1;
+  let disposed = false;
   const getSongData = () => {
+    if (disposed) return;
     if (isPlaying.value && audioArray.value) {
       analyser.value?.getByteFrequencyData(audioArray.value);
-      requestAnimationFrame(getSongData);
+      frame = requestAnimationFrame(getSongData);
+    } else {
+      frame = -1;
     }
   };
+  tryOnScopeDispose(() => {
+    disposed = true;
+    if (frame !== -1) {
+      cancelAnimationFrame(frame);
+      frame = -1;
+    }
+  });
   const onPlay = () => {
     if (!wasPlayed.value) {
       onAudio();

package/dist/src/composables/Commons/backButton.composable.cjs

@@ -11,6 +11,7 @@ function useBackButton(router, cb) {
   let popped = false;
   let removeBefore;
   let removeAfter;
+  let poppedReset;
   if (_commons.IN_BROWSER) {
     (0, _vue.nextTick)(() => {
       window.addEventListener("popstate", onPopstate);
@@ -42,11 +43,12 @@ function useBackButton(router, cb) {
       window.removeEventListener("popstate", onPopstate);
       removeBefore?.();
       removeAfter?.();
+      clearTimeout(poppedReset);
     });
   }
   const onPopstate = e => {
     if (e.state?.replaced) return;
     popped = true;
-    setTimeout(() => popped = false);
+    poppedReset = setTimeout(() => popped = false);
   };
 }

package/dist/src/composables/Commons/backButton.composable.js

@@ -5,6 +5,7 @@ export function useBackButton(router, cb) {
   let popped = false;
   let removeBefore;
   let removeAfter;
+  let poppedReset;
   if (IN_BROWSER) {
     nextTick(() => {
       window.addEventListener("popstate", onPopstate);
@@ -36,11 +37,12 @@ export function useBackButton(router, cb) {
       window.removeEventListener("popstate", onPopstate);
       removeBefore?.();
       removeAfter?.();
+      clearTimeout(poppedReset);
     });
   }
   const onPopstate = (e) => {
     if (e.state?.replaced) return;
     popped = true;
-    setTimeout(() => popped = false);
+    poppedReset = setTimeout(() => popped = false);
   };
 }