@vuetify/nightly 3.0.0-alpha.8 → 3.0.0-beta.0

package/lib/components/VAlert/VAlert.css

@@ -0,0 +1,193 @@
+.v-alert {
+  display: grid;
+  flex: 1 1;
+  grid-template-areas: "prepend content append close";
+  grid-template-columns: max-content auto max-content min-content;
+  position: relative;
+  padding: 16px;
+  overflow: hidden;
+  --v-border-color: currentColor;
+  border-radius: 4px;
+}
+.v-alert--absolute {
+  position: absolute;
+}
+.v-alert--fixed {
+  position: fixed;
+}
+.v-alert--sticky {
+  position: sticky;
+}
+.v-alert--variant-plain, .v-alert--variant-outlined, .v-alert--variant-text, .v-alert--variant-contained-text {
+  background: transparent;
+  color: inherit;
+}
+.v-alert--variant-plain {
+  opacity: 0.62;
+}
+.v-alert--variant-plain:focus, .v-alert--variant-plain:hover {
+  opacity: 1;
+}
+.v-alert--variant-plain .v-alert__overlay {
+  display: none;
+}
+.v-alert--variant-contained, .v-alert--variant-contained-flat {
+  background: rgb(var(--v-theme-on-surface-variant));
+  color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
+}
+.v-alert--variant-contained {
+  box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
+}
+.v-alert--variant-contained-flat {
+  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);
+}
+.v-alert--variant-outlined {
+  border: thin solid currentColor;
+}
+.v-alert--variant-text .v-alert__overlay {
+  background: currentColor;
+}
+.v-alert--variant-contained-text .v-alert__underlay {
+  background: currentColor;
+  opacity: var(--v-activated-opacity);
+  border-radius: inherit;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  pointer-events: none;
+  transition: opacity 0.2s ease-in-out;
+}
+.v-alert.v-alert--border {
+  --v-border-opacity: 0.38;
+}
+.v-alert.v-alert--border.v-alert--border-start {
+  padding-inline-start: 24px;
+}
+.v-alert.v-alert--border.v-alert--border-end {
+  padding-inline-end: 24px;
+}
+.v-alert--variant-plain {
+  transition: 0.2s opacity cubic-bezier(0.4, 0, 0.2, 1);
+}
+.v-alert--density-default {
+  padding-bottom: 16px;
+  padding-top: 16px;
+}
+.v-alert--density-default.v-alert--border-top {
+  padding-top: 24px;
+}
+.v-alert--density-default.v-alert--border-bottom {
+  padding-bottom: 24px;
+}
+
+.v-alert--density-comfortable {
+  padding-bottom: 12px;
+  padding-top: 12px;
+}
+.v-alert--density-comfortable.v-alert--border-top {
+  padding-top: 20px;
+}
+.v-alert--density-comfortable.v-alert--border-bottom {
+  padding-bottom: 20px;
+}
+
+.v-alert--density-compact {
+  padding-bottom: 8px;
+  padding-top: 8px;
+}
+.v-alert--density-compact.v-alert--border-top {
+  padding-top: 16px;
+}
+.v-alert--density-compact.v-alert--border-bottom {
+  padding-bottom: 16px;
+}
+
+.v-alert__border {
+  border-radius: inherit;
+  bottom: 0;
+  left: 0;
+  opacity: var(--v-border-opacity);
+  position: absolute;
+  pointer-events: none;
+  right: 0;
+  top: 0;
+  width: 100%;
+  border-color: currentColor;
+  border-style: solid;
+  border-width: 0;
+}
+.v-alert__border--border {
+  border-width: 8px;
+  box-shadow: none;
+}
+.v-alert--border-start .v-alert__border {
+  border-inline-start-width: 8px;
+}
+.v-alert--border-end .v-alert__border {
+  border-inline-end-width: 8px;
+}
+.v-alert--border-top .v-alert__border {
+  border-top-width: 8px;
+}
+.v-alert--border-bottom .v-alert__border {
+  border-bottom-width: 8px;
+}
+
+.v-alert__close {
+  align-self: flex-start;
+  cursor: pointer;
+  display: flex;
+  flex: 0 1 auto;
+  grid-area: close;
+  user-select: none;
+}
+
+.v-alert__append {
+  grid-area: append;
+}
+
+.v-alert__prepend {
+  grid-area: prepend;
+  margin-inline-end: 16px;
+}
+.v-alert--prominent .v-alert__prepend {
+  align-self: center;
+}
+
+.v-alert__content {
+  grid-area: content;
+  line-height: 1.7;
+}
+
+.v-alert--border-start .v-alert__underlay {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+.v-alert--border-end .v-alert__underlay {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+.v-alert--border-top .v-alert__underlay {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+.v-alert--border-bottom .v-alert__underlay {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.v-alert-title {
+  align-items: center;
+  display: flex;
+  font-size: 1.25rem;
+  font-weight: 500;
+  hyphens: auto;
+  letter-spacing: 0.0125em;
+  line-height: 1.35;
+  overflow-wrap: normal;
+  text-transform: none;
+  word-break: normal;
+  word-wrap: break-word;
+}

package/lib/components/VAlert/VAlert.mjs

@@ -1,35 +1,33 @@
 import { createVNode as _createVNode } from "vue";
 // Styles
-import "./VAlert.sass"; // Components
+import "./VAlert.css"; // Components
 
-import { VAvatar } from "../VAvatar/index.mjs";
-import { VBtn } from "../VBtn/index.mjs"; // Composables
+import { VAlertTitle } from "./VAlertTitle.mjs";
+import { VIcon } from "../VIcon/index.mjs"; // Composables
 
+import { genOverlays, makeVariantProps, useVariant } from "../../composables/variant.mjs";
 import { makeDensityProps, useDensity } from "../../composables/density.mjs";
 import { makeElevationProps, useElevation } from "../../composables/elevation.mjs";
 import { makePositionProps, usePosition } from "../../composables/position.mjs";
 import { makeRoundedProps, useRounded } from "../../composables/rounded.mjs";
 import { makeTagProps } from "../../composables/tag.mjs";
-import { makeThemeProps, useTheme } from "../../composables/theme.mjs";
-import { makeVariantProps, useVariant } from "../../composables/variant.mjs";
-import { useBorder } from "../../composables/border.mjs";
+import { makeThemeProps, provideTheme } from "../../composables/theme.mjs";
 import { useProxiedModel } from "../../composables/proxiedModel.mjs";
 import { useTextColor } from "../../composables/color.mjs"; // Utilities
 
-import { computed, defineComponent } from 'vue';
-import { makeProps } from "../../util/index.mjs"; // Types
+import { computed, toRef } from 'vue';
+import { defineComponent } from "../../util/index.mjs"; // Types
 
-export const allowedTypes = ['success', 'info', 'warning', 'error'];
-export default defineComponent({
+import { makeDimensionProps, useDimension } from "../../composables/dimensions.mjs";
+const allowedTypes = ['success', 'info', 'warning', 'error'];
+export const VAlert = defineComponent({
   name: 'VAlert',
-  props: makeProps({
+  props: {
     border: {
       type: [Boolean, String],
-
-      validator(val) {
+      validator: val => {
         return typeof val === 'boolean' || ['top', 'end', 'bottom', 'start'].includes(val);
       }
-
     },
     borderColor: String,
     closable: Boolean,
@@ -50,31 +48,31 @@ export default defineComponent({
       default: true
     },
     prominent: Boolean,
-    sticky: Boolean,
+    title: String,
     text: String,
-    tip: Boolean,
     type: {
       type: String,
       validator: val => allowedTypes.includes(val)
     },
     ...makeDensityProps(),
+    ...makeDimensionProps(),
     ...makeElevationProps(),
     ...makePositionProps(),
     ...makeRoundedProps(),
     ...makeTagProps(),
     ...makeThemeProps(),
-    ...makeVariantProps()
-  }),
+    ...makeVariantProps({
+      variant: 'contained-flat'
+    })
+  },
   emits: {
     'update:modelValue': value => true
   },
 
-  setup(props, {
-    slots
-  }) {
-    const borderProps = computed(() => ({
-      border: props.border === true || props.tip ? 'start' : props.border
-    }));
+  setup(props, _ref) {
+    let {
+      slots
+    } = _ref;
     const isActive = useProxiedModel(props, 'modelValue');
     const icon = computed(() => {
       var _props$icon;
@@ -88,90 +86,81 @@ export default defineComponent({
 
       return {
         color: (_props$color = props.color) != null ? _props$color : props.type,
+        textColor: props.textColor,
         variant: props.variant
       };
     });
     const {
       themeClasses
-    } = useTheme(props);
-    const {
-      borderClasses
-    } = useBorder(borderProps.value, 'v-alert');
+    } = provideTheme(props);
     const {
       colorClasses,
       colorStyles,
       variantClasses
-    } = useVariant(variantProps.value, 'v-alert');
+    } = useVariant(variantProps);
     const {
       densityClasses
-    } = useDensity(props, 'v-alert');
+    } = useDensity(props);
+    const {
+      dimensionStyles
+    } = useDimension(props);
     const {
       elevationClasses
     } = useElevation(props);
     const {
       positionClasses,
       positionStyles
-    } = usePosition(props, 'v-alert');
+    } = usePosition(props);
     const {
       roundedClasses
-    } = useRounded(props, 'v-alert');
+    } = useRounded(props);
     const {
       textColorClasses,
       textColorStyles
-    } = useTextColor(computed(() => {
-      var _props$borderColor;
-
-      return (_props$borderColor = props.borderColor) != null ? _props$borderColor : props.tip ? variantProps.value.color : undefined;
-    }));
+    } = useTextColor(toRef(props, 'borderColor'));
 
     function onCloseClick(e) {
       isActive.value = false;
     }
 
     return () => {
-      const hasBorder = !!borderProps.value.border;
+      var _slots$default;
+
       const hasClose = !!(slots.close || props.closable);
-      const hasPrepend = !!(slots.prepend || props.icon || props.type);
-      const hasText = !!(slots.default || props.text || hasClose);
+      const hasPrepend = !!(slots.prepend || icon.value);
+      const hasTitle = !!(slots.title || props.title);
       return isActive.value && _createVNode(props.tag, {
-        "class": ['v-alert', {
-          [`v-alert--border-${borderProps.value.border}`]: hasBorder,
-          'v-alert--prominent': props.prominent,
-          'v-alert--tip': props.tip
-        }, themeClasses.value, borderClasses.value, !props.tip && colorClasses.value, densityClasses.value, elevationClasses.value, positionClasses.value, roundedClasses.value, variantClasses.value],
-        "style": [!props.tip && colorStyles.value, positionStyles.value],
+        "class": ['v-alert', props.border && {
+          'v-alert--border': !!props.border,
+          [`v-alert--border-${props.border === true ? 'start' : props.border}`]: true
+        }, {
+          'v-alert--prominent': props.prominent
+        }, themeClasses.value, colorClasses.value, densityClasses.value, elevationClasses.value, positionClasses.value, roundedClasses.value, variantClasses.value],
+        "style": [colorStyles.value, dimensionStyles.value, positionStyles.value],
         "role": "alert"
       }, {
-        default: () => [hasBorder && _createVNode("div", {
+        default: () => [genOverlays(false, 'v-alert'), props.border && _createVNode("div", {
           "class": ['v-alert__border', textColorClasses.value],
           "style": textColorStyles.value
-        }, null, 6), _createVNode("div", {
-          "class": "v-alert__underlay"
-        }, null), _createVNode("div", {
+        }, 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", {
           "class": "v-alert__content"
-        }, [hasPrepend && _createVNode("div", {
-          "class": "v-alert__avatar"
-        }, [slots.prepend ? slots.prepend() : _createVNode(VAvatar, {
-          "class": props.tip && textColorClasses.value,
-          "style": props.tip && textColorStyles.value,
-          "density": props.density,
-          "icon": icon.value
-        }, null, 8, ["class", "style", "density", "icon"])]), hasText && _createVNode("div", {
-          "class": "v-alert__text"
-        }, [slots.default ? slots.default() : props.text, hasClose && _createVNode("div", {
-          "class": "v-alert__close"
-        }, [slots.close ? slots.close({
-          props: {
-            onClick: onCloseClick
-          }
-        }) : _createVNode(VBtn, {
-          "density": props.density,
-          "icon": props.closeIcon,
-          "variant": "text",
+        }, [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", {
+          "class": "v-alert__append"
+        }, [slots.append()]), hasClose && _createVNode("div", {
+          "class": "v-alert__close",
           "onClick": onCloseClick
-        }, null, 8, ["density", "icon", "onClick"])])])])],
-        _: 1
-      }, 8, ["class", "style"]);
+        }, [slots.close ? slots.close() : _createVNode(VIcon, {
+          "icon": props.closeIcon,
+          "size": "small"
+        }, null)])]
+      });
     };
   }
 

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VAlert/VAlert.tsx"],"names":["VAvatar","VBtn","makeDensityProps","useDensity","makeElevationProps","useElevation","makePositionProps","usePosition","makeRoundedProps","useRounded","makeTagProps","makeThemeProps","useTheme","makeVariantProps","useVariant","useBorder","useProxiedModel","useTextColor","computed","defineComponent","makeProps","allowedTypes","name","props","border","type","Boolean","String","validator","val","includes","borderColor","closable","closeIcon","default","closeLabel","icon","modelValue","prominent","sticky","text","tip","emits","value","setup","slots","borderProps","isActive","undefined","variantProps","color","variant","themeClasses","borderClasses","colorClasses","colorStyles","variantClasses","densityClasses","elevationClasses","positionClasses","positionStyles","roundedClasses","textColorClasses","textColorStyles","onCloseClick","e","hasBorder","hasClose","close","hasPrepend","prepend","hasText","density","onClick"],"mappings":"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","sourcesContent":["// Styles\nimport './VAlert.sass'\n\n// Components\nimport { VAvatar } from '@/components/VAvatar'\nimport { VBtn } from '@/components/VBtn'\n\n// Composables\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, useTheme } from '@/composables/theme'\nimport { makeVariantProps, useVariant } from '@/composables/variant'\nimport { useBorder } from '@/composables/border'\nimport { useProxiedModel } from '@/composables/proxiedModel'\nimport { useTextColor } from '@/composables/color'\n\n// Utilities\nimport { computed, defineComponent } from 'vue'\nimport { makeProps } from '@/util'\n\n// Types\nimport type { PropType } from 'vue'\n\nexport const allowedTypes = ['success', 'info', 'warning', 'error'] as const\n\nexport type ContextualType = typeof allowedTypes[number]\n\nexport default defineComponent({\n  name: 'VAlert',\n\n  props: makeProps({\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    sticky: Boolean,\n    text: String,\n    tip: Boolean,\n    type: {\n      type: String as PropType<ContextualType>,\n      validator: (val: ContextualType) => allowedTypes.includes(val),\n    },\n\n    ...makeDensityProps(),\n    ...makeElevationProps(),\n    ...makePositionProps(),\n    ...makeRoundedProps(),\n    ...makeTagProps(),\n    ...makeThemeProps(),\n    ...makeVariantProps(),\n  }),\n\n  emits: {\n    'update:modelValue': (value: boolean) => true,\n  },\n\n  setup (props, { slots }) {\n    const borderProps = computed(() => ({\n      border: props.border === true || props.tip ? 'start' : props.border,\n    }))\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 } = useTheme(props)\n    const { borderClasses } = useBorder(borderProps.value, 'v-alert')\n    const { colorClasses, colorStyles, variantClasses } = useVariant(variantProps.value, 'v-alert')\n    const { densityClasses } = useDensity(props, 'v-alert')\n    const { elevationClasses } = useElevation(props)\n    const { positionClasses, positionStyles } = usePosition(props, 'v-alert')\n    const { roundedClasses } = useRounded(props, 'v-alert')\n    const { textColorClasses, textColorStyles } = useTextColor(computed(() => {\n      return props.borderColor ?? (props.tip ? variantProps.value.color : undefined)\n    }))\n\n    function onCloseClick (e: MouseEvent) {\n      isActive.value = false\n    }\n\n    return () => {\n      const hasBorder = !!borderProps.value.border\n      const hasClose = !!(slots.close || props.closable)\n      const hasPrepend = !!(slots.prepend || props.icon || props.type)\n      const hasText = !!(slots.default || props.text || hasClose)\n\n      return isActive.value && (\n        <props.tag\n          class={[\n            'v-alert',\n            {\n              [`v-alert--border-${borderProps.value.border}`]: hasBorder,\n              'v-alert--prominent': props.prominent,\n              'v-alert--tip': props.tip,\n            },\n            themeClasses.value,\n            borderClasses.value,\n            !props.tip && colorClasses.value,\n            densityClasses.value,\n            elevationClasses.value,\n            positionClasses.value,\n            roundedClasses.value,\n            variantClasses.value,\n          ]}\n          style={[\n            !props.tip && colorStyles.value,\n            positionStyles.value,\n          ]}\n          role=\"alert\"\n        >\n          { hasBorder && (\n            <div\n              class={[\n                'v-alert__border',\n                textColorClasses.value,\n              ]}\n              style={ textColorStyles.value }\n            />\n          ) }\n\n          <div class=\"v-alert__underlay\" />\n\n          <div class=\"v-alert__content\">\n            { hasPrepend && (\n              <div class=\"v-alert__avatar\">\n                { slots.prepend\n                  ? slots.prepend()\n                  : (\n                    <VAvatar\n                      class={ props.tip && textColorClasses.value }\n                      style={ props.tip && textColorStyles.value }\n                      density={ props.density }\n                      icon={ icon.value }\n                    />\n                  )\n                }\n              </div>\n            ) }\n\n            { hasText && (\n              <div class=\"v-alert__text\">\n                { slots.default\n                  ? slots.default()\n                  : props.text\n                }\n\n                { hasClose && (\n                  <div class=\"v-alert__close\">\n                    { slots.close\n                      ? slots.close({ props: { onClick: onCloseClick } })\n                      : (\n                        <VBtn\n                          density={ props.density }\n                          icon={ props.closeIcon }\n                          variant=\"text\"\n                          onClick={ onCloseClick }\n                        />\n                      )\n                    }\n                  </div>\n                ) }\n              </div>\n            ) }\n          </div>\n        </props.tag>\n      )\n    }\n  },\n})\n"],"file":"VAlert.mjs"}
+{"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"}

package/lib/components/VAlert/VAlert.sass

@@ -1,79 +1,43 @@
-// Imports
-@import ./index
+@forward './variables'
+@use '../../styles/tools'
+@use './variables' as *
 
 .v-alert
-  padding: $alert-padding
+  display: grid
+  flex: 1 1
+  grid-template-areas: "prepend content append close"
+  grid-template-columns: max-content auto max-content min-content
   position: relative
+  padding: $alert-padding
+  overflow: hidden
+  --v-border-color: #{$alert-border-color}
 
-  @include elevation($alert-elevation)
-  @include position($alert-positions)
-  @include rounded($alert-border-radius)
-  @include theme($alert-theme...)
-  @include variant($alert-variants...)
+  @include tools.position($alert-positions)
+  @include tools.rounded($alert-border-radius)
+  @include tools.variant($alert-variants...)
 
-  // has specificity issues without this selector
   &.v-alert--border
     --v-border-opacity: #{$alert-border-opacity}
 
-  &--border
-    padding-inline-start: $alert-border-padding-inline-start
+    &.v-alert--border-start
+      padding-inline-start: $alert-padding + $alert-border-thin-width
 
-  &:not(.v-alert--prominent)
-    .v-avatar
-      --v-avatar-height: #{$alert-avatar-height}
+    &.v-alert--border-end
+      padding-inline-end: $alert-padding + $alert-border-thin-width
 
   &--variant-plain
     transition: $alert-plain-transition
 
   @at-root
-    @include density('v-alert', $alert-density) using ($modifier)
-      padding-top: $alert-padding + $modifier
+    @include tools.density('v-alert', $alert-density) using ($modifier)
       padding-bottom: $alert-padding + $modifier
+      padding-top: $alert-padding + $modifier
 
-      &.v-alert--prominent
-        .v-alert__avatar
-          margin-inline-start: $alert-prominent-avatar-margin-inline-start + $modifier / 2
-          margin-inline-end: $alert-prominent-avatar-margin-inline-end + $modifier / 2
-
-          .v-icon
-            font-size: $alert-prominent-icon-font-size + ($modifier * $alert-icon-font-size-multiplier)
-
-.v-alert__avatar
-  align-self: flex-start
-  display: flex
-  position: relative
-  margin-inline-start: $alert-avatar-margin-inline-start
-  margin-inline-end: $alert-avatar-margin-inline-end
-
-  .v-icon
-    font-size: $alert-avatar-icon-font-size
-    height: $alert-avatar-icon-font-size
-    width: $alert-avatar-icon-font-size
+      &.v-alert--border-top
+        padding-top: $alert-padding + $alert-border-thin-width + $modifier
 
-  .v-alert--prominent &
-    align-self: center
-    flex: 1 0 auto
-    max-width: $alert-prominent-icon-size
-
-  .v-alert--tip &
-    margin-inline-start: $alert-tip-margin-inline-start
-    max-height: $alert-tip-max-height
-    max-width: $alert-tip-max-width
-
-    &::before
-      content: ''
-      top: 4px
-      left: 4px
-      position: absolute
-      width: 16px
-      height: 16px
-      background: white
-      border-radius: inherit
-
-    .v-avatar
-      height: auto
-      max-width: inherit
-      max-height: inherit
+      &.v-alert--border-bottom
+        padding-bottom: $alert-padding + $alert-border-thin-width + $modifier
 
 .v-alert__border
   border-radius: inherit
@@ -81,61 +45,73 @@
   left: 0
   opacity: var(--v-border-opacity)
   position: absolute
+  pointer-events: none
   right: 0
   top: 0
   width: 100%
 
-  @include border($alert-border...)
+  @include tools.border($alert-border...)
 
   .v-alert--border-start &
     border-inline-start-width: $alert-border-thin-width
-    border-inline-end-width: 0
+
+  .v-alert--border-end &
+    border-inline-end-width: $alert-border-thin-width
 
   .v-alert--border-top &
     border-top-width: $alert-border-thin-width
-    border-bottom-width: 0
 
   .v-alert--border-bottom &
     border-bottom-width: $alert-border-thin-width
-    border-top-width: 0
-
-  .v-alert--border-end &
-    border-inline-end-width: $alert-border-thin-width
-    border-inline-start-width: 0
-
-  .v-alert--border.v-alert--tip &
-    --v-border-opacity: 1
-    border-inline-start-width: $alert-tip-border-inline-start-width
 
 .v-alert__close
   align-self: flex-start
+  cursor: pointer
   display: flex
   flex: 0 1 auto
-  margin-inline-start: $alert-close-margin-inline-start
-  padding-inline-start: $alert-close-padding-inline-start
-
-  .v-btn
-    height: inherit
-    width: inherit
+  grid-area: close
+  user-select: none
 
-  .v-icon
-    font-size: $alert-close-icon-font-size
+.v-alert__append
+  grid-area: append
 
-.v-alert__content
-  display: flex
+.v-alert__prepend
+  grid-area: prepend
+  margin-inline-end: $alert-prepend-margin-inline-end
 
   .v-alert--prominent &
-    align-items: center
+    align-self: center
 
-.v-alert-text
-  padding: $alert-text-padding
+.v-alert__content
+  grid-area: content
+  line-height: 1.7
 
+.v-alert__underlay
   .v-alert--border-start &
-    padding-inline-end: #{$alert-text-padding + $alert-border-thin-width}
+    border-top-left-radius: 0
+    border-bottom-left-radius: 0
 
   .v-alert--border-end &
-    padding-inline-start: #{$alert-text-padding + $alert-border-thin-width}
+    border-top-right-radius: 0
+    border-bottom-right-radius: 0
+
+  .v-alert--border-top &
+    border-top-left-radius: 0
+    border-top-right-radius: 0
 
-.v-alert__text
+  .v-alert--border-bottom &
+    border-bottom-left-radius: 0
+    border-bottom-right-radius: 0
+
+.v-alert-title
+  align-items: center
   display: flex
-  flex: 1 1
+  font-size: $alert-title-font-size
+  font-weight: $alert-title-font-weight
+  hyphens: $alert-title-hyphens
+  letter-spacing: $alert-title-letter-spacing
+  line-height: $alert-title-line-height
+  overflow-wrap: $alert-title-overflow-wrap
+  text-transform: $alert-title-text-transform
+  word-break: $alert-title-word-break
+  word-wrap: $alert-title-word-wrap