origam 2.23.2 → 2.25.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/components/Switch/OrigamSwitch.vue

@@ -1,19 +1,5 @@
 <template>
-  <div
-    v-if="isSkeletonLoading"
-    class="origam-switch__skeleton"
-    :class="{ 'origam-switch__skeleton--inset': inset }"
-    aria-busy="true"
-    :aria-label="loadingLabel"
-    role="status"
-    data-cy="origam-switch-skeleton"
-  >
-    <span class="origam-switch__skeleton-track"/>
-    <span class="origam-switch__skeleton-thumb"/>
-  </div>
-
   <origam-input
-    v-else
     :id="id"
     ref="origamInputRef"
     v-model="model"
@@ -145,7 +131,6 @@ import OrigamSwitchTrack from "./OrigamSwitchTrack.vue";
 import OrigamTranslateScale from "../Transition/OrigamTranslateScale.vue";
 import { useFocus } from "../../composables/Commons/focus.composable";
 import { useLoader } from "../../composables/Commons/loader.composable";
-import { useLocale } from "../../composables/Commons/locale.composable";
 import { useProps } from "../../composables/Commons/props.composable";
 import { useRounded } from "../../composables/Commons/rounded.composable";
 import { useStateEffect } from "../../composables/Commons/stateEffect.composable";
@@ -288,8 +273,6 @@ const { isFocused, onFocus: handleFocus, onBlur: handleBlur } = useFocus(props);
 const attrs = useAttrs();
 const slots = useSlots();
 const { loaderClasses, loaderConfig } = useLoader(props, LOADER_KIND.CIRCULAR);
-const { t } = useLocale();
-const loadingLabel = computed(() => t("origam.loading"));
 const uid = getUid();
 const id = computed(() => {
   return props.id || `switch-${uid}`;
@@ -316,16 +299,13 @@ const controlProps = computed(() => {
 const trackProps = computed(() => {
   return origamSwitchTrackRef.value?.filterProps(props, ["modelValue", "disabled", "readonly", "error", "inset", "isValid", "bgColor", "color", "class", "style", "id"]);
 });
-const isSkeletonLoading = computed(() => {
-  return loaderConfig.value.isActive && loaderConfig.value.kind === "skeleton";
-});
 const isLineLoading = computed(() => {
   return loaderConfig.value.isActive && loaderConfig.value.kind === "line";
 });
 const hasCircularLoading = computed(() => {
   if (slots.loader) return true;
   const cfg = loaderConfig.value;
-  return cfg.isActive && cfg.kind !== "line" && cfg.kind !== "skeleton";
+  return cfg.isActive && cfg.kind !== "line";
 });
 const switchStyles = computed(() => {
   return [
@@ -368,54 +348,6 @@ defineExpose({
 </script>
 
 <style lang="scss" scoped>
-  @keyframes origam-switch-skeleton-pulse {
-    0%, 100% {
-      opacity: 1;
-    }
-    50% {
-      opacity: 0.55;
-    }
-  }
-
-  .origam-switch__skeleton {
-    position: relative;
-    display: inline-block;
-    width: var(--origam-switch__skeleton---width, 52px);
-    height: var(--origam-switch__skeleton---height, 32px);
-    animation: origam-switch-skeleton-pulse 1.6s ease-in-out infinite;
-
-    @media (prefers-reduced-motion: reduce) {
-      animation: none;
-    }
-
-    .origam-switch__skeleton-track {
-      position: absolute;
-      inset: 0;
-      border-radius: 999px;
-      background-color: var(--origam-switch__skeleton-track---background-color, color-mix(in srgb, currentColor 14%, transparent));
-    }
-
-    .origam-switch__skeleton-thumb {
-      position: absolute;
-      top: 50%;
-      left: 6px;
-      width: 20px;
-      height: 20px;
-      border-radius: 50%;
-      transform: translateY(-50%);
-      background-color: var(--origam-switch__skeleton-thumb---background-color, color-mix(in srgb, currentColor 28%, transparent));
-      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
-    }
-
-    &--inset {
-      .origam-switch__skeleton-thumb {
-        width: 24px;
-        height: 24px;
-        left: 4px;
-      }
-    }
-  }
-
   .origam-switch {
     $this: &;
 

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