origam 2.3.0 → 2.5.0

package/dist/src/components/Switch/OrigamSwitch.vue

@@ -1,12 +1,16 @@
 <template>
-	<origam-skeleton
+	<div
 			v-if="isSkeletonLoading"
-			variant="rectangular"
-			:rounded="true"
-			:width="'52px'"
-			:height="'32px'"
-			v-bind="loaderConfig.overrides"
-	/>
+			class="origam-switch__skeleton"
+			:class="{ 'origam-switch__skeleton--inset': inset }"
+			aria-busy="true"
+			aria-label="Loading"
+			role="status"
+			data-cy="origam-switch-skeleton"
+	>
+		<span class="origam-switch__skeleton-track"/>
+		<span class="origam-switch__skeleton-thumb"/>
+	</div>
 
 	<origam-input
 			v-else
@@ -63,6 +67,22 @@
 									v-bind="slotProps"
 							/>
 						</template>
+
+						<template
+								v-if="isLineLoading"
+								#overlay
+						>
+							<origam-progress
+									:active="loaderConfig.isActive"
+									:color="color"
+									:indeterminate="loaderConfig.indeterminate"
+									:model-value="loaderConfig.modelValue"
+									:type="PROGRESS_TYPE.LINEAR"
+									class="origam-switch__progress origam-switch__progress--linear"
+									data-cy="origam-switch-progress-linear"
+									v-bind="loaderConfig.overrides"
+							/>
+						</template>
 					</origam-switch-track>
 				</template>
 
@@ -87,7 +107,7 @@
 								/>
 							</template>
 
-							<template v-if="hasLoading">
+							<template v-if="hasCircularLoading">
 								<slot name="loader">
 									<div class="origam-switch__loader">
 										<origam-progress
@@ -119,7 +139,6 @@ import {
   OrigamInput,
   OrigamProgress,
   OrigamSelectionControl,
-  OrigamSkeleton,
   OrigamSwitchTrack,
   OrigamTranslateScale
 } from "../../components";
