origam 2.16.0 → 2.17.0

package/dist/src/components/Input/OrigamInput.vue

@@ -1,5 +1,6 @@
 <template>
 	<div
+			:id="styleId"
 			v-contrast
 			:class="inputClasses"
 			:style="inputStyles"
@@ -8,7 +9,10 @@
 		    v-if="hasPrepend"
 		    key="prepend"
 		    class="origam-input__prepend"
+		    :role="isPrependClickable ? 'button' : undefined"
+		    :tabindex="isPrependClickable ? 0 : undefined"
 		    @click="handleClickPrepend"
+		    @keydown="handleKeydownPrepend"
     >
       <slot name="prepend">
         <origam-avatar
@@ -40,7 +44,10 @@
 				v-if="hasAppend"
 				key="append"
 				class="origam-input__append"
+				:role="isAppendClickable ? 'button' : undefined"
+				:tabindex="isAppendClickable ? 0 : undefined"
 				@click="handleClickAppend"
+				@keydown="handleKeydownAppend"
 		>
       <slot name="append">
        <origam-avatar
@@ -93,30 +100,30 @@
 
 <script lang="ts" setup>
 import { computed, StyleValue, toRef, useSlots } from "vue";
-import { OrigamAvatar, OrigamIcon } from "../../components";
+import OrigamAvatar from "../Avatar/OrigamAvatar.vue";
+import OrigamIcon from "../Icon/OrigamIcon.vue";
 import { OrigamMessages } from "../../components/Messages";
