@deepseek-ai/dsh-client-ui-primitives 0.1.7-alpha.2 → 0.1.7-rc.2

package/lib/JsonTree.module.css

@@ -187,7 +187,7 @@
 }
 
 .stringToggle:focus-visible {
-  outline: 1px solid var(--dsw-alias-state-business-primary);
+  outline: 1px solid var(--dsw-focus-ring-color, var(--dsw-alias-state-business-primary));
   outline-offset: 1px;
 }
 
@@ -271,7 +271,7 @@
   margin: 0;
   padding: 0;
   border: 0;
-  border-radius: 3px;
+  border-radius: var(--dsw-radius-xs);
   color: var(--dsw-alias-label-secondary);
   background: transparent;
   cursor: pointer;
@@ -286,7 +286,7 @@
 }
 
 .actionButton:focus-visible {
-  outline: 1px solid var(--dsw-alias-state-business-primary);
+  outline: 1px solid var(--dsw-focus-ring-color, var(--dsw-alias-state-business-primary));
   outline-offset: -1px;
 }
 

package/lib/Menu.module.css

@@ -8,14 +8,11 @@
 .submenu {
   /* min-widths below are the design's outer card widths — include the pad. */
   box-sizing: border-box;
-  padding: 3px;
+  padding: 4px;
   display: flex;
   flex-direction: column;
   gap: 0;
   border: 0;
-  border-radius: 16px;
-  background: var(--dsw-specific-menu);
-  backdrop-filter: var(--dsw-menu-backdrop-filter);
   --dsw-elevation-stroke-color: var(--dsw-alias-border-l1);
   box-shadow: var(--dsw-elevation-prominent);
   /* Elevated surface: the scrollbar thumb takes the l2 elevation tokens. The
@@ -103,7 +100,7 @@
   min-height: 34px;
   padding: 6px 8px;
   border: none;
-  border-radius: 8px;
+  border-radius: var(--dsw-radius-md);
   background: transparent;
   cursor: pointer;
   font-size: 13px;
@@ -136,15 +133,14 @@
 .list.compactList,
 .submenu.compactList {
   min-width: 156px;
-  padding: 2px;
-  border-radius: 7px;
+  padding: 4px;
 }
 
 .compactList .item {
   min-height: 24px;
   gap: 5px;
   padding: 2px 6px;
-  border-radius: 5px;
+  border-radius: var(--dsw-radius-sm);
   font-size: 11px;
   line-height: 17px;
 }
@@ -176,7 +172,7 @@
   height: 14px;
   align-items: center;
   justify-content: center;
-  color: var(--dsw-alias-label-tertiary);
+  color: var(--dsw-alias-menu-icon);
 }
 
 .itemIcon svg,
@@ -199,6 +195,17 @@
   white-space: nowrap;
 }
 
+.shortcut {
+  flex: none;
+  margin-inline-start: auto;
+}
+
+.shortcut .shortcutKeys {
+  color: var(--dsw-alias-label-caption);
+  font-size: 11px;
+  line-height: 16px;
+}
+
 .check {
   flex: none;
   color: var(--dsw-alias-label-primary);
@@ -257,16 +264,13 @@
   display: none;
 }
 
-/* Nested card to the right of the parent row.
- * Bottom-aligned with the parent menu card (grows upward): itemWrap sits in
- * .list's 3px pad, so bottom: -3px matches the list's outer bottom edge.
- * Horizontal: list pad (3px) + 6px card gap = 9px past itemWrap.
- * ::before bridges the full gap so the pointer can cross without mouseLeave. */
+/* The submenu aligns with the parent's bottom edge. Its hit bridge covers
+ * the menu inset and the 6px gap so pointer movement keeps it open. */
 .submenu {
   position: absolute;
   top: auto;
-  bottom: -3px;
-  left: calc(100% + 9px);
+  bottom: -4px;
+  left: calc(100% + 10px);
   z-index: 101;
   min-width: 163px;
 }
@@ -276,6 +280,6 @@
   position: absolute;
   top: 0;
   bottom: 0;
-  left: -9px;
-  width: 9px;
+  left: -10px;
+  width: 10px;
 }

