@aleph-alpha/ui-library 1.11.0 → 1.13.0

package/src/{primitives → components}/UiTooltip/UiTooltip.stories.ts

@@ -1,10 +1,10 @@
 import type { Meta, StoryObj } from '@storybook/vue3-vite';
 import UiTooltip from './UiTooltip.vue';
-import { UiButton } from '@/primitives/UiButton';
-import { UiIcon } from '@/primitives/UiIcon';
+import { UiButton } from '@/components/UiButton';
+import { UiIcon } from '@/components/UiIcon';
 
 const meta: Meta<typeof UiTooltip> = {
-  title: 'Primitives/UiTooltip',
+  title: 'Components/UiTooltip',
   component: UiTooltip,
   tags: ['autodocs'],
   argTypes: {
@@ -72,6 +72,10 @@ const defaultTemplate = `
   </div>
 `;
 
+/**
+ * Default tooltip that appears on hover.
+ * Customize content, position, and delay via props.
+ */
 export const Default: Story = {
   parameters: {
     docs: {
@@ -115,7 +119,7 @@ import { UiIcon } from '@aleph-alpha/ui-library'
 <template>
   <UiTooltip content="More information" side="top" align="center" :delay-duration="500">
     <UiButton size="icon" variant="ghost" aria-label="Information">
-      <UiIcon icon="i-material-symbols-info" class="w-4 h-4" />
+      <UiIcon name="info" :size="16" />
     </UiButton>
   </UiTooltip>
 </template>`;
@@ -124,12 +128,15 @@ const withIconButtonTemplate = `
   <div class="flex justify-center p-8">
     <UiTooltip content="More information" side="top" align="center" :delay-duration="500">
       <UiButton size="icon" variant="ghost" aria-label="Information">
-        <UiIcon icon="i-material-symbols-info" class="w-4 h-4" />
+        <UiIcon name="info" :size="16" />
       </UiButton>
     </UiTooltip>
   </div>
 `;
 
+/**
+ * Tooltip with an icon button trigger.
+ */
 export const WithIconButton: Story = {
   parameters: {
     docs: {
@@ -145,10 +152,6 @@ export const WithIconButton: Story = {
   }),
 };
 
-/**
- * Tooltip with custom delay duration (instant).
- */
-
 const instantDelayTemplateSource = `<script setup lang="ts">
 import { UiTooltip } from '@aleph-alpha/ui-library'
 import { UiButton } from '@aleph-alpha/ui-library'
@@ -168,6 +171,9 @@ const instantDelayTemplate = `
   </div>
 `;
 
+/**
+ * Tooltip with instant appearance (no delay).
+ */
 export const InstantDelay: Story = {
   parameters: {
     docs: {
@@ -183,10 +189,6 @@ export const InstantDelay: Story = {
   }),
 };
 
-/**
- * Tooltip with longer delay duration.
- */
-
 const longDelayTemplateSource = `<script setup lang="ts">
 import { UiTooltip } from '@aleph-alpha/ui-library'
 import { UiButton } from '@aleph-alpha/ui-library'
@@ -206,6 +208,9 @@ const longDelayTemplate = `
   </div>
 `;
 
+/**
+ * Tooltip with longer delay duration (1500ms).
+ */
 export const LongDelay: Story = {
   parameters: {
     docs: {
@@ -221,9 +226,6 @@ export const LongDelay: Story = {
   }),
 };
 
-/**
- * Disabled tooltip - will not show on hover.
- */
 const disabledTemplateSource = `<script setup lang="ts">
 import { UiTooltip } from '@aleph-alpha/ui-library'
 import { UiButton } from '@aleph-alpha/ui-library'
@@ -243,6 +245,9 @@ const disabledTemplate = `
   </div>
 `;
 
+/**
+ * Disabled tooltip that will not show on hover.
+ */
 export const Disabled: Story = {
   parameters: {
     docs: {
@@ -258,10 +263,6 @@ export const Disabled: Story = {
   }),
 };
 
-/**
- * Tooltip with different alignment options.
- */
-
 const alignmentOptionsTemplateSource = `<script setup lang="ts">
 import { UiTooltip } from '@aleph-alpha/ui-library'
 import { UiButton } from '@aleph-alpha/ui-library'
@@ -306,6 +307,9 @@ const alignmentOptionsTemplate = `
 	</div>
 `;
 
+/**
+ * Tooltip with different alignment options (start, center, end).
+ */
 export const AlignmentOptions: Story = {
   parameters: {
     docs: {
@@ -321,10 +325,6 @@ export const AlignmentOptions: Story = {
   }),
 };
 
-/**
- * All available positions for the tooltip.
- */
-
 const allSidesTemplateSource = `<script setup lang="ts">
 import { UiTooltip } from '@aleph-alpha/ui-library'
 import { UiButton } from '@aleph-alpha/ui-library'
@@ -368,6 +368,9 @@ const allSidesTemplate = `
   </div>
 `;
 
+/**
+ * All available position options for the tooltip (top, right, bottom, left).
+ */
 export const AllSides: Story = {
   parameters: {
     docs: {
@@ -383,10 +386,6 @@ export const AllSides: Story = {
   }),
 };
 
-/**
- * Various tooltip use cases with different trigger elements.
- */
-
 const useCasesTemplateSource = `<script setup lang="ts">
 import { UiTooltip } from '@aleph-alpha/ui-library'
 import { UiButton } from '@aleph-alpha/ui-library'
@@ -404,19 +403,19 @@ import { UiIcon } from '@aleph-alpha/ui-library'
 
   <UiTooltip content="Need help? Click for documentation" side="top" align="center">
     <UiButton size="icon" variant="ghost" aria-label="Help">
-      <UiIcon icon="i-material-symbols-help" class="w-4 h-4" />
+      <UiIcon name="circle-help" :size="16" />
     </UiButton>
   </UiTooltip>
 
   <UiTooltip content="Important information about this feature" side="top" align="center">
     <UiButton size="icon" variant="outline" aria-label="Information">
-      <UiIcon icon="i-material-symbols-info" class="w-4 h-4" />
+      <UiIcon name="info" :size="16" />
     </UiButton>
   </UiTooltip>
 
   <UiTooltip content="Warning: This may affect other settings" side="top" align="center">
     <UiButton size="icon" variant="secondary" aria-label="Warning">
-      <UiIcon icon="i-material-symbols-warning" class="w-4 h-4" />
+      <UiIcon name="triangle-alert" :size="16" />
     </UiButton>
   </UiTooltip>
 
@@ -437,19 +436,19 @@ const useCasesTemplate = `
 
 		<UiTooltip content="Need help? Click for documentation" side="top" align="center">
 			<UiButton size="icon" variant="ghost" aria-label="Help">
-				<UiIcon icon="i-material-symbols-help" class="w-4 h-4" />
+				<UiIcon name="circle-help" :size="16" />
 			</UiButton>
 		</UiTooltip>
 
 		<UiTooltip content="Important information about this feature" side="top" align="center">
 			<UiButton size="icon" variant="outline" aria-label="Information">
-				<UiIcon icon="i-material-symbols-info" class="w-4 h-4" />
+				<UiIcon name="info" :size="16" />
 			</UiButton>
 		</UiTooltip>
 
 		<UiTooltip content="Warning: This may affect other settings" side="top" align="center">
 			<UiButton size="icon" variant="secondary" aria-label="Warning">
-				<UiIcon icon="i-material-symbols-warning" class="w-4 h-4" />
+				<UiIcon name="triangle-alert" :size="16" />
 			</UiButton>
 		</UiTooltip>
 
@@ -459,6 +458,9 @@ const useCasesTemplate = `
 	</div>
 `;
 
+/**
+ * Various tooltip use cases with different trigger elements and purposes.
+ */
 export const UseCases: Story = {
   parameters: {
     docs: {
@@ -474,10 +476,6 @@ export const UseCases: Story = {
   }),
 };
 
-/**
- * Tooltip wrapping text instead of a button.
- */
-
 const withTextTemplateSource = `<script setup lang="ts">
 import { UiTooltip } from '@aleph-alpha/ui-library'
 </script>
@@ -496,6 +494,9 @@ const withTextTemplate = `
   </div>
 `;
 
+/**
+ * Tooltip wrapping inline text instead of a button.
+ */
 export const WithText: Story = {
   parameters: {
     docs: {
@@ -511,10 +512,6 @@ export const WithText: Story = {
   }),
 };
 
-/**
- * Tooltip with a larger offset from the trigger.
- */
-
 const customOffsetTemplateSource = `<script setup lang="ts">
 import { UiTooltip } from '@aleph-alpha/ui-library'
 import { UiButton } from '@aleph-alpha/ui-library'
@@ -534,6 +531,9 @@ const customOffsetTemplate = `
   </div>
 `;
 
+/**
+ * Tooltip with a custom offset from the trigger (16px instead of default 4px).
+ */
 export const CustomOffset: Story = {
   parameters: {
     docs: {

package/src/{primitives → components}/UiTooltip/UiTooltip.vue

@@ -4,7 +4,7 @@
     TooltipContent as ShadcnTooltipContent,
     TooltipProvider as ShadcnTooltipProvider,
     TooltipTrigger as ShadcnTooltipTrigger,
-  } from '@/primitives/shadcn/tooltip';
+  } from '@/components/core/tooltip';
   import type { UiTooltipProps } from './types';
 
   defineOptions({

package/src/components/UiTooltip/index.ts

@@ -0,0 +1,10 @@
+export { default as UiTooltip } from './UiTooltip.vue';
+export * from './types';
+
+// Re-export primitives for complex tooltip use cases (custom content, etc.)
+export {
+  Tooltip as UiTooltipRoot,
+  TooltipContent as UiTooltipContent,
+  TooltipProvider as UiTooltipProvider,
+  TooltipTrigger as UiTooltipTrigger,
+} from '@/components/core/tooltip';

package/src/{primitives → components}/UiTooltip/types.ts

@@ -4,7 +4,6 @@ export type UiTooltipAlign = 'start' | 'center' | 'end';
 /**
  * A popup that displays information on hover or focus. Use for
  * explaining icons, providing hints, or showing additional context.
- *
  * @category Overlays
  * @useCases icon explanation, help text, additional info, hints
  * @keywords tooltip, hint, hover, popup, info, help, explanation

package/src/{primitives/shadcn → components/core}/accordion/Accordion.vue

@@ -9,7 +9,7 @@
 </script>
 
 <template>
-  <AccordionRoot v-slot="slotProps" data-slot="accordion" v-bind="forwarded">
+  <AccordionRoot #default="slotProps" data-slot="accordion" v-bind="forwarded">
     <slot v-bind="slotProps" />
   </AccordionRoot>
 </template>

package/src/{primitives/shadcn → components/core}/accordion/AccordionItem.vue

@@ -14,7 +14,7 @@
 
 <template>
   <AccordionItem
-    v-slot="slotProps"
+    #default="slotProps"
     data-slot="accordion-item"
     v-bind="forwardedProps"
     :class="cn('border-b last:border-b-0', props.class)"

package/src/{primitives/shadcn → components/core}/accordion/AccordionTrigger.vue

@@ -2,7 +2,7 @@
   import type { AccordionTriggerProps } from 'reka-ui';
   import type { HTMLAttributes } from 'vue';
   import { reactiveOmit } from '@vueuse/core';
-  import { Icon } from '@/primitives/shadcn/icon';
+  import { UiIcon } from '@/components/UiIcon';
   import { AccordionHeader, AccordionTrigger } from 'reka-ui';
   import { cn } from '@/lib/utils';
 
@@ -25,9 +25,10 @@
     >
       <slot />
       <slot name="icon">
-        <Icon
-          icon="i-material-symbols-keyboard-arrow-down"
-          class="text-muted-foreground pointer-events-none shrink-0 translate-y-0.5 text-base transition-transform duration-200"
+        <UiIcon
+          name="chevron-down"
+          :size="16"
+          class="text-muted-foreground pointer-events-none shrink-0 translate-y-0.5 transition-transform duration-200"
         />
       </slot>
     </AccordionTrigger>

package/src/{primitives/shadcn → components/core}/alert/index.ts

@@ -10,9 +10,9 @@ export const alertVariants = cva(
   {
     variants: {
       variant: {
-        default: 'bg-card text-card-foreground',
+        default: 'bg-popover text-popover-foreground',
         destructive:
-          'text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90',
+          'text-destructive bg-popover [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90',
       },
     },
     defaultVariants: {

package/src/{primitives/shadcn → components/core}/alert-dialog/AlertDialogAction.vue

@@ -4,7 +4,7 @@
   import { reactiveOmit } from '@vueuse/core';
   import { AlertDialogAction } from 'reka-ui';
   import { cn } from '@/lib/utils';
-  import { buttonVariants } from '@/primitives/shadcn/button';
+  import { buttonVariants } from '@/components/core/button';
 
   const props = defineProps<AlertDialogActionProps & { class?: HTMLAttributes['class'] }>();
 

package/src/{primitives/shadcn → components/core}/alert-dialog/AlertDialogCancel.vue

@@ -4,7 +4,7 @@
   import { reactiveOmit } from '@vueuse/core';
   import { AlertDialogCancel } from 'reka-ui';
   import { cn } from '@/lib/utils';
-  import { buttonVariants } from '@/primitives/shadcn/button';
+  import { buttonVariants } from '@/components/core/button';
 
   const props = defineProps<AlertDialogCancelProps & { class?: HTMLAttributes['class'] }>();
 

package/src/{primitives/shadcn → components/core}/alert-dialog/AlertDialogContent.vue

@@ -26,14 +26,14 @@
   <AlertDialogPortal>
     <AlertDialogOverlay
       data-slot="alert-dialog-overlay"
-      class="data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80"
+      class="data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-modal-overlay"
     />
     <AlertDialogContent
       data-slot="alert-dialog-content"
       v-bind="{ ...$attrs, ...forwarded }"
       :class="
         cn(
-          'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',
+          'bg-popover data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',
           props.class,
         )
       "

package/src/{primitives/shadcn → components/core}/badge/index.ts

@@ -12,7 +12,7 @@ export const badgeVariants = cva(
         secondary:
           'border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90',
         destructive:
-          'border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
+          'border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-[#FF8D8F] dark:text-black',
         outline: 'text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground',
       },
     },

package/src/{primitives/shadcn → components/core}/button/index.ts

@@ -10,12 +10,12 @@ export const buttonVariants = cva(
       variant: {
         default: 'bg-primary text-primary-foreground hover:bg-primary/90',
         destructive:
-          'bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
+          'bg-destructive text-destructive-foreground hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40',
         outline:
-          'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
+          'border border-input bg-transparent text-foreground shadow-xs hover:bg-hover-default',
         secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
-        ghost: 'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
-        link: 'text-primary underline-offset-4 hover:underline',
+        ghost: 'text-foreground hover:bg-hover-default',
+        link: 'text-link underline-offset-4 hover:underline focus-visible:border-none',
       },
       size: {
         default: 'h-9 px-4 py-2 has-[>svg]:px-3',

package/src/{primitives/shadcn → components/core}/calendar/Calendar.vue

@@ -8,7 +8,7 @@
   import { createYear, createYearRange, toDate } from 'reka-ui/date';
   import { computed, toRaw } from 'vue';
   import { cn } from '@/lib/utils';
-  import { NativeSelect, NativeSelectOption } from '@/primitives/shadcn/native-select';
+  import { NativeSelect, NativeSelectOption } from '@/components/core/native-select';
   import {
     CalendarCell,
     CalendarCellTrigger,

package/src/{primitives/shadcn → components/core}/calendar/CalendarCellTrigger.vue

@@ -4,7 +4,7 @@
   import { reactiveOmit } from '@vueuse/core';
   import { CalendarCellTrigger, useForwardProps } from 'reka-ui';
   import { cn } from '@/lib/utils';
-  import { buttonVariants } from '@/primitives/shadcn/button';
+  import { buttonVariants } from '@/components/core/button';
 
   const props = withDefaults(
     defineProps<CalendarCellTriggerProps & { class?: HTMLAttributes['class'] }>(),
@@ -26,8 +26,8 @@
         buttonVariants({ variant: 'ghost' }),
         'size-8 p-0 font-normal aria-selected:opacity-100 cursor-default',
         '[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground',
-        // Selected
-        'data-[selected]:bg-primary data-[selected]:text-primary-foreground data-[selected]:opacity-100 data-[selected]:hover:bg-primary data-[selected]:hover:text-primary-foreground data-[selected]:focus:bg-primary data-[selected]:focus:text-primary-foreground',
+        // Selected: accent-default background with on-accent-default foreground
+        'data-[selected]:bg-accent-default data-[selected]:text-accent-default-foreground data-[selected]:opacity-100 data-[selected]:hover:bg-accent-default data-[selected]:hover:text-accent-default-foreground data-[selected]:focus:bg-accent-default data-[selected]:focus:text-accent-default-foreground',
         // Disabled
         'data-[disabled]:text-muted-foreground data-[disabled]:opacity-50',
         // Unavailable

package/src/{primitives/shadcn → components/core}/calendar/CalendarNextButton.vue

@@ -2,10 +2,10 @@
   import type { CalendarNextProps } from 'reka-ui';
   import type { HTMLAttributes } from 'vue';
   import { reactiveOmit } from '@vueuse/core';
-  import { Icon } from '@/primitives/shadcn/icon';
+  import { UiIcon } from '@/components/UiIcon';
   import { CalendarNext, useForwardProps } from 'reka-ui';
   import { cn } from '@/lib/utils';
-  import { buttonVariants } from '@/primitives/shadcn/button';
+  import { buttonVariants } from '@/components/core/button';
 
   const props = defineProps<CalendarNextProps & { class?: HTMLAttributes['class'] }>();
 
@@ -27,7 +27,7 @@
     v-bind="forwardedProps"
   >
     <slot>
-      <Icon icon="i-material-symbols-keyboard-arrow-right" class="text-base" />
+      <UiIcon name="chevron-right" :size="16" />
     </slot>
   </CalendarNext>
 </template>

package/src/{primitives/shadcn → components/core}/calendar/CalendarPrevButton.vue

@@ -2,10 +2,10 @@
   import type { CalendarPrevProps } from 'reka-ui';
   import type { HTMLAttributes } from 'vue';
   import { reactiveOmit } from '@vueuse/core';
-  import { Icon } from '@/primitives/shadcn/icon';
+  import { UiIcon } from '@/components/UiIcon';
   import { CalendarPrev, useForwardProps } from 'reka-ui';
   import { cn } from '@/lib/utils';
-  import { buttonVariants } from '@/primitives/shadcn/button';
+  import { buttonVariants } from '@/components/core/button';
 
   const props = defineProps<CalendarPrevProps & { class?: HTMLAttributes['class'] }>();
 
@@ -27,7 +27,7 @@
     v-bind="forwardedProps"
   >
     <slot>
-      <Icon icon="i-material-symbols-keyboard-arrow-left" class="text-base" />
+      <UiIcon name="chevron-left" :size="16" />
     </slot>
   </CalendarPrev>
 </template>

package/src/{primitives/shadcn → components/core}/card/Card.vue

@@ -12,7 +12,7 @@
     data-slot="card"
     :class="
       cn(
-        'bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm',
+        'bg-popover text-popover-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm',
         props.class,
       )
     "

package/src/{primitives/shadcn → components/core}/checkbox/Checkbox.vue

@@ -2,7 +2,7 @@
   import type { CheckboxRootEmits, CheckboxRootProps } from 'reka-ui';
   import type { HTMLAttributes } from 'vue';
   import { reactiveOmit } from '@vueuse/core';
-  import { Icon } from '@/primitives/shadcn/icon';
+  import { UiIcon } from '@/components/UiIcon';
   import { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from 'reka-ui';
   import { cn } from '@/lib/utils';
 
@@ -21,7 +21,7 @@
     v-bind="forwarded"
     :class="
       cn(
-        'peer border-input data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
+        'peer border-input data-[state=checked]:bg-accent-default data-[state=checked]:text-accent-default-foreground data-[state=checked]:border-accent-default focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
         props.class,
       )
     "
@@ -31,7 +31,7 @@
       class="grid place-content-center text-current transition-none"
     >
       <slot v-bind="slotProps">
-        <Icon icon="i-material-symbols-check" class="text-xs" />
+        <UiIcon name="check" :size="12" />
       </slot>
     </CheckboxIndicator>
   </CheckboxRoot>

package/src/{primitives/shadcn → components/core}/drawer/DrawerContent.vue

@@ -29,14 +29,14 @@
   <DialogPortal>
     <DialogOverlay
       data-slot="drawer-overlay"
-      class="data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80"
+      class="data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-modal-overlay"
     />
     <DialogContent
       data-slot="drawer-content"
       v-bind="{ ...$attrs, ...forwarded }"
       :class="
         cn(
-          'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=open]:slide-in-from-bottom-2 data-[state=closed]:slide-out-to-bottom-2 fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-lg border shadow-lg duration-200',
+          'bg-popover data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=open]:slide-in-from-bottom-2 data-[state=closed]:slide-out-to-bottom-2 fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-lg border shadow-lg duration-200',
           props.class,
         )
       "

package/src/{primitives/shadcn → components/core}/dropdown-menu/DropdownMenuCheckboxItem.vue

@@ -2,7 +2,7 @@
   import type { DropdownMenuCheckboxItemEmits, DropdownMenuCheckboxItemProps } from 'reka-ui';
   import type { HTMLAttributes } from 'vue';
   import { reactiveOmit } from '@vueuse/core';
-  import { Icon } from '@/primitives/shadcn/icon';
+  import { UiIcon } from '@/components/UiIcon';
   import {
     DropdownMenuCheckboxItem,
     DropdownMenuItemIndicator,
@@ -24,7 +24,7 @@
     v-bind="forwarded"
     :class="
       cn(
-        'focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
+        'focus:bg-hover-default focus:text-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
         props.class,
       )
     "
@@ -32,7 +32,7 @@
     <span class="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
       <DropdownMenuItemIndicator class="flex items-center justify-center">
         <slot name="indicator-icon">
-          <Icon icon="i-material-symbols-check" class="size-4" />
+          <UiIcon name="check" :size="16" />
         </slot>
       </DropdownMenuItemIndicator>
     </span>

package/src/{primitives/shadcn → components/core}/dropdown-menu/DropdownMenuItem.vue

@@ -31,7 +31,7 @@
     v-bind="forwardedProps"
     :class="
       cn(
-        'focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*=\'text-\'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
+        'focus:bg-hover-default focus:text-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*=\'text-\'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
         props.class,
       )
     "

package/src/{primitives/shadcn → components/core}/dropdown-menu/DropdownMenuRadioItem.vue

@@ -21,7 +21,7 @@
     v-bind="forwarded"
     :class="
       cn(
-        'focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
+        'focus:bg-hover-default focus:text-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
         props.class,
       )
     "

package/src/{primitives/shadcn → components/core}/dropdown-menu/DropdownMenuSubTrigger.vue

@@ -2,7 +2,7 @@
   import type { DropdownMenuSubTriggerProps } from 'reka-ui';
   import type { HTMLAttributes } from 'vue';
   import { reactiveOmit } from '@vueuse/core';
-  import { Icon } from '@/primitives/shadcn/icon';
+  import { UiIcon } from '@/components/UiIcon';
   import { DropdownMenuSubTrigger, useForwardProps } from 'reka-ui';
   import { cn } from '@/lib/utils';
 
@@ -20,12 +20,12 @@
     v-bind="forwardedProps"
     :class="
       cn(
-        'focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8',
+        'focus:bg-hover-default focus:text-foreground data-[state=open]:bg-hover-default data-[state=open]:text-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8',
         props.class,
       )
     "
   >
     <slot />
-    <Icon icon="i-material-symbols-keyboard-arrow-right" class="ml-auto text-base" />
+    <UiIcon name="chevron-right" :size="16" class="ml-auto" />
   </DropdownMenuSubTrigger>
 </template>

package/src/{primitives/shadcn → components/core}/field/FieldError.vue

@@ -32,7 +32,7 @@
   const getContent = () => content.value;
 
   const slots = useSlots();
-  const defaultSlotContent = computed(() => slots.default?.() ?? []);
+  const defaultSlotContent = computed(() => slots.default?.({}) ?? []);
 
   function hasMeaningfulNodes(nodes: VNode[]): boolean {
     return nodes.some((node) => {

package/src/{primitives/shadcn → components/core}/field/FieldLabel.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
   import type { HTMLAttributes } from 'vue';
   import { cn } from '@/lib/utils';
-  import { Label } from '@/primitives/shadcn/label';
+  import { Label } from '@/components/core/label';
 
   const props = defineProps<{
     class?: HTMLAttributes['class'];