origam 2.24.0 → 2.26.0

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/Field/OrigamField.vue

@@ -9,16 +9,7 @@
 	>
 		<div class="origam-field__overlay"/>
 
-		<template v-if="loaderConfig.isActive && loaderConfig.kind === 'skeleton'">
-			<origam-skeleton
-					class="origam-field__skeleton"
-					variant="rectangular"
-					:loading="true"
-					v-bind="loaderConfig.overrides"
-			/>
-		</template>
-
-		<template v-if="hasLoader && loaderConfig.kind !== 'skeleton'">
+		<template v-if="hasLoader">
 			<slot name="loader">
 				<div class="origam-field__loader">
 					<origam-progress
@@ -35,138 +26,136 @@
 			</slot>
 		</template>
 
-		<template v-if="!loaderConfig.isActive || loaderConfig.kind !== 'skeleton'">
-			<div
-					v-if="hasPrependInner"
-					key="prependInner"
-					class="origam-field__prepend-inner"
-					v-bind="prependInnerCommandAttrs"
-					@click="handleClickPrependInner"
-					@keydown="handleKeydownPrependInner"
-			>
-				<slot name="prependInner">
-					<origam-avatar
-							v-if="prependInnerAvatar"
-							key="prepend-avatar"
-							:density="density"
-							:image="prependInnerAvatar"
-					/>
-					<origam-icon
-							v-if="prependInnerIcon"
-							key="prepend-icon"
-							:density="density"
-							:icon="prependInnerIcon"
+		<div
+				v-if="hasPrependInner"
+				key="prependInner"
+				class="origam-field__prepend-inner"
+				v-bind="prependInnerCommandAttrs"
+				@click="handleClickPrependInner"
+				@keydown="handleKeydownPrependInner"
+		>
+			<slot name="prependInner">
+				<origam-avatar
+						v-if="prependInnerAvatar"
+						key="prepend-avatar"
+						:density="density"
+						:image="prependInnerAvatar"
+				/>
+				<origam-icon
+						v-if="prependInnerIcon"
+						key="prepend-icon"
+						:density="density"
+						:icon="prependInnerIcon"
+				/>
+			</slot>
+		</div>
+
+		<div
+				class="origam-field__field"
+				data-no-activator=""
+		>
+			<template v-if="hasLabel">
+				<slot
+						name="label"
+						v-bind="labelProps"
+				>
+					<origam-label
+							v-bind="labelProps"
+							ref="origamLabelRef"
 					/>
 				</slot>
-			</div>
+			</template>
 
-			<div
-					class="origam-field__field"
-					data-no-activator=""
+			<span
+					v-if="hasPrefix"
+					class="origam-field__prefix"
 			>
-				<template v-if="hasLabel">
-					<slot
-							name="label"
-							v-bind="labelProps"
-					>
-						<origam-label
-								v-bind="labelProps"
-								ref="origamLabelRef"
-						/>
-					</slot>
-				</template>
-
-				<span
-						v-if="hasPrefix"
-						class="origam-field__prefix"
-				>
-	         <slot name="prefix">
-	          <span>
-	            {{ prefix }}
-	          </span>
-	         </slot>
-	      </span>
-
-				<slot
-						name="default"
-						v-bind="slotProps"
-				/>
-
-				<span
-						v-if="hasSuffix"
-						class="origam-field__suffix"
-				>
-	        <slot name="suffix">
-	          <span>
-	            {{ suffix }}
-	          </span>
-	        </slot>
-	      </span>
-			</div>
+         <slot name="prefix">
+          <span>
+            {{ prefix }}
+          </span>
+         </slot>
+      </span>
+
+			<slot
+					name="default"
+					v-bind="slotProps"
+			/>
 
-			<origam-expand-x
-					v-if="hasClear"
-					key="clear"
+			<span
+					v-if="hasSuffix"
+					class="origam-field__suffix"
 			>
-				<button
-						v-show="dirty"
-						type="button"
-						class="origam-field__clearable"
-						:aria-label="clearLabel"
-						@blur="handleBlur"
-						@focus="handleFocus"
-						@mousedown="handleMousedownClear"
-						@keydown="handleKeydownClear"
-				>
-					<slot name="clear">
-						<origam-icon :icon="clearIcon"/>
-					</slot>
-				</button>
-			</origam-expand-x>
-
-			<div
-					v-if="hasAppendInner"
-					key="appendInner"
-					class="origam-field__append-inner"
-					v-bind="appendInnerCommandAttrs"
-					@click="handleClickAppendInner"
-					@keydown="handleKeydownAppendInner"
+        <slot name="suffix">
+          <span>
+            {{ suffix }}
+          </span>
+        </slot>
+      </span>
+		</div>
+
+		<origam-expand-x
+				v-if="hasClear"
+				key="clear"
+		>
+			<button
+					v-show="dirty"
+					type="button"
+					class="origam-field__clearable"
+					:aria-label="clearLabel"
+					@blur="handleBlur"
+					@focus="handleFocus"
+					@mousedown="handleMousedownClear"
+					@keydown="handleKeydownClear"
 			>
