canny-ui 6.7.0 → 7.0.0

package/src/components/_datepicker.scss

@@ -31,7 +31,7 @@
     padding: 0 $space-3;
 
     &:focus,
-    &.is-open { border-color: var(--border-focus); }
+    &.is-open { border-color: var(--border-input-focus); }
     &[disabled] { cursor: not-allowed; }
   }
 
@@ -44,8 +44,8 @@
     transition: color 140ms ease;
   }
   &-trigger:hover &-icon,
-  &-trigger.is-open &-icon { color: var(--border-focus); }
-  &-trigger.danger &-icon { color: var(--color-danger); }
+  &-trigger.is-open &-icon { color: var(--text-primary); }
+  &-trigger.danger &-icon { color: var(--color-danger-text); }
 
   &-value {
     flex: 1 1 auto;
@@ -80,7 +80,7 @@
     display: block;
     margin-top: 6px;
     font-size: 0.75rem;
-    color: var(--color-danger);
+    color: var(--color-danger-text);
     line-height: 1.4;
   }
 }
@@ -96,15 +96,12 @@
 
 .cny-datepicker-panel {
   position: relative;
-  z-index: 1010;
+  z-index: var(--z-popover, 1010);
   padding: 10px;
   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.02),
-    0 6px 18px -6px rgba(15, 23, 42, 0.14),
-    0 14px 32px -16px rgba(15, 23, 42, 0.16);
+  box-shadow: var(--shadow-popover);
   font-family: var(--font-body);
   color: var(--text-primary);
   animation: cny-dp-pop 140ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
@@ -175,7 +172,7 @@
 
     &:hover {
       background: var(--bg-surface-low);
-      color: var(--color-info);
+      color: var(--color-info-text);
 
       &::after { opacity: 1; transform: rotate(45deg) translateY(0); }
     }
@@ -248,10 +245,10 @@
   &:hover:not(:disabled):not(.is-selected) { background: var(--bg-surface-low); }
   &:focus-visible { outline: 2px solid var(--border-focus); outline-offset: -1px; z-index: 1; }
 
-  &.is-outside { color: var(--text-muted); opacity: 0.5; }
+  &.is-outside { color: var(--text-muted); }
 
   &.is-today:not(.is-selected) {
-    color: var(--color-info);
+    color: var(--color-info-text);
     font-weight: 600;
     box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-info) 35%, transparent);
 
@@ -303,12 +300,12 @@
   &:hover:not(:disabled):not(.is-selected) { background: var(--bg-surface-low); }
   &:focus-visible { outline: 2px solid var(--border-focus); outline-offset: -1px; }
 
-  &.is-outside { color: var(--text-muted); opacity: 0.55; }
+  &.is-outside { color: var(--text-muted); }
 
   // Marks the currently-viewed month/year when drilling up for navigation
   &.is-current {
     box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-info) 40%, transparent);
-    color: var(--color-info);
+    color: var(--color-info-text);
     font-weight: 600;
   }
 
@@ -362,16 +359,16 @@
   align-items: stretch;
   height: 30px;
   background: var(--bg-surface-lowest);
-  border: 1px solid var(--border-color);
+  border: 1px solid var(--border-input);
   border-radius: var(--radius-xs);
   overflow: hidden;
   transition: border-color 120ms ease, box-shadow 120ms ease;
 
-  &:hover { border-color: var(--border-color-strong, var(--border-color)); }
+  &:hover { border-color: var(--border-input-hover); }
 
   &:focus-within {
-    border-color: var(--border-focus);
-    box-shadow: 0 0 0 2px color-mix(in srgb, var(--border-focus) 18%, transparent);
+    border-color: var(--border-input-focus);
+    box-shadow: none;
   }
 
   &-input {
@@ -460,7 +457,7 @@
 
     &.is-active {
       background: var(--bg-surface-lowest);
-      color: var(--color-info);
+      color: var(--color-info-text);
       box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08), inset 0 0 0 1px var(--hairline-color, var(--border-color));
     }
 
@@ -489,7 +486,7 @@
 .cny-datepicker-action {
   border: 0;
   background: transparent;
-  color: var(--color-info);
+  color: var(--color-info-text);
   font-family: var(--font-body);
   font-size: 0.75rem;
   font-weight: 500;
@@ -514,3 +511,29 @@
     }
   }
 }
