origam 2.23.1 → 2.24.0

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

@@ -4,39 +4,51 @@
 	</template>
 
 	<div
-			v-else-if="variant === 'list-item'"
+			v-else-if="isListItem"
 			:id="id"
 			:class="skeletonContainerClasses"
 			:style="skeletonContainerStyles"
-			:aria-label="skeletonAriaLabel"
-			aria-busy="true"
-			role="status"
-			v-bind="{ ...$attrs }"
+			v-bind="{ ...a11yAttrs, ...$attrs }"
 	>
 		<div
 				:class="skeletonCircularClasses"
-				:style="circularStyle"
+				aria-hidden="true"
 		/>
 		<div class="origam-skeleton__lines">
-			<div :class="skeletonTextClasses"/>
-			<div :class="skeletonTextClasses"/>
+			<div
+					:class="skeletonTextClasses"
+					aria-hidden="true"
+			/>
+			<div
+					:class="skeletonTextClasses"
+					aria-hidden="true"
+			/>
 		</div>
 	</div>
 
 	<div
-			v-else-if="variant === 'card'"
+			v-else-if="isCard"
 			:id="id"
 			:class="skeletonContainerClasses"
 			:style="skeletonContainerStyles"
-			:aria-label="skeletonAriaLabel"
-			aria-busy="true"
-			role="status"
-			v-bind="{ ...$attrs }"
+			v-bind="{ ...a11yAttrs, ...$attrs }"
 	>
-		<div :class="skeletonRectangularClasses"/>
-		<div :class="skeletonTextClasses"/>
-		<div :class="skeletonTextClasses"/>
-		<div :class="skeletonTextClasses"/>
+		<div
+				:class="skeletonRectangularClasses"
+				aria-hidden="true"
+		/>
+		<div
+				:class="skeletonTextClasses"
+				aria-hidden="true"
+		/>
+		<div
+				:class="skeletonTextClasses"
+				aria-hidden="true"
+		/>
+		<div
+				:class="skeletonTextClasses"
+				aria-hidden="true"
+		/>
 	</div>
 
 	<div
@@ -44,29 +56,25 @@
 			:id="id"
 			:class="skeletonClasses"
 			:style="skeletonStyles"
-			:aria-label="skeletonAriaLabel"
-			aria-busy="true"
-			role="status"
-			v-bind="{ ...$attrs }"
+			v-bind="{ ...a11yAttrs, ...$attrs }"
 	/>
 </template>
 
 <script lang="ts" setup>
 import { useBothColor } from "../../composables/Commons/bothColor.composable";
