@aotearoan/neon 22.1.0 → 22.1.2

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

@@ -387,6 +387,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                 default: NeonFunctionalColor;
             };
             inverse: {
+                /**
+                 * Optional placeholder icon.
+                 */
                 type: BooleanConstructor;
                 default: boolean;
             };
@@ -394,6 +397,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                 type: () => NeonFunctionalColor;
                 default: null;
             };
+            /**
+             * A list of grouped options to render in the select.
+             */
             icon: {
                 type: StringConstructor;
                 default: null;
@@ -407,8 +413,20 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             };
             buttonStyle: {
                 type: () => import("../../../neon").NeonButtonStyle;
-                default: import("../../../neon").NeonButtonStyle;
-            };
+                default: import("../../../neon").NeonButtonStyle; /**
+                 * Placeholder when multiple values are selected.
+                 */
+            }; /**
+             * Placeholder when multiple values are selected.
+             */
+            buttonType: {
+                type: () => import("../../../neon").NeonButtonType;
+                default: import("../../../neon").NeonButtonType; /**
+                 * The size of the dropdown - Small, Medium or Large.
+                 */
+            }; /**
+             * The size of the dropdown - Small, Medium or Large.
+             */
             state: {
                 type: () => import("../../../neon").NeonState;
                 default: import("../../../neon").NeonState;
@@ -431,16 +449,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             };
             fullWidth: {
                 type: BooleanConstructor;
-                default: null; /**
-                 * emitted when the user changes the selection.
-                 * @type {string | string[]} either the selected option's key (single select) or an array of the selected keys
-                 * (multi-select).
-                 */
-            }; /**
-             * emitted when the user changes the selection.
-             * @type {string | string[]} either the selected option's key (single select) or an array of the selected keys
-             * (multi-select).
-             */
+                default: null;
+            };
             indicator: {
                 type: BooleanConstructor;
                 default: boolean;
@@ -490,6 +500,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                 default: NeonFunctionalColor;
             };
             inverse: {
+                /**
+                 * Optional placeholder icon.
+                 */
                 type: BooleanConstructor;
                 default: boolean;
             };
@@ -497,6 +510,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                 type: () => NeonFunctionalColor;
                 default: null;
             };
+            /**
+             * A list of grouped options to render in the select.
+             */
             icon: {
                 type: StringConstructor;
                 default: null;
@@ -510,8 +526,20 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             };
             buttonStyle: {
                 type: () => import("../../../neon").NeonButtonStyle;
-                default: import("../../../neon").NeonButtonStyle;
-            };
+                default: import("../../../neon").NeonButtonStyle; /**
+                 * Placeholder when multiple values are selected.
+                 */
+            }; /**
+             * Placeholder when multiple values are selected.
+             */
+            buttonType: {
+                type: () => import("../../../neon").NeonButtonType;
+                default: import("../../../neon").NeonButtonType; /**
+                 * The size of the dropdown - Small, Medium or Large.
+                 */
+            }; /**
+             * The size of the dropdown - Small, Medium or Large.
+             */
             state: {
                 type: () => import("../../../neon").NeonState;
                 default: import("../../../neon").NeonState;
@@ -534,16 +562,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             };
             fullWidth: {
                 type: BooleanConstructor;
-                default: null; /**
-                 * emitted when the user changes the selection.
-                 * @type {string | string[]} either the selected option's key (single select) or an array of the selected keys
-                 * (multi-select).
-                 */
-            }; /**
-             * emitted when the user changes the selection.
-             * @type {string | string[]} either the selected option's key (single select) or an array of the selected keys
-             * (multi-select).
-             */
+                default: null;
+            };
             indicator: {
                 type: BooleanConstructor;
                 default: boolean;
@@ -567,6 +587,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             alternateColor: NeonFunctionalColor;
             iconPosition: import("../../../neon").NeonHorizontalPosition;
             buttonStyle: import("../../../neon").NeonButtonStyle;
+            buttonType: import("../../../neon").NeonButtonType;
             state: import("../../../neon").NeonState;
             transparent: boolean;
             fullWidth: boolean;
@@ -1181,6 +1202,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                 default: NeonFunctionalColor;
             };
             inverse: {
+                /**
+                 * Optional placeholder icon.
+                 */
                 type: BooleanConstructor;
                 default: boolean;
             };
@@ -1188,6 +1212,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                 type: () => NeonFunctionalColor;
                 default: null;
             };
