@aotearoan/neon 22.5.0 → 22.5.2

package/dist/src/components/user-input/selectable-card/NeonSelectableCard.d.ts

@@ -220,6 +220,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                 type: StringConstructor;
                 required: true;
             };
+            id: {
+                type: StringConstructor;
+                default: null;
+            };
             color: {
                 type: () => NeonFunctionalColor;
                 default: null;
@@ -233,15 +237,19 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                 default: boolean;
             };
         }>, {
-            attrs: {
+            sanitizedAttributes: import("vue").ComputedRef<{
                 [x: string]: unknown;
-            };
-            icon: import("vue").ComputedRef<string>;
+            }>;
+            icon: import("vue").ComputedRef<string | undefined>;
         }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
             name: {
                 type: StringConstructor;
                 required: true;
             };
+            id: {
+                type: StringConstructor;
+                default: null;
+            };
             color: {
                 type: () => NeonFunctionalColor;
                 default: null;
@@ -257,6 +265,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         }>> & Readonly<{}>, {
             disabled: boolean;
             color: NeonFunctionalColor;
+            id: string;
             inverse: boolean;
         }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
     }, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/src/components/user-input/switch/NeonSwitch.d.ts

@@ -145,11 +145,20 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             type: StringConstructor;
             required: true;
         };
+        id: {
+            type: StringConstructor;
+            default: null;
+        };
         color: {
             type: () => NeonFunctionalColor;
             default: null;
         };
         inverse: {
+            /**
+             * Emitted when the switch is toggled checked or unchecked.
+             *
+             * @type {boolean} The checked state of the switch.
+             */
             type: BooleanConstructor;
             default: boolean;
         };
@@ -158,20 +167,29 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             default: boolean;
         };
     }>, {
-        attrs: {
+        sanitizedAttributes: import("vue").ComputedRef<{
             [x: string]: unknown;
-        };
-        icon: import("vue").ComputedRef<string>;
+        }>;
+        icon: import("vue").ComputedRef<string | undefined>;
     }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
         name: {
             type: StringConstructor;
             required: true;
         };
+        id: {
+            type: StringConstructor;
+            default: null;
+        };
         color: {
             type: () => NeonFunctionalColor;
             default: null;
         };
         inverse: {
+            /**
+             * Emitted when the switch is toggled checked or unchecked.
+             *
+             * @type {boolean} The checked state of the switch.
+             */
             type: BooleanConstructor;
             default: boolean;
         };
@@ -182,6 +200,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     }>> & Readonly<{}>, {
         disabled: boolean;
         color: NeonFunctionalColor;
+        id: string;
         inverse: boolean;
     }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 }, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/src/components/user-input/toggle/NeonToggle.d.ts

@@ -144,48 +144,44 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             type: StringConstructor;
             required: true;
         };
+        id: {
+            type: StringConstructor;
+            default: null;
+        };
         color: {
             type: () => NeonFunctionalColor;
             default: null;
         };
         inverse: {
             type: BooleanConstructor;
-            default: boolean; /**
-             * Emitted when the selected value changes.
-             * @type {string} The key of the selected model item.
-             */
-        }; /**
-         * Emitted when the selected value changes.
-         * @type {string} The key of the selected model item.
-         */
+            default: boolean;
+        };
         disabled: {
             type: BooleanConstructor;
             default: boolean;
         };
     }>, {
-        attrs: {
+        sanitizedAttributes: import("vue").ComputedRef<{
             [x: string]: unknown;
-        };
-        icon: import("vue").ComputedRef<string>;
+        }>;
+        icon: import("vue").ComputedRef<string | undefined>;
     }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
         name: {
             type: StringConstructor;
             required: true;
         };
+        id: {
+            type: StringConstructor;
+            default: null;
+        };
         color: {
             type: () => NeonFunctionalColor;
             default: null;
         };
         inverse: {
             type: BooleanConstructor;
-            default: boolean; /**
-             * Emitted when the selected value changes.
-             * @type {string} The key of the selected model item.
-             */
-        }; /**
-         * Emitted when the selected value changes.
-         * @type {string} The key of the selected model item.
-         */
+            default: boolean;
+        };
         disabled: {
             type: BooleanConstructor;
             default: boolean;
@@ -193,6 +189,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     }>> & Readonly<{}>, {
         disabled: boolean;
         color: NeonFunctionalColor;
+        id: string;
         inverse: boolean;
     }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 }, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/src/components/user-input/toggle-chip/NeonToggleChip.d.ts

@@ -111,6 +111,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             type: StringConstructor;
             required: true;
         };
