@aotearoan/neon 22.1.2 → 22.3.0

package/dist/src/components/user-input/toggle/NeonToggle.d.ts

@@ -72,6 +72,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     slots: Readonly<{
         [name: string]: import("vue").Slot<any> | undefined;
     }>;
+    NeonToggleStyle: typeof NeonToggleStyle;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     /**
      * The name of the radio button group.

package/dist/src/neon.d.ts

@@ -125,6 +125,7 @@ export { NeonDateUtils } from './common/utils/NeonDateUtils';
 export { NeonDebounceUtils } from './common/utils/NeonDebounceUtils';
 export { NeonDropdownPlacementUtils } from './common/utils/NeonDropdownPlacementUtils';
 export { NeonEventBus } from './common/utils/NeonEventBus';
+export { fileToDataURL } from './common/utils/NeonFileUtils';
 export { NeonIconRegistry } from './common/utils/NeonIconRegistry';
 export { NeonJazziconUtils } from './common/utils/NeonJazziconUtils';
 export { NeonModeUtils } from './common/utils/NeonModeUtils';

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

package/src/sass/components/_badge.scss

@@ -2,6 +2,8 @@
 
 @mixin badge {
   .neon-badge {
+    position: relative;
+
     &--with-icon,
     &--with-label {
       @each $color in palettes.$neon-functional-colors {
@@ -29,10 +31,85 @@
       }
     }
 
+    &--editable {
+      .neon-badge__upload {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+
+        .neon-button-group {
+          width: 100%;
+          height: 100%;
+        }
+
+        .neon-button {
+          width: 100%;
+          height: 100%;
+
+          &--circular {
+            border-radius: 50%;
+          }
+        }
+      }
+
+      .neon-badge__clear {
+        position: absolute;
+        top: 0;
+        right: 0;
+      }
+
+      &.neon-badge--xxl {
+        .neon-button {
+          svg {
+            width: 50%;
+            height: 50%;
+          }
+        }
+      }
+
+      @each $color in palettes.$neon-functional-colors {
+        &.neon-badge--#{$color}:not(.neon-badge--disabled) {
+          .neon-badge__upload {
+            .neon-button {
+              background: rgba(var(--neon-rgb-#{$color}), var(--neon-opacity-badge-editable-button));
+              transition: background-color ease-in-out var(--neon-animation-speed-slow);
+
+              &:focus,
+              &:hover {
+                background: rgba(var(--neon-rgb-#{$color}), var(--neon-opacity-badge-editable-button-hover));
+              }
+            }
+          }
+        }
+      }
+
+      &:not(.neon-badge--disabled) {
+        &.neon-badge--with-icon,
+        &.neon-badge--with-label {
+          .neon-badge__label,
+          .neon-badge__icon {
+            opacity: var(--neon-opacity-badge-editable-content);
+          }
+        }
+      }
+    }
+
     &--disabled {
       color: var(--neon-color-disabled-text);
       background: var(--neon-color-disabled-background);
       cursor: not-allowed;
+
+      &.neon-badge--editable {
+        .neon-button {
+          background: rgba(var(--neon-rgb-disabled-background), 0.75);
+
+          svg {
+            display: none;
+          }
+        }
+      }
     }
 
     $neon-badge-sizes: (s, m, l, xl, xxl);
@@ -44,7 +121,9 @@
         &,
         .neon-badge__image {
           width: var(--neon-size-#{$badge-size}-badge);
+          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;
         }
 

package/src/sass/components/_image-carousel.scss

@@ -1,12 +1,17 @@
+@use '../includes/layout';
 @use '../includes/outline';
 @use '../includes/responsive';
 @use '../includes/scrollbars';
+@use '../includes/svg';
 
 @mixin image-carousel {
   .neon-image-carousel {
     user-select: none;
+    transition: backdrop-filter ease-in-out var(--neon-animation-speed-fast);
+    width: 100%;
+    height: 100%;
 
-    &:focus {
+    &:focus-visible {
       outline: none;
       @include outline.box-shadow-outline(var(--neon-rgb-high-contrast));
     }
@@ -14,10 +19,11 @@
     .neon-image-carousel__container {
       flex-direction: row;
       align-items: center;
+      flex: 1 1 auto;
       gap: var(--neon-space-16);
-      height: calc(100% - 60rem);
+      min-height: 0;
 
-      &:focus {
+      &:focus-visible {
         outline: none;
       }
     }
@@ -25,20 +31,24 @@
     .neon-image-carousel__items {
       display: flex;
       flex-direction: row;
-      max-height: 100%;
+      width: 100%;
+      height: 100%;
       overflow-x: auto;
       scroll-snap-type: x mandatory;
       overscroll-behavior-x: contain;
 
       @include scrollbars.hide-scrollbars();
 
-      &:focus {
+      &:focus-visible {
         outline: none;
       }
     }
 
     .neon-image-carousel__item {
       display: flex;
+      flex-direction: column;
+      gap: var(--neon-space-8);
+      justify-content: center;
       min-width: 100%;
       padding: var(--neon-space-2);
       scroll-snap-align: start;
@@ -46,21 +56,29 @@
       opacity: 0;
       transition: opacity ease-in-out var(--neon-animation-speed-fast);
 
-      &-wrapper {
-        width: 100%;
-        height: 100%;
+      &-title {
+        text-align: center;
+        font-weight: var(--neon-font-weight-normal);
+        font-size: var(--neon-font-size-m);
+        font-style: italic;
+        color: var(--neon-color-image-carousel-expanded-button);
+        margin-left: auto;
+        margin-right: auto;
+        padding: 0 var(--neon-space-16);
+        text-shadow: var(--neon-text-shadow-image-carousel-expanded);
       }
     }
 
     .neon-image-carousel__image {
-      margin: auto;
-      min-width: 100%;
-      max-height: 100%;
       object-fit: contain;
+      cursor: pointer;
+      max-width: 100%;
+      max-height: 100%;
+      min-height: 0;
     }
 
     .neon-image-carousel__nav {
-      padding-top: var(--neon-space-24);
+      padding-top: var(--neon-space-12);
 
       flex-direction: row;
       flex-wrap: wrap;
@@ -90,11 +108,11 @@
         margin-left: var(--neon-image-carousel-swipe-distance);
       }
 
-      &:focus {
+      &:focus-visible {
         outline: none;
       }
 
-      &-link:focus {
+      &-link:focus-visible {
         outline: none;
 
         .neon-image-carousel__nav-item-indicator {
@@ -119,6 +137,83 @@
         display: none;
       }
     }
+
+    &.neon-image-carousel--expanded {
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100vw;
+      @include layout.height(100);
+      max-width: 100%;
+      max-height: 100%;
+      background-color: var(--neon-background-color-overlay);
+      z-index: var(--neon-z-index-top);
+      -webkit-backdrop-filter: blur(var(--neon-blur-radius-image-carousel));
+      backdrop-filter: blur(var(--neon-blur-radius-image-carousel));
+      gap: var(--neon-space-8);
+
+      .neon-image-carousel__container {
+        padding-top: var(--neon-gutter);
+        max-height: 100%;
+        min-height: 0;
+        height: 100%;
+
+        .neon-button {
+          &:not(:disabled) {
+            @include svg.color-with-svg(var(--neon-color-image-carousel-expanded-button));
+
+            &:hover,
+            &:focus-visible {
+              background-color: var(--neon-background-color-image-carousel-expanded-button);
+            }
+          }
+
+          &:disabled {
+            @include svg.color-with-svg(var(--neon-color-image-carousel-expanded-button-disabled));
+          }
+        }
+      }
+
+      .neon-image-carousel__image {
+        cursor: default;
+      }
+
+      .neon-image-carousel__close {
+        position: absolute;
+        top: 0;
+        right: 0;
+        border-radius: 0;
+      }
+
+      .neon-image-carousel__label {
+        font-size: var(--neon-font-size-m);
+        line-height: var(--neon-line-height-ratio);
+        color: var(--neon-color-image-carousel-expanded-label);
+        text-shadow: var(--neon-text-shadow-image-carousel-expanded);
+      }
+
+      .neon-image-carousel__nav-container {
+        padding-bottom: var(--neon-gutter);
+
+      }
+
+      .neon-image-carousel__nav-item {
+        width: 24rem;
+        height: 24rem;
+
+        &-indicator {
+          width: 12rem;
+          height: 12rem;
+          border-color: var(--neon-color-image-carousel-expanded-button);
+        }
+
+        &--active {
+          .neon-image-carousel__nav-item-indicator {
+            background-color: var(--neon-color-image-carousel-expanded-button);
+          }
+        }
+      }
+    }
   }
 
   .neon-image-carousel--initialised {

package/src/sass/components/_stepper.scss

@@ -1,4 +1,5 @@
 @use '../includes/palettes';
+@use '../includes/outline';
 
 @mixin stepper {
   .neon-stepper {
@@ -60,12 +61,11 @@
           height: var(--neon-space-10);
 
           svg {
-            path,
-            circle {
+            .neon-svg--fill {
               fill: var(--neon-color-stepper-indicator);
             }
 
-            circle {
+            .neon-svg--stroke {
               stroke: var(--neon-color-stepper-indicator);
             }
           }
@@ -113,6 +113,11 @@
         .neon-stepper__step--has-value {
           .neon-stepper__step-indicator {
             background: var(--neon-color-#{$color});
+
+            &:focus {
+              outline: none;
+              @include outline.box-shadow-outline(var(--neon-rgb-#{$color}));
+            }
           }
         }
 

package/src/sass/components/_toggle.scss

@@ -19,7 +19,7 @@
       justify-content: center;
       white-space: nowrap;
 
-      &:focus {
+      &:focus-visible {
         outline: none;
       }
 
@@ -75,6 +75,7 @@
       }
     }
 
+    &--card,
     &--radio-buttons {
       align-items: flex-start;
 
@@ -89,22 +90,22 @@
 
           .neon-toggle__label:not(.neon-toggle__label--disabled) {
             .neon-toggle__radio-button {
-              border: var(--neon-border-radio-button);
+              border: var(--neon-border-width) var(--neon-border-style) var(--neon-color-#{$color});
               background: var(--neon-background-radio-button);
             }
 
             color: var(--neon-color-radio-button-label);
 
             &:hover,
-            &:focus {
+            &:focus-visible {
               &:not(.neon-toggle__label--checked) {
                 .neon-toggle__radio-button {
-                  background: var(--neon-color-radio-button-bg-active);
+                  background: rgba(var(--neon-rgb-#{$color}), 0.125);
                 }
               }
             }
 
-            &:focus {
+            &:focus-visible {
               border-bottom-color: var(--neon-color-#{$color});
             }
 
@@ -124,6 +125,16 @@
         }
       }
 
+      &.neon-toggle--card {
+        .neon-toggle__label {
+          &.neon-toggle__label--checked,
+          &.neon-toggle__label:hover,
+          &.neon-toggle__label:focus-visible {
+            border-color: var(--neon-color-#{$color});
+          }
+        }
+      }
+
       &.neon-toggle--disabled .neon-toggle__label,
       .neon-toggle__label--disabled {
         color: var(--neon-color-disabled-text);
@@ -140,12 +151,24 @@
       }
     }
 
+    &--card {
+      gap: var(--neon-space-16);
+
+      .neon-toggle__label {
+        padding: var(--neon-space-16);
+        border: var(--neon-border-width-input) var(--neon-border-style) var(--neon-border-color-input);
+        width: 100%;
+        border-radius: var(--neon-border-radius-input);
+      }
+    }
+
     &--horizontal {
       flex-direction: row;
       gap: var(--neon-space-24);
     }
 
-    &--disabled {
+    &--disabled,
+    &--disabled .neon-toggle__label {
       cursor: not-allowed;
     }
   }

package/src/sass/includes/_dependencies.scss

@@ -11,7 +11,7 @@
           NeonIcon,
           NeonLink],
           NeonAnchor: [],
-          NeonBadge: [NeonIcon],
+          NeonBadge: [NeonIcon, NeonFile, NeonButton, NeonInput, NeonList, NeonExpansionIndicator, NeonIcon, NeonLink],
           NeonButton: [NeonExpansionIndicator,
           NeonIcon,
           NeonLink],

package/src/sass/variables.scss

@@ -1,3 +1,4 @@
+@use './includes/responsive';
 @import './palette';
 @import './color-variables';
 
@@ -18,6 +19,18 @@
   --neon-gutter-tablet: 24rem;
   --neon-gutter-mobile: 16rem;
 
+  @include responsive.responsive(larger-than-tablet) {
+    --neon-gutter: var(--neon-gutter-desktop);
+  }
+
+  @include responsive.responsive(tablet) {
+    --neon-gutter: var(--neon-gutter-tablet);
+  }
+
+  @include responsive.responsive(mobile-large) {
+    --neon-gutter: var(--neon-gutter-mobile);
+  }
+
   /* spacings */
   --neon-space-1: calc(0.25 * var(--neon-base-space));
   --neon-space-2: calc(0.5 * var(--neon-base-space));
