@aotearoan/neon 28.5.0 → 28.6.0

package/dist/src/components/presentation/avatar/NeonAvatar.vue.d.ts

@@ -0,0 +1,2 @@
+export * from './NeonAvatar.js';
+export { default } from './NeonAvatar.js';

package/dist/src/model/layout/card-list/NeonCardListStyle.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Defines the style of card list to render
+ */
+export declare enum NeonCardListStyle {
+    /**
+     * Render the card list as a list of rows
+     */
+    List = "list",
+    /**
+     * Render the card list as a grid of items with a number of responsive columns.
+     */
+    Grid = "grid"
+}

package/dist/src/model/layout/card-list/NeonLoadOnDemandModel.d.ts

@@ -3,20 +3,16 @@
  */
 export interface NeonLoadOnDemandModel {
     /**
-     * The total item count of records including those not displayed. This is used to display the 'x' of 'y'
+     * The total item count of records including those not displayed. This is used to display the 'Showing x of y'
      * text.
      */
     total: number;
     /**
-     * override the default 'x of y' text.
+     * override the default 'Showing x of y' text.
      */
-    ofLabel?: string;
+    resultCountLabel?: string;
     /**
-     * override the 'Show more' text.
+     * override the 'Load more' text.
      */
     showMoreLabel?: string;
-    /**
-     * override the 'End of results' text.
-     */
-    endOfResultsLabel?: string;
 }

package/dist/src/model/presentation/badge/NeonBadgeSize.d.ts

@@ -12,5 +12,7 @@ export declare enum NeonBadgeSize {
     /** An extra large badge size, typically has a default of 64 rem. */
     ExtraLarge = "xl",
     /** An extra, extra large badge size, typically has a default of 80 rem. */
-    ExtraExtraLarge = "xxl"
+    ExtraExtraLarge = "xxl",
+    /** An extra, extra, extra large badge size, typically has a default of 288 rem. */
+    ExtraExtraExtraLarge = "xxxl"
 }

package/dist/src/neon.d.ts

@@ -2,8 +2,10 @@ export { default as NeonActionMenu } from './components/navigation/action-menu/N
 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 NeonAvatar } from './components/presentation/avatar/NeonAvatar.vue';
 export { default as NeonBadge } from './components/presentation/badge/NeonBadge.vue';
 export { default as NeonBanner } from './components/feedback/banner/NeonBanner.vue';
+export { default as NeonBasicLayout } from './components/layout/basic-layout/NeonBasicLayout.vue';
 export { default as NeonBreadcrumbs } from './components/navigation/breadcrumbs/NeonBreadcrumbs.vue';
 export { default as NeonButton } from './components/user-input/button/NeonButton.vue';
 export { default as NeonCard } from './components/layout/card/NeonCard.vue';
@@ -52,7 +54,6 @@ export { default as NeonNote } from './components/feedback/note/NeonNote.vue';
 export { default as NeonNotificationCounter } from './components/feedback/notification-counter/NeonNotificationCounter.vue';
 export { default as NeonNumber } from './components/user-input/number/NeonNumber.vue';
 export { default as NeonPage } from './components/layout/page/NeonPage.vue';
-export { default as NeonPageContainer } from './components/layout/page-container/NeonPageContainer.vue';
 export { default as NeonPagination } from './components/navigation/pagination/NeonPagination.vue';
 export { default as NeonPassword } from './components/user-input/password/NeonPassword.vue';
 export { default as NeonRangeSlider } from './components/user-input/range-slider/NeonRangeSlider.vue';
@@ -94,6 +95,7 @@ export { NeonButtonSize } from '@/model/user-input/button/NeonButtonSize';
 export { NeonButtonStyle } from '@/model/user-input/button/NeonButtonStyle';
 export { NeonButtonType } from '@/model/user-input/button/NeonButtonType';
 export type { NeonCardListModel } from '@/model/layout/card-list/NeonCardListModel';
+export { NeonCardListStyle } from './model/layout/card-list/NeonCardListStyle';
 export type { NeonCarouselImage } from '@/model/presentation/image-carousel/NeonCarouselImage';
 export { NeonChipAction } from '@/model/user-input/chip/NeonChipAction';
 export type { NeonContrastAccessibility } from '@/model/common/color/NeonContrastAccessibility';
