frappe-ui 1.0.0-beta.75 → 1.0.0-beta.77

package/experimental/CommandPalette/CommandPaletteFooter.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     data-slot="command-palette-footer"
-    class="flex shrink-0 items-center gap-4 border-t border-outline-gray-1 px-4.5 py-2 text-sm text-ink-gray-6 dark:border-outline-gray-2"
+    class="flex shrink-0 items-center gap-4 border-t border-outline-gray-1 px-4.5 py-2 text-sm leading-tighter text-ink-gray-6 dark:border-outline-gray-2"
   >
     <slot v-bind="slotProps" />
   </div>

package/experimental/CommandPalette/CommandPaletteGroup.vue

@@ -9,7 +9,7 @@
       v-if="label"
       as="div"
       data-slot="command-palette-group-label"
-      class="mb-2.5 px-4.5 text-base text-ink-gray-5"
+      class="mb-2.5 px-4.5 text-base leading-tighter text-ink-gray-5"
     >
       {{ label }}
     </ListboxGroupLabel>

package/experimental/CommandPalette/CommandPaletteInput.vue

@@ -12,7 +12,7 @@
       auto-focus
       autocomplete="off"
       :placeholder="placeholder"
-      class="w-full border-none bg-transparent py-3 px-0 text-base text-ink-gray-8 placeholder-ink-gray-4 focus:ring-0"
+      class="w-full border-none bg-transparent py-3 px-0 text-base leading-tighter text-ink-gray-8 placeholder-ink-gray-4 focus:ring-0"
       v-bind="$attrs"
     />
     <slot name="suffix" />

package/experimental/CommandPalette/CommandPaletteItem.vue

@@ -13,7 +13,7 @@
       data-slot="command-palette-item"
       :data-state="active ? 'active' : undefined"
       :data-disabled="disabled ? '' : undefined"
-      class="mx-2.5 flex min-w-0 cursor-default items-center rounded-4 px-2 py-2 text-base-medium text-ink-gray-8 outline-none data-[state=active]:bg-surface-gray-2 data-[disabled]:cursor-not-allowed data-[disabled]:text-ink-gray-4"
+      class="mx-2.5 flex min-w-0 cursor-default items-center rounded-4 px-2 py-2 text-base-medium leading-tighter text-ink-gray-8 outline-none data-[state=active]:bg-surface-gray-2 data-[disabled]:cursor-not-allowed data-[disabled]:text-ink-gray-4"
       v-bind="$attrs"
     >
       <slot name="prefix" v-bind="slotProps" />

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "frappe-ui",
-  "version": "1.0.0-beta.75",
+  "version": "1.0.0-beta.77",
   "description": "A set of components and utilities for rapid UI development",
   "engines": {
     "node": ">=20.19.0"

package/src/components/Badge/Badge.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="inline-flex select-none items-center gap-1 overflow-clip rounded-full whitespace-nowrap"
+    class="inline-flex select-none items-center gap-1 overflow-clip rounded-full leading-tighter whitespace-nowrap"
     :class="classes"
   >
     <div

package/src/components/Breadcrumbs/Breadcrumbs.vue

@@ -13,13 +13,15 @@
       </span>
     </template>
 
-    <div class="flex min-w-0 items-center text-ellipsis whitespace-nowrap">
+    <div
+      class="flex min-w-0 items-center text-ellipsis whitespace-nowrap leading-tighter"
+    >
       <template v-for="(item, i) in crumbs" :key="item.label">
         <router-link
           v-if="item.route"
           :to="item.route"
           @click="item.onClick?.($event)"
-          class="flex items-center rounded-4 px-0.5 py-1 text-lg-medium"
+          class="flex items-center rounded-4 px-0.5 py-1 text-lg-medium leading-tighter"
           :class="[
             i == crumbs.length - 1
               ? 'min-w-0 text-ink-gray-9'
@@ -39,7 +41,7 @@
           v-else-if="item.href"
           :href="item.href"
           @click="onLinkClick(item, $event)"
-          class="flex items-center rounded-4 px-0.5 py-1 text-lg-medium"
+          class="flex items-center rounded-4 px-0.5 py-1 text-lg-medium leading-tighter"
           :class="[
             i == crumbs.length - 1
               ? 'min-w-0 text-ink-gray-9'
@@ -58,7 +60,7 @@
         <button
           v-else
           @click="item.onClick?.($event)"
-          class="flex items-center rounded-4 px-0.5 py-1 text-lg-medium"
+          class="flex items-center rounded-4 px-0.5 py-1 text-lg-medium leading-tighter"
           :class="[
             i == crumbs.length - 1
               ? 'min-w-0 text-ink-gray-9'

package/src/components/Button/Button.vue

@@ -321,7 +321,12 @@ export default defineComponent({
       }
       return h(
         'span',
-        { class: ['truncate', { 'sr-only': isIconButton.value }] },
+        {
+          class: [
+            'truncate leading-tighter',
+            { 'sr-only': isIconButton.value },
+          ],
+        },
         slots.default?.() ?? props.label,
       )
     }

package/src/components/Combobox/Combobox.vue

@@ -587,7 +587,7 @@ defineSlots<ComboboxSlots>()
 
               <span
                 :class="[
-                  'min-w-0 flex-1 truncate text-left font-normal',
+                  'min-w-0 flex-1 truncate text-left font-normal leading-tighter',
                   !selectedOption && 'text-ink-gray-4',
                 ]"
               >

package/src/components/Combobox/ComboboxResults.vue