package/lib/MenuSurface.module.css

@@ -0,0 +1,49 @@
+.surface,
+.backing {
+  border-radius: var(--dsw-radius-lg);
+}
+
+.compact {
+  border-radius: var(--dsw-radius-md);
+}
+
+:where(.surface) {
+  position: relative;
+}
+
+.surface {
+  anchor-name: var(--dsh-menu-anchor);
+  isolation: isolate;
+}
+
+/* Filtering only the background keeps nested menus and fixed overlays free of
+ * an ancestor backdrop root or a new fixed-position containing block. */
+.material {
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  border-radius: inherit;
+  background: var(--dsw-menu-surface-fill);
+  backdrop-filter: var(--dsw-menu-backdrop-filter);
+  pointer-events: none;
+}
+
+.backing {
+  display: none;
+}
+
+/* Chromium needs opaque pixels behind the page content to blur it over native
+ * vibrancy. Body isolation keeps this backing above the native window and below
+ * the page; CSS anchors limit it to this menu without a layout observer. */
+:global(html[data-platform='darwin']) .backing {
+  display: block;
+  position: fixed;
+  position-anchor: var(--dsh-menu-anchor);
+  top: anchor(top);
+  left: anchor(left);
+  width: anchor-size(width, 0px);
+  height: anchor-size(height, 0px);
+  z-index: -1;
+  background: var(--dsw-alias-bg-base);
+  pointer-events: none;
+}

package/lib/Modal.module.css

@@ -4,6 +4,7 @@
    Cards size against this padding box: consumers cap growth with
    `max-height: 100%`, never their own viewport calc. */
 .root {
+  pointer-events: auto;
   position: fixed;
   inset: 0;
   z-index: 1000;
@@ -13,16 +14,22 @@
   padding: max(24px, var(--dsh-frame-top-clearance, 24px)) 24px;
 }
 
-/* User/spec mask: rgba(0,0,0,0.24) + blur(2px) via --dsw-alias-bg-mask-1 /
-   --dsw-mask-blur (light); dark theme raises mask opacity. */
+/* The mask dims the page; dark theme raises its opacity. */
 .mask {
   position: absolute;
   inset: 0;
-  background: var(--dsw-alias-bg-mask-1);
   backdrop-filter: var(--dsw-mask-blur);
 }
 
-/* Dialog card: r24, elevation-prominent, layer-2 fill, pb 24. */
+.mask::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: var(--dsw-alias-bg-mask-1);
+  animation: modalEnter var(--ds-transition-duration) var(--ds-ease-in-out);
+}
+
+/* Dialogs use the prominent elevation on the secondary layer. */
 .dialog {
   position: relative;
   z-index: 1;
@@ -33,9 +40,23 @@
   padding: 0 0 24px;
   overflow: hidden;
   border: 0;
-  border-radius: 24px;
+  border-radius: var(--dsw-radius-panel);
   background: var(--dsw-alias-bg-layer-2);
   box-shadow: var(--dsw-elevation-prominent);
+  animation: modalEnter var(--ds-transition-duration) var(--ds-ease-in-out);
+}
+
+@keyframes modalEnter {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .mask::after, .dialog { animation: none; }
+}
+
+.dialog:focus {
+  outline: none;
 }
 
 .content {
@@ -70,7 +91,7 @@
   width: 28px;
   height: 28px;
   border: none;
-  border-radius: 8px;
+  border-radius: var(--dsw-radius-sm);
   background: transparent;
   cursor: pointer;
   color: var(--dsw-alias-label-secondary);

package/lib/Pill.module.css

@@ -5,7 +5,8 @@
   height: 24px;
   padding: 0 8px;
   border: none;
-  border-radius: 12px;
+  border-radius: 999px;
+  corner-shape: round;
   font-size: 12px;
   line-height: 18px;
   color: var(--dsw-alias-label-secondary);

package/lib/RiskConfirmation.module.css

@@ -56,7 +56,7 @@
 }
 
 .acknowledgement input:focus-visible {
-  outline: 2px solid var(--dsw-alias-border-l4);
+  outline: var(--dsw-focus-ring-width) solid var(--dsw-focus-ring-color, var(--dsw-alias-state-business-primary));
   outline-offset: 2px;
 }
 