+
+// Quick presets row + typed-date field (DatePicker `presets` / `typeable`)
+.cny-datepicker-presets {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 2px;
+  margin-bottom: 6px;
+  padding-bottom: 6px;
+  border-bottom: 1px solid var(--hairline-color, var(--border-color));
+}
+
+.cny-datepicker-typed {
+  display: block;
+  width: 100%;
+  margin-bottom: 8px;
+  padding: 5px 8px;
+  background: var(--bg-surface-lowest);
+  color: var(--text-primary);
+  border: 1px solid var(--border-input);
+  border-radius: var(--radius-sm);
+  font-family: var(--font-body);
+  font-size: 0.8125rem;
+
+  &:focus-visible { outline: none; border-color: var(--border-focus); }
+  &[aria-invalid='true'] { border-color: var(--color-danger); }
+}

package/src/components/_dialog.scss

@@ -1,3 +1,4 @@
+@use '../base/scrollbar-mixin' as sb;
 @use '../tokens/primitives' as *;
 
 // Dialog (Modal) — portaled, centered, focus-trapped.
@@ -18,6 +19,7 @@
   animation: cny-dialog-overlay-in 160ms ease-out;
 }
 .cny-dark .cny-dialog-overlay { background: rgba(0, 0, 0, 0.7); }
+@media (prefers-color-scheme: dark) { :root:not(.cny-light) .cny-dialog-overlay { background: rgba(0, 0, 0, 0.7); } }
 
 .cny-dialog-content {
   position: fixed;
@@ -91,6 +93,16 @@
 .cny-dialog-body {
   flex: 1 1 auto;
   overflow-y: auto;
+  scrollbar-gutter: stable; // no layout jump when the scrollbar appears
+  overscroll-behavior: contain; // don't chain scroll to the page behind
+  // Scroll shadows: fade appears only where content overflows (CSS-only).
+  background:
+    linear-gradient(var(--bg-surface-lowest) 30%, transparent) top / 100% 24px no-repeat local,
+    linear-gradient(transparent, var(--bg-surface-lowest) 70%) bottom / 100% 24px no-repeat local,
+    radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, 0.14), transparent) top / 100% 10px no-repeat scroll,
+    radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, 0.14), transparent) bottom / 100% 10px no-repeat scroll,
+    var(--bg-surface-lowest);
+  @include sb.expand-scrollbar;
   padding: 18px 20px;
   font-size: 0.9375rem;
   line-height: 1.6;

package/src/components/_drawer.scss

@@ -1,3 +1,4 @@
+@use '../base/scrollbar-mixin' as sb;
 @use '../tokens/primitives' as *;
 
 // Drawer / Sheet — slide-in panel from any edge.
@@ -18,6 +19,7 @@
   animation: cny-drawer-overlay-in 160ms ease-out;
 }
 .cny-dark .cny-drawer-overlay { background: rgba(0, 0, 0, 0.7); }
+@media (prefers-color-scheme: dark) { :root:not(.cny-light) .cny-drawer-overlay { background: rgba(0, 0, 0, 0.7); } }
 
 .cny-drawer-content {
   position: fixed;
@@ -114,6 +116,16 @@
 .cny-drawer-body {
   flex: 1 1 auto;
   overflow-y: auto;
+  scrollbar-gutter: stable;
+  overscroll-behavior: contain; // don't chain scroll to the page behind
+  // Scroll shadows: fade appears only where content overflows (CSS-only).
+  background:
+    linear-gradient(var(--bg-surface-lowest) 30%, transparent) top / 100% 24px no-repeat local,
+    linear-gradient(transparent, var(--bg-surface-lowest) 70%) bottom / 100% 24px no-repeat local,
+    radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, 0.14), transparent) top / 100% 10px no-repeat scroll,
+    radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, 0.14), transparent) bottom / 100% 10px no-repeat scroll,
+    var(--bg-surface-lowest);
+  @include sb.expand-scrollbar;
   padding: 18px 20px;
   color: var(--text-secondary);
 }

package/src/components/_fields.scss

@@ -1,3 +1,4 @@
+@use '../base/scrollbar-mixin' as sb;
 @use '../tokens/primitives' as *;
 
 // ── Field wrapper ────────────────────────────────────────────────────────
@@ -36,7 +37,7 @@
 
   // Required asterisk
   .cny-field-required {
-    color: var(--color-danger);
+    color: var(--color-danger-text);
     font-weight: 500;
   }
 
