origam 2.24.0 → 2.26.0

package/dist/src/assets/css/tokens/dark.css

@@ -331,8 +331,6 @@
   --origam-btn---overlay-opacity-hover: var(--origam-opacity---12);
   --origam-btn---overlay-opacity-active: 0.2;
   --origam-btn---overlay-opacity-active-hover: 0.28;
-  --origam-btn--loader-skeleton---min-width: 96px;
-  --origam-btn--loader-skeleton---min-height: 36px;
   --origam-btn__progress---linear-height: 3px;
   --origam-btn__progress---linear-position: 0px;
   --origam-btn__progress---linear-position-top: auto;
@@ -429,7 +427,7 @@
   --origam-card--loading---min-height: 120px;
   --origam-card__asset---aspect-ratio: 16 / 9;
   --origam-card__loader---min-height: 4px;
-  --origam-card__loader---min-height-skeleton: 200px;
+  --origam-card__skeleton---padding: var(--origam-space---4);
   --origam-card__loader---z-index: 3;
   --origam-card__progress---linear-height: 4px;
   --origam-card__progress---circular-margin: 24px auto;
@@ -1818,7 +1816,6 @@
   --origam-data-table-rows--no-data---text-align: center;
   --origam-data-table-rows--no-data---color: var(--origam-color__text---secondary);
   --origam-data-table-rows--loading---color: var(--origam-color__text---secondary);
-  --origam-data-table-rows--skeleton---cell-padding: 4px 8px;
   --origam-data-table-header-cell--sortable---cursor: pointer;
   --origam-data-table__sortable---icon-color: var(--origam-color__text---primary);
   --origam-data-table__sortable---icon-color-active: var(--origam-color__text---primary);
@@ -2303,10 +2300,6 @@
   --origam-switch__thumb---border-color: rgba(0, 0, 0, 0.18);
   --origam-switch__thumb---color: currentColor;
   --origam-switch__selection-control---min-height: 56px;
-  --origam-switch__skeleton---width: 52px;
-  --origam-switch__skeleton---height: 32px;
-  --origam-switch__skeleton-track---background-color: color-mix(in srgb, currentColor 14%, transparent);
-  --origam-switch__skeleton-thumb---background-color: color-mix(in srgb, currentColor 28%, transparent);
   --origam-switch__track--inset---height: 32px;
   --origam-switch__track--inset---width: 52px;
   --origam-switch---opacity-disabled: var(--origam-opacity---32);
@@ -3351,8 +3344,6 @@
     --origam-btn---overlay-opacity-hover: var(--origam-opacity---12);
     --origam-btn---overlay-opacity-active: 0.2;
     --origam-btn---overlay-opacity-active-hover: 0.28;
-    --origam-btn--loader-skeleton---min-width: 96px;
-    --origam-btn--loader-skeleton---min-height: 36px;
     --origam-btn__progress---linear-height: 3px;
     --origam-btn__progress---linear-position: 0px;
     --origam-btn__progress---linear-position-top: auto;
@@ -3449,7 +3440,7 @@
     --origam-card--loading---min-height: 120px;
     --origam-card__asset---aspect-ratio: 16 / 9;
     --origam-card__loader---min-height: 4px;
-    --origam-card__loader---min-height-skeleton: 200px;
+    --origam-card__skeleton---padding: var(--origam-space---4);
     --origam-card__loader---z-index: 3;
     --origam-card__progress---linear-height: 4px;
     --origam-card__progress---circular-margin: 24px auto;
@@ -4838,7 +4829,6 @@
     --origam-data-table-rows--no-data---text-align: center;
     --origam-data-table-rows--no-data---color: var(--origam-color__text---secondary);
     --origam-data-table-rows--loading---color: var(--origam-color__text---secondary);
-    --origam-data-table-rows--skeleton---cell-padding: 4px 8px;
     --origam-data-table-header-cell--sortable---cursor: pointer;
     --origam-data-table__sortable---icon-color: var(--origam-color__text---primary);
     --origam-data-table__sortable---icon-color-active: var(--origam-color__text---primary);
@@ -5322,10 +5312,6 @@
     --origam-switch__thumb---border-color: rgba(0, 0, 0, 0.18);
     --origam-switch__thumb---color: currentColor;
     --origam-switch__selection-control---min-height: 56px;
