@aotearoan/neon 23.2.3 → 23.2.5

package/dist/src/components/user-input/select/NeonSelect.d.ts

@@ -359,33 +359,48 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                 };
                 id: {
                     type: StringConstructor;
-                    default: null;
-                };
+                    default: null; /**
+                     * Display the placeholder as the first option in the select, this is useful as an alternative to a label.
+                     */
+                }; /**
+                 * Display the placeholder as the first option in the select, this is useful as an alternative to a label.
+                 */
                 size: {
                     type: () => NeonSize;
                     default: NeonSize;
                 };
                 state: {
                     type: () => import("../../../neon").NeonState;
-                    default: import("../../../neon").NeonState;
-                };
+                    default: import("../../../neon").NeonState; /**
+                     * A list of options to render in the select.
+                     */
+                }; /**
+                 * A list of options to render in the select.
+                 */
                 color: {
                     type: () => NeonFunctionalColor;
                     default: NeonFunctionalColor;
+                }; /**
+                 * A list of grouped options to render in the select.
+                 */
+                buttonStyle: {
+                    type: () => import("../../../neon").NeonButtonStyle;
+                    default: import("../../../neon").NeonButtonStyle;
                 };
                 circular: {
                     type: BooleanConstructor;
                     default: null;
                 };
                 label: {
-                    type: StringConstructor; /**
-                     * Either a single string, indicating the key of the selected option or an array of selected keys in the case
-                     * multiple = true.
+                    type: StringConstructor;
+                    default: null; /**
+                     * Allow multi-select.
                      */
-                    default: null;
                 };
                 icon: {
-                    type: StringConstructor;
+                    type: StringConstructor; /**
+                     * Placeholder when multiple values are selected.
+                     */
                     default: null;
                 };
                 title: {
@@ -1073,33 +1088,48 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                 };
                 id: {
                     type: StringConstructor;
-                    default: null;
-                };
+                    default: null; /**
+                     * Display the placeholder as the first option in the select, this is useful as an alternative to a label.
+                     */
+                }; /**
+                 * Display the placeholder as the first option in the select, this is useful as an alternative to a label.
+                 */
                 size: {
                     type: () => NeonSize;
                     default: NeonSize;
                 };
                 state: {
                     type: () => import("../../../neon").NeonState;
-                    default: import("../../../neon").NeonState;
-                };
+                    default: import("../../../neon").NeonState; /**
+                     * A list of options to render in the select.
+                     */
+                }; /**
+                 * A list of options to render in the select.
+                 */
                 color: {
                     type: () => NeonFunctionalColor;
                     default: NeonFunctionalColor;
+                }; /**
+                 * A list of grouped options to render in the select.
+                 */
+                buttonStyle: {
+                    type: () => import("../../../neon").NeonButtonStyle;
+                    default: import("../../../neon").NeonButtonStyle;
                 };
                 circular: {
                     type: BooleanConstructor;
                     default: null;
                 };
                 label: {
-                    type: StringConstructor; /**
-                     * Either a single string, indicating the key of the selected option or an array of selected keys in the case
-                     * multiple = true.
+                    type: StringConstructor;
+                    default: null; /**
+                     * Allow multi-select.
                      */
-                    default: null;
                 };
                 icon: {
-                    type: StringConstructor;
+                    type: StringConstructor; /**
+                     * Placeholder when multiple values are selected.
+                     */
                     default: null;
                 };
                 title: {
@@ -1116,6 +1146,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                 size: NeonSize;
                 color: NeonFunctionalColor;
                 id: string;
+                buttonStyle: import("../../../neon").NeonButtonStyle;
                 state: import("../../../neon").NeonState;
                 circular: boolean;
                 directUpload: boolean;
@@ -1812,6 +1843,12 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                         inverse: boolean;
                     }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
                 }, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+                /**
+                 * <p>The <strong>NeonSelect</strong> is the equivalent of an HTML &lt;select&gt; form control. On touch devices
+                 * NeonSelect will use the native select for input. <strong>NeonSelect</strong> supports grouping and multiselect.</p>
+                 * <p><strong>Note:</strong> As well as the options described below, pass through attributes supported by
+                 * <a href="/presentation/dropdown">NeonDropdown</a> to change the style of the dropdown button.</p>
+                 */
                 NeonList: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
                     modelValue: {
                         type: () => import("../../../neon").NeonListItem[];
@@ -2791,33 +2828,48 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                 };
                 id: {
                     type: StringConstructor;
-                    default: null;
-                };
+                    default: null; /**
+                     * Display the placeholder as the first option in the select, this is useful as an alternative to a label.
+                     */
+                }; /**
+                 * Display the placeholder as the first option in the select, this is useful as an alternative to a label.
+                 */
                 size: {
                     type: () => NeonSize;
                     default: NeonSize;
                 };
                 state: {
                     type: () => import("../../../neon").NeonState;
-                    default: import("../../../neon").NeonState;
-                };
+                    default: import("../../../neon").NeonState; /**
+                     * A list of options to render in the select.
+                     */
+                }; /**
+                 * A list of options to render in the select.
+                 */
                 color: {
                     type: () => NeonFunctionalColor;
                     default: NeonFunctionalColor;
+                }; /**
+                 * A list of grouped options to render in the select.
+                 */
+                buttonStyle: {
+                    type: () => import("../../../neon").NeonButtonStyle;
+                    default: import("../../../neon").NeonButtonStyle;
                 };
                 circular: {
                     type: BooleanConstructor;
                     default: null;
                 };
                 label: {
-                    type: StringConstructor; /**
-                     * Either a single string, indicating the key of the selected option or an array of selected keys in the case
-                     * multiple = true.
+                    type: StringConstructor;
+                    default: null; /**
+                     * Allow multi-select.
                      */
-                    default: null;
                 };
                 icon: {
-                    type: StringConstructor;
+                    type: StringConstructor; /**
+                     * Placeholder when multiple values are selected.
+                     */
                     default: null;
                 };
                 title: {
@@ -3505,33 +3557,48 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                 };
                 id: {
                     type: StringConstructor;
-                    default: null;
-                };
+                    default: null; /**
+                     * Display the placeholder as the first option in the select, this is useful as an alternative to a label.
+                     */
+                }; /**
+                 * Display the placeholder as the first option in the select, this is useful as an alternative to a label.
+                 */
                 size: {
                     type: () => NeonSize;
                     default: NeonSize;
                 };
                 state: {
                     type: () => import("../../../neon").NeonState;
-                    default: import("../../../neon").NeonState;
-                };
+                    default: import("../../../neon").NeonState; /**
+                     * A list of options to render in the select.
+                     */
+                }; /**
+                 * A list of options to render in the select.
+                 */
                 color: {
                     type: () => NeonFunctionalColor;
                     default: NeonFunctionalColor;
+                }; /**
+                 * A list of grouped options to render in the select.
+                 */
+                buttonStyle: {
+                    type: () => import("../../../neon").NeonButtonStyle;
+                    default: import("../../../neon").NeonButtonStyle;
                 };
                 circular: {
                     type: BooleanConstructor;
                     default: null;
                 };
                 label: {
-                    type: StringConstructor; /**
-                     * Either a single string, indicating the key of the selected option or an array of selected keys in the case
-                     * multiple = true.
+                    type: StringConstructor;
+                    default: null; /**
+                     * Allow multi-select.
                      */
-                    default: null;
                 };
                 icon: {
-                    type: StringConstructor;
+                    type: StringConstructor; /**
+                     * Placeholder when multiple values are selected.
+                     */
                     default: null;
                 };
                 title: {
@@ -3548,6 +3615,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                 size: NeonSize;
                 color: NeonFunctionalColor;
                 id: string;
+                buttonStyle: import("../../../neon").NeonButtonStyle;
                 state: import("../../../neon").NeonState;
                 circular: boolean;
                 directUpload: boolean;
@@ -4244,6 +4312,12 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                         inverse: boolean;
                     }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
                 }, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+                /**
+                 * <p>The <strong>NeonSelect</strong> is the equivalent of an HTML &lt;select&gt; form control. On touch devices
+                 * NeonSelect will use the native select for input. <strong>NeonSelect</strong> supports grouping and multiselect.</p>
+                 * <p><strong>Note:</strong> As well as the options described below, pass through attributes supported by
+                 * <a href="/presentation/dropdown">NeonDropdown</a> to change the style of the dropdown button.</p>
+                 */
                 NeonList: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
                     modelValue: {
                         type: () => import("../../../neon").NeonListItem[];
@@ -5412,33 +5486,48 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                 };
                 id: {
                     type: StringConstructor;
-                    default: null;
-                };
+                    default: null; /**
+                     * Display the placeholder as the first option in the select, this is useful as an alternative to a label.
+                     */
+                }; /**
+                 * Display the placeholder as the first option in the select, this is useful as an alternative to a label.
+                 */
                 size: {
                     type: () => NeonSize;
                     default: NeonSize;
                 };
                 state: {
                     type: () => import("../../../neon").NeonState;
-                    default: import("../../../neon").NeonState;
-                };
+                    default: import("../../../neon").NeonState; /**
+                     * A list of options to render in the select.
+                     */
+                }; /**
+                 * A list of options to render in the select.
+                 */
                 color: {
                     type: () => NeonFunctionalColor;
                     default: NeonFunctionalColor;
+                }; /**
+                 * A list of grouped options to render in the select.
+                 */
+                buttonStyle: {
+                    type: () => import("../../../neon").NeonButtonStyle;
+                    default: import("../../../neon").NeonButtonStyle;
                 };
                 circular: {
                     type: BooleanConstructor;
                     default: null;
                 };
                 label: {
-                    type: StringConstructor; /**
-                     * Either a single string, indicating the key of the selected option or an array of selected keys in the case
-                     * multiple = true.
+                    type: StringConstructor;
+                    default: null; /**
+                     * Allow multi-select.
                      */
-                    default: null;
                 };
                 icon: {
-                    type: StringConstructor;
+                    type: StringConstructor; /**
+                     * Placeholder when multiple values are selected.
+                     */
                     default: null;
                 };
                 title: {
@@ -6126,33 +6215,48 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                 };
                 id: {
                     type: StringConstructor;
-                    default: null;
-                };
+                    default: null; /**
+                     * Display the placeholder as the first option in the select, this is useful as an alternative to a label.
+                     */
+                }; /**
+                 * Display the placeholder as the first option in the select, this is useful as an alternative to a label.
+                 */
                 size: {
                     type: () => NeonSize;
                     default: NeonSize;
                 };
                 state: {
                     type: () => import("../../../neon").NeonState;
-                    default: import("../../../neon").NeonState;
-                };
+                    default: import("../../../neon").NeonState; /**
+                     * A list of options to render in the select.
+                     */
+                }; /**
+                 * A list of options to render in the select.
+                 */
                 color: {
                     type: () => NeonFunctionalColor;
                     default: NeonFunctionalColor;
+                }; /**
+                 * A list of grouped options to render in the select.
+                 */
+                buttonStyle: {
+                    type: () => import("../../../neon").NeonButtonStyle;
+                    default: import("../../../neon").NeonButtonStyle;
                 };
                 circular: {
                     type: BooleanConstructor;
                     default: null;
                 };
                 label: {
-                    type: StringConstructor; /**
-                     * Either a single string, indicating the key of the selected option or an array of selected keys in the case
-                     * multiple = true.
+                    type: StringConstructor;
+                    default: null; /**
+                     * Allow multi-select.
                      */
-                    default: null;
                 };
                 icon: {
-                    type: StringConstructor;
+                    type: StringConstructor; /**
+                     * Placeholder when multiple values are selected.
+                     */
                     default: null;
                 };
                 title: {
@@ -6169,6 +6273,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                 size: NeonSize;
                 color: NeonFunctionalColor;
                 id: string;
+                buttonStyle: import("../../../neon").NeonButtonStyle;
                 state: import("../../../neon").NeonState;
                 circular: boolean;
                 directUpload: boolean;
@@ -6865,6 +6970,12 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                         inverse: boolean;
                     }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
                 }, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+                /**
+                 * <p>The <strong>NeonSelect</strong> is the equivalent of an HTML &lt;select&gt; form control. On touch devices
+                 * NeonSelect will use the native select for input. <strong>NeonSelect</strong> supports grouping and multiselect.</p>
+                 * <p><strong>Note:</strong> As well as the options described below, pass through attributes supported by
+                 * <a href="/presentation/dropdown">NeonDropdown</a> to change the style of the dropdown button.</p>
+                 */
                 NeonList: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
                     modelValue: {
                         type: () => import("../../../neon").NeonListItem[];

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

package/src/sass/components/_banner.scss

@@ -12,6 +12,10 @@
       --neon-font-weight-strong: var(--neon-font-weight-semi-bold);
     }
 
