@aotearoan/neon 7.2.0-beta.1 → 7.3.0-beta.1

package/dist/components/layout/card/NeonCard.d.ts

@@ -6,7 +6,9 @@ import { NeonSize } from '@/common/enums/NeonSize';
  */
 declare const _default: import("vue").DefineComponent<{
     /**
-     * Change the orientation of a card to horizontal. This is useful for creating long narrow cards spanning the full page. NOTE: For responsiveness, horizontal cards are automatically transformed to vertical cards at lower screen sizes.
+     * Change the orientation of a card to horizontal. This is useful for creating long narrow cards spanning the full
+     * page. NOTE: For responsiveness, horizontal cards are automatically transformed to vertical cards at lower screen
+     * sizes.
      */
     orientation: {
         type: () => NeonOrientation;
@@ -19,6 +21,13 @@ declare const _default: import("vue").DefineComponent<{
         type: () => NeonSize;
         default: NeonSize;
     };
+    /**
+     * Whether to display the internal borders between card sections for horizontal cards
+     */
+    horizontalBorders: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     /**
      * The breakpoint to switch horizontal cards to vertical cards. Accepts <em>Mobile | MobileLarge | Tablet</em> ONLY.
      * @type NeonResponsive
@@ -27,13 +36,23 @@ declare const _default: import("vue").DefineComponent<{
         type: () => NeonResponsive;
         default: NeonResponsive;
     };
+    /**
+     * If true, do not implement a responsive breakpoint for a horizontal card.
+     */
+    noBreak: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }, {
     attrs: {
         [x: string]: unknown;
     };
+    NeonOrientation: typeof NeonOrientation;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     /**
-     * Change the orientation of a card to horizontal. This is useful for creating long narrow cards spanning the full page. NOTE: For responsiveness, horizontal cards are automatically transformed to vertical cards at lower screen sizes.
+     * Change the orientation of a card to horizontal. This is useful for creating long narrow cards spanning the full
+     * page. NOTE: For responsiveness, horizontal cards are automatically transformed to vertical cards at lower screen
+     * sizes.
      */
     orientation: {
         type: () => NeonOrientation;
@@ -46,6 +65,13 @@ declare const _default: import("vue").DefineComponent<{
         type: () => NeonSize;
         default: NeonSize;
     };
+    /**
+     * Whether to display the internal borders between card sections for horizontal cards
+     */
+    horizontalBorders: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     /**
      * The breakpoint to switch horizontal cards to vertical cards. Accepts <em>Mobile | MobileLarge | Tablet</em> ONLY.
      * @type NeonResponsive
@@ -54,9 +80,18 @@ declare const _default: import("vue").DefineComponent<{
         type: () => NeonResponsive;
         default: NeonResponsive;
     };
+    /**
+     * If true, do not implement a responsive breakpoint for a horizontal card.
+     */
+    noBreak: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>>, {
     size: NeonSize;
     orientation: NeonOrientation;
+    horizontalBorders: boolean;
     horizontalBreakpoint: NeonResponsive;
+    noBreak: boolean;
 }>;
 export default _default;

package/dist/components/layout/card/NeonCard.js

@@ -6,7 +6,9 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     class: [[
       `neon-card--${_ctx.orientation}`,
       `neon-card--${_ctx.size}`,
-      `neon-card--horizontal-breakpoint-${_ctx.horizontalBreakpoint}`
+      `neon-card--horizontal-breakpoint-${_ctx.horizontalBreakpoint}`,
+      _ctx.noBreak && "neon-card--horizontal-breakpoint-no-break",
+      _ctx.orientation === _ctx.NeonOrientation.Horizontal && _ctx.horizontalBorders && "neon-card--with-horizontal-borders"
     ], "neon-card"]
   }, _ctx.attrs), [
     renderSlot(_ctx.$slots, "default")

package/dist/components/layout/card/NeonCard.ts_vue_type_script_src_5154d030_lang.js

@@ -7,12 +7,15 @@ var _sfc_main = defineComponent({
   props: {
     orientation: { type: String, default: NeonOrientation.Vertical },
     size: { type: String, default: NeonSize.Medium },
-    horizontalBreakpoint: { type: String, default: NeonResponsive.MobileLarge }
+    horizontalBorders: { type: Boolean, default: true },
+    horizontalBreakpoint: { type: String, default: NeonResponsive.MobileLarge },
+    noBreak: { type: Boolean, default: false }
   },
   setup(_props) {
     const attrs = useAttrs();
     return {
-      attrs
+      attrs,
+      NeonOrientation
     };
   }
 });

package/dist/components/navigation/stepper/NeonStepper.js

@@ -25,12 +25,10 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
           createElementVNode("div", _hoisted_2, [
             index < _ctx.completedIndex ? (openBlock(), createBlock(_component_neon_icon, {
               key: 0,
-              inverse: true,
               class: "neon-stepper__step-completed-icon",
               name: "check"
             })) : index === _ctx.completedIndex ? (openBlock(), createBlock(_component_neon_icon, {
               key: 1,
-              inverse: true,
               class: "neon-stepper__step-completing-icon",
               name: "dot"
             })) : createCommentVNode("", true)

package/dist/components/navigation/stepper/NeonStepper.ts_vue_type_script_src_e55bd35c_lang.js

@@ -42,6 +42,7 @@ import "../../user-input/range-slider/NeonRangeSlider.ts_vue_type_script_src_25f
 import "../../layout/side-nav/NeonSideNav.ts_vue_type_script_src_18c3ed0e_lang.js";
 import "../../user-input/search/NeonSearch.ts_vue_type_script_src_a2c54fe4_lang.js";
 import "../../user-input/select/NeonSelect.ts_vue_type_script_src_37fb08e4_lang.js";
+import "../../user-input/selectable-card/NeonSelectableCard.ts_vue_type_script_src_3688086a_lang.js";
 import "../../feedback/skeleton-loader/NeonSkeletonLoader.ts_vue_type_script_src_21110188_lang.js";
 import "../../user-input/slider/NeonSlider.ts_vue_type_script_src_e29dcb24_lang.js";
 import "../../feedback/splash-loader/NeonSplashLoader.ts_vue_type_script_src_56a53570_lang.js";

package/dist/components/user-input/selectable-card/NeonSelectableCard.d.ts

@@ -0,0 +1,79 @@
+import { NeonSize } from '@/common/enums/NeonSize';
+import { NeonFunctionalColor } from '@/common/enums/NeonFunctionalColor';
+import { NeonResponsive } from '@/common/enums/NeonResponsive';
+/**
+ * <p>
+ * <strong>NeonSelectableCard</strong> is a horizontal card that is selectable by clicking on it. It can be used in
+ * lists to easily allow users to select multiple items, providing richer content & a larger footprint for clicking on.
+ * </p>
+ */
+declare const _default: import("vue").DefineComponent<{
+    /**
+     * The selected state of the card
+     */
+    modelValue: {
+        type: BooleanConstructor;
+        required: true;
+    };
+    /**
+     * The size of the card.
+     */
+    size: {
+        type: () => NeonSize;
+        default: NeonSize;
+    };
+    /**
+     * The selection color. This will be used for the checkbox as well as borders & the background color
+     */
+    color: {
+        type: () => NeonFunctionalColor;
+        default: NeonFunctionalColor;
+    };
+    /**
+     * The disabled state of the card.
+     */
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}, {
+    active: import("vue").Ref<boolean>;
+    clicked: () => void;
+    NeonResponsive: typeof NeonResponsive;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    /**
+     * The selected state of the card
+     */
+    modelValue: {
+        type: BooleanConstructor;
+        required: true;
+    };
+    /**
+     * The size of the card.
+     */
+    size: {
+        type: () => NeonSize;
+        default: NeonSize;
+    };
+    /**
+     * The selection color. This will be used for the checkbox as well as borders & the background color
+     */
+    color: {
+        type: () => NeonFunctionalColor;
+        default: NeonFunctionalColor;
+    };
+    /**
+     * The disabled state of the card.
+     */
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & {
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}, {
+    color: NeonFunctionalColor;
+    disabled: boolean;
+    size: NeonSize;
+}>;
+export default _default;

package/dist/components/user-input/selectable-card/NeonSelectableCard.js

@@ -0,0 +1,46 @@
+import _sfc_main from "./NeonSelectableCard.ts_vue_type_script_src_3688086a_lang.js";
+import { resolveComponent, openBlock, createBlock, normalizeClass, withKeys, withModifiers, withCtx, createVNode, renderSlot } from "vue";
+import _export_sfc from "../../../_virtual/plugin-vue_export-helper.js";
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_neon_switch = resolveComponent("neon-switch");
+  const _component_neon_card_header = resolveComponent("neon-card-header");
+  const _component_neon_card = resolveComponent("neon-card");
+  return openBlock(), createBlock(_component_neon_card, {
+    class: normalizeClass([[
+      `neon-selectable-card--${_ctx.color}`,
+      { "neon-selectable-card--selected": _ctx.modelValue },
+      { "neon-selectable-card--disabled": _ctx.disabled }
+    ], "neon-selectable-card"]),
+    "horizontal-borders": false,
+    "no-break": true,
+    size: _ctx.size,
+    orientation: "horizontal",
+    tabindex: "0",
+    onClick: _cache[1] || (_cache[1] = ($event) => _ctx.clicked()),
+    onKeydown: [
+      _cache[2] || (_cache[2] = withKeys(withModifiers(($event) => _ctx.clicked(), ["stop", "prevent"]), ["enter"])),
+      _cache[3] || (_cache[3] = withKeys(withModifiers(($event) => _ctx.clicked(), ["stop", "prevent"]), ["space"]))
+    ]
+  }, {
+    default: withCtx(() => [
+      createVNode(_component_neon_card_header, null, {
+        default: withCtx(() => [
+          createVNode(_component_neon_switch, {
+            color: _ctx.color,
+            disabled: _ctx.disabled,
+            "model-value": _ctx.modelValue,
+            size: _ctx.size,
+            class: "neon-selectable-card__checkbox",
+            "switch-style": "checkbox",
+            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.clicked())
+          }, null, 8, ["color", "disabled", "model-value", "size"])
+        ]),
+        _: 1
+      }),
+      renderSlot(_ctx.$slots, "default")
+    ]),
+    _: 3
+  }, 8, ["class", "size"]);
+}
+var NeonSelectableCard = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "/Users/andrew/dev/projects/neon/src/components/user-input/selectable-card/NeonSelectableCard.vue"]]);
+export { NeonSelectableCard as default };

