@vuetify/nightly 3.0.0-beta.0 → 3.0.0-beta.2

package/lib/components/VAlert/VAlert.css

@@ -1,8 +1,8 @@
 .v-alert {
   display: grid;
   flex: 1 1;
-  grid-template-areas: "prepend content append close";
-  grid-template-columns: max-content auto max-content min-content;
+  grid-template-areas: "prepend content append close" ". content . .";
+  grid-template-columns: max-content auto max-content max-content;
   position: relative;
   padding: 16px;
   overflow: hidden;
@@ -59,6 +59,9 @@
   pointer-events: none;
   transition: opacity 0.2s ease-in-out;
 }
+.v-alert--prominent {
+  grid-template-areas: "prepend content append close" "prepend content . .";
+}
 .v-alert.v-alert--border {
   --v-border-opacity: 0.38;
 }
@@ -136,7 +139,6 @@
 }
 
 .v-alert__close {
-  align-self: flex-start;
   cursor: pointer;
   display: flex;
   flex: 0 1 auto;
@@ -144,11 +146,30 @@
   user-select: none;
 }
 
+.v-alert__content {
+  align-self: center;
+  grid-area: content;
+  overflow: hidden;
+}
+
+.v-alert__append,
+.v-alert__close {
+  align-self: flex-start;
+  margin-inline-start: 90px;
+}
+
 .v-alert__append {
+  align-self: flex-start;
   grid-area: append;
 }
+.v-alert__append + .v-alert__close {
+  margin-inline-start: 16px;
+}
 
 .v-alert__prepend {
+  align-self: flex-start;
+  display: flex;
+  align-items: center;
   grid-area: prepend;
   margin-inline-end: 16px;
 }
@@ -156,11 +177,10 @@
   align-self: center;
 }
 
