@aotearoan/neon 23.0.2 → 23.2.0

package/dist/src/neon.d.ts

@@ -3,6 +3,7 @@ export { default as NeonAlert } from './components/feedback/alert/NeonAlert.vue'
 export { default as NeonAlertContainer } from './components/feedback/alert/container/NeonAlertContainer.vue';
 export { default as NeonAnchor } from './components/navigation/anchor/NeonAnchor.vue';
 export { default as NeonBadge } from './components/presentation/badge/NeonBadge.vue';
+export { default as NeonBanner } from './components/feedback/banner/NeonBanner.vue';
 export { default as NeonButton } from './components/user-input/button/NeonButton.vue';
 export { default as NeonCard } from './components/layout/card/NeonCard.vue';
 export { default as NeonCardBody } from './components/layout/card/body/NeonCardBody.vue';
@@ -98,6 +99,8 @@ export type { NeonAlertAction } from './common/models/NeonAlertAction';
 export type { NeonAlertMessage } from './common/models/NeonAlertMessage';
 export type { NeonAlertModel } from './components/feedback/alert/NeonAlertModel';
 export type { NeonAvailableSpace } from './common/models/NeonAvailableSpace';
+export type { NeonBannerMessage } from './common/models/NeonBannerMessage';
+export type { NeonBannerModel } from './components/feedback/banner/NeonBannerModel';
 export type { NeonCardListModel } from './common/models/NeonCardListModel';
 export type { NeonCarouselImage } from './common/models/NeonCarouselImage';
 export type { NeonContrastAccessibility } from './common/models/NeonContrastAccessibility';
@@ -121,6 +124,7 @@ export type { NeonToggleModel } from './common/models/NeonToggleModel';
 export type { NeonTreeMenuLinkModel } from './common/models/NeonTreeMenuLinkModel';
 export type { NeonTreeMenuSectionModel } from './common/models/NeonTreeMenuSectionModel';
 export { NeonAlertService } from './common/utils/NeonAlertService';
+export { NeonBannerService } from './common/utils/NeonBannerService';
 export { NeonClipboardService, NeonClipboardSupport } from './common/utils/NeonClipboardService';
 export { NeonClosableUtils } from './common/utils/NeonClosableUtils';
 export { NeonDateUtils } from './common/utils/NeonDateUtils';

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

package/src/sass/components/_banner.scss

@@ -0,0 +1,26 @@
+@use '../includes/responsive';
+
+@mixin banner {
+  .neon-banner {
+    z-index: var(--neon-z-index-top);
+
+    &__action {
+      margin-left: auto;
+    }
+
+    &__message {
+      --neon-font-weight-strong: var(--neon-font-weight-semi-bold);
+    }
+
+    .neon-note__content {
+      width: 100%;
+      max-width: calc(var(--neon-max-width-page));
+      display: flex;
+      justify-content: space-between;
+      flex-direction: row;
+      align-items: center;
+      gap: var(--neon-space-24);
+      padding: 0 var(--neon-gutter);
+    }
+  }
+}

package/src/sass/components/_footer.scss

@@ -8,45 +8,27 @@
     background-color: var(--neon-background-color-footer);
     border-top: var(--neon-border-top-footer);
     color: var(--neon-color-neutral);
-    width: 100vw;
+    margin: 0 calc(-1 * var(--neon-gutter));
 
     &__container {
       display: flex;
       flex-direction: row;
       justify-content: center;
       width: 100%;
-      max-width: calc(var(--neon-max-width-page) - 2 * var(--neon-gutter-desktop));
+      max-width: 100%;
       line-height: var(--neon-line-height-one);
-      margin-left: auto;
-      margin-right: auto;
+      height: var(--neon-footer-height);
+      padding: 0 var(--neon-gutter);
 
       @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);
-      }
-    }
-  }
-
-  .neon-page--with-side-nav .neon-footer {
-    @include layout.side-nav-offset;
-
-    .neon-footer__container {
-      max-width: calc(var(--neon-max-width-page) - var(--neon-side-nav-width) - 2 * var(--neon-gutter-desktop));
     }
   }
 }