+        id: {
+            type: StringConstructor;
+            default: null;
+        };
         color: {
             type: () => NeonFunctionalColor;
             default: null;
@@ -124,15 +128,19 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             default: boolean;
         };
     }>, {
-        attrs: {
+        sanitizedAttributes: import("vue").ComputedRef<{
             [x: string]: unknown;
-        };
-        icon: import("vue").ComputedRef<string>;
+        }>;
+        icon: import("vue").ComputedRef<string | undefined>;
     }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
         name: {
             type: StringConstructor;
             required: true;
         };
+        id: {
+            type: StringConstructor;
+            default: null;
+        };
         color: {
             type: () => NeonFunctionalColor;
             default: null;
@@ -148,6 +156,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     }>> & Readonly<{}>, {
         disabled: boolean;
         color: NeonFunctionalColor;
+        id: string;
         inverse: boolean;
     }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 }, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

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

package/src/sass/components/_field.scss

@@ -10,11 +10,19 @@ $message-height: calc(var(--neon-font-size-s) * var(--neon-line-height-ratio));
     &__label-wrapper {
       display: inline-flex;
       align-items: center;
+      justify-content: space-between;
+      width: 100%;
       margin-bottom: var(--neon-space-4);
       gap: var(--neon-space-6);
       @include typography.label;
     }
 
+    &__optional {
+      font-size: var(--neon-font-size-s);
+      color: var(--neon-color-text-tertiary);
+      user-select: none;
+    }
+
     &.neon-field--disabled {
       cursor: not-allowed;
 

package/src/sass/components/_footer.scss

@@ -12,24 +12,32 @@
 
     &__container {
       display: flex;
+      flex-direction: row;
       justify-content: center;
       width: 100%;
       max-width: calc(var(--neon-max-width-page) - 2 * var(--neon-gutter-desktop));
       line-height: var(--neon-line-height-one);
+      margin-left: auto;
+      margin-right: auto;
 
       @include responsive.responsive(larger-than-tablet) {
         font-size: var(--neon-font-size-m);
         height: var(--neon-footer-height-desktop);
+        padding: 0 var(--neon-gutter-desktop);
+        max-width: var(--neon-max-width-page);
       }
 
       @include responsive.responsive(tablet) {
         font-size: var(--neon-font-size-s);
         height: var(--neon-footer-height-tablet);
+        padding: 0 var(--neon-gutter-tablet);
+        max-width: 100vw;
       }
 
       @include responsive.responsive(mobile-large) {
         font-size: var(--neon-font-size-s);
         height: var(--neon-footer-height-mobile);
+        padding: 0 var(--neon-gutter-mobile);
       }
     }
   }

package/src/sass/components/_image-carousel.scss

@@ -86,23 +86,24 @@
     }
 
     .neon-image-carousel__nav-item {
-      width: 16rem;
-      height: 16rem;
+      width: 12rem;
+      height: 12rem;
       justify-content: center;
       align-items: center;
       cursor: pointer;
 
       &-indicator {
-        width: 8rem;
-        height: 8rem;
+        width: 10rem;
+        height: 10rem;
         border-radius: 50%;
         border: var(--neon-border);
-        border-color: var(--neon-color-high-contrast);
+        border-color: var(--neon-color-image-carousel-nav-indicator);
       }
 
-      &--active {
+      &--active,
+      &:hover {
         .neon-image-carousel__nav-item-indicator {
-          background-color: var(--neon-color-high-contrast);
+          background-color: var(--neon-color-image-carousel-nav-indicator);
         }
 
         margin-left: var(--neon-image-carousel-swipe-distance);
@@ -204,12 +205,13 @@
         &-indicator {
           width: 12rem;
           height: 12rem;
-          border-color: var(--neon-color-image-carousel-expanded-button);
+          border-color: var(--neon-color-image-carousel-expanded-nav-indicator);
         }
 
-        &--active {
+        &--active,
+        &:hover {
           .neon-image-carousel__nav-item-indicator {
-            background-color: var(--neon-color-image-carousel-expanded-button);
+            background-color: var(--neon-color-image-carousel-expanded-nav-indicator);
           }
         }
       }

package/src/sass/components/_input.scss

@@ -149,13 +149,13 @@
       }
 
       &-counter {
-        align-self: flex-end;
+        align-self: flex-start;
         user-select: none;
-        font-size: var(--neon-font-size-xs);
+        font-size: var(--neon-font-size-s);
         font-weight: var(--neon-font-weight-normal);
         letter-spacing: var(--neon-letter-spacing-s);
         color: var(--neon-color-text-tertiary);
-        margin-bottom: var(--neon-space-4);
+        margin-top: var(--neon-space-4);
       }
     }
 

package/src/sass/components/_menu.scss

@@ -23,14 +23,18 @@
         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);