@@ -159,6 +161,7 @@ export { NeonDialogService } from './utils/feedback/dialog/NeonDialogService';
 export { NeonDropdownPlacementUtils } from '@/utils/presentation/dropdown/NeonDropdownPlacementUtils';
 export { NeonEventBus } from '@/utils/common/event/NeonEventBus';
 export { fileToDataURL } from '@/utils/user-input/file/NeonFileUtils';
+export { NeonHttpUtils } from './utils/common/http/NeonHttpUtils';
 export { NeonIconRegistry } from '@/utils/common/icons/NeonIconRegistry';
 export { NeonJazziconUtils } from '@/utils/presentation/badge/NeonJazziconUtils';
 export { NeonModeUtils } from '@/utils/common/color/NeonModeUtils';

package/dist/src/utils/common/http/NeonHttpUtils.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Utilities for handling HTTP operations such as URL construction and parameter encoding.
+ */
+export declare class NeonHttpUtils {
+    /**
+     * Constructs a URL with query parameters by appending encoded query parameters to a base URL.
+     *
+     * @param baseUrl The base URL to which query parameters will be appended.
+     * @param params Object containing key-value pairs to be encoded as query parameters.
+     * Values can be primitives or arrays of primitives which will be joined by commas.
+     *
+     * @returns A URL with encoded query parameters appended. If there are no parameters, returns the base URL.
+     */
+    static urlWithQueryParams(baseUrl: string, params?: object): string;
+    /**
+     * Encodes an object of key value pairs to a query string
+     * @param params - object of key value pairs where the values must either be primitives or a list of primitives which
+     * will be joined by commas
+     *
+     * @returns An encoded query string without the leading '?'
+     */
+    static encodeObjectToHttpQueryParams(params?: object): string;
+}

package/dist/utils/common/http/NeonHttpUtils.cjs.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});class n{static urlWithQueryParams(r,t={}){const e=n.encodeObjectToHttpQueryParams(t);return e.length>0?`${r}?${e}`:r}static encodeObjectToHttpQueryParams(r={}){return Object.entries(r).filter(([,t])=>t!=null&&t!==""&&!(Array.isArray(t)&&t.length===0)).map(([t,e])=>Array.isArray(e)?`${encodeURIComponent(t)}=${e.map(o=>encodeURIComponent(o)).join(",")}`:`${encodeURIComponent(t)}=${encodeURIComponent(e)}`).join("&")}}exports.NeonHttpUtils=n;
+//# sourceMappingURL=NeonHttpUtils.cjs.js.map

package/dist/utils/common/http/NeonHttpUtils.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NeonHttpUtils.cjs.js","sources":["../../../../src/utils/common/http/NeonHttpUtils.ts"],"sourcesContent":["/**\n * Utilities for handling HTTP operations such as URL construction and parameter encoding.\n */\nexport class NeonHttpUtils {\n  /**\n   * Constructs a URL with query parameters by appending encoded query parameters to a base URL.\n   *\n   * @param baseUrl The base URL to which query parameters will be appended.\n   * @param params Object containing key-value pairs to be encoded as query parameters.\n   * Values can be primitives or arrays of primitives which will be joined by commas.\n   *\n   * @returns A URL with encoded query parameters appended. If there are no parameters, returns the base URL.\n   */\n  public static urlWithQueryParams(baseUrl: string, params: object = {}) {\n    const queryString = NeonHttpUtils.encodeObjectToHttpQueryParams(params);\n    return queryString.length > 0 ? `${baseUrl}?${queryString}` : baseUrl;\n  }\n\n  /**\n   * Encodes an object of key value pairs to a query string\n   * @param params - object of key value pairs where the values must either be primitives or a list of primitives which\n   * will be joined by commas\n   *\n   * @returns An encoded query string without the leading '?'\n   */\n  public static encodeObjectToHttpQueryParams(params: object = {}) {\n    return Object.entries(params)\n      .filter(\n        ([, value]) =>\n          value !== undefined && value !== null && value !== '' && !(Array.isArray(value) && value.length === 0),\n      )\n      .map(([key, value]) => {\n        if (Array.isArray(value)) {\n          return `${encodeURIComponent(key)}=${value.map((v) => encodeURIComponent(v)).join(',')}`;\n        }\n\n        return `${encodeURIComponent(key)}=${encodeURIComponent(value)}`;\n      })\n      .join('&');\n  }\n}\n"],"names":["NeonHttpUtils","baseUrl","params","queryString","value","key","v"],"mappings":"gFAGO,MAAMA,CAAc,CAUzB,OAAc,mBAAmBC,EAAiBC,EAAiB,GAAI,CACrE,MAAMC,EAAcH,EAAc,8BAA8BE,CAAM,EACtE,OAAOC,EAAY,OAAS,EAAI,GAAGF,CAAO,IAAIE,CAAW,GAAKF,CAChE,CASA,OAAc,8BAA8BC,EAAiB,GAAI,CAC/D,OAAO,OAAO,QAAQA,CAAM,EACzB,OACC,CAAC,CAAA,CAAGE,CAAK,IACgBA,GAAU,MAAQA,IAAU,IAAM,EAAE,MAAM,QAAQA,CAAK,GAAKA,EAAM,SAAW,EAAA,EAEvG,IAAI,CAAC,CAACC,EAAKD,CAAK,IACX,MAAM,QAAQA,CAAK,EACd,GAAG,mBAAmBC,CAAG,CAAC,IAAID,EAAM,IAAKE,GAAM,mBAAmBA,CAAC,CAAC,EAAE,KAAK,GAAG,CAAC,GAGjF,GAAG,mBAAmBD,CAAG,CAAC,IAAI,mBAAmBD,CAAK,CAAC,EAC/D,EACA,KAAK,GAAG,CACb,CACF"}

