@aotearoan/neon 28.4.1 → 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';
@@ -44,6 +46,7 @@ export { default as NeonLinearProgress } from './components/feedback/linear-prog
 export { default as NeonLink } from './components/navigation/link/NeonLink.vue';
 export { default as NeonList } from './components/user-input/list/NeonList.vue';
 export { default as NeonListLayout } from './components/layout/list-layout/NeonListLayout.vue';
+export { default as NeonLoadingStateCard } from './components/feedback/loading-state-card/NeonLoadingStateCard.vue';
 export { default as NeonMenu } from './components/navigation/menu/NeonMenu.vue';
 export { default as NeonMobileMenu } from './components/navigation/mobile-menu/NeonMobileMenu.vue';
 export { default as NeonModal } from './components/layout/modal/NeonModal.vue';
@@ -51,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';
@@ -93,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';
@@ -158,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.4.1",
+  "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

@@ -1,14 +1,15 @@
 @use '../includes/palettes';
 @use '../includes/responsive';
+@use '../includes/scrollbars';
 
 @mixin card-list {
   .neon-card-list {
-    &__results-end {
+    &__result-count-label {
       align-self: center;
       user-select: none;
-      margin-top: 16rem;
-      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 {
@@ -22,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);
 
@@ -42,19 +43,10 @@
     }
 
     &__cards {
+      @include scrollbars.scrollbars;
+      overflow-y: auto;
       border-top: var(--neon-border);
       position: relative;
-
-      .neon-splash-loader {
-        position: absolute;
-        width: 100%;
-        height: 100%;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        z-index: var(--neon-z-index-above);
-      }
     }
 
     .neon-card-list__card {
@@ -101,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/_loading-state-card.scss

@@ -0,0 +1,48 @@
+@use '../includes/responsive';
+
+@mixin loading-state-card {
+  .neon-loading-state-card {
+    .neon-loading-state-card__thumbnail {
+      --neon-border-radius-skeleton-loader: var(--neon-border-radius-loading-state-card-thumbnail);
+      --neon-height-skeleton-loader: 48rem;
+      min-width: 48rem;
+      width: 48rem;
+    }
+
+    .neon-loading-state-card__main-content {
+      gap: var(--neon-space-8);
+      width: 50%;
+      height: 48rem;
+    }
+
+    .neon-loading-state-card__main-content-item {
+      --neon-height-skeleton-loader: 22rem;
+      width: 50%;
+    }
+
+    .neon-loading-state-card__additional-content {
+      --neon-height-skeleton-loader: 20rem;
+      width: 25%;
+      height: 20rem;
+      justify-content: center;
+      margin-left: auto;
+    }
+
+    @include responsive.responsive(mobile-large) {
+      gap: var(--neon-space-16);
+
+      .neon-loading-state-card__main-content {
+        width: 50%;
+      }
+
+      .neon-loading-state-card__main-content-item {
+        width: 100%;
+      }
+
+      .neon-loading-state-card__additional-content {
+        margin-left: 0;
+        width: 50%;
+      }
+    }
+  }
+}

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/_skeleton-loader.scss

@@ -17,6 +17,7 @@
       flex: 1 1 auto;
       width: var(--neon-width-skeleton-loader);
       max-width: var(--neon-width-skeleton-loader);
+      height: var(--neon-height-skeleton-loader);
       min-height: var(--neon-height-skeleton-loader);
       border-radius: var(--neon-border-radius-skeleton-loader);
       position: relative;

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';
@@ -68,3 +67,5 @@
 @forward './filter-bar';
 @forward './empty-state';
 @forward './list-layout';
+@forward './loading-state-card';
+@forward './basic-layout';

package/src/sass/core/_transitions.scss

@@ -2,7 +2,7 @@
   .neon-fade-transition {
     &-enter-active,
     &-leave-active {
-      transition: opacity ease-in-out var(--neon-animation-speed-fast);
+      transition: opacity ease-in-out var(--neon-animation-speed-fast) var(--neon-animation-speed-fast) allow-discrete;
     }
 
     &-enter-from,
@@ -13,11 +13,11 @@
 
   .neon-splash-transition {
     &-enter-active {
-      transition: opacity ease-in-out var(--neon-animation-speed-fast);
+      transition: opacity ease-in-out var(--neon-animation-speed-fast) var(--neon-animation-speed-fast) allow-discrete;
     }
 
     &-leave-active {
-      transition: opacity ease-in-out var(--neon-animation-speed-slowest);
+      transition: opacity ease-in-out var(--neon-animation-speed-slowest) var(--neon-animation-speed-fast) allow-discrete;
     }
 
     &-enter-from,

package/src/sass/includes/_dependencies.scss

@@ -127,11 +127,10 @@
           NeonField: [],
           NeonStack: [],
           NeonInline: [],
-          NeonCardList: [NeonSelectableCard, NeonSwitch, NeonIcon, NeonButton, NeonExpansionIndicator, NeonIcon, NeonLink, NeonCard, NeonCardHeader, NeonCardBody, NeonInline, NeonStack, NeonPagination],
+          NeonCardList: [NeonSelectableCard, NeonSwitch, NeonIcon, NeonButton, NeonExpansionIndicator, NeonIcon, NeonLink, NeonCard, NeonCardHeader, NeonCardBody, NeonInline, NeonStack, NeonPagination, NeonLoadingStateCard, NeonSkeletonLoader],
           NeonImageCarousel: [NeonButton, NeonLink],
           NeonSwiper: [],
           NeonMobileMenu: [NeonIcon, NeonLink],
-          NeonPageContainer: [NeonIcon],
           NeonBanner: [NeonButton, NeonNote, NeonIcon, NeonLink, NeonExpansionIndicator],
           NeonPagination: [NeonButton, NeonLink, NeonIcon],
           NeonLabelledContent: [],
@@ -142,7 +141,9 @@
           NeonSearchFilter: [NeonButton, NeonInput, NeonLink, NeonStack, NeonSwitch, NeonExpansionIndicator, NeonIcon, NeonLink, NeonFieldGroup, NeonDropdown, NeonBadge],
           NeonFilterBar: [NeonInline, NeonSwiper],
           NeonEmptyState: [NeonButton, NeonIcon, NeonInline, NeonStack, NeonExpansionIndicator, NeonLink],
-          NeonListLayout: [NeonBreadcrumbs, NeonButton, NeonCard, NeonCardBody, NeonCardHeader, NeonCardList, NeonEmptyState, NeonExpansionIndicator, NeonHeader, NeonIcon, NeonInline, NeonLink, NeonNote, NeonPagination, NeonSelectableCard, NeonStack, NeonSwiper, NeonSwitch],
+          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/palette.scss

@@ -9,10 +9,10 @@
   --neon-rgb-text-primary-dark: 248, 248, 248;
   --neon-rgb-text-secondary-dark: 221, 221, 221;
   --neon-rgb-text-tertiary-dark: 166, 166, 166;
-  --neon-rgb-disabled-background-dark: 55, 55, 55;
+  --neon-rgb-disabled-background-dark: 16, 16, 16;
   --neon-rgb-disabled-border-dark: 65, 65, 65;
   --neon-rgb-disabled-text-dark: 80, 80, 80;
-  --neon-rgb-disabled-background-light: 240, 240, 240;
+  --neon-rgb-disabled-background-light: 248, 248, 248;
   --neon-rgb-disabled-border-light: 220, 220, 220;
   --neon-rgb-disabled-text-light: 200, 200, 200;
   --neon-rgb-low-contrast-l5: 221, 221, 221;

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;
   }
@@ -320,4 +316,12 @@ $neon-components: null !default;
   @if index($neon-flattened-components, NeonListLayout) {
     @include components.list-layout;
   }
+
+  @if index($neon-flattened-components, NeonLoadingStateCard) {
+    @include components.loading-state-card;
+  }
+
+  @if index($neon-flattened-components, NeonBasicLayout) {
+    @include components.basic-layout;
+  }
 }