origam 2.16.0 → 2.17.0

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

@@ -1,15 +1,19 @@
 <template>
 	<component
-			:is="link.tag"
+			:is="link.tag.value"
+			:id="id"
+			ref="root"
 			v-ripple="isClickable && ripple"
 			v-contrast
 			:class="cardClasses"
 			:href="link.href.value"
+			:role="cardRole"
 			:style="cardStyles"
-			:tabindex="disabled ? -1 : undefined"
+			:tabindex="cardTabindex"
 			@click="handleClick"
-			@mouseenter="onMouseenter"
-			@mouseleave="onMouseleave"
+			@keydown="handleKeydown"
+			@mouseenter="mouseenterHandler"
+			@mouseleave="mouseleaveHandler"
 	>
     <span
 		    v-if="isClickable"
@@ -29,6 +33,7 @@
 								v-if="loaderConfig.kind === 'skeleton'"
 								variant="card"
 								:loading="true"
+								:label="loadingText"
 								v-bind="loaderConfig.overrides"
 						/>
 						<origam-progress
@@ -39,6 +44,7 @@
 								:model-value="loaderConfig.modelValue"
 								:type="loaderConfig.kind === 'circular' ? PROGRESS_TYPE.CIRCULAR : PROGRESS_TYPE.LINEAR"
 								:class="cardProgressClasses"
+								:label="loadingText"
 								thickness="4"
 								v-bind="loaderConfig.overrides"
 						/>
@@ -58,6 +64,7 @@
 								:prepend-icon="prependIcon"
 								:subtitle="subtitle"
 								:title="title"
+								:title-id="titleId"
 								class="origam-card__header"
 								@click:prepend="handleClickPrepend"
 								@click:append="handleClickAppend"
@@ -142,26 +149,30 @@
 </template>
 
 <script lang="ts" setup>
