@aotearoan/neon 28.7.4 → 28.7.6

package/dist/components/presentation/tabs/tab/NeonTab.vue.cjs.js

@@ -1,2 +1,2 @@
-"use strict";const t=require("./NeonTab.cjs.js"),e=require("vue"),o=require("../../../../_virtual/_plugin-vue_export-helper.cjs.js"),r=["id","aria-labelledby"];function a(n,l,s,d,u,c){return e.openBlock(),e.createBlock(e.Transition,{name:n.transition?"neon-fade-transition":null,mode:"out-in"},{default:e.withCtx(()=>[n.selected?(e.openBlock(),e.createElementBlock("div",{key:0,id:n.id,"aria-labelledby":n.id?`${n.id}Button`:void 0,class:e.normalizeClass([{"neon-tab--selected":n.selected},"neon-tab"]),role:"tabpanel",tabindex:"0"},[e.renderSlot(n.$slots,"default")],10,r)):e.createCommentVNode("",!0)]),_:3},8,["name"])}const i=o(t,[["render",a]]);module.exports=i;
+"use strict";const t=require("./NeonTab.cjs.js"),e=require("vue"),o=require("../../../../_virtual/_plugin-vue_export-helper.cjs.js"),r=["id","aria-labelledby"];function a(n,l,s,d,u,c){return e.openBlock(),e.createBlock(e.Transition,{name:n.transition?"neon-tab-transition":null,mode:"out-in"},{default:e.withCtx(()=>[n.selected?(e.openBlock(),e.createElementBlock("div",{key:0,id:n.id,"aria-labelledby":n.id?`${n.id}Button`:void 0,class:e.normalizeClass([{"neon-tab--selected":n.selected},"neon-tab"]),role:"tabpanel",tabindex:"0"},[e.renderSlot(n.$slots,"default")],10,r)):e.createCommentVNode("",!0)]),_:3},8,["name"])}const i=o(t,[["render",a]]);module.exports=i;
 //# sourceMappingURL=NeonTab.vue.cjs.js.map

package/dist/components/presentation/tabs/tab/NeonTab.vue.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"NeonTab.vue.cjs.js","sources":["../../../../../src/components/presentation/tabs/tab/NeonTab.vue"],"sourcesContent":["<template>\n  <transition :name=\"transition ? 'neon-fade-transition' : null\" mode=\"out-in\">\n    <div\n      v-if=\"selected\"\n      :id=\"id\"\n      :aria-labelledby=\"id ? `${id}Button` : undefined\"\n      :class=\"{ 'neon-tab--selected': selected }\"\n      class=\"neon-tab\"\n      role=\"tabpanel\"\n      tabindex=\"0\"\n    >\n      <!-- @slot The tab content -->\n      <slot></slot>\n    </div>\n  </transition>\n</template>\n\n<script lang=\"ts\" src=\"./NeonTab.ts\"></script>\n"],"names":["_createBlock","_Transition","_ctx","_createElementBlock","_normalizeClass","_renderSlot"],"mappings":"6MACEA,EAAAA,YAaaC,aAAA,CAbA,KAAMC,EAAA,WAAU,uBAAA,KAAkC,KAAK,6BAClE,IAWM,CAVEA,EAAA,wBADRC,EAAAA,mBAWM,MAAA,OATH,GAAID,EAAA,GACJ,kBAAiBA,EAAA,GAAE,GAAMA,EAAA,EAAE,SAAW,OACtC,MAAKE,EAAAA,eAAA,CAAA,CAAA,qBAA0BF,EAAA,QAAQ,EAClC,UAAU,CAAA,EAChB,KAAK,WACL,SAAS,MAGTG,aAAaH,EAAA,OAAA,SAAA"}
+{"version":3,"file":"NeonTab.vue.cjs.js","sources":["../../../../../src/components/presentation/tabs/tab/NeonTab.vue"],"sourcesContent":["<template>\n  <transition :name=\"transition ? 'neon-tab-transition' : null\" mode=\"out-in\">\n    <div\n      v-if=\"selected\"\n      :id=\"id\"\n      :aria-labelledby=\"id ? `${id}Button` : undefined\"\n      :class=\"{ 'neon-tab--selected': selected }\"\n      class=\"neon-tab\"\n      role=\"tabpanel\"\n      tabindex=\"0\"\n    >\n      <!-- @slot The tab content -->\n      <slot></slot>\n    </div>\n  </transition>\n</template>\n\n<script lang=\"ts\" src=\"./NeonTab.ts\"></script>\n"],"names":["_createBlock","_Transition","_ctx","_createElementBlock","_normalizeClass","_renderSlot"],"mappings":"6MACEA,EAAAA,YAaaC,aAAA,CAbA,KAAMC,EAAA,WAAU,sBAAA,KAAiC,KAAK,6BACjE,IAWM,CAVEA,EAAA,wBADRC,EAAAA,mBAWM,MAAA,OATH,GAAID,EAAA,GACJ,kBAAiBA,EAAA,GAAE,GAAMA,EAAA,EAAE,SAAW,OACtC,MAAKE,EAAAA,eAAA,CAAA,CAAA,qBAA0BF,EAAA,QAAQ,EAClC,UAAU,CAAA,EAChB,KAAK,WACL,SAAS,MAGTG,aAAaH,EAAA,OAAA,SAAA"}