-    --origam-switch__skeleton---width: 52px;
-    --origam-switch__skeleton---height: 32px;
-    --origam-switch__skeleton-track---background-color: color-mix(in srgb, currentColor 14%, transparent);
-    --origam-switch__skeleton-thumb---background-color: color-mix(in srgb, currentColor 28%, transparent);
     --origam-switch__track--inset---height: 32px;
     --origam-switch__track--inset---width: 52px;
     --origam-switch---opacity-disabled: var(--origam-opacity---32);

package/dist/src/assets/css/tokens/light.css

@@ -231,8 +231,6 @@
   --origam-btn---overlay-opacity-hover: var(--origam-opacity---12);
   --origam-btn---overlay-opacity-active: 0.2;
   --origam-btn---overlay-opacity-active-hover: 0.28;
-  --origam-btn--loader-skeleton---min-width: 96px;
-  --origam-btn--loader-skeleton---min-height: 36px;
   --origam-btn__progress---linear-height: 3px;
   --origam-btn__progress---linear-position: 0px;
   --origam-btn__progress---linear-position-top: auto;
@@ -329,7 +327,7 @@
   --origam-card--loading---min-height: 120px;
   --origam-card__asset---aspect-ratio: 16 / 9;
   --origam-card__loader---min-height: 4px;
-  --origam-card__loader---min-height-skeleton: 200px;
+  --origam-card__skeleton---padding: var(--origam-space---4);
   --origam-card__loader---z-index: 3;
   --origam-card__progress---linear-height: 4px;
   --origam-card__progress---circular-margin: 24px auto;
@@ -1720,7 +1718,6 @@
   --origam-data-table-rows--no-data---text-align: center;
   --origam-data-table-rows--no-data---color: var(--origam-color__text---secondary);
   --origam-data-table-rows--loading---color: var(--origam-color__text---secondary);
-  --origam-data-table-rows--skeleton---cell-padding: 4px 8px;
   --origam-data-table-header-cell--sortable---cursor: pointer;
   --origam-data-table__sortable---icon-color: var(--origam-color__text---primary);
   --origam-data-table__sortable---icon-color-active: var(--origam-color__text---primary);
@@ -2217,10 +2214,6 @@
   --origam-switch__thumb---border-color: rgba(0, 0, 0, 0.18);
   --origam-switch__thumb---color: currentColor;
   --origam-switch__selection-control---min-height: 56px;
-  --origam-switch__skeleton---width: 52px;
-  --origam-switch__skeleton---height: 32px;
-  --origam-switch__skeleton-track---background-color: color-mix(in srgb, currentColor 14%, transparent);
-  --origam-switch__skeleton-thumb---background-color: color-mix(in srgb, currentColor 28%, transparent);
   --origam-switch__track--inset---height: 32px;
   --origam-switch__track--inset---width: 52px;
   --origam-switch---opacity-disabled: var(--origam-opacity---32);

package/dist/src/assets/scss/tokens/_dark.scss

@@ -331,8 +331,6 @@
   --origam-btn---overlay-opacity-hover: var(--origam-opacity---12);
   --origam-btn---overlay-opacity-active: 0.2;
   --origam-btn---overlay-opacity-active-hover: 0.28;
-  --origam-btn--loader-skeleton---min-width: 96px;
-  --origam-btn--loader-skeleton---min-height: 36px;
   --origam-btn__progress---linear-height: 3px;
   --origam-btn__progress---linear-position: 0px;
   --origam-btn__progress---linear-position-top: auto;
@@ -429,7 +427,7 @@
   --origam-card--loading---min-height: 120px;
   --origam-card__asset---aspect-ratio: 16 / 9;
   --origam-card__loader---min-height: 4px;
-  --origam-card__loader---min-height-skeleton: 200px;
+  --origam-card__skeleton---padding: var(--origam-space---4);
   --origam-card__loader---z-index: 3;
   --origam-card__progress---linear-height: 4px;
   --origam-card__progress---circular-margin: 24px auto;
@@ -1818,7 +1816,6 @@
   --origam-data-table-rows--no-data---text-align: center;
   --origam-data-table-rows--no-data---color: var(--origam-color__text---secondary);
   --origam-data-table-rows--loading---color: var(--origam-color__text---secondary);