+import { useDimension } from "../../composables/Commons/dimension.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";
+import { ORIGAM_SKELETON_GROUP_KEY } from "../../consts/Skeleton/skeleton.const";
+import { SKELETON_ANIMATION, SKELETON_VARIANT } from "../../enums/Skeleton/skeleton.enum";
+import { computed, inject, toRef } from "vue";
 defineOptions({ inheritAttrs: false });
 const props = defineProps({
   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 },
+  animation: { type: null, required: false },
   label: { type: String, required: false, default: "origam.loading" },
   id: { type: String, required: false },
   class: { type: [String, Array, Object], required: false },
@@ -82,7 +90,13 @@ const props = defineProps({
   roundedStartStart: { type: [Boolean, Number, String], required: false },
   roundedStartEnd: { type: [Boolean, Number, String], required: false },
   roundedEndStart: { type: [Boolean, Number, String], required: false },
-  roundedEndEnd: { type: [Boolean, Number, String], required: false }
+  roundedEndEnd: { type: [Boolean, Number, String], required: false },
+  height: { type: [Number, String], required: false },
+  maxHeight: { type: [Number, String], required: false },
+  maxWidth: { type: [Number, String], required: false },
+  minHeight: { type: [Number, String], required: false },
+  minWidth: { type: [Number, String], required: false },
+  width: { type: [Number, String], required: false }
 });
 const { filterProps } = useProps(props);
 defineEmits([]);
@@ -90,40 +104,43 @@ defineSlots();
 const { t } = useLocale();
 const { roundedClasses, roundedStyles } = useRounded(props);
 const { sizeClasses, sizeStyles } = useSize(props);
-const skeletonAriaLabel = computed(() => t(props.label));
+const { dimensionStyles } = useDimension(props);
 const { colorClasses, colorStyles } = useBothColor(toRef(props, "bgColor"), toRef(props, "color"));
-const resolvedWidth = computed(() => {
-  if (props.variant === "text" && props.width == null) return "100%";
-  return props.width != null ? convertToUnit(props.width) : void 0;
+const group = inject(ORIGAM_SKELETON_GROUP_KEY, null);
+const isGrouped = computed(() => group !== null);
+const animation = computed(() => props.animation ?? group?.animation.value ?? SKELETON_ANIMATION.PULSE);
+const skeletonAriaLabel = computed(() => t(props.label));
+const a11yAttrs = computed(() => {
+  if (isGrouped.value) return { "aria-hidden": true };
+  return {
+    "role": "status",
+    "aria-busy": true,
+    "aria-label": skeletonAriaLabel.value
+  };
 });
-const resolvedHeight = computed(() => {
-  if (props.variant === "text") {
-    return props.height != null ? convertToUnit(props.height) : "var(--origam-skeleton---text-height)";
+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
   }
-  if (props.variant === "circular") {
-    return props.width != null ? convertToUnit(props.width) : void 0;
-  }
-  return props.height != null ? convertToUnit(props.height) : void 0;
-});
-const circularSize = computed(() => props.width != null ? convertToUnit(props.width) : "36px");
-const circularStyle = computed(() => ({
-  width: circularSize.value,
-  height: circularSize.value
-}));
+]);
 const skeletonCircularClasses = computed(() => [
   "origam-skeleton",
-  { "origam-skeleton--pulse": props.pulse },
-  "origam-skeleton--circular"
+  "origam-skeleton--circular",
+  animationClasses.value
 ]);
 const skeletonTextClasses = computed(() => [
   "origam-skeleton",
-  { "origam-skeleton--pulse": props.pulse },
-  "origam-skeleton--text"
+  "origam-skeleton--text",
+  animationClasses.value
 ]);
 const skeletonRectangularClasses = computed(() => [
   "origam-skeleton",
-  { "origam-skeleton--pulse": props.pulse },
-  "origam-skeleton--rectangular"
+  "origam-skeleton--rectangular",
+  animationClasses.value
 ]);
 const skeletonContainerClasses = computed(() => [
   "origam-skeleton-wrapper",
@@ -134,102 +151,53 @@ const skeletonContainerStyles = computed(() => [props.style]);
 const skeletonClasses = computed(() => [
   "origam-skeleton",
   `origam-skeleton--${props.variant}`,
-  { "origam-skeleton--pulse": props.pulse },
+  animationClasses.value,
   colorClasses.value,
   roundedClasses.value,
   sizeClasses.value,
   props.class
 ]);
-const skeletonStyles = computed(() => {
-  const styles = {};
-  if (resolvedWidth.value) styles["width"] = resolvedWidth.value;
-  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, () => props.id);
+const skeletonStyles = computed(() => [
+  dimensionStyles.value,
+  colorStyles.value,
+  roundedStyles.value,
+  sizeStyles.value,
+  props.style
+]);
 defineExpose({
-  filterProps,
-  css,
-  id,
-  load,
-  unload,
-  isLoaded
+  filterProps
 });
 </script>
 
 <style lang="scss" scoped>
-	@keyframes origam-skeleton-wave {
-		0%   { background-position: -200% 0 }
-		100% { background-position: 200% 0 }
-	}
-
-	@keyframes origam-skeleton-spin {
-		from { transform: rotate(0deg) }
-		to   { transform: rotate(360deg) }
-	}
-
 	.origam-skeleton {
 		display: block;
-		background-color: var(--origam-skeleton---background-color);
 		border-radius: var(--origam-skeleton---border-radius);
-		width: 100%;
-		height: var(--origam-skeleton---text-height);
 
 		&--text {
+			width: 100%;
 			height: var(--origam-skeleton---text-height);
-			border-radius: var(--origam-skeleton---border-radius);
+			margin-block: var(--origam-skeleton---text-margin-block);
+			border-radius: var(--origam-skeleton---border-radius-pill);
 		}
 
 		&--rectangular {
-			border-radius: var(--origam-skeleton---border-radius);
+			width: 100%;
 			height: 100%;
 		}
 
 		&--circular {
-			border-radius: var(--origam-skeleton---border-radius-circular, 50%);
 			flex-shrink: 0;
+			width: var(--origam-skeleton---circular-size);
+			aspect-ratio: 1;
+			border-radius: var(--origam-skeleton---border-radius-circular);
 		}
 
-		&--card,
-		&--list-item {
-			display: none;
-		}
-
-		&--text.origam-skeleton--pulse,
-		&--rectangular.origam-skeleton--pulse {
-			background-image: linear-gradient(
-				90deg,
-				transparent 0%,
-				var(
-					--origam-skeleton---wave-color,
-					color-mix(in srgb, var(--origam-skeleton---background-color) 50%, white)
-				) 50%,
-				transparent 100%
-			);
-			background-repeat: no-repeat;
-			background-size: 200% 100%;
-			animation: origam-skeleton-wave var(--origam-skeleton---animation-duration, 1500ms) linear infinite;
-		}
-
-		&--circular.origam-skeleton--pulse {
-			background:
-				conic-gradient(
-					from 0deg,
-					transparent 0deg,
-					var(
-						--origam-skeleton---wave-color,
-						color-mix(in srgb, var(--origam-skeleton---background-color) 50%, white)
-					) 90deg,
-					var(--origam-skeleton---background-color) 270deg
-				);
-			animation: origam-skeleton-spin var(--origam-skeleton---animation-duration, 1500ms) linear infinite;
-		}
-	}
-
-	@media (prefers-reduced-motion: reduce) {
-		.origam-skeleton--pulse {
-			animation: none;
-			background-image: none;
+		&--pill {
+			flex-shrink: 0;
+			width: var(--origam-skeleton---pill-width);
+			height: var(--origam-skeleton---pill-height);
+			border-radius: var(--origam-skeleton---border-radius-pill);
 		}
 	}
 
@@ -239,10 +207,6 @@ defineExpose({
 			gap: var(--origam-skeleton---gap, 12px);
 			align-items: center;
 
-			> .origam-skeleton--circular {
-				flex-shrink: 0;
-			}
-
 			> .origam-skeleton__lines {
 				flex: 1;
 				display: flex;

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

@@ -0,0 +1,52 @@
+<template>
+	<div
+			:id="id"
+			:class="groupClasses"
+			:style="groupStyles"
+			role="status"
+			aria-busy="true"
+			:aria-label="groupAriaLabel"
+			v-bind="{ ...$attrs }"
+	>
+		<slot name="default"/>
+	</div>
+</template>
+
+<script lang="ts" setup>
+import { useLocale } from "../../composables/Commons/locale.composable";
+import { useProps } from "../../composables/Commons/props.composable";
+import { ORIGAM_SKELETON_GROUP_KEY } from "../../consts/Skeleton/skeleton.const";
+import { SKELETON_ANIMATION } from "../../enums/Skeleton/skeleton.enum";
+import { computed, provide } from "vue";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  animation: { type: null, required: false, default: "pulse" },
+  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 }
+});
+const { filterProps } = useProps(props);
+defineEmits([]);
+defineSlots();
+const { t } = useLocale();
+const groupAriaLabel = computed(() => t(props.label));
+const animation = computed(() => props.animation ?? SKELETON_ANIMATION.PULSE);
+provide(ORIGAM_SKELETON_GROUP_KEY, { animation });
+const groupClasses = computed(() => [
+  "origam-skeleton-group",
+  { "origam--skeleton-group-pulse": animation.value === SKELETON_ANIMATION.PULSE },
+  props.class
+]);
+const groupStyles = computed(() => [props.style]);
+defineExpose({
+  filterProps
+});
+</script>
+
+<style lang="scss" scoped>
+	.origam-skeleton-group {
+		display: grid;
+		gap: var(--origam-skeleton---gap);
+	}
+</style>

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

@@ -9,5 +9,12 @@ Object.defineProperty(exports, "OrigamSkeleton", {
     return _OrigamSkeleton.default;
   }
 });
+Object.defineProperty(exports, "OrigamSkeletonGroup", {
+  enumerable: true,
+  get: function () {
+    return _OrigamSkeletonGroup.default;
+  }
+});
 var _OrigamSkeleton = _interopRequireDefault(require("./OrigamSkeleton.vue"));
+var _OrigamSkeletonGroup = _interopRequireDefault(require("./OrigamSkeletonGroup.vue"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

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

@@ -1 +1,2 @@
 export { default as OrigamSkeleton } from './OrigamSkeleton.vue';
+export { default as OrigamSkeletonGroup } from './OrigamSkeletonGroup.vue';

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

@@ -1 +1,2 @@
 export { default as OrigamSkeleton } from "./OrigamSkeleton.vue";
+export { default as OrigamSkeletonGroup } from "./OrigamSkeletonGroup.vue";

package/dist/src/consts/Skeleton/skeleton.const.cjs

@@ -0,0 +1,7 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ORIGAM_SKELETON_GROUP_KEY = void 0;
+const ORIGAM_SKELETON_GROUP_KEY = exports.ORIGAM_SKELETON_GROUP_KEY = /* @__PURE__ */Symbol.for("origam:skeleton-group");

package/dist/src/consts/Skeleton/skeleton.const.d.ts

@@ -0,0 +1,11 @@
+import type { InjectionKey } from 'vue';
+import type { ISkeletonGroupProvide } from '../../interfaces/Skeleton/skeleton-group.interface';
+/*********************************************************
+ * ORIGAM_SKELETON_GROUP_KEY
+ *
+ * @description
+ * Provided by `<OrigamSkeletonGroup>`; read by every `<OrigamSkeleton>` below
+ * it, which then follows the group's animation and stays out of the
+ * accessibility tree (the group announces the loading ONCE).
+ ********************************************************/
+export declare const ORIGAM_SKELETON_GROUP_KEY: InjectionKey<ISkeletonGroupProvide>;

package/dist/src/consts/Skeleton/skeleton.const.js

@@ -0,0 +1 @@
+export const ORIGAM_SKELETON_GROUP_KEY = /* @__PURE__ */ Symbol.for("origam:skeleton-group");

package/dist/src/consts/index.cjs

@@ -696,6 +696,17 @@ Object.keys(_expansionPanel).forEach(function (key) {
     }
   });
 });
+var _skeleton = require("./Skeleton/skeleton.const.cjs");
+Object.keys(_skeleton).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _skeleton[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _skeleton[key];
+    }
+  });
+});
 var _dataTable = require("./DataTable/data-table.const.cjs");
 Object.keys(_dataTable).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/dist/src/consts/index.d.ts

