canny-ui 6.7.0 → 7.0.0

package/src/components/_sidebar.scss

@@ -1,3 +1,4 @@
+@use '../base/scrollbar-mixin' as sb;
 @use '../tokens/primitives' as *;
 
 // ── Sidebar ───────────────────────────────────────────────────
@@ -78,7 +79,7 @@
   &:active { transform: scale(0.96); }
 
   &:focus-visible {
-    outline: 2px solid var(--color-primary);
+    outline: 2px solid var(--border-focus);
     outline-offset: 2px;
   }
 
@@ -104,14 +105,19 @@
 .cny-sidebar-nav {
   display: flex;
   flex-direction: column;
-  gap: 2px;
+  // No gap between rows: each row carries a 1px transparent border instead, so
+  // the hover target is contiguous (no dead strip between items).
+  gap: 0;
 }
 
 .cny-sidebar-item {
   display: flex;
   align-items: center;
   gap: $space-3;
-  padding: 8px $space-3;
+  padding: 7px $space-3;
+  border-top: 1px solid transparent;
+  border-bottom: 1px solid transparent;
+  background-clip: padding-box;
   // Break out of the rail's left padding so the surface meets the sidebar edge
   // with no gap, then hand the content back its indent so nothing shifts. The
   // right side stays inset, and only the right corners are curved.
@@ -151,8 +157,8 @@
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-primary);
-    outline-offset: -1px;
+    outline: 2px solid var(--border-focus);
+    outline-offset: -2px;
   }
 
   &.active {
@@ -164,7 +170,8 @@
     // The resting badge is a light surface; on a solid fill it needs to read
     // as part of the row rather than a chip sitting on top of it.
     .cny-sidebar-item-badge {
-      background: rgb(255 255 255 / 0.22);
+      // text-primary is the opposite pole of primary-on in both themes, so the overlay always lifts contrast
+      background: color-mix(in srgb, var(--text-primary) 22%, transparent);
       color: var(--color-primary-on);
     }
   }
@@ -178,8 +185,10 @@
 
   &.disabled {
     color: var(--text-muted);
-    pointer-events: none;
     opacity: 0.55;
+    cursor: not-allowed;
+
+    &:hover { background: transparent; color: var(--text-muted); }
   }
 
   .cny-sidebar-item-icon {
@@ -218,18 +227,8 @@
 
 // Themed scrollbar for sidebar content
 .cny-sidebar {
-  scrollbar-width: thin;
-  scrollbar-color: var(--border-color) transparent;
-
-  &::-webkit-scrollbar { width: 6px; }
-  &::-webkit-scrollbar-track { background: transparent; }
-  &::-webkit-scrollbar-thumb {
-    background: var(--border-color);
-    border-radius: 3px;
-  }
-  &::-webkit-scrollbar-thumb:hover {
-    background: var(--border-color-strong);
-  }
+  scrollbar-gutter: stable;
+  @include sb.expand-scrollbar;
 }
 
 // Collapsed variant: icons only
@@ -254,7 +253,7 @@
 
   .cny-sidebar-item {
     justify-content: center;
-    padding: 10px;
+    padding: 9px 10px;
     // The collapsed rail centres its items, so undo the flush-left break-out.
     margin-left: 0;
     margin-right: 0;
@@ -286,6 +285,8 @@
     z-index: 1001;
     width: min(300px, 86vw);
     max-height: none;
+    // an overlay: lift it off the page (and the dimmed backdrop) in dark
+    background: var(--bg-surface-lowest);
     transform: translateX(-100%);
     visibility: hidden;
     transition: transform 220ms var(--ease-standard), visibility 0s linear 220ms;
@@ -312,6 +313,9 @@
   }
 
   .cny-dark .cny-sidebar-backdrop.open { background: rgba(0, 0, 0, 0.7); }
+  @media (prefers-color-scheme: dark) {
+    :root:not(.cny-light) .cny-sidebar-backdrop.open { background: rgba(0, 0, 0, 0.7); }
+  }
 }
 
 @media (prefers-reduced-motion: reduce) {

package/src/components/_skeleton.scss

@@ -36,7 +36,8 @@
     width: 60%;
     border-radius: var(--radius-xs);
   }
-  &.circle { border-radius: 50%; }
+  &.circle { border-radius: 50%; width: 32px; height: 32px; }
+  &.rect { width: 100%; height: 96px; border-radius: var(--radius-md); }
   &.button { height: 36px; width: 96px; border-radius: var(--radius-sm); }
   &.avatar { width: 32px; height: 32px; border-radius: 50%; }
 }