+    .neon-note__container {
+      padding: var(--neon-padding-note) 0;
+    }
+
     .neon-note__content {
       width: 100%;
       max-width: calc(var(--neon-max-width-page));
@@ -21,6 +25,7 @@
       align-items: center;
       gap: var(--neon-space-24);
       padding: 0 var(--neon-gutter);
+      margin: auto;
     }
   }
 }

package/src/sass/components/_drop-zone.scss

@@ -2,23 +2,17 @@
 
 @mixin drop-zone {
   .neon-drop-zone {
-    border: var(--neon-space-2) dashed rgba(var(--neon-rgb-drop-zone), 0.5);
+    border: var(--neon-border-drop-zone);
     border-radius: var(--neon-border-radius);
     @include layout.padding(1, true);
     cursor: copy;
-    background-color: rgba(var(--neon-rgb-drop-zone-background), 0.5);
-    color: rgba(var(--neon-rgb-drop-zone), 0.5);
+    background-color: var(--neon-background-color-drop-zone);
+    color: var(--neon-color-drop-zone);
     transition: background-color ease-in-out var(--neon-animation-speed-fast), color ease-in-out var(--neon-animation-speed-fast),
     border-left-color ease-in-out var(--neon-animation-speed-fast), border-top-color ease-in-out var(--neon-animation-speed-fast),
     border-bottom-color ease-in-out var(--neon-animation-speed-fast),
     border-right-color ease-in-out var(--neon-animation-speed-fast);
 
-    &--active:not(.neon-drop-zone--disabled),
-    &:hover:not(.neon-drop-zone--disabled) {
-      border-color: rgb(var(--neon-rgb-drop-zone));
-      color: rgb(var(--neon-rgb-drop-zone));
-    }
-
     &--circular {
       border-radius: 50%;
     }
@@ -37,6 +31,7 @@
     &__container {
       justify-content: center;
       align-items: center;
+      text-align: center;
     }
   }
 }

