@imaginario27/air-ui-ds 1.12.0 → 1.12.2

package/CHANGELOG.md

@@ -5,6 +5,28 @@ All notable changes to this package are documented in this file.
 Historical releases were reconstructed from git history (GitHub repository) and npm publish dates.
 Future releases will include detailed entries generated with Changesets.
 
+## 1.12.1 - 2026-04-16
+
+Release type: patch.
+Commits found in range: 1.
+
+### Fixed
+
+1. fix NavSidebar menu items gap ([4a9cee9](https://github.com/imaginario27/air-ui/commit/4a9cee9bdede4bb3bbb1f8fc9c528bf932f62976))
+
+- Package: @imaginario27/air-ui-ds.
+
+## 1.12.0 - 2026-04-16
+
+Release type: minor.
+Commits found in range: 1.
+
+### Added
+
+1. add ContextMenu and Kbd components ([9d4acce](https://github.com/imaginario27/air-ui/commit/9d4acce4d33fefec3eeab657bebfe5a5e4ff41ea))
+
+- Package: @imaginario27/air-ui-ds.
+
 ## 1.11.0 - 2026-04-15
 
 Release type: minor.

package/components/dropdowns/DropdownSelect.vue

@@ -129,7 +129,7 @@
                             'sticky',
                             'top-0', 
                             'bg-background-container-surface', 
-                            'z-10'
+                            'z-10',
                         ]"
                     >
                         <input
@@ -144,8 +144,12 @@
                                 'border-border-default', 
                                 'rounded-sm', 
                                 'text-sm', 
-                                searchQuery ? 'text-text-default' : 'text-text-neutral-subtle'
+                                'outline-none',
+                                searchQuery ? 'text-text-default' : 'text-text-neutral-subtle',
+                                isSearchFieldFocused && 'ring-2 focus-within:ring-inset focus-within:ring-border-primary-brand-default',
                             ]"
+                            @focus="isSearchFieldFocused = true"
+                            @blur="isSearchFieldFocused = false"
                         >
                     </div>
 
@@ -320,6 +324,7 @@ const dropdownClass = computed(() => {
 const isImageLoaded = ref(true)
 const selected = ref<SelectOption[] | SelectOption | null>(props.multiple ? [] : null)
 const searchQuery = ref('')
+const isSearchFieldFocused = ref(false)
 
 // Handlers for image load and error
 const handleImageLoad = () => {

package/components/forms/fields/InputField.vue

@@ -36,7 +36,7 @@
                 inputSizeClass,
                 type === 'color' && 'w-fit',
                 hasError ? 'border-border-error text-text-error' : 'border-border-default',
-                isFocused && 'ring-2 ring-border-primary-brand-default',
+                isFocused && 'ring-2 focus-within:ring-inset focus-within:ring-border-primary-brand-default',
                 disabled ? 'bg-background-neutral-disabled' : 'bg-neutral-white',
                 disabled && 'cursor-not-allowed',
             ]"

package/components/forms/fields/PinField.vue

@@ -43,7 +43,7 @@
                     hasError
                         ? 'border-border-error'
                         : 'border-border-default',
-                    focusedIndex === index && 'ring-2 ring-border-primary-brand-default',
+                    focusedIndex === index && 'ring-2 focus-within:ring-inset focus-within:ring-border-primary-brand-default',
                     disabled
                         ? 'bg-background-neutral-disabled cursor-not-allowed'
                         : 'bg-neutral-white',

package/components/forms/fields/SearchField.vue

@@ -32,7 +32,7 @@
                 'text-text-default',
                 'border-border-default',
                 inputCustomClass,
-                isFocused && 'ring-2 ring-border-primary-brand-default',
+                isFocused && 'ring-2 ring-inset ring-border-primary-brand-default',
                 disabled ? 'bg-background-neutral-disabled cursor-not-allowed' : 'bg-neutral-white',
             ]"
         >

package/components/forms/fields/TagsField.vue

@@ -36,15 +36,14 @@
                 icon ? 'pl-3' : 'pl-4',
                 hasError ? 'pr-3' : 'pr-4',
                 hasError ? 'border-border-error text-text-error' : 'border-border-default',
-                isFocused && 'ring-2 ring-border-primary-brand-default',
+                isFocused && 'ring-2 focus-within:ring-inset focus-within:ring-border-primary-brand-default',
                 disabled ? 'bg-background-neutral-disabled' : 'bg-neutral-white',
                 disabled && 'cursor-not-allowed',
             ]"
         >
             <!-- Icon -->
-            <span class="mt-1.75">
+            <span v-if="icon" class="mt-1.75">
                 <Icon
-                    v-if="icon"
                     :name="icon"
                     iconClass="text-icon-neutral-subtler"
                 />

package/components/forms/fields/TextareaField.vue

@@ -28,7 +28,7 @@
                 minHeightClass,
                 autoResize && maxHeightClass,
                 hasError ? 'border-border-error text-text-error' : 'border-border-default',
-                isFocused && 'ring-2 ring-border-primary-brand-default',
+                isFocused && 'ring-2 focus-within:ring-inset focus-within:ring-border-primary-brand-default',
                 textareaClass,
             ]"
         >

package/components/navigation/nav-sidebar/NavSidebarMenuItem.vue

@@ -12,6 +12,7 @@
             'justify-between',
             levelTextClass,
             spacingClass,
+            nestedItemSpacingClass,
             !isActive && 'text-text-default',
             isActive && 'text-text-primary-brand-on-neutral-hover-bg bg-background-neutral-hover',
             disabled && 'opacity-disabled cursor-not-allowed pointer-events-none',
@@ -153,6 +154,15 @@ const spacingClass = computed(() => {
     return variant[props.styleType as SidebarNavMenuItemStyleType] || 'min-h-[40px] py-2 pl-3 pr-2'
 })
 
+const nestedItemSpacingClass = computed(() => {
+    const variant = {
+        [SidebarNavMenuItemStyleType.SPACED]: 'my-1',
+        [SidebarNavMenuItemStyleType.COMPACT]: 'my-0.5',
+    }
+
+    return variant[props.styleType as SidebarNavMenuItemStyleType] || 'my-0.5'
+})
+
 const gapClass = computed(() => {
     const variant = {
         [SidebarNavMenuItemStyleType.SPACED]: 'gap-3',

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@imaginario27/air-ui-ds",
-    "version": "1.12.0",
+    "version": "1.12.2",
     "author": "imaginario27",
     "type": "module",
     "homepage": "https://air-ui.netlify.app/",