origam 2.15.0 → 2.17.0

package/dist/src/components/Treeview/OrigamTreeviewNode.vue

@@ -1,103 +1,109 @@
 <template>
-	<div
-			:class="nodeWrapperClasses"
-			role="none"
-	>
-		<div
-				:class="rowClasses"
-				:style="rowStyles"
-				role="treeitem"
-				:aria-expanded="hasChildren ? isNodeExpanded : undefined"
-				:aria-selected="isSelectable ? isNodeSelected : undefined"
-				:aria-disabled="node.disabled || undefined"
-				:aria-label="node.label"
-				:tabindex="node.disabled ? -1 : 0"
-				:data-cy="`treeview-row-${node.id}`"
-				@click="handleRowClick"
-				@keydown="handleKeydown"
-		>
-			<template v-if="depth > 0 && treeview?.showLines.value">
+  <div
+    :class="nodeWrapperClasses"
+    :style="rootStyles"
+    role="none"
+  >
+    <div
+      :id="id"
+      :class="rowClasses"
+      :style="rowStyles"
+      role="treeitem"
+      :aria-expanded="hasChildren ? isNodeExpanded : undefined"
+      :aria-selected="isSelectable ? isNodeSelected : undefined"
+      :aria-disabled="node.disabled || undefined"
+      :aria-label="node.label"
+      :tabindex="node.disabled ? -1 : 0"
+      :data-cy="`treeview-row-${node.id}`"
+      @click="handleRowClick"
+      @keydown="handleKeydown"
+    >
+      <template v-if="depth > 0 && treeview?.showLines.value">
 				<span
-						v-for="level in depth"
-						:key="level"
-						class="origam-treeview-node__guide"
-						aria-hidden="true"
-				/>
-			</template>
+          v-for="level in depth"
+          :key="level"
+          class="origam-treeview-node__guide"
+          aria-hidden="true"
+        />
+      </template>
 
-			<span
-					:class="chevronClasses"
-					aria-hidden="true"
-					@click.stop="handleChevronClick"
-			>
+      <span
+        :class="chevronClasses"
+        aria-hidden="true"
+        @click.stop="handleChevronClick"
+      >
 				<template v-if="hasChildren">
 					&#8250;
 				</template>
 			</span>
 
-			<span
-					v-if="node.icon || hasChildren"
-					class="origam-treeview-node__icon"
-					aria-hidden="true"
-			>
-				<template v-if="node.icon">{{ node.icon }}</template>
+      <span
+        v-if="node.icon || hasChildren"
+        class="origam-treeview-node__icon"
+        aria-hidden="true"
+      >
+				<template v-if="node.icon">
+          <origam-icon :icon="node.icon"/>
+        </template>
 				<template v-else-if="hasChildren">
 					{{ isNodeExpanded ? '📂' : '📁' }}
 				</template>
 				<template v-else>📄</template>
 			</span>
 
-			<span class="origam-treeview-node__label">{{ node.label }}</span>
+      <span class="origam-treeview-node__label">{{ node.label }}</span>
 
-			<span
-					v-if="node.size"
-					class="origam-treeview-node__size"
-			>{{ node.size }}</span>
-		</div>
+      <span
+        v-if="node.size"
+        class="origam-treeview-node__size"
+      >{{ node.size }}</span>
+    </div>
 
-		<slot
-				name="node"
-				:node="node"
-				:depth="depth"
-				:is-expanded="isNodeExpanded"
-				:is-selected="isNodeSelected"
-		/>
+    <slot
+      name="node"
+      :node="node"
+      :depth="depth"
+      :is-expanded="isNodeExpanded"
+      :is-selected="isNodeSelected"
+    />
 