@@ -61,6 +61,7 @@ export * from './TextField/text-field.const';
 export * from './TextareaField/textarea-field.const';
 export * from './EmptyState/empty-state.const';
 export * from './ExpansionPanel/expansion-panel.const';
+export * from './Skeleton/skeleton.const';
 export * from './DataTable/data-table.const';
 export * from './PasswordField/password-field.const';
 export * from './Sheet/sheet.const';

package/dist/src/consts/index.js

@@ -61,6 +61,7 @@ export * from "./TextField/text-field.const.js";
 export * from "./TextareaField/textarea-field.const.js";
 export * from "./EmptyState/empty-state.const.js";
 export * from "./ExpansionPanel/expansion-panel.const.js";
+export * from "./Skeleton/skeleton.const.js";
 export * from "./DataTable/data-table.const.js";
 export * from "./PasswordField/password-field.const.js";
 export * from "./Sheet/sheet.const.js";

package/dist/src/enums/Skeleton/skeleton.enum.cjs

@@ -3,12 +3,19 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.SKELETON_VARIANT = void 0;
+exports.SKELETON_VARIANT = exports.SKELETON_ANIMATION = void 0;
 var SKELETON_VARIANT = exports.SKELETON_VARIANT = /* @__PURE__ */(SKELETON_VARIANT2 => {
   SKELETON_VARIANT2["TEXT"] = "text";
   SKELETON_VARIANT2["RECTANGULAR"] = "rectangular";
   SKELETON_VARIANT2["CIRCULAR"] = "circular";
+  SKELETON_VARIANT2["PILL"] = "pill";
   SKELETON_VARIANT2["CARD"] = "card";
   SKELETON_VARIANT2["LIST_ITEM"] = "list-item";
   return SKELETON_VARIANT2;
-})(SKELETON_VARIANT || {});
+})(SKELETON_VARIANT || {});
+var SKELETON_ANIMATION = exports.SKELETON_ANIMATION = /* @__PURE__ */(SKELETON_ANIMATION2 => {
+  SKELETON_ANIMATION2["PULSE"] = "pulse";
+  SKELETON_ANIMATION2["WAVE"] = "wave";
+  SKELETON_ANIMATION2["NONE"] = "none";
+  return SKELETON_ANIMATION2;
+})(SKELETON_ANIMATION || {});