package/src/sass/components/_field.scss

@@ -39,6 +39,7 @@
         bottom: 0;
         font-size: var(--neon-font-size-s);
         min-height: calc(var(--neon-font-size-s) * var(--neon-line-height-ratio));
+        height: 100%;
         text-transform: none;
         letter-spacing: initial;
         font-weight: var(--neon-font-weight-normal);

package/src/sass/components/_file.scss

@@ -45,6 +45,14 @@
       }
     }
 
+    &--direct-upload {
+      width: fit-content;
+
+      .neon-file__actions {
+        width: fit-content;
+      }
+    }
+
     gap: var(--neon-space-16);
   }
 }

package/src/sass/components/_icon.scss

@@ -7,6 +7,22 @@
     flex-direction: row;
     align-items: center;
     justify-content: center;
+
+    .neon-svg--fill-inverse {
+      fill: var(--neon-color-inverse);
+    }
+
+    .neon-svg--stroke-inverse {
+      stroke: var(--neon-color-inverse);
+    }
+
+    .neon-svg--fill-text {
+      fill: var(--neon-color-text-primary);
+    }
+
+    .neon-svg--stroke-text {
+      stroke: var(--neon-color-text-primary);
+    }
   }
 
   $neon-icon-types: (neon-expansion-indicator, neon-icon);

