@robuust-digital/vue-components 1.3.2 → 2.0.0-rc.0

package/dist/dialogs/index.js

@@ -0,0 +1,200 @@
+import { createBlock as w, openBlock as f, unref as l, withCtx as o, createVNode as i, withModifiers as S, createElementVNode as a, normalizeClass as u, renderSlot as c, createElementBlock as $, createCommentVNode as y, createTextVNode as B, toDisplayString as D } from "vue";
+import { TransitionRoot as E, Dialog as L, TransitionChild as b, DialogPanel as N, DialogTitle as T } from "@headlessui/vue";
+import { _ as p } from "../_shared/ButtonBase-CQjlJ85F.js";
+import { u as V } from "../_shared/Modal-COVlUEud.js";
+import { _ as X } from "../_shared/Modal-COVlUEud.js";
+import { r as z } from "../_shared/XMarkIcon-90mcPzBs.js";
+const R = {
+  class: "fixed inset-0 overflow-hidden",
+  role: "presentation"
+}, q = { class: "absolute inset-0 overflow-hidden" }, F = { class: "pointer-events-none fixed inset-y-0 right-0 flex max-w-full pl-10" }, I = { class: "flex h-full flex-col shadow-xl" }, M = { class: "flex items-center justify-between" }, j = {
+  key: 0,
+  class: "ml-3 flex h-7 items-center"
+}, A = ["id"], P = { class: "flex shrink-0 rvc-drawer-footer" }, Q = {
+  __name: "Drawer",
+  props: {
+    as: {
+      type: String,
+      default: "form"
+    },
+    id: {
+      type: String,
+      required: !0
+    },
+    title: {
+      type: String,
+      required: !0
+    },
+    showClose: {
+      type: Boolean
+    },
+    scrolledDown: {
+      type: Boolean
+    },
+    headerSticky: {
+      type: Boolean
+    },
+    spinning: {
+      type: Boolean
+    },
+    submitLabel: {
+      type: String,
+      default: "Save"
+    },
+    cancelLabel: {
+      type: String,
+      default: "Cancel"
+    },
+    panelClass: {
+      type: String,
+      default: "max-w-xl"
+    }
+  },
+  emits: ["drawer:open", "drawer:close", "drawer:save", "drawer:closed"],
+  setup(t, { emit: x }) {
+    const n = x, g = t, {
+      contentRef: h,
+      ready: d,
+      isForm: C,
+      titleId: m,
+      descriptionId: v,
+      initialFocusElement: k
+    } = V(g);
+    return (s, e) => (f(), w(l(E), { as: "template" }, {
+      default: o(() => [
+        i(l(L), {
+          as: t.as,
+          class: "rvc-drawer",
+          static: "",
+          "aria-modal": "true",
+          role: "dialog",
+          "initial-focus": l(k),
+          "aria-labelledby": l(m),
+          onClose: e[5] || (e[5] = (r) => s.$emit("drawer:close")),
+          onSubmit: e[6] || (e[6] = S((r) => n("drawer:save", r), ["prevent"]))
+        }, {
+          default: o(() => [
+            i(l(b), {
+              as: "template",
+              enter: "ease-in-out duration-500",
+              "enter-from": "opacity-0",
+              "enter-to": "opacity-100",
+              leave: "ease-in-out duration-500",
+              "leave-from": "opacity-100",
+              "leave-to": "opacity-0",
+              onBeforeEnter: e[0] || (e[0] = (r) => n("drawer:open"))
+            }, {
+              default: o(() => e[7] || (e[7] = [
+                a("div", {
+                  class: "fixed inset-0 transition-opacity rvc-drawer-backdrop",
+                  "aria-hidden": "true"
+                }, null, -1)
+              ])),
+              _: 1
+            }),
+            a("div", R, [
+              a("div", q, [
+                a("div", F, [
+                  i(l(b), {
+                    as: "template",
+                    enter: "transform transition ease-in-out duration-500 sm:duration-700",
+                    "enter-from": "translate-x-full",
+                    "enter-to": "translate-x-0",
+                    leave: "transform transition ease-in-out duration-500 sm:duration-700",
+                    "leave-from": "translate-x-0",
+                    "leave-to": "translate-x-full",
+                    onBeforeEnter: e[3] || (e[3] = (r) => d.value = !0),
+                    onAfterLeave: e[4] || (e[4] = (r) => (d.value = !1, n("drawer:closed")))
+                  }, {
+                    default: o(() => [
+                      i(l(N), {
+                        class: u(["pointer-events-auto w-screen", t.panelClass]),
+                        "aria-busy": t.spinning,
+                        "aria-describedby": l(v)
+                      }, {
+                        default: o(() => [
+                          a("div", I, [
+                            a("header", {
+                              class: u([{ "sticky top-0 left-0 -w-full z-10": t.headerSticky }, "rvc-drawer-header"])
+                            }, [
+                              c(s.$slots, "header", {
+                                title: t.title,
+                                showClose: t.showClose
+                              }, () => [
+                                a("div", M, [
+                                  i(l(T), {
+                                    id: l(m),
+                                    class: "rvc-drawer-title"
+                                  }, {
+                                    default: o(() => [
+                                      B(D(t.title), 1)
+                                    ]),
+                                    _: 1
+                                  }, 8, ["id"]),
+                                  t.showClose ? (f(), $("div", j, [
+                                    a("button", {
+                                      type: "button",
+                                      class: "relative rvc-drawer-close",
+                                      "aria-label": "Close panel",
+                                      onClick: e[1] || (e[1] = (r) => n("drawer:close"))
+                                    }, [
+                                      i(l(z), {
+                                        class: "size-full",
+                                        "aria-hidden": "true"
+                                      })
+                                    ])
+                                  ])) : y("", !0)
+                                ])
+                              ])
+                            ], 2),
+                            a("div", {
+                              class: u([t.scrolledDown ? "flex-col-reverse" : "flex-col", "flex min-h-0 flex-1 overflow-y-scroll"])
+                            }, [
+                              a("div", {
+                                id: l(v),
+                                ref_key: "contentRef",
+                                ref: h,
+                                class: "relative flex-1 rvc-drawer-content"
+                              }, [
+                                c(s.$slots, "default", { ready: l(d) })
+                              ], 8, A)
+                            ], 2),
+                            a("footer", P, [
+                              c(s.$slots, "footer", { loading: t.spinning }, () => [
+                                i(p, {
+                                  type: "button",
+                                  label: t.cancelLabel,
+                                  color: "light",
+                                  onClick: e[2] || (e[2] = (r) => n("drawer:close"))
+                                }, null, 8, ["label"]),
+                                l(C) ? (f(), w(p, {
+                                  key: 0,
+                                  type: "submit",
+                                  label: t.submitLabel,
+                                  spinning: t.spinning,
+                                  disabled: t.spinning
+                                }, null, 8, ["label", "spinning", "disabled"])) : y("", !0)
+                              ])
+                            ])
+                          ])
+                        ]),
+                        _: 3
+                      }, 8, ["class", "aria-busy", "aria-describedby"])
+                    ]),
+                    _: 3
+                  })
+                ])
+              ])
+            ])
+          ]),
+          _: 3
+        }, 8, ["as", "initial-focus", "aria-labelledby"])
+      ]),
+      _: 3
+    }));
+  }
+};
+export {
+  Q as Drawer,
+  X as Modal
+};