package/dist/utils/common/http/NeonHttpUtils.es.js

@@ -0,0 +1,31 @@
+class e {
+  /**
+   * Constructs a URL with query parameters by appending encoded query parameters to a base URL.
+   *
+   * @param baseUrl The base URL to which query parameters will be appended.
+   * @param params Object containing key-value pairs to be encoded as query parameters.
+   * Values can be primitives or arrays of primitives which will be joined by commas.
+   *
+   * @returns A URL with encoded query parameters appended. If there are no parameters, returns the base URL.
+   */
+  static urlWithQueryParams(n, r = {}) {
+    const t = e.encodeObjectToHttpQueryParams(r);
+    return t.length > 0 ? `${n}?${t}` : n;
+  }
+  /**
+   * Encodes an object of key value pairs to a query string
+   * @param params - object of key value pairs where the values must either be primitives or a list of primitives which
+   * will be joined by commas
+   *
+   * @returns An encoded query string without the leading '?'
+   */
+  static encodeObjectToHttpQueryParams(n = {}) {
+    return Object.entries(n).filter(
+      ([, r]) => r != null && r !== "" && !(Array.isArray(r) && r.length === 0)
+    ).map(([r, t]) => Array.isArray(t) ? `${encodeURIComponent(r)}=${t.map((o) => encodeURIComponent(o)).join(",")}` : `${encodeURIComponent(r)}=${encodeURIComponent(t)}`).join("&");
+  }
+}
+export {
+  e as NeonHttpUtils
+};
+//# sourceMappingURL=NeonHttpUtils.es.js.map