+            /**
+             * A list of grouped options to render in the select.
+             */
             icon: {
                 type: StringConstructor;
                 default: null;
@@ -1201,8 +1228,20 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             };
             buttonStyle: {
                 type: () => import("../../../neon").NeonButtonStyle;
-                default: import("../../../neon").NeonButtonStyle;
-            };
+                default: import("../../../neon").NeonButtonStyle; /**
+                 * Placeholder when multiple values are selected.
+                 */
+            }; /**
+             * Placeholder when multiple values are selected.
+             */
+            buttonType: {
+                type: () => import("../../../neon").NeonButtonType;
+                default: import("../../../neon").NeonButtonType; /**
+                 * The size of the dropdown - Small, Medium or Large.
+                 */
+            }; /**
+             * The size of the dropdown - Small, Medium or Large.
+             */
             state: {
                 type: () => import("../../../neon").NeonState;
                 default: import("../../../neon").NeonState;
@@ -1225,16 +1264,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             };
             fullWidth: {
                 type: BooleanConstructor;
-                default: null; /**
-                 * emitted when the user changes the selection.
-                 * @type {string | string[]} either the selected option's key (single select) or an array of the selected keys
-                 * (multi-select).
-                 */
-            }; /**
-             * emitted when the user changes the selection.
-             * @type {string | string[]} either the selected option's key (single select) or an array of the selected keys
-             * (multi-select).
-             */
+                default: null;
+            };
             indicator: {
                 type: BooleanConstructor;
                 default: boolean;
@@ -1284,6 +1315,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                 default: NeonFunctionalColor;
             };
             inverse: {
+                /**
+                 * Optional placeholder icon.
+                 */
                 type: BooleanConstructor;
                 default: boolean;
             };
@@ -1291,6 +1325,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                 type: () => NeonFunctionalColor;
                 default: null;
             };
+            /**
+             * A list of grouped options to render in the select.
+             */
             icon: {
                 type: StringConstructor;
                 default: null;
@@ -1304,8 +1341,20 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             };
             buttonStyle: {
                 type: () => import("../../../neon").NeonButtonStyle;
-                default: import("../../../neon").NeonButtonStyle;
-            };
+                default: import("../../../neon").NeonButtonStyle; /**
+                 * Placeholder when multiple values are selected.
+                 */
+            }; /**
+             * Placeholder when multiple values are selected.
+             */
+            buttonType: {
+                type: () => import("../../../neon").NeonButtonType;
+                default: import("../../../neon").NeonButtonType; /**
+                 * The size of the dropdown - Small, Medium or Large.
+                 */
+            }; /**
+             * The size of the dropdown - Small, Medium or Large.
+             */
             state: {
                 type: () => import("../../../neon").NeonState;
                 default: import("../../../neon").NeonState;
@@ -1328,16 +1377,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             };
             fullWidth: {
                 type: BooleanConstructor;
-                default: null; /**
-                 * emitted when the user changes the selection.
-                 * @type {string | string[]} either the selected option's key (single select) or an array of the selected keys
-                 * (multi-select).
-                 */
-            }; /**
-             * emitted when the user changes the selection.
-             * @type {string | string[]} either the selected option's key (single select) or an array of the selected keys
-             * (multi-select).
-             */
+                default: null;
+            };
             indicator: {
                 type: BooleanConstructor;
                 default: boolean;
@@ -1361,6 +1402,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             alternateColor: NeonFunctionalColor;
             iconPosition: import("../../../neon").NeonHorizontalPosition;
             buttonStyle: import("../../../neon").NeonButtonStyle;
+            buttonType: import("../../../neon").NeonButtonType;
             state: import("../../../neon").NeonState;
             transparent: boolean;
             fullWidth: boolean;
@@ -2164,6 +2206,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                 default: NeonFunctionalColor;
             };
             inverse: {
+                /**
+                 * Optional placeholder icon.
+                 */
                 type: BooleanConstructor;
                 default: boolean;
             };
@@ -2171,6 +2216,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                 type: () => NeonFunctionalColor;
                 default: null;
             };
+            /**
+             * A list of grouped options to render in the select.
+             */
             icon: {
                 type: StringConstructor;
                 default: null;
@@ -2184,8 +2232,20 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             };
             buttonStyle: {
                 type: () => import("../../../neon").NeonButtonStyle;
-                default: import("../../../neon").NeonButtonStyle;
-            };
+                default: import("../../../neon").NeonButtonStyle; /**
+                 * Placeholder when multiple values are selected.
+                 */
+            }; /**
+             * Placeholder when multiple values are selected.
+             */
+            buttonType: {
+                type: () => import("../../../neon").NeonButtonType;
+                default: import("../../../neon").NeonButtonType; /**
+                 * The size of the dropdown - Small, Medium or Large.
+                 */
+            }; /**
+             * The size of the dropdown - Small, Medium or Large.
+             */
             state: {
                 type: () => import("../../../neon").NeonState;
                 default: import("../../../neon").NeonState;
@@ -2208,16 +2268,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             };
             fullWidth: {
                 type: BooleanConstructor;
-                default: null; /**
-                 * emitted when the user changes the selection.
-                 * @type {string | string[]} either the selected option's key (single select) or an array of the selected keys
-                 * (multi-select).
-                 */
-            }; /**
-             * emitted when the user changes the selection.
-             * @type {string | string[]} either the selected option's key (single select) or an array of the selected keys
-             * (multi-select).
-             */
+                default: null;
+            };
             indicator: {
                 type: BooleanConstructor;
                 default: boolean;
@@ -2267,6 +2319,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                 default: NeonFunctionalColor;
             };
             inverse: {
+                /**
+                 * Optional placeholder icon.
+                 */
                 type: BooleanConstructor;
                 default: boolean;
             };
