origam 2.15.0 → 2.17.0

package/dist/src/components/SelectionControl/OrigamSelectionControl.vue

@@ -4,10 +4,7 @@
     :style="selectionControlStyles"
     v-bind="rootAttrs"
   >
-    <div
-      :class="selectionControlWrapperClasses"
-      :style="wrapperColorStyles"
-    >
+    <div :class="selectionControlWrapperClasses">
       <slot
         name="default"
         v-bind="{ model, color, bgColor, icon, props: { onFocus: handleFocus, onBlur: handleBlur, id } }"
@@ -69,53 +66,46 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, inject, nextTick, ref, shallowRef, StyleValue, useAttrs } from "vue";
-import { ORIGAM_SELECTION_CONTROL_GROUP_KEY } from "../../consts";
-import { OrigamIcon, OrigamLabel } from "../../components";
-import {
-  useBorder,
-  useDefaults,
-  useDensity,
-  useElevation,
-  useHover,
-  useProps,
-  useRounded,
-  useStateEffect,
-  useStyle,
-  useTextColor,
-  useVModel
-} from "../../composables";
-import { vRipple } from "../../directives";
-import { deepEqual, filterInputAttrs, forwardRefs, getUid, matchesSelector, wrapInArray } from "../../utils";
-const _props = defineProps({
+import { computed, inject, nextTick, ref, shallowRef, StyleValue, toRef, useAttrs } from "vue";
+import { ORIGAM_SELECTION_CONTROL_GROUP_KEY } from "../../consts/SelectionControl/selection-control.const";
+import OrigamIcon from "../Icon/OrigamIcon.vue";
+import OrigamLabel from "../Label/OrigamLabel.vue";
+import { useDensity } from "../../composables/Commons/density.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 { useVModel } from "../../composables/Commons/vModel.composable";
+import vRipple from "../../directives/Ripple/ripple.directive";
+import { deepEqual, matchesSelector, wrapInArray } from "../../utils/Commons/commons.util";
+import { filterInputAttrs } from "../../utils/Input/input.util";
+import { forwardRefs } from "../../utils/Commons/forwardRefs.util";
+import { getUid } from "../../utils/Commons/getCurrentInstance.util";
+const props = defineProps({
   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 },
-  id: { type: String, required: false },
-  class: { type: [String, Array, Object], required: false },
-  style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
   disabled: { type: Boolean, required: false },
   error: { type: [String, Boolean], required: false },
-  inline: { type: Boolean, required: false },
-  falseIcon: { type: null, required: false },
-  trueIcon: { type: null, required: false },
-  multiple: { type: Boolean, required: false },
   name: { type: String, required: false },
   readonly: { type: Boolean, required: false },
-  modelValue: { type: null, required: false },
   type: { type: String, required: false },
+  modelValue: { type: null, required: false },
   valueComparator: { type: Function, required: false },
+  falseIcon: { type: null, required: false },
+  trueIcon: { type: null, required: false },
+  multiple: { type: Boolean, required: false, default: void 0 },
+  inline: { 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 },
   color: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
-  density: { type: null, required: false },
-  ripple: { type: [Boolean, Object], required: false },
   bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
-  active: { type: [Boolean, Object], required: false },
-  activeClass: { type: String, required: false },
   hover: { type: [Boolean, Object], required: false },
+  hoverClass: { type: String, required: false },
+  density: { type: null, required: false },
   border: { type: [Boolean, Number, String, Array], required: false, skipCheck: true },
   borderTop: { type: [Boolean, Number, String], required: false },
   borderLeft: { type: [Boolean, Number, String], required: false },
@@ -134,9 +124,9 @@ const _props = defineProps({
   roundedTopLeft: { type: [Boolean, Number, String], required: false },
   roundedBottomLeft: { type: [Boolean, Number, String], required: false },
   roundedBottomRight: { type: [Boolean, Number, String], required: false },
-  elevation: { type: [Number, String], required: false }
+  elevation: { type: [Number, String], required: false },
+  ripple: { type: [Boolean, Object], required: false }
 });
-const props = useDefaults(_props);
 const emits = defineEmits(["click:label", "update:modelValue"]);
 defineSlots();
 const { filterProps } = useProps(props);
@@ -144,8 +134,7 @@ const inputRef = ref();
 const attrs = useAttrs();
 const group = inject(ORIGAM_SELECTION_CONTROL_GROUP_KEY, void 0);
 const { densityClasses } = useDensity(props);
-const { isHover, hoverState } = useHover(props);
-useStateEffect(props, isHover, void 0, hoverState, void 0);
+const { isOn: isHover, config: hoverState } = useStateFlag(props, { state: "hover" });
 const modelValue = useVModel(props, "modelValue");
 const trueValue = computed(() => {
   return props.trueValue !== void 0 ? props.trueValue : props.value !== void 0 ? props.value : true;
@@ -153,15 +142,16 @@ const trueValue = computed(() => {
 const falseValue = computed(() => {
   return props.falseValue !== void 0 ? props.falseValue : false;
 });
-const isMultiple = computed(() => {
-  return !!props.multiple || props.multiple == null && Array.isArray(modelValue.value);
-});
 const valueComparator = computed(() => {
   return props.valueComparator ?? deepEqual;
 });
+const currentModel = () => group ? group.modelValue.value : modelValue.value;
+const isMultiple = computed(() => {
+  return !!props.multiple || props.multiple == null && Array.isArray(currentModel());
+});
 const model = computed({
   get() {
-    const val = group ? group.modelValue.value : modelValue.value;
+    const val = currentModel();
     return isMultiple.value ? wrapInArray(val).some((v) => valueComparator.value(v, trueValue.value)) : valueComparator.value(val, trueValue.value);
   },
   set(val) {
@@ -169,7 +159,8 @@ const model = computed({
     const currentValue = val ? trueValue.value : falseValue.value;
     let newVal = currentValue;
     if (isMultiple.value) {
-      newVal = val ? [...wrapInArray(modelValue.value), currentValue] : wrapInArray(modelValue.value).filter((item) => !valueComparator.value(item, trueValue.value));
+      const previous = currentModel();
+      newVal = val ? [...wrapInArray(previous), currentValue] : wrapInArray(previous).filter((item) => !valueComparator.value(item, trueValue.value));
     }
     if (group) {
       group.modelValue.value = newVal;
@@ -219,18 +210,16 @@ const handleInput = (e) => {
   model.value = e.target.checked;
 };
 const [rootAttrs, inputAttrs] = filterInputAttrs(attrs);
-const color = computed(() => {
-  if (props.error || props.disabled) return void 0;
-  return model.value ? props.activeColor || props.color : props.color;
-});
-const bgColor = computed(() => {
-  if (props.error || props.disabled) return void 0;
-  return model.value ? props.activeBgColor || props.bgColor : props.bgColor;
-});
-const { textColorClasses: wrapperColorClasses, textColorStyles: wrapperColorStyles } = useTextColor(color);
-const { borderClasses, borderStyles } = useBorder(props);
-const { roundedClasses, roundedStyles } = useRounded(props);
-const { elevationClasses, elevationStyles } = useElevation(props);
+const {
+  colorClasses,
+  colorStyles,
+  borderClasses,
+  borderStyles,
+  roundedClasses,
+  roundedStyles,
+  elevationClasses,
+  elevationStyles
+} = useStateEffect(props, isHover, void 0, hoverState, void 0, toRef(props, "disabled"));
 const rippleProp = computed(() => {
   if (props.ripple) {
     return [!props.disabled && !props.readonly, null, ["center", "circle"]];
@@ -244,8 +233,7 @@ const selectionControlStyles = computed(() => {
 });
 const selectionControlWrapperClasses = computed(() => {
   return [
-    "origam-selection-control__wrapper",
-    wrapperColorClasses.value
+    "origam-selection-control__wrapper"
   ];
 });
 const selectionControlInputClasses = computed(() => {
@@ -253,14 +241,16 @@ const selectionControlInputClasses = computed(() => {
     "origam-selection-control__input",
     borderClasses.value,
     roundedClasses.value,
-    elevationClasses.value
+    elevationClasses.value,
+    colorClasses.value
   ];
 });
 const selectionControlInputStyles = computed(() => {
   return [
     borderStyles.value,
     roundedStyles.value,
-    elevationStyles.value
+    elevationStyles.value,
+    colorStyles.value
   ];
 });
 const selectionControlClasses = computed(() => {
@@ -308,8 +298,8 @@ defineExpose(forwardRefs({
     }
 
     &__wrapper {
-      width: calc(40px + 1.5 * var(--origam-selection-control--density, 0px));
-      height: calc(40px + 1.5 * var(--origam-selection-control--density, 0px));
+      width: calc(var(--origam-selection-control__wrapper---width, 40px) + 1.5 * var(--origam-selection-control---density, 0px));
+      height: calc(var(--origam-selection-control__wrapper---height, 40px) + 1.5 * var(--origam-selection-control---density, 0px));
       display: inline-flex;
       align-items: center;
       position: relative;
@@ -318,14 +308,14 @@ defineExpose(forwardRefs({
     }
 
     &__input {
-      width: calc(40px + 1.5 * var(--origam-selection-control--density, 0px));
-      height: calc(40px + 1.5 * var(--origam-selection-control--density, 0px));
+      width: calc(40px + 1.5 * var(--origam-selection-control---density, 0px));
+      height: calc(40px + 1.5 * var(--origam-selection-control---density, 0px));
       align-items: center;
       display: flex;
       flex: none;
       justify-content: center;
       position: relative;
-      border-radius: 50%;
+      border-radius: var(--origam-selection-control__input---border-radius, 50%);
       backdrop-filter: var(--origam-selection-control__input---backdrop-filter, none);
       -webkit-backdrop-filter: var(--origam-selection-control__input---backdrop-filter, none);
 
@@ -355,7 +345,7 @@ defineExpose(forwardRefs({
         // pouvait peindre au repos ignorait la prop. `inherit` reprend le
         // border-radius résolu par `useRounded` sur `__input`.
         border-radius: inherit;
-        background-color: currentColor;
+        background-color: var(--origam-selection-control__input---overlay-background-color, currentColor);
         opacity: 0;
         pointer-events: none;
       }
@@ -372,7 +362,7 @@ defineExpose(forwardRefs({
     &--error {
       #{$this}__input {
         > .origam-icon {
-          opacity: 1;
+          opacity: var(--origam-selection-control__icon---opacity-active, 1);
         }
       }
     }
@@ -380,12 +370,12 @@ defineExpose(forwardRefs({
     &--error,
     &--disabled {
       .origam-label {
-        opacity: 1;
+        opacity: var(--origam-selection-control__label---opacity-disabled, 1);
       }
     }
 
     &--disabled {
-      opacity: 0.5;
+      opacity: var(--origam-selection-control---opacity-disabled, 0.5);
       pointer-events: none;
     }
 
@@ -417,25 +407,25 @@ defineExpose(forwardRefs({
     &--focus-visible {
       #{$this}__input {
         &:before {
-          opacity: calc(0.12 * 1);
+          opacity: var(--origam-selection-control__input---overlay-opacity-focus, 0.12);
         }
 
         outline: var(--origam-border__width---2, 2px) solid var(--origam-color__border---focus, currentColor);
         outline-offset: var(--origam-space---1, 2px);
-        border-radius: 50%;
+        border-radius: var(--origam-selection-control__input---border-radius, 50%);
       }
     }
 
     &--density-default {
-      --origam-selection-control--density: 0px;
+      --origam-selection-control---density: 0px;
     }
 
     &--density-compact {
-      --origam-selection-control--density: -8px;
+      --origam-selection-control---density: -8px;
     }
 
     &--density-comfortable {
-      --origam-selection-control--density: 8px;
+      --origam-selection-control---density: 8px;
     }
   }
 </style>

package/dist/src/components/SelectionControl/OrigamSelectionControlGroup.vue

@@ -31,15 +31,15 @@
 
 <script lang="ts" setup>
 import { computed, onScopeDispose, provide, StyleValue } from "vue";
-import { OrigamDefaultsProvider } from "../../components";
-import {
-  useProps,
-  useStyle,
-  useVModel
-} from "../../composables";
-import { ORIGAM_SELECTION_CONTROL_GROUP_KEY } from "../../consts";
-import { DENSITY } from "../../enums";
-import { getUid } from "../../utils";
+import OrigamDefaultsProvider from "../DefaultsProvider/OrigamDefaultsProvider.vue";
+import { usePassedProps } from "../../composables/Commons/passedProps.composable";
+import { useProps } from "../../composables/Commons/props.composable";
+import { useStyle } from "../../composables/Commons/style.composable";
+import { useVModel } from "../../composables/Commons/vModel.composable";
+import { ORIGAM_SELECTION_CONTROL_GROUP_KEY } from "../../consts/SelectionControl/selection-control.const";
+import { DENSITY } from "../../enums/Commons/density.enum";
+import { getUid } from "../../utils/Commons/getCurrentInstance.util";
+import { omitUndefined } from "../../utils/Commons/commons.util";
 const props = defineProps({
   disabled: { type: Boolean, required: false },
   error: { type: [String, Boolean], required: false },
@@ -63,21 +63,22 @@ const props = defineProps({
 defineEmits(["update:modelValue"]);
 defineSlots();
 const { filterProps } = useProps(props);
+const wasPropPassed = usePassedProps(props);
 const slotDefaults = computed(() => ({
-  "origam-selection-control": {
-    density: props.density,
-    color: props.color,
-    type: props.type,
-    disabled: props.disabled,
-    readonly: props.readonly,
-    error: props.error,
-    multiple: props.multiple,
-    name: props.name,
-    ripple: props.ripple,
-    falseIcon: props.falseIcon,
-    trueIcon: props.trueIcon,
-    valueComparator: props.valueComparator
-  }
+  "origam-selection-control": omitUndefined({
+    density: wasPropPassed("density") ? props.density : void 0,
+    color: wasPropPassed("color") ? props.color : void 0,
+    type: wasPropPassed("type") ? props.type : void 0,
+    disabled: wasPropPassed("disabled") ? props.disabled : void 0,
+    readonly: wasPropPassed("readonly") ? props.readonly : void 0,
+    error: wasPropPassed("error") ? props.error : void 0,
+    multiple: wasPropPassed("multiple") ? props.multiple : void 0,
+    name: wasPropPassed("name") ? props.name : void 0,
+    ripple: wasPropPassed("ripple") ? props.ripple : void 0,
+    falseIcon: wasPropPassed("falseIcon") ? props.falseIcon : void 0,
+    trueIcon: wasPropPassed("trueIcon") ? props.trueIcon : void 0,
+    valueComparator: wasPropPassed("valueComparator") ? props.valueComparator : void 0
+  })
 }));
 const modelValue = useVModel(props, "modelValue");
 const uid = getUid();

package/dist/src/components/Sheet/OrigamSheet.vue

@@ -1,26 +1,25 @@
 <template>
 	<component
 			:is="tag"
+			:id="id"
 			:ref="rootEl"
 			:class="sheetClasses"
 			:style="sheetStyles"
-			@click="onActive"
+			@click="onActive()"
 			@mouseenter="onMouseenter"
 			@mouseleave="onMouseleave"
 	>
-		<div
+		<button
 				v-if="showHandle"
 				ref="handleEl"
+				:aria-label="handleAriaLabel"
 				class="origam-sheet__handle"
-				role="button"
-				tabindex="0"
-				aria-label="Drag handle"
 				data-cy="sheet-bottom-handle"
-				@keydown.enter.prevent="onActive"
-				@keydown.space.prevent="onActive"
+				type="button"
+				@keydown="handleHandleKeydown"
 		>
 			<span class="origam-sheet__handle-pill"/>
-		</div>
+		</button>
 
 		<slot name="default"/>
 	</component>
@@ -28,26 +27,26 @@
 
 <script lang="ts" setup>
 import { computed, ref, StyleValue, toRef, watch } from "vue";
-import {
-  useActive,
-  useBothColor,
-  useDimension,
-  useHover,
-  useLocation,
-  usePosition,
-  useProps,
-  useSheetSwipe,
-  useStateEffect,
-  useStyle
-} from "../../composables";
+import { useBothColor } from "../../composables/Commons/bothColor.composable";
+import { useDimension } from "../../composables/Commons/dimension.composable";
+import { useLocale } from "../../composables/Commons/locale.composable";
+import { useLocation } from "../../composables/Commons/location.composable";
+import { usePosition } from "../../composables/Commons/position.composable";
+import { useProps } from "../../composables/Commons/props.composable";
+import { resolveHeightPx, useSheetSwipe } from "../../composables/Sheet/sheetSwipe.composable";
+import { useStateEffect } from "../../composables/Commons/stateEffect.composable";
+import { useStateFlag } from "../../composables/Commons/stateFlag.composable";
+import { useStyle } from "../../composables/Commons/style.composable";
+import { KEYBOARD_VALUES } from "../../enums/Commons/hotkey.enum";
 const props = defineProps({
   side: { type: null, required: false, default: void 0 },
   swipeable: { type: Boolean, required: false, default: false },
   snapPoints: { type: Array, required: false },
-  defaultSnap: { type: [String, Object], required: false, default: "half" },
+  defaultSnap: { type: null, required: false, default: "half" },
   open: { type: Boolean, required: false, default: void 0 },
   disabled: { type: Boolean, required: false, default: false },
   persistent: { type: Boolean, required: false, default: false },
+  handleLabel: { type: String, required: false, default: "origam.sheet.handle.aria_label" },
   tag: { type: String, required: false, default: "div" },
   id: { type: String, required: false },
   class: { type: [String, Array, Object], required: false },
@@ -101,17 +100,18 @@ const props = defineProps({
   right: { type: [Number, String], required: false },
   active: { type: [Boolean, Object], required: false },
   activeClass: { type: String, required: false },
-  hover: { type: [Boolean, Object], required: false }
+  hover: { type: [Boolean, Object], required: false },
+  hoverClass: { type: String, required: false }
 });
-const emit = defineEmits(["update:snap", "update:open"]);
+const emit = defineEmits(["update:snap", "update:open", "update:active"]);
 defineSlots();
 const { filterProps } = useProps(props);
 const { colorClasses, colorStyles } = useBothColor(
   toRef(props, "bgColor"),
   toRef(props, "color")
 );
-const { isHover, hoverState, hoverClasses, onMouseenter, onMouseleave } = useHover(props);
-const { isActive, activeState, activeClasses, onActive } = useActive(props);
+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 {
   borderClasses,
   borderStyles,
@@ -127,6 +127,8 @@ const {
 const { dimensionStyles } = useDimension(props);
 const { locationStyles } = useLocation(props);
 const { positionClasses } = usePosition(props);
+const { t } = useLocale();
+const handleAriaLabel = computed(() => t(props.handleLabel));
 const rootEl = ref(null);
 const handleEl = ref(null);
 const DEFAULT_SNAP_POINTS = [
@@ -173,24 +175,40 @@ watch(currentSnap, (next, prev) => {
 });
 const swipeStyles = computed(() => {
   if (!swipeEnabled.value) return {};
-  const maxHeight = Math.max(...snapPointsRef.value.map((s) => {
-    const h = s.height;
-    if (typeof h === "number") return h;
-    const m = String(h).match(/^([\d.]+)(px|vh|vw|%|rem|em)?$/i);
-    if (!m) return 0;
-    const num = parseFloat(m[1]);
-    const unit = (m[2] ?? "px").toLowerCase();
-    if (typeof window === "undefined") return num;
-    if (unit === "vh" || unit === "%") return window.innerHeight * num / 100;
-    if (unit === "vw") return window.innerWidth * num / 100;
-    return num;
-  }));
+  const maxHeight = Math.max(...snapPointsRef.value.map((s) => resolveHeightPx(s.height)));
   const liveHeight = isDragging.value ? Math.min(maxHeight, Math.max(0, currentSnapHeight.value + dragOffset.value)) : currentSnapHeight.value;
   return {
     "--origam-sheet---swipe-height": `${liveHeight}px`,
     "transition": isDragging.value ? "none" : "height 200ms ease"
   };
 });
+const sortedSnapPoints = computed(() => {
+  return [...snapPointsRef.value].sort((a, b) => resolveHeightPx(a.height) - resolveHeightPx(b.height));
+});
+const handleHandleKeydown = (event) => {
+  if (disabledRef.value) return;
+  const points = sortedSnapPoints.value;
+  const currentIndex = points.findIndex((p) => p.id === currentSnap.value);
+  if (currentIndex === -1) return;
+  switch (event.key) {
+    case KEYBOARD_VALUES.UP:
+      event.preventDefault();
+      snapTo(points[Math.min(currentIndex + 1, points.length - 1)].id);
+      break;
+    case KEYBOARD_VALUES.DOWN:
+      event.preventDefault();
+      snapTo(points[Math.max(currentIndex - 1, 0)].id);
+      break;
+    case KEYBOARD_VALUES.HOME:
+      event.preventDefault();
+      snapTo(points[0].id);
+      break;
+    case KEYBOARD_VALUES.END:
+      event.preventDefault();
+      snapTo(points[points.length - 1].id);
+      break;
+  }
+};
 const sheetStyles = computed(() => {
   return [
     dimensionStyles.value,
@@ -224,7 +242,7 @@ const sheetClasses = computed(() => {
     props.class
   ];
 });
-const { id, css, load, isLoaded, unload } = useStyle(sheetStyles);
+const { id, css, load, isLoaded, unload } = useStyle(sheetStyles, () => props.id);
 defineExpose({
   filterProps,
   // Imperative gesture handles for advanced consumers (test hooks,
@@ -278,10 +296,10 @@ defineExpose({
 		color: var(--origam-sheet---color);
 
 		&--border {
-			--origam-sheet---border-top-width: var(--origam-border__width---thin, 1px);
-			--origam-sheet---border-right-width: var(--origam-border__width---thin, 1px);
-			--origam-sheet---border-bottom-width: var(--origam-border__width---thin, 1px);
-			--origam-sheet---border-left-width: var(--origam-border__width---thin, 1px);
+			--origam-sheet---border-top-width: var(--origam-sheet--border---border-top-width, var(--origam-border__width---thin, 1px));
+			--origam-sheet---border-right-width: var(--origam-sheet--border---border-right-width, var(--origam-border__width---thin, 1px));
+			--origam-sheet---border-bottom-width: var(--origam-sheet--border---border-bottom-width, var(--origam-border__width---thin, 1px));
+			--origam-sheet---border-left-width: var(--origam-sheet--border---border-left-width, var(--origam-border__width---thin, 1px));
 			box-shadow: var(--origam-sheet--border---box-shadow, var(--origam-sheet---box-shadow));
 		}
 
@@ -366,6 +384,13 @@ defineExpose({
 		}
 
 		&__handle {
+			appearance: none;
+			margin: 0;
+			padding-inline: 0;
+			border: 0;
+			background: none;
+			color: inherit;
+			font: inherit;
 			display: flex;
 			align-items: center;
 			justify-content: center;

package/dist/src/components/Skeleton/OrigamSkeleton.vue

@@ -5,10 +5,11 @@
 
 	<div
 			v-else-if="variant === 'list-item'"
+			:id="id"
 			:class="skeletonContainerClasses"
 			:style="skeletonContainerStyles"
+			:aria-label="skeletonAriaLabel"
 			aria-busy="true"
-			aria-label="Loading"
 			role="status"
 	>
 		<div
@@ -23,10 +24,11 @@
 
 	<div
 			v-else-if="variant === 'card'"
+			:id="id"
 			:class="skeletonContainerClasses"
 			:style="skeletonContainerStyles"
+			:aria-label="skeletonAriaLabel"
 			aria-busy="true"
-			aria-label="Loading"
 			role="status"
 	>
 		<div :class="skeletonRectangularClasses"/>
@@ -37,30 +39,31 @@
 
 	<div
 			v-else
+			:id="id"
 			:class="skeletonClasses"
 			:style="skeletonStyles"
+			:aria-label="skeletonAriaLabel"
 			aria-busy="true"
-			aria-label="Loading"
 			role="status"
 	/>
 </template>
 
 <script lang="ts" setup>
-import {
-  useBothColor,
-  useProps,
-  useRounded,
-  useSize,
-  useStyle
-} from "../../composables";
-import { convertToUnit } from "../../utils";
+import { useBothColor } from "../../composables/Commons/bothColor.composable";
+import { useLocale } from "../../composables/Commons/locale.composable";
+import { useProps } from "../../composables/Commons/props.composable";
+import { useRounded } from "../../composables/Commons/rounded.composable";
+import { useSize } from "../../composables/Commons/size.composable";
+import { useStyle } from "../../composables/Commons/style.composable";
+import { convertToUnit } from "../../utils/Commons/commons.util";
 import { computed, toRef } from "vue";
 const props = defineProps({
-  variant: { type: String, required: false, default: "rectangular" },
+  variant: { type: null, required: false, default: "rectangular" },
   width: { type: [String, Number], required: false },
   height: { type: [String, Number], required: false },
   loading: { type: Boolean, required: false, default: true },
   pulse: { type: Boolean, required: false, default: true },
+  label: { type: String, required: false, default: "origam.loading" },
   id: { type: String, required: false },
   class: { type: [String, Array, Object], required: false },
   style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
@@ -74,9 +77,12 @@ const props = defineProps({
   roundedBottomRight: { type: [Boolean, Number, String], required: false }
 });
 const { filterProps } = useProps(props);
+defineEmits([]);
 defineSlots();
+const { t } = useLocale();
 const { roundedClasses, roundedStyles } = useRounded(props);
 const { sizeClasses, sizeStyles } = useSize(props);
+const skeletonAriaLabel = computed(() => t(props.label));
 const { colorClasses, colorStyles } = useBothColor(toRef(props, "bgColor"), toRef(props, "color"));
 const resolvedWidth = computed(() => {
   if (props.variant === "text" && props.width == null) return "100%";
@@ -132,7 +138,7 @@ const skeletonStyles = computed(() => {
   if (resolvedHeight.value) styles["height"] = resolvedHeight.value;
   return [styles, colorStyles.value, roundedStyles.value, sizeStyles.value, props.style];
 });
-const { id, css, load, isLoaded, unload } = useStyle(skeletonStyles);
+const { id, css, load, isLoaded, unload } = useStyle(skeletonStyles, () => props.id);
 defineExpose({
   filterProps,
   css,