@stn-uiux/pub-ui 0.1.81 → 0.1.82

package/styles/components/stn-combo-chart.css

@@ -0,0 +1,279 @@
+@charset "utf-8";
+
+/**
+ * STN Design System — Combo Chart Component (.stn-chart-combo)
+ * Mixed Bar + Line composite chart with dual Y-axes.
+ * 100% strictly tokenized via STN semantic design tokens (--stn-chart-*).
+ */
+
+.stn-chart-combo {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  position: relative;
+  box-sizing: border-box;
+}
+
+.stn-chart-combo__body {
+  position: relative;
+  flex: 1 1 0%;
+  width: 100%;
+  min-height: var(--stn-chart-body-min-height);
+  display: flex;
+  box-sizing: border-box;
+}
+
+/* Y-Axes (Left and Right) */
+.stn-chart-combo__axis-y-left,
+.stn-chart-combo__axis-y-right {
+  position: absolute;
+  top: var(--stn-chart-grid-inset-top);
+  bottom: var(--stn-chart-grid-inset-bottom-combo);
+  width: var(--stn-chart-combo-axis-y-width);
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  pointer-events: none;
+  z-index: 3;
+  font-family: var(--stn-font-body);
+  font-size: var(--stn-font-size-10);
+  color: var(--stn-chart-axis-text);
+  line-height: var(--stn-line-height-tight);
+}
+
+.stn-chart-combo__axis-y-left {
+  left: 0;
+  text-align: right;
+  padding-right: var(--stn-chart-combo-axis-y-padding);
+}
+
+.stn-chart-combo__axis-y-right {
+  right: 0;
+  text-align: left;
+  padding-left: var(--stn-chart-combo-axis-y-padding);
+}
+
+.stn-chart-combo--no-left-y-axis .stn-chart-combo__axis-y-left,
+.hide-left-y-axis .stn-chart-combo__axis-y-left {
+  display: none;
+}
+
+.stn-chart-combo--no-right-y-axis .stn-chart-combo__axis-y-right,
+.hide-right-y-axis .stn-chart-combo__axis-y-right {
+  display: none;
+}
+
+/* Background Grid Lines */
+.stn-chart-combo__grid {
+  position: absolute;
+  inset: var(--stn-chart-grid-inset-top) var(--stn-chart-combo-grid-offset-x) var(--stn-chart-grid-inset-bottom-combo) var(--stn-chart-combo-grid-offset-x);
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  pointer-events: none;
+  z-index: 0;
+}
+
+.stn-chart-combo--no-left-y-axis .stn-chart-combo__grid {
+  left: var(--stn-chart-grid-row-gap);
+}
+
+.stn-chart-combo--no-right-y-axis .stn-chart-combo__grid {
+  right: var(--stn-chart-grid-row-gap);
+}
+
+.stn-chart-combo__grid-row {
+  display: flex;
+  align-items: center;
+  height: 0;
+  width: 100%;
+}
+
+.stn-chart-combo__grid-line {
+  flex: 1;
+  border-bottom: var(--stn-chart-border-width) dashed var(--stn-chart-grid-line);
+}
+
+.stn-chart-combo__grid-line--zero {
+  border-bottom: var(--stn-chart-border-width) solid var(--stn-chart-zero-line);
+}
+
+/* Content Area (Columns + SVG Lines Overlay) */
+.stn-chart-combo__content {
+  position: absolute;
+  inset: var(--stn-chart-grid-inset-top) var(--stn-chart-combo-grid-offset-x) var(--stn-chart-grid-inset-bottom-combo) var(--stn-chart-combo-grid-offset-x);
+  display: flex;
+  z-index: 1;
+}
+
+.stn-chart-combo--no-left-y-axis .stn-chart-combo__content {
+  left: var(--stn-chart-grid-row-gap);
+}
+
+.stn-chart-combo--no-right-y-axis .stn-chart-combo__content {
+  right: var(--stn-chart-grid-row-gap);
+}
+
+/* Columns List (Bars) */
+.stn-chart-combo__columns {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  position: relative;
+  z-index: 1;
+}
+
+.stn-chart-combo__col {
+  flex: 1;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-end;
+  position: relative;
+  background: transparent;
+  border: none;
+  padding: 0 var(--stn-chart-combo-col-padding-x);
+  cursor: pointer;
+  box-sizing: border-box;
+}
+
+.stn-chart-combo__highlight {
+  display: none;
+  position: absolute;
+  inset: 0;
+  background: var(--stn-chart-highlight-bg);
+  border: var(--stn-chart-border-width) solid var(--stn-chart-highlight-border);
+  border-bottom: none;
+  border-radius: var(--stn-radius-8) var(--stn-radius-8) 0 0;
+  pointer-events: none;
+  z-index: 0;
+}
+
+.stn-chart-combo__col:hover .stn-chart-combo__highlight,
+.stn-chart-combo__col.is-active .stn-chart-combo__highlight {
+  display: block;
+}
+
+/* Bars Group inside Column */
+.stn-chart-combo__bars-wrap {
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  gap: var(--stn-chart-col-bars-gap);
+  width: 100%;
+  height: 100%;
+  position: relative;
+  z-index: 1;
+}
+
+.stn-chart-combo__bar {
+  width: var(--stn-chart-combo-bar-width, var(--stn-chart-combo-bar-width-md));
+  min-width: var(--stn-chart-combo-bar-min-width);
+  border-radius: var(--stn-radius-4) var(--stn-radius-4) 0 0;
+  transition: height 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* Size Modifiers: sm, md, lg */
+.stn-chart-combo--sm {
+  --stn-chart-combo-bar-width: var(--stn-chart-combo-bar-width-sm);
+}
+
+.stn-chart-combo--md {
+  --stn-chart-combo-bar-width: var(--stn-chart-combo-bar-width-md);
+}
+
+.stn-chart-combo--lg {
+  --stn-chart-combo-bar-width: var(--stn-chart-combo-bar-width-lg);
+}
+
+/* SVG Line & Area Overlay */
+.stn-chart-combo__svg-overlay {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  overflow: hidden;
+  z-index: 2;
+}
+
+.stn-chart-combo__path {
+  fill: none;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  vector-effect: non-scaling-stroke;
+  transition: stroke 0.2s ease;
+}
+
+/* Base Combo Path (md) */
+.stn-chart-combo .stn-chart-combo__path,
+.stn-chart-combo--md .stn-chart-combo__path {
+  stroke-width: var(--stn-chart-line-stroke-md);
+}
+
+.stn-chart-combo--sm .stn-chart-combo__path {
+  stroke-width: var(--stn-chart-line-stroke-sm);
+}
+
+.stn-chart-combo--lg .stn-chart-combo__path {
+  stroke-width: var(--stn-chart-line-stroke-lg);
+}
+
+/* X-Axis Labels */
+.stn-chart-combo__axis-x {
+  display: flex;
+  position: absolute;
+  left: var(--stn-chart-combo-grid-offset-x);
+  right: var(--stn-chart-combo-grid-offset-x);
+  bottom: var(--stn-chart-label-offset-top);
+  pointer-events: none;
+  z-index: 3;
+}
+
+.stn-chart-combo--no-left-y-axis .stn-chart-combo__axis-x {
+  left: var(--stn-chart-grid-row-gap);
+}
+
+.stn-chart-combo--no-right-y-axis .stn-chart-combo__axis-x {
+  right: var(--stn-chart-grid-row-gap);
+}
+
+.stn-chart-combo__axis-x-item {
+  flex: 1;
+  text-align: center;
+  font-family: var(--stn-font-body);
+  font-size: var(--stn-font-size-10);
+  color: var(--stn-chart-axis-text);
+  line-height: var(--stn-line-height-tight);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  padding: 0 var(--stn-chart-col-padding-x);
+}
+
+.stn-chart-combo--no-x-axis .stn-chart-combo__axis-x,
+.hide-x-axis .stn-chart-combo__axis-x {
+  display: none;
+}
+
+/* Legend Line Marker */
+.stn-chart-legend-pill__line-marker {
+  width: var(--stn-chart-legend-line-marker-width);
+  height: var(--stn-chart-legend-line-marker-height);
+  border-radius: var(--stn-radius-2);
+  position: relative;
+  display: inline-block;
+}
+
+.stn-chart-legend-pill__line-dot {
+  width: var(--stn-chart-legend-line-dot-size);
+  height: var(--stn-chart-legend-line-dot-size);
+  border-radius: var(--stn-radius-circle);
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+}

package/styles/components/stn-line-chart.css

@@ -0,0 +1,125 @@
+@charset "utf-8";
+
+/**
+ * STN Design System — Line & Area Chart Component (.stn-chart-line)
+ * Pure CSS & SVG line/area charts with dots and axis toggles.
+ * 100% strictly tokenized via STN semantic design tokens (--stn-chart-*).
+ */
+
+.stn-chart-line {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+
+.stn-chart-line__body {
+  width: 100%;
+  flex: 1 1 0%;
+  min-height: var(--stn-chart-line-body-min-height);
+  display: flex;
+  flex-direction: column;
+  position: relative;
+}
+
+.stn-chart-line__axis-y {
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: var(--stn-chart-line-axis-y-bottom);
+  width: var(--stn-chart-line-axis-y-width);
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  pointer-events: none;
+  text-align: right;
+  z-index: 2;
+  font-size: var(--stn-font-size-9);
+  color: var(--stn-chart-axis-text);
+  font-family: var(--stn-font-body);
+  line-height: var(--stn-line-height-tight);
+}
+
+.stn-chart-line__svg {
+  width: 100%;
+  height: 100%;
+  overflow: visible;
+  display: block;
+}
+
+.stn-chart-line__path {
+  fill: none;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  vector-effect: non-scaling-stroke;
+  transition: stroke 0.2s ease;
+}
+
+/* Base Line Path */
+.stn-chart-line .stn-chart-line__path {
+  stroke-width: var(--stn-chart-line-stroke-md);
+}
+
+/* Line Sizes: sm / md / lg */
+.stn-chart-line--sm .stn-chart-line__path {
+  stroke-width: var(--stn-chart-line-stroke-sm);
+}
+
+.stn-chart-line--md .stn-chart-line__path {
+  stroke-width: var(--stn-chart-line-stroke-md);
+}
+
+.stn-chart-line--lg .stn-chart-line__path {
+  stroke-width: var(--stn-chart-line-stroke-lg);
+}
+
+.stn-chart-line__axis-x {
+  display: flex;
+  justify-content: space-between;
+  padding-left: var(--stn-chart-line-axis-x-padding-left);
+  padding-right: var(--stn-chart-line-axis-x-padding-right);
+  margin-top: var(--stn-chart-line-axis-x-margin-top);
+  position: relative;
+  z-index: 2;
+  line-height: var(--stn-line-height-tight);
+  font-size: var(--stn-font-size-10);
+  color: var(--stn-chart-axis-text);
+  font-family: var(--stn-font-body);
+}
+
+/* Axis Show/Hide Modifiers (Class Based) */
+.stn-chart-line--no-x-axis .stn-chart-line__axis-x,
+.hide-x-axis .stn-chart-line__axis-x {
+  display: none;
+}
+
+.stn-chart-line--no-y-axis .stn-chart-line__axis-y,
+.hide-y-axis .stn-chart-line__axis-y {
+  display: none;
+}
+
+.stn-chart-line--no-y-axis .stn-chart-line__axis-x,
+.hide-y-axis .stn-chart-line__axis-x {
+  padding-left: var(--stn-chart-grid-row-gap);
+}
+
+/* Line Chart Points / Dots (.stn-chart-line__dots) */
+.stn-chart-line__dots {
+  pointer-events: none;
+}
+
+.stn-chart-line__dot {
+  transition: r 0.15s ease, stroke-width 0.15s ease;
+}
+
+/* Dots Show/Hide Modifiers (Class Based) */
+.stn-chart-line--no-dots .stn-chart-line__dots,
+.hide-dots .stn-chart-line__dots {
+  display: none;
+}
+
+.stn-chart-line.show-dots .stn-chart-line__dots,
+.stn-chart-line.stn-chart-line--dots .stn-chart-line__dots {
+  display: block;
+}

package/styles/components/stn-pie-chart.css

@@ -0,0 +1,112 @@
+@charset "utf-8";
+
+/**
+ * STN Design System — Pie & Gauge Chart Component (.stn-chart-gauge)
+ * Pure CSS & SVG donut, gauge, and pie charts with legend.
+ * 100% strictly tokenized via STN semantic design tokens (--stn-chart-*).
+ */
+
+.stn-chart-gauge {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+.stn-chart-gauge__svg {
+  display: block;
+  overflow: visible;
+  max-width: var(--stn-chart-gauge-size-max);
+  max-height: var(--stn-chart-gauge-size-max);
+  min-width: var(--stn-chart-gauge-size-min);
+  min-height: var(--stn-chart-gauge-size-min);
+}
+
+.stn-chart-gauge__track {
+  fill: none;
+  stroke: var(--stn-chart-gauge-track);
+  stroke-width: var(--stn-chart-gauge-stroke-md);
+}
+
+.stn-chart-gauge__seg {
+  fill: none;
+  stroke-width: var(--stn-chart-gauge-stroke-md);
+  stroke-linecap: butt;
+  transform: rotate(-90deg);
+  transform-origin: 50% 50%;
+  transition: stroke-dashoffset 0.3s ease, stroke-width 0.15s ease;
+}
+
+/* Base Track & Segment (md) */
+.stn-chart-gauge .stn-chart-gauge__track,
+.stn-chart-gauge--md .stn-chart-gauge__track {
+  stroke-width: var(--stn-chart-gauge-stroke-md);
+}
+.stn-chart-gauge .stn-chart-gauge__seg,
+.stn-chart-gauge--md .stn-chart-gauge__seg {
+  stroke-width: var(--stn-chart-gauge-stroke-md);
+}
+
+/* Gauge Stroke Sizes: sm / lg */
+.stn-chart-gauge--sm .stn-chart-gauge__track,
+.stn-chart-gauge--sm .stn-chart-gauge__seg {
+  stroke-width: var(--stn-chart-gauge-stroke-sm);
+}
+
+.stn-chart-gauge--lg .stn-chart-gauge__track,
+.stn-chart-gauge--lg .stn-chart-gauge__seg {
+  stroke-width: var(--stn-chart-gauge-stroke-lg);
+}
+
+.stn-chart-gauge__center-outer {
+  fill: var(--stn-chart-gauge-center-bg);
+}
+
+.stn-chart-gauge__center-inner {
+  fill: var(--stn-chart-gauge-center-bg);
+  stroke: var(--stn-chart-zero-line);
+  stroke-width: var(--stn-chart-border-width);
+}
+
+.stn-chart-gauge__center-text {
+  text-anchor: middle;
+  fill: var(--stn-chart-gauge-center-text);
+  font-family: var(--stn-font-body);
+  font-size: var(--stn-font-size-11);
+  font-weight: var(--stn-font-weight-bold);
+}
+
+/* Gauge Legend */
+.stn-chart-gauge-legend {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--stn-chart-gauge-legend-gap-y) var(--stn-chart-gauge-legend-gap-x);
+  flex-wrap: wrap;
+  max-width: var(--stn-chart-gauge-legend-max-width);
+  margin-top: var(--stn-chart-gauge-legend-margin-top);
+}
+
+.stn-chart-gauge-legend__item {
+  display: flex;
+  align-items: center;
+  gap: var(--stn-chart-gauge-legend-item-gap);
+  flex-shrink: 0;
+}
+
+.stn-chart-gauge-legend__dot {
+  width: var(--stn-chart-gauge-legend-dot-size);
+  height: var(--stn-chart-gauge-legend-dot-size);
+  border-radius: var(--stn-radius-circle);
+}
+
+.stn-chart-gauge-legend__label {
+  font-family: var(--stn-font-body);
+  font-size: var(--stn-font-size-10);
+  color: var(--stn-chart-legend-text);
+  font-weight: var(--stn-font-weight-regular);
+  white-space: nowrap;
+}

package/styles/components/stn-widget.css

@@ -419,122 +419,6 @@
   border-color: var(--stn-widget-hover-border);
 }
 
-/* Status List Component */
-.stn-widget__status-list {
-  display: flex;
-  flex-direction: column;
-  gap: var(--stn-widget-status-list-gap);
-  width: 100%;
-  padding: 0;
-  margin: 0;
-  list-style: none;
-}
-
-.stn-widget__status-item {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: var(--stn-widget-status-item-padding);
-  border-radius: var(--stn-widget-status-item-radius);
-  background: var(--stn-widget-footer-well-bg);
-  border: var(--stn-widget-border-width, var(--stn-size-1, 1px)) solid var(--stn-widget-footer-well-border);
-  transition: background-color 0.15s ease, border-color 0.15s ease;
-}
-
-.stn-widget.appearance-dashboard .stn-widget__status-item {
-  background: var(--stn-widget-on-dark-surface);
-  border-color: transparent;
-}
-
-.stn-widget__status-item:hover {
-  background-color: color-mix(in srgb, var(--stn-primary) 6%, transparent);
-  border-color: color-mix(in srgb, var(--stn-primary) 20%, transparent);
-}
-
-.stn-widget__status-label {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--stn-widget-status-label-gap);
-  font-size: var(--stn-text-body-small-size);
-  color: var(--stn-text-secondary);
-}
-
-.stn-widget.appearance-dashboard .stn-widget__status-label {
-  color: var(--stn-widget-on-dark-label);
-}
-
-.stn-widget__status-dot {
-  width: var(--stn-widget-dot-size, var(--stn-size-8, 8px));
-  height: var(--stn-widget-dot-size, var(--stn-size-8, 8px));
-  border-radius: var(--stn-radius-circle, 50%);
-  flex-shrink: 0;
-}
-
-.stn-widget__status-dot--critical { background: var(--stn-widget-dot-critical); }
-.stn-widget__status-dot--major { background: var(--stn-widget-dot-major); }
-.stn-widget__status-dot--minor { background: var(--stn-widget-dot-minor); }
-.stn-widget__status-dot--info { background: var(--stn-widget-dot-info); }
-.stn-widget__status-dot--normal { background: var(--stn-widget-dot-normal); }
-
-.stn-widget__status-val {
-  font-size: var(--stn-text-label-medium-size);
-  font-weight: var(--stn-font-weight-bold, 700);
-  color: var(--stn-widget-status-value);
-}
-
-.stn-widget.appearance-dashboard .stn-widget__status-val {
-  color: var(--stn-static-white);
-}
-
-/* Stat Group & Card */
-.stn-widget__stat-group {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(var(--stn-widget-stat-min-width, var(--stn-size-110, 110px)), 1fr));
-  gap: var(--stn-widget-stat-group-gap);
-  width: 100%;
-}
-
-.stn-widget__stat-card {
-  display: flex;
-  flex-direction: column;
-  gap: var(--stn-widget-stat-card-gap);
-  padding: var(--stn-widget-stat-card-padding);
-  border-radius: var(--stn-widget-stat-card-radius);
-  background: var(--stn-widget-footer-well-bg);
-  border: var(--stn-widget-border-width, var(--stn-size-1, 1px)) solid var(--stn-border-subtle);
-  transition: transform 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
-}
-
-.stn-widget.appearance-dashboard .stn-widget__stat-card {
-  background: var(--stn-widget-on-dark-surface);
-  border-color: var(--stn-widget-on-dark-stat-border);
-}
-
-.stn-widget__stat-card:hover {
-  transform: translateY(-2px);
-  border-color: var(--stn-widget-stat-hover-border);
-  background-color: color-mix(in srgb, var(--stn-primary) 8%, transparent);
-}
-
-.stn-widget__stat-label {
-  font-size: var(--stn-text-caption-medium-size);
-  color: var(--stn-text-secondary);
-}
-
-.stn-widget.appearance-dashboard .stn-widget__stat-label {
-  color: var(--stn-widget-on-dark-stat-label);
-}
-
-.stn-widget__stat-count {
-  font-size: var(--stn-text-title-large-size);
-  font-weight: var(--stn-font-weight-bold, 700);
-  color: var(--stn-widget-status-value);
-}
-
-.stn-widget.appearance-dashboard .stn-widget__stat-count {
-  color: var(--stn-static-white);
-}
-
 /* Widget Appearance {solid|line|transparent|translucent|overlay}
    NOTE: Do NOT force padding: 0 here so density variations (default 12px / compact 8px) work properly */
 .stn-widget.solid,
@@ -702,3 +586,6 @@
   color: var(--stn-text-primary);
 }
 
+
+
+