origam 2.24.0 → 2.25.0

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

@@ -331,8 +331,6 @@
   --origam-btn---overlay-opacity-hover: var(--origam-opacity---12);
   --origam-btn---overlay-opacity-active: 0.2;
   --origam-btn---overlay-opacity-active-hover: 0.28;
-  --origam-btn--loader-skeleton---min-width: 96px;
-  --origam-btn--loader-skeleton---min-height: 36px;
   --origam-btn__progress---linear-height: 3px;
   --origam-btn__progress---linear-position: 0px;
   --origam-btn__progress---linear-position-top: auto;
@@ -2303,10 +2301,6 @@
   --origam-switch__thumb---border-color: rgba(0, 0, 0, 0.18);
   --origam-switch__thumb---color: currentColor;
   --origam-switch__selection-control---min-height: 56px;
-  --origam-switch__skeleton---width: 52px;
-  --origam-switch__skeleton---height: 32px;
-  --origam-switch__skeleton-track---background-color: color-mix(in srgb, currentColor 14%, transparent);
-  --origam-switch__skeleton-thumb---background-color: color-mix(in srgb, currentColor 28%, transparent);
   --origam-switch__track--inset---height: 32px;
   --origam-switch__track--inset---width: 52px;
   --origam-switch---opacity-disabled: var(--origam-opacity---32);
@@ -3351,8 +3345,6 @@
     --origam-btn---overlay-opacity-hover: var(--origam-opacity---12);
     --origam-btn---overlay-opacity-active: 0.2;
     --origam-btn---overlay-opacity-active-hover: 0.28;
-    --origam-btn--loader-skeleton---min-width: 96px;
-    --origam-btn--loader-skeleton---min-height: 36px;
     --origam-btn__progress---linear-height: 3px;
     --origam-btn__progress---linear-position: 0px;
     --origam-btn__progress---linear-position-top: auto;
@@ -5322,10 +5314,6 @@
     --origam-switch__thumb---border-color: rgba(0, 0, 0, 0.18);
     --origam-switch__thumb---color: currentColor;
     --origam-switch__selection-control---min-height: 56px;
-    --origam-switch__skeleton---width: 52px;
-    --origam-switch__skeleton---height: 32px;
-    --origam-switch__skeleton-track---background-color: color-mix(in srgb, currentColor 14%, transparent);
-    --origam-switch__skeleton-thumb---background-color: color-mix(in srgb, currentColor 28%, transparent);
     --origam-switch__track--inset---height: 32px;
     --origam-switch__track--inset---width: 52px;
     --origam-switch---opacity-disabled: var(--origam-opacity---32);

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

@@ -231,8 +231,6 @@
   --origam-btn---overlay-opacity-hover: var(--origam-opacity---12);
   --origam-btn---overlay-opacity-active: 0.2;
   --origam-btn---overlay-opacity-active-hover: 0.28;
-  --origam-btn--loader-skeleton---min-width: 96px;
-  --origam-btn--loader-skeleton---min-height: 36px;
   --origam-btn__progress---linear-height: 3px;
   --origam-btn__progress---linear-position: 0px;
   --origam-btn__progress---linear-position-top: auto;
@@ -2217,10 +2215,6 @@
   --origam-switch__thumb---border-color: rgba(0, 0, 0, 0.18);
   --origam-switch__thumb---color: currentColor;
   --origam-switch__selection-control---min-height: 56px;
-  --origam-switch__skeleton---width: 52px;
-  --origam-switch__skeleton---height: 32px;
-  --origam-switch__skeleton-track---background-color: color-mix(in srgb, currentColor 14%, transparent);
-  --origam-switch__skeleton-thumb---background-color: color-mix(in srgb, currentColor 28%, transparent);
   --origam-switch__track--inset---height: 32px;
   --origam-switch__track--inset---width: 52px;
   --origam-switch---opacity-disabled: var(--origam-opacity---32);

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