package/lib/SearchBlock.module.css

@@ -1,5 +1,5 @@
 .block {
-  --dsl-search-radius: 12px;
+  --dsl-search-radius: var(--dsw-radius-lg);
   --dsl-search-line-height: 22px;
 
   position: relative;

package/lib/SegmentedControl.module.css

@@ -14,19 +14,19 @@
   grid-auto-flow: column;
   grid-auto-columns: 1fr;
   gap: 2px;
-  padding: 3px;
-  border-radius: 9px;
+  padding: 4px;
+  border-radius: var(--dsw-radius-md);
   background: var(--dsw-alias-interactive-bg-hover);
 }
 
 .indicator {
   position: absolute;
-  top: 3px;
-  left: 3px;
-  width: calc((100% - 6px - 2px * (var(--dsh-segment-count) - 1)) / var(--dsh-segment-count));
-  height: calc(100% - 6px);
+  top: 4px;
+  left: 4px;
+  width: calc((100% - 8px - 2px * (var(--dsh-segment-count) - 1)) / var(--dsh-segment-count));
+  height: calc(100% - 8px);
   border: 0;
-  border-radius: 7px;
+  border-radius: var(--dsw-radius-sm);
   background: var(--dsw-alias-bg-layer-1);
   box-shadow: var(--dsw-elevation-soft);
   transform: translateX(calc(var(--dsh-segment-index) * (100% + 2px)));
@@ -41,7 +41,7 @@
   height: 28px;
   padding: 0 16px;
   border: 0;
-  border-radius: 7px;
+  border-radius: var(--dsw-radius-sm);
   background: transparent;
   color: var(--dsw-alias-label-secondary);
   font: inherit;
@@ -64,7 +64,7 @@
 }
 
 .tab:focus-visible {
-  outline: 2px solid var(--dsw-alias-brand-primary);
+  outline: var(--dsw-focus-ring-width) solid var(--dsw-focus-ring-color, var(--dsw-alias-state-business-primary));
   outline-offset: -2px;
 }
 

package/lib/SegmentedTabs.module.css

@@ -2,7 +2,7 @@
   position: relative;
   display: grid;
   padding: 4px;
-  border-radius: 12px;
+  border-radius: var(--dsw-radius-lg);
   background: var(--dsw-alias-bg-module-platform);
 }
 
@@ -11,7 +11,7 @@
   inset: 4px auto 4px 4px;
   box-sizing: border-box;
   border: 0.5px solid var(--dsw-alias-border-l3);
-  border-radius: 8px;
+  border-radius: var(--dsw-radius-md);
   background: var(--dsw-alias-bg-layer-3);
   transition: transform 180ms ease;
   pointer-events: none;
@@ -22,7 +22,7 @@
   justify-content: center;
   height: 34px;
   padding: 0 12px;
-  border-radius: 8px;
+  border-radius: var(--dsw-radius-md);
   font-size: 14px;
   line-height: 20px;
   background: transparent;

package/lib/ShortcutKeys.module.css

@@ -0,0 +1,33 @@
+.keys {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  gap: 3px;
+  color: var(--dsw-alias-label-tertiary);
+  font-size: 12px;
+  line-height: 16px;
+  white-space: nowrap;
+}
+
+.key {
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font: inherit;
+}
+
+.tooltip { color: inherit; font-size: 11px; line-height: 14px; gap: 2px; }
+.tooltip .key {
+  min-width: 16px;
+  height: 16px;
+  padding: 0 2px;
+  border-radius: 4px;
+  border: 0;
+  background: var(--dsw-alias-tooltip-key-bg);
+}
+
+.separator { font: inherit; }
+
+.joined { box-sizing: border-box; height: 16px; padding: 0 4px; border-radius: 4px; background: var(--dsw-alias-tooltip-key-bg); }
+.joined .key { min-width: 0; height: auto; padding: 0; border: 0; background: transparent; }

package/lib/Switch.module.css

