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

package/lib/components/VAlert/VAlert.sass

@@ -1,12 +1,11 @@
-@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 +15,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 +67,40 @@
     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 +119,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,"file":"VAlertTitle.mjs","names":["createSimpleFunctional","VAlertTitle"],"sources":["../../../src/components/VAlert/VAlertTitle.ts"],"sourcesContent":["// Utilities\nimport { createSimpleFunctional } from '@/util'\n\nexport const VAlertTitle = createSimpleFunctional('v-alert-title')\n"],"mappings":"AAAA;SACSA,sB;AAET,OAAO,MAAMC,WAAW,GAAGD,sBAAsB,CAAC,eAAD,CAA1C"}

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/VAlert/index.d.ts

@@ -0,0 +1,185 @@
+import * as vue from 'vue';
+import { JSXComponent, PropType } from 'vue';
+
+declare const block: readonly ["top", "bottom"];
+declare const inline: readonly ["start", "end", "left", "right"];
+declare type Tblock = typeof block[number];
+declare type Tinline = typeof inline[number];
+declare type Anchor = Tblock | Tinline | 'center' | 'center center' | `${Tblock} ${Tinline | 'center'}` | `${Tinline} ${Tblock | 'center'}`;
+
+declare type IconValue = string | JSXComponent;
+declare const IconValue: PropType<IconValue>;
+
+declare const allowedTypes: readonly ["success", "info", "warning", "error"];
+declare type ContextualType = typeof allowedTypes[number];
+declare const VAlert: vue.DefineComponent<{
+    color: StringConstructor;
+    variant: Omit<{
+        type: PropType<"flat" | "text" | "elevated" | "tonal" | "outlined" | "plain">;
+        default: string;
+        validator: (v: any) => boolean;
+    }, "type" | "default"> & {
+        type: PropType<"flat" | "text" | "elevated" | "tonal" | "outlined" | "plain">;
+        default: "flat" | "text" | "elevated" | "tonal" | "outlined" | "plain";
+    };
+    theme: StringConstructor;
+    tag: {
+        type: StringConstructor;
+        default: string;
+    };
+    rounded: {
+        type: (StringConstructor | BooleanConstructor | NumberConstructor)[];
+        default: undefined;
+    };
+    position: {
+        type: PropType<"fixed" | "absolute" | "static" | "relative" | "sticky">;
+        validator: (v: any) => boolean;
+    };
+    location: PropType<Anchor>;
+    elevation: {
+        type: (StringConstructor | NumberConstructor)[];
+        validator(v: any): boolean;
+    };
+    height: (StringConstructor | NumberConstructor)[];
+    maxHeight: (StringConstructor | NumberConstructor)[];
+    maxWidth: (StringConstructor | NumberConstructor)[];
+    minHeight: (StringConstructor | NumberConstructor)[];
+    minWidth: (StringConstructor | NumberConstructor)[];
+    width: (StringConstructor | NumberConstructor)[];
+    density: {
+        type: PropType<"default" | "compact" | "comfortable" | null>;
+        default: string;
+        validator: (v: any) => boolean;
+    };
+    border: {
+        type: (StringConstructor | BooleanConstructor)[];
+        validator: (val: boolean | string) => boolean;
+    };
+    borderColor: StringConstructor;
+    closable: BooleanConstructor;
+    closeIcon: {
+        type: PropType<IconValue>;
+        default: string;
+    };
+    closeLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    icon: {
+        type: PropType<false | IconValue>;
+        default: null;
+    };
+    modelValue: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    prominent: BooleanConstructor;
+    title: StringConstructor;
+    text: StringConstructor;
+    type: {
+        type: PropType<"error" | "success" | "warning" | "info">;
+        validator: (val: ContextualType) => boolean;
+    };
+}, () => false | JSX.Element, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
+    'update:modelValue': (value: boolean) => true;
+}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
+    color: StringConstructor;
+    variant: Omit<{
+        type: PropType<"flat" | "text" | "elevated" | "tonal" | "outlined" | "plain">;
+        default: string;
+        validator: (v: any) => boolean;
+    }, "type" | "default"> & {
+        type: PropType<"flat" | "text" | "elevated" | "tonal" | "outlined" | "plain">;
+        default: "flat" | "text" | "elevated" | "tonal" | "outlined" | "plain";
+    };
+    theme: StringConstructor;
+    tag: {
+        type: StringConstructor;
+        default: string;
+    };
+    rounded: {
+        type: (StringConstructor | BooleanConstructor | NumberConstructor)[];
+        default: undefined;
+    };
+    position: {
+        type: PropType<"fixed" | "absolute" | "static" | "relative" | "sticky">;
+        validator: (v: any) => boolean;
+    };
+    location: PropType<Anchor>;
+    elevation: {
+        type: (StringConstructor | NumberConstructor)[];
+        validator(v: any): boolean;
+    };
+    height: (StringConstructor | NumberConstructor)[];
+    maxHeight: (StringConstructor | NumberConstructor)[];
+    maxWidth: (StringConstructor | NumberConstructor)[];
+    minHeight: (StringConstructor | NumberConstructor)[];
+    minWidth: (StringConstructor | NumberConstructor)[];
+    width: (StringConstructor | NumberConstructor)[];
+    density: {
+        type: PropType<"default" | "compact" | "comfortable" | null>;
+        default: string;
+        validator: (v: any) => boolean;
+    };
+    border: {
+        type: (StringConstructor | BooleanConstructor)[];
+        validator: (val: boolean | string) => boolean;
+    };
+    borderColor: StringConstructor;
+    closable: BooleanConstructor;
+    closeIcon: {
+        type: PropType<IconValue>;
+        default: string;
+    };
+    closeLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    icon: {
+        type: PropType<false | IconValue>;
+        default: null;
+    };
+    modelValue: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    prominent: BooleanConstructor;
+    title: StringConstructor;
+    text: StringConstructor;
+    type: {
+        type: PropType<"error" | "success" | "warning" | "info">;
+        validator: (val: ContextualType) => boolean;
+    };
+}>> & {
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+}, {
+    tag: string;
+    icon: false | IconValue;
+    rounded: string | number | boolean;
+    prominent: boolean;
+    density: "default" | "compact" | "comfortable" | null;
+    variant: "flat" | "text" | "elevated" | "tonal" | "outlined" | "plain";
+    modelValue: boolean;
+    closable: boolean;
+    closeIcon: IconValue;
+    closeLabel: string;
+}>;
+declare type VAlert = InstanceType<typeof VAlert>;
+
+declare const VAlertTitle: vue.DefineComponent<{
+    tag: {
+        type: StringConstructor;
+        default: string;
+    };
+}, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
+    tag: {
+        type: StringConstructor;
+        default: string;
+    };
+}>>, {
+    tag: string;
+}>;
+
+export { VAlert, VAlertTitle };

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VAlert/index.ts"],"names":["VAlert","VAlertTitle"],"mappings":"SAASA,M;SACAC,W","sourcesContent":["export { VAlert } from './VAlert'\nexport { VAlertTitle } from './VAlertTitle'\n"],"file":"index.mjs"}
+{"version":3,"file":"index.mjs","names":["VAlert","VAlertTitle"],"sources":["../../../src/components/VAlert/index.ts"],"sourcesContent":["export { VAlert } from './VAlert'\nexport { VAlertTitle } from './VAlertTitle'\n"],"mappings":"SAASA,M;SACAC,W"}