@@ -140,7 +140,7 @@ function handleSelect(item: NormalizedItem, event: Event) {
             <ComboboxLabel
               v-if="group.group && !group.hideLabel"
               data-slot="group-label"
-              class="flex h-7 items-center px-2 text-sm-medium text-ink-gray-4"
+              class="flex h-7 items-center px-2 text-sm-medium leading-tighter text-ink-gray-4"
             >
               <component
                 :is="ItemSlotRender"
@@ -245,7 +245,7 @@ function handleSelect(item: NormalizedItem, event: Event) {
                   />
 
                   <div v-else class="min-w-0">
-                    <div class="truncate">{{ item.label }}</div>
+                    <div class="truncate leading-tighter">{{ item.label }}</div>
                     <div
                       v-if="item.description"
                       class="truncate text-p-sm text-ink-gray-5"

package/src/components/DatePicker/CalendarPanel.vue

@@ -158,7 +158,7 @@
             v-for="y in years"
             type="button"
             :key="y"
-            class="w-full text-ink-gray-8 h-7 shrink-0 rounded-4 py-1 text-sm text-center cursor-pointer transition-colors duration-100"
+            class="w-full text-ink-gray-8 h-7 shrink-0 rounded-4 py-1 text-sm leading-tighter text-center cursor-pointer transition-colors duration-100"
             :class="
               y === currentYear
                 ? 'bg-surface-gray-2 hover:bg-surface-gray-3'
@@ -181,7 +181,7 @@
             v-for="(m, i) in months"
             type="button"
             :key="m"
-            class="w-full text-ink-gray-8 shrink-0 h-7 rounded-4 py-1 text-sm text-center cursor-pointer transition-colors duration-100"
+            class="w-full text-ink-gray-8 shrink-0 h-7 rounded-4 py-1 text-sm leading-tighter text-center cursor-pointer transition-colors duration-100"
             :class="
               i === currentMonth
                 ? 'bg-surface-gray-2 hover:bg-surface-gray-3'

package/src/components/FormLabel/FormLabel.vue

@@ -1,5 +1,9 @@
 <template>
-  <label class="block text-sm text-ink-gray-6" :for="id" data-slot="label">
+  <label
+    class="block text-sm leading-tighter text-ink-gray-6"
+    :for="id"
+    data-slot="label"
+  >
     {{ label }}
     <RequiredIndicator :required="required" />
   </label>

package/src/components/InputLabeling/InputLabel.vue

@@ -41,7 +41,7 @@ const labelClasses = computed(() => {
   // Disabled wins over `color` — a dimmed label is a state, not a choice, so
   // callers shouldn't have to remember to swap the colour themselves.
   return [
-    'block text-sm',
+    'block text-sm leading-tighter',
     props.disabled
       ? 'text-ink-gray-4'
       : props.color === 'gray-7'

package/src/components/ItemListRow/ItemListRow.vue

@@ -69,7 +69,7 @@ defineSlots<{
       <slot name="prefix" />
     </div>
 
-    <div data-slot="item-label" class="min-w-0 flex-1">
+    <div data-slot="item-label" class="min-w-0 flex-1 leading-tighter">
       <slot name="label">
         <slot />
       </slot>

package/src/components/KeyboardShortcut/KeyboardShortcut.md

@@ -37,11 +37,11 @@ and Alt as icons, `bg` mode draws them as text.
 
 ## Styling hooks
 
-The root carries `data-slot="keyboard-shortcut"`, and `data-bg="true"` when `bg`
-is set. Each key carries `data-slot="key"` with a `data-key-type` of `cmd`,
-`ctrl`, `shift`, `alt` or `key`. The `+` separators carry
-`data-slot="separator"`, and alternative combos sit in `data-slot="alt-combos"`
-inside the root. Style through those instead of a class prop (P10):
+The root carries `data-slot="keyboard-shortcut"`, and `data-bg` when `bg` is
+set. Each key carries `data-slot="key"` with a `data-key-type` of `cmd`, `ctrl`,
+`shift`, `alt` or `key`. The `+` separators carry `data-slot="separator"`, and
+alternative combos sit in `data-slot="alt-combos"` inside the root. Style
+through those instead of a class prop (P10):
 
 ```css
 [data-slot='keyboard-shortcut'][data-bg] [data-slot='key'] {

package/src/components/Menu/MenuItemContent.vue

@@ -167,7 +167,7 @@ function handleSwitchChange(value: boolean) {
         :content="itemSlotsLabelContent"
       />
       <div v-else class="min-w-0">
-        <div :class="['truncate', getMenuTextColor(item)]">
+        <div :class="['truncate leading-tighter', getMenuTextColor(item)]">
           {{ item.label }}
         </div>
         <div v-if="item.description" class="truncate text-p-sm text-ink-gray-5">

package/src/components/Menu/utils.ts

@@ -18,7 +18,8 @@ export const menuClasses = {
   content:
     'menu-content z-[100] min-w-40 divide-y divide-outline-elevation-2 rounded-6 bg-surface-elevation-2 shadow-2xl ring-1 ring-black ring-opacity-5 focus:outline-none',
   group: 'p-1.5',
-  groupLabel: 'flex h-7 items-center px-2 text-sm font-medium text-ink-gray-4',
+  groupLabel:
+    'flex h-7 items-center px-2 text-sm font-medium leading-tighter text-ink-gray-4',
   itemIcon: 'size-4 shrink-0',
   itemIconPlaceholder: 'size-4 shrink-0',
   chevronIcon: 'size-4 shrink-0',

package/src/components/MobileNav/MobileNavItem.vue

@@ -26,7 +26,7 @@
       />
     </slot>
     <span
-      class="text-xs-medium"
+      class="text-xs-medium leading-tighter"
       :class="resolvedActive ? 'text-ink-gray-8' : 'text-ink-gray-5'"
     >
       {{ label }}
@@ -51,7 +51,7 @@
       />
     </slot>
     <span
-      class="text-xs-medium"
+      class="text-xs-medium leading-tighter"
       :class="resolvedActive ? 'text-ink-gray-8' : 'text-ink-gray-5'"
     >
       {{ label }}

package/src/components/MultiSelect/MultiSelectResults.vue

@@ -109,7 +109,7 @@ function getItemTextValue(item: NormalizedOption) {
             <ComboboxLabel
               v-if="group.group && !group.hideLabel"
               data-slot="group-label"
-              class="flex h-7 items-center px-2 text-sm-medium text-ink-gray-4"
+              class="flex h-7 items-center px-2 text-sm-medium leading-tighter text-ink-gray-4"
             >
               <component
                 :is="ItemSlotRender"

package/src/components/Select/Select.vue

@@ -362,7 +362,7 @@ defineExpose(exposed)
           >
             <SelectValue
               :placeholder="placeholder"
-              class="max-w-full truncate opacity-0"
+              class="max-w-full truncate leading-tighter opacity-0"
               :class="{ 'text-ink-gray-4': showPlaceholderForSelected }"
             >
               <template v-if="selectedOption">
@@ -400,7 +400,7 @@ defineExpose(exposed)
           <div class="grid min-w-0 text-left truncate">
             <SelectValue
               :placeholder="placeholder"
-              class="col-start-1 row-start-1 max-w-full truncate"
+              class="col-start-1 row-start-1 max-w-full truncate leading-tighter"
               :class="{ 'text-ink-gray-4': showPlaceholderForSelected }"
             >
               <template v-if="selectedOption">
@@ -540,7 +540,7 @@ defineExpose(exposed)
                           name="item-label"
                           v-bind="getItemSlotProps(internalOption.option)"
                         >
-                          <div class="truncate">
+                          <div class="truncate leading-tighter">
                             {{ internalOption.option.label }}
                           </div>
                           <div

package/src/components/SettingsDialog/SettingsRow.vue

@@ -4,7 +4,7 @@
       <component
         :is="resolvedFor ? 'label' : 'div'"
         :for="resolvedFor"
-        class="text-base-medium block text-ink-gray-8"
+        class="text-base-medium leading-tighter block text-ink-gray-8"
         :class="{ 'cursor-pointer': resolvedFor }"
       >
         {{ title }}

package/src/components/Sidebar/Sidebar.api.md

@@ -26,6 +26,13 @@
     type: 'string',
     default: '"3rem"'
   },
+  {
+    name: 'ariaLabel',
+    description: 'Accessible name of the `<nav>` landmark. Default: `\'Main\'`. Give a second\nsidebar on the same page its own name, and translate it in a localised\napp — the library ships no translation layer.',
+    required: false,
+    type: 'string',
+    default: '"Main"'
+  },
   {
     name: 'collapsed',
     description: 'v-model. Whether the sidebar is collapsed. Left unset, it collapses automatically below the `sm` breakpoint.',
@@ -66,7 +73,7 @@
   },
   {
     name: 'icon',
-    description: 'Leading icon: a CSS class (e.g. `lucide-box`), plain text, or a component.\nIgnored when the `#prefix` slot is used.',
+    description: 'Leading icon: a `lucide-*` class, an emoji, or a component. Any other\nstring renders nothing and warns in dev — put initials in the `#prefix`\nslot instead. Ignored when the `#prefix` slot is used.',
     required: false,
     type: 'string | Component'
   },

package/src/components/Sidebar/Sidebar.md

@@ -12,6 +12,18 @@ There are no layout slots and no built-in scrolling in composition mode. Put a
 header as a direct child, wrap the middle list in your own `overflow-y-auto`
 container, and push a footer down with `mt-auto`.
 
+## Accessibility
+
+`Sidebar` renders the `<nav>` landmark, named `Main` through `aria-label`. Set
+`ariaLabel` to rename it — do that when a page holds a second sidebar, and to
+translate the name in a localised app. It is the only landmark the family
+emits: keep your own wrappers inside the slot as plain `div`s, or the page
+reports two navigations where it has one.
+
+`SidebarSection` gives its body `role="group"`, named by the section's `<h3>`
+whenever `label` is set, collapsible or not. A collapsible section's trigger
+keeps `aria-expanded` and `aria-controls` on the body.
+
 ## Collapse
 
 `Sidebar` owns collapse. Bind `v-model:collapsed` to control it, or leave it
@@ -29,8 +41,10 @@ A single row. It renders a container with a navigable main area and a **sibling*
 trailing zone, so an options menu in `#suffix` isn't nested inside the link
 (which anchors and buttons disallow).
 
-- `#prefix` — a leading icon or avatar (falls back to the `icon` prop: a lucide
-  class, text, or a component).
+- `#prefix` — a leading icon or avatar (falls back to the `icon` prop: a
+  `lucide-*` class, an emoji, or a component — the same values `Icon` takes).
+  Any other string renders nothing and warns in dev, so put initials or a text
+  glyph in `#prefix`.
 - default slot — the label region (falls back to the `label` prop). Put inline
   adornments like a lock icon here next to the text.
 - `#suffix` — the trailing zone: an unread count, an options `…` menu, etc.
@@ -41,6 +55,13 @@ Set `route` to render a router link or `href` for a native same-tab anchor;
 `route` against the current route. A click invokes `onClick` (bound from
 `@click`) in every case.
 
+Attributes you write on `SidebarItem` split in two. `class`, `style` and event
+listeners stay on the row container, so a row background or a drag-and-drop
+ring covers the `#suffix` zone and a `@dragover` / `@drop` there still fires.
+Every other attribute (`target`, `rel`, `id`, `title`, `data-*`, `aria-*`)
+lands on the link or the button inside, the element it describes. Your
+`aria-label` replaces the one derived from the label text.
+
 ## SidebarHeader
 
 The app-switcher / workspace-identity row. A fixed 48px region that lines up
@@ -51,6 +72,10 @@ or the title's first letter; `showLogo: false` drops the box entirely for a
 flush-left title. `menuItems` renders inside the trigger's
 dropdown — the same structured-options shape `Dropdown` itself takes.
 
+Without `menuItems` the header is a plain static block: no button, no chevron,
+no hover background, no tab stop. The logo and the title keep the same
+position, so adding a menu later does not move them.
+
 ## SidebarSection
 
 A collapsible group. It owns only the label row and the collapse chrome —

package/src/components/Sidebar/Sidebar.vue

@@ -1,7 +1,12 @@
 <template>
-  <div
+  <!-- A <nav> landmark, so screen-reader users can jump to the app's
+       navigation. It is the only one the sidebar family emits: SidebarSection
+       bodies are `role="group"`, because nested landmarks add noise instead of
+       structure. Keep app-written wrappers inside the slot as plain divs. -->
+  <nav
     data-slot="sidebar"
     :data-state="shouldCollapse ? 'collapsed' : 'expanded'"
+    :aria-label="ariaLabel"
     class="flex h-full flex-shrink-0 flex-col overflow-x-hidden bg-surface-sidebar transition-[width] duration-300 ease-in-out"
     :style="{ width: shouldCollapse ? collapsedWidth : width }"
   >
@@ -9,7 +14,7 @@
          it from SidebarHeader / SidebarSection / SidebarLabel / SidebarItem
          and plain markup. -->
     <slot />
-  </div>
+  </nav>
 </template>
 
 <script setup lang="ts">
@@ -21,6 +26,7 @@ const props = withDefaults(defineProps<SidebarProps>(), {
   collapsible: true,
   width: '15rem',
   collapsedWidth: '3rem',
+  ariaLabel: 'Main',
 })
 
 defineSlots<{

package/src/components/Sidebar/SidebarHeader.vue

@@ -4,7 +4,55 @@
        the sidebar gutter (px-2) itself — so consumers drop it straight into
        <Sidebar> without a wrapping padding div. -->
   <div data-slot="sidebar-header" class="flex h-12 shrink-0 items-center px-1">
-    <Dropdown :options="props.menuItems" match-trigger-width>
+    <!-- The logo + title block. Declared once (this renders nothing) and
+         reused by both branches below, so the interactive and the static
+         header cannot drift apart. -->
+    <DefineIdentity>
+      <div
+        v-if="showLogo"
+        class="size-7 shrink-0 rounded-[6px] overflow-hidden"
+      >
+        <slot name="prefix">
+          <img
+            v-if="typeof props.logo === 'string'"
+            :src="props.logo"
+            class="w-full h-full object-cover"
+            alt="Logo"
+          />
+          <div
+            v-else-if="!props.logo"
+            class="w-full h-full bg-surface-gray-4 flex items-center justify-center text-ink-gray-7"
+          >
+            {{ props.title.charAt(0).toUpperCase() }}
+          </div>
+          <component v-else :is="props.logo" class="w-full h-full" />
+        </slot>
+      </div>
+      <div
+        class="flex flex-1 flex-col text-left duration-300 ease-in-out truncate"
+        :class="
+          isCollapsed
+            ? 'ml-0 w-0 overflow-hidden opacity-0'
+            : showLogo
+              ? 'ml-2 w-auto opacity-100'
+              : 'ml-0 w-auto opacity-100'
+        "
+      >
+        <!-- The size sits on the line itself, not on a span inside a
+           leading-none div: a line box built from a strut at the
+           inherited size and text at another puts the baseline at a
+           different offset in an app whose layout sets a smaller base
+           size, and the header text sat a px lower there. -->
+        <div class="truncate text-base-medium leading-tighter text-ink-gray-8">
+          {{ props.title }}
+        </div>
+        <div class="mt-0.5 truncate text-sm leading-tighter text-ink-gray-6">
+          {{ props.subtitle }}
+        </div>
+      </div>
+    </DefineIdentity>
+
+    <Dropdown v-if="hasMenu" :options="props.menuItems" match-trigger-width>
       <template v-slot="{ open }">
         <button
           class="flex h-10 items-center rounded-4 px-1.5 duration-300 ease-in-out"
@@ -16,48 +64,7 @@
                 : 'w-full hover:bg-surface-gray-3'
           "
         >
-          <div
-            v-if="showLogo"
-            class="size-7 shrink-0 rounded-[6px] overflow-hidden"
-          >
-            <slot name="prefix">
-              <img
-                v-if="typeof props.logo === 'string'"
-                :src="props.logo"
-                class="w-full h-full object-cover"
-                alt="Logo"
-              />
-              <div
-                v-else-if="!props.logo"
-                class="w-full h-full bg-surface-gray-4 flex items-center justify-center text-ink-gray-7"
-              >
-                {{ props.title.charAt(0).toUpperCase() }}
-              </div>
-              <component v-else :is="props.logo" class="w-full h-full" />
-            </slot>
-          </div>
-          <div
-            class="flex flex-1 flex-col text-left duration-300 ease-in-out truncate"
-            :class="
-              isCollapsed
-                ? 'ml-0 w-0 overflow-hidden opacity-0'
-                : showLogo
-                  ? 'ml-2 w-auto opacity-100'
-                  : 'ml-0 w-auto opacity-100'
-            "
-          >
-            <!-- The size sits on the line itself, not on a span inside a
-                 leading-none div: a line box built from a strut at the
-                 inherited size and text at another puts the baseline at a
-                 different offset in an app whose layout sets a smaller base
-                 size, and the header text sat a px lower there. -->
-            <div class="truncate text-base-medium text-ink-gray-8">
-              {{ props.title }}
-            </div>
-            <div class="mt-0.5 truncate text-sm text-ink-gray-6">
-              {{ props.subtitle }}
-            </div>
-          </div>
+          <ReuseIdentity />
           <div
             class="duration-300 ease-in-out"
             :class="
@@ -71,10 +78,24 @@
         </button>
       </template>
     </Dropdown>
+
+    <!--
+      No menu items, nothing to open: a plain div, with the trigger's box but
+      no chevron, no hover background and no tab stop. The identity block keeps
+      the same x/y either way, so adding menu items later does not move it.
+    -->
+    <div
+      v-else
+      class="flex h-10 items-center rounded-4 px-1.5 duration-300 ease-in-out"
+      :class="isCollapsed ? 'w-auto' : 'w-full'"
+    >
+      <ReuseIdentity />
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
+import { createReusableTemplate } from '@vueuse/core'
 import { computed, inject } from 'vue'
 import Dropdown from '../Dropdown/Dropdown.vue'
 import { SidebarHeaderProps, sidebarCollapsedKey } from './types'
@@ -91,9 +112,12 @@ defineSlots<{
   prefix?: () => any
 }>()
 
+const [DefineIdentity, ReuseIdentity] = createReusableTemplate()
+
 const isCollapsed = inject(
   sidebarCollapsedKey,
   computed(() => false),
 )
 const showLogo = computed(() => props.showLogo !== false)
+const hasMenu = computed(() => Boolean(props.menuItems?.length))
 </script>

package/src/components/Sidebar/SidebarItem.vue

@@ -2,6 +2,7 @@
   <div
     data-slot="sidebar-item"
     :data-state="resolvedActive ? 'active' : 'inactive'"
+    v-bind="rootAttrs"
     class="group/sidebar-item flex h-7 items-center rounded-4 transition"
     :class="
       resolvedActive
@@ -16,13 +17,18 @@
       RouterLink component object or the 'a' string is safe; only a raw 'button'
       string collides with the globally-registered <Button>, so that stays a
       literal <button v-else>. The inner content is identical in both branches.
+
+      `controlAttrs` is spread before `linkAttrs` and before the component's own
+      attributes, so a caller cannot overwrite `href` / `to`, `aria-current` or
+      the classes. `aria-label` is the exception: `ariaLabel` returns the
+      caller's value when there is one.
     -->
     <component
       :is="linkComponent"
       v-if="route || href"
-      v-bind="linkAttrs"
+      v-bind="{ ...controlAttrs, ...linkAttrs }"
       :accesskey="accessKey"
-      :aria-label="tooltipText || undefined"
+      :aria-label="ariaLabel"
       :aria-current="resolvedActive ? 'page' : undefined"
       class="flex h-full min-w-0 flex-1 items-center rounded-4 pl-2 focus-visible:ring-0 focus-visible:focus-ring"
       @click="handleClick"
@@ -38,7 +44,7 @@
              square and back (the whole row is already the hit target). -->
         <span class="grid shrink-0 place-items-center">
           <slot name="prefix">
-            <SidebarItemIcon :icon="icon" />
+            <Icon :icon="icon" class="size-4 text-ink-gray-6" />
           </slot>
         </span>
       </Tooltip>
@@ -52,7 +58,9 @@
       >
         <span ref="labelEl" class="flex min-w-0 items-center">
           <slot
-            ><span class="truncate text-sm">{{ label }}</span></slot
+            ><span class="truncate text-sm leading-tighter">{{
+              label
+            }}</span></slot
           >
         </span>
       </span>
@@ -61,8 +69,9 @@
     <button
       v-else
       type="button"
+      v-bind="controlAttrs"
       :accesskey="accessKey"
-      :aria-label="tooltipText || undefined"
+      :aria-label="ariaLabel"
       class="flex h-full text-left min-w-0 flex-1 items-center rounded-4 pl-2 focus-visible:ring-0 focus-visible:focus-ring"
       @click="handleClick"
     >
@@ -77,7 +86,7 @@
              square and back (the whole row is already the hit target). -->
         <span class="grid shrink-0 place-items-center">
           <slot name="prefix">
-            <SidebarItemIcon :icon="icon" />
+            <Icon :icon="icon" class="size-4 text-ink-gray-6" />
           </slot>
         </span>
       </Tooltip>
@@ -91,7 +100,9 @@
       >
         <span ref="labelEl" class="flex min-w-0 items-center">
           <slot
-            ><span class="truncate text-sm">{{ label }}</span></slot
+            ><span class="truncate text-sm leading-tighter">{{
+              label
+            }}</span></slot
           >
         </span>
       </span>
@@ -123,13 +134,41 @@ import {
   inject,
   onMounted,
   ref,
+  useAttrs,
   useTemplateRef,
 } from 'vue'
 import { RouterLink } from 'vue-router'
+import Icon from '../Icon/Icon.vue'
 import Tooltip from '../Tooltip/Tooltip.vue'
-import SidebarItemIcon from './SidebarItemIcon.vue'
 import { SidebarItemProps, sidebarCollapsedKey } from './types'
 
+// The root <div> is a wrapper, not the control: the link/button and the
+// #suffix zone are siblings inside it. Without this, every fallthrough
+// attribute stopped at the wrapper, so `target`, `rel`, `data-*` and `aria-*`
+// never reached the element they describe.
+defineOptions({ inheritAttrs: false })
+
+const attrs = useAttrs()
+
+// The split. `class`, `style` and event listeners belong to the whole row, so
+// they stay on the wrapper: a row background or a drag-and-drop ring has to
+// cover the #suffix zone, and so does a listener. Mail and Drive make a folder
+// row a drop target with `@dragover` / `@drop` while the suffix holds the
+// unread count and the options menu. On the inner control those events would
+// miss that strip. Everything else describes the control and goes there.
+// `onClick` is a declared prop, so it is never in `attrs`; it stays bound to
+// the control through `handleClick`.
+const isRootAttr = (key: string) =>
+  key === 'class' || key === 'style' || /^on[A-Z]/.test(key)
+
+const rootAttrs = computed(() =>
+  Object.fromEntries(Object.entries(attrs).filter(([key]) => isRootAttr(key))),
+)
+
+const controlAttrs = computed(() =>
+  Object.fromEntries(Object.entries(attrs).filter(([key]) => !isRootAttr(key))),
+)
+
 // `active` must default to `undefined`, not Vue's implicit boolean `false` —
 // "not passed" and "passed false" are different states here: absence falls
 // through to route inference.
@@ -162,6 +201,15 @@ onMounted(() => {
 })
 const tooltipText = computed(() => props.label || slotLabel.value)
 
+// A caller's `aria-label` wins over the derived one. It is the more specific
+// name, and it is the only way to name a row whose visible text is not its
+// full name (a folder row that also announces its unread count). Every other
+// attribute the component computes is bound after `controlAttrs`, so a caller
+// cannot overwrite it.
+const ariaLabel = computed(
+  () => (attrs['aria-label'] as string) || tooltipText.value || undefined,
+)
+
 // Read the router/route off global properties instead of useRouter()/useRoute()
 // so this component works — without warnings or crashes — when mounted outside a
 // vue-router app (docs, tests, embedded use). vue-router installs $router/$route

package/src/components/Sidebar/SidebarLabel.vue

@@ -1,7 +1,7 @@
 <template>
   <div data-slot="sidebar-label" class="relative flex h-7 items-center pl-2">
     <h3
-      class="text-base text-ink-gray-5 transition-all duration-300 ease-in-out"
+      class="text-base leading-tighter text-ink-gray-5 transition-all duration-300 ease-in-out"
       :class="
         isCollapsed ? 'w-0 overflow-hidden opacity-0' : 'w-auto opacity-100'
       "

package/src/components/Sidebar/SidebarSection.vue

@@ -16,7 +16,8 @@
         <h3> inside it strips the heading from the accessibility tree.
       -->
       <h3
-        class="h-4 text-sm text-ink-gray-5 transition-all duration-300 ease-in-out"
+        :id="headingId"
+        class="h-4 text-sm leading-tighter text-ink-gray-5 transition-all duration-300 ease-in-out"
         :class="
           isSidebarCollapsed
             ? 'w-0 overflow-hidden opacity-0'
@@ -25,7 +26,6 @@
       >
         <button
           v-if="collapsible"
-          :id="triggerId"
           type="button"
           class="flex items-center gap-1 rounded-4 focus-visible:ring-0 focus-visible:focus-ring"
           :aria-expanded="!isSectionCollapsed"
@@ -64,15 +64,20 @@
         resolve to a real element at all times, including the instant
         aria-expanded flips to "false" — an id that only exists while
         expanded breaks the reference exactly when it's read.
+
+        role="group", not a <nav>: Sidebar is already the navigation landmark,
+        and a landmark inside a landmark buys nothing. The group takes its
+        name from the <h3>, so a non-collapsible section is named too.
       -->
-      <nav
+      <div
         v-show="!isSectionCollapsed"
         :id="bodyId"
-        :aria-labelledby="collapsible && label ? triggerId : undefined"
+        role="group"
+        :aria-labelledby="label ? headingId : undefined"
         class="flex flex-col gap-0.5"
       >
         <slot />
-      </nav>
+      </div>
     </transition>
   </div>
 </template>
@@ -109,6 +114,8 @@ defineEmits<{
 /** v-model. Whether the section is collapsed. Bind it to own the state (start a section collapsed, persist the choice); left unbound the section manages it internally, starting expanded. */
 const isSectionCollapsed = defineModel<boolean>('collapsed', { default: false })
 
-const triggerId = useId()
+// The heading carries the id, not the trigger button: a non-collapsible
+// section has no button, and the group still has to be named.
+const headingId = useId()
 const bodyId = useId()
 </script>

package/src/components/Sidebar/types.ts

@@ -28,6 +28,13 @@ export type SidebarProps = {
 
   /** Collapsed width as a CSS length. */
   collapsedWidth?: string
+
+  /**
+   * Accessible name of the `<nav>` landmark. Default: `'Main'`. Give a second
+   * sidebar on the same page its own name, and translate it in a localised
+   * app — the library ships no translation layer.
+   */
+  ariaLabel?: string
 }
 
 export interface SidebarItemProps {
@@ -38,8 +45,9 @@ export interface SidebarItemProps {
   accessKey?: string
 
   /**
-   * Leading icon: a CSS class (e.g. `lucide-box`), plain text, or a component.
-   * Ignored when the `#prefix` slot is used.
+   * Leading icon: a `lucide-*` class, an emoji, or a component. Any other
+   * string renders nothing and warns in dev — put initials in the `#prefix`
+   * slot instead. Ignored when the `#prefix` slot is used.
    */
   icon?: string | Component
 

package/src/components/SidebarRail/SidebarRail.md

@@ -36,4 +36,8 @@ The `badge` count shows as a pill (`badgeStyle="count"`) or a dot
 a dot surfaces the real number in the tooltip. The badge pill teleports to
 `<body>` so an `overflow-hidden` scroll container can't clip it.
 
+Attributes you write on `SidebarRailItem` land on the clickable cell — the
+`<button>` or the link — not on the tooltip wrapper, and a `class` adds to the
+cell's own classes.
+
 <!-- @include: ./SidebarRail.api.md -->

package/src/components/SidebarRail/SidebarRailItem.vue

@@ -10,11 +10,16 @@
       literal v-else because a raw 'button' string can resolve to the globally
       registered <Button> in consumer apps. The inner content is identical in
       both branches.
+
+      $attrs is spread before the component's own attributes, so a caller
+      cannot overwrite data-slot / data-state, which tests and app CSS select
+      on. `class` is exempt: Vue merges class and style whatever the order, so
+      a caller's class adds to `cellClasses` instead of replacing it.
     -->
     <component
       :is="linkComponent"
       v-if="route || href"
-      v-bind="linkAttrs"
+      v-bind="{ ...linkAttrs, ...$attrs }"
       data-slot="sidebar-rail-item"
       :data-variant="variant"
       :data-state="resolvedActive ? 'active' : 'inactive'"
@@ -36,6 +41,7 @@
     <button
       v-else
       type="button"
+      v-bind="$attrs"
       data-slot="sidebar-rail-item"
       :data-variant="variant"
       :data-state="resolvedActive ? 'active' : 'inactive'"
@@ -73,6 +79,11 @@ import Tooltip from '../Tooltip/Tooltip.vue'
 import SidebarRailItemBadge from './SidebarRailItemBadge.vue'
 import type { SidebarRailItemProps } from './types'
 
+// The root is <Tooltip>, which drops what it receives. Without this, every
+// fallthrough attribute a caller writes on <SidebarRailItem> is lost; the two
+// branches below re-bind them onto the real clickable cell instead.
+defineOptions({ inheritAttrs: false })
+
 const props = withDefaults(defineProps<SidebarRailItemProps>(), {
   variant: 'subtle',
   active: undefined,

package/src/components/Switch/Switch.vue

@@ -189,7 +189,10 @@ const controlPosition = computed(() => props.controlPosition ?? 'end')
 const switchGroupClasses = computed(() => {
   const hasLabel = props.label || slots.label
   const hasDescription = props.description || slots.description
-  if (!hasLabel && !hasDescription) return undefined
+  // A bare switch still gets `flex`: in a plain block the inline-flex control
+  // sits on a text line, and that line takes its height from the parent's
+  // line-height. In a 28px menu row that made the row 29px.
+  if (!hasLabel && !hasDescription) return 'flex'
 
   // `flex-row-reverse` / `justify-*` are inline-axis aware, so this flips
   // correctly under RTL without any physical left/right values.

package/src/components/TextInput/TextInput.vue

@@ -252,7 +252,7 @@ const inputClasses = computed(() => {
     paddingClasses,
     variantClasses,
     textColor.value,
-    'transition-colors w-full dark:[color-scheme:dark]',
+    'leading-tighter transition-colors w-full dark:[color-scheme:dark]',
   ]
 })
 

package/src/components/TimePicker/TimePicker.vue

@@ -82,7 +82,7 @@
             :id="optionId(idx)"
             type="button"
             role="option"
-            class="group flex h-7 w-full items-center rounded-4 px-2 text-left tabular-nums"
+            class="group flex h-7 w-full items-center rounded-4 px-2 text-left leading-tighter tabular-nums"
             :class="rowClass(opt, idx)"
             :aria-selected="canonicalValue === opt.value || undefined"
             @click="selectOption(opt.value)"

package/src/components/Tree/TreeItem.vue

@@ -66,7 +66,9 @@
         <slot name="item-prefix" v-bind="itemSlotProps" />
 
         <slot name="item-label" v-bind="itemSlotProps">
-          <span class="truncate text-base text-ink-gray-8">{{ label }}</span>
+          <span class="truncate text-base leading-tighter text-ink-gray-8">{{
+            label
+          }}</span>
         </slot>
 
         <span class="ml-auto flex items-center">

package/src/components/shared/tabs/Pill.vue

@@ -76,7 +76,9 @@ const rootClasses = computed(() => [
   'inline-flex box-border shrink-0 select-none items-center justify-center whitespace-nowrap outline-none transition-[background-color,color,box-shadow] duration-150 ease-out motion-reduce:transition-none',
   // Shipped v1 subtle typography (overrides Figma): 13px regular at both
   // sizes, never medium.
-  props.variant === 'subtle' ? 'text-sm leading-[16.1px]' : 'text-base',
+  props.variant === 'subtle'
+    ? 'text-sm leading-[16.1px]'
+    : 'text-base leading-tighter',
   props.active ? 'text-ink-gray-8' : 'text-ink-gray-5',
   // Figma: md ghost/browser labels use text/base/medium (500, 0.015em);
   // md underline and all sm labels stay regular. The selected state

package/src/molecules/editor/extensions/shared/media-node-ops.ts

@@ -15,7 +15,7 @@ import {
 import type { MediaDimensions } from '#molecules/editor/extensions/shared/media-dimensions'
 import type {
   InsertMode,
-  UploadedFile,
+  UploadedMedia,
 } from '#molecules/editor/extensions/shared/media-upload-types'
 
 /** Optional intrinsic dimensions (null when the probe failed). */
@@ -120,7 +120,7 @@ export function applyUploadSuccess(
   view: EditorView,
   nodeName: string,
   uploadId: string,
-  uploaded: UploadedFile,
+  uploaded: UploadedMedia,
 ): void {
   const pos = findNodeByUploadId(view, nodeName, uploadId)
   if (pos === null) return

package/src/molecules/editor/extensions/shared/media-upload-engine.ts

@@ -48,7 +48,7 @@ import type {
   MediaUploadEngine,
   MediaUploadOptions,
   MediaUploadRequestOptions,
-  UploadedFile,
+  UploadedMedia,
   UploadResult,
 } from '#molecules/editor/extensions/shared/media-upload-types'
 
@@ -58,7 +58,7 @@ export type {
   MediaUploadOptions,
   MediaUploadRequestOptions,
   UploadFunction,
-  UploadedFile,
+  UploadedMedia,
   UploadResult,
 } from '#molecules/editor/extensions/shared/media-upload-types'
 
@@ -97,7 +97,7 @@ export async function uploadFile(
   file: File,
   options: MediaUploadOptions,
   requestOptions?: MediaUploadRequestOptions,
-): Promise<UploadedFile> {
+): Promise<UploadedMedia> {
   if (!options.uploadFunction) {
     throw new Error('uploadFunction option is not provided')
   }

package/src/molecules/editor/extensions/shared/media-upload-types.ts

@@ -46,7 +46,7 @@ declare module '@tiptap/core' {
  * The index signature keeps server fields the editor does not know about, so
  * an upload handler can return the raw File document.
  */
-export interface UploadedFile extends Partial<FrappeUploadedFile> {
+export interface UploadedMedia extends Partial<FrappeUploadedFile> {
   file_url: string
   width?: number | null
   height?: number | null
@@ -72,7 +72,7 @@ export interface MediaUploadRequestOptions {
 export type UploadFunction = (
   file: File,
   options?: MediaUploadRequestOptions,
-) => Promise<UploadedFile>
+) => Promise<UploadedMedia>
 
 /**
  * Effective upload options. Mirrors the legacy extension option shape: the only
@@ -88,7 +88,7 @@ export interface MediaUploadOptions {
 /** Outcome of a no-doc-mutation single-file upload. */
 export interface UploadResult {
   success: boolean
-  file?: UploadedFile
+  file?: UploadedMedia
   error?: Error
 }
 

package/src/molecules/editor/extensions/shared/upload-types.ts

@@ -3,7 +3,7 @@
  * content-paste path stop each declaring their own `UploadResult` /
  * `MediaUploadOptions` interfaces.
  *
- * `UploadResult`, `MediaUploadOptions` and `UploadedFile` are OWNED by the image
+ * `UploadResult`, `MediaUploadOptions` and `UploadedMedia` are OWNED by the image
  * cluster's `media-upload-types.ts` (the engine's canonical type surface); they
  * are re-exported here so consumers have one stable import for the whole upload
  * value-type vocabulary. The only type added here is {@link ExistingImage},
@@ -13,7 +13,7 @@ export type {
   MediaUploadOptions,
   UploadFunction,
   UploadResult,
-  UploadedFile,
+  UploadedMedia,
 } from '#molecules/editor/extensions/shared/media-upload-types'
 
 /**

package/src/molecules/editor/index.ts

@@ -8,7 +8,7 @@ export {
   useEditor,
   type Editor as TiptapEditor,
   type JSONContent,
-  type UploadedFile,
+  type UploadedMedia,
   type UploadFunction,
   type MediaUploadProgress,
 } from './useEditor'

package/src/molecules/editor/useEditor.ts

@@ -43,11 +43,11 @@ export type UseEditorOptions = {
 
 /**
  * The upload result contract, re-exported so `frappe-ui/editor` keeps one
- * `UploadedFile` name. The canonical declaration lives next to the media
+ * `UploadedMedia` name. The canonical declaration lives next to the media
  * upload engine.
  */
 export type {
-  UploadedFile,
+  UploadedMedia,
   UploadFunction,
   MediaUploadProgress,
   MediaUploadRequestOptions,

package/src/molecules/list/ListGroup.vue

@@ -7,7 +7,7 @@
     <div
       v-if="label || $slots.label"
       data-slot="list-group-header"
-      class="flex h-8 items-center text-sm-medium text-ink-gray-5"
+      class="flex h-8 items-center text-sm-medium leading-tighter text-ink-gray-5"
       :class="sticky && 'sticky top-0 z-10 bg-surface-base'"
     >
       <slot name="label">{{ label }}</slot>

package/src/molecules/list/ListHeader.vue

@@ -1,5 +1,9 @@
 <template>
-  <div data-slot="list-header" role="row" class="h-8 text-sm text-ink-gray-5">
+  <div
+    data-slot="list-header"
+    role="row"
+    class="h-8 text-sm leading-tighter text-ink-gray-5"
+  >
     <slot />
     <Transition
       enter-active-class="transition-transform duration-75 ease-out"

package/src/molecules/list/ListHeaderCell.vue

@@ -7,7 +7,7 @@
     <span v-if="$slots.prefix" class="shrink-0">
       <slot name="prefix" />
     </span>
-    <span class="truncate"><slot /></span>
+    <span class="truncate leading-tighter"><slot /></span>
     <span v-if="$slots.suffix" class="shrink-0">
       <slot name="suffix" />
     </span>

package/src/molecules/list/ListHeaderCellSort.vue

@@ -16,7 +16,7 @@
       <button
         ref="button"
         type="button"
-        class="group inline-flex h-7 min-w-0 items-center gap-1 rounded-4 text-sm-medium text-ink-gray-5 transition-colors"
+        class="group inline-flex h-7 min-w-0 items-center gap-1 rounded-4 text-sm-medium leading-tighter text-ink-gray-5 transition-colors"
         @click="emit('click', $event)"
       >
         <!-- End-aligned: the glyph leads so the label stays flush with the
@@ -35,7 +35,7 @@
         <span v-if="$slots.prefix" class="shrink-0">
           <slot name="prefix" :direction="direction ?? null" />
         </span>
-        <span class="truncate"><slot /></span>
+        <span class="truncate leading-tighter"><slot /></span>
         <!-- A built-in arrow derived from `direction` by default, so the common
              case needs no glyph wiring; supply #sort-indicator to override. The cell
              owns the reveal: an inactive column's glyph shows on hover. -->

package/src/utils/useFileUpload.ts

@@ -83,7 +83,7 @@ export interface UploadState {
   result: UploadedFile | null
 }
 
-export interface UploadedFile {
+export type UploadedFile = {
   file_name: string
   file_size: number
   file_url: string

package/tailwind/plugin.js

@@ -239,6 +239,13 @@ export default plugin(
       fontSize: buildFontSize(),
       screens: screenTokens,
       extend: {
+        // `leading-tighter` pins text to 1.15. It is the opt-out for
+        // single-line chrome whose height must not move: buttons, badges,
+        // labels, table headers. It sits between Tailwind's `leading-none` (1)
+        // and `leading-tight` (1.25). Tailwind's `leading-tight` does not change.
+        lineHeight: {
+          tighter: '1.15',
+        },
         textColor: {
           ink: semanticColors.ink,
         },

package/tailwind/tokens/build.js

@@ -11,7 +11,8 @@
  * ships nothing, it changed six times in four months, and it does not say
  * what frappe-ui actually uses. The committed record is the output above, and
  * this file is where frappe-ui deliberately overrules the export —
- * RADIUS_OVERRIDE, FONT_WEIGHT_MAP, DROPPED_SIZES, DROPPED_CUSTOM_ELEVATIONS,
+ * RADIUS_OVERRIDE, FONT_WEIGHT_MAP, TEXT_LINE_HEIGHT_OVERRIDE, DROPPED_SIZES,
+ * DROPPED_CUSTOM_ELEVATIONS,
  * the hex→oklch conversion and the shadow layer reversal. Those are code-side
  * opinions, which is why they live in a tested Node script rather than in a
  * Figma plugin that no CI can run.
@@ -379,6 +380,14 @@ const pctToRatio = (v) => String(round(parseFloat(v) / 100, 4)) // "115%" -> "1.
 // letter-spacing % of font size === em. `paragraph/5xl` exports as "0.5px" by an
 // exporter bug (should be "0.5%"); parseFloat keeps the number and we treat it
 // as a percent regardless of unit, which yields the intended value either way.
+// The UI text styles, sizes 2xs to 4xl, export at 115%, which cramps
+// any text that wraps. frappe-ui ships them at 135%. Single-line chrome opts
+// back to 1.15 with `leading-tighter` (tailwind/plugin.js). The paragraph and
+// display styles export other values and are not touched. Keep the override
+// until the Figma text styles move to 135%.
+const TEXT_LINE_HEIGHT_OVERRIDE = { '115%': '135%' }
+export const textLineHeight = (v) =>
+  pctToRatio(TEXT_LINE_HEIGHT_OVERRIDE[v] ?? v)
 const lsToEm = (v) => `${round(parseFloat(v) / 100, 5)}em` // "2%" -> "0.02em"
 
 function round(n, places) {
@@ -448,7 +457,7 @@ function buildTypography() {
     fontSize[key] = [
       v.fontSize,
       {
-        lineHeight: pctToRatio(v.lineHeight),
+        lineHeight: textLineHeight(v.lineHeight),
         letterSpacing: lsToEm(v.letterSpacing),
         fontWeight: FONT_WEIGHT_MAP.regular,
       },

package/tailwind/tokens/typography.js

@@ -16,7 +16,7 @@ export default {
     "2xs": [
       "11px",
       {
-        "lineHeight": "1.15",
+        "lineHeight": "1.35",
         "letterSpacing": "0.01em",
         "fontWeight": 420
       }
@@ -24,7 +24,7 @@ export default {
     "xs": [
       "12px",
       {
-        "lineHeight": "1.15",
+        "lineHeight": "1.35",
         "letterSpacing": "0.02em",
         "fontWeight": 420
       }
@@ -32,7 +32,7 @@ export default {
     "sm": [
       "13px",
       {
-        "lineHeight": "1.15",
+        "lineHeight": "1.35",
         "letterSpacing": "0.02em",
         "fontWeight": 420
       }
@@ -40,7 +40,7 @@ export default {
     "base": [
       "14px",
       {
-        "lineHeight": "1.15",
+        "lineHeight": "1.35",
         "letterSpacing": "0.02em",
         "fontWeight": 420
       }
@@ -48,7 +48,7 @@ export default {
     "md": [
       "15px",
       {
-        "lineHeight": "1.15",
+        "lineHeight": "1.35",
         "letterSpacing": "0.02em",
         "fontWeight": 420
       }
@@ -56,7 +56,7 @@ export default {
     "lg": [
       "16px",
       {
-        "lineHeight": "1.15",
+        "lineHeight": "1.35",
         "letterSpacing": "0.02em",
         "fontWeight": 420
       }
@@ -64,7 +64,7 @@ export default {
     "xl": [
       "17px",
       {
-        "lineHeight": "1.15",
+        "lineHeight": "1.35",
         "letterSpacing": "0.02em",
         "fontWeight": 420
       }
@@ -72,7 +72,7 @@ export default {
     "2xl": [
       "18px",
       {
-        "lineHeight": "1.15",
+        "lineHeight": "1.35",
         "letterSpacing": "0.01em",
         "fontWeight": 420
       }
@@ -80,7 +80,7 @@ export default {
     "3xl": [
       "20px",
       {
-        "lineHeight": "1.15",
+        "lineHeight": "1.35",
         "letterSpacing": "0.005em",
         "fontWeight": 420
       }
@@ -88,7 +88,7 @@ export default {
     "4xl": [
       "24px",
       {
-        "lineHeight": "1.15",
+        "lineHeight": "1.35",
         "letterSpacing": "0.005em",
         "fontWeight": 420
       }

package/src/components/Sidebar/SidebarItemIcon.vue

@@ -1,25 +0,0 @@
-<template>
-  <!-- Icon fallback used when no #prefix slot is supplied: a lucide CSS class,
-       plain text, or a component. -->
-  <span
-    v-if="isLucideClass"
-    class="size-4 text-ink-gray-6"
-    :class="icon as string"
-    aria-hidden="true"
-  />
-  <span v-else-if="typeof icon === 'string'" class="size-4 text-ink-gray-6">
-    {{ icon }}
-  </span>
-  <component v-else-if="icon" :is="icon" class="size-4 text-ink-gray-6" />
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue'
-import type { Component } from 'vue'
-
-const props = defineProps<{ icon?: string | Component }>()
-
-const isLucideClass = computed(
-  () => typeof props.icon === 'string' && props.icon.startsWith('lucide-'),
-)
-</script>