@aotearoan/neon 21.0.0 → 21.0.2

package/dist/src/neon.d.ts

@@ -65,6 +65,7 @@ export { default as NeonTopNav } from './components/layout/top-nav/NeonTopNav.vu
 export { default as NeonTreeMenu } from './components/navigation/tree-menu/NeonTreeMenu.vue';
 export { NeonAlertLevel } from './common/enums/NeonAlertLevel';
 export { NeonAlertPlacement } from './common/enums/NeonAlertPlacement';
+export { NeonBadgeSize } from './common/enums/NeonBadgeSize';
 export { NeonButtonSize } from './common/enums/NeonButtonSize';
 export { NeonButtonStyle } from './common/enums/NeonButtonStyle';
 export { NeonChipAction } from './common/enums/NeonChipAction';

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

package/src/sass/components/_action-menu.scss

@@ -12,6 +12,8 @@
       font-size: var(--neon-font-size-s);
       font-weight: var(--neon-font-weight-normal);
       user-select: none;
+      max-width: none;
+      justify-content: space-between;
 
       &:not(.neon-action-menu__link--selected):not(.neon-action-menu__link--disabled) {
         &:hover,
@@ -52,13 +54,6 @@
         font-variant: tabular-nums;
         font-weight: var(--neon-font-weight-semi-bold);
       }
-
-      .neon-link__label {
-        max-width: none;
-        display: flex;
-        flex: 1 0 auto;
-        justify-content: space-between;
-      }
     }
   }
 }

package/src/sass/components/_badge.scss