-				<slot name="appendInner">
-					<origam-avatar
-							v-if="appendInnerAvatar"
-							key="append-avatar"
-							:density="density"
-							:image="appendInnerAvatar"
-					/>
-					<origam-icon
-							v-if="appendInnerIcon"
-							key="append-icon"
-							:density="density"
-							:icon="appendInnerIcon"
-					/>
+				<slot name="clear">
+					<origam-icon :icon="clearIcon"/>
 				</slot>
-			</div>
+			</button>
+		</origam-expand-x>
+
+		<div
+				v-if="hasAppendInner"
+				key="appendInner"
+				class="origam-field__append-inner"
+				v-bind="appendInnerCommandAttrs"
+				@click="handleClickAppendInner"
+				@keydown="handleKeydownAppendInner"
+		>
+			<slot name="appendInner">
+				<origam-avatar
+						v-if="appendInnerAvatar"
+						key="append-avatar"
+						:density="density"
+						:image="appendInnerAvatar"
+				/>
+				<origam-icon
+						v-if="appendInnerIcon"
+						key="append-icon"
+						:density="density"
+						:icon="appendInnerIcon"
+				/>
+			</slot>
+		</div>
 
-			<div class="origam-field__outlines">
-				<div class="origam-field__outline origam-field__outline--start"/>
-				<div class="origam-field__outline origam-field__outline--notch">
-					<template v-if="hasFloatingLabel">
-						<slot
-								name="floatingLabel"
+		<div class="origam-field__outlines">
+			<div class="origam-field__outline origam-field__outline--start"/>
+			<div class="origam-field__outline origam-field__outline--notch">
+				<template v-if="hasFloatingLabel">
+					<slot
+							name="floatingLabel"
+							v-bind="floatingLabelProps"
+					>
+						<origam-label
+								key="floating-label"
 								v-bind="floatingLabelProps"
-						>
-							<origam-label
-									key="floating-label"
-									v-bind="floatingLabelProps"
-									ref="origamFloatingLabelRef"
-							/>
-						</slot>
-					</template>
-				</div>
-				<div class="origam-field__outline origam-field__outline--end"/>
+								ref="origamFloatingLabelRef"
+						/>
+					</slot>
+				</template>
 			</div>
-		</template>
+			<div class="origam-field__outline origam-field__outline--end"/>
+		</div>
 
 	</div>
 </template>
@@ -178,7 +167,6 @@ import OrigamExpandX from "../Transition/OrigamExpandX.vue";
 import OrigamIcon from "../Icon/OrigamIcon.vue";
 import OrigamLabel from "../Label/OrigamLabel.vue";
 import OrigamProgress from "../Progress/OrigamProgress.vue";
-import OrigamSkeleton from "../Skeleton/OrigamSkeleton.vue";
 import { useAdjacentInner } from "../../composables/Commons/adjacentInner.composable";
 import { useBorder } from "../../composables/Commons/border.composable";
 import { useBothColor } from "../../composables/Commons/bothColor.composable";
@@ -659,26 +647,6 @@ defineExpose({
 		backdrop-filter: var(--origam-field---backdrop-filter, none);
 		-webkit-backdrop-filter: var(--origam-field---backdrop-filter, none);
 
-		&__skeleton {
-			width: 100%;
-			/*
-			 * ⛔ #595 — FAUX POSITIF de `token-var-channels`, a laisser en
-			 * baseline. Le repli est `var(--origam-input__control---height, 36px)`,
-			 * et ce token-la est ECRIT PAR INSTANCE : les quatre modificateurs
-			 * de taille de ce composant (~l.1532-1550) comme ceux d `OrigamInput`
-			 * et d `OrigamTextareaField` le posent sur l element
-			 * (`sm`=28 / `md`=36 / `lg`=44 / `xl`=52px). Declarer
-			 * `--origam-field__skeleton---min-height` a `:root` avec ce repli
-			 * substituerait la valeur RACINE (36px) une fois pour toutes : le
-			 * squelette cesserait de suivre la taille du champ. Meme piege que
-			 * `---hover-x` sur SliderField.
-			 */
-			min-height: var(--origam-field__skeleton---min-height, var(--origam-input__control---height, 36px));
-			border-radius: var(--origam-field---border-radius, 8px);
-			grid-column: 1 / -1;
-			grid-row: 1;
-		}
-
 		&__loader {
 			position: absolute;
 			bottom: 0;

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/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: &;