package/dist/src/enums/Skeleton/skeleton.enum.d.ts

@@ -1,11 +1,34 @@
-/**
- * Shape presets for `<OrigamSkeleton>`. Each value drives a different
- * placeholder geometry (line runs, aspect ratio, composed sub-blocks).
- */
+/*********************************************************
+ * SKELETON_VARIANT
+ *
+ * @description
+ * Shape presets for `<OrigamSkeleton>`. `text`, `rectangular`, `circular`
+ * and `pill` are the PRIMITIVES — the bricks a component assembles to mimic
+ * its own anatomy. `card` and `list-item` are fixed composite templates kept
+ * until the components that consume them have moved to primitives.
+ ********************************************************/
 export declare enum SKELETON_VARIANT {
     TEXT = "text",
     RECTANGULAR = "rectangular",
     CIRCULAR = "circular",
+    PILL = "pill",
     CARD = "card",
     LIST_ITEM = "list-item"
 }
+/*********************************************************
+ * SKELETON_ANIMATION
+ *
+ * @description
+ * How a placeholder moves while content is loading. `pulse` is the default:
+ * a calm opacity breath. `wave` adds a shimmer that sweeps across the block.
+ * `none` is static.
+ *
+ * @description
+ * There is deliberately no spin — a rotating placeholder reads as a spinner,
+ * which is `<OrigamLoader>`'s job.
+ ********************************************************/
+export declare enum SKELETON_ANIMATION {
+    PULSE = "pulse",
+    WAVE = "wave",
+    NONE = "none"
+}

