@aotearoan/neon 22.2.0 → 22.3.0

package/dist/components/user-input/toggle/NeonToggle.vue.es.js

@@ -1,5 +1,5 @@
 import g from "./NeonToggle.es.js";
-import { resolveComponent as b, openBlock as n, createElementBlock as o, normalizeClass as s, Fragment as u, renderList as c, withKeys as t, withModifiers as m, createElementVNode as k, mergeProps as y, createCommentVNode as d, renderSlot as h, createBlock as _, toDisplayString as f } from "vue";
+import { resolveComponent as b, openBlock as n, createElementBlock as o, normalizeClass as s, Fragment as u, renderList as c, withKeys as i, withModifiers as m, createElementVNode as k, mergeProps as y, createCommentVNode as d, renderSlot as h, createBlock as _, toDisplayString as f } from "vue";
 import $ from "../../../_virtual/_plugin-vue_export-helper.es.js";
 const v = ["aria-checked", "aria-disabled", "tabindex", "onKeydown"], w = ["checked", "disabled", "name", "value", "onClick"], p = {
   key: 0,
@@ -8,8 +8,8 @@ const v = ["aria-checked", "aria-disabled", "tabindex", "onKeydown"], w = ["chec
   key: 0,
   class: "neon-toggle__radio-button-indicator"
 }, C = { key: 1 };
-function S(e, z, B, K, N, E) {
-  const i = b("neon-icon");
+function S(e, N, z, B, K, T) {
+  const t = b("neon-icon");
   return n(), o("div", {
     class: s([[
       `neon-toggle--${e.toggleStyle}`,
@@ -34,8 +34,8 @@ function S(e, z, B, K, N, E) {
       tabindex: !e.disabled && !l.disabled ? 0 : void 0,
       role: "radio",
       onKeydown: [
-        t((a) => e.selectOption(l), ["enter"]),
-        t(m((a) => e.selectOption(l), ["prevent"]), ["space"])
+        i((a) => e.selectOption(l), ["enter"]),
+        i(m((a) => e.selectOption(l), ["prevent"]), ["space"])
       ]
     }, [
       k("input", y({
@@ -49,14 +49,14 @@ function S(e, z, B, K, N, E) {
       }, { ref_for: !0 }, e.sanitizedAttributes, {
         onClick: (a) => e.onInput(l)
       }), null, 16, w),
-      e.toggleStyle === "radio-buttons" ? (n(), o("div", p, [
+      e.toggleStyle !== e.NeonToggleStyle.Toggle ? (n(), o("div", p, [
         l.key === e.modelValue ? (n(), o("div", V)) : d("", !0)
       ])) : d("", !0),
       h(e.$slots, "option", {
         index: r,
         option: l
       }, () => [
-        l.icon ? (n(), _(i, {
+        l.icon ? (n(), _(t, {
           key: 0,
           disabled: e.disabled || l.disabled,
           name: l.icon
@@ -66,8 +66,8 @@ function S(e, z, B, K, N, E) {
     ], 42, v))), 128))
   ], 2);
 }
-const F = /* @__PURE__ */ $(g, [["render", S]]);
+const D = /* @__PURE__ */ $(g, [["render", S]]);
 export {
-  F as default
+  D as default
 };
 //# sourceMappingURL=NeonToggle.vue.es.js.map

package/dist/components/user-input/toggle/NeonToggle.vue.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"NeonToggle.vue.es.js","sources":["../../../../src/components/user-input/toggle/NeonToggle.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"[\n      `neon-toggle--${toggleStyle}`,\n      `neon-toggle--${disabled ? 'low-contrast' : color}`,\n      `neon-toggle--${orientation}`,\n      `neon-toggle--${size}`,\n      { 'neon-toggle--disabled': disabled },\n    ]\"\n    class=\"neon-toggle\"\n    role=\"radiogroup\"\n  >\n    <label\n      v-for=\"(option, index) in model\"\n      :key=\"option.key\"\n      :aria-checked=\"option.key === modelValue\"\n      :aria-disabled=\"disabled || option.disabled\"\n      :class=\"{\n        'neon-toggle__label--disabled': disabled || option.disabled,\n        'neon-toggle__label--checked': option.key === modelValue,\n        'neon-toggle__label--with-icon': option.icon,\n        'neon-toggle__label--with-slot-override': slots.option,\n        'neon-toggle__label--with-text': option.label,\n      }\"\n      :tabindex=\"!disabled && !option.disabled ? 0 : undefined\"\n      class=\"neon-toggle__label no-style\"\n      role=\"radio\"\n      @keydown.enter=\"selectOption(option)\"\n      @keydown.space.prevent=\"selectOption(option)\"\n    >\n      <input\n        :checked=\"option.key === modelValue\"\n        :disabled=\"disabled || option.disabled\"\n        :name=\"name\"\n        :tabindex=\"-1\"\n        :value=\"option.key\"\n        class=\"neon-toggle__input\"\n        type=\"radio\"\n        v-bind=\"sanitizedAttributes\"\n        @click=\"onInput(option)\"\n      />\n      <div v-if=\"toggleStyle === 'radio-buttons'\" class=\"neon-toggle__radio-button\">\n        <div v-if=\"option.key === modelValue\" class=\"neon-toggle__radio-button-indicator\"></div>\n      </div>\n      <!-- @slot This slot is for overriding the option rendering, it is passed two arguments, <em>option</em> - the option model & <em>index</em> -->\n      <slot :index=\"index\" :option=\"option\" name=\"option\">\n        <neon-icon v-if=\"option.icon\" :disabled=\"disabled || option.disabled\" :name=\"option.icon\" />\n        <span v-if=\"option.label\">{{ option.label }}</span>\n      </slot>\n    </label>\n  </div>\n</template>\n\n<script lang=\"ts\" src=\"./NeonToggle.ts\" />\n"],"names":["_createElementBlock","_normalizeClass","_ctx","_openBlock","_Fragment","_renderList","option","index","_withKeys","$event","_withModifiers","_createElementVNode","_mergeProps","_hoisted_3","_hoisted_4","_renderSlot","_createBlock","_component_neon_icon","_hoisted_5","_toDisplayString"],"mappings":";;;;;EAyCkD,OAAM;;;EACV,OAAM;;;;cAzClDA,EAiDM,OAAA;AAAA,IAhDH,OAAKC,EAAA,CAAA;AAAA,sBAA0BC,EAAA,WAAW;AAAA,MAA0B,gBAAAA,EAAA,4BAA4BA,EAAA,KAAK;AAAA,sBAA0BA,EAAA,WAAW;AAAA,sBAA0BA,EAAA,IAAI;AAAA,iCAAqCA,EAAA,SAAQ;AAAA,OAOhN,aAAa,CAAA;AAAA,IACnB,MAAK;AAAA;KAELC,EAAA,EAAA,GAAAH,EAqCQI,GAAA,MAAAC,EApCoBH,EAAA,OAAK,CAAvBI,GAAQC,YADlBP,EAqCQ,SAAA;AAAA,MAnCL,KAAKM,EAAO;AAAA,MACZ,gBAAcA,EAAO,QAAQJ,EAAA;AAAA,MAC7B,iBAAeA,EAAA,YAAYI,EAAO;AAAA,MAClC,OAAKL,EAAA,CAAA;AAAA,wCAA4CC,EAAA,YAAYI,EAAO;AAAA,uCAAiDA,EAAO,QAAQJ,EAAA;AAAA,QAAqD,iCAAAI,EAAO;AAAA,QAAwD,0CAAAJ,EAAA,MAAM;AAAA,QAAiD,iCAAAI,EAAO;AAAA,SAQjT,6BAA6B,CAAA;AAAA,MADlC,WAAWJ,EAAA,YAAQ,CAAKI,EAAO,eAAe;AAAA,MAE/C,MAAK;AAAA,MACJ,WAAO;AAAA,QAAQE,EAAA,CAAAC,MAAAP,EAAA,aAAaI,CAAM,GAAA,CAAA,OAAA,CAAA;AAAA,QACXE,EAAAE,EAAA,CAAAD,MAAAP,EAAA,aAAaI,CAAM,GAAA,CAAA,SAAA,CAAA,GAAA,CAAA,OAAA,CAAA;AAAA;;MAE3CK,EAUE,SAVFC,EAUE;AAAA,QATC,SAASN,EAAO,QAAQJ,EAAA;AAAA,QACxB,UAAUA,EAAA,YAAYI,EAAO;AAAA,QAC7B,MAAMJ,EAAA;AAAA,QACN,UAAU;AAAA,QACV,OAAOI,EAAO;AAAA,QACf,OAAM;AAAA,QACN,MAAK;AAAA,0BACGJ,EAAA,qBAAmB;AAAA,QAC1B,SAAK,CAAAO,MAAEP,EAAA,QAAQI,CAAM;AAAA;MAEbJ,EAAA,gBAAW,mBAAtBC,KAAAH,EAEM,OAFNa,GAEM;AAAA,QADOP,EAAO,QAAQJ,EAAA,cAA1BC,KAAAH,EAAwF,OAAxFc,CAAwF;;MAG1FC,EAGOb,EAAA,QAAA,UAAA;AAAA,QAHA,OAAOK;AAAA,QAAQ,QAAQD;AAAA,SAA9B,MAGO;AAAA,QAFYA,EAAO,aAAxBU,EAA4FC,GAAA;AAAA;UAA7D,UAAUf,EAAA,YAAYI,EAAO;AAAA,UAAW,MAAMA,EAAO;AAAA;QACxEA,EAAO,cAAnBN,EAAmD,QAAAkB,GAAAC,EAAtBb,EAAO,KAAK,GAAA,CAAA;;;;;;"}
+{"version":3,"file":"NeonToggle.vue.es.js","sources":["../../../../src/components/user-input/toggle/NeonToggle.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"[\n      `neon-toggle--${toggleStyle}`,\n      `neon-toggle--${disabled ? 'low-contrast' : color}`,\n      `neon-toggle--${orientation}`,\n      `neon-toggle--${size}`,\n      { 'neon-toggle--disabled': disabled },\n    ]\"\n    class=\"neon-toggle\"\n    role=\"radiogroup\"\n  >\n    <label\n      v-for=\"(option, index) in model\"\n      :key=\"option.key\"\n      :aria-checked=\"option.key === modelValue\"\n      :aria-disabled=\"disabled || option.disabled\"\n      :class=\"{\n        'neon-toggle__label--disabled': disabled || option.disabled,\n        'neon-toggle__label--checked': option.key === modelValue,\n        'neon-toggle__label--with-icon': option.icon,\n        'neon-toggle__label--with-slot-override': slots.option,\n        'neon-toggle__label--with-text': option.label,\n      }\"\n      :tabindex=\"!disabled && !option.disabled ? 0 : undefined\"\n      class=\"neon-toggle__label no-style\"\n      role=\"radio\"\n      @keydown.enter=\"selectOption(option)\"\n      @keydown.space.prevent=\"selectOption(option)\"\n    >\n      <input\n        :checked=\"option.key === modelValue\"\n        :disabled=\"disabled || option.disabled\"\n        :name=\"name\"\n        :tabindex=\"-1\"\n        :value=\"option.key\"\n        class=\"neon-toggle__input\"\n        type=\"radio\"\n        v-bind=\"sanitizedAttributes\"\n        @click=\"onInput(option)\"\n      />\n      <div v-if=\"toggleStyle !== NeonToggleStyle.Toggle\" class=\"neon-toggle__radio-button\">\n        <div v-if=\"option.key === modelValue\" class=\"neon-toggle__radio-button-indicator\"></div>\n      </div>\n      <!-- @slot This slot is for overriding the option rendering, it is passed two arguments, <em>option</em> - the option model & <em>index</em> -->\n      <slot :index=\"index\" :option=\"option\" name=\"option\">\n        <neon-icon v-if=\"option.icon\" :disabled=\"disabled || option.disabled\" :name=\"option.icon\" />\n        <span v-if=\"option.label\">{{ option.label }}</span>\n      </slot>\n    </label>\n  </div>\n</template>\n\n<script lang=\"ts\" src=\"./NeonToggle.ts\" />\n"],"names":["_createElementBlock","_normalizeClass","_ctx","_openBlock","_Fragment","_renderList","option","index","_withKeys","$event","_withModifiers","_createElementVNode","_mergeProps","_hoisted_3","_hoisted_4","_renderSlot","_createBlock","_component_neon_icon","_hoisted_5","_toDisplayString"],"mappings":";;;;;EAyCyD,OAAM;;;EACjB,OAAM;;;;cAzClDA,EAiDM,OAAA;AAAA,IAhDH,OAAKC,EAAA,CAAA;AAAA,sBAA0BC,EAAA,WAAW;AAAA,MAA0B,gBAAAA,EAAA,4BAA4BA,EAAA,KAAK;AAAA,sBAA0BA,EAAA,WAAW;AAAA,sBAA0BA,EAAA,IAAI;AAAA,iCAAqCA,EAAA,SAAQ;AAAA,OAOhN,aAAa,CAAA;AAAA,IACnB,MAAK;AAAA;KAELC,EAAA,EAAA,GAAAH,EAqCQI,GAAA,MAAAC,EApCoBH,EAAA,OAAK,CAAvBI,GAAQC,YADlBP,EAqCQ,SAAA;AAAA,MAnCL,KAAKM,EAAO;AAAA,MACZ,gBAAcA,EAAO,QAAQJ,EAAA;AAAA,MAC7B,iBAAeA,EAAA,YAAYI,EAAO;AAAA,MAClC,OAAKL,EAAA,CAAA;AAAA,wCAA4CC,EAAA,YAAYI,EAAO;AAAA,uCAAiDA,EAAO,QAAQJ,EAAA;AAAA,QAAqD,iCAAAI,EAAO;AAAA,QAAwD,0CAAAJ,EAAA,MAAM;AAAA,QAAiD,iCAAAI,EAAO;AAAA,SAQjT,6BAA6B,CAAA;AAAA,MADlC,WAAWJ,EAAA,YAAQ,CAAKI,EAAO,eAAe;AAAA,MAE/C,MAAK;AAAA,MACJ,WAAO;AAAA,QAAQE,EAAA,CAAAC,MAAAP,EAAA,aAAaI,CAAM,GAAA,CAAA,OAAA,CAAA;AAAA,QACXE,EAAAE,EAAA,CAAAD,MAAAP,EAAA,aAAaI,CAAM,GAAA,CAAA,SAAA,CAAA,GAAA,CAAA,OAAA,CAAA;AAAA;;MAE3CK,EAUE,SAVFC,EAUE;AAAA,QATC,SAASN,EAAO,QAAQJ,EAAA;AAAA,QACxB,UAAUA,EAAA,YAAYI,EAAO;AAAA,QAC7B,MAAMJ,EAAA;AAAA,QACN,UAAU;AAAA,QACV,OAAOI,EAAO;AAAA,QACf,OAAM;AAAA,QACN,MAAK;AAAA,0BACGJ,EAAA,qBAAmB;AAAA,QAC1B,SAAK,CAAAO,MAAEP,EAAA,QAAQI,CAAM;AAAA;MAEbJ,EAAA,gBAAgBA,EAAA,gBAAgB,UAA3CC,KAAAH,EAEM,OAFNa,GAEM;AAAA,QADOP,EAAO,QAAQJ,EAAA,cAA1BC,KAAAH,EAAwF,OAAxFc,CAAwF;;MAG1FC,EAGOb,EAAA,QAAA,UAAA;AAAA,QAHA,OAAOK;AAAA,QAAQ,QAAQD;AAAA,SAA9B,MAGO;AAAA,QAFYA,EAAO,aAAxBU,EAA4FC,GAAA;AAAA;UAA7D,UAAUf,EAAA,YAAYI,EAAO;AAAA,UAAW,MAAMA,EAAO;AAAA;QACxEA,EAAO,cAAnBN,EAAmD,QAAAkB,GAAAC,EAAtBb,EAAO,KAAK,GAAA,CAAA;;;;;;"}

package/dist/src/common/enums/NeonToggleStyle.d.ts

@@ -5,5 +5,7 @@ export declare enum NeonToggleStyle {
     /** Toggle style which is a horizontal group of connected buttons with one active member. */
     Toggle = "toggle",
     /** Traditional HTML radio button input style. */
-    RadioButtons = "radio-buttons"
+    RadioButtons = "radio-buttons",
+    /** Card style radio buttons for more detailed content */
+    Card = "card"
 }

package/dist/src/common/models/NeonDate.d.ts

@@ -19,4 +19,6 @@ export interface NeonDate {
     dayFormatted: string;
     /** Time string in the <a href="https://en.wikipedia.org/wiki/ISO_8601">ISO-8601 format</a>. */
     time?: string;
+    /** Time string in the <a href="https://en.wikipedia.org/wiki/ISO_8601">ISO-8601 format</a> without seconds. */
+    timeShort?: string;
 }

package/dist/src/components/presentation/image-carousel/NeonImageCarousel.d.ts

@@ -30,6 +30,13 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         type: BooleanConstructor;
         default: boolean;
     };
+    /**
+     * Provide an alternative label for the Previous button.
+     */
+    closeLabel: {
+        type: StringConstructor;
+        default: string;
+    };
     /**
      * Provide an alternative label for the Previous button.
      */
@@ -50,6 +57,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     carouselItem: import("vue").Ref<HTMLLIElement[], HTMLLIElement[]>;
     carouselItems: import("vue").Ref<HTMLUListElement | null, HTMLUListElement | null>;
     initialised: import("vue").Ref<boolean, boolean>;
+    expanded: import("vue").Ref<boolean, boolean>;
     next: () => void;
     previous: () => void;
     scrollTo: (index: number) => void;
@@ -76,6 +84,13 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         type: BooleanConstructor;
         default: boolean;
     };
+    /**
+     * Provide an alternative label for the Previous button.
+     */
+    closeLabel: {
+        type: StringConstructor;
+        default: string;
+    };
     /**
      * Provide an alternative label for the Previous button.
      */
@@ -95,6 +110,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
 }>, {
     imageCountLabel: string;
     hideLabel: boolean;
+    closeLabel: string;
     previousLabel: string;
     nextLabel: string;
 }, {}, {
@@ -109,20 +125,12 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         };
         size: {
             type: () => import("../../../neon").NeonButtonSize;
-            default: import("../../../neon").NeonButtonSize; /**
-             * Provide an alternative label for the Next button.
-             */
-        }; /**
-         * Provide an alternative label for the Next button.
-         */
+            default: import("../../../neon").NeonButtonSize;
+        };
         color: {
             type: () => import("../../../neon").NeonFunctionalColor;
             default: import("../../../neon").NeonFunctionalColor;
-        }; /**
-         * The index of the currently visible image.
-         *
-         * @type {number}
-         */
+        };
         inverse: {
             type: BooleanConstructor;
             default: boolean;
@@ -216,20 +224,12 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         };
         size: {
             type: () => import("../../../neon").NeonButtonSize;
-            default: import("../../../neon").NeonButtonSize; /**
-             * Provide an alternative label for the Next button.
-             */
-        }; /**
-         * Provide an alternative label for the Next button.
-         */
+            default: import("../../../neon").NeonButtonSize;
+        };
         color: {
             type: () => import("../../../neon").NeonFunctionalColor;
             default: import("../../../neon").NeonFunctionalColor;
-        }; /**
-         * The index of the currently visible image.
-         *
-         * @type {number}
-         */
+        };
         inverse: {
             type: BooleanConstructor;
             default: boolean;
@@ -588,5 +588,18 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             inverse: boolean;
         }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
     }, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+    NeonStack: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+        gap: {
+            type: () => import("../../../neon").NeonSize;
+            default: () => import("../../../neon").NeonSize;
+        };
+    }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+        gap: {
+            type: () => import("../../../neon").NeonSize;
+            default: () => import("../../../neon").NeonSize;
+        };
+    }>> & Readonly<{}>, {
+        gap: import("../../../neon").NeonSize;
+    }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 }, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

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/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.2.0",
+  "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

@@ -121,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/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));
@@ -349,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
   **********************/
@@ -533,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);
 
@@ -653,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
   *********************/
@@ -840,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);
 
@@ -959,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);
   }
 }