@@ -70,3 +71,41 @@
     );
   }
 }
+
+// .cny-light wins over a dark OS preference
+.cny-light .skeleton::after {
+  background: linear-gradient(
+    90deg,
+    transparent 0%,
+    rgba(255, 255, 255, 0.45) 50%,
+    transparent 100%
+  );
+}
+
+// Composite layouts
+.skeleton-lines {
+  display: block;
+  width: 100%;
+}
+
+.skeleton-card {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 12px;
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-md);
+  background: var(--bg-surface-lowest);
+}
+
+.skeleton-list-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 14px;
+}
+
+.skeleton-list-item-body {
+  flex: 1 1 auto;
+  min-width: 0;
+}

package/src/components/_slider.scss

@@ -16,7 +16,7 @@
   &-track {
     position: relative;
     flex: 1;
-    background: var(--bg-surface-low);
+    background: var(--border-input); // rail >=3:1 against the page (WCAG 1.4.11)
     border-radius: 999px;
     height: 4px;
     overflow: hidden;
@@ -42,7 +42,7 @@
     &:hover  { transform: scale(1.08); }
     &:active { cursor: grabbing; }
     &:focus-visible {
-      outline: 2px solid var(--slider-accent);
+      outline: 2px solid var(--border-focus);
       outline-offset: 2px;
     }
   }
@@ -68,6 +68,12 @@
   &-thumb:focus-visible &-bubble,
   &-thumb[data-state='active'] &-bubble { opacity: 1; }
 
+  // Value tooltip (`showValueTooltip`): only while dragging / keyboard-focused,
+  // never on plain hover.
+  &-tooltip { opacity: 0; }
+  &.is-dragging &-tooltip,
+  &-thumb:focus-visible &-tooltip { opacity: 1; }
+
   &[data-disabled] {
     opacity: 0.5;
     .cny-slider-thumb { cursor: not-allowed; }

package/src/components/_stepper.scss

@@ -1,3 +1,4 @@
+@use '../base/scrollbar-mixin' as sb;
 @use '../tokens/primitives' as *;
 
 // Stepper — wizard / multi-step progress trail.
@@ -32,7 +33,7 @@
       &:hover .cny-stepper-label { color: var(--text-primary); }
     }
     &:focus-visible {
-      outline: 2px solid var(--color-primary);
+      outline: 2px solid var(--border-focus);
       outline-offset: 2px;
     }
   }
@@ -95,14 +96,26 @@
     .cny-stepper-connector { background: var(--color-success); }
   }
 
-  // Horizontal
+  &-step.is-error {
+    .cny-stepper-marker {
+      background: var(--color-danger);
+      border-color: var(--color-danger);
+      color: var(--color-danger-on);
+    }
+    .cny-stepper-label { color: var(--color-danger-text); }
+    .cny-stepper-connector { background: var(--border-color); }
+  }
+
+  // Horizontal — steps never shrink; a wide trail scrolls sideways instead of clipping.
   &-horizontal {
     display: flex;
     align-items: center;
     gap: $space-2;
+    overflow-x: auto;
+    @include sb.expand-scrollbar;
 
-    .cny-stepper-step { flex: 0 1 auto; }
-    .cny-stepper-step:not(:last-child) { flex: 1 1 0; }
+    .cny-stepper-step { flex: 0 0 auto; }
+    .cny-stepper-step:not(:last-child) { flex: 1 0 auto; }
     .cny-stepper-connector { height: 2px; margin: 0 $space-2; min-width: 12px; }
   }
 
@@ -123,3 +136,8 @@
     .cny-stepper-desc   { font-size: 0.7rem; }
   }
 }
+
+// Coarse pointers: each step is a >=44px target.
+@media (pointer: coarse) {
+  .cny-stepper-step-row { min-height: 44px; }
+}

package/src/components/_table.scss

@@ -1,3 +1,4 @@
+@use '../base/scrollbar-mixin' as sb;
 @use '../tokens/primitives' as *;
 
 // Table — enterprise data tables. Opt-in .striped, .bordered, .compact.
@@ -34,9 +35,22 @@
     &:last-child td { border-bottom: 0; }
   }
 
+  &.striped tbody tr:nth-child(odd) { background: var(--bg-surface-low); }
+
+  // after .striped so hover wins on odd rows; on a striped table the hover tint
+  // is a step beyond the stripe, otherwise hovering an odd row shows nothing
   &.hoverable tbody tr:hover { background: var(--bg-surface-low); }
