@vuetify/nightly 3.0.0-beta.10 → 3.0.0-beta.13

package/lib/components/VTextarea/VTextarea.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"VTextarea.mjs","names":["filterFieldProps","makeVFieldProps","filterInputProps","makeVInputProps","VInput","VCounter","VField","Intersect","forwardRefs","useProxiedModel","computed","nextTick","onBeforeUnmount","onMounted","ref","watch","callEvent","clamp","convertToUnit","defineComponent","filterInputAttrs","useRender","VTextarea","name","directives","inheritAttrs","props","autoGrow","Boolean","autofocus","counter","Number","String","counterValue","Function","hint","persistentHint","prefix","placeholder","persistentPlaceholder","persistentCounter","noResize","rows","type","default","validator","v","isNaN","parseFloat","maxRows","suffix","emits","e","val","setup","attrs","emit","slots","model","value","toString","length","max","maxlength","undefined","onIntersect","isIntersecting","entries","target","focus","vInputRef","vFieldRef","isFocused","controlHeight","textareaRef","isActive","messages","onFocus","document","activeElement","onControlClick","onClear","stopPropagation","onInput","sizerRef","calculateInputHeight","style","getComputedStyle","fieldStyle","$el","padding","getPropertyValue","height","scrollHeight","lineHeight","minHeight","Math","maxHeight","Infinity","density","observer","ResizeObserver","observe","disconnect","hasCounter","hasDetails","details","rootAttrs","inputAttrs","modelValue","_","inputProps","fieldProps","isDisabled","isDirty","isReadonly","isValid","dirty","class","fieldClass","slotProps","handler"],"sources":["../../../src/components/VTextarea/VTextarea.tsx"],"sourcesContent":["// Styles\nimport './VTextarea.sass'\nimport '../VTextField/VTextField.sass'\n\n// Components\nimport { filterFieldProps, makeVFieldProps } from '@/components/VField/VField'\nimport { filterInputProps, makeVInputProps, VInput } from '@/components/VInput/VInput'\nimport { VCounter } from '@/components/VCounter'\nimport { VField } from '@/components/VField'\n\n// Directives\nimport Intersect from '@/directives/intersect'\n\n// Composables\nimport { forwardRefs } from '@/composables/forwardRefs'\nimport { useProxiedModel } from '@/composables/proxiedModel'\n\n// Utilities\nimport { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'\nimport { callEvent, clamp, convertToUnit, defineComponent, filterInputAttrs, useRender } from '@/util'\n\n// Types\nimport type { PropType } from 'vue'\n\nexport const VTextarea = defineComponent({\n  name: 'VTextarea',\n\n  directives: { Intersect },\n\n  inheritAttrs: false,\n\n  props: {\n    autoGrow: Boolean,\n    autofocus: Boolean,\n    counter: [Boolean, Number, String] as PropType<true | number | string>,\n    counterValue: Function as PropType<(value: any) => number>,\n    hint: String,\n    persistentHint: Boolean,\n    prefix: String,\n    placeholder: String,\n    persistentPlaceholder: Boolean,\n    persistentCounter: Boolean,\n    noResize: Boolean,\n    rows: {\n      type: [Number, String],\n      default: 5,\n      validator: (v: any) => !isNaN(parseFloat(v)),\n    },\n    maxRows: {\n      type: [Number, String],\n      validator: (v: any) => !isNaN(parseFloat(v)),\n    },\n    suffix: String,\n\n    ...makeVInputProps(),\n    ...makeVFieldProps(),\n  },\n\n  emits: {\n    'click:control': (e: MouseEvent) => true,\n    'update:modelValue': (val: string) => true,\n  },\n\n  setup (props, { attrs, emit, slots }) {\n    const model = useProxiedModel(props, 'modelValue')\n    const counterValue = computed(() => {\n      return typeof props.counterValue === 'function'\n        ? props.counterValue(model.value)\n        : (model.value || '').toString().length\n    })\n    const max = computed(() => {\n      if (attrs.maxlength) return attrs.maxlength as undefined\n\n      if (\n        !props.counter ||\n        (typeof props.counter !== 'number' &&\n        typeof props.counter !== 'string')\n      ) return undefined\n\n      return props.counter\n    })\n\n    function onIntersect (\n      isIntersecting: boolean,\n      entries: IntersectionObserverEntry[]\n    ) {\n      if (!props.autofocus || !isIntersecting) return\n\n      (entries[0].target as HTMLInputElement)?.focus?.()\n    }\n\n    const vInputRef = ref<VInput>()\n    const vFieldRef = ref<VInput>()\n    const isFocused = ref(false)\n    const controlHeight = ref('')\n    const textareaRef = ref<HTMLInputElement>()\n    const isActive = computed(() => (\n      isFocused.value ||\n      props.persistentPlaceholder\n    ))\n\n    const messages = computed(() => {\n      return props.messages.length\n        ? props.messages\n        : (isActive.value || props.persistentHint) ? props.hint : ''\n    })\n\n    function onFocus () {\n      if (textareaRef.value !== document.activeElement) {\n        textareaRef.value?.focus()\n      }\n\n      if (!isFocused.value) isFocused.value = true\n    }\n    function onControlClick (e: MouseEvent) {\n      onFocus()\n\n      emit('click:control', e)\n    }\n    function onClear (e: MouseEvent) {\n      e.stopPropagation()\n\n      onFocus()\n\n      nextTick(() => {\n        model.value = ''\n\n        callEvent(props['onClick:clear'], e)\n      })\n    }\n    function onInput (e: Event) {\n      model.value = (e.target as HTMLTextAreaElement).value\n    }\n\n    const sizerRef = ref<HTMLTextAreaElement>()\n    function calculateInputHeight () {\n      if (!props.autoGrow) return\n\n      nextTick(() => {\n        if (!sizerRef.value || !vFieldRef.value) return\n\n        const style = getComputedStyle(sizerRef.value)\n        const fieldStyle = getComputedStyle(vFieldRef.value.$el)\n\n        const padding = parseFloat(style.getPropertyValue('--v-field-padding-top')) +\n          parseFloat(style.getPropertyValue('--v-input-padding-top')) +\n          parseFloat(style.getPropertyValue('--v-field-padding-bottom'))\n\n        const height = sizerRef.value.scrollHeight\n        const lineHeight = parseFloat(style.lineHeight)\n        const minHeight = Math.max(\n          parseFloat(props.rows) * lineHeight + padding,\n          parseFloat(fieldStyle.getPropertyValue('--v-input-control-height'))\n        )\n        const maxHeight = parseFloat(props.maxRows!) * lineHeight + padding || Infinity\n\n        controlHeight.value = convertToUnit(clamp(height ?? 0, minHeight, maxHeight))\n      })\n    }\n\n    onMounted(calculateInputHeight)\n    watch(model, calculateInputHeight)\n    watch(() => props.rows, calculateInputHeight)\n    watch(() => props.maxRows, calculateInputHeight)\n    watch(() => props.density, calculateInputHeight)\n\n    let observer: ResizeObserver | undefined\n    watch(sizerRef, val => {\n      if (val) {\n        observer = new ResizeObserver(calculateInputHeight)\n        observer.observe(sizerRef.value!)\n      } else {\n        observer?.disconnect()\n      }\n    })\n    onBeforeUnmount(() => {\n      observer?.disconnect()\n    })\n\n    useRender(() => {\n      const hasCounter = !!(slots.counter || props.counter || props.counterValue)\n      const hasDetails = !!(hasCounter || slots.details)\n      const [rootAttrs, inputAttrs] = filterInputAttrs(attrs)\n      const [{ modelValue: _, ...inputProps }] = filterInputProps(props)\n      const [fieldProps] = filterFieldProps(props)\n\n      return (\n        <VInput\n          ref={ vInputRef }\n          v-model={ model.value }\n          class={[\n            'v-textarea v-text-field',\n            {\n              'v-textarea--prefixed': props.prefix,\n              'v-textarea--suffixed': props.suffix,\n              'v-text-field--prefixed': props.prefix,\n              'v-text-field--suffixed': props.suffix,\n              'v-textarea--auto-grow': props.autoGrow,\n              'v-textarea--no-resize': props.noResize || props.autoGrow,\n            },\n          ]}\n          onClick:prepend={ props['onClick:prepend'] }\n          onClick:append={ props['onClick:append'] }\n          { ...rootAttrs }\n          { ...inputProps }\n          messages={ messages.value }\n        >\n          {{\n            ...slots,\n            default: ({\n              isDisabled,\n              isDirty,\n              isReadonly,\n              isValid,\n            }) => (\n              <VField\n                ref={ vFieldRef }\n                style={{\n                  '--v-textarea-control-height': controlHeight.value,\n                }}\n                onClick:control={ onControlClick }\n                onClick:clear={ onClear }\n                onClick:prependInner={ props['onClick:prependInner'] }\n                onClick:appendInner={ props['onClick:appendInner'] }\n                role=\"textbox\"\n                { ...fieldProps }\n                active={ isActive.value || isDirty.value }\n                dirty={ isDirty.value || props.dirty }\n                focused={ isFocused.value }\n                error={ isValid.value === false }\n              >\n                {{\n                  ...slots,\n                  default: ({\n                    props: { class: fieldClass, ...slotProps },\n                  }) => (\n                    <>\n                      { props.prefix && (\n                        <span class=\"v-text-field__prefix\">\n                          { props.prefix }\n                        </span>\n                      ) }\n\n                      <textarea\n                        ref={ textareaRef }\n                        class={ fieldClass }\n                        value={ model.value }\n                        onInput={ onInput }\n                        v-intersect={[{\n                          handler: onIntersect,\n                        }, null, ['once']]}\n                        autofocus={ props.autofocus }\n                        readonly={ isReadonly.value }\n                        disabled={ isDisabled.value }\n                        placeholder={ props.placeholder }\n                        rows={ props.rows }\n                        name={ props.name }\n                        onFocus={ onFocus }\n                        onBlur={ () => (isFocused.value = false) }\n                        { ...slotProps }\n                        { ...inputAttrs }\n                      />\n\n                      { props.autoGrow && (\n                        <textarea\n                          class={[\n                            fieldClass,\n                            'v-textarea__sizer',\n                          ]}\n                          v-model={ model.value }\n                          ref={ sizerRef }\n                          readonly\n                          aria-hidden=\"true\"\n                        />\n                      )}\n\n                      { props.suffix && (\n                        <span class=\"v-text-field__suffix\">\n                          { props.suffix }\n                        </span>\n                      ) }\n                    </>\n                  ),\n                }}\n              </VField>\n            ),\n            details: hasDetails ? slotProps => (\n              <>\n                { slots.details?.(slotProps) }\n\n                { hasCounter && (\n                  <>\n                    <span />\n\n                    <VCounter\n                      active={ props.persistentCounter || isFocused.value }\n                      value={ counterValue.value }\n                      max={ max.value }\n                      v-slots={ slots.counter }\n                    />\n                  </>\n                ) }\n              </>\n            ) : undefined,\n          }}\n        </VInput>\n      )\n    })\n\n    return forwardRefs({}, vInputRef, vFieldRef, textareaRef)\n  },\n})\n\nexport type VTextarea = InstanceType<typeof VTextarea>\n"],"mappings":"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"}
+{"version":3,"file":"VTextarea.mjs","names":["filterFieldProps","makeVFieldProps","filterInputProps","makeVInputProps","VInput","VCounter","VField","Intersect","forwardRefs","useProxiedModel","computed","nextTick","onBeforeUnmount","onMounted","ref","watch","callEvent","clamp","convertToUnit","defineComponent","filterInputAttrs","useRender","VTextarea","name","directives","inheritAttrs","props","autoGrow","Boolean","autofocus","counter","Number","String","counterValue","Function","hint","persistentHint","prefix","placeholder","persistentPlaceholder","persistentCounter","noResize","rows","type","default","validator","v","isNaN","parseFloat","maxRows","suffix","emits","e","val","setup","attrs","emit","slots","model","value","toString","length","max","maxlength","undefined","onIntersect","isIntersecting","entries","target","focus","vInputRef","vFieldRef","isFocused","controlHeight","textareaRef","isActive","messages","onFocus","document","activeElement","onControlClick","onClear","stopPropagation","onInput","sizerRef","calculateInputHeight","style","getComputedStyle","fieldStyle","$el","padding","getPropertyValue","height","scrollHeight","lineHeight","minHeight","Math","maxHeight","Infinity","density","observer","ResizeObserver","observe","disconnect","hasCounter","hasDetails","details","rootAttrs","inputAttrs","modelValue","_","inputProps","fieldProps","includes","variant","isDisabled","isDirty","isReadonly","isValid","dirty","class","fieldClass","slotProps","handler"],"sources":["../../../src/components/VTextarea/VTextarea.tsx"],"sourcesContent":["// Styles\nimport './VTextarea.sass'\nimport '../VTextField/VTextField.sass'\n\n// Components\nimport { filterFieldProps, makeVFieldProps } from '@/components/VField/VField'\nimport { filterInputProps, makeVInputProps, VInput } from '@/components/VInput/VInput'\nimport { VCounter } from '@/components/VCounter'\nimport { VField } from '@/components/VField'\n\n// Directives\nimport Intersect from '@/directives/intersect'\n\n// Composables\nimport { forwardRefs } from '@/composables/forwardRefs'\nimport { useProxiedModel } from '@/composables/proxiedModel'\n\n// Utilities\nimport { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'\nimport { callEvent, clamp, convertToUnit, defineComponent, filterInputAttrs, useRender } from '@/util'\n\n// Types\nimport type { PropType } from 'vue'\n\nexport const VTextarea = defineComponent({\n  name: 'VTextarea',\n\n  directives: { Intersect },\n\n  inheritAttrs: false,\n\n  props: {\n    autoGrow: Boolean,\n    autofocus: Boolean,\n    counter: [Boolean, Number, String] as PropType<true | number | string>,\n    counterValue: Function as PropType<(value: any) => number>,\n    hint: String,\n    persistentHint: Boolean,\n    prefix: String,\n    placeholder: String,\n    persistentPlaceholder: Boolean,\n    persistentCounter: Boolean,\n    noResize: Boolean,\n    rows: {\n      type: [Number, String],\n      default: 5,\n      validator: (v: any) => !isNaN(parseFloat(v)),\n    },\n    maxRows: {\n      type: [Number, String],\n      validator: (v: any) => !isNaN(parseFloat(v)),\n    },\n    suffix: String,\n\n    ...makeVInputProps(),\n    ...makeVFieldProps(),\n  },\n\n  emits: {\n    'click:control': (e: MouseEvent) => true,\n    'update:modelValue': (val: string) => true,\n  },\n\n  setup (props, { attrs, emit, slots }) {\n    const model = useProxiedModel(props, 'modelValue')\n    const counterValue = computed(() => {\n      return typeof props.counterValue === 'function'\n        ? props.counterValue(model.value)\n        : (model.value || '').toString().length\n    })\n    const max = computed(() => {\n      if (attrs.maxlength) return attrs.maxlength as undefined\n\n      if (\n        !props.counter ||\n        (typeof props.counter !== 'number' &&\n        typeof props.counter !== 'string')\n      ) return undefined\n\n      return props.counter\n    })\n\n    function onIntersect (\n      isIntersecting: boolean,\n      entries: IntersectionObserverEntry[]\n    ) {\n      if (!props.autofocus || !isIntersecting) return\n\n      (entries[0].target as HTMLInputElement)?.focus?.()\n    }\n\n    const vInputRef = ref<VInput>()\n    const vFieldRef = ref<VInput>()\n    const isFocused = ref(false)\n    const controlHeight = ref('')\n    const textareaRef = ref<HTMLInputElement>()\n    const isActive = computed(() => (\n      isFocused.value ||\n      props.persistentPlaceholder\n    ))\n\n    const messages = computed(() => {\n      return props.messages.length\n        ? props.messages\n        : (isActive.value || props.persistentHint) ? props.hint : ''\n    })\n\n    function onFocus () {\n      if (textareaRef.value !== document.activeElement) {\n        textareaRef.value?.focus()\n      }\n\n      if (!isFocused.value) isFocused.value = true\n    }\n    function onControlClick (e: MouseEvent) {\n      onFocus()\n\n      emit('click:control', e)\n    }\n    function onClear (e: MouseEvent) {\n      e.stopPropagation()\n\n      onFocus()\n\n      nextTick(() => {\n        model.value = ''\n\n        callEvent(props['onClick:clear'], e)\n      })\n    }\n    function onInput (e: Event) {\n      model.value = (e.target as HTMLTextAreaElement).value\n    }\n\n    const sizerRef = ref<HTMLTextAreaElement>()\n    function calculateInputHeight () {\n      if (!props.autoGrow) return\n\n      nextTick(() => {\n        if (!sizerRef.value || !vFieldRef.value) return\n\n        const style = getComputedStyle(sizerRef.value)\n        const fieldStyle = getComputedStyle(vFieldRef.value.$el)\n\n        const padding = parseFloat(style.getPropertyValue('--v-field-padding-top')) +\n          parseFloat(style.getPropertyValue('--v-input-padding-top')) +\n          parseFloat(style.getPropertyValue('--v-field-padding-bottom'))\n\n        const height = sizerRef.value.scrollHeight\n        const lineHeight = parseFloat(style.lineHeight)\n        const minHeight = Math.max(\n          parseFloat(props.rows) * lineHeight + padding,\n          parseFloat(fieldStyle.getPropertyValue('--v-input-control-height'))\n        )\n        const maxHeight = parseFloat(props.maxRows!) * lineHeight + padding || Infinity\n\n        controlHeight.value = convertToUnit(clamp(height ?? 0, minHeight, maxHeight))\n      })\n    }\n\n    onMounted(calculateInputHeight)\n    watch(model, calculateInputHeight)\n    watch(() => props.rows, calculateInputHeight)\n    watch(() => props.maxRows, calculateInputHeight)\n    watch(() => props.density, calculateInputHeight)\n\n    let observer: ResizeObserver | undefined\n    watch(sizerRef, val => {\n      if (val) {\n        observer = new ResizeObserver(calculateInputHeight)\n        observer.observe(sizerRef.value!)\n      } else {\n        observer?.disconnect()\n      }\n    })\n    onBeforeUnmount(() => {\n      observer?.disconnect()\n    })\n\n    useRender(() => {\n      const hasCounter = !!(slots.counter || props.counter || props.counterValue)\n      const hasDetails = !!(hasCounter || slots.details)\n      const [rootAttrs, inputAttrs] = filterInputAttrs(attrs)\n      const [{ modelValue: _, ...inputProps }] = filterInputProps(props)\n      const [fieldProps] = filterFieldProps(props)\n\n      return (\n        <VInput\n          ref={ vInputRef }\n          v-model={ model.value }\n          class={[\n            'v-textarea v-text-field',\n            {\n              'v-textarea--prefixed': props.prefix,\n              'v-textarea--suffixed': props.suffix,\n              'v-text-field--prefixed': props.prefix,\n              'v-text-field--suffixed': props.suffix,\n              'v-textarea--auto-grow': props.autoGrow,\n              'v-textarea--no-resize': props.noResize || props.autoGrow,\n              'v-text-field--flush-details': ['plain', 'underlined'].includes(props.variant),\n            },\n          ]}\n          onClick:prepend={ props['onClick:prepend'] }\n          onClick:append={ props['onClick:append'] }\n          { ...rootAttrs }\n          { ...inputProps }\n          messages={ messages.value }\n        >\n          {{\n            ...slots,\n            default: ({\n              isDisabled,\n              isDirty,\n              isReadonly,\n              isValid,\n            }) => (\n              <VField\n                ref={ vFieldRef }\n                style={{\n                  '--v-textarea-control-height': controlHeight.value,\n                }}\n                onClick:control={ onControlClick }\n                onClick:clear={ onClear }\n                onClick:prependInner={ props['onClick:prependInner'] }\n                onClick:appendInner={ props['onClick:appendInner'] }\n                role=\"textbox\"\n                { ...fieldProps }\n                active={ isActive.value || isDirty.value }\n                dirty={ isDirty.value || props.dirty }\n                focused={ isFocused.value }\n                error={ isValid.value === false }\n              >\n                {{\n                  ...slots,\n                  default: ({\n                    props: { class: fieldClass, ...slotProps },\n                  }) => (\n                    <>\n                      { props.prefix && (\n                        <span class=\"v-text-field__prefix\">\n                          { props.prefix }\n                        </span>\n                      ) }\n\n                      <textarea\n                        ref={ textareaRef }\n                        class={ fieldClass }\n                        value={ model.value }\n                        onInput={ onInput }\n                        v-intersect={[{\n                          handler: onIntersect,\n                        }, null, ['once']]}\n                        autofocus={ props.autofocus }\n                        readonly={ isReadonly.value }\n                        disabled={ isDisabled.value }\n                        placeholder={ props.placeholder }\n                        rows={ props.rows }\n                        name={ props.name }\n                        onFocus={ onFocus }\n                        onBlur={ () => (isFocused.value = false) }\n                        { ...slotProps }\n                        { ...inputAttrs }\n                      />\n\n                      { props.autoGrow && (\n                        <textarea\n                          class={[\n                            fieldClass,\n                            'v-textarea__sizer',\n                          ]}\n                          v-model={ model.value }\n                          ref={ sizerRef }\n                          readonly\n                          aria-hidden=\"true\"\n                        />\n                      )}\n\n                      { props.suffix && (\n                        <span class=\"v-text-field__suffix\">\n                          { props.suffix }\n                        </span>\n                      ) }\n                    </>\n                  ),\n                }}\n              </VField>\n            ),\n            details: hasDetails ? slotProps => (\n              <>\n                { slots.details?.(slotProps) }\n\n                { hasCounter && (\n                  <>\n                    <span />\n\n                    <VCounter\n                      active={ props.persistentCounter || isFocused.value }\n                      value={ counterValue.value }\n                      max={ max.value }\n                      v-slots={ slots.counter }\n                    />\n                  </>\n                ) }\n              </>\n            ) : undefined,\n          }}\n        </VInput>\n      )\n    })\n\n    return forwardRefs({}, vInputRef, vFieldRef, textareaRef)\n  },\n})\n\nexport type VTextarea = InstanceType<typeof VTextarea>\n"],"mappings":"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"}

