canny-ui 6.6.2 → 7.0.0

package/src/components/_gantt.scss

@@ -0,0 +1,554 @@
+@use '../tokens/primitives' as *;
+
+// GanttChart — scheduling timeline (HTML bars + SVG dependency arrows).
+// Shares the .cny-chart tooltip / empty-state styles from _charts.scss.
+
+.cny-gantt {
+  --cny-gantt-row: 36px;
+  --cny-gantt-name: 200px;
+  background: var(--bg-surface-lowest);
+  border: 1px solid var(--border-color);
+  border-radius: $radius-md;
+  overflow: visible;
+  font-size: 0.8125rem;
+  color: var(--text-primary);
+}
+
+.cny-gantt-scroll {
+  overflow: auto;
+  border-radius: inherit;
+}
+
+.cny-gantt-inner {
+  position: relative;
+  min-width: 100%;
+}
+
+// ── header ───────────────────────────────────────────────────────
+.cny-gantt-head {
+  position: sticky;
+  top: 0;
+  z-index: 6;
+  display: flex;
+  background: var(--bg-surface-low);
+  border-bottom: 1px solid var(--border-color);
+}
+
+.cny-gantt-corner {
+  position: sticky;
+  overflow: hidden;
+  left: 0;
+  z-index: 7;
+  flex: none;
+  width: var(--cny-gantt-name);
+  display: flex;
+  align-items: flex-end;
+  padding: 0 $space-3 6px;
+  background: var(--bg-surface-low);
+  border-inline-end: 1px solid var(--border-color);
+  font-size: 0.6875rem;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--text-muted);
+}
+
+.cny-gantt-timeline-head {
+  position: relative;
+  flex: none;
+}
+
+.cny-gantt-tier {
+  position: relative;
+  height: 50%;
+}
+
+.cny-gantt-cell {
+  position: absolute;
+  min-width: 0;
+  top: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  padding-inline-start: 6px;
+  white-space: nowrap;
+  border-inline-start: 1px solid var(--hairline-color);
+  font-size: 0.6875rem;
+  color: var(--text-muted);
+
+  // The label is sticky inside its own cell, so a wide month/year label stays readable at
+  // the left edge of the timeline while its cell scrolls past (it can't leave the cell).
+  > .cny-gantt-cell-text {
+    position: sticky;
+    inset-inline-start: calc(var(--cny-gantt-name) + 6px);
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  &.is-spill > .cny-gantt-cell-text {
+    max-width: none;
+    overflow: visible;
+  }
+
+  .is-top > & {
+    font-weight: 600;
+    color: var(--text-secondary);
+  }
+}
+
+.cny-gantt-today-flag {
+  position: absolute;
+  bottom: 0;
+  transform: translateX(-50%);
+  padding: 0 6px;
+  border-radius: 8px 8px 0 0;
+  background: var(--color-danger);
+  color: var(--color-danger-on);
+  font-size: 0.625rem;
+  font-weight: 600;
+  line-height: 14px;
+  pointer-events: none;
+
+  // Collapsed to a small pointer under the header when the chip would cover tick labels.
+  &.is-mark {
+    bottom: -5px;
+    width: 0;
+    height: 0;
+    padding: 0;
+    border-style: solid;
+    border-width: 6px 5px 0;
+    border-color: var(--color-danger) transparent transparent;
+    border-radius: 0;
+    background: none;
+    font-size: 0;
+    line-height: 0;
+    color: transparent;
+    overflow: hidden;
+  }
+}
+
+// drag edge of the sticky name column
+.cny-gantt-resize {
+  position: absolute;
+  top: 0;
+  right: -3px;
+  bottom: 0;
+  width: 7px;
+  z-index: 8;
+  cursor: col-resize;
+  touch-action: none;
+
+  &:hover,
+  &:focus-visible {
+    background: color-mix(in srgb, var(--border-focus) 55%, transparent);
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--border-focus);
+    outline-offset: -2px;
+  }
+}
+
+// ── rows ─────────────────────────────────────────────────────────
+.cny-gantt-body {
+  position: relative;
+}
+
+.cny-gantt-row {
+  position: absolute;
+  left: 0;
+  right: 0;
+  display: flex;
+  background: var(--bg-surface-lowest);
+  // The row line is a shadow (not a border) so the sticky name cell covers the full row
+  // height and nothing — dependency elbows, grid ticks — shows through beside it.
+  box-shadow: inset 0 -1px 0 var(--hairline-color);
+
+  &:hover {
+    background: var(--bg-surface-low);
+  }
+
+  &.is-group {
+    font-weight: 600;
+  }
+}
+
+.cny-gantt-name > .cny-gantt-label,
+.cny-gantt-toggle > .cny-gantt-label {
+  min-width: 0;
+}
+
+.cny-gantt-name {
+  position: sticky;
+  left: 0;
+  z-index: 4;
+  flex: none;
+  display: flex;
+  align-items: center;
+  width: var(--cny-gantt-name);
+  padding: 0 $space-3;
+  background: inherit;
+  border-inline-end: 1px solid var(--border-color);
+  // opaque underlay + the row line, so the name column fully masks the timeline layers
+  box-shadow: inset 0 -1px 0 var(--hairline-color);
+  overflow: hidden;
+
+  &.is-indent {
+    padding-inline-start: $space-6;
+  }
+}
+
+.cny-gantt-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.cny-gantt-toggle {
+  appearance: none;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: none;
+  font: inherit;
+  color: inherit;
+  cursor: pointer;
+  text-align: start;
+  height: 100%;
+
+  &:focus-visible {
+    outline: 2px solid var(--border-focus);
+    outline-offset: 2px;
+    border-radius: var(--radius-xs);
+  }
+}
+
+.cny-gantt-chevron {
+  flex: none;
+  color: var(--text-muted);
+  transition: transform 150ms ease;
+
+  [aria-expanded='true'] > & {
+    transform: rotate(90deg);
+  }
+}
+
+.cny-gantt-count {
+  margin-inline-start: auto;
+  padding: 0 6px;
+  border-radius: 8px;
+  background: var(--bg-surface-edge);
+  font-size: 0.6875rem;
+  font-weight: 500;
+  color: var(--text-secondary);
+}
+
+.cny-gantt-track {
+  position: relative;
+  flex: none;
+}
+
+.cny-gantt-groupbar {
+  position: absolute;
+  top: 50%;
+  height: 6px;
+  margin-top: -3px;
+  border-radius: 3px;
+  opacity: 0.55;
+}
+
+// ── grid layer (weekends, column lines, today): one svg for the rendered rows ──
+.cny-gantt-grid {
+  position: absolute;
+  left: var(--cny-gantt-name);
+  z-index: 1;
+  pointer-events: none;
+  overflow: hidden;
+}
+
+.cny-gantt-weekend {
+  fill: var(--bg-surface-low);
+  opacity: 0.7;
+}
+
+.cny-gantt-line {
+  fill: none;
+  stroke: var(--hairline-color);
+  stroke-width: 1;
+  vector-effect: non-scaling-stroke;
+}
+
+.cny-gantt-today {
+  stroke: var(--color-danger);
+  stroke-width: 2;
+  opacity: 0.8;
+}
+
+// ── zoom buttons ─────────────────────────────────────────────────
+.cny-gantt-toolbar {
+  display: flex;
+  justify-content: flex-end;
+  padding: $space-1 $space-2;
+  border-bottom: 1px solid var(--border-color);
+  border-radius: inherit;
+  border-end-start-radius: 0;
+  border-end-end-radius: 0;
+  background: var(--bg-surface-lowest);
+}
+
+// In the toolbar above the chart, not floating over the bars.
+.cny-gantt-zoom {
+  display: flex;
+  border: 1px solid var(--border-color);
+  border-radius: $radius-md;
+  background: var(--bg-surface-lowest);
+  overflow: hidden;
+}
+
+.cny-gantt-zoom-btn {
+  appearance: none;
+  width: 30px;
+  height: 28px;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: none;
+  font: inherit;
+  font-size: 1rem;
+  line-height: 1;
+  color: var(--text-primary);
+  cursor: pointer;
+
+  & + & {
+    border-inline-start: 1px solid var(--border-color);
+  }
+  &:hover:not(:disabled) {
+    background: var(--bg-surface-low);
+  }
+  &:focus-visible {
+    outline: 2px solid var(--border-focus);
+    outline-offset: -2px;
+  }
+  &:disabled {
+    opacity: 0.4;
+    cursor: default;
+  }
+}
+
+// ── bars ─────────────────────────────────────────────────────────
+.cny-gantt-bar {
+  position: absolute;
+  top: 7px;
+  bottom: 7px;
+  z-index: 3;
+  border-radius: 5px;
+  background: color-mix(in srgb, var(--cny-gantt-color, var(--color-primary)) 30%, var(--bg-surface-lowest));
+  outline: none;
+  cursor: pointer;
+  transform-origin: left center;
+  touch-action: none;
+
+  &:hover {
+    filter: brightness(0.96);
+  }
+  &:focus-visible {
+    outline: 2px solid var(--border-focus);
+    outline-offset: 2px;
+  }
+  &.is-editable {
+    cursor: grab;
+  }
+  &.is-dragging {
+    cursor: grabbing;
+    box-shadow: var(--shadow-md);
+    z-index: 5;
+  }
+
+  &.is-milestone {
+    background: none;
+    transform-origin: center;
+
+    &::before {
+      content: '';
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      width: 12px;
+      height: 12px;
+      margin: -6px 0 0 -6px;
+      border-radius: 2px;
+      background: var(--cny-gantt-color, var(--color-primary));
+      transform: rotate(45deg);
+    }
+  }
+}
+
+.cny-gantt-progress {
+  position: absolute;
+  inset: 0 auto 0 0;
+  border-radius: inherit;
+  background: var(--cny-gantt-color, var(--color-primary));
+  transform-origin: left center;
+  pointer-events: none;
+}
+
+.cny-gantt-handle {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  z-index: 1;
+  width: 8px;
+  cursor: ew-resize;
+
+  &.is-start {
+    left: -2px;
+  }
+  &.is-end {
+    right: -2px;
+  }
+}
+
+// ── coarse pointers: >=44px targets ──────────────────────────────
+@media (pointer: coarse) {
+  .cny-gantt-zoom-btn {
+    width: 44px;
+    height: 44px;
+  }
+
+  .cny-gantt-resize::before {
+    content: '';
+    position: absolute;
+    inset: 0 0 0 -34px;
+  }
+
+  .cny-gantt-handle {
+    width: 16px;
+
+    &.is-start { left: -6px; }
+    &.is-end { right: -6px; }
+  }
+}
+
+// ── dependency arrows ────────────────────────────────────────────
+.cny-gantt-deps {
+  position: absolute;
+  top: 0;
+  left: var(--cny-gantt-name);
+  z-index: 2;
+  pointer-events: none;
+  overflow: visible;
+}
+
+.cny-gantt-dep {
+  path {
+    fill: none;
+    stroke: var(--text-muted);
+    stroke-width: 1.5;
+    stroke-linejoin: round;
+  }
+
+  .cny-gantt-dep-head {
+    fill: var(--text-muted);
+    stroke: none;
+  }
+}
+
+// ── loading skeleton ─────────────────────────────────────────────
+.cny-gantt-skeleton {
+  padding-top: 44px;
+}
+
+.cny-gantt-skeleton-row {
+  display: flex;
+  align-items: center;
+  gap: $space-4;
+  padding: 0 $space-3;
+}
+
+// ── motion ───────────────────────────────────────────────────────
+@keyframes cny-gantt-grow {
+  from { transform: scaleX(0); opacity: 0; }
+  to { transform: scaleX(1); opacity: 1; }
+}
+
+@keyframes cny-gantt-pop {
+  from { transform: scale(0); opacity: 0; }
+  to { transform: scale(1); opacity: 1; }
+}
+
+@keyframes cny-gantt-draw {
+  from { stroke-dashoffset: 1; }
+  to { stroke-dashoffset: 0; }
+}
+
+@keyframes cny-gantt-fade {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+.cny-gantt.is-animated {
+  .cny-gantt-bar {
+    transition: left 300ms ease, width 300ms ease, box-shadow 150ms ease;
+
+    &.is-dragging {
+      transition: box-shadow 150ms ease;
+    }
+  }
+
+  .cny-gantt-progress {
+    transition: width 300ms ease;
+  }
+
+  .cny-gantt-groupbar {
+    transition: left 300ms ease, width 300ms ease;
+  }
+}
+
+// entrance only on first mount (rows scrolled into view later don't replay it)
+.cny-gantt.is-animated.is-entering {
+  .cny-gantt-bar {
+    animation: cny-gantt-grow 420ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
+    animation-delay: calc(var(--cny-gantt-i, 0) * 40ms);
+
+    &.is-milestone {
+      animation-name: cny-gantt-pop;
+    }
+  }
+
+  .cny-gantt-progress {
+    animation: cny-gantt-grow 520ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
+    animation-delay: calc(var(--cny-gantt-i, 0) * 40ms + 320ms);
+  }
+
+  .cny-gantt-dep path {
+    stroke-dasharray: 1;
+    animation: cny-gantt-draw 500ms ease both;
+    animation-delay: var(--cny-gantt-dep-delay, 0ms);
+  }
+
+  .cny-gantt-dep .cny-gantt-dep-head {
+    stroke-dasharray: none;
+    animation: cny-gantt-fade 200ms ease both;
+    animation-delay: calc(var(--cny-gantt-dep-delay, 0ms) + 450ms);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .cny-gantt .cny-gantt-bar,
+  .cny-gantt .cny-gantt-progress,
+  .cny-gantt .cny-gantt-groupbar,
+  .cny-gantt .cny-gantt-dep path,
+  .cny-gantt .cny-gantt-chevron {
+    animation: none !important;
+    transition: none !important;
+  }
+
+  .cny-gantt .cny-gantt-dep path {
+    stroke-dasharray: none;
+  }
+}

package/src/components/_inputs.scss

@@ -1,3 +1,4 @@
+@use '../base/scrollbar-mixin' as sb;
 @use '../tokens/primitives' as *;
 
 // Enterprise input — full real border, focus ring, predictable affordances.
@@ -9,7 +10,8 @@
   padding: 0 $space-3;
   background: var(--bg-surface-lowest);
   color: var(--text-primary);
-  border: 1px solid var(--border-color);
+  border: 1px solid var(--border-input);
+  box-shadow: var(--shadow-field);
   border-radius: var(--radius-sm);
   outline: none;
   font-family: var(--font-body);
@@ -24,16 +26,17 @@
   }
 
   &:hover:not(:disabled):not(:focus) {
-    border-color: var(--border-color-strong);
+    border-color: var(--border-input-hover);
   }
 
   &:focus {
-    border-color: var(--border-focus);
+    border-color: var(--border-input-focus);
     box-shadow: none;
   }
 
   &:disabled {
     background: var(--bg-surface-low);
+    box-shadow: none;
     color: var(--text-disabled);
     cursor: not-allowed;
   }
@@ -50,6 +53,7 @@
   &.filled {
     background: var(--bg-surface-low);
     border-color: transparent;
+    box-shadow: none;
 
     &:hover:not(:disabled):not(:focus) {
       background: var(--bg-surface-edge);
@@ -58,7 +62,7 @@
 
     &:focus {
       background: var(--bg-surface-lowest);
-      border-color: var(--border-focus);
+      border-color: var(--border-input-focus);
     }
   }
 
@@ -85,6 +89,7 @@ textarea.input {
   padding: $space-2 $space-3;
   line-height: 1.55;
   resize: vertical;
+  @include sb.expand-scrollbar;
 }
 
 // Label — small, uppercase-neutral, sits above the input
@@ -104,7 +109,7 @@ textarea.input {
   color: var(--text-muted);
   margin-top: $space-2;
 
-  &.danger  { color: var(--color-danger); }
-  &.warning { color: var(--color-warning); }
-  &.success { color: var(--color-success); }
+  &.danger  { color: var(--color-danger-text); }
+  &.warning { color: var(--color-warning-text); }
+  &.success { color: var(--color-success-text); }
 }

package/src/components/_list.scss

@@ -29,6 +29,29 @@
   display: flex;
 }
 
+// Windowed list: the list is the scrollport and every row has a fixed height;
+// spacer rows stand in for the rows that are not in the DOM.
+.cny-list.is-virtual {
+  overflow-y: auto;
+  overflow-x: hidden;
+
+  > li {
+    flex: none;
+    box-sizing: border-box;
+    height: var(--cny-list-row-h, 64px);
+    overflow: hidden;
+  }
+
+  > li > .cny-list-item {
+    height: 100%;
+  }
+
+  > li.cny-list-spacer {
+    height: auto;
+    padding: 0;
+  }
+}
+
 .cny-list-item {
   display: flex;
   align-items: center;
@@ -100,11 +123,11 @@
 
   &.is-active {
     background: color-mix(in srgb, var(--color-primary) 10%, var(--bg-surface-low));
-    color: var(--color-primary);
+    color: var(--text-accent);
 
     .cny-list-item-leading,
-    .cny-list-item-trailing { color: var(--color-primary); }
-    .cny-list-item-primary  { color: var(--color-primary); font-weight: 600; }
+    .cny-list-item-trailing { color: var(--text-accent); }
+    .cny-list-item-primary  { color: var(--text-accent); font-weight: 600; }
   }
 
   &.is-disabled {
@@ -127,3 +150,14 @@
   text-transform: uppercase;
   color: var(--text-muted);
 }
+
+// `empty` / `loading` states
+.cny-list-empty {
+  padding: 24px 14px;
+  text-align: center;
+  font-size: 0.875rem;
+  color: var(--text-muted);
+}
+.cny-list-skeleton .cny-list-item {
+  cursor: default;
+}