@aotearoan/neon 28.7.1 → 28.7.3

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.1",
+  "version": "28.7.3",
   "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

@@ -24,7 +24,7 @@
     );
   }
 
-  &:focus:not(.neon-button--disabled):not(.neon-button--no-outline) {
+  &:focus-visible:not(.neon-button--disabled):not(.neon-button--no-outline) {
     @include outline.box-shadow-outline(var(--neon-rgb-#{$from-color}));
   }
 }
@@ -44,11 +44,12 @@
     );
   }
 
+  &:hover:not(.neon-button--disabled),
   &:active:not(.neon-button--disabled) {
     background: var(--neon-background-solid-button-dark-#{$color});
   }
 
-  &:focus:not(.neon-button--disabled):not(.neon-button--no-outline) {
+  &:focus-visible:not(.neon-button--disabled):not(.neon-button--no-outline) {
     @include outline.box-shadow-outline(var(--neon-background-rgb-solid-button-dark-#{$color}));
   }
 }
@@ -81,7 +82,7 @@
     border-color: var(--neon-background-outline-button-active-#{$color});
   }
 
-  &:focus:not(.neon-button--disabled):not(.neon-button--no-outline) {
+  &:focus-visible:not(.neon-button--disabled):not(.neon-button--no-outline) {
     @include outline.box-shadow-outline(var(--neon-rgb-#{$color}));
   }
 }
@@ -95,7 +96,7 @@
   }
 
   &:hover:not(.neon-button--disabled),
-  &:focus:not(.neon-button--disabled) {
+  &:focus-visible:not(.neon-button--disabled) {
     background: var(--neon-background-color-text-button-hover);
   }
 
@@ -106,7 +107,7 @@
 
 @mixin input-button($color) {
   &:active:not(.neon-button--disabled),
-  &:focus:not(.neon-button--disabled) {
+  &:focus-visible:not(.neon-button--disabled) {
     background-color: rgba(var(--neon-rgb-#{$color}), var(--neon-opacity-input-background-active));
     border: var(--neon-border-width-input) var(--neon-border-style) var(--neon-color-#{$color});
   }
@@ -429,11 +430,10 @@
     flex-direction: row;
     justify-content: flex-end;
     align-items: center;
-    gap: var(--neon-space-16);
+    gap: var(--neon-gap-button-group);
 
     @include responsive.responsive(mobile-large) {
       flex-direction: column-reverse;
-      gap: calc(3 * var(--neon-base-space));
 
       & > .neon-button {
         @include neon-full-width-button;

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/variables-global.scss

@@ -840,6 +840,11 @@
    * Button letter spacing
    */
   --neon-letter-spacing-button: var(--neon-letter-spacing-m);
+  /**
+   * @component NeonButton
+   * Gap between buttons when using the .neon-button-group class
+   */
+  --neon-gap-button-group: var(--neon-space-8);
 
   /* tabs */
   /**
@@ -1249,6 +1254,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 +1434,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;
 }