@naptics/vue-collection 0.3.1 → 1.0.0-beta.1

package/eslint.config.cjs

@@ -3,8 +3,6 @@ const { defineConfigWithVueTs, vueTsConfigs } = require('@vue/eslint-config-type
 const js = require('@eslint/js')
 const prettierConfig = require('@vue/eslint-config-prettier')
 
-require('@rushstack/eslint-patch/modern-module-resolution')
-
 module.exports = defineConfigWithVueTs(
     {
         ignores: ['node_modules/**', 'dist/**', 'dist-ssr/**', 'lib/**', 'coverage/**', 'scripts/*.js'],

package/package.json

@@ -1,8 +1,8 @@
 {
     "name": "@naptics/vue-collection",
-    "author": "Timo Siegenthaler",
+    "author": "Timo Siegenthaler and Jonas Schoch",
     "description": "Vue Collection is a collection of styled and fully functional Vue components which can easily be integrated into our projects.",
-    "version": "0.3.1",
+    "version": "1.0.0-beta.1",
     "main": "./index.js",
     "repository": {
         "type": "git",
@@ -22,43 +22,44 @@
         "preinstall": "node ./scripts/sync-node-types.js"
     },
     "dependencies": {
-        "@headlessui/vue": "^1.7.10",
-        "@popperjs/core": "^2.11.6",
-        "awesome-phonenumber": "^5.1.0"
+        "@headlessui/vue": "^1.7.23",
+        "@popperjs/core": "^2.11.8",
+        "awesome-phonenumber": "^7.8.0"
     },
     "peerDependencies": {
         "@heroicons/vue": "^2.0.16",
         "vue": "^3.5.0"
     },
     "devDependencies": {
-        "@babel/cli": "^7.21.0",
-        "@babel/core": "^7.21.3",
-        "@intlify/unplugin-vue-i18n": "^11.0.3",
-        "@rushstack/eslint-patch": "^1.15.0",
-        "@tailwindcss/forms": "^0.5.3",
-        "@types/jsdom": "^21.1.0",
+        "@babel/cli": "^7.28.6",
+        "@babel/core": "^7.29.0",
+        "@eslint/js": "^10.0.1",
+        "@intlify/unplugin-vue-i18n": "^11.2.3",
+        "@rushstack/eslint-patch": "^1.16.1",
+        "@tailwindcss/forms": "^0.5.11",
+        "@tailwindcss/vite": "^4.3.0",
+        "@types/jsdom": "^28.0.3",
         "@types/node": "^24",
-        "@vitejs/plugin-vue": "^6.0.3",
-        "@vitejs/plugin-vue-jsx": "^5.1.2",
-        "@vue/babel-plugin-jsx": "^1.1.1",
+        "@vitejs/plugin-vue": "^6.0.7",
+        "@vitejs/plugin-vue-jsx": "^5.1.5",
+        "@vue/babel-plugin-jsx": "^2.0.1",
         "@vue/eslint-config-prettier": "^10.2.0",
-        "@vue/eslint-config-typescript": "^14.6.0",
-        "@vue/test-utils": "^2.3.0",
-        "@vue/tsconfig": "^0.5.1",
-        "autoprefixer": "^10.4.13",
-        "eslint": "^9.17.0",
-        "eslint-plugin-vue": "^10.6.2",
-        "jsdom": "^21.1.0",
+        "@vue/eslint-config-typescript": "^14.7.0",
+        "@vue/test-utils": "^2.4.10",
+        "@vue/tsconfig": "^0.8.1",
+        "eslint": "^10.4.0",
+        "eslint-plugin-vue": "^10.9.1",
+        "jsdom": "^29.1.1",
         "npm-run-all": "^4.1.5",
-        "postcss": "^8.4.21",
-        "prettier": "^3.0.0",
-        "tailwindcss": "^3.2.7",
-        "typescript": "~5.5.4",
-        "vite": "^7.3.0",
-        "vitest": "^4.0.15",
-        "vue": "^3.5.25",
-        "vue-i18n": "^9.2.2",
-        "vue-router": "^4.1.6",
-        "vue-tsc": "^3.1.8"
+        "postcss": "^8.5.15",
+        "prettier": "^3.8.3",
+        "tailwindcss": "^4.3.0",
+        "typescript": "~5.8.3",
+        "vite": "^8.0.14",
+        "vitest": "^4.1.7",
+        "vue": "^3.5.34",
+        "vue-i18n": "^11.4.4",
+        "vue-router": "^5.0.7",
+        "vue-tsc": "^3.3.1"
     }
 }

package/postcss.config.js

@@ -1,6 +1,3 @@
 module.exports = {
-    plugins: {
-        tailwindcss: {},
-        autoprefixer: {},
-    },
+    plugins: {},
 }

package/src/demo/App.css

@@ -1,6 +1,50 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
+@plugin "@tailwindcss/forms";
+
+@theme {
+    --color-default-50: var(--color-slate-50);
+    --color-default-100: var(--color-slate-100);
+    --color-default-200: var(--color-slate-200);
+    --color-default-300: var(--color-slate-300);
+    --color-default-400: var(--color-slate-400);
+    --color-default-500: var(--color-slate-500);
+    --color-default-600: var(--color-slate-600);
+    --color-default-700: var(--color-slate-700);
+    --color-default-800: var(--color-slate-800);
+    --color-default-900: var(--color-slate-900);
+    --color-default-950: var(--color-slate-950);
+
+    --color-primary-50: var(--color-violet-50);
+    --color-primary-100: var(--color-violet-100);
+    --color-primary-200: var(--color-violet-200);
+    --color-primary-300: var(--color-violet-300);
+    --color-primary-400: var(--color-violet-400);
+    --color-primary-500: var(--color-violet-500);
+    --color-primary-600: var(--color-violet-600);
+    --color-primary-700: var(--color-violet-700);
+    --color-primary-800: var(--color-violet-800);
+    --color-primary-900: var(--color-violet-900);
+    --color-primary-950: var(--color-violet-950);
+
+    --color-secondary-50: var(--color-fuchsia-50);
+    --color-secondary-100: var(--color-fuchsia-100);
+    --color-secondary-200: var(--color-fuchsia-200);
+    --color-secondary-300: var(--color-fuchsia-300);
+    --color-secondary-400: var(--color-fuchsia-400);
+    --color-secondary-500: var(--color-fuchsia-500);
+    --color-secondary-600: var(--color-fuchsia-600);
+    --color-secondary-700: var(--color-fuchsia-700);
+    --color-secondary-800: var(--color-fuchsia-800);
+    --color-secondary-900: var(--color-fuchsia-900);
+    --color-secondary-950: var(--color-fuchsia-950);
+}
+
+/* Safelist dynamic color/size classes used in components */
+@source inline("{bg,text}-{default,primary,secondary,green,red,yellow,blue}-{50,100,200,300,400,500,600,700,800,900}");
+@source inline("hover:{bg,text}-{default,primary,secondary,green,red,yellow,blue}-{50,100,200,300,400,500,600,700,800,900}");
+@source inline("ring-{default,primary,secondary,green,red,yellow,blue}-{50,100,200,300,400,500,600,700,800,900}");
+@source inline("focus-visible:ring-{default,primary,secondary,green,red,yellow,blue}-{50,100,200,300,400,500,600,700,800,900}");
+@source inline("{w,h}-{1,2,3,4,5,6,7,8,9,10,11,12,14,16,18,20}");
 
 @layer base {
     body {

package/src/demo/components/ComponentSection.tsx

@@ -13,7 +13,7 @@ export default createComponent('ComponentSection', componentSectionProps, (props
         <div class="border-b-2 border-default-200" id={props.id}>
             <div>
                 <div class="px-8 py-10 max-w-4xl mx-auto">
-                    <RouterLink to={{ hash: props.id ? `#${props.id}` : undefined }} class="group outline-none">
+                    <RouterLink to={{ hash: props.id ? `#${props.id}` : undefined }} class="group outline-hidden">
                         <h2 class="font-bold text-4xl mb-2 flex items-center space-x-2 ">
                             <span>{props.title}</span>
                             <LinkIcon class="h-8 w-8 text-default-900 opacity-30 hidden group-hover:block group-focus-visible:block" />

package/src/demo/views/NavigationView.tsx

@@ -30,7 +30,7 @@ export default createView('NavigationView', () => {
                 {sections.map(section => (
                     <RouterLink
                         to={{ hash: `#${section.hash}` }}
-                        class="outline-none focus-visible:ring-2 focus-visible ring-primary-500 rounded-md"
+                        class="outline-hidden focus-visible:ring-2 focus-visible ring-primary-500 rounded-md"
                     >
                         <NBadge color="primary" allCaps={false} textSize="text-2xl">
                             {section.label}

package/src/demo/views/presentation/TooltipView.tsx

@@ -20,9 +20,9 @@ export default createView('TooltipView', () => {
                 title="Customization"
                 subtitle="The content of a tooltip can be a simple text or there is a slot available for customization. More properties like placement, maximum width and more can be configured."
             >
-                <ComponentGrid cols={4}>
+                <ComponentGrid cols={5}>
                     <div class="flex">
-                        <NTooltip text="Hello tooltip!">
+                        <NTooltip text="Hello tooltip!" placement="bottom">
                             <NBadge text="Hover me" />
                         </NTooltip>
                     </div>
@@ -57,6 +57,12 @@ export default createView('TooltipView', () => {
                             <NBadge text="Hover me" />
                         </NTooltip>
                     </div>
+
+                    <div class="flex">
+                        <NTooltip text="I'm delayed 500ms, sorry." delay={500}>
+                            <NBadge text="Delay" />
+                        </NTooltip>
+                    </div>
                 </ComponentGrid>
             </VariantSection>
 

package/src/lib/components/NAlert.tsx

@@ -39,16 +39,16 @@ const Component = createComponent('NAlert', nAlertProps, (props, { slots }) => {
     return () => (
         <div class={`rounded-md p-3 shadow-lg bg-${variant.value.color}-50`}>
             <div class="flex items-center">
-                <div class="flex flex-shrink-0 items-center">{variant.value.icon()}</div>
+                <div class="flex shrink-0 items-center">{variant.value.icon()}</div>
 
-                <div class="ml-3 flex-grow">
+                <div class="ml-3 grow">
                     <p class={`text-sm font-medium text-${variant.value.color}-900`}>
                         {slots.default?.() ?? props.text}
                     </p>
                 </div>
 
                 {!props.hideX && (
-                    <div class="flex items-center flex-shrink-0 ml-3">
+                    <div class="flex items-center shrink-0 ml-3">
                         <NIconButton color={variant.value.color} size={5} icon={XMarkIcon} onClick={props.onDismiss} />
                     </div>
                 )}

package/src/lib/components/NBadge.tsx

@@ -60,7 +60,7 @@ const Component = createComponent('NBadge', nBadgeProps, (props, { slots }) => {
         <NTooltip {...mapTooltipProps(props)}>
             <div
                 class={[
-                    'px-2 py-1 rounded-md font-semibold shadow',
+                    'px-2 py-1 rounded-md font-semibold shadow-sm',
                     `${props.textSize} bg-${props.color}-${props.shade} text-${props.color}-${props.textShade}`,
                     props.allCaps ? 'uppercase' : '',
                     props.badgeClass,

package/src/lib/components/NButton.tsx

@@ -56,17 +56,19 @@ const Component = createComponent('NButton', nButtonProps, (props, { slots }) =>
                 disabled={isDisabled.value}
                 type={props.type}
                 class={[
-                    `block w-full font-medium rounded-md focus:outline-none focus-visible:ring-2 shadow text-${props.color}-900 relative`,
+                    `block w-full font-medium rounded-md focus:outline-hidden focus-visible:ring-2 shadow-sm text-${props.color}-900 relative`,
                     isDisabled.value
-                        ? `bg-${props.color}-100 text-opacity-20 cursor-default`
-                        : `bg-${props.color}-200 hover:bg-${props.color}-300 focus-visible:ring-${props.color}-500`,
+                        ? `bg-${props.color}-100 cursor-default`
+                        : `bg-${props.color}-200 hover:bg-${props.color}-300 focus-visible:ring-${props.color}-500 cursor-pointer`,
 
                     props.small ? 'py-1 px-2 text-xs' : 'py-2 px-4 text-sm',
                     props.buttonClass,
                 ]}
                 onClick={props.onClick}
             >
-                <span class={{ 'opacity-10': props.loading }}>{slots.default?.()}</span>
+                <span class={props.loading ? 'opacity-0' : isDisabled.value ? 'opacity-20' : undefined}>
+                    {slots.default?.()}
+                </span>
                 {props.loading && (
                     <div class="absolute inset-0 flex items-center justify-center opacity-50">
                         <NLoadingIndicator color={props.color} size={props.small ? 4 : 6} shade={600} />

package/src/lib/components/NCheckbox.tsx

@@ -43,9 +43,9 @@ const Component = createComponent('NCheckbox', nCheckboxProps, props => {
             onClick={toggle}
             key={updateKey.value}
             class={[
-                `h-5 w-5 border-default-300 rounded focus:outline-none focus:ring-0 focus-visible:ring-2 focus-visible:ring-${props.color}-500`,
+                `h-5 w-5 border-default-300 rounded-sm focus:outline-hidden focus:ring-0 focus-visible:ring-2 focus-visible:ring-${props.color}-500`,
                 props.disabled
-                    ? `cursor-default bg-default-100 text-${props.color}-200`
+                    ? `cursor-default opacity-50 bg-default-100 checked:bg-current text-${props.color}-400`
                     : `cursor-pointer text-${props.color}-400`,
             ]}
         />

package/src/lib/components/NDialog.tsx

@@ -127,7 +127,7 @@ const Component = createComponent('NDialog', nDialogProps, (props, context) => {
             hideHeader
         >
             <div class="flex space-x-4 py-2">
-                <div class="flex-grow-0">
+                <div class="grow-0">
                     <NIconCircle
                         icon={props.icon || defaults.value.icon}
                         iconSize={6}
@@ -135,7 +135,7 @@ const Component = createComponent('NDialog', nDialogProps, (props, context) => {
                     />
                 </div>
 
-                <div class="flex-grow">
+                <div class="grow">
                     <DialogTitle as="h4" class="font-medium text-lg text-default-700 mb-1">
                         {props.title}
                     </DialogTitle>

package/src/lib/components/NDropdown.tsx

@@ -89,28 +89,30 @@ const Component = createComponentWithSlots('NDropdown', nDropdownProps, ['button
                     <MenuButton
                         disabled={props.disabled}
                         class={[
-                            'shadow w-full flex justify-between items-center text-default-700 rounded-md border bg-white border-default-300 px-4 py-2 text-sm font-medium focus:outline-none focus:ring-offset-2 focus-visible:ring-2 focus-visible:ring-primary-500',
-                            props.disabled ? 'text-opacity-20 cursor-default' : 'hover:bg-default-100',
+                            'shadow-sm w-full flex justify-between items-center rounded-md border bg-white border-default-300 px-4 py-2 text-sm font-medium focus:outline-hidden focus:ring-offset-2 focus-visible:ring-2 focus-visible:ring-primary-500',
+                            props.disabled
+                                ? 'text-default-700/20 cursor-default'
+                                : 'hover:bg-default-100 text-default-700 cursor-pointer',
                             props.buttonClass,
                         ]}
                     >
                         <span>{props.title}</span>
-                        <ChevronDownIcon class="-mr-1 ml-2 h-5 w-5 flex-shrink-0" aria-hidden="true" />
+                        <ChevronDownIcon class="-mr-1 ml-2 h-5 w-5 shrink-0" aria-hidden="true" />
                     </MenuButton>
                 )}
             </div>
 
             <Transition
                 enterActiveClass="transition ease-out duration-100"
-                enterFromClass="transform opacity-0 scale-95"
-                enterToClass="transform opacity-100 scale-100"
+                enterFromClass="opacity-0 scale-95"
+                enterToClass="opacity-100 scale-100"
                 leaveActiveClass="transition ease-in duration-75"
-                leaveFromClass="transform opacity-100 scale-100"
-                leaveToClass="transform opacity-0 scale-95"
+                leaveFromClass="opacity-100 scale-100"
+                leaveToClass="opacity-0 scale-95"
             >
                 <MenuItems
                     class={[
-                        'z-10 absolute w-56 mt-2 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none',
+                        'z-10 absolute w-56 mt-2 rounded-md shadow-lg bg-white ring-1 ring-black/5 focus:outline-hidden',
                         props.right ? 'origin-top-right right-0' : 'origin-top-left left-0',
                     ]}
                 >
@@ -142,7 +144,7 @@ const Component = createComponentWithSlots('NDropdown', nDropdownProps, ['button
                                                         type="button"
                                                         onClick={item.onClick}
                                                         class={[
-                                                            'w-full text-left px-4 py-2 text-sm',
+                                                            'w-full text-left px-4 py-2 text-sm cursor-pointer',
                                                             active
                                                                 ? 'bg-default-100 text-default-900'
                                                                 : 'text-default-700',

package/src/lib/components/NDropzone.tsx

@@ -168,7 +168,7 @@ const Component = createComponent('NDropzone', nDropzoneProps, props => {
         <div>
             <button
                 class={[
-                    'block w-full rounded-md border-dashed border-2  focus-visible:border-primary-500 focus:outline-none ',
+                    'block w-full rounded-md border-dashed border-2  focus-visible:border-primary-500 focus:outline-hidden ',
                     'flex flex-col items-center justify-center text-center text-sm select-none p-4',
                     !props.disabled ? 'hover:border-primary-300 hover:bg-primary-50 hover:text-primary-700' : '',
                     props.disabled
@@ -196,14 +196,14 @@ const Component = createComponent('NDropzone', nDropzoneProps, props => {
                 />
 
                 {/* Counterweight */}
-                <div class="flex-grow mb-2" />
+                <div class="grow mb-2" />
 
                 <span class="font-medium">
                     {trslc('vue-collection.text.drag-n-drop-files', props.maxFiles, { n: props.maxFiles })}
                 </span>
                 <span>{props.description}</span>
 
-                <div class="flex-grow mt-2 flex items-end justify-center text-red-500 font-medium">
+                <div class="grow mt-2 flex items-end justify-center text-red-500 font-medium">
                     <span>{fileError.value}</span>
                 </div>
             </button>
@@ -224,7 +224,7 @@ const Component = createComponent('NDropzone', nDropzoneProps, props => {
                         </NBadge>
                     ))}
 
-                    <div class="flex-grow text-sm text-default-500 flex items-end justify-end text-right">
+                    <div class="grow text-sm text-default-500 flex items-end justify-end text-right">
                         <span>
                             <span>
                                 {trslc('vue-collection.text.files-selected', files.value.length, {

package/src/lib/components/NIconButton.tsx

@@ -65,10 +65,10 @@ export const nIconButtonProps = {
  */
 const Component = createComponent('NIconButton', nIconButtonProps, props => {
     const classes = () => [
-        'block p-0.5 rounded-md focus:outline-none focus-visible:ring-2 -m-1',
+        'block p-0.5 rounded-md focus:outline-hidden focus-visible:ring-2 -m-1',
         props.disabled
             ? `text-${props.color}-200 cursor-default`
-            : `hover:bg-${props.color}-${props.shade} hover:bg-opacity-10 text-${props.color}-${props.shade} focus-visible:ring-${props.color}-${props.shade} cursor-pointer`,
+            : `hover:bg-current/10 text-${props.color}-${props.shade} focus-visible:ring-${props.color}-${props.shade} cursor-pointer`,
         props.buttonClass,
     ]
 

package/src/lib/components/NInput.tsx

@@ -112,7 +112,7 @@ const Component = createComponent('NInput', nInputProps, (props, context) => {
                         onBlur={() => props.onBlur?.()}
                         onInvalid={event => event.preventDefault()}
                         class={[
-                            'block w-full rounded-md border focus:outline-none focus:ring-1 ',
+                            'block w-full rounded-md border focus:outline-hidden focus:ring-1 ',
                             props.small ? 'text-xs py-0.5 px-2' : 'py-2 px-4',
                             props.disabled
                                 ? 'text-default-500 placeholder-default-300 bg-default-50'

package/src/lib/components/NLink.tsx

@@ -55,7 +55,7 @@ const Component = createComponent('NLink', nLinkProps, (props, { slots }) => {
     })
 
     const classes = computed(() => [
-        'font-medium focus:outline-none focus-visible:ring-2 rounded-sm ring-offset-2 hover:underline text-left',
+        'font-medium focus:outline-hidden focus-visible:ring-2 rounded-xs ring-offset-2 hover:underline text-left cursor-pointer',
         `${props.textSize} text-${props.color}-${props.shade} hover:text-${props.color}-${hoverShade.value} focus-visible:ring-${props.color}-${props.shade}`,
     ])
     const disabledClasses = computed(() => [

package/src/lib/components/NModal.tsx

@@ -1,6 +1,6 @@
 import { createComponentWithSlots } from '../utils/component'
 import type { PropType } from 'vue'
-import { Dialog, DialogOverlay, DialogTitle, TransitionRoot, TransitionChild } from '@headlessui/vue'
+import { Dialog, DialogTitle, TransitionRoot, TransitionChild } from '@headlessui/vue'
 import NButton from './NButton'
 import NIconButton from './NIconButton'
 import { XMarkIcon } from '@heroicons/vue/24/solid'
@@ -160,9 +160,9 @@ const Component = createComponentWithSlots('NModal', nModalProps, ['modal', 'hea
                         leave-to="opacity-0"
                     >
                         {props.closeOnBackground ? (
-                            <DialogOverlay class="fixed inset-0 bg-default-700 bg-opacity-75" />
+                            <div class="fixed inset-0 bg-default-700/75" aria-hidden="true" onClick={cancel} />
                         ) : (
-                            <div class="fixed inset-0 bg-default-700 bg-opacity-75" />
+                            <div class="fixed inset-0 bg-default-700/75" aria-hidden="true" />
                         )}
                     </TransitionChild>
 
@@ -180,7 +180,7 @@ const Component = createComponentWithSlots('NModal', nModalProps, ['modal', 'hea
                         leave-from="opacity-100 translate-y-0 sm:scale-100"
                         leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
                     >
-                        <div class={['transform m-4 w-full align-middle', props.maxWidth]}>
+                        <div class={['relative m-4 w-full align-middle', props.maxWidth]}>
                             {props.modal?.({ ok, cancel }) || (
                                 <div
                                     class={[

package/src/lib/components/NPagination.css

@@ -1,3 +1,5 @@
+@reference "../../demo/App.css";
+
 .pagination-item {
     @apply h-9 w-9 text-sm inline-flex items-center justify-center border font-medium border-default-300 text-default-500;
 }
@@ -7,9 +9,9 @@
 }
 
 .pagination-item.selectable {
-    @apply hover:bg-default-50 focus:outline-none focus-visible:border-primary-500 focus-visible:ring-primary-500 focus-visible:ring-1 focus-visible:z-[2];
+    @apply cursor-pointer hover:bg-default-50 focus:outline-hidden focus-visible:border-primary-500 focus-visible:ring-primary-500 focus-visible:ring-1 focus-visible:z-2;
 }
 
 .pagination-item.selectable.selected {
-    @apply border-primary-500 bg-primary-100 hover:bg-primary-100 text-primary-600 z-[1];
+    @apply border-primary-500 bg-primary-100 hover:bg-primary-100 text-primary-600 z-1;
 }

package/src/lib/components/NPagination.tsx

@@ -86,7 +86,7 @@ const Component = createComponent('NPagination', nPaginationProps, props => {
     ]
 
     return () => (
-        <nav class="inline-flex rounded-md shadow -space-x-px">
+        <nav class="inline-flex rounded-md shadow-sm -space-x-px">
             <button
                 class={['pagination-item selectable rounded-l-md', props.small ? '' : 'not-small']}
                 onClick={previous}

package/src/lib/components/NSearchbar.tsx

@@ -64,7 +64,7 @@ const Component = createComponent('NSearchbar', nSearchbarProps, (props, context
                 placeholder={props.placeholder}
                 autocomplete="off"
                 class={[
-                    'block w-full pl-10 pr-4 rounded-md border focus:outline-none focus:ring-1 transition placeholder-default-400 border-default-300 focus:border-primary-500 focus:ring-primary-500',
+                    'block w-full pl-10 pr-4 rounded-md border focus:outline-hidden focus:ring-1 transition placeholder-default-400 border-default-300 focus:border-primary-500 focus:ring-primary-500',
                     props.small ? 'py-1' : 'py-2',
                     props.inputClass,
                 ]}

package/src/lib/components/NSelect.tsx

@@ -101,7 +101,7 @@ const Component = createComponent('NSelect', nSelectProps, (props, context) => {
                             onChange={event => slotProps.onUpdateValue((event.target as HTMLInputElement).value)}
                             onBlur={slotProps.onBlur}
                             class={[
-                                'block w-full py-2 pl-4 pr-10 rounded-md border focus:outline-none focus:ring-1',
+                                'block w-full py-2 pl-4 pr-10 rounded-md border focus:outline-hidden focus:ring-1',
                                 props.disabled ? 'text-default-300 ' : 'text-default-900 ',
                                 slotProps.error
                                     ? 'border-red-500 focus:border-red-500 focus:ring-red-500'

package/src/lib/components/NSuggestionList.tsx

@@ -179,7 +179,7 @@ const Component = createComponentWithSlots('NSuggestionList', nSuggestionListPro
                                 <li
                                     key={item.id}
                                     class={[
-                                        'focus:outline-none hover:bg-default-50 rounded-md select-none p-2 cursor-pointer',
+                                        'focus:outline-hidden hover:bg-default-50 rounded-md select-none p-2 cursor-pointer',
                                         selectedIndex.value === index ? 'bg-default-50' : '',
                                     ]}
                                     onMousedown={onListMouseDown}

package/src/lib/components/NTable.css

@@ -1,3 +1,5 @@
+@reference "../../demo/App.css";
+
 .table-heading {
     @apply text-left text-xs font-medium text-default-500 uppercase tracking-wider;
 }

package/src/lib/components/NTableAction.tsx

@@ -31,7 +31,7 @@ const Component = createComponent('NTableAction', nTableActionProps, (props, { s
     const content = () => slots.default?.() || <>{props.text}</>
 
     const classes = [
-        'text-left font-medium focus:outline-none focus-visible:ring-2 focus-visible:ring-default-900 rounded-sm ring-offset-2 text-default-900 hover:underline hover:text-default-700',
+        'text-left font-medium focus:outline-hidden focus-visible:ring-2 focus-visible:ring-default-900 rounded-xs ring-offset-2 text-default-900 hover:underline hover:text-default-700 cursor-pointer',
     ]
 
     return () =>

package/src/lib/components/NTextArea.tsx

@@ -134,7 +134,7 @@ const NTextAreaBase = createComponent('NTextAreaBase', nTextAreaBaseProps, (prop
                         onBlur={() => props.onBlur?.()}
                         onInvalid={event => event.preventDefault()}
                         class={[
-                            'block w-full rounded-md border focus:outline-none focus:ring-1 ',
+                            'block w-full rounded-md border focus:outline-hidden focus:ring-1 ',
                             props.disabled
                                 ? 'text-default-500 placeholder-default-300 bg-default-50'
                                 : 'text-default-900 placeholder-default-400 ',

package/src/lib/components/NTooltip.css

@@ -1,3 +1,5 @@
+@reference "../../demo/App.css";
+
 .arrow,
 .arrow::before {
     position: absolute;

package/src/lib/components/NTooltip.tsx

@@ -55,6 +55,14 @@ export const nTooltipProps = {
      * to target the arrow (which is the before element).
      */
     arrowClass: String,
+    /**
+     * The delay in milliseconds before the tooltip is shown.
+     * @default 0
+     */
+    delay: {
+        type: Number,
+        default: 0,
+    },
 } as const
 
 /**
@@ -103,6 +111,10 @@ export const nToolTipPropsForImplementor = {
      * @see {@link nTooltipProps.arrowClass}
      */
     tooltipArrowClass: nTooltipProps.arrowClass,
+    /**
+     * @see {@link nTooltipProps.delay}
+     */
+    tooltipDelay: nTooltipProps.delay,
 }
 
 /**
@@ -120,6 +132,7 @@ export function mapTooltipProps(props: ExtractedProps<typeof nToolTipPropsForImp
         wrapperClass: props.tooltipWrapperClass,
         contentClass: props.tooltipContentClass,
         arrowClass: props.tooltipArrowClass,
+        delay: props.tooltipDelay,
     }
 }
 
@@ -179,7 +192,12 @@ const NTooltipBase = createComponent('NTooltipBase', nTooltipProps, (props, { sl
     }
 
     onMounted(createTooltip)
-    onUnmounted(destroyTooltip)
+    onUnmounted(() => {
+        if (hoverTimeout) {
+            clearTimeout(hoverTimeout)
+        }
+        destroyTooltip()
+    })
 
     watch(
         () => props.placement,
@@ -189,14 +207,35 @@ const NTooltipBase = createComponent('NTooltipBase', nTooltipProps, (props, { sl
     const isHoveringContent = ref(false)
     const isHoveringTooltip = ref(false)
     const isHovering = computed(() => isHoveringContent.value || isHoveringTooltip.value)
-    const showTooltip = computed(() => props.show || (!props.hide && isHovering.value))
+    const delayedIsHovering = ref(false)
+    let hoverTimeout: ReturnType<typeof setTimeout> | null = null
+
+    const showTooltip = computed(
+        () => props.show || (!props.hide && (props.delay > 0 ? delayedIsHovering.value : isHovering.value))
+    )
+
+    watch(isHovering, hovering => {
+        if (hoverTimeout) {
+            clearTimeout(hoverTimeout)
+            hoverTimeout = null
+        }
+
+        if (hovering && props.delay > 0) {
+            hoverTimeout = setTimeout(() => {
+                delayedIsHovering.value = true
+                hoverTimeout = null
+            }, props.delay)
+        } else {
+            delayedIsHovering.value = hovering
+        }
+    })
 
     watchRef(showTooltip, () => popperInstance?.update())
 
     return () => (
         <>
             <div
-                class="p-[10px] -m-[10px]"
+                class="p-[10px] m-[-10px]"
                 onMouseleave={() => setTimeout(() => (isHoveringContent.value = false), 10)}
             >
                 <div id={contentId} onMouseenter={() => (isHoveringContent.value = true)}>