-  --origam-data-table-rows--skeleton---cell-padding: 4px 8px;
   --origam-data-table-header-cell--sortable---cursor: pointer;
   --origam-data-table__sortable---icon-color: var(--origam-color__text---primary);
   --origam-data-table__sortable---icon-color-active: var(--origam-color__text---primary);
@@ -2303,10 +2300,6 @@
   --origam-switch__thumb---border-color: rgba(0, 0, 0, 0.18);
   --origam-switch__thumb---color: currentColor;
   --origam-switch__selection-control---min-height: 56px;
-  --origam-switch__skeleton---width: 52px;
-  --origam-switch__skeleton---height: 32px;
-  --origam-switch__skeleton-track---background-color: color-mix(in srgb, currentColor 14%, transparent);
-  --origam-switch__skeleton-thumb---background-color: color-mix(in srgb, currentColor 28%, transparent);
   --origam-switch__track--inset---height: 32px;
   --origam-switch__track--inset---width: 52px;
   --origam-switch---opacity-disabled: var(--origam-opacity---32);
@@ -3351,8 +3344,6 @@
     --origam-btn---overlay-opacity-hover: var(--origam-opacity---12);
     --origam-btn---overlay-opacity-active: 0.2;
     --origam-btn---overlay-opacity-active-hover: 0.28;
-    --origam-btn--loader-skeleton---min-width: 96px;
-    --origam-btn--loader-skeleton---min-height: 36px;
     --origam-btn__progress---linear-height: 3px;
     --origam-btn__progress---linear-position: 0px;
     --origam-btn__progress---linear-position-top: auto;
@@ -3449,7 +3440,7 @@
     --origam-card--loading---min-height: 120px;
     --origam-card__asset---aspect-ratio: 16 / 9;
     --origam-card__loader---min-height: 4px;
-    --origam-card__loader---min-height-skeleton: 200px;
+    --origam-card__skeleton---padding: var(--origam-space---4);
     --origam-card__loader---z-index: 3;
     --origam-card__progress---linear-height: 4px;
     --origam-card__progress---circular-margin: 24px auto;
@@ -4838,7 +4829,6 @@
     --origam-data-table-rows--no-data---text-align: center;
     --origam-data-table-rows--no-data---color: var(--origam-color__text---secondary);
     --origam-data-table-rows--loading---color: var(--origam-color__text---secondary);
-    --origam-data-table-rows--skeleton---cell-padding: 4px 8px;
     --origam-data-table-header-cell--sortable---cursor: pointer;
     --origam-data-table__sortable---icon-color: var(--origam-color__text---primary);
     --origam-data-table__sortable---icon-color-active: var(--origam-color__text---primary);
@@ -5322,10 +5312,6 @@
     --origam-switch__thumb---border-color: rgba(0, 0, 0, 0.18);
     --origam-switch__thumb---color: currentColor;
     --origam-switch__selection-control---min-height: 56px;
-    --origam-switch__skeleton---width: 52px;
-    --origam-switch__skeleton---height: 32px;
-    --origam-switch__skeleton-track---background-color: color-mix(in srgb, currentColor 14%, transparent);
-    --origam-switch__skeleton-thumb---background-color: color-mix(in srgb, currentColor 28%, transparent);
     --origam-switch__track--inset---height: 32px;
     --origam-switch__track--inset---width: 52px;
     --origam-switch---opacity-disabled: var(--origam-opacity---32);

package/dist/src/assets/scss/tokens/_light.scss

@@ -231,8 +231,6 @@
   --origam-btn---overlay-opacity-hover: var(--origam-opacity---12);
   --origam-btn---overlay-opacity-active: 0.2;
   --origam-btn---overlay-opacity-active-hover: 0.28;
-  --origam-btn--loader-skeleton---min-width: 96px;
-  --origam-btn--loader-skeleton---min-height: 36px;
   --origam-btn__progress---linear-height: 3px;
   --origam-btn__progress---linear-position: 0px;
   --origam-btn__progress---linear-position-top: auto;
@@ -329,7 +327,7 @@
   --origam-card--loading---min-height: 120px;
   --origam-card__asset---aspect-ratio: 16 / 9;
   --origam-card__loader---min-height: 4px;
-  --origam-card__loader---min-height-skeleton: 200px;
+  --origam-card__skeleton---padding: var(--origam-space---4);
   --origam-card__loader---z-index: 3;
   --origam-card__progress---linear-height: 4px;
   --origam-card__progress---circular-margin: 24px auto;
