origam 2.18.14 → 2.18.16

package/dist/src/components/Card/OrigamCard.vue

@@ -461,20 +461,20 @@ defineExpose({
 		&__overlay {
 			background-color: var(--origam-card__overlay---background-color, var(--origam-color__overlay---scrim));
 			border-radius: var(--origam-card__overlay---border-radius, inherit);
-			opacity: var(--origam-card__overlay---opacity, var(--origam-card---overlay-opacity, 0));
+			opacity: var(--origam-card__overlay---opacity, 0);
 			pointer-events: var(--origam-card__overlay---pointer-events, none);
 			position: var(--origam-card__overlay---position, absolute);
-			bottom: var(--origam-card__overlay---position-bottom, var(--origam-card---overlay-position-bottom, 0));
-			left: var(--origam-card__overlay---position-left, var(--origam-card---overlay-position-left, 0));
-			right: var(--origam-card__overlay---position-right, var(--origam-card---overlay-position-right, 0));
-			top: var(--origam-card__overlay---position-top, var(--origam-card---overlay-position-top, 0));
-			transition-property: var(--origam-card__overlay---transition-property, var(--origam-card---overlay-transition-property, opacity));
-			transition-duration: var(--origam-card__overlay---transition-duration, var(--origam-card---overlay-transition-duration, 0.2s));
-			transition-timing-function: var(--origam-card__overlay---transition-timing-function, var(--origam-card---overlay-transition-timing-function, ease-in-out));
+			bottom: var(--origam-card__overlay---position-bottom, 0);
+			left: var(--origam-card__overlay---position-left, 0);
+			right: var(--origam-card__overlay---position-right, 0);
+			top: var(--origam-card__overlay---position-top, 0);
+			transition-property: var(--origam-card__overlay---transition-property, opacity);
+			transition-duration: var(--origam-card__overlay---transition-duration, 0.2s);
+			transition-timing-function: var(--origam-card__overlay---transition-timing-function, ease-in-out);
 		}
 
 		&__underlay {
-			position: var(--origam-card__underlay---position, var(--origam-card---underlay-position, absolute));
+			position: var(--origam-card__underlay---position, absolute);
 		}
 
 		> * {
@@ -524,8 +524,8 @@ defineExpose({
 		}
 
 		&--loading {
-			min-width: var(--origam-card---loading-min-width, 240px);
-			min-height: var(--origam-card---loading-min-height, 120px);
+			min-width: var(--origam-card--loading---min-width, 240px);
+			min-height: var(--origam-card--loading---min-height, 120px);
 		}
 
 		&__loader {
@@ -565,6 +565,13 @@ defineExpose({
 			z-index: var(--origam-card__loader---z-index, 3);
 			min-height: 0;
 			border-radius: inherit;
+			// ⛔ LEFT UNDECLARED ON PURPOSE (#593). Declaring this token in the token
+			// sheets would substitute the `color-mix()` at `:root`, where
+			// `--origam-card---background` holds the root default — freezing the
+			// scrim to that one colour. Undeclared, the fallback is evaluated on THIS
+			// element, so the mix follows whatever background the card actually
+			// carries. Wiring it would cost that and buy a channel that
+			// `--origam-card---background` already covers.
 			background-color: var(--origam-card__loader---overlay-background, color-mix(in srgb, var(--origam-card---background) 62%, transparent));
 
 			:deep(.origam-progress--circular) {
@@ -650,34 +657,34 @@ defineExpose({
 			--origam-card---cursor: pointer;
 
 			&:before {
-				border-radius: var(--origam-card__before---border-radius, var(--origam-card---before-border-radius, inherit));
-				bottom: var(--origam-card__before---bottom, var(--origam-card---before-bottom, 0));
-				content: var(--origam-card__before---content, var(--origam-card---before-content, ""));
-				display: var(--origam-card__before---display, var(--origam-card---before-display, block));
-				left: var(--origam-card__before---left, var(--origam-card---before-left, 0));
-				pointer-events: var(--origam-card__before---pointer-events, var(--origam-card---before-pointer-events, none));
-				position: var(--origam-card__before---position, var(--origam-card---before-position, absolute));
-				right: var(--origam-card__before---right, var(--origam-card---before-right, 0));
-				top: var(--origam-card__before---top, var(--origam-card---before-top, 0));
-				transition: var(--origam-card__before---transition, var(--origam-card---before-transition, inherit));
-				opacity: var(--origam-card__before---opacity, var(--origam-card---before-opacity, 1));
-				z-index: var(--origam-card__before---z-index, var(--origam-card---before-z-index, -1));
+				border-radius: var(--origam-card__before---border-radius, inherit);
+				bottom: var(--origam-card__before---bottom, 0);
+				content: var(--origam-card__before---content, "");
+				display: var(--origam-card__before---display, block);
+				left: var(--origam-card__before---left, 0);
+				pointer-events: var(--origam-card__before---pointer-events, none);
+				position: var(--origam-card__before---position, absolute);
+				right: var(--origam-card__before---right, 0);
+				top: var(--origam-card__before---top, 0);
+				transition: var(--origam-card__before---transition, inherit);
+				opacity: var(--origam-card__before---opacity, 1);
+				z-index: var(--origam-card__before---z-index, -1);
 				box-shadow: var(--origam-card__before---box-shadow, var(--origam-card---before-box-shadow));
 			}
 
 			&:after {
-				border-radius: var(--origam-card__after---border-radius, var(--origam-card---after-border-radius, inherit));
-				bottom: var(--origam-card__after---bottom, var(--origam-card---after-bottom, 0));
-				content: var(--origam-card__after---content, var(--origam-card---after-content, ""));
-				display: var(--origam-card__after---display, var(--origam-card---after-display, block));
-				left: var(--origam-card__after---left, var(--origam-card---after-left, 0));
-				pointer-events: var(--origam-card__after---pointer-events, var(--origam-card---after-pointer-events, none));
-				position: var(--origam-card__after---position, var(--origam-card---after-position, absolute));
-				right: var(--origam-card__after---right, var(--origam-card---after-right, 0));
-				top: var(--origam-card__after---top, var(--origam-card---after-top, 0));
-				transition: var(--origam-card__after---transition, var(--origam-card---after-transition, inherit));
-				z-index: var(--origam-card__after---z-index, var(--origam-card---after-z-index, 1));
-				opacity: var(--origam-card__after---opacity, var(--origam-card---after-opacity, 0));
+				border-radius: var(--origam-card__after---border-radius, inherit);
+				bottom: var(--origam-card__after---bottom, 0);
+				content: var(--origam-card__after---content, "");
+				display: var(--origam-card__after---display, block);
+				left: var(--origam-card__after---left, 0);
+				pointer-events: var(--origam-card__after---pointer-events, none);
+				position: var(--origam-card__after---position, absolute);
+				right: var(--origam-card__after---right, 0);
+				top: var(--origam-card__after---top, 0);
+				transition: var(--origam-card__after---transition, inherit);
+				z-index: var(--origam-card__after---z-index, 1);
+				opacity: var(--origam-card__after---opacity, 0);
 				box-shadow: var(--origam-card__after---box-shadow, var(--origam-card---after-box-shadow));
 			}
 

package/dist/src/components/Chart/OrigamChartAxis.vue

@@ -137,6 +137,16 @@ const formatSecondaryY = (value) => {
 		stroke-width: var(--origam-chart__axis---stroke-width, 1);
 	}
 
+	/*
+	 * ⛔ `--origam-chart__axis-label---font-size` reste NON DECLARE dans les
+	 * feuilles (#591), volontairement : les huit lectures de la famille Chart
+	 * ne s'accordent pas sur leur repli — 0.75rem ici, dans Bullet (echelle
+	 * principale), Cartesian, Gauge et Radar ; 0.6875rem dans BoxPlot,
+	 * Candlestick et la seconde echelle de Bullet. Une declaration unique
+	 * changerait donc le rendu de l'un des deux camps. Trancher demande un
+	 * choix de design (valeur commune, ou second token pour l'echelle
+	 * secondaire) : remonte a l'utilisateur, pas cable en silence.
+	 */
 	.origam-chart__axis-label {
 		fill: var(--origam-chart__axis-label---color, var(--origam-color__text---secondary, #6b7280));
 		font-size: var(--origam-chart__axis-label---font-size, 0.75rem);

package/dist/src/components/Chart/OrigamChartBoxPlot.vue

@@ -726,19 +726,19 @@ const onSeriesToggle = (series, nextVisible) => {
 		}
 
 		.origam-chart__grid-line {
-			stroke: var(--origam-chart__grid---stroke-color, var(--origam-color__border---subtle, #e5e7eb));
+			stroke: var(--origam-chart__grid---color, var(--origam-color__border---subtle, #e5e7eb));
 			stroke-width: 1;
 			stroke-dasharray: 4 4;
 		}
 
 		.origam-chart__axis-line {
-			stroke: var(--origam-chart__axis---stroke-color, var(--origam-color__border---default, #d1d5db));
+			stroke: var(--origam-chart__axis---color, var(--origam-color__border---default, #d1d5db));
 			stroke-width: 1;
 		}
 
 		.origam-chart__axis-label {
 			font-size: var(--origam-chart__axis-label---font-size, 0.6875rem);
-			fill: var(--origam-chart__axis-label---fill, var(--origam-color__text---secondary, #6b7280));
+			fill: var(--origam-chart__axis-label---color, var(--origam-color__text---secondary, #6b7280));
 		}
 
 		.origam-chart__box-rect {

package/dist/src/components/Chart/OrigamChartCandlestick.vue

@@ -611,14 +611,14 @@ const onSeriesToggle = (series, nextVisible) => {
 		}
 
 		&__grid-line {
-			stroke: var(--origam-chart__grid---stroke-color, var(--origam-color__border---subtle, #e5e7eb));
+			stroke: var(--origam-chart__grid---color, var(--origam-color__border---subtle, #e5e7eb));
 			stroke-width: var(--origam-chart__grid---stroke-width, 1);
 			fill: none;
 		}
 
 		&__axis-label {
 			font-size: var(--origam-chart__axis-label---font-size, 0.6875rem);
-			fill: var(--origam-chart__axis-label---fill, var(--origam-color__text---secondary, #6b7280));
+			fill: var(--origam-chart__axis-label---color, var(--origam-color__text---secondary, #6b7280));
 			user-select: none;
 			pointer-events: none;
 		}

package/dist/src/components/Chart/OrigamChartCartesian.vue

@@ -1475,7 +1475,7 @@ const pointAriaLabel = (path) => {
 		}
 
 		.origam-chart__annotation-callout-text {
-			fill: var(--origam-chart__annotation-callout---text-color, #ffffff);
+			fill: var(--origam-chart__annotation-callout---color, #ffffff);
 			font-size: var(--origam-chart__annotation-callout---font-size, 0.6875rem);
 			font-weight: var(--origam-chart__annotation-callout---font-weight, 600);
 			pointer-events: none;

package/dist/src/components/Grid/OrigamGrid.vue

@@ -179,6 +179,34 @@ defineExpose({
 </script>
 
 <style lang="scss" scoped>
+	/*
+	 * ⛔ Neutralise la feuille du NAVIGATEUR, pas celle d'un consommateur.
+	 *
+	 * Le theme de base du DS (`themes/origam.theme.ts`) pose `tag: 'ul'` sur
+	 * `origam-grid` et `tag: 'li'` sur `origam-grid-item` — choix semantique
+	 * volontaire. Mais une grille n'est pas une liste a puces, et le navigateur
+	 * applique quand meme ses styles de `ul` : une PUCE par element et une
+	 * INDENTATION de 40px.
+	 *
+	 * Mesure sur `/wireframe` avant correctif : `list-style-type: circle` sur
+	 * 9 `origam-grid-item` visibles, et `padding-inline-start: 40px` sur 3 des
+	 * 7 grilles de la page. Les autres pages du site ne montraient rien parce
+	 * qu'elles remettaient `list-style: none` a la main, page par page — c'est
+	 * exactement le signal qu'il manquait quelque chose ICI.
+	 *
+	 * ⚠️ `:where()` n'est pas decoratif : il met la specificite a ZERO. Une
+	 * regle scopee ordinaire vaudrait (0,2,0) et CONFISQUERAIT le canal
+	 * `padding` — les classes utilitaires emises par `usePadding` valent
+	 * (0,1,0) et perdraient. C'est precisement le defaut mesure dans #950.
+	 * A (0,0,0) la regle bat l'origine NAVIGATEUR (toute declaration d'auteur
+	 * la bat, quelle que soit sa specificite) et perd contre tout ce qu'un
+	 * consommateur ecrit.
+	 */
+	:where(.origam-grid) {
+		list-style: none;
+		padding-inline-start: 0;
+	}
+
 	.origam-grid {
 		display: grid;
 		grid-template-columns: var(--origam-grid---template-columns, none);