@meistrari/tela-build 1.54.0 → 1.55.0

package/components/tela/combobox/combobox-trigger.vue

@@ -13,14 +13,17 @@ const delegatedProps = reactiveOmit(props, 'class')
     <ComboboxTrigger
         v-bind="delegatedProps"
         :class="cn(
-            'group select-none flex items-center justify-between body-14-semibold gap-3 rounded-10px pl-11px pr-10px py-7px bg-white border-0.5px border transition hover:border-strong hover:bg-subtle',
-            'data-[state=open]:text-secondary data-[state=open]:border-strong data-[state=open]:bg-subtle',
-            '[box-shadow:0_1px_6px_0_rgba(103,127,148,0.05)]',
+            !props.asChild && [
+                'group select-none flex items-center justify-between body-14-semibold gap-3 rounded-10px pl-11px pr-10px py-7px bg-white border-0.5px border transition hover:border-strong hover:bg-subtle',
+                'data-[state=open]:text-secondary data-[state=open]:border-strong data-[state=open]:bg-subtle',
+                '[box-shadow:0_1px_6px_0_rgba(103,127,148,0.05)]',
+            ],
             props.class,
         )"
     >
         <slot />
         <TelaIcon
+            v-if="!props.asChild"
             name="i-ph-caret-down-bold"
             size="15px"
             color="icon-secondary"

package/components/tela/combobox/combobox.mdx

@@ -217,6 +217,7 @@ type ComboboxProps = {
     backgroundClass: string
   }
   compact?: boolean
+  align?: 'start' | 'center' | 'end'
   hasGroupingLabels?: boolean
   colorIcon?: string
   disablePortal?: boolean

package/components/tela/combobox/combobox.stories.ts

@@ -60,6 +60,11 @@ const meta: Meta<typeof Combobox> = {
             control: 'boolean',
             description: 'Whether to use compact spacing and sizing. Defaults to true. When false, uses larger padding and spacing.',
         },
+        align: {
+            control: 'select',
+            options: ['start', 'center', 'end'],
+            description: 'Alignment of the dropdown content against the trigger. Defaults to "start".',
+        },
         hasGroupingLabels: {
             control: 'boolean',
             description: 'Whether to display group labels when options are grouped. Defaults to true. Only shown when search is empty.',

package/components/tela/combobox/combobox.vue

@@ -35,6 +35,7 @@ const props = withDefaults(defineProps<{
         backgroundClass: string
     }
     compact?: boolean
+    align?: 'start' | 'center' | 'end'
     hasGroupingLabels?: boolean
     colorIcon?: string
     disablePortal?: boolean
@@ -63,6 +64,7 @@ const props = withDefaults(defineProps<{
     labelOutputMax?: string
 }>(), {
     compact: true,
+    align: 'start',
     hasGroupingLabels: true,
     disablePortal: false,
     contentClass: '',
@@ -347,7 +349,7 @@ watch(innerValue, (raw) => {
                 </div>
             </TelaComboboxTrigger>
         </TelaComboboxAnchor>
-        <TelaComboboxList :class="cn('z-999', compact ? 'w-440px' : 'w-327px', props.contentClass)" :disable-portal="props.disablePortal" align="start">
+        <TelaComboboxList :class="cn('z-999', compact ? 'w-440px' : 'w-327px', props.contentClass)" :disable-portal="props.disablePortal" :align="align">
             <TelaComboboxInput
                 v-if="hasSearchbar"
                 v-model="search"

package/components/tela/icon-button/icon-button.vue

@@ -33,9 +33,9 @@ const style = computed(() => {
     const size = ({
         '3xs': 'text-6px p-1 rounded-8px',
         '2xs': 'text-8px p-4px rounded-4px', // 16px
-        'xs': 'text-12px p-6px rounded-6px', // 24px
-        'sm': 'text-16px p-0.4em rounded-8px', // 32px
-        'md': 'text-20px p-0.4em rounded-10px', // 44px
+        'xs': 'text-12px p-6px rounded-6px', // 26px
+        'sm': 'text-16px p-6px rounded-8px', // 32px
+        'md': 'text-20px p-6.4px rounded-10px', // 44px
     } as Record<typeof props.size, string>)[props.size]
 
     const color = ({

package/components/tela/icon.vue

@@ -13,7 +13,7 @@ const iconSize = computed(() => {
         case 'xs':
             return '8px'
         case 'sm':
-            return '12px'
+            return '14px'
         case '17px':
             return '17px'
         case '20px':
@@ -23,6 +23,7 @@ const iconSize = computed(() => {
         case 'xl':
             return '32px'
         case 'md':
+            return '20px'
         default:
             return '16px'
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@meistrari/tela-build",
-  "version": "1.54.0",
+  "version": "1.55.0",
   "type": "module",
   "files": [
     "app.config.ts",