canny-ui 6.7.0 → 7.0.0

package/src/components/_menu.scss

@@ -1,3 +1,4 @@
+@use '../base/scrollbar-mixin' as sb;
 @use '../tokens/primitives' as *;
 
 // Menu (DropdownMenu) — popup menu with items, checkboxes, radios, submenus.
@@ -8,24 +9,30 @@
 }
 
 .cny-menu-content {
-  z-index: 1010;
+  z-index: var(--z-popover, 1010);
   display: flex;
   flex-direction: column;
   gap: 1px;
   min-width: 180px;
+  max-width: min(360px, calc(100vw - 16px));
+  // Long menus scroll inside the viewport instead of running off-screen.
+  max-height: var(--radix-popper-available-height, 70vh);
+  overflow-y: auto;
+  @include sb.expand-scrollbar;
   padding: 4px;
   background: var(--bg-surface-lowest);
-  border: 1px solid var(--border-color);
+  border: 1px solid var(--border-color-strong);
   border-radius: var(--radius-sm);
-  box-shadow:
-    0 1px 0 rgba(15, 23, 42, 0.04),
-    0 8px 24px -8px rgba(15, 23, 42, 0.2);
+  box-shadow: var(--shadow-popover);
   font-family: var(--font-body);
   outline: none;
   animation: cny-menu-in 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
 
   &.size-sm { min-width: 140px; padding: 3px; }
 
+  // A long label truncates instead of widening the menu past the viewport.
+  .cny-menu-item-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
+
   &[data-side='top']    { transform-origin: bottom; }
   &[data-side='bottom'] { transform-origin: top; }
   &[data-side='left']   { transform-origin: right; }
@@ -77,7 +84,7 @@
     color: var(--text-primary);
   }
   &[data-highlighted] .cny-menu-item-icon,
-  &[data-highlighted] .cny-menu-item-chevron { color: var(--color-primary); }
+  &[data-highlighted] .cny-menu-item-chevron { color: var(--text-accent); }
 
   &[data-disabled] {
     color: var(--text-disabled);
@@ -85,12 +92,19 @@
     pointer-events: none;
   }
 
+  // Active (checked) checkbox / radio rows read as selected, not just ticked.
+  &.is-check[data-state='checked'],
+  &.is-radio[data-state='checked'] {
+    font-weight: 600;
+    .cny-menu-item-icon { color: var(--text-accent); }
+  }
+
   &.is-destructive {
-    color: var(--color-danger);
-    .cny-menu-item-icon { color: var(--color-danger); }
+    color: var(--color-danger-text);
+    .cny-menu-item-icon { color: var(--color-danger-text); }
     &[data-highlighted] {
       background: color-mix(in srgb, var(--color-danger) 10%, var(--bg-surface-low));
-      color: var(--color-danger);
+      color: var(--color-danger-text);
     }
   }
 }

package/src/components/_navbar.scss

@@ -55,8 +55,8 @@
   &:hover { background: var(--bg-surface-low); }
 
   &:focus-visible {
-    outline: none;
-    box-shadow: 0 0 0 var(--ring-width) var(--ring-color);
+    outline: 2px solid var(--border-focus);
+    outline-offset: 2px;
   }
 
   .brand-mark {
@@ -109,8 +109,8 @@
   }
 
   &:focus-visible {
-    outline: none;
-    box-shadow: 0 0 0 var(--ring-width) var(--ring-color);
+    outline: 2px solid var(--border-focus);
+    outline-offset: 2px;
   }
 
   &.active {
@@ -165,8 +165,32 @@
   &:hover { background: var(--bg-surface-low); }
 
   &:focus-visible {
-    outline: none;
-    box-shadow: 0 0 0 var(--ring-width) var(--ring-color);
+    outline: 2px solid var(--border-focus);
+    outline-offset: 2px;
+  }
+}
+
+// Built-in menu button for NavbarNav: only below 640px, where the nav becomes a dropdown.
+.cny-navbar-menu-btn {
+  display: none;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  margin-left: auto;
+  border-radius: var(--radius-md);
+  border: 1px solid transparent;
+  background: transparent;
+  color: var(--text-primary);
+  cursor: pointer;
+  flex-shrink: 0;
+  transition: background-color var(--transition-fast);
+
+  &:hover { background: var(--bg-surface-low); }
+
+  &:focus-visible {
+    outline: 2px solid var(--border-focus);
+    outline-offset: 2px;
   }
 }
 
