@aotearoan/neon 28.4.1 → 28.5.0

package/dist/src/neon.d.ts

@@ -44,6 +44,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';

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

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

@@ -1,12 +1,13 @@
 @use '../includes/palettes';
 @use '../includes/responsive';
+@use '../includes/scrollbars';
 
 @mixin card-list {
   .neon-card-list {
     &__results-end {
       align-self: center;
       user-select: none;
-      margin-top: 16rem;
+      margin-top: var(--neon-space-16);
       font-size: var(--neon-font-size-s);
       color: var(--neon-color-low-contrast);
     }
@@ -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 {

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/_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/components.scss

@@ -68,3 +68,4 @@
 @forward './filter-bar';
 @forward './empty-state';
 @forward './list-layout';
+@forward './loading-state-card';

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,7 +127,7 @@
           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],
@@ -142,7 +142,8 @@
           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],
   );
 
   $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

@@ -320,4 +320,8 @@ $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;
+  }
 }

package/src/sass/variables-dark.scss

@@ -1141,17 +1141,17 @@
    * @component NeonSkeletonLoader
    * 1st loading color.
    */
-  --neon-color-loading-1: rgb(64, 64, 64);
+  --neon-color-loading-1: rgb(16, 16, 16);
   /**
    * @component NeonSkeletonLoader
    * 2nd loading color.
    */
-  --neon-color-loading-2: rgb(82, 82, 82);
+  --neon-color-loading-2: rgb(24, 24, 24);
   /**
    * @component NeonSkeletonLoader
    * 3rd loading color.
    */
-  --neon-color-loading-3: rgba(82, 82, 82, 0.5);
+  --neon-color-loading-3: rgba(24, 24, 24, 0.5);
 
 
   /* scrollbars */

package/src/sass/variables-global.scss

@@ -1197,7 +1197,7 @@
    * @component NeonSkeletonLoader
    * Skeleton loader border radius
    */
-  --neon-border-radius-skeleton-loader: 0rem;
+  --neon-border-radius-skeleton-loader: 2rem;
   /**
    * @component NeonSkeletonLoader
    * Skeleton loader width
@@ -1212,7 +1212,7 @@
    * @component NeonSkeletonLoader
    * Skeleton loader gap between items
    */
-  --neon-gap-skeleton-loader: 5rem;
+  --neon-gap-skeleton-loader: var(--neon-space-4);
 
   /* expansion panel */
   /**
@@ -1403,4 +1403,11 @@
    * Max width of the empty state content
    */
   --neon-max-width-empty-state: 416rem;
+
+  /* Loading state card */
+  /**
+   * @component NeonLoadingStateCard,NeonCardList
+   * 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);
 }

package/src/sass/variables-light.scss

@@ -1141,17 +1141,17 @@
    * @component NeonSkeletonLoader
    * 1st loading color.
    */
-  --neon-color-loading-1: rgb(226, 226, 226);
+  --neon-color-loading-1: rgb(240, 240, 240);
   /**
    * @component NeonSkeletonLoader
    * 2nd loading color.
    */
-  --neon-color-loading-2: rgb(212, 212, 212);
+  --neon-color-loading-2: rgb(232, 232, 232);
   /**
    * @component NeonSkeletonLoader
    * 3rd loading color.
    */
-  --neon-color-loading-3: rgba(212, 212, 212, 0.5);
+  --neon-color-loading-3: rgba(232, 232, 232, 0.5);
 
 
   /* scrollbars */