@@ -1,12 +1,7 @@
 /* The on/off appearance keys off aria-checked rather than a parallel class, so
  * the visual state cannot disagree with the state assistive technology reads.
  *
- * The track is a capsule: its radius is half its height, so the corners consume
- * the whole side and the global superellipse would square the ends off against
- * the round thumb inside it. `corner-shape: round` opts the track out, the way
- * every full-round radius does. The corner-shape spec does not catch this one —
- * it recognizes 50%, 100%, and radii at or above 99px, not a radius that is
- * full-round only relative to its own box. */
+ * The capsule track and circular thumb opt out of the global superellipse. */
 .switch {
   box-sizing: border-box;
   position: relative;
@@ -15,7 +10,7 @@
   height: 20px;
   padding: 2px;
   border: 0;
-  border-radius: 10px;
+  border-radius: 999px;
   corner-shape: round;
   background: var(--dsw-alias-border-l3);
   cursor: pointer;
@@ -31,7 +26,7 @@
 }
 
 .switch:focus-visible {
-  outline: 2px solid var(--dsw-alias-brand-primary);
+  outline: var(--dsw-focus-ring-width) solid var(--dsw-focus-ring-color, var(--dsw-alias-state-business-primary));
   outline-offset: 2px;
 }
 

package/lib/TerminalBlock.module.css

@@ -1,5 +1,5 @@
 .block {
-  --dsl-terminal-radius: 12px;
+  --dsl-terminal-radius: var(--dsw-radius-lg);
   --dsl-terminal-line-height: 22px;
   /* Rebindable by consumers (CodeBlock's --dsl-code-block-content-font
      pattern): a surface wanting the smaller code size rebinds this together
@@ -51,7 +51,7 @@
 .header::-webkit-scrollbar-thumb {
   border: 2px solid transparent;
   background-clip: padding-box;
-  border-radius: 6px;
+  border-radius: var(--dsw-radius-sm);
 }
 
 .header::-webkit-scrollbar-track {
@@ -170,7 +170,7 @@
 .output::-webkit-scrollbar-thumb {
   border: 2px solid transparent;
   background-clip: padding-box;
-  border-radius: 6px;
+  border-radius: var(--dsw-radius-sm);
 }
 
 /* Track end-margins keep the thumb's travel out of the card's rounded

package/lib/Toast.module.css

@@ -22,12 +22,12 @@
   width: max-content;
   max-width: min(640px, calc(100vw - 48px));
   padding: 12px 16px;
-  border-radius: 14px;
+  border-radius: var(--dsw-radius-lg);
   /* The design platform's toast surface is dark in BOTH themes (bluish-800
      light / bluish-750 dark), so the label and the action text below stay
      fixed instead of flipping with the theme. */
   background: var(--dsw-alias-toast-bg);
-  color: var(--dsw-static-neutral-bluish-00);
+  color: var(--dsw-alias-toast-label);
   font-size: 14px;
   line-height: 22px;
   box-shadow: var(--dsw-shadow-lv3);

package/lib/Tooltip.module.css

@@ -1,4 +1,7 @@
 .bubble {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
   position: fixed;
   z-index: 100;
   /* Fixed-position shrink-to-fit measures only the space from `left` to the
@@ -7,7 +10,7 @@
   width: max-content;
   max-width: 50vw;
   padding: 3px 7px;
-  border-radius: 8px;
+  border-radius: var(--dsw-radius-sm);
   background: var(--dsw-alias-tooltip-bg);
   color: var(--dsw-static-neutral-bluish-00);
   font-size: 13px;
@@ -20,6 +23,11 @@
 }
 
 .bubble[data-portal] { z-index: 1100; }
+.label { min-width: 0; }
+
+/* A 16px keycap centered beside a 20px label has 5px of vertical clearance. */
+.bubble[data-has-shortcut] { padding-inline-end: 5px; }
+.bubble[data-has-shortcut]:not(:has(.label)) { padding: 3px; }
 
 .bubble[data-side='right'] {
   transform: translateY(-50%);

package/lib/WebBlock.module.css

@@ -1,5 +1,5 @@
 .block {
-  --dsl-web-radius: 12px;
+  --dsl-web-radius: var(--dsw-radius-lg);
 
   margin: 16px 0;
   padding: 12px 14px;