@imaginario27/air-ui-ds 1.14.0 → 1.14.1

package/CHANGELOG.md

@@ -5,6 +5,17 @@ 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.14.0 - 2026-06-16
+
+Release type: minor.
+Commits found in range: 1.
+
+### Added
+
+1. add CheckboxGroupField and refactor checkbox components ([da239fc](https://github.com/imaginario27/air-ui/commit/da239fcfb515038233a56089fcee4924081826f5))
+
+- Package: @imaginario27/air-ui-ds.
+
 ## 1.13.13 - 2026-06-16
 
 Release type: patch.

package/components/buttons/toggle/ToggleButton.vue

@@ -13,6 +13,7 @@
             gapClass,
             disabled ? 'opacity-disabled cursor-not-allowed' : '',
             'self-start',
+            !transparent && 'bg-background-container-surface',
         ]"
         @click="emitClick"
     >
@@ -63,6 +64,10 @@ const props = defineProps({
         default: false,
     },
     ariaLabel: String as PropType<string>,
+    transparent: {
+        type: Boolean as PropType<boolean>,
+        default: false,
+    },
 })
 
 // Emits

package/components/buttons/toggle/ToggleButtonGroup.vue

@@ -5,7 +5,7 @@
         :aria-label="ariaLabel || 'Toggle options'"
         :class="[
             'flex',
-            groupStyle === ToggleButtonGroupStyle.GROUPED ? 'border border-border-default' : 'flex-wrap gap-3',
+            groupStyle === ToggleButtonGroupStyle.GROUPED ? '' : 'flex-wrap gap-3',
             'w-fit',
             'rounded-button'
         ]"
@@ -21,11 +21,8 @@
                 :icon="button.icon"
                 :iconPosition="'iconPosition' in button ? button.iconPosition : undefined"
                 :disabled
-                :class="[
-                    groupStyle === ToggleButtonGroupStyle.SEGMENTED && hasButtonBorder && 'border border-border-default rounded-button',
-                    groupStyle === ToggleButtonGroupStyle.SEGMENTED && button.active && '!border-border-primary-brand-active',
-                    !hasButtonBorder && 'rounded-button',
-                ]"
+                :transparent
+                :class="buttonItemClass(button)"
                 @click="!disabled && handleButtonClick(button)"
             />
         </template>
@@ -38,11 +35,8 @@
                 :size="button.size"
                 :icon="button.icon"
                 :disabled
-                :class="[
-                    groupStyle === ToggleButtonGroupStyle.SEGMENTED && hasButtonBorder && 'border border-border-default rounded-button',
-                    groupStyle === ToggleButtonGroupStyle.SEGMENTED && button.active && '!border-border-primary-brand-active',
-                    !hasButtonBorder && 'rounded-button',
-                ]"
+                :transparent
+                :class="buttonItemClass(button)"
                 @click="!disabled && handleButtonClick(button)"
             />
         </template>
@@ -51,7 +45,7 @@
 
 <script setup lang="ts">
 // Props
-defineProps({
+const props = defineProps({
     id: String as PropType<string>,
     ariaLabel: String as PropType<string>,
     modelValue: {
@@ -90,11 +84,35 @@ defineProps({
         type: Boolean as PropType<boolean>,
         default: false,
     },
+    transparent: {
+        type: Boolean as PropType<boolean>,
+        default: false,
+    },
 })
 
 // Emits
 const emit = defineEmits(['update:modelValue'])
 
+// Computed classes
+const groupedButtonClass = computed(() =>
+    props.groupStyle === ToggleButtonGroupStyle.GROUPED
+        ? 'border-y border-r border-border-default rounded-none first:border-l first:rounded-l-button last:rounded-r-button'
+        : false
+)
+
+const segmentedButtonClass = computed(() =>
+    props.groupStyle === ToggleButtonGroupStyle.SEGMENTED && props.hasButtonBorder
+        ? 'border border-border-default rounded-button'
+        : false
+)
+
+const buttonItemClass = (button: ToggleButtonItem) => [
+    groupedButtonClass.value,
+    segmentedButtonClass.value,
+    props.groupStyle === ToggleButtonGroupStyle.SEGMENTED && button.active && '!border-border-primary-brand-active',
+    !props.hasButtonBorder && 'rounded-button',
+]
+
 // Handlers
 const handleButtonClick = (button: ToggleButtonItem) => {
     if (button?.action) {

package/components/buttons/toggle/ToggleIconButton.vue

@@ -11,6 +11,7 @@
             buttonSizeClass,
             disabled ? 'opacity-disabled cursor-not-allowed' : '',
             'self-start',
+            !transparent && 'bg-background-container-surface',
         ]"
         @click="emitClick"
     >
@@ -42,6 +43,10 @@ const props = defineProps({
         default: false,
     },
     ariaLabel: String as PropType<string>,
+    transparent: {
+        type: Boolean as PropType<boolean>,
+        default: false,
+    },
 })
 
 // Emits

package/components/dropdowns/DropdownMenu.vue

@@ -45,7 +45,7 @@
                         ]"
                         :style="{ 
                             ...computedTeleportStyle, 
-                            zIndex: props.zIndex 
+                            zIndex: zIndex 
                         }"
                         @mouseenter="onDropdownMouseEnter"
                         @mouseleave="onDropdownMouseLeave"
@@ -151,7 +151,7 @@
                     ]"
                     :style="{ 
                         ...(!positionClass ? positionOffsetStyle : {}), 
-                        zIndex: props.zIndex 
+                        zIndex: zIndex 
                     }"
                     @mouseenter="onDropdownMouseEnter"
                     @mouseleave="onDropdownMouseLeave"
