@konce-pt/styles 0.15.0 → 0.16.0

package/components.css

@@ -8984,6 +8984,7 @@
     --kpt-chart-stagger: 60ms;
     --kpt-chart-delay: 0ms;
     --kpt-chart-ease: cubic-bezier(0.25, 1, 0.5, 1);
+    --kpt-chart-spring: linear(0, 0.0521, 0.1747, 0.3278, 0.4847, 0.6288, 0.7513, 0.849, 0.9224, 0.9741, 1.0077, 1.0272, 1.0364, 1.0384, 1.0359, 1.031, 1.025, 1.019, 1.0136, 1.009, 1.0054, 1.0027, 1.0008, 0.9996, 0.9989, 0.9986, 0.9985, 0.9986, 0.9988, 0.9991, 0.9993, 0.9995, 0.9997, 0.9998, 0.9999, 1, 1, 1, 1.0001, 1.0001, 1);
   }
   .kpt-chart {
     display: flex;
@@ -9092,10 +9093,9 @@
   .kpt-chart__point--active {
     transform: scale(1.5);
   }
-  .kpt-chart__hit {
+  .kpt-chart__hover {
     fill: transparent;
     pointer-events: all;
-    cursor: pointer;
   }
   .kpt-chart__bar {
     cursor: pointer;
@@ -9201,6 +9201,42 @@
   .kpt-chart__tooltip--flip {
     transform: translate(-50%, 12px);
   }
+  .kpt-chart__tooltip {
+    transform-origin: 50% 100%;
+    transition: opacity calc(0.16s * var(--kpt-motion-scale, 1)) var(--kpt-chart-ease), scale calc(0.16s * var(--kpt-motion-scale, 1)) var(--kpt-chart-ease), visibility 0s;
+  }
+  .kpt-chart__tooltip--hidden {
+    opacity: 0;
+    scale: 0.96;
+    visibility: hidden;
+    transition: opacity calc(0.14s * var(--kpt-motion-scale, 1)) ease-in, scale calc(0.14s * var(--kpt-motion-scale, 1)) ease-in, visibility 0s calc(0.14s * var(--kpt-motion-scale, 1));
+  }
+  .kpt-chart__tooltip-label {
+    display: inline-block;
+  }
+  .kpt-chart__reels {
+    display: inline-flex;
+    font-variant-numeric: tabular-nums;
+  }
+  .kpt-chart__reel {
+    display: inline-block;
+    height: 1.25em;
+    line-height: 1.25em;
+    overflow: hidden;
+    mask-image: linear-gradient(transparent, var(--kpt-color-on-surface) 12%, var(--kpt-color-on-surface) 88%, transparent);
+  }
+  .kpt-chart__reel-strip {
+    display: flex;
+    flex-direction: column;
+    translate: 0 calc(var(--kpt-chart-digit, 0) * -1.25em);
+    transition: translate calc(0.52s * var(--kpt-motion-scale, 1)) var(--kpt-chart-spring);
+  }
+  .kpt-chart__reel-strip > span,
+  .kpt-chart__reel-text {
+    height: 1.25em;
+    line-height: 1.25em;
+    white-space: pre;
+  }
   .kpt-chart__tooltip-title {
     font-weight: var(--kpt-font-weight-semibold, 600);
     margin-bottom: 2px;
@@ -9281,6 +9317,118 @@
       opacity: 0;
     }
   }
+  .kpt-chart__ghost {
+    pointer-events: none;
+  }
+  .kpt-chart__ghost-line,
+  .kpt-chart__ghost-bar {
+    fill: none;
+    stroke: var(--kpt-color-on-surface-muted);
+    stroke-dasharray: 4 4;
+    animation: kpt-chart-ghost calc(1.7s * var(--kpt-motion-scale, 1)) ease-in forwards;
+  }
+  .kpt-chart__ghost-line {
+    stroke-width: 1.5;
+  }
+  .kpt-chart__ghost-bar {
+    stroke-width: 1;
+    stroke-dasharray: 3 3;
+  }
+  .kpt-chart__delta,
+  .kpt-chart__delta-bar,
+  .kpt-chart__chip {
+    --_kpt-chart-delta: var(--kpt-chart-delta-up, var(--kpt-color-success));
+  }
+  [data-kind=down]:is(.kpt-chart__delta, .kpt-chart__delta-bar, .kpt-chart__chip) {
+    --_kpt-chart-delta: var(--kpt-chart-delta-down, var(--kpt-color-danger));
+  }
+  [data-kind=same]:is(.kpt-chart__delta, .kpt-chart__delta-bar, .kpt-chart__chip) {
+    display: none;
+  }
+  .kpt-chart__delta {
+    stroke: var(--_kpt-chart-delta);
+    stroke-width: 2;
+    stroke-linecap: round;
+    animation: kpt-chart-ghost calc(1.7s * var(--kpt-motion-scale, 1)) ease-in forwards;
+  }
+  .kpt-chart__delta-bar {
+    fill: var(--_kpt-chart-delta);
+    animation: kpt-chart-ghost-soft calc(1.7s * var(--kpt-motion-scale, 1)) ease-in forwards;
+  }
+  .kpt-chart__chip {
+    fill: var(--_kpt-chart-delta);
+    font-size: 10px;
+    font-weight: var(--kpt-font-weight-bold, 700);
+    font-family: var(--kpt-font-family-sans);
+    font-variant-numeric: tabular-nums;
+    pointer-events: none;
+    animation: kpt-chart-chip calc(1.3s * var(--kpt-motion-scale, 1)) cubic-bezier(0.2, 0, 0, 1) calc((0.38s + var(--kpt-chart-i, 0) * 0.04s) * var(--kpt-motion-scale, 1)) both;
+  }
+  .kpt-chart__sheen-stop {
+    stop-color: var(--kpt-chart-sheen, var(--kpt-color-info));
+  }
+  .kpt-chart__sheen-line {
+    fill: none;
+    stroke-width: 5;
+    stroke-linecap: round;
+    filter: blur(1.2px);
+    pointer-events: none;
+  }
+  .kpt-chart__sheen-bar {
+    mix-blend-mode: screen;
+    pointer-events: none;
+  }
+  [data-theme=dark] .kpt-chart__sheen-bar {
+    mix-blend-mode: normal;
+  }
+  .kpt-chart__ripple {
+    fill: none;
+    stroke-width: 2;
+    transform-box: fill-box;
+    transform-origin: center;
+    pointer-events: none;
+    animation: kpt-chart-ripple calc(0.52s * var(--kpt-motion-scale, 1)) cubic-bezier(0.2, 0, 0, 1) calc(0.24s * var(--kpt-motion-scale, 1)) both;
+  }
+  @keyframes kpt-chart-ghost {
+    0%, 50% {
+      opacity: 1;
+    }
+    100% {
+      opacity: 0;
+    }
+  }
+  @keyframes kpt-chart-ghost-soft {
+    0%, 50% {
+      opacity: 0.45;
+    }
+    100% {
+      opacity: 0;
+    }
+  }
+  @keyframes kpt-chart-chip {
+    0% {
+      opacity: 0;
+      translate: 0 6px;
+    }
+    25%, 75% {
+      opacity: 1;
+      translate: 0 0;
+    }
+    100% {
+      opacity: 0;
+      translate: 0 -6px;
+    }
+  }
+  @keyframes kpt-chart-ripple {
+    from {
+      opacity: 0.55;
+      scale: 1;
+    }
+    to {
+      opacity: 0;
+      scale: 3.2;
+    }
+  }
   .kpt-chart--no-anim :is(.kpt-chart__line, .kpt-chart__area, .kpt-chart__point, .kpt-chart__bar, .kpt-chart__slice, .kpt-chart__radar-area) {
     animation: none;
     stroke-dashoffset: 0;
@@ -9290,6 +9438,14 @@
       animation: none;
       stroke-dashoffset: 0;
     }
+    .kpt-chart__tooltip,
+    .kpt-chart__tooltip--hidden,
+    .kpt-chart__reel-strip {
+      transition: none;
+    }
+  }
+  .kpt-chart--no-anim :is(.kpt-chart__tooltip, .kpt-chart__tooltip--hidden, .kpt-chart__reel-strip) {
+    transition: none;
   }
   .kpt-chart__sr {
     position: absolute;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@konce-pt/styles",
-  "version": "0.15.0",
+  "version": "0.16.0",
   "description": "Base CSS for Koncept UI - reset, cascade @layer ordering and neutral light/dark theme (SCSS source).",
   "license": "MIT",
   "author": "konce.pt",
@@ -52,7 +52,7 @@
     "src"
   ],
   "peerDependencies": {
-    "@konce-pt/tokens": "0.15.0"
+    "@konce-pt/tokens": "0.16.0"
   },
   "devDependencies": {
     "sass": "^1.77.0"