package/dist/utils/common/http/NeonHttpUtils.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NeonHttpUtils.es.js","sources":["../../../../src/utils/common/http/NeonHttpUtils.ts"],"sourcesContent":["/**\n * Utilities for handling HTTP operations such as URL construction and parameter encoding.\n */\nexport class NeonHttpUtils {\n  /**\n   * Constructs a URL with query parameters by appending encoded query parameters to a base URL.\n   *\n   * @param baseUrl The base URL to which query parameters will be appended.\n   * @param params Object containing key-value pairs to be encoded as query parameters.\n   * Values can be primitives or arrays of primitives which will be joined by commas.\n   *\n   * @returns A URL with encoded query parameters appended. If there are no parameters, returns the base URL.\n   */\n  public static urlWithQueryParams(baseUrl: string, params: object = {}) {\n    const queryString = NeonHttpUtils.encodeObjectToHttpQueryParams(params);\n    return queryString.length > 0 ? `${baseUrl}?${queryString}` : baseUrl;\n  }\n\n  /**\n   * Encodes an object of key value pairs to a query string\n   * @param params - object of key value pairs where the values must either be primitives or a list of primitives which\n   * will be joined by commas\n   *\n   * @returns An encoded query string without the leading '?'\n   */\n  public static encodeObjectToHttpQueryParams(params: object = {}) {\n    return Object.entries(params)\n      .filter(\n        ([, value]) =>\n          value !== undefined && value !== null && value !== '' && !(Array.isArray(value) && value.length === 0),\n      )\n      .map(([key, value]) => {\n        if (Array.isArray(value)) {\n          return `${encodeURIComponent(key)}=${value.map((v) => encodeURIComponent(v)).join(',')}`;\n        }\n\n        return `${encodeURIComponent(key)}=${encodeURIComponent(value)}`;\n      })\n      .join('&');\n  }\n}\n"],"names":["NeonHttpUtils","baseUrl","params","queryString","value","key","v"],"mappings":"AAGO,MAAMA,EAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAUzB,OAAc,mBAAmBC,GAAiBC,IAAiB,IAAI;AACrE,UAAMC,IAAcH,EAAc,8BAA8BE,CAAM;AACtE,WAAOC,EAAY,SAAS,IAAI,GAAGF,CAAO,IAAIE,CAAW,KAAKF;AAAA,EAChE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASA,OAAc,8BAA8BC,IAAiB,IAAI;AAC/D,WAAO,OAAO,QAAQA,CAAM,EACzB;AAAA,MACC,CAAC,CAAA,EAAGE,CAAK,MACgBA,KAAU,QAAQA,MAAU,MAAM,EAAE,MAAM,QAAQA,CAAK,KAAKA,EAAM,WAAW;AAAA,IAAA,EAEvG,IAAI,CAAC,CAACC,GAAKD,CAAK,MACX,MAAM,QAAQA,CAAK,IACd,GAAG,mBAAmBC,CAAG,CAAC,IAAID,EAAM,IAAI,CAACE,MAAM,mBAAmBA,CAAC,CAAC,EAAE,KAAK,GAAG,CAAC,KAGjF,GAAG,mBAAmBD,CAAG,CAAC,IAAI,mBAAmBD,CAAK,CAAC,EAC/D,EACA,KAAK,GAAG;AAAA,EACb;AACF;"}

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

package/src/sass/components/_badge.scss

@@ -112,7 +112,7 @@
       }
     }
 
