@sentropic/design-system-vue 0.36.40 → 0.36.42

package/dist/styles.css

@@ -16645,3 +16645,269 @@
     transition: none;
   }
 }
+
+.st-renkoChart {
+  color: var(--st-semantic-text-secondary);
+  display: block;
+  font-family: inherit;
+  position: relative;
+  width: 100%;
+}
+
+.st-renkoChart svg {
+  display: block;
+  overflow: visible;
+}
+
+.st-renkoChart__visual {
+  display: block;
+}
+
+.st-renkoChart__grid {
+  opacity: 0.5;
+  stroke: var(--st-semantic-border-subtle);
+  stroke-dasharray: 2 3;
+  stroke-width: 1;
+}
+
+.st-renkoChart__axis {
+  stroke: var(--st-semantic-border-subtle);
+  stroke-width: 1;
+}
+
+.st-renkoChart__tick {
+  fill: var(--st-semantic-text-secondary);
+  font-size: 0.6875rem;
+}
+
+.st-renkoChart__brick {
+  cursor: pointer;
+  stroke: var(--st-semantic-surface-default, Canvas);
+  stroke-width: 0.5;
+  transition: opacity 120ms ease;
+}
+
+.st-renkoChart__brick--dim {
+  opacity: 0.35;
+}
+
+.st-renkoChart__brick--up {
+  fill: var(--st-semantic-feedback-success);
+}
+
+.st-renkoChart__brick--down {
+  fill: var(--st-semantic-feedback-error);
+}
+
+.st-renkoChart__tooltip {
+  background: var(--st-semantic-surface-inverse);
+  border-radius: var(--st-radius-sm, 0.25rem);
+  color: var(--st-semantic-text-inverse);
+  display: inline-flex;
+  flex-direction: column;
+  font-size: 0.75rem;
+  gap: 0.125rem;
+  line-height: 1.2;
+  padding: 0.375rem 0.5rem;
+  pointer-events: none;
+  position: absolute;
+  transform: translate(-50%, calc(-100% - 8px));
+  white-space: nowrap;
+  z-index: 1;
+}
+
+.st-renkoChart__tooltipLabel {
+  font-weight: 600;
+}
+
+.st-renkoChart__tooltipValue {
+  opacity: 0.85;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .st-renkoChart__brick {
+    transition: none;
+  }
+}
+
+.st-pointAndFigureChart {
+  color: var(--st-semantic-text-secondary);
+  display: block;
+  font-family: inherit;
+  position: relative;
+  width: 100%;
+}
+
+.st-pointAndFigureChart svg {
+  display: block;
+  overflow: visible;
+}
+
+.st-pointAndFigureChart__visual {
+  display: block;
+}
+
+.st-pointAndFigureChart__grid {
+  opacity: 0.5;
+  stroke: var(--st-semantic-border-subtle);
+  stroke-dasharray: 2 3;
+  stroke-width: 1;
+}
+
+.st-pointAndFigureChart__axis {
+  stroke: var(--st-semantic-border-subtle);
+  stroke-width: 1;
+}
+
+.st-pointAndFigureChart__tick {
+  fill: var(--st-semantic-text-secondary);
+  font-size: 0.6875rem;
+}
+
+.st-pointAndFigureChart__mark {
+  transition: opacity 120ms ease;
+}
+
+.st-pointAndFigureChart__mark--dim {
+  opacity: 0.35;
+}
+
+.st-pointAndFigureChart__glyph {
+  cursor: pointer;
+  fill: none;
+  stroke-linecap: round;
+  stroke-width: 2;
+}
+
+.st-pointAndFigureChart__mark--x .st-pointAndFigureChart__glyph,
+.st-pointAndFigureChart__mark--x.st-pointAndFigureChart__glyph {
+  stroke: var(--st-semantic-feedback-success);
+}
+
+.st-pointAndFigureChart__mark--o .st-pointAndFigureChart__glyph,
+.st-pointAndFigureChart__mark--o.st-pointAndFigureChart__glyph {
+  stroke: var(--st-semantic-feedback-error);
+}
+
+.st-pointAndFigureChart__tooltip {
+  background: var(--st-semantic-surface-inverse);
+  border-radius: var(--st-radius-sm, 0.25rem);
+  color: var(--st-semantic-text-inverse);
+  display: inline-flex;
+  flex-direction: column;
+  font-size: 0.75rem;
+  gap: 0.125rem;
+  line-height: 1.2;
+  padding: 0.375rem 0.5rem;
+  pointer-events: none;
+  position: absolute;
+  transform: translate(-50%, calc(-100% - 8px));
+  white-space: nowrap;
+  z-index: 1;
+}
+
+.st-pointAndFigureChart__tooltipLabel {
+  font-weight: 600;
+}
+
+.st-pointAndFigureChart__tooltipValue {
+  opacity: 0.85;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .st-pointAndFigureChart__mark {
+    transition: none;
+  }
+}
+
+/* ---------------------------------------------------------------------------
+   ColorSwatch — affiche UNE couleur arbitraire (hex/rgb/oklch/token) sous forme
+   de pastille. La couleur passée en prop est rendue via un background inline
+   (raison d'être du composant) ; le style propre ci-dessous reste token-only.
+   --------------------------------------------------------------------------- */
+.st-colorSwatch {
+  align-items: center;
+  color: var(--st-semantic-text-secondary, inherit);
+  display: inline-flex;
+  font-family: inherit;
+  gap: var(--st-spacing-2, 0.5rem);
+  line-height: 1;
+  vertical-align: middle;
+}
+
+.st-colorSwatch__chip {
+  border: var(--st-border-width-thin, 1px) solid
+    var(--st-semantic-border-subtle, var(--st-semantic-border-strong, rgba(0, 0, 0, 0.12)));
+  border-radius: var(--st-radius-sm, 0.25rem);
+  box-sizing: border-box;
+  display: inline-block;
+  flex: none;
+}
+
+.st-colorSwatch--circle .st-colorSwatch__chip {
+  border-radius: var(--st-radius-full, 999px);
+}
+
+.st-colorSwatch--pill .st-colorSwatch__chip {
+  border-radius: var(--st-radius-pill, var(--st-radius-full, 999px));
+}
+
+.st-colorSwatch__label {
+  color: var(--st-semantic-text-primary, inherit);
+  font-size: 0.875rem;
+  font-variant-numeric: tabular-nums;
+}
+
+/* ---------------------------------------------------------------------------
+   ColorScaleBar — échelle de couleur continue (gradient) à partir de stops
+   arbitraires. Le gradient est rendu via un background inline (raison d'être) ;
+   le style propre ci-dessous reste token-only.
+   --------------------------------------------------------------------------- */
+.st-colorScaleBar {
+  color: var(--st-semantic-text-secondary, inherit);
+  display: inline-flex;
+  flex-direction: column;
+  font-family: inherit;
+  gap: var(--st-spacing-1, 0.25rem);
+}
+
+.st-colorScaleBar__label {
+  color: var(--st-semantic-text-primary, inherit);
+  font-size: 0.875rem;
+  line-height: 1.2;
+}
+
+.st-colorScaleBar__track {
+  align-items: center;
+  display: inline-flex;
+  gap: var(--st-spacing-2, 0.5rem);
+}
+
+.st-colorScaleBar--vertical .st-colorScaleBar__track {
+  flex-direction: column;
+}
+
+.st-colorScaleBar__bar {
+  border: var(--st-border-width-thin, 1px) solid
+    var(--st-semantic-border-subtle, var(--st-semantic-border-strong, rgba(0, 0, 0, 0.12)));
+  border-radius: var(--st-radius-sm, 0.25rem);
+  box-sizing: border-box;
+}
+
+.st-colorScaleBar--horizontal .st-colorScaleBar__bar {
+  height: var(--st-colorScaleBar-thickness, 0.75rem);
+  width: var(--st-colorScaleBar-length, 12rem);
+}
+
+.st-colorScaleBar--vertical .st-colorScaleBar__bar {
+  height: var(--st-colorScaleBar-length, 12rem);
+  width: var(--st-colorScaleBar-thickness, 0.75rem);
+}
+
+.st-colorScaleBar__end {
+  color: var(--st-semantic-text-secondary, inherit);
+  font-size: 0.75rem;
+  font-variant-numeric: tabular-nums;
+  line-height: 1;
+  white-space: nowrap;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sentropic/design-system-vue",
-  "version": "0.36.40",
+  "version": "0.36.42",
   "description": "Vue 3 components for the Sentropic design system.",
   "type": "module",
   "publishConfig": {