@@ -327,6 +340,9 @@
   --neon-size-l-badge: var(--neon-size-l);
   --neon-size-xl-badge: var(--neon-size-xl);
   --neon-size-xxl-badge: var(--neon-size-xxl);
+  --neon-opacity-badge-editable-button: 0.33;
+  --neon-opacity-badge-editable-button-hover: 0.66;
+  --neon-opacity-badge-editable-content: 0.33;
 
   /* color input */
   --neon-border-radius-input-color: 50%;
@@ -346,6 +362,9 @@
   /* card list */
   --neon-border-radius-card-list: calc(1.5 * var(--neon-base-space));
 
+  /* image carousel */
+  --neon-blur-radius-image-carousel: 5px;
+
   /**********************
   * DARK THEME VARIABLES
   **********************/
@@ -530,7 +549,6 @@
 
     /* radio buttons */
     --neon-background-radio-button: none;
-    --neon-border-radio-button: var(--neon-border-width) var(--neon-border-style) var(--neon-color-neutral-d2);
     --neon-color-radio-button-bg-active: rgba(var(--neon-rgb-neutral-l3), 0.125);
     --neon-color-radio-button-label: var(--neon-color-label);
 
@@ -650,6 +668,13 @@
     --neon-background-color-swiper: var(--neon-background-color-card);
   }
 
