@sentropic/design-system-vue 0.22.0 → 0.24.0

package/dist/styles.css

@@ -5529,6 +5529,128 @@
     background: var(--st-semantic-feedback-error);
   }
 
+  .st-rangeSlider__header {
+    align-items: baseline;
+    display: flex;
+    gap: 0.5rem;
+    justify-content: space-between;
+  }
+
+  .st-rangeSlider__value {
+    color: var(--st-semantic-text-secondary);
+    font-size: 0.875rem;
+    font-variant-numeric: tabular-nums;
+  }
+
+  .st-rangeSlider {
+    align-items: center;
+    display: flex;
+    gap: 0.75rem;
+    width: 100%;
+  }
+
+  .st-rangeSlider__bounds {
+    color: var(--st-semantic-text-muted);
+    flex: 0 0 auto;
+    font-size: 0.75rem;
+    font-variant-numeric: tabular-nums;
+  }
+
+  .st-rangeSlider__track {
+    background: var(--st-component-control-border, var(--st-semantic-border-subtle));
+    border-radius: 999px;
+    flex: 1 1 auto;
+    height: 0.25rem;
+    position: relative;
+  }
+
+  .st-rangeSlider--sm .st-rangeSlider__track {
+    height: 0.1875rem;
+  }
+
+  .st-rangeSlider--lg .st-rangeSlider__track {
+    height: 0.375rem;
+  }
+
+  .st-rangeSlider__fill {
+    background: var(--st-semantic-action-primary);
+    border-radius: 999px;
+    display: block;
+    height: 100%;
+    position: absolute;
+    top: 0;
+  }
+
+  .st-rangeSlider__thumb {
+    background: var(--st-semantic-action-primary);
+    border-radius: 50%;
+    box-sizing: border-box;
+    cursor: pointer;
+    height: 1rem;
+    position: absolute;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    width: 1rem;
+  }
+
+  .st-rangeSlider--sm .st-rangeSlider__thumb {
+    height: 0.75rem;
+    width: 0.75rem;
+  }
+
+  .st-rangeSlider--lg .st-rangeSlider__thumb {
+    height: 1.25rem;
+    width: 1.25rem;
+  }
+
+  .st-rangeSlider__thumb:focus-visible {
+    outline: 2px solid var(--st-component-control-focusRing, var(--st-semantic-border-interactive));
+    outline-offset: 4px;
+  }
+
+  .st-rangeSlider__tooltip {
+    background: var(--st-semantic-text-primary);
+    border-radius: var(--st-component-control-radius, 0.375rem);
+    bottom: calc(100% + 0.375rem);
+    color: var(--st-semantic-surface-default);
+    font-size: 0.6875rem;
+    font-weight: 600;
+    left: 50%;
+    line-height: 1;
+    opacity: 0;
+    padding: 0.25rem 0.375rem;
+    pointer-events: none;
+    position: absolute;
+    transform: translateX(-50%);
+    transition: opacity var(--st-motion-fast, 120ms) var(--st-motion-easing, ease);
+    white-space: nowrap;
+  }
+
+  .st-rangeSlider__thumb:hover .st-rangeSlider__tooltip,
+  .st-rangeSlider__thumb:focus-visible .st-rangeSlider__tooltip {
+    opacity: 1;
+  }
+
+  .st-rangeSlider--disabled .st-rangeSlider__thumb,
+  .st-rangeSlider--disabled .st-rangeSlider__fill {
+    background: var(--st-semantic-text-muted);
+  }
+
+  .st-rangeSlider--disabled .st-rangeSlider__thumb {
+    cursor: not-allowed;
+  }
+
+  .st-rangeSlider__track[aria-invalid="true"] .st-rangeSlider__fill,
+  .st-rangeSlider__track[aria-invalid="true"] .st-rangeSlider__thumb {
+    background: var(--st-semantic-feedback-error);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .st-rangeSlider__tooltip {
+      transition: none;
+    }
+  }
+
 .st-sparkline {
     display: inline-flex;
     line-height: 0;
@@ -11085,3 +11207,158 @@
     }
   }
 
+
+/* ── 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; }

package/package.json

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