package/dist/dialogs/modal.css

@@ -0,0 +1,98 @@
+:root {
+  --rvc-modal-backdrop-bg-color: var(--rvc-dialog-backdrop-bg-color);
+  --rvc-modal-border-color: var(--rvc-base-border-color);
+  --rvc-modal-border-width: var(--rvc-base-border-width);
+  --rvc-modal-border-style: var(--rvc-base-border-style);
+  --rvc-modal-border-radius: var(--rvc-base-border-radius);
+  --rvc-modal-padding-x: var(--rvc-dialog-padding-x);
+  --rvc-modal-padding-y: var(--rvc-dialog-padding-y);
+  --rvc-modal-header-bg-color: var(--rvc-dialog-header-bg-color);
+  --rvc-modal-title-font-size: var(--rvc-dialog-title-font-size);
+  --rvc-modal-title-font-weight: var(--rvc-dialog-title-font-weight);
+  --rvc-modal-title-font-family: var(--rvc-dialog-title-font-family);
+  --rvc-modal-title-color: var(--rvc-dialog-title-color);
+  --rvc-modal-close-size: var(--rvc-dialog-close-size);
+  --rvc-modal-close-color: var(--rvc-dialog-close-color);
+  --rvc-modal-close-color-hover: var(--rvc-dialog-close-color-hover);
+  --rvc-modal-content-bg-color: var(--rvc-dialog-content-bg-color);
+  --rvc-modal-footer-bg-color: var(--rvc-dialog-footer-bg-color);
+  --rvc-modal-footer-gap: var(--rvc-dialog-footer-gap);
+  --rvc-modal-box-shadow: var(--box-shadow-xl);
+  --rvc-modal-margin-y: 0;
+}
+
+@layer components {
+  .rvc-modal {
+    z-index: 600;
+    position: relative;
+
+    .rvc-modal-backdrop {
+      background-color: var(--rvc-modal-backdrop-bg-color);
+    }
+
+    .rvc-modal-panel {
+      border-color: var(--rvc-modal-border-color);
+      border-width: var(--rvc-modal-border-width);
+      border-style: var(--rvc-modal-border-style);
+      border-radius: var(--rvc-modal-border-radius);
+      box-shadow: var(--rvc-modal-box-shadow);
+      margin-block: var(--rvc-modal-margin-y);
+      display: flex;
+      height: 100%;
+      flex-direction: column;
+      position: relative;
+      transform: translate(0, 0);
+      overflow: hidden;
+      width: 100%;
+      text-align: left;
+    }
+
+    .rvc-modal-header {
+      padding-block: var(--rvc-modal-padding-y);
+      padding-inline: var(--rvc-modal-padding-x);
+      background-color: var(--rvc-modal-header-bg-color);
+      border-bottom-color: var(--rvc-modal-border-color);
+      border-bottom-width: var(--rvc-modal-border-width);
+      border-bottom-style: var(--rvc-modal-border-style);
+    }
+
+    .rvc-modal-title {
+      font-size: var(--rvc-modal-title-font-size);
+      font-weight: var(--rvc-modal-title-font-weight);
+      font-family: var(--rvc-modal-title-font-family);
+      color: var(--rvc-modal-title-color);
+    }
+
+    .rvc-modal-close {
+      width: var(--rvc-modal-close-size);
+      height: var(--rvc-modal-close-size);
+      color: var(--rvc-modal-close-color);
+
+      &:hover {
+        color: var(--rvc-modal-close-color-hover);
+      }
+    }
+
+    .rvc-modal-content {
+      padding-block: var(--rvc-modal-padding-y);
+      padding-inline: var(--rvc-modal-padding-x);
+      background-color: var(--rvc-modal-content-bg-color);
+    }
+
+    .rvc-modal-footer {
+      padding-block: var(--rvc-modal-padding-y);
+      padding-inline: var(--rvc-modal-padding-x);
+      gap: var(--rvc-modal-footer-gap);
+      background-color: var(--rvc-modal-footer-bg-color);
+      border-top-color: var(--rvc-modal-border-color);
+      border-top-width: var(--rvc-modal-border-width);
+      border-top-style: var(--rvc-modal-border-style);
+      display: flex;
+      flex-direction: column;
+
+      @media (width >= 40rem) {
+        flex-direction: row-reverse;
+      }
+    }
+  }
+}