@@ -304,6 +304,10 @@ const props = defineProps({
         type: [String, Object] as PropType<PrefetchOnStrategy>,
         default: PrefetchOn.VISIBILITY,
     },
+    isSticky: {
+        type: Boolean as PropType<boolean>,
+        default: false,
+    },
 })
 
 // Refs
@@ -491,14 +495,23 @@ const computedTeleportStyle = computed<CSSProperties>(() => {
     if (secondary === 'top') top = a.top
     if (secondary === 'bottom') top = a.bottom - d.height
 
-    return {
-        position: 'absolute',
-        top: `${top + window.scrollY}px`,
-        left: `${left + window.scrollX}px`,
-        width: `${a.width}px`,
-        visibility: 'visible',
-        zIndex: props.zIndex,
-    }
+    return props.isSticky
+        ? {
+            position: 'fixed',
+            top: `${top}px`,
+            left: `${left}px`,
+            width: `${a.width}px`,
+            visibility: 'visible',
+            zIndex: props.zIndex,
+        }
+        : {
+            position: 'absolute',
+            top: `${top + window.scrollY}px`,
+            left: `${left + window.scrollX}px`,
+            width: `${a.width}px`,
+            visibility: 'visible',
+            zIndex: props.zIndex,
+        }
 })
 
 // Styles for non-teleported dropdown

package/components/forms/fields/ToggleButtonsGroupField.vue

@@ -33,6 +33,7 @@
             :groupStyle
             :disabled
             :onlyIcon
+            :transparent
             @update:modelValue="emit('update:modelValue', $event)"
         />
 
@@ -73,6 +74,10 @@ defineProps({
         type: Boolean as PropType<boolean>,
         default: false,
     },
+    transparent: {
+        type: Boolean as PropType<boolean>,
+        default: false,
+    },
 })
 
 // Emits

package/components/forms/fields/checkbox/CheckboxGroupField.vue

@@ -20,17 +20,12 @@
             :error="error"
         />
 
-        <div
-            :class="[
-                orientation === Orientation.VERTICAL
-                    ? 'flex flex-col gap-4'
-                    : [
-                        'w-full',
-                        'grid gap-4',
-                        'grid-cols-1',
-                        'sm:grid-cols-2',
-                    ]
-            ]"
+        <Grid
+            v-if="layout === ListLayout.GRID"
+            :cols="gridCols"
+            :tabletCols="gridTabletCols"
+            :mobileCols="gridMobileCols"
+            :gapClass="gridGapClass"
         >
             <CheckboxField
                 v-for="option in options"
@@ -43,8 +38,35 @@
                 :disabled="option.disabled ? option.disabled : disabled"
                 :helpText="option.helpText"
                 :inverse="inverse"
-                @update:modelValue="handleChange(option.value, $event)"
+                @update:model-value="handleChange(option.value, $event)"
             />
+        </Grid>
+
+        <div
+            v-else
+            :class="[
+                orientation === Orientation.VERTICAL
+                    ? ['flex flex-col gap-4', listClass]
+                    : ['flex flex-wrap gap-6', listClass]
+            ]"
+        >
+            <div
+                v-for="option in options"
+                :key="option.id"
+                :class="orientation === Orientation.HORIZONTAL ? 'w-fit' : 'w-full'"
+            >
+                <CheckboxField
+                    :id="option.id.toString()"
+                    :modelValue="isChecked(option.value)"
+                    :label="option.label"
+                    :ariaLabel="option.ariaLabel"
+                    :required
+                    :disabled="option.disabled ? option.disabled : disabled"
+                    :helpText="option.helpText"
+                    :inverse="inverse"
+                    @update:model-value="handleChange(option.value, $event)"
+                />
+            </div>
         </div>
 
         <!-- Help Text or Error Message (bottom) -->
@@ -101,6 +123,28 @@ const props = defineProps({
         default: Orientation.VERTICAL,
         validator: (value: Orientation) => Object.values(Orientation).includes(value),
     },
+    layout: {
+        type: String as PropType<ListLayout>,
+        default: ListLayout.LIST,
+        validator: (value: ListLayout) => Object.values(ListLayout).includes(value),
+    },
+    gridCols: {
+        type: Number as PropType<number>,
+        default: 3,
+    },
+    gridTabletCols: {
+        type: Number as PropType<number>,
+        default: 2,
+    },
+    gridMobileCols: {
+        type: Number as PropType<number>,
+        default: 1,
+    },
+    gridGapClass: {
+        type: String as PropType<string>,
+        default: 'gap-4',
+    },
+    listClass: String as PropType<string>,
 })
 
 // Emits

package/components/layouts/headers/CompactHeader.vue

@@ -1,7 +1,7 @@
 <template>
     <header 
         :class="[
-            isSticky && 'sticky top-0 z-50',
+            isSticky && 'sticky top-0 z-40',
         ]"
     >
         <slot name="top-header" />
@@ -82,10 +82,11 @@
                 </div>
 
                 <!-- User Menu -->
-                <DropdownMenu 
+                <DropdownMenu
                     v-if="userMenuItems.length && userFullname"
                     class="min-w-[200px]"
                     :positionYOffset="submenuYOffset"
+                    :isSticky
                 >
                     <template #activator>
                         <Avatar 
@@ -114,9 +115,10 @@
 
                 <!-- Mobile menu -->
                 <template v-if="isMobile && showMobileMenuToggle">
-                    <DropdownMenu 
+                    <DropdownMenu
                         :class="navMobileMenuClass"
                         :positionYOffset="submenuYOffset"
+                        :isSticky
                     >
                         <template #activator>
                             <ActionIconButton

package/package.json

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