+  &.striped.hoverable tbody tr:hover {
+    background: color-mix(in srgb, var(--color-primary) 9%, var(--bg-surface-low));
+  }
 
-  &.striped tbody tr:nth-child(odd) { background: var(--bg-surface-low); }
+  // Keep the header in view while the rows scroll. Needs a scrolling ancestor
+  // with a bounded height (e.g. `.table-wrap` with a `max-height`).
+  &.sticky-header thead th {
+    position: sticky;
+    top: 0;
+    z-index: 2;
+  }
 
   &.compact {
     th, td { padding: $space-2 $space-3; }
@@ -80,7 +94,7 @@
       position: absolute;
       top: 0;
       right: 0;
-      width: 6px;
+      width: 12px;
       height: 100%;
       cursor: col-resize;
       user-select: none;
@@ -89,11 +103,16 @@
       background: transparent;
       transition: background-color var(--transition-fast);
 
+      &:focus-visible {
+        outline: 2px solid var(--border-focus);
+        outline-offset: -2px;
+      }
+
       &::after {
         content: '';
         position: absolute;
         top: 20%;
-        right: 2px;
+        right: 5px;
         width: 1px;
         height: 60%;
         background: var(--border-color);
@@ -123,6 +142,7 @@
 // Wrapper for horizontal scroll on narrow viewports
 .table-wrap {
   overflow-x: auto;
+  @include sb.expand-scrollbar;
   border: 1px solid var(--border-color);
   border-radius: var(--radius-md);
   background: var(--bg-surface-lowest);

package/src/components/_tabs.scss

@@ -48,7 +48,7 @@
 
   &:hover { color: var(--text-secondary); }
   &:focus-visible {
-    outline: 2px solid color-mix(in srgb, var(--color-primary) 60%, transparent);
+    outline: 2px solid var(--border-focus);
     outline-offset: 2px;
     border-radius: var(--radius-xs);
   }
@@ -72,7 +72,7 @@
     border-bottom: 2px solid transparent;
 
     &[data-state='active'] {
-      color: var(--color-primary);
+      color: var(--text-accent);
       border-bottom-color: var(--color-primary);
     }
   }
@@ -103,7 +103,7 @@
 
     &:hover { background: var(--bg-surface-low); }
     &[data-state='active'] {
-      color: var(--color-primary);
+      color: var(--text-accent);
       background: color-mix(in srgb, var(--color-primary) 12%, transparent);
     }
   }
@@ -141,8 +141,124 @@
   flex: 1 1 auto;
 
   &:focus-visible {
-    outline: 2px solid var(--color-primary);
+    outline: 2px solid var(--border-focus);
     outline-offset: 2px;
     border-radius: var(--radius-xs);
   }
 }