package/dist/components/user-input/selectable-card/NeonSelectableCard.ts_vue_type_script_src_3688086a_lang.js

@@ -0,0 +1,38 @@
+import { defineComponent, ref } from "vue";
+import { NeonSize } from "../../../common/enums/NeonSize.js";
+import { NeonFunctionalColor } from "../../../common/enums/NeonFunctionalColor.js";
+import NeonCard from "../../layout/card/NeonCard.js";
+import NeonCardHeader from "../../layout/card/header/NeonCardHeader.js";
+import NeonSwitch from "../switch/NeonSwitch.js";
+import { NeonResponsive } from "../../../common/enums/NeonResponsive.js";
+var _sfc_main = defineComponent({
+  name: "NeonSelectableCard",
+  components: {
+    NeonCard,
+    NeonCardHeader,
+    NeonSwitch
+  },
+  props: {
+    modelValue: { type: Boolean, required: true },
+    size: { type: String, default: NeonSize.Small },
+    color: { type: String, default: NeonFunctionalColor.Brand },
+    disabled: { type: Boolean, default: false }
+  },
+  emits: [
+    "update:modelValue"
+  ],
+  setup(props, { emit }) {
+    const active = ref(false);
+    const clicked = () => {
+      if (!props.disabled) {
+        emit("update:modelValue", !props.modelValue);
+      }
+    };
+    return {
+      active,
+      clicked,
+      NeonResponsive
+    };
+  }
+});
+export { _sfc_main as default };

