@aotearoan/neon 28.7.0 → 28.7.2

package/dist/components/layout/filter-bar/NeonFilterBar.cjs.js

@@ -1,2 +1,2 @@
-"use strict";const e=require("vue"),n=require("../inline/NeonInline.vue.cjs.js"),o=require("../swiper/NeonSwiper.vue.cjs.js"),r=e.defineComponent({name:"NeonFilterBar",components:{NeonInline:n,NeonSwiper:o}});module.exports=r;
+"use strict";const n=require("vue"),r=require("../inline/NeonInline.vue.cjs.js"),o=require("../swiper/NeonSwiper.vue.cjs.js"),t=n.defineComponent({name:"NeonFilterBar",components:{NeonInline:r,NeonSwiper:o},setup(s,{slots:e}){return{slots:e}}});module.exports=t;
 //# sourceMappingURL=NeonFilterBar.cjs.js.map

package/dist/components/layout/filter-bar/NeonFilterBar.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"NeonFilterBar.cjs.js","sources":["../../../../src/components/layout/filter-bar/NeonFilterBar.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { defineComponent } from 'vue';\nimport NeonInline from '@/components/layout/inline/NeonInline.vue';\nimport NeonSwiper from '@/components/layout/swiper/NeonSwiper.vue';\n\n/**\n * A filter bar to be placed above a list of items providing search, filter and sort options.\n */\nexport default defineComponent({\n  name: 'NeonFilterBar',\n  components: { NeonInline, NeonSwiper },\n});\n"],"names":["_sfc_main","defineComponent","NeonInline","NeonSwiper"],"mappings":"8HAOAA,EAAeC,kBAAgB,CAC7B,KAAM,gBACN,WAAY,CAAE,WAAAC,EAAY,WAAAC,CAAA,CAC5B,CAAC"}
+{"version":3,"file":"NeonFilterBar.cjs.js","sources":["../../../../src/components/layout/filter-bar/NeonFilterBar.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { defineComponent } from 'vue';\nimport NeonInline from '@/components/layout/inline/NeonInline.vue';\nimport NeonSwiper from '@/components/layout/swiper/NeonSwiper.vue';\n\n/**\n * A filter bar to be placed above a list of items providing search, filter and sort options.\n */\nexport default defineComponent({\n  name: 'NeonFilterBar',\n  components: { NeonInline, NeonSwiper },\n  setup(_props, { slots }) {\n    return { slots };\n  },\n});\n"],"names":["_sfc_main","defineComponent","NeonInline","NeonSwiper","_props","slots"],"mappings":"8HAOAA,EAAeC,kBAAgB,CAC7B,KAAM,gBACN,WAAY,CAAE,WAAAC,EAAY,WAAAC,CAAA,EAC1B,MAAMC,EAAQ,CAAE,MAAAC,GAAS,CACvB,MAAO,CAAE,MAAAA,CAAA,CACX,CACF,CAAC"}

package/dist/components/layout/filter-bar/NeonFilterBar.es.js