-.v-alert__content {
-  grid-area: content;
-  line-height: 1.7;
+.v-alert__underlay {
+  grid-area: none;
+  position: absolute;
 }
-
 .v-alert--border-start .v-alert__underlay {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
@@ -180,12 +200,13 @@
 
 .v-alert-title {
   align-items: center;
+  align-self: center;
   display: flex;
   font-size: 1.25rem;
   font-weight: 500;
   hyphens: auto;
   letter-spacing: 0.0125em;
-  line-height: 1.35;
+  line-height: 1.75rem;
   overflow-wrap: normal;
   text-transform: none;
   word-break: normal;

package/lib/components/VAlert/VAlert.mjs

@@ -3,10 +3,12 @@ import { createVNode as _createVNode } from "vue";
 import "./VAlert.css"; // Components
 
 import { VAlertTitle } from "./VAlertTitle.mjs";
+import { VDefaultsProvider } from "../VDefaultsProvider/index.mjs";
 import { VIcon } from "../VIcon/index.mjs"; // Composables
 
 import { genOverlays, makeVariantProps, useVariant } from "../../composables/variant.mjs";
 import { makeDensityProps, useDensity } from "../../composables/density.mjs";
+import { makeDimensionProps, useDimension } from "../../composables/dimensions.mjs";
 import { makeElevationProps, useElevation } from "../../composables/elevation.mjs";
 import { makePositionProps, usePosition } from "../../composables/position.mjs";
 import { makeRoundedProps, useRounded } from "../../composables/rounded.mjs";
@@ -18,7 +20,6 @@ import { useTextColor } from "../../composables/color.mjs"; // Utilities
 import { computed, toRef } from 'vue';
 import { defineComponent } from "../../util/index.mjs"; // Types
 
-import { makeDimensionProps, useDimension } from "../../composables/dimensions.mjs";
 const allowedTypes = ['success', 'info', 'warning', 'error'];
 export const VAlert = defineComponent({
   name: 'VAlert',
@@ -86,7 +87,6 @@ export const VAlert = defineComponent({
 
       return {
         color: (_props$color = props.color) != null ? _props$color : props.type,
-        textColor: props.textColor,
         variant: props.variant
       };
     });
@@ -126,9 +126,10 @@ export const VAlert = defineComponent({
     return () => {
       var _slots$default;
 
-      const hasClose = !!(slots.close || props.closable);
       const hasPrepend = !!(slots.prepend || icon.value);
       const hasTitle = !!(slots.title || props.title);
+      const hasText = !!(props.text || slots.text);
+      const hasClose = !!(slots.close || props.closable);
       return isActive.value && _createVNode(props.tag, {
         "class": ['v-alert', props.border && {
           'v-alert--border': !!props.border,
@@ -142,24 +143,37 @@ export const VAlert = defineComponent({
         default: () => [genOverlays(false, 'v-alert'), props.border && _createVNode("div", {
           "class": ['v-alert__border', textColorClasses.value],
           "style": textColorStyles.value
-        }, null), hasPrepend && _createVNode("div", {
-          "class": "v-alert__prepend"
-        }, [slots.prepend ? slots.prepend() : _createVNode(VIcon, {
-          "icon": icon.value,
-          "size": props.prominent ? 'large' : 'default'
-        }, null)]), _createVNode("div", {
+        }, null), hasPrepend && _createVNode(VDefaultsProvider, {
+          "defaults": {
+            VIcon: {
+              density: props.density,
+              icon: icon.value,
+              size: props.prominent ? 44 : 'default'
+            }
+          }
+        }, {
+          default: () => [_createVNode("div", {
+            "class": "v-alert__prepend"
+          }, [slots.prepend ? slots.prepend() : icon.value && _createVNode(VIcon, null, null)])]
+        }), _createVNode("div", {
           "class": "v-alert__content"
         }, [hasTitle && _createVNode(VAlertTitle, null, {
           default: () => [slots.title ? slots.title() : props.title]
-        }), slots.text ? slots.text() : props.text, (_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots)]), slots.append && _createVNode("div", {
+        }), hasText && (slots.text ? slots.text() : props.text), (_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots)]), slots.append && _createVNode("div", {
           "class": "v-alert__append"
-        }, [slots.append()]), hasClose && _createVNode("div", {
-          "class": "v-alert__close",
-          "onClick": onCloseClick
-        }, [slots.close ? slots.close() : _createVNode(VIcon, {
-          "icon": props.closeIcon,
-          "size": "small"
-        }, null)])]
+        }, [slots.append()]), hasClose && _createVNode(VDefaultsProvider, {
+          "defaults": {
+            VIcon: {
+              icon: props.closeIcon,
+              size: 'small'
+            }
+          }
+        }, {
+          default: () => [_createVNode("div", {
+            "class": "v-alert__close",
+            "onClick": onCloseClick
+          }, [slots.close ? slots.close() : _createVNode(VIcon, null, null)])]
+        })]
       });
     };
   }

package/lib/components/VAlert/VAlert.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VAlert/VAlert.tsx"],"names":["VAlertTitle","VIcon","genOverlays","makeVariantProps","useVariant","makeDensityProps","useDensity","makeElevationProps","useElevation","makePositionProps","usePosition","makeRoundedProps","useRounded","makeTagProps","makeThemeProps","provideTheme","useProxiedModel","useTextColor","computed","toRef","defineComponent","makeDimensionProps","useDimension","allowedTypes","VAlert","name","props","border","type","Boolean","String","validator","val","includes","borderColor","closable","closeIcon","default","closeLabel","icon","modelValue","prominent","title","text","variant","emits","value","setup","slots","isActive","undefined","variantProps","color","textColor","themeClasses","colorClasses","colorStyles","variantClasses","densityClasses","dimensionStyles","elevationClasses","positionClasses","positionStyles","roundedClasses","textColorClasses","textColorStyles","onCloseClick","e","hasClose","close","hasPrepend","prepend","hasTitle","append"],"mappings":"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","sourcesContent":["// Styles\nimport './VAlert.sass'\n\n// Components\nimport { VAlertTitle } from './VAlertTitle'\nimport { VIcon } from '@/components/VIcon'\n\n// Composables\nimport { genOverlays, makeVariantProps, useVariant } from '@/composables/variant'\nimport { makeDensityProps, useDensity } from '@/composables/density'\nimport { makeElevationProps, useElevation } from '@/composables/elevation'\nimport { makePositionProps, usePosition } from '@/composables/position'\nimport { makeRoundedProps, useRounded } from '@/composables/rounded'\nimport { makeTagProps } from '@/composables/tag'\nimport { makeThemeProps, provideTheme } from '@/composables/theme'\nimport { useProxiedModel } from '@/composables/proxiedModel'\nimport { useTextColor } from '@/composables/color'\n\n// Utilities\nimport { computed, toRef } from 'vue'\nimport { defineComponent } from '@/util'\n\n// Types\nimport type { PropType } from 'vue'\nimport { makeDimensionProps, useDimension } from '@/composables/dimensions'\n\nconst allowedTypes = ['success', 'info', 'warning', 'error'] as const\n\ntype ContextualType = typeof allowedTypes[number]\n\nexport const VAlert = defineComponent({\n  name: 'VAlert',\n\n  props: {\n    border: {\n      type: [Boolean, String],\n      validator: (val: boolean | string) => {\n        return typeof val === 'boolean' || [\n          'top',\n          'end',\n          'bottom',\n          'start',\n        ].includes(val)\n      },\n    },\n    borderColor: String,\n    closable: Boolean,\n    closeIcon: {\n      type: String,\n      default: '$close',\n    },\n    closeLabel: {\n      type: String,\n      default: '$vuetify.close',\n    },\n    icon: {\n      type: [Boolean, String] as PropType<false | string>,\n      default: null,\n    },\n    modelValue: {\n      type: Boolean,\n      default: true,\n    },\n    prominent: Boolean,\n    title: String,\n    text: String,\n    type: {\n      type: String as PropType<ContextualType>,\n      validator: (val: ContextualType) => allowedTypes.includes(val),\n    },\n\n    ...makeDensityProps(),\n    ...makeDimensionProps(),\n    ...makeElevationProps(),\n    ...makePositionProps(),\n    ...makeRoundedProps(),\n    ...makeTagProps(),\n    ...makeThemeProps(),\n    ...makeVariantProps({ variant: 'contained-flat' } as const),\n  },\n\n  emits: {\n    'update:modelValue': (value: boolean) => true,\n  },\n\n  setup (props, { slots }) {\n    const isActive = useProxiedModel(props, 'modelValue')\n    const icon = computed(() => {\n      if (props.icon === false) return undefined\n      if (!props.type) return props.icon\n\n      return props.icon ?? `$${props.type}`\n    })\n    const variantProps = computed(() => ({\n      color: props.color ?? props.type,\n      textColor: props.textColor,\n      variant: props.variant,\n    }))\n\n    const { themeClasses } = provideTheme(props)\n    const { colorClasses, colorStyles, variantClasses } = useVariant(variantProps)\n    const { densityClasses } = useDensity(props)\n    const { dimensionStyles } = useDimension(props)\n    const { elevationClasses } = useElevation(props)\n    const { positionClasses, positionStyles } = usePosition(props)\n    const { roundedClasses } = useRounded(props)\n    const { textColorClasses, textColorStyles } = useTextColor(toRef(props, 'borderColor'))\n\n    function onCloseClick (e: MouseEvent) {\n      isActive.value = false\n    }\n\n    return () => {\n      const hasClose = !!(slots.close || props.closable)\n      const hasPrepend = !!(slots.prepend || icon.value)\n      const hasTitle = !!(slots.title || props.title)\n\n      return isActive.value && (\n        <props.tag\n          class={[\n            'v-alert',\n            props.border && {\n              'v-alert--border': !!props.border,\n              [`v-alert--border-${props.border === true ? 'start' : props.border}`]: true,\n            },\n            {\n              'v-alert--prominent': props.prominent,\n            },\n            themeClasses.value,\n            colorClasses.value,\n            densityClasses.value,\n            elevationClasses.value,\n            positionClasses.value,\n            roundedClasses.value,\n            variantClasses.value,\n          ]}\n          style={[\n            colorStyles.value,\n            dimensionStyles.value,\n            positionStyles.value,\n          ]}\n          role=\"alert\"\n        >\n          { genOverlays(false, 'v-alert') }\n\n          { props.border && (\n            <div\n              class={[\n                'v-alert__border',\n                textColorClasses.value,\n              ]}\n              style={ textColorStyles.value }\n            />\n          ) }\n\n          { hasPrepend && (\n            <div class=\"v-alert__prepend\">\n              { slots.prepend\n                ? slots.prepend()\n                : (\n                  <VIcon\n                    icon={ icon.value }\n                    size={ props.prominent ? 'large' : 'default' }\n                  />\n                )\n              }\n            </div>\n          ) }\n\n          <div class=\"v-alert__content\">\n            { hasTitle && (\n              <VAlertTitle>\n                { slots.title ? slots.title() : props.title }\n              </VAlertTitle>\n            ) }\n\n            { slots.text ? slots.text() : props.text }\n\n            { slots.default?.() }\n          </div>\n\n          { slots.append && (\n            <div class=\"v-alert__append\">\n              { slots.append() }\n            </div>\n          ) }\n\n          { hasClose && (\n            <div\n              class=\"v-alert__close\"\n              onClick={ onCloseClick }\n            >\n              { slots.close\n                ? slots.close()\n                : (\n                  <VIcon\n                    icon={ props.closeIcon }\n                    size=\"small\"\n                  />\n                )\n              }\n            </div>\n          ) }\n        </props.tag>\n      )\n    }\n  },\n})\n\nexport type VAlert = InstanceType<typeof VAlert>\n"],"file":"VAlert.mjs"}
+{"version":3,"sources":["../../../src/components/VAlert/VAlert.tsx"],"names":["VAlertTitle","VDefaultsProvider","VIcon","genOverlays","makeVariantProps","useVariant","makeDensityProps","useDensity","makeDimensionProps","useDimension","makeElevationProps","useElevation","makePositionProps","usePosition","makeRoundedProps","useRounded","makeTagProps","makeThemeProps","provideTheme","useProxiedModel","useTextColor","computed","toRef","defineComponent","allowedTypes","VAlert","name","props","border","type","Boolean","String","validator","val","includes","borderColor","closable","closeIcon","default","closeLabel","icon","modelValue","prominent","title","text","variant","emits","value","setup","slots","isActive","undefined","variantProps","color","themeClasses","colorClasses","colorStyles","variantClasses","densityClasses","dimensionStyles","elevationClasses","positionClasses","positionStyles","roundedClasses","textColorClasses","textColorStyles","onCloseClick","e","hasPrepend","prepend","hasTitle","hasText","hasClose","close","density","size","append"],"mappings":"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","sourcesContent":["// Styles\nimport './VAlert.sass'\n\n// Components\nimport { VAlertTitle } from './VAlertTitle'\nimport { VDefaultsProvider } from '@/components/VDefaultsProvider'\nimport { VIcon } from '@/components/VIcon'\n\n// Composables\nimport { genOverlays, makeVariantProps, useVariant } from '@/composables/variant'\nimport { makeDensityProps, useDensity } from '@/composables/density'\nimport { makeDimensionProps, useDimension } from '@/composables/dimensions'\nimport { makeElevationProps, useElevation } from '@/composables/elevation'\nimport { makePositionProps, usePosition } from '@/composables/position'\nimport { makeRoundedProps, useRounded } from '@/composables/rounded'\nimport { makeTagProps } from '@/composables/tag'\nimport { makeThemeProps, provideTheme } from '@/composables/theme'\nimport { useProxiedModel } from '@/composables/proxiedModel'\nimport { useTextColor } from '@/composables/color'\n\n// Utilities\nimport { computed, toRef } from 'vue'\nimport { defineComponent } from '@/util'\n\n// Types\nimport type { PropType } from 'vue'\n\nconst allowedTypes = ['success', 'info', 'warning', 'error'] as const\n\ntype ContextualType = typeof allowedTypes[number]\n\nexport const VAlert = defineComponent({\n  name: 'VAlert',\n\n  props: {\n    border: {\n      type: [Boolean, String],\n      validator: (val: boolean | string) => {\n        return typeof val === 'boolean' || [\n          'top',\n          'end',\n          'bottom',\n          'start',\n        ].includes(val)\n      },\n    },\n    borderColor: String,\n    closable: Boolean,\n    closeIcon: {\n      type: String,\n      default: '$close',\n    },\n    closeLabel: {\n      type: String,\n      default: '$vuetify.close',\n    },\n    icon: {\n      type: [Boolean, String] as PropType<false | string>,\n      default: null,\n    },\n    modelValue: {\n      type: Boolean,\n      default: true,\n    },\n    prominent: Boolean,\n    title: String,\n    text: String,\n    type: {\n      type: String as PropType<ContextualType>,\n      validator: (val: ContextualType) => allowedTypes.includes(val),\n    },\n\n    ...makeDensityProps(),\n    ...makeDimensionProps(),\n    ...makeElevationProps(),\n    ...makePositionProps(),\n    ...makeRoundedProps(),\n    ...makeTagProps(),\n    ...makeThemeProps(),\n    ...makeVariantProps({ variant: 'contained-flat' } as const),\n  },\n\n  emits: {\n    'update:modelValue': (value: boolean) => true,\n  },\n\n  setup (props, { slots }) {\n    const isActive = useProxiedModel(props, 'modelValue')\n    const icon = computed(() => {\n      if (props.icon === false) return undefined\n      if (!props.type) return props.icon\n\n      return props.icon ?? `$${props.type}`\n    })\n    const variantProps = computed(() => ({\n      color: props.color ?? props.type,\n      variant: props.variant,\n    }))\n\n    const { themeClasses } = provideTheme(props)\n    const { colorClasses, colorStyles, variantClasses } = useVariant(variantProps)\n    const { densityClasses } = useDensity(props)\n    const { dimensionStyles } = useDimension(props)\n    const { elevationClasses } = useElevation(props)\n    const { positionClasses, positionStyles } = usePosition(props)\n    const { roundedClasses } = useRounded(props)\n    const { textColorClasses, textColorStyles } = useTextColor(toRef(props, 'borderColor'))\n\n    function onCloseClick (e: MouseEvent) {\n      isActive.value = false\n    }\n\n    return () => {\n      const hasPrepend = !!(slots.prepend || icon.value)\n      const hasTitle = !!(slots.title || props.title)\n      const hasText = !!(props.text || slots.text)\n      const hasClose = !!(slots.close || props.closable)\n\n      return isActive.value && (\n        <props.tag\n          class={[\n            'v-alert',\n            props.border && {\n              'v-alert--border': !!props.border,\n              [`v-alert--border-${props.border === true ? 'start' : props.border}`]: true,\n            },\n            {\n              'v-alert--prominent': props.prominent,\n            },\n            themeClasses.value,\n            colorClasses.value,\n            densityClasses.value,\n            elevationClasses.value,\n            positionClasses.value,\n            roundedClasses.value,\n            variantClasses.value,\n          ]}\n          style={[\n            colorStyles.value,\n            dimensionStyles.value,\n            positionStyles.value,\n          ]}\n          role=\"alert\"\n        >\n          { genOverlays(false, 'v-alert') }\n\n          { props.border && (\n            <div\n              class={[\n                'v-alert__border',\n                textColorClasses.value,\n              ]}\n              style={ textColorStyles.value }\n            />\n          ) }\n\n          { hasPrepend && (\n            <VDefaultsProvider\n              defaults={{\n                VIcon: {\n                  density: props.density,\n                  icon: icon.value,\n                  size: props.prominent ? 44 : 'default',\n                },\n              }}\n            >\n              <div class=\"v-alert__prepend\">\n                { slots.prepend\n                  ? slots.prepend()\n                  : icon.value && (<VIcon />)\n                }\n              </div>\n            </VDefaultsProvider>\n          ) }\n\n          <div class=\"v-alert__content\">\n            { hasTitle && (\n              <VAlertTitle>\n                { slots.title ? slots.title() : props.title }\n              </VAlertTitle>\n            ) }\n\n            { hasText && (\n              slots.text ? slots.text() : props.text\n            ) }\n\n            { slots.default?.() }\n          </div>\n\n          { slots.append && (\n            <div class=\"v-alert__append\">\n              { slots.append() }\n            </div>\n          ) }\n\n          { hasClose && (\n            <VDefaultsProvider\n              defaults={{\n                VIcon: {\n                  icon: props.closeIcon,\n                  size: 'small',\n                },\n              }}\n            >\n              <div\n                class=\"v-alert__close\"\n                onClick={ onCloseClick }\n              >\n                { slots.close\n                  ? slots.close()\n                  : (<VIcon />)\n                }\n              </div>\n            </VDefaultsProvider>\n          ) }\n        </props.tag>\n      )\n    }\n  },\n})\n\nexport type VAlert = InstanceType<typeof VAlert>\n"],"file":"VAlert.mjs"}

package/lib/components/VAlert/VAlert.sass

@@ -1,12 +1,13 @@
 @forward './variables'
+
 @use '../../styles/tools'
 @use './variables' as *
 
 .v-alert
   display: grid
   flex: 1 1
-  grid-template-areas: "prepend content append close"
-  grid-template-columns: max-content auto max-content min-content
+  grid-template-areas: "prepend content append close" ". content . ."
+  grid-template-columns: max-content auto max-content max-content
   position: relative
   padding: $alert-padding
   overflow: hidden
@@ -16,6 +17,9 @@
   @include tools.rounded($alert-border-radius)
   @include tools.variant($alert-variants...)
 
+  &--prominent
+    grid-template-areas: "prepend content append close" "prepend content . ."
+
   &.v-alert--border
     --v-border-opacity: #{$alert-border-opacity}
 
@@ -65,28 +69,43 @@
     border-bottom-width: $alert-border-thin-width
 
 .v-alert__close
-  align-self: flex-start
   cursor: pointer
   display: flex
   flex: 0 1 auto
   grid-area: close
   user-select: none
 
+.v-alert__content
+  align-self: center
+  grid-area: content
+  overflow: hidden
+
+.v-alert__append,
+.v-alert__close
+  align-self: flex-start
+  margin-inline-start: $alert-append-margin-inline-start
+
 .v-alert__append
+  align-self: flex-start
   grid-area: append
 
+  + .v-alert__close
+    margin-inline-start: $alert-append-close-margin-inline-start
+
 .v-alert__prepend
+  align-self: flex-start
+  display: flex
+  align-items: center
   grid-area: prepend
   margin-inline-end: $alert-prepend-margin-inline-end
 
   .v-alert--prominent &
     align-self: center
 
-.v-alert__content
-  grid-area: content
-  line-height: 1.7
-
 .v-alert__underlay
+  grid-area: none
+  position: absolute
+
   .v-alert--border-start &
     border-top-left-radius: 0
     border-bottom-left-radius: 0
@@ -105,6 +124,7 @@
 
 .v-alert-title
   align-items: center
+  align-self: center
   display: flex
   font-size: $alert-title-font-size
   font-weight: $alert-title-font-weight

package/lib/components/VAlert/VAlertTitle.mjs

@@ -1,3 +1,4 @@
+// Utilities
 import { createSimpleFunctional } from "../../util/index.mjs";
 export const VAlertTitle = createSimpleFunctional('v-alert-title');
 //# sourceMappingURL=VAlertTitle.mjs.map

package/lib/components/VAlert/VAlertTitle.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VAlert/VAlertTitle.ts"],"names":["createSimpleFunctional","VAlertTitle"],"mappings":"SAASA,sB;AAET,OAAO,MAAMC,WAAW,GAAGD,sBAAsB,CAAC,eAAD,CAA1C","sourcesContent":["import { createSimpleFunctional } from '@/util'\n\nexport const VAlertTitle = createSimpleFunctional('v-alert-title')\n"],"file":"VAlertTitle.mjs"}
+{"version":3,"sources":["../../../src/components/VAlert/VAlertTitle.ts"],"names":["createSimpleFunctional","VAlertTitle"],"mappings":"AAAA;SACSA,sB;AAET,OAAO,MAAMC,WAAW,GAAGD,sBAAsB,CAAC,eAAD,CAA1C","sourcesContent":["// Utilities\nimport { createSimpleFunctional } from '@/util'\n\nexport const VAlertTitle = createSimpleFunctional('v-alert-title')\n"],"file":"VAlertTitle.mjs"}

package/lib/components/VAlert/_variables.scss

@@ -1,14 +1,14 @@
 @use '../../styles/settings';
 @use '../../styles/tools';
 
-// Defaults
+// VAlert
 $alert-background: rgb(var(--v-theme-on-surface-variant)) !default;
 $alert-border-color: currentColor !default;
+$alert-border-opacity: .38 !default;
 $alert-border-radius: settings.$border-radius-root !default;
 $alert-border-style: settings.$border-style-root !default;
 $alert-border-thin-width: 8px !default;
 $alert-border-width: 0 !default;
-$alert-border-opacity: .38 !default;
 $alert-color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity)) !default;
 $alert-density: ('default': 0, 'comfortable': -1, 'compact': -2) !default;
 $alert-elevation: 1 !default;
@@ -17,24 +17,31 @@ $alert-plain-opacity: .62 !default;
 $alert-plain-transition: .2s opacity settings.$standard-easing !default;
 $alert-positions: absolute fixed sticky !default;
 $alert-prepend-margin-inline-end: 16px !default;
-$alert-title-comfortable-line-height: 1.75rem !default;
-$alert-title-compact-line-height: 1.55rem !default;
+$alert-append-margin-inline-start: 90px !default;
+$alert-append-close-margin-inline-start: 16px !default;
+
+// VAlertTitle
 $alert-title-font-size: tools.map-deep-get(settings.$typography, 'h6', 'size') !default;
 $alert-title-font-weight: tools.map-deep-get(settings.$typography, 'h6', 'weight') !default;
 $alert-title-hyphens: auto !default;
 $alert-title-letter-spacing: tools.map-deep-get(settings.$typography, 'h6', 'letter-spacing') !default;
-$alert-title-line-height: 1.35 !default;
+// $alert-title-line-height: tools.map-deep-get(settings.$typography, 'h6', 'line-height') !default;
+$alert-title-line-height: 1.75rem !default;
 $alert-title-overflow-wrap: normal !default;
 $alert-title-text-transform: none !default;
 $alert-title-word-break: normal !default;
 $alert-title-word-wrap: break-word !default;
 
+// VAlertText
+$alert-text-line-height: 1.35 !default;
+
+// Lists
 $alert-border: (
   $alert-border-color,
   $alert-border-style,
   $alert-border-width,
   $alert-border-thin-width
-) !default;
+);
 
 $alert-variants: (
   $alert-background,
@@ -42,4 +49,4 @@ $alert-variants: (
   $alert-elevation,
   $alert-plain-opacity,
   'v-alert'
-) !default;
+);

package/lib/components/VApp/VApp.css

@@ -12,6 +12,7 @@
   backface-visibility: hidden;
   display: flex;
   flex-direction: column;
+  min-height: 100vh;
   max-width: 100%;
   position: relative;
 }

package/lib/components/VApp/VApp.sass

@@ -11,6 +11,7 @@
     backface-visibility: hidden
     display: flex
     flex-direction: column
+    min-height: 100vh
     max-width: 100%
     position: relative
 

package/lib/components/VAppBar/VAppBar.mjs

@@ -47,9 +47,11 @@ export const VAppBar = defineComponent({
     const vToolbarRef = ref();
     const isActive = useProxiedModel(props, 'modelValue');
     const height = computed(() => {
-      var _vToolbarRef$value;
+      var _vToolbarRef$value$co, _vToolbarRef$value, _vToolbarRef$value$ex, _vToolbarRef$value2;
 
-      return (_vToolbarRef$value = vToolbarRef.value) == null ? void 0 : _vToolbarRef$value.contentHeight;
+      const height = (_vToolbarRef$value$co = (_vToolbarRef$value = vToolbarRef.value) == null ? void 0 : _vToolbarRef$value.contentHeight) != null ? _vToolbarRef$value$co : 0;
+      const extensionHeight = (_vToolbarRef$value$ex = (_vToolbarRef$value2 = vToolbarRef.value) == null ? void 0 : _vToolbarRef$value2.extensionHeight) != null ? _vToolbarRef$value$ex : 0;
+      return height + extensionHeight;
     });
     const {
       layoutItemStyles
@@ -69,7 +71,9 @@ export const VAppBar = defineComponent({
         "class": ['v-app-bar', {
           'v-app-bar--bottom': props.position === 'bottom'
         }],
-        "style": layoutItemStyles.value
+        "style": { ...layoutItemStyles.value,
+          height: undefined
+        }
       }, toolbarProps), slots);
     };
   }

package/lib/components/VAppBar/VAppBar.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VAppBar/VAppBar.tsx"],"names":["filterToolbarProps","makeVToolbarProps","VToolbar","makeLayoutItemProps","useLayoutItem","useProxiedModel","computed","ref","toRef","defineComponent","VAppBar","name","props","modelValue","type","Boolean","default","position","String","validator","value","includes","height","Number","emits","setup","slots","vToolbarRef","isActive","contentHeight","layoutItemStyles","id","priority","parseInt","layoutSize","elementSize","active","absolute","toolbarProps"],"mappings":";AAAA;AACA,uB,CAEA;;SACSA,kB,EAAoBC,iB,EAAmBC,Q,oCAEhD;;SACSC,mB,EAAqBC,a;SACrBC,e,8CAET;;AACA,SAASC,QAAT,EAAmBC,GAAnB,EAAwBC,KAAxB,QAAqC,KAArC;SACSC,e,gCAET;;AAGA,OAAO,MAAMC,OAAO,GAAGD,eAAe,CAAC;AACrCE,EAAAA,IAAI,EAAE,SAD+B;AAGrCC,EAAAA,KAAK,EAAE;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACAC,IAAAA,UAAU,EAAE;AACVC,MAAAA,IAAI,EAAEC,OADI;AAEVC,MAAAA,OAAO,EAAE;AAFC,KARP;AAYLC,IAAAA,QAAQ,EAAE;AACRH,MAAAA,IAAI,EAAEI,MADE;AAERF,MAAAA,OAAO,EAAE,KAFD;AAGRG,MAAAA,SAAS,EAAGC,KAAD,IAAgB,CAAC,KAAD,EAAQ,QAAR,EAAkBC,QAAlB,CAA2BD,KAA3B;AAHnB,KAZL;AAkBL,OAAGnB,iBAAiB,EAlBf;AAmBL,OAAGE,mBAAmB,EAnBjB;AAqBLmB,IAAAA,MAAM,EAAE;AACNR,MAAAA,IAAI,EAAE,CAACS,MAAD,EAASL,MAAT,CADA;AAENF,MAAAA,OAAO,EAAE;AAFH;AArBH,GAH8B;AA8BrCQ,EAAAA,KAAK,EAAE;AACL,yBAAsBJ,KAAD,IAAoB;AADpC,GA9B8B;;AAkCrCK,EAAAA,KAAK,CAAEb,KAAF,QAAoB;AAAA,QAAX;AAAEc,MAAAA;AAAF,KAAW;AACvB,UAAMC,WAAW,GAAGpB,GAAG,EAAvB;AACA,UAAMqB,QAAQ,GAAGvB,eAAe,CAACO,KAAD,EAAQ,YAAR,CAAhC;AACA,UAAMU,MAAM,GAAGhB,QAAQ,CAAC;AAAA;;AAAA,mCAAMqB,WAAW,CAACP,KAAlB,qBAAM,mBAAmBS,aAAzB;AAAA,KAAD,CAAvB;AACA,UAAM;AAAEC,MAAAA;AAAF,QAAuB1B,aAAa,CAAC;AACzC2B,MAAAA,EAAE,EAAEnB,KAAK,CAACD,IAD+B;AAEzCqB,MAAAA,QAAQ,EAAE1B,QAAQ,CAAC,MAAM2B,QAAQ,CAACrB,KAAK,CAACoB,QAAP,EAAiB,EAAjB,CAAf,CAFuB;AAGzCf,MAAAA,QAAQ,EAAET,KAAK,CAACI,KAAD,EAAQ,UAAR,CAH0B;AAIzCsB,MAAAA,UAAU,EAAEZ,MAJ6B;AAKzCa,MAAAA,WAAW,EAAEb,MAL4B;AAMzCc,MAAAA,MAAM,EAAER,QANiC;AAOzCS,MAAAA,QAAQ,EAAE7B,KAAK,CAACI,KAAD,EAAQ,UAAR;AAP0B,KAAD,CAA1C;AAUA,WAAO,MAAM;AACX,YAAM,CAAC0B,YAAD,IAAiBtC,kBAAkB,CAACY,KAAD,CAAzC;AAEA;AAAA,eAEUe,WAFV;AAAA,iBAGW,CACL,WADK,EAEL;AACE,+BAAqBf,KAAK,CAACK,QAAN,KAAmB;AAD1C,SAFK,CAHX;AAAA,iBASYa,gBAAgB,CAACV;AAT7B,SAUSkB,YAVT,GAWcZ,KAXd;AAcD,KAjBD;AAkBD;;AAlEoC,CAAD,CAA/B","sourcesContent":["// Styles\nimport './VAppBar.sass'\n\n// Components\nimport { filterToolbarProps, makeVToolbarProps, VToolbar } from '@/components/VToolbar/VToolbar'\n\n// Composables\nimport { makeLayoutItemProps, useLayoutItem } from '@/composables/layout'\nimport { useProxiedModel } from '@/composables/proxiedModel'\n\n// Utilities\nimport { computed, ref, toRef } from 'vue'\nimport { defineComponent } from '@/util'\n\n// Types\nimport type { PropType } from 'vue'\n\nexport const VAppBar = defineComponent({\n  name: 'VAppBar',\n\n  props: {\n    // TODO: Implement scrolling techniques\n    // hideOnScroll: Boolean\n    // invertedScroll: Boolean\n    // collapseOnScroll: Boolean\n    // elevateOnScroll: Boolean\n    // shrinkOnScroll: Boolean\n    // fadeImageOnScroll: Boolean\n    modelValue: {\n      type: Boolean,\n      default: true,\n    },\n    position: {\n      type: String as PropType<'top' | 'bottom'>,\n      default: 'top',\n      validator: (value: any) => ['top', 'bottom'].includes(value),\n    },\n\n    ...makeVToolbarProps(),\n    ...makeLayoutItemProps(),\n\n    height: {\n      type: [Number, String],\n      default: 64,\n    },\n  },\n\n  emits: {\n    'update:modelValue': (value: boolean) => true,\n  },\n\n  setup (props, { slots }) {\n    const vToolbarRef = ref()\n    const isActive = useProxiedModel(props, 'modelValue')\n    const height = computed(() => vToolbarRef.value?.contentHeight)\n    const { layoutItemStyles } = useLayoutItem({\n      id: props.name,\n      priority: computed(() => parseInt(props.priority, 10)),\n      position: toRef(props, 'position'),\n      layoutSize: height,\n      elementSize: height,\n      active: isActive,\n      absolute: toRef(props, 'absolute'),\n    })\n\n    return () => {\n      const [toolbarProps] = filterToolbarProps(props)\n\n      return (\n        <VToolbar\n          ref={ vToolbarRef }\n          class={[\n            'v-app-bar',\n            {\n              'v-app-bar--bottom': props.position === 'bottom',\n            },\n          ]}\n          style={ layoutItemStyles.value }\n          { ...toolbarProps }\n          v-slots={ slots }\n        />\n      )\n    }\n  },\n})\n\nexport type VAppBar = InstanceType<typeof VAppBar>\n"],"file":"VAppBar.mjs"}
+{"version":3,"sources":["../../../src/components/VAppBar/VAppBar.tsx"],"names":["filterToolbarProps","makeVToolbarProps","VToolbar","makeLayoutItemProps","useLayoutItem","useProxiedModel","computed","ref","toRef","defineComponent","VAppBar","name","props","modelValue","type","Boolean","default","position","String","validator","value","includes","height","Number","emits","setup","slots","vToolbarRef","isActive","contentHeight","extensionHeight","layoutItemStyles","id","priority","parseInt","layoutSize","elementSize","active","absolute","toolbarProps","undefined"],"mappings":";AAAA;AACA,uB,CAEA;;SACSA,kB,EAAoBC,iB,EAAmBC,Q,oCAEhD;;SACSC,mB,EAAqBC,a;SACrBC,e,8CAET;;AACA,SAASC,QAAT,EAAmBC,GAAnB,EAAwBC,KAAxB,QAAqC,KAArC;SACSC,e,gCAET;;AAGA,OAAO,MAAMC,OAAO,GAAGD,eAAe,CAAC;AACrCE,EAAAA,IAAI,EAAE,SAD+B;AAGrCC,EAAAA,KAAK,EAAE;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACAC,IAAAA,UAAU,EAAE;AACVC,MAAAA,IAAI,EAAEC,OADI;AAEVC,MAAAA,OAAO,EAAE;AAFC,KARP;AAYLC,IAAAA,QAAQ,EAAE;AACRH,MAAAA,IAAI,EAAEI,MADE;AAERF,MAAAA,OAAO,EAAE,KAFD;AAGRG,MAAAA,SAAS,EAAGC,KAAD,IAAgB,CAAC,KAAD,EAAQ,QAAR,EAAkBC,QAAlB,CAA2BD,KAA3B;AAHnB,KAZL;AAkBL,OAAGnB,iBAAiB,EAlBf;AAmBL,OAAGE,mBAAmB,EAnBjB;AAqBLmB,IAAAA,MAAM,EAAE;AACNR,MAAAA,IAAI,EAAE,CAACS,MAAD,EAASL,MAAT,CADA;AAENF,MAAAA,OAAO,EAAE;AAFH;AArBH,GAH8B;AA8BrCQ,EAAAA,KAAK,EAAE;AACL,yBAAsBJ,KAAD,IAAoB;AADpC,GA9B8B;;AAkCrCK,EAAAA,KAAK,CAAEb,KAAF,QAAoB;AAAA,QAAX;AAAEc,MAAAA;AAAF,KAAW;AACvB,UAAMC,WAAW,GAAGpB,GAAG,EAAvB;AACA,UAAMqB,QAAQ,GAAGvB,eAAe,CAACO,KAAD,EAAQ,YAAR,CAAhC;AACA,UAAMU,MAAM,GAAGhB,QAAQ,CAAC,MAAM;AAAA;;AAC5B,YAAMgB,MAAc,kDAAGK,WAAW,CAACP,KAAf,qBAAG,mBAAmBS,aAAtB,oCAAuC,CAA3D;AACA,YAAMC,eAAuB,mDAAGH,WAAW,CAACP,KAAf,qBAAG,oBAAmBU,eAAtB,oCAAyC,CAAtE;AAEA,aAAQR,MAAM,GAAGQ,eAAjB;AACD,KALsB,CAAvB;AAMA,UAAM;AAAEC,MAAAA;AAAF,QAAuB3B,aAAa,CAAC;AACzC4B,MAAAA,EAAE,EAAEpB,KAAK,CAACD,IAD+B;AAEzCsB,MAAAA,QAAQ,EAAE3B,QAAQ,CAAC,MAAM4B,QAAQ,CAACtB,KAAK,CAACqB,QAAP,EAAiB,EAAjB,CAAf,CAFuB;AAGzChB,MAAAA,QAAQ,EAAET,KAAK,CAACI,KAAD,EAAQ,UAAR,CAH0B;AAIzCuB,MAAAA,UAAU,EAAEb,MAJ6B;AAKzCc,MAAAA,WAAW,EAAEd,MAL4B;AAMzCe,MAAAA,MAAM,EAAET,QANiC;AAOzCU,MAAAA,QAAQ,EAAE9B,KAAK,CAACI,KAAD,EAAQ,UAAR;AAP0B,KAAD,CAA1C;AAUA,WAAO,MAAM;AACX,YAAM,CAAC2B,YAAD,IAAiBvC,kBAAkB,CAACY,KAAD,CAAzC;AAEA;AAAA,eAEUe,WAFV;AAAA,iBAGW,CACL,WADK,EAEL;AACE,+BAAqBf,KAAK,CAACK,QAAN,KAAmB;AAD1C,SAFK,CAHX;AAAA,iBASW,EACL,GAAGc,gBAAgB,CAACX,KADf;AAELE,UAAAA,MAAM,EAAEkB;AAFH;AATX,SAaSD,YAbT,GAccb,KAdd;AAiBD,KApBD;AAqBD;;AA1EoC,CAAD,CAA/B","sourcesContent":["// Styles\nimport './VAppBar.sass'\n\n// Components\nimport { filterToolbarProps, makeVToolbarProps, VToolbar } from '@/components/VToolbar/VToolbar'\n\n// Composables\nimport { makeLayoutItemProps, useLayoutItem } from '@/composables/layout'\nimport { useProxiedModel } from '@/composables/proxiedModel'\n\n// Utilities\nimport { computed, ref, toRef } from 'vue'\nimport { defineComponent } from '@/util'\n\n// Types\nimport type { PropType } from 'vue'\n\nexport const VAppBar = defineComponent({\n  name: 'VAppBar',\n\n  props: {\n    // TODO: Implement scrolling techniques\n    // hideOnScroll: Boolean\n    // invertedScroll: Boolean\n    // collapseOnScroll: Boolean\n    // elevateOnScroll: Boolean\n    // shrinkOnScroll: Boolean\n    // fadeImageOnScroll: Boolean\n    modelValue: {\n      type: Boolean,\n      default: true,\n    },\n    position: {\n      type: String as PropType<'top' | 'bottom'>,\n      default: 'top',\n      validator: (value: any) => ['top', 'bottom'].includes(value),\n    },\n\n    ...makeVToolbarProps(),\n    ...makeLayoutItemProps(),\n\n    height: {\n      type: [Number, String],\n      default: 64,\n    },\n  },\n\n  emits: {\n    'update:modelValue': (value: boolean) => true,\n  },\n\n  setup (props, { slots }) {\n    const vToolbarRef = ref()\n    const isActive = useProxiedModel(props, 'modelValue')\n    const height = computed(() => {\n      const height: number = vToolbarRef.value?.contentHeight ?? 0\n      const extensionHeight: number = vToolbarRef.value?.extensionHeight ?? 0\n\n      return (height + extensionHeight)\n    })\n    const { layoutItemStyles } = useLayoutItem({\n      id: props.name,\n      priority: computed(() => parseInt(props.priority, 10)),\n      position: toRef(props, 'position'),\n      layoutSize: height,\n      elementSize: height,\n      active: isActive,\n      absolute: toRef(props, 'absolute'),\n    })\n\n    return () => {\n      const [toolbarProps] = filterToolbarProps(props)\n\n      return (\n        <VToolbar\n          ref={ vToolbarRef }\n          class={[\n            'v-app-bar',\n            {\n              'v-app-bar--bottom': props.position === 'bottom',\n            },\n          ]}\n          style={{\n            ...layoutItemStyles.value,\n            height: undefined,\n          }}\n          { ...toolbarProps }\n          v-slots={ slots }\n        />\n      )\n    }\n  },\n})\n\nexport type VAppBar = InstanceType<typeof VAppBar>\n"],"file":"VAppBar.mjs"}

package/lib/components/VAppBar/VAppBarTitle.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VAppBar/VAppBarTitle.tsx"],"names":["VToolbarTitle","defineComponent","VAppBarTitle","name","setup","_","slots"],"mappings":";AAAA;SACSA,a,iCAET;;SACSC,e;AAET,OAAO,MAAMC,YAAY,GAAGD,eAAe,CAAC,EAC1C,GAAGD,aADuC;AAG1CG,EAAAA,IAAI,EAAE,cAHoC;;AAK1CC,EAAAA,KAAK,CAAEC,CAAF,QAAgB;AAAA,QAAX;AAAEC,MAAAA;AAAF,KAAW;AACnB,WAAO;AAAA,eAEG;AAFH,OAGOA,KAHP,CAAP;AAMD;;AAZyC,CAAD,CAApC","sourcesContent":["// Composables\nimport { VToolbarTitle } from '@/components/VToolbar'\n\n// Utilities\nimport { defineComponent } from '@/util'\n\nexport const VAppBarTitle = defineComponent({\n  ...VToolbarTitle,\n\n  name: 'VAppBarTitle',\n\n  setup (_, { slots }) {\n    return () => (\n      <VToolbarTitle\n        class=\"v-app-bar-title\"\n        v-slots={ slots }\n      />\n    )\n  },\n})\n"],"file":"VAppBarTitle.mjs"}
+{"version":3,"sources":["../../../src/components/VAppBar/VAppBarTitle.tsx"],"names":["VToolbarTitle","defineComponent","VAppBarTitle","name","setup","_","slots"],"mappings":";AAAA;SACSA,a,iCAET;;SACSC,e;AAET,OAAO,MAAMC,YAAY,GAAGD,eAAe,CAAC,EAC1C,GAAGD,aADuC;AAG1CG,EAAAA,IAAI,EAAE,cAHoC;;AAK1CC,EAAAA,KAAK,CAAEC,CAAF,QAAgB;AAAA,QAAX;AAAEC,MAAAA;AAAF,KAAW;AACnB,WAAO;AAAA,eAEG;AAFH,OAGOA,KAHP,CAAP;AAMD;;AAZyC,CAAD,CAApC","sourcesContent":["// Composables\nimport { VToolbarTitle } from '@/components/VToolbar'\n\n// Utilities\nimport { defineComponent } from '@/util'\n\nexport const VAppBarTitle = defineComponent({\n  ...VToolbarTitle,\n\n  name: 'VAppBarTitle',\n\n  setup (_, { slots }) {\n    return () => (\n      <VToolbarTitle\n        class=\"v-app-bar-title\"\n        v-slots={ slots }\n      />\n    )\n  },\n}) as typeof VToolbarTitle\n"],"file":"VAppBarTitle.mjs"}