-import { vContrast } from "../../directives";
-import {
-  useAdjacent,
-  useBorder,
-  useBothColor,
-  useDefaults,
-  useDensity,
-  useDimension,
-  useElevation,
-  useMargin,
-  usePadding,
-  useProps,
-  useRounded,
-  useRtl,
-  useSize,
-  useStyle,
-  useTypography,
-  useValidation
-} from "../../composables";
-import { DENSITY, DIRECTION } from "../../enums";
-import { getUid, wrapInArray } from "../../utils";
-const _props = defineProps({
+import vContrast from "../../directives/Contrast/contrast.directive";
+import { useAdjacent } from "../../composables/Commons/adjacent.composable";
+import { useBorder } from "../../composables/Commons/border.composable";
+import { useBothColor } from "../../composables/Commons/bothColor.composable";
+import { useDensity } from "../../composables/Commons/density.composable";
+import { useDimension } from "../../composables/Commons/dimension.composable";
+import { useElevation } from "../../composables/Commons/elevation.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 { useRtl } from "../../composables/Commons/rtl.composable";
+import { useSize } from "../../composables/Commons/size.composable";
+import { useStyle } from "../../composables/Commons/style.composable";
+import { useTypography } from "../../composables/Commons/typography.composable";
+import { useValidation } from "../../composables/Commons/validation.composable";
+import { DENSITY } from "../../enums/Commons/density.enum";
+import { DIRECTION } from "../../enums/Commons/direction.enum";
+import { getUid } from "../../utils/Commons/getCurrentInstance.util";
+import { wrapInArray } from "../../utils/Commons/commons.util";
+const props = defineProps({
   centerAffix: { type: Boolean, required: false, default: true },
   hideDetails: { type: [Boolean, String], required: false },
   hideSpinButtons: { type: Boolean, required: false },
@@ -174,7 +181,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 },
@@ -186,14 +192,11 @@ const _props = defineProps({
   prependAvatar: { type: String, required: false },
   prependIcon: { type: null, required: false },
   size: { 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 }
+  lineHeight: { type: null, required: false }
 });
-const props = useDefaults(_props);
-defineEmits(["update:modelValue", "click:append", "click:prepend", "update:focused"]);
+defineEmits(["update:modelValue", "click:append", "click:prepend"]);
 defineSlots();
 const slots = useSlots();
 const uid = getUid();
@@ -220,7 +223,11 @@ const {
   hasPrepend,
   hasAppend,
   onClickPrepend: handleClickPrepend,
-  onClickAppend: handleClickAppend
+  onClickAppend: handleClickAppend,
+  onKeydownPrepend: handleKeydownPrepend,
+  onKeydownAppend: handleKeydownAppend,
+  isPrependClickable,
+  isAppendClickable
 } = useAdjacent(props, toRef(props, "prependIcon"), toRef(props, "appendIcon"));
 const messages = computed(() => {
   if (props.errorMessages?.length || !isPristine.value && errorMessages.value.length) {
@@ -253,7 +260,7 @@ const hasDetails = computed(() => {
 });
 const { densityClasses } = useDensity(props);
 const { dimensionStyles } = useDimension(props);
-const { colorClasses, colorStyles } = useBothColor(toRef(props.bgColor), toRef(props.color));
+const { colorClasses, colorStyles } = useBothColor(toRef(props, "bgColor"), toRef(props, "color"));
 const { rtlClasses } = useRtl();
 const { sizeClasses } = useSize(props, "origam-input");
 const { typographyStyles } = useTypography(props, "input");
@@ -325,18 +332,16 @@ defineExpose({
 		font-weight: var(--origam-input---font-weight, 400);
 		line-height: var(--origam-input---line-height, 1.5);
 
-		--origam-input---padding-top: 16px;
-
 		&__details {
 			align-items: flex-end;
 			display: flex;
-			font-size: 0.75rem;
-			font-weight: 400;
+			font-size: var(--origam-input__details---font-size, 0.75rem);
+			font-weight: var(--origam-input__details---font-weight, 400);
 			grid-area: messages;
-			letter-spacing: 0.0333333333em;
-			line-height: 1;;
-			min-height: 22px;
-			padding-top: 6px;
+			letter-spacing: var(--origam-input__details---letter-spacing, 0.0333333333em);
+			line-height: var(--origam-input__details---line-height, 1);
+			min-height: var(--origam-input__details---min-height, 22px);
+			padding-top: var(--origam-input__details---padding-top, 6px);
 			overflow: hidden;
 			justify-content: space-between;
 		}
@@ -353,7 +358,14 @@ defineExpose({
 		&__append {
 			display: flex;
 			align-items: flex-start;
-			padding-top: 8px;
+		}
+
+		&__prepend {
+			padding-top: var(--origam-input__prepend---padding-top, 8px);
+		}
+
+		&__append {
+			padding-top: var(--origam-input__append---padding-top, 8px);
 		}
 
 		&__prepend {
@@ -369,20 +381,28 @@ defineExpose({
 			grid-area: control;
 		}
 
+    &--is-rtl {
+      direction: rtl;
+    }
+
+    &--is-ltr {
+      direction: ltr;
+    }
+
 		&--disabled {
 			pointer-events: none;
 		}
 
 		&--density-default {
-			--origam-input---density: 0px;
+			--origam-input---density: var(--origam-input---density-default-density, 0px);
 		}
 
 		&--density-compact {
-			--origam-input---density: -8px;
+			--origam-input---density: var(--origam-input---density-compact-density, -8px);
 		}
 
 		&--density-comfortable {
-			--origam-input---density: 8px;
+			--origam-input---density: var(--origam-input---density-comfortable-density, 8px);
 		}
 
 		&--size-small {
@@ -415,11 +435,11 @@ defineExpose({
 			grid-template-columns: min-content;
 
 			#{$this}__prepend {
-				margin-block-start: 16px;
+				margin-block-start: var(--origam-input__prepend---margin-block-start, 16px);
 			}
 
 			#{$this}__append {
-				margin-block-end: 16px;
+				margin-block-end: var(--origam-input__append---margin-block-end, 16px);
 			}
 		}
 
@@ -429,11 +449,11 @@ defineExpose({
 			grid-template-rows: auto auto;
 
 			#{$this}__prepend {
-				margin-inline-end: 16px;
+				margin-inline-end: var(--origam-input__prepend---margin-inline-end, 16px);
 			}
 
 			#{$this}__append {
-				margin-inline-start: 16px;
+				margin-inline-start: var(--origam-input__append---margin-inline-start, 16px);
 			}
 		}
 
@@ -466,7 +486,7 @@ defineExpose({
 			&:not(#{$this}--disabled) {
 				#{$this}__details {
 					> .origam-messages {
-						color: var(--origam-input---error-color, var(--origam-color__feedback--danger---fg-subtle));
+						color: var(--origam-input---error-color, var(--origam-color__feedback--danger---fgSubtle));
 					}
 				}
 
@@ -474,7 +494,7 @@ defineExpose({
 				#{$this}__prepend,
 				#{$this}__append {
 					> .origam-icon {
-						color: var(--origam-input---error-color, var(--origam-color__feedback--danger---fg-subtle));
+						color: var(--origam-input---error-color, var(--origam-color__feedback--danger---fgSubtle));
 					}
 				}
 			}

package/dist/src/components/ItemGroup/OrigamItemGroup.vue

@@ -1,6 +1,7 @@
 <template>
 	<component
 			:is="tag"
+			:id="id"
 			:class="itemGroupClasses"
       :style="itemGroupStyles"
 	>
@@ -15,20 +16,18 @@
 
 <script lang="ts" setup>
 import { computed, StyleValue } from "vue";
-import { OrigamDefaultsProvider } from "../../components";
-import {
-  useGroup,
-  usePassedProps,
-  useProps,
-  useStyle
-} from "../../composables";
-import { ORIGAM_ITEM_GROUP_KEY } from "../../consts";
-import { omitUndefined } from "../../utils";
+import OrigamDefaultsProvider from "../DefaultsProvider/OrigamDefaultsProvider.vue";
+import { useGroup } from "../../composables/Commons/group.composable";
+import { usePassedProps } from "../../composables/Commons/passedProps.composable";
+import { useProps } from "../../composables/Commons/props.composable";
+import { useStyle } from "../../composables/Commons/style.composable";
+import { ORIGAM_ITEM_GROUP_KEY } from "../../consts/ItemGroup/item-group.const";
+import { omitUndefined } from "../../utils/Commons/commons.util";
 const props = defineProps({
-  tag: { type: String, required: false, default: "div" },
   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: "div" },
   disabled: { type: Boolean, required: false },
   modelValue: { type: null, required: false },
   multiple: { type: Boolean, required: false },
@@ -64,7 +63,7 @@ const itemGroupStyles = computed(() => {
     props.style
   ];
 });
-const { id, css, load, isLoaded, unload } = useStyle(itemGroupStyles);
+const { id, css, load, isLoaded, unload } = useStyle(itemGroupStyles, () => props.id);
 defineExpose({
   filterProps,
   next,

package/dist/src/components/ItemGroup/{OrigamItem.vue → OrigamItemGroupItem.vue}

@@ -1,6 +1,7 @@
 <template>
   <component
     :is="tag"
+    :id="id"
     :class="itemClasses"
     :style="itemStyles"
   >
@@ -13,26 +14,25 @@
 
 <script lang="ts" setup>
 import { computed, StyleValue } from "vue";
-import {
-  useGroupItem,
-  useProps,
-  useStyle
-} from "../../composables";
-import { ORIGAM_ITEM_GROUP_KEY } from "../../consts";
+import { useGroupItem } from "../../composables/Commons/groupItem.composable";
+import { useProps } from "../../composables/Commons/props.composable";
+import { useStyle } from "../../composables/Commons/style.composable";
+import { ORIGAM_ITEM_GROUP_KEY } from "../../consts/ItemGroup/item-group.const";
 const props = defineProps({
-  tag: { type: String, required: false, default: "div" },
   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: "div" },
   value: { type: null, required: false, default: void 0 },
   disabled: { type: Boolean, required: false },
   selectedClass: { type: String, required: false, default: void 0 }
 });
+defineEmits(["group:selected"]);
 defineSlots();
 const { filterProps } = useProps(props);
 const groupItem = useGroupItem(props, ORIGAM_ITEM_GROUP_KEY);
 if (!groupItem) {
-  throw new Error("[Origam] <OrigamItem> must be used inside an <OrigamItemGroup>");
+  throw new Error("[Origam] <OrigamItemGroupItem> must be used inside an <OrigamItemGroup>");
 }
 const slotProps = computed(() => ({
   isSelected: groupItem.isSelected.value,
@@ -54,7 +54,7 @@ const itemStyles = computed(() => {
     props.style
   ];
 });
-const { id, css, load, isLoaded, unload } = useStyle(itemStyles);
+const { id, css, load, isLoaded, unload } = useStyle(itemStyles, () => props.id);
 defineExpose({
   filterProps,
   toggle: groupItem.toggle,

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

@@ -3,18 +3,18 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "OrigamItem", {
+Object.defineProperty(exports, "OrigamItemGroup", {
   enumerable: true,
   get: function () {
-    return _OrigamItem.default;
+    return _OrigamItemGroup.default;
   }
 });
-Object.defineProperty(exports, "OrigamItemGroup", {
+Object.defineProperty(exports, "OrigamItemGroupItem", {
   enumerable: true,
   get: function () {
-    return _OrigamItemGroup.default;
+    return _OrigamItemGroupItem.default;
   }
 });
-var _OrigamItem = _interopRequireDefault(require("./OrigamItem.vue"));
+var _OrigamItemGroupItem = _interopRequireDefault(require("./OrigamItemGroupItem.vue"));
 var _OrigamItemGroup = _interopRequireDefault(require("./OrigamItemGroup.vue"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

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

@@ -1,2 +1,2 @@
-export { default as OrigamItem } from './OrigamItem.vue';
+export { default as OrigamItemGroupItem } from './OrigamItemGroupItem.vue';
 export { default as OrigamItemGroup } from './OrigamItemGroup.vue';

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

@@ -1,2 +1,2 @@
-export { default as OrigamItem } from "./OrigamItem.vue";
+export { default as OrigamItemGroupItem } from "./OrigamItemGroupItem.vue";
 export { default as OrigamItemGroup } from "./OrigamItemGroup.vue";

package/dist/src/components/Kbd/OrigamKbd.vue

@@ -1,5 +1,6 @@
 <template>
 	<kbd
+			:id="id"
 			v-contrast
 			:class="kbdClasses"
 			:style="kbdStyles"
@@ -27,19 +28,16 @@
 </template>
 
 <script lang="ts" setup>
-import { vContrast } from "../../directives";
-import {
-  useBorder,
-  useBothColor,
-  useDefaults,
-  useProps,
-  useRounded,
-  useSize,
-  useStyle,
-  useTypography
-} from "../../composables";
+import vContrast from "../../directives/Contrast/contrast.directive";
+import { useBorder } from "../../composables/Commons/border.composable";
+import { useBothColor } from "../../composables/Commons/bothColor.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 { useTypography } from "../../composables/Commons/typography.composable";
 import { computed, StyleValue, toRef } from "vue";
-const _props = defineProps({
+const props = defineProps({
   text: { type: String, required: false },
   combination: { type: Array, required: false },
   separator: { type: String, required: false, default: "+" },
@@ -70,12 +68,10 @@ const _props = defineProps({
   roundedBottomRight: { type: [Boolean, Number, String], 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 }
+  fontWeight: { type: null, required: false }
 });
-const props = useDefaults(_props);
 const { filterProps } = useProps(props);
+defineEmits([]);
 defineSlots();
 const { sizeClasses, sizeStyles } = useSize(props);
 const { roundedClasses, roundedStyles } = useRounded(props);
@@ -106,7 +102,7 @@ const kbdStyles = computed(() => {
     props.style
   ];
 });
-const { id, css, load, isLoaded, unload } = useStyle(kbdStyles);
+const { id, css, load, isLoaded, unload } = useStyle(kbdStyles, () => props.id);
 defineExpose({
   filterProps,
   css,
@@ -163,7 +159,7 @@ defineExpose({
 
 			padding-block: 0;
 			padding-inline: 0;
-			border-width: 0;
+			--origam-kbd---border-width: 0;
 			background-color: transparent;
 			box-shadow: none;
 			min-width: 0;
@@ -175,25 +171,27 @@ defineExpose({
 
 		&--variant-outlined,
 		&--variant-outlined &__key {
-			--origam-kbd---background-color: var(--origam-color__surface---raised, #fff);
+			--origam-kbd---background-color: var(--origam-kbd--outlined---background-color, var(--origam-color__surface---raised, #fff));
 			--origam-kbd---border-color: var(--origam-color__border---subtle, #d4d4d4);
+			--origam-kbd---border-width: var(--origam-kbd--outlined---border-width, 1px);
 			--origam-kbd---box-shadow: 0 1px 0 0 color-mix(in srgb, currentColor 12%, transparent),
 			                            inset 0 1px 0 0 color-mix(in srgb, white 50%, transparent);
 		}
 
 		&--variant-filled,
 		&--variant-filled &__key {
-			--origam-kbd---background-color: var(--origam-color__surface---overlay, #f5f5f5);
+			--origam-kbd---background-color: var(--origam-kbd__filled---background-color, var(--origam-color__surface---overlay, #f5f5f5));
 			--origam-kbd---border-color: var(--origam-color__border---subtle, #d4d4d4);
+			--origam-kbd---border-width: var(--origam-kbd__filled---border-width, 1px);
 			--origam-kbd---box-shadow: 0 1px 2px 0 color-mix(in srgb, currentColor 18%, transparent),
 			                            inset 0 1px 0 0 color-mix(in srgb, white 60%, transparent);
 		}
 
 		&--variant-tonal,
 		&--variant-tonal &__key {
-			--origam-kbd---background-color: color-mix(in srgb, currentColor 8%, transparent);
+			--origam-kbd---background-color: var(--origam-kbd__tonal---background-color, color-mix(in srgb, currentColor 8%, transparent));
 			--origam-kbd---border-color: transparent;
-			--origam-kbd---border-width: 0px;
+			--origam-kbd---border-width: var(--origam-kbd__tonal---border-width, 0px);
 			--origam-kbd---box-shadow: none;
 		}
 
@@ -202,7 +200,7 @@ defineExpose({
 		&--combination#{&}--variant-tonal {
 			background-color: transparent;
 			border-color: transparent;
-			border-width: 0;
+			--origam-kbd---border-width: 0;
 			box-shadow: none;
 		}
 

package/dist/src/components/Label/OrigamLabel.vue

@@ -1,11 +1,11 @@
 <template>
 	<component
-			:is="props.tag"
+			:is="tag"
 			:id="id"
 			v-contrast
 			:class="labelClasses"
 			:style="labelStyles"
-			:name="name"
+			:name="resolvedName"
 			@click="handleClick"
 	>
 		<slot name="default">
@@ -16,19 +16,17 @@
 
 <script lang="ts" setup>
 import { computed, StyleValue, toRef } from "vue";
-import {
-  useBorder,
-  useBothColor,
-  useDefaults,
-  useMargin,
-  usePadding,
-  useProps,
-  useRounded,
-  useStyle,
-  useTypography
-} from "../../composables";
-import { vContrast } from "../../directives";
-const _props = defineProps({
+import { useBorder } from "../../composables/Commons/border.composable";
+import { useBothColor } from "../../composables/Commons/bothColor.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 { NAME_ATTR_TAGS } from "../../consts/Commons/commons.const";
+import vContrast from "../../directives/Contrast/contrast.directive";
+const props = defineProps({
   text: { type: String, required: false },
   floating: { type: Boolean, required: false },
   required: { type: Boolean, required: false },
@@ -71,18 +69,17 @@ const _props = defineProps({
   color: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   tag: { type: String, required: false, default: "label" },
-  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 props = useDefaults(_props);
 const emits = defineEmits(["click"]);
 defineSlots();
 const handleClick = (e) => {
   emits("click", e);
 };
+const resolvedName = computed(() => NAME_ATTR_TAGS.has(String(props.tag)) ? props.name : void 0);
 const { roundedClasses, roundedStyles } = useRounded(props);
 const { borderClasses, borderStyles } = useBorder(props);
 const { paddingClasses, paddingStyles } = usePadding(props);
@@ -115,7 +112,7 @@ const labelClasses = computed(() => {
   ];
 });
 const { filterProps } = useProps(props);
-const { id, css, load, isLoaded, unload } = useStyle(labelStyles);
+const { id, css, load, isLoaded, unload } = useStyle(labelStyles, () => props.id);
 defineExpose({
   filterProps,
   css,

package/dist/src/components/Layout/OrigamLayout.vue

@@ -16,18 +16,16 @@
 
 <script lang="ts" setup>
 import { computed, StyleValue, toRef } from "vue";
-import {
-  useBorder,
-  useBothColor,
-  useCreateLayout,
-  useDimension,
-  useElevation,
-  useMargin,
-  usePadding,
-  useProps,
-  useRounded,
-  useStyle
-} from "../../composables";
+import { useBorder } from "../../composables/Commons/border.composable";
+import { useBothColor } from "../../composables/Commons/bothColor.composable";
+import { useCreateLayout } from "../../composables/Commons/createLayout.composable";
+import { useDimension } from "../../composables/Commons/dimension.composable";
+import { useElevation } from "../../composables/Commons/elevation.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";
 const props = defineProps({
   overlaps: { type: Array, required: false },
   fullHeight: { type: Boolean, required: false },
@@ -77,6 +75,7 @@ const props = defineProps({
   borderLeftColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true }
 });
 const { filterProps } = useProps(props);
+defineEmits([]);
 defineSlots();
 const { layoutClasses, layoutStyles, layoutRef: origamLayoutRef, getLayoutItem, items, layoutId } = useCreateLayout(props);
 const { colorClasses, colorStyles } = useBothColor(toRef(props, "bgColor"), toRef(props, "color"));
@@ -147,8 +146,8 @@ defineExpose({
 			// overflowed any story / consumer container with a fixed
 			// height ("le drawer dépasse de son layout").
 			height: 100%;
-			max-height: 100%;
-			max-width: 100%;
+			max-height: var(--origam-layout__wrapper---max-height, 100%);
+			max-width: var(--origam-layout__wrapper---max-width, 100%);
 		}
 
 		&--full-height &__wrapper {

package/dist/src/components/Lazy/OrigamLazy.vue

@@ -1,6 +1,7 @@
 <template>
 	<component
 			:is="tag"
+			:id="id"
 			v-intersect="intersect"
 			:aria-busy="!isActive || undefined"
 			:class="lazyClasses"
@@ -19,14 +20,13 @@
 
 <script lang="ts" setup>
 import { computed, StyleValue } from "vue";
-import { OrigamFade, OrigamTransition } from "../../components";
-import {
-  useDimension,
-  useProps,
-  useStyle,
-  useVModel
-} from "../../composables";
-import { vIntersect } from "../../directives";
+import OrigamFade from "../Transition/OrigamFade.vue";
+import OrigamTransition from "../Transition/OrigamTransition.vue";
+import { useDimension } from "../../composables/Commons/dimension.composable";
+import { useProps } from "../../composables/Commons/props.composable";
+import { useStyle } from "../../composables/Commons/style.composable";
+import { useVModel } from "../../composables/Commons/vModel.composable";
+import vIntersect from "../../directives/Intersect/intersect.directive";
 const props = defineProps({
   modelValue: { type: Boolean, required: false },
   options: { type: null, required: false, default: () => ({
@@ -44,8 +44,7 @@ const props = defineProps({
   minWidth: { type: [Number, String], required: false },
   width: { type: [Number, String], required: false },
   tag: { type: String, required: false, default: "div" },
-  transition: { type: [Boolean, String, Object], required: false, default: () => ({ component: OrigamFade }) },
-  disabled: { type: Boolean, required: false }
+  transition: { type: [Boolean, String, Object], required: false, default: () => ({ component: OrigamFade }) }
 });
 defineEmits(["update:modelValue"]);
 defineSlots();
@@ -75,7 +74,7 @@ const lazyClasses = computed(() => {
     props.class
   ];
 });
-const { id, css, load, isLoaded, unload } = useStyle(lazyStyles);
+const { id, css, load, isLoaded, unload } = useStyle(lazyStyles, () => props.id);
 defineExpose({
   filterProps,
   css,