origam 2.16.0 → 2.17.1

package/dist/src/components/Slide/OrigamSlideGroup.vue

@@ -1,6 +1,7 @@
 <template>
 	<component
 			:is="tag"
+			:id="id"
 			:class="slideGroupClasses"
 			:style="slideGroupStyles"
 			:tabindex="(isFocused || group.selected.value.length) ? -1 : 0"
@@ -58,31 +59,25 @@
 
 <script lang="ts" setup>
 import { computed, shallowRef, StyleValue, watch } from "vue";
-import { OrigamFade, OrigamIcon } from "../../components";
-import {
-  useBorder,
-  useDisplay,
-  useGoTo,
-  useGroup,
-  useMargin,
-  usePadding,
-  useProps,
-  useResizeObserver,
-  useRounded,
-  useRtl,
-  useStyle
-} from "../../composables";
-import { IN_BROWSER, ORIGAM_SLIDE_GROUP_KEY } from "../../consts";
-import { DIRECTION, MDI_ICONS } from "../../enums";
-import {
-  calculateCenteredTarget,
-  calculateUpdatedTarget,
-  focusableChildren,
-  getClientSize,
-  getOffsetSize,
-  getScrollPosition,
-  getScrollSize
-} from "../../utils";
+import OrigamFade from "../Transition/OrigamFade.vue";
+import OrigamIcon from "../Icon/OrigamIcon.vue";
+import { useBorder } from "../../composables/Commons/border.composable";
+import { useDisplay } from "../../composables/Commons/display.composable";
+import { useGoTo } from "../../composables/Commons/goTo.composable";
+import { useGroup } from "../../composables/Commons/group.composable";
+import { useMargin } from "../../composables/Commons/margin.composable";
+import { usePadding } from "../../composables/Commons/padding.composable";
+import { useProps } from "../../composables/Commons/props.composable";
+import { useResizeObserver } from "../../composables/Commons/resizeObserver.composable";
+import { useRounded } from "../../composables/Commons/rounded.composable";
+import { useRtl } from "../../composables/Commons/rtl.composable";
+import { useStyle } from "../../composables/Commons/style.composable";
+import { IN_BROWSER } from "../../consts/Commons/commons.const";
+import { ORIGAM_SLIDE_GROUP_KEY } from "../../consts/Slide/slide-group.const";
+import { DIRECTION } from "../../enums/Commons/direction.enum";
+import { MDI_ICONS } from "../../enums/Commons/mdi.enum";
+import { calculateCenteredTarget, calculateUpdatedTarget, getClientSize, getOffsetSize, getScrollPosition, getScrollSize } from "../../utils/Slide/slide-group.util";
+import { focusableChildren } from "../../utils/Commons/commons.util";
 const props = defineProps({
   centerActive: { type: Boolean, required: false },
   nextIcon: { type: null, required: false, default: MDI_ICONS.CHEVRON_RIGHT },
@@ -377,7 +372,7 @@ const slideGroupNextClasses = computed(() => {
     }
   ];
 });