package/src/sass/components/_grid.scss

@@ -5,22 +5,12 @@
   .neon-grid {
     width: 100%;
     max-width: 100%;
-    @include layout.min-height(100, 'var(--neon-footer-height-desktop)');
+    @include layout.min-height(100, 'var(--neon-footer-height) + var(--neon-border-width-footer)');
     display: grid;
-
-    @include responsive.responsive(larger-than-tablet) {
-      padding: var(--neon-gutter-desktop) 0;
-      gap: var(--neon-gutter-desktop);
-    }
-
-    @include responsive.responsive(tablet) {
-      padding: var(--neon-gutter-tablet) 0;
-      gap: var(--neon-gutter-tablet);
-    }
+    padding: var(--neon-gutter);
+    gap: var(--neon-gutter);
 
     @include responsive.responsive(mobile-large) {
-      padding: var(--neon-gutter-mobile) 0;
-      gap: var(--neon-gutter-mobile);
       display: flex;
       flex-direction: column;
     }
@@ -49,22 +39,18 @@
     }
   }
 
-  .neon-page--with-side-nav .neon-grid {
-    @include layout.side-nav-offset;
-  }
-
   .neon-page--with-top-nav .neon-page__container {
     .neon-grid {
       @include responsive.responsive(larger-than-tablet) {
-        @include layout.min-height(100, 'var(--neon-top-nav-height-desktop) + var(--neon-footer-height-desktop)');
+        @include layout.min-height(100, 'var(--neon-top-nav-height) + var(--neon-border-width-top-nav) + var(--neon-footer-height)');
       }
 
       @include responsive.responsive(tablet) {
-        @include layout.min-height(100, 'var(--neon-top-nav-height-tablet) + var(--neon-footer-height-tablet)');
+        @include layout.min-height(100, 'var(--neon-top-nav-height) + var(--neon-border-width-top-nav) + var(--neon-footer-height)');
       }
 
       @include responsive.responsive(mobile-large) {
-        @include layout.min-height(100, 'var(--neon-top-nav-height-mobile) + var(--neon-footer-height-mobile)');
+        @include layout.min-height(100, 'var(--neon-top-nav-height) + var(--neon-border-width-top-nav) + var(--neon-footer-height)');
       }
     }
   }

package/src/sass/components/_link.scss

@@ -36,7 +36,7 @@
     }
   }
 
-  &.neon-link--no-style {
+  &.neon-link--no-style:not(.neon-button) {
     text-decoration: none;
 
     &,

package/src/sass/components/_page.scss

@@ -11,20 +11,24 @@
     &--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-footer-height-desktop) + var(--neon-border-width-footer)');
+        @include layout.min-height(100, 'var(--neon-top-nav-height) + var(--neon-border-width-top-nav) + var(--neon-footer-height) + var(--neon-border-width-footer)');
       }
 
       @include responsive.responsive(tablet) {
         padding-top: var(--neon-top-nav-height-tablet);
-        @include layout.min-height(100, 'var(--neon-footer-height-tablet) + var(--neon-border-width-footer)');
+        @include layout.min-height(100, 'var(--neon-top-nav-height) + var(--neon-border-width-top-nav) + var(--neon-footer-height) + 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-footer-height-mobile) + var(--neon-border-width-footer)');
+        @include layout.min-height(100, 'var(--neon-top-nav-height) + var(--neon-border-width-top-nav) + var(--neon-footer-height) + var(--neon-border-width-footer)');
       }
     }
 