package/lib/components/VApp/VApp.css

@@ -3,26 +3,13 @@
   background: rgb(var(--v-theme-background));
   color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity));
 }
-.v-application a {
-  cursor: pointer;
-}
 
 .v-application__wrap {
-  flex: 1 1 auto;
   backface-visibility: hidden;
   display: flex;
   flex-direction: column;
+  flex: 1 1 auto;
   max-width: 100%;
+  min-height: 100vh;
   position: relative;
-}
-
-@-moz-document url-prefix() {
-  @media print {
-    .v-application {
-      display: block;
-    }
-    .v-application__wrap {
-      display: block;
-    }
-  }
 }

package/lib/components/VApp/VApp.mjs

@@ -2,11 +2,11 @@ import { createVNode as _createVNode } from "vue";
 // Styles
 import "./VApp.css"; // Composables
 
+import { createLayout, makeLayoutProps } from "../../composables/layout.mjs";
 import { makeThemeProps, provideTheme } from "../../composables/theme.mjs";
-import { createLayout, makeLayoutProps } from "../../composables/layout.mjs"; // Utilities
+import { useRtl } from "../../composables/rtl.mjs"; // Utilities
 
 import { defineComponent, useRender } from "../../util/index.mjs";
-import { useRtl } from "../../composables/rtl.mjs";
 export const VApp = defineComponent({
   name: 'VApp',
   props: { ...makeLayoutProps({
@@ -36,8 +36,7 @@ export const VApp = defineComponent({
       return _createVNode("div", {
         "ref": layoutRef,
         "class": ['v-application', theme.themeClasses.value, layoutClasses.value, rtlClasses.value],
-        "style": layoutStyles.value,
-        "data-app": "true"
+        "style": layoutStyles.value
       }, [_createVNode("div", {
         "class": "v-application__wrap"
       }, [(_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots)])]);

package/lib/components/VApp/VApp.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VApp/VApp.tsx"],"names":["makeThemeProps","provideTheme","createLayout","makeLayoutProps","defineComponent","useRender","useRtl","VApp","name","props","fullHeight","setup","slots","theme","layoutClasses","layoutStyles","getLayoutItem","items","layoutRef","rtlClasses","themeClasses","value","default"],"mappings":";AAAA;AACA,oB,CAEA;;SACSA,c,EAAgBC,Y;SAChBC,Y,EAAcC,e,wCAEvB;;SACSC,e,EAAiBC,S;SACjBC,M;AAET,OAAO,MAAMC,IAAI,GAAGH,eAAe,CAAC;AAClCI,EAAAA,IAAI,EAAE,MAD4B;AAGlCC,EAAAA,KAAK,EAAE,EACL,GAAGN,eAAe,CAAC;AAAEO,MAAAA,UAAU,EAAE;AAAd,KAAD,CADb;AAEL,OAAGV,cAAc;AAFZ,GAH2B;;AAQlCW,EAAAA,KAAK,CAAEF,KAAF,QAAoB;AAAA,QAAX;AAAEG,MAAAA;AAAF,KAAW;AACvB,UAAMC,KAAK,GAAGZ,YAAY,CAACQ,KAAD,CAA1B;AACA,UAAM;AAAEK,MAAAA,aAAF;AAAiBC,MAAAA,YAAjB;AAA+BC,MAAAA,aAA/B;AAA8CC,MAAAA,KAA9C;AAAqDC,MAAAA;AAArD,QAAmEhB,YAAY,CAACO,KAAD,CAArF;AACA,UAAM;AAAEU,MAAAA;AAAF,QAAiBb,MAAM,EAA7B;AAEAD,IAAAA,SAAS,CAAC;AAAA;;AAAA;AAAA,eAEAa,SAFA;AAAA,iBAGC,CACL,eADK,EAELL,KAAK,CAACO,YAAN,CAAmBC,KAFd,EAGLP,aAAa,CAACO,KAHT,EAILF,UAAU,CAACE,KAJN,CAHD;AAAA,iBASEN,YAAY,CAACM,KATf;AAAA,oBAUG;AAVH;AAAA,iBAYK;AAZL,4BAaFT,KAAK,CAACU,OAbJ,qBAaF,oBAAAV,KAAK,CAbH;AAAA,KAAD,CAAT;AAkBA,WAAO;AACLI,MAAAA,aADK;AAELC,MAAAA,KAFK;AAGLJ,MAAAA;AAHK,KAAP;AAKD;;AApCiC,CAAD,CAA5B","sourcesContent":["// Styles\nimport './VApp.sass'\n\n// Composables\nimport { makeThemeProps, provideTheme } from '@/composables/theme'\nimport { createLayout, makeLayoutProps } from '@/composables/layout'\n\n// Utilities\nimport { defineComponent, useRender } from '@/util'\nimport { useRtl } from '@/composables/rtl'\n\nexport const VApp = defineComponent({\n  name: 'VApp',\n\n  props: {\n    ...makeLayoutProps({ fullHeight: true }),\n    ...makeThemeProps(),\n  },\n\n  setup (props, { slots }) {\n    const theme = provideTheme(props)\n    const { layoutClasses, layoutStyles, getLayoutItem, items, layoutRef } = createLayout(props)\n    const { rtlClasses } = useRtl()\n\n    useRender(() => (\n      <div\n        ref={ layoutRef }\n        class={[\n          'v-application',\n          theme.themeClasses.value,\n          layoutClasses.value,\n          rtlClasses.value,\n        ]}\n        style={ layoutStyles.value }\n        data-app=\"true\"\n      >\n        <div class=\"v-application__wrap\">\n          { slots.default?.() }\n        </div>\n      </div>\n    ))\n\n    return {\n      getLayoutItem,\n      items,\n      theme,\n    }\n  },\n})\n\nexport type VApp = InstanceType<typeof VApp>\n"],"file":"VApp.mjs"}
+{"version":3,"file":"VApp.mjs","names":["createLayout","makeLayoutProps","makeThemeProps","provideTheme","useRtl","defineComponent","useRender","VApp","name","props","fullHeight","setup","slots","theme","layoutClasses","layoutStyles","getLayoutItem","items","layoutRef","rtlClasses","themeClasses","value","default"],"sources":["../../../src/components/VApp/VApp.tsx"],"sourcesContent":["// Styles\nimport './VApp.sass'\n\n// Composables\nimport { createLayout, makeLayoutProps } from '@/composables/layout'\nimport { makeThemeProps, provideTheme } from '@/composables/theme'\nimport { useRtl } from '@/composables/rtl'\n\n// Utilities\nimport { defineComponent, useRender } from '@/util'\n\nexport const VApp = defineComponent({\n  name: 'VApp',\n\n  props: {\n    ...makeLayoutProps({ fullHeight: true }),\n    ...makeThemeProps(),\n  },\n\n  setup (props, { slots }) {\n    const theme = provideTheme(props)\n    const { layoutClasses, layoutStyles, getLayoutItem, items, layoutRef } = createLayout(props)\n    const { rtlClasses } = useRtl()\n\n    useRender(() => (\n      <div\n        ref={ layoutRef }\n        class={[\n          'v-application',\n          theme.themeClasses.value,\n          layoutClasses.value,\n          rtlClasses.value,\n        ]}\n        style={ layoutStyles.value }\n      >\n        <div class=\"v-application__wrap\">\n          { slots.default?.() }\n        </div>\n      </div>\n    ))\n\n    return {\n      getLayoutItem,\n      items,\n      theme,\n    }\n  },\n})\n\nexport type VApp = InstanceType<typeof VApp>\n"],"mappings":";AAAA;AACA,oB,CAEA;;SACSA,Y,EAAcC,e;SACdC,c,EAAgBC,Y;SAChBC,M,qCAET;;SACSC,e,EAAiBC,S;AAE1B,OAAO,MAAMC,IAAI,GAAGF,eAAe,CAAC;EAClCG,IAAI,EAAE,MAD4B;EAGlCC,KAAK,EAAE,EACL,GAAGR,eAAe,CAAC;MAAES,UAAU,EAAE;IAAd,CAAD,CADb;IAEL,GAAGR,cAAc;EAFZ,CAH2B;;EAQlCS,KAAK,CAAEF,KAAF,QAAoB;IAAA,IAAX;MAAEG;IAAF,CAAW;IACvB,MAAMC,KAAK,GAAGV,YAAY,CAACM,KAAD,CAA1B;IACA,MAAM;MAAEK,aAAF;MAAiBC,YAAjB;MAA+BC,aAA/B;MAA8CC,KAA9C;MAAqDC;IAArD,IAAmElB,YAAY,CAACS,KAAD,CAArF;IACA,MAAM;MAAEU;IAAF,IAAiBf,MAAM,EAA7B;IAEAE,SAAS,CAAC;MAAA;;MAAA;QAAA,OAEAY,SAFA;QAAA,SAGC,CACL,eADK,EAELL,KAAK,CAACO,YAAN,CAAmBC,KAFd,EAGLP,aAAa,CAACO,KAHT,EAILF,UAAU,CAACE,KAJN,CAHD;QAAA,SASEN,YAAY,CAACM;MATf;QAAA,SAWK;MAXL,sBAYFT,KAAK,CAACU,OAZJ,qBAYF,oBAAAV,KAAK,CAZH;IAAA,CAAD,CAAT;IAiBA,OAAO;MACLI,aADK;MAELC,KAFK;MAGLJ;IAHK,CAAP;EAKD;;AAnCiC,CAAD,CAA5B"}

package/lib/components/VApp/VApp.sass

@@ -1,24 +1,15 @@
+@use './variables' as *
+
 .v-application
   display: flex
-  background: rgb(var(--v-theme-background))
-  color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity))
-
-  a
-    cursor: pointer
+  background: $application-background
+  color: $application-color
 
 .v-application__wrap
-    flex: 1 1 auto
-    backface-visibility: hidden
-    display: flex
-    flex-direction: column
-    max-width: 100%
-    position: relative
-
-// Firefox overrides
-@-moz-document url-prefix()
-  @media print
-    .v-application
-      display: block
-
-      &__wrap
-        display: block
+  backface-visibility: hidden
+  display: flex
+  flex-direction: column
+  flex: 1 1 auto
+  max-width: 100%
+  min-height: 100vh
+  position: relative

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

@@ -0,0 +1,83 @@
+import * as vue from 'vue';
+import { Ref, DeepReadonly } from 'vue';
+
+interface InternalThemeDefinition {
+    dark: boolean;
+    colors: Colors;
+    variables: Record<string, string | number>;
+}
+interface Colors extends BaseColors, OnColors {
+    [key: string]: string;
+}
+interface BaseColors {
+    background: string;
+    surface: string;
+    primary: string;
+    secondary: string;
+    success: string;
+    warning: string;
+    error: string;
+    info: string;
+}
+interface OnColors {
+    'on-background': string;
+    'on-surface': string;
+    'on-primary': string;
+    'on-secondary': string;
+    'on-success': string;
+    'on-warning': string;
+    'on-error': string;
+    'on-info': string;
+}
+interface ThemeInstance {
+    readonly isDisabled: boolean;
+    readonly themes: Ref<Record<string, InternalThemeDefinition>>;
+    readonly name: Readonly<Ref<string>>;
+    readonly current: DeepReadonly<Ref<InternalThemeDefinition>>;
+    readonly computedThemes: DeepReadonly<Ref<Record<string, InternalThemeDefinition>>>;
+    readonly themeClasses: Readonly<Ref<string | undefined>>;
+    readonly styles: Readonly<Ref<string>>;
+    readonly global: {
+        readonly name: Ref<string>;
+        readonly current: DeepReadonly<Ref<InternalThemeDefinition>>;
+    };
+}
+
+declare const VApp: vue.DefineComponent<{
+    theme: StringConstructor;
+    overlaps: vue.Prop<string[], string[]>;
+    fullHeight: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+}, {
+    getLayoutItem: (id: string) => {
+        size: number;
+        top: number;
+        left: number;
+        right: number;
+        bottom: number;
+        id: string;
+    } | undefined;
+    items: vue.ComputedRef<{
+        size: number;
+        top: number;
+        left: number;
+        right: number;
+        bottom: number;
+        id: string;
+    }[]>;
+    theme: ThemeInstance;
+}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
+    theme: StringConstructor;
+    overlaps: vue.Prop<string[], string[]>;
+    fullHeight: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+}>>, {
+    fullHeight: boolean;
+}>;
+declare type VApp = InstanceType<typeof VApp>;
+
+export { VApp };

package/lib/components/VApp/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VApp/index.ts"],"names":["VApp"],"mappings":"SAASA,I","sourcesContent":["export { VApp } from './VApp'\n"],"file":"index.mjs"}
+{"version":3,"file":"index.mjs","names":["VApp"],"sources":["../../../src/components/VApp/index.ts"],"sourcesContent":["export { VApp } from './VApp'\n"],"mappings":"SAASA,I"}

package/lib/components/VApp/variables.scss

@@ -0,0 +1,6 @@
+@use '../../styles/settings';
+@use '../../styles/tools';
+
+// VApp
+$application-background: rgb(var(--v-theme-background)) !default;
+$application-color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity)) !default;

package/lib/components/VAppBar/VAppBar.css

@@ -6,5 +6,8 @@
   color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
 }
 .v-app-bar.v-toolbar:not(.v-toolbar--flat) {
-  box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
+  box-shadow: 0px 2px 4px -1px var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.2)), 0px 4px 5px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.14)), 0px 1px 10px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.12));
+}
+.v-app-bar:not(.v-toolbar--absolute) {
+  padding-inline-end: var(--v-scrollbar-offset);
 }