+
+// ── Sliding indicator (Tabs `indicator`) ──────────────────────
+// The active trigger's own underline/fill is replaced by one element that
+// slides to its position via --cny-tabs-x/y/w/h set from the measured tab.
+.cny-tabs-indicator {
+  position: absolute;
+  left: 0;
+  top: 0;
+  pointer-events: none;
+  opacity: 0;
+  width: var(--cny-tabs-w, 0);
+  height: var(--cny-tabs-h, 0);
+  transform: translate(var(--cny-tabs-x, 0), var(--cny-tabs-y, 0));
+  transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1), width 220ms cubic-bezier(0.4, 0, 0.2, 1),
+    height 220ms cubic-bezier(0.4, 0, 0.2, 1);
+  &[data-ready] { opacity: 1; }
+}
+
+.cny-tabs.has-indicator {
+  .cny-tabs-trigger { position: relative; z-index: 1; }
+
+  &.variant-line {
+    .cny-tabs-trigger[data-state='active'] { border-bottom-color: transparent; border-right-color: transparent; }
+    .cny-tabs-indicator {
+      top: auto;
+      bottom: -1px;
+      height: 2px;
+      background: var(--color-primary);
+      transform: translateX(var(--cny-tabs-x, 0));
+    }
+    &[data-orientation='vertical'] .cny-tabs-indicator {
+      left: auto;
+      right: -1px;
+      top: 0;
+      bottom: auto;
+      width: 2px;
+      height: var(--cny-tabs-h, 0);
+      transform: translateY(var(--cny-tabs-y, 0));
+    }
+  }
+  &.variant-pills {
+    .cny-tabs-trigger[data-state='active'] { background: transparent; }
+    .cny-tabs-indicator {
+      border-radius: 999px;
+      background: color-mix(in srgb, var(--color-primary) 12%, transparent);
+    }
+  }
+  &.variant-segmented {
+    .cny-tabs-trigger[data-state='active'] { background: transparent; box-shadow: none; }
+    .cny-tabs-indicator {
+      border-radius: 999px;
+      background: var(--bg-surface-lowest);
+      box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), inset 0 0 0 1px var(--hairline-color);
+    }
+  }
+}
+
+// ── Scrolling list (Tabs `overflow="scroll"`) ─────────────────
+.cny-tabs-scroller {
+  position: relative;
+  display: flex;
+  align-items: stretch;
+  min-width: 0;
+
+  .cny-tabs-list.is-scroll {
+    flex: 1 1 auto;
+    min-width: 0;
+    flex-wrap: nowrap;
+    overflow-x: auto;
+    scrollbar-width: none;
+    &::-webkit-scrollbar { display: none; }
+  }
+
+  // Edge fades appear only on the side that has more content.
+  &[data-start] .cny-tabs-list.is-scroll { mask-image: linear-gradient(to right, transparent, #000 28px); }
+  &[data-end] .cny-tabs-list.is-scroll { mask-image: linear-gradient(to left, transparent, #000 28px); }
+  &[data-start][data-end] .cny-tabs-list.is-scroll {
+    mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent);
+  }
+}
+
+.cny-tabs-arrow {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 2;
+  display: none;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  border: 1px solid var(--hairline-color);
+  border-radius: 50%;
+  background: var(--bg-surface-lowest);
+  color: var(--text-secondary);
+  cursor: pointer;
+  &:hover { color: var(--text-primary); }
+  &.is-start { left: 0; }
+  &.is-end { right: 0; }
+}
+.cny-tabs-scroller[data-start] .cny-tabs-arrow.is-start,
+.cny-tabs-scroller[data-end] .cny-tabs-arrow.is-end { display: inline-flex; }
+
+@media (prefers-reduced-motion: reduce) {
+  .cny-tabs-indicator { transition: none; }
+}
+
+// Coarse pointers: >=44px triggers and scroll arrows.
+@media (pointer: coarse) {
+  .cny-tabs-trigger { min-height: 44px; }
+  .cny-tabs-arrow {
+    width: 44px;
+    height: 44px;
+  }
+}

package/src/components/_timeline.scss

@@ -1,3 +1,4 @@
+@use '../base/scrollbar-mixin' as sb;
 @use '../tokens/primitives' as *;
 
 // Timeline — activity / history rail.
@@ -87,6 +88,8 @@
 
   &-soft {
     background: var(--dot-soft);
+    // The soft tint alone vanishes against either page; a tinted rim keeps the dot findable.
+    border: 1.5px solid color-mix(in srgb, var(--dot-color) 55%, transparent);
     color: var(--dot-color);
   }
 
@@ -293,6 +296,15 @@
   flex-direction: row;
   align-items: flex-start;
   width: 100%;
+  max-width: 100%;
+  // A wide rail scrolls inside itself rather than pushing the page sideways.
+  overflow-x: auto;
+  @include sb.expand-scrollbar;
+
+  &:focus-visible {
+    outline: 2px solid var(--border-focus);
+    outline-offset: 2px;
+  }
 }
 
 .cny-timeline-horizontal .cny-timeline-item {
@@ -366,3 +378,17 @@
   padding: 0 $space-2 $space-2;
   text-align: center;
 }
+
+// `navigable` focus ring, plus `empty` state
+.cny-timeline-item:focus-visible {
+  outline: 2px solid var(--border-focus);
+  outline-offset: 2px;
+  border-radius: var(--radius-sm);
+}
+
+.cny-timeline-empty {
+  list-style: none;
+  padding: 16px 0;
+  font-size: 0.875rem;
+  color: var(--text-muted);
+}

package/src/components/_toast.scss

@@ -61,6 +61,7 @@
 // ── Toast surface — flat white card ─────────────────────────────
 .cny-toast {
   --toast-accent: var(--color-primary);
+  --toast-accent-text: var(--text-accent);
 
   position: relative;
   display: flex;
@@ -75,23 +76,20 @@
   color: var(--text-primary);
   border: 1px solid color-mix(in srgb, var(--border-color) 60%, transparent);
   border-radius: 10px;
-  box-shadow:
-    0 1px 2px rgba(15, 23, 42, 0.04),
-    0 8px 24px rgba(149, 157, 165, 0.18);
+  box-shadow: var(--shadow-popover);
   font-family: var(--font-body);
   font-size: 0.875rem;
   line-height: 1.5;
   overflow: hidden;
   pointer-events: auto;
+  touch-action: pan-y; // vertical page scroll stays native; horizontal = swipe-to-dismiss
   transition: transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1),
               box-shadow 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
   animation: cny-toast-in-bottom 220ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
 
   &:hover {
     transform: translateY(-2px);
-    box-shadow:
-      0 1px 2px rgba(15, 23, 42, 0.04),
-      0 14px 32px rgba(149, 157, 165, 0.24);
+    box-shadow: var(--shadow-lg);
   }
 
   // Direction-aware entrance
@@ -113,11 +111,11 @@
   }
 
   // ── Variants — only --toast-accent shifts ──
-  &.success { --toast-accent: var(--color-success); }
-  &.info    { --toast-accent: var(--color-info); }
-  &.warning { --toast-accent: var(--color-warning); }
-  &.danger  { --toast-accent: var(--color-danger); }
-  &.loading { --toast-accent: var(--color-primary); }
+  &.success { --toast-accent: var(--color-success); --toast-accent-text: var(--color-success-text); }
+  &.info    { --toast-accent: var(--color-info); --toast-accent-text: var(--color-info-text); }
+  &.warning { --toast-accent: var(--color-warning); --toast-accent-text: var(--color-warning-text); }
+  &.danger  { --toast-accent: var(--color-danger); --toast-accent-text: var(--color-danger-text); }
+  &.loading { --toast-accent: var(--color-primary); --toast-accent-text: var(--text-accent); }
 }
 
 // ── Wave decoration on the left edge ─────────────────────────────