+  /* image carousel */
+  --neon-color-image-carousel-expanded-button: var(--neon-color-text-primary);
+  --neon-color-image-carousel-expanded-button-disabled: var(--neon-color-low-contrast-d4);
+  --neon-background-color-image-carousel-expanded-button: var(--neon-color-low-contrast-d5);
+  --neon-color-image-carousel-expanded-label: var(--neon-color-text-tertiary);
+  --neon-text-shadow-image-carousel-expanded: 1px 1px 2px var(--neon-color-inverse);
+
   /*********************
   * LIGHT THEME VARIABLES
   *********************/
@@ -837,7 +862,6 @@
 
     /* radio buttons */
     --neon-background-radio-button: none;
-    --neon-border-radio-button: var(--neon-border-width) var(--neon-border-style) var(--neon-color-neutral-l3);
     --neon-color-radio-button-bg-active: rgba(var(--neon-rgb-neutral-l3), 0.25);
     --neon-color-radio-button-label: var(--neon-color-label);
 
@@ -956,5 +980,12 @@
 
     /* swiper */
     --neon-background-color-swiper: var(--neon-background-color-card);
+
+    /* image carousel */
+    --neon-color-image-carousel-expanded-button: var(--neon-color-inverse);
+    --neon-color-image-carousel-expanded-button-disabled: var(--neon-color-low-contrast-d2);
+    --neon-background-color-image-carousel-expanded-button: var(--neon-color-low-contrast-d3);
+    --neon-color-image-carousel-expanded-label: var(--neon-color-text-tertiary-dark);
+    --neon-text-shadow-image-carousel-expanded: 1px 1px 2px var(--neon-color-text-primary);
   }
 }