package/dist/components/user-input/selectable-card/NeonSelectableCard.vue.d.ts

@@ -0,0 +1,2 @@
+export * from './NeonSelectableCard.js';
+export { default } from './NeonSelectableCard.js';

package/dist/components/user-input/switch/NeonSwitch.js

@@ -8,7 +8,10 @@ const _hoisted_4 = [
   _hoisted_3
 ];
 const _hoisted_5 = ["checked", "disabled"];
-const _hoisted_6 = { class: "neon-switch__label" };
+const _hoisted_6 = {
+  key: 2,
+  class: "neon-switch__label"
+};
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_neon_icon = resolveComponent("neon-icon");
   return openBlock(), createElementBlock("label", {
@@ -28,11 +31,10 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     role: _ctx.switchStyle,
     "data-testid": "checkbox-label",
     tabindex: "-1",
+    onClick: _cache[1] || (_cache[1] = (...args) => _ctx.toggleSwitch && _ctx.toggleSwitch(...args)),
     onKeydown: [
-      _cache[2] || (_cache[2] = withKeys((...args) => _ctx.toggleSwitch && _ctx.toggleSwitch(...args), ["enter"])),
-      _cache[3] || (_cache[3] = withKeys((...args) => _ctx.toggleSwitch && _ctx.toggleSwitch(...args), ["space"])),
-      _cache[4] || (_cache[4] = withKeys(withModifiers(() => {
-      }, ["prevent"]), ["space"]))
+      _cache[2] || (_cache[2] = withKeys(withModifiers((...args) => _ctx.toggleSwitch && _ctx.toggleSwitch(...args), ["stop", "prevent"]), ["enter"])),
+      _cache[3] || (_cache[3] = withKeys(withModifiers((...args) => _ctx.toggleSwitch && _ctx.toggleSwitch(...args), ["stop", "prevent"]), ["space"]))
     ]
   }, [
     _ctx.switchStyle === "checkbox" ? (openBlock(), createBlock(_component_neon_icon, {
@@ -40,7 +42,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       disabled: _ctx.disabled,
       inverse: true,
       name: _ctx.indeterminate ? "dash" : "check",
-      tabindex: !_ctx.disabled ? 0 : void 0,
+      tabindex: !_ctx.disabled && _ctx.label ? 0 : void 0,
       class: "neon-switch__checkbox"
     }, null, 8, ["disabled", "name", "tabindex"])) : createCommentVNode("", true),
     _ctx.switchStyle === "switch" ? (openBlock(), createElementBlock("span", {
@@ -56,10 +58,9 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       "data-testid": "checkbox",
       type: "checkbox"
     }, _ctx.sanitizedAttributes, {
-      onClick: _cache[0] || (_cache[0] = (...args) => _ctx.toggleSwitch && _ctx.toggleSwitch(...args)),
-      onInput: _cache[1] || (_cache[1] = (...args) => _ctx.toggleSwitch && _ctx.toggleSwitch(...args))
+      onInput: _cache[0] || (_cache[0] = (...args) => _ctx.toggleSwitch && _ctx.toggleSwitch(...args))
     }), null, 16, _hoisted_5),
-    createElementVNode("span", _hoisted_6, toDisplayString(_ctx.label), 1)
+    _ctx.label ? (openBlock(), createElementBlock("span", _hoisted_6, toDisplayString(_ctx.label), 1)) : createCommentVNode("", true)
   ], 42, _hoisted_1);
 }
 var NeonSwitch = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "/Users/andrew/dev/projects/neon/src/components/user-input/switch/NeonSwitch.vue"]]);

