@aotearoan/neon 28.0.1 → 28.0.3

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

@@ -1459,14 +1459,18 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                             default: boolean;
                         };
                     }>, {
-                        neonLink: import("vue").Ref<HTMLAnchorElement | null, HTMLAnchorElement | null>;
+                        neonLink: import("vue").Ref<HTMLAnchorElement | null, HTMLAnchorElement | null>; /**
+                         * Allow multi-select.
+                         */
                         routerUrl: import("vue").ComputedRef<string | undefined>;
                         sanitizedAttributes: import("vue").ComputedRef<{
                             [x: string]: unknown;
                         }>;
-                        activeRoute: import("vue").ComputedRef<boolean | "">;
-                        exactRoute: import("vue").ComputedRef<boolean | "">;
-                        onClick: () => void;
+                        activeRoute: import("vue").ComputedRef<boolean | "" | undefined>;
+                        exactRoute: import("vue").ComputedRef<boolean | "" | undefined>;
+                        onClick: () => void; /**
+                         * Placeholder when multiple values are selected.
+                         */
                         onSpace: () => Promise<void>;
                     }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "click"[], "click", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
                         href: {
@@ -2302,14 +2306,18 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                     default: boolean;
                 };
             }>, {
-                neonLink: import("vue").Ref<HTMLAnchorElement | null, HTMLAnchorElement | null>;
+                neonLink: import("vue").Ref<HTMLAnchorElement | null, HTMLAnchorElement | null>; /**
+                 * Allow multi-select.
+                 */
                 routerUrl: import("vue").ComputedRef<string | undefined>;
                 sanitizedAttributes: import("vue").ComputedRef<{
                     [x: string]: unknown;
                 }>;
-                activeRoute: import("vue").ComputedRef<boolean | "">;
-                exactRoute: import("vue").ComputedRef<boolean | "">;
-                onClick: () => void;
+                activeRoute: import("vue").ComputedRef<boolean | "" | undefined>;
+                exactRoute: import("vue").ComputedRef<boolean | "" | undefined>;
+                onClick: () => void; /**
+                 * Placeholder when multiple values are selected.
+                 */
                 onSpace: () => Promise<void>;
             }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "click"[], "click", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
                 href: {
@@ -3894,14 +3902,18 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                             default: boolean;
                         };
                     }>, {
-                        neonLink: import("vue").Ref<HTMLAnchorElement | null, HTMLAnchorElement | null>;
+                        neonLink: import("vue").Ref<HTMLAnchorElement | null, HTMLAnchorElement | null>; /**
+                         * Allow multi-select.
+                         */
                         routerUrl: import("vue").ComputedRef<string | undefined>;
                         sanitizedAttributes: import("vue").ComputedRef<{
                             [x: string]: unknown;
                         }>;
-                        activeRoute: import("vue").ComputedRef<boolean | "">;
-                        exactRoute: import("vue").ComputedRef<boolean | "">;
-                        onClick: () => void;
+                        activeRoute: import("vue").ComputedRef<boolean | "" | undefined>;
+                        exactRoute: import("vue").ComputedRef<boolean | "" | undefined>;
+                        onClick: () => void; /**
+                         * Placeholder when multiple values are selected.
+                         */
                         onSpace: () => Promise<void>;
                     }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "click"[], "click", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
                         href: {
@@ -4737,14 +4749,18 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                     default: boolean;
                 };
             }>, {
-                neonLink: import("vue").Ref<HTMLAnchorElement | null, HTMLAnchorElement | null>;
+                neonLink: import("vue").Ref<HTMLAnchorElement | null, HTMLAnchorElement | null>; /**
+                 * Allow multi-select.
+                 */
                 routerUrl: import("vue").ComputedRef<string | undefined>;
                 sanitizedAttributes: import("vue").ComputedRef<{
                     [x: string]: unknown;
                 }>;
-                activeRoute: import("vue").ComputedRef<boolean | "">;
-                exactRoute: import("vue").ComputedRef<boolean | "">;
-                onClick: () => void;
+                activeRoute: import("vue").ComputedRef<boolean | "" | undefined>;
+                exactRoute: import("vue").ComputedRef<boolean | "" | undefined>;
+                onClick: () => void; /**
+                 * Placeholder when multiple values are selected.
+                 */
                 onSpace: () => Promise<void>;
             }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "click"[], "click", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
                 href: {
@@ -6518,14 +6534,18 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                             default: boolean;
                         };
                     }>, {
-                        neonLink: import("vue").Ref<HTMLAnchorElement | null, HTMLAnchorElement | null>;
+                        neonLink: import("vue").Ref<HTMLAnchorElement | null, HTMLAnchorElement | null>; /**
+                         * Allow multi-select.
+                         */
                         routerUrl: import("vue").ComputedRef<string | undefined>;
                         sanitizedAttributes: import("vue").ComputedRef<{
                             [x: string]: unknown;
                         }>;
-                        activeRoute: import("vue").ComputedRef<boolean | "">;
-                        exactRoute: import("vue").ComputedRef<boolean | "">;
-                        onClick: () => void;
+                        activeRoute: import("vue").ComputedRef<boolean | "" | undefined>;
+                        exactRoute: import("vue").ComputedRef<boolean | "" | undefined>;
+                        onClick: () => void; /**
+                         * Placeholder when multiple values are selected.
+                         */
                         onSpace: () => Promise<void>;
                     }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "click"[], "click", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
                         href: {
@@ -7361,14 +7381,18 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                     default: boolean;
                 };
             }>, {
-                neonLink: import("vue").Ref<HTMLAnchorElement | null, HTMLAnchorElement | null>;
+                neonLink: import("vue").Ref<HTMLAnchorElement | null, HTMLAnchorElement | null>; /**
+                 * Allow multi-select.
+                 */
                 routerUrl: import("vue").ComputedRef<string | undefined>;
                 sanitizedAttributes: import("vue").ComputedRef<{
                     [x: string]: unknown;
                 }>;
-                activeRoute: import("vue").ComputedRef<boolean | "">;
-                exactRoute: import("vue").ComputedRef<boolean | "">;
-                onClick: () => void;
+                activeRoute: import("vue").ComputedRef<boolean | "" | undefined>;
+                exactRoute: import("vue").ComputedRef<boolean | "" | undefined>;
+                onClick: () => void; /**
+                 * Placeholder when multiple values are selected.
+                 */
                 onSpace: () => Promise<void>;
             }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "click"[], "click", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
                 href: {

package/dist/src/model/navigation/tree-menu/NeonTreeMenuItemModel.d.ts

@@ -11,6 +11,8 @@ export interface NeonTreeMenuItemModel {
     href?: string;
     /** Expanded state of the menu item. */
     expanded?: boolean;
+    /** Denotes the link is external (open in a new tab). */
+    external?: boolean;
     /** A list of page sub menu items */
     subMenu?: NeonTreeMenuSubMenuModel[];
 }

package/dist/src/model/presentation/dropdown/NeonDropdownMenuItem.d.ts

@@ -1,3 +1,4 @@
+import type { NeonHorizontalPosition } from '@/model/common/position/NeonHorizontalPosition';
 /**
  * Model object for a dropdown menu item. See <a href="/navigation/dropdown-menu">NeonDropdownMenu</a>.
  */
@@ -8,8 +9,10 @@ export interface NeonDropdownMenuItem {
     label: string;
     /** The URL if this menu item links to another page or an external URL. */
     href?: string;
-    /** The name of an optional icon to be displayed before the label. */
+    /** The name of an optional icon to be displayed with the label. */
     icon?: string;
+    /** The position of an icon to be displayed with the label. The default is to the left. */
+    iconPosition?: NeonHorizontalPosition;
     /** Boolean to indicate the display of a separator before this menu item in the dropdown list. */
     separatorBefore?: boolean;
     /** Boolean indicating if this menu item is disabled. */

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

package/src/sass/components/_button.scss

@@ -13,6 +13,7 @@
                   var(--neon-gradient-button-c2) 100%
   );
   transition: all ease-in-out var(--neon-animation-speed-fast);
+  transition: background ease-in-out 0ms;
 
   &:active:not(:disabled),
   &:hover:not(:disabled) {
@@ -30,6 +31,7 @@
 
 @mixin solid-button($color) {
   transition: all ease-in-out var(--neon-animation-speed-fast);
+  transition: background ease-in-out 0ms;
   background: linear-gradient(
                   var(--neon-background-solid-button-light-#{$color}),
                   var(--neon-background-solid-button-dark-#{$color})
@@ -54,6 +56,7 @@
 @mixin outline-button($color) {
   transition: all ease-in-out var(--neon-animation-speed-fast);
   border: var(--neon-border-width-outline-button) var(--neon-border-style) var(--neon-border-color-outline-button-inactive-#{$color});
+
   &:not(.neon-button--disabled) {
     color: var(--neon-background-outline-button-active-#{$color});
     @include svg.svg-colors(var(--neon-background-outline-button-active-#{$color}));

package/src/sass/components/_dropdown-menu.scss

@@ -7,7 +7,7 @@
       &--#{$color} {
         .neon-dropdown-menu__item {
           &--highlighted:not(.neon-dropdown-menu__item--disabled):not(.neon-dropdown-menu__item--selected):not(.neon-dropdown-menu__item--group-title) {
-            background-color: rgba(var(--neon-rgb-#{$color}), 0.125);
+            background-color: rgba(var(--neon-rgb-low-contrast), 0.125);
           }
         }
       }
@@ -42,16 +42,13 @@
         flex-direction: row;
         flex-wrap: nowrap;
         align-items: center;
+        gap: var(--neon-space-12);
       }
 
       &-label {
         white-space: nowrap;
       }
 
-      .neon-icon {
-        margin-right: var(--neon-space-12);
-      }
-
       .neon-link {
         text-decoration: none;
         color: var(--neon-color-text-secondary);
@@ -71,6 +68,14 @@
         height: var(--neon-font-size-s);
       }
 
+      &--icon-right {
+        .neon-dropdown-menu__item-container,
+        .neon-link {
+          flex-direction: row-reverse;
+          justify-content: flex-end;
+        }
+      }
+
       &--grouped {
         .neon-dropdown-menu__item-container,
         .neon-link {

package/src/sass/components/_dropdown.scss

@@ -48,7 +48,7 @@
       z-index: var(--neon-z-index-below-top);
       border-radius: var(--neon-border-radius);
       overflow: hidden;
-      min-width: calc(100% - 2 * var(--neon-border-width));
+      min-width: var(--neon-min-width-dropdown);
       background-color: var(--neon-background-color-dropdown-content);
       box-shadow: var(--neon-box-shadow-dropdown);
 

package/src/sass/components/_tree-menu.scss

@@ -20,9 +20,25 @@
         touch-action: none;
         outline: none;
       }
+    }
+
+    &--exact {
+      .neon-tree-menu__section-link,
+      .neon-tree-menu__item-link,
+      .neon-tree-menu__sub-menu-item-link {
+        &.neon-link--exact-active > span {
+          font-weight: var(--neon-font-weight-tree-menu-selected);
+        }
+      }
+    }
 
-      &.neon-link--active > span {
-        font-weight: var(--neon-font-weight-tree-menu-selected);
+    &--active {
+      .neon-tree-menu__section-link,
+      .neon-tree-menu__item-link,
+      .neon-tree-menu__sub-menu-item-link {
+        &.neon-link--active > span {
+          font-weight: var(--neon-font-weight-tree-menu-selected);
+        }
       }
     }
 
@@ -121,7 +137,7 @@
         .neon-tree-menu__section .neon-tree-menu__section-link,
         .neon-tree-menu__item .neon-tree-menu__item-link,
         .neon-tree-menu__sub-menu-item .neon-tree-menu__sub-menu-item-link {
-          &.neon-link--active {
+          &.neon-link--exact-active {
             @include svg.color-with-svg(var(--neon-color-#{$color}));
           }
 
@@ -137,6 +153,26 @@
             @include outline.focus-text-outline(var(--neon-rgb-#{$color}));
           }
         }
+
+        &.neon-tree-menu--exact {
+          .neon-tree-menu__section .neon-tree-menu__section-link,
+          .neon-tree-menu__item .neon-tree-menu__item-link,
+          .neon-tree-menu__sub-menu-item .neon-tree-menu__sub-menu-item-link {
+            &.neon-link--exact-active {
+              @include svg.color-with-svg(var(--neon-color-#{$color}));
+            }
+          }
+        }
+
+        &.neon-tree-menu--active {
+          .neon-tree-menu__section .neon-tree-menu__section-link,
+          .neon-tree-menu__item .neon-tree-menu__item-link,
+          .neon-tree-menu__sub-menu-item .neon-tree-menu__sub-menu-item-link {
+            &.neon-link--active {
+              @include svg.color-with-svg(var(--neon-color-#{$color}));
+            }
+          }
+        }
       }
     }
 

package/src/sass/variables-global.scss

@@ -799,6 +799,11 @@
    * Max height of the dropdown container when open.
    */
   --neon-max-height-dropdown: 280rem;
+  /**
+     * @component NeonDropdown,NeonSelect,NeonSearch,NeonDropdownMenu
+     * Min width of the dropdown container when open.
+     */
+  --neon-min-width-dropdown: 200rem;
 
   /* buttons */
   /**