@aotearoan/neon 21.0.2 → 22.0.0

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

@@ -111,27 +111,17 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     };
 }>, {
     dropdown: import("vue").Ref<import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("vue").ExtractPropTypes<{
-        /**
-         * Display the placeholder as the first option in the select, this is useful as an alternative to a label.
-         */
         id: {
             type: StringConstructor;
         };
         modelValue: {
             type: BooleanConstructor;
-            required: true; /**
-             * Optional placeholder icon.
-             */
-        }; /**
-         * Optional placeholder icon.
-         */
+            required: true;
+        };
         label: {
             type: StringConstructor;
             default: null;
         };
-        /**
-         * A list of options to render in the select.
-         */
         image: {
             type: StringConstructor;
             default: null;
@@ -172,11 +162,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             default: NeonDropdownStyle;
         };
         placement: {
-            type: () => NeonDropdownPlacement; /**
-             * emitted when the user changes the selection.
-             * @type {string | string[]} either the selected option's key (single select) or an array of the selected keys
-             * (multi-select).
-             */
+            type: () => NeonDropdownPlacement;
             default: NeonDropdownPlacement;
         };
         placementContainer: {
@@ -192,7 +178,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         onBlur?: ((...args: any[]) => any) | undefined;
         "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
         "onDropdown-placement"?: ((...args: any[]) => any) | undefined;
-        "onButton-ref"?: ((...args: any[]) => any) | undefined;
     }>, {
         dropdownButton: import("vue").Ref<HTMLElement | null, HTMLElement | null>;
         dropdownContent: import("vue").Ref<HTMLDivElement | null, HTMLDivElement | null>;
@@ -214,7 +199,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         toggleOpen: () => void;
         onBlur: () => void;
         onFocus: () => void;
-    }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "focus" | "blur" | "dropdown-placement" | "button-ref")[], import("vue").PublicProps, {
+    }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "focus" | "blur" | "dropdown-placement")[], import("vue").PublicProps, {
         disabled: boolean;
         label: string;
         placement: NeonDropdownPlacement;
@@ -817,27 +802,17 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         M: {};
         Defaults: {};
     }, Readonly<import("vue").ExtractPropTypes<{
-        /**
-         * Display the placeholder as the first option in the select, this is useful as an alternative to a label.
-         */
         id: {
             type: StringConstructor;
         };
         modelValue: {
             type: BooleanConstructor;
-            required: true; /**
-             * Optional placeholder icon.
-             */
-        }; /**
-         * Optional placeholder icon.
-         */
+            required: true;
+        };
         label: {
             type: StringConstructor;
             default: null;
         };
-        /**
-         * A list of options to render in the select.
-         */
         image: {
             type: StringConstructor;
             default: null;
@@ -878,11 +853,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             default: NeonDropdownStyle;
         };
         placement: {
-            type: () => NeonDropdownPlacement; /**
-             * emitted when the user changes the selection.
-             * @type {string | string[]} either the selected option's key (single select) or an array of the selected keys
-             * (multi-select).
-             */
+            type: () => NeonDropdownPlacement;
             default: NeonDropdownPlacement;
         };
         placementContainer: {
@@ -898,7 +869,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         onBlur?: ((...args: any[]) => any) | undefined;
         "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
         "onDropdown-placement"?: ((...args: any[]) => any) | undefined;
-        "onButton-ref"?: ((...args: any[]) => any) | undefined;
     }>, {
         dropdownButton: import("vue").Ref<HTMLElement | null, HTMLElement | null>;
         dropdownContent: import("vue").Ref<HTMLDivElement | null, HTMLDivElement | null>;
@@ -935,27 +905,17 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         dropdownStyle: NeonDropdownStyle;
         openOnHover: boolean;
     }> | null, import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("vue").ExtractPropTypes<{
-        /**
-         * Display the placeholder as the first option in the select, this is useful as an alternative to a label.
-         */
         id: {
             type: StringConstructor;
         };
         modelValue: {
             type: BooleanConstructor;
-            required: true; /**
-             * Optional placeholder icon.
-             */
-        }; /**
-         * Optional placeholder icon.
-         */
+            required: true;
+        };
         label: {
             type: StringConstructor;
             default: null;
         };