package/dist/src/enums/Skeleton/skeleton.enum.js

@@ -2,7 +2,14 @@ export var SKELETON_VARIANT = /* @__PURE__ */ ((SKELETON_VARIANT2) => {
   SKELETON_VARIANT2["TEXT"] = "text";
   SKELETON_VARIANT2["RECTANGULAR"] = "rectangular";
   SKELETON_VARIANT2["CIRCULAR"] = "circular";
+  SKELETON_VARIANT2["PILL"] = "pill";
   SKELETON_VARIANT2["CARD"] = "card";
   SKELETON_VARIANT2["LIST_ITEM"] = "list-item";
   return SKELETON_VARIANT2;
 })(SKELETON_VARIANT || {});
+export var SKELETON_ANIMATION = /* @__PURE__ */ ((SKELETON_ANIMATION2) => {
+  SKELETON_ANIMATION2["PULSE"] = "pulse";
+  SKELETON_ANIMATION2["WAVE"] = "wave";
+  SKELETON_ANIMATION2["NONE"] = "none";
+  return SKELETON_ANIMATION2;
+})(SKELETON_ANIMATION || {});

package/dist/src/interfaces/Skeleton/skeleton-group.interface.cjs

@@ -0,0 +1 @@
+"use strict";

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

@@ -0,0 +1,34 @@
+import type { ComputedRef } from 'vue';
+import type { ICommonsComponentProps } from '../Commons/commons.interface';
+import type { TSkeletonAnimation } from '../../types/Skeleton/skeleton.type';
+export interface ISkeletonGroupProps extends ICommonsComponentProps {
+    /*********************************************************
+     * animation
+     *
+     * @description
+     * One animation clock for the whole group. `pulse` (default) animates
+     * the group container itself, so blocks that mount at different moments
+     * still breathe together. `wave` lets each block sweep its own shimmer.
+     * `none` is static. Blocks inherit it unless they set their own.
+     ********************************************************/
+    animation?: TSkeletonAnimation;
+    /*********************************************************
+     * label
+     *
+     * @description
+     * Locale key of the ONE announcement made for the whole zone
+     * (`role="status"`, `aria-busy="true"`). Defaults to `'origam.loading'`.
+     ********************************************************/
+    label?: string;
+}
+/*********************************************************
+ * ISkeletonGroupProvide
+ *
+ * @description
+ * Shape provided to the blocks of a group.
+ ********************************************************/
+export interface ISkeletonGroupProvide {
+    animation: ComputedRef<TSkeletonAnimation>;
+}
+export interface ISkeletonGroupEmits {
+}

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

