origam 2.26.1 → 2.27.0

package/CHANGELOG.md

@@ -18,6 +18,37 @@ 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)
+
+`themeSelector({ mode: 'dark' })` emettait `[data-mode="dark"]` (0,1,0) face a `[data-mode="dark"]:not([data-theme="light"])` (0,2,0) de `dark.css` : le theme sombre sans nom perdait sur `theme=dark/mode=dark`, `mode=dark` seul et `theme=site/mode=dark` (mesure Chromium : `--origam-color__action--primary---bg` restait a `#7c3aed`). Il peignait aussi sombre sous `data-theme="light" data-mode="dark"` par egalite d'ordre source (regle #807 violee). Le selecteur est desormais `html[data-mode="…"]` (dark : `(0,2,1)`, `:not([data-theme="light"])` conserve ; light : `(0,1,1)`), independant de l'ordre d'injection, et reste sous les blocs `:root:root[data-theme]` des marques nommees. Le doc `theme.interface.ts` (« scoped to `:root` ») est corrige. Spec : `unnamed-theme-specificity.spec.ts`.
+
 ## [2.26.1] - 2026-10-14
 
 ### Fixed — `warnLegacyColor` : dev uniquement, et plus d'avertissement pour `var()` / `color-mix()` (#1099)

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/dist/src/interfaces/Commons/theme.interface.d.ts

@@ -21,8 +21,11 @@ export interface IOrigamThemeSingletonState {
 /**
  * Runtime theme object ingested by `createOrigam({ themes })`. At install time
  * the DS resolves it to a block of `--origam-*` CSS variables injected into
- * `<head>`, scoped to `:root` (or `[data-theme="<name>"]` when `name` is set,
- * optionally narrowed by `[data-mode]` when `mode` is set).
+ * `<head>`, scoped by `name` / `mode` (see `themeSelector`):
+ * no `name` and no `mode` → `:root`; no `name` but a `mode` → `html[data-mode]`
+ * (plus a bare `[data-mode]` twin for sub-trees), specific enough to beat the
+ * built-in palette of that mode and still lose to every named brand (#1102);
+ * a `name` → `[data-theme="<name>"]`, optionally narrowed by `[data-mode]`.
  *
  * ## A theme has exactly THREE authoring surfaces
  *

package/dist/src/utils/Commons/apply-theme.util.cjs

@@ -74,7 +74,11 @@ function themeSelector(theme) {
   const hasName = typeof theme.name === "string" && theme.name.length > 0;
   const hasMode = theme.mode === "light" || theme.mode === "dark";
   if (!hasName && !hasMode) return ":root";
-  if (!hasName) return `[data-mode="${theme.mode}"]`;
+  if (!hasName) {
+    const root = theme.mode === "dark" ? 'html[data-mode="dark"]:not([data-theme="light"])' : 'html[data-mode="light"]';
+    const subtree = theme.mode === "dark" ? '[data-mode="dark"]:not([data-theme]):not([data-theme="light"])' : '[data-mode="light"]:not([data-theme])';
+    return `${root}, ${subtree}`;
+  }
   const modeAttr = hasMode ? `[data-mode="${theme.mode}"]` : "";
   const attrs = `[data-theme="${theme.name}"]${modeAttr}`;
   return `:root:root${attrs}, ${attrs}`;

package/dist/src/utils/Commons/apply-theme.util.d.ts

@@ -27,7 +27,8 @@ export declare function resolveThemeVars(theme: IOrigamTheme): TThemeVars;
  * Compute the CSS selector a theme block targets, from its `name` / `mode`:
  *   - neither            → `:root`
  *   - name only          → `[data-theme="<name>"]`
- *   - mode only          → `[data-mode="<mode>"]`
+ *   - mode only          → `html[data-mode="<mode>"], [data-mode="<mode>"]:not([data-theme])`
+ *                          (dark adds `:not([data-theme="light"])`, see #1102)
  *   - name + mode        → `[data-theme="<name>"][data-mode="<mode>"]`
  *
  * A `mode` of `'auto'` is treated as "no mode scoping".

package/dist/src/utils/Commons/apply-theme.util.js

@@ -55,7 +55,11 @@ export function themeSelector(theme) {
   const hasName = typeof theme.name === "string" && theme.name.length > 0;
   const hasMode = theme.mode === "light" || theme.mode === "dark";
   if (!hasName && !hasMode) return ":root";
-  if (!hasName) return `[data-mode="${theme.mode}"]`;
+  if (!hasName) {
+    const root = theme.mode === "dark" ? 'html[data-mode="dark"]:not([data-theme="light"])' : 'html[data-mode="light"]';
+    const subtree = theme.mode === "dark" ? '[data-mode="dark"]:not([data-theme]):not([data-theme="light"])' : '[data-mode="light"]:not([data-theme])';
+    return `${root}, ${subtree}`;
+  }
   const modeAttr = hasMode ? `[data-mode="${theme.mode}"]` : "";
   const attrs = `[data-theme="${theme.name}"]${modeAttr}`;
   return `:root:root${attrs}, ${attrs}`;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "origam",
-  "version": "2.26.1",
+  "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": [