-import { OrigamCardHeader, OrigamCardText, OrigamImg, OrigamProgress, OrigamSkeleton } from "../../components";
-import {
-  useActive,
-  useAdjacent,
-  useDefaults,
-  useDensity,
-  useDimension,
-  useHover,
-  useLink,
-  useLoader,
-  useLocation,
-  usePosition,
-  useProps,
-  useStateEffect,
-  useStyle
-} from "../../composables";
-import { vContrast, vRipple } from "../../directives";
-import { DENSITY, LOADER_KIND, PROGRESS_TYPE } from "../../enums";
-import { computed, StyleValue, toRef, useAttrs, useSlots } from "vue";
-const _props = defineProps({
+import OrigamCardHeader from "./OrigamCardHeader.vue";
+import OrigamCardText from "./OrigamCardText.vue";
+import OrigamImg from "../Img/OrigamImg.vue";
+import OrigamProgress from "../Progress/OrigamProgress.vue";
+import OrigamSkeleton from "../Skeleton/OrigamSkeleton.vue";
+import { useAdjacent } from "../../composables/Commons/adjacent.composable";
+import { useDensity } from "../../composables/Commons/density.composable";
+import { useDimension } from "../../composables/Commons/dimension.composable";
+import { useLink } from "../../composables/Commons/link.composable";
+import { useLoader } from "../../composables/Commons/loader.composable";
+import { useLocation } from "../../composables/Commons/location.composable";
+import { usePosition } from "../../composables/Commons/position.composable";
+import { useProps } from "../../composables/Commons/props.composable";
+import { useStateEffect } from "../../composables/Commons/stateEffect.composable";
+import { useStateFlag } from "../../composables/Commons/stateFlag.composable";
+import { useStyle } from "../../composables/Commons/style.composable";
+import vContrast from "../../directives/Contrast/contrast.directive";
+import vRipple from "../../directives/Ripple/ripple.directive";
+import { DENSITY } from "../../enums/Commons/density.enum";
+import { KEYBOARD_VALUES } from "../../enums/Commons/hotkey.enum";
+import { LOADER_KIND } from "../../enums/Commons/loader.enum";
+import { PROGRESS_TYPE } from "../../enums/Progress/progress.enum";
+import { computed, ref, StyleValue, toRef, useAttrs, useSlots } from "vue";
+const props = defineProps({
   disabled: { type: Boolean, required: false },
   flat: { type: Boolean, required: false },
   hover: { type: Boolean, required: false },
@@ -171,6 +182,7 @@ const _props = defineProps({
   text: { type: [String, Number], required: false },
   title: { type: [String, Number], required: false },
   type: { type: null, required: false },
+  titleId: { type: String, required: false },
   id: { type: String, required: false },
   class: { type: [String, Array, Object], required: false },
   style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
@@ -237,14 +249,14 @@ const _props = defineProps({
   active: { type: [Boolean, Object], required: false },
   activeClass: { type: String, required: false }
 });
-const props = useDefaults(_props);
 defineEmits(["click:append", "click:prepend", "update:active", "update:hover"]);
 defineSlots();
 const { filterProps } = useProps(props);
 const attrs = useAttrs();
 const link = useLink(props, attrs);
-const { isHover, hoverState, hoverClasses, onMouseenter, onMouseleave } = useHover(props);
-const { isActive, activeState, activeClasses, onActive } = useActive(props);
+const root = ref();
+const { isOn: isHover, config: hoverState, classes: hoverClasses, set: onMouseenter, unset: onMouseleave } = useStateFlag(props, { state: "hover" });
+const { isOn: isActive, config: activeState, classes: activeClasses, toggle: onActive } = useStateFlag(props, { state: "active" });
 const flatForElevation = computed(() => props.elevation != null ? false : props.flat);
 const {
   colorClasses,
@@ -277,12 +289,31 @@ const {
 const isClickable = computed(() => {
   return !props.disabled && (props.link || link.isClickable.value);
 });
+const isHoverable = computed(() => {
+  return !props.disabled && !props.flat;
+});
+const mouseenterHandler = computed(() => isHoverable.value ? onMouseenter : void 0);
+const mouseleaveHandler = computed(() => isHoverable.value ? onMouseleave : void 0);
 const handleClick = (event) => {
   onActive();
   if (isClickable.value && link.navigate) {
     link.navigate(event);
   }
 };
+const cardRole = computed(() => {
+  return isClickable.value && !link.isLink.value ? "button" : void 0;
+});
+const cardTabindex = computed(() => {
+  if (props.disabled) return -1;
+  return isClickable.value && !link.isLink.value ? 0 : void 0;
+});
+const handleKeydown = (event) => {
+  if (!isClickable.value || link.isLink.value) return;
+  if (event.key === KEYBOARD_VALUES.ENTER || event.key === " ") {
+    event.preventDefault();
+    root.value?.click();
+  }
+};
 const { loaderClasses, loaderConfig } = useLoader(props, LOADER_KIND.LINE);
 const slots = useSlots();
 const hasLoading = computed(() => {
@@ -352,7 +383,7 @@ const cardClasses = computed(() => {
     props.class
   ];
 });
-const { id, css, load, isLoaded, unload } = useStyle(cardStyles);
+const { id, css, load, isLoaded, unload } = useStyle(cardStyles, () => props.id);
 defineExpose({
   filterProps,
   css,

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

@@ -1,6 +1,7 @@
 <template>
 	<component
 			:is="tag"
+			:id="id"
 			:class="cardHeaderClasses"
 			:style="cardHeaderStyles"
 			v-bind="$attrs"
@@ -15,7 +16,10 @@
 					v-if="hasPrepend"
 					key="prepend"
 					class="origam-card-header__prepend"
+					:role="isPrependClickable ? 'button' : undefined"
+					:tabindex="isPrependClickable ? 0 : undefined"
 					@click="handleClickPrepend"
+					@keydown="handleKeydownPrepend"
 			>
 				<slot name="prepend">
 					<origam-avatar
@@ -39,6 +43,7 @@
 			>
 				<div
 						v-if="hasTitle"
+						:id="titleId"
 						key="title"
 						class="origam-card-header__title"
 						:style="titleTypographyStyles"
@@ -70,7 +75,10 @@
 					v-if="hasAppend"
 					key="append"
 					class="origam-card-header__append"
+					:role="isAppendClickable ? 'button' : undefined"
+					:tabindex="isAppendClickable ? 0 : undefined"
 					@click="handleClickAppend"
+					@keydown="handleKeydownAppend"
 			>
 				<slot name="append">
 					<origam-avatar
@@ -92,22 +100,22 @@
 </template>
 
 <script lang="ts" setup>
-import { OrigamAvatar, OrigamIcon } from "../../components";
-import {
-  useAdjacent,
-  useBorder,
-  useDensity,
-  useMargin,
-  usePadding,
-  useProps,
-  useRounded,
-  useStyle,
-  useTypography
-} from "../../composables";
+import OrigamAvatar from "../Avatar/OrigamAvatar.vue";
+import OrigamIcon from "../Icon/OrigamIcon.vue";
+import { useAdjacent } from "../../composables/Commons/adjacent.composable";
+import { useBorder } from "../../composables/Commons/border.composable";
+import { useDensity } from "../../composables/Commons/density.composable";
+import { useMargin } from "../../composables/Commons/margin.composable";
+import { usePadding } from "../../composables/Commons/padding.composable";
+import { useProps } from "../../composables/Commons/props.composable";
+import { useRounded } from "../../composables/Commons/rounded.composable";
+import { useStyle } from "../../composables/Commons/style.composable";
+import { useTypography } from "../../composables/Commons/typography.composable";
 import { computed, StyleValue, toRef, useSlots } from "vue";
 const props = defineProps({
   subtitle: { type: [String, Number], required: false },
   title: { type: [String, Number], required: false },
+  titleId: { type: String, required: false },
   tag: { type: String, required: false, default: "OrigamToolbar" },
   id: { type: String, required: false },
   class: { type: [String, Array, Object], required: false },
@@ -149,7 +157,6 @@ const props = defineProps({
   appendIcon: { type: null, required: false },
   prependAvatar: { type: String, required: false },
   prependIcon: { type: null, required: false },
-  fontFamily: { type: null, required: false },
   fontSize: { type: null, required: false },
   fontWeight: { type: null, required: false },
   lineHeight: { type: null, required: false },
@@ -169,6 +176,10 @@ const { typographyStyles: subtitleTypographyStyles } = useTypography(props, "car
 const {
   onClickPrepend: handleClickPrepend,
   onClickAppend: handleClickAppend,
+  onKeydownPrepend: handleKeydownPrepend,
+  onKeydownAppend: handleKeydownAppend,
+  isPrependClickable,
+  isAppendClickable,
   hasPrepend,
   hasAppend
 } = useAdjacent(props, toRef(props, "prependIcon"), toRef(props, "appendIcon"));
@@ -198,7 +209,7 @@ const cardHeaderClasses = computed(() => {
     props.class
   ];
 });
-const { id, css, load, isLoaded, unload } = useStyle(cardHeaderStyles);
+const { id, css, load, isLoaded, unload } = useStyle(cardHeaderStyles, () => props.id);
 defineExpose({
   filterProps,
   css,
@@ -265,15 +276,24 @@ defineExpose({
 		outline: var(--origam-card-header---outline);
 		position: var(--origam-card-header---position);
 
-		padding-block-start: calc(var(--origam-card-header---padding-block-start) + var(--origam-card-header---density));
-		padding-block-end: calc(var(--origam-card-header---padding-block-end) + var(--origam-card-header---density));
-		padding-inline-start: calc(var(--origam-card-header---padding-inline-start) + var(--origam-card-header---density));
-		padding-inline-end: calc(var(--origam-card-header---padding-inline-end) + var(--origam-card-header---density));
-
-		margin-block-start: var(--origam-card-header---margin-block-start);
-		margin-block-end: var(--origam-card-header---margin-block-end);
-		margin-inline-start: var(--origam-card-header---margin-inline-start);
-		margin-inline-end: var(--origam-card-header---margin-inline-end);
+		// ⛔ #C2 — zero-specificity defaults so a scale-driven utility
+		// class (`.origam--p-4` / `.origam--m-4` from `padding="4"` /
+		// `margin="4"`) wins the cascade. Without `:where()`, this scoped
+		// rule's [data-v-hash] pushes each declaration to (0,2,0), beating
+		// the utility's (0,1,0), and the scale form of both props goes
+		// silently inert. See CLAUDE.md "CSS-first" table — `:where(…)`
+		// is the documented zero-specificity default.
+		:where(&) {
+			padding-block-start: calc(var(--origam-card-header---padding-block-start) + var(--origam-card-header---density));
+			padding-block-end: calc(var(--origam-card-header---padding-block-end) + var(--origam-card-header---density));
+			padding-inline-start: calc(var(--origam-card-header---padding-inline-start) + var(--origam-card-header---density));
+			padding-inline-end: calc(var(--origam-card-header---padding-inline-end) + var(--origam-card-header---density));
+
+			margin-block-start: var(--origam-card-header---margin-block-start);
+			margin-block-end: var(--origam-card-header---margin-block-end);
+			margin-inline-start: var(--origam-card-header---margin-inline-start);
+			margin-inline-end: var(--origam-card-header---margin-inline-end);
+		}
 
 		border-color: var(--origam-card-header---border-color);
 		border-style: var(--origam-card-header---border-style);
@@ -360,8 +380,8 @@ defineExpose({
 
 		&__subtitle {
 			-webkit-box-orient: vertical;
+			color: var(--origam-card-header__subtitle---color);
 			display: var(--origam-card-header__subtitle---display);
-			opacity: var(--origam-card-header__subtitle---opacity);
 			overflow: var(--origam-card-header__subtitle---overflow);
 			padding-block-start: var(--origam-card-header__subtitle---padding-block-start);
 			padding-block-end: var(--origam-card-header__subtitle---padding-block-end);
@@ -459,8 +479,8 @@ 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---display: -webkit-box;
-		--origam-card-header__subtitle---opacity: 0.6;
 		--origam-card-header__subtitle---overflow: hidden;
 
 		--origam-card-header__subtitle---padding-block-start: 0;

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

@@ -1,6 +1,7 @@
 <template>
 	<component
 			:is="tag"
+			:id="id"
 			:class="cardTextClasses"
 			:style="cardTextStyles"
 	>
@@ -11,16 +12,14 @@
 </template>
 
 <script lang="ts" setup>
-import {
-  useBorder,
-  useDensity,
-  useMargin,
-  usePadding,
-  useProps,
-  useRounded,
-  useStyle,
-  useTypography
-} from "../../composables";
+import { useBorder } from "../../composables/Commons/border.composable";
+import { useDensity } from "../../composables/Commons/density.composable";
+import { useMargin } from "../../composables/Commons/margin.composable";
+import { usePadding } from "../../composables/Commons/padding.composable";
+import { useProps } from "../../composables/Commons/props.composable";
+import { useRounded } from "../../composables/Commons/rounded.composable";
+import { useStyle } from "../../composables/Commons/style.composable";
+import { useTypography } from "../../composables/Commons/typography.composable";
 import { computed, StyleValue } from "vue";
 const props = defineProps({
   text: { type: [String, Number], required: false },
@@ -61,13 +60,12 @@ const props = defineProps({
   marginBlock: { type: [Boolean, Number, String], required: false },
   marginInline: { type: [Boolean, Number, String], required: false },
   density: { 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 }
 });
 const { filterProps } = useProps(props);
+defineEmits([]);
 defineSlots();
 const { densityClasses } = useDensity(props);
 const { paddingClasses, paddingStyles } = usePadding(props);
@@ -96,7 +94,7 @@ const cardTextClasses = computed(() => {
     props.class
   ];
 });
-const { id, css, load, isLoaded, unload } = useStyle(cardTextStyles);
+const { id, css, load, isLoaded, unload } = useStyle(cardTextStyles, () => props.id);
 defineExpose({
   filterProps,
   css,
@@ -115,20 +113,29 @@ defineExpose({
 		letter-spacing: var(--origam-card-text---letter-spacing);
 		text-transform: var(--origam-card-text---text-transform);
 
-		padding-block-start: calc(var(--origam-card-text---padding-block-start) + var(--origam-card-text---density, 0px));
-		padding-block-end: calc(var(--origam-card-text---padding-block-end) + var(--origam-card-text---density, 0px));
-		padding-inline-start: calc(var(--origam-card-text---padding-inline-start) + var(--origam-card-text---density, 0px));
-		padding-inline-end: calc(var(--origam-card-text---padding-inline-end) + var(--origam-card-text---density, 0px));
-
-		margin-block-start: var(--origam-card-text---margin-block-start);
-		margin-block-end: var(--origam-card-text---margin-block-end);
-		margin-inline-start: var(--origam-card-text---margin-inline-start);
-		margin-inline-end: var(--origam-card-text---margin-inline-end);
-
 		border-color: var(--origam-card-text---border-color);
 		border-style: var(--origam-card-text---border-style);
-		border-width: var(--origam-card-text---border-width);
-		border-radius: var(--origam-card-text---border-radius);
+
+		// #C2 — zero-specificity defaults so scale-driven utility classes
+		// (`.origam--p-4`, `.origam--m-4`, `.origam--border-thick`,
+		// `.origam--rounded-lg`) win the cascade. Without `:where()`, this
+		// scoped rule's [data-v-hash] pushes each declaration to (0,2,0),
+		// beating the utility's (0,1,0), and the corresponding prop's scale
+		// form goes silently inert.
+		:where(&) {
+			padding-block-start: calc(var(--origam-card-text---padding-block-start) + var(--origam-card-text---density, 0px));
+			padding-block-end: calc(var(--origam-card-text---padding-block-end) + var(--origam-card-text---density, 0px));
+			padding-inline-start: calc(var(--origam-card-text---padding-inline-start) + var(--origam-card-text---density, 0px));
+			padding-inline-end: calc(var(--origam-card-text---padding-inline-end) + var(--origam-card-text---density, 0px));
+
+			margin-block-start: var(--origam-card-text---margin-block-start);
+			margin-block-end: var(--origam-card-text---margin-block-end);
+			margin-inline-start: var(--origam-card-text---margin-inline-start);
+			margin-inline-end: var(--origam-card-text---margin-inline-end);
+
+			border-width: var(--origam-card-text---border-width);
+			border-radius: var(--origam-card-text---border-radius);
+		}
 
 		&--density-default {
 			--origam-card-text---density: 0px;

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

@@ -1,5 +1,6 @@
 <template>
 	<origam-window
+			:id="id"
 			ref="origamWindowRef"
 			v-model="model"
 			:class="carouselClasses"
@@ -14,6 +15,23 @@
 		</template>
 
 		<template #additional="group">
+			<slot
+					v-if="cycle"
+					name="play-pause"
+					v-bind="{isPaused, toggle: togglePlayPause, label: playPauseLabel}"
+			>
+				<origam-btn
+						:aria-label="playPauseLabel"
+						:aria-pressed="isPaused"
+						:icon="playPauseIcon"
+						class="origam-carousel__play-pause"
+						data-cy="carousel-play-pause"
+						:density="DENSITY.COMPACT"
+						:size="SIZES.SMALL"
+						@click="togglePlayPause"
+				/>
+			</slot>
+
 			<slot
 					name="additional"
 					v-bind="group"
@@ -87,15 +105,17 @@
 </template>
 
 <script lang="ts" setup>
-import { OrigamBtn, OrigamProgressLinear, OrigamWindow } from "../../components";
-import {
-  useDimension,
-  useLocale,
-  useProps,
-  useStyle,
-  useVModel
-} from "../../composables";
-import { DENSITY, MDI_ICONS, SIZES } from "../../enums";
+import OrigamBtn from "../Btn/OrigamBtn.vue";
+import OrigamProgressLinear from "../Progress/OrigamProgressLinear.vue";
+import OrigamWindow from "../Window/OrigamWindow.vue";
+import { useDimension } from "../../composables/Commons/dimension.composable";
+import { useLocale } from "../../composables/Commons/locale.composable";
+import { useProps } from "../../composables/Commons/props.composable";
+import { useStyle } from "../../composables/Commons/style.composable";
+import { useVModel } from "../../composables/Commons/vModel.composable";
+import { DENSITY } from "../../enums/Commons/density.enum";
+import { MDI_ICONS } from "../../enums/Commons/mdi.enum";
+import { SIZES } from "../../enums/Commons/size.enum";
 import { intentBgExpr, isCssColor, isIntent } from "../../utils/Commons/color.util";
 import { computed, onBeforeUnmount, onMounted, ref, StyleValue, useSlots, watch } from "vue";
 const props = defineProps({
@@ -156,6 +176,7 @@ const props = defineProps({
   elevation: { type: [Number, String], required: false },
   bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   hover: { type: [Boolean, Object], required: false },
+  hoverClass: { type: String, required: false },
   active: { type: [Boolean, Object], required: false },
   activeClass: { type: String, required: false },
   color: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
@@ -206,12 +227,30 @@ const prefersReducedMotion = () => {
   if (typeof window === "undefined" || typeof window.matchMedia !== "function") return false;
   return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
 };
+const isPaused = ref(false);
 const startTimeout = () => {
   if (!props.cycle || !origamWindowRef.value) return;
+  if (isPaused.value) return;
   if (prefersReducedMotion()) return;
   slideTimeout = window.setTimeout(origamWindowRef.value.group.next, +props.interval > 0 ? +props.interval : 6e3);
   startProgress();
 };
+const togglePlayPause = () => {
+  isPaused.value = !isPaused.value;
+  window.clearTimeout(slideTimeout);
+  if (isPaused.value) {
+    stopProgress();
+    progressPercent.value = 0;
+  } else {
+    startTimeout();
+  }
+};
+const playPauseLabel = computed(() => {
+  return isPaused.value ? t("origam.carousel.play") : t("origam.carousel.pause");
+});
+const playPauseIcon = computed(() => {
+  return isPaused.value ? MDI_ICONS.PLAY : MDI_ICONS.PAUSE;
+});
 const restartTimeout = () => {
   window.clearTimeout(slideTimeout);
   window.requestAnimationFrame(startTimeout);
@@ -296,7 +335,7 @@ const carouselControlsStyles = computed(() => {
     props.style
   ];
 });
-const { id, css, load, isLoaded, unload } = useStyle(carouselStyles);
+const { id, css, load, isLoaded, unload } = useStyle(carouselStyles, () => props.id);
 defineExpose({
   filterProps,
   css,
@@ -356,6 +395,15 @@ defineExpose({
 			}
 		}
 
+		&__play-pause {
+			position: var(--origam-carousel__play-pause---position, absolute);
+			top: var(--origam-carousel__play-pause---position-top, 8px);
+			right: var(--origam-carousel__play-pause---position-right, 8px);
+			z-index: var(--origam-carousel__play-pause---z-index, 3);
+			color: var(--origam-carousel__play-pause---color, inherit);
+			background-color: var(--origam-carousel__play-pause---background-color, rgba(0, 0, 0, 0.4));
+		}
+
 		&__progress {
 			margin: var(--origam-carousel__progress---margin, 0);
 			position: var(--origam-carousel__progress---position, absolute);

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

@@ -1,8 +1,11 @@
 <template>
 	<origam-window-item
+			:id="id"
 			ref="origamWindowItemRef"
+			:aria-roledescription="slideRoleDescription"
 			:class="carouselItemClasses"
 			:style="carouselItemStyles"
+			role="group"
 			v-bind="windowItemProps"
 	>
 		<template #default>
@@ -38,11 +41,13 @@
 </template>
 
 <script lang="ts" setup>
-import { OrigamImg, OrigamWindowItem } from "../../components";
-import {
-  useProps,
-  useStyle
-} from "../../composables";
+import OrigamImg from "../Img/OrigamImg.vue";
+import OrigamWindowItem from "../Window/OrigamWindowItem.vue";
+import { useLocale } from "../../composables/Commons/locale.composable";
+import { usePassedProps } from "../../composables/Commons/passedProps.composable";
+import { useProps } from "../../composables/Commons/props.composable";
+import { useStyle } from "../../composables/Commons/style.composable";
+import { omitUndefined } from "../../utils/Commons/commons.util";
 import { computed, ref, StyleValue, useAttrs, useSlots } from "vue";
 const props = defineProps({
   transition: { type: [Boolean, String], required: false, default: void 0 },
@@ -62,7 +67,6 @@ const props = defineProps({
   bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   aspectRatio: { type: [String, Number], required: false },
   contentClass: { type: String, required: false },
-  inline: { type: Boolean, required: false },
   height: { type: [Number, String], required: false },
   maxHeight: { type: [Number, String], required: false },
   maxWidth: { type: [Number, String], required: false },
@@ -104,13 +108,14 @@ const props = defineProps({
   roundedTopLeft: { type: [Boolean, Number, String], required: false },
   roundedBottomLeft: { type: [Boolean, Number, String], required: false },
   roundedBottomRight: { type: [Boolean, Number, String], required: false },
-  disabled: { type: Boolean, required: false },
   eager: { type: Boolean, required: false },
   reverseTransition: { type: [Boolean, String], required: false, default: void 0 },
   value: { type: null, required: false },
+  disabled: { type: Boolean, required: false },
   selectedClass: { type: String, required: false }
 });
 const { filterProps } = useProps(props);
+defineEmits([]);
 defineSlots();
 const attrs = useAttrs();
 const origamWindowItemRef = ref();
@@ -118,10 +123,23 @@ const origamImgRef = ref();
 const windowItemProps = computed(() => {
   return origamWindowItemRef.value?.filterProps(props);
 });
+const wasPropPassed = usePassedProps(props);
 const imgProps = computed(() => {
-  return origamImgRef.value?.filterProps(props);
+  const base = origamImgRef.value?.filterProps(props) ?? {};
+  const { rounded: _rounded, border: _border, bgColor: _bgColor, color: _color, ...rest } = base;
+  return {
+    ...rest,
+    ...omitUndefined({
+      rounded: wasPropPassed("rounded") ? props.rounded : void 0,
+      border: wasPropPassed("border") ? props.border : void 0,
+      bgColor: wasPropPassed("bgColor") ? props.bgColor : void 0,
+      color: wasPropPassed("color") ? props.color : void 0
+    })
+  };
 });
 const slots = useSlots();
+const { t } = useLocale();
+const slideRoleDescription = computed(() => t("origam.carousel.slide"));
 const carouselItemStyles = computed(() => {
   return [
     props.style
@@ -133,7 +151,7 @@ const carouselItemClasses = computed(() => {
     props.class
   ];
 });
-const { id, css, load, isLoaded, unload } = useStyle(carouselItemStyles);
+const { id, css, load, isLoaded, unload } = useStyle(carouselItemStyles, () => props.id);
 defineExpose({
   filterProps,
   css,

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

@@ -422,12 +422,10 @@ import OrigamChartVariwide from "./OrigamChartVariwide.vue";
 import OrigamChartSunburst from "./OrigamChartSunburst.vue";
 import OrigamChartTreemap from "./OrigamChartTreemap.vue";
 import OrigamChartWordCloud from "./OrigamChartWordCloud.vue";
-import {
-  CHART_CARTESIAN_KIND,
-  CHART_POLAR_KIND,
-  CHART_PYRAMID_KIND,
-  CHART_TYPE
-} from "../../enums";
+import { CHART_CARTESIAN_KIND } from "../../enums/Chart/chart-cartesian.enum";
+import { CHART_POLAR_KIND } from "../../enums/Chart/chart-polar.enum";
+import { CHART_PYRAMID_KIND } from "../../enums/Chart/chart-pyramid.enum";
+import { CHART_TYPE } from "../../enums/Chart/chart.enum";
 defineOptions({
   name: "OrigamChart"
 });
@@ -494,6 +492,7 @@ const props = defineProps({
   bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true }
 });
 const emit = defineEmits(["point-click", "legend-click", "series-toggle"]);
+defineSlots();
 const CARTESIAN_TYPES = Object.values(CHART_CARTESIAN_KIND);
 const POLAR_TYPES = Object.values(CHART_POLAR_KIND);
 const PYRAMID_TYPES = Object.values(CHART_PYRAMID_KIND);