+        @include svg.color-with-svg(var(--neon-color-text-tertiary));
+
+        &,
+        .neon-svg--stroke,
+        .neon-svg--fill {
+          transition: color ease-in-out var(--neon-animation-speed-slow);
+        }
 
         &:before {
           content: '';
           position: absolute;
-          bottom: 0;
+          bottom: calc(-1 * var(--neon-border-width-top-nav));
           left: 0;
           width: 100%;
           opacity: 0;
@@ -38,30 +42,34 @@
           transition: opacity ease-in-out var(--neon-animation-speed-slow);
         }
       }
+    }
 
-      &:hover {
-        .neon-menu__link-container {
-          opacity: 1;
+    &:not(.neon-menu__item--disabled) {
+      .neon-link {
+        &:hover {
+          .neon-menu__link-container {
+            @include svg.color-with-svg(var(--neon-color-text-primary));
 
-          &:before {
-            opacity: 1;
+            &:before {
+              opacity: 1;
+            }
           }
-        }
 
-      }
+        }
 
-      &:focus {
-        .neon-menu__link-container {
-          opacity: 1;
+        &:focus {
+          .neon-menu__link-container {
+            @include svg.color-with-svg(var(--neon-color-text-primary));
+          }
         }
-      }
 
-      &.router-link-active {
-        .neon-menu__link-container {
-          opacity: 1;
+        &.router-link-active {
+          .neon-menu__link-container {
+            @include svg.color-with-svg(var(--neon-color-text-primary));
 
-          &:before {
-            opacity: 1;
+            &:before {
+              opacity: 1;
+            }
           }
         }
       }
@@ -174,10 +182,10 @@
     }
 
     &__responsive-menu {
-      font-family: var(---neon-font-family-heading);
+      font-family: var(--neon-font-family-heading);
 
       &.neon-menu__responsive-menu:not(:first-child) {
-        margin-left: var(--neon-space-20);
+        margin-left: calc(5 * var(--neon-base-space));
       }
 
       &.neon-menu__responsive-menu--hidden {
@@ -205,7 +213,7 @@
         &__label {
           display: flex;
           align-items: center;
-          font-family: var(---neon-font-family-heading);
+          font-family: var(--neon-font-family-heading);
         }
       }
 
@@ -217,7 +225,7 @@
       }
 
       .neon-dropdown .neon-dropdown__button {
-        font-family: var(---neon-font-family-heading);
+        font-family: var(--neon-font-family-heading);
         font-weight: var(--neon-font-weight-normal);
         letter-spacing: var(--neon-letter-spacing-m);
       }

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

@@ -26,14 +26,18 @@
           font-size: var(--neon-font-size-mobile-menu);
           line-height: var(--neon-line-height-mobile-menu);
           font-weight: var(--neon-font-weight-mobile-menu);
-          opacity: var(--neon-opacity-mobile-menu-inactive);
-          transition: opacity ease-in-out var(--neon-animation-speed-slow);
-          @include svg.color-with-svg(var(--neon-color-text-primary));
+          @include svg.color-with-svg(var(--neon-color-text-tertiary));
+
+          &,
+          .neon-svg--stroke,
+          .neon-svg--fill {
+            transition: color ease-in-out var(--neon-animation-speed-slow);
+          }
 
           &:before {
             content: '';
             position: absolute;
-            top: 0;
+            top: calc(-1 * var(--neon-height-mobile-menu-indicator));
             left: 0;
             width: 100%;
             opacity: 0;
@@ -41,29 +45,33 @@
             transition: opacity ease-in-out var(--neon-animation-speed-slow);
           }
         }
+      }
 
-        &:hover {
-          .neon-mobile-menu__link-container {
-            opacity: 1;
+      &:not(.neon-mobile-menu__item--disabled) {
+        .neon-link {
+          &:hover {
+            .neon-mobile-menu__link-container {
+              @include svg.color-with-svg(var(--neon-color-text-primary));
 
-            &:before {
-              opacity: 1;
+              &:before {
+                opacity: 1;
+              }
             }
           }
-        }
 
-        &:focus {
-          .neon-mobile-menu__link-container {
-            opacity: 1;
+          &:focus {
+            .neon-mobile-menu__link-container {
+              @include svg.color-with-svg(var(--neon-color-text-primary));
+            }
           }
-        }
 
-        &.router-link-active {
-          .neon-mobile-menu__link-container {
-            opacity: 1;
+          &.router-link-active {
+            .neon-mobile-menu__link-container {
+              @include svg.color-with-svg(var(--neon-color-text-primary));
 
-            &:before {
-              opacity: 1;
+              &:before {
+                opacity: 1;
+              }
             }
           }
         }

package/src/sass/components/_note.scss

@@ -1,5 +1,4 @@
 @use '../includes/palettes';
-@use '../includes/layout';
 @use '../includes/responsive';
 
 @mixin note {
@@ -75,7 +74,7 @@
     }
 
     &__container {
-      padding: var(--neon-space-12) var(--neon-space-16) var(--neon-space-12) var(--neon-space-20);
+      padding: var(--neon-padding-note);
       width: 100%;
       justify-items: flex-start;
       align-items: flex-start;
@@ -114,7 +113,7 @@
     max-width: var(--neon-max-width-note);
     margin: 0;
     border-radius: 0 var(--neon-border-radius) var(--neon-border-radius) 0;
-    padding: var(--neon-space-12) var(--neon-space-16) var(--neon-space-12) var(--neon-space-20);
+    padding: var(--neon-padding-note);
     color: var(--neon-color-note);
     background-color: var(--neon-background-color-note);
     border-left: var(--neon-border-width-note) var(--neon-border-style) var(--neon-color-primary);

package/src/sass/components/_page.scss

@@ -6,21 +6,22 @@
     position: relative;
     left: 0;
     width: 100vw;
+    @include layout.min-height(100);
 
     &--with-top-nav .neon-page__container {
       @include responsive.responsive(larger-than-tablet) {
         padding-top: var(--neon-top-nav-height-desktop);
-        @include layout.min-height(100, 'var(--neon-top-nav-height-desktop)');
+        @include layout.min-height(100, 'var(--neon-footer-height-desktop) + var(--neon-border-width-footer)');
       }
 
       @include responsive.responsive(tablet) {
         padding-top: var(--neon-top-nav-height-tablet);
-        @include layout.min-height(100, 'var(--neon-top-nav-height-tablet)');
+        @include layout.min-height(100, 'var(--neon-footer-height-tablet) + var(--neon-border-width-footer)');
       }
 
       @include responsive.responsive(mobile-large) {
         padding-top: var(--neon-top-nav-height-mobile);
-        @include layout.min-height(100, 'var(--neon-top-nav-height-mobile)');
+        @include layout.min-height(100, 'var(--neon-footer-height-mobile) + var(--neon-border-width-footer)');
       }
     }
 
@@ -57,7 +58,7 @@
 
     &--center {
       .neon-page__container {
-        margin: auto;
+        margin: 0 auto;
       }
     }
   }

package/src/sass/components/_tooltip.scss

@@ -58,7 +58,7 @@
     .neon-tooltip__content {
       max-width: var(--neon-tooltip-max-width);
       max-height: var(--neon-tooltip-max-height);
-      margin: auto;
+      margin: 0 auto;
       position: relative;
       border-radius: var(--neon-border-radius);
       padding: var(--neon-space-4) var(--neon-space-8);

package/src/sass/components/_top-nav.scss

@@ -10,7 +10,7 @@
     display: flex;
     z-index: var(--neon-z-index-above-3);
     background-color: var(--neon-background-color-top-nav);
-    border-bottom: var(--neon-border-width) var(--neon-border-style) var(--neon-border-color-top-nav);
+    border-bottom: var(--neon-border-width-top-nav) var(--neon-border-style) var(--neon-border-color-top-nav);
 
     &__container {
       @include responsive.responsive(larger-than-tablet) {

package/src/sass/global/_base-html.scss

@@ -133,7 +133,7 @@
       transition: opacity ease-in-out var(--neon-animation-speed-fast);
     }
 
-    &-enter,
+    &-enter-from,
     &-leave-to {
       opacity: 0;
     }

package/src/sass/includes/_dependencies.scss

@@ -122,7 +122,7 @@
           NeonStepper: [NeonIcon],
           NeonSelectableCard: [NeonCard, NeonCardHeader, NeonSwitch, NeonIcon],
           NeonDatePicker: [NeonDropdown, NeonBadge, NeonButton, NeonExpansionIndicator, NeonIcon, NeonLink, NeonInput],
-          NeonField: [NeonLabel, NeonIcon],
+          NeonField: [],
           NeonStack: [],
           NeonInline: [],
           NeonCardList: [NeonButton, NeonExpansionIndicator, NeonIcon, NeonLink, NeonCard, NeonCardBody, NeonInline, NeonStack],

package/src/sass/includes/_typography.scss

@@ -49,8 +49,10 @@
 
 @mixin label {
   color: var(--neon-color-label);
-  font-size: var(--neon-font-size-xs);
-  font-weight: var(--neon-font-weight-semi-bold);
+  font-size: var(--neon-font-size-label);
+  line-height: var(--neon-line-height-ratio);
+  font-weight: var(--neon-font-weight-label);
   letter-spacing: var(--neon-letter-spacing-s);
   user-select: none;
+  white-space: nowrap;
 }