@robuust-digital/vue-components 2.0.0-rc.5 → 2.0.0-rc.6

package/dist/toast/toast.css

@@ -13,7 +13,7 @@
   --rvc-toast-anchor-decoration: underline;
   --rvc-toast-icon-size: calc(var(--spacing) * 6);
   --rvc-toast-title-font-weight: var(--font-weight-medium);
-  --rvc-toast-transition-property: colors;
+  --rvc-toast-transition-property: color, background-color, border-color;
   --rvc-toast-offset: calc(var(--spacing) * 6);
 
   /* Default (Info) variant */
@@ -59,23 +59,26 @@
 
 @layer components {
   .rvc-toast {
-    gap: var(--rvc-toast-gap);
-    padding: var(--rvc-toast-padding-y) var(--rvc-toast-padding-x);
-    border-radius: var(--rvc-toast-border-radius);
-    font-size: var(--rvc-toast-font-size);
-    background-color: var(--rvc-toast-bg-color);
-    color: var(--rvc-toast-color);
-    width: var(--rvc-toast-width);
-    max-width: var(--rvc-toast-max-width);
-    border-width: var(--rvc-toast-border-width);
-    border-color: var(--rvc-toast-border-color);
-    filter: drop-shadow(0px 4px 8px rgba(0, 0, 0, 0.05));
     display: flex;
     position: fixed;
+    z-index: 99;
     left: 50%;
-    transform: translateX(-50%);
+    width: var(--rvc-toast-width);
+    max-width: var(--rvc-toast-max-width);
+    padding: var(--rvc-toast-padding-y) var(--rvc-toast-padding-x);
     overflow: hidden;
-    z-index: 99;
+    transform: translateX(-50%);
+    transition-property: opacity;
+    transition-duration: var(--rvc-toast-transition-duration);
+    transition-timing-function: var(--rvc-toast-transition-timing-function);
+    border-width: var(--rvc-toast-border-width);
+    border-radius: var(--rvc-toast-border-radius);
+    border-color: var(--rvc-toast-border-color);
+    background-color: var(--rvc-toast-bg-color);
+    color: var(--rvc-toast-color);
+    font-size: var(--rvc-toast-font-size);
+    gap: var(--rvc-toast-gap);
+    filter: drop-shadow(0 4px 8px rgb(0 0 0 / 5%));
 
     &.rvc-toast-bottom {
       bottom: var(--rvc-toast-offset);
@@ -86,11 +89,11 @@
     }
 
     a {
-      text-decoration: var(--rvc-toast-anchor-decoration);
       transition-property: var(--rvc-toast-transition-property);
       transition-duration: var(--rvc-toast-transition-duration);
       transition-timing-function: var(--rvc-toast-transition-timing-function);
       color: var(--rvc-toast-anchor-color);
+      text-decoration: var(--rvc-toast-anchor-decoration);
 
       &:hover {
         color: var(--rvc-toast-anchor-color);
@@ -98,9 +101,9 @@
     }
 
     ul, ol {
-      list-style-position: inside;
       margin: 0;
       padding-left: calc(var(--spacing) * 2);
+      list-style-position: inside;
     }
 
     ul {
@@ -112,39 +115,44 @@
     }
 
     .rvc-toast-close {
-      background-color: var(--rvc-toast-close-bg-color);
-      color: var(--rvc-toast-icon-color);
-      border-bottom-left-radius: var(--rvc-toast-border-radius);
-      transition-property: var(--rvc-toast-transition-property);
-      transition-duration: var(--rvc-toast-transition-duration);
-      transition-timing-function: var(--rvc-toast-transition-timing-function);
       display: inline-flex;
-      justify-content: center;
-      align-items: center;
       position: absolute;
       top: 0;
       right: 0;
+      align-items: center;
+      justify-content: center;
       padding: calc(var(--spacing) * 1.5);
+      transition-property: var(--rvc-toast-transition-property);
+      transition-duration: var(--rvc-toast-transition-duration);
+      transition-timing-function: var(--rvc-toast-transition-timing-function);
+      border-bottom-left-radius: var(--rvc-toast-border-radius);
+      background-color: var(--rvc-toast-close-bg-color);
+      color: var(--rvc-toast-icon-color);
 
       &:hover {
         background-color: var(--rvc-toast-close-bg-color-hover);
         color: var(--rvc-toast-icon-color-hover);
       }
+
+      svg {
+        width: calc(var(--spacing) * 5);
+        height: calc(var(--spacing) * 5);
+      }
     }
 
     .rvc-toast-icon {
+      display: block;
+      flex-shrink: 0;
       width: var(--rvc-toast-icon-size);
       height: var(--rvc-toast-icon-size);
       color: var(--rvc-toast-icon-color);
-      display: block;
-      flex-shrink: 0;
     }
 
     .rvc-toast-title {
-      color: var(--rvc-toast-title-color);
-      font-weight: var(--rvc-toast-title-font-weight);
       display: block;
       margin-bottom: calc(var(--spacing) * 2);
+      color: var(--rvc-toast-title-color);
+      font-weight: var(--rvc-toast-title-font-weight);
 
       &:last-child {
         margin-bottom: 0;
@@ -184,4 +192,22 @@
       --rvc-toast-anchor-color-hover: var(--rvc-toast-anchor-color-danger-hover);
     }
   }
+
+  /* Transitions */
+  .rvc-toast-transition-enter,
+  .rvc-toast-transition-leave {
+    transition-property: opacity;
+    transition-duration: 300ms;
+    transition-timing-function: var(--rvc-toast-transition-timing-function);
+  }
+
+  .rvc-toast-transition-enter-from,
+  .rvc-toast-transition-leave-to {
+    opacity: 0;
+  }
+
+  .rvc-toast-transition-enter-to,
+  .rvc-toast-transition-leave-from {
+    opacity: 1;
+  }
 }

package/dist/tooltip/index.js

@@ -1,4 +1,4 @@
-import { _ as o } from "../_shared/Tooltip-BKXJoJ1x.js";
+import { _ as o } from "../_shared/Tooltip-B93ZF7IF.js";
 export {
   o as Tooltip,
   o as default

package/dist/tooltip/tooltip.css

@@ -20,39 +20,36 @@
 
 @layer components {
   .rvc-tooltip {
+    visibility: hidden;
+    position: absolute;
     z-index: 10;
-    color: var(--rvc-tooltip-color);
+    top: 0;
+    left: 0;
+    width: var(--rvc-tooltip-width);
+    padding: var(--rvc-tooltip-padding-y) var(--rvc-tooltip-padding-x) var(--rvc-tooltip-padding-y) var(--rvc-tooltip-padding-x);
     transition-property: var(--rvc-tooltip-transition-property);
     transition-duration: var(--rvc-tooltip-transition-duration);
     transition-timing-function: var(--rvc-tooltip-transition-timing-function);
+    opacity: 0;
+    color: var(--rvc-tooltip-color);
     text-align: var(--rvc-tooltip-text-align);
-    padding-top: var(--rvc-tooltip-padding-y);
-    padding-right: var(--rvc-tooltip-padding-x);
-    padding-bottom: var(--rvc-tooltip-padding-y);
-    padding-left: var(--rvc-tooltip-padding-x);
-    width: var(--rvc-tooltip-width);
-    position: absolute;
-    top: 0;
-    left: 0;
 
     &::before {
       content: '';
       position: absolute;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: 0;
+      z-index: -1;
+      inset: 0;
       border-radius: var(--rvc-tooltip-border-radius);
       background-color: var(--rvc-tooltip-bg-color);
-      z-index: -1;
     }
 
     .rvc-tooltip-arrow {
-      background-color: var(--rvc-tooltip-bg-color);
+      position: absolute;
+      z-index: -1;
       width: var(--rvc-tooltip-arrow-size);
       height: var(--rvc-tooltip-arrow-size);
+      background-color: var(--rvc-tooltip-bg-color);
       clip-path: polygon(0 0, 50% 50%, 100% 0);
-      z-index: -1;
     }
 
     &.rvc-tooltip-blur::before,
@@ -66,4 +63,9 @@
       --rvc-tooltip-arrow-size: var(--rvc-tooltip-arrow-size-sm);
     }
   }
+
+  .rvc-tooltip-wrapper:hover .rvc-tooltip {
+    visibility: visible;
+    opacity: 1;
+  }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@robuust-digital/vue-components",
-  "version": "2.0.0-rc.5",
+  "version": "2.0.0-rc.6",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -50,7 +50,8 @@
     "docs:build": "vitepress build docs",
     "docs:preview": "vitepress preview docs",
     "test:unit": "vitest run",
-    "lint": "eslint ."
+    "lint": "eslint .",
+    "lint:style": "stylelint 'src/**/*.{vue,css}'"
   },
   "dependencies": {
     "@floating-ui/vue": "^1.1.6",
@@ -74,10 +75,16 @@
     "eslint-plugin-vue": "^9.32.0",
     "jsdom": "^26.0.0",
     "postcss": "^8.5.2",
+    "postcss-html": "^1.8.0",
+    "postcss-scss": "^4.0.9",
+    "stylelint": "^16.14.1",
+    "stylelint-config-property-sort-order-smacss": "^10.0.0",
+    "stylelint-config-standard": "^37.0.0",
     "tailwindcss": "^4.0.6",
     "vite": "^6.1.0",
     "vite-plugin-eslint": "^1.8.1",
     "vite-plugin-static-copy": "^2.2.0",
+    "vite-plugin-stylelint": "^6.0.0",
     "vite-plugin-vue-devtools": "^7.7.2",
     "vite-svg-loader": "^5.1.0",
     "vitepress": "^2.0.0-alpha.2",

package/dist/_shared/Modal-CsI5mZlJ.js

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