package/dist/components/presentation/tabs/tab/NeonTab.vue.es.js

@@ -1,10 +1,10 @@
-import o from "./NeonTab.es.js";
-import { openBlock as n, createBlock as t, Transition as a, withCtx as r, createElementBlock as i, normalizeClass as d, renderSlot as l, createCommentVNode as s } from "vue";
+import t from "./NeonTab.es.js";
+import { openBlock as n, createBlock as o, Transition as a, withCtx as r, createElementBlock as i, normalizeClass as l, renderSlot as d, createCommentVNode as s } from "vue";
 import m from "../../../../_virtual/_plugin-vue_export-helper.es.js";
 const c = ["id", "aria-labelledby"];
 function f(e, p, u, b, $, k) {
-  return n(), t(a, {
-    name: e.transition ? "neon-fade-transition" : null,
+  return n(), o(a, {
+    name: e.transition ? "neon-tab-transition" : null,
     mode: "out-in"
   }, {
     default: r(() => [
@@ -12,17 +12,17 @@ function f(e, p, u, b, $, k) {
         key: 0,
         id: e.id,
         "aria-labelledby": e.id ? `${e.id}Button` : void 0,
-        class: d([{ "neon-tab--selected": e.selected }, "neon-tab"]),
+        class: l([{ "neon-tab--selected": e.selected }, "neon-tab"]),
         role: "tabpanel",
         tabindex: "0"
       }, [
-        l(e.$slots, "default")
+        d(e.$slots, "default")
       ], 10, c)) : s("", !0)
     ]),
     _: 3
   }, 8, ["name"]);
 }
-const y = /* @__PURE__ */ m(o, [["render", f]]);
+const y = /* @__PURE__ */ m(t, [["render", f]]);
 export {
   y as default
 };

package/dist/components/presentation/tabs/tab/NeonTab.vue.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"NeonTab.vue.es.js","sources":["../../../../../src/components/presentation/tabs/tab/NeonTab.vue"],"sourcesContent":["<template>\n  <transition :name=\"transition ? 'neon-fade-transition' : null\" mode=\"out-in\">\n    <div\n      v-if=\"selected\"\n      :id=\"id\"\n      :aria-labelledby=\"id ? `${id}Button` : undefined\"\n      :class=\"{ 'neon-tab--selected': selected }\"\n      class=\"neon-tab\"\n      role=\"tabpanel\"\n      tabindex=\"0\"\n    >\n      <!-- @slot The tab content -->\n      <slot></slot>\n    </div>\n  </transition>\n</template>\n\n<script lang=\"ts\" src=\"./NeonTab.ts\"></script>\n"],"names":["_createBlock","_Transition","_ctx","_createElementBlock","_normalizeClass","_renderSlot"],"mappings":";;;;;cACEA,EAaaC,GAAA;AAAA,IAbA,MAAMC,EAAA,aAAU,yBAAA;AAAA,IAAkC,MAAK;AAAA;eAClE,MAWM;AAAA,MAVEA,EAAA,iBADRC,EAWM,OAAA;AAAA;QATH,IAAID,EAAA;AAAA,QACJ,mBAAiBA,EAAA,KAAE,GAAMA,EAAA,EAAE,WAAW;AAAA,QACtC,OAAKE,EAAA,CAAA,EAAA,sBAA0BF,EAAA,SAAQ,GAClC,UAAU,CAAA;AAAA,QAChB,MAAK;AAAA,QACL,UAAS;AAAA;QAGTG,EAAaH,EAAA,QAAA,SAAA;AAAA;;;;;;"}
+{"version":3,"file":"NeonTab.vue.es.js","sources":["../../../../../src/components/presentation/tabs/tab/NeonTab.vue"],"sourcesContent":["<template>\n  <transition :name=\"transition ? 'neon-tab-transition' : null\" mode=\"out-in\">\n    <div\n      v-if=\"selected\"\n      :id=\"id\"\n      :aria-labelledby=\"id ? `${id}Button` : undefined\"\n      :class=\"{ 'neon-tab--selected': selected }\"\n      class=\"neon-tab\"\n      role=\"tabpanel\"\n      tabindex=\"0\"\n    >\n      <!-- @slot The tab content -->\n      <slot></slot>\n    </div>\n  </transition>\n</template>\n\n<script lang=\"ts\" src=\"./NeonTab.ts\"></script>\n"],"names":["_createBlock","_Transition","_ctx","_createElementBlock","_normalizeClass","_renderSlot"],"mappings":";;;;;cACEA,EAaaC,GAAA;AAAA,IAbA,MAAMC,EAAA,aAAU,wBAAA;AAAA,IAAiC,MAAK;AAAA;eACjE,MAWM;AAAA,MAVEA,EAAA,iBADRC,EAWM,OAAA;AAAA;QATH,IAAID,EAAA;AAAA,QACJ,mBAAiBA,EAAA,KAAE,GAAMA,EAAA,EAAE,WAAW;AAAA,QACtC,OAAKE,EAAA,CAAA,EAAA,sBAA0BF,EAAA,SAAQ,GAClC,UAAU,CAAA;AAAA,QAChB,MAAK;AAAA,QACL,UAAS;AAAA;QAGTG,EAAaH,EAAA,QAAA,SAAA;AAAA;;;;;;"}

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