package/dist/neon.d.ts

@@ -41,6 +41,7 @@ export { default as NeonRangeSlider } from './components/user-input/range-slider
 export { default as NeonSideNav } from './components/layout/side-nav/NeonSideNav.vue';
 export { default as NeonSearch } from './components/user-input/search/NeonSearch.vue';
 export { default as NeonSelect } from './components/user-input/select/NeonSelect.vue';
+export { default as NeonSelectableCard } from './components/user-input/selectable-card/NeonSelectableCard.vue';
 export { default as NeonSkeletonLoader } from './components/feedback/skeleton-loader/NeonSkeletonLoader.vue';
 export { default as NeonSlider } from './components/user-input/slider/NeonSlider.vue';
 export { default as NeonSplashLoader } from './components/feedback/splash-loader/NeonSplashLoader.vue';

package/dist/neon.js

@@ -41,6 +41,7 @@ export { default as NeonRangeSlider } from "./components/user-input/range-slider
 export { default as NeonSideNav } from "./components/layout/side-nav/NeonSideNav.js";
 export { default as NeonSearch } from "./components/user-input/search/NeonSearch.js";
 export { default as NeonSelect } from "./components/user-input/select/NeonSelect.js";
+export { default as NeonSelectableCard } from "./components/user-input/selectable-card/NeonSelectableCard.js";
 export { default as NeonSkeletonLoader } from "./components/feedback/skeleton-loader/NeonSkeletonLoader.js";
 export { default as NeonSlider } from "./components/user-input/slider/NeonSlider.js";
 export { default as NeonSplashLoader } from "./components/feedback/splash-loader/NeonSplashLoader.js";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@aotearoan/neon",
   "description": "Neon is a lightweight design library of VueJS components with minimal dependencies. It supports light and dark modes and can be extended to support multiple themes",
