origam 2.15.0 → 2.17.0

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

@@ -4,7 +4,7 @@
     class="origam-switch__skeleton"
     :class="{ 'origam-switch__skeleton--inset': inset }"
     aria-busy="true"
-    aria-label="Loading"
+    :aria-label="loadingLabel"
     role="status"
     data-cy="origam-switch-skeleton"
   >
@@ -34,6 +34,7 @@
         type="checkbox"
         v-bind="{ ...controlProps, ...controlAttrs }"
         @blur="handleBlur"
+        @click:label="handleClickLabel"
         @focus="handleFocus"
         @update:model-value="handleChange"
       >
@@ -136,31 +137,30 @@
 
 <script lang="ts" setup>
 import { computed, ref, StyleValue, useAttrs, useSlots } from "vue";
-import {
-  OrigamIcon,
-  OrigamInput,
-  OrigamProgress,
-  OrigamSelectionControl,
-  OrigamSwitchTrack,
-  OrigamTranslateScale
-} from "../../components";
-import {
-  useDefaults,
-  useFocus,
-  useHover,
-  useLoader,
-  useProps,
-  useRounded,
-  useStateEffect,
-  useStyle,
-  useVModel
-} from "../../composables";
-import { DENSITY, PROGRESS_TYPE, SIZES } from "../../enums";
-import { filterInputAttrs, getUid } from "../../utils";
-const _props = defineProps({
+import OrigamIcon from "../Icon/OrigamIcon.vue";
+import OrigamInput from "../Input/OrigamInput.vue";
+import OrigamProgress from "../Progress/OrigamProgress.vue";
+import OrigamSelectionControl from "../SelectionControl/OrigamSelectionControl.vue";
+import OrigamSwitchTrack from "./OrigamSwitchTrack.vue";
+import OrigamTranslateScale from "../Transition/OrigamTranslateScale.vue";
+import { useFocus } from "../../composables/Commons/focus.composable";
+import { useLoader } from "../../composables/Commons/loader.composable";
+import { useLocale } from "../../composables/Commons/locale.composable";
+import { useProps } from "../../composables/Commons/props.composable";
+import { useRounded } from "../../composables/Commons/rounded.composable";
+import { useStateEffect } from "../../composables/Commons/stateEffect.composable";
+import { useStateFlag } from "../../composables/Commons/stateFlag.composable";
+import { useStyle } from "../../composables/Commons/style.composable";
+import { useVModel } from "../../composables/Commons/vModel.composable";
+import { DENSITY } from "../../enums/Commons/density.enum";
+import { LOADER_KIND } from "../../enums/Commons/loader.enum";
+import { PROGRESS_TYPE } from "../../enums/Progress/progress.enum";
+import { SIZES } from "../../enums/Commons/size.enum";
+import { filterInputAttrs } from "../../utils/Input/input.util";
+import { getUid } from "../../utils/Commons/getCurrentInstance.util";
+const props = defineProps({
   indeterminate: { type: Boolean, required: false },
   inset: { type: Boolean, required: false },
-  flat: { type: Boolean, 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 },
@@ -219,7 +219,6 @@ const _props = defineProps({
   errorMessages: { type: [Array, String], required: false },
   maxErrors: { type: [Number, String], required: false },
   name: { type: String, required: false },
-  label: { type: String, required: false },
   readonly: { type: Boolean, required: false },
   rules: { type: Array, required: false },
   modelValue: { type: null, required: false },
@@ -231,34 +230,31 @@ const _props = defineProps({
   prependAvatar: { type: String, required: false },
   prependIcon: { type: null, required: false },
   size: { type: null, 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 },
+  fontWeight: { type: null, required: false },
+  lineHeight: { type: null, required: false },
+  label: { type: String, required: false },
   trueValue: { type: null, required: false },
   falseValue: { type: null, required: false },
   value: { type: null, required: false },
   required: { type: Boolean, required: false },
-  activeColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
-  activeBgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
-  inline: { type: Boolean, required: false },
+  type: { type: String, required: false },
+  valueComparator: { type: Function, required: false },
   falseIcon: { type: null, required: false },
   trueIcon: { type: null, required: false },
   multiple: { type: Boolean, required: false },
-  type: { type: String, required: false },
-  valueComparator: { type: Function, required: false },
-  ripple: { type: [Boolean, Object], required: false },
-  active: { type: [Boolean, Object], required: false },
-  activeClass: { type: String, required: false },
+  inline: { type: Boolean, required: false },
   hover: { type: [Boolean, Object], required: false },
+  hoverClass: { type: String, required: false },
+  ripple: { type: [Boolean, Object], required: false },
   loading: { type: [Boolean, Number, Object], required: false },
-  loadingText: { type: String, required: false }
+  loadingText: { type: String, required: false },
+  active: { type: [Boolean, Object], required: false },
+  activeClass: { type: String, required: false }
 });
-const props = useDefaults(_props);
-defineEmits(["update:modelValue", "update:focused", "update:indeterminate", "click:label"]);
+const emits = defineEmits(["update:modelValue", "update:focused", "update:indeterminate", "click:label"]);
 defineSlots();
-const { isHover, hoverState } = useHover(props);
+const { isOn: isHover, config: hoverState } = useStateFlag(props, { state: "hover" });
 useStateEffect(props, isHover, void 0, hoverState, void 0);
 const { filterProps } = useProps(props);
 const origamSelectionControlRef = ref();
@@ -269,7 +265,9 @@ const model = useVModel(props, "modelValue");
 const { isFocused, onFocus: handleFocus, onBlur: handleBlur } = useFocus(props);
 const attrs = useAttrs();
 const slots = useSlots();
-const { loaderClasses, loaderConfig } = useLoader(props, "circular");
+const { loaderClasses, loaderConfig } = useLoader(props, LOADER_KIND.CIRCULAR);
+const { t } = useLocale();
+const loadingLabel = computed(() => t("origam.loading"));
 const uid = getUid();
 const id = computed(() => {
   return props.id || `switch-${uid}`;
@@ -279,13 +277,16 @@ const handleChange = () => {
     indeterminate.value = false;
   }
 };
+const handleClickLabel = (e) => {
+  emits("click:label", e);
+};
 const handleTrackClick = (_e) => {
   ;
   origamSelectionControlRef.value?.inputRef?.click();
 };
 const [rootAttrs, controlAttrs] = filterInputAttrs(attrs);
 const inputProps = computed(() => {
-  return origamInputRef.value?.filterProps(props, ["modelValue", "class", "focused", "id", "style", "color", "bgColor", "activeColor", "activeBgColor", "hoverColor", "hoverBgColor"]);
+  return origamInputRef.value?.filterProps(props, ["modelValue", "class", "focused", "id", "style", "color", "bgColor"]);
 });
 const controlProps = computed(() => {
   return origamSelectionControlRef.value?.filterProps(props, ["modelValue", "type", "disabled", "readonly", "class", "style", "id"]);
@@ -325,7 +326,6 @@ const switchClasses = computed(() => {
   return [
     "origam-switch",
     {
-      "origam-switch--flat": props.flat,
       "origam-switch--inset": props.inset,
       "origam-switch--indeterminate": indeterminate.value
     },
@@ -346,14 +346,6 @@ 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;
@@ -395,7 +387,6 @@ defineExpose({
 
     &--inset {
       .origam-switch__skeleton-thumb {
-        /* inset switches use a 24px thumb that overflows the track */
         width: 24px;
         height: 24px;
         left: 4px;
@@ -410,29 +401,10 @@ 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;
@@ -467,29 +439,11 @@ defineExpose({
     .origam-selection-control {
       min-height: calc(var(--origam-switch__selection-control---min-height, 56px) + var(--origam-input---density, 0px));
 
-      /*
-       * The base SelectionControl wrapper reserves a fixed
-       * `calc(40px + 1.5 * density)` box sized for a checkbox/radio
-       * input glyph. Switch instead renders a variable-width track
-       * (36–52px depending on `--origam-switch__track---width` /
-       * the `inset` variant, plus its own horizontal padding) as
-       * the wrapper's only in-flow child — `__input` is forced
-       * `position: absolute` below so it no longer participates in
-       * the flex layout. That fixed formula was never track-aware:
-       * under `density="compact"` (-8px) the wrapper shrinks to
-       * 28px while the standard track needs ~46px, so the track
-       * visually overflows into the neighbouring label ("Flat"
-       * rendering as "lat"). Let the wrapper size to its actual
-       * content (`max-content`) instead, keeping the original
-       * density formula only as a floor via `min-width`/`min-height`
-       * so the checkbox-sized footprint is preserved whenever the
-       * track is smaller than it (never smaller than before).
-       */
       :deep(.origam-selection-control__wrapper) {
         width: max-content;
         height: max-content;
-        min-width: calc(40px + 1.5 * var(--origam-selection-control--density, 0px));
-        min-height: calc(40px + 1.5 * var(--origam-selection-control--density, 0px));
+        min-width: calc(40px + 1.5 * var(--origam-selection-control---density, 0px));
+        min-height: calc(40px + 1.5 * var(--origam-selection-control---density, 0px));
       }
 
       :deep(.origam-selection-control__input) {
@@ -512,8 +466,8 @@ defineExpose({
       &--error {
         &:not(.origam-selection-control--disabled) {
           #{$this}__thumb {
-            background-color: rgba(255, 0, 0, 1);
-            color: rgba(255, 255, 255, 1);
+            background-color: var(--origam-switch__thumb---background-color-error, rgba(255, 0, 0, 1));
+            color: var(--origam-switch__thumb---color-error, rgba(255, 255, 255, 1));
           }
         }
       }
@@ -533,17 +487,47 @@ defineExpose({
       }
     }
 
-    .origam-selection-control__wrapper.origam--color-primary &__thumb,
-    .origam-selection-control__wrapper.origam--color-secondary &__thumb,
-    .origam-selection-control__wrapper.origam--color-success &__thumb,
-    .origam-selection-control__wrapper.origam--color-warning &__thumb,
-    .origam-selection-control__wrapper.origam--color-danger &__thumb,
-    .origam-selection-control__wrapper.origam--color-info &__thumb,
-    .origam-selection-control__wrapper.origam--color-neutral &__thumb {
+    /*
+     * Le canal couleur vit sur `.origam-selection-control__input`, PAS sur le
+     * wrapper. Ces règles ciblaient le wrapper et ne matchaient donc jamais :
+     * le pouce restait blanc quelle que soit la prop `color` (#512).
+     *
+     * C'est la régression décrite dans le CLAUDE.md — le contrat de style
+     * inline cassé lors de l'extraction d'`OrigamSwitchTrack` — revenue par le
+     * même mécanisme : le canal a bougé, le sélecteur est resté.
+     *
+     * `:has()` est la SEULE des trois pistes envisagées qui fonctionne ici, et
+     * c'est la structure du DOM qui l'impose, pas une préférence :
+     *
+     *     .origam-selection-control__wrapper
+     *       ├─ <slot default>  → OrigamSwitchTrack → &__thumb
+     *       └─ .origam-selection-control__input   ← porte la couleur
+     *
+     *   · sélecteur frère (`~` / `+`) : impossible — `&__thumb` PRÉCÈDE
+     *     `__input`, et CSS n'a pas de combinateur « frère précédent » ;
+     *   · custom property sur un ancêtre commun : impossible sans toucher
+     *     `OrigamSelectionControl` — la couleur est posée sur `__input`, un
+     *     ENFANT du wrapper, et les custom properties héritent vers le bas
+     *     seulement. La publier plus haut changerait le composant partagé par
+     *     Checkbox, Radio et Switch, au lieu de rester contenu ici ;
+     *   · `:has()` sur le wrapper, ancêtre commun réel : fonctionne, et le
+     *     motif est déjà employé dans le DS (OrigamCard, OrigamNumberField).
+     *
+     * Les conditions sont conservées à l'identique — sept intentions plus la
+     * porte de secours en style inline pour les couleurs personnalisées. Seule
+     * la cible du test change.
+     */
+    .origam-selection-control__wrapper:has(.origam-selection-control__input.origam--color-primary) &__thumb,
+    .origam-selection-control__wrapper:has(.origam-selection-control__input.origam--color-secondary) &__thumb,
+    .origam-selection-control__wrapper:has(.origam-selection-control__input.origam--color-success) &__thumb,
+    .origam-selection-control__wrapper:has(.origam-selection-control__input.origam--color-warning) &__thumb,
+    .origam-selection-control__wrapper:has(.origam-selection-control__input.origam--color-danger) &__thumb,
+    .origam-selection-control__wrapper:has(.origam-selection-control__input.origam--color-info) &__thumb,
+    .origam-selection-control__wrapper:has(.origam-selection-control__input.origam--color-neutral) &__thumb {
       background-color: currentColor;
     }
 
-    .origam-selection-control__wrapper[style*="color:"] &__thumb {
+    .origam-selection-control__wrapper:has(.origam-selection-control__input[style*="color:"]) &__thumb {
       background-color: currentColor;
     }
 

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

@@ -1,5 +1,6 @@
 <template>
 	<div
+			:id="id"
 			:class="switchTrackClasses"
 			:style="switchTrackStyles"
 			@click="handleClick"
@@ -35,14 +36,12 @@
 
 <script lang="ts" setup>
 import { computed, StyleValue, useSlots } from "vue";
-import {
-  useBackgroundColor,
-  useBorder,
-  useElevation,
-  useProps,
-  useRounded,
-  useStyle
-} from "../../composables";
+import { useBackgroundColor } from "../../composables/Commons/backgroundColor.composable";
+import { useBorder } from "../../composables/Commons/border.composable";
+import { useElevation } from "../../composables/Commons/elevation.composable";
+import { useProps } from "../../composables/Commons/props.composable";
+import { useRounded } from "../../composables/Commons/rounded.composable";
+import { useStyle } from "../../composables/Commons/style.composable";
 const props = defineProps({
   modelValue: { type: Boolean, required: false, default: false },
   isValid: { type: [Boolean, null], required: false, default: null },
@@ -75,7 +74,7 @@ const props = defineProps({
   roundedBottomRight: { type: [Boolean, Number, String], required: false },
   elevation: { type: [Number, String], required: false }
 });
-const emits = defineEmits(["click", "update:modelValue"]);
+const emits = defineEmits(["click"]);
 defineSlots();
 const { filterProps } = useProps(props);
 const slots = useSlots();
@@ -88,6 +87,7 @@ const { borderClasses, borderStyles } = useBorder(props);
 const { roundedClasses, roundedStyles } = useRounded(props);
 const { elevationClasses, elevationStyles } = useElevation(props);
 const slotProps = computed(() => ({
+  color: props.color,
   model: props.modelValue,
   isValid: props.isValid
 }));
@@ -122,7 +122,7 @@ const switchTrackClasses = computed(() => {
     props.class
   ];
 });
-const { id, css, load, isLoaded, unload } = useStyle(switchTrackStyles);
+const { id, css, load, isLoaded, unload } = useStyle(switchTrackStyles, () => props.id);
 defineExpose({
   filterProps,
   css,
@@ -143,13 +143,22 @@ defineExpose({
 		font-size: 0.5rem;
 		padding: 0 5px;
 		background-color: var(--origam-switch__track---background-color, rgb(163, 163, 163));
-		border-radius: var(--origam-switch__track---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-switch__track---border-radius, 9999px);
+		}
+
 		height: var(--origam-switch__track---height, 14px);
 		min-width: var(--origam-switch__track---width, 36px);
 		backdrop-filter: var(--origam-switch__track---backdrop-filter, none);
 		-webkit-backdrop-filter: var(--origam-switch__track---backdrop-filter, none);
 		cursor: pointer;
-		transition: 0.2s background-color cubic-bezier(0.4, 0, 0.2, 1);
+		transition: var(--origam-switch---transition-duration, 0.2s) background-color var(--origam-switch---transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1));
 		overflow: hidden;
 
 		@media (prefers-reduced-motion: reduce) {
@@ -187,19 +196,28 @@ defineExpose({
 			opacity: var(--origam-switch---opacity-disabled, 0.32);
 		}
 
+		&--readonly {
+			cursor: default;
+			pointer-events: none;
+		}
+
 		&--dirty#{$this}--disabled {
 			background-color: var(--origam-switch__track---background-color-disabled, rgb(163, 163, 163));
 		}
 
 		&--error {
 			&:not(#{$this}--disabled) {
-				background-color: rgba(255, 0, 0, 1);
-				color: rgba(255, 255, 255, 1);
+				background-color: var(--origam-switch__track---background-color-error, rgba(255, 0, 0, 1));
+				color: var(--origam-switch__track---color-error, rgba(255, 255, 255, 1));
 			}
 		}
 
 		&--inset {
-			border-radius: var(--origam-switch__track---border-radius, 9999px);
+			// #C2 — same zero-specificity requirement as the base rule above.
+			:where(&) {
+				border-radius: var(--origam-switch__track---border-radius, 9999px);
+			}
+
 			font-size: 0.75rem;
 			height: var(--origam-switch__track--inset---height, 32px);
 			min-width: var(--origam-switch__track--inset---width, 52px);

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

@@ -1,6 +1,7 @@
 <template>
 	<component
 			:is="tag"
+			:id="id"
 			v-contrast
 			:class="systemBarClasses"
 			:style="systemBarStyles"
@@ -10,20 +11,19 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, shallowRef, StyleValue, toRef } from "vue";
-import {
-  useBorder,
-  useBothColor,
-  useDimension,
-  useElevation,
-  useLayoutItem,
-  useProps,
-  useRounded,
-  useSsrBoot,
-  useStyle,
-  useTypography
-} from "../../composables";
-import { vContrast } from "../../directives";
+import { computed, StyleValue, toRef } from "vue";
+import { useBorder } from "../../composables/Commons/border.composable";
+import { useBothColor } from "../../composables/Commons/bothColor.composable";
+import { useDimension } from "../../composables/Commons/dimension.composable";
+import { useElevation } from "../../composables/Commons/elevation.composable";
+import { useLayoutItem } from "../../composables/Commons/layoutItem.composable";
+import { useProps } from "../../composables/Commons/props.composable";
+import { useRounded } from "../../composables/Commons/rounded.composable";
+import { useSsrBoot } from "../../composables/Commons/ssrBoot.composable";
+import { useStyle } from "../../composables/Commons/style.composable";
+import { useTypography } from "../../composables/Commons/typography.composable";
+import vContrast from "../../directives/Contrast/contrast.directive";
+import { BLOCK, INLINE } from "../../enums/Commons/anchor.enum";
 const props = defineProps({
   window: { type: Boolean, required: false },
   id: { type: String, required: false },
@@ -36,7 +36,7 @@ const props = defineProps({
   name: { type: String, required: false },
   order: { type: [String, Number], required: false },
   absolute: { type: Boolean, required: false },
-  location: { type: null, required: false },
+  location: { type: null, required: false, default: BLOCK.TOP },
   rounded: { type: [Boolean, Number, String, null], required: false, skipCheck: true },
   roundedTopRight: { type: [Boolean, Number, String], required: false },
   roundedTopLeft: { type: [Boolean, Number, String], required: false },
@@ -61,13 +61,13 @@ const props = defineProps({
   minHeight: { type: [Number, String], required: false },
   minWidth: { type: [Number, String], required: false },
   width: { 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 },
+  fontWeight: { type: null, required: false },
+  lineHeight: { type: null, required: false },
+  letterSpacing: { type: null, required: false }
 });
 const { filterProps } = useProps(props);
+defineEmits([]);
 defineSlots();
 const { dimensionStyles } = useDimension(props);
 const { borderClasses, borderStyles } = useBorder(props);
@@ -77,24 +77,26 @@ const { typographyStyles } = useTypography(props, "system-bar");
 const { colorClasses, colorStyles } = useBothColor(toRef(props, "bgColor"), toRef(props, "color"));
 const { ssrBootStyles } = useSsrBoot();
 const height = computed(() => props.height ?? (props.window ? 32 : 24));
+const isHorizontalDock = computed(() => props.location === INLINE.LEFT || props.location === INLINE.RIGHT);
+const explicitElementSize = computed(() => props.height !== void 0 || isHorizontalDock.value ? height.value : void 0);
 const { layoutItemStyles } = useLayoutItem({
   id: props.name,
   order: computed(() => parseInt(String(props.order ?? 0), 10)),
-  position: shallowRef("top"),
+  position: toRef(props, "location"),
   layoutSize: height,
-  elementSize: height,
+  elementSize: explicitElementSize,
   active: computed(() => true),
   absolute: toRef(props, "absolute")
 });
 const systemBarStyles = computed(() => {
   return [
+    layoutItemStyles.value,
     borderStyles.value,
     roundedStyles.value,
     dimensionStyles.value,
     colorStyles.value,
     typographyStyles.value,
     ssrBootStyles.value,
-    layoutItemStyles.value,
     props.style
   ];
 });
@@ -111,7 +113,7 @@ const systemBarClasses = computed(() => {
     props.class
   ];
 });
-const { id, css, load, isLoaded, unload } = useStyle(systemBarStyles);
+const { id, css, load, isLoaded, unload } = useStyle(systemBarStyles, () => props.id);
 defineExpose({
   filterProps,
   css,

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

@@ -1,6 +1,7 @@
 <template>
 	<component
-			:is="props.tag"
+			:is="tag"
+			:id="id"
 			:class="tableClasses"
 			:style="tableStyles"
 			@mouseenter="onMouseenter"
@@ -30,18 +31,15 @@
 
 <script lang="ts" setup>
 import { computed, StyleValue, useSlots } from "vue";
-import {
-  useDefaults,
-  useDensity,
-  useDimension,
-  useHover,
-  useProps,
-  useStateEffect,
-  useStyle,
-  useTypography
-} from "../../composables";
-import { DENSITY } from "../../enums";
-const _props = defineProps({
+import { useDensity } from "../../composables/Commons/density.composable";
+import { useDimension } from "../../composables/Commons/dimension.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 { useTypography } from "../../composables/Commons/typography.composable";
+import { DENSITY } from "../../enums/Commons/density.enum";
+const props = defineProps({
   fixedHeader: { type: Boolean, required: false },
   fixedFooter: { type: Boolean, required: false },
   caption: { type: String, required: false },
@@ -84,6 +82,7 @@ const _props = defineProps({
   marginBlock: { type: [Boolean, Number, String], required: false },
   marginInline: { type: [Boolean, Number, String], required: false },
   hover: { type: [Boolean, Object], required: false },
+  hoverClass: { type: String, required: false },
   height: { type: [Number, String], required: false },
   maxHeight: { type: [Number, String], required: false },
   maxWidth: { type: [Number, String], required: false },
@@ -92,19 +91,16 @@ const _props = defineProps({
   width: { type: [Number, String], required: false },
   density: { type: null, required: false, default: DENSITY.DEFAULT },
   tag: { type: String, required: false, default: "div" },
-  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 },
+  fontWeight: { type: null, required: false }
 });
-const props = useDefaults(_props);
+defineEmits([]);
 defineSlots();
 const { filterProps } = useProps(props);
 const slots = useSlots();
 const { densityClasses } = useDensity(props);
 const { dimensionStyles } = useDimension(props);
-const { isHover, hoverState, hoverClasses, onMouseenter, onMouseleave } = useHover(props);
+const { isOn: isHover, config: hoverState, classes: hoverClasses, set: onMouseenter, unset: onMouseleave } = useStateFlag(props, { state: "hover" });
 const {
   borderClasses,
   borderStyles,
@@ -161,7 +157,7 @@ const tableWrapperClasses = computed(() => {
     props.class
   ];
 });
-const { id, css, load, isLoaded, unload } = useStyle(tableStyles);
+const { id, css, load, isLoaded, unload } = useStyle(tableStyles, () => props.id);
 defineExpose({
   filterProps,
   css,