-        /**
-         * A list of options to render in the select.
-         */
         image: {
             type: StringConstructor;
             default: null;
@@ -996,11 +956,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             default: NeonDropdownStyle;
         };
         placement: {
-            type: () => NeonDropdownPlacement; /**
-             * emitted when the user changes the selection.
-             * @type {string | string[]} either the selected option's key (single select) or an array of the selected keys
-             * (multi-select).
-             */
+            type: () => NeonDropdownPlacement;
             default: NeonDropdownPlacement;
         };
         placementContainer: {
@@ -1016,7 +972,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         onBlur?: ((...args: any[]) => any) | undefined;
         "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
         "onDropdown-placement"?: ((...args: any[]) => any) | undefined;
-        "onButton-ref"?: ((...args: any[]) => any) | undefined;
     }>, {
         dropdownButton: import("vue").Ref<HTMLElement | null, HTMLElement | null>;
         dropdownContent: import("vue").Ref<HTMLDivElement | null, HTMLDivElement | null>;
@@ -1038,7 +993,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         toggleOpen: () => void;
         onBlur: () => void;
         onFocus: () => void;
-    }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "focus" | "blur" | "dropdown-placement" | "button-ref")[], import("vue").PublicProps, {
+    }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "focus" | "blur" | "dropdown-placement")[], import("vue").PublicProps, {
         disabled: boolean;
         label: string;
         placement: NeonDropdownPlacement;
@@ -1641,27 +1596,17 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         M: {};
         Defaults: {};
     }, Readonly<import("vue").ExtractPropTypes<{
-        /**
-         * Display the placeholder as the first option in the select, this is useful as an alternative to a label.
-         */
         id: {
             type: StringConstructor;
         };
         modelValue: {
             type: BooleanConstructor;
-            required: true; /**
-             * Optional placeholder icon.
-             */
-        }; /**
-         * Optional placeholder icon.
-         */
+            required: true;
+        };
         label: {
             type: StringConstructor;
             default: null;
         };
-        /**
-         * A list of options to render in the select.
-         */
         image: {
             type: StringConstructor;
             default: null;
@@ -1702,11 +1647,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             default: NeonDropdownStyle;
         };
         placement: {
-            type: () => NeonDropdownPlacement; /**
-             * emitted when the user changes the selection.
-             * @type {string | string[]} either the selected option's key (single select) or an array of the selected keys
-             * (multi-select).
-             */
+            type: () => NeonDropdownPlacement;
             default: NeonDropdownPlacement;
         };
         placementContainer: {
@@ -1722,7 +1663,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         onBlur?: ((...args: any[]) => any) | undefined;
         "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
         "onDropdown-placement"?: ((...args: any[]) => any) | undefined;
-        "onButton-ref"?: ((...args: any[]) => any) | undefined;
     }>, {
         dropdownButton: import("vue").Ref<HTMLElement | null, HTMLElement | null>;
         dropdownContent: import("vue").Ref<HTMLDivElement | null, HTMLDivElement | null>;
@@ -1885,27 +1825,17 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     placeholderAsOption: boolean;
 }, {}, {
     NeonDropdown: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-        /**
-         * Display the placeholder as the first option in the select, this is useful as an alternative to a label.
-         */
         id: {
             type: StringConstructor;
         };
         modelValue: {
             type: BooleanConstructor;
-            required: true; /**
-             * Optional placeholder icon.
-             */
-        }; /**
-         * Optional placeholder icon.
-         */
+            required: true;
+        };
         label: {
             type: StringConstructor;
             default: null;
         };