@@ -1,27 +1,44 @@
 import type { IBgColorProps, IColorProps } from '../Commons/color.interface';
 import type { ICommonsComponentProps } from '../Commons/commons.interface';
+import type { IDimensionProps } from '../Commons/dimension.interface';
 import type { IRoundedProps } from '../Commons/rounded.interface';
 import type { ISizeProps } from '../Commons/size.interface';
-import type { TSkeletonVariant } from '../../types/Skeleton/skeleton.type';
-export interface ISkeletonProps extends ICommonsComponentProps, IColorProps, IBgColorProps, ISizeProps, IRoundedProps {
+import type { TSkeletonAnimation, TSkeletonVariant } from '../../types/Skeleton/skeleton.type';
+export interface ISkeletonProps extends ICommonsComponentProps, IColorProps, IBgColorProps, ISizeProps, IRoundedProps, IDimensionProps {
     variant?: TSkeletonVariant;
-    width?: string | number;
-    height?: string | number;
     loading?: boolean;
-    pulse?: boolean;
+    /*********************************************************
+     * animation
+     *
+     * @description
+     * How the placeholder moves: `pulse` (default — an opacity breath),
+     * `wave` (a shimmer sweeping across) or `none`. Left unset, a block
+     * follows the `<OrigamSkeletonGroup>` it sits in, and falls back to
+     * `pulse` outside any group.
+     *
+     * @description
+     * Every animation stops after a finite number of loops
+     * (`--origam-skeleton---animation-iterations`, ~10 s) and is switched
+     * off under `prefers-reduced-motion: reduce` (WCAG 2.2.2).
+     ********************************************************/
+    animation?: TSkeletonAnimation;
     /*********************************************************
      * label
      *
      * @description
-     * Accessible label announced on the `role="status"` placeholder
-     * (aria-label). Carries a LOCALE KEY, not final text — it is resolved
-     * through the DS `t()` mechanism, so it follows the active locale out
-     * of the box. Defaults to `'origam.loading'`, the shared key also used
-     * by Progress / Video / Audio / Switch for this same announcement.
+     * Accessible label announced on a STANDALONE placeholder
+     * (`role="status"` + `aria-label`). Carries a LOCALE KEY, not final
+     * text — it is resolved through the DS `t()` mechanism, so it follows
+     * the active locale out of the box. Defaults to `'origam.loading'`, the
+     * shared key also used by Progress / Video / Audio / Switch for this
+     * same announcement.
      * @description
      * A raw string that matches no key is returned unchanged, so
      * `label="Loading your invoices"` still works for consumers who prefer
      * to translate on their side.
+     * @description
+     * Ignored inside an `<OrigamSkeletonGroup>`: the group owns the one
+     * announcement and its blocks are `aria-hidden`.
      ********************************************************/
     label?: string;
 }

package/dist/src/interfaces/index.cjs

@@ -2709,6 +2709,17 @@ Object.keys(_skeleton).forEach(function (key) {
     }
   });
 });
+var _skeletonGroup = require("./Skeleton/skeleton-group.interface.cjs");
+Object.keys(_skeletonGroup).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _skeletonGroup[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _skeletonGroup[key];
+    }
+  });
+});
 var _kbd = require("./Kbd/kbd.interface.cjs");
 Object.keys(_kbd).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/dist/src/interfaces/index.d.ts

@@ -244,6 +244,7 @@ export * from './VirtualScroll/virtual-scroll-item.interface';
 export * from './Window/window.interface';
 export * from './Window/window-item.interface';
 export * from './Skeleton/skeleton.interface';
+export * from './Skeleton/skeleton-group.interface';
 export * from './Kbd/kbd.interface';
 export * from './Stepper/stepper.interface';
 export * from './Stepper/stepper-item.interface';