@@ -177,8 +196,8 @@ const props = defineProps({
   persistentHint: { type: Boolean, required: false },
   messages: { type: [Array, String], required: false },
   density: { type: null, required: false, default: DENSITY.DEFAULT },
-  color: { type: [String, Boolean, null], required: false, skipCheck: true },
-  bgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
+  color: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   elevation: { type: [Number, String], required: false },
   height: { type: [Number, String], required: false },
   maxHeight: { type: [Number, String], required: false },
@@ -258,6 +277,14 @@ const hasLoading = computed(() => {
 const isSkeletonLoading = computed(() => {
   return loaderConfig.value.isActive && loaderConfig.value.kind === "skeleton";
 });
+const isLineLoading = computed(() => {
+  return loaderConfig.value.isActive && loaderConfig.value.kind === "line";
+});
+const hasCircularLoading = computed(() => {
+  if (slots.loader) return true;
+  const cfg = loaderConfig.value;
+  return cfg.isActive && cfg.kind !== "line" && cfg.kind !== "skeleton";
+});
 const switchStyles = computed(() => {
   return [
     props.style
@@ -294,6 +321,59 @@ defineExpose({
 </script>
 
 <style lang="scss" scoped>
+	/*
+	 * Skeleton placeholder mimicking the switch silhouette — a 52×32
+	 * rounded track + a 20px circular thumb pinned to the left so the
+	 * shape is unmistakably a switch (vs the previous plain rectangle
+	 * which looked like a generic loading bar). Both halves share the
+	 * `--origam-switch__skeleton-bg` pulse animation inherited from
+	 * the broader skeleton token so the rhythm matches OrigamSkeleton.
+	 */
+	@keyframes origam-switch-skeleton-pulse {
+		0%, 100% { opacity: 1; }
+		50%      { opacity: 0.55; }
+	}
+
+	.origam-switch__skeleton {
+		position: relative;
+		display: inline-block;
+		width: var(--origam-switch__skeleton---width, 52px);
+		height: var(--origam-switch__skeleton---height, 32px);
+		animation: origam-switch-skeleton-pulse 1.6s ease-in-out infinite;
+
+		@media (prefers-reduced-motion: reduce) {
+			animation: none;
+		}
+
+		.origam-switch__skeleton-track {
+			position: absolute;
+			inset: 0;
+			border-radius: 999px;
+			background-color: var(--origam-switch__skeleton-track---background-color, color-mix(in srgb, currentColor 14%, transparent));
+		}
+
+		.origam-switch__skeleton-thumb {
+			position: absolute;
+			top: 50%;
+			left: 6px;
+			width: 20px;
+			height: 20px;
+			border-radius: 50%;
+			transform: translateY(-50%);
+			background-color: var(--origam-switch__skeleton-thumb---background-color, color-mix(in srgb, currentColor 28%, transparent));
+			box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
+		}
+
+		&--inset {
+			.origam-switch__skeleton-thumb {
+				/* inset switches use a 24px thumb that overflows the track */
+				width: 24px;
+				height: 24px;
+				left: 4px;
+			}
+		}
+	}
+
 	.origam-switch {
 		$this: &;
 
@@ -301,6 +381,43 @@ defineExpose({
 			padding-inline-start: 10px;
 		}
 
+		/*
+		 * Line loader — thin linear progress positioned ON the track,
+		 * spanning the full switch footprint (46×14 standard or 52×32
+		 * inset). Sits BEHIND the thumb so the thumb stays visually
+		 * dominant and the consumer still sees the on/off position
+		 * while the background indicates async work in flight.
+		 *
+		 * `OrigamProgressLinear` ships an inline `height: thickness`
+		 * (4 px default) that wins over standard CSS — we force it
+		 * to 100 % via `:deep()` so the bar fills the track height
+		 * regardless of the standard / inset variant.
+		 */
+		&__progress--linear {
+			position: absolute !important;
+			inset: 0 !important;
+			width: 100% !important;
+			/*
+			 * `OrigamProgressLinear` inlines `height: 4px` on its root via
+			 * `:style="{ height: thickness }"`, which beats any non-important
+			 * scoped rule. `!important` here is the only way to expand the
+			 * loader to the full track height without subclassing the
+			 * progress component.
+			 */
+			height: 100% !important;
+			line-height: 1 !important;
+			border-radius: inherit;
+			pointer-events: none;
+			z-index: 0;
+			overflow: hidden;
+
+			:deep(.origam-progress__background),
+			:deep(.origam-progress__loader),
+			:deep(.origam-progress__bar) {
+				height: 100% !important;
+			}
+		}
+
 		&__loader {
 			display: flex;
 

package/dist/src/components/Switch/OrigamSwitchTrack.vue

@@ -25,6 +25,11 @@
 					v-bind="slotProps"
 			/>
 		</div>
+
+		<slot
+				name="overlay"
+				v-bind="slotProps"
+		/>
 	</div>
 </template>
 
@@ -45,8 +50,8 @@ const props = defineProps({
   id: { type: String, required: false },
   class: { type: [String, Array, Object], required: false },
   style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
-  color: { type: [String, Boolean, null], required: false, skipCheck: true },
-  bgColor: { type: [String, Boolean, null], required: false, skipCheck: true }
+  color: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true }
 });
 const emits = defineEmits(["click", "update:modelValue"]);
 defineSlots();
@@ -101,6 +106,7 @@ defineExpose({
 	.origam-switch-track {
 		$this: &;
 
+		position: relative;
 		display: inline-flex;
 		align-items: center;
 		font-size: 0.5rem;
@@ -113,6 +119,11 @@ defineExpose({
 		cursor: pointer;
 		transition: 0.2s background-color cubic-bezier(0.4, 0, 0.2, 1);
 
+		@media (prefers-reduced-motion: reduce) {
+			transition: none;
+		}
+		overflow: hidden;
+
 		@media (forced-colors: active) {
 			border: 1px solid;
 			color: buttontext;

package/dist/src/components/SystemBar/OrigamSystemBar.vue

@@ -28,8 +28,8 @@ const props = defineProps({
   style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
   tag: { type: String, required: false, default: "div" },
   elevation: { type: [Number, String], required: false },
-  color: { type: [String, Boolean, null], required: false, skipCheck: true },
-  bgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
+  color: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   name: { type: String, required: false },
   order: { type: [String, Number], required: false },
   absolute: { type: Boolean, required: false },

package/dist/src/components/Table/OrigamTable.vue

@@ -13,7 +13,11 @@
 				:style="tableWrapperStyles"
 		>
 			<slot name="wrapper">
-				<table>
+				<table :aria-rowcount="ariaRowcount || undefined">
+					<caption
+							v-if="caption"
+							:class="['origam-table__caption', {'origam-table__caption--visible': captionVisible}]"
+					>{{ caption }}</caption>
 					<slot name="default"/>
 				</table>
 			</slot>
@@ -37,6 +41,9 @@ import { DENSITY } from "../../enums";
 const props = defineProps({
   fixedHeader: { type: Boolean, required: false },
   fixedFooter: { type: Boolean, required: false },
+  caption: { type: String, required: false },
+  captionVisible: { type: Boolean, required: false },
+  ariaRowcount: { type: Number, 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 },
@@ -154,6 +161,32 @@ defineExpose({
 		border-radius: var(--origam-table---border-radius, 0);
 		overflow: hidden;
 
+		&__caption {
+			position: absolute;
+			width: 1px;
+			height: 1px;
+			padding: 0;
+			margin: -1px;
+			overflow: hidden;
+			clip: rect(0, 0, 0, 0);
+			white-space: nowrap;
+			border: 0;
+
+			&--visible {
+				position: static;
+				width: auto;
+				height: auto;
+				padding: var(--origam-table__caption---padding, 8px 16px);
+				margin: 0;
+				overflow: visible;
+				clip: auto;
+				white-space: normal;
+				font-size: var(--origam-table__caption---font-size, 0.875rem);
+				color: var(--origam-table__caption---color, var(--origam-color__text---secondary));
+				text-align: var(--origam-table__caption---text-align, start);
+			}
+		}
+
 		&__wrapper {
 			overflow-x: auto;
 

package/dist/src/components/Tabs/OrigamTabs.vue

@@ -45,8 +45,8 @@ const props = defineProps({
   roundedTopLeft: { type: [Boolean, Number, String], required: false },
   roundedBottomLeft: { type: [Boolean, Number, String], required: false },
   roundedBottomRight: { type: [Boolean, Number, String], required: false },
-  color: { type: [String, Boolean, null], required: false, skipCheck: true },
-  bgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
+  color: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   disabled: { type: Boolean, required: false },
   modelValue: { type: null, required: false },
   multiple: { type: Boolean, required: false },

package/dist/src/components/TextField/OrigamTextField.vue

@@ -89,6 +89,8 @@
 									:name="name"
 									:placeholder="placeholder"
 									:readonly="isReadonly"
+									:required="required || undefined"
+									:aria-required="required ? 'true' : undefined"
 									:size="1"
 									:type="resolvedInputType"
 									:value="displayValue"
@@ -214,7 +216,7 @@ const _props = defineProps({
   id: { type: String, required: false },
   class: { type: [String, Array, Object], required: false },
   style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
-  color: { type: [String, Boolean, null], required: false, skipCheck: true },
+  color: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   density: { type: null, required: false, default: DENSITY.DEFAULT },
   centerAffix: { type: Boolean, required: false, default: true },
   dirty: { type: Boolean, required: false },
@@ -232,7 +234,7 @@ const _props = defineProps({
   loading: { type: [Boolean, Number, Object], required: false },
   loadingText: { type: String, required: false },
   tag: { type: String, required: false },
-  bgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
+  bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   appendInnerAvatar: { type: String, required: false },
   appendInnerIcon: { type: null, required: false },
   prependInnerAvatar: { type: String, required: false },

package/dist/src/components/TextMask/OrigamTextMask.vue

@@ -0,0 +1,157 @@
+<template>
+	<component
+			:is="tag"
+			:class="textMaskClasses"
+			:style="textMaskStyles"
+			data-cy="origam-text-mask"
+	>
+		<slot v-if="hasSlot"/>
+		<template v-else>{{ text }}</template>
+	</component>
+</template>
+
+<script setup>
+import {
+  computed,
+  useSlots
+} from "vue";
+import { resolveGradient } from "../../utils/Commons/gradient.util.ts";
+const props = defineProps({
+  text: { type: String, required: false },
+  background: { type: [String, Object], required: true },
+  animated: { type: Boolean, required: false, default: false },
+  animationDuration: { type: String, required: false, default: "3s" },
+  animationType: { type: String, required: false, default: "pan" },
+  fontSize: { type: [String, Number], required: false, default: "inherit" },
+  fontWeight: { type: [String, Number], required: false, default: "inherit" },
+  fontFamily: { type: String, required: false, default: "inherit" },
+  lineHeight: { type: [String, Number], required: false, default: 1.1 },
+  letterSpacing: { type: String, required: false },
+  align: { type: String, required: false, default: "left" },
+  id: { type: String, required: false },
+  class: { type: [String, Array, Object], required: false },
+  style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
+  tag: { type: String, required: false, default: "span" }
+});
+const slots = useSlots();
+const resolvedBackground = computed(() => {
+  const fromGradient = resolveGradient(props.background);
+  if (fromGradient) return fromGradient;
+  return typeof props.background === "string" ? props.background : "";
+});
+const cssDimension = (v, fallback) => {
+  if (v === void 0 || v === null || v === "") return fallback;
+  return typeof v === "number" ? `${v}px` : v;
+};
+const cssUnitless = (v, fallback) => {
+  if (v === void 0 || v === null || v === "") return fallback;
+  return String(v);
+};
+const hasSlot = computed(() => Boolean(slots.default));
+const textMaskClasses = computed(() => {
+  return [
+    "origam-text-mask",
+    `origam-text-mask--align-${props.align}`,
+    `origam-text-mask--${props.animationType}`,
+    {
+      "origam-text-mask--animated": props.animated
+    },
+    props.class
+  ];
+});
+const textMaskStyles = computed(() => {
+  return [
+    {
+      "--origam-text-mask---bg": resolvedBackground.value,
+      "--origam-text-mask---duration": props.animationDuration,
+      "--origam-text-mask---font-size": cssDimension(props.fontSize, "inherit"),
+      "--origam-text-mask---font-weight": cssUnitless(props.fontWeight, "inherit"),
+      "--origam-text-mask---font-family": props.fontFamily ?? "inherit",
+      "--origam-text-mask---line-height": cssUnitless(props.lineHeight, "1.1"),
+      "--origam-text-mask---letter-spacing": props.letterSpacing ?? "normal"
+    },
+    props.style
+  ];
+});
+defineExpose({
+  resolvedBackground,
+  hasSlot
+});
+</script>
+
+<style lang="scss" scoped>
+	.origam-text-mask {
+		display: inline-block;
+		background-image: var(--origam-text-mask---bg);
+		background-repeat: no-repeat;
+		background-position: 0% 50%;
+		background-size: cover;
+		-webkit-background-clip: text;
+		background-clip: text;
+		-webkit-text-fill-color: transparent;
+		color: transparent;
+		font-size: var(--origam-text-mask---font-size);
+		font-weight: var(--origam-text-mask---font-weight);
+		font-family: var(--origam-text-mask---font-family);
+		line-height: var(--origam-text-mask---line-height);
+		letter-spacing: var(--origam-text-mask---letter-spacing);
+	}
+
+	.origam-text-mask--align-left {
+		text-align: left;
+	}
+
+	.origam-text-mask--align-center {
+		text-align: center;
+	}
+
+	.origam-text-mask--align-right {
+		text-align: right;
+	}
+
+	.origam-text-mask--animated.origam-text-mask--pan {
+		background-size: 200% 100%;
+		animation: origam-text-mask-pan var(--origam-text-mask---duration) linear infinite;
+	}
+
+	.origam-text-mask--animated.origam-text-mask--rotate {
+		animation: origam-text-mask-rotate var(--origam-text-mask---duration) linear infinite;
+	}
+
+	.origam-text-mask--animated.origam-text-mask--pulse {
+		animation: origam-text-mask-pulse var(--origam-text-mask---duration) ease-in-out infinite;
+	}
+
+	.origam-text-mask--animated.origam-text-mask--zoom {
+		background-size: 200% 200%;
+		animation: origam-text-mask-zoom var(--origam-text-mask---duration) ease-in-out infinite alternate;
+	}
+
+	@keyframes origam-text-mask-pan {
+		0%   { background-position: 0% 50%; }
+		100% { background-position: 100% 50%; }
+	}
+
+	@keyframes origam-text-mask-rotate {
+		0%   { filter: hue-rotate(0deg); }
+		100% { filter: hue-rotate(360deg); }
+	}
+
+	@keyframes origam-text-mask-pulse {
+		0%, 100% { background-size: 100% 100%; }
+		50%      { background-size: 140% 140%; }
+	}
+
+	@keyframes origam-text-mask-zoom {
+		0%   { background-size: 100% 100%; }
+		100% { background-size: 220% 220%; }
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.origam-text-mask--animated {
+			animation: none !important;
+			background-size: cover;
+			filter: none;
+		}
+	}
+</style>

package/dist/src/components/TextMask/index.cjs

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "OrigamTextMask", {
+  enumerable: true,
+  get: function () {
+    return _OrigamTextMask.default;
+  }
+});
+var _OrigamTextMask = _interopRequireDefault(require("./OrigamTextMask.vue"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/dist/src/components/TextMask/index.d.ts

@@ -0,0 +1 @@
+export { default as OrigamTextMask } from './OrigamTextMask.vue';

package/dist/src/components/TextMask/index.js

@@ -0,0 +1 @@
+export { default as OrigamTextMask } from "./OrigamTextMask.vue";

package/dist/src/components/TextareaField/OrigamTextareaField.vue

@@ -136,6 +136,8 @@
 								:name="name"
 								:placeholder="placeholder"
 								:readonly="isReadonly"
+								:required="required || undefined"
+								:aria-required="required ? 'true' : undefined"
 								:rows="rows"
 								:value="model"
 								v-bind="{ ...fieldSlotProps, ...inputAttrs }"
@@ -307,7 +309,7 @@ const _props = defineProps({
   id: { type: String, required: false },
   class: { type: [String, Array, Object], required: false },
   style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
-  color: { type: [String, Boolean, null], required: false, skipCheck: true },
+  color: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   density: { type: null, required: false, default: DENSITY.DEFAULT },
   centerAffix: { type: Boolean, required: false },
   dirty: { type: Boolean, required: false },
@@ -322,7 +324,7 @@ const _props = defineProps({
   loading: { type: [Boolean, Number, Object], required: false },
   loadingText: { type: String, required: false },
   tag: { type: String, required: false },
-  bgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
+  bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   appendInnerAvatar: { type: String, required: false },
   appendInnerIcon: { type: null, required: false },
   prependInnerAvatar: { type: String, required: false },

package/dist/src/components/Timeline/OrigamTimeline.vue

@@ -69,7 +69,7 @@ const props = defineProps({
   class: { type: [String, Array, Object], required: false },
   style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
   tag: { type: String, required: false, default: "div" },
-  color: { type: [String, Boolean, null], required: false, skipCheck: true },
+  color: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   size: { type: null, required: false },
   density: { type: null, required: false }
 });

package/dist/src/components/Timeline/OrigamTimelineItem.vue

@@ -63,7 +63,7 @@ const props = defineProps({
   id: { type: String, required: false },
   class: { type: [String, Array, Object], required: false },
   style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
-  color: { type: [String, Boolean, null], required: false, skipCheck: true },
+  color: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   description: { type: String, required: false, default: void 0 }
 });
 const timelineCtx = inject(TIMELINE_CONTEXT_KEY, null);

package/dist/src/components/Title/OrigamTitle.vue

@@ -30,8 +30,8 @@ const props = defineProps({
   id: { type: String, required: false },
   class: { type: [String, Array, Object], required: false },
   style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
-  color: { type: [String, Boolean, null], required: false, skipCheck: true },
-  bgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
+  color: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   density: { type: null, required: false },
   padding: { type: [Boolean, Number, String], required: false },
   paddingTop: { type: [Boolean, Number, String], required: false },

package/dist/src/components/Toolbar/OrigamToolbar.vue

@@ -76,8 +76,8 @@ const props = defineProps({
   roundedBottomRight: { type: [Boolean, Number, String], required: false },
   elevation: { type: [Number, String], required: false },
   density: { type: null, required: false, default: DENSITY.DEFAULT },
-  color: { type: [String, Boolean, null], required: false, skipCheck: true },
-  bgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
+  color: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   padding: { type: [Boolean, Number, String], required: false },
   paddingTop: { type: [Boolean, Number, String], required: false },
   paddingLeft: { type: [Boolean, Number, String], required: false },

package/dist/src/components/Tooltip/OrigamTooltip.vue

@@ -89,8 +89,8 @@ const props = defineProps({
   eager: { type: Boolean, required: false, default: true },
   transition: { type: [Boolean, String, Object], required: false, default: false },
   scrim: { type: [Boolean, String], required: false, default: false },
-  color: { type: [String, Boolean, null], required: false, skipCheck: true },
-  bgColor: { type: [String, Boolean, null], required: false, skipCheck: true }
+  color: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true }
 });
 defineEmits(["update:modelValue"]);
 const { filterProps } = useProps(props);

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

@@ -41,8 +41,8 @@ const props = defineProps({
   id: { type: String, required: false },
   class: { type: [String, Array, Object], required: false },
   style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
-  color: { type: [String, Boolean, null], required: false, skipCheck: true },
-  bgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
+  color: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   size: { type: null, required: false, default: SIZES.DEFAULT },
   density: { type: null, required: false, default: DENSITY.DEFAULT },
   ariaLabel: { type: String, required: false, default: void 0 }
@@ -146,8 +146,6 @@ const treeviewStyles = computed(() => {
 const treeviewClasses = computed(() => [
   "origam-treeview",
   colorClasses.value,
-  hoverState,
-  activeState,
   densityClasses.value,
   sizeClasses.value,
   props.class