origam 2.25.0 → 2.26.0

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

@@ -427,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;
@@ -1816,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);
@@ -3441,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;
@@ -4830,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);

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

@@ -327,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;
@@ -1718,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);

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

@@ -427,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;
@@ -1816,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);
@@ -3441,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;
@@ -4830,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);

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

@@ -327,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;
@@ -1718,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);

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;
 			}
 		}
 

package/dist/src/components/DataTable/OrigamDataTable.vue

@@ -6,11 +6,17 @@
 			:style="dataTableStyles"
 			v-bind="tableProps"
 			:aria-rowcount="itemsLength"
+			:aria-busy="isSkeletonLoading || undefined"
 	>
 		<template
-				v-if="slots.top"
+				v-if="slots.top || isSkeletonLoading"
 				#top
 		>
+			<span
+					v-if="isSkeletonLoading"
+					class="origam-data-table__announcement"
+					role="status"
+			>{{ skeletonAnnouncement }}</span>
 			<slot name="top"/>
 		</template>
 
@@ -144,6 +150,7 @@ import { provideExpanded } from "../../composables/DataTable/expand.composable";
 import { provideSelection } from "../../composables/DataTable/select.composable";
 import { useDataTableItems } from "../../composables/DataTable/items.composable";
 import { useFilter } from "../../composables/Commons/filters.composable";
+import { useLocale } from "../../composables/Commons/locale.composable";
 import { useGroupedItems } from "../../composables/DataTable/groupedItems.composable";
 import { useOptions } from "../../composables/DataTable/options.composable";
 import { usePaginatedItems } from "../../composables/DataTable/paginatedItems.composable";
@@ -155,7 +162,9 @@ import {
   pickDataTableHeaderColumnSlotNames,
   pickDataTableRowsSlotNames
 } from "../../utils/DataTable/slot-name.util";
+import { splitSkeletonOverrides } from "../../utils/Skeleton/skeleton.util";
 import { DENSITY } from "../../enums/Commons/density.enum";
