@aotearoan/neon 28.0.1 → 28.0.2

package/dist/src/components/navigation/menu/NeonMenu.d.ts

@@ -4957,6 +4957,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         clickItem: (item: import("../../../neon").NeonDropdownMenuItem) => void;
         navigateBy: (offset: number, $event: KeyboardEvent) => void;
         onPlacement: (placement: import("../../../neon").NeonDropdownPlacement) => void;
+        NeonHorizontalPosition: typeof import("../../../neon").NeonHorizontalPosition;
     }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "click"[], "click", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
         model: {
             type: () => import("../../../neon").NeonDropdownMenuItem[];

package/dist/src/components/navigation/mobile-menu/NeonMobileMenu.d.ts

@@ -4848,6 +4848,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         clickItem: (item: import("../../../neon").NeonDropdownMenuItem) => void;
         navigateBy: (offset: number, $event: KeyboardEvent) => void;
         onPlacement: (placement: import("../../../neon").NeonDropdownPlacement) => void;
+        NeonHorizontalPosition: typeof import("../../../neon").NeonHorizontalPosition;
     }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "click"[], "click", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
         model: {
             type: () => import("../../../neon").NeonDropdownMenuItem[];

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.2",
   "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/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 */
   /**