@byyuurin/ui 0.5.1 → 0.5.2

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;

package/dist/shared/{ui.RIHx5Yhe.mjs → ui.B6u-xvto.mjs}

@@ -5,12 +5,12 @@ import { loadConfig } from '@unocss/config';
 import { genExport } from 'knitwork';
 import { normalize } from 'pathe';
 import { kebabCase } from 'scule';
-import { n as neutralColors } from './ui.DYMXCXO6.mjs';
+import { n as neutralColors, a as applyDefaultVariants } from './ui.Dy7aH7sf.mjs';
 import { ct } from '@byyuurin/ui-kit';
 import { defu } from 'defu';
 
 const name = "@byyuurin/ui";
-const version = "0.5.1";
+const version = "0.5.2";
 
 const accordion = ct({
   parts: {
@@ -1208,7 +1208,7 @@ const contextMenu = (options) => ct({
     group: "p-1 isolate",
     label: "w-full flex items-center font-semibold text-highlighted",
     separator: "-mx-1 my-1 h-px bg-border",
-    item: "group relative w-full flex items-start select-none outline-none before:content-empty before:absolute before:z-[-1] before:inset-px before:rounded-md data-[disabled]:cursor-not-allowed data-[disabled]:opacity-75",
+    item: "group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-[disabled]:cursor-not-allowed data-[disabled]:opacity-75",
     itemLeadingIcon: "shrink-0",
     itemLeadingAvatar: "shrink-0",
     itemLeadingAvatarSize: "",
@@ -1463,7 +1463,7 @@ const dropdownMenu = (options) => ct({
     group: "p-1 isolate",
     label: "w-full flex items-center font-semibold text-highlighted",
     separator: "-mx-1 my-1 h-px bg-border",
-    item: "group relative w-full flex items-start select-none outline-none before:content-empty before:absolute before:z-[-1] before:inset-px before:rounded-md data-[disabled]:cursor-not-allowed data-[disabled]:opacity-75",
+    item: "group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-[disabled]:cursor-not-allowed data-[disabled]:opacity-75",
     itemLeadingIcon: "shrink-0",
     itemLeadingAvatar: "shrink-0",
     itemLeadingAvatarSize: "",
@@ -2347,7 +2347,7 @@ const marquee = ct({
     },
     overlay: {
       true: {
-        root: "before:absolute before:pointer-events-none before:content-empty before:z-2 before:from-[--ui-bg] before:to-transparent after:absolute after:pointer-events-none after:content-empty after:z-2 after:from-[--ui-bg] after:to-transparent"
+        root: "before:absolute before:pointer-events-none before:z-2 before:from-default before:to-transparent after:absolute after:pointer-events-none after:z-2 after:from-default after:to-transparent"
       }
     }
   },
@@ -2418,7 +2418,7 @@ const navigationMenu = (options) => ct({
     list: "isolate min-w-0",
     label: "w-full flex items-center gap-1.5 font-semibold text-xs/5 text-highlighted px-2.5 py-1.5",
     item: "min-w-0",
-    link: "group relative w-full flex items-center gap-1.5 font-medium text-sm before:content-empty before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2",
+    link: "group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2",
     linkLeadingIcon: "shrink-0 size-5",
     linkLeadingAvatar: "shrink-0",
     linkLeadingAvatarSize: "2xs",
@@ -2431,7 +2431,7 @@ const navigationMenu = (options) => ct({
     childList: "isolate",
     childLabel: "text-xs text-highlighted",
     childItem: "",
-    childLink: "group relative size-full flex items-start text-start text-sm before:content-empty before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2",
+    childLink: "group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2",
     childLinkWrapper: "min-w-0",
     childLinkIcon: "size-5 shrink-0",
     childLinkLabel: "truncate",
@@ -2563,7 +2563,7 @@ const navigationMenu = (options) => ct({
       highlight: true,
       class: {
         link: [
-          "after:content-empty after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full",
+          "after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full",
           options.theme.transitions && "after:transition-colors"
         ]
       }
@@ -2574,7 +2574,7 @@ const navigationMenu = (options) => ct({
       level: true,
       class: {
         link: [
-          "after:content-empty after:absolute after:-start-1.5 after:inset-y-0.5 after:block after:w-px after:rounded-full",
+          "after:absolute after:-start-1.5 after:inset-y-0.5 after:block after:w-px after:rounded-full",
           options.theme.transitions && "after:transition-colors"
         ]
       }
@@ -3253,7 +3253,7 @@ const scrollArea = ct({
     thumb: [
       "relative flex-1 bg-[--ui-border-accented] opacity-80 rounded cursor-pointer transition-colors",
       "hover:bg-[--ui-text-dimmed]",
-      "before:content-empty before:absolute before:top-1/2 before:left-1/2 before:-translate-x-1/2 before:-translate-y-1/2 before:w-full before:h-full before:min-w-10 before:min-h-10 "
+      "before:absolute before:top-1/2 before:left-1/2 before:-translate-x-1/2 before:-translate-y-1/2 before:w-full before:h-full before:min-w-10 before:min-h-10 "
     ],
     corner: ""
   }
@@ -3286,7 +3286,7 @@ const select = (options) => {
       label: "font-semibold text-highlighted",
       separator: "-mx-1 my-1 h-px bg-border",
       item: [
-        "group relative w-full flex items-start select-none outline-none before:content-empty before:absolute before:z-[-1] before:inset-px before:rounded-md cursor-pointer data-[disabled]:cursor-not-allowed data-[disabled]:opacity-75 text-default data-[highlighted]:not-[[data-disabled]]:text-highlighted data-[highlighted]:not-[[data-disabled]]:before:bg-elevated/50",
+        "group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md cursor-pointer data-[disabled]:cursor-not-allowed data-[disabled]:opacity-75 text-default data-[highlighted]:not-[[data-disabled]]:text-highlighted data-[highlighted]:not-[[data-disabled]]:before:bg-elevated/50",
         options.theme.transitions && "transition-colors before:transition-colors"
       ],
       itemLeadingIcon: [
@@ -3909,7 +3909,7 @@ const table = (options) => ct({
     },
     loading: {
       true: {
-        thead: "after:content-empty after:absolute after:z-1 after:h-px"
+        thead: "after:absolute after:z-1 after:h-px"
       }
     },
     loadingAnimation: {
@@ -4692,7 +4692,8 @@ function getTemplates(options, uiConfig, nuxt) {
         write: true,
         getContents: () => {
           const template = theme2[component];
-          const result = typeof template === "function" ? template(options) : template;
+          let result = typeof template === "function" ? template(options) : template;
+          result = applyDefaultVariants(result, options.theme?.defaultVariants);
           const json = JSON.stringify(result, null, 2);
           return [
             `// @unocss-include
@@ -4771,16 +4772,15 @@ export const { merge: unoMerge } = await createUnoMerge(mergeConfigs([
   templates.push({
     filename: "types/ui.d.ts",
     getContents() {
-      const appIcon = Object.keys(uiConfig.icons ?? {}).map((s) => `'${s}'`).join(" | ");
-      const appNeutralColor = neutralColors.map((s) => `'${s}'`).join(" | ");
+      const union = (values) => values.map((s) => `'${s}'`).join(" | ");
       return `import * as ui from '#build/ui'
 import type { UIConfig } from '@byyuurin/ui'
 import type { colors } from '@unocss/preset-wind4/colors'
 
-type NeutralColor = ${appNeutralColor}
+type NeutralColor = ${union(neutralColors)}
 type Color = keyof Omit<typeof colors, NeutralColor | 'black' | 'white'> | (string & {})
 
-type AppConfigIcons = Record<${appIcon} | (string & {}), string>
+type AppConfigIcons = Record<${union(Object.keys(uiConfig.icons ?? {}))} | (string & {}), string>
 
 export type AppConfigUI = {
   colors?: {

package/dist/shared/{ui.DYMXCXO6.mjs → ui.Dy7aH7sf.mjs}

@@ -20,7 +20,7 @@ const icons = {
   upload: "i-lucide-upload"
 };
 
-function getDefaultUIConfig(colors) {
+function getDefaultConfig(theme) {
   return {
     colors: pick({
       primary: "orange",
@@ -30,7 +30,7 @@ function getDefaultUIConfig(colors) {
       warning: "yellow",
       error: "red",
       neutral: "stone"
-    }, [...colors || [], "neutral"]),
+    }, [...theme?.colors || [], "neutral"]),
     icons
   };
 }
@@ -47,9 +47,15 @@ const defaultColors = ["primary", "secondary", "success", "info", "warning", "er
 function resolveColors(colors) {
   return colors?.length ? [.../* @__PURE__ */ new Set(["primary", ...colors])] : [...defaultColors];
 }
-function pickColorNames(colors) {
-  return colors;
+const neutralColors = ["slate", "gray", "zinc", "neutral", "stone", "light", "dark"];
+function applyDefaultVariants(result, defaultVariants) {
+  if (!result || !defaultVariants)
+    return result;
+  if (defaultVariants.color && result.defaultVariants?.color && result.defaultVariants.color === "primary")
+    result.defaultVariants.color = defaultVariants.color;
+  if (defaultVariants.size && result.defaultVariants?.size && result.defaultVariants.size === "md")
+    result.defaultVariants.size = defaultVariants.size;
+  return result;
 }
-const neutralColors = pickColorNames(["slate", "gray", "zinc", "neutral", "stone", "light", "dark"]);
 
-export { defaultOptions as d, getDefaultUIConfig as g, neutralColors as n, resolveColors as r };
+export { applyDefaultVariants as a, defaultOptions as d, getDefaultConfig as g, neutralColors as n, resolveColors as r };

package/dist/unocss.d.mts

@@ -1,12 +1,30 @@
-import { Preset } from '@unocss/core';
+import { Postprocessor, Preset } from '@unocss/core';
 import { Theme } from '@unocss/preset-wind4/theme';
 import { M as ModuleOptions } from './shared/ui.IulR-OYx.mjs';
 import '@nuxt/schema';
 import '@unocss/preset-wind4/colors';
 import '../dist/runtime/types/index.js';
 
+/**
+ * Normalize pseudo-element (`::before` / `::after`) content behavior to align with TailwindCSS.
+ *
+ * In TailwindCSS, all `before:*` and `after:*` variants implicitly define `content`,
+ * so pseudo-elements are always rendered without requiring explicit
+ * `before:content-empty` or `after:content-empty`.
+ *
+ * UnoCSS requires `content` to be explicitly defined, which can cause styles
+ * to silently break when migrating from TailwindCSS.
+ *
+ * This postprocessor normalizes the behavior by:
+ * - Replacing `content: ""` with a CSS variable reference
+ * - Injecting a default `content` definition for all pseudo-element variants
+ *
+ * This ensures consistent rendering of pseudo-elements and prevents migration
+ * issues caused by missing `content` declarations.
+ */
+declare const normalizePseudoElementContent: Postprocessor;
 type PresetOptions = Pick<(ModuleOptions['theme'] & {}), 'colors'>;
 declare function createUnoPreset(options?: PresetOptions): () => Preset<Theme>;
 
-export { createUnoPreset };
+export { createUnoPreset, normalizePseudoElementContent };
 export type { PresetOptions };

package/dist/unocss.mjs

@@ -1,8 +1,24 @@
 import { colors } from '@unocss/preset-wind4/colors';
 import { parseColor } from '@unocss/preset-wind4/utils';
-import { r as resolveColors } from './shared/ui.DYMXCXO6.mjs';
+import { r as resolveColors } from './shared/ui.Dy7aH7sf.mjs';
 import '../dist/runtime/utils/index.js';
 
+const normalizePseudoElementContent = (util) => {
+  if (util.layer === "properties")
+    return;
+  util.entries.forEach((i) => {
+    const CONTENT_EMPTY = '""';
+    if (i[0] === "content" && i[1] === CONTENT_EMPTY) {
+      i[1] = "var(--un-content)";
+      util.entries.unshift(["--un-content", CONTENT_EMPTY]);
+    }
+  });
+  if (!/(?:before|after)(?:\\:|-).+/.test(util.selector))
+    return;
+  if (util.entries.some((i) => i[0] === "content" || i[0] === "--un-content"))
+    return;
+  util.entries.unshift(["content", "var(--un-content)"]);
+};
 function createUnoPreset(options = {}) {
   const themeShades = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
   const colors$1 = Object.fromEntries(resolveColors(options?.colors).map((color) => {
@@ -85,6 +101,10 @@ function createUnoPreset(options = {}) {
           const result = `${t}-[--ui-${t}-${parsed.name}]/${parsed.opacity ?? 100}`.replace("-default", "").replace("/100", "").replace(/\[--ui-(?:border-[rltbsexy]|border|divide|outline|ring-offset|ring|stroke|fill)(-.+)?\]/, "[--ui-border$1]").replace(/(?:bg-(border)|border-(bg))/, "$1$2");
           return result;
         }
+      ],
+      [
+        /^(?:from|via|to|stops)-(default(?:\/(\d+|\[--.+\]))?)$/,
+        ([matched]) => matched.replace("default", "[--ui-bg]")
       ]
     ],
     safelist: Object.keys(keyframes).map((s) => `keyframes-${s}`),
@@ -147,9 +167,12 @@ function createUnoPreset(options = {}) {
 }`;
         }
       }
+    ],
+    postprocess: [
+      normalizePseudoElementContent
     ]
   };
   return () => preset;
 }
 
-export { createUnoPreset };
+export { createUnoPreset, normalizePseudoElementContent };

package/dist/unplugin.mjs

@@ -2,8 +2,8 @@ import { fileURLToPath } from 'node:url';
 import { defu } from 'defu';
 import { join, normalize } from 'pathe';
 import { createUnplugin } from 'unplugin';
-import { g as getTemplates, n as name } from './shared/ui.RIHx5Yhe.mjs';
-import { d as defaultOptions, r as resolveColors, g as getDefaultUIConfig } from './shared/ui.DYMXCXO6.mjs';
+import { g as getTemplates, n as name } from './shared/ui.B6u-xvto.mjs';
+import { d as defaultOptions, r as resolveColors, g as getDefaultConfig } from './shared/ui.Dy7aH7sf.mjs';
 import AutoImport from 'unplugin-auto-import';
 import { globSync } from 'tinyglobby';
 import AutoImportComponents from 'unplugin-vue-components';
@@ -280,7 +280,7 @@ const unplugin = createUnplugin((userOptions = {}, meta) => {
       ui: options.ui,
       colorMode: options.colorMode
     },
-    { ui: getDefaultUIConfig(options.theme.colors) }
+    { ui: getDefaultConfig(options.theme) }
   );
   return [
     NuxtEnvironmentPlugin(options),