@meistrari/tela-build 1.25.3 → 1.26.0

package/components/tela/badge/badge.vue

@@ -20,15 +20,15 @@ const tag = computed(() => props.to ? NuxtLink : 'div')
     <component
         :is="tag"
         :class="cn(
-            'inline-block px-[5px] rounded-[5px] select-none',
-            variant === 'outline' && 'border-[0.5px] ring-border-strong',
+            'inline-block px-[5px] py-[3px] rounded-[5px] select-none',
+            variant === 'outline' && 'border-[0.5px] border-border',
             variant === 'filled' && 'bg-lowered',
             props.class,
         )"
     >
         <span
             :class="cn(
-                'flex items-center gap-[4px] text-[9px] whitespace-nowrap font-580 leading-[16px] tracking-[0.04rem] uppercase',
+                'flex items-center gap-[4px] text-[9px] whitespace-nowrap font-580 leading-[10px] tracking-0.2px uppercase',
                 variant === 'outline' && 'text-tertiary',
                 variant === 'filled' && 'text-secondary tracking-normal',
                 textClass,

package/components/tela/button/button.vue

@@ -100,7 +100,7 @@ const iconSize = computed(() => {
     <component
         :is="tag"
         :to="to"
-        :class="resolvedStyle" transition ease-in-out duration-40 flex items-center justify-center gap-6px
+        :class="resolvedStyle" ease-out duration-40 flex items-center justify-center gap-6px
         :disabled="disabled"
         :cursor="disabled ? 'not-allowed' : 'pointer'"
         :target="target"

package/components/tela/icon/custom.vue

@@ -354,5 +354,11 @@ const colorValue = computed(() => {
         <template v-if="name === 'timeline-start'">
             <circle cx="4.5" cy="4.5" r="4" fill="white" stroke="currentColor" />
         </template>
+
+        <template v-if="name === 'level-right'">
+            <g transform="translate(3.3, 0.2)">
+                <path d="M0.805054 0.805054L3.34137 3.34137C4.54019 4.54019 4.60421 6.46316 3.4878 7.73906L0.805054 10.8051" stroke="currentColor" stroke-width="1.61015" stroke-linecap="round" />
+            </g>
+        </template>
     </svg>
 </template>

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

@@ -29,7 +29,7 @@ const emit = defineEmits<{
 }>()
 
 const style = computed(() => {
-    const base = 'cursor-pointer flex items-center justify-center rounded-lg p-0.5em transition ease'
+    const base = 'cursor-pointer flex items-center justify-center rounded-lg p-0.5em ease-out duration-40'
     const size = ({
         '3xs': 'text-6px p-1',
         '2xs': 'text-8px p-4px', // 16px
@@ -40,7 +40,7 @@ const style = computed(() => {
 
     const color = ({
         primary: 'bg-#01292F !text-white hover:bg-#153A40 b-#011D21 hover:b-#123137',
-        secondary: 'bg-transparent text-icon hover:bg-gray-100 hover:text-gray-950 active:text-gray-800 disabled:bg-gray-100 disabled:!text-gray-300',
+        secondary: 'bg-transparent text-icon-tertiary hover:bg-muted hover:text-gray-950 active:text-gray-800 disabled:bg-gray-100 disabled:!text-gray-300',
     } as Record<typeof props.color, string>)[props.color]
 
     const disabled = props.disabled && 'cursor-not-allowed !bg-#ECF0F2 !text-#617275 !b-0'

package/components/tela/star-button.vue

@@ -32,7 +32,7 @@ watch(() => props.modelValue, (newValue, oldValue) => {
             :icon="modelValue ? 'i-ph-star-fill' : 'i-ph-star-light'"
             color="secondary"
             :size="size"
-            :class="cn(props.class)"
+            :class="cn(modelValue && 'hover:bg-amber-100!', props.class)"
             :icon-class="cn('relative z-1', modelValue ? 'text-amber-400!' : 'text-neutral-400!')"
             @click.stop.prevent="emit('update:modelValue', !modelValue)"
         />

package/components/tela/transparent-input.vue

@@ -23,6 +23,16 @@ const initialValue = ref(props.modelValue)
 
 const isEditing = ref(!props.displayIcon)
 
+const autowidthOptions = computed(() => ({
+    comfortZone: props.displayIcon ? '2px' : '0px',
+}))
+
+function recalcAutowidth() {
+    nextTick(() => {
+        inputRef.value?.dispatchEvent(new Event('input', { bubbles: true }))
+    })
+}
+
 function onFocus() {
     if (props.modelValue === props.defaultValue) {
         emit('update:modelValue', '')
@@ -83,6 +93,9 @@ function handleClickOutside(event: Event) {
 
 onMounted(() => {
     document.addEventListener('mousedown', handleClickOutside)
+    void document.fonts?.ready?.then(() => {
+        recalcAutowidth()
+    })
 })
 
 onUnmounted(() => {
@@ -93,26 +106,24 @@ onUnmounted(() => {
 <template>
     <div
         ref="containerRef"
-        flex relative
+        flex relative min-w-0
         :class="cn('group', containerClass, { 'font-580 text-18px': !disableDefaultStyling })"
         outline-none
         text="textcolor"
         items-center
-        cursor-text
         @click="onStartEditing"
     >
         <input
             ref="inputRef"
-            :key="modelValue"
-            v-autowidth="{
-                maxWidth: '420px',
-            }"
+            v-autowidth="autowidthOptions"
+            w-fit
+            shrink-0
+            max-w-full
             p-0
             transition
             :value="modelValue"
             :placeholder="placeholder"
             :disabled="disabled || (displayIcon && !isEditing)"
-            truncate
             bg-transparent
             :class="[
                 { 'font-580 text-18px': !disableDefaultStyling },

package/package.json

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

package/types/custom-icon.ts

@@ -1 +1 @@
-export type TelaCustomIconName = 'circle' | 'pause' | 'queued' | 'close' | 'circle-notch' | 'circle-minus' | 'stop' | 'circle-dashed' | 'warning' | 'check' | 'check-dashed' | 'semi-circle' | 'arrow-down' | 'reported' | 'circle-warning' | 'slice' | 'half-slice' | 'knot' | 'timeline-dot' | 'timeline-start'
+export type TelaCustomIconName = 'circle' | 'pause' | 'queued' | 'close' | 'circle-notch' | 'circle-minus' | 'stop' | 'circle-dashed' | 'warning' | 'check' | 'check-dashed' | 'semi-circle' | 'arrow-down' | 'reported' | 'circle-warning' | 'slice' | 'half-slice' | 'knot' | 'timeline-dot' | 'timeline-start' | 'level-right'

package/utils/design-tokens.ts

@@ -304,11 +304,11 @@ export const DT = {
             warning: BASE_COLORS.amber[200],
         },
         text: {
-            primary: BASE_COLORS.gray[800],
-            secondary: BASE_COLORS.gray[500],
-            tertiary: BASE_COLORS.gray[400],
-            subtle: BASE_COLORS.gray[300],
-            contrast: BASE_COLORS.gray[900],
+            primary: BASE_COLORS.neutral[800],
+            secondary: BASE_COLORS.neutral[500],
+            tertiary: BASE_COLORS.neutral[400],
+            subtle: BASE_COLORS.neutral[300],
+            contrast: BASE_COLORS.neutral[900],
             success: BASE_COLORS.green[600],
             error: BASE_COLORS.red[600],
             warning: BASE_COLORS.amber[600],