@meistrari/tela-build 1.31.0 → 1.33.0

package/components/tela/dropdown-menu/DropdownMenu.vue

@@ -1,12 +1,15 @@
 <script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import type { TooltipProps } from '../tooltip/tooltip.vue'
+
 import { VisuallyHidden } from 'radix-vue'
+
 import DropdownMenuRoot from './DropdownMenuRoot.vue'
 import DropdownMenuContent from './DropdownMenuContent.vue'
 import DropdownMenuGroup from './DropdownMenuGroup.vue'
 import DropdownMenuItem from './DropdownMenuItem.vue'
 import DropdownMenuLabel from './DropdownMenuLabel.vue'
 import DropdownMenuTrigger from './DropdownMenuTrigger.vue'
-import type { TooltipProps } from '../tooltip/tooltip.vue'
 
 const props = withDefaults(defineProps<{
     items: {
@@ -27,7 +30,8 @@ const props = withDefaults(defineProps<{
     allowSearch?: boolean
     searchPlaceholder?: string
     shouldBeModal?: boolean
-    contentClass?: string
+    triggerClass?: HTMLAttributes['class']
+    contentClass?: HTMLAttributes['class']
     align?: 'start' | 'end' | 'center'
 }>(), {
     align: 'start',
@@ -66,7 +70,7 @@ function onToggle(open: boolean) {
 <template>
     <div data-allow-mismatch @click.stop>
         <DropdownMenuRoot :modal="shouldBeModal" :default-open="isStorybook" @update:open="onToggle">
-            <DropdownMenuTrigger as-child class="data-[state=open]:bg-gray-100" @click.prevent.stop>
+            <DropdownMenuTrigger as-child :class="cn('data-[state=open]:bg-muted', triggerClass)" @click.prevent.stop>
                 <slot />
                 <VisuallyHidden v-if="isStorybook" as-child>
                     <button />

package/components/tela/header/trailing/pagination/pagination-next-button.vue

@@ -14,7 +14,7 @@ const emit = defineEmits<{
         size="md"
         color="secondary"
         :icon-class="disabled ? 'text-icon-subtle' : 'text-icon'"
-        button-class="!disabled:bg-transparent"
+        button-class="!rounded-12px !disabled:bg-transparent"
         :disabled="disabled"
         @click="emit('click')"
     />

package/components/tela/header/trailing/pagination/pagination-prev-button.vue

@@ -14,7 +14,7 @@ const emit = defineEmits<{
         size="md"
         color="secondary"
         :icon-class="disabled ? 'text-icon-subtle' : 'text-icon'"
-        button-class="!disabled:bg-transparent"
+        button-class="!rounded-12px !disabled:bg-transparent"
         :disabled="disabled"
         @click="emit('click')"
     />

package/components/tela/header/trailing/trailing-actions.vue

@@ -18,6 +18,7 @@ defineProps<{
             size="md"
             color="secondary"
             icon="i-ph-dots-three-bold"
+            button-class="!rounded-12px"
             icon-class="text-neutral-950"
         />
     </TelaDropdownMenu>

package/components/tela/initials.vue

@@ -15,7 +15,7 @@ const sizeStyles = computed(() => {
         case 'sm':
             return 'w-32px h-32px text-16px'
         case 'md':
-            return 'w-40px h-40px text-18px'
+            return 'w-40px h-40px text-20px'
         case 'lg':
             return 'w-64px h-64px text-28px'
         case 'xl':

package/components/tela/input/tela-input.vue

@@ -123,10 +123,10 @@ defineExpose({
             transition
             cursor-text
             overflow-hidden
-            px-3 py-8px
-            b="0.5px border-strong"
+            px-10px py-4px
+            b="0.5px border"
             rounded-10px bg-white
-            class="focus-within-b-gray-400 focus-within-ring-2 focus-within-ring-gray-100"
+            class="focus-within-border-strong focus-within-ring-2 focus-within-ring-gray-100 [box-shadow:0_1px_4px_0_rgba(103,127,148,0.03)]"
             :class="[
                 size === 'sm' && 'py-7px !px-12px',
                 disabled && '!bg-gray-50 cursor-not-allowed color-gray-600',
@@ -137,8 +137,8 @@ defineExpose({
             flex items-center
             @click="$el.querySelector(isTextarea ? 'textarea' : 'input')?.focus()"
         >
-            <div v-if="icon" flex mr-6px>
-                <TelaIcon :name="icon" size="sm" text="gray-400" />
+            <div v-if="icon" flex mr-8px>
+                <TelaIcon :name="icon" size="13px" text="icon-tertiary" />
             </div>
             <div
                 flex="~ col" grow align-center h-full
@@ -155,7 +155,6 @@ defineExpose({
                     align-center
                     :class="[disabled && 'cursor-not-allowed', props.labelClass]"
                 >
-
                     <slot name="label-leading" />
                     {{ label }}
                 </label>
@@ -175,13 +174,13 @@ defineExpose({
                     bg-transparent
                     z-0
                     h-full
-                    class="placeholder-gray-300 focus-visible:outline-none! leading-170% tracking-.01em"
+                    body-14-regular
+                    class="placeholder-text-tertiary focus-visible:outline-none!"
                     resize-none
                     :disabled="disabled"
                     :tabindex="tabindex"
                     :class="[
                         disabled && 'cursor-not-allowed',
-                        size === 'sm' && 'leading-20px body-14-regular placeholder:body-14-regular',
                         props.inputFontClass ? props.inputFontClass : 'text-14px',
                         !isTextarea && '!h-1.7em',
                     ]"

package/components/tela/menubar/menubar-content.vue

@@ -14,7 +14,7 @@ const props = withDefaults(
     {
         align: 'start',
         alignOffset: 0,
-        sideOffset: 8,
+        sideOffset: 4,
         disablePortal: false,
     },
 )

package/components/tela/menubar/menubar-item.vue

@@ -22,7 +22,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
     <MenubarItem
         v-bind="forwarded"
         :class="cn(
-            'relative flex cursor-pointer select-none items-center rounded-xl px-3 py-1.5 text-body-14-medium font-460 outline-none focus:bg-muted data-[disabled]:pointer-events-none data-[disabled]:opacity-40',
+            'relative flex cursor-pointer select-none items-center rounded-xl px-3 py-1.5 body-14-medium text-primary outline-none focus:bg-muted data-[disabled]:pointer-events-none data-[disabled]:opacity-40',
             inset && 'pl-8',
             props.class,
         )"

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

@@ -17,7 +17,7 @@ const forwardedProps = useForwardProps(delegatedProps)
         v-bind="forwardedProps"
         :class="
             cn(
-                'flex items-center gap-2 cursor-pointer select-none px-2 py-1.5 text-sm font-medium outline-none rounded-lg hover:bg-lowered data-[state=open]:bg-lowered',
+                'flex items-center gap-2 cursor-pointer select-none px-2 py-1.5 text-sm font-medium outline-none rounded-lg hover:bg-muted data-[state=open]:bg-muted',
                 props.class,
             )
         "

package/components/tela/scroll-area/scroll-area.vue

@@ -1,34 +1,43 @@
 <script setup lang="ts">
+import type { ScrollAreaRootProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+
+import { computed, onMounted, useTemplateRef } from 'vue'
+
 import {
     ScrollAreaCorner,
     ScrollAreaRoot,
-
     ScrollAreaViewport,
 } from 'reka-ui'
-import type { ScrollAreaRootProps } from 'reka-ui'
-import { computed } from 'vue'
-import type { HTMLAttributes } from 'vue'
+
 import ScrollBar from './scroll-bar.vue'
 
 const props = withDefaults(
     defineProps<ScrollAreaRootProps
-    & { class?: HTMLAttributes['class'], orientation?: 'vertical' | 'horizontal' | 'both', scrollThumbClass?: HTMLAttributes['class'] }>(),
+    & { class?: HTMLAttributes['class'], orientation?: 'vertical' | 'horizontal' | 'both', scrollThumbClass?: HTMLAttributes['class'], disableViewportFocus?: boolean }>(),
     {
         orientation: 'vertical',
-        scrollThumbClass: '',
+        disableViewportFocus: false,
     },
 )
 
 const delegatedProps = computed(() => {
-    const { class: _, ...delegated } = props
+    const { class: _, disableViewportFocus: __, ...delegated } = props
 
     return delegated
 })
+
+const viewportRef = useTemplateRef<InstanceType<typeof ScrollAreaViewport>>('viewportRef')
+
+onMounted(() => {
+    if (props.disableViewportFocus)
+        viewportRef.value?.viewportElement?.setAttribute('tabindex', '-1')
+})
 </script>
 
 <template>
     <ScrollAreaRoot v-bind="delegatedProps" :class="cn('relative overflow-hidden', props.class)">
-        <ScrollAreaViewport class="h-full w-full rounded-[inherit]">
+        <ScrollAreaViewport ref="viewportRef" class="size-full rounded-[inherit] focus-visible:outline-border-strong">
             <slot />
         </ScrollAreaViewport>
         <ScrollBar v-if="props.orientation === 'vertical' || props.orientation === 'both'" orientation="vertical" :class="props.scrollThumbClass" />

package/components/tela/sidebar/sidebar-item.vue

@@ -7,39 +7,54 @@ const props = defineProps<{
     to?: string
     onClick?: () => void
     isActive: boolean
+    disabled?: boolean
 }>()
 
 const iconName = computed(() => props.isActive ? `${props.icon}-fill` : props.icon)
+
+const rootIs = computed(() => props.disabled || !props.to ? 'button' : NuxtLink)
+
+const rootAttrs = computed(() => {
+    if (props.disabled || !props.to) {
+        return {
+            type: 'button',
+            disabled: props.disabled || undefined,
+            ...(!props.disabled && props.onClick ? { onClick: props.onClick } : {}),
+        }
+    }
+    return { to: props.to }
+})
 </script>
 
 <template>
     <component
-        :is="to ? NuxtLink : 'button'"
-        :to="to"
-        :type="!to ? 'button' : undefined"
-        class="group"
+        :is="rootIs"
+        v-bind="rootAttrs"
+        class="group disabled:opacity-60 disabled:cursor-not-allowed"
         flex="~ col" items-center justify-center gap-2px outline-none
-        :data-active="isActive"
-        v-bind="!to && onClick ? { onClick } : {}"
+        :data-active="isActive && !props.disabled"
     >
         <div relative size-40px flex items-center justify-center rounded-10px>
             <TelaIcon
                 :name="iconName"
                 size="20px"
                 relative z-1
-                :color="isActive ? 'icon' : 'icon-tertiary duration-150 ease-out group-hover:icon group-focus-within:icon'"
+                color="icon-tertiary duration-150 ease-out group-[:hover:not(:disabled)]:icon group-focus-visible:icon group-data-[active=true]:icon"
             />
             <div
                 :class="cn(
-                    'absolute inset-0 size-full rounded-[14px] z-0 border-[0.5px] border-transparent',
-                    isActive ? 'bg-neutral-200 group-focus-within:border-strong' : 'bg scale-10 opacity-0 duration-150 ease-out origin-center group-hover:border-strong group-hover:scale-100 group-hover:opacity-100 group-focus-within:border-strong group-focus-within:scale-100 group-focus-within:opacity-100',
+                    'absolute inset-0 size-full rounded-[14px] z-0 border-[0.5px] border-transparent duration-150 ease-out origin-center group-disabled:scale-0',
+                    'group-data-[active=false]:bg group-data-[active=false]:scale-10 group-data-[active=false]:opacity-0',
+                    'group-data-[active=true]:bg-neutral-200 group-focus-visible:border-strong group-[[data-active=false]:hover]:border-strong group-hover:scale-100 group-hover:opacity-100',
+                    'group-focus-visible:border-strong group-focus-visible:scale-100 group-focus-visible:opacity-100',
                 )"
             />
         </div>
         <p
             :class="cn(
-                'text-[11px] leading-[12px] -tracking-0.2px',
-                isActive ? 'text-primary font-550' : 'font-460 text-tertiary duration-150 ease-out group-hover:text-primary group-focus-within:text-primary',
+                'text-[11px] leading-[12px] -tracking-0.2px font-460 text-tertiary duration-150 ease-out',
+                'group-[:hover:not(:disabled)]:text-primary group-focus-visible:text-primary',
+                'group-data-[active=true]:text-primary group-data-[active=true]:font-550',
             )"
         >
             {{ label }}

package/components/tela/sidebar/sidebar-logo.vue

@@ -2,7 +2,7 @@
 import { NuxtLink } from '#components'
 
 defineProps<{
-    src?: string
+    src?: string | null
     alt: string
     to?: string
 }>()

package/components/tela/sidebar/sidebar-user.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 defineProps<{
     image?: string
-    name: string
-    email: string
+    name?: string
+    email?: string
     actions: {
         label: string
         icon: string

package/components/tela/sidebar/sidebar.mdx

@@ -57,6 +57,10 @@ A composable sidebar navigation system built from focused sub-components. Fixed
 
 <Canvas of={SidebarStories.NoActiveItem} />
 
+### Disabled Items
+
+<Canvas of={SidebarStories.DisabledItems} />
+
 ### Individual Item States
 
 <Canvas of={SidebarStories.SingleItem} />
@@ -98,6 +102,7 @@ interface TelaSidebarItemProps {
     isActive: boolean     // Highlights the item as the current route
     to?: string           // Route path — renders as a link
     onClick?: () => void  // Click handler when not using `to`
+    disabled?: boolean    // Renders as a non-interactive button with reduced opacity
 }
 ```
 

package/components/tela/sidebar/sidebar.stories.ts

@@ -168,6 +168,66 @@ export const ActivityActive: Story = {
     }),
 }
 
+export const DisabledItems: Story = {
+    parameters: {
+        docs: {
+            description: {
+                story: 'Disabled items render as non-interactive buttons with reduced opacity. The `to` prop is ignored when `disabled` is `true`.',
+            },
+        },
+    },
+    render: () => ({
+        components,
+        setup() {
+            return { userActions }
+        },
+        template: `
+            <TelaSidebar>
+                <TelaSidebarHeader>
+                    <TelaSidebarLogo src="/tela-logo-black.svg" alt="Tela Logo" />
+                </TelaSidebarHeader>
+
+                <TelaSidebarContent>
+                    <TelaSidebarItem
+                        icon="i-ph-house"
+                        label="Home"
+                        to="/"
+                        :is-active="true"
+                    />
+                    <TelaSidebarItem
+                        icon="i-ph-graph"
+                        label="Workflows"
+                        to="/workflows"
+                        :is-active="false"
+                        disabled
+                    />
+                    <TelaSidebarItem
+                        icon="i-ph-database"
+                        label="Data"
+                        to="/data"
+                        :is-active="false"
+                        disabled
+                    />
+                    <TelaSidebarItem
+                        icon="i-ph-gear"
+                        label="Settings"
+                        to="/settings"
+                        :is-active="false"
+                    />
+                </TelaSidebarContent>
+
+                <TelaSidebarFooter>
+                    <TelaSidebarUser
+                        name="Username"
+                        email="user@example.com"
+                        :actions="userActions"
+                    />
+                </TelaSidebarFooter>
+            </TelaSidebar>
+        `,
+    }),
+}
+
 export const SingleItem: Story = {
     parameters: {
         layout: 'centered',

package/components/tela/tags/tags-select.mdx

@@ -97,7 +97,9 @@ function clearAll() {
 </template>
 ```
 
-### Read-Only Display
+### Non-Editable (selection only)
+
+Pass `:is-editable="false"` to hide the create button (`+`) and the per-tag edit pencil. Users can still select/deselect existing tags, but cannot create new ones or modify existing ones.
 
 ```vue
 <script setup>
@@ -112,6 +114,7 @@ const tags = ref([
   <TelaTagsSelect
     :model-value="tags"
     :options="tags"
+    :is-editable="false"
   />
 </template>
 ```
@@ -143,6 +146,7 @@ type TagsSelectProps = {
   addNewNamePlaceholder?: string
   createButtonLabel?: string
   saveChangesButtonLabel?: string
+  isEditable?: boolean  // Default: true. When false, hides the create (+) button and the per-tag edit pencil.
 }
 ```
 

package/components/tela/tags/tags-select.vue

@@ -24,6 +24,7 @@ const props = withDefaults(defineProps<{
     assignLabel?: string
     showLabel?: boolean
     alwaysShowEmpty?: boolean
+    isEditable?: boolean
 }>(), {
     modelValue: () => [],
     disabled: false,
@@ -41,6 +42,7 @@ const props = withDefaults(defineProps<{
     tagPlural: 'tags',
     showLabel: true,
     alwaysShowEmpty: false,
+    isEditable: true,
 })
 
 const emit = defineEmits<{
@@ -141,7 +143,7 @@ function resolveColor(color: string, lightColor = false): string {
 const allCreatedTags = ref<Tag[]>([])
 const localSelectedTags = ref<Tag[]>(props.modelValue || [])
 const popoverOpen = ref(false)
-const selectedContent = ref<ContentType>(allCreatedTags.value.length > 0 ? 'existing-tag' : 'new-tag')
+const selectedContent = ref<ContentType>(allCreatedTags.value.length > 0 || !props.isEditable ? 'existing-tag' : 'new-tag')
 const newTagName = ref<string>('')
 const selectedColorsForNewTag = ref<string | null>(ALL_COLORS[0])
 const selectedTagsForApply = ref<Set<string>>(new Set())
@@ -247,7 +249,7 @@ watch(() => props.modelValue, (newTags) => {
 
 watch(popoverOpen, (isOpen) => {
     if (isOpen) {
-        selectedContent.value = hasTags.value ? 'existing-tag' : 'new-tag'
+        selectedContent.value = hasTags.value || !props.isEditable ? 'existing-tag' : 'new-tag'
         selectedTagsForApply.value = getTagKeys(localSelectedTags.value)
     }
     else {
@@ -574,7 +576,7 @@ updateAllCreatedTags()
                                             <h5 heading-h5-semibold>
                                                 {{ allCreatedTags.length }} {{ allCreatedTags.length > 1 ? props.tagPlural : props.tagSingular }}
                                             </h5>
-                                            <button flex items-center justify-center w-24px h-24px rounded-6px hover:bg-background-muted mr--4px @click="handleCreateMore">
+                                            <button v-if="props.isEditable" flex items-center justify-center w-24px h-24px rounded-6px hover:bg-background-muted mr--4px @click="handleCreateMore">
                                                 <TelaIcon name="i-ph-plus" size="16px" color="icon" />
                                             </button>
                                         </div>
@@ -588,6 +590,7 @@ updateAllCreatedTags()
                                                 </div>
                                                 <div flex items-center gap-4px>
                                                     <button
+                                                        v-if="props.isEditable"
                                                         class="group opacity-0 group-hover/tag:opacity-100" flex items-center justify-center w-17px h-17px rounded-5px hover:bg-background-lowered
                                                         @click.stop="handleEditTag(tag)"
                                                     >

package/css/reset.css

@@ -383,4 +383,12 @@ Make all headers have regular font weight by default
 
 h1, h1, h2, h3, h4, h5, h6 {
   --at-apply: 'font-regular'
-}
+}
+
+/*
+Reset user-select from images
+*/
+
+img {
+    user-select: none;
+}

package/package.json

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