canny-ui 6.7.0 → 7.0.0

package/src/components/_tree.scss

@@ -45,7 +45,7 @@
   display: flex;
   align-items: center;
   gap: 4px;
-  height: 30px;
+  height: var(--cny-tree-row-h, 30px);
   padding: 0 6px;
   border-radius: $radius-sm;
   cursor: pointer;
@@ -62,14 +62,14 @@
 
   &.is-selected {
     background: var(--color-primary-soft);
-    color: var(--color-primary);
+    color: var(--text-accent);
     font-weight: 550;
   }
 }
 
 // focus ring on the treeitem (roving tabindex lives on the <li>)
 .cny-tree-item:focus-visible > .cny-tree-row {
-  outline: 2px solid var(--color-primary);
+  outline: 2px solid var(--border-focus);
   outline-offset: -2px;
 }
 
@@ -128,3 +128,51 @@
   white-space: nowrap;
   text-overflow: ellipsis;
 }
+
+// `expandControls` toolbar and `loading` / `empty` states
+.cny-tree-toolbar {
+  display: flex;
+  gap: 12px;
+  padding: 0 4px 6px;
+}
+
+.cny-tree-toolbar-btn {
+  appearance: none;
+  padding: 0;
+  border: 0;
+  background: none;
+  font: inherit;
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--text-accent);
+  cursor: pointer;
+  border-radius: var(--radius-xs);
+
+  &:hover {
+    text-decoration: underline;
+  }
+  &:focus-visible {
+    outline: 2px solid var(--border-focus);
+    outline-offset: 2px;
+  }
+}
+
+.cny-tree-skeleton {
+  list-style: none;
+  padding: 6px 8px;
+}
+
+.cny-tree-empty {
+  list-style: none;
+  padding: 16px 8px;
+  text-align: center;
+  font-size: 0.875rem;
+  color: var(--text-muted);
+}
+
+// windowed rows are flat (no nested group), indented inline; spacers stand in for unmounted rows
+.cny-tree-spacer {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}

package/src/components/_uploader.scss

@@ -30,7 +30,7 @@
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-primary);
+    outline: 2px solid var(--border-focus);
     outline-offset: 2px;
   }
 
@@ -39,6 +39,7 @@
     border-style: solid;
     background: var(--color-primary-soft);
     color: var(--color-primary);
+    box-shadow: 0 0 0 4px var(--color-primary-soft);
   }
 
   &.is-disabled {
@@ -109,3 +110,98 @@
     align-items: flex-start;
   }
 }
+
+// ── File list (per-file progress / retry / previews) ────────────────────
+.cny-uploader-files {
+  list-style: none;
+  margin: $space-3 0 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: $space-2;
+}
+
+.cny-uploader-file {
+  display: flex;
+  align-items: center;
+  gap: $space-3;
+  padding: $space-2 $space-3;
+  border: 1px solid var(--border-color);
+  border-radius: $radius-md;
+  background: var(--bg-surface-lowest);
+  font-family: var(--font-body);
+  font-size: 0.8125rem;
+
+  &.is-error { border-color: var(--color-danger); }
+}
+
+.cny-uploader-thumb {
+  flex: none;
+  width: 32px;
+  height: 32px;
+  border-radius: var(--radius-xs);
+  object-fit: cover;
+
+  &.is-generic {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    background: var(--bg-surface-low);
+    color: var(--text-muted);
+  }
+}
+
+.cny-uploader-file-body {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.cny-uploader-file-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--text-primary);
+}
+
+.cny-uploader-file-error {
+  font-size: 0.75rem;
+  color: var(--color-danger-text);
+}
+
+.cny-uploader-progress {
+  display: block;
+  height: 4px;
+  border-radius: 999px;
+  background: var(--bg-surface-low);
+  overflow: hidden;
+
+  > span {
+    display: block;
+    height: 100%;
+    border-radius: inherit;
+    background: var(--color-primary);
+    transition: width 160ms ease;
+  }
+}
+
+.is-done .cny-uploader-progress > span { background: var(--color-success); }
+
+.cny-uploader-file-action {
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  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); }
+  &:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 1px; }
+}

package/src/scripts/table-resize.js

@@ -40,9 +40,24 @@
     if (!resizer) {
       resizer = document.createElement('span');
       resizer.className = 'th-resizer';
-      resizer.setAttribute('aria-hidden', 'true');
       th.appendChild(resizer);
     }
