@byyuurin/ui 0.5.0 → 0.5.2

package/dist/runtime/components/Table.vue

@@ -302,16 +302,16 @@ defineExpose({
     <tr
       :role="props.onSelect ? 'button' : void 0"
       :tabindex="props.onSelect ? 0 : void 0"
+      :data-selected="row.getIsSelected()"
+      :data-selectable="!!props.onSelect || !!props.onHover || !!props.onContextmenu"
+      :data-expanded="row.getIsExpanded()"
+      data-part="tr"
       :class="ui.tr({
   class: [
     props.ui?.tr,
     resolveValue(tableApi.options.meta?.class?.tr, row)
   ]
 })"
-      :data-selected="row.getIsSelected()"
-      :data-selectable="!!props.onSelect || !!props.onHover || !!props.onContextmenu"
-      :data-expanded="row.getIsExpanded()"
-      data-part="tr"
       :style="[resolveValue(tableApi.options.meta?.style?.tr, row), style]"
       @click="onRowSelect($event, row)"
       @pointerenter="onRowHover($event, row)"
@@ -323,6 +323,8 @@ defineExpose({
         :key="cell.id"
         :colspan="resolveValue(cell.column.columnDef.meta?.colspan?.td, cell)"
         :rowspan="resolveValue(cell.column.columnDef.meta?.rowspan?.td, cell)"
+        :data-pinned="cell.column.getIsPinned()"
+        data-part="td"
         :class="ui.td({
   class: [
     props.ui?.td,
@@ -330,8 +332,6 @@ defineExpose({
   ],
   pinned: !!cell.column.getIsPinned()
 })"
-        :data-pinned="cell.column.getIsPinned()"
-        data-part="td"
         :style="[
   getColumnStyles(cell.column),
   resolveValue(cell.column.columnDef.meta?.style?.td, cell)
@@ -343,23 +343,23 @@ defineExpose({
       </td>
     </tr>
 
-    <tr v-if="row.getIsExpanded()" :class="ui.tr({ class: props.ui?.tr })" data-part="tr">
-      <td :colspan="row.getAllCells().length" :class="ui.td({ class: props.ui?.td })" data-part="td">
+    <tr v-if="row.getIsExpanded()" data-part="tr" :class="ui.tr({ class: props.ui?.tr })">
+      <td :colspan="row.getAllCells().length" data-part="td" :class="ui.td({ class: props.ui?.td })">
         <slot name="expanded" :row="row"></slot>
       </td>
     </tr>
   </DefineRowTemplate>
 
   <DefineTableTemplate>
-    <table ref="tableRef" :class="ui.base({ class: props.ui?.base })" data-part="base">
-      <caption v-if="caption || !!slots.caption" :class="ui.caption({ class: [props.ui?.caption] })" data-part="caption">
+    <table ref="tableRef" data-part="base" :class="ui.base({ class: props.ui?.base })">
+      <caption v-if="caption || !!slots.caption" data-part="caption" :class="ui.caption({ class: [props.ui?.caption] })">
         <slot name="caption">
           {{ caption }}
         </slot>
       </caption>
 
-      <thead :class="ui.thead({ class: [props.ui?.thead] })" data-part="thead">
-        <tr v-for="headerGroup in tableApi.getHeaderGroups()" :key="headerGroup.id" :class="ui.tr({ class: [props.ui?.tr] })" data-part="tr">
+      <thead data-part="thead" :class="ui.thead({ class: [props.ui?.thead] })">
+        <tr v-for="headerGroup in tableApi.getHeaderGroups()" :key="headerGroup.id" data-part="tr" :class="ui.tr({ class: [props.ui?.tr] })">
           <th
             v-for="header in headerGroup.headers"
             :key="header.id"
@@ -367,6 +367,7 @@ defineExpose({
             :scope="header.colSpan > 1 ? 'colgroup' : 'col'"
             :colspan="header.colSpan > 1 ? header.colSpan : void 0"
             :rowspan="header.rowSpan > 1 ? header.rowSpan : void 0"
+            data-part="th"
             :class="ui.th({
   class: [
     props.ui?.th,
@@ -374,7 +375,6 @@ defineExpose({
   ],
   pinned: !!header.column.getIsPinned()
 })"
-            data-part="th"
             :style="[
   getColumnStyles(header.column),
   resolveValue(header.column.columnDef.meta?.style?.th, header)
@@ -386,10 +386,10 @@ defineExpose({
           </th>
         </tr>
 
-        <tr :class="ui.separator({ class: [props.ui?.separator] })" data-part="separator"></tr>
+        <tr data-part="separator" :class="ui.separator({ class: [props.ui?.separator] })"></tr>
       </thead>
 
-      <tbody :class="ui.tbody({ class: [props.ui?.tbody] })" data-part="tbody">
+      <tbody data-part="tbody" :class="ui.tbody({ class: [props.ui?.tbody] })">
         <slot name="body-top"></slot>
 
         <template v-if="rows.length">
@@ -411,13 +411,13 @@ defineExpose({
         </template>
 
         <tr v-else-if="props.loading && !!slots.loading">
-          <td :colspan="tableApi.getAllLeafColumns().length" :class="ui.loading({ class: props.ui?.loading })" data-part="loading">
+          <td :colspan="tableApi.getAllLeafColumns().length" data-part="loading" :class="ui.loading({ class: props.ui?.loading })">
             <slot name="loading"></slot>
           </td>
         </tr>
 
         <tr v-else>
-          <td :colspan="tableApi.getAllLeafColumns().length" :class="ui.empty({ class: props.ui?.empty })" data-part="empty">
+          <td :colspan="tableApi.getAllLeafColumns().length" data-part="empty" :class="ui.empty({ class: props.ui?.empty })">
             <slot name="empty">
               {{ props.empty || t("table.noData") }}
             </slot>
@@ -429,21 +429,22 @@ defineExpose({
 
       <tfoot
         v-if="hasFooter"
-        :class="ui.tfoot({ class: props.ui?.tfoot })"
         data-part="tfoot"
+        :class="ui.tfoot({ class: props.ui?.tfoot })"
         :style="virtualizer ? {
   transform: `translateY(${virtualizer.getTotalSize() - virtualizer.getVirtualItems().length * virtualizerProps.estimateSize}px)`
 } : void 0"
       >
-        <tr :class="ui.separator({ class: props.ui?.separator })" data-part="separator"></tr>
+        <tr data-part="separator" :class="ui.separator({ class: props.ui?.separator })"></tr>
 
-        <tr v-for="footerGroup in tableApi.getFooterGroups()" :key="footerGroup.id" :class="ui.tr({ class: props.ui?.tr })" data-part="tr">
+        <tr v-for="footerGroup in tableApi.getFooterGroups()" :key="footerGroup.id" data-part="tr" :class="ui.tr({ class: props.ui?.tr })">
           <th
             v-for="header in footerGroup.headers"
             :key="header.id"
             :data-pinned="header.column.getIsPinned()"
             :colspan="header.colSpan > 1 ? header.colSpan : void 0"
             :rowspan="header.rowSpan > 1 ? header.rowSpan : void 0"
+            data-part="th"
             :class="ui.th({
   class: [
     props.ui?.th,
@@ -451,7 +452,6 @@ defineExpose({
   ],
   pinned: !!header.column.getIsPinned()
 })"
-            data-part="th"
             :style="[
   getColumnStyles(header.column),
   resolveValue(header.column.columnDef.meta?.style?.th, header)
@@ -466,7 +466,7 @@ defineExpose({
     </table>
   </DefineTableTemplate>
 
-  <Primitive ref="rootRef" :as="props.as" v-bind="$attrs" :class="ui.root({ class: [props.ui?.root, props.class] })" data-part="root">
+  <Primitive ref="rootRef" :as="props.as" v-bind="$attrs" data-part="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
     <div v-if="virtualizer" :style="{ height: `${virtualizer.getTotalSize()}px` }">
       <ReuseTableTemplate />
     </div>

package/dist/runtime/components/Tabs.vue

@@ -49,11 +49,11 @@ defineExpose({
     :default-value="props.defaultValue"
     :orientation="props.orientation"
     :activation-mode="props.activationMode"
-    :class="ui.root({ class: [props.ui?.root, props.class] })"
     data-part="root"
+    :class="ui.root({ class: [props.ui?.root, props.class] })"
   >
-    <TabsList :class="ui.list({ class: props.ui?.list })" data-part="list">
-      <TabsIndicator :class="ui.indicator({ class: props.ui?.indicator })" data-part="indicator" />
+    <TabsList data-part="list" :class="ui.list({ class: props.ui?.list })">
+      <TabsIndicator data-part="indicator" :class="ui.indicator({ class: props.ui?.indicator })" />
 
       <slot name="list-leading">
       </slot>
@@ -64,26 +64,26 @@ defineExpose({
         :key="index"
         :value="item.value ?? String(index)"
         :disabled="item.disabled"
-        :class="ui.trigger({ class: [props.ui?.trigger, item.ui?.trigger] })"
         data-part="trigger"
+        :class="ui.trigger({ class: [props.ui?.trigger, item.ui?.trigger] })"
       >
         <slot name="leading" :item="item" :index="index" :ui="ui">
           <Icon
             v-if="item.icon"
             :name="item.icon"
-            :class="ui.leadingIcon({ class: [props.ui?.leadingIcon, item.ui?.leadingIcon] })"
             data-part="leadingIcon"
+            :class="ui.leadingIcon({ class: [props.ui?.leadingIcon, item.ui?.leadingIcon] })"
           />
           <Avatar
             v-else-if="item.avatar"
             :size="item.ui?.leadingAvatarSize || props.ui?.leadingAvatarSize || ui.leadingAvatarSize()"
             v-bind="item.avatar"
-            :class="ui.leadingAvatar({ class: [props.ui?.leadingAvatar, item.ui?.leadingAvatar] })"
             data-part="leadingAvatar"
+            :class="ui.leadingAvatar({ class: [props.ui?.leadingAvatar, item.ui?.leadingAvatar] })"
           />
         </slot>
 
-        <span v-if="get(item, props.labelKey) || !!slots.default" :class="ui.label({ class: [props.ui?.label, item.ui?.label] })" data-part="label">
+        <span v-if="get(item, props.labelKey) || !!slots.default" data-part="label" :class="ui.label({ class: [props.ui?.label, item.ui?.label] })">
           <slot :item="item" :index="index">{{ get(item, props.labelKey) }}</slot>
         </span>
 
@@ -94,8 +94,8 @@ defineExpose({
             variant="outline"
             :size="item.ui?.trailingBadgeSize || props.ui?.trailingBadgeSize || ui.trailingBadgeSize()"
             v-bind="typeof item.badge === 'string' || typeof item.badge === 'number' ? { label: item.badge } : item.badge"
-            :class="ui.trailingBadge({ class: [props.ui?.trailingBadge, item.ui?.trailingBadge] })"
             data-part="trailingBadge"
+            :class="ui.trailingBadge({ class: [props.ui?.trailingBadge, item.ui?.trailingBadge] })"
           />
         </slot>
       </TabsTrigger>
@@ -108,8 +108,8 @@ defineExpose({
         v-for="(item, index) of items"
         :key="index"
         :value="item.value ?? String(index)"
-        :class="ui.content({ class: [props.ui?.content, item.ui?.content] })"
         data-part="content"
+        :class="ui.content({ class: [props.ui?.content, item.ui?.content] })"
       >
         <slot :name="item.slot || 'content'" :item="item" :index="index" :ui="ui">
           {{ item.content }}

package/dist/runtime/components/Textarea.vue

@@ -125,21 +125,21 @@ defineExpose({
 </script>
 
 <template>
-  <Primitive :as="props.as" :class="ui.root({ class: [props.ui?.root, props.class] })" data-part="root">
-    <span v-if="isLeading || props.avatar || !!slots.leading" :class="ui.leading({ class: props.ui?.leading })" data-part="leading">
+  <Primitive :as="props.as" data-part="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <span v-if="isLeading || props.avatar || !!slots.leading" data-part="leading" :class="ui.leading({ class: props.ui?.leading })">
       <slot name="leading" :ui="ui">
         <Icon
           v-if="isLeading && leadingIconName"
           :name="leadingIconName"
-          :class="ui.leadingIcon({ class: props.ui?.leadingIcon })"
           data-part="leadingIcon"
+          :class="ui.leadingIcon({ class: props.ui?.leadingIcon })"
         />
         <Avatar
           v-else-if="props.avatar"
           :size="props.ui?.leadingAvatarSize || ui.leadingAvatarSize()"
           v-bind="props.avatar"
-          :class="ui.leadingAvatar({ class: props.ui?.leadingAvatar })"
           data-part="leadingAvatar"
+          :class="ui.leadingAvatar({ class: props.ui?.leadingAvatar })"
         />
       </slot>
     </span>
@@ -151,8 +151,8 @@ defineExpose({
       :placeholder="props.placeholder"
       :required="props.required"
       v-bind="{ id, name, disabled, ...$attrs, ...ariaAttrs }"
-      :class="ui.base({ class: props.ui?.base })"
       data-part="base"
+      :class="ui.base({ class: props.ui?.base })"
       @input="onInput"
       @blur="onBlur"
       @change="onChange"
@@ -161,13 +161,13 @@ defineExpose({
 
     <slot :ui="ui"></slot>
 
-    <span v-if="isTrailing || !!slots.trailing" :class="ui.trailing({ class: props.ui?.trailing })" data-part="trailing">
+    <span v-if="isTrailing || !!slots.trailing" data-part="trailing" :class="ui.trailing({ class: props.ui?.trailing })">
       <slot name="trailing" :ui="ui">
         <Icon
           v-if="trailingIconName"
           :name="trailingIconName"
-          :class="ui.trailingIcon({ class: props.ui?.trailingIcon })"
           data-part="trailingIcon"
+          :class="ui.trailingIcon({ class: props.ui?.trailingIcon })"
         />
       </slot>
     </span>

package/dist/runtime/components/Timeline.vue

@@ -50,15 +50,15 @@ const ui = computed(() => {
 </script>
 
 <template>
-  <Primitive :as="props.as" :data-orientation="props.orientation" :class="ui.root({ class: [props.ui?.root, props.class] })" data-part="root">
+  <Primitive :as="props.as" :data-orientation="props.orientation" data-part="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
     <div
       v-for="(item, index) in props.items"
       :key="item.value ?? index"
-      :class="ui.item({ class: [props.ui?.item, item.ui?.item, item.class] })"
       data-part="item"
+      :class="ui.item({ class: [props.ui?.item, item.ui?.item, item.class] })"
       :data-state="getItemState(index)"
     >
-      <div :class="ui.container({ class: [props.ui?.container, item.ui?.container] })" data-part="container">
+      <div data-part="container" :class="ui.container({ class: [props.ui?.container, item.ui?.container] })">
         <Avatar
           :size="props.size"
           :icon="item.icon"
@@ -67,8 +67,8 @@ const ui = computed(() => {
   icon: ui.indicatorIcon({ class: props.ui?.indicatorIcon }),
   fallback: ui.indicatorFallback({ class: props.ui?.indicatorFallback })
 }"
-          :class="ui.indicator({ class: [props.ui?.indicator, item.ui?.indicator] })"
           data-part="indicator"
+          :class="ui.indicator({ class: [props.ui?.indicator, item.ui?.indicator] })"
         >
           <slot :name="item.slot ? `${item.slot}-indicator` : 'indicator'" :item="item"></slot>
         </Avatar>
@@ -76,24 +76,24 @@ const ui = computed(() => {
         <Separator
           v-if="index < items.length - 1"
           :orientation="props.orientation"
-          :class="ui.separator({ class: [props.ui?.separator, item.ui?.separator] })"
           data-part="separator"
+          :class="ui.separator({ class: [props.ui?.separator, item.ui?.separator] })"
         />
       </div>
 
-      <div :class="ui.wrapper({ class: [props.ui?.wrapper, item.ui?.wrapper] })" data-part="wrapper">
+      <div data-part="wrapper" :class="ui.wrapper({ class: [props.ui?.wrapper, item.ui?.wrapper] })">
         <slot :name="item.slot ? `${item.slot}-wrapper` : 'wrapper'" :item="item">
-          <div v-if="item.date || !!slots[item.slot ? `${item.slot}-date` : 'date']" :class="ui.date({ class: [props.ui?.date, item.ui?.date] })" data-part="date">
+          <div v-if="item.date || !!slots[item.slot ? `${item.slot}-date` : 'date']" data-part="date" :class="ui.date({ class: [props.ui?.date, item.ui?.date] })">
             <slot :name="item.slot ? `${item.slot}-date` : 'date'" :item="item">
               {{ item.date }}
             </slot>
           </div>
-          <div v-if="item.title || !!slots[item.slot ? `${item.slot}-title` : 'title']" :class="ui.title({ class: [props.ui?.title, item.ui?.title] })" data-part="title">
+          <div v-if="item.title || !!slots[item.slot ? `${item.slot}-title` : 'title']" data-part="title" :class="ui.title({ class: [props.ui?.title, item.ui?.title] })">
             <slot :name="item.slot ? `${item.slot}-title` : 'title'" :item="item">
               {{ item.title }}
             </slot>
           </div>
-          <div v-if="item.description || !!slots[item.slot ? `${item.slot}-description` : 'description']" :class="ui.description({ class: [props.ui?.description, item.ui?.description] })" data-part="description">
+          <div v-if="item.description || !!slots[item.slot ? `${item.slot}-description` : 'description']" data-part="description" :class="ui.description({ class: [props.ui?.description, item.ui?.description] })">
             <slot :name="item.slot ? `${item.slot}-description` : 'description'" :item="item">
               {{ item.description }}
             </slot>

package/dist/runtime/components/Toast.vue

@@ -64,9 +64,9 @@ defineExpose({
     ref="el"
     v-slot="{ remaining, duration, open }"
     v-bind="rootProps"
-    :class="ui.root({ class: [props.ui?.root, props.class] })"
     :data-orientation="props.orientation"
     data-part="root"
+    :class="ui.root({ class: [props.ui?.root, props.class] })"
     :style="{ '--height': height }"
   >
     <slot name="leading" :ui="ui">
@@ -74,19 +74,19 @@ defineExpose({
         v-if="props.avatar"
         :size="props.ui?.avatarSize || ui.avatarSize()"
         v-bind="props.avatar"
-        :class="ui.avatar({ class: props.ui?.avatar })"
         data-part="avatar"
+        :class="ui.avatar({ class: props.ui?.avatar })"
       />
       <Icon
         v-else-if="props.icon"
         :name="props.icon"
-        :class="ui.icon({ class: props.ui?.icon })"
         data-part="icon"
+        :class="ui.icon({ class: props.ui?.icon })"
       />
     </slot>
 
-    <div :class="ui.wrapper({ class: props.ui?.wrapper })" data-part="wrapper">
-      <ToastTitle v-if="props.title || !!slots.title" :class="ui.title({ class: props.ui?.title })" data-part="title">
+    <div data-part="wrapper" :class="ui.wrapper({ class: props.ui?.wrapper })">
+      <ToastTitle v-if="props.title || !!slots.title" data-part="title" :class="ui.title({ class: props.ui?.title })">
         <slot name="title">
           <component :is="props.title()" v-if="typeof props.title === 'function'" />
           <component :is="props.title" v-else-if="typeof props.title === 'object'" />
@@ -95,7 +95,7 @@ defineExpose({
           </template>
         </slot>
       </ToastTitle>
-      <ToastDescription v-if="props.description || !!slots.description" :class="ui.description({ class: props.ui?.description })" data-part="description">
+      <ToastDescription v-if="props.description || !!slots.description" data-part="description" :class="ui.description({ class: props.ui?.description })">
         <slot name="description">
           <component :is="props.description()" v-if="typeof props.description === 'function'" />
           <component :is="props.description" v-else-if="typeof props.description === 'object'" />
@@ -105,7 +105,7 @@ defineExpose({
         </slot>
       </ToastDescription>
 
-      <div v-if="props.orientation === 'vertical' && (props.actions?.length || slots.actions)" :class="ui.actions({ class: props.ui?.actions })" data-part="actions">
+      <div v-if="props.orientation === 'vertical' && (props.actions?.length || slots.actions)" data-part="actions" :class="ui.actions({ class: props.ui?.actions })">
         <slot name="actions">
           <ToastAction v-for="(action, index) in props.actions" :key="index" :alt-text="action.label || 'Action'" as-child @click.stop>
             <Button size="xs" :color="props.color" v-bind="action" />
@@ -116,8 +116,8 @@ defineExpose({
 
     <div
       v-if="props.orientation === 'horizontal' && (props.actions?.length || !!slots.actions) || props.close"
-      :class="ui.actions({ class: props.ui?.actions })"
       data-part="actions"
+      :class="ui.actions({ class: props.ui?.actions })"
     >
       <template v-if="props.orientation === 'horizontal'">
         <slot name="actions">
@@ -136,8 +136,8 @@ defineExpose({
             variant="link"
             :aria-label="t('toast.close')"
             v-bind="typeof props.close === 'object' ? props.close : {}"
-            :class="ui.close({ class: props.ui?.close })"
             data-part="close"
+            :class="ui.close({ class: props.ui?.close })"
             @click.stop
           />
         </slot>
@@ -150,6 +150,7 @@ defineExpose({
       :color="props.color"
       v-bind="typeof props.progress === 'object' ? props.progress : {}"
       size="sm"
+      data-part="progress"
       :class="ui.progress({ class: props.ui?.progress })"
     />
   </ToastRoot>

package/dist/runtime/components/ToastProvider.vue

@@ -88,8 +88,8 @@ function getOffset(index) {
   '--translate': expanded ? 'calc(var(--offset) * var(--translate-factor))' : 'calc(var(--before) * var(--gap))',
   '--transform': 'translateY(var(--translate)) scale(var(--scale))'
 }"
-      :class="ui.base({ class: props.ui?.base })"
       data-part="base"
+      :class="ui.base({ class: props.ui?.base })"
       @update:open="onUpdateOpen($event, toast.id)"
       @click="toast.onClick && toast.onClick(toast)"
     />
@@ -97,8 +97,8 @@ function getOffset(index) {
     <ToastPortal v-bind="portalProps">
       <ToastViewport
         :data-expanded="expanded"
-        :class="ui.viewport({ class: [props.ui?.viewport, props.class] })"
         data-part="viewport"
+        :class="ui.viewport({ class: [props.ui?.viewport, props.class] })"
         :style="{
   '--scale-factor': '0.05',
   '--translate-factor': position?.startsWith('top') ? '1px' : '-1px',

package/dist/runtime/components/Tooltip.vue

@@ -48,11 +48,11 @@ const ui = computed(() => {
     </TooltipTrigger>
 
     <TooltipPortal v-bind="portalProps">
-      <TooltipContent v-bind="contentProps" :class="ui.content({ class: [props.ui?.content, !slots.default && props.class] })" data-part="content">
+      <TooltipContent v-bind="contentProps" data-part="content" :class="ui.content({ class: [props.ui?.content, !slots.default && props.class] })">
         <slot name="content" :ui="ui">
-          <span v-if="props.text" :class="ui.text({ class: props.ui?.text })" data-part="text">{{ props.text }}</span>
+          <span v-if="props.text" data-part="text" :class="ui.text({ class: props.ui?.text })">{{ props.text }}</span>
 
-          <span v-if="props.kbds?.length" :class="ui.kbds({ class: props.ui?.kbds })" data-part="kbds">
+          <span v-if="props.kbds?.length" data-part="kbds" :class="ui.kbds({ class: props.ui?.kbds })">
             <Kbd
               v-for="(kbd, index) in props.kbds"
               :key="index"
@@ -62,7 +62,7 @@ const ui = computed(() => {
           </span>
         </slot>
 
-        <TooltipArrow v-if="props.arrow" v-bind="arrowProps" :class="ui.arrow({ class: props.ui?.arrow })" data-part="arrow" />
+        <TooltipArrow v-if="props.arrow" v-bind="arrowProps" data-part="arrow" :class="ui.arrow({ class: props.ui?.arrow })" />
       </TooltipContent>
     </TooltipPortal>
   </TooltipRoot>

package/dist/runtime/components/Tree.vue

@@ -110,8 +110,8 @@ function onUpdate(value) {
   <DefineItemTemplate v-slot="{ item, index, level }">
     <li
       role="presentation"
-      :class="props.nested && level > 1 ? ui.itemWithChildren({ class: [props.ui?.itemWithChildren, item.ui?.itemWithChildren] }) : ui.item({ class: [props.ui?.item, item.ui?.item] })"
       :data-part="props.nested && level > 1 ? 'itemWithChildren' : 'item'"
+      :class="props.nested && level > 1 ? ui.itemWithChildren({ class: [props.ui?.itemWithChildren, item.ui?.itemWithChildren] }) : ui.item({ class: [props.ui?.item, item.ui?.item] })"
     >
       <TreeItem
         v-slot="{ isExpanded, isSelected, isIndeterminate, handleSelect, handleToggle }"
@@ -130,8 +130,8 @@ function onUpdate(value) {
             :is="as.link"
             :type="as.link === 'button' ? 'button' : void 0"
             :disabled="item.disabled || props.disabled"
-            :class="ui.link({ class: [props.ui?.link, item.ui?.link, item.class], selected: isSelected, disabled: item.disabled || props.disabled })"
             data-part="link"
+            :class="ui.link({ class: [props.ui?.link, item.ui?.link, item.class], selected: isSelected, disabled: item.disabled || props.disabled })"
             :style="!props.nested && level > 1 ? { paddingLeft: flattenedPaddingFormula(level) } : void 0"
           >
             <slot
@@ -147,18 +147,18 @@ function onUpdate(value) {
                 <Icon
                   v-if="item.icon"
                   :name="item.icon"
-                  :class="ui.linkLeadingIcon({ class: [props.ui?.linkLeadingIcon, item.ui?.linkLeadingIcon] })"
                   data-part="linkLeadingIcon"
+                  :class="ui.linkLeadingIcon({ class: [props.ui?.linkLeadingIcon, item.ui?.linkLeadingIcon] })"
                 />
                 <Icon
                   v-else-if="item.children?.length"
                   :name="isExpanded ? props.expandedIcon ?? appConfig.ui.icons.folderOpen : props.collapsedIcon ?? appConfig.ui.icons.folder"
-                  :class="ui.linkLeadingIcon({ class: [props.ui?.linkLeadingIcon, item.ui?.linkLeadingIcon] })"
                   data-part="linkLeadingIcon"
+                  :class="ui.linkLeadingIcon({ class: [props.ui?.linkLeadingIcon, item.ui?.linkLeadingIcon] })"
                 />
               </slot>
 
-              <span v-if="getItemLabel(item) || slots[`${item.slot || 'item'}-label`]" :class="ui.linkLabel({ class: [props.ui?.linkLabel, item.ui?.linkLabel] })" data-part="linkLabel">
+              <span v-if="getItemLabel(item) || slots[`${item.slot || 'item'}-label`]" data-part="linkLabel" :class="ui.linkLabel({ class: [props.ui?.linkLabel, item.ui?.linkLabel] })">
                 <slot
                   :name="`${item.slot || 'item'}-label`"
                   v-bind="{ index, level, expanded: isExpanded, selected: isSelected, indeterminate: isIndeterminate, handleSelect, handleToggle, ui }"
@@ -170,8 +170,8 @@ function onUpdate(value) {
 
               <span
                 v-if="item.trailingIcon || item.children?.length || slots[`${item.slot || 'item'}-trailing`]"
-                :class="ui.linkTrailing({ class: [props.ui?.linkTrailing, item.ui?.linkTrailing] })"
                 data-part="linkTrailing"
+                :class="ui.linkTrailing({ class: [props.ui?.linkTrailing, item.ui?.linkTrailing] })"
               >
                 <slot
                   :name="`${item.slot || 'item'}-trailing`"
@@ -181,14 +181,14 @@ function onUpdate(value) {
                   <Icon
                     v-if="item.trailingIcon"
                     :name="item.trailingIcon"
-                    :class="ui.linkTrailingIcon({ class: [props.trailingIcon, item.ui?.linkTrailingIcon] })"
                     data-part="linkTrailingIcon"
+                    :class="ui.linkTrailingIcon({ class: [props.trailingIcon, item.ui?.linkTrailingIcon] })"
                   />
                   <Icon
                     v-else-if="item.children?.length"
                     :name="props.trailingIcon ?? appConfig.ui.icons.chevronDown"
-                    :class="ui.linkTrailingIcon({ class: [props.ui?.linkTrailingIcon, item.ui?.linkTrailingIcon] })"
                     data-part="linkTrailingIcon"
+                    :class="ui.linkTrailingIcon({ class: [props.ui?.linkTrailingIcon, item.ui?.linkTrailingIcon] })"
                   />
                 </slot>
               </span>
@@ -199,8 +199,8 @@ function onUpdate(value) {
         <ul
           v-if="props.nested && item.children?.length && isExpanded"
           role="group"
-          :class="ui.listWithChildren({ class: [props.ui?.listWithChildren, item.ui?.listWithChildren] })"
           data-part="listWithChildren"
+          :class="ui.listWithChildren({ class: [props.ui?.listWithChildren, item.ui?.listWithChildren] })"
         >
           <ReuseTreeTemplate :items="item.children" :level="level + 1" />
         </ul>
@@ -223,8 +223,8 @@ function onUpdate(value) {
     :default-expanded="defaultExpanded"
     :selection-behavior="props.selectionBehavior"
     :multiple="props.multiple"
-    :class="ui.root({ class: [props.ui?.root, props.class] })"
     data-part="root"
+    :class="ui.root({ class: [props.ui?.root, props.class] })"
     @update:model-value="onUpdate"
   >
     <template v-if="!props.nested">

package/dist/runtime/composables/defineShortcuts.js

@@ -150,7 +150,7 @@ export function defineShortcuts(config, options = {}) {
         continue;
       if (e.ctrlKey !== shortcut.ctrlKey)
         continue;
-      if ((alphabetKey || shiftableKey) && e.shiftKey !== shortcut.shiftKey)
+      if ((alphabetKey || shiftableKey || shortcut.shiftKey || e.shiftKey) && e.shiftKey !== shortcut.shiftKey)
         continue;
       if (shortcut.enabled) {
         e.preventDefault();

package/dist/runtime/composables/useOverlay.d.ts

@@ -1,5 +1,6 @@
 import type { Component } from 'vue';
 import type { ComponentEmit, ComponentProps } from 'vue-component-type-helpers';
+type CloseEventArgTypeSimple<T> = T extends (event: 'close', arg_0: infer Arg, ...args: any[]) => void ? Arg : never;
 /**
  * This is a workaround for a design limitation in TypeScript.
  *
@@ -9,7 +10,7 @@ import type { ComponentEmit, ComponentProps } from 'vue-component-type-helpers';
  *
  * @see https://github.com/microsoft/TypeScript/issues/32164
  */
-type CloseEventArgType<T> = T extends {
+type CloseEventArgTypeComplex<T> = T extends {
     (event: 'close', arg_0: infer Arg, ...args: any[]): void;
     (...args: any[]): void;
     (...args: any[]): void;
@@ -28,6 +29,7 @@ type CloseEventArgType<T> = T extends {
     (...args: any[]): void;
     (...args: any[]): void;
 } ? Arg : never;
+type CloseEventArgType<T> = CloseEventArgTypeSimple<T> | CloseEventArgTypeComplex<T>;
 export interface OverlayOptions<ComponentProps = Record<string, any>> {
     defaultOpen?: boolean;
     props?: ComponentProps;