+import { LOADER_KIND } from "../../enums/Commons/loader.enum";
 import { MDI_ICONS } from "../../enums/Commons/mdi.enum";
 import { computed, provide, Ref, ref, StyleValue, toRef, useAttrs, useSlots } from "vue";
 const props = defineProps({
@@ -388,6 +397,16 @@ const slotProps = computed(() => {
 const dataTableHeadersProps = computed(() => {
   return origamDataTableHeadersRef.value?.filterProps(props);
 });
+const { t } = useLocale();
+const skeletonConfig = computed(() => {
+  const loading = props.loading;
+  return typeof loading === "object" && loading !== null && loading.type === LOADER_KIND.SKELETON ? loading : null;
+});
+const isSkeletonLoading = computed(() => skeletonConfig.value !== null);
+const skeletonAnnouncement = computed(() => {
+  const { group } = splitSkeletonOverrides(skeletonConfig.value, props.loadingText ?? "origam.data_iterator.loading_text");
+  return t(group.label ?? "");
+});
 const dataTableRowsProps = computed(() => {
   return origamDataTableRowsRef.value?.filterProps(props, ["class", "style", "id", "items"]);
 });
@@ -430,6 +449,12 @@ defineExpose({
 </script>
 
 <style lang="scss" scoped>
+	@use '../../assets/scss/helpers' as ds;
+
+	.origam-data-table__announcement {
+		@include ds.ds-visually-hidden;
+	}
+
 	.origam-data-table {
 		width: var(--origam-data-table---width, 100%);
 		background-color: var(--origam-data-table---background-color, var(--origam-color__surface---default));

package/dist/src/components/DataTable/OrigamDataTableRows.vue

@@ -6,15 +6,13 @@
 					:id="skeletonRowId(rowIndex)"
 					:key="`skeleton-row_${rowIndex}`"
 					class="origam-data-table-rows origam-data-table-rows--skeleton"
-					aria-busy="true"
+					aria-hidden="true"
 			>
 				<td
-						v-for="col in columns"
-						:key="`skeleton-cell_${col.key}`"
-						class="origam-data-table-rows__skeleton-cell"
-				>
-					<origam-skeleton variant="text" :loading="true" />
-				</td>
+						v-for="cell in skeletonCells"
+						:key="cell.key"
+						v-bind="cell.attrs"
+				/>
 			</tr>
 		</template>
 		<template v-else>
@@ -136,7 +134,6 @@
 <script lang="ts" setup>
 import OrigamDataTableGroupHeaderRow from "./OrigamDataTableGroupHeaderRow.vue";
 import OrigamDataTableRow from "./OrigamDataTableRow.vue";
-import OrigamSkeleton from "../Skeleton/OrigamSkeleton.vue";
 import { useExpanded } from "../../composables/DataTable/expand.composable";
 import { useGroupBy } from "../../composables/DataTable/group.composable";
 import { useHeaders } from "../../composables/DataTable/headers.composable";
@@ -148,6 +145,8 @@ import { useSelection } from "../../composables/DataTable/select.composable";
 import { useTextColor } from "../../composables/Commons/textColor.composable";
 import { LOADER_KIND } from "../../enums/Commons/loader.enum";
 import { getPrefixedEventHandlers } from "../../utils/Commons/event.util";
+import { getSkeletonCellShape } from "../../utils/DataTable/skeleton-cell.util";
+import { getSkeletonHostClasses, splitSkeletonOverrides } from "../../utils/Skeleton/skeleton.util";
 import {
   pickDataTableHeaderColumnSlotNames,
   pickDataTableItemColumnSlotNames
@@ -182,6 +181,18 @@ const SKELETON_ROW_COUNT = 5;
 const skeletonRowId = (index) => props.id ? `${props.id}-skeleton-row-${index}` : void 0;
 const itemRowId = (index) => props.id ? `${props.id}-row-${index}` : void 0;
 const { loaderConfig } = useLoader(props, LOADER_KIND.LINE);
+const skeletonOverrides = computed(() => splitSkeletonOverrides(loaderConfig.value.overrides, props.loadingText));
+const skeletonCells = computed(() => columns.value.map((col) => ({
+  key: `skeleton-cell_${col.key}`,
+  attrs: {
+    "aria-hidden": true,
+    class: [
+      "origam-data-table-rows__skeleton-cell",
+      `origam-data-table-rows__skeleton-cell--${getSkeletonCellShape(col)}`,
+      getSkeletonHostClasses(skeletonOverrides.value.group.animation)
+    ]
+  }
+})));
 const { textColorClasses, textColorStyles } = useTextColor(props, "color");
 const { columns } = useHeaders();
 const { expandOnClick, toggleExpand, isExpanded } = useExpanded();
@@ -288,10 +299,45 @@ defineExpose({
 			color: var(--origam-data-table-rows--loading---color, var(--origam-color__text---secondary));
 		}
 
-		&--skeleton {
-			> .origam-data-table-rows__skeleton-cell {
-				padding: var(--origam-data-table-rows--skeleton---cell-padding, 4px 8px);
-			}
+	}
+
+	// A placeholder cell is its own host (`.origam--skeleton`, which paints
+	// `::after` over the whole cell). It has no content, so it gets the
+	// height a real one-line row has, and its `::after` is narrowed to the
+	// bar the column would hold. Several rules compete for the `::after`
+	// box, so they all live under the same selector and the same `inset`.
+	.origam-data-table-rows__skeleton-cell {
+		block-size: calc(2 * var(--origam-table__cell---padding-block, 12px) + 1.5em);
+
+		&::after {
+			inset-block: auto;
+			inset-block-start: 50%;
+			inset-inline: auto;
+			inset-inline-start: var(--origam-table__cell---padding-inline, 16px);
+			block-size: var(--origam-skeleton---text-height);
+			inline-size: 70%;
+			translate: 0 -50%;
+			border-radius: var(--origam-skeleton---border-radius-pill);
+		}
+
+		&--end::after {
+			inset-inline-start: auto;
+			inset-inline-end: var(--origam-table__cell---padding-inline, 16px);
+			inline-size: 40%;
 		}
+
+		&--control::after {
+			block-size: var(--origam-skeleton---circular-size);
+			inline-size: var(--origam-skeleton---circular-size);
+			border-radius: var(--origam-skeleton---border-radius);
+		}
+	}
+
+	tr:nth-child(2n) > .origam-data-table-rows__skeleton-cell--text::after {
+		inline-size: 52%;
+	}
+
+	tr:nth-child(3n) > .origam-data-table-rows__skeleton-cell--text::after {
+		inline-size: 84%;
 	}
 </style>

package/dist/src/components/ExpansionPanel/OrigamExpansionPanel.vue

@@ -13,9 +13,11 @@
 
 		<template v-if="hasLoading">
 			<slot name="loader">
-				<div class="origam-expansion-panel__loader">
+				<div
+						v-if="loaderConfig.kind !== 'skeleton'"
+						class="origam-expansion-panel__loader"
+				>
 					<origam-progress
-							v-if="loaderConfig.kind !== 'skeleton'"
 							:active="true"
 							:indeterminate="loaderConfig.indeterminate"
 							:model-value="loaderConfig.modelValue"

package/dist/src/components/ExpansionPanel/OrigamExpansionPanelContent.vue

@@ -13,9 +13,11 @@
 			<div class="origam-expansion-panel-content__wrapper">
 				<template v-if="loaderConfig.isActive && loaderConfig.kind === 'skeleton'">
 					<slot name="loader">
-						<origam-skeleton variant="text" :loading="true" :label="loadingText" v-bind="loaderConfig.overrides"/>
-						<origam-skeleton variant="text" :loading="true" :label="loadingText" v-bind="loaderConfig.overrides"/>
-						<origam-skeleton variant="text" :loading="true" :label="loadingText" v-bind="loaderConfig.overrides"/>
+						<origam-skeleton-group v-bind="skeletonOverrides.group">
+							<origam-skeleton variant="text" v-bind="skeletonOverrides.block"/>
+							<origam-skeleton variant="text" v-bind="skeletonOverrides.block"/>
+							<origam-skeleton variant="text" class="origam-expansion-panel-content__skeleton-line--last" v-bind="skeletonOverrides.block"/>
+						</origam-skeleton-group>
 					</slot>
 				</template>
 
@@ -57,6 +59,7 @@ import { computed, inject, StyleValue, toRef, watchEffect } from "vue";
 import OrigamExpandY from "../Transition/OrigamExpandY.vue";
 import OrigamProgress from "../Progress/OrigamProgress.vue";
 import OrigamSkeleton from "../Skeleton/OrigamSkeleton.vue";
+import OrigamSkeletonGroup from "../Skeleton/OrigamSkeletonGroup.vue";
 import vContrast from "../../directives/Contrast/contrast.directive";
 import { useBorder } from "../../composables/Commons/border.composable";
 import { useBothColor } from "../../composables/Commons/bothColor.composable";
@@ -69,6 +72,7 @@ import { useProps } from "../../composables/Commons/props.composable";
 import { useRounded } from "../../composables/Commons/rounded.composable";
 import { useStyle } from "../../composables/Commons/style.composable";
 import { LOADER_KIND } from "../../enums/Commons/loader.enum";
+import { splitSkeletonOverrides } from "../../utils/Skeleton/skeleton.util";
 import { PROGRESS_TYPE } from "../../enums/Progress/progress.enum";
 import { ORIGAM_EXPANSION_PANEL_KEY } from "../../consts/ExpansionPanel/expansion-panel.const";
 const props = defineProps({
@@ -153,6 +157,7 @@ const isComponent = computed(() => {
   return typeof props.content !== "string";
 });
 const { loaderClasses, loaderConfig } = useLoader(props, LOADER_KIND.LINE);
+const skeletonOverrides = computed(() => splitSkeletonOverrides(loaderConfig.value.overrides, props.loadingText));
 const { borderClasses, borderStyles } = useBorder(props);
 const { paddingClasses, paddingStyles } = usePadding(props);
 const { marginClasses, marginStyles } = useMargin(props);
@@ -211,5 +216,9 @@ defineExpose({
 			flex: var(--origam-expansion-panel__content---flex, 1 1 auto);
 			max-width: var(--origam-expansion-panel__content---max-width, 100%);
 		}
+
+		&__skeleton-line--last.origam-skeleton {
+			width: 60%;
+		}
 	}
 </style>

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

@@ -69,6 +69,7 @@ import { useRounded } from "../../composables/Commons/rounded.composable";
 import { useSize } from "../../composables/Commons/size.composable";
 import { ORIGAM_SKELETON_GROUP_KEY } from "../../consts/Skeleton/skeleton.const";
 import { SKELETON_ANIMATION, SKELETON_VARIANT } from "../../enums/Skeleton/skeleton.enum";
+import { getSkeletonHostClasses } from "../../utils/Skeleton/skeleton.util";
 import { computed, inject, toRef } from "vue";
 defineOptions({ inheritAttrs: false });
 const props = defineProps({
@@ -120,13 +121,7 @@ const a11yAttrs = computed(() => {
 });
 const isListItem = computed(() => props.variant === SKELETON_VARIANT.LIST_ITEM);
 const isCard = computed(() => props.variant === SKELETON_VARIANT.CARD);
-const animationClasses = computed(() => [
-  "origam--skeleton",
-  {
-    "origam--skeleton-wave": animation.value === SKELETON_ANIMATION.WAVE,
-    "origam--skeleton-none": animation.value === SKELETON_ANIMATION.NONE
-  }
-]);
+const animationClasses = computed(() => getSkeletonHostClasses(animation.value));
 const skeletonCircularClasses = computed(() => [
   "origam-skeleton",
   "origam-skeleton--circular",

package/dist/src/enums/DataTable/data-table.enum.cjs

@@ -3,10 +3,16 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.DATATABLE_SELECT_STRATEGY = void 0;
+exports.DATATABLE_SKELETON_CELL = exports.DATATABLE_SELECT_STRATEGY = void 0;
 var DATATABLE_SELECT_STRATEGY = exports.DATATABLE_SELECT_STRATEGY = /* @__PURE__ */(DATATABLE_SELECT_STRATEGY2 => {
   DATATABLE_SELECT_STRATEGY2["SINGLE"] = "single";
   DATATABLE_SELECT_STRATEGY2["PAGE"] = "page";
   DATATABLE_SELECT_STRATEGY2["ALL"] = "all";
   return DATATABLE_SELECT_STRATEGY2;
-})(DATATABLE_SELECT_STRATEGY || {});
+})(DATATABLE_SELECT_STRATEGY || {});
+var DATATABLE_SKELETON_CELL = exports.DATATABLE_SKELETON_CELL = /* @__PURE__ */(DATATABLE_SKELETON_CELL2 => {
+  DATATABLE_SKELETON_CELL2["TEXT"] = "text";
+  DATATABLE_SKELETON_CELL2["END"] = "end";
+  DATATABLE_SKELETON_CELL2["CONTROL"] = "control";
+  return DATATABLE_SKELETON_CELL2;
+})(DATATABLE_SKELETON_CELL || {});

package/dist/src/enums/DataTable/data-table.enum.d.ts

@@ -3,3 +3,19 @@ export declare enum DATATABLE_SELECT_STRATEGY {
     PAGE = "page",
     ALL = "all"
 }
+/*********************************************************
+ * DATATABLE_SKELETON_CELL
+ *
+ * @description
+ * Silhouette a placeholder cell draws, derived from the COLUMN it belongs
+ * to (the table has no column "type"; its descriptor only carries `align`
+ * and the reserved `data-table-select` / `data-table-expand` keys).
+ * `text` is a bar from the start edge, `end` a shorter bar flush with the
+ * end edge (numbers, amounts), `control` a small square (checkbox,
+ * expand chevron).
+ ********************************************************/
+export declare enum DATATABLE_SKELETON_CELL {
+    TEXT = "text",
+    END = "end",
+    CONTROL = "control"
+}

package/dist/src/enums/DataTable/data-table.enum.js

@@ -4,3 +4,9 @@ export var DATATABLE_SELECT_STRATEGY = /* @__PURE__ */ ((DATATABLE_SELECT_STRATE
   DATATABLE_SELECT_STRATEGY2["ALL"] = "all";
   return DATATABLE_SELECT_STRATEGY2;
 })(DATATABLE_SELECT_STRATEGY || {});
+export var DATATABLE_SKELETON_CELL = /* @__PURE__ */ ((DATATABLE_SKELETON_CELL2) => {
+  DATATABLE_SKELETON_CELL2["TEXT"] = "text";
+  DATATABLE_SKELETON_CELL2["END"] = "end";
+  DATATABLE_SKELETON_CELL2["CONTROL"] = "control";
+  return DATATABLE_SKELETON_CELL2;
+})(DATATABLE_SKELETON_CELL || {});

package/dist/src/interfaces/Skeleton/skeleton.interface.d.ts

@@ -4,6 +4,7 @@ import type { IDimensionProps } from '../Commons/dimension.interface';
 import type { IRoundedProps } from '../Commons/rounded.interface';
 import type { ISizeProps } from '../Commons/size.interface';
 import type { TSkeletonAnimation, TSkeletonVariant } from '../../types/Skeleton/skeleton.type';
+import type { ISkeletonGroupProps } from './skeleton-group.interface';
 export interface ISkeletonProps extends ICommonsComponentProps, IColorProps, IBgColorProps, ISizeProps, IRoundedProps, IDimensionProps {
     variant?: TSkeletonVariant;
     loading?: boolean;
@@ -52,3 +53,15 @@ export interface ISkeletonProps extends ICommonsComponentProps, IColorProps, IBg
  ********************************************************/
 export interface ISkeletonEmits {
 }
+/*********************************************************
+ * ISkeletonOverrides
+ *
+ * @description
+ * Result of `splitSkeletonOverrides()`: the `loading="{ type: 'skeleton' }"`
+ * bag split between the `<OrigamSkeletonGroup>` (per zone) and each
+ * primitive it contains (per block).
+ ********************************************************/
+export interface ISkeletonOverrides {
+    group: ISkeletonGroupProps;
+    block: Pick<ISkeletonProps, 'color' | 'bgColor' | 'rounded'>;
+}