-const { id, css, load, isLoaded, unload } = useStyle(slideGroupStyles);
+const { id, css, load, isLoaded, unload } = useStyle(slideGroupStyles, () => props.id);
 defineExpose({
   filterProps,
   css,
@@ -395,10 +390,9 @@ defineExpose({
 		display: var(--origam-slide-group---display, flex);
 		overflow: var(--origam-slide-group---overflow, hidden);
 
-		&__prev,
-		&__next {
-			align-items: center;
-			display: flex;
+		&__prev {
+			align-items: var(--origam-slide-group__prev---align-items, center);
+			display: var(--origam-slide-group__prev---display, flex);
 			flex: 0 1 var(--origam-slide-group__prev---min-width, 52px);
 			justify-content: center;
 			min-width: var(--origam-slide-group__prev---min-width, 52px);
@@ -411,6 +405,21 @@ defineExpose({
 			}
 		}
 
+		&__next {
+			align-items: var(--origam-slide-group__next---align-items, center);
+			display: var(--origam-slide-group__next---display, flex);
+			flex: 0 1 var(--origam-slide-group__next---min-width, 52px);
+			justify-content: center;
+			min-width: var(--origam-slide-group__next---min-width, 52px);
+			cursor: var(--origam-slide-group__next---cursor, pointer);
+			color: var(--origam-slide-group__next---color, inherit);
+
+			&--disabled {
+				pointer-events: none;
+				opacity: var(--origam-slide-group__next---opacity-disabled, 0.6);
+			}
+		}
+
 		&__content {
 			display: var(--origam-slide-group__content---display, flex);
 			flex: var(--origam-slide-group__content---flex, 1 0 auto);

package/dist/src/components/SliderField/OrigamSliderField.vue

@@ -247,23 +247,11 @@
 				@pointermove="handleHoverPointerMove"
 				@pointerleave="handleHoverPointerLeave"
 		>
-			<svg
-					v-if="hasPeaks"
+			<origam-audio-waveform
 					class="origam-slider-field__waveform"
-					:viewBox="waveformViewBox"
-					preserveAspectRatio="none"
-					aria-hidden="true"
-			>
-				<rect
-						v-for="(peak, index) in normalizedPeaks"
-						:key="index"
-						:x="(index / normalizedPeaks.length) * 100"
-						:y="50 - (peak * 50)"
-						:width="100 / normalizedPeaks.length"
-						:height="peak * 100"
-						:class="waveformBarClass(index)"
-				/>
-			</svg>
+					:peaks="peaks"
+					:progress="modelPercentage"
+			/>
 
 			<origam-slider-field-track
 					:bg-color="bgColor"
@@ -422,22 +410,24 @@
 
 <script lang="ts" setup>
 import { computed, ref, StyleValue, useSlots, WritableComputedRef } from "vue";
-import { OrigamInput, OrigamLabel, OrigamSliderFieldTrack } from "../../components";
-import {
-  useBackgroundColor,
-  useDefaults,
-  useFocus,
-  useProps,
-  useRounded,
-  useRtl,
-  useSteps,
-  useStyle,
-  useTextColor,
-  useVModel
-} from "../../composables";
-import { DENSITY, DIRECTION, SLIDER_FIELD_VARIANT } from "../../enums";
-import { clamp, convertToUnit, createRange, omit } from "../../utils";
-const _props = defineProps({
+import OrigamInput from "../Input/OrigamInput.vue";
+import OrigamLabel from "../Label/OrigamLabel.vue";
+import OrigamSliderFieldTrack from "./OrigamSliderFieldTrack.vue";
+import { OrigamAudioWaveform } from "../Audio";
+import { useBackgroundColor } from "../../composables/Commons/backgroundColor.composable";
+import { useFocus } from "../../composables/Commons/focus.composable";
+import { useProps } from "../../composables/Commons/props.composable";
+import { useRounded } from "../../composables/Commons/rounded.composable";
+import { useRtl } from "../../composables/Commons/rtl.composable";
+import { useSteps } from "../../composables/SliderField/slider-field.composable";
+import { useStyle } from "../../composables/Commons/style.composable";
+import { useTextColor } from "../../composables/Commons/textColor.composable";
+import { useVModel } from "../../composables/Commons/vModel.composable";
+import { DENSITY } from "../../enums/Commons/density.enum";
+import { DIRECTION } from "../../enums/Commons/direction.enum";
+import { SLIDER_FIELD_VARIANT } from "../../enums/SliderField/slider-field.enum";
+import { clamp, convertToUnit, createRange, omit } from "../../utils/Commons/commons.util";
+const props = defineProps({
   disabled: { type: Boolean, required: false },
   required: { type: Boolean, required: false },
   label: { type: String, required: false },
@@ -524,14 +514,11 @@ const _props = defineProps({
   prependAvatar: { type: String, required: false },
   prependIcon: { type: null, required: false },
   size: { type: null, required: false },
-  fontFamily: { type: null, required: false },
   fontSize: { type: null, required: false },
   fontWeight: { type: null, required: false },
   lineHeight: { type: null, required: false },
-  letterSpacing: { type: null, required: false },
   ripple: { type: [Boolean, Object], required: false }
 });
-const props = useDefaults(_props);
 const emits = defineEmits(["start", "end", "update:modelValue", "update:focused"]);
 defineSlots();
 const { filterProps } = useProps(props);
@@ -549,7 +536,7 @@ const { min: resolvedMin, max: resolvedMax, step: resolvedStep, roundValue } = s
 const model = useVModel(
   props,
   "modelValue",
-  isRange.value ? [resolvedMin.value, resolvedMax.value] : resolvedMin.value,
+  void 0,
   (value) => {
     if (isRange.value) {
       const array = value;
@@ -602,15 +589,6 @@ const hasPeaks = computed(() => {
   const peaks = props.peaks;
   return Array.isArray(peaks) && peaks.length > 0;
 });
-const normalizedPeaks = computed(() => {
-  const peaks = props.peaks ?? [];
-  return peaks.map((p) => clamp(Number.isFinite(p) ? p : 0, 0, 1));
-});
-const waveformViewBox = computed(() => "0 0 100 100");
-const waveformBarClass = (index) => {
-  const barPct = index / Math.max(1, normalizedPeaks.value.length) * 100;
-  return barPct <= modelPercentage.value ? "origam-slider-field__waveform-bar origam-slider-field__waveform-bar--active" : "origam-slider-field__waveform-bar origam-slider-field__waveform-bar--inactive";
-};
 const hoverValue = ref(null);
 const hoverRafId = ref(null);
 const hoverContainerEl = ref(null);
@@ -778,7 +756,7 @@ const resolvedRounded = computed(() => {
 });
 const { roundedClasses, roundedStyles } = useRounded(resolvedRounded);
 const inputProps = computed(() => {
-  return origamInputRef.value?.filterProps(props, ["modelValue", "class", "style", "id", "focused", "centerAffix", "color", "bgColor", "activeColor", "activeBgColor", "hoverColor", "hoverBgColor"]);
+  return origamInputRef.value?.filterProps(props, ["modelValue", "class", "style", "focused", "centerAffix", "color", "bgColor"]);
 });
 const trackProps = computed(() => {
   return omit(props.trackProps ?? {}, ["class", "start", "stop", "color", "bgColor", "disabled", "error", "isVertical", "indexFromEnd", "showTicks", "tickSize", "ticks", "min", "max"]);
@@ -826,7 +804,6 @@ const thumbSurfaceStyles = computed(() => [
 const sliderFieldStyles = computed(() => {
   return [
     {
-      "--origam-slider-field---thumb-size": convertToUnit(20),
       "--origam-slider-field---track-size": convertToUnit(typeof props.trackProps?.size === "number" ? props.trackProps.size : 4)
     },
     props.style
@@ -844,7 +821,6 @@ const sharedStateClasses = computed(() => ({
   "origam-slider-field--inset": props.inset,
   "origam-slider-field--vertical": isVertical.value,
   "origam-slider-field--horizontal": !isVertical.value,
-  "origam-slider-field--reverse": isReversed.value,
   "origam-slider-field--thumb-on-hover": props.showThumbOnHoverOnly || isBareVariant.value,
   "origam-slider-field--has-buffered": hasBuffered.value,
   "origam-slider-field--has-peaks": hasPeaks.value
@@ -927,8 +903,8 @@ defineExpose({
 			&::-webkit-slider-thumb {
 				-webkit-appearance: none;
 				appearance: none;
-				width: var(--origam-slider-field---thumb-size, 20px);
-				height: var(--origam-slider-field---thumb-size, 20px);
+				width: var(--origam-slider-field__thumb---size, 20px);
+				height: var(--origam-slider-field__thumb---size, 20px);
 				background: transparent;
 				border: none;
 				cursor: grab;
@@ -936,8 +912,8 @@ defineExpose({
 			}
 
 			&::-moz-range-thumb {
-				width: var(--origam-slider-field---thumb-size, 20px);
-				height: var(--origam-slider-field---thumb-size, 20px);
+				width: var(--origam-slider-field__thumb---size, 20px);
+				height: var(--origam-slider-field__thumb---size, 20px);
 				background: transparent;
 				border: none;
 				cursor: grab;
@@ -964,8 +940,8 @@ defineExpose({
 		&__thumb {
 			position: absolute;
 			pointer-events: none;
-			width: var(--origam-slider-field---thumb-size, 20px);
-			height: var(--origam-slider-field---thumb-size, 20px);
+			width: var(--origam-slider-field__thumb---size, 20px);
+			height: var(--origam-slider-field__thumb---size, 20px);
 			transform: translate(-50%, -50%);
 			top: 50%;
 			transition: 0.15s 0.05s transform cubic-bezier(0, 0, 0.2, 1);
@@ -991,16 +967,6 @@ defineExpose({
 			height: 100%;
 		}
 
-		&__waveform-bar {
-			&--active {
-				fill: currentColor;
-			}
-
-			&--inactive {
-				fill: color-mix(in srgb, currentColor 35%, transparent);
-			}
-		}
-
 		&__hover-tooltip {
 			position: absolute;
 			pointer-events: none;
@@ -1042,11 +1008,19 @@ defineExpose({
 
 			&--error {
 				#{$this}__container {
-					color: rgba(255, 0, 0, 1);
+					color: var(--origam-slider-field---color-error, rgba(255, 0, 0, 1));
 				}
 			}
 		}
 
+    &--is-rtl {
+      direction: rtl;
+    }
+
+    &--is-ltr {
+      direction: ltr;
+    }
+
 		&--horizontal {
 			align-items: center;
 			margin-inline: 8px 8px;
@@ -1063,7 +1037,7 @@ defineExpose({
 				width: 100%;
 				font-size: 0.5rem;
 				padding: 0 5px;
-				background-color: rgb(148, 148, 148);
+				background-color: var(--origam-slider-field__track---background-color, rgb(148, 148, 148));
 				height: var(--origam-slider-field---track-size, 14px);
 				transition: 0.2s background-color cubic-bezier(0.4, 0, 0.2, 1);
 
@@ -1098,7 +1072,7 @@ defineExpose({
 			#{$this}__input {
 				inset-inline-start: 0;
 				width: 100%;
-				height: var(--origam-slider-field---thumb-size, 20px);
+				height: var(--origam-slider-field__thumb---size, 20px);
 			}
 		}
 
@@ -1130,7 +1104,7 @@ defineExpose({
 				}
 
 				.origam-slider-field-track__tick {
-					margin-inline-start: calc(calc(var(--origam-slider-field-track---size) + 2px) / 2);
+					margin-inline-start: calc(calc(var(--origam-slider-field-track---size, 2) + 2px) / 2);
 					transform: translate(calc(var(--origam-slider-field-track---size, 2) / -2), calc(var(--origam-slider-field-track---size, 2) / 2));
 				}
 
@@ -1152,7 +1126,7 @@ defineExpose({
 				writing-mode: vertical-lr;
 				-webkit-appearance: slider-vertical;
 				appearance: slider-vertical;
-				width: var(--origam-slider-field---thumb-size, 20px);
+				width: var(--origam-slider-field__thumb---size, 20px);
 				height: 100%;
 				top: 0;
 			}
@@ -1307,7 +1281,7 @@ defineExpose({
 		}
 
 		.origam-slider-field__thumb {
-			--origam-slider-field---thumb-size: var(--origam-slider-field--bare---thumb-size, 12px);
+			--origam-slider-field__thumb---size: var(--origam-slider-field--bare---thumb-size, 12px);
 			background: currentColor;
 		}
 
@@ -1353,13 +1327,13 @@ defineExpose({
 	.origam-slider-field-thumb {
 		$this: &;
 
-		color: rgba(66, 66, 66, 1);
+		color: var(--origam-slider-field__thumb---background-color, rgba(66, 66, 66, 1));
 		outline: none;
 		transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
 
 		&__surface {
-			width: var(--origam-slider-field---thumb-size, 20px);
-			height: var(--origam-slider-field---thumb-size, 20px);
+			width: var(--origam-slider-field__thumb---size, 20px);
+			height: var(--origam-slider-field__thumb---size, 20px);
 			border: 1px solid var(--origam-slider-field-thumb__surface---border-color, rgba(0, 0, 0, 0.18));
 			border-radius: 50%;
 			user-select: none;

package/dist/src/components/SliderField/OrigamSliderFieldTrack.vue

@@ -1,5 +1,6 @@
 <template>
 	<div
+			:id="id"
 			:class="sliderFieldTrackClasses"
 			:style="sliderFieldTrackStyles"
 	>
@@ -49,13 +50,11 @@
 
 <script lang="ts" setup>
 import { computed, StyleValue, useSlots } from "vue";
-import {
-  useBackgroundColor,
-  useProps,
-  useRounded,
-  useStyle
-} from "../../composables";
-import { convertToUnit, int } from "../../utils";
+import { useBackgroundColor } from "../../composables/Commons/backgroundColor.composable";
+import { useProps } from "../../composables/Commons/props.composable";
+import { useRounded } from "../../composables/Commons/rounded.composable";
+import { useStyle } from "../../composables/Commons/style.composable";
+import { convertToUnit, int } from "../../utils/Commons/commons.util";
 const props = defineProps({
   start: { type: Number, required: false, default: 0 },
   stop: { type: Number, required: false, default: 100 },
@@ -80,6 +79,7 @@ const props = defineProps({
   roundedBottomLeft: { type: [Boolean, Number, String], required: false },
   roundedBottomRight: { type: [Boolean, Number, String], required: false }
 });
+defineEmits([]);
 defineSlots();
 const { filterProps } = useProps(props);
 const slots = useSlots();
@@ -203,7 +203,7 @@ const sliderFieldTrackTicksClasses = computed(() => {
     }
   ];
 });
-const { id, css, load, isLoaded, unload } = useStyle(sliderFieldTrackStyles);
+const { id, css, load, isLoaded, unload } = useStyle(sliderFieldTrackStyles, () => props.id);
 defineExpose({
   filterProps,
   css,
@@ -219,7 +219,16 @@ defineExpose({
 		$this: &;
 
 		position: relative;
-		border-radius: 9999px;
+
+		// #C2 — zero-specificity default so a scale-driven utility class
+		// (`.origam--rounded-lg` from `rounded="lg"`) wins the cascade.
+		// Without `:where()`, this scoped rule's [data-v-hash] pushes it
+		// to (0,2,0), beating the utility's (0,1,0), and the `rounded`
+		// prop's scale form goes silently inert.
+		:where(&) {
+			border-radius: var(--origam-slider-field__track---border-radius, 9999px);
+		}
+
 		pointer-events: none;
 
 		@media (forced-colors: active) {
@@ -238,11 +247,11 @@ defineExpose({
 		}
 
 		&__background {
-			background-color: rgb(148, 148, 148);
+			background-color: var(--origam-slider-field__track---background-color, rgb(148, 148, 148));
 		}
 
 		&__fill {
-			background-color: rgba(84, 84, 84, 1);
+			background-color: var(--origam-slider-field-track__fill---background-color, rgba(84, 84, 84, 1));
 		}
 
 		&__ticks {
@@ -258,7 +267,7 @@ defineExpose({
 		}
 
 		&__tick {
-			background-color: rgba(66, 66, 66, 1);
+			background-color: var(--origam-slider-field__tick---background-color, rgba(66, 66, 66, 1));
 			position: absolute;
 			opacity: 0;
 			transition: 0.2s opacity cubic-bezier(0.4, 0, 0.2, 1);
@@ -268,7 +277,7 @@ defineExpose({
 			transform: translate(calc(var(--origam-slider-field-track__tick---size, 2) / -2), calc(var(--origam-slider-field-track__tick---size, 2) / -2));
 
 			&--filled {
-				background-color: rgba(238, 238, 238, 1);
+				background-color: var(--origam-slider-field__tick---background-color-active, rgba(238, 238, 238, 1));
 			}
 
 			&--first {

package/dist/src/components/Snackbar/OrigamSnackbar.vue

@@ -79,6 +79,7 @@ import {
   computed,
   inject,
   mergeProps,
+  onBeforeUnmount,
   onMounted,
   ref,
   shallowRef,
@@ -87,25 +88,23 @@ import {
   watch,
   watchEffect
 } from "vue";
-import { OrigamOverlay, OrigamSnack } from "../../components";
+import OrigamOverlay from "../Overlay/OrigamOverlay.vue";
+import OrigamSnack from "../Transition/OrigamSnack.vue";
 import OrigamSnackbarItem from "./OrigamSnackbarItem.vue";
-import {
-  useBothColor,
-  useDefaults,
-  useLayout,
-  usePosition,
-  useProps,
-  useScopeId,
-  useStateEffect,
-  useStatus,
-  useStyle,
-  useToggleScope,
-  useVModel
-} from "../../composables";
-import { ORIGAM_LAYOUT_KEY } from "../../consts";
-import { SCROLL_STRATEGIES } from "../../enums";
-import { forwardRefs } from "../../utils";
-const _props = defineProps({
+import { useBothColor } from "../../composables/Commons/bothColor.composable";
+import { useLayout } from "../../composables/Commons/layout.composable";
+import { usePosition } from "../../composables/Commons/position.composable";
+import { useProps } from "../../composables/Commons/props.composable";
+import { useScopeId } from "../../composables/Commons/scopeId.composable";
+import { useStateEffect } from "../../composables/Commons/stateEffect.composable";
+import { useStatus } from "../../composables/Commons/status.composable";
+import { useStyle } from "../../composables/Commons/style.composable";
+import { useToggleScope } from "../../composables/Commons/toggleScope.composable";
+import { useVModel } from "../../composables/Commons/vModel.composable";
+import { ORIGAM_LAYOUT_KEY } from "../../consts/Commons/layout.const";
+import { SCROLL_STRATEGIES } from "../../enums/Commons/scroll.enum";
+import { forwardRefs } from "../../utils/Commons/forwardRefs.util";
+const props = defineProps({
   multiLine: { type: Boolean, required: false },
   text: { type: String, required: false },
   timer: { type: [Boolean, String], required: false },
@@ -199,9 +198,9 @@ const _props = defineProps({
   elevation: { type: [Number, String], required: false, default: 1 },
   active: { type: [Boolean, Object], required: false },
   activeClass: { type: String, required: false },
-  hover: { type: [Boolean, Object], required: false }
+  hover: { type: [Boolean, Object], required: false },
+  hoverClass: { type: String, required: false }
 });
-const props = useDefaults(_props);
 defineSlots();
 defineEmits(["update:modelValue"]);
 const { filterProps } = useProps(props);
@@ -240,6 +239,7 @@ watch(() => props.timeout, startTimeout);
 onMounted(() => {
   if (isActive.value) startTimeout();
 });
+onBeforeUnmount(clearTimeout);
 const handlePointerenter = () => {
   isHovering.value = true;
   clearTimeout();
@@ -330,7 +330,7 @@ const snackbarItemExtraClasses = computed(() => {
     props.class
   ];
 });
-const { id, css, load, isLoaded, unload } = useStyle(snackbarStyles);
+const { id, css, load, isLoaded, unload } = useStyle(snackbarStyles, () => props.id);
 defineExpose(forwardRefs({
   filterProps,
   css,
@@ -346,10 +346,9 @@ defineExpose(forwardRefs({
     $this: &;
 
     justify-content: center;
-    z-index: var(--origam-snackbar---z-index, var(--origam-z-index-toast, 1060));
+    z-index: var(--origam-snackbar---z-index, var(--origam-zIndex---toast, 1060));
     margin: var(--origam-snackbar---margin, 8px);
     margin-inline-end: calc(var(--origam-snackbar---margin, 8px) + 0px);
-    padding: var(--origam-layout---position-top) var(--origam-layout---position-right) var(--origam-layout---position-bottom) var(--origam-layout---position-left);
 
     &:not(#{$this}--center) {
       &:not(#{$this}--top) {
@@ -426,7 +425,7 @@ defineExpose(forwardRefs({
 
         :deep(#{$this}__wrapper) {
           background-color: var(--origam-color__feedback--#{$status}---bgSubtle);
-          border-color: var(--origam-color__feedback--#{$status}---border);
+          border-color: var(--origam-snackbar--#{$status}---border, var(--origam-color__feedback--#{$status}---border));
           color: var(--origam-color__feedback--#{$status}---fgSubtle);
         }
 
@@ -461,7 +460,7 @@ defineExpose(forwardRefs({
 
     &--absolute {
       position: absolute;
-      z-index: var(--origam-snackbar--absolute---z-index, var(--origam-z-index-raised, 1));
+      z-index: var(--origam-snackbar--absolute---z-index, var(--origam-zIndex---raised, 1));
     }
 
     &__item--multi-line {

package/dist/src/components/Snackbar/OrigamSnackbarGroup.vue

@@ -4,7 +4,7 @@
       :is="tag"
       :id="resolvedDomId"
       ref="rootRef"
-      :aria-label="'Notifications'"
+      :aria-label="groupAriaLabel"
       :class="stackClasses"
       :style="stackStyles"
       role="region"
@@ -20,7 +20,6 @@
           :actions="item.actions"
           :aria-live="resolveAriaLive(item.intent)"
           :data-cy="`origam-snackbar-group-item-${item.id}`"
-          :dismiss-label="'Dismiss notification'"
           :dismissible="resolveDismissible(item)"
           :icon="item.icon"
           :intent="item.intent ?? 'info'"
@@ -38,15 +37,13 @@
 <script lang="ts" setup>
 import { computed, ref, StyleValue, watch } from "vue";
 import OrigamSnackbarItem from "./OrigamSnackbarItem.vue";
-import { useProps, useStyle } from "../../composables";
-import { useSnackbarGroupInternal } from "../../composables/Snackbar/snackbar-group.composable";
-import { INTENT, SNACKBAR_GROUP_DIRECTION } from "../../enums";
-import {
-  SNACKBAR_GROUP_DEFAULT_DURATION,
-  SNACKBAR_GROUP_DEFAULT_ID,
-  SNACKBAR_GROUP_DEFAULT_MAX,
-  SNACKBAR_GROUP_DEFAULT_SPACING
-} from "../../consts";
+import { useLocale } from "../../composables/Commons/locale.composable";
+import { useProps } from "../../composables/Commons/props.composable";
+import { useStyle } from "../../composables/Commons/style.composable";
+import { useSnackbarGroupInternal } from "../../composables/Snackbar/snackbarGroupInternal.composable";
+import { INTENT } from "../../enums/Commons/intent.enum";
+import { SNACKBAR_GROUP_DIRECTION } from "../../enums/Snackbar/snackbar-group.enum";
+import { SNACKBAR_GROUP_DEFAULT_DURATION, SNACKBAR_GROUP_DEFAULT_ID, SNACKBAR_GROUP_DEFAULT_MAX, SNACKBAR_GROUP_DEFAULT_SPACING } from "../../consts/Snackbar/snackbar-group.const";
 const props = defineProps({
   id: { type: String, required: false, default: SNACKBAR_GROUP_DEFAULT_ID },
   location: { type: null, required: false, default: "bottom-right" },
@@ -58,9 +55,12 @@ const props = defineProps({
   style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
   tag: { type: String, required: false, default: "div" }
 });
+defineEmits([]);
+defineSlots();
+const { t } = useLocale();
 const { filterProps } = useProps(props);
 const rootRef = ref();
-const { rawItems, registerDefaultDuration } = useSnackbarGroupInternal(props.id);
+const { rawItems, registerDefaultDuration } = useSnackbarGroupInternal(() => props.id);
 watch(() => props.defaultDuration, (duration) => {
   registerDefaultDuration(duration);
 }, { immediate: true });
@@ -73,6 +73,7 @@ const effectiveDirection = computed(() => {
   if (props.direction) return props.direction;
   return props.location.startsWith("top") ? SNACKBAR_GROUP_DIRECTION.TOP_DOWN : SNACKBAR_GROUP_DIRECTION.BOTTOM_UP;
 });
+const groupAriaLabel = computed(() => t("origam.snackbar_group.notifications"));
 const resolveAriaRole = (intent) => {
   return intent === INTENT.WARNING || intent === INTENT.DANGER ? "alert" : "status";
 };
@@ -137,7 +138,7 @@ defineExpose({
 <style lang="scss" scoped>
   .origam-snackbar-group {
     position: fixed;
-    z-index: var(--origam-snackbar-group---z-index, var(--origam-z-index-toast, 1060));
+    z-index: var(--origam-snackbar-group---z-index, var(--origam-zIndex---toast, 1060));
     pointer-events: none;
     max-width: var(--origam-snackbar-group---max-width, 420px);
     width: max-content;
@@ -226,6 +227,38 @@ defineExpose({
         transform: none;
       }
     }
+
+    // #436 — `--origam-snackbar-group__item---*` was declared in the token
+    // sheet but never consumed: `OrigamSnackbarItem` only ever reads its
+    // OWN `--origam-snackbar-item---*` channel (used both standalone via
+    // `<OrigamSnackbar>` and stacked here). Rather than renaming either
+    // family — `--origam-snackbar-item---*` is already live and correct —
+    // this lets the GROUP override the item's presentation specifically
+    // when stacked, same pattern as Toolbar's `:deep(.origam-btn)` block.
+    // Each fallback is the item's OWN already-declared value, so this is
+    // zero-change until a theme actually sets a `__item` token. The 3
+    // tokens whose declared value does NOT match what SnackbarItem
+    // currently renders (box-shadow, content-gap, text-gap — see the
+    // ticket write-up) are deliberately left out: wiring them would change
+    // today's rendering, not just make it themeable.
+    :deep(.origam-snackbar-item) {
+      --origam-snackbar-item---gap: var(--origam-snackbar-group__item---gap, var(--origam-space---3, 12px));
+      --origam-snackbar-item---min-width: var(--origam-snackbar-group__item---min-width, 288px);
+      --origam-snackbar-item---max-width: var(--origam-snackbar-group__item---max-width, 420px);
+      --origam-snackbar-item---padding: var(--origam-snackbar-group__item---padding, 12px 14px);
+      --origam-snackbar-item---border-radius: var(--origam-snackbar-group__item---border-radius, var(--origam-radius---md, 8px));
+      --origam-snackbar-item---border-width: var(--origam-snackbar-group__item---border-width, var(--origam-border__width---thin, 1px));
+      --origam-snackbar-item---background-color: var(--origam-snackbar-group__item---background-color, var(--origam-color__surface---default));
+      --origam-snackbar-item---border-color: var(--origam-snackbar-group__item---border-color, var(--origam-color__border---subtle));
+      --origam-snackbar-item---color: var(--origam-snackbar-group__item---color, var(--origam-color__text---primary));
+      --origam-snackbar-item---font-size: var(--origam-snackbar-group__item---font-size, var(--origam-font__size---md, 0.875rem));
+      --origam-snackbar-item__prepend---color: var(--origam-snackbar-group__item---prepend-color, currentColor);
+      --origam-snackbar-item__title---font-weight: var(--origam-snackbar-group__item---title-font-weight, var(--origam-font__weight---semibold, 600));
+      --origam-snackbar-item__message---font-weight: var(--origam-snackbar-group__item---message-font-weight, var(--origam-font__weight---regular, 400));
+      --origam-snackbar-item__message---color: var(--origam-snackbar-group__item---message-color, currentColor);
+      --origam-snackbar-item__message---opacity: var(--origam-snackbar-group__item---message-opacity, 0.85);
+      --origam-snackbar-item__action---color: var(--origam-snackbar-group__item---action-color, var(--origam-color__action--primary---fg));
+    }
   }
 </style>