@aotearoan/neon 22.4.0 → 22.5.0

package/dist/src/components/user-input/select/NeonSelect.d.ts

@@ -1407,6 +1407,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                             default: boolean;
                         };
                     }>, {
+                        neonLink: import("vue").Ref<HTMLAnchorElement | null, HTMLAnchorElement | null>;
                         routerUrl: import("vue").ComputedRef<string | undefined>;
                         sanitizedAttributes: import("vue").ComputedRef<{
                             [x: string]: unknown;
@@ -2196,6 +2197,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                     default: boolean;
                 };
             }>, {
+                neonLink: import("vue").Ref<HTMLAnchorElement | null, HTMLAnchorElement | null>;
                 routerUrl: import("vue").ComputedRef<string | undefined>;
                 sanitizedAttributes: import("vue").ComputedRef<{
                     [x: string]: unknown;
@@ -3722,6 +3724,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                             default: boolean;
                         };
                     }>, {
+                        neonLink: import("vue").Ref<HTMLAnchorElement | null, HTMLAnchorElement | null>;
                         routerUrl: import("vue").ComputedRef<string | undefined>;
                         sanitizedAttributes: import("vue").ComputedRef<{
                             [x: string]: unknown;
@@ -4511,6 +4514,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                     default: boolean;
                 };
             }>, {
+                neonLink: import("vue").Ref<HTMLAnchorElement | null, HTMLAnchorElement | null>;
                 routerUrl: import("vue").ComputedRef<string | undefined>;
                 sanitizedAttributes: import("vue").ComputedRef<{
                     [x: string]: unknown;
@@ -6226,6 +6230,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                             default: boolean;
                         };
                     }>, {
+                        neonLink: import("vue").Ref<HTMLAnchorElement | null, HTMLAnchorElement | null>;
                         routerUrl: import("vue").ComputedRef<string | undefined>;
                         sanitizedAttributes: import("vue").ComputedRef<{
                             [x: string]: unknown;
@@ -7015,6 +7020,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                     default: boolean;
                 };
             }>, {
+                neonLink: import("vue").Ref<HTMLAnchorElement | null, HTMLAnchorElement | null>;
                 routerUrl: import("vue").ComputedRef<string | undefined>;
                 sanitizedAttributes: import("vue").ComputedRef<{
                     [x: string]: unknown;

package/dist/src/neon.d.ts

@@ -74,6 +74,7 @@ export { NeonDropdownPlacement } from './common/enums/NeonDropdownPlacement';
 export { NeonDropdownStyle } from './common/enums/NeonDropdownStyle';
 export { NeonFunctionalColor } from './common/enums/NeonFunctionalColor';
 export { NeonHorizontalPosition } from './common/enums/NeonHorizontalPosition';
+export { NeonInputIndicatorStyle } from './common/enums/NeonInputIndicatorStyle';
 export { NeonInputMode } from './common/enums/NeonInputMode';
 export { NeonInputType } from './common/enums/NeonInputType';
 export { NeonLabelSize } from './common/enums/NeonLabelSize';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@aotearoan/neon",
   "description": "Neon is a lightweight design library of Vue 3 components with minimal dependencies.",
-  "version": "22.4.0",
+  "version": "22.5.0",
   "main": "./dist/neon.cjs.js",
   "module": "./dist/neon.es.js",
   "types": "./dist/src/neon.d.ts",

package/src/sass/components/_field-group.scss

@@ -1,60 +1,147 @@
+@use '../includes/palettes';
+
 @mixin field-group {
   .neon-field-group {
     display: flex;
     flex-direction: row;
     justify-content: flex-start;
 
-    & > *,
-    & > .neon-input,
-    & > .neon-select {
-      &,
-      & > input,
-      & .neon-button {
-        border-radius: 0;
-        min-height: 100%;
-      }
-
-      &:first-child {
+    &.neon-field-group--external {
+      & > *,
+      & > .neon-input,
+      & > .neon-select {
         &,
         & > input,
         & .neon-button {
-          border-top-left-radius: var(--neon-border-radius);
-          border-bottom-left-radius: var(--neon-border-radius);
+          border-radius: 0;
+          min-height: 100%;
+        }
+
+        &:first-child {
+          &,
+          & > input,
+          & .neon-button {
+            border-top-left-radius: var(--neon-border-radius-input);
+            border-bottom-left-radius: var(--neon-border-radius-input);
+          }
+        }
+
+        &:not(:first-child) {
+          &,
+          & > input,
+          & .neon-button {
+            &:not(:focus) {
+              border-left: none;
+            }
+          }
+
+          & > input,
+          & .neon-button {
+            &:focus {
+              margin-left: calc(-1 * var(--neon-border-width));
+              margin-right: calc(-1 * var(--neon-border-width));
+              width: calc(100% + 2 * var(--neon-border-width));
+            }
+          }
+        }
+
+        &:last-child {
+          &,
+          & > input,
+          & .neon-button {
+            border-top-right-radius: var(--neon-border-radius-input);
+            border-bottom-right-radius: var(--neon-border-radius-input);
+          }
         }
       }
 
-      &:not(:first-child) {
-        &,
-        & > input,
-        & .neon-button {
-          &:not(:focus) {
-            border-left: none;
+      & > .neon-input {
+        & > input:focus {
+          max-width: 100%;
+        }
+      }
+    }
+
+    &.neon-field-group--internal {
+      border: var(--neon-border-width-input) var(--neon-border-style) var(--neon-border-color-input);
+      border-radius: var(--neon-border-radius-input);
+
+      .neon-input-indicator {
+        background-color: var(--neon-background-color-input);
+
+        &:not(:last-child) {
+          .neon-input-indicator__label {
+            padding-right: 0;
+          }
+
+          .neon-input-indicator__icon {
+            min-width: 16rem;
+            margin-left: var(--neon-space-12);
+            width: 16rem;
+
+            svg {
+              width: 16rem;
+              min-width: 16rem;
+            }
           }
         }
+      }
 
-        & > input,
-        & .neon-button {
-          &:focus {
-            margin-left: calc(-1 * var(--neon-border-width));
-            margin-right: calc(-1 * var(--neon-border-width));
-            width: calc(100% + 2 * var(--neon-border-width));
+      @each $color in palettes.$neon-functional-colors {
+        &.neon-field-group--#{$color} {
+          &:focus-within {
+            border-color: var(--neon-color-#{$color});
+
+            .neon-input-indicator {
+              background-color: rgba(var(--neon-rgb-#{$color}), var(--neon-opacity-input-background-active));
+            }
           }
         }
       }
 
-      &:last-child {
+      &.neon-field-group--disabled {
+        border-color: var(--neon-color-disabled-border);
+
+        .neon-input-indicator {
+          background-color: var(--neon-color-disabled-background);
+
+        }
+      }
+
+      & > *,
+      & > .neon-input-indicator,
+      & > .neon-input {
         &,
-        & > input,
-        & .neon-button {
-          border-top-right-radius: var(--neon-border-radius);
-          border-bottom-right-radius: var(--neon-border-radius);
+        & > input {
+          border-radius: 0;
+          border: none;
+          min-height: 100%;
+        }
+      }
+
+      & > .neon-input {
+        & > input:focus {
+          max-width: 100%;
         }
       }
-    }
 
-    & > .neon-input {
-      & > input:focus {
-        max-width: 100%;
+      & > *,
+      & > .neon-input {
+        &:first-child {
+          &,
+          & > input {
+            border-top-left-radius: var(--neon-border-radius-input);
+            border-bottom-left-radius: var(--neon-border-radius-input);
+          }
+        }
+
+        &:last-child {
+          &,
+          & > input {
+            border-top-right-radius: var(--neon-border-radius-input);
+            border-bottom-right-radius: var(--neon-border-radius-input);
+          }
+        }
       }
     }
   }

package/src/sass/components/_input-indicator.scss

@@ -20,13 +20,16 @@
       display: flex;
       align-items: center;
       justify-content: center;
+      font-weight: var(--neon-font-weight-input-indicator);
+      padding-left: var(--neon-space-12);
+      padding-right: var(--neon-space-12);
     }
 
     &--s {
       height: var(--neon-size-s);
 
       .neon-input-indicator__label {
-        @include layout.padding-horizontal(0.33, 0.33);
+        font-size: var(--neon-font-size-input-indicator-s);
       }
 
       .neon-input-indicator__label,
@@ -35,8 +38,8 @@
       }
 
       .neon-icon {
-        width: var(--neon-font-size-m);
-        height: var(--neon-font-size-m);
+        width: var(--neon-font-size-input-indicator-s);
+        height: var(--neon-font-size-input-indicator-s);
       }
     }
 
@@ -44,7 +47,7 @@
       height: var(--neon-size-m);
 
       .neon-input-indicator__label {
-        @include layout.padding-horizontal(0.5, 0.5);
+        font-size: var(--neon-font-size-input-indicator-m);
       }
 
       .neon-input-indicator__label,
@@ -53,8 +56,8 @@
       }
 
       .neon-icon {
-        width: var(--neon-font-size-l);
-        height: var(--neon-font-size-l);
+        width: var(--neon-font-size-input-indicator-m);
+        height: var(--neon-font-size-input-indicator-m);
       }
     }
 
@@ -62,7 +65,7 @@
       height: var(--neon-size-l);
 
       .neon-input-indicator__label {
-        @include layout.padding-horizontal(0.5, 0.5);
+        font-size: var(--neon-font-size-input-indicator-l);
       }
 
       .neon-input-indicator__label,
@@ -71,8 +74,8 @@
       }
 
       .neon-icon {
-        width: var(--neon-font-size-l);
-        height: var(--neon-font-size-l);
+        width: var(--neon-font-size-input-indicator-l);
+        height: var(--neon-font-size-input-indicator-l);
       }
     }
 
@@ -80,6 +83,7 @@
       border: var(--neon-border-width) var(--neon-border-style) var(--neon-color-disabled-border);
       background-color: var(--neon-color-disabled-background);
       color: var(--neon-color-disabled-text);
+      cursor: not-allowed;
     }
   }
 }

package/src/sass/components/_input.scss

@@ -1,9 +1,9 @@
 @use '../includes/palettes';
 
-@mixin input-size($size, $font-size) {
+@mixin input-size($size) {
   .neon-input__text,
   .neon-input__textarea {
-    font-size: var(--neon-font-size-#{$font-size});
+    font-size: var(--neon-font-size-input-#{$size});
   }
 
   .neon-input__text {
@@ -19,31 +19,32 @@
       position: absolute;
 
       @if ($size == 's') {
-        width: calc(var(--neon-size-#{$size}) - var(--neon-space-10));
-        height: calc(var(--neon-size-#{$size}) - var(--neon-space-10));
-        top: calc(1.25 * var(--neon-space-4));
-        right: calc(1.25 * var(--neon-space-4));
+        width: calc(var(--neon-size-#{$size}) - 2.5 * var(--neon-base-space));
+        height: calc(var(--neon-size-#{$size}) - 2.5 * var(--neon-base-space));
+        top: calc(1.25 * var(--neon-base-space));
+        right: calc(1.25 * var(--neon-base-space));
 
-        padding: var(--neon-space-2);
+        padding: calc(0.5 * var(--neon-base-space));
         &.neon-icon--name-close {
-          padding: var(--neon-space-4);
+          padding: var(--neon-base-space);
         }
       } @else {
-        width: calc(var(--neon-size-#{$size}) - var(--neon-space-12));
-        height: calc(var(--neon-size-#{$size}) - var(--neon-space-12));
-        top: var(--neon-space-6);
-        right: var(--neon-space-6);
+        width: calc(var(--neon-size-#{$size}) - 3 * var(--neon-base-space));
+        height: calc(var(--neon-size-#{$size}) - 3 * var(--neon-base-space));
+        top: calc(1.5 * var(--neon-base-space));
+        right: calc(1.5 * var(--neon-base-space));
 
-        padding: var(--neon-space-4);
+        padding: calc(1 * var(--neon-base-space));
 
         &.neon-icon--name-close {
           @if ($size == 'l') {
-            padding: calc(2.25 * var(--neon-space-4));
+            padding: calc(2.25 * var(--neon-base-space));
           } @else {
-            padding: calc(1.5 * var(--neon-space-4));
+            padding: calc(1.5 * var(--neon-base-space));
           }
         }
       }
+
       cursor: default;
       border-radius: 50%;
 
@@ -63,10 +64,14 @@
 @mixin input {
   .neon-input {
     width: 100%;
-    position: relative;
+
+    &,
+    &__textarea,
+    &__textarea-wrapper {
+      position: relative;
+    }
 
     @each $color in palettes.$neon-functional-colors {
-      $input-rgb: var(--neon-rgb-#{$color});
       &.neon-input--#{$color} {
         &.neon-input--focused {
           .neon-input__text,
@@ -109,23 +114,23 @@
     }
 
     &--s {
-      @include input-size('s', 's');
+      @include input-size('s');
     }
 
     &--m {
-      @include input-size('m', 'm');
+      @include input-size('m');
     }
 
     &--l {
-      @include input-size('l', 'm');
+      @include input-size('l');
     }
 
     &__text,
     &__textarea {
       border-radius: var(--neon-border-radius-input);
       border: var(--neon-border-width-input) var(--neon-border-style);
-      padding: var(--neon-space-4) var(--neon-space-10);
-      line-height: var(--neon-line-height-one);
+      padding: var(--neon-base-space) calc(2 * var(--neon-base-space));
+      line-height: var(--neon-line-height-input);
       outline: none;
       font-family: var(--neon-font-family-body);
       width: 100%;
@@ -133,21 +138,24 @@
       color: var(--neon-color-input);
       background-color: var(--neon-background-color-input);
       box-shadow: var(--neon-inset-shadow);
+      font-weight: var(--neon-font-weight-input);
 
       &::placeholder {
         font-family: var(--neon-font-family-body);
-        letter-spacing: var(--neon-letter-spacing-s);
+        font-size: var(--neon-font-size-placeholder);
+        font-style: var(--neon-font-style-placeholder);
+        font-weight: var(--neon-font-weight-placeholder);
         color: var(--neon-color-placeholder);
       }
 
       &-counter {
-        position: absolute;
-        bottom: var(--neon-space-8);
-        right: var(--neon-space-8);
+        align-self: flex-end;
         user-select: none;
-        font-size: var(--neon-font-size-s);
+        font-size: var(--neon-font-size-xs);
+        font-weight: var(--neon-font-weight-normal);
         letter-spacing: var(--neon-letter-spacing-s);
-        color: var(--neon-color-placeholder);
+        color: var(--neon-color-text-tertiary);
+        margin-bottom: var(--neon-space-4);
       }
     }
 

package/src/sass/components/_tabs.scss

@@ -11,7 +11,7 @@
         $tab-hover-color: var(--neon-color-tab-hover-#{$color});
 
         .neon-tabs__menu-item {
-          &--selected {
+          &.neon-tabs__menu-item {
             .neon-tabs__menu-item-container:before {
               background-color: $tab-selected-color;
             }
@@ -24,13 +24,17 @@
             }
           }
 
+          .neon-tabs__menu-item-container:focus {
+            background-color: rgba(var(--neon-rgb-#{$color}), var(--neon-opacity-tab-focus));
+          }
+
           &-container:focus:before {
             background-color: $tab-hover-color;
           }
         }
 
         .neon-tab {
-          &:focus:before {
+          &:focus-visible:before {
             background-color: $tab-hover-color;
           }
         }
@@ -38,13 +42,17 @@
     }
 
     .neon-tabs__menu-items {
+      height: var(--neon-height-tabs);
       display: flex;
       flex-direction: row;
       align-items: center;
-      font-weight: var(--neon-font-weight-medium);
     }
 
     .neon-tabs__menu-item {
+      --neon-border-width-link: 0rem;
+      --neon-border-width-link-hover: 0rem;
+
+      text-decoration: none;
       position: relative;
       display: flex;
       flex-direction: row;
@@ -56,6 +64,12 @@
       transition: color ease-in-out var(--neon-animation-speed-fast);
       @include svg.color-with-svg(var(--neon-color-low-contrast));
 
+      font-weight: var(--neon-font-weight-tabs);
+
+      &--selected {
+        font-weight: var(--neon-font-weight-tabs-selected);
+      }
+
       &:focus {
         outline: none;
       }
@@ -84,6 +98,7 @@
           position: absolute;
           height: var(--neon-border-width-tabs);
           bottom: 0;
+          left: 0;
           border-radius: var(--neon-border-radius-tabs);
           transition: all ease-in-out var(--neon-animation-speed-fast);
         }
@@ -92,7 +107,6 @@
 
     &.neon-tabs--s {
       .neon-tabs__menu-items {
-        height: var(--neon-size-s);
         font-size: var(--neon-font-size-m);
 
         svg {
@@ -105,7 +119,6 @@
 
     &.neon-tabs--m {
       .neon-tabs__menu-items {
-        height: var(--neon-size-m);
         font-size: var(--neon-font-size-l);
 
         svg {
@@ -118,7 +131,6 @@
 
     &.neon-tabs--l {
       .neon-tabs__menu-items {
-        height: var(--neon-size-l);
         font-size: var(--neon-font-size-l);
 
         svg {
@@ -129,29 +141,48 @@
       }
     }
 
+    .neon-tabs__menu-items--full-width-mobile {
+      @include responsive.responsive(mobile-large) {
+        margin: 0 calc(-1 * var(--neon-gutter-mobile));
+        max-width: calc(100% + 2 * var(--neon-gutter-mobile));
+        width: calc(100% + 2 * var(--neon-gutter-mobile));
+      }
+    }
+
     .neon-tabs__menu-items--underlined {
-      border-bottom: var(--neon-border-width-tabs) var(--neon-border-style) var(--neon-border-color-tabs-underline);
+      .neon-swiper__container {
+        position: relative;
+
+        &:after {
+          content: '';
+          position: absolute;
+          display: flex;
+          bottom: 0;
+          left: 0;
+          width: 100%;
+          height: var(--neon-border-width-tabs);
+          background-color: var(--neon-border-color-tabs-underline);
+        }
+
+        .neon-tabs__menu-item-container:before {
+          background-color: var(--neon-border-color-tabs-underline);
+        }
+      }
 
       .neon-tabs__menu-item-container:before {
-        bottom: calc(-1 * var(--neon-border-width-tabs));
+        bottom: 0;
+        z-index: var(--neon-z-index-above);
       }
     }
 
     .neon-tabs__menu-item {
-      & + .neon-tabs__menu-item {
-        margin-left: calc(6 * var(--neon-base-space));
-      }
-
       &-container {
+        padding: 0 calc(8 * var(--neon-base-space));
         flex-direction: row;
       }
 
-      .neon-tabs__menu-item-container:focus {
-        &:before {
-          margin-left: var(--neon-base-space);
-          margin-right: var(--neon-base-space);
-          width: calc(100% - 2 * var(--neon-base-space));
-        }
+      .neon-tabs__menu-label {
+        white-space: nowrap;
       }
     }
   }
@@ -178,7 +209,7 @@
       transition: all var(--neon-animation-speed-fast) ease-in-out;
     }
 
-    &:focus {
+    &:focus-visible {
       outline: none;
 
       &:before {
@@ -187,17 +218,6 @@
     }
   }
 
-  @include responsive.responsive(mobile-large) {
-    .neon-tabs__menu-items {
-      display: none;
-    }
-
-    .neon-tab {
-      display: flex;
-      padding-bottom: 0;
-    }
-  }
-
   .neon-card-body--full-width {
     .neon-tabs__menu-items {
       @include layout.padding-horizontal;

package/src/sass/includes/_dependencies.scss

@@ -112,7 +112,7 @@
           NeonSplashLoader: [NeonIcon],
           NeonSwitch: [NeonIcon],
           NeonTab: [],
-          NeonTabs: [NeonIcon],
+          NeonTabs: [NeonIcon, NeonSwiper, NeonLink],
           NeonToastContainer: [NeonIcon],
           NeonToggle: [NeonIcon],
           NeonToggleChip: [NeonIcon],