@aotearoan/neon 21.0.3 → 22.0.0

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.3",
+  "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);