@@ -1720,7 +1718,6 @@
   --origam-data-table-rows--no-data---text-align: center;
   --origam-data-table-rows--no-data---color: var(--origam-color__text---secondary);
   --origam-data-table-rows--loading---color: var(--origam-color__text---secondary);
-  --origam-data-table-rows--skeleton---cell-padding: 4px 8px;
   --origam-data-table-header-cell--sortable---cursor: pointer;
   --origam-data-table__sortable---icon-color: var(--origam-color__text---primary);
   --origam-data-table__sortable---icon-color-active: var(--origam-color__text---primary);
@@ -2217,10 +2214,6 @@
   --origam-switch__thumb---border-color: rgba(0, 0, 0, 0.18);
   --origam-switch__thumb---color: currentColor;
   --origam-switch__selection-control---min-height: 56px;
-  --origam-switch__skeleton---width: 52px;
-  --origam-switch__skeleton---height: 32px;
-  --origam-switch__skeleton-track---background-color: color-mix(in srgb, currentColor 14%, transparent);
-  --origam-switch__skeleton-thumb---background-color: color-mix(in srgb, currentColor 28%, transparent);
   --origam-switch__track--inset---height: 32px;
   --origam-switch__track--inset---width: 52px;
   --origam-switch---opacity-disabled: var(--origam-opacity---32);

package/dist/src/components/Btn/OrigamBtn.vue

@@ -12,6 +12,7 @@
 			:href="hrefAttr"
 			:type="typeAttr"
 			:value="valueAttr"
+			@click.capture="handleClickCapture"
 			@click="handleClick"
 			@mouseenter="handleMouseenter"
 			@mouseleave="handleMouseleave"
@@ -25,99 +26,84 @@
 				class="origam-btn__underlay"
 		/>
 
-		<origam-progress
+		<slot
 				v-if="isOverlayLoading"
-				ref="origamProgressRef"
-				class="origam-btn__progress"
+				name="loader"
 				v-bind="progressProps"
-				:thickness="loaderConfig.kind === 'line' ? 3 : undefined"
-				:color="color"
-				:active="true"
-		/>
+		>
+			<origam-progress
+					ref="origamProgressRef"
+					class="origam-btn__progress"
+					v-bind="progressProps"
+					tag="span"
+					aria-hidden="true"
+					:thickness="loaderKind === 'line' ? 3 : undefined"
+					:color="color"
+					:active="true"
+			/>
+		</slot>
 
 		<slot name="wrapper">
-			<origam-loader
-					:loading="isSkeletonLoading"
-					class="origam-btn__loader"
-			>
-				<template
-						v-if="hasLoader && isSkeletonLoading"
-						#loader
+			<span class="origam-btn__loader">
+				<span
+						v-if="hasPrepend"
+						key="prepend"
+						class="origam-btn__prepend"
+				>
+					<slot name="prepend">
+						<origam-avatar
+								v-if="prependAvatar"
+								key="prepend-avatar"
+								:density="density"
+								:image="prependAvatar"
+						/>
+						<origam-icon
+								v-if="prependIcon"
+								key="prepend-icon"
+								:density="density"
+								:icon="prependIcon"
+						/>
+					</slot>
+				</span>
+
+				<span
+						class="origam-btn__content"
+						data-no-activator=""
+				>
+					<slot name="default">
+						<template v-if="hasIcon">
+							<origam-icon
+									key="content-icon"
+									:icon="icon"
+							/>
+						</template>
+						<template v-else>
+							{{ text }}
+						</template>
+					</slot>
+				</span>
+
+				<span
+						v-if="hasAppend"
+						key="append"
+						class="origam-btn__append"
 				>
-					<slot
-							name="loader"
-							v-bind="progressProps"
-					>
-						<origam-skeleton
-								variant="rectangular"
-								:width="'100%'"
-								:height="'100%'"
-								v-bind="loaderConfig.overrides"
+					<slot name="append">
+						<origam-avatar
+								v-if="appendAvatar"
+								key="append-avatar"
+								:density="density"
+								:image="appendAvatar"
+						/>
+						<origam-icon
+								v-if="appendIcon"
+								key="append-icon"
+								:density="density"
+								:icon="appendIcon"
 						/>
 					</slot>