-        /**
-         * A list of options to render in the select.
-         */
         image: {
             type: StringConstructor;
             default: null;
@@ -1946,11 +1876,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             default: NeonDropdownStyle;
         };
         placement: {
-            type: () => NeonDropdownPlacement; /**
-             * emitted when the user changes the selection.
-             * @type {string | string[]} either the selected option's key (single select) or an array of the selected keys
-             * (multi-select).
-             */
+            type: () => NeonDropdownPlacement;
             default: NeonDropdownPlacement;
         };
         placementContainer: {
@@ -1982,28 +1908,18 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         toggleOpen: () => void;
         onBlur: () => void;
         onFocus: () => void;
-    }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "focus" | "blur" | "dropdown-placement" | "button-ref")[], "update:modelValue" | "focus" | "blur" | "dropdown-placement" | "button-ref", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-        /**
-         * Display the placeholder as the first option in the select, this is useful as an alternative to a label.
-         */
+    }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "focus" | "blur" | "dropdown-placement")[], "update:modelValue" | "focus" | "blur" | "dropdown-placement", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
         id: {
             type: StringConstructor;
         };
         modelValue: {
             type: BooleanConstructor;
-            required: true; /**
-             * Optional placeholder icon.
-             */
-        }; /**
-         * Optional placeholder icon.
-         */
+            required: true;
+        };
         label: {
             type: StringConstructor;
             default: null;
         };