package/lib/components/VTextarea/VTextarea.sass

@@ -5,6 +5,9 @@
 @use './variables' as *
 
 .v-textarea
+  .v-field
+    --v-textarea-control-height: var(--v-input-control-height)
+
   .v-field__field
     --v-input-control-height: var(--v-textarea-control-height)
 
@@ -34,15 +37,13 @@
     min-height: 0 !important
     pointer-events: none
 
-  .v-field--has-label
-    textarea
-      opacity: 0
-
+  .v-field--no-label,
   .v-field--active
     textarea
       opacity: 1
 
   textarea
+    opacity: 0
     flex: 1
     min-width: 0
     transition: .15s opacity settings.$standard-easing

package/lib/components/VTextarea/index.d.ts

@@ -0,0 +1,218 @@
+import * as vue from 'vue';
+import { PropType, JSXComponent } from 'vue';
+
+declare type EventProp<T = (...args: any[]) => any> = T | T[];
+declare const EventProp: PropType<EventProp<(...args: any[]) => any>>;
+
+declare type ValidationResult = string | boolean;
+declare type ValidationRule = ValidationResult | PromiseLike<ValidationResult> | ((value: any) => ValidationResult) | ((value: any) => PromiseLike<ValidationResult>);
+
+declare type IconValue = string | JSXComponent;
+declare const IconValue: PropType<IconValue>;
+
+declare const VTextarea: vue.DefineComponent<{
+    loading: BooleanConstructor;
+    theme: StringConstructor;
+    appendInnerIcon: PropType<IconValue>;
+    bgColor: StringConstructor;
+    clearable: BooleanConstructor;
+    clearIcon: {
+        type: PropType<IconValue>;
+        default: string;
+    };
+    active: BooleanConstructor;
+    color: StringConstructor;
+    dirty: BooleanConstructor;
+    disabled: BooleanConstructor;
+    error: BooleanConstructor;
+    label: StringConstructor;
+    persistentClear: BooleanConstructor;
+    prependInnerIcon: PropType<IconValue>;
+    reverse: BooleanConstructor;
+    singleLine: BooleanConstructor;
+    variant: {
+        type: PropType<"filled" | "outlined" | "plain" | "underlined" | "solo">;
+        default: string;
+        validator: (v: any) => boolean;
+    };
+    'onClick:clear': PropType<EventProp<(...args: any[]) => any>>;
+    'onClick:appendInner': PropType<EventProp<(...args: any[]) => any>>;
+    'onClick:prependInner': PropType<EventProp<(...args: any[]) => any>>;
+    errorMessages: {
+        type: PropType<string | string[]>;
+        default: () => never[];
+    };
+    maxErrors: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    name: StringConstructor;
+    readonly: BooleanConstructor;
+    rules: {
+        type: PropType<ValidationRule[]>;
+        default: () => never[];
+    };
+    modelValue: null;
+    validationValue: null;
+    density: {
+        type: PropType<"default" | "compact" | "comfortable" | null>;
+        default: string;
+        validator: (v: any) => boolean;
+    };
+    id: StringConstructor;
+    appendIcon: PropType<IconValue>;
+    prependIcon: PropType<IconValue>;
+    hideDetails: PropType<boolean | "auto">;
+    messages: {
+        type: PropType<string | string[]>;
+        default: () => never[];
+    };
+    direction: {
+        type: PropType<"horizontal" | "vertical">;
+        default: string;
+        validator: (v: any) => boolean;
+    };
+    'onClick:prepend': PropType<EventProp<(...args: any[]) => any>>;
+    'onClick:append': PropType<EventProp<(...args: any[]) => any>>;
+    autoGrow: BooleanConstructor;
+    autofocus: BooleanConstructor;
+    counter: PropType<string | number | true>;
+    counterValue: PropType<(value: any) => number>;
+    hint: StringConstructor;
+    persistentHint: BooleanConstructor;
+    prefix: StringConstructor;
+    placeholder: StringConstructor;
+    persistentPlaceholder: BooleanConstructor;
+    persistentCounter: BooleanConstructor;
+    noResize: BooleanConstructor;
+    rows: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+        validator: (v: any) => boolean;
+    };
+    maxRows: {
+        type: (StringConstructor | NumberConstructor)[];
+        validator: (v: any) => boolean;
+    };
+    suffix: StringConstructor;
+}, {}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
+    'click:control': (e: MouseEvent) => true;
+    'update:modelValue': (val: string) => true;
+}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
+    loading: BooleanConstructor;
+    theme: StringConstructor;
+    appendInnerIcon: PropType<IconValue>;
+    bgColor: StringConstructor;
+    clearable: BooleanConstructor;
+    clearIcon: {
+        type: PropType<IconValue>;
+        default: string;
+    };
+    active: BooleanConstructor;
+    color: StringConstructor;
+    dirty: BooleanConstructor;
+    disabled: BooleanConstructor;
+    error: BooleanConstructor;
+    label: StringConstructor;
+    persistentClear: BooleanConstructor;
+    prependInnerIcon: PropType<IconValue>;
+    reverse: BooleanConstructor;
+    singleLine: BooleanConstructor;
+    variant: {
+        type: PropType<"filled" | "outlined" | "plain" | "underlined" | "solo">;
+        default: string;
+        validator: (v: any) => boolean;
+    };
+    'onClick:clear': PropType<EventProp<(...args: any[]) => any>>;
+    'onClick:appendInner': PropType<EventProp<(...args: any[]) => any>>;
+    'onClick:prependInner': PropType<EventProp<(...args: any[]) => any>>;
+    errorMessages: {
+        type: PropType<string | string[]>;
+        default: () => never[];
+    };
+    maxErrors: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    name: StringConstructor;
+    readonly: BooleanConstructor;
+    rules: {
+        type: PropType<ValidationRule[]>;
+        default: () => never[];
+    };
+    modelValue: null;
+    validationValue: null;
+    density: {
+        type: PropType<"default" | "compact" | "comfortable" | null>;
+        default: string;
+        validator: (v: any) => boolean;
+    };
+    id: StringConstructor;
+    appendIcon: PropType<IconValue>;
+    prependIcon: PropType<IconValue>;
+    hideDetails: PropType<boolean | "auto">;
+    messages: {
+        type: PropType<string | string[]>;
+        default: () => never[];
+    };
+    direction: {
+        type: PropType<"horizontal" | "vertical">;
+        default: string;
+        validator: (v: any) => boolean;
+    };
+    'onClick:prepend': PropType<EventProp<(...args: any[]) => any>>;
+    'onClick:append': PropType<EventProp<(...args: any[]) => any>>;
+    autoGrow: BooleanConstructor;
+    autofocus: BooleanConstructor;
+    counter: PropType<string | number | true>;
+    counterValue: PropType<(value: any) => number>;
+    hint: StringConstructor;
+    persistentHint: BooleanConstructor;
+    prefix: StringConstructor;
+    placeholder: StringConstructor;
+    persistentPlaceholder: BooleanConstructor;
+    persistentCounter: BooleanConstructor;
+    noResize: BooleanConstructor;
+    rows: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+        validator: (v: any) => boolean;
+    };
+    maxRows: {
+        type: (StringConstructor | NumberConstructor)[];
+        validator: (v: any) => boolean;
+    };
+    suffix: StringConstructor;
+}>> & {
+    "onUpdate:modelValue"?: ((val: string) => any) | undefined;
+    "onClick:control"?: ((e: MouseEvent) => any) | undefined;
+}, {
+    reverse: boolean;
+    error: boolean;
+    active: boolean;
+    direction: "horizontal" | "vertical";
+    loading: boolean;
+    autofocus: boolean;
+    disabled: boolean;
+    readonly: boolean;
+    messages: string | string[];
+    density: "default" | "compact" | "comfortable" | null;
+    variant: "filled" | "outlined" | "plain" | "underlined" | "solo";
+    errorMessages: string | string[];
+    maxErrors: string | number;
+    rules: ValidationRule[];
+    clearIcon: IconValue;
+    clearable: boolean;
+    dirty: boolean;
+    persistentClear: boolean;
+    singleLine: boolean;
+    persistentHint: boolean;
+    persistentPlaceholder: boolean;
+    persistentCounter: boolean;
+    autoGrow: boolean;
+    noResize: boolean;
+    rows: string | number;
+}>;
+declare type VTextarea = InstanceType<typeof VTextarea>;
+
+export { VTextarea };