package/src/sass/components/_page-container.scss

@@ -36,6 +36,8 @@
 
   @include responsive.responsive(mobile-large) {
     .neon-page-container {
+      min-height: 100%;
+
       &--hide-nav {
         min-height: 100%;
         --neon-height-mobile-menu: 0rem;

package/src/sass/components/_select.scss

@@ -10,6 +10,23 @@
       margin-left: auto;
     }
 
+    .neon-dropdown__button {
+      padding-left: var(--neon-space-8);
+      font-weight: var(--neon-font-weight-input);
+
+      &.neon-button--s {
+        font-size: var(--neon-font-size-input-s);
+      }
+
+      &.neon-button--m {
+        font-size: var(--neon-font-size-input-m);
+      }
+
+      &.neon-button--l {
+        font-size: var(--neon-font-size-input-l);
+      }
+    }
+
     @each $color in palettes.$neon-functional-colors {
       &--#{$color} {
         .neon-select__option {
@@ -32,7 +49,7 @@
 
     &--with-placeholder {
       .neon-dropdown__button {
-        color: var(--neon-color-placeholder);
+        color: rgba(var(--neon-rgb-placeholder), 0.6);
         font-style: var(--neon-font-style-placeholder);
         font-weight: var(--neon-font-weight-placeholder);
       }

package/src/sass/variables.scss

@@ -2,6 +2,12 @@
 @import './palette';
 @import './color-variables';
 
+@include responsive.responsive(mobile-large) {
+  body {
+    font-size: 17px; // don't use rems here - body font must be defined in pixels
+  }
+}
+
 .neon {
   /*********************
   * Global Variables
@@ -109,8 +115,12 @@
   --neon-base-font-size: 16rem;
   --neon-typography-margin-unit: var(--neon-space-8); // base typography bottom margin unit
 
-
   --neon-font-size-m: var(--neon-base-font-size);
+
+  @include responsive.responsive(mobile-large) {
+    --neon-font-size-m: 17rem;
+  }
+
   --neon-font-size-s: calc(var(--neon-font-size-m) / var(--neon-typography-scale));
   --neon-font-size-xs: calc(var(--neon-font-size-s) / var(--neon-typography-scale));
   --neon-font-size-xxs: calc(var(--neon-font-size-xs) / var(--neon-typography-scale));
@@ -380,19 +390,19 @@
   /* input */
   --neon-border-radius-input: var(--neon-border-radius);
   --neon-border-width-input: var(--neon-border-width);
-  --neon-font-size-placeholder: var(--neon-font-size-s);
+  --neon-font-size-placeholder: var(--neon-font-size-m);
   --neon-font-style-placeholder: italic;
   --neon-font-weight-placeholder: var(--neon-font-weight-normal);
   --neon-font-weight-input: var(--neon-font-weight-normal);
   --neon-line-height-input: var(--neon-line-height-ratio-large);
   --neon-opacity-input-background-active: 0.03125;
 
-  --neon-font-size-input-s: var(--neon-font-size-s);
+  --neon-font-size-input-s: var(--neon-font-size-m);
   --neon-font-size-input-m: var(--neon-font-size-m);
   --neon-font-size-input-l: var(--neon-font-size-m);
 
   /* input indicator */
-  --neon-font-size-input-indicator-s: var(--neon-font-size-s);
+  --neon-font-size-input-indicator-s: var(--neon-font-size-m);
   --neon-font-size-input-indicator-m: var(--neon-font-size-m);
   --neon-font-size-input-indicator-l: var(--neon-font-size-m);
   --neon-font-weight-input-indicator: var(--neon-font-weight-normal);
@@ -642,13 +652,16 @@
     --neon-color-input: var(--neon-color-text-secondary);
     --neon-border-color-input: var(--neon-border-color);
     --neon-background-color-input: rgba(var(--neon-rgb-neutral-d5), 0.5);
-    --neon-color-placeholder: var(--neon-color-low-contrast-d3);
+    --neon-rgb-placeholder: var(--neon-rgb-neutral-d1);
+    --neon-color-placeholder: var(--neon-color-neutral-d1);
+
     --neon-background-color-autofill: var(--neon-color-primary-d5);
     --neon-color-autofill: var(--neon-color-text-secondary);
 
     /* drop zone */
-    --neon-rgb-drop-zone-background: var(--neon-rgb-neutral-d5);
-    --neon-rgb-drop-zone: var(--neon-rgb-neutral-l1);
+    --neon-background-color-drop-zone: var(--neon-background-color-card);
+    --neon-color-drop-zone: var(--neon-color-text-secondary);
+    --neon-border-drop-zone: 1rem dashed var(--neon-border-color);
 
     /* alerts */
     --neon-box-shadow-alert: calc(0.5 * var(--neon-base-space)) calc(0.5 * var(--neon-base-space)) calc(2 * var(--neon-base-space)) var(--neon-color-neutral-d5);
@@ -712,7 +725,7 @@
     --neon-color-loading-3: rgba(82, 82, 82, 0.5);
 
     /* scrollbars */
-    --neon-color-scrollbar: rgba(255, 255, 255, 0.05);
+    --neon-color-scrollbar: rgba(255, 255, 255, 0.125);
 
     /* overlays */
     --neon-background-color-overlay: rgba(var(--neon-rgb-neutral-d5), 0.75);
@@ -961,13 +974,16 @@
     --neon-color-input: var(--neon-color-text-secondary);
     --neon-border-color-input: var(--neon-border-color);
     --neon-background-color-input: var(--neon-color-high-contrast-l5);
-    --neon-color-placeholder: var(--neon-color-low-contrast-l3);
+    --neon-rgb-placeholder: var(--neon-rgb-neutral-l1);
+    --neon-color-placeholder: var(--neon-color-neutral-l1);
+
     --neon-background-color-autofill: var(--neon-color-primary-l5);
     --neon-color-autofill: var(--neon-color-text-secondary);
 
     /* drop zone */
-    --neon-rgb-drop-zone-background: var(--neon-rgb-high-contrast-l4);
-    --neon-rgb-drop-zone: var(--neon-rgb-text-secondary);
+    --neon-background-color-drop-zone: var(--neon-background-color-card);
+    --neon-color-drop-zone: var(--neon-color-text-secondary);
+    --neon-border-drop-zone: 1rem dashed var(--neon-border-color);
 
     /* alerts */
     --neon-box-shadow-alert: calc(0.5 * var(--neon-base-space)) calc(0.5 * var(--neon-base-space)) calc(2 * var(--neon-base-space)) rgba(var(--neon-rgb-neutral-d1), 0.5);