@sentropic/design-system-vue 0.21.0 → 0.23.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;
@@ -10864,3 +10986,224 @@
   box-shadow: 0 0 0 2px var(--st-semantic-border-interactive);
   outline: none;
 }
+
+/* StepLineChart */
+.st-stepLineChart {
+    color: var(--st-semantic-data-category1);
+    display: block;
+    font-family: inherit;
+    position: relative;
+    width: 100%;
+  }
+
+  .st-stepLineChart--category1 { color: var(--st-semantic-data-category1); }
+  .st-stepLineChart--category2 { color: var(--st-semantic-data-category2); }
+  .st-stepLineChart--category3 { color: var(--st-semantic-data-category3); }
+  .st-stepLineChart--category4 { color: var(--st-semantic-data-category4); }
+  .st-stepLineChart--category5 { color: var(--st-semantic-data-category5); }
+  .st-stepLineChart--category6 { color: var(--st-semantic-data-category6); }
+  .st-stepLineChart--category7 { color: var(--st-semantic-data-category7); }
+  .st-stepLineChart--category8 { color: var(--st-semantic-data-category8); }
+
+  .st-stepLineChart svg {
+    display: block;
+    overflow: visible;
+  }
+
+  .st-stepLineChart__visual {
+    display: block;
+  }
+
+  .st-stepLineChart__grid {
+    stroke: var(--st-component-stepLineChart-gridStroke, var(--st-semantic-border-subtle));
+    stroke-dasharray: 2 3;
+    stroke-width: 1;
+    opacity: 0.7;
+  }
+
+  .st-stepLineChart__axis {
+    stroke: var(--st-component-stepLineChart-axisStroke, var(--st-semantic-border-subtle));
+    stroke-width: 1;
+  }
+
+  .st-stepLineChart__tickLabel {
+    fill: var(--st-component-stepLineChart-labelColor, var(--st-semantic-text-secondary));
+    font-size: 0.6875rem;
+  }
+
+  .st-stepLineChart__line {
+    stroke: currentColor;
+  }
+
+  .st-stepLineChart__dot {
+    fill: currentColor;
+    stroke: var(--st-semantic-surface-default);
+    stroke-width: 1.5;
+    cursor: pointer;
+    transition: r 120ms ease;
+  }
+
+  .st-stepLineChart__dot:hover,
+  .st-stepLineChart__dot:focus-visible {
+    r: 5.5;
+  }
+
+  .st-stepLineChart__dot:focus-visible {
+    outline: 2px solid var(--st-semantic-border-interactive);
+    outline-offset: 1px;
+  }
+
+  .st-stepLineChart__tooltip {
+    background: var(--st-component-stepLineChart-tooltipBackground, var(--st-semantic-surface-inverse));
+    border-radius: var(--st-radius-sm, 0.25rem);
+    color: var(--st-component-stepLineChart-tooltipText, 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-stepLineChart__tooltipLabel {
+    font-weight: 600;
+  }
+
+  .st-stepLineChart__tooltipValue {
+    opacity: 0.85;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .st-stepLineChart__dot {
+      transition: none;
+    }
+  }
+
+
+/* DivergentBarChart */
+.st-divergentBarChart {
+    color: var(--st-component-divergentBarChart-labelColor, var(--st-semantic-text-secondary));
+    display: block;
+    font-family: inherit;
+    position: relative;
+    width: 100%;
+  }
+
+  .st-divergentBarChart svg,
+  .st-divergentBarChart__visual {
+    display: block;
+    overflow: visible;
+  }
+
+  .st-divergentBarChart__grid {
+    stroke: var(--st-component-divergentBarChart-gridStroke, var(--st-semantic-border-subtle));
+    stroke-dasharray: 2 3;
+    stroke-width: 1;
+    opacity: 0.7;
+  }
+
+  .st-divergentBarChart__axis {
+    stroke: var(--st-component-divergentBarChart-axisStroke, var(--st-semantic-border-subtle));
+    stroke-width: 1;
+  }
+
+  .st-divergentBarChart__zeroAxis {
+    stroke: var(--st-component-divergentBarChart-zeroStroke, var(--st-semantic-border-strong));
+    stroke-width: 1.5;
+  }
+
+  .st-divergentBarChart__tickLabel,
+  .st-divergentBarChart__categoryLabel {
+    fill: var(--st-component-divergentBarChart-labelColor, var(--st-semantic-text-secondary));
+    font-size: 0.6875rem;
+  }
+
+  .st-divergentBarChart__bar {
+    cursor: pointer;
+    transition: opacity var(--st-motion-fast, 120ms) var(--st-motion-easing, ease);
+  }
+
+  .st-divergentBarChart__bar--positive {
+    fill: var(--st-component-divergentBarChart-positiveFill, var(--st-semantic-data-category5));
+  }
+
+  .st-divergentBarChart__bar--negative {
+    fill: var(--st-component-divergentBarChart-negativeFill, var(--st-semantic-data-category3));
+  }
+
+  .st-divergentBarChart__bar--neutral,
+  .st-divergentBarChart__bar--zero {
+    fill: var(--st-component-divergentBarChart-neutralFill, var(--st-semantic-data-category6));
+  }
+
+  .st-divergentBarChart__tooltip {
+    background: var(--st-component-divergentBarChart-tooltipBackground, var(--st-semantic-surface-inverse));
+    border-radius: var(--st-radius-sm, 0.25rem);
+    color: var(--st-component-divergentBarChart-tooltipText, 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-divergentBarChart__tooltipLabel {
+    font-weight: 600;
+  }
+
+  .st-divergentBarChart__tooltipValue {
+    opacity: 0.85;
+  }
+
+  .st-divergentBarChart__legend {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--st-spacing-3, 0.75rem);
+    list-style: none;
+    margin: var(--st-spacing-2, 0.5rem) 0 0;
+    padding: 0;
+  }
+
+  .st-divergentBarChart__legendItem {
+    align-items: center;
+    color: var(--st-semantic-text-secondary);
+    display: inline-flex;
+    font-size: 0.75rem;
+    gap: var(--st-spacing-1, 0.25rem);
+  }
+
+  .st-divergentBarChart__legendSwatch {
+    border-radius: 2px;
+    height: 0.7rem;
+    width: 0.7rem;
+  }
+
+  .st-divergentBarChart__legendSwatch--positive {
+    background: var(--st-component-divergentBarChart-positiveFill, var(--st-semantic-data-category5));
+  }
+
+  .st-divergentBarChart__legendSwatch--negative {
+    background: var(--st-component-divergentBarChart-negativeFill, var(--st-semantic-data-category3));
+  }
+
+  .st-divergentBarChart__legendSwatch--neutral {
+    background: var(--st-component-divergentBarChart-neutralFill, var(--st-semantic-data-category6));
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .st-divergentBarChart__bar {
+      transition: none;
+    }
+  }
+

package/package.json

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