@aotearoan/neon 23.2.5 → 23.3.1

package/dist/src/components/user-input/number/NeonNumber.d.ts

@@ -10,6 +10,13 @@ import { NeonInputMode } from '@/common/enums/NeonInputMode';
  * <p><strong>NeonNumber</strong> supports all the properties found on an HTML &lt;input&gt;.</p>
  */
 declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    /**
+     * The id the input
+     */
+    id: {
+        type: StringConstructor;
+        default: null;
+    };
     /**
      * The value of the number input. Either a valid number or null.
      */
@@ -146,6 +153,13 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     onFocus: () => boolean;
     onBlur: () => boolean;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    /**
+     * The id the input
+     */
+    id: {
+        type: StringConstructor;
+        default: null;
+    };
     /**
      * The value of the number input. Either a valid number or null.
      */
@@ -274,6 +288,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     locale: string;
     size: NeonSize;
     color: NeonFunctionalColor;
+    id: string;
     placeholder: string;
     inputmode: NeonInputMode;
     modelValue: number;
@@ -316,7 +331,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         };
         iconPosition: {
             type: () => import("../../../neon").NeonHorizontalPosition;
-            default: import("../../../neon").NeonHorizontalPosition;
+            default: import("../../../neon").NeonHorizontalPosition; /**
+             * Show/hide spin buttons. NOTE: The user can still use up/down arrow keys when the input has focus.
+             */
         };
         buttonStyle: {
             type: () => import("../../../neon").NeonButtonStyle;
@@ -332,8 +349,12 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         };
         disabled: {
             type: BooleanConstructor;
-            default: boolean;
-        };
+            default: boolean; /**
+             * The HTML inputmode of the component. Either 'numeric' or 'decimal'.
+             */
+        }; /**
+         * The HTML inputmode of the component. Either 'numeric' or 'decimal'.
+         */
         transparent: {
             type: BooleanConstructor;
             default: boolean;
@@ -415,7 +436,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         };
         iconPosition: {
             type: () => import("../../../neon").NeonHorizontalPosition;
-            default: import("../../../neon").NeonHorizontalPosition;
+            default: import("../../../neon").NeonHorizontalPosition; /**
+             * Show/hide spin buttons. NOTE: The user can still use up/down arrow keys when the input has focus.
+             */
         };
         buttonStyle: {
             type: () => import("../../../neon").NeonButtonStyle;
@@ -431,8 +454,12 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         };
         disabled: {
             type: BooleanConstructor;
-            default: boolean;
-        };
+            default: boolean; /**
+             * The HTML inputmode of the component. Either 'numeric' or 'decimal'.
+             */
+        }; /**
+         * The HTML inputmode of the component. Either 'numeric' or 'decimal'.
+         */
         transparent: {
             type: BooleanConstructor;
             default: boolean;
@@ -531,25 +558,15 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             color: {
                 type: () => NeonFunctionalColor;
                 default: null;
-            }; /**
-             * Placeholder text to display in the input
-             */
+            };
             inverse: {
                 type: BooleanConstructor;
-                default: boolean; /**
-                 * Whether the component is disabled.
-                 */
-            }; /**
-             * Whether the component is disabled.
-             */
+                default: boolean;
+            };
             disabled: {
                 type: BooleanConstructor;
-                default: boolean; /**
-                 * Enable/disable direct editing of the value.
-                 */
-            }; /**
-             * Enable/disable direct editing of the value.
-             */
+                default: boolean;
+            };
         }>, {
             sanitizedAttributes: import("vue").ComputedRef<{
                 [x: string]: unknown;
@@ -567,25 +584,15 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             color: {
                 type: () => NeonFunctionalColor;
                 default: null;
-            }; /**
-             * Placeholder text to display in the input
-             */
+            };
             inverse: {
                 type: BooleanConstructor;
-                default: boolean; /**
-                 * Whether the component is disabled.
-                 */
-            }; /**
-             * Whether the component is disabled.
-             */
+                default: boolean;
+            };
             disabled: {
                 type: BooleanConstructor;
-                default: boolean; /**
-                 * Enable/disable direct editing of the value.
-                 */
-            }; /**
-             * Enable/disable direct editing of the value.
-             */
+                default: boolean;
+            };
         }>> & Readonly<{}>, {
             disabled: boolean;
             color: NeonFunctionalColor;
@@ -604,10 +611,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             outlineStyle: {
                 type: () => import("../../../neon").NeonOutlineStyle;
                 default: import("../../../neon").NeonOutlineStyle; /**
-                 * The value of the number input. Either a valid number or null.
+                 * The id the input
                  */
             }; /**
-             * The value of the number input. Either a valid number or null.
+             * The id the input
              */
             externalIndicator: {
                 type: BooleanConstructor;
@@ -635,10 +642,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             outlineStyle: {
                 type: () => import("../../../neon").NeonOutlineStyle;
                 default: import("../../../neon").NeonOutlineStyle; /**
-                 * The value of the number input. Either a valid number or null.
+                 * The id the input
                  */
             }; /**
-             * The value of the number input. Either a valid number or null.
+             * The id the input
              */
             externalIndicator: {
                 type: BooleanConstructor;
@@ -664,25 +671,15 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                 color: {
                     type: () => NeonFunctionalColor;
                     default: null;
-                }; /**
-                 * Placeholder text to display in the input
-                 */
+                };
                 inverse: {
                     type: BooleanConstructor;
-                    default: boolean; /**
-                     * Whether the component is disabled.
-                     */
-                }; /**
-                 * Whether the component is disabled.
-                 */
+                    default: boolean;
+                };
                 disabled: {
                     type: BooleanConstructor;
-                    default: boolean; /**
-                     * Enable/disable direct editing of the value.
-                     */
-                }; /**
-                 * Enable/disable direct editing of the value.
-                 */
+                    default: boolean;
+                };
             }>, {
                 sanitizedAttributes: import("vue").ComputedRef<{
                     [x: string]: unknown;
@@ -700,25 +697,15 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                 color: {
                     type: () => NeonFunctionalColor;
                     default: null;
-                }; /**
-                 * Placeholder text to display in the input
-                 */
+                };
                 inverse: {
                     type: BooleanConstructor;
-                    default: boolean; /**
-                     * Whether the component is disabled.
-                     */
-                }; /**
-                 * Whether the component is disabled.
-                 */
+                    default: boolean;
+                };
                 disabled: {
                     type: BooleanConstructor;
-                    default: boolean; /**
-                     * Enable/disable direct editing of the value.
-                     */
-                }; /**
-                 * Enable/disable direct editing of the value.
-                 */
+                    default: boolean;
+                };
             }>> & Readonly<{}>, {
                 disabled: boolean;
                 color: NeonFunctionalColor;
@@ -789,10 +776,15 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         };
         autocomplete: {
             type: StringConstructor;
+            /**
+             * Whether the component is disabled.
+             */
             default: string;
         };
         state: {
-            type: () => import("../../../neon").NeonState;
+            type: () => import("../../../neon").NeonState; /**
+             * Enable/disable direct editing of the value.
+             */
             default: import("../../../neon").NeonState;
         };
         rows: {
@@ -802,7 +794,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         icon: {
             type: StringConstructor;
             default: null;
-        };
+        }; /**
+         * The rounding precision for display formatting.
+         */
         iconReadonly: {
             type: BooleanConstructor;
             default: boolean;
@@ -888,10 +882,15 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         };
         autocomplete: {
             type: StringConstructor;
+            /**
+             * Whether the component is disabled.
+             */
             default: string;
         };
         state: {
-            type: () => import("../../../neon").NeonState;
+            type: () => import("../../../neon").NeonState; /**
+             * Enable/disable direct editing of the value.
+             */
             default: import("../../../neon").NeonState;
         };
         rows: {
@@ -901,7 +900,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         icon: {
             type: StringConstructor;
             default: null;
-        };
+        }; /**
+         * The rounding precision for display formatting.
+         */
         iconReadonly: {
             type: BooleanConstructor;
             default: boolean;
@@ -977,25 +978,15 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             color: {
                 type: () => NeonFunctionalColor;
                 default: null;
-            }; /**
-             * Placeholder text to display in the input
-             */
+            };
             inverse: {
                 type: BooleanConstructor;
-                default: boolean; /**
-                 * Whether the component is disabled.
-                 */
-            }; /**
-             * Whether the component is disabled.
-             */
+                default: boolean;
+            };
             disabled: {
                 type: BooleanConstructor;
-                default: boolean; /**
-                 * Enable/disable direct editing of the value.
-                 */
-            }; /**
-             * Enable/disable direct editing of the value.
-             */
+                default: boolean;
+            };
         }>, {
             sanitizedAttributes: import("vue").ComputedRef<{
                 [x: string]: unknown;
@@ -1013,25 +1004,15 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             color: {
                 type: () => NeonFunctionalColor;
                 default: null;
-            }; /**
-             * Placeholder text to display in the input
-             */
+            };
             inverse: {
                 type: BooleanConstructor;
-                default: boolean; /**
-                 * Whether the component is disabled.
-                 */
-            }; /**
-             * Whether the component is disabled.
-             */
+                default: boolean;
+            };
             disabled: {
                 type: BooleanConstructor;
-                default: boolean; /**
-                 * Enable/disable direct editing of the value.
-                 */
-            }; /**
-             * Enable/disable direct editing of the value.
-             */
+                default: boolean;
+            };
         }>> & Readonly<{}>, {
             disabled: boolean;
             color: NeonFunctionalColor;

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

package/src/sass/color-variables.scss

@@ -59,6 +59,17 @@
   --neon-color-brand-d4: rgb(var(--neon-rgb-brand-d4));
   --neon-color-brand-d5: rgb(var(--neon-rgb-brand-d5));
 
+  --neon-color-accent-l5: rgb(var(--neon-rgb-accent-l5));
+  --neon-color-accent-l4: rgb(var(--neon-rgb-accent-l4));
+  --neon-color-accent-l3: rgb(var(--neon-rgb-accent-l3));
+  --neon-color-accent-l2: rgb(var(--neon-rgb-accent-l2));
+  --neon-color-accent-l1: rgb(var(--neon-rgb-accent-l1));
+  --neon-color-accent-d1: rgb(var(--neon-rgb-accent-d1));
+  --neon-color-accent-d2: rgb(var(--neon-rgb-accent-d2));
+  --neon-color-accent-d3: rgb(var(--neon-rgb-accent-d3));
+  --neon-color-accent-d4: rgb(var(--neon-rgb-accent-d4));
+  --neon-color-accent-d5: rgb(var(--neon-rgb-accent-d5));
+
   --neon-color-primary-l5: rgb(var(--neon-rgb-primary-l5));
   --neon-color-primary-l4: rgb(var(--neon-rgb-primary-l4));
   --neon-color-primary-l3: rgb(var(--neon-rgb-primary-l3));

package/src/sass/components/_button.scss

@@ -105,6 +105,7 @@
 
 @mixin button-small {
   height: var(--neon-size-s);
+  min-height: var(--neon-size-s);
   font-size: var(--neon-font-size-s);
   line-height: var(--neon-line-height-one);
   padding: 0 calc(0.75 * (var(--neon-size-s) - var(--neon-font-size-s)));
@@ -131,6 +132,7 @@
 
 @mixin button-medium {
   height: var(--neon-size-m);
+  min-height: var(--neon-size-m);
   font-size: var(--neon-font-size-m);
   line-height: var(--neon-line-height-one);
   padding: 0 calc(0.75 * (var(--neon-size-m) - var(--neon-font-size-m)));
@@ -157,6 +159,7 @@
 
 @mixin button-large {
   height: var(--neon-size-l);
+  min-height: var(--neon-size-l);
   font-size: var(--neon-font-size-m);
   line-height: var(--neon-line-height-one);
   padding: 0 calc(0.75 * (var(--neon-size-l) - var(--neon-font-size-m)));
@@ -191,7 +194,7 @@
     margin-right: 0;
     cursor: pointer;
     text-decoration: none;
-    font-family: var(--neon-font-family-body);
+    font-family: var(--neon-font-family-button);
 
     &--s {
       @include button-small;

package/src/sass/components/_date-picker.scss

@@ -21,6 +21,8 @@
       width: 100%;
 
       &__button .neon-button__label {
+        --neon-text-transform-button: none;
+        --neon-font-family-button: var(--neon-font-family-body);
         font-variant: tabular-nums;
       }
     }

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

@@ -60,6 +60,10 @@
           max-width: 100%;
         }
       }
+
+      .neon-button + .neon-button {
+        border-left: var(--neon-border-width) var(--neon-border-style) var(--neon-color-inverse);
+      }
     }
 
     &.neon-field-group--internal {
@@ -146,8 +150,11 @@
     }
 
     .neon-button {
-      margin-left: calc(-1 * var(--neon-border-width));
       z-index: var(--neon-z-index-above);
+
+      &:not(:first-child) {
+        margin-left: calc(-1 * var(--neon-border-width));
+      }
     }
 
     .neon-number {

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

@@ -23,6 +23,8 @@
       font-weight: var(--neon-font-weight-input-indicator);
       padding-left: var(--neon-space-12);
       padding-right: var(--neon-space-12);
+      white-space: nowrap;
+      line-height: 1;
     }
 
     &--s {

package/src/sass/components/_menu.scss

@@ -4,7 +4,7 @@
 @mixin neon-menu-size($size) {
   .neon-menu__item {
     height: 100%;
-    font-size: var(--neon-font-size-#{$size});
+    font-size: var(--neon-font-size-menu);
     align-items: center;
     display: flex;
 
@@ -22,13 +22,14 @@
         position: relative;
         gap: var(--neon-space-12);
         font-family: var(--neon-font-family-menu);
+        text-transform: var(--neon-text-transform-menu);
         font-weight: var(--neon-font-weight-menu);
-        @include svg.color-with-svg(var(--neon-color-text-tertiary));
+        @include svg.color-with-svg(var(--neon-color-menu));
 
         &,
         .neon-svg--stroke,
         .neon-svg--fill {
-          transition: color ease-in-out var(--neon-animation-speed-slow);
+          transition: color ease-in-out var(--neon-animation-speed-fastest);
         }
 
         &:before {
@@ -39,7 +40,7 @@
           width: 100%;
           opacity: 0;
           height: var(--neon-height-menu-indicator);
-          transition: opacity ease-in-out var(--neon-animation-speed-slow);
+          transition: opacity ease-in-out var(--neon-animation-speed-fastest);
         }
       }
     }
@@ -48,7 +49,7 @@
       .neon-link {
         &:hover {
           .neon-menu__link-container {
-            @include svg.color-with-svg(var(--neon-color-text-primary));
+            @include svg.color-with-svg(var(--neon-color-menu-active));
 
             &:before {
               opacity: 1;
@@ -59,13 +60,13 @@
 
         &:focus {
           .neon-menu__link-container {
-            @include svg.color-with-svg(var(--neon-color-text-primary));
+            @include svg.color-with-svg(var(--neon-color-menu-active));
           }
         }
 
         &.router-link-active {
           .neon-menu__link-container {
-            @include svg.color-with-svg(var(--neon-color-text-primary));
+            @include svg.color-with-svg(var(--neon-color-menu-active));
 
             &:before {
               opacity: 1;
@@ -182,7 +183,8 @@
     }
 
     &__responsive-menu {
-      font-family: var(--neon-font-family-heading);
+      font-family: var(--neon-font-family-menu);
+      text-transform: var(--neon-text-transform-menu);
 
       &.neon-menu__responsive-menu:not(:first-child) {
         margin-left: calc(5 * var(--neon-base-space));
@@ -213,7 +215,8 @@
         &__label {
           display: flex;
           align-items: center;
-          font-family: var(--neon-font-family-heading);
+          font-family: var(--neon-font-family-menu);
+          text-transform: var(--neon-text-transform-menu);
         }
       }
 
@@ -225,21 +228,25 @@
       }
 
       .neon-dropdown .neon-dropdown__button {
-        font-family: var(--neon-font-family-heading);
+        font-family: var(--neon-font-family-menu);
+        text-transform: var(--neon-text-transform-menu);
         font-weight: var(--neon-font-weight-normal);
         letter-spacing: var(--neon-letter-spacing-m);
       }
     }
 
     &.neon-menu--s {
+      --neon-font-size-menu: var(--neon-font-size-menu-s);
       @include neon-menu-size('s');
     }
 
     &.neon-menu--m {
+      --neon-font-size-menu: var(--neon-font-size-menu-m);
       @include neon-menu-size('m');
     }
 
     &.neon-menu--l {
+      --neon-font-size-menu: var(--neon-font-size-menu-l);
       @include neon-menu-size('l');
     }
   }

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

@@ -26,12 +26,12 @@
           font-size: var(--neon-font-size-mobile-menu);
           line-height: var(--neon-line-height-mobile-menu);
           font-weight: var(--neon-font-weight-mobile-menu);
-          @include svg.color-with-svg(var(--neon-color-text-tertiary));
+          @include svg.color-with-svg(var(--neon-color-mobile-menu));
 
           &,
           .neon-svg--stroke,
           .neon-svg--fill {
-            transition: color ease-in-out var(--neon-animation-speed-slow);
+            transition: color ease-in-out var(--neon-animation-speed-fastest);
           }
 
           &:before {
@@ -42,7 +42,7 @@
             width: 100%;
             opacity: 0;
             height: var(--neon-height-mobile-menu-indicator);
-            transition: opacity ease-in-out var(--neon-animation-speed-slow);
+            transition: color ease-in-out var(--neon-animation-speed-fastest);
           }
         }
       }
@@ -51,7 +51,7 @@
         .neon-link {
           &:hover {
             .neon-mobile-menu__link-container {
-              @include svg.color-with-svg(var(--neon-color-text-primary));
+              @include svg.color-with-svg(var(--neon-color-mobile-menu-active));
 
               &:before {
                 opacity: 1;
@@ -61,13 +61,13 @@
 
           &:focus {
             .neon-mobile-menu__link-container {
-              @include svg.color-with-svg(var(--neon-color-text-primary));
+              @include svg.color-with-svg(var(--neon-color-mobile-menu-active));
             }
           }
 
           &.router-link-active {
             .neon-mobile-menu__link-container {
-              @include svg.color-with-svg(var(--neon-color-text-primary));
+              @include svg.color-with-svg(var(--neon-color-mobile-menu-active));
 
               &:before {
                 opacity: 1;