-  "version": "7.2.0-beta.1",
+  "version": "7.3.0-beta.1",
   "module": "dist/neon.js",
   "types": "dist/neon.d.ts",
   "exports": {

package/src/sass/components/_card.scss

@@ -7,7 +7,6 @@
   .neon-card-header,
   .neon-card-body,
   .neon-card-footer {
-    @include layout.padding;
     margin-bottom: 0;
     justify-content: center;
 
@@ -130,20 +129,37 @@
       &.neon-card--horizontal-breakpoint-mobile-l {
         @include responsive.responsive(larger-than-mobile-large) {
           @include horizontal-card-responsive;
-          @include horizontal-card-responsive-borders;
+          
+          &.neon-card--with-horizontal-borders {
+            @include horizontal-card-responsive-borders;
+          }
         }
       }
 
       &.neon-card--horizontal-breakpoint-mobile {
         @include responsive.responsive(larger-than-mobile) {
           @include horizontal-card-responsive;
-          @include horizontal-card-responsive-borders;
+
+          &.neon-card--with-horizontal-borders {
+            @include horizontal-card-responsive-borders;
+          }
         }
       }
 
       &.neon-card--horizontal-breakpoint-tablet {
         @include responsive.responsive(larger-than-tablet) {
           @include horizontal-card-responsive;
+
+          &.neon-card--with-horizontal-borders {
+            @include horizontal-card-responsive-borders;
+          }
+        }
+      }
+
+      &.neon-card--horizontal-breakpoint-no-break {
+        @include horizontal-card-responsive;
+
+        &.neon-card--with-horizontal-borders {
           @include horizontal-card-responsive-borders;
         }
       }
@@ -151,6 +167,7 @@
 
     .neon-card-body--full-width {
       padding: 0;
+      width: calc(100% + 2 * var(--neon-border-width));
 
       img {
         margin-left: calc(-1 * var(--neon-border-width));
@@ -185,7 +202,7 @@
   }
 
   .neon-card.neon-card--vertical {
-    .neon-card-header {
+    & > .neon-card-header {
       &:not(:last-child) {
         padding-bottom: 0;
       }

package/src/sass/components/_selectable-card.scss

@@ -0,0 +1,65 @@
+@use '../includes/palettes';
+
+@mixin selectable-card {
+  .neon-selectable-card {
+    --neon-border-radius-card: var(--neon-border-radius-selectable-card);
+    cursor: pointer;
+    user-select: none;
+    box-shadow: var(--neon-box-shadow-selectable-card);
+    transition: all var(--neon-animation-speed-fast) ease-in-out;
+    outline: none;
+
+    & > .neon-card-header,
+    & > .neon-card-body,
+    & > .neon-card-footer {
+      background-color: var(--neon-background-color-selectable-card);
+    }
+
+    &__checkbox {
+      cursor: pointer;
+      margin-left: calc(2 * var(--neon-base-space));
+    }
+
+    &:not(.neon-selectable-card--disabled):active {
+      transform: scale(0.99);
+    }
+
+    @each $color in palettes.$neon-functional-colors {
+      &--#{$color} {
+        &:focus-visible {
+          border: var(--neon-border-width) var(--neon-border-style) var(--neon-color-#{$color});
+        }
+
+        &:not(.neon-selectable-card--disabled) {
+          &:hover > .neon-card-header,
+          &:hover > .neon-card-body,
+          &:hover > .neon-card-footer {
+            background-color: rgba(var(--neon-rgb-#{$color}), 0.03125);
+          }
+
+          &.neon-selectable-card--selected > div {
+            background-color: rgba(var(--neon-rgb-#{$color}), 0.0625);
+          }
+        }
+      }
+    }
+
+    & + .neon-selectable-card {
+      margin-top: calc(0.25 * var(--neon-base-space));
+    }
+
+    &--disabled {
+      color: var(--neon-color-disabled-dark);
+      box-shadow: none;
+
+      .neon-card {
+        border-color: var(--neon-color-disabled-dark);
+      }
+
+      &,
+      .neon-switch {
+        cursor: not-allowed;
+      }
+    }
+  }
+}

package/src/sass/components/_stepper.scss

@@ -54,14 +54,21 @@
         background: var(--neon-color-stepper-disabled);
         transition: all var(--neon-animation-speed-fast) ease-in-out;
 
-        .neon-stepper__step-completed-icon {
-          width: calc(2.5 * var(--neon-base-space));
-          height: calc(2.5 * var(--neon-base-space));
-        }
-
+        .neon-stepper__step-completed-icon,
         .neon-stepper__step-completing-icon {
           width: calc(2.5 * var(--neon-base-space));
           height: calc(2.5 * var(--neon-base-space));
+
+          svg {
+            path,
+            circle {
+              fill: var(--neon-color-stepper-indicator);
+            }
+
+            circle {
+              stroke: var(--neon-color-stepper-indicator);
+            }
+          }
         }
       }
 

package/src/sass/components/components.scss

@@ -47,3 +47,4 @@
 @forward './dialog';
 @forward './linear-progress';
 @forward './stepper';
+@forward './selectable-card';

package/src/sass/global/_base-html.scss

@@ -32,6 +32,50 @@
     @include layout.margin-vertical();
   }
 
+  ol {
+    padding: 0;
+    list-style: none;
+    counter-reset: li;
+    display: flex;
+    flex-direction: column;
+
+    > li {
+      counter-increment: li;
+      max-width: var(--neon-max-paragraph-width);
+      margin-left: calc(8 * var(--neon-base-space));
+
+      &::before {
+        display: inline-flex;
+        content: counter(li);
+        margin-right: calc(4 * var(--neon-base-space));
+        width: calc(6 * var(--neon-base-space));
+        justify-content: flex-start;
+        font-variant: tabular-nums;
+        color: var(--neon-color-neutral);
+        position: absolute;
+        left: calc(6 * var(--neon-base-space));
+      }
+    }
+
+    > li:nth-child(1),
+    > li:nth-child(2),
+    > li:nth-child(3),
+    > li:nth-child(4),
+    > li:nth-child(5),
+    > li:nth-child(6),
+    > li:nth-child(7),
+    > li:nth-child(8),
+    > li:nth-child(9) {
+      &::before {
+        content: "0" counter(li);
+      }
+    }
+
+    & + p {
+      margin-top: calc(4 * var(--neon-base-space));
+    }
+  }
+
   ul {
     margin: 0;
     padding-left: 0;
@@ -85,10 +129,8 @@
     margin-top: 0;
   }
 
-  p + ul {
-    margin-top: calc(2 * var(--neon-base-space));
-  }
-
+  p + ul,
+  p + ol,
   pre + p {
     margin-top: calc(2 * var(--neon-base-space));
   }

package/src/sass/includes/_dependencies.scss

@@ -118,9 +118,9 @@
           NeonToggleChip: [NeonIcon],
           NeonTooltip: [],
           NeonTopNav: [],
-          NeonTreeMenu: [NeonLink,
-  NeonIcon],
+          NeonTreeMenu: [NeonLink,NeonIcon],
           NeonStepper: [NeonIcon],
+          NeonSelectableCard: [NeonCard, NeonCardHeader, NeonSwitch, NeonIcon],
   );
 
   $neon-flattened-components: [];

package/src/sass/theme.scss

@@ -230,4 +230,8 @@ $neon-components: null !default;
   @if index($neon-flattened-components, NeonStepper) {
     @include components.stepper;
   }
+
+  @if index($neon-flattened-components, NeonSelectableCard) {
+    @include components.selectable-card;
+  }
 }

package/src/sass/variables.scss

@@ -232,6 +232,9 @@
   --neon-opacity-background-progress: 0.0625;
   --neon-border-radius-progress-indicator: calc(2 * var(--neon-base-space));
 
+  /* selectable card */
+  --neon-border-radius-selectable-card: calc(1.5 * var(--neon-base-space));
+
   /**********************
   * DARK THEME VARIABLES
   **********************/
@@ -494,7 +497,12 @@
     --neon-color-input-indicator: var(--neon-color-neutral);
 
     /* stepper */
+    --neon-color-stepper-indicator: var(--neon-color-high-contrast-d3);
     --neon-color-stepper-disabled: var(--neon-color-disabled-light);
+
+    /* selectable card */
+    --neon-background-color-selectable-card: rgba(var(--neon-rgb-neutral-d5), 0.5);
+    --neon-box-shadow-selectable-card: 0 -2rem 4rem 0 rgba(var(--neon-rgb-neutral-d5), 0.2), 0 2rem 4rem 0 rgba(var(--neon-rgb-neutral-d5), 0.3);
   }
 
   /*********************
@@ -758,6 +766,11 @@
     --neon-color-input-indicator: var(--neon-color-neutral);
 
     /* stepper */
+    --neon-color-stepper-indicator: var(--neon-color-high-contrast-l5);
     --neon-color-stepper-disabled: var(--neon-color-disabled-dark);
+
+    /* selectable card */
+    --neon-background-color-selectable-card: rgba(var(--neon-rgb-high-contrast-l4), 0.5);
+    --neon-box-shadow-selectable-card: 0 -2rem 4rem 0 rgba(var(--neon-rgb-neutral-l3), 0.1), 0 2rem 4rem 0 rgba(var(--neon-rgb-neutral-l3), 0.15);
   }
 }