@@ -181,7 +205,74 @@
     padding: 0 $space-4;
     gap: $space-2;
   }
-  .cny-navbar-nav { display: none; }
+  .cny-navbar-menu-btn { display: inline-flex; }
+  .cny-navbar-menu-btn ~ .cny-navbar-actions { margin-left: 0; }
+  // Dropdown list under the bar; hidden until the menu button opens it.
+  .cny-navbar-nav {
+    display: none;
+    position: absolute;
+    top: 100%;
+    left: 0;
+    right: 0;
+    flex: none;
+    flex-direction: column;
+    align-items: stretch;
+    gap: 2px;
+    padding: $space-2 $space-4;
+    max-height: calc(100vh - 52px);
+    overflow-x: visible;
+    overflow-y: auto;
+    background: var(--bg-surface-lowest);
+    border-bottom: 1px solid var(--border-color);
+    box-shadow: var(--shadow-md);
+
+    &.is-open { display: flex; }
+
+    .cny-navbar-item {
+      height: 40px;
+
+      &.active::after {
+        left: 0;
+        right: auto;
+        top: 8px;
+        bottom: 8px;
+        width: 2px;
+        height: auto;
+        border-radius: 2px;
+      }
+    }
+  }
   .cny-navbar-brand { flex-shrink: 1; min-width: 0; overflow: hidden; }
   .cny-navbar-actions { gap: 2px; }
 }
+
+// Coarse pointers: >=44px targets.
+@media (pointer: coarse) {
+  .cny-navbar-item { min-height: 44px; height: auto; }
+  .cny-navbar-toggle,
+  .cny-navbar-menu-btn { width: 44px; height: 44px; }
+  .cny-navbar-nav .cny-navbar-item { min-height: 44px; }
+}
+
+// Skip-to-content link (Navbar `skipLinkTarget`): off-screen until keyboard focus.
+.cny-skip-link {
+  position: fixed;
+  top: 8px;
+  left: 8px;
+  z-index: 1000;
+  padding: 8px 14px;
+  border-radius: var(--radius-md);
+  background: var(--bg-surface-lowest);
+  color: var(--text-primary);
+  font-family: var(--font-body);
+  font-size: 0.875rem;
+  font-weight: 550;
+  text-decoration: none;
+  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.18);
+  transform: translateY(-200%);
+  &:focus-visible {
+    transform: none;
+    outline: 2px solid var(--border-focus);
+    outline-offset: 2px;
+  }
+}

package/src/components/_pagination.scss

@@ -29,8 +29,8 @@
       color: var(--text-primary);
     }
     &:focus-visible {
-      outline: 2px solid var(--color-primary);
-      outline-offset: 1px;
+      outline: 2px solid var(--border-focus);
+      outline-offset: 2px;
     }
     &:disabled {
       opacity: 0.4;
@@ -60,3 +60,106 @@
     .cny-pagination-btn { min-width: 36px; height: 36px; font-size: 0.875rem; padding: 0 10px; }
   }
 }