package/lib/components/VAppBar/VAppBar.mjs

@@ -8,7 +8,7 @@ import { makeLayoutItemProps, useLayoutItem } from "../../composables/layout.mjs
 import { useProxiedModel } from "../../composables/proxiedModel.mjs"; // Utilities
 
 import { computed, ref, toRef } from 'vue';
-import { defineComponent } from "../../util/index.mjs"; // Types
+import { defineComponent, useRender } from "../../util/index.mjs"; // Types
 
 export const VAppBar = defineComponent({
   name: 'VAppBar',
@@ -24,7 +24,7 @@ export const VAppBar = defineComponent({
       type: Boolean,
       default: true
     },
-    position: {
+    location: {
       type: String,
       default: 'top',
       validator: value => ['top', 'bottom'].includes(value)
@@ -47,31 +47,36 @@ export const VAppBar = defineComponent({
     const vToolbarRef = ref();
     const isActive = useProxiedModel(props, 'modelValue');
     const height = computed(() => {
-      var _vToolbarRef$value;
+      var _vToolbarRef$value, _vToolbarRef$value2;
 
-      return (_vToolbarRef$value = vToolbarRef.value) == null ? void 0 : _vToolbarRef$value.contentHeight;
+      const height = ((_vToolbarRef$value = vToolbarRef.value) == null ? void 0 : _vToolbarRef$value.contentHeight) ?? 0;
+      const extensionHeight = ((_vToolbarRef$value2 = vToolbarRef.value) == null ? void 0 : _vToolbarRef$value2.extensionHeight) ?? 0;
+      return height + extensionHeight;
     });
     const {
       layoutItemStyles
     } = useLayoutItem({
       id: props.name,
-      priority: computed(() => parseInt(props.priority, 10)),
-      position: toRef(props, 'position'),
+      order: computed(() => parseInt(props.order, 10)),
+      position: toRef(props, 'location'),
       layoutSize: height,
       elementSize: height,
       active: isActive,
       absolute: toRef(props, 'absolute')
     });
-    return () => {
+    useRender(() => {
       const [toolbarProps] = filterToolbarProps(props);
       return _createVNode(VToolbar, _mergeProps({
         "ref": vToolbarRef,
         "class": ['v-app-bar', {
-          'v-app-bar--bottom': props.position === 'bottom'
+          'v-app-bar--bottom': props.location === 'bottom'
         }],
-        "style": layoutItemStyles.value
+        "style": { ...layoutItemStyles.value,
+          height: undefined
+        }
       }, toolbarProps), slots);
-    };
+    });
+    return {};
   }
 
 });

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,"file":"VAppBar.mjs","names":["filterToolbarProps","makeVToolbarProps","VToolbar","makeLayoutItemProps","useLayoutItem","useProxiedModel","computed","ref","toRef","defineComponent","useRender","VAppBar","name","props","modelValue","type","Boolean","default","location","String","validator","value","includes","height","Number","emits","setup","slots","vToolbarRef","isActive","contentHeight","extensionHeight","layoutItemStyles","id","order","parseInt","position","layoutSize","elementSize","active","absolute","toolbarProps","undefined"],"sources":["../../../src/components/VAppBar/VAppBar.tsx"],"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, useRender } 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    location: {\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      order: computed(() => parseInt(props.order, 10)),\n      position: toRef(props, 'location'),\n      layoutSize: height,\n      elementSize: height,\n      active: isActive,\n      absolute: toRef(props, 'absolute'),\n    })\n\n    useRender(() => {\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.location === 'bottom',\n            },\n          ]}\n          style={{\n            ...layoutItemStyles.value,\n            height: undefined,\n          }}\n          { ...toolbarProps }\n          v-slots={ slots }\n        />\n      )\n    })\n\n    return {}\n  },\n})\n\nexport type VAppBar = InstanceType<typeof VAppBar>\n"],"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,EAAiBC,S,gCAE1B;;AAGA,OAAO,MAAMC,OAAO,GAAGF,eAAe,CAAC;EACrCG,IAAI,EAAE,SAD+B;EAGrCC,KAAK,EAAE;IACL;IACA;IACA;IACA;IACA;IACA;IACA;IACAC,UAAU,EAAE;MACVC,IAAI,EAAEC,OADI;MAEVC,OAAO,EAAE;IAFC,CARP;IAYLC,QAAQ,EAAE;MACRH,IAAI,EAAEI,MADE;MAERF,OAAO,EAAE,KAFD;MAGRG,SAAS,EAAGC,KAAD,IAAgB,CAAC,KAAD,EAAQ,QAAR,EAAkBC,QAAlB,CAA2BD,KAA3B;IAHnB,CAZL;IAkBL,GAAGpB,iBAAiB,EAlBf;IAmBL,GAAGE,mBAAmB,EAnBjB;IAqBLoB,MAAM,EAAE;MACNR,IAAI,EAAE,CAACS,MAAD,EAASL,MAAT,CADA;MAENF,OAAO,EAAE;IAFH;EArBH,CAH8B;EA8BrCQ,KAAK,EAAE;IACL,qBAAsBJ,KAAD,IAAoB;EADpC,CA9B8B;;EAkCrCK,KAAK,CAAEb,KAAF,QAAoB;IAAA,IAAX;MAAEc;IAAF,CAAW;IACvB,MAAMC,WAAW,GAAGrB,GAAG,EAAvB;IACA,MAAMsB,QAAQ,GAAGxB,eAAe,CAACQ,KAAD,EAAQ,YAAR,CAAhC;IACA,MAAMU,MAAM,GAAGjB,QAAQ,CAAC,MAAM;MAAA;;MAC5B,MAAMiB,MAAc,GAAG,uBAAAK,WAAW,CAACP,KAAZ,wCAAmBS,aAAnB,KAAoC,CAA3D;MACA,MAAMC,eAAuB,GAAG,wBAAAH,WAAW,CAACP,KAAZ,yCAAmBU,eAAnB,KAAsC,CAAtE;MAEA,OAAQR,MAAM,GAAGQ,eAAjB;IACD,CALsB,CAAvB;IAMA,MAAM;MAAEC;IAAF,IAAuB5B,aAAa,CAAC;MACzC6B,EAAE,EAAEpB,KAAK,CAACD,IAD+B;MAEzCsB,KAAK,EAAE5B,QAAQ,CAAC,MAAM6B,QAAQ,CAACtB,KAAK,CAACqB,KAAP,EAAc,EAAd,CAAf,CAF0B;MAGzCE,QAAQ,EAAE5B,KAAK,CAACK,KAAD,EAAQ,UAAR,CAH0B;MAIzCwB,UAAU,EAAEd,MAJ6B;MAKzCe,WAAW,EAAEf,MAL4B;MAMzCgB,MAAM,EAAEV,QANiC;MAOzCW,QAAQ,EAAEhC,KAAK,CAACK,KAAD,EAAQ,UAAR;IAP0B,CAAD,CAA1C;IAUAH,SAAS,CAAC,MAAM;MACd,MAAM,CAAC+B,YAAD,IAAiBzC,kBAAkB,CAACa,KAAD,CAAzC;MAEA;QAAA,OAEUe,WAFV;QAAA,SAGW,CACL,WADK,EAEL;UACE,qBAAqBf,KAAK,CAACK,QAAN,KAAmB;QAD1C,CAFK,CAHX;QAAA,SASW,EACL,GAAGc,gBAAgB,CAACX,KADf;UAELE,MAAM,EAAEmB;QAFH;MATX,GAaSD,YAbT,GAccd,KAdd;IAiBD,CApBQ,CAAT;IAsBA,OAAO,EAAP;EACD;;AA5EoC,CAAD,CAA/B"}

package/lib/components/VAppBar/VAppBar.sass

@@ -1,4 +1,3 @@
-@forward './variables'
 @use '../../styles/tools'
 @use './variables' as *
 
@@ -10,3 +9,6 @@
 
     &:not(.v-toolbar--flat)
       @include tools.elevation($app-bar-elevation)
+
+  &:not(.v-toolbar--absolute)
+    padding-inline-end: var(--v-scrollbar-offset)