@leavepulse/ui 0.58.1 → 0.59.0

package/src/components/LpChart.vue

@@ -1116,7 +1116,7 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(
         v-for="s in allSeries"
         :key="s.id"
         type="button"
-        class="group flex cursor-pointer items-center gap-1.5 rounded-md text-xs outline-none transition-opacity duration-fast focus-visible:ring-2 focus-visible:ring-ring"
+        class="group flex cursor-pointer items-center gap-1.5 rounded-inner text-xs outline-none transition-opacity duration-fast focus-visible:ring-2 focus-visible:ring-ring"
         :class="hidden.has(s.id) ? 'opacity-40' : ''"
         :aria-pressed="!hidden.has(s.id)"
         @click="toggleSeries(s.id)"

package/src/components/LpCodeBlock.vue

@@ -236,14 +236,14 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(
       class="flex items-center gap-2 border-b border-line bg-surface-soft px-3 py-1.5 text-muted"
     >
       <span v-if="title" class="truncate text-ink">{{ title }}</span>
-      <span v-if="lang !== 'plain'" class="rounded bg-surface px-1.5 py-0.5 text-[10px] uppercase tracking-wide">
+      <span v-if="lang !== 'plain'" class="rounded-small bg-surface px-1.5 py-0.5 text-[10px] uppercase tracking-wide">
         {{ lang }}
       </span>
       <div class="ml-auto flex items-center gap-1">
         <button
           v-if="lockToggle"
           type="button"
-          class="group/lock flex items-center gap-1 rounded px-1.5 py-1 outline-none transition-colors duration-[var(--duration-fast)] hover:text-ink focus-visible:ring-2 focus-visible:ring-ring"
+          class="group/lock flex items-center gap-1 rounded-small px-1.5 py-1 outline-none transition-colors duration-[var(--duration-fast)] hover:text-ink focus-visible:ring-2 focus-visible:ring-ring"
           :aria-label="locked ? text.unlock : text.lock"
           @click="toggleLock"
         >
@@ -256,7 +256,7 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(
         <button
           v-if="copyable"
           type="button"
-          class="group/copy flex items-center gap-1 rounded px-1.5 py-1 outline-none transition-colors duration-[var(--duration-fast)] hover:text-ink focus-visible:ring-2 focus-visible:ring-ring"
+          class="group/copy flex items-center gap-1 rounded-small px-1.5 py-1 outline-none transition-colors duration-[var(--duration-fast)] hover:text-ink focus-visible:ring-2 focus-visible:ring-ring"
           :aria-label="copied ? text.copied : text.copy"
           @click="copy"
         >
@@ -314,7 +314,7 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(
             v-else
           ><button
               type="button"
-              class="lp-fold-toggle flex w-full items-center gap-1.5 rounded px-1 py-0.5 text-left text-muted outline-none transition-colors duration-[var(--duration-fast)] hover:text-ink focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring"
+              class="lp-fold-toggle flex w-full items-center gap-1.5 rounded-small px-1 py-0.5 text-left text-muted outline-none transition-colors duration-[var(--duration-fast)] hover:text-ink focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring"
               :aria-expanded="openState[seg.id]"
               @click="toggleFold(seg.id)"
             ><LpIcon

package/src/components/LpColorPicker.vue

@@ -654,11 +654,11 @@ defineExpose({ open })
                would be painted over the checkerboard and, being translucent
                white, would show it through as a see-through outline. -->
           <span
-            class="relative size-5 shrink-0 overflow-hidden rounded-md"
+            class="relative size-5 shrink-0 overflow-hidden rounded-inner"
             :style="{ background: CHECKERBOARD }"
           >
             <span class="block size-full" :style="{ backgroundColor: previewCss }" />
-            <span class="pointer-events-none absolute inset-0 rounded-md ring-1 ring-inset ring-line" />
+            <span class="pointer-events-none absolute inset-0 rounded-inner ring-1 ring-inset ring-line" />
           </span>
           <span class="min-w-0 flex-1 truncate font-mono text-xs text-muted-strong">
             {{ label ?? current }}
@@ -814,7 +814,7 @@ defineExpose({ open })
                   :disabled="disabled"
                   :aria-label="c"
                   :aria-pressed="isActiveSwatch(c)"
-                  class="relative flex items-center justify-center overflow-hidden rounded-md outline-none transition-transform duration-[var(--duration-fast)] ease-[var(--ease-emphasized)] hover:scale-110 active:scale-95 focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed motion-reduce:hover:scale-100 motion-reduce:active:scale-95"
+                  class="relative flex items-center justify-center overflow-hidden rounded-inner outline-none transition-transform duration-[var(--duration-fast)] ease-[var(--ease-emphasized)] hover:scale-110 active:scale-95 focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed motion-reduce:hover:scale-100 motion-reduce:active:scale-95"
                   :class="row.size"
                   :style="{ background: CHECKERBOARD }"
                   @click="pickSwatch(c)"
@@ -826,7 +826,7 @@ defineExpose({ open })
                        inset ring painted OVER the colour instead, so it reads
                        as one fixed hairline rather than a translucent gap. -->
                   <span class="absolute inset-0" :style="{ backgroundColor: c }" />
-                  <span class="pointer-events-none absolute inset-0 rounded-md ring-1 ring-inset ring-line" />
+                  <span class="pointer-events-none absolute inset-0 rounded-inner ring-1 ring-inset ring-line" />
                   <LpIcon
                     v-if="isActiveSwatch(c)"
                     name="lucide:check"

package/src/components/LpCommandPalette.vue

@@ -1239,7 +1239,7 @@ useHotkeys(() =>
             v-for="(step, i) in trail"
             :key="step.id"
             type="button"
-            class="flex shrink-0 items-center gap-1.5 rounded-md bg-brand-soft px-2 py-1 text-xs font-medium text-brand transition-opacity hover:opacity-80"
+            class="flex shrink-0 items-center gap-1.5 rounded-inner bg-brand-soft px-2 py-1 text-xs font-medium text-brand transition-opacity hover:opacity-80"
             :title="text.back"
             @click="popTo(i)"
           >
@@ -1264,7 +1264,7 @@ useHotkeys(() =>
             @keydown.esc="onEscape"
             @keydown.tab="onTab"
           />
-          <kbd class="shrink-0 rounded border border-line px-1.5 py-0.5 text-[10px] text-muted">{{ text.esc }}</kbd>
+          <kbd class="shrink-0 rounded-small border border-line px-1.5 py-0.5 text-[10px] text-muted">{{ text.esc }}</kbd>
         </div>
 
         <!-- Results -->
@@ -1305,7 +1305,7 @@ useHotkeys(() =>
                   :aria-disabled="c.disabled || undefined"
                   :data-cmd-index="flatIndexOf(c)"
                   :disabled="c.href ? undefined : c.disabled"
-                  class="lp-cmd-item flex w-full gap-3 rounded-md px-2.5 py-2 text-left text-sm outline-none transition-colors duration-[var(--duration-fast)] disabled:pointer-events-none disabled:opacity-45 aria-disabled:pointer-events-none aria-disabled:opacity-45"
+                  class="lp-cmd-item flex w-full gap-3 rounded-inner px-2.5 py-2 text-left text-sm outline-none transition-colors duration-[var(--duration-fast)] disabled:pointer-events-none disabled:opacity-45 aria-disabled:pointer-events-none aria-disabled:opacity-45"
                   :class="[
                     c.excerpt ? 'items-start' : 'items-center',
                     flatIndexOf(c) === selectedIndex
@@ -1365,7 +1365,7 @@ useHotkeys(() =>
                        shortcut is learned by seeing it rather than reading docs. -->
                   <kbd
                     v-else-if="c.prefix && c.children"
-                    class="shrink-0 rounded border border-line px-1.5 font-mono text-[11px] whitespace-pre text-muted"
+                    class="shrink-0 rounded-small border border-line px-1.5 font-mono text-[11px] whitespace-pre text-muted"
                   >{{ c.prefix }}</kbd>
                   <!-- Drills in rather than runs: worth saying before the click,
                        since the two look identical otherwise. -->
@@ -1390,7 +1390,7 @@ useHotkeys(() =>
               <span>{{ text.searchFailed }}</span>
               <button
                 type="button"
-                class="rounded-md px-1.5 py-0.5 font-medium text-brand outline-none transition-colors hover:bg-brand-soft focus-visible:ring-2 focus-visible:ring-ring"
+                class="rounded-inner px-1.5 py-0.5 font-medium text-brand outline-none transition-colors hover:bg-brand-soft focus-visible:ring-2 focus-visible:ring-ring"
                 @click="refresh(); inputRef?.focus()"
               >
                 {{ text.retry }}
@@ -1451,26 +1451,26 @@ useHotkeys(() =>
           class="flex shrink-0 items-center gap-4 border-t border-line px-4 py-2.5 text-[11px] text-muted [@media(hover:none)_and_(pointer:coarse)]:hidden"
         >
           <span class="flex items-center gap-1">
-            <kbd class="rounded border border-line px-1 text-[10px]">↑</kbd>
-            <kbd class="rounded border border-line px-1 text-[10px]">↓</kbd>
+            <kbd class="rounded-small border border-line px-1 text-[10px]">↑</kbd>
+            <kbd class="rounded-small border border-line px-1 text-[10px]">↓</kbd>
             {{ text.navigate }}
           </span>
           <span class="flex items-center gap-1">
-            <kbd class="rounded border border-line px-1 text-[10px]">↵</kbd>
+            <kbd class="rounded-small border border-line px-1 text-[10px]">↵</kbd>
             {{ text.select }}
           </span>
           <!-- Only inside a mode: at the root Backspace just edits the query,
                and advertising it there would be a lie. -->
           <span v-if="selectedActions.length" class="flex items-center gap-1">
-            <kbd class="rounded border border-line px-1 text-[10px]">tab</kbd>
+            <kbd class="rounded-small border border-line px-1 text-[10px]">tab</kbd>
             {{ text.actions }}
           </span>
           <span v-if="trail.length" class="flex items-center gap-1">
-            <kbd class="rounded border border-line px-1 text-[10px]">⌫</kbd>
+            <kbd class="rounded-small border border-line px-1 text-[10px]">⌫</kbd>
             {{ text.back }}
           </span>
           <span class="ml-auto flex items-center gap-1">
-            <kbd class="rounded border border-line px-1 text-[10px]">{{ text.esc }}</kbd>
+            <kbd class="rounded-small border border-line px-1 text-[10px]">{{ text.esc }}</kbd>
             {{ text.close }}
           </span>
         </div>

package/src/components/LpDrawer.vue

@@ -552,7 +552,7 @@ const previewStyle = computed(() => {
             </DrawerDescription>
           </div>
           <DrawerClose
-            class="group flex shrink-0 items-center rounded-md p-1 text-muted outline-none transition-colors duration-[var(--duration-fast)] hover:text-ink focus-visible:ring-2 focus-visible:ring-ring"
+            class="group flex shrink-0 items-center rounded-inner p-1 text-muted outline-none transition-colors duration-[var(--duration-fast)] hover:text-ink focus-visible:ring-2 focus-visible:ring-ring"
             :aria-label="text.close"
           >
             <LpIcon

package/src/components/LpDropdownMenu.vue

@@ -47,7 +47,7 @@ defineProps<{
         <template v-for="(item, i) in items" :key="i">
           <DropdownMenuSeparator v-if="item.separatorBefore" class="my-1 h-px bg-line" />
           <DropdownMenuItem
-            class="group/item flex cursor-pointer items-center gap-2 rounded-md px-2.5 py-1.5 text-sm outline-none transition-[background-color,color] duration-[var(--duration-fast)] data-[disabled]:pointer-events-none data-[disabled]:opacity-45 data-[highlighted]:bg-brand-soft"
+            class="group/item flex cursor-pointer items-center gap-2 rounded-inner px-2.5 py-1.5 text-sm outline-none transition-[background-color,color] duration-[var(--duration-fast)] data-[disabled]:pointer-events-none data-[disabled]:opacity-45 data-[highlighted]:bg-brand-soft"
             :class="item.danger ? 'text-danger data-[highlighted]:bg-danger-soft data-[highlighted]:text-danger' : 'text-ink data-[highlighted]:text-brand'"
             :disabled="item.disabled"
             @select="item.onSelect?.()"

package/src/components/LpModal.vue

@@ -350,7 +350,7 @@ watch(
                and last in usefulness. Still reachable by Tab and Escape. -->
           <DialogClose
             data-lp-dialog-close
-            class="group flex shrink-0 items-center rounded-md p-1 text-muted outline-none transition-colors duration-[var(--duration-fast)] hover:text-ink focus-visible:ring-2 focus-visible:ring-ring"
+            class="group flex shrink-0 items-center rounded-inner p-1 text-muted outline-none transition-colors duration-[var(--duration-fast)] hover:text-ink focus-visible:ring-2 focus-visible:ring-ring"
             :aria-label="text.close"
           >
             <LpIcon

package/src/components/LpNotificationBell.vue

@@ -321,7 +321,7 @@ function timeAgo(iso?: string): string {
         <button
           v-if="items.length && handlesClear"
           type="button"
-          class="rounded-md px-1.5 py-0.5 text-xs font-medium text-muted outline-none transition-colors hover:bg-surface-soft hover:text-ink focus-visible:bg-surface-soft"
+          class="rounded-inner px-1.5 py-0.5 text-xs font-medium text-muted outline-none transition-colors hover:bg-surface-soft hover:text-ink focus-visible:bg-surface-soft"
           @click="emit('clear')"
         >
           {{ l.clear }}
@@ -329,7 +329,7 @@ function timeAgo(iso?: string): string {
         <button
           v-if="hasUnread"
           type="button"
-          class="rounded-md px-1.5 py-0.5 text-xs font-medium text-brand outline-none transition-colors hover:bg-brand-soft focus-visible:bg-brand-soft"
+          class="rounded-inner px-1.5 py-0.5 text-xs font-medium text-brand outline-none transition-colors hover:bg-brand-soft focus-visible:bg-brand-soft"
           @click="emit('markAllRead')"
         >
           {{ l.markAllRead }}

package/src/components/LpPasswordInput.vue

@@ -53,7 +53,7 @@ defineExpose({
     <template #trailing>
       <button
         type="button"
-        class="group rounded-md p-1 text-muted outline-none transition-colors duration-[var(--duration-fast)] hover:text-ink focus-visible:text-ink"
+        class="group rounded-inner p-1 text-muted outline-none transition-colors duration-[var(--duration-fast)] hover:text-ink focus-visible:text-ink"
         :aria-label="visible ? text.hide : text.show"
         @click="visible = !visible"
       >

package/src/components/LpPhoneInput.vue

@@ -398,7 +398,7 @@ const inputAttrs = computed(() => {
               :model-value="query"
               :placeholder="searchPlaceholder"
               auto-focus
-              class="h-(--size-control-sm) w-full rounded-md border border-line bg-surface-soft px-2.5 text-sm text-ink outline-none placeholder:text-muted focus:border-brand"
+              class="h-(--size-control-sm) w-full rounded-inner border border-line bg-surface-soft px-2.5 text-sm text-ink outline-none placeholder:text-muted focus:border-brand"
               @input="query = ($event.target as HTMLInputElement).value"
             />
           </div>

package/src/components/LpPie.vue

@@ -835,7 +835,7 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(
             v-for="(a, i) in arcs"
             :key="`${i}-${a.label}`"
             type="button"
-            class="group flex cursor-pointer items-center gap-2 rounded-md px-1 py-0.5 text-xs outline-none transition-[opacity,background-color] duration-fast focus-visible:ring-2 focus-visible:ring-ring"
+            class="group flex cursor-pointer items-center gap-2 rounded-inner px-1 py-0.5 text-xs outline-none transition-[opacity,background-color] duration-fast focus-visible:ring-2 focus-visible:ring-ring"
             :class="[dimmed(i) ? 'opacity-45' : '', isSelected(i) ? 'bg-surface-soft' : '']"
             :aria-pressed="isSelected(i)"
             @pointerenter="onSlicePointerEnter(i)"

package/src/components/LpSegmented.vue

@@ -95,7 +95,7 @@ const pillTransition = usePillTransition()
       :key="opt.value"
       :value="opt.value"
       :aria-label="opt.ariaLabel ?? (opt.label ? undefined : opt.value)"
-      class="relative inline-flex h-full items-center justify-center gap-1.5 rounded-md px-3 font-medium outline-none transition-colors duration-[var(--duration-fast)] ease-[var(--ease-emphasized)] focus-visible:ring-2 focus-visible:ring-ring data-[state=on]:text-ink data-[state=off]:text-muted data-[state=off]:hover:text-ink disabled:cursor-not-allowed disabled:opacity-55"
+      class="relative inline-flex h-full items-center justify-center gap-1.5 rounded-inner px-3 font-medium outline-none transition-colors duration-[var(--duration-fast)] ease-[var(--ease-emphasized)] focus-visible:ring-2 focus-visible:ring-ring data-[state=on]:text-ink data-[state=off]:text-muted data-[state=off]:hover:text-ink disabled:cursor-not-allowed disabled:opacity-55"
       :class="block ? 'flex-1' : ''"
     >
       <!-- Sliding pill behind the active segment. -->
@@ -103,7 +103,7 @@ const pillTransition = usePillTransition()
         v-if="opt.value === modelValue"
         :layout-id="pillId"
         :transition="pillTransition"
-        class="absolute inset-0 z-0 rounded-md border border-line bg-surface-raised shadow-sm"
+        class="absolute inset-0 z-0 rounded-inner border border-line bg-surface-raised shadow-sm"
       />
       <LpIcon v-if="opt.icon" :name="opt.icon" :size="14" class="relative z-10 shrink-0" />
       <span v-if="opt.label" class="relative z-10">{{ opt.label }}</span>

package/src/components/LpSidebarNav.vue

@@ -103,8 +103,8 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(
     <div v-if="skeletonHeader" class="flex items-center gap-3 px-1">
       <div class="size-10 shrink-0 animate-pulse rounded-pill bg-surface-soft" />
       <div class="flex-1 space-y-2">
-        <div class="h-3.5 w-24 animate-pulse rounded bg-surface-soft" />
-        <div class="h-3 w-16 animate-pulse rounded bg-surface-soft/60" />
+        <div class="h-3.5 w-24 animate-pulse rounded-small bg-surface-soft" />
+        <div class="h-3 w-16 animate-pulse rounded-small bg-surface-soft/60" />
       </div>
     </div>
     <div class="space-y-1">

package/src/components/LpTable.vue

@@ -1201,7 +1201,7 @@ const barInsetTop = computed(() =>
             <LpContextMenu v-if="col.sortable || col.filterable" :items="headerMenu(col)">
             <button
               type="button"
-              class="group/sort -mx-1 inline-flex items-center gap-1 rounded px-1 outline-none transition-colors duration-[var(--duration-fast)] hover:text-ink focus-visible:ring-2 focus-visible:ring-ring"
+              class="group/sort -mx-1 inline-flex items-center gap-1 rounded-small px-1 outline-none transition-colors duration-[var(--duration-fast)] hover:text-ink focus-visible:ring-2 focus-visible:ring-ring"
               :class="[
                 col.align === 'right' ? 'flex-row-reverse' : '',
                 activeSort?.key === col.key ? 'text-ink' : '',
@@ -1232,7 +1232,7 @@ const barInsetTop = computed(() =>
               <template #trigger>
                 <button
                   type="button"
-                  class="ml-0.5 inline-grid size-5 place-items-center rounded align-middle outline-none transition-colors duration-fast hover:bg-surface-raised hover:text-ink focus-visible:ring-2 focus-visible:ring-ring"
+                  class="ml-0.5 inline-grid size-5 place-items-center rounded-small align-middle outline-none transition-colors duration-fast hover:bg-surface-raised hover:text-ink focus-visible:ring-2 focus-visible:ring-ring"
                   :class="hiddenValues[col.key]?.size ? 'text-brand' : 'opacity-60'"
                   :aria-label="text.filterColumn.replace('{column}', col.label)"
                   :data-lp-filter="col.key"

package/src/components/LpTabs.vue

@@ -38,8 +38,14 @@ const props = withDefaults(
     block?: boolean
     /** Accessible name of the tab list, e.g. "Main" for an app's navigation. */
     label?: string
+    /**
+     * The marker glides under the hovered tab and springs back on leave (the
+     * default). False pins it to the selected tab: calmer for a dense header
+     * where the pointer crosses the bar on its way elsewhere.
+     */
+    hoverFollow?: boolean
   }>(),
-  { variant: "contained", accent: false, block: false },
+  { variant: "contained", accent: false, block: false, hoverFollow: true },
 )
 
 const bottom = computed(() => props.variant === "bottom")
@@ -154,12 +160,12 @@ function releaseFocusAfterPointer(event: PointerEvent) {
             ? 'min-h-14 min-w-0 flex-col gap-0.5 px-1 py-1.5 text-[11px] font-medium focus-visible:ring-inset'
             : 'shrink-0 gap-1.5 whitespace-nowrap text-sm',
           block && !bottom ? 'flex-1' : '',
-          variant === 'underline' ? 'rounded-t-md px-3 pt-1.5 pb-2' : '',
-          variant === 'contained' || variant === 'plain' ? 'rounded-md px-3 py-1.5' : '',
+          variant === 'underline' ? 'rounded-t-inner px-3 pt-1.5 pb-2' : '',
+          variant === 'contained' || variant === 'plain' ? 'rounded-inner px-3 py-1.5' : '',
           accent ? 'data-[state=active]:text-brand' : 'data-[state=active]:text-ink',
           hovered === item.value && !bottom ? 'text-ink' : 'text-muted',
         ]"
-        @pointerenter="hovered = item.value"
+        @pointerenter="hoverFollow && (hovered = item.value)"
         @pointerup="releaseFocusAfterPointer"
       >
         <!-- Active marker: a bar under the tab in "underline", over it in
@@ -180,7 +186,7 @@ function releaseFocusAfterPointer(event: PointerEvent) {
                   accent ? 'bg-brand' : 'bg-ink',
                 ]
               : [
-                  'absolute inset-0 z-0 rounded-md shadow-sm',
+                  'absolute inset-0 z-0 rounded-inner shadow-sm',
                   accent
                     ? 'border border-brand/35 bg-brand/12'
                     : 'border border-line bg-surface-raised',

package/src/components/LpToaster.vue

@@ -305,7 +305,7 @@ function runAction(t: ToastItem, action: NonNullable<ToastItem["actions"]>[numbe
         <button
           v-if="copyable(t)"
           type="button"
-          class="-mt-1 rounded-md p-1 text-muted outline-none transition-colors duration-[var(--duration-fast)] hover:text-ink focus-visible:ring-2 focus-visible:ring-ring"
+          class="-mt-1 rounded-inner p-1 text-muted outline-none transition-colors duration-[var(--duration-fast)] hover:text-ink focus-visible:ring-2 focus-visible:ring-ring"
           :aria-label="copiedId === tag(t) ? text.copied : text.copy"
           :title="copiedId === tag(t) ? text.copied : text.copy"
           @click.stop="copyToast(t)"
@@ -314,7 +314,7 @@ function runAction(t: ToastItem, action: NonNullable<ToastItem["actions"]>[numbe
         </button>
         <button
           type="button"
-          class="group -mr-1 -mt-1 rounded-md p-1 text-muted outline-none transition-colors duration-[var(--duration-fast)] hover:text-ink"
+          class="group -mr-1 -mt-1 rounded-inner p-1 text-muted outline-none transition-colors duration-[var(--duration-fast)] hover:text-ink"
           :aria-label="text.dismiss"
           @click.stop="beginClose(t)"
         >

package/src/components/MenuTitle.vue

@@ -18,10 +18,10 @@ defineProps<{
 
 <template>
   <div class="flex max-w-72 min-w-0 items-center gap-2 px-2.5 pt-1.5 pb-2" aria-hidden="true">
-    <img v-if="image" :src="image" alt="" class="size-7 shrink-0 rounded-md object-cover" />
+    <img v-if="image" :src="image" alt="" class="size-7 shrink-0 rounded-inner object-cover" />
     <span
       v-else-if="icon"
-      class="grid size-7 shrink-0 place-items-center rounded-md bg-surface-soft text-muted"
+      class="grid size-7 shrink-0 place-items-center rounded-inner bg-surface-soft text-muted"
     >
       <LpIcon :name="icon" :size="15" />
     </span>

package/src/components/dropdown.ts

@@ -49,7 +49,7 @@ export const POPOVER_PANEL = PANEL_SURFACE + " " + POPOVER_ANIM
  * stagger. `flex` + gap are included; add justify/extra layout if needed.
  */
 export const OPTION_ITEM =
-  "flex cursor-pointer items-center gap-2 rounded-md px-2.5 py-1.5 text-sm text-ink outline-none " +
+  "flex cursor-pointer items-center gap-2 rounded-inner px-2.5 py-1.5 text-sm text-ink outline-none " +
   "animate-[option-in_180ms_var(--ease-emphasized)_both] " +
   "group-data-[side=top]:animate-[option-in-up_180ms_var(--ease-emphasized)_both] " +
   "data-[highlighted]:bg-brand-soft data-[highlighted]:text-brand"

package/src/tokens/tokens.css

@@ -64,6 +64,12 @@
   --radius-control: 8px;
   --radius-card: 14px;
   --radius-pill: 9999px;
+  /* Nested shapes derive from the control radius instead of fixing pixels: a
+     row inside a menu, a segment, a small icon button. They match the old 6px
+     and 4px at the default 8px, and follow a theme down to 0 when it squares
+     everything (a fixed rounded-md stayed round in a square theme). */
+  --radius-inner: max(0px, calc(var(--radius-control) - 2px));
+  --radius-small: max(0px, calc(var(--radius-control) - 4px));
 
   /* ── density ─────────────────────────────────── */
   --spacing-unit: 4px; /* base rhythm; scaled per density mode */