@@ -57,17 +58,18 @@
   color: var(--text-muted);
   font-variant-numeric: tabular-nums;
 
-  &.danger { color: var(--color-danger); }
+  &.danger { color: var(--color-danger-text); }
 }
 
 .cny-field-hint {
+  font-family: inherit;
   font-size: 0.75rem;
   color: var(--text-muted);
   line-height: 1.5;
 
-  &.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); }
 }
 
 // ── Input affix container ───────────────────────────────────────────────
@@ -115,8 +117,8 @@
 
     &:hover { background: var(--bg-surface-low); color: var(--text-primary); }
     &:focus-visible {
-      outline: none;
-      box-shadow: 0 0 0 2px var(--ring-color);
+      outline: var(--ring-width) solid var(--ring-color);
+      outline-offset: 1px;
     }
   }
 
@@ -132,6 +134,22 @@
   &.has-action > .input       { padding-right: 32px; }
 }
 
+// Character counter (Input / Textarea `showCount`)
+.cny-input-counted {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  gap: 4px;
+
+  .cny-input-count {
+    align-self: flex-end;
+    font-size: 0.75rem;
+    line-height: 1.2;
+    color: var(--text-muted);
+    font-variant-numeric: tabular-nums;
+  }
+}
+
 // ── Select (Radix Select trigger + content) ─────────────────────────────
 // Styled to match .input. The portalled content panel uses the surface
 // tokens and the same motion as our menus.
@@ -146,7 +164,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);
   font-family: var(--font-body);
   font-size: 0.875rem;
@@ -158,12 +177,12 @@
 
   &[data-placeholder] { color: var(--text-muted); }
 
-  &:hover:not([data-disabled]) { border-color: var(--border-color-strong); }
+  &:hover:not([data-disabled]) { border-color: var(--border-input-hover); }
 
   &:focus-visible,
   &[data-state='open'] {
     outline: none;
-    border-color: var(--border-focus);
+    border-color: var(--border-input-focus);
     box-shadow: none;
   }
 
@@ -187,6 +206,22 @@
   }
 }
 
+.cny-select-clear {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  margin-left: auto;
+  flex-shrink: 0;
+  border-radius: var(--radius-xs);
+  color: var(--text-muted);
+  cursor: pointer;
+  transition: background-color 120ms, color 120ms;
+
+  &:hover { background: var(--bg-surface-low); color: var(--text-primary); }
+}
+
 .cny-select-chevron {
   color: var(--text-muted);
   flex-shrink: 0;
@@ -195,13 +230,13 @@
 }
 
 .cny-select-content {
-  z-index: 60;
+  z-index: var(--z-popover, 1010);
   min-width: var(--radix-select-trigger-width);
   max-height: var(--radix-select-content-available-height);
   padding: 4px;
   border-radius: var(--radius-md);
   background: var(--bg-surface-lowest);
-  box-shadow: var(--shadow-lg), 0 0 0 1px var(--border-color);
+  box-shadow: var(--shadow-popover), 0 0 0 1px var(--border-color-strong);
   overflow: hidden;
   animation: cny-select-pop 160ms cubic-bezier(0.2, 0, 0, 1);
 }
@@ -211,7 +246,12 @@
   to   { opacity: 1; transform: translateY(0)    scale(1); }
 }
 
-.cny-select-viewport { padding: 2px; }
+// Radix injects `scrollbar-width: none` + `::-webkit-scrollbar { display: none }` on the
+// viewport; nesting under the content class outranks those rules.
+.cny-select-content .cny-select-viewport {
+  padding: 2px;
+  @include sb.expand-scrollbar;
+}
 
 .cny-select-item {
   position: relative;
@@ -230,7 +270,7 @@
     background: var(--bg-surface-low);
   }
   &[data-state='checked'] {
-    color: var(--color-primary);
+    color: var(--text-accent);
     font-weight: 500;
   }
   &[data-disabled] {
@@ -243,7 +283,7 @@
   position: absolute;
   right: 8px;
   display: inline-flex;
-  color: var(--color-primary);
+  color: var(--text-accent);
 }
 
 .cny-select-group-label {
@@ -273,7 +313,8 @@
   padding: 3px 32px 3px 6px;
   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);
   font-family: var(--font-body);
   font-size: 0.875rem;
@@ -283,11 +324,11 @@
     border-color var(--transition-fast),
     box-shadow var(--transition-fast);
 