package/lib/components/VThemeProvider/index.d.ts

@@ -0,0 +1,24 @@
+import * as vue from 'vue';
+
+declare const VThemeProvider: vue.DefineComponent<{
+    tag: {
+        type: StringConstructor;
+        default: string;
+    };
+    theme: StringConstructor;
+    withBackground: BooleanConstructor;
+}, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>[] | JSX.Element | undefined, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
+    tag: {
+        type: StringConstructor;
+        default: string;
+    };
+    theme: StringConstructor;
+    withBackground: BooleanConstructor;
+}>>, {
+    tag: string;
+    withBackground: boolean;
+}>;
+
+export { VThemeProvider };

package/lib/components/VTimeline/VTimeline.css

@@ -11,7 +11,6 @@
   position: relative;
 }
 .v-timeline--horizontal.v-timeline {
-  grid-template-rows: auto min-content auto;
   grid-column-gap: 24px;
   width: 100%;
 }
@@ -33,6 +32,7 @@
 .v-timeline--horizontal.v-timeline .v-timeline-item:nth-child(2n+1) .v-timeline-item__body {
   grid-row: 1;
   padding-block-end: 24px;
+  align-self: flex-end;
 }
 .v-timeline--horizontal.v-timeline .v-timeline-item:nth-child(2n+1) .v-timeline-item__opposite {
   grid-row: 3;
@@ -40,7 +40,6 @@
 }
 
 .v-timeline--vertical.v-timeline {
-  grid-template-columns: auto min-content auto;
   grid-row-gap: 24px;
   height: 100%;
 }