package/dist/dialogs/styles.css

@@ -0,0 +1,2 @@
+@import "./drawer.css";
+@import "./modal.css";

package/dist/dropdown/dropdown.css

@@ -0,0 +1,89 @@
+:root {
+  --rvc-dropdown-bg-color: var(--rvc-base-input-bg-color);
+  --rvc-dropdown-border-radius: var(--rvc-base-border-radius);
+  --rvc-dropdown-border-width: var(--rvc-base-border-width);
+  --rvc-dropdown-border-color: var(--rvc-base-border-color);
+  --rvc-dropdown-icon-size: var(--rvc-base-input-icon-size);
+  --rvc-dropdown-icon-color: var(--rvc-base-input-icon-color);
+  --rvc-dropdown-icon-color-hover: var(--rvc-base-input-icon-color);
+  --rvc-dropdown-item-color: var(--rvc-base-input-color);
+  --rvc-dropdown-font-size: var(--rvc-base-font-size);
+  --rvc-dropdown-font-weight: var(--rvc-base-font-weight);
+  --rvc-dropdown-width: calc(var(--spacing) * 56);
+  --rvc-dropdown-padding-x: calc(var(--spacing) * 6);
+  --rvc-dropdown-padding-y: calc(var(--spacing) * 6);
+  --rvc-dropdown-gap: calc(var(--spacing) * 2);
+  --rvc-dropdown-z-index: 50;
+  --rvc-dropdown-item-gap: calc(var(--spacing) * 3);
+  --rvc-dropdown-item-border-radius: 0;
+  --rvc-dropdown-item-bg-color: transparent;
+  --rvc-dropdown-item-bg-color-hover: transparent;
+  --rvc-dropdown-item-color-hover: var(--color-slate-600);
+  --rvc-dropdown-item-padding-x: 0;
+  --rvc-dropdown-item-padding-y: 0;
+  --rvc-dropdown-item-font-size: var(--rvc-base-font-size);
+  --rvc-dropdown-item-font-weight: var(--rvc-base-font-weight);
+}
+
+@layer components {
+  .rvc-dropdown {
+    width: var(--rvc-dropdown-width);
+    background-color: var(--rvc-dropdown-bg-color);
+    border-radius: var(--rvc-dropdown-border-radius);
+    border-width: var(--rvc-dropdown-border-width);
+    border-color: var(--rvc-dropdown-border-color);
+    padding-block: var(--rvc-dropdown-padding-y);
+    padding-inline: var(--rvc-dropdown-padding-x);
+    font-size: var(--rvc-dropdown-font-size);
+    font-weight: var(--rvc-dropdown-font-weight);
+    gap: var(--rvc-dropdown-gap);
+    z-index: var(--rvc-dropdown-z-index);
+    margin-top: calc(var(--spacing) * 1);
+    position: absolute;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    right: 0;
+
+    &.rvc-dropdown-left {
+      left: 0;
+      right: auto;
+    }
+
+    &.rvc-dropdown-full {
+      left: 0;
+      right: 0;
+      width: 100%;
+    }
+
+    .rvc-dropdown-item {
+      color: var(--rvc-dropdown-item-color);
+      background-color: var(--rvc-dropdown-item-bg-color);
+      gap: var(--rvc-dropdown-item-gap);
+      padding-block: var(--rvc-dropdown-item-padding-y);
+      padding-inline: var(--rvc-dropdown-item-padding-x);
+      border-radius: var(--rvc-dropdown-item-border-radius);
+      font-size: var(--rvc-dropdown-item-font-size);
+      font-weight: var(--rvc-dropdown-item-font-weight);
+      display: flex;
+      align-items: center;
+      width: 100%;
+
+      &:hover {
+        color: var(--rvc-dropdown-item-color-hover);
+        background-color: var(--rvc-dropdown-item-bg-color-hover);
+        text-decoration: underline;
+
+        .rvc-dropdown-item-icon {
+          color: var(--rvc-dropdown-icon-color-hover);
+        }
+      }
+
+      .rvc-dropdown-item-icon {
+        width: var(--rvc-dropdown-icon-size);
+        height: var(--rvc-dropdown-icon-size);
+        color: var(--rvc-dropdown-icon-color);
+      }
+    }
+  }
+}