@@ -183,7 +181,7 @@
   letter-spacing: -0.01em;
   line-height: 1.25;
   margin: 0;
-  color: var(--toast-accent);
+  color: var(--toast-accent-text);
   font-size: 16px;
   text-align: center;
   cursor: default;
@@ -208,6 +206,20 @@
   z-index: 1;
 }
 
+.cny-toast-action-btn {
+  padding: 4px 10px;
+  background: transparent;
+  border: 0;
+  border-radius: var(--radius-sm);
+  font: inherit;
+  font-weight: 650;
+  color: var(--toast-accent-text);
+  cursor: pointer;
+  transition: background-color 140ms ease;
+  &:hover { background: color-mix(in srgb, var(--toast-accent) 12%, transparent); }
+  &:focus-visible { outline: 2px solid var(--toast-accent); outline-offset: 2px; }
+}
+
 // ── Close button ───────────────────────────────────────────────
 .cny-toast-close {
   flex: none;

package/src/components/_tooltip-radix.scss

@@ -8,10 +8,16 @@
 }
 
 .cny-tooltip-content {
-  z-index: 1020;
+  z-index: var(--z-tooltip, 1020);
   padding: 5px 9px;
-  background: var(--text-primary);
-  color: var(--bg-surface-lowest);
+  // Light: inverted dark bubble. Dark: an elevated dark surface with a border —
+  // an inverted (white) bubble glares on a dark page.
+  --cny-tt-bg: var(--text-primary);
+  --cny-tt-fg: var(--bg-surface-lowest);
+  --cny-tt-border: transparent;
+  background: var(--cny-tt-bg);
+  color: var(--cny-tt-fg);
+  border: 1px solid var(--cny-tt-border);
   border-radius: var(--radius-xs);
   font-family: var(--font-body);
   font-size: 0.75rem;
@@ -30,7 +36,22 @@
   &[data-side='right']  { transform-origin: left center; }
 }
 
-.cny-tooltip-arrow { fill: var(--text-primary); }
+// Same trigger as the dark tokens: OS dark unless .cny-light, or an explicit .cny-dark.
+@media (prefers-color-scheme: dark) {
+  :root:not(.cny-light) .cny-tooltip-content {
+    --cny-tt-bg: var(--bg-surface-edge);
+    --cny-tt-fg: var(--text-primary);
+    --cny-tt-border: var(--border-color-strong);
+  }
+}
+
+.cny-dark .cny-tooltip-content {
+  --cny-tt-bg: var(--bg-surface-edge);
+  --cny-tt-fg: var(--text-primary);
+  --cny-tt-border: var(--border-color-strong);
+}
+
+.cny-tooltip-arrow { fill: var(--cny-tt-bg, var(--text-primary)); }
 
 @media (prefers-reduced-motion: reduce) {
   .cny-tooltip-content { animation: none; }