@@ -252,6 +251,22 @@
 }
 
 /** Modifiers **/
+.v-timeline--horizontal.v-timeline--justify-center {
+  grid-template-rows: minmax(auto, 50%) min-content minmax(auto, 50%);
+}
+
+.v-timeline--vertical.v-timeline--justify-center {
+  grid-template-columns: minmax(auto, 50%) min-content minmax(auto, 50%);
+}
+
+.v-timeline--horizontal.v-timeline--justify-auto {
+  grid-template-rows: auto min-content auto;
+}
+
+.v-timeline--vertical.v-timeline--justify-auto {
+  grid-template-columns: auto min-content auto;
+}
+
 .v-timeline--horizontal.v-timeline--density-comfortable {
   height: 100%;
 }
@@ -273,20 +288,20 @@
 }
 
 .v-timeline--horizontal.v-timeline--density-compact.v-timeline--side-end {
-  grid-template-rows: min-content auto;
+  grid-template-rows: 0 min-content auto;
 }
 .v-timeline--horizontal.v-timeline--density-compact.v-timeline--side-start {
-  grid-template-rows: auto min-content;
+  grid-template-rows: auto min-content 0;
 }
 .v-timeline--horizontal.v-timeline--density-compact .v-timeline-item__body {
   grid-row: 1;
 }
 
 .v-timeline--vertical.v-timeline--density-compact.v-timeline--side-end {
-  grid-template-columns: min-content auto;
+  grid-template-columns: 0 min-content auto;
 }
 .v-timeline--vertical.v-timeline--density-compact.v-timeline--side-start {
-  grid-template-columns: auto min-content;
+  grid-template-columns: auto min-content 0;
 }
 .v-timeline--vertical.v-timeline--density-compact .v-timeline-item__body {
   grid-column: 3;

package/lib/components/VTimeline/VTimeline.mjs

@@ -23,6 +23,11 @@ export const VTimeline = defineComponent({
       default: 'vertical',
       validator: v => ['vertical', 'horizontal'].includes(v)
     },
+    justify: {
+      type: String,
+      default: 'auto',
+      validator: v => ['auto', 'center'].includes(v)
+    },
     side: {
       type: String,
       validator: v => v == null || ['start', 'end'].includes(v)
@@ -86,7 +91,7 @@ export const VTimeline = defineComponent({
       }
     });
     useRender(() => _createVNode(props.tag, {
-      "class": ['v-timeline', `v-timeline--${props.direction}`, `v-timeline--align-${props.align}`, truncateClasses.value, {
+      "class": ['v-timeline', `v-timeline--${props.direction}`, `v-timeline--align-${props.align}`, `v-timeline--justify-${props.justify}`, truncateClasses.value, {
         'v-timeline--inset-line': !!props.lineInset
       }, themeClasses.value, densityClasses.value, sideClasses.value],
       "style": {

package/lib/components/VTimeline/VTimeline.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"VTimeline.mjs","names":["makeDensityProps","useDensity","makeTagProps","makeThemeProps","provideTheme","provideDefaults","computed","toRef","convertToUnit","defineComponent","useRender","VTimeline","name","props","align","type","String","default","validator","v","includes","direction","side","lineInset","Number","lineThickness","lineColor","truncateLine","setup","slots","themeClasses","densityClasses","VTimelineDivider","VTimelineItem","density","sideClasses","truncateClasses","classes","value"],"sources":["../../../src/components/VTimeline/VTimeline.tsx"],"sourcesContent":["// Styles\nimport './VTimeline.sass'\n\n// Composables\nimport { makeDensityProps, useDensity } from '@/composables/density'\nimport { makeTagProps } from '@/composables/tag'\nimport { makeThemeProps, provideTheme } from '@/composables/theme'\nimport { provideDefaults } from '@/composables/defaults'\n\n// Utilities\nimport { computed, toRef } from 'vue'\nimport { convertToUnit, defineComponent, useRender } from '@/util'\n\n// Types\nimport type { Prop } from 'vue'\n\nexport type TimelineDirection = 'vertical' | 'horizontal'\nexport type TimelineSide = 'start' | 'end' | undefined\nexport type TimelineAlign = 'center' | 'start'\nexport type TimelineTruncateLine = 'start' | 'end' | 'both' | undefined\n\nexport const VTimeline = defineComponent({\n  name: 'VTimeline',\n\n  props: {\n    align: {\n      type: String,\n      default: 'center',\n      validator: (v: any) => ['center', 'start'].includes(v),\n    } as Prop<TimelineAlign>,\n    direction: {\n      type: String,\n      default: 'vertical',\n      validator: (v: any) => ['vertical', 'horizontal'].includes(v),\n    } as Prop<TimelineDirection>,\n    side: {\n      type: String,\n      validator: (v: any) => v == null || ['start', 'end'].includes(v),\n    } as Prop<TimelineSide>,\n    lineInset: {\n      type: [String, Number],\n      default: 0,\n    },\n    lineThickness: {\n      type: [String, Number],\n      default: 2,\n    },\n    lineColor: String,\n    truncateLine: {\n      type: String,\n      validator: (v: any) => ['start', 'end', 'both'].includes(v),\n    } as Prop<TimelineTruncateLine>,\n\n    ...makeDensityProps(),\n    ...makeTagProps(),\n    ...makeThemeProps(),\n  },\n\n  setup (props, { slots }) {\n    const { themeClasses } = provideTheme(props)\n    const { densityClasses } = useDensity(props)\n\n    provideDefaults({\n      VTimelineDivider: {\n        lineColor: toRef(props, 'lineColor'),\n      },\n      VTimelineItem: {\n        density: toRef(props, 'density'),\n        lineInset: toRef(props, 'lineInset'),\n      },\n    })\n\n    const sideClasses = computed(() => {\n      const side = props.side ? props.side : props.density !== 'default' ? 'end' : null\n\n      return side && `v-timeline--side-${side}`\n    })\n\n    const truncateClasses = computed(() => {\n      const classes = [\n        'v-timeline--truncate-line-start',\n        'v-timeline--truncate-line-end',\n      ]\n\n      switch (props.truncateLine) {\n        case 'both': return classes\n        case 'start': return classes[0]\n        case 'end': return classes[1]\n        default: return null\n      }\n    })\n\n    useRender(() => (\n      <props.tag\n        class={[\n          'v-timeline',\n          `v-timeline--${props.direction}`,\n          `v-timeline--align-${props.align}`,\n          truncateClasses.value,\n          {\n            'v-timeline--inset-line': !!props.lineInset,\n          },\n          themeClasses.value,\n          densityClasses.value,\n          sideClasses.value,\n        ]}\n        style={{\n          '--v-timeline-line-thickness': convertToUnit(props.lineThickness),\n        }}\n        v-slots={ slots }\n      />\n    ))\n\n    return {}\n  },\n})\n"],"mappings":"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"}
+{"version":3,"file":"VTimeline.mjs","names":["makeDensityProps","useDensity","makeTagProps","makeThemeProps","provideTheme","provideDefaults","computed","toRef","convertToUnit","defineComponent","useRender","VTimeline","name","props","align","type","String","default","validator","v","includes","direction","justify","side","lineInset","Number","lineThickness","lineColor","truncateLine","setup","slots","themeClasses","densityClasses","VTimelineDivider","VTimelineItem","density","sideClasses","truncateClasses","classes","value"],"sources":["../../../src/components/VTimeline/VTimeline.tsx"],"sourcesContent":["// Styles\nimport './VTimeline.sass'\n\n// Composables\nimport { makeDensityProps, useDensity } from '@/composables/density'\nimport { makeTagProps } from '@/composables/tag'\nimport { makeThemeProps, provideTheme } from '@/composables/theme'\nimport { provideDefaults } from '@/composables/defaults'\n\n// Utilities\nimport { computed, toRef } from 'vue'\nimport { convertToUnit, defineComponent, useRender } from '@/util'\n\n// Types\nimport type { Prop } from 'vue'\n\nexport type TimelineDirection = 'vertical' | 'horizontal'\nexport type TimelineSide = 'start' | 'end' | undefined\nexport type TimelineAlign = 'center' | 'start'\nexport type TimelineTruncateLine = 'start' | 'end' | 'both' | undefined\n\nexport const VTimeline = defineComponent({\n  name: 'VTimeline',\n\n  props: {\n    align: {\n      type: String,\n      default: 'center',\n      validator: (v: any) => ['center', 'start'].includes(v),\n    } as Prop<TimelineAlign>,\n    direction: {\n      type: String,\n      default: 'vertical',\n      validator: (v: any) => ['vertical', 'horizontal'].includes(v),\n    } as Prop<TimelineDirection>,\n    justify: {\n      type: String,\n      default: 'auto',\n      validator: (v: any) => ['auto', 'center'].includes(v),\n    },\n    side: {\n      type: String,\n      validator: (v: any) => v == null || ['start', 'end'].includes(v),\n    } as Prop<TimelineSide>,\n    lineInset: {\n      type: [String, Number],\n      default: 0,\n    },\n    lineThickness: {\n      type: [String, Number],\n      default: 2,\n    },\n    lineColor: String,\n    truncateLine: {\n      type: String,\n      validator: (v: any) => ['start', 'end', 'both'].includes(v),\n    } as Prop<TimelineTruncateLine>,\n\n    ...makeDensityProps(),\n    ...makeTagProps(),\n    ...makeThemeProps(),\n  },\n\n  setup (props, { slots }) {\n    const { themeClasses } = provideTheme(props)\n    const { densityClasses } = useDensity(props)\n\n    provideDefaults({\n      VTimelineDivider: {\n        lineColor: toRef(props, 'lineColor'),\n      },\n      VTimelineItem: {\n        density: toRef(props, 'density'),\n        lineInset: toRef(props, 'lineInset'),\n      },\n    })\n\n    const sideClasses = computed(() => {\n      const side = props.side ? props.side : props.density !== 'default' ? 'end' : null\n\n      return side && `v-timeline--side-${side}`\n    })\n\n    const truncateClasses = computed(() => {\n      const classes = [\n        'v-timeline--truncate-line-start',\n        'v-timeline--truncate-line-end',\n      ]\n\n      switch (props.truncateLine) {\n        case 'both': return classes\n        case 'start': return classes[0]\n        case 'end': return classes[1]\n        default: return null\n      }\n    })\n\n    useRender(() => (\n      <props.tag\n        class={[\n          'v-timeline',\n          `v-timeline--${props.direction}`,\n          `v-timeline--align-${props.align}`,\n          `v-timeline--justify-${props.justify}`,\n          truncateClasses.value,\n          {\n            'v-timeline--inset-line': !!props.lineInset,\n          },\n          themeClasses.value,\n          densityClasses.value,\n          sideClasses.value,\n        ]}\n        style={{\n          '--v-timeline-line-thickness': convertToUnit(props.lineThickness),\n        }}\n        v-slots={ slots }\n      />\n    ))\n\n    return {}\n  },\n})\n"],"mappings":";AAAA;AACA,yB,CAEA;;SACSA,gB,EAAkBC,U;SAClBC,Y;SACAC,c,EAAgBC,Y;SAChBC,e,0CAET;;AACA,SAASC,QAAT,EAAmBC,KAAnB,QAAgC,KAAhC;SACSC,a,EAAeC,e,EAAiBC,S,gCAEzC;;AAQA,OAAO,MAAMC,SAAS,GAAGF,eAAe,CAAC;EACvCG,IAAI,EAAE,WADiC;EAGvCC,KAAK,EAAE;IACLC,KAAK,EAAE;MACLC,IAAI,EAAEC,MADD;MAELC,OAAO,EAAE,QAFJ;MAGLC,SAAS,EAAGC,CAAD,IAAY,CAAC,QAAD,EAAW,OAAX,EAAoBC,QAApB,CAA6BD,CAA7B;IAHlB,CADF;IAMLE,SAAS,EAAE;MACTN,IAAI,EAAEC,MADG;MAETC,OAAO,EAAE,UAFA;MAGTC,SAAS,EAAGC,CAAD,IAAY,CAAC,UAAD,EAAa,YAAb,EAA2BC,QAA3B,CAAoCD,CAApC;IAHd,CANN;IAWLG,OAAO,EAAE;MACPP,IAAI,EAAEC,MADC;MAEPC,OAAO,EAAE,MAFF;MAGPC,SAAS,EAAGC,CAAD,IAAY,CAAC,MAAD,EAAS,QAAT,EAAmBC,QAAnB,CAA4BD,CAA5B;IAHhB,CAXJ;IAgBLI,IAAI,EAAE;MACJR,IAAI,EAAEC,MADF;MAEJE,SAAS,EAAGC,CAAD,IAAYA,CAAC,IAAI,IAAL,IAAa,CAAC,OAAD,EAAU,KAAV,EAAiBC,QAAjB,CAA0BD,CAA1B;IAFhC,CAhBD;IAoBLK,SAAS,EAAE;MACTT,IAAI,EAAE,CAACC,MAAD,EAASS,MAAT,CADG;MAETR,OAAO,EAAE;IAFA,CApBN;IAwBLS,aAAa,EAAE;MACbX,IAAI,EAAE,CAACC,MAAD,EAASS,MAAT,CADO;MAEbR,OAAO,EAAE;IAFI,CAxBV;IA4BLU,SAAS,EAAEX,MA5BN;IA6BLY,YAAY,EAAE;MACZb,IAAI,EAAEC,MADM;MAEZE,SAAS,EAAGC,CAAD,IAAY,CAAC,OAAD,EAAU,KAAV,EAAiB,MAAjB,EAAyBC,QAAzB,CAAkCD,CAAlC;IAFX,CA7BT;IAkCL,GAAGnB,gBAAgB,EAlCd;IAmCL,GAAGE,YAAY,EAnCV;IAoCL,GAAGC,cAAc;EApCZ,CAHgC;;EA0CvC0B,KAAK,CAAEhB,KAAF,QAAoB;IAAA,IAAX;MAAEiB;IAAF,CAAW;IACvB,MAAM;MAAEC;IAAF,IAAmB3B,YAAY,CAACS,KAAD,CAArC;IACA,MAAM;MAAEmB;IAAF,IAAqB/B,UAAU,CAACY,KAAD,CAArC;IAEAR,eAAe,CAAC;MACd4B,gBAAgB,EAAE;QAChBN,SAAS,EAAEpB,KAAK,CAACM,KAAD,EAAQ,WAAR;MADA,CADJ;MAIdqB,aAAa,EAAE;QACbC,OAAO,EAAE5B,KAAK,CAACM,KAAD,EAAQ,SAAR,CADD;QAEbW,SAAS,EAAEjB,KAAK,CAACM,KAAD,EAAQ,WAAR;MAFH;IAJD,CAAD,CAAf;IAUA,MAAMuB,WAAW,GAAG9B,QAAQ,CAAC,MAAM;MACjC,MAAMiB,IAAI,GAAGV,KAAK,CAACU,IAAN,GAAaV,KAAK,CAACU,IAAnB,GAA0BV,KAAK,CAACsB,OAAN,KAAkB,SAAlB,GAA8B,KAA9B,GAAsC,IAA7E;MAEA,OAAOZ,IAAI,IAAK,oBAAmBA,IAAK,EAAxC;IACD,CAJ2B,CAA5B;IAMA,MAAMc,eAAe,GAAG/B,QAAQ,CAAC,MAAM;MACrC,MAAMgC,OAAO,GAAG,CACd,iCADc,EAEd,+BAFc,CAAhB;;MAKA,QAAQzB,KAAK,CAACe,YAAd;QACE,KAAK,MAAL;UAAa,OAAOU,OAAP;;QACb,KAAK,OAAL;UAAc,OAAOA,OAAO,CAAC,CAAD,CAAd;;QACd,KAAK,KAAL;UAAY,OAAOA,OAAO,CAAC,CAAD,CAAd;;QACZ;UAAS,OAAO,IAAP;MAJX;IAMD,CAZ+B,CAAhC;IAcA5B,SAAS,CAAC;MAAA,SAEC,CACL,YADK,EAEJ,eAAcG,KAAK,CAACQ,SAAU,EAF1B,EAGJ,qBAAoBR,KAAK,CAACC,KAAM,EAH5B,EAIJ,uBAAsBD,KAAK,CAACS,OAAQ,EAJhC,EAKLe,eAAe,CAACE,KALX,EAML;QACE,0BAA0B,CAAC,CAAC1B,KAAK,CAACW;MADpC,CANK,EASLO,YAAY,CAACQ,KATR,EAULP,cAAc,CAACO,KAVV,EAWLH,WAAW,CAACG,KAXP,CAFD;MAAA,SAeC;QACL,+BAA+B/B,aAAa,CAACK,KAAK,CAACa,aAAP;MADvC;IAfD,GAkBII,KAlBJ,CAAD,CAAT;IAsBA,OAAO,EAAP;EACD;;AAnGsC,CAAD,CAAjC"}

package/lib/components/VTimeline/VTimeline.sass

@@ -19,7 +19,6 @@
   position: relative
 
   @include horizontal(true)
-    grid-template-rows: $timeline-item-grid-template
     grid-column-gap: $timeline-item-padding
     width: 100%
 
@@ -43,13 +42,13 @@
       .v-timeline-item__body
         grid-row: 1
         padding-block-end: $timeline-item-padding
+        align-self: flex-end
 
       .v-timeline-item__opposite
         grid-row: 3
         padding-block-start: $timeline-item-padding
 
   @include vertical(true)
-    grid-template-columns: $timeline-item-grid-template
     grid-row-gap: $timeline-item-padding
     height: 100%
 
@@ -230,6 +229,21 @@ $timeline-line-size-first-last: calc(var(--v-timeline-line-size-base) - var(--v-
 
 /** Modifiers **/
 
+// Justify
+.v-timeline--justify-center
+  @include horizontal(true)
+    grid-template-rows: $timeline-item-grid-template-center
+
+  @include vertical(true)
+    grid-template-columns: $timeline-item-grid-template-center
+
+.v-timeline--justify-auto
+  @include horizontal(true)
+    grid-template-rows: $timeline-item-grid-template-auto
+
+  @include vertical(true)
+    grid-template-columns: $timeline-item-grid-template-auto
+
 // Density
 .v-timeline--density-comfortable
   @include horizontal(true)

package/lib/components/VTimeline/_variables.scss

@@ -3,8 +3,8 @@
 // VTimeline
 $timeline-density-comfortable-grid-template-end: min-content min-content auto !default;
 $timeline-density-comfortable-grid-template-start: auto min-content min-content !default;
-$timeline-density-compact-grid-template-end: min-content auto !default;
-$timeline-density-compact-grid-template-start: auto min-content !default;
+$timeline-density-compact-grid-template-end: 0 min-content auto !default;
+$timeline-density-compact-grid-template-start: auto min-content 0 !default;
 $timeline-dot-border-radius: 50% !default;
 $timeline-dot-divider-background: rgb(var(--v-theme-on-surface-variant)) !default;
 $timeline-dot-size: 38px !default;
@@ -19,7 +19,8 @@ $timeline-divider-line-horizontal-width: var(--v-timeline-line-inset, 0px) !defa
 $timeline-divider-line-thickness: var(--v-timeline-line-thickness) !default;
 
 // VTimelineItem
-$timeline-item-grid-template: auto min-content auto !default;
+$timeline-item-grid-template-center: minmax(auto, 50%) min-content minmax(auto, 50%) !default;
+$timeline-item-grid-template-auto: auto min-content auto !default;
 $timeline-item-padding: 24px !default;
 
 // Lists