-  &:hover:not([data-disabled]) { border-color: var(--border-color-strong); }
+  &:hover:not([data-disabled]) { border-color: var(--border-input-hover); }
 
   &[data-state='open'],
   &:focus-within {
-    border-color: var(--border-focus);
+    border-color: var(--border-input-focus);
     box-shadow: none;
   }
 
@@ -336,6 +377,48 @@
     transition: transform 150ms var(--ease-standard);
   }
   &[data-state='open'] .cny-multiselect-chevron { transform: translateY(-50%) rotate(180deg); }
+
+  &.has-clear { padding-right: 56px; }
+  .cny-multiselect-clear {
+    position: absolute;
+    right: 28px;
+    top: 50%;
+    transform: translateY(-50%);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 20px;
+    height: 20px;
+    border: 0;
+    border-radius: var(--radius-xs);
+    background: transparent;
+    color: var(--text-muted);
+    cursor: pointer;
+
+    &:hover { background: var(--bg-surface-low); color: var(--text-primary); }
+  }
+}
+
+// "Select all / Clear" row inside the MultiSelect dropdown
+.cny-multiselect-actions {
+  display: flex;
+  gap: 4px;
+  padding: 4px 6px;
+  border-bottom: 1px solid var(--border-color);
+
+  button {
+    border: 0;
+    background: transparent;
+    padding: 2px 6px;
+    border-radius: var(--radius-xs);
+    font: inherit;
+    font-size: 0.75rem;
+    color: var(--text-accent);
+    cursor: pointer;
+
+    &:hover:not(:disabled) { background: var(--bg-surface-low); }
+    &:disabled { color: var(--text-disabled); cursor: not-allowed; }
+  }
 }
 
 // Chip tokens
@@ -346,10 +429,13 @@
   padding: 2px 4px 2px 8px;
   border-radius: var(--radius-sm);
   background: var(--color-primary-soft);
-  color: var(--color-primary);
+  color: var(--text-accent);
   font-size: 0.8125rem;
   line-height: 1.3;
   max-width: 100%;
+  min-width: 0;
+
+  &.cny-chip-more { padding-right: 8px; }
 
   .cny-chip-label {
     overflow: hidden;
@@ -363,6 +449,7 @@
     justify-content: center;
     width: 16px;
     height: 16px;
+    padding: 0;
     border: 0;
     border-radius: 3px;
     background: transparent;
@@ -370,22 +457,22 @@
     cursor: pointer;
     opacity: 0.7;
 
-    &:hover { opacity: 1; background: rgba(255, 255, 255, 0.4); }
+    &:hover { opacity: 1; background: color-mix(in srgb, currentColor 16%, transparent); }
     &:focus-visible {
       outline: none;
       box-shadow: 0 0 0 2px currentColor;
     }
   }
 
-  &.danger  { background: var(--color-danger-soft);  color: var(--color-danger); }
-  &.warning { background: var(--color-warning-soft); color: var(--color-warning); }
-  &.success { background: var(--color-success-soft); color: var(--color-success); }
+  &.danger  { background: var(--color-danger-soft);  color: var(--color-danger-text); }
+  &.warning { background: var(--color-warning-soft); color: var(--color-warning-text); }
+  &.success { background: var(--color-success-soft); color: var(--color-success-text); }
   &.neutral { background: var(--bg-surface-low);     color: var(--text-secondary); }
 }
 
 // Popover panel for the combobox list (shared with date pickers etc.)
 .cny-popover {
-  z-index: 60;
+  z-index: var(--z-popover, 1010);
   min-width: var(--radix-popover-trigger-width);
   // Height was capped here but width was not, so one long option label stretched the
   // popover far past its trigger and across the page. Read as: never wider than the
@@ -398,11 +485,11 @@
   padding: 4px;
   border-radius: var(--radius-md);
   background: var(--bg-surface-lowest);
-  box-shadow: var(--shadow-lg), 0 0 0 1px var(--border-color);
+  box-shadow: var(--shadow-popover), 0 0 0 1px var(--border-color-strong);
   overflow: hidden;
   animation: cny-select-pop 160ms cubic-bezier(0.2, 0, 0, 1);
 
-  [cmdk-list] { max-height: 280px; overflow-y: auto; scrollbar-width: thin; padding: 2px; }
+  [cmdk-list] { max-height: 280px; overflow-y: auto; padding: 2px; @include sb.expand-scrollbar; }
   [cmdk-input] {
     width: 100%;
     margin: 2px 0 4px;
@@ -443,7 +530,7 @@
 
     .cny-check {
       margin-left: auto;
-      color: var(--color-primary);
+      color: var(--text-accent);
     }
   }
 
@@ -470,4 +557,5 @@
   width: 100%;
   resize: none;
   overflow: hidden;
+  transition: height 120ms ease;
 }

