origam 2.26.2 → 2.27.0

package/CHANGELOG.md

@@ -18,6 +18,31 @@ This project follows [Semantic Versioning](https://semver.org).
 
 ## [Unreleased]
 
+## [2.27.0] - 2026-10-15
+
+### Removed — `OrigamSkeleton` : les gabarits `card` et `list-item` (BREAKING, #1073 lot 3, #1083)
+
+Decision 4 de #1073. Les deux gabarits composites figes disparaissent ; il ne reste que les quatre primitives `text`, `rectangular`, `circular`, `pill`. Rupture assumee (pre-1.0, aucun consommateur externe), livree dans un minor.
+
+Retire :
+
+- `SKELETON_VARIANT.CARD` et `SKELETON_VARIANT.LIST_ITEM`, donc `TSkeletonVariant` ne vaut plus que `'text' | 'rectangular' | 'circular' | 'pill'` ;
+- les classes `.origam-skeleton-wrapper`, `.origam-skeleton-wrapper--card`, `.origam-skeleton-wrapper--list-item` et `.origam-skeleton__lines`, ainsi que leurs regles scoped. Aucun token n'est retire : `--origam-skeleton---gap` reste lu par `OrigamSkeletonGroup`.
+
+Les consommateurs internes avaient deja migre : `OrigamCard` (#1089, lot 2b) et `wireframe.vue` (#1084, lot 2c) ne passent plus par ces gabarits.
+
+Migration : `<origam-skeleton variant="card" />` et `variant="list-item"` rendaient un `<div class="origam-skeleton-wrapper--…">` de primitives. On compose maintenant ces primitives soi-meme dans un `OrigamSkeletonGroup`, qui porte l'unique annonce `role="status"` de la zone et la meme horloge d'animation :
+
+```vue
+<origam-skeleton-group>
+    <origam-skeleton variant="circular" />
+    <origam-skeleton variant="text" width="60%" />
+    <origam-skeleton variant="text" width="40%" />
+</origam-skeleton-group>
+```
+
+Un `variant="card"` ou `"list-item"` restant n'est plus type (erreur `vue-tsc`) ; a l'execution la classe `origam-skeleton--card` / `--list-item` n'a plus aucune regle CSS associee : il n'y a plus de gabarit.
+
 ## [2.26.2] - 2026-10-15
 
 ### Fixed — un theme sans `name` avec `mode` l'emporte sur la palette integree du meme mode (#1102)

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

@@ -3,54 +3,6 @@
 		<slot/>
 	</template>
 
-	<div
-			v-else-if="isListItem"
-			:id="id"
-			:class="skeletonContainerClasses"
-			:style="skeletonContainerStyles"
-			v-bind="{ ...a11yAttrs, ...$attrs }"
-	>
-		<div
-				:class="skeletonCircularClasses"
-				aria-hidden="true"
-		/>
-		<div class="origam-skeleton__lines">
-			<div
-					:class="skeletonTextClasses"
-					aria-hidden="true"
-			/>
-			<div
-					:class="skeletonTextClasses"
-					aria-hidden="true"
-			/>
-		</div>
-	</div>
-
-	<div
-			v-else-if="isCard"
-			:id="id"
-			:class="skeletonContainerClasses"
-			:style="skeletonContainerStyles"
-			v-bind="{ ...a11yAttrs, ...$attrs }"
-	>
-		<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
 			v-else
 			:id="id"
@@ -68,7 +20,7 @@ import { useProps } from "../../composables/Commons/props.composable";
 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 { SKELETON_ANIMATION } from "../../enums/Skeleton/skeleton.enum";
 import { getSkeletonHostClasses } from "../../utils/Skeleton/skeleton.util";
 import { computed, inject, toRef } from "vue";
 defineOptions({ inheritAttrs: false });
@@ -119,30 +71,7 @@ const a11yAttrs = computed(() => {
     "aria-label": skeletonAriaLabel.value
   };
 });
-const isListItem = computed(() => props.variant === SKELETON_VARIANT.LIST_ITEM);
-const isCard = computed(() => props.variant === SKELETON_VARIANT.CARD);
 const animationClasses = computed(() => getSkeletonHostClasses(animation.value));
-const skeletonCircularClasses = computed(() => [
-  "origam-skeleton",
-  "origam-skeleton--circular",
-  animationClasses.value
-]);
-const skeletonTextClasses = computed(() => [
-  "origam-skeleton",
-  "origam-skeleton--text",
-  animationClasses.value
-]);
-const skeletonRectangularClasses = computed(() => [
-  "origam-skeleton",
-  "origam-skeleton--rectangular",
-  animationClasses.value
-]);
-const skeletonContainerClasses = computed(() => [
-  "origam-skeleton-wrapper",
-  `origam-skeleton-wrapper--${props.variant}`,
-  props.class
-]);
-const skeletonContainerStyles = computed(() => [props.style]);
 const skeletonClasses = computed(() => [
   "origam-skeleton",
   `origam-skeleton--${props.variant}`,
@@ -195,54 +124,4 @@ defineExpose({
 			border-radius: var(--origam-skeleton---border-radius-pill);
 		}
 	}
-
-	.origam-skeleton-wrapper {
-		&--list-item {
-			display: flex;
-			gap: var(--origam-skeleton---gap, 12px);
-			align-items: center;
-
-			> .origam-skeleton__lines {
-				flex: 1;
-				display: flex;
-				flex-direction: column;
-				gap: 6px;
-
-				> .origam-skeleton:nth-child(1) {
-					width: 60%;
-				}
-
-				> .origam-skeleton:nth-child(2) {
-					width: 40%;
-					opacity: 0.7;
-				}
-			}
-		}
-
-		&--card {
-			display: flex;
-			flex-direction: column;
-
-			> .origam-skeleton:nth-child(1) {
-				height: 80px;
-				margin-bottom: 10px;
-			}
-
-			> .origam-skeleton:nth-child(2) {
-				width: 70%;
-				margin-bottom: 6px;
-			}
-
-			> .origam-skeleton:nth-child(3) {
-				width: 90%;
-				margin-bottom: 4px;
-				opacity: 0.7;
-			}
-
-			> .origam-skeleton:nth-child(4) {
-				width: 50%;
-				opacity: 0.7;
-			}
-		}
-	}
 </style>

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

@@ -9,8 +9,6 @@ var SKELETON_VARIANT = exports.SKELETON_VARIANT = /* @__PURE__ */(SKELETON_VARIA
   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 || {});
 var SKELETON_ANIMATION = exports.SKELETON_ANIMATION = /* @__PURE__ */(SKELETON_ANIMATION2 => {

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

@@ -4,16 +4,13 @@
  * @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.
+ * its own anatomy, inside an `<OrigamSkeletonGroup>`.
  ********************************************************/
 export declare enum SKELETON_VARIANT {
     TEXT = "text",
     RECTANGULAR = "rectangular",
     CIRCULAR = "circular",
-    PILL = "pill",
-    CARD = "card",
-    LIST_ITEM = "list-item"
+    PILL = "pill"
 }
 /*********************************************************
  * SKELETON_ANIMATION

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

@@ -3,8 +3,6 @@ export var SKELETON_VARIANT = /* @__PURE__ */ ((SKELETON_VARIANT2) => {
   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) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "origam",
-  "version": "2.26.2",
+  "version": "2.27.0",
   "type": "module",
   "description": "origam — a Vue 3 design system with multi-theme design tokens, CSS-first components and TypeScript types.",
   "keywords": [