package/dist/dropdown/index.js

@@ -0,0 +1,136 @@
+import { createElementBlock as w, openBlock as o, createElementVNode as C, createBlock as r, unref as a, normalizeClass as u, withCtx as l, renderSlot as s, createVNode as i, mergeProps as f, Transition as B, Fragment as M, renderList as $, resolveDynamicComponent as m, createCommentVNode as A, createTextVNode as D, toDisplayString as L } from "vue";
+import { Menu as N, MenuButton as p, MenuItems as S, MenuItem as v } from "@headlessui/vue";
+import { _ as V } from "../_shared/ButtonBase-CQjlJ85F.js";
+function x(t, c) {
+  return o(), w("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 20 20",
+    fill: "currentColor",
+    "aria-hidden": "true",
+    "data-slot": "icon"
+  }, [
+    C("path", { d: "M10 3a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM10 8.5a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM11.5 15.5a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0Z" })
+  ]);
+}
+const T = /* @__PURE__ */ Object.assign({
+  inheritAttrs: !1
+}, {
+  __name: "Dropdown",
+  props: {
+    items: {
+      type: Array,
+      required: !0,
+      default: () => []
+    },
+    alignLeft: {
+      type: Boolean,
+      default: !1
+    },
+    fullWidth: {
+      type: Boolean,
+      default: !1
+    },
+    label: {
+      type: String,
+      default: "Options"
+    },
+    rootClass: {
+      type: String,
+      default: ""
+    }
+  },
+  emits: ["dropdown:click"],
+  setup(t, { emit: c }) {
+    const b = c, y = (n) => {
+      const {
+        as: g,
+        bindAs: e,
+        event: d,
+        icon: h,
+        name: I,
+        ...k
+      } = n;
+      return k;
+    };
+    return (n, g) => (o(), r(a(N), {
+      as: "div",
+      class: u(["relative inline-block w-fit", t.rootClass])
+    }, {
+      default: l(() => [
+        s(n.$slots, "button", {
+          label: t.label,
+          button: a(p)
+        }, () => [
+          i(a(p), f({
+            as: V,
+            label: t.label,
+            color: "light",
+            icon: a(x),
+            "icon-left": t.alignLeft
+          }, n.$attrs), null, 16, ["label", "icon", "icon-left"])
+        ]),
+        i(B, {
+          "enter-active-class": "transition duration-100 ease-out",
+          "enter-from-class": "transform scale-95 opacity-0",
+          "enter-to-class": "transform scale-100 opacity-100",
+          "leave-active-class": "transition duration-75 ease-in",
+          "leave-from-class": "transform scale-100 opacity-100",
+          "leave-to-class": "transform scale-95 opacity-0"
+        }, {
+          default: l(() => [
+            i(a(S), {
+              class: u([
+                "rvc-dropdown",
+                {
+                  "rvc-dropdown-left": t.alignLeft,
+                  "rvc-dropdown-full": t.fullWidth
+                }
+              ])
+            }, {
+              default: l(() => [
+                s(n.$slots, "items", {
+                  items: t.items,
+                  menuItem: a(v)
+                }, () => [
+                  (o(!0), w(M, null, $(t.items, (e, d) => (o(), r(a(v), {
+                    key: `${d}-dropdown-item`,
+                    as: "template"
+                  }, {
+                    default: l(() => [
+                      s(n.$slots, "item", { item: e }, () => [
+                        (o(), r(m(e.as ? e.as : "button"), f({
+                          class: "rvc-dropdown-item",
+                          ref_for: !0
+                        }, y(e), {
+                          as: e.bindAs ? e.bindAs : void 0,
+                          onClick: (h) => (b("dropdown:click", e), e.event ? e.event() : null)
+                        }), {
+                          default: l(() => [
+                            e.icon ? (o(), r(m(e.icon), {
+                              key: 0,
+                              class: "rvc-dropdown-item-icon"
+                            })) : A("", !0),
+                            D(" " + L(e.name), 1)
+                          ]),
+                          _: 2
+                        }, 1040, ["as", "onClick"]))
+                      ])
+                    ]),
+                    _: 2
+                  }, 1024))), 128))
+                ])
+              ]),
+              _: 3
+            }, 8, ["class"])
+          ]),
+          _: 3
+        })
+      ]),
+      _: 3
+    }, 8, ["class"]));
+  }
+});
+export {
+  T as Dropdown,
+  T as default
+};