@@ -331,8 +331,6 @@
   --origam-btn---overlay-opacity-hover: var(--origam-opacity---12);
   --origam-btn---overlay-opacity-active: 0.2;
   --origam-btn---overlay-opacity-active-hover: 0.28;
-  --origam-btn--loader-skeleton---min-width: 96px;
-  --origam-btn--loader-skeleton---min-height: 36px;
   --origam-btn__progress---linear-height: 3px;
   --origam-btn__progress---linear-position: 0px;
   --origam-btn__progress---linear-position-top: auto;
@@ -2303,10 +2301,6 @@
   --origam-switch__thumb---border-color: rgba(0, 0, 0, 0.18);
   --origam-switch__thumb---color: currentColor;
   --origam-switch__selection-control---min-height: 56px;
-  --origam-switch__skeleton---width: 52px;
-  --origam-switch__skeleton---height: 32px;
-  --origam-switch__skeleton-track---background-color: color-mix(in srgb, currentColor 14%, transparent);
-  --origam-switch__skeleton-thumb---background-color: color-mix(in srgb, currentColor 28%, transparent);
   --origam-switch__track--inset---height: 32px;
   --origam-switch__track--inset---width: 52px;
   --origam-switch---opacity-disabled: var(--origam-opacity---32);
@@ -3351,8 +3345,6 @@
     --origam-btn---overlay-opacity-hover: var(--origam-opacity---12);
     --origam-btn---overlay-opacity-active: 0.2;
     --origam-btn---overlay-opacity-active-hover: 0.28;
-    --origam-btn--loader-skeleton---min-width: 96px;
-    --origam-btn--loader-skeleton---min-height: 36px;
     --origam-btn__progress---linear-height: 3px;
     --origam-btn__progress---linear-position: 0px;
     --origam-btn__progress---linear-position-top: auto;
@@ -5322,10 +5314,6 @@
     --origam-switch__thumb---border-color: rgba(0, 0, 0, 0.18);
     --origam-switch__thumb---color: currentColor;
     --origam-switch__selection-control---min-height: 56px;
-    --origam-switch__skeleton---width: 52px;
-    --origam-switch__skeleton---height: 32px;
-    --origam-switch__skeleton-track---background-color: color-mix(in srgb, currentColor 14%, transparent);
-    --origam-switch__skeleton-thumb---background-color: color-mix(in srgb, currentColor 28%, transparent);
     --origam-switch__track--inset---height: 32px;
     --origam-switch__track--inset---width: 52px;
     --origam-switch---opacity-disabled: var(--origam-opacity---32);

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

@@ -231,8 +231,6 @@
   --origam-btn---overlay-opacity-hover: var(--origam-opacity---12);
   --origam-btn---overlay-opacity-active: 0.2;
   --origam-btn---overlay-opacity-active-hover: 0.28;
-  --origam-btn--loader-skeleton---min-width: 96px;
-  --origam-btn--loader-skeleton---min-height: 36px;
   --origam-btn__progress---linear-height: 3px;
   --origam-btn__progress---linear-position: 0px;
   --origam-btn__progress---linear-position-top: auto;
@@ -2217,10 +2215,6 @@
   --origam-switch__thumb---border-color: rgba(0, 0, 0, 0.18);
   --origam-switch__thumb---color: currentColor;
   --origam-switch__selection-control---min-height: 56px;
-  --origam-switch__skeleton---width: 52px;
-  --origam-switch__skeleton---height: 32px;
-  --origam-switch__skeleton-track---background-color: color-mix(in srgb, currentColor 14%, transparent);
-  --origam-switch__skeleton-thumb---background-color: color-mix(in srgb, currentColor 28%, transparent);
   --origam-switch__track--inset---height: 32px;
   --origam-switch__track--inset---width: 52px;
   --origam-switch---opacity-disabled: var(--origam-opacity---32);

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

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