+    .neon-page__content-wrapper {
+      flex-direction: row;
+    }
+
     .neon-page__container {
       @include responsive.responsive(larger-than-tablet) {
         padding-left: var(--neon-gutter-desktop);
@@ -48,9 +52,31 @@
 
     &--left {
       &.neon-page--with-side-nav {
-        .neon-page__container {
-          @include responsive.responsive(larger-than-tablet) {
+        @include responsive.responsive(larger-than-tablet) {
+          .neon-page__container {
             padding-left: 0;
+            padding-right: 0;
+          }
+
+          .neon-footer {
+            margin: 0;
+            position: relative;
+            border-top: none;
+
+            &__container {
+              z-index: var(--neon-z-index-above);
+            }
+
+            &:before {
+              content: '';
+              position: absolute;
+              top: 0;
+              left: 0;
+              height: var(--neon-footer-height);
+              width: calc(100vw - var(--neon-side-nav-width));
+              border-top: var(--neon-border-color) var(--neon-border-style) var(--neon-border-width-footer);
+              background-color: var(--neon-background-color-footer);
+            }
           }
         }
       }

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

@@ -4,14 +4,14 @@
 
 @mixin side-nav {
   .neon-side-nav {
-    position: fixed;
-    bottom: 0;
-    left: 0;
+    position: sticky;
+    top: 0;
     background-color: var(--neon-background-color-side-nav);
     border-right: var(--neon-border);
 
     @include responsive.responsive(larger-than-tablet) {
       width: var(--neon-side-nav-width);
+      min-width: var(--neon-side-nav-width);
       @include layout.min-height(100);
       @include layout.height(100);
     }

package/src/sass/components/_tabs.scss

@@ -137,9 +137,9 @@
 
     .neon-tabs__menu-items--full-width-mobile {
       @include responsive.responsive(mobile-large) {
-        margin: 0 calc(-1 * var(--neon-gutter-mobile));
-        max-width: calc(100% + 2 * var(--neon-gutter-mobile));
-        width: calc(100% + 2 * var(--neon-gutter-mobile));
+        margin: 0 calc(-2 * var(--neon-gutter-mobile));
+        max-width: calc(100% + 4 * var(--neon-gutter-mobile));
+        width: calc(100% + 4 * var(--neon-gutter-mobile));
       }
     }
 

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

@@ -4,7 +4,7 @@
 @mixin top-nav {
   .neon-top-nav {
     width: 100%;
-    position: fixed;
+    position: sticky;
     top: 0;
     left: 0;
     display: flex;

package/src/sass/components/components.scss

@@ -57,3 +57,4 @@
 @forward './swiper';
 @forward './mobile-menu';
 @forward './page-container';
+@forward './banner';

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

@@ -186,4 +186,24 @@
   .neon-color-error {
     color: var(--neon-color-error);
   }
+
+  .neon-background-color-disabled-background {
+    background-color: var(--neon-color-disabled-background);
+  }
+
+  .neon-color-disabled-background {
+    color: var(--neon-color-disabled-background);
+  }
+
+  .neon-border-color-disabled-border {
+    border-color: var(--neon-color-disabled-border);
+  }
+
+  .neon-color-disabled-border {
+    color: var(--neon-color-disabled-border);
+  }
+
+  .neon-color-disabled-text {
+    color: var(--neon-color-disabled-text);
+  }
 }

package/src/sass/includes/_dependencies.scss

@@ -5,11 +5,7 @@
   $neon-component-dependencies: (
           NeonActionMenu: [NeonLink,
           NeonIcon],
-          NeonAlert: [NeonIcon,
-          NeonLink,
-          NeonToastContainer,
-          NeonIcon,
-          NeonLink],
+          NeonAlert: [NeonToastContainer, NeonIcon, NeonLink],
           NeonAnchor: [],
           NeonBadge: [NeonIcon, NeonFile, NeonButton, NeonInput, NeonList, NeonExpansionIndicator, NeonIcon, NeonLink],
           NeonButton: [NeonExpansionIndicator,
@@ -77,7 +73,6 @@
           NeonNote: [NeonButton,
   NeonIcon,
   NeonExpansionIndicator,
-  NeonIcon,
   NeonLink, NeonInline, NeonStack],
           NeonNotificationCounter: [],
           NeonNumber: [NeonButton,
@@ -87,7 +82,7 @@
   NeonIcon,
   NeonLink],
           NeonLinearProgress: [NeonIcon],
-          NeonPage: [],
+          NeonPage: [NeonBanner, NeonButton, NeonNote, NeonIcon, NeonLink, NeonExpansionIndicator, NeonAlert],
           NeonPassword: [NeonInput,
           NeonIcon],
           NeonRangeSlider: [NeonSlider],
@@ -130,6 +125,7 @@
           NeonSwiper: [],
           NeonMobileMenu: [NeonIcon, NeonLink],
           NeonPageContainer: [NeonIcon],
+          NeonBanner: [NeonButton, NeonNote, NeonIcon, NeonLink, NeonExpansionIndicator],
   );
 
   $neon-flattened-components: [];

package/src/sass/theme.scss

@@ -270,4 +270,8 @@ $neon-components: null !default;
   @if index($neon-flattened-components, NeonPageContainer) {
     @include components.page-container;
   }
+
+  @if index($neon-flattened-components, NeonBanner) {
+    @include components.banner;
+  }
 }

package/src/sass/variables.scss

@@ -199,12 +199,36 @@
   --neon-top-nav-height-desktop: calc(var(--neon-size-l) + var(--neon-space-32));
   --neon-border-width-top-nav: 1rem;
 
+  @include responsive.responsive(larger-than-tablet) {
+    --neon-top-nav-height: var(--neon-top-nav-height-desktop);
+  }
+
+  @include responsive.responsive(tablet) {
+    --neon-top-nav-height: var(--neon-top-nav-height-tablet);
+  }
+
+  @include responsive.responsive(mobile-large) {
+    --neon-top-nav-height: var(--neon-top-nav-height-mobile);
+  }
+
   /* footer */
   --neon-footer-height-mobile: calc(var(--neon-font-size-s) + var(--neon-space-32));
   --neon-footer-height-tablet: calc(var(--neon-font-size-s) + var(--neon-space-32));
   --neon-footer-height-desktop: calc(var(--neon-base-font-size) + var(--neon-space-48));
   --neon-border-width-footer: 1rem;
 
+  @include responsive.responsive(larger-than-tablet) {
+    --neon-footer-height: var(--neon-footer-height-desktop);
+  }
+
+  @include responsive.responsive(tablet) {
+    --neon-footer-height: var(--neon-footer-height-tablet);
+  }
+
+  @include responsive.responsive(mobile-large) {
+    --neon-footer-height: var(--neon-footer-height-mobile);
+  }
+
   /* side nav */
   --neon-side-nav-width: calc(80 * var(--neon-space-4));
 
@@ -312,7 +336,7 @@
   --neon-border-width-drawer: 0;
   --neon-border-radius-drawer: 16rem;
   --neon-height-drawer: auto;
-  --neon-width-drawer: --neon-side-nav-width;
+  --neon-width-drawer: var(--neon-side-nav-width);
 
   /* radio buttons */
   --neon-border-radius-radio-button: 50%;
@@ -615,7 +639,7 @@
     --neon-background-color-drawer: var(--neon-background-color-card);
 
     /* input */
-    --neon-color-input: var(--neon-color-text);
+    --neon-color-input: var(--neon-color-text-secondary);
     --neon-border-color-input: var(--neon-color-neutral-d2);
     --neon-background-color-input: rgba(var(--neon-rgb-neutral-d5), 0.5);
     --neon-color-placeholder: var(--neon-color-low-contrast-d3);
@@ -932,7 +956,7 @@
     --neon-color-radio-button-label: var(--neon-color-label);
 
     /* input */
-    --neon-color-input: var(--neon-color-text);
+    --neon-color-input: var(--neon-color-text-secondary);
     --neon-border-color-input: var(--neon-color-neutral-l3);
     --neon-background-color-input: var(--neon-color-high-contrast-l5);
     --neon-color-placeholder: var(--neon-color-low-contrast-l3);