package/src/sass/components/_drawer.scss

@@ -6,6 +6,7 @@
     &__container {
       position: fixed;
       overflow: hidden;
+      padding: var(--neon-space-20);
       margin: 0;
       z-index: var(--neon-z-index-top);
       @include layout.padding($multiplier: 0.75);
@@ -111,6 +112,7 @@
         pointer-events: auto;
         z-index: var(--neon-z-index-top);
         transition: opacity ease-in-out calc(0.5 * var(--neon-animation-speed-fast));
+        padding: var(--neon-space-20);
       }
     }
 

package/src/sass/components/_field.scss

@@ -4,6 +4,7 @@
 @mixin field {
   .neon-field {
     width: 100%;
+    margin-bottom: var(--neon-margin-bottom-field);
 
     label.neon-field__label {
       margin-bottom: 0;

package/src/sass/components/_footer.scss

@@ -65,4 +65,10 @@
       }
     }
   }
+
+  .neon-page--center {
+    .neon-footer__container {
+      margin: 0 auto;
+    }
+  }
 }

package/src/sass/components/_page.scss

@@ -14,7 +14,7 @@
 
     .neon-page__container {
       @include layout.min-height(100);
-      overflow-x: hidden;
+      overflow: hidden;
 
       @include responsive.responsive(larger-than-tablet) {
         padding-left: var(--neon-gutter-desktop);
@@ -54,6 +54,7 @@
     &--center {
       .neon-page__container {
         margin: 0 auto;
+        min-width: 100vw;
       }
     }
 

package/src/sass/components/_splash-loader.scss

@@ -13,7 +13,7 @@
     z-index: var(--neon-z-index-top);
 
     &--with-overlay {
-      background-color: var(--neon-background-color-overlay);
+      background-color: var(--neon-background-color);
     }
 
     &--fullscreen {

package/src/sass/core/_transitions.scss

@@ -11,6 +11,21 @@
     }
   }
 
+  .neon-tab-transition {
+    &-enter-active {
+      transition: opacity ease-in-out var(--neon-animation-speed-fast) var(--neon-animation-speed-fast) allow-discrete;
+    }
+
+    &-leave-active {
+      transition: none;
+    }
+
+    &-enter-from,
+    &-leave-to {
+      opacity: 0;
+    }
+  }
+
   .neon-splash-transition {
     &-enter-active {
       transition: opacity ease-in-out var(--neon-animation-speed-fast) var(--neon-animation-speed-fast) allow-discrete;

package/src/sass/variables-dark.scss

@@ -2,16 +2,18 @@
 * DARK THEME VARIABLES
 **********************/
 .neon.neon-mode--dark {
+  -webkit-tap-highlight-color: var(--neon-color-low-contrast-d5);
+
   /**
    * @component NeonCard
    * Background color of the card.
    */
-  --neon-background-color-card: var(--neon-color-neutral-d4);
+  --neon-background-color-card: var(--neon-color-high-contrast-d5);
   /**
    * @component NeonCard
    * Card border.
    */
-  --neon-border-card: var(--neon-border);
+  --neon-border-card: none;
   /**
    * Default background color. This is generally the background color of the page.
    */
@@ -753,7 +755,7 @@
   /**
    * HTML pre element background color.
    */
-  --neon-background-color-pre: var(--neon-color-neutral-d3);
+  --neon-background-color-pre: var(--neon-color-high-contrast-d4);
 
 
   /* toggle */
@@ -1162,7 +1164,7 @@
    * @component NeonDrawer,NeonModal,NeonDialog
    * Overlay background color when focussed content is open.
    */
-  --neon-background-color-overlay: rgba(var(--neon-rgb-neutral-d5), 0.75);
+  --neon-background-color-overlay: rgba(var(--neon-rgb-inverse), .75);
   /**
    * @component NeonDrawer,NeonModal,NeonDialog
    * Opaque overlay background color when focussed content is open.
@@ -1276,12 +1278,12 @@
    * @component NeonImageCarousel
    * Color of the carousel navigation indicator.
    */
-  --neon-color-image-carousel-nav-indicator: var(--neon-color-text-primary);
+  --neon-color-image-carousel-nav-indicator: var(--neon-color-neutral-d1);
   /**
    * @component NeonImageCarousel
    * Color of the carousel navigation indicator when in expanded mode.
    */
-  --neon-color-image-carousel-expanded-nav-indicator: var(--neon-color-text-primary);
+  --neon-color-image-carousel-expanded-nav-indicator: var(--neon-color-neutral-d1);
   /**
    * @component NeonImageCarousel
    * Color of the buttons in expanded mode.
@@ -1291,12 +1293,12 @@
    * @component NeonImageCarousel
    * Color of the disabled buttons in expanded mode.
    */
-  --neon-color-image-carousel-expanded-button-disabled: var(--neon-color-low-contrast-d4);
+  --neon-color-image-carousel-expanded-button-disabled: var(--neon-color-disabled-text);
   /**
    * @component NeonImageCarousel
    * Background color of the buttons in expanded mode.
    */
-  --neon-background-color-image-carousel-expanded-button: var(--neon-color-low-contrast-d5);
+  --neon-background-color-image-carousel-expanded-button: var(--neon-color-neutral-d4);
   /**
    * @component NeonImageCarousel
    * Color of the image label in expanded mode.
@@ -1306,7 +1308,7 @@
    * @component NeonImageCarousel
    * Text shadow in expanded mode. This is necessary to make the text readable on top of the image in all cases.
    */
-  --neon-text-shadow-image-carousel-expanded: 1px 1px 2px var(--neon-color-inverse);
+  --neon-text-shadow-image-carousel-expanded: none;
 
 
   /* tree menu */

package/src/sass/variables-global.scss

@@ -17,7 +17,7 @@
    * The maximum page width - topnav, footer and page content will be limited to this width for better layout and
    * usability (does not include side nav).
    */
-  --neon-max-width-page: 1920rem;
+  --neon-max-width-page: 1536rem;
 
   /** standardized spacings 1rem = 1px **/
   /** 1rem spacing **/
@@ -200,12 +200,12 @@
    * The background color for light mode, prefer <em>--neon-background-color</em> unless this is required for a
    * specific use case on dark mode.
    */
-  --neon-background-color-light: var(--neon-color-high-contrast-l4);
+  --neon-background-color-light: var(--neon-color-high-contrast-l5);
   /**
    * The background color for dark mode, prefer <em>--neon-background-color</em> unless this is required for a
    * specific use case on light mode.
    */
-  --neon-background-color-dark: var(--neon-color-neutral-d5);
+  --neon-background-color-dark: var(--neon-color-high-contrast-d5);
 
   /** z-index **/
   /** z-index below the default */
@@ -716,7 +716,7 @@
    * @component NeonMenu
    * Menu font weight
    */
-  --neon-font-weight-menu: var(--neon-font-weight-bold);
+  --neon-font-weight-menu: var(--neon-font-weight-medium);
   /**
    * @component NeonMenu
    * Menu text transformation
@@ -1039,7 +1039,7 @@
    * @component NeonNote
    * Font weight of the note text
    */
-  --neon-font-weight-note-text: var(--neon-font-weight-medium);
+  --neon-font-weight-note-text: var(--neon-font-weight-normal);
   /**
    * @component NeonNote
    * Font size of the note title
@@ -1077,12 +1077,12 @@
    * @component NeonLink
    * Default underline thickness of the link
    */
-  --neon-text-decoration-thickness-link: 1rem;
+  --neon-text-decoration-thickness-link: 1.5rem;
   /**
    * @component NeonLink
    * Default underline thickness of the link when hovered
    */
-  --neon-text-decoration-thickness-link-hover: 1rem;
+  --neon-text-decoration-thickness-link-hover: 1.5rem;
   /**
    * @component NeonLink
    * Offset of the link underline from the text
@@ -1161,7 +1161,7 @@
    * @component NeonInput,NeonTextarea,NeonNumber,NeonPassword
    * Background color opacity when input is active
    */
-  --neon-opacity-input-background-active: 0.03125;
+  --neon-opacity-input-background-active: 0;
 
   /**
    * @component NeonInput,NeonTextarea,NeonNumber,NeonPassword
@@ -1356,7 +1356,7 @@
    * @component NeonImageDevice
    * Image carousel background blur radius when opened full screen
    */
-  --neon-blur-radius-image-carousel: 5px;
+  --neon-blur-radius-image-carousel: 0;
 
   /* tree menu */
   /**
@@ -1398,7 +1398,7 @@
    * @component NeonTreeMenu
    * Tree menu padding left for items (indent)
    */
-  --neon-padding-left-tree-menu-items: 0;
+  --neon-padding-left-tree-menu-items: calc(var(--neon-space-24) + var(--neon-space-4));
 
   /* sticky buttons */
   /**
@@ -1442,4 +1442,12 @@
    * Set the min width of the card list grid card
    */
   --neon-min-width-card-list-grid-card: 288rem;
+
+
+  /* Field component */
+  /**
+   * @component NeonField
+   * Set the margin below the field component
+   */
+  --neon-margin-bottom-field: var(--neon-space-8);
 }

package/src/sass/variables-light.scss

@@ -2,6 +2,7 @@
 * LIGHT THEME VARIABLES
 *********************/
 .neon.neon-mode--light {
+  -webkit-tap-highlight-color: var(--neon-color-low-contrast-l5);
   /**
    * @component NeonCard
    * Background color of the card.
@@ -11,7 +12,7 @@
    * @component NeonCard
    * Card border.
    */
-  --neon-border-card: var(--neon-border);
+  --neon-border-card: none;
   /**
    * Default background color. This is generally the background color of the page.
    */
@@ -753,7 +754,7 @@
   /**
    * HTML pre element background color.
    */
-  --neon-background-color-pre: var(--neon-color-neutral-d5);
+  --neon-background-color-pre: var(--neon-color-high-contrast-d4);
 
 
   /* toggle */
@@ -1162,7 +1163,7 @@
    * @component NeonDrawer,NeonModal,NeonDialog
    * Overlay background color when focussed content is open.
    */
-  --neon-background-color-overlay: rgba(var(--neon-rgb-neutral-d5), 0.75);
+  --neon-background-color-overlay: rgba(var(--neon-rgb-text-primary), .5);
   /**
    * @component NeonDrawer,NeonModal,NeonDialog
    * Opaque overlay background color when focussed content is open.
@@ -1276,27 +1277,27 @@
    * @component NeonImageCarousel
    * Color of the carousel navigation indicator.
    */
-  --neon-color-image-carousel-nav-indicator: var(--neon-color-primary);
+  --neon-color-image-carousel-nav-indicator: var(--neon-color-neutral-l1);
   /**
    * @component NeonImageCarousel
    * Color of the carousel navigation indicator when in expanded mode.
    */
-  --neon-color-image-carousel-expanded-nav-indicator: var(--neon-color-inverse);
+  --neon-color-image-carousel-expanded-nav-indicator: var(--neon-color-neutral-l1);
   /**
    * @component NeonImageCarousel
    * Color of the buttons in expanded mode.
    */
-  --neon-color-image-carousel-expanded-button: var(--neon-color-inverse);
+  --neon-color-image-carousel-expanded-button: var(--neon-color-text-primary);
   /**
    * @component NeonImageCarousel
    * Color of the disabled buttons in expanded mode.
    */
-  --neon-color-image-carousel-expanded-button-disabled: var(--neon-color-low-contrast-d2);
+  --neon-color-image-carousel-expanded-button-disabled: var(--neon-color-disabled-text);
   /**
    * @component NeonImageCarousel
    * Background color of the buttons in expanded mode.
    */
-  --neon-background-color-image-carousel-expanded-button: var(--neon-color-low-contrast-d3);
+  --neon-background-color-image-carousel-expanded-button: var(--neon-color-neutral-l4);
   /**
    * @component NeonImageCarousel
    * Color of the image label in expanded mode.
@@ -1306,7 +1307,7 @@
    * @component NeonImageCarousel
    * Text shadow in expanded mode. This is necessary to make the text readable on top of the image in all cases.
    */
-  --neon-text-shadow-image-carousel-expanded: 1px 1px 2px var(--neon-color-text-primary);
+  --neon-text-shadow-image-carousel-expanded: none;
 
 
   /* tree menu */