@@ -1,11 +1,14 @@
-import { defineComponent as o } from "vue";
-import e from "../inline/NeonInline.vue.es.js";
-import n from "../swiper/NeonSwiper.vue.es.js";
-const i = o({
+import { defineComponent as e } from "vue";
+import n from "../inline/NeonInline.vue.es.js";
+import r from "../swiper/NeonSwiper.vue.es.js";
+const f = e({
   name: "NeonFilterBar",
-  components: { NeonInline: e, NeonSwiper: n }
+  components: { NeonInline: n, NeonSwiper: r },
+  setup(t, { slots: o }) {
+    return { slots: o };
+  }
 });
 export {
-  i as default
+  f as default
 };
 //# sourceMappingURL=NeonFilterBar.es.js.map

package/dist/components/layout/filter-bar/NeonFilterBar.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"NeonFilterBar.es.js","sources":["../../../../src/components/layout/filter-bar/NeonFilterBar.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { defineComponent } from 'vue';\nimport NeonInline from '@/components/layout/inline/NeonInline.vue';\nimport NeonSwiper from '@/components/layout/swiper/NeonSwiper.vue';\n\n/**\n * A filter bar to be placed above a list of items providing search, filter and sort options.\n */\nexport default defineComponent({\n  name: 'NeonFilterBar',\n  components: { NeonInline, NeonSwiper },\n});\n"],"names":["_sfc_main","defineComponent","NeonInline","NeonSwiper"],"mappings":";;;AAOA,MAAAA,IAAeC,EAAgB;AAAA,EAC7B,MAAM;AAAA,EACN,YAAY,EAAE,YAAAC,GAAY,YAAAC,EAAA;AAC5B,CAAC;"}
+{"version":3,"file":"NeonFilterBar.es.js","sources":["../../../../src/components/layout/filter-bar/NeonFilterBar.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { defineComponent } from 'vue';\nimport NeonInline from '@/components/layout/inline/NeonInline.vue';\nimport NeonSwiper from '@/components/layout/swiper/NeonSwiper.vue';\n\n/**\n * A filter bar to be placed above a list of items providing search, filter and sort options.\n */\nexport default defineComponent({\n  name: 'NeonFilterBar',\n  components: { NeonInline, NeonSwiper },\n  setup(_props, { slots }) {\n    return { slots };\n  },\n});\n"],"names":["_sfc_main","defineComponent","NeonInline","NeonSwiper","_props","slots"],"mappings":";;;AAOA,MAAAA,IAAeC,EAAgB;AAAA,EAC7B,MAAM;AAAA,EACN,YAAY,EAAE,YAAAC,GAAY,YAAAC,EAAA;AAAA,EAC1B,MAAMC,GAAQ,EAAE,OAAAC,KAAS;AACvB,WAAO,EAAE,OAAAA,EAAA;AAAA,EACX;AACF,CAAC;"}

package/dist/components/layout/filter-bar/NeonFilterBar.vue.cjs.js

@@ -1,2 +1,2 @@
-"use strict";const o=require("./NeonFilterBar.cjs.js"),e=require("vue"),s=require("../../../_virtual/_plugin-vue_export-helper.cjs.js"),l={class:"neon-filter-bar__sort"};function i(t,c,a,p,u,d){const n=e.resolveComponent("neon-inline"),r=e.resolveComponent("neon-swiper");return e.openBlock(),e.createBlock(n,{class:"neon-filter-bar",gap:"m"},{default:e.withCtx(()=>[e.createVNode(r,{class:"neon-filter-bar__swiper"},{default:e.withCtx(()=>[e.createVNode(n,{class:"neon-filter-bar__filters"},{default:e.withCtx(()=>[e.renderSlot(t.$slots,"filters")]),_:3})]),_:3}),e.createElementVNode("div",l,[e.renderSlot(t.$slots,"sort")])]),_:3})}const _=s(o,[["render",i]]);module.exports=_;
+"use strict";const n=require("./NeonFilterBar.cjs.js"),e=require("vue"),s=require("../../../_virtual/_plugin-vue_export-helper.cjs.js"),l={key:1,class:"neon-filter-bar__sort"};function c(t,_,a,p,u,d){const o=e.resolveComponent("neon-inline"),r=e.resolveComponent("neon-swiper");return e.openBlock(),e.createBlock(o,{class:"neon-filter-bar",gap:"m"},{default:e.withCtx(()=>[t.slots.filters?(e.openBlock(),e.createBlock(r,{key:0,class:"neon-filter-bar__swiper"},{default:e.withCtx(()=>[e.createVNode(o,{class:"neon-filter-bar__filters"},{default:e.withCtx(()=>[e.renderSlot(t.$slots,"filters")]),_:3})]),_:3})):e.createCommentVNode("",!0),t.slots.sort?(e.openBlock(),e.createElementBlock("div",l,[e.renderSlot(t.$slots,"sort")])):e.createCommentVNode("",!0)]),_:3})}const i=s(n,[["render",c]]);module.exports=i;
 //# sourceMappingURL=NeonFilterBar.vue.cjs.js.map

package/dist/components/layout/filter-bar/NeonFilterBar.vue.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"NeonFilterBar.vue.cjs.js","sources":["../../../../src/components/layout/filter-bar/NeonFilterBar.vue"],"sourcesContent":["<template>\n  <neon-inline class=\"neon-filter-bar\" gap=\"m\">\n    <neon-swiper class=\"neon-filter-bar__swiper\">\n      <neon-inline class=\"neon-filter-bar__filters\">\n        <!-- @slot container for filters, e.g. search-filter & filter components -->\n        <slot name=\"filters\"></slot>\n      </neon-inline>\n    </neon-swiper>\n    <div class=\"neon-filter-bar__sort\">\n      <!-- @slot sort component, e.g. select component -->\n      <slot name=\"sort\"></slot>\n    </div>\n  </neon-inline>\n</template>\n\n<script lang=\"ts\" src=\"./NeonFilterBar.ts\"></script>\n"],"names":["_hoisted_1","_createBlock","_component_neon_inline","_createVNode","_component_neon_swiper","_renderSlot","_ctx","_createElementVNode"],"mappings":"wIAQSA,EAAA,CAAA,MAAM,uBAAuB,6HAPpCC,EAAAA,YAWcC,EAAA,CAXD,MAAM,kBAAkB,IAAI,wBACvC,IAKc,CALdC,EAAAA,YAKcC,EAAA,CALD,MAAM,yBAAyB,EAAA,mBAC1C,IAGc,CAHdD,EAAAA,YAGcD,EAAA,CAHD,MAAM,0BAA0B,EAAA,mBAE3C,IAA4B,CAA5BG,aAA4BC,EAAA,OAAA,SAAA,kBAGhCC,EAAAA,mBAGM,MAHNP,EAGM,CADJK,aAAyBC,EAAA,OAAA,MAAA"}
+{"version":3,"file":"NeonFilterBar.vue.cjs.js","sources":["../../../../src/components/layout/filter-bar/NeonFilterBar.vue"],"sourcesContent":["<template>\n  <neon-inline class=\"neon-filter-bar\" gap=\"m\">\n    <neon-swiper v-if=\"slots.filters\" class=\"neon-filter-bar__swiper\">\n      <neon-inline class=\"neon-filter-bar__filters\">\n        <!-- @slot container for filters, e.g. search-filter & filter components -->\n        <slot name=\"filters\"></slot>\n      </neon-inline>\n    </neon-swiper>\n    <div v-if=\"slots.sort\" class=\"neon-filter-bar__sort\">\n      <!-- @slot sort component, e.g. select component -->\n      <slot name=\"sort\"></slot>\n    </div>\n  </neon-inline>\n</template>\n\n<script lang=\"ts\" src=\"./NeonFilterBar.ts\"></script>\n"],"names":["_createBlock","_component_neon_inline","_ctx","_component_neon_swiper","_createVNode","_renderSlot","_openBlock","_createElementBlock","_hoisted_1"],"mappings":"iJAQ2B,MAAM,oJAP/BA,EAAAA,YAWcC,EAAA,CAXD,MAAM,kBAAkB,IAAI,wBACvC,IAKc,CALKC,EAAA,MAAM,uBAAzBF,EAAAA,YAKcG,EAAA,OALoB,MAAM,8CACtC,IAGc,CAHdC,EAAAA,YAGcH,EAAA,CAHD,MAAM,0BAA0B,EAAA,mBAE3C,IAA4B,CAA5BI,aAA4BH,EAAA,OAAA,SAAA,+CAGrBA,EAAA,MAAM,MAAjBI,EAAAA,YAAAC,EAAAA,mBAGM,MAHNC,EAGM,CADJH,aAAyBH,EAAA,OAAA,MAAA"}

