@aotearoan/neon 28.4.1 → 28.6.0

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 */
@@ -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 */
@@ -1197,7 +1201,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 +1216,7 @@
    * @component NeonSkeletonLoader
    * Skeleton loader gap between items
    */
-  --neon-gap-skeleton-loader: 5rem;
+  --neon-gap-skeleton-loader: var(--neon-space-4);
 
   /* expansion panel */
   /**
@@ -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
@@ -1403,4 +1410,18 @@
    * 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);
+
+  /* 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

@@ -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 */
@@ -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;"}

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

@@ -1,2 +0,0 @@
-"use strict";const t=require("./NeonPageContainer.cjs.js"),e=require("vue"),o=require("../../../_virtual/_plugin-vue_export-helper.cjs.js"),r={key:0,class:"neon-page-container__header"},s={key:0,class:"neon-page-container__title"};function a(n,c,l,p,d,u){return e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass([{"neon-page-container--hide-nav":n.hideNav,"neon-page-container--with-sticky-buttons":n.stickyButtons},"neon-page-container"])},[n.hasHeader?(e.openBlock(),e.createElementBlock("div",r,[e.renderSlot(n.$slots,"header",{},()=>[n.title?(e.openBlock(),e.createElementBlock("h1",s,e.toDisplayString(n.title),1)):e.createCommentVNode("",!0)]),e.renderSlot(n.$slots,"actions")])):e.createCommentVNode("",!0),e.renderSlot(n.$slots,"default")],2)}const i=o(t,[["render",a]]);module.exports=i;
-//# sourceMappingURL=NeonPageContainer.vue.cjs.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"NeonPageContainer.vue.cjs.js","sources":["../../../../src/components/layout/page-container/NeonPageContainer.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"{\n      'neon-page-container--hide-nav': hideNav,\n      'neon-page-container--with-sticky-buttons': stickyButtons,\n    }\"\n    class=\"neon-page-container\"\n  >\n    <div v-if=\"hasHeader\" class=\"neon-page-container__header\">\n      <!-- @slot header - override default title for richer content -->\n      <slot name=\"header\">\n        <h1 v-if=\"title\" class=\"neon-page-container__title\">{{ title }}</h1>\n      </slot>\n      <!-- @slot header actions -->\n      <slot name=\"actions\"></slot>\n    </div>\n    <!-- @slot the page contents -->\n    <slot name=\"default\"></slot>\n  </div>\n</template>\n\n<script lang=\"ts\" src=\"./NeonPageContainer.ts\" />\n"],"names":["_createElementBlock","_normalizeClass","_ctx","_openBlock","_hoisted_1","_renderSlot","_hoisted_2","_toDisplayString"],"mappings":"qJAQ0B,MAAM,wCAGP,MAAM,2EAV7BA,EAAAA,mBAiBM,MAAA,CAhBH,MAAKC,EAAAA,eAAA,CAAA,iCAA2CC,EAAA,mDAA2DA,EAAA,eAItG,qBAAqB,CAAA,IAEhBA,EAAA,WAAXC,EAAAA,YAAAH,EAAAA,mBAOM,MAPNI,EAOM,CALJC,EAAAA,WAEOH,qBAFP,IAEO,CADKA,EAAA,qBAAVF,EAAAA,mBAAoE,KAApEM,EAAoEC,EAAAA,gBAAbL,EAAA,KAAK,EAAA,CAAA,iCAG9DG,aAA4BH,EAAA,OAAA,SAAA,iCAG9BG,aAA4BH,EAAA,OAAA,SAAA"}

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