-    $neon-badge-sizes: (s, m, l, xl, xxl);
+    $neon-badge-sizes: (s, m, l, xl, xxl, xxxl);
 
     @each $badge-size in $neon-badge-sizes {
       &--#{$badge-size} {
@@ -152,7 +152,7 @@
     &--square {
       &,
       .neon-badge__image {
-        border-radius: var(--neon-border-radius);
+        border-radius: var(--neon-border-radius-badge);
       }
     }
 

package/src/sass/components/{_page-container.scss → _basic-layout.scss}

@@ -1,70 +1,49 @@
-@use '../includes/layout';
 @use '../includes/responsive';
-@use '../includes/svg';
 
-@mixin page-container {
-  .neon-page-container {
+@mixin basic-layout {
+  .neon-basic-layout {
     position: relative;
     padding-bottom: calc(var(--neon-space-20) + var(--neon-height-mobile-menu) + var(--neon-border-width));
-    gap: var(--neon-gutter);
     width: 100%;
     max-width: 100%;
     flex: 1 0 auto;
 
-    &.neon-page-container--with-sticky-buttons {
+    .neon-basic-layout__container {
+      gap: var(--neon-gutter);
+    }
+
+    &.neon-basic-layout--with-sticky-buttons {
       padding-bottom: calc(
-              var(--neon-height-page-container-sticky-buttons) + var(--neon-space-20) + var(--neon-height-mobile-menu) +
+              var(--neon-height-basic-layout-sticky-buttons) + var(--neon-space-20) + var(--neon-height-mobile-menu) +
               var(--neon-height-mobile-menu-indicator)
       );
     }
-
-    &__header {
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      justify-content: space-between;
-      padding-top: calc(1.25 * var(--neon-gutter));
-    }
-
-    h1 {
-      margin-bottom: 0;
-    }
-
-    @include responsive.responsive(larger-than-mobile-large) {
-      padding-bottom: var(--neon-space-96);
-    }
   }
 
   /* All min-height logic */
   @include responsive.responsive(larger-than-mobile-large) {
     .neon-page--with-footer {
-      .neon-page-container {
+      .neon-basic-layout {
         min-height: calc(100% - (var(--neon-footer-height) + var(--neon-border-width-footer) + var(--neon-top-nav-height)));
       }
     }
   }
 
   @include responsive.responsive(tablet) {
-    .neon-page-container {
+    .neon-basic-layout {
       max-width: 100%;
     }
   }
 
   @include responsive.responsive(mobile-large) {
-    .neon-page-container {
+    .neon-basic-layout {
       min-height: 100%;
-
-      &--hide-nav {
-        min-height: 100%;
-        --neon-height-mobile-menu: 0rem;
-        --neon-height-mobile-menu-indicator: 0rem;
-      }
     }
   }
 
   .neon-page--left.neon-page--with-side-nav {
     @include responsive.responsive(larger-than-tablet) {
-      .neon-page-container {
+      .neon-basic-layout {
         max-width: calc(100% - 2 * var(--neon-gutter));
         margin-left: var(--neon-gutter);
         margin-right: var(--neon-gutter);

package/src/sass/components/_card-list.scss

@@ -4,12 +4,12 @@
 
 @mixin card-list {
   .neon-card-list {
-    &__results-end {
+    &__result-count-label {
       align-self: center;
       user-select: none;
-      margin-top: var(--neon-space-16);
-      font-size: var(--neon-font-size-s);
-      color: var(--neon-color-low-contrast);
+      font-size: var(--neon-font-size-xs);
+      color: var(--neon-color-text-secondary);
+      margin-top: var(--neon-space-32);
     }
 
     &__show-more {
@@ -23,7 +23,7 @@
     &__header {
       align-items: center;
       user-select: none;
-      margin-bottom: var(--neon-space-16);
+      margin-bottom: var(--neon-space-8);
       font-size: var(--neon-font-size-xs);
       color: var(--neon-color-text-primary);
 
@@ -93,5 +93,30 @@
         }
       }
     }
+
+    &.neon-card-list--grid {
+      .neon-card-list__link {
+        width: fit-content;
+        min-width: fit-content;
+        max-width: fit-content;
+        display: inline-flex;
+        flex: 0 1 auto;
+      }
+
+      .neon-card-list__cards {
+        gap: var(--neon-space-32);
+        margin-top: var(--neon-space-32);
+        border-top: none;
+        flex-direction: row;
+        flex-wrap: wrap;
+      }
+
+      .neon-card-list__card {
+        width: fit-content;
+        max-width: fit-content;
+        flex: 0 1 auto;
+        padding: 0 0 var(--neon-space-24) 0;
+      }
+    }
   }
 }

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

@@ -36,6 +36,7 @@
 
       input {
         pointer-events: none;
+        touch-action: none;
         user-select: none;
         font-variant: tabular-nums;
       }
@@ -61,6 +62,7 @@
 
     .neon-date-picker__native-input {
       pointer-events: none;
+      touch-action: none;
       width: 100%;
       min-width: 100%;
       display: flex;

package/src/sass/components/_drawer.scss

@@ -97,6 +97,7 @@
       z-index: var(--neon-z-index-below);
       position: fixed;
       pointer-events: none;
+      touch-action: none;
       top: 0;
       left: 0;
       @include layout.width(100);

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

@@ -61,8 +61,12 @@
         }
       }
 
+      .neon-button:hover {
+        z-index: var(--neon-z-index-above-2);
+      }
+
       .neon-button + .neon-button {
-        border-left: var(--neon-border-width) var(--neon-border-style) var(--neon-color-inverse);
+        border-left: none;
       }
     }
 

package/src/sass/components/_header.scss

@@ -29,7 +29,8 @@
     }
 
     &__subtitle {
-      font-size: var(--neon-font-size-m);
+      font-size: var(--neon-font-size-header-subtitle);
+      color: var(--neon-color-header-subtitle);
       white-space: nowrap;
     }
 

package/src/sass/components/_input.scss

@@ -11,6 +11,12 @@
     padding-right: var(--neon-size-#{$size});
   }
 
+  &.neon-input--state-loading {
+    input {
+      cursor: progress;
+    }
+  }
+
   &.neon-input--state-loading,
   &.neon-input--state-success,
   &.neon-input--state-error,

package/src/sass/components/_link.scss

@@ -39,6 +39,7 @@
       color: var(--neon-color-disabled-text);
       cursor: not-allowed;
       pointer-events: none;
+      touch-action: none;
     }
   }
 

package/src/sass/components/_modal.scss

@@ -79,6 +79,7 @@
       opacity: 0;
       z-index: var(--neon-z-index-below);
       pointer-events: none;
+      touch-action: none;
       transition: opacity ease-in-out var(--neon-animation-speed-fast);
     }
 

package/src/sass/components/_page.scss

@@ -14,6 +14,7 @@
 
     .neon-page__container {
       @include layout.min-height(100);
+      overflow-x: hidden;
 
       @include responsive.responsive(larger-than-tablet) {
         padding-left: var(--neon-gutter-desktop);

package/src/sass/components/_range-slider.scss

@@ -118,6 +118,7 @@
     .neon-slider__input,
     .neon-slider {
       pointer-events: none;
+      touch-action: none;
     }
 
     .neon-range-slider__lower,
@@ -132,14 +133,17 @@
         .neon-slider__input {
           &::-webkit-slider-thumb {
             pointer-events: none;
+            touch-action: none;
           }
 
           &::-moz-range-thumb {
             pointer-events: none;
+            touch-action: none;
           }
 
           &::-ms-thumb {
             pointer-events: none;
+            touch-action: none;
           }
         }
       }

package/src/sass/components/_sticky-buttons.scss

@@ -30,8 +30,8 @@
           background: linear-gradient(to bottom, transparent, var(--neon-background-color));
           width: 100%;
           height: var(--neon-space-16);
-          touch-action: none;
           pointer-events: none;
+          touch-action: none;
         }
 
         .neon-button {

package/src/sass/components/components.scss

@@ -56,7 +56,6 @@
 @forward './image-carousel';
 @forward './swiper';
 @forward './mobile-menu';
-@forward './page-container';
 @forward './banner';
 @forward './pagination';
 @forward './labelled-content';
@@ -69,3 +68,4 @@
 @forward './empty-state';
 @forward './list-layout';
 @forward './loading-state-card';
+@forward './basic-layout';

package/src/sass/includes/_dependencies.scss

@@ -131,7 +131,6 @@
           NeonImageCarousel: [NeonButton, NeonLink],
           NeonSwiper: [],
           NeonMobileMenu: [NeonIcon, NeonLink],
-          NeonPageContainer: [NeonIcon],
           NeonBanner: [NeonButton, NeonNote, NeonIcon, NeonLink, NeonExpansionIndicator],
           NeonPagination: [NeonButton, NeonLink, NeonIcon],
           NeonLabelledContent: [],
@@ -144,6 +143,7 @@
           NeonEmptyState: [NeonButton, NeonIcon, NeonInline, NeonStack, NeonExpansionIndicator, NeonLink],
           NeonListLayout: [NeonBreadcrumbs, NeonButton, NeonCard, NeonCardBody, NeonCardHeader, NeonCardList, NeonEmptyState, NeonExpansionIndicator, NeonHeader, NeonIcon, NeonInline, NeonLink, NeonNote, NeonPagination, NeonSelectableCard, NeonSwiper, NeonSwitch],
           NeonLoadingStateCard: [NeonInline, NeonStack, NeonSkeletonLoader],
+          NeonBasicLayout: [NeonHeader, NeonBreadcrumbs, NeonButton, NeonExpansionIndicator, NeonIcon, NeonInline, NeonLink, NeonNote, NeonSwiper, NeonStack],
   );
 
   $neon-flattened-components: [];

package/src/sass/theme.scss

@@ -273,10 +273,6 @@ $neon-components: null !default;
     @include components.mobile-menu;
   }
 
-  @if index($neon-flattened-components, NeonPageContainer) {
-    @include components.page-container;
-  }
-
   @if index($neon-flattened-components, NeonBanner) {
     @include components.banner;
   }
@@ -324,4 +320,8 @@ $neon-components: null !default;
   @if index($neon-flattened-components, NeonLoadingStateCard) {
     @include components.loading-state-card;
   }
+
+  @if index($neon-flattened-components, NeonBasicLayout) {
+    @include components.basic-layout;
+  }
 }

package/src/sass/variables-dark.scss

@@ -1337,4 +1337,11 @@
    * Background color of the sticky button container.
    */
   --neon-background-color-sticky-buttons: var(--neon-color-high-contrast-d5);
+
+  /* header */
+  /**
+   * @component NeonHeader,NeonBasicLayout
+   * Color of the header component subtitle
+   */
+  --neon-color-header-subtitle: var(--neon-color-text-secondary);
 }

package/src/sass/variables-global.scss

@@ -427,6 +427,10 @@
    * XXL component size (buttons & badges only)
    */
   --neon-size-xxl: calc(20 * var(--neon-base-space));
+  /**
+   * XXXL component size (buttons & badges only)
+   */
+  --neon-size-xxxl: calc(72 * var(--neon-base-space));
 
   /* box shadows */
   /** Default box shadow */
@@ -1240,6 +1244,11 @@
   --neon-text-transform-label: none;
 
   /* badge */
+  /**
+   * @component NeonBadge,NeonAvatar
+   * Badge border radius for square badges
+   */
+  --neon-border-radius-badge: var(--neon-border-radius);
   /**
    * @component NeonBadge
    * Background gradient angle for a multicolored badge
@@ -1275,6 +1284,11 @@
    * Size (height) of an XXL Badge
    */
   --neon-size-xxl-badge: var(--neon-size-xxl);
+  /**
+   * @component NeonBadge,NeonAvatar
+   * Size (height) of an XXXL Badge
+   */
+  --neon-size-xxxl-badge: var(--neon-size-xxxl);
   /**
    * @component NeonBadge
    * Default opacity of an editable badge button
@@ -1334,13 +1348,6 @@
    */
   --neon-blur-radius-image-carousel: 5px;
 
-  /* page container */
-  /**
-   * @component NeonPageContainer
-   * Page container fixed height for sticky buttons
-   */
-  --neon-height-page-container-sticky-buttons: 72rem;
-
   /* tree menu */
   /**
    * @component NeonTreeMenu
@@ -1410,4 +1417,11 @@
    * Border radius on the thumbnail placeholder in the loading state card. Set to 50% for a circular thumbnail.
    */
   --neon-border-radius-loading-state-card-thumbnail: var(--neon-border-radius-skeleton-loader);
+
+  /* Header component */
+  /**
+   * @component NeonHeader,NeonBasicLayout
+   * Font size of the header component subtitle
+   */
+  --neon-font-size-header-subtitle: var(--neon-font-size-m);
 }

package/src/sass/variables-light.scss

@@ -1337,4 +1337,11 @@
    * Background color of the sticky button container.
    */
   --neon-background-color-sticky-buttons: var(--neon-color-high-contrast-l5);
+
+  /* header */
+  /**
+   * @component NeonHeader,NeonBasicLayout
+   * Color of the header component subtitle
+   */
+  --neon-color-header-subtitle: var(--neon-color-text-secondary);
 }

package/dist/components/layout/page-container/NeonPageContainer.cjs.js

@@ -1,2 +0,0 @@
-"use strict";const e=require("vue"),o=require("../../presentation/icon/NeonIcon.vue.cjs.js"),s=e.defineComponent({name:"NeonPageContainer",components:{NeonIcon:o},props:{title:{type:String},hideNav:{type:Boolean,default:!1},stickyButtons:{type:Boolean,default:!1}},setup(n){const t=e.useSlots();return{hasHeader:e.computed(()=>n.title||t.header||t.actions)}}});module.exports=s;
-//# sourceMappingURL=NeonPageContainer.cjs.js.map

package/dist/components/layout/page-container/NeonPageContainer.cjs.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"NeonPageContainer.cjs.js","sources":["../../../../src/components/layout/page-container/NeonPageContainer.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { computed, defineComponent, useSlots } from 'vue';\nimport NeonIcon from '@/components/presentation/icon/NeonIcon.vue';\n\n/**\n * NeonPageContainer is a component for the layout of basic (non-card based) page content. It is designed to be placed\n * directly inside the NeonPage <em>contents</em> slot.\n * <br />\n * <br />\n * Features include support for sticky button placement and hiding the nav bar.\n */\nexport default defineComponent({\n  name: 'NeonPageContainer',\n  components: {\n    NeonIcon,\n  },\n  props: {\n    /** The page title */\n    title: { type: String },\n    /** Hide the navbar */\n    hideNav: { type: Boolean, default: false },\n    /** Sticky button support on mobile */\n    stickyButtons: { type: Boolean, default: false },\n  },\n  setup(props) {\n    const slots = useSlots();\n\n    const hasHeader = computed(() => {\n      return props.title || slots.header || slots.actions;\n    });\n\n    return {\n      hasHeader,\n    };\n  },\n});\n"],"names":["_sfc_main","defineComponent","NeonIcon","props","slots","useSlots","computed"],"mappings":"6FAUAA,EAAeC,kBAAgB,CAC7B,KAAM,oBACN,WAAY,CACV,SAAAC,CAAA,EAEF,MAAO,CAEL,MAAO,CAAE,KAAM,MAAA,EAEf,QAAS,CAAE,KAAM,QAAS,QAAS,EAAA,EAEnC,cAAe,CAAE,KAAM,QAAS,QAAS,EAAA,CAAM,EAEjD,MAAMC,EAAO,CACX,MAAMC,EAAQC,EAAAA,SAAA,EAMd,MAAO,CACL,UALgBC,EAAAA,SAAS,IAClBH,EAAM,OAASC,EAAM,QAAUA,EAAM,OAC7C,CAGC,CAEJ,CACF,CAAC"}