-		<div
-				v-if="isNodeExpanded && hasChildren"
-				class="origam-treeview-node__children"
-				role="group"
-				:aria-label="`${node.label} contents`"
-		>
-			<origam-treeview-node
-					v-for="child in node.children"
-					:key="child.id"
-					:node="child"
-					:depth="(depth ?? 0) + 1"
-					:data-cy="`treeview-node-${child.id}`"
-			>
-				<template
-						v-if="hasNodeSlot"
-						#node="slotProps"
-				>
-					<slot
-							name="node"
-							v-bind="slotProps"
-					/>
-				</template>
-			</origam-treeview-node>
-		</div>
-	</div>
+    <div
+      v-if="isNodeExpanded && hasChildren"
+      class="origam-treeview-node__children"
+      role="group"
+      :aria-label="childrenAriaLabel"
+    >
+      <origam-treeview-node
+        v-for="child in node.children"
+        :key="child.id"
+        :node="child"
+        :depth="(depth ?? 0) + 1"
+        :data-cy="`treeview-node-${child.id}`"
+      >
+        <template
+          v-if="hasNodeSlot"
+          #node="slotProps"
+        >
+          <slot
+            name="node"
+            v-bind="slotProps"
+          />
+        </template>
+      </origam-treeview-node>
+    </div>
+  </div>
 </template>
 
 <script lang="ts" setup>
 import { computed, inject, useSlots } from "vue";
-import { ORIGAM_TREEVIEW_KEY } from "../../consts";
-import {
-  useProps,
-  useStyle
-} from "../../composables";
+import { ORIGAM_TREEVIEW_KEY } from "../../consts/Treeview/treeview.const";
+import { TREEVIEW_SELECT_MODE, TREEVIEW_SELECTABLE_NODES } from "../../enums/Treeview/treeview.enum";
+import { useLocale } from "../../composables/Commons/locale.composable";
+import { useProps } from "../../composables/Commons/props.composable";
+import { useStyle } from "../../composables/Commons/style.composable";
+import { OrigamIcon } from "../Icon";
 defineOptions({ name: "OrigamTreeviewNode" });
