@fastkit/vui 0.12.8 → 0.12.9

package/src/components/VGrid/VGridItem.scss

@@ -1,3 +1,5 @@
-.v-grid-item {
-  display: block;
+@layer vui {
+  .v-grid-item {
+    display: block;
+  }
 }

package/src/components/VHero/VHero.scss

@@ -1,26 +1,28 @@
-.v-hero {
-  --hero-background-color: var(--main-color);
-  --hero-text-color: var(--text-color);
+@layer vui {
+  .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);
-
-  &__title {
-    flex: 1 1 100%;
+    display: flex;
+    align-items: center;
+    padding: 20px 30px;
     margin: 0;
-    font-size: 1.75rem;
-    font-weight: 300;
-    line-height: 1;
-    color: inherit;
-  }
+    color: var(--hero-text-color);
+    background-color: var(--hero-background-color);
+
+    &__title {
+      flex: 1 1 100%;
+      margin: 0;
+      font-size: 1.75rem;
+      font-weight: 300;
+      line-height: 1;
+      color: inherit;
+    }
 
-  &__adornment {
-    flex: 0 0 auto;
-    padding-left: 10px;
-    margin-left: auto;
+    &__adornment {
+      flex: 0 0 auto;
+      padding-left: 10px;
+      margin-left: auto;
+    }
   }
 }

package/src/components/VIcon/VIcon.scss

@@ -1,22 +1,24 @@
-.v-icon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 1.25em;
-  aspect-ratio: 1 / 1;
-  // -webkit-user-drag: none;
-  // pointer-events: none;
-  user-select: none;
-
-  &--clickable {
-    // pointer-events: auto;
-    cursor: pointer;
-  }
-
-  &__body {
+@layer vui {
+  .v-icon {
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    transition: transform 150ms linear;
+    width: 1.25em;
+    aspect-ratio: 1 / 1;
+    // -webkit-user-drag: none;
+    // pointer-events: none;
+    user-select: none;
+
+    &--clickable {
+      // pointer-events: auto;
+      cursor: pointer;
+    }
+
+    &__body {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      transition: transform 150ms linear;
+    }
   }
 }

package/src/components/VListTile/VListTile.scss

@@ -1,73 +1,75 @@
-.v-list-tile {
-  --tile-background: var(--main-color, transparent);
-  --tile-active-background: var(--deep-color, transparent);
-  --tile-text-color: var(--text-color);
-  --tile-text-active-color: var(--text-color);
-  --tile-pin-color: transparent;
-  --paper-link-color: var(--tile-text-color);
-  --depth-padding: var(--list-tile-padding);
+@layer vui {
+  .v-list-tile {
+    --tile-background: var(--main-color, transparent);
+    --tile-active-background: var(--deep-color, transparent);
+    --tile-text-color: var(--text-color);
+    --tile-text-active-color: var(--text-color);
+    --tile-pin-color: transparent;
+    --paper-link-color: var(--tile-text-color);
+    --depth-padding: var(--list-tile-padding);
 
-  // &--has-color {
-  //   --tile-text-color: var(--nav-color);
-  //   --tile-text-active-color: var(--navActive-color, var(--nav-color));
-  // }
+    // &--has-color {
+    //   --tile-text-color: var(--nav-color);
+    //   --tile-text-active-color: var(--navActive-color, var(--nav-color));
+    // }
 
-  display: flex;
-  align-items: center;
-  width: 100%;
-  padding: var(--list-tile-padding);
-  padding-left: var(--depth-padding);
-  color: var(--tile-text-color);
-  text-align: left;
-  text-decoration: none;
-  user-select: none;
-  background: var(--tile-background);
-  border: 0;
-  border-left: 3px solid var(--tile-pin-color);
-  border-radius: 0;
-  outline: 0;
-  transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
-    background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  appearance: none;
+    display: flex;
+    align-items: center;
+    width: 100%;
+    padding: var(--list-tile-padding);
+    padding-left: var(--depth-padding);
+    color: var(--tile-text-color) !important;
+    text-align: left;
+    text-decoration: none;
+    user-select: none;
+    background: var(--tile-background);
+    border: 0;
+    border-left: 3px solid var(--tile-pin-color);
+    border-radius: 0;
+    outline: 0;
+    transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
+      background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+    appearance: none;
 
-  &--clickable {
-    cursor: pointer;
+    &--clickable {
+      cursor: pointer;
 
-    --tile-text-color: var(--nav-color);
-    --tile-text-active-color: var(--navActive-color, var(--nav-color));
+      --tile-text-color: var(--nav-color);
+      --tile-text-active-color: var(--navActive-color, var(--nav-color));
 
-    // --tile-text-active-color: var(--navActive-color, var(--tile-text-color));
+      // --tile-text-active-color: var(--navActive-color, var(--tile-text-color));
 
-    &:hover,
-    &:focus {
-      --tile-background: var(--tile-active-background);
-      --tile-text-color: var(--tile-text-active-color);
+      &:hover,
+      &:focus {
+        --tile-background: var(--tile-active-background);
+        --tile-text-color: var(--tile-text-active-color);
+      }
     }
-  }
 
-  &--active {
-    --tile-pin-color: var(--pin-color);
-    --tile-text-color: var(--tile-text-active-color);
-    --tile-background: var(--tile-active-background);
-  }
+    &--active {
+      --tile-pin-color: var(--pin-color);
+      --tile-text-color: var(--tile-text-active-color);
+      --tile-background: var(--tile-active-background);
+    }
 
-  // .v-list-tile--opened & {
-  //   --tile-pin-color: var(--pin-color);
-  // }
+    // .v-list-tile--opened & {
+    //   --tile-pin-color: var(--pin-color);
+    // }
 
-  &__body {
-    font-size: 0.8125rem;
-    // font-size: 0.75rem;
-    font-weight: 500;
-    line-height: 1.5;
-  }
+    &__body {
+      font-size: 0.8125rem;
+      // font-size: 0.75rem;
+      font-weight: 500;
+      line-height: 1.5;
+    }
 
-  &__icon {
-    min-width: 2em;
+    &__icon {
+      min-width: 2em;
 
-    &--end {
-      margin-left: auto;
-      text-align: right;
+      &--end {
+        margin-left: auto;
+        text-align: right;
+      }
     }
   }
 }

package/src/components/VListTile/VListTile.tsx

@@ -18,6 +18,11 @@ import { useScopeColorClass, ScopeName } from '@fastkit/vue-color-scheme';
 import { VLink } from '@fastkit/vue-utils';
 import { useVui } from '../../injections';
 
+// @TODO Unable to resolve dts for `navigationableInheritProps`.
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+import { RouteLocationRaw } from 'vue-router';
+
 export function createListTileProps() {
   const icon = rawIconProp();
   return {

package/src/components/VNavigation/VNavigation.scss

@@ -1,12 +1,14 @@
-.v-navigation {
-  // noop
-  &__caption {
-    display: block;
-    padding: calc(var(--root-em) * 0.625) calc(var(--root-em) * 1.5625);
-    margin: 1em 0 0;
-    // font-size: 0.6875rem;
-    font-size: 0.75rem;
-    color: var(--caption-color);
-    text-transform: uppercase;
+@layer vui {
+  .v-navigation {
+    // noop
+    &__caption {
+      display: block;
+      padding: calc(var(--root-em) * 0.625) calc(var(--root-em) * 1.5625);
+      margin: 1em 0 0;
+      // font-size: 0.6875rem;
+      font-size: 0.75rem;
+      color: var(--caption-color);
+      text-transform: uppercase;
+    }
   }
 }

package/src/components/VNavigation/VNavigationItem.scss

@@ -1,28 +1,30 @@
-.v-navigation-item {
-  &--opened {
-    --tile-background: var(--tile-active-background);
-    --tile-text-color: var(--tile-text-active-color);
-  }
-
-  &__expand {
-    transition: height 0.2s;
-
-    .v-navigation-item {
+@layer vui {
+  .v-navigation-item {
+    &--opened {
       --tile-background: var(--tile-active-background);
+      --tile-text-color: var(--tile-text-active-color);
     }
-  }
 
-  &--depth {
-    &-1 {
-      --depth-padding: calc(var(--list-tile-padding) * 2);
-    }
+    &__expand {
+      transition: height 0.2s;
 
-    &-2 {
-      --depth-padding: calc(var(--list-tile-padding) * 3);
+      .v-navigation-item {
+        --tile-background: var(--tile-active-background);
+      }
     }
 
-    &-3 {
-      --depth-padding: calc(var(--list-tile-padding) * 4);
+    &--depth {
+      &-1 {
+        --depth-padding: calc(var(--list-tile-padding) * 2);
+      }
+
+      &-2 {
+        --depth-padding: calc(var(--list-tile-padding) * 3);
+      }
+
+      &-3 {
+        --depth-padding: calc(var(--list-tile-padding) * 4);
+      }
     }
   }
 }

package/src/components/VNavigation/VNavigationItem.tsx

@@ -19,6 +19,11 @@ import { useVui } from '../../injections';
 import { useRoute } from 'vue-router';
 import { ScopeName } from '@fastkit/color-scheme';
 
+// @TODO Unable to resolve dts for `navigationableInheritProps`.
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+import { RouteLocationRaw } from 'vue-router';
+
 export function createNavigationItemProps() {
   return {
     ...createListTileProps(),

package/src/components/VOption/VOption.scss

@@ -1,74 +1,73 @@
 @use '../../styles/core.scss';
 
-.v-option {
-  @include core.button-reset();
+@layer vui {
+  .v-option {
+    @include core.button-reset();
 
-  position: relative;
-  display: flex;
-  width: 100%;
-  padding: 0.75em 1em;
-  // font-size: 0.875em;
+    position: relative;
+    display: flex;
+    width: 100%;
+    padding: 0.75em 1em;
+    // font-size: 0.875em;
 
-  input {
-    @include core.hidden-input-element;
-  }
+    input {
+      @include core.hidden-input-element;
+    }
 
-  &::before,
-  &::after {
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    display: block;
-    pointer-events: none;
-    content: '';
-    opacity: 0;
-    transition: opacity 0.2s;
-  }
+    &::before,
+    &::after {
+      position: absolute;
+      inset: 0;
+      display: block;
+      pointer-events: none;
+      content: '';
+      opacity: 0;
+      transition: opacity 0.2s;
+    }
 
-  &::before {
-    background: currentColor;
-  }
+    &::before {
+      background: currentColor;
+    }
 
-  &::after {
-    background: var(--palette-primary);
-  }
+    &::after {
+      background: var(--palette-primary);
+    }
 
-  &:hover,
-  &:focus-within,
-  &--key-focused {
-    &::before {
-      opacity: 0.12;
+    &:hover,
+    &:focus-within,
+    &--key-focused {
+      &::before {
+        opacity: 0.12;
+      }
     }
-  }
 
-  &__label {
-    position: relative;
-    display: block;
-  }
+    &__label {
+      position: relative;
+      display: block;
+    }
 
-  &--selected::after {
-    opacity: 0.12;
-  }
+    &--selected::after {
+      opacity: 0.12;
+    }
 
-  &--selected &__label {
-    font-weight: 500;
-    color: var(--palette-primary);
-  }
+    &--selected &__label {
+      font-weight: 500;
+      color: var(--palette-primary);
+    }
 
-  &--has-not-value &__label {
-    font-style: italic;
-  }
+    &--has-not-value &__label {
+      font-style: italic;
+    }
 
-  &[disabled],
-  &[tabindex='-1'] {
-    color: var(--palette-muted);
-    pointer-events: none;
-    opacity: 0.4;
+    &[disabled],
+    &[tabindex='-1'] {
+      color: var(--palette-muted);
+      pointer-events: none;
+      opacity: 0.4;
 
-    &::before {
-      opacity: 0 !important;
+      &::before {
+        opacity: 0 !important;
+      }
     }
   }
 }

package/src/components/VOption/VOption.tsx

@@ -3,8 +3,8 @@ import { defineComponent, computed } from 'vue';
 import {
   createFormSelectorItemSettings,
   useFormSelectorItemControl,
-  renderSlotOrEmpty,
-} from '@fastkit/vue-kit';
+} from '@fastkit/vue-form-control';
+import { renderSlotOrEmpty } from '@fastkit/vue-utils';
 import { createControlProps, useControl } from '../../composables';
 import { VUI_SELECT_SYMBOL, VUI_OPTION_SYMBOL } from '../../injections';
 

package/src/components/VOptionGroup/VOptionGroup.scss

@@ -1,16 +1,18 @@
-.v-option-group {
-  display: block;
+@layer vui {
+  .v-option-group {
+    display: block;
 
-  &__label {
-    padding: 1em;
-    // padding: 0.875em 1em;
-    font-size: 0.875em;
-    color: var(--palette-caption);
-    opacity: 0.6;
-  }
+    &__label {
+      padding: 1em;
+      // padding: 0.875em 1em;
+      font-size: 0.875em;
+      color: var(--palette-caption);
+      opacity: 0.6;
+    }
 
-  &--disabled &__label {
-    color: var(--palette-muted);
-    opacity: 0.4;
+    &--disabled &__label {
+      color: var(--palette-muted);
+      opacity: 0.4;
+    }
   }
 }

package/src/components/VOptionGroup/VOptionGroup.tsx

@@ -4,11 +4,13 @@ import {
   createFormSelectorItemGroupProps,
   useFormSelectorItemGroupControl,
   FormSelectorItemGroupControl,
+} from '@fastkit/vue-form-control';
+import {
   defineSlotsProps,
   VNodeChildOrSlot,
   resolveVNodeChildOrSlots,
   renderSlotOrEmpty,
-} from '@fastkit/vue-kit';
+} from '@fastkit/vue-utils';
 import { VUI_SELECT_SYMBOL } from '../../injections';
 
 export const VOptionGroup = defineComponent({