package/dist/dropdown/styles.css

@@ -0,0 +1 @@
+@import "./dropdown.css";

package/dist/lightswitch/index.js

@@ -0,0 +1,48 @@
+import { computed as n, createBlock as o, openBlock as r, unref as a, withCtx as s, createVNode as p, createCommentVNode as h, mergeProps as f, createElementVNode as g, renderSlot as w } from "vue";
+import { SwitchGroup as V, Switch as v, SwitchLabel as b } from "@headlessui/vue";
+const B = /* @__PURE__ */ Object.assign({
+  inheritAttrs: !1
+}, {
+  __name: "Lightswitch",
+  props: {
+    modelValue: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(u, { emit: i }) {
+    const d = u, c = i, l = n({
+      get: () => d.modelValue,
+      set: (e) => c("update:modelValue", e)
+    });
+    return (e, t) => (r(), o(a(V), {
+      as: "div",
+      class: "rvc-lightswitch-group"
+    }, {
+      default: s(() => [
+        p(a(v), f({
+          modelValue: l.value,
+          "onUpdate:modelValue": t[0] || (t[0] = (m) => l.value = m),
+          class: [{ "rvc-lightswitch-enabled": l.value }, "rvc-lightswitch"]
+        }, e.$attrs), {
+          default: s(() => t[1] || (t[1] = [
+            g("span", { class: "rvc-lightswitch-toggle" }, null, -1)
+          ])),
+          _: 1
+        }, 16, ["modelValue", "class"]),
+        e.$slots.default ? (r(), o(a(b), { key: 0 }, {
+          default: s(() => [
+            w(e.$slots, "default")
+          ]),
+          _: 3
+        })) : h("", !0)
+      ]),
+      _: 3
+    }));
+  }
+});
+export {
+  B as Lightswitch,
+  B as default
+};

package/dist/lightswitch/lightswitch.css

@@ -0,0 +1,68 @@
+:root {
+  --rvc-lightswitch-transition-duration: var(--rvc-base-transition-duration);
+  --rvc-lightswitch-transition-timing-function: var(--rvc-base-transition-timing-function);
+  --rvc-lightswitch-toggle-transition-duration: var(--rvc-base-transition-duration);
+  --rvc-lightswitch-toggle-transition-timing-function: var(--rvc-base-transition-timing-function);
+  --rvc-lightswitch-border-radius: calc(infinity * 1px);
+  --rvc-lightswitch-height: 1.875rem;
+  --rvc-lightswitch-width: 3.125rem;
+  --rvc-lightswitch-bg-color: var(--color-slate-200);
+  --rvc-lightswitch-bg-color-enabled: var(--color-green-400);
+  --rvc-lightswitch-transition-property: colors;
+  --rvc-lightswitch-label-offset: 0.5rem;
+  --rvc-lightswitch-toggle-offset: 0.1875rem;
+  --rvc-lightswitch-toggle-size: calc(var(--spacing) * 6);
+  --rvc-lightswitch-toggle-bg-color: var(--color-white);
+  --rvc-lightswitch-toggle-transition-property: transform;
+}
+
+@layer components {
+  .rvc-lightswitch-group {
+    display: inline-block;
+
+    &:has(label) {
+      display: inline-flex;
+      align-items: center;
+    }
+
+    label {
+      cursor: pointer;
+      padding-left: var(--rvc-lightswitch-label-offset);
+    }
+
+    .rvc-lightswitch {
+      height: var(--rvc-lightswitch-height);
+      transition-property: var(--rvc-lightswitch-transition-property);
+      transition-duration: var(--rvc-lightswitch-transition-duration);
+      transition-timing-function: var(--rvc-lightswitch-transition-timing-function);
+      width: var(--rvc-lightswitch-width);
+      border-radius: var(--rvc-lightswitch-border-radius);
+      background-color: var(--rvc-lightswitch-bg-color);
+      position: relative;
+      display: inline-flex;
+      align-items: center;
+
+      .rvc-lightswitch-toggle {
+        width: var(--rvc-lightswitch-toggle-size);
+        height: var(--rvc-lightswitch-toggle-size);
+        transform: translateX(var(--rvc-lightswitch-toggle-offset));
+        transform-origin: left;
+        border-radius: var(--rvc-lightswitch-border-radius);
+        background-color: var(--rvc-lightswitch-toggle-bg-color);
+        transition-property: var(--rvc-lightswitch-toggle-transition-property);
+        transition-duration: var(--rvc-lightswitch-toggle-transition-duration);
+        transition-timing-function: var(--rvc-lightswitch-toggle-transition-timing-function);
+        display: inline-block;
+        box-shadow: var(--shadow-md);
+      }
+
+      &.rvc-lightswitch-enabled {
+        background-color: var(--rvc-lightswitch-bg-color-enabled);
+
+        .rvc-lightswitch-toggle {
+          transform: translateX(calc(var(--rvc-lightswitch-width) - var(--rvc-lightswitch-toggle-size) - var(--rvc-lightswitch-toggle-offset)));
+        }
+      }
+    }
+  }
+}

package/dist/lightswitch/styles.css

@@ -0,0 +1 @@
+@import "./lightswitch.css";