@@ -7,9 +7,11 @@
       @each $color in palettes.$neon-functional-colors {
         &.neon-badge--#{$color}:not(.neon-badge--disabled) {
           $neon-badge-color: var(--neon-color-#{$color});
-          color: var(--neon-color-inverse);
           @if ($color == high-contrast) {
+            color: var(--neon-color-inverse);
             $neon-badge-color: var(--neon-color-text-secondary);
+          } @else {
+            color: var(--neon-color-inverse);
           }
 
           background: $neon-badge-color;
@@ -33,48 +35,22 @@
       cursor: not-allowed;
     }
 
-    &--s {
-      font-size: var(--neon-font-size-s);
+    $neon-badge-sizes: (s, m, l, xl, xxl);
 
-      &,
-      .neon-badge__image {
-        width: var(--neon-size-s);
-        height: var(--neon-size-s);
-      }
-
-      .neon-icon {
-        width: calc(var(--neon-icon-size-multiplier-badge) * var(--neon-size-s));
-        height: calc(var(--neon-icon-size-multiplier-badge) * var(--neon-size-s));
-      }
-    }
-
-    &--m {
-      font-size: var(--neon-font-size-m);
-
-      &,
-      .neon-badge__image {
-        width: var(--neon-size-m);
-        height: var(--neon-size-m);
-      }
-
-      .neon-icon {
-        width: calc(var(--neon-icon-size-multiplier-badge) * var(--neon-size-m));
-        height: calc(var(--neon-icon-size-multiplier-badge) * var(--neon-size-m));
-      }
-    }
-
-    &--l {
-      font-size: var(--neon-font-size-l);
+    @each $badge-size in $neon-badge-sizes {
+      &--#{$badge-size} {
+        font-size: var(--neon-font-size-#{$badge-size});
 
-      &,
-      .neon-badge__image {
-        width: var(--neon-size-l);
-        height: var(--neon-size-l);
-      }
+        &,
+        .neon-badge__image {
+          width: var(--neon-size-#{$badge-size}-badge);
+          height: var(--neon-size-#{$badge-size}-badge);
+        }
 
-      .neon-icon {
-        width: calc(var(--neon-icon-size-multiplier-badge) * var(--neon-size-l));
-        height: calc(var(--neon-icon-size-multiplier-badge) * var(--neon-size-l));
+        .neon-icon {
+          width: calc(var(--neon-icon-size-multiplier-badge) * var(--neon-size-#{$badge-size}-badge));
+          height: calc(var(--neon-icon-size-multiplier-badge) * var(--neon-size-#{$badge-size}-badge));
+        }
       }
     }
 
@@ -97,7 +73,6 @@
       &,
       .neon-badge__image {
         border-radius: var(--neon-border-radius);
-        overflow: hidden;
       }
     }
 
@@ -105,7 +80,6 @@
       &,
       .neon-badge__image {
         border-radius: 50%;
-        overflow: hidden;
       }
     }
   }

package/src/sass/components/_button.scss

@@ -249,7 +249,6 @@
 
     .neon-button__label {
       white-space: nowrap;
-      flex: 1 1 auto;
       text-align: left;
     }
 
@@ -397,11 +396,6 @@
       margin-left: var(--neon-space-8);
     }
 
-    .neon-link__label {
-      display: flex;
-      justify-content: center;
-    }
-
     &--disabled {
       cursor: not-allowed;
     }

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

@@ -23,6 +23,7 @@
 
       .neon-link {
         width: 100%;
+        min-width: 100%;
 
         &::after {
           display: none;
@@ -34,12 +35,6 @@
             display: none;
           }
         }
-
-        .neon-link__label {
-          display: flex;
-          width: 100%;
-          min-width: 100%;
-        }
       }
     }
 

package/src/sass/components/_date-picker.scss

@@ -5,6 +5,25 @@
 @mixin date-picker {
   .neon-date-picker {
     position: relative;
+    width: 100%;
+
+    @each $color in palettes.$neon-functional-colors {
+      &--#{$color} {
+        &:not(.neon-select--disabled):focus-within {
+          .neon-dropdown__button.neon-button--input {
+            border: var(--neon-border-width-input) var(--neon-border-style) var(--neon-color-#{$color});
+          }
+        }
+      }
+    }
+
+    .neon-dropdown {
+      width: 100%;
+
+      &__button .neon-button__label {
+        font-variant: tabular-nums;
+      }
+    }
 
     .neon-dropdown__content {
       min-width: fit-content;
@@ -102,6 +121,7 @@
         font-size: var(--neon-font-size-xs);
         letter-spacing: var(--neon-letter-spacing-m);
         color: var(--neon-color-low-contrast);
+        text-decoration: none;
       }
 
       .neon-date-picker__calendar-date {

package/src/sass/components/_link.scss

@@ -36,12 +36,10 @@ a[href]:not(.neon-link--no-style) {
   .neon-link {
     position: relative;
     display: inline-flex;
-    @include outline.focus-outline-styles(var(--neon-rgb-link));
+    cursor: pointer;
+    align-items: center;
 
-    .neon-link__label {
-      display: inline-flex;
-      align-items: center;
-    }
+    @include outline.focus-outline-styles(var(--neon-rgb-link));
 
     &:not(.neon-link--no-style) {
       @extend %neon-link-no-style;

package/src/sass/components/_search.scss

@@ -110,6 +110,10 @@
             right: var(--neon-space-8);
           }
         }
+
+        .neon-chip--s {
+          height: calc(var(--neon-size-s) - 3 * var(--neon-base-space));
+        }
       }
 
       &--m {
@@ -128,6 +132,10 @@
             right: calc(2 * var(--neon-base-space));
           }
         }
+
+        .neon-chip--m {
+          height: calc(var(--neon-size-m) - 3 * var(--neon-base-space));
+        }
       }
 
       &--l {
@@ -146,6 +154,10 @@
             right: calc(2 * var(--neon-base-space));
           }
         }
+
+        .neon-chip--l {
+          height: calc(var(--neon-size-l) - 3 * var(--neon-base-space));
+        }
       }
     }
 

package/src/sass/components/_tree-menu.scss

@@ -60,6 +60,7 @@
       }
     }
 
+    .neon-tree-menu__section-link,
     .neon-tree-menu__section {
       color: var(--neon-color-text-secondary);
 

package/src/sass/variables.scss

@@ -163,8 +163,9 @@
   --neon-size-s: var(--neon-space-32);
   --neon-size-m: var(--neon-space-40);
   --neon-size-l: var(--neon-space-48);
-  /* buttons only */
+  /* buttons & badges only */
   --neon-size-xl: var(--neon-space-64);
+  --neon-size-xxl: calc(20 * var(--neon-base-space));
 
   /* box shadows */
   --neon-box-shadow: 0 0 0 0 rgba(#000, 0);
@@ -308,6 +309,11 @@
   /* badge */
   --neon-background-gradient-angle-badge: 45deg;
   --neon-icon-size-multiplier-badge: 0.667;
+  --neon-size-s-badge: var(--neon-size-s);
+  --neon-size-m-badge: var(--neon-size-m);
+  --neon-size-l-badge: var(--neon-size-l);
+  --neon-size-xl-badge: var(--neon-size-xl);
+  --neon-size-xxl-badge: var(--neon-size-xxl);
 
   /* color input */
   --neon-border-radius-input-color: 50%;