package/dist/components/layout/page-container/NeonPageContainer.es.js

@@ -1,26 +0,0 @@
-import { defineComponent as o, useSlots as n, computed as a } from "vue";
-import s from "../../presentation/icon/NeonIcon.vue.es.js";
-const l = o({
-  name: "NeonPageContainer",
-  components: {
-    NeonIcon: s
-  },
-  props: {
-    /** The page title */
-    title: { type: String },
-    /** Hide the navbar */
-    hideNav: { type: Boolean, default: !1 },
-    /** Sticky button support on mobile */
-    stickyButtons: { type: Boolean, default: !1 }
-  },
-  setup(t) {
-    const e = n();
-    return {
-      hasHeader: a(() => t.title || e.header || e.actions)
-    };
-  }
-});
-export {
-  l as default
-};
-//# sourceMappingURL=NeonPageContainer.es.js.map

package/dist/components/layout/page-container/NeonPageContainer.es.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"NeonPageContainer.es.js","sources":["../../../../src/components/layout/page-container/NeonPageContainer.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { computed, defineComponent, useSlots } from 'vue';\nimport NeonIcon from '@/components/presentation/icon/NeonIcon.vue';\n\n/**\n * NeonPageContainer is a component for the layout of basic (non-card based) page content. It is designed to be placed\n * directly inside the NeonPage <em>contents</em> slot.\n * <br />\n * <br />\n * Features include support for sticky button placement and hiding the nav bar.\n */\nexport default defineComponent({\n  name: 'NeonPageContainer',\n  components: {\n    NeonIcon,\n  },\n  props: {\n    /** The page title */\n    title: { type: String },\n    /** Hide the navbar */\n    hideNav: { type: Boolean, default: false },\n    /** Sticky button support on mobile */\n    stickyButtons: { type: Boolean, default: false },\n  },\n  setup(props) {\n    const slots = useSlots();\n\n    const hasHeader = computed(() => {\n      return props.title || slots.header || slots.actions;\n    });\n\n    return {\n      hasHeader,\n    };\n  },\n});\n"],"names":["_sfc_main","defineComponent","NeonIcon","props","slots","useSlots","computed"],"mappings":";;AAUA,MAAAA,IAAeC,EAAgB;AAAA,EAC7B,MAAM;AAAA,EACN,YAAY;AAAA,IACV,UAAAC;AAAA,EAAA;AAAA,EAEF,OAAO;AAAA;AAAA,IAEL,OAAO,EAAE,MAAM,OAAA;AAAA;AAAA,IAEf,SAAS,EAAE,MAAM,SAAS,SAAS,GAAA;AAAA;AAAA,IAEnC,eAAe,EAAE,MAAM,SAAS,SAAS,GAAA;AAAA,EAAM;AAAA,EAEjD,MAAMC,GAAO;AACX,UAAMC,IAAQC,EAAA;AAMd,WAAO;AAAA,MACL,WALgBC,EAAS,MAClBH,EAAM,SAASC,EAAM,UAAUA,EAAM,OAC7C;AAAA,IAGC;AAAA,EAEJ;AACF,CAAC;"}