-				</template>
-
-				<template #default>
-          <span
-		          v-if="hasPrepend"
-		          key="prepend"
-		          class="origam-btn__prepend"
-          >
-            <slot name="prepend">
-              <origam-avatar
-		              v-if="prependAvatar"
-		              key="prepend-avatar"
-		              :density="density"
-		              :image="prependAvatar"
-              />
-              <origam-icon
-		              v-if="prependIcon"
-		              key="prepend-icon"
-		              :density="density"
-		              :icon="prependIcon"
-              />
-            </slot>
-          </span>
-
-					<span
-							class="origam-btn__content"
-							data-no-activator=""
-					>
-            <slot name="default">
-              <template v-if="hasIcon">
-                <origam-icon
-		                key="content-icon"
-		                :icon="icon"
-                />
-              </template>
-              <template v-else>
-                {{ text }}
-              </template>
-            </slot>
-          </span>
-
-					<span
-							v-if="hasAppend"
-							key="append"
-							class="origam-btn__append"
-					>
-            <slot name="append">
-             <origam-avatar
-		             v-if="appendAvatar"
-		             key="append-avatar"
-		             :density="density"
-		             :image="appendAvatar"
-             />
-             <origam-icon
-		             v-if="appendIcon"
-		             key="append-icon"
-		             :density="density"
-		             :icon="appendIcon"
-             />
-           </slot>
-          </span>
-				</template>
-			</origam-loader>
+				</span>
+			</span>
 		</slot>
 	</component>
 </template>
@@ -126,9 +112,7 @@
 import { computed, ref, StyleValue, toRef, useAttrs, useSlots, watchEffect } from "vue";
 import OrigamAvatar from "../Avatar/OrigamAvatar.vue";
 import OrigamIcon from "../Icon/OrigamIcon.vue";
-import OrigamLoader from "../Loader/OrigamLoader.vue";
 import OrigamProgress from "../Progress/OrigamProgress.vue";
-import OrigamSkeleton from "../Skeleton/OrigamSkeleton.vue";
 import { useAdjacent } from "../../composables/Commons/adjacent.composable";
 import { useDensity } from "../../composables/Commons/density.composable";
 import { useDimension } from "../../composables/Commons/dimension.composable";
@@ -290,7 +274,7 @@ const isActive = computed(() => {
 });
 const isDisabled = computed(() => group?.disabled.value || props.disabled);
 const isAnchor = computed(() => link.tag.value === "a");