package/src/components/_forms.scss

@@ -22,7 +22,7 @@
   margin: 0;
   padding: 0;
   background: var(--bg-surface-lowest);
-  border: 1px solid var(--border-color-strong);
+  border: 1px solid var(--border-input);
   cursor: pointer;
   vertical-align: middle;
   transition:
@@ -32,8 +32,8 @@
 
   &:hover:not(:disabled):not([data-disabled])  { border-color: var(--color-primary); }
   &:focus-visible {
-    outline: none;
-    box-shadow: 0 0 0 var(--ring-width) var(--ring-color);
+    outline: var(--ring-width) solid var(--ring-color);
+    outline-offset: var(--ring-offset);
   }
   &:disabled,
   &[data-disabled] { opacity: 0.5; cursor: not-allowed; }
@@ -61,6 +61,12 @@
     }
   }
 
+  // Dark primary is light (white on it is 3.4:1) — flip the painted glyph to near-black.
+  @at-root {
+    :root:not(.cny-light) .checkbox:not([data-state]) { @media (prefers-color-scheme: dark) { &:checked { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'><path d='M3.5 8.5L6.5 11.5L12.5 5' stroke='%2309090b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>"); } &:indeterminate { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><rect x='3' y='7' width='10' height='2' fill='%2309090b' rx='1'/></svg>"); } } }
+    .cny-dark .checkbox:not([data-state]) { &:checked { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'><path d='M3.5 8.5L6.5 11.5L12.5 5' stroke='%2309090b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>"); } &:indeterminate { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><rect x='3' y='7' width='10' height='2' fill='%2309090b' rx='1'/></svg>"); } }
+  }
+
   // Radix pattern — Indicator child carries the Lucide check/minus icon.
   &[data-state='checked'],
   &[data-state='indeterminate'] {
@@ -73,9 +79,19 @@
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    color: #fff;
+    color: var(--color-primary-on, #fff);
     line-height: 0;
+    animation: cny-check-pop 140ms cubic-bezier(0.2, 0, 0, 1);
   }
+
+  // Radix Indicator renders both icons; show the one matching the state.
+  &[data-state='indeterminate'] .cny-checkbox-check,
+  &:not([data-state='indeterminate']) .cny-checkbox-minus { display: none; }
+}
+
+@keyframes cny-check-pop {
+  from { opacity: 0; transform: scale(0.5); }
+  to   { opacity: 1; transform: scale(1); }
 }
 
 .radio {
@@ -100,6 +116,7 @@
     height: 8px;
     border-radius: 50%;
     background: var(--color-primary);
+    animation: cny-check-pop 140ms cubic-bezier(0.2, 0, 0, 1);
   }
 }
 
@@ -154,7 +171,7 @@
   height: var(--switch-h);
   margin: 0;
   padding: 0;
-  background: var(--border-color-strong);
+  background: var(--border-input); // off-track >=3:1 against the page (WCAG 1.4.11)
   border: 0;
   border-radius: var(--radius-full);
   cursor: pointer;
@@ -183,8 +200,8 @@
   }
 
   &:focus-visible {
-    outline: none;
-    box-shadow: 0 0 0 var(--ring-width) var(--ring-color);
+    outline: var(--ring-width) solid var(--ring-color);
+    outline-offset: var(--ring-offset);
   }
 
   &:disabled { opacity: 0.5; cursor: not-allowed; }
@@ -224,7 +241,8 @@
   padding: 0 $space-8 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);
   font-family: var(--font-body);
   font-size: 0.875rem;
@@ -238,11 +256,11 @@
     border-color var(--transition-fast),
     box-shadow var(--transition-fast);
 
-  &:hover:not(:disabled):not(:focus)  { border-color: var(--border-color-strong); }
+  &:hover:not(:disabled):not(:focus)  { border-color: var(--border-input-hover); }
 
   &:focus {
     outline: none;
-    border-color: var(--border-focus);
+    border-color: var(--border-input-focus);
     box-shadow: none;
   }