+
+// Rows-per-page picker and go-to-page input
+.cny-pagination {
+  flex-wrap: wrap;
+}
+
+.cny-pagination-field {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  margin: 0 8px;
+  font-size: 0.8125rem;
+  color: var(--text-muted);
+}
+
+.cny-pagination-select,
+.cny-pagination-input {
+  height: 32px;
+  padding: 0 8px;
+  background: var(--bg-surface-lowest);
+  color: var(--text-primary);
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-sm);
+  font: inherit;
+
+  &:focus-visible {
+    outline: 2px solid var(--border-focus);
+    outline-offset: 2px;
+  }
+}
+
+.cny-pagination-input {
+  width: 4.5rem;
+}
+
+// "1–10 of 243" range text
+.cny-pagination-range {
+  margin: 0 8px;
+  font-size: 0.8125rem;
+  font-variant-numeric: tabular-nums;
+  color: var(--text-secondary);
+  white-space: nowrap;
+}
+
+@mixin cny-pagination-sr {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+// "Page 3 of 12" — only shown in the compact layout
+.cny-pagination-summary {
+  display: none;
+  padding: 0 8px;
+  font-size: 0.8125rem;
+  color: var(--text-secondary);
+  white-space: nowrap;
+}
+
+.cny-pagination-compact {
+  .cny-pagination-btn:not(.cny-pagination-control),
+  .cny-pagination-ellipsis,
+  .cny-pagination-edge {
+    display: none;
+  }
+  .cny-pagination-summary {
+    display: inline;
+  }
+  // Labels collapse to visually-hidden text (the controls keep their names).
+  .cny-pagination-field-label {
+    @include cny-pagination-sr;
+  }
+}
+
+@media (max-width: 480px) {
+  .cny-pagination-auto {
+    .cny-pagination-btn:not(.cny-pagination-control),
+    .cny-pagination-ellipsis,
+    .cny-pagination-edge {
+      display: none;
+    }
+    .cny-pagination-summary {
+      display: inline;
+    }
+    .cny-pagination-field-label {
+      @include cny-pagination-sr;
+    }
+  }
+}
+
+// Coarse pointers: >=44px targets.
+@media (pointer: coarse) {
+  .cny-pagination-btn { min-width: 44px; min-height: 44px; }
+  .cny-pagination-select,
+  .cny-pagination-input { height: 44px; }
+}

package/src/components/_panels.scss

@@ -1,3 +1,4 @@
+@use '../base/scrollbar-mixin' as sb;
 @use '../tokens/primitives' as *;
 
 // PanelGroup — resizable split panels. Percentage-based, so it fills any container responsively.
@@ -19,28 +20,41 @@
   min-width: 0;
   min-height: 0;
   overflow: auto;
+  @include sb.expand-scrollbar;
 }
 
 .cny-panel-handle {
   position: relative;
   flex: none;
   align-self: stretch;
-  background: var(--hairline-color);
+  background: var(--hairline-strong);
   transition: background-color 120ms ease;
   touch-action: none;
   z-index: 1;
 
-  // generous invisible hit area around the thin visible line
+  // generous invisible hit area (>=17px; 25px on touch) around the thin visible line
   &::before {
     content: '';
     position: absolute;
-    inset: -4px;
+    inset: 0 -6px;
   }
 
-  &:hover,
+  &-v::before { inset: -6px 0; }
+
+  @media (pointer: coarse) {
+    &::before { inset: 0 -10px; }
+    &-v::before { inset: -10px 0; }
+  }
+
+  &:hover {
+    background: var(--color-primary);
+  }
+
+  // Strong, offset ring on top of the filled handle (>=3:1 against either panel).
   &:focus-visible {
     background: var(--color-primary);
-    outline: none;
+    outline: 2px solid var(--border-focus);
+    outline-offset: 2px;
   }
 
   &-h {

package/src/components/_popover.scss

@@ -8,14 +8,12 @@
 }
 
 .cny-popover-content {
-  z-index: 1010;
+  z-index: var(--z-popover, 1010);
   padding: 14px;
   background: var(--bg-surface-lowest);
-  border: 1px solid var(--border-color);
+  border: 1px solid var(--border-color-strong);
   border-radius: var(--radius-sm);
-  box-shadow:
-    0 1px 0 rgba(15, 23, 42, 0.04),
-    0 12px 28px -12px rgba(15, 23, 42, 0.22);
+  box-shadow: var(--shadow-popover);
   font-family: var(--font-body);
   color: var(--text-primary);
   outline: none;

package/src/components/_progress.scss

@@ -35,6 +35,37 @@
   }
 }
 