+    // keyboard-operable separator: Left / Right resize the column (Shift = bigger steps)
+    resizer.setAttribute('role', 'separator');
+    resizer.setAttribute('aria-orientation', 'vertical');
+    resizer.setAttribute('aria-label', 'Resize ' + (th.textContent || '').trim() + ' column');
+    resizer.setAttribute('aria-valuemin', String(MIN_WIDTH));
+    resizer.setAttribute('tabindex', '0');
+
+    function keyDown(e) {
+      if (e.key !== 'ArrowLeft' && e.key !== 'ArrowRight') return;
+      e.preventDefault();
+      var step = (e.shiftKey ? 40 : 10) * (e.key === 'ArrowRight' ? 1 : -1);
+      var next = Math.max(MIN_WIDTH, th.offsetWidth + step);
+      th.style.width = next + 'px';
+      resizer.setAttribute('aria-valuenow', String(next));
+    }
+    resizer.addEventListener('keydown', keyDown);
 
     function pointerDown(e) {
       e.preventDefault();

package/src/tokens/_semantic.scss

@@ -10,10 +10,10 @@
   // ── Text ──────────────────────────────────────────────────────────────
   --text-primary:       #{$zinc-950};
   --text-secondary:     #{$zinc-700};
-  --text-muted:         #{$zinc-500};
+  --text-muted:         #65656D;   // 4.5:1+ on zinc-100 and on the accent tint
   --text-disabled:      #{$zinc-400};
   --text-on-solid:      #ffffff;
-  --text-accent:        #3A73B3;
+  --text-accent:        #2F5C8F;   // accent text: 4.5:1+ on white, page and the primary tint
 
   // ── Brand (primary) ───────────────────────────────────────────────────
   --color-primary:       #3A73B3;
@@ -33,30 +33,52 @@
   --color-danger-hover:  #{$red-700};
   --color-danger-soft:   #{$red-50};
   --color-danger-on:     #ffffff;
+  // Text-on-tint: role colours darkened/lightened so labels on the soft tint
+  // (and on the plain surface) reach 4.5:1. Use these for TEXT, the plain
+  // role colours for fills, borders and icons.
+  --color-danger-text:   #{$red-700};
 
-  --color-warning:       #{$amber-600};
-  --color-warning-hover: #{$amber-700};
+  --color-warning:       #{$amber-700};
+  --color-warning-hover: #92400E;
   --color-warning-soft:  #{$amber-50};
   --color-warning-on:    #ffffff;
+  --color-warning-text:  #{$amber-700};
 
-  --color-success:       #{$emerald-600};
-  --color-success-hover: #{$emerald-700};
+  --color-success:       #{$emerald-700};
+  --color-success-hover: #065F46;
   --color-success-soft:  #{$emerald-50};
   --color-success-on:    #ffffff;
+  --color-success-text:  #{$emerald-700};
 
-  --color-info:          #{$sky-600};
-  --color-info-hover:    #{$sky-700};
+  --color-info:          #{$sky-700};
+  --color-info-hover:    #075985;
   --color-info-soft:     #{$sky-50};
   --color-info-on:       #ffffff;
+  --color-info-text:     #{$sky-700};
 
   // ── Borders (enterprise uses real borders, unlike the paper edition) ──
   --border-color:        #{$zinc-200};
   --border-color-strong: #{$zinc-300};
   --border-focus:        #3A73B3;
+  // Form-control outline: 3:1 against the surface (WCAG 1.4.11), so a field is findable at rest.
+  // Resting lift and focus ring shared by every form control.
+  --shadow-field:       0 1px 2px rgba(15, 23, 42, 0.05);
+  --shadow-field-focus: none;
+  --border-input:        #8A8A93;   // >=3:1 on the page (#fafafa) and on the white field fill
+  --border-input-hover:  #6B6B73;
+  --border-input-focus:  #{$zinc-800};
 
   // ── Ring (focus halo) ─────────────────────────────────────────────────
-  --ring-color:          rgba(58, 115, 179, 0.28);
-  --ring-width:          3px;
+  // Focus ring — one strong indicator (>=3:1 against adjacent colours) for every control.
+  --ring-color:          #3A73B3;
+  --ring-width:          2px;
+  --ring-offset:         2px;
+
+  // ── Layers ────────────────────────────────────────────────────────────
+  // Every popper (Select, MultiSelect, Menu, Popover, DatePicker, Autocomplete)
+  // shares one layer above Dialog/Drawer (1001); Tooltip sits above them.
+  --z-popover:  1010;
+  --z-tooltip:  1020;
 
   // ── Shadows — subtle, predictable ─────────────────────────────────────
   --shadow-xs:    0 1px 2px 0 rgba(9, 9, 11, 0.05);
@@ -66,11 +88,13 @@
                   0 2px 4px -2px rgba(9, 9, 11, 0.05);
   --shadow-lg:    0 10px 15px -3px rgba(9, 9, 11, 0.08),
                   0 4px 6px -4px rgba(9, 9, 11, 0.05);
+  // Floating panels (Popover, Menu, Select, DatePicker, Autocomplete, Toast).
+  --shadow-popover: 0 1px 0 rgba(15, 23, 42, 0.04), 0 12px 28px -12px rgba(15, 23, 42, 0.22);
 
   // Legacy aliases (kept for backward compatibility with prior demo)
   --shadow-card:     var(--shadow-sm);
   --shadow-lift:     var(--shadow-lg);
-  --shadow-ambient:  0 0 0 3px var(--ring-color);
+  --shadow-ambient:  0 0 0 var(--ring-width) var(--ring-color);
 
   // ── Motion ────────────────────────────────────────────────────────────
   --ease-standard:   cubic-bezier(0.2, 0, 0, 1);
@@ -131,6 +155,21 @@
     --color-primary-hover: #7BA5D6;
     --color-primary-active:#4A7FB8;
     --color-primary-soft:  rgba(91, 143, 201, 0.15);
+    --color-primary-on:    #{$zinc-950};   // white on #5b8fc9 is 3.4:1; near-black is 5.9:1
+
+    --color-danger-text:   #F87171;
+    --color-warning:       #{$amber-600};
+    --color-warning-hover: #F59E0B;
+    --color-warning-on:    #{$zinc-950};
+    --color-warning-text:  #FBBF24;
+    --color-success:       #{$emerald-600};
+    --color-success-hover: #10B981;
+    --color-success-on:    #{$zinc-950};
+    --color-success-text:  #34D399;
+    --color-info:          #{$sky-600};
+    --color-info-hover:    #0EA5E9;
+    --color-info-on:       #{$zinc-950};
+    --color-info-text:     #38BDF8;
 
     --color-neutral:       #{$zinc-50};
     --color-neutral-hover: #ffffff;
@@ -142,19 +181,24 @@
     --color-success-soft:  rgba(5, 150, 105, 0.16);
     --color-info-soft:     rgba(2, 132, 199, 0.16);
 
-    --border-color:        #{$zinc-800};
-    --border-color-strong: #{$zinc-700};
+    --border-color:        #{$zinc-700};
+    --border-color-strong: #{$zinc-600};
     --border-focus:        #7BA5D6;
-    --ring-color:          rgba(91, 143, 201, 0.45);
+    --shadow-field:       none;
+    --border-input:        #7C7C86;
+    --border-input-hover:  #8A8A93;
+    --border-input-focus:  #{$zinc-300};
+    --ring-color:          #7BA5D6;
 
     --shadow-xs:    0 1px 2px 0 rgba(0, 0, 0, 0.3);
     --shadow-sm:    0 1px 2px 0 rgba(0, 0, 0, 0.4),
                     0 1px 3px 0 rgba(0, 0, 0, 0.3);
     --shadow-md:    0 4px 6px -1px rgba(0, 0, 0, 0.5);
     --shadow-lg:    0 16px 32px -8px rgba(0, 0, 0, 0.6);
+    --shadow-popover: 0 12px 28px -8px rgba(0, 0, 0, 0.65);
 
-    --hairline-color:  #{$zinc-800};
-    --hairline-strong: #{$zinc-700};
+    --hairline-color:  #{$zinc-700};
+    --hairline-strong: #{$zinc-600};
   }
 }
 