@@ -1,31 +0,0 @@
-import s from "./NeonPageContainer.es.js";
-import { openBlock as n, createElementBlock as o, normalizeClass as r, renderSlot as t, toDisplayString as i, createCommentVNode as a } from "vue";
-import l from "../../../_virtual/_plugin-vue_export-helper.es.js";
-const c = {
-  key: 0,
-  class: "neon-page-container__header"
-}, d = {
-  key: 0,
-  class: "neon-page-container__title"
-};
-function p(e, m, h, f, u, _) {
-  return n(), o("div", {
-    class: r([{
-      "neon-page-container--hide-nav": e.hideNav,
-      "neon-page-container--with-sticky-buttons": e.stickyButtons
-    }, "neon-page-container"])
-  }, [
-    e.hasHeader ? (n(), o("div", c, [
-      t(e.$slots, "header", {}, () => [
-        e.title ? (n(), o("h1", d, i(e.title), 1)) : a("", !0)
-      ]),
-      t(e.$slots, "actions")
-    ])) : a("", !0),
-    t(e.$slots, "default")
-  ], 2);
-}
-const y = /* @__PURE__ */ l(s, [["render", p]]);
-export {
-  y as default
-};
-//# sourceMappingURL=NeonPageContainer.vue.es.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"NeonPageContainer.vue.es.js","sources":["../../../../src/components/layout/page-container/NeonPageContainer.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"{\n      'neon-page-container--hide-nav': hideNav,\n      'neon-page-container--with-sticky-buttons': stickyButtons,\n    }\"\n    class=\"neon-page-container\"\n  >\n    <div v-if=\"hasHeader\" class=\"neon-page-container__header\">\n      <!-- @slot header - override default title for richer content -->\n      <slot name=\"header\">\n        <h1 v-if=\"title\" class=\"neon-page-container__title\">{{ title }}</h1>\n      </slot>\n      <!-- @slot header actions -->\n      <slot name=\"actions\"></slot>\n    </div>\n    <!-- @slot the page contents -->\n    <slot name=\"default\"></slot>\n  </div>\n</template>\n\n<script lang=\"ts\" src=\"./NeonPageContainer.ts\" />\n"],"names":["_createElementBlock","_normalizeClass","_ctx","_openBlock","_hoisted_1","_renderSlot","_hoisted_2","_toDisplayString"],"mappings":";;;;;EAQ0B,OAAM;;;EAGP,OAAM;;;cAV7BA,EAiBM,OAAA;AAAA,IAhBH,OAAKC,EAAA,CAAA;AAAA,uCAA2CC,EAAA;AAAA,kDAA2DA,EAAA;AAAA,OAItG,qBAAqB,CAAA;AAAA;IAEhBA,EAAA,aAAXC,KAAAH,EAOM,OAPNI,GAOM;AAAA,MALJC,EAEOH,wBAFP,MAEO;AAAA,QADKA,EAAA,cAAVF,EAAoE,MAApEM,GAAoEC,EAAbL,EAAA,KAAK,GAAA,CAAA;;MAG9DG,EAA4BH,EAAA,QAAA,SAAA;AAAA;IAG9BG,EAA4BH,EAAA,QAAA,SAAA;AAAA;;;"}

package/dist/src/components/layout/page-container/NeonPageContainer.d.ts

@@ -1,98 +0,0 @@
-/**
- * NeonPageContainer is a component for the layout of basic (non-card based) page content. It is designed to be placed
- * directly inside the NeonPage <em>contents</em> slot.
- * <br />
- * <br />
- * Features include support for sticky button placement and hiding the nav bar.
- */
-declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-    /** The page title */
-    title: {
-        type: StringConstructor;
-    };
-    /** Hide the navbar */
-    hideNav: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    /** Sticky button support on mobile */
-    stickyButtons: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-}>, {
-    hasHeader: import("vue").ComputedRef<string | import("vue").Slot<any> | undefined>;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    /** The page title */
-    title: {
-        type: StringConstructor;
-    };
-    /** Hide the navbar */
-    hideNav: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    /** Sticky button support on mobile */
-    stickyButtons: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-}>> & Readonly<{}>, {
-    hideNav: boolean;
-    stickyButtons: boolean;
-}, {}, {
-    NeonIcon: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-        name: {
-            type: StringConstructor;
-            required: true;
-        };
-        id: {
-            type: StringConstructor;
-            default: null;
-        };
-        color: {
-            type: () => import("../../../neon").NeonFunctionalColor;
-            default: null;
-        };
-        inverse: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-        disabled: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-    }>, {
-        sanitizedAttributes: import("vue").ComputedRef<{
-            [x: string]: unknown;
-        }>;
-        icon: import("vue").ComputedRef<string | undefined>;
-    }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-        name: {
-            type: StringConstructor;
-            required: true;
-        };
-        id: {
-            type: StringConstructor;
-            default: null;
-        };
-        color: {
-            type: () => import("../../../neon").NeonFunctionalColor;
-            default: null;
-        };
-        inverse: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-        disabled: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-    }>> & Readonly<{}>, {
-        color: import("../../../neon").NeonFunctionalColor;
-        id: string;
-        inverse: boolean;
-        disabled: boolean;
-    }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-export default _default;

package/dist/src/components/layout/page-container/NeonPageContainer.vue.d.ts

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