+// Indeterminate shimmer — full-width bar with a light sweep
+.progress.indeterminate.shimmer .progress-bar {
+  width: 100%;
+  background-color: var(--color-primary);
+  background-image: linear-gradient(
+    90deg,
+    transparent 0%,
+    rgba(255, 255, 255, 0.55) 50%,
+    transparent 100%
+  );
+  background-size: 40% 100%;
+  background-repeat: no-repeat;
+  background-position: -40% 0;
+  animation: cny-progress-shimmer 1.4s var(--ease-standard) infinite;
+}
+
+// Reduced motion: no travelling chunk — a static, faded bar still reads as "working"
+@media (prefers-reduced-motion: reduce) {
+  .progress.indeterminate .progress-bar,
+  .progress.indeterminate.shimmer .progress-bar {
+    width: 100%;
+    animation: none;
+    opacity: 0.5;
+    background-image: none;
+  }
+}
+
+@keyframes cny-progress-shimmer {
+  100% { background-position: 140% 0; }
+}
+
 @keyframes cny-progress-slide {
   0%   { transform: translateX(-100%); }
   100% { transform: translateX(250%); }

package/src/components/_scrollbar.scss

@@ -1,167 +1,17 @@
-@use '../tokens/primitives' as *;
+@use '../base/scrollbar-mixin' as sb;
 
 // ── Scrollbar ────────────────────────────────────────────────────
-// Opt-in styled scrollbar. Apply `.cny-scroll` to any overflow container.
-// Modifiers:
-//   .thin     — narrower track for dense UIs
-//   .overlay  — hides the thumb until hover/scroll
-//   .subtle   — track visible only on hover
-//   .expand   — thin by default, thumb widens on container hover
-//   .primary  — thumb uses primary color
+// Apply `.cny-scroll` to any overflow container. There is one look — the
+// expand-on-hover scrollbar (see base/_scrollbar-mixin.scss) — shared with
+// every scrolling Canny-UI component.
 
 .cny-scroll {
-  scrollbar-width: thin;
-  scrollbar-color: var(--border-color) transparent;
+  @include sb.expand-scrollbar;
 
-  &::-webkit-scrollbar {
-    width: 12px;
-    height: 12px;
-  }
-
-  &::-webkit-scrollbar-track {
-    background: transparent;
-  }
-
-  &::-webkit-scrollbar-thumb {
-    background-color: var(--border-color);
-    border-radius: var(--radius-full);
-    border: 3px solid transparent;
-    background-clip: content-box;
-    transition: background-color var(--transition-fast);
-
-    &:hover {
-      background-color: var(--text-muted);
-      background-clip: content-box;
-    }
-
-    &:active {
-      background-color: var(--text-secondary);
-      background-clip: content-box;
-    }
-  }
-
-  &::-webkit-scrollbar-corner {
-    background: transparent;
-  }
-
-  // ── Variants that live in the WebKit pseudo-elements ───────────
-  // Chromium drops every ::-webkit-scrollbar-* rule on an element whose
-  // scrollbar-width OR scrollbar-color is non-`auto`, and the base sets both.
-  // These three variants exist only as those rules, so both are reset here or
-  // none of them render. Firefox has no pseudo-element styling and falls back
-  // to a native scrollbar — these variants are a Chromium enhancement.
-  //
-  // `.thin` is deliberately NOT in this list: its look comes from the standard
-  // `scrollbar-width: thin`, the one path that works in Firefox too. Resetting
-  // it to `auto` would trade a close-enough 10px bar in Chromium for a
-  // full-width one in Firefox.
-  //
-  // @supports can't be used to split the two engines: Firefox parses
-  // `selector(::-webkit-scrollbar)` as valid and reports true, despite not
-  // implementing it.
-  &.subtle,
-  &.overlay,
-  &.expand {
-    scrollbar-width: auto;
-    scrollbar-color: auto;
-
-    // .primary re-declares scrollbar-color further down; this higher-specificity
-    // guard keeps WebKit alive when the two are combined, and the thumb rules
-    // below carry the colour instead.
-    &.primary {
-      scrollbar-color: auto;
-    }
-  }
-
-  // ── Thin ───────────────────────────────────────────────────────
-  &.thin {
-    &::-webkit-scrollbar {
-      width: 8px;
-      height: 8px;
-    }
-
-    &::-webkit-scrollbar-thumb {
-      border-width: 2px;
-    }
-  }
-
-  // ── Subtle: track appears on hover ─────────────────────────────
-  &.subtle {
-    &::-webkit-scrollbar-thumb {
-      background-color: transparent;
-    }
-
-    &:hover::-webkit-scrollbar-thumb,
-    &:focus-within::-webkit-scrollbar-thumb {
-      background-color: var(--border-color);
-      background-clip: content-box;
-    }
-  }
-
-  // ── Overlay: thumb floats over content ─────────────────────────
-  &.overlay {
-    &::-webkit-scrollbar {
-      width: 10px;
-      height: 10px;
-    }
-
-    &::-webkit-scrollbar-track {
-      background: transparent;
-    }
-
-    &::-webkit-scrollbar-thumb {
-      background-color: color-mix(in srgb, var(--text-muted) 40%, transparent);
-      border-width: 2px;
-
-      &:hover {
-        background-color: color-mix(in srgb, var(--text-muted) 70%, transparent);
-        background-clip: content-box;
-      }
-    }
-  }
-
-  // ── Expand: slim thumb that fattens when the pointer is on the scrollbar ─
-  &.expand {
-    // The standard-property reset this variant needs is shared with
-    // .subtle/.overlay above.
-    &::-webkit-scrollbar {
-      width: 16px;
-      height: 16px;
-      background: transparent;
-    }
-
-    // Rest: 16px track with a 6px transparent border → 4px visible thumb.
-    // The track stays 16px so the grab target is generous despite the hairline.
-    &::-webkit-scrollbar-thumb {
-      border-width: 6px;
-      background-color: var(--border-color-strong);
-      transition:
-        border-width 0.15s ease,
-        background-color var(--transition-fast);
-    }
-
-    // Pointer over the thumb (anywhere in its 16px column) → fatten to 14px visible.
-    // The transparent border is still part of the thumb's hit region.
-    &::-webkit-scrollbar-thumb:hover,
-    &::-webkit-scrollbar-thumb:active {
-      border-width: 1px;
-      background-color: var(--text-muted);
-    }
-  }
-
-  // ── Primary color ──────────────────────────────────────────────
-  &.primary {
-    scrollbar-color: var(--color-primary) transparent;
-
-    &::-webkit-scrollbar-thumb {
-      background-color: var(--color-primary);
-      background-clip: content-box;
-
-      &:hover {
-        background-color: var(--color-primary);
-        background-clip: content-box;
-      }
-    }
+  // Scroll / ScrollRegion are tab stops while they overflow: show the strong ring.
+  &:focus-visible {
+    outline: 2px solid var(--border-focus);
+    outline-offset: 2px;
   }
 }
 
@@ -185,3 +35,10 @@
   background-attachment: local, local, scroll, scroll;
   background-color: var(--bg-surface-lowest);
 }
+
+// Plain-CSS scroll wrapper for tables: give it `tabindex="0" role="region" aria-label="…"`
+// so keyboard users can scroll it, and it shows the same strong focus ring.
+.table-wrap:focus-visible {
+  outline: 2px solid var(--border-focus);
+  outline-offset: 2px;
+}