+defineEmits([]);
 defineSlots();
 const props = defineProps({
   node: { type: Object, required: true },
@@ -107,8 +113,10 @@ const props = defineProps({
   style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true }
 });
 const { filterProps } = useProps(props);
+const { t } = useLocale();
 const slots = useSlots();
 const hasNodeSlot = computed(() => !!slots.node);
+const childrenAriaLabel = computed(() => t("origam.treeview.node_children_aria_label", props.node.label));
 const treeview = inject(ORIGAM_TREEVIEW_KEY);
 const hasChildren = computed(() => {
   if (props.node.expandable !== void 0) return props.node.expandable;
@@ -117,10 +125,10 @@ const hasChildren = computed(() => {
 const isLeaf = computed(() => !hasChildren.value);
 const isSelectable = computed(() => {
   if (props.node.disabled) return false;
-  const mode = treeview?.selectMode.value ?? "none";
-  if (mode === "none") return false;
-  const selectableNodes = treeview?.selectableNodes.value ?? "leaf";
-  if (selectableNodes === "leaf") return isLeaf.value;
+  const mode = treeview?.selectMode.value ?? TREEVIEW_SELECT_MODE.NONE;
+  if (mode === TREEVIEW_SELECT_MODE.NONE) return false;
+  const selectableNodes = treeview?.selectableNodes.value ?? TREEVIEW_SELECTABLE_NODES.LEAF;
+  if (selectableNodes === TREEVIEW_SELECTABLE_NODES.LEAF) return isLeaf.value;
   return true;
 });
 const isNodeExpanded = computed(() => treeview?.isExpanded(props.node.id) ?? false);
@@ -169,6 +177,7 @@ const handleKeydown = (e) => {
     }
   }
 };
+const rootStyles = computed(() => props.style);
 const nodeWrapperClasses = computed(() => [
   "origam-treeview-node",
   {
@@ -201,7 +210,7 @@ const rowStyles = computed(() => {
     }
   ];
 });
-const { id, css, load, isLoaded, unload } = useStyle(rowStyles);
+const { id, css, load, isLoaded, unload } = useStyle(rowStyles, () => props.id);
 defineExpose({
   filterProps,
   isNodeExpanded,
@@ -215,110 +224,110 @@ defineExpose({
 </script>
 
 <style lang="scss" scoped>
-	.origam-treeview-node {
-		display: flex;
-		flex-direction: column;
+  .origam-treeview-node {
+    display: flex;
+    flex-direction: column;
 
-		&__row {
-			display: flex;
-			align-items: center;
-			gap: 6px;
-			min-height: var(--origam-treeview---row-height, 32px);
-			padding-inline-end: var(--origam-treeview---row-padding-inline, 8px);
-			border-radius: var(--origam-radius---sm, 4px);
-			cursor: pointer;
-			outline: none;
-			transition: background-color 150ms ease;
-			user-select: none;
-			box-sizing: border-box;
-			width: 100%;
+    &__row {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      min-height: var(--origam-treeview---row-height, 32px);
+      padding-inline-end: var(--origam-treeview---row-padding-inline, 8px);
+      border-radius: var(--origam-radius---sm, 4px);
+      cursor: pointer;
+      outline: none;
+      transition: background-color 150ms ease;
+      user-select: none;
+      box-sizing: border-box;
+      width: 100%;
 
-			&:hover:not(.origam-treeview-node__row--disabled) {
-				background-color: var(--origam-treeview---row-bg-hover, var(--origam-color__surface---overlay));
-			}
+      &:hover:not(.origam-treeview-node__row--disabled) {
+        background-color: var(--origam-treeview---row-bg-hover, var(--origam-color__surface---overlay));
+      }
 
-			&:focus-visible {
-				outline: 2px solid var(--origam-color__border---focus);
-				outline-offset: -2px;
-			}
+      &:focus-visible {
+        outline: 2px solid var(--origam-color__border---focus);
+        outline-offset: -2px;
+      }
 
-			&--selected {
-				background-color: var(--origam-treeview---row-bg-selected, var(--origam-color__action--primary---bgSubtle));
-				color: var(--origam-treeview---row-color-selected, var(--origam-color__action--primary---fgSubtle));
+      &--selected {
+        background-color: var(--origam-treeview---row-bg-selected, var(--origam-color__action--primary---bgSubtle));
+        color: var(--origam-treeview---row-color-selected, var(--origam-color__action--primary---fgSubtle));
 
-				.origam-treeview-node__label {
-					color: var(--origam-treeview---row-color-selected, var(--origam-color__action--primary---fgSubtle));
-				}
-			}
+        .origam-treeview-node__label {
+          color: var(--origam-treeview---row-color-selected, var(--origam-color__action--primary---fgSubtle));
+        }
+      }
 
-			&--disabled {
-				color: var(--origam-treeview---row-color-disabled, var(--origam-color__text---disabled));
-				cursor: not-allowed;
-				pointer-events: none;
+      &--disabled {
+        color: var(--origam-treeview---row-color-disabled, var(--origam-color__text---disabled));
+        cursor: not-allowed;
+        pointer-events: none;
 
-				.origam-treeview-node__label {
-					color: var(--origam-treeview---row-color-disabled, var(--origam-color__text---disabled));
-				}
-			}
-		}
+        .origam-treeview-node__label {
+          color: var(--origam-treeview---row-color-disabled, var(--origam-color__text---disabled));
+        }
+      }
+    }
 
-		&__guide {
-			display: inline-block;
-			flex-shrink: 0;
-			align-self: stretch;
-			background-color: var(--origam-treeview---guide-color, var(--origam-color__border---subtle));
-			width: var(--origam-treeview---guide-thickness, 1px);
-			margin-inline-end: calc(var(--origam-treeview---indent-size, 16px) - var(--origam-treeview---guide-thickness, 1px));
-		}
+    &__guide {
+      display: inline-block;
+      flex-shrink: 0;
+      align-self: stretch;
+      background-color: var(--origam-treeview---guide-color, var(--origam-color__border---subtle));
+      width: var(--origam-treeview---guide-thickness, 1px);
+      margin-inline-end: calc(var(--origam-treeview---indent-size, 16px) - var(--origam-treeview---guide-thickness, 1px));
+    }
 
-		&__chevron {
-			display: inline-flex;
-			align-items: center;
-			justify-content: center;
-			flex-shrink: 0;
-			width: var(--origam-treeview---chevron-size, 16px);
-			height: var(--origam-treeview---chevron-size, 16px);
-			color: var(--origam-treeview---chevron-color, var(--origam-color__text---secondary));
-			font-size: 14px;
-			line-height: 1;
-			transform: rotate(0deg);
-			transition: transform 200ms ease;
+    &__chevron {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+      width: var(--origam-treeview---chevron-size, 16px);
+      height: var(--origam-treeview---chevron-size, 16px);
+      color: var(--origam-treeview---chevron-color, var(--origam-color__text---secondary));
+      font-size: 14px;
+      line-height: 1;
+      transform: rotate(0deg);
+      transition: transform 200ms ease;
 
-			&--expanded {
-				transform: rotate(90deg);
-			}
+      &--expanded {
+        transform: rotate(90deg);
+      }
 
-			&--hidden {
-				visibility: hidden;
-			}
-		}
+      &--hidden {
+        visibility: hidden;
+      }
+    }
 
-		&__icon {
-			display: inline-flex;
-			align-items: center;
-			flex-shrink: 0;
-			font-size: var(--origam-treeview---icon-size, 16px);
-			color: var(--origam-treeview---icon-color, var(--origam-color__text---primary));
-		}
+    &__icon {
+      display: inline-flex;
+      align-items: center;
+      flex-shrink: 0;
+      font-size: var(--origam-treeview---icon-size, 16px);
+      color: var(--origam-treeview---icon-color, var(--origam-color__text---primary));
+    }
 
-		&__label {
-			flex: 1;
-			overflow: hidden;
-			white-space: nowrap;
-			text-overflow: ellipsis;
-			font-size: var(--origam-treeview---label-font-size, 0.75rem);
-			color: var(--origam-treeview---label-color, var(--origam-color__text---primary));
-		}
+    &__label {
+      flex: 1;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      font-size: var(--origam-treeview---label-font-size, 0.75rem);
+      color: var(--origam-treeview---label-color, var(--origam-color__text---primary));
+    }
 
-		&__size {
-			flex-shrink: 0;
-			font-size: var(--origam-treeview---size-font-size, 0.625rem);
-			color: var(--origam-treeview---size-color, var(--origam-color__text---secondary));
-		}
+    &__size {
+      flex-shrink: 0;
+      font-size: var(--origam-treeview---size-font-size, 0.625rem);
+      color: var(--origam-treeview---size-color, var(--origam-color__text---secondary));
+    }
 
-		&__children {
-			display: flex;
-			flex-direction: column;
-		}
-	}
+    &__children {
+      display: flex;
+      flex-direction: column;
+    }
+  }
 </style>

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

@@ -1,5 +1,6 @@
 <template>
 	<origam-responsive
+			:id="id"
 			class="origam-video"
 			:class="rootClasses"
 			:style="rootStyles"
@@ -229,8 +230,20 @@ import { OrigamBtn } from "../Btn";
 import { OrigamIcon } from "../Icon";
 import { OrigamMediaController } from "../Media";
 import { OrigamResponsive } from "../Responsive";
-import { shouldSuppressAutoplay, useBorder, useColorEffect, useDimension, useElevation, useLocale, useMargin, usePadding, useRounded, useTypography, useVideoPlayer } from "../../composables";
-import { MDI_ICONS } from "../../enums";
+import { shouldSuppressAutoplay } from "../../composables/Media/use-media-player.composable";
+import { useUnsupportedProp } from "../../composables/Commons/unsupportedProp.composable";
+import { useBorder } from "../../composables/Commons/border.composable";
+import { useColorEffect } from "../../composables/Commons/colorEffect.composable";
+import { useDimension } from "../../composables/Commons/dimension.composable";
+import { useElevation } from "../../composables/Commons/elevation.composable";
+import { useLocale } from "../../composables/Commons/locale.composable";
+import { useMargin } from "../../composables/Commons/margin.composable";
+import { usePadding } from "../../composables/Commons/padding.composable";
+import { useRounded } from "../../composables/Commons/rounded.composable";
+import { useTypography } from "../../composables/Commons/typography.composable";
+import { useVideoPlayer } from "../../composables/Video/video-player.composable";
+import { MDI_ICONS } from "../../enums/Commons/mdi.enum";
+import { VIDEO_TRACK_KIND } from "../../enums/Video/video.enum";
 const { t } = useLocale();
 const props = defineProps({
   src: { type: [String, Array], required: true },
@@ -243,7 +256,7 @@ const props = defineProps({
   playsInline: { type: Boolean, required: false, default: true },
   preload: { type: String, required: false, default: "metadata" },
   aspectRatio: { type: String, required: false, default: "16/9" },
-  crossorigin: { type: String, required: false, default: void 0 },
+  crossorigin: { type: null, required: false, default: void 0 },
   disablePictureInPicture: { type: Boolean, required: false, default: false },
   skipSeconds: { type: Number, required: false, default: 30 },
   showCenterControls: { type: Boolean, required: false, default: true },
@@ -298,11 +311,7 @@ const props = defineProps({
   paddingBlock: { type: [Boolean, Number, String], required: false },
   paddingInline: { type: [Boolean, Number, String], required: false },
   elevation: { type: [Number, String], required: false },
-  fontFamily: { type: String, required: false },
-  fontSize: { type: String, required: false },
-  fontWeight: { type: String, required: false },
-  lineHeight: { type: String, required: false },
-  letterSpacing: { type: String, required: false }
+  fontSize: { type: null, required: false }
 });
 const emit = defineEmits(["enterfullscreen", "exitfullscreen", "enterpip", "exitpip", "skip", "quality-change", "download", "play", "pause", "ended", "timeupdate", "volumechange", "loadedmetadata", "error", "update:playbackRate"]);
 defineSlots();
@@ -339,10 +348,8 @@ const resolvedSources = computed(() => {
   return sources;
 });
 const { videoRef, state, methods } = useVideoPlayer({
-  autoplay: props.autoplay,
-  muted: resolvedMuted.value,
-  loop: props.loop,
-  preload: props.preload
+  autoplay: () => props.autoplay,
+  muted: () => resolvedMuted.value
 });
 function onTimeUpdate() {
   emit("timeupdate", state.currentTime.value);
@@ -534,7 +541,7 @@ async function togglePipBtn() {
 }
 const captionsEnabled = ref(false);
 const hasCaptions = computed(() => props.tracks.some((track) => {
-  return track.kind === "captions" || track.kind === "subtitles";
+  return track.kind === VIDEO_TRACK_KIND.CAPTIONS || track.kind === VIDEO_TRACK_KIND.SUBTITLES;
 }));
 function toggleCaptions() {
   const el = videoRef.value;
@@ -605,6 +612,12 @@ const slotBindings = computed(() => ({
   methods
 }));
 const { colorClasses, colorStyles } = useColorEffect(props);
+useUnsupportedProp(
+  "OrigamVideo",
+  "showCenterControls",
+  "no centre overlay is rendered; the controls live in the bottom bar only.",
+  () => props.showCenterControls === true
+);
 const hasColorProp = computed(() => !!props.color);
 const hasBgColorProp = computed(() => !!props.bgColor);
 const { borderClasses, borderStyles } = useBorder(props);
@@ -669,31 +682,9 @@ defineExpose({
 		overflow: hidden;
 		border-radius: var(--origam-video---border-radius, 0);
 
-		/*
-		 * Force the chrome (MediaController play / volume / cog,
-		 * native `<button>`-based MediaVolumeControl) to white by
-		 * default — the controller's own SCSS reads `color:
-		 * var(--origam-media-controller---color, inherit)` which
-		 * defaults to the `#171717` text-primary token. On the dark
-		 * video overlay that produces near-invisible icons (the
-		 * user-reported "icons all black" symptom).
-		 *
-		 * The variable is overridden to `inherit` further down when
-		 * the consumer passes `color` / `bgColor`, so `useColorEffect`
-		 * gets to drive the tint through.
-		 */
 		--origam-media-controller---color: #ffffff;
 	}
 
-	/*
-	 * Tint propagation when the consumer passes `color` or `bgColor`:
-	 * the MediaController + the white-by-default `.origam-video__btn`
-	 * icons need to inherit the host colour so the scrubber's
-	 * `currentColor` (set by `scrubberColorStyle`) AND the icons
-	 * track the user's intent. Without these overrides the
-	 * MediaController's own scoped `color: var(--origam-media-controller---color, inherit)`
-	 * pins the chrome back to the dark text-primary token.
-	 */
 	.origam-video--has-color,
 	.origam-video--has-bg-color {
 		--origam-media-controller---color: inherit;
@@ -707,30 +698,10 @@ defineExpose({
 		}
 	}
 
-	/*
-	 * Native `<button class="origam-media-volume-control__btn">` lives
-	 * inside OrigamMediaVolumeControl with its own scoped CSS that
-	 * doesn't honour `--origam-media-controller---color`. Force it
-	 * to inherit from the controller (which is now white by default)
-	 * so the volume icon matches the rest of the chrome.
-	 */
 	:deep(.origam-media-volume-control__btn) {
 		color: inherit;
 	}
 
-	/*
-	 * Scrubber track / buffer background — overrides the MediaController
-	 * defaults so the dark, semi-translucent track doesn't let the
-	 * video frame underneath bleed through with whatever hue the
-	 * picture has at the playhead position (the user-reported "pink
-	 * scrubber" symptom on a pastel-toned video frame). White-tinted
-	 * translucent backgrounds give a uniform light-grey track on
-	 * every video regardless of content.
-	 *
-	 * The :deep(.) reaches into the OrigamMediaScrubber scope to set
-	 * its internal slots; the consumer can still override per-instance
-	 * via `--origam-media-scrubber---track-background-color`.
-	 */
 	:deep(.origam-media-controller__scrubber) {
 		--origam-media-scrubber---track-background-color: rgba(255, 255, 255, 0.28);
 		--origam-media-scrubber---buffer-background-color: rgba(255, 255, 255, 0.42);
@@ -826,11 +797,6 @@ defineExpose({
 		font-size: var(--origam-video--error---icon-font-size, 32px);
 	}
 
-	/* State pulse — YouTube-style brief icon flash at the centre of
-	 * the video when play/pause toggles. PURELY cosmetic, never
-	 * absorbs clicks (pointer-events: none) so the underlying video
-	 * surface stays interactive. Fades in + scales up over ~600 ms
-	 * then disappears. */
 	.origam-video__state-pulse {
 		position: absolute;
 		top: 50%;
@@ -1035,7 +1001,7 @@ defineExpose({
 	}
 
 	:deep(.origam-video__btn.origam-btn) {
-		--origam-btn---color: #ffffff;
+		--origam-btn---color: var(--origam-video__btn---color, #ffffff);
 		--origam-btn---min-width: 36px;
 		--origam-btn---width: 36px;
 		--origam-btn---height: 36px;

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

@@ -31,11 +31,12 @@
 
 		<div
 				class="origam-virtual-scroll__spacer"
-				style="{ 'padding-bottom': convertToUnit(paddingBottom) }"
+				:style="{ 'padding-bottom': convertToUnit(paddingBottom) }"
 		/>
 	</template>
 	<template v-else>
 		<div
+				:id="id"
 				ref="containerRef"
 				:class="virtualScrollClasses"
 				:style="virtualScrollStyles"
@@ -79,15 +80,15 @@
 
 <script lang="ts" setup>
 import { computed, onMounted, onScopeDispose, Ref, StyleValue, toRef } from "vue";
-import { OrigamVirtualScrollItem } from "../../components";
-import {
-  useDimension,
-  useProps,
-  useStyle,
-  useToggleScope,
-  useVirtual
-} from "../../composables";
-import { convertToUnit, getCurrentInstance, getScrollParent } from "../../utils";
+import OrigamVirtualScrollItem from "./OrigamVirtualScrollItem.vue";
+import { useDimension } from "../../composables/Commons/dimension.composable";
+import { useProps } from "../../composables/Commons/props.composable";
+import { useStyle } from "../../composables/Commons/style.composable";
+import { useToggleScope } from "../../composables/Commons/toggleScope.composable";
+import { useVirtual } from "../../composables/Commons/virtual.composable";
+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 },
   renderless: { type: Boolean, required: false },
@@ -104,6 +105,7 @@ const props = defineProps({
   scrollDuration: { type: Number, required: false },
   scrollEasing: { type: String, required: false }
 });
+defineEmits([]);
 defineSlots();
 const { filterProps } = useProps(props);
 const vm = getCurrentInstance("OrigamVirtualScroll");
@@ -148,7 +150,7 @@ const virtualScrollClasses = computed(() => {
     props.class
   ];
 });
-const { id, css, load, isLoaded, unload } = useStyle(virtualScrollStyles);
+const { id, css, load, isLoaded, unload } = useStyle(virtualScrollStyles, () => props.id);
 defineExpose({
   scrollToIndex,
   filterProps,