@@ -174,6 +218,21 @@
   --color-primary-hover: #7BA5D6;
   --color-primary-active:#4A7FB8;
   --color-primary-soft:  rgba(91, 143, 201, 0.15);
+  --color-primary-on:    #{$zinc-950};   // white on #5b8fc9 is 3.4:1; near-black is 5.9:1
+
+  --color-danger-text:   #F87171;
+  --color-warning:       #{$amber-600};
+  --color-warning-hover: #F59E0B;
+  --color-warning-on:    #{$zinc-950};
+  --color-warning-text:  #FBBF24;
+  --color-success:       #{$emerald-600};
+  --color-success-hover: #10B981;
+  --color-success-on:    #{$zinc-950};
+  --color-success-text:  #34D399;
+  --color-info:          #{$sky-600};
+  --color-info-hover:    #0EA5E9;
+  --color-info-on:       #{$zinc-950};
+  --color-info-text:     #38BDF8;
 
   --color-neutral:       #{$zinc-50};
   --color-neutral-hover: #ffffff;
@@ -185,17 +244,22 @@
   --color-success-soft:  rgba(5, 150, 105, 0.16);
   --color-info-soft:     rgba(2, 132, 199, 0.16);
 
-  --border-color:        #{$zinc-800};
-  --border-color-strong: #{$zinc-700};
+  --border-color:        #{$zinc-700};
+  --border-color-strong: #{$zinc-600};
   --border-focus:        #7BA5D6;
-  --ring-color:          rgba(91, 143, 201, 0.45);
+  --shadow-field:       none;
+  --border-input:        #7C7C86;
+  --border-input-hover:  #8A8A93;
+  --border-input-focus:  #{$zinc-300};
+  --ring-color:          #7BA5D6;
 
   --shadow-xs:    0 1px 2px 0 rgba(0, 0, 0, 0.3);
   --shadow-sm:    0 1px 2px 0 rgba(0, 0, 0, 0.4),
                   0 1px 3px 0 rgba(0, 0, 0, 0.3);
   --shadow-md:    0 4px 6px -1px rgba(0, 0, 0, 0.5);
   --shadow-lg:    0 16px 32px -8px rgba(0, 0, 0, 0.6);
+  --shadow-popover: 0 12px 28px -8px rgba(0, 0, 0, 0.65);
 
-  --hairline-color:  #{$zinc-800};
-  --hairline-strong: #{$zinc-700};
+  --hairline-color:  #{$zinc-700};
+  --hairline-strong: #{$zinc-600};
 }