canny-ui 6.7.0 → 7.0.0

package/src/components/_charts-extra.scss

@@ -0,0 +1,432 @@
+@use '../tokens/primitives' as *;
+
+// Extra charts — Donut, Sparkline, Gauge, ProgressRing, StatCard, Radar,
+// Scatter, Funnel, Heatmap. Animations live only under `.cny-chart-anim`
+// (React drops that class for `animate={false}` / reduced motion) and inside
+// a no-preference media query, so they are off in both cases.
+
+@property --cny-sweep {
+  syntax: '<angle>';
+  inherits: false;
+  initial-value: 360deg;
+}
+
+.cny-chart-loading {
+  border-radius: $radius-md;
+  background: var(--bg-surface-low);
+  opacity: 0.7;
+}
+
+.cny-chart-center-value {
+  font-size: 1.5rem;
+  font-weight: 700;
+  line-height: 1.1;
+  font-variant-numeric: tabular-nums;
+}
+
+.cny-chart-center-caption {
+  font-size: 0.6875rem;
+  font-weight: 400;
+  color: var(--text-muted);
+}
+
+// hover emphasis: dim every mark except the active one
+.cny-chart-emph {
+  .cny-x-mark {
+    transition: opacity 150ms ease;
+  }
+
+  &:has(.cny-x-mark.is-active, .cny-chart-slice.is-active) {
+    .cny-x-mark:not(.is-active),
+    .cny-chart-slice:not(.is-active) {
+      opacity: 0.35;
+    }
+  }
+}
+
+.cny-chart-spark {
+  vertical-align: middle;
+}
+
+.cny-chart-spark-empty {
+  display: inline-flex;
+  align-items: center;
+  color: var(--text-muted);
+}
+
+// gauge / ring
+.cny-chart-gauge-track {
+  stroke: var(--bg-surface-edge);
+  stroke-width: 14;
+  stroke-linecap: round;
+}
+
+.cny-chart-gauge-arc {
+  stroke-width: 14;
+  stroke-linecap: round;
+}
+
+.cny-chart-gauge-band {
+  stroke-width: 4;
+  opacity: 0.8;
+}
+
+.cny-chart-gauge-value {
+  fill: var(--text-primary);
+  font-size: 26px;
+  font-weight: 700;
+  font-variant-numeric: tabular-nums;
+}
+
+.cny-chart-ring-center {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.25rem;
+  font-weight: 700;
+  font-variant-numeric: tabular-nums;
+  color: var(--text-primary);
+}
+
+// stat card
+.cny-stat {
+  display: flex;
+  flex-direction: column;
+  gap: $space-2;
+  padding: $space-4;
+  border: 1px solid var(--border-color);
+  border-radius: $radius-lg;
+  background: var(--bg-surface-lowest);
+  font-family: var(--font-body);
+}
+
+.cny-stat-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: $space-2;
+  min-width: 0;
+  color: var(--text-secondary);
+  font-size: 0.8125rem;
+}
+
+.cny-stat-label {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.cny-stat-icon {
+  flex: none;
+  display: inline-flex;
+  color: var(--text-muted);
+}
+
+.cny-stat-body {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: $space-2 $space-3;
+  min-width: 0;
+}
+
+.cny-stat-value {
+  min-width: 0;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 1.75rem;
+  font-weight: 700;
+  line-height: 1.1;
+  color: var(--text-primary);
+  font-variant-numeric: tabular-nums;
+}
+
+.cny-stat-delta {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--text-muted);
+
+  &.is-good {
+    color: var(--color-success-text);
+  }
+
+  &.is-bad {
+    color: var(--color-danger-text);
+  }
+}
+
+.cny-stat-delta-label {
+  font-weight: 400;
+  color: var(--text-muted);
+}
+
+// radar
+.cny-chart-radar-ring {
+  fill: none;
+  stroke: var(--hairline-color);
+}
+
+.cny-chart-radar-fill {
+  fill-opacity: 0.18;
+  stroke-width: 2;
+  stroke-linejoin: round;
+}
+
+// funnel / heatmap / scatter
+.cny-chart-funnel-seg {
+  stroke: var(--bg-surface-lowest);
+  stroke-width: 2;
+  outline: none;
+
+  &:focus-visible {
+    stroke: var(--color-primary);
+  }
+}
+
+.cny-chart-funnel-text {
+  fill: var(--color-primary-on);
+  font-size: 0.8125rem;
+  font-weight: 600;
+  pointer-events: none;
+}
+
+// Label placed beside a stage too narrow to hold it.
+.cny-chart-funnel-text.is-outside {
+  fill: var(--text-primary);
+}
+
+.cny-chart-funnel-sub {
+  font-weight: 400;
+  opacity: 0.85;
+}
+
+.cny-chart-cell {
+  outline: none;
+
+  // The active cell is outlined instead of dimming its hundreds of neighbours,
+  // which strobed as the pointer crossed the grid.
+  &.is-active,
+  &:focus-visible {
+    stroke: var(--text-primary);
+    stroke-width: 1.5;
+  }
+}
+
+.cny-chart-cell-text {
+  fill: var(--text-primary);
+  font-size: 0.6875rem;
+  pointer-events: none;
+}
+
+.cny-chart-scatter-dot {
+  stroke: var(--bg-surface-lowest);
+  stroke-width: 1.5;
+  fill-opacity: 0.8;
+  outline: none;
+
+  &:focus-visible {
+    stroke: var(--text-primary);
+  }
+}
+
+// ---- motion -----------------------------------------------------------------
+@media (prefers-reduced-motion: no-preference) {
+  .cny-chart-anim {
+    // arcs / lines
+    .cny-x-sweep {
+      stroke-dasharray: 100;
+      animation: cny-sweep 900ms cubic-bezier(0.22, 1, 0.36, 1) backwards;
+    }
+
+    .cny-x-draw {
+      stroke-dasharray: 1;
+      animation: cny-draw 900ms ease-out backwards;
+      animation-delay: calc(var(--i, 0) * 90ms);
+    }
+
+    .cny-x-needle {
+      animation: cny-needle 900ms cubic-bezier(0.22, 1, 0.36, 1) backwards;
+    }
+
+    // marks
+    .cny-x-grow-y,
+    .cny-x-grow-x,
+    .cny-x-pop,
+    .cny-x-scale {
+      transform-box: fill-box;
+      animation-duration: 520ms;
+      animation-timing-function: cubic-bezier(0.34, 1.4, 0.64, 1);
+      animation-fill-mode: backwards;
+      animation-delay: calc(var(--i, 0) * var(--d, 45ms));
+    }
+
+    .cny-x-grow-y {
+      transform-origin: 50% 100%;
+      animation-name: cny-grow-y;
+    }
+
+    .cny-x-grow-x {
+      transform-origin: 50% 50%;
+      animation-name: cny-grow-x;
+    }
+
+    .cny-x-pop {
+      transform-origin: 50% 50%;
+      animation-name: cny-pop;
+    }
+
+    .cny-x-scale {
+      transform-origin: 50% 50%;
+      animation-name: cny-scale;
+    }
+
+    .cny-chart-radar-fill {
+      transform-box: view-box;
+      transform-origin: 50% 50%;
+    }
+
+    .cny-x-late {
+      animation-delay: 800ms;
+    }
+
+    // smooth transitions when chart data changes (bars / lines / slices tween)
+    .cny-chart-bar {
+      transition: opacity 120ms ease, y 400ms ease-out, height 400ms ease-out;
+    }
+
+    .cny-chart-line,
+    .cny-chart-area,
+    .cny-chart-slice {
+      transition: d 400ms ease-out, opacity 120ms ease;
+    }
+
+    .cny-x-fade {
+      animation: cny-fade 700ms ease-out backwards;
+      animation-delay: calc(var(--i, 0) * var(--d, 45ms) + 200ms);
+    }
+
+    // donut: conic mask sweeps clockwise
+    &.cny-chart-donut svg {
+      mask: conic-gradient(#000 var(--cny-sweep), transparent 0);
+      -webkit-mask: conic-gradient(#000 var(--cny-sweep), transparent 0);
+      animation: cny-donut-sweep 1000ms cubic-bezier(0.22, 1, 0.36, 1) backwards;
+    }
+  }
+}
+
+@keyframes cny-sweep {
+  from {
+    stroke-dashoffset: 100;
+  }
+  to {
+    stroke-dashoffset: 0;
+  }
+}
+
+@keyframes cny-draw {
+  from {
+    stroke-dashoffset: 1;
+  }
+  to {
+    stroke-dashoffset: 0;
+  }
+}
+
+@keyframes cny-needle {
+  from {
+    transform: rotate(var(--from));
+  }
+}
+
+@keyframes cny-grow-y {
+  from {
+    transform: scaleY(0);
+  }
+}
+
+@keyframes cny-grow-x {
+  from {
+    transform: scaleX(0);
+    opacity: 0;
+  }
+}
+
+@keyframes cny-pop {
+  from {
+    transform: scale(0);
+    opacity: 0;
+  }
+}
+
+@keyframes cny-scale {
+  from {
+    transform: scale(0.4);
+    opacity: 0;
+  }
+}
+
+@keyframes cny-fade {
+  from {
+    opacity: 0;
+  }
+}
+
+@keyframes cny-donut-sweep {
+  from {
+    --cny-sweep: 0deg;
+  }
+  to {
+    --cny-sweep: 360deg;
+  }
+}
+
+// pie / donut / radar extras: grouped-slice toggle, ignored-values note, tooltip member list
+.cny-chart-more {
+  display: block;
+  margin: $space-2 auto 0;
+  padding: 0;
+  border: 0;
+  background: none;
+  font: inherit;
+  font-size: 0.75rem;
+  color: var(--color-primary);
+  cursor: pointer;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+.cny-chart-note {
+  margin-top: $space-2;
+  text-align: center;
+  font-size: 0.6875rem;
+  color: var(--text-muted);
+}
+
+.cny-chart-tooltip-more {
+  margin-top: 4px;
+  padding-top: 4px;
+  border-top: 1px solid var(--border-color);
+}
+
+.cny-chart-tooltip-row > .cny-chart-tooltip-label {
+  min-width: 0;
+  max-width: 28ch;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.cny-chart-funnel-scroll {
+  overflow-x: hidden;
+}

package/src/components/_charts.scss

@@ -5,6 +5,8 @@
 .cny-chart {
   width: 100%;
   font-family: var(--font-body);
+  // the visually-hidden data table can be very wide (many series); never let it widen the page
+  overflow-x: clip;
 }
 
 .cny-chart-responsive {
@@ -69,6 +71,17 @@
   }
 }
 
+// whole-svg keyboard focus (arrow keys move through marks when there are too many for per-mark tab stops)
+.cny-chart-focusable {
+  outline: none;
+
+  &:focus-visible {
+    outline: 2px solid var(--color-primary);
+    outline-offset: 2px;
+    border-radius: 4px;
+  }
+}
+
 // visually hidden but available to assistive tech (chart data tables)
 .cny-sr-only {
   position: absolute;
@@ -108,6 +121,8 @@
   color: var(--text-primary);
   pointer-events: none;
   z-index: 2;
+  max-width: min(280px, 90%);
+  overflow-wrap: anywhere;
 }
 
 .cny-chart-tooltip-title {
@@ -143,10 +158,58 @@
   color: var(--text-secondary);
 }
 
+// many entries: one scrollable row (JS adds `.cny-scroll` for the expand scrollbar)
+.cny-chart-legend--scroll {
+  flex-wrap: nowrap;
+  justify-content: flex-start;
+  overflow-x: auto;
+  overflow-y: hidden;
+  padding-bottom: 2px;
+
+  .cny-chart-legend-item {
+    flex: 0 0 auto;
+  }
+}
+
+.cny-chart-legend-label {
+  max-width: 24ch;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .cny-chart-legend-item {
   display: inline-flex;
   align-items: center;
   gap: 6px;
+  max-width: 100%;
+
+  // legend entries are toggle buttons — strip the native button chrome
+  &.is-toggle {
+    appearance: none;
+    margin: 0;
+    padding: 2px 4px;
+    border: 0;
+    border-radius: var(--radius-xs);
+    background: none;
+    font: inherit;
+    color: inherit;
+    cursor: pointer;
+    transition: opacity 120ms ease;
+
+    &:hover {
+      color: var(--text-primary);
+    }
+    &:focus-visible {
+      outline: 2px solid var(--border-focus);
+      outline-offset: 1px;
+    }
+    // hidden series: dimmed with a struck-through label
+    &.is-off {
+      opacity: 0.45;
+      text-decoration: line-through;
+    }
+  }
 }
 
 .cny-chart-swatch {
@@ -156,3 +219,30 @@
   border-radius: 3px;
   flex: none;
 }
+
+// hover crosshair (line / area) and hovered-category band (bar)
+.cny-chart-crosshair {
+  stroke: var(--text-muted);
+  stroke-width: 1;
+  stroke-dasharray: 3 3;
+  pointer-events: none;
+}
+
+.cny-chart-band {
+  fill: var(--bg-surface-low);
+  opacity: 0.6;
+  pointer-events: none;
+}
+
+// no-data message, centered over the empty plot (the chart container is position: relative)
+.cny-chart-empty {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding-bottom: 28px;
+  font-size: 0.875rem;
+  color: var(--text-muted);
+  pointer-events: none;
+}

package/src/components/_chip.scss

@@ -48,6 +48,7 @@
     height: 16px;
     margin-right: -4px;
     background: transparent;
+    padding: 0;
     border: 0;
     border-radius: 50%;
     color: currentColor;
@@ -60,7 +61,7 @@
       background: color-mix(in srgb, var(--chip-color) 15%, transparent);
     }
     &:focus-visible {
-      outline: 2px solid var(--chip-color);
+      outline: 2px solid var(--border-focus);
       outline-offset: 1px;
     }
   }
@@ -72,7 +73,7 @@
     &:hover { transform: translateY(-1px); }
     &:active { transform: translateY(0); }
     &:focus-visible {
-      outline: 2px solid color-mix(in srgb, var(--chip-color) 60%, transparent);
+      outline: 2px solid var(--border-focus);
       outline-offset: 2px;
     }
   }
@@ -84,27 +85,27 @@
 
   // ── Color tones ──
   &.primary {
-    --chip-color: var(--color-primary);
+    --chip-color: var(--text-accent);
     --chip-bg: color-mix(in srgb, var(--color-primary) 10%, transparent);
     --chip-border: color-mix(in srgb, var(--color-primary) 22%, transparent);
   }
   &.success {
-    --chip-color: var(--color-success);
+    --chip-color: var(--color-success-text);
     --chip-bg: color-mix(in srgb, var(--color-success) 10%, transparent);
     --chip-border: color-mix(in srgb, var(--color-success) 24%, transparent);
   }
   &.info {
-    --chip-color: var(--color-info);
+    --chip-color: var(--color-info-text);
     --chip-bg: color-mix(in srgb, var(--color-info) 10%, transparent);
     --chip-border: color-mix(in srgb, var(--color-info) 24%, transparent);
   }
   &.warning {
-    --chip-color: var(--color-warning);
+    --chip-color: var(--color-warning-text);
     --chip-bg: color-mix(in srgb, var(--color-warning) 12%, transparent);
     --chip-border: color-mix(in srgb, var(--color-warning) 26%, transparent);
   }
   &.danger {
-    --chip-color: var(--color-danger);
+    --chip-color: var(--color-danger-text);
     --chip-bg: color-mix(in srgb, var(--color-danger) 10%, transparent);
     --chip-border: color-mix(in srgb, var(--color-danger) 26%, transparent);
   }

package/src/components/_command-palette.scss

@@ -1,3 +1,4 @@
+@use '../base/scrollbar-mixin' as sb;
 @use '../tokens/primitives' as *;
 
 // CommandPalette — keyboard-driven search overlay.
@@ -43,7 +44,7 @@
   }
 
   &:focus-visible {
-    outline: 2px solid color-mix(in srgb, var(--color-primary) 65%, transparent);
+    outline: 2px solid var(--border-focus);
     outline-offset: 2px;
   }
 