-        /**
-         * A list of options to render in the select.
-         */
         image: {
             type: StringConstructor;
             default: null;
@@ -2044,11 +1960,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             default: NeonDropdownStyle;
         };
         placement: {
-            type: () => NeonDropdownPlacement; /**
-             * emitted when the user changes the selection.
-             * @type {string | string[]} either the selected option's key (single select) or an array of the selected keys
-             * (multi-select).
-             */
+            type: () => NeonDropdownPlacement;
             default: NeonDropdownPlacement;
         };
         placementContainer: {
@@ -2064,7 +1976,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         onBlur?: ((...args: any[]) => any) | undefined;
         "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
         "onDropdown-placement"?: ((...args: any[]) => any) | undefined;
-        "onButton-ref"?: ((...args: any[]) => any) | undefined;
     }>, {
         disabled: boolean;
         label: string;

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

@@ -65,7 +65,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     };
 }>, {
     selectOption: (option: NeonToggleModel) => void;
-    onInput: (key: string) => void;
+    onInput: (option: NeonToggleModel) => void;
     sanitizedAttributes: import("vue").ComputedRef<{
         [x: string]: unknown;
     }>;

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

package/src/sass/components/_badge.scss

@@ -45,6 +45,7 @@
         .neon-badge__image {
           width: var(--neon-size-#{$badge-size}-badge);
           height: var(--neon-size-#{$badge-size}-badge);
+          object-fit: cover;
         }
 
         .neon-icon {

package/src/sass/components/_card.scss

@@ -35,7 +35,7 @@
   .neon-card-body,
   .neon-card-footer {
     &:not(:last-child) {
-      border-right: var(--neon-border);
+      border-right: var(--neon-border-card);
     }
   }
 }
@@ -45,7 +45,7 @@
     position: relative;
     border-radius: var(--neon-border-radius-card);
     border: var(--neon-border-card);
-    box-shadow: var(--neon-card-box-shadow);
+    box-shadow: var(--neon-box-shadow-card);
 
     &--s {
       & > .neon-card-header,
@@ -164,11 +164,11 @@
 
     .neon-card-body--full-width {
       padding: 0;
-      width: calc(100% + var(--neon-border-width));
+      width: calc(100% + var(--neon-border-width-card));
 
       img {
-        margin-left: calc(-1 * var(--neon-border-width));
-        margin-right: calc(-1 * var(--neon-border-width));
+        margin-left: calc(-1 * var(--neon-border-width-card));
+        margin-right: calc(-1 * var(--neon-border-width-card));
       }
 
       &:not(:first-child) {
@@ -178,8 +178,8 @@
       }
 
       & > * {
-        max-width: calc(100% + var(--neon-border-width));
-        width: calc(100% + var(--neon-border-width));
+        max-width: calc(100% + var(--neon-border-width-card));
+        width: calc(100% + var(--neon-border-width-card));
       }
 
       &:first-child {

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

@@ -9,14 +9,13 @@
     display: flex;
     flex-direction: column;
     flex: 1 1 auto;
+    gap: var(--neon-gap-skeleton-loader);
 
     &__item {
       display: flex;
       flex: 1 1 auto;
-      width: 100%;
-      min-height: var(--neon-font-size-m);
-      margin-top: var(--neon-space-4);
-      margin-bottom: var(--neon-space-4);
+      width: var(--neon-width-skeleton-loader);
+      min-height: var(--neon-height-skeleton-loader);
       border-radius: var(--neon-border-radius-skeleton-loader);
       position: relative;
       overflow: hidden;

package/src/sass/components/_slider.scss

@@ -111,7 +111,7 @@ $neon-width-slider-tooltip: 201rem;
         letter-spacing: 0;
         padding: var(--neon-space-8);
         border-radius: var(--neon-border-radius-slider-tooltip);
-        box-shadow: var(--neon-card-box-shadow);
+        box-shadow: var(--neon-box-shadow-slider);
         color: var(--neon-color-inverse);
 
         &:after {

package/src/sass/components/_toggle.scss

@@ -18,7 +18,6 @@
       align-items: center;
       justify-content: center;
       white-space: nowrap;
-      border: var(--neon-border-toggle);
 
       &:focus {
         outline: none;
@@ -31,6 +30,7 @@
 
     &--toggle {
       .neon-toggle__label {
+        border: var(--neon-border-toggle);
         padding: var(--neon-space-8) var(--neon-space-12);
       }
 
@@ -97,11 +97,17 @@
 
             &:hover,
             &:focus {
-              .neon-toggle__radio-button {
-                background: var(--neon-color-radio-button-bg-active);
+              &:not(.neon-toggle__label--checked) {
+                .neon-toggle__radio-button {
+                  background: var(--neon-color-radio-button-bg-active);
+                }
               }
             }
 
+            &:focus {
+              border-bottom-color: var(--neon-color-#{$color});
+            }
+
             &.neon-toggle__label--checked {
               color: var(--neon-color-text-secondary);
 

package/src/sass/variables.scss

@@ -186,8 +186,8 @@
   --neon-side-nav-width: calc(80 * var(--neon-space-4));
 
   /* card */
-  --neon-border-radius-card: 12rem;
-  --neon-card-box-shadow: none;
+  --neon-border-width-card: 0;
+  --neon-box-shadow-card: none;
 
   /* checkbox */
   --neon-border-width-checkbox: 1rem;
@@ -295,7 +295,10 @@
   --neon-opacity-input-background-active: 0.03125;
 
   /* skeleton loader */
-  --neon-border-radius-skeleton-loader: 12rem;
+  --neon-border-radius-skeleton-loader: 0rem;
+  --neon-height-skeleton-loader: var(--neon-size-m);
+  --neon-width-skeleton-loader: 100%;
+  --neon-gap-skeleton-loader: 5rem;
 
   /* expansion panel */
   --neon-border-width-expansion-panel: 1rem;
@@ -518,8 +521,8 @@
     /* 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.375);
-    --neon-color-radio-button-label: var(--neon-color-neutral-d3);
+    --neon-color-radio-button-bg-active: rgba(var(--neon-rgb-neutral-l3), 0.125);
+    --neon-color-radio-button-label: var(--neon-color-label);
 
     /* drawer */
     --neon-background-color-drawer: var(--neon-background-color-card);
@@ -825,8 +828,8 @@
     /* 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.375);
-    --neon-color-radio-button-label: var(--neon-color-neutral-d3);
+    --neon-color-radio-button-bg-active: rgba(var(--neon-rgb-neutral-l3), 0.25);
+    --neon-color-radio-button-label: var(--neon-color-label);
 
     /* input */
     --neon-color-input: var(--neon-color-text);