package/dist/components/layout/filter-bar/NeonFilterBar.vue.es.js

@@ -1,34 +1,40 @@
-import i from "./NeonFilterBar.es.js";
-import { resolveComponent as t, openBlock as _, createBlock as a, withCtx as e, createVNode as r, renderSlot as s, createElementVNode as c } from "vue";
-import f from "../../../_virtual/_plugin-vue_export-helper.es.js";
-const p = { class: "neon-filter-bar__sort" };
-function d(o, m, u, $, b, w) {
-  const n = t("neon-inline"), l = t("neon-swiper");
-  return _(), a(n, {
+import _ from "./NeonFilterBar.es.js";
+import { resolveComponent as n, openBlock as o, createBlock as s, withCtx as t, createVNode as c, renderSlot as l, createCommentVNode as i, createElementBlock as f } from "vue";
+import p from "../../../_virtual/_plugin-vue_export-helper.es.js";
+const m = {
+  key: 1,
+  class: "neon-filter-bar__sort"
+};
+function d(e, u, $, k, b, w) {
+  const r = n("neon-inline"), a = n("neon-swiper");
+  return o(), s(r, {
     class: "neon-filter-bar",
     gap: "m"
   }, {
-    default: e(() => [
-      r(l, { class: "neon-filter-bar__swiper" }, {
-        default: e(() => [
-          r(n, { class: "neon-filter-bar__filters" }, {
-            default: e(() => [
-              s(o.$slots, "filters")
+    default: t(() => [
+      e.slots.filters ? (o(), s(a, {
+        key: 0,
+        class: "neon-filter-bar__swiper"
+      }, {
+        default: t(() => [
+          c(r, { class: "neon-filter-bar__filters" }, {
+            default: t(() => [
+              l(e.$slots, "filters")
             ]),
             _: 3
           })
         ]),
         _: 3
-      }),
-      c("div", p, [
-        s(o.$slots, "sort")
-      ])
+      })) : i("", !0),
+      e.slots.sort ? (o(), f("div", m, [
+        l(e.$slots, "sort")
+      ])) : i("", !0)
     ]),
     _: 3
   });
 }
-const k = /* @__PURE__ */ f(i, [["render", d]]);
+const N = /* @__PURE__ */ p(_, [["render", d]]);
 export {
-  k as default
+  N as default
 };
 //# sourceMappingURL=NeonFilterBar.vue.es.js.map

package/dist/components/layout/filter-bar/NeonFilterBar.vue.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"NeonFilterBar.vue.es.js","sources":["../../../../src/components/layout/filter-bar/NeonFilterBar.vue"],"sourcesContent":["<template>\n  <neon-inline class=\"neon-filter-bar\" gap=\"m\">\n    <neon-swiper class=\"neon-filter-bar__swiper\">\n      <neon-inline class=\"neon-filter-bar__filters\">\n        <!-- @slot container for filters, e.g. search-filter & filter components -->\n        <slot name=\"filters\"></slot>\n      </neon-inline>\n    </neon-swiper>\n    <div class=\"neon-filter-bar__sort\">\n      <!-- @slot sort component, e.g. select component -->\n      <slot name=\"sort\"></slot>\n    </div>\n  </neon-inline>\n</template>\n\n<script lang=\"ts\" src=\"./NeonFilterBar.ts\"></script>\n"],"names":["_hoisted_1","_createBlock","_component_neon_inline","_createVNode","_component_neon_swiper","_renderSlot","_ctx","_createElementVNode"],"mappings":";;;AAQS,MAAAA,IAAA,EAAA,OAAM,wBAAuB;;;cAPpCC,EAWcC,GAAA;AAAA,IAXD,OAAM;AAAA,IAAkB,KAAI;AAAA;eACvC,MAKc;AAAA,MALdC,EAKcC,GAAA,EALD,OAAM,0BAAyB,GAAA;AAAA,mBAC1C,MAGc;AAAA,UAHdD,EAGcD,GAAA,EAHD,OAAM,2BAA0B,GAAA;AAAA,uBAE3C,MAA4B;AAAA,cAA5BG,EAA4BC,EAAA,QAAA,SAAA;AAAA;;;;;;MAGhCC,EAGM,OAHNP,GAGM;AAAA,QADJK,EAAyBC,EAAA,QAAA,MAAA;AAAA;;;;;;"}
+{"version":3,"file":"NeonFilterBar.vue.es.js","sources":["../../../../src/components/layout/filter-bar/NeonFilterBar.vue"],"sourcesContent":["<template>\n  <neon-inline class=\"neon-filter-bar\" gap=\"m\">\n    <neon-swiper v-if=\"slots.filters\" class=\"neon-filter-bar__swiper\">\n      <neon-inline class=\"neon-filter-bar__filters\">\n        <!-- @slot container for filters, e.g. search-filter & filter components -->\n        <slot name=\"filters\"></slot>\n      </neon-inline>\n    </neon-swiper>\n    <div v-if=\"slots.sort\" class=\"neon-filter-bar__sort\">\n      <!-- @slot sort component, e.g. select component -->\n      <slot name=\"sort\"></slot>\n    </div>\n  </neon-inline>\n</template>\n\n<script lang=\"ts\" src=\"./NeonFilterBar.ts\"></script>\n"],"names":["_createBlock","_component_neon_inline","_ctx","_component_neon_swiper","_createVNode","_renderSlot","_openBlock","_createElementBlock","_hoisted_1"],"mappings":";;;;;EAQ2B,OAAM;;;;cAP/BA,EAWcC,GAAA;AAAA,IAXD,OAAM;AAAA,IAAkB,KAAI;AAAA;eACvC,MAKc;AAAA,MALKC,EAAA,MAAM,gBAAzBF,EAKcG,GAAA;AAAA;QALoB,OAAM;AAAA;mBACtC,MAGc;AAAA,UAHdC,EAGcH,GAAA,EAHD,OAAM,2BAA0B,GAAA;AAAA,uBAE3C,MAA4B;AAAA,cAA5BI,EAA4BH,EAAA,QAAA,SAAA;AAAA;;;;;;MAGrBA,EAAA,MAAM,QAAjBI,KAAAC,EAGM,OAHNC,GAGM;AAAA,QADJH,EAAyBH,EAAA,QAAA,MAAA;AAAA;;;;;;"}

package/dist/src/components/layout/filter-bar/NeonFilterBar.d.ts

@@ -1,7 +1,11 @@
 /**
  * A filter bar to be placed above a list of items providing search, filter and sort options.
  */
-declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {
+declare const _default: import("vue").DefineComponent<{}, {
+    slots: Readonly<{
+        [name: string]: import("vue").Slot<any> | undefined;
+    }>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {
     NeonInline: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
         gap: {
             type: () => import("../../../neon").NeonLayoutSize;

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

package/src/sass/components/_badge.scss

@@ -124,7 +124,7 @@
           min-width: var(--neon-size-#{$badge-size}-badge);
           height: var(--neon-size-#{$badge-size}-badge);
           min-height: var(--neon-size-#{$badge-size}-badge);
-          object-fit: cover;
+          object-fit: var(--neon-object-fit-badge-image);
         }
 
         .neon-icon {

package/src/sass/components/_button.scss

@@ -5,7 +5,7 @@
 
 @mixin gradient-button($from-color, $to-color) {
   --neon-gradient-button-c1: var(--neon-color-#{$from-color});
-  --neon-gradient-button-c2: var(--neon-background-color-#{$to-color});
+  --neon-gradient-button-c2: var(--neon-color-#{$to-color});
 
   background: linear-gradient(
                   var(--neon-background-gradient-angle),

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

@@ -91,26 +91,22 @@
     }
 
     &.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 {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(var(--neon-min-width-card-list-grid-card), 1fr));
         gap: var(--neon-space-32);
         margin-top: var(--neon-space-32);
         border-top: none;
-        flex-direction: row;
-        flex-wrap: wrap;
+      }
+
+      .neon-card-list__link {
+        width: 100%;
+        display: inline-flex;
+        align-items: flex-start;
       }
 
       .neon-card-list__card {
-        width: fit-content;
-        max-width: fit-content;
-        flex: 0 1 auto;
+        width: 100%;
         padding: 0 0 var(--neon-space-24) 0;
       }
     }

package/src/sass/components/_label.scss

@@ -22,11 +22,11 @@
     @each $color in palettes.$neon-functional-colors {
       &--#{$color} {
         @include svg.color-with-svg(var(--neon-color-#{$color}));
-        background: rgba(var(--neon-rgb-#{$color}), 0.15);
+        background: var(--neon-background-color-#{$color});
 
         @each $alternateColor in palettes.$neon-functional-colors {
           &.neon-label--alternate-color-#{$alternateColor} {
-            background: linear-gradient(90deg, rgba(var(--neon-rgb-#{$color}), 0.15), rgba(var(--neon-rgb-#{$alternateColor}), 0.15));
+            background: linear-gradient(90deg, var(--neon-background-color-#{$color}), var(--neon-background-color-#{$alternateColor}));
 
             .neon-label__label {
               @include gradient.neon-gradient-text($color, $alternateColor);

package/src/sass/components/_slider.scss

@@ -153,7 +153,7 @@ $neon-width-slider-tooltip: 201rem;
     outline: none;
 
     &:focus {
-      $neon-box-shadow-slider-thumb-focus: 0 0 0 4rem rgba(var(--neon-background-rgb-low-contrast), 0.3);
+      $neon-box-shadow-slider-thumb-focus: 0 0 0 4rem rgba(var(--neon-rgb-low-contrast), 0.3);
 
       &::-webkit-slider-thumb {
         box-shadow: $neon-box-shadow-slider-thumb-focus;

package/src/sass/variables-dark.scss

@@ -136,50 +136,46 @@
   --neon-color-error: var(--neon-color-error-l1);
 
 
-  /**
-   * background low contrast color RGB values
-   */
-  --neon-background-rgb-low-contrast: var(--neon-rgb-low-contrast-d1);
   /**
    * background low contrast color variable
    */
-  --neon-background-color-low-contrast: var(--neon-color-low-contrast-d1);
+  --neon-background-color-low-contrast: var(--neon-color-low-contrast-d5);
   /**
    * background neutral color variable
    */
-  --neon-background-color-neutral: var(--neon-color-neutral-d1);
+  --neon-background-color-neutral: var(--neon-color-neutral-d5);
   /**
    * background high contrast color variable
    */
-  --neon-background-color-high-contrast: var(--neon-color-high-contrast-d1);
+  --neon-background-color-high-contrast: var(--neon-color-high-contrast-d5);
   /**
    * background brand color variable
    */
-  --neon-background-color-brand: var(--neon-color-brand-d1);
+  --neon-background-color-brand: var(--neon-color-brand-d5);
   /**
    * background accent color variable
    */
-  --neon-background-color-accent: var(--neon-color-accent-d1);
+  --neon-background-color-accent: var(--neon-color-accent-d5);
   /**
    * background primary color variable
    */
-  --neon-background-color-primary: var(--neon-color-primary-d1);
+  --neon-background-color-primary: var(--neon-color-primary-d5);
   /**
    * background info color variable
    */
-  --neon-background-color-info: var(--neon-color-info-d1);
+  --neon-background-color-info: var(--neon-color-info-d5);
   /**
    * background success color variable
    */
-  --neon-background-color-success: var(--neon-color-success-d1);
+  --neon-background-color-success: var(--neon-color-success-d5);
   /**
    * background warning color variable
    */
-  --neon-background-color-warn: var(--neon-color-warn-d1);
+  --neon-background-color-warn: var(--neon-color-warn-d5);
   /**
    * background error color variable
    */
-  --neon-background-color-error: var(--neon-color-error-d1);
+  --neon-background-color-error: var(--neon-color-error-d5);
 
 
   /**

package/src/sass/variables-global.scss

@@ -1249,6 +1249,11 @@
    * Badge border radius for square badges
    */
   --neon-border-radius-badge: var(--neon-border-radius);
+  /**
+   * @component NeonBadge,NeonAvatar
+   * Badge image object fit property
+   */
+  --neon-object-fit-badge-image: cover;
   /**
    * @component NeonBadge
    * Background gradient angle for a multicolored badge
@@ -1424,4 +1429,12 @@
    * Font size of the header component subtitle
    */
   --neon-font-size-header-subtitle: var(--neon-font-size-m);
+
+
+  /* Card list component */
+  /**
+   * @component NeonCardList
+   * Set the min width of the card list grid card
+   */
+  --neon-min-width-card-list-grid-card: 288rem;
 }

package/src/sass/variables-light.scss

@@ -136,50 +136,46 @@
   --neon-color-error: var(--neon-color-error-d1);
 
 
-  /**
-   * background low contrast color RGB values
-   */
-  --neon-background-rgb-low-contrast: var(--neon-rgb-low-contrast-l1);
   /**
    * background low contrast color variable
    */
-  --neon-background-color-low-contrast: var(--neon-color-low-contrast-l1);
+  --neon-background-color-low-contrast: var(--neon-color-low-contrast-l5);
   /**
    * background neutral color variable
    */
-  --neon-background-color-neutral: var(--neon-color-neutral-l1);
+  --neon-background-color-neutral: var(--neon-color-neutral-l5);
   /**
    * background high contrast color variable
    */
-  --neon-background-color-high-contrast: var(--neon-color-high-contrast-l1);
+  --neon-background-color-high-contrast: var(--neon-color-high-contrast-l5);
   /**
    * background brand color variable
    */
-  --neon-background-color-brand: var(--neon-color-brand-l1);
+  --neon-background-color-brand: var(--neon-color-brand-l5);
   /**
    * background accent color variable
    */
-  --neon-background-color-accent: var(--neon-color-accent-l1);
+  --neon-background-color-accent: var(--neon-color-accent-l5);
   /**
    * background primary color variable
    */
-  --neon-background-color-primary: var(--neon-color-primary-l1);
+  --neon-background-color-primary: var(--neon-color-primary-l5);
   /**
    * background info color variable
    */
-  --neon-background-color-info: var(--neon-color-info-l1);
+  --neon-background-color-info: var(--neon-color-info-l5);
   /**
    * background success color variable
    */
-  --neon-background-color-success: var(--neon-color-success-l1);
+  --neon-background-color-success: var(--neon-color-success-l5);
   /**
    * background warning color variable
    */
-  --neon-background-color-warn: var(--neon-color-warn-l1);
+  --neon-background-color-warn: var(--neon-color-warn-l5);
   /**
    * background error color variable
    */
-  --neon-background-color-error: var(--neon-color-error-l1);
+  --neon-background-color-error: var(--neon-color-error-l5);
 
 
   /**