@@ -78,6 +79,7 @@
 }
 .cny-dark [cmdk-overlay],
 .cny-dark [data-cmdk-overlay] { background: rgba(0, 0, 0, 0.7); }
+@media (prefers-color-scheme: dark) { :root:not(.cny-light) [cmdk-overlay], :root:not(.cny-light) [data-cmdk-overlay] { background: rgba(0, 0, 0, 0.7); } }
 
 [cmdk-dialog],
 .cny-cmdk-content {
@@ -136,7 +138,7 @@
 .cny-cmdk-list {
   overflow-y: auto;
   padding: 8px;
-  scrollbar-width: thin;
+  @include sb.expand-scrollbar;
 }
 
 .cny-cmdk-empty {
@@ -150,6 +152,11 @@
   padding-bottom: 8px;
 
   [cmdk-group-heading] {
+    // Sticky so the current group stays labelled while scrolling a long list.
+    position: sticky;
+    top: -8px; // cancels .cny-cmdk-list padding so the heading sits flush
+    z-index: 1;
+    background: var(--bg-surface-lowest);
     padding: 8px 10px 6px;
     font-size: 0.6875rem;
     font-weight: 600;
@@ -181,7 +188,7 @@
   &[data-selected='true'] {
     background: color-mix(in srgb, var(--color-primary) 12%, var(--bg-surface-low));
 
-    .cny-cmdk-item-icon { color: var(--color-primary); }
+    .cny-cmdk-item-icon { color: var(--text-accent); }
 
     &::after {
       content: '↵';
@@ -189,7 +196,7 @@
       right: 14px;
       font-family: var(--font-mono);
       font-size: 11px;
-      color: var(--color-primary);
+      color: var(--text-accent);
       opacity: 0.7;
     }
   }
@@ -212,13 +219,28 @@
   }
   &[data-selected='true'] .cny-cmdk-item-hint { display: none; }
 
+  &-shortcut {
+    display: inline-flex;
+    align-items: center;
+    height: 18px;
+    padding: 0 5px;
+    border-radius: 3px;
+    background: var(--bg-surface-lowest);
+    color: var(--text-secondary);
+    font-family: var(--font-mono);
+    font-size: 0.625rem;
+    box-shadow: inset 0 0 0 1px var(--border-color);
+  }
+  // Shortcut stays visible on the active row, so drop the ↵ marker that would overlap it.
+  &.has-shortcut[data-selected='true']::after { content: none; }
+
   &-badge {
     display: inline-flex;
     align-items: center;
     padding: 1px 6px;
     border-radius: 999px;
     background: var(--color-primary-soft);
-    color: var(--color-primary);
+    color: var(--text-accent);
     font-size: 0.625rem;
     font-weight: 600;
     text-transform: uppercase;

package/src/components/_confirm.scss

@@ -9,3 +9,17 @@
   line-height: 1.5;
   color: var(--text-secondary);
 }
+
+// requireText — type-to-confirm field under the message.
+.cny-confirm-require {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  margin-top: 14px;
+}
+.cny-confirm-require-label {
+  font-family: var(--font-body);
+  font-size: 0.8125rem;
+  color: var(--text-secondary);
+  strong { color: var(--text-primary); font-weight: 600; }
+}