-const ariaDisabled = computed(() => isAnchor.value && isDisabled.value ? "true" : void 0);
+const ariaDisabled = computed(() => isAnchor.value && isDisabled.value || isLoading.value ? "true" : void 0);
 const hrefAttr = computed(() => isAnchor.value && isDisabled.value ? void 0 : link.href.value);
 const typeAttr = computed(() => isAnchor.value ? void 0 : "button");
 const valueAttr = computed(() => {
@@ -306,7 +290,7 @@ const isRipple = computed(() => {
 });
 const { densityClasses } = useDensity(props);
 const { dimensionStyles } = useDimension(props);
-const { loaderClasses, loaderConfig } = useLoader(props, LOADER_KIND.CIRCULAR);
+const { loaderClasses, isLoading, loaderConfig } = useLoader(props, LOADER_KIND.CIRCULAR);
 const { locationStyles } = useLocation(props);
 const { positionClasses } = usePosition(props);
 const { sizeClasses, sizeStyles } = useSize(props);
@@ -331,6 +315,11 @@ const {
   hasAppend,
   hasPrepend
 } = useAdjacent(props, prependIcon, appendIcon);
+const handleClickCapture = (e) => {
+  if (!isLoading.value) return;
+  e.preventDefault();
+  e.stopImmediatePropagation();
+};
 const handleClick = (e) => {
   if (isDisabled.value || link.isLink.value && (e.metaKey || e.ctrlKey || e.shiftKey || e.button !== 0 || attrs.target === "_blank")) return;
   link.navigate?.(e);
@@ -339,9 +328,6 @@ const handleClick = (e) => {
 const hasIcon = computed(() => {
   return !!(icon.value && props.icon !== true);
 });
-const hasLoader = computed(() => {
-  return slots.loader || loaderConfig.value.isActive;
-});
 const isUnnamedIconOnly = computed(() => {
   if (!hasIcon.value) return false;
   if (slots.default || props.text) return false;
@@ -357,13 +343,9 @@ if (import.meta.env?.DEV) {
     }
   });
 }
-const isSkeletonLoading = computed(() => {
-  return loaderConfig.value.isActive && loaderConfig.value.kind === "skeleton";
-});
-const isOverlayLoading = computed(() => {
-  return loaderConfig.value.isActive && (loaderConfig.value.kind === "line" || loaderConfig.value.kind === "circular");
-});
-const ariaBusy = computed(() => loaderConfig.value.isActive ? "true" : void 0);
+const isOverlayLoading = computed(() => loaderConfig.value.isActive);
+const loaderKind = computed(() => loaderConfig.value.kind === "line" ? "line" : "circular");
+const ariaBusy = computed(() => isLoading.value ? "true" : void 0);
 const progressProps = computed(() => {
   const cfg = loaderConfig.value;
   return Object.assign(
@@ -371,7 +353,7 @@ const progressProps = computed(() => {
       size: "23",
       indeterminate: cfg.indeterminate,
       modelValue: cfg.modelValue,
-      type: cfg.kind === "line" ? PROGRESS_TYPE.LINEAR : PROGRESS_TYPE.CIRCULAR
+      type: loaderKind.value === "line" ? PROGRESS_TYPE.LINEAR : PROGRESS_TYPE.CIRCULAR
     },
     origamProgressRef.value?.filterProps(props, ["class", "style", "id", "tag", "size", "type"]) ?? {},
     cfg.overrides
@@ -405,14 +387,14 @@ const btnClasses = computed(() => {
       // so consumers can pick either spelling.
       "origam-btn--flat": props.flat,
       "origam-btn--icon": !!props.icon,
-      "origam-btn--loading": loaderConfig.value.isActive,
+      // `origam-btn--loading` comes from `loaderClasses` below: one
+      // source, emitted once.
       // Loader-kind discriminator so SCSS can branch per kind:
-      //   • `--loader-line`     → linear progress strip overlay,
+      //   - `--loader-line`     -> linear progress strip overlay,
       //      keeps the label visible (like OrigamCard's loader).
-      //   • `--loader-circular` → centred spinner; label hidden.
-      //   • `--loader-skeleton` → full-box shimmer; label hidden,
-      //      btn keeps a min-width so it doesn't collapse.
-      [`origam-btn--loader-${loaderConfig.value.kind}`]: loaderConfig.value.isActive,
+      //   - `--loader-circular` -> centred spinner over the label,
+      //      which stays in the DOM (width and name preserved).
+      [`origam-btn--loader-${loaderKind.value}`]: isLoading.value,
       "origam-btn--slim": props.slim,
       "origam-btn--stacked": props.stacked
     },
@@ -995,23 +977,6 @@ defineExpose({
 			}
 		}
 
-		// Skeleton — rectangular placeholder REPLACES the btn content
-		// entirely (OrigamLoader's #loader branch). The btn collapses to
-		// the skeleton's natural size unless we give it a sensible
-		// min-width / min-height.
-		&--loader-skeleton {
-			min-width: var(--origam-btn--loader-skeleton---min-width, 96px);
-			min-height: var(--origam-btn--loader-skeleton---min-height, 36px);
-
-			:deep(.origam-skeleton--rectangular) {
-				position: absolute;
-				inset: 0;
-				width: 100%;
-				height: 100%;
-				border-radius: inherit;
-			}
-		}
-
 		&--stacked {
 			#{$this}__loader {
 				grid-template-areas: "prepend" "content" "append";

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

@@ -28,16 +28,55 @@
 		<slot name="wrapper">
 			<template v-if="hasLoading">
 				<slot name="loader">
-					<div class="origam-card__loader">
+					<origam-skeleton-group
+							v-if="isSkeleton"
+							class="origam-card__skeleton"
+							v-bind="skeletonOverrides.group"
+					>
 						<origam-skeleton
-								v-if="loaderConfig.kind === 'skeleton'"
-								variant="card"
-								:loading="true"
-								:label="loadingText"
-								v-bind="loaderConfig.overrides"
+								v-if="hasAsset"
+								variant="rectangular"
+								class="origam-card__skeleton-media"
+								v-bind="skeletonOverrides.block"
+						/>
+						<origam-skeleton
+								variant="text"
+								class="origam-card__skeleton-title"
+								v-bind="skeletonOverrides.block"
+						/>
+						<origam-skeleton
+								variant="text"
+								class="origam-card__skeleton-subtitle"
+								v-bind="skeletonOverrides.block"
 						/>
+						<origam-skeleton
+								variant="text"
+								class="origam-card__skeleton-line"
+								v-bind="skeletonOverrides.block"
+						/>
+						<origam-skeleton
+								variant="text"
+								class="origam-card__skeleton-line origam-card__skeleton-line--last"
+								v-bind="skeletonOverrides.block"
+						/>
+						<template v-if="hasFooter">
+							<origam-skeleton
+									variant="pill"
+									class="origam-card__skeleton-action"
+									v-bind="skeletonOverrides.block"
+							/>
+							<origam-skeleton
+									variant="pill"
+									class="origam-card__skeleton-action"
+									v-bind="skeletonOverrides.block"
+							/>
+						</template>
+					</origam-skeleton-group>
+					<div
+							v-else
+							class="origam-card__loader"
+					>
 						<origam-progress
-								v-else
 								:active="true"
 								:color="color"
 								:indeterminate="loaderConfig.indeterminate"
@@ -154,6 +193,7 @@ import OrigamCardText from "./OrigamCardText.vue";
 import OrigamImg from "../Img/OrigamImg.vue";
 import OrigamProgress from "../Progress/OrigamProgress.vue";
 import OrigamSkeleton from "../Skeleton/OrigamSkeleton.vue";
+import OrigamSkeletonGroup from "../Skeleton/OrigamSkeletonGroup.vue";
 import { useAdjacent } from "../../composables/Commons/adjacent.composable";
 import { useDensity } from "../../composables/Commons/density.composable";
 import { useDimension } from "../../composables/Commons/dimension.composable";
@@ -171,6 +211,7 @@ import { DENSITY } from "../../enums/Commons/density.enum";
 import { KEYBOARD_VALUES } from "../../enums/Commons/hotkey.enum";
 import { LOADER_KIND } from "../../enums/Commons/loader.enum";
 import { PROGRESS_TYPE } from "../../enums/Progress/progress.enum";
+import { splitSkeletonOverrides } from "../../utils/Skeleton/skeleton.util";
 import { computed, ref, StyleValue, toRef, useAttrs, useSlots } from "vue";
 const props = defineProps({
   disabled: { type: Boolean, required: false },
@@ -338,6 +379,8 @@ const handleKeydown = (event) => {
 };
 const { loaderClasses, loaderConfig } = useLoader(props, LOADER_KIND.LINE);
 const slots = useSlots();
+const isSkeleton = computed(() => loaderConfig.value.isActive && loaderConfig.value.kind === LOADER_KIND.SKELETON);
+const skeletonOverrides = computed(() => splitSkeletonOverrides(loaderConfig.value.overrides, props.loadingText));
 const hasLoading = computed(() => {
   return slots.loader || loaderConfig.value.isActive;
 });
@@ -567,15 +610,39 @@ defineExpose({
 			:deep(.origam-progress--circular) {
 				margin: var(--origam-card__progress---circular-margin, 24px auto);
 			}
+		}
 
-			:deep(.origam-skeleton-wrapper--card),
-			:deep(.origam-skeleton--rectangular),
-			:deep(.origam-skeleton--text) {
-				width: 100%;
+		// The silhouette is a grid of light primitives (no wrapper): two
+		// columns so the two actions sit side by side, every other part spans
+		// both. `>` keeps the selectors above the primitives' own scoped
+		// rules, whatever the order the sheets load in.
+		&__skeleton {
+			grid-template-columns: auto 1fr;
+			padding: var(--origam-card__skeleton---padding);
+
+			> * {
+				grid-column: 1 / -1;
+			}
+
+			> .origam-card__skeleton-media {
+				height: auto;
+				aspect-ratio: var(--origam-card__asset---aspect-ratio, 16 / 9);
+			}
+
+			> .origam-card__skeleton-title {
+				width: 62%;
+			}
+
+			> .origam-card__skeleton-subtitle {
+				width: 38%;
+			}
+
+			> .origam-card__skeleton-line--last {
+				width: 84%;
 			}
 
-			:deep(.origam-skeleton-wrapper--card) {
-				min-height: var(--origam-card__loader---min-height-skeleton, 200px);
+			> .origam-card__skeleton-action {
+				grid-column: auto;
 			}
 		}