@fastkit/vui 0.6.37 → 0.6.41

package/dist/tool/index.js

@@ -18,6 +18,8 @@ const name = 'vui';
 new tinyLogger.TinyLogger(name);
 const VuiError = tinyLogger.createTinyError(name);
 
+const VUI_PACKAGE_DIR = path__default.resolve(__dirname, '../..');
+const STYLE_AFTER_EFFECTS_PATH = path__default.join(VUI_PACKAGE_DIR, 'src/styles/after-effects.scss');
 const COLOR_DUMP_STYLE = `@include dump-color-scheme(true);`;
 const TEMPLATE = `
 /* eslint-disable */
@@ -37,6 +39,7 @@ import { installVuiPlugin as _installVuiPlugin, VuiPluginOptions } from '@fastki
 import { colorScheme } from '<%~ it.colorScheme %>';
 import '<%~ it.mediaMatch %>';
 import './icon-font';
+import '${STYLE_AFTER_EFFECTS_PATH}';
 
 export function installVui(settings: { app: App, router: Router }) {
   _installVuiPlugin(settings.app, {

package/dist/tool/vite-plugin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"vite-plugin.d.ts","sourceRoot":"","sources":["../../../../../../../packages/vui/src/tool/vite-plugin.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,MAAM,CAAC;AAK9B,OAAO,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAC5E,OAAO,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AAwF/C,MAAM,WAAW,oBACf,SAAQ,OAAO,CAAC,IAAI,CAAC,iBAAiB,EAAE,YAAY,GAAG,OAAO,CAAC,CAAC;IAChE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAC9B,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IACpC,QAAQ,CAAC,EAAE,MAAM,GAAG,CAAC;IACrB,WAAW,CAAC,EAAE,CAAC,GAAG,EAAE,OAAO,KAAK,GAAG,CAAC;IACpC,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAGD,MAAM,WAAW,2BACf,SAAQ,IAAI,CAAC,iBAAiB,EAAE,YAAY,GAAG,OAAO,CAAC;IACvD,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED,MAAM,WAAW,mBAAmB;IAClC,QAAQ,EAAE,2BAA2B,CAAC;IACtC,OAAO,EAAE,CAAC,MAAM,GAAG,MAAM,EAAE,CAAC,EAAE,CAAC;IAC/B,IAAI,EAAE,MAAM,CAAC;CACd;AAED,wBAAgB,aAAa,CAC3B,OAAO,GAAE,oBAAyB,GACjC,mBAAmB,CAuJrB"}
+{"version":3,"file":"vite-plugin.d.ts","sourceRoot":"","sources":["../../../../../../../packages/vui/src/tool/vite-plugin.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,MAAM,CAAC;AAK9B,OAAO,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAC5E,OAAO,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AA+F/C,MAAM,WAAW,oBACf,SAAQ,OAAO,CAAC,IAAI,CAAC,iBAAiB,EAAE,YAAY,GAAG,OAAO,CAAC,CAAC;IAChE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAC9B,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IACpC,QAAQ,CAAC,EAAE,MAAM,GAAG,CAAC;IACrB,WAAW,CAAC,EAAE,CAAC,GAAG,EAAE,OAAO,KAAK,GAAG,CAAC;IACpC,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAGD,MAAM,WAAW,2BACf,SAAQ,IAAI,CAAC,iBAAiB,EAAE,YAAY,GAAG,OAAO,CAAC;IACvD,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED,MAAM,WAAW,mBAAmB;IAClC,QAAQ,EAAE,2BAA2B,CAAC;IACtC,OAAO,EAAE,CAAC,MAAM,GAAG,MAAM,EAAE,CAAC,EAAE,CAAC;IAC/B,IAAI,EAAE,MAAM,CAAC;CACd;AAED,wBAAgB,aAAa,CAC3B,OAAO,GAAE,oBAAyB,GACjC,mBAAmB,CAuJrB"}

package/dist/vui.cjs.js

@@ -6,6 +6,7 @@ var vueKit = require('@fastkit/vue-kit');
 var vue = require('vue');
 var vueRouter = require('vue-router');
 var vueUtils = require('@fastkit/vue-utils');
+var vueScroller = require('@fastkit/vue-scroller');
 var vueColorScheme = require('@fastkit/vue-color-scheme');
 var vueLoading = require('@fastkit/vue-loading');
 var iconFont = require('@fastkit/icon-font');
@@ -22,7 +23,6 @@ var extensionHistory = require('@tiptap/extension-history');
 var extensionLink = require('@tiptap/extension-link');
 var rules = require('@fastkit/rules');
 var extensionOrderedList = require('@tiptap/extension-ordered-list');
-var vueScroller = require('@fastkit/vue-scroller');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e["default"] : e; }
 
@@ -274,6 +274,170 @@ function useElevation(props, opts = {}) {
     };
 }
 
+function extractRawGridValueClasses(value, prefix, getter) {
+    if (typeof value !== 'object')
+        return `${prefix}${getter ? getter(value) : value}`;
+    return Object.entries(value).map(([breakpoint, breakpointValue]) => {
+        return `${prefix}${getter ? getter(breakpointValue) : breakpointValue}--${breakpoint}`;
+    });
+}
+// export const DEFAULT_MEDIA_MATCH_KEY = MEDIA_MATCH_CONDITIONS[0].key;
+
+const VGridItem = vue.defineComponent({
+  name: 'VGridItem',
+  inheritAttrs: false,
+  props: { ...vueUtils.htmlAttributesPropOptions,
+    tag: {
+      type: String,
+      default: 'div'
+    },
+    // ...(undefined as unknown as MQSizeProps),
+    size: undefined,
+    align: undefined,
+    justify: undefined,
+    order: undefined
+  },
+
+  setup(props, ctx) {
+    const data = vue.computed(() => {
+      const classes = [];
+      const attrs = { ...ctx.attrs
+      };
+      const {
+        size,
+        align,
+        justify,
+        order
+      } = props;
+      delete attrs.size;
+      delete attrs.align;
+      delete attrs.justify;
+      delete attrs.order;
+      size != null && classes.push(extractRawGridValueClasses(size, 'grid-size-'));
+      align && classes.push(extractRawGridValueClasses(align, 'self-align-'));
+      justify && classes.push(extractRawGridValueClasses(justify, 'self-justify-'));
+      order != null && classes.push(extractRawGridValueClasses(order, 'order-')); // MEDIA_MATCH_CONDITIONS.forEach(({ key }) => {
+      //   const v = attrs[key];
+      //   delete attrs[key];
+      //   if (v != null) {
+      //     classes.push(`grid-size-${v}--${key}`);
+      //   }
+      // });
+
+      return {
+        classes,
+        attrs
+      };
+    });
+    return () => {
+      const TagName = props.tag;
+      const {
+        classes,
+        attrs
+      } = data.value;
+      return vue.createVNode(TagName, vue.mergeProps({
+        "class": ['v-grid-item grid-item', classes]
+      }, attrs), ctx.slots);
+    };
+  }
+
+});
+
+function spacingValueToString(value) {
+  return Number.isInteger(value) ? String(value) : `${value}h`;
+}
+
+const VGridContainer = vue.defineComponent({
+  name: 'VGridContainer',
+  inheritAttrs: false,
+  props: { ...vueUtils.htmlAttributesPropOptions,
+    wrapperTag: {
+      type: String,
+      default: 'div'
+    },
+    tag: {
+      type: String,
+      default: 'div'
+    },
+    spacing: undefined,
+    spacingX: undefined,
+    spacingY: undefined,
+    direction: undefined,
+    wrap: undefined,
+    alignContent: undefined,
+    justifyContent: undefined
+  },
+
+  setup(props, ctx) {
+    const data = vue.computed(() => {
+      const classes = [];
+      const attrs = { ...ctx.attrs
+      };
+      const {
+        spacing,
+        spacingX,
+        spacingY,
+        direction,
+        wrap,
+        alignContent,
+        justifyContent
+      } = props;
+      const wrapperClass = attrs.class;
+      const wrapperStyle = attrs.style;
+      delete attrs.class;
+      delete attrs.style;
+      delete attrs.spacing;
+      delete attrs.spacingX;
+      delete attrs.spacingY;
+      delete attrs.direction;
+      delete attrs.wrap;
+      delete attrs.alignContent;
+      delete attrs.justifyContent; // spacingX = mergeSpacing(spacing, spacingX);
+      // spacingY = mergeSpacing(spacing, spacingY);
+      // if (!spacingX) {
+      //   spacingX = spacing;
+      // }
+      // align &&
+      //   classes.push(extractRawGridItemValueClasses(align, 'self-align-'));
+      // justify &&
+      //   classes.push(extractRawGridItemValueClasses(justify, 'self-justify-'));
+
+      spacing != null && classes.push(extractRawGridValueClasses(spacing, 'grid-spacing-', spacingValueToString));
+      spacingX != null && classes.push(extractRawGridValueClasses(spacingX, 'grid-spacing-x-', spacingValueToString));
+      spacingY != null && classes.push(extractRawGridValueClasses(spacingY, 'grid-spacing-y-', spacingValueToString));
+      direction && classes.push(extractRawGridValueClasses(direction, 'direction-'));
+      wrap && classes.push(extractRawGridValueClasses(wrap, ''));
+      alignContent && classes.push(extractRawGridValueClasses(alignContent, 'align-'));
+      justifyContent && classes.push(extractRawGridValueClasses(justifyContent, 'justify-'));
+      return {
+        wrapperClass,
+        wrapperStyle,
+        classes,
+        attrs
+      };
+    });
+    return () => {
+      const WrapperTag = props.wrapperTag;
+      const TagName = props.tag;
+      const {
+        wrapperClass,
+        wrapperStyle,
+        classes,
+        attrs
+      } = data.value;
+      return vue.createVNode(WrapperTag, {
+        "class": ['v-grid-container-wrapper', wrapperClass],
+        "style": wrapperStyle
+      }, {
+        default: () => [vue.createVNode(TagName, vue.mergeProps({
+          "class": ['v-grid-container grid-container', classes]
+        }, attrs), ctx.slots)]
+      });
+    };
+  }
+
+});
+
 function createPaperBaseProps() {
   return {
     color: String,
@@ -450,7 +614,8 @@ function resolveRawVButtonIcon(raw, type = 'main') {
   }, null);
 }
 
-const vueButtonProps = vueUtils.createPropsOptions({ ...vueColorScheme.colorSchemeProps(),
+const vueButtonProps = vueUtils.createPropsOptions({ ...vueUtils.htmlAttributesPropOptions,
+  ...vueColorScheme.colorSchemeProps(),
   ...vueUtils.navigationableInheritProps,
   spacer: [Boolean, String],
   loading: Boolean,
@@ -995,7 +1160,7 @@ function _isSlot$c(s) {
 
 const VHero = vue.defineComponent({
   name: 'VHero',
-  props: {
+  props: { ...vueUtils.htmlAttributesPropOptions,
     color: {
       type: String,
       default: 'primary'
@@ -1007,7 +1172,8 @@ const VHero = vue.defineComponent({
     hTag: {
       type: String,
       default: 'h1'
-    }
+    },
+    ...vueUtils.defineSlotsProps()
   },
 
   setup(props, ctx) {
@@ -1016,6 +1182,7 @@ const VHero = vue.defineComponent({
 
       const TagName = props.tag;
       const HTagName = props.hTag;
+      const adornment = vueUtils.renderSlotOrEmpty(ctx.slots, 'adornment');
       return vue.createVNode(vueAppLayout.VAppContainer, {
         "pulled": true
       }, {
@@ -1026,7 +1193,9 @@ const VHero = vue.defineComponent({
             "class": "v-hero__title"
           }, _isSlot$c(_slot = vueUtils.renderSlotOrEmpty(ctx.slots, 'default')) ? _slot : {
             default: () => [_slot]
-          })]
+          }), adornment && vue.createVNode("div", {
+            "class": "v-hero__adornment"
+          }, [adornment])]
         })]
       });
     };
@@ -2210,6 +2379,7 @@ const VWysiwygEditor = vue.defineComponent({
 
         if (!iconName) return;
         return vue.createVNode(VButton, {
+          "tabindex": -1,
           "key": key,
           "icon": iconName,
           "onClick": ev => onClick(context, ev),
@@ -3861,6 +4031,10 @@ const VToolbarTitle = vue.defineComponent({
 const DEFAULT_AUTO_SCROLL_TO_ELEMENT_OFFSET_TOP = -20;
 const DEFAULT_TEXTAREA_ROWS = 3;
 class VuiService {
+  get scroller() {
+    return vueScroller.getDocumentScroller();
+  }
+
   constructor(options, stackService) {
     this.options = options;
     this.configure();
@@ -4069,6 +4243,8 @@ exports.VContentSwitcher = VContentSwitcher;
 exports.VDataTable = VDataTable;
 exports.VDrawerLayout = VDrawerLayout;
 exports.VForm = VForm;
+exports.VGridContainer = VGridContainer;
+exports.VGridItem = VGridItem;
 exports.VHero = VHero;
 exports.VIcon = VIcon;
 exports.VListTile = VListTile;

package/dist/vui.cjs.prod.js

@@ -6,6 +6,7 @@ var vueKit = require('@fastkit/vue-kit');
 var vue = require('vue');
 var vueRouter = require('vue-router');
 var vueUtils = require('@fastkit/vue-utils');
+var vueScroller = require('@fastkit/vue-scroller');
 var vueColorScheme = require('@fastkit/vue-color-scheme');
 var vueLoading = require('@fastkit/vue-loading');
 var iconFont = require('@fastkit/icon-font');
@@ -22,7 +23,6 @@ var extensionHistory = require('@tiptap/extension-history');
 var extensionLink = require('@tiptap/extension-link');
 var rules = require('@fastkit/rules');
 var extensionOrderedList = require('@tiptap/extension-ordered-list');
-var vueScroller = require('@fastkit/vue-scroller');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e["default"] : e; }
 
@@ -274,6 +274,170 @@ function useElevation(props, opts = {}) {
     };
 }
 
+function extractRawGridValueClasses(value, prefix, getter) {
+    if (typeof value !== 'object')
+        return `${prefix}${getter ? getter(value) : value}`;
+    return Object.entries(value).map(([breakpoint, breakpointValue]) => {
+        return `${prefix}${getter ? getter(breakpointValue) : breakpointValue}--${breakpoint}`;
+    });
+}
+// export const DEFAULT_MEDIA_MATCH_KEY = MEDIA_MATCH_CONDITIONS[0].key;
+
+const VGridItem = vue.defineComponent({
+  name: 'VGridItem',
+  inheritAttrs: false,
+  props: { ...vueUtils.htmlAttributesPropOptions,
+    tag: {
+      type: String,
+      default: 'div'
+    },
+    // ...(undefined as unknown as MQSizeProps),
+    size: undefined,
+    align: undefined,
+    justify: undefined,
+    order: undefined
+  },
+
+  setup(props, ctx) {
+    const data = vue.computed(() => {
+      const classes = [];
+      const attrs = { ...ctx.attrs
+      };
+      const {
+        size,
+        align,
+        justify,
+        order
+      } = props;
+      delete attrs.size;
+      delete attrs.align;
+      delete attrs.justify;
+      delete attrs.order;
+      size != null && classes.push(extractRawGridValueClasses(size, 'grid-size-'));
+      align && classes.push(extractRawGridValueClasses(align, 'self-align-'));
+      justify && classes.push(extractRawGridValueClasses(justify, 'self-justify-'));
+      order != null && classes.push(extractRawGridValueClasses(order, 'order-')); // MEDIA_MATCH_CONDITIONS.forEach(({ key }) => {
+      //   const v = attrs[key];
+      //   delete attrs[key];
+      //   if (v != null) {
+      //     classes.push(`grid-size-${v}--${key}`);
+      //   }
+      // });
+
+      return {
+        classes,
+        attrs
+      };
+    });
+    return () => {
+      const TagName = props.tag;
+      const {
+        classes,
+        attrs
+      } = data.value;
+      return vue.createVNode(TagName, vue.mergeProps({
+        "class": ['v-grid-item grid-item', classes]
+      }, attrs), ctx.slots);
+    };
+  }
+
+});
+
+function spacingValueToString(value) {
+  return Number.isInteger(value) ? String(value) : `${value}h`;
+}
+
+const VGridContainer = vue.defineComponent({
+  name: 'VGridContainer',
+  inheritAttrs: false,
+  props: { ...vueUtils.htmlAttributesPropOptions,
+    wrapperTag: {
+      type: String,
+      default: 'div'
+    },
+    tag: {
+      type: String,
+      default: 'div'
+    },
+    spacing: undefined,
+    spacingX: undefined,
+    spacingY: undefined,
+    direction: undefined,
+    wrap: undefined,
+    alignContent: undefined,
+    justifyContent: undefined
+  },
+
+  setup(props, ctx) {
+    const data = vue.computed(() => {
+      const classes = [];
+      const attrs = { ...ctx.attrs
+      };
+      const {
+        spacing,
+        spacingX,
+        spacingY,
+        direction,
+        wrap,
+        alignContent,
+        justifyContent
+      } = props;
+      const wrapperClass = attrs.class;
+      const wrapperStyle = attrs.style;
+      delete attrs.class;
+      delete attrs.style;
+      delete attrs.spacing;
+      delete attrs.spacingX;
+      delete attrs.spacingY;
+      delete attrs.direction;
+      delete attrs.wrap;
+      delete attrs.alignContent;
+      delete attrs.justifyContent; // spacingX = mergeSpacing(spacing, spacingX);
+      // spacingY = mergeSpacing(spacing, spacingY);
+      // if (!spacingX) {
+      //   spacingX = spacing;
+      // }
+      // align &&
+      //   classes.push(extractRawGridItemValueClasses(align, 'self-align-'));
+      // justify &&
+      //   classes.push(extractRawGridItemValueClasses(justify, 'self-justify-'));
+
+      spacing != null && classes.push(extractRawGridValueClasses(spacing, 'grid-spacing-', spacingValueToString));
+      spacingX != null && classes.push(extractRawGridValueClasses(spacingX, 'grid-spacing-x-', spacingValueToString));
+      spacingY != null && classes.push(extractRawGridValueClasses(spacingY, 'grid-spacing-y-', spacingValueToString));
+      direction && classes.push(extractRawGridValueClasses(direction, 'direction-'));
+      wrap && classes.push(extractRawGridValueClasses(wrap, ''));
+      alignContent && classes.push(extractRawGridValueClasses(alignContent, 'align-'));
+      justifyContent && classes.push(extractRawGridValueClasses(justifyContent, 'justify-'));
+      return {
+        wrapperClass,
+        wrapperStyle,
+        classes,
+        attrs
+      };
+    });
+    return () => {
+      const WrapperTag = props.wrapperTag;
+      const TagName = props.tag;
+      const {
+        wrapperClass,
+        wrapperStyle,
+        classes,
+        attrs
+      } = data.value;
+      return vue.createVNode(WrapperTag, {
+        "class": ['v-grid-container-wrapper', wrapperClass],
+        "style": wrapperStyle
+      }, {
+        default: () => [vue.createVNode(TagName, vue.mergeProps({
+          "class": ['v-grid-container grid-container', classes]
+        }, attrs), ctx.slots)]
+      });
+    };
+  }
+
+});
+
 function createPaperBaseProps() {
   return {
     color: String,
@@ -450,7 +614,8 @@ function resolveRawVButtonIcon(raw, type = 'main') {
   }, null);
 }
 
-const vueButtonProps = vueUtils.createPropsOptions({ ...vueColorScheme.colorSchemeProps(),
+const vueButtonProps = vueUtils.createPropsOptions({ ...vueUtils.htmlAttributesPropOptions,
+  ...vueColorScheme.colorSchemeProps(),
   ...vueUtils.navigationableInheritProps,
   spacer: [Boolean, String],
   loading: Boolean,
@@ -995,7 +1160,7 @@ function _isSlot$c(s) {
 
 const VHero = vue.defineComponent({
   name: 'VHero',
-  props: {
+  props: { ...vueUtils.htmlAttributesPropOptions,
     color: {
       type: String,
       default: 'primary'
@@ -1007,7 +1172,8 @@ const VHero = vue.defineComponent({
     hTag: {
       type: String,
       default: 'h1'
-    }
+    },
+    ...vueUtils.defineSlotsProps()
   },
 
   setup(props, ctx) {
@@ -1016,6 +1182,7 @@ const VHero = vue.defineComponent({
 
       const TagName = props.tag;
       const HTagName = props.hTag;
+      const adornment = vueUtils.renderSlotOrEmpty(ctx.slots, 'adornment');
       return vue.createVNode(vueAppLayout.VAppContainer, {
         "pulled": true
       }, {
@@ -1026,7 +1193,9 @@ const VHero = vue.defineComponent({
             "class": "v-hero__title"
           }, _isSlot$c(_slot = vueUtils.renderSlotOrEmpty(ctx.slots, 'default')) ? _slot : {
             default: () => [_slot]
-          })]
+          }), adornment && vue.createVNode("div", {
+            "class": "v-hero__adornment"
+          }, [adornment])]
         })]
       });
     };
@@ -2210,6 +2379,7 @@ const VWysiwygEditor = vue.defineComponent({
 
         if (!iconName) return;
         return vue.createVNode(VButton, {
+          "tabindex": -1,
           "key": key,
           "icon": iconName,
           "onClick": ev => onClick(context, ev),
@@ -3861,6 +4031,10 @@ const VToolbarTitle = vue.defineComponent({
 const DEFAULT_AUTO_SCROLL_TO_ELEMENT_OFFSET_TOP = -20;
 const DEFAULT_TEXTAREA_ROWS = 3;
 class VuiService {
+  get scroller() {
+    return vueScroller.getDocumentScroller();
+  }
+
   constructor(options, stackService) {
     this.options = options;
     this.configure();
@@ -4069,6 +4243,8 @@ exports.VContentSwitcher = VContentSwitcher;
 exports.VDataTable = VDataTable;
 exports.VDrawerLayout = VDrawerLayout;
 exports.VForm = VForm;
+exports.VGridContainer = VGridContainer;
+exports.VGridItem = VGridItem;
 exports.VHero = VHero;
 exports.VIcon = VIcon;
 exports.VListTile = VListTile;

package/dist/vui.css

@@ -346,7 +346,7 @@ template {
 
 :root {
   --root-em: 16px;
-  --root-spacing: 4px;
+  --root-spacing: 8px;
   --transition-fast-out-slow-in: cubic-bezier(0.4, 0, 0.2, 1);
   --transition-linear-out-slow-in: cubic-bezier(0, 0, 0.2, 1);
   --transition-fast-out-linear-in: cubic-bezier(0.4, 0, 1, 1);
@@ -431,7 +431,7 @@ template {
   --control-label-height: 1.4375em;
   --control-message-color: rgba(0, 0, 0, 0.6);
   --control-message-font-size: 0.75em;
-  --control-message-horizontal-margin: var(--root-spacing);
+  --control-message-horizontal-margin: calc(var(--root-spacing) * 0.5);
   --control-checkable-outer-size: 2em;
   --control-checkable-icon-size: 1em;
   --control-checkable-faux-scale: 1.2;
@@ -591,8 +591,7 @@ body {
   font-family: var(--typo-font);
 }
 
-h1,
-.text-h1 {
+h1 {
   font-size: var(--typo-h1-size);
   font-weight: var(--typo-h1-weight);
   line-height: var(--typo-h1-height);
@@ -601,8 +600,7 @@ h1,
   color: var(--typo-h1-color);
 }
 
-h2,
-.text-h2 {
+h2 {
   font-size: var(--typo-h2-size);
   font-weight: var(--typo-h2-weight);
   line-height: var(--typo-h2-height);
@@ -611,8 +609,7 @@ h2,
   color: var(--typo-h2-color);
 }
 
-h3,
-.text-h3 {
+h3 {
   font-size: var(--typo-h3-size);
   font-weight: var(--typo-h3-weight);
   line-height: var(--typo-h3-height);
@@ -621,8 +618,7 @@ h3,
   color: var(--typo-h3-color);
 }
 
-h4,
-.text-h4 {
+h4 {
   font-size: var(--typo-h4-size);
   font-weight: var(--typo-h4-weight);
   line-height: var(--typo-h4-height);
@@ -631,8 +627,7 @@ h4,
   color: var(--typo-h4-color);
 }
 
-h5,
-.text-h5 {
+h5 {
   font-size: var(--typo-h5-size);
   font-weight: var(--typo-h5-weight);
   line-height: var(--typo-h5-height);
@@ -641,8 +636,7 @@ h5,
   color: var(--typo-h5-color);
 }
 
-h6,
-.text-h6 {
+h6 {
   font-size: var(--typo-h6-size);
   font-weight: var(--typo-h6-weight);
   line-height: var(--typo-h6-height);
@@ -857,6 +851,7 @@ thead th {
 .v-form-control {
   display: flex;
   flex-direction: column;
+  max-width: 100%;
   margin: var(--control-horizontal-margin) 0;
   --my-label-color: var(--control-label-color);
   --my-message-color: var(--control-message-color);
@@ -894,6 +889,13 @@ thead th {
   flex: 0 1;
   margin-left: auto;
 }
+.v-grid-item {
+  display: block;
+}
+.v-grid-container {
+  display: flex;
+  flex-wrap: wrap;
+}
 .v-paper {
   --paper-radius: var(--control-field-radius);
   color: var(--paper-text-color);
@@ -1244,18 +1246,26 @@ thead th {
 .v-hero {
   --hero-background-color: var(--main-color);
   --hero-text-color: var(--text-color);
+  display: flex;
+  align-items: center;
   padding: 20px 30px;
   margin: 0;
   color: var(--hero-text-color);
   background-color: var(--hero-background-color);
 }
 .v-hero__title {
+  flex: 1 1 100%;
   margin: 0;
   font-size: 1.75rem;
   font-weight: 300;
   line-height: 1;
   color: inherit;
 }
+.v-hero__adornment {
+  flex: 0 0 auto;
+  padding-left: 10px;
+  margin-left: auto;
+}
 .v-navigation-item--opened {
   --tile-background: var(--tile-active-background);
   --tile-text-color: var(--tile-text-active-color);