@@ -2274,6 +2329,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                 type: () => NeonFunctionalColor;
                 default: null;
             };
+            /**
+             * A list of grouped options to render in the select.
+             */
             icon: {
                 type: StringConstructor;
                 default: null;
@@ -2287,8 +2345,20 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             };
             buttonStyle: {
                 type: () => import("../../../neon").NeonButtonStyle;
-                default: import("../../../neon").NeonButtonStyle;
-            };
+                default: import("../../../neon").NeonButtonStyle; /**
+                 * Placeholder when multiple values are selected.
+                 */
+            }; /**
+             * Placeholder when multiple values are selected.
+             */
+            buttonType: {
+                type: () => import("../../../neon").NeonButtonType;
+                default: import("../../../neon").NeonButtonType; /**
+                 * The size of the dropdown - Small, Medium or Large.
+                 */
+            }; /**
+             * The size of the dropdown - Small, Medium or Large.
+             */
             state: {
                 type: () => import("../../../neon").NeonState;
                 default: import("../../../neon").NeonState;
@@ -2311,16 +2381,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             };
             fullWidth: {
                 type: BooleanConstructor;
-                default: null; /**
-                 * emitted when the user changes the selection.
-                 * @type {string | string[]} either the selected option's key (single select) or an array of the selected keys
-                 * (multi-select).
-                 */
-            }; /**
-             * emitted when the user changes the selection.
-             * @type {string | string[]} either the selected option's key (single select) or an array of the selected keys
-             * (multi-select).
-             */
+                default: null;
+            };
             indicator: {
                 type: BooleanConstructor;
                 default: boolean;
@@ -2344,6 +2406,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             alternateColor: NeonFunctionalColor;
             iconPosition: import("../../../neon").NeonHorizontalPosition;
             buttonStyle: import("../../../neon").NeonButtonStyle;
+            buttonType: import("../../../neon").NeonButtonType;
             state: import("../../../neon").NeonState;
             transparent: boolean;
             fullWidth: boolean;

package/dist/src/neon.d.ts

@@ -68,6 +68,7 @@ export { NeonAlertPlacement } from './common/enums/NeonAlertPlacement';
 export { NeonBadgeSize } from './common/enums/NeonBadgeSize';
 export { NeonButtonSize } from './common/enums/NeonButtonSize';
 export { NeonButtonStyle } from './common/enums/NeonButtonStyle';
+export { NeonButtonType } from './common/enums/NeonButtonType';
 export { NeonChipAction } from './common/enums/NeonChipAction';
 export { NeonDropdownPlacement } from './common/enums/NeonDropdownPlacement';
 export { NeonDropdownStyle } from './common/enums/NeonDropdownStyle';

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.1.0",
+  "version": "22.1.2",
   "main": "./dist/neon.cjs.js",
   "module": "./dist/neon.es.js",
   "types": "./dist/src/neon.d.ts",

package/src/sass/components/_menu.scss

@@ -3,14 +3,83 @@
 
 @mixin neon-menu-size($size) {
   .neon-menu__item {
-    height: var(--neon-size-#{$size});
+    height: 100%;
     font-size: var(--neon-font-size-#{$size});
-    padding-left: var(--neon-space-20);
-    padding-right: var(--neon-space-20);
-    border-radius: var(--neon-border-radius);
+    align-items: center;
+    display: flex;
+
+    & > .neon-link {
+      height: 100%;
+
+      .neon-menu__link-container {
+        width: 100%;
+        height: 100%;
+        padding-left: calc(5 * var(--neon-base-space));
+        padding-right: calc(5 * var(--neon-base-space));
+        justify-content: center;
+        flex-direction: row;
+        align-items: center;
+        position: relative;
+        gap: var(--neon-space-12);
+        font-family: var(--neon-font-family-menu);
+        font-weight: var(--neon-font-weight-menu);
+        @include svg.color-with-svg(var(--neon-color-text-primary));
+        opacity: var(--neon-opacity-menu-inactive);
+        transition: opacity ease-in-out var(--neon-animation-speed-slow);
+
+        &:before {
+          content: '';
+          position: absolute;
+          bottom: 0;
+          left: 0;
+          width: 100%;
+          opacity: 0;
+          height: var(--neon-height-menu-indicator);
+          transition: opacity ease-in-out var(--neon-animation-speed-slow);
+        }
+      }
+
+      &:hover {
+        .neon-menu__link-container {
+          opacity: 1;
+
+          &:before {
+            opacity: 1;
+          }
+        }
+
+      }
+
+      &:focus {
+        .neon-menu__link-container {
+          opacity: 1;
+        }
+      }
+
+      &.router-link-active {
+        .neon-menu__link-container {
+          opacity: 1;
 
-    .neon-link {
-      height: var(--neon-size-#{$size});
+          &:before {
+            opacity: 1;
+          }
+        }
+      }
+    }
+
+    .neon-button__label {
+      font-family: var(--neon-font-family-menu);
+      font-weight: var(--neon-font-weight-menu);
+    }
+
+    &--disabled {
+      .neon-link {
+        .neon-menu__link-container {
+          opacity: 1;
+          cursor: not-allowed;
+          @include svg.color-with-svg(var(--neon-color-disabled-text));
+        }
+      }
     }
 
     &:first-child {
@@ -28,9 +97,8 @@
 
     &-icon,
     .neon-dropdown .neon-dropdown__button .neon-icon {
-      width: var(--neon-font-size-#{$size});
-      height: var(--neon-font-size-#{$size});
-      margin-right: var(--neon-space-8);
+      width: calc(1.5 * var(--neon-font-size-#{$size}));
+      height: calc(1.5 * var(--neon-font-size-#{$size}));
       padding-right: 0;
     }
   }
@@ -59,38 +127,20 @@
     display: flex;
     flex-direction: row;
     user-select: none;
+    align-items: center;
+    height: 100%;
 
     @each $color in palettes.$neon-functional-colors {
       &.neon-menu--#{$color},
       &__responsive-menu.neon-dropdown-menu--#{$color} {
         .neon-menu__item:not(.neon-menu__item--disabled) {
-          &:hover:not(.router-link-active),
-          &:focus:not(.router-link-active),
-          &:active:not(.router-link-active) {
-            & > .neon-link,
-            .neon-dropdown__button {
-              @include svg.color-with-svg(rgba(var(--neon-rgb-#{$color}), 0.85));
-            }
-          }
-
-          &:focus-within {
+          .neon-link:focus {
             background-color: rgba(var(--neon-rgb-#{$color}), 0.125);
-
-            & > .neon-link:not(.router-link-active),
-            .neon-button:not(.router-link-active) {
-              @include svg.color-with-svg(var(--neon-color-text-secondary));
-            }
           }
-        }
 
-        .neon-menu__item > .router-link-active {
-          color: var(--neon-color-#{$color});
-
-          .neon-dropdown__button {
-            color: var(--neon-color-#{$color});
+          .neon-menu__link-container:before {
+            background-color: var(--neon-color-#{$color});
           }
-
-          @include svg.svg-colors(rgba(var(--neon-rgb-#{$color}), 0.85));
         }
       }
     }
@@ -99,6 +149,7 @@
       display: flex;
       flex-direction: row;
       align-items: center;
+      height: 100%;
 
       .neon-dropdown:not(.neon-dropdown--disabled) {
         .neon-dropdown__button {

package/src/sass/includes/_responsive.scss

@@ -3,10 +3,10 @@
 $breakpoints: (
         mobile: 'screen and (max-width: 414px)',
         larger-than-mobile: 'screen and (min-width: 415px)',
-        mobile-large: 'screen and (max-width: 599px)',
-        larger-than-mobile-large: 'screen and (min-width: 600px)',
-        tablet: 'screen and (max-width: 1024px)',
-        larger-than-tablet: 'screen and (min-width: 1025px)',
+        mobile-large: 'screen and (max-width: 767px)',
+        larger-than-mobile-large: 'screen and (min-width: 768px)',
+        tablet: 'screen and (max-width: 1023px)',
+        larger-than-tablet: 'screen and (min-width: 1024px)',
         desktop: 'screen and (max-width: 1439px)',
         desktop-large: 'screen and (min-width: 1440px)',
 ) !default;

package/src/sass/variables.scss

@@ -204,6 +204,12 @@
   --neon-border-opacity-alert-action: 0.25;
   --neon-width-toast: 250rem;
 
+  /* menu */
+  --neon-font-family-menu: var(--neon-font-family-body);
+  --neon-font-weight-menu: var(--neon-font-weight-bold);
+  --neon-opacity-menu-inactive: 0.75;
+  --neon-height-menu-indicator: 4rem;
+
   /* mobile menu */
   --neon-font-family-mobile-menu: var(--neon-font-family-body);
   --neon-font-size-mobile-menu: var(--neon-font-size-s);