@sentropic/design-system-vue 0.23.0 → 0.25.0

package/dist/styles.css

@@ -11207,3 +11207,312 @@
     }
   }
 
+
+/* ── ChordDiagram ── */
+.st-chordDiagram {
+  color: var(--st-semantic-text-secondary);
+  display: block;
+  font-family: inherit;
+  max-width: 100%;
+  position: relative;
+  width: 100%;
+}
+
+.st-chordDiagram svg,
+.st-chordDiagram__visual {
+  display: block;
+  overflow: visible;
+}
+
+.st-chordDiagram__ribbon {
+  cursor: pointer;
+  fill-opacity: 0.4;
+  stroke-opacity: 0.55;
+  transition: opacity 120ms ease;
+}
+
+.st-chordDiagram__ribbon:hover {
+  fill-opacity: 0.62;
+}
+
+.st-chordDiagram__ribbon--dim {
+  opacity: 0.18;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .st-chordDiagram__ribbon {
+    transition: none;
+  }
+}
+
+.st-chordDiagram__arc {
+  stroke: var(--st-semantic-surface-default, Canvas);
+  stroke-width: 1;
+}
+
+.st-chordDiagram__arc--category1,
+.st-chordDiagram__ribbon--category1 { fill: var(--st-semantic-data-category1); stroke: var(--st-semantic-data-category1); }
+.st-chordDiagram__arc--category2,
+.st-chordDiagram__ribbon--category2 { fill: var(--st-semantic-data-category2); stroke: var(--st-semantic-data-category2); }
+.st-chordDiagram__arc--category3,
+.st-chordDiagram__ribbon--category3 { fill: var(--st-semantic-data-category3); stroke: var(--st-semantic-data-category3); }
+.st-chordDiagram__arc--category4,
+.st-chordDiagram__ribbon--category4 { fill: var(--st-semantic-data-category4); stroke: var(--st-semantic-data-category4); }
+.st-chordDiagram__arc--category5,
+.st-chordDiagram__ribbon--category5 { fill: var(--st-semantic-data-category5); stroke: var(--st-semantic-data-category5); }
+.st-chordDiagram__arc--category6,
+.st-chordDiagram__ribbon--category6 { fill: var(--st-semantic-data-category6); stroke: var(--st-semantic-data-category6); }
+.st-chordDiagram__arc--category7,
+.st-chordDiagram__ribbon--category7 { fill: var(--st-semantic-data-category7); stroke: var(--st-semantic-data-category7); }
+.st-chordDiagram__arc--category8,
+.st-chordDiagram__ribbon--category8 { fill: var(--st-semantic-data-category8); stroke: var(--st-semantic-data-category8); }
+
+.st-chordDiagram__arcLabel {
+  /* fill calculé par contrastTextForTone() en inline */
+  font-size: 0.7rem;
+  font-weight: 600;
+  pointer-events: none;
+}
+
+.st-chordDiagram__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%, -115%);
+  white-space: nowrap;
+  z-index: 1;
+}
+
+.st-chordDiagram__tooltipLabel { font-weight: 600; }
+.st-chordDiagram__tooltipValue { opacity: 0.85; }
+
+/* ── PackedBubblesChart ── */
+.st-packedBubblesChart {
+  color: var(--st-semantic-text-secondary);
+  display: block;
+  font-family: inherit;
+  max-width: 100%;
+  position: relative;
+  width: 100%;
+}
+
+.st-packedBubblesChart svg,
+.st-packedBubblesChart__visual {
+  display: block;
+  overflow: visible;
+}
+
+.st-packedBubblesChart__circle {
+  cursor: pointer;
+  stroke: var(--st-semantic-surface-default, Canvas);
+  stroke-width: 1.5;
+  transition: opacity 120ms ease;
+}
+
+.st-packedBubblesChart__circle--dim {
+  opacity: 0.4;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .st-packedBubblesChart__circle {
+    transition: none;
+  }
+}
+
+.st-packedBubblesChart__circle--category1 { fill: var(--st-semantic-data-category1); }
+.st-packedBubblesChart__circle--category2 { fill: var(--st-semantic-data-category2); }
+.st-packedBubblesChart__circle--category3 { fill: var(--st-semantic-data-category3); }
+.st-packedBubblesChart__circle--category4 { fill: var(--st-semantic-data-category4); }
+.st-packedBubblesChart__circle--category5 { fill: var(--st-semantic-data-category5); }
+.st-packedBubblesChart__circle--category6 { fill: var(--st-semantic-data-category6); }
+.st-packedBubblesChart__circle--category7 { fill: var(--st-semantic-data-category7); }
+.st-packedBubblesChart__circle--category8 { fill: var(--st-semantic-data-category8); }
+
+.st-packedBubblesChart__label {
+  /* fill calculé par contrastTextForTone() en inline */
+  font-size: 0.7rem;
+  font-weight: 600;
+  pointer-events: none;
+}
+
+.st-packedBubblesChart__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%, -115%);
+  white-space: nowrap;
+  z-index: 1;
+}
+
+.st-packedBubblesChart__tooltipLabel { font-weight: 600; }
+.st-packedBubblesChart__tooltipValue { opacity: 0.85; }
+
+/* ── RoseChart (nightingale / polar area) ── */
+.st-roseChart {
+  color: var(--st-semantic-text-secondary);
+  display: block;
+  font-family: inherit;
+  max-width: 100%;
+  position: relative;
+  width: 100%;
+}
+
+.st-roseChart svg,
+.st-roseChart__visual {
+  display: block;
+  overflow: visible;
+}
+
+.st-roseChart__sector {
+  cursor: pointer;
+  fill-opacity: 0.82;
+  stroke: var(--st-semantic-surface-default, Canvas);
+  stroke-width: 1;
+  transition: opacity 120ms ease;
+}
+
+.st-roseChart__sector--dim {
+  opacity: 0.4;
+}
+
+.st-roseChart__sector--category1 { fill: var(--st-semantic-data-category1); }
+.st-roseChart__sector--category2 { fill: var(--st-semantic-data-category2); }
+.st-roseChart__sector--category3 { fill: var(--st-semantic-data-category3); }
+.st-roseChart__sector--category4 { fill: var(--st-semantic-data-category4); }
+.st-roseChart__sector--category5 { fill: var(--st-semantic-data-category5); }
+.st-roseChart__sector--category6 { fill: var(--st-semantic-data-category6); }
+.st-roseChart__sector--category7 { fill: var(--st-semantic-data-category7); }
+.st-roseChart__sector--category8 { fill: var(--st-semantic-data-category8); }
+
+.st-roseChart__label {
+  font-size: 0.68rem;
+  font-weight: 650;
+  pointer-events: none;
+}
+
+.st-roseChart__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%, -115%);
+  white-space: nowrap;
+  z-index: 1;
+}
+
+.st-roseChart__tooltipLabel { font-weight: 600; }
+.st-roseChart__tooltipValue { opacity: 0.85; }
+
+@media (prefers-reduced-motion: reduce) {
+  .st-roseChart__sector {
+    transition: none;
+  }
+}
+
+/* ── ViolinChart (distribution density) ── */
+.st-violinChart {
+  color: var(--st-semantic-text-secondary);
+  display: block;
+  font-family: inherit;
+  max-width: 100%;
+  position: relative;
+  width: 100%;
+}
+
+.st-violinChart svg,
+.st-violinChart__visual {
+  display: block;
+  overflow: visible;
+}
+
+.st-violinChart__axis {
+  stroke: var(--st-semantic-border-subtle);
+  stroke-width: 1;
+}
+
+.st-violinChart__shape {
+  cursor: pointer;
+  fill-opacity: 0.72;
+  stroke: var(--st-semantic-surface-default, Canvas);
+  stroke-width: 1;
+  transition: opacity 120ms ease;
+}
+
+.st-violinChart__shape--dim {
+  opacity: 0.4;
+}
+
+.st-violinChart__shape--category1 { fill: var(--st-semantic-data-category1); }
+.st-violinChart__shape--category2 { fill: var(--st-semantic-data-category2); }
+.st-violinChart__shape--category3 { fill: var(--st-semantic-data-category3); }
+.st-violinChart__shape--category4 { fill: var(--st-semantic-data-category4); }
+.st-violinChart__shape--category5 { fill: var(--st-semantic-data-category5); }
+.st-violinChart__shape--category6 { fill: var(--st-semantic-data-category6); }
+.st-violinChart__shape--category7 { fill: var(--st-semantic-data-category7); }
+.st-violinChart__shape--category8 { fill: var(--st-semantic-data-category8); }
+
+.st-violinChart__box {
+  fill: var(--st-semantic-surface-default, Canvas);
+  fill-opacity: 0.85;
+  stroke: var(--st-semantic-text-secondary);
+  stroke-width: 1;
+}
+
+.st-violinChart__median {
+  stroke: var(--st-semantic-text-primary);
+  stroke-width: 2;
+}
+
+.st-violinChart__label {
+  fill: var(--st-semantic-text-secondary);
+  font-size: 0.75rem;
+}
+
+.st-violinChart__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%, -115%);
+  white-space: nowrap;
+  z-index: 1;
+}
+
+.st-violinChart__tooltipLabel { font-weight: 600; }
+.st-violinChart__tooltipValue { opacity: 0.85; }
+
+@media (prefers-reduced-motion: reduce) {
+  .st-violinChart__shape {
+    transition: none;
+  }
+}

package/package.json

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