vunor 0.0.2

package/dist/theme.mjs

@@ -0,0 +1,1149 @@
+import "vue";
+import R, { defu as w } from "defu";
+import { presetWind as N } from "unocss";
+import { palitra as m, color as v } from "@prostojs/palitra";
+function o(r) {
+  let e = "";
+  for (const [t, c] of Object.entries(r)) {
+    const i = W(c);
+    e += `${i.map((a) => `${t}${a}`).join(" ")} `;
+  }
+  return e.trim();
+}
+function W(r) {
+  if (typeof r == "string")
+    return r.split(" ");
+  if (Array.isArray(r))
+    return r;
+  const e = [];
+  for (const [t, c] of Object.entries(r))
+    e.push(...W(c).map((i) => `${t}${i}`));
+  return e;
+}
+const L = {
+  btn: o({
+    "": "h-fingertip flex items-center justify-center px-$m gap-$xs select-none fw-bold tracking-wide relative",
+    "[&.btn-round]:": "px-fingertip-half rounded-fingertip-half",
+    "[&.btn-square]:": "size-fingertip px-0",
+    "[&.btn-round.btn-square]:": "px-0",
+    "disabled:": "opacity-80 cursor-not-allowed",
+    "[&>span]:data-[loading]:": "opacity-0 pointer-events-none",
+    "[&>div:not(.loading-indicator-wrapper)]:data-[loading]:": "opacity-0 pointer-events-none",
+    "[&>.loading-indicator-wrapper]:": "absolute left-0 top-0 right-0 bottom-0 flex items-center justify-center cursor-wait"
+  }),
+  "btn-square": o({
+    "": ""
+  }),
+  "btn-label": o({
+    "": "lh-1em ellipsis whitespace-nowrap overflow-x-clip overflow-y-visible",
+    "group-[.btn-square]/btn:": "hidden"
+  }),
+  "btn-icon": o({
+    "": "size-1em font-size-1.25em",
+    "group-[.btn-round]/btn:[&.btn-icon-left]:": "ml-[-0.5em]",
+    "group-[.btn-round]/btn:[&.btn-icon-right]:": "mr-[-0.5em]",
+    "group-[.btn-square]/btn:": "font-size-1.5em m-0!",
+    "group-[.btn-round.btn-square]/btn:": "m-0!"
+  })
+}, V = [
+  "h1",
+  "h2",
+  "h3",
+  "h4",
+  "h5",
+  "h6",
+  "subheading",
+  "body-l",
+  "body",
+  "body-s",
+  "callout"
+], q = {
+  card: `data-[rounded=true]:rounded-$card-spacing data-[dense=true]:card-dense! ${V.map((r) => `data-[level=${r}]:card-${r}`).join(" ")}`
+}, C = {
+  "checkbox-root": o({
+    "": "text-body select-none flex gap-$m cursor-default current-bg-scope-color-500 current-border-scope-color-500",
+    "data-[error=true]:": "current-border-error-500",
+    "aria-[disabled=true]:": "scope-grey opacity-50 cursor-not-allowed"
+  }),
+  checkbox: o({
+    "": "cursor-default shrink-0 select-none rounded-[0.28em] transition-all transition-duration-100 flex size-1.5em appearance-none items-center justify-center bg-current/0 backdrop-blur-sm border-current border-[0.16em] current-icon-white",
+    "group-active/cb:enabled:": "current-bg-scope-color-500 bg-current/20 current-icon-scope-color-500",
+    // 'group-hover/cb:enabled:': 'border-current',
+    "disabled:": "cursor-not-allowed border-1px backdrop-blur-sm",
+    "group-[[data-error=true]]/cb:enabled:": "current-border-error-500 border-current",
+    "data-[state=unchecked]": "current-border-grey-500 border-current/40"
+  }),
+  "checkbox-indicator": o({
+    "": "bg-current icon-current h-full w-full flex items-center justify-center"
+  }),
+  "checkbox-icon": o({
+    "": "size-0.9em animate-cb-appear animate-duration-200 animate-ease"
+  }),
+  "checkbox-label": o({
+    "": "select-none text-body lh-1.5em"
+  })
+}, T = {
+  "combobox-multi-input": "i8-input relative flex items-center",
+  "combobox-multi-items": "text-ellipsis overflow-hidden whitespace-nowrap absolute max-w-full pr-$m lh-1em",
+  "combobox-embedded-input": "text-left outline-0 outline-offset-0",
+  "combobox-c8-icon": o({
+    "": "hover:current-icon-scope-color-500 hover:icon-current cursor-pointer",
+    "group-[[aria-expanded=true]]/i8:": "-scale-100"
+  })
+}, D = {
+  "loading-indicator": "cursor-wait",
+  "loading-indicator-ring": o({
+    "": "animate-spin animate-duration-1500",
+    "[&>circle]:": "animate-loading-dashoffset animate-count-infinite animate-duration-2500"
+  })
+}, M = {
+  "menu-root": "flex flex-col overflow-hidden",
+  "menu-item": "justify-start c8-flat gap-$m w-full fw-400"
+}, X = {
+  "rb-container": o({
+    "": "flex flex-col gap-$s text-body"
+  }),
+  "rb-label": o({
+    "": "text-label text-grey-400"
+  }),
+  "rb-root": o({
+    "": "flex gap-x-$l gap-y-$m",
+    "[&.rb-row]:": "flex-wrap",
+    "not-[.rb-row]:": "flex-col"
+  }),
+  "rb-item-wrapper": o({
+    "": "flex"
+  }),
+  "rb-item": o({
+    "": "select-none shrink-0 current-bg-scope-color-500 bg-current/0 size-1.25em rounded-full cursor-default current-border-grey-500 border-current/40 border-[0.16em] transition-none backdrop-blur-sm",
+    "data-[state=checked]:not-[[data-error='true']]:": "current-border-scope-color-500 border-current",
+    "data-[state=checked]:": "bg-current",
+    "active:enabled:": "bg-current/20",
+    "aria-[disabled=true]:": "scope-grey opacity-50 cursor-not-allowed",
+    "data-[error=true]:": "current-border-error-500 current-bg-error-500"
+  }),
+  "rb-item-indicator": o({
+    "": "flex items-center justify-center w-full h-full rounded-full relative after:content-[''] after:block after:size-[0.5em] after:rounded-[50%] after:bg-white animate-zoom-in animate-duration-100"
+  }),
+  "rb-item-label": o({
+    "": "select-none px-$s text-body leading-none lh-1.25em",
+    "aria-[disabled=true]:": "scope-grey opacity-50 cursor-not-allowed"
+  })
+}, Y = {
+  "select-content": o({
+    "": "min-w-[60px] rounded-base surface-0 bg-current/70 backdrop-blur-xl overflow-hidden shadow-xl z-[100] current-border-grey-400 border-current/20 ",
+    "data-[design=round]:": "rounded-fingertip-half",
+    "[&>div[data-radix-combobox-viewport]]:": "max-h-[var(--radix-popper-available-height)] [scrollbar-width:auto]",
+    "[&>div[data-radix-combobox-viewport]::-webkit-scrollbar]:": "block"
+    // 'data-[side=top]:': 'animate-slide-down-and-fade',
+    // 'data-[side=right]:': 'animate-slide-left-and-fade',
+    // 'data-[side=bottom]:': 'animate-slide-up-and-fade',
+    // 'data-[side=left]:': 'animate-slide-right-and-fade',
+  }),
+  "select-scroll-btn": "flex items-center justify-center h-fingertip cursor-default",
+  "select-grp-label": o({
+    "": "px-$m h-fingertip flex items-center ",
+    "group-data-[design=round]:": "px-fingertip-half",
+    "[&>span]:": "text-label text-grey-400"
+  }),
+  "select-item": o({
+    "": "text-body leading-none flex items-center h-fingertip relative select-none relative",
+    "data-[disabled]:": "opacity-40 pointer-events-none",
+    "data-[highlighted]:": "outline-none bg-scope-color-500/15",
+    "[&>span]:": "px-$m",
+    "group-data-[design=round]:[&>span]:": "px-fingertip-half",
+    "[&>span]:data-[state=checked]:": "text-scope-color-500 fw-700!"
+  }),
+  "select-separator": "h-[1px] bg-grey-500/10 mx-$s"
+}, A = {
+  slider: o({
+    "": "relative flex items-center select-none touch-none min-w-2em min-h-2em"
+  }),
+  "slider-track": o({
+    "": "bg-grey-500/20 relative grow rounded-full h-[0.25em]"
+  }),
+  "slider-range": o({
+    "": "absolute bg-scope-color-500 rounded-full h-full"
+  }),
+  "slider-thumb": o({
+    "": "block w-[1.5em] h-[1.5em] bg-scope-color-500 rounded-full border-scope-light-0 border-[3px] outline-scope-color-500/10 outline-0px outline-solid",
+    "dark:": "border-scope-dark-0",
+    "not-[[disabled]]:": o({
+      "": "cursor-grab",
+      "hover:": "shadow-md",
+      "active:": "cursor-grabbing",
+      "focus:": "outline-[0.5em]"
+    })
+  })
+}, ar = [
+  q,
+  M,
+  L,
+  C,
+  X,
+  Y,
+  T,
+  A,
+  D
+], x = 0.08;
+function B(r) {
+  const e = R(r, I), t = {
+    count: 5,
+    preserveInputColor: !1,
+    luminance: { dark: e.darkest, light: e.darkest + x, useMiddle: !1 },
+    saturate: { dark: -0.2, light: -0.2 },
+    vivid: { dark: 0, light: 0 },
+    suffixes: ["dark-0", "dark-1", "dark-2", "dark-3", "dark-4"]
+  }, c = m(z(e.colors, 5), t).toStrings();
+  t.suffixes = ["light-0", "light-1", "light-2", "light-3", "light-4"].reverse(), t.luminance = { dark: 1 - x, light: 1, useMiddle: !1 };
+  const i = m(z(e.colors, 5), t).toStrings(), a = m(
+    {
+      primary: {
+        color: e.colors.primary,
+        preserveInputColor: !0,
+        saturate: { dark: -0.2, light: -0.2 }
+      },
+      grey: { color: e.colors.grey, saturate: { dark: 0, light: 0 } },
+      secondary: { color: e.colors.secondary, vivid: { dark: 0.4, light: 0.4 } },
+      neutral: { color: e.colors.neutral, vivid: { dark: 0.1, light: 0.1 } },
+      good: { color: e.colors.good, vivid: { dark: 0.2, light: 0.5 } },
+      warn: { color: e.colors.warn, vivid: { dark: 0.2, light: 0.3 } },
+      error: { color: e.colors.error }
+    },
+    {
+      count: 10,
+      preserveInputColor: !1,
+      luminance: {
+        dark: e.darkest + x + 0.02,
+        light: e.lightest,
+        useMiddle: !0,
+        middle: 0.62
+      },
+      saturate: { dark: -0.25, light: -0.25 },
+      vivid: { dark: 0.1, light: 0.2 }
+    }
+  ).toStrings();
+  return {
+    colors: {
+      ...c,
+      ...i,
+      ...a
+    },
+    surfaces: {
+      //    |   bg   |    text    |   border   | dark:bg |  dark:text | dark:border |
+      0: ["light-0", "dark-1", "color-100", "dark-0", "light-1", "color-800"],
+      1: ["light-1", "dark-1", "color-100", "dark-1", "light-1", "color-800"],
+      2: ["light-2", "dark-1", "color-100", "dark-2", "light-1", "color-800"],
+      3: ["light-3", "dark-1", "color-100", "dark-3", "light-1", "color-800"],
+      4: ["light-4", "dark-1", "color-100", "dark-4", "light-1", "color-800"],
+      50: ["color-50", "color-700", "color-200", "color-900", "color-200", "color-500"],
+      100: ["color-100", "color-800", "color-200", "color-800", "color-200", "color-500"],
+      200: ["color-200", "color-800", "color-400", "color-700", "color-100", "color-400"],
+      300: ["color-300", "color-900", "color-500", "color-600", "color-100", "color-300"],
+      400: ["color-400", "color-50", "color-200", "color-500", "color-50", "color-200"],
+      500: ["color-500", "color-50", "color-200", "color-400", "color-50", "color-100"],
+      600: ["color-600", "color-100", "color-300", "color-300", "color-900", "color-700"],
+      700: ["color-700", "color-100", "color-300", "color-200", "color-800", "color-600"],
+      800: ["color-800", "color-200", "color-400", "color-100", "color-800", "color-500"],
+      900: ["color-900", "color-200", "color-400", "color-50", "color-700", "color-500"]
+    }
+  };
+}
+function z(r, e = 2) {
+  const t = {};
+  for (const [c, i] of Object.entries(r)) {
+    const [a, l, s] = v(i).hsl();
+    t[c] = v(a, l / e, s, "hsl").hex();
+  }
+  return t;
+}
+const I = {
+  colors: {
+    primary: "#004eaf",
+    grey: "#858892",
+    secondary: "#edd812",
+    neutral: "#5da0c5",
+    good: "#7bc76a",
+    warn: "#ef9421",
+    error: "#bf5a5f"
+  },
+  darkest: 0.24,
+  lightest: 0.97
+};
+function P() {
+  return [
+    [
+      /^layer-([0-4])$/,
+      ([, r], { theme: e }) => {
+        let t = Number(r), c = Number(r);
+        return e.reverseDarkLayers && (t = 4 - Number(r)), e.reverseLightLayers && (c = 4 - Number(r)), o({
+          "": `current-bg-scope-light-${c} current-text-scope-dark-2 current-icon-scope-dark-2 bg-current text-current`,
+          "dark:": `current-bg-scope-dark-${t} current-text-scope-light-2 current-icon-scope-light-2`,
+          "[&.dark]:": `current-bg-scope-dark-${t} current-text-scope-light-2 current-icon-scope-light-2`
+        });
+      }
+    ],
+    [
+      /^surface-(\d+)$/,
+      ([, r], { theme: e }) => e.surfaces[r] ? o({
+        "": `current-bg-scope-${e.surfaces[r][0]} current-text-scope-${e.surfaces[r][1]} current-icon-scope-${e.surfaces[r][1]} current-border-scope-${e.surfaces[r][2]} bg-current text-current border-current icon-current`,
+        "dark:": `current-bg-scope-${e.surfaces[r][3]} current-text-scope-${e.surfaces[r][4]} current-icon-scope-${e.surfaces[r][4]} current-border-scope-${e.surfaces[r][5]} shadow-black/30`,
+        "[&.dark]:": `current-bg-scope-${e.surfaces[r][3]} current-text-scope-${e.surfaces[r][4]} current-icon-scope-${e.surfaces[r][4]} current-border-scope-${e.surfaces[r][5]} shadow-black/30`
+      }) : ""
+    ],
+    {
+      surface: "surface-100"
+    }
+  ];
+}
+function g(r, e = 0) {
+  const t = 10 ** e;
+  return Math.round(r * t) / t;
+}
+function b(r, e, t = 3) {
+  var a;
+  const c = Number.parseFloat(r), i = ((a = /(px|em|rem|%)$/.exec(r)) == null ? void 0 : a[1]) || "";
+  return `${g(c * e, t)}${i}`;
+}
+const E = {
+  getCSS: ({ theme: r }) => `${f("body", r.fontSize.body) + // renderFontCss('label', theme.fontSize.label) +
+  f("figcaption", r.fontSize.caption) + f("h1", r.fontSize.h1) + f("h2", r.fontSize.h2) + f("h3", r.fontSize.h3) + f("h4", r.fontSize.h4) + f("h5", r.fontSize.h5) + f("h6", r.fontSize.h6)}
+:root {
+   --un-default-border-color: rgba(0,0,0,10%);
+   --scope-black: 0 0 0;
+   --scope-white: 255 255 255;
+   --v-fingertip: ${r.spacing["fingertip-m"] || "3em"};
+   --v-fingertip-half: ${b(r.spacing["fingertip-m"] || "3em", 0.5)};
+}
+
+html.dark, .dark {
+   --un-default-border-color: rgba(255,255,255,10%);
+}
+
+::-webkit-scrollbar {
+    width: 10px;
+    height: 10px;
+}
+
+::-webkit-scrollbar-track {
+    background: rgba(0,0,0,0.05);
+    border-radius: 5px;
+}
+
+::-webkit-scrollbar-thumb {
+    background-color: rgba(0,0,0,0.2);
+    border-radius: 5px;
+    border: 2px solid transparent;
+    background-clip: padding-box;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background-color: rgba(0,0,0,0.3);
+}
+
+
+.dark ::-webkit-scrollbar-track {
+    background: rgba(255,255,255,0.05);
+}
+
+.dark ::-webkit-scrollbar-thumb {
+    background-color: rgba(255,255,255,0.2);
+}
+
+.dark ::-webkit-scrollbar-thumb:hover {
+    background-color: rgba(255,255,255,0.3);
+}
+`
+};
+function f(r, e) {
+  return `${r} { font-size: ${e[0]}; ${Object.entries(e[1]).map((t) => `${t[0]}: ${t[1]};`).join(" ")} }
+`;
+}
+function d(r) {
+  const [e, t, c, i] = v(r).rgba();
+  return `${e} ${t} ${c}`;
+}
+function S(r) {
+  return {
+    bg: "--un-bg-opacity",
+    text: "--un-text-opacity",
+    fill: "--un-text-opacity",
+    stroke: "--un-text-opacity",
+    icon: "--un-icon-opacity",
+    border: "--un-border-opacity",
+    outline: "--un-outline-opacity",
+    caret: "--un-caret-opacity"
+  }[r];
+}
+function F(r) {
+  return {
+    bg: "background-color",
+    text: "color",
+    fill: "fill",
+    stroke: "stroke",
+    icon: "color",
+    border: "border-color",
+    outline: "outline-color",
+    caret: "caret-color"
+  }[r];
+}
+const G = [
+  [
+    /^current-(text|bg|icon|border|outline|caret)-(.+)$/,
+    (r, { theme: e }) => {
+      const t = r[1], c = r[2];
+      if (c.startsWith("scope-"))
+        return {
+          [`--current-${t}`]: `var(--${c})`
+        };
+      const i = e.colors[c] || c;
+      if (i)
+        return {
+          [`--current-${t}`]: d(i)
+        };
+    }
+  ],
+  [
+    /^(text|bg|icon|border|outline|caret|fill)-current(-text|-bg|-icon|-border|-outline|-caret)?(\/\d{1,3})?$/,
+    (r, { theme: e }) => {
+      const t = r[1], c = r[2] || `-${t}`, i = S(t), a = F(t), l = r[3], s = l ? Number(l.slice(1)) / 100 : 1, u = s === 1 ? `var(${i})` : s;
+      return t === "icon" ? {
+        [i]: s
+      } : {
+        [i]: s,
+        [a]: `rgb(var(--current${c}) / ${u})`
+      };
+    }
+  ],
+  [
+    /^scope-(.*)$/,
+    (r, { theme: e }) => {
+      const t = r[1], c = e.colors[t];
+      if (c)
+        return {
+          "--scope-color": d(c),
+          "--scope-color-50": d(e.colors[`${t}-50`]) || "",
+          "--scope-color-100": d(e.colors[`${t}-100`]) || "",
+          "--scope-color-200": d(e.colors[`${t}-200`]) || "",
+          "--scope-color-300": d(e.colors[`${t}-300`]) || "",
+          "--scope-color-400": d(e.colors[`${t}-400`]) || "",
+          "--scope-color-500": d(e.colors[`${t}-500`]) || "",
+          "--scope-color-600": d(e.colors[`${t}-600`]) || "",
+          "--scope-color-700": d(e.colors[`${t}-700`]) || "",
+          "--scope-color-800": d(e.colors[`${t}-800`]) || "",
+          "--scope-color-900": d(e.colors[`${t}-900`]) || "",
+          "--scope-light-0": d(e.colors[`${t}-light-0`]) || "",
+          "--scope-light-1": d(e.colors[`${t}-light-1`]) || "",
+          "--scope-light-2": d(e.colors[`${t}-light-2`]) || "",
+          "--scope-light-3": d(e.colors[`${t}-light-3`]) || "",
+          "--scope-light-4": d(e.colors[`${t}-light-4`]) || "",
+          "--scope-dark-0": d(e.colors[`${t}-dark-0`]) || "",
+          "--scope-dark-1": d(e.colors[`${t}-dark-1`]) || "",
+          "--scope-dark-2": d(e.colors[`${t}-dark-2`]) || "",
+          "--scope-dark-3": d(e.colors[`${t}-dark-3`]) || "",
+          "--scope-dark-4": d(e.colors[`${t}-dark-4`]) || ""
+        };
+    }
+  ],
+  [
+    /^(bg|text|fill|stroke|border|outline|icon|caret)-scope-((?:color|dark|light|text|bg|white|black|icon)(?:-\d+)?)(\/\d{1,3})?$/,
+    (r, { theme: e }) => {
+      const t = F(r[1]), c = S(r[1]), i = r[2], a = r[3], l = a ? Number(a.slice(1)) / 100 : 1, s = i.startsWith("color") ? `grey-${i.slice(6)}` : `grey-${i}`, u = l === 1 ? `var(${c})` : l;
+      return {
+        [c]: l,
+        [t]: `rgb(var(--scope-${i}, ${e.colors[s] || ""}) / ${u})`
+      };
+    }
+  ],
+  [
+    /^icon-opacity-(\d{1,3})$/,
+    (r, { theme: e }) => {
+      const t = r[1];
+      return {
+        "--un-icon-opacity": Number(t) / 100
+      };
+    }
+  ],
+  [
+    /^icon-color$/,
+    () => ({
+      color: "rgb(var(--current-icon) / var(--un-icon-opacity, 1))"
+    })
+  ]
+], J = [
+  [
+    // special text margin (vertical) that compensates
+    // the line height
+    /^text-m([bty])?-(.*)$/,
+    (r, { theme: e }) => {
+      const t = r[1], c = r[2], i = t ? { y: ["top", "bottom"], t: ["top"], b: ["bottom"] }[t] : ["top", "bottom", "left", "right"], a = {};
+      if (e.spacing[c]) {
+        for (const l of i)
+          a[`margin-${l}`] = ["left", "right"].includes(l) ? e.spacing[c] : `calc(${e.spacing[c]} + var(--font-${l === "top" ? "tc" : "bc"}))`;
+        return a;
+      } else if (/^\d+(em|rem|px)?$/.test(c)) {
+        let l = c;
+        /^[\d.]+$/.test(c) && (l = `${Number(c) * 0.25}rem`);
+        for (const s of i)
+          a[`margin-${s}`] = ["left", "right"].includes(s) ? l : `calc(${l} + var(--font-${s === "top" ? "tc" : "bc"}))`;
+        return a;
+      }
+    },
+    { layer: "utilities" }
+  ],
+  [
+    /^card-dense$/,
+    (r, { theme: e }) => ({
+      "--card-spacing": "var(--card-spacing-dense)"
+    }),
+    { layer: "utilities" }
+  ],
+  [
+    /^card-(.*)$/,
+    (r, { theme: e }) => {
+      const t = r[1];
+      if (e.fontSize[t]) {
+        const c = e.fontSize[t][1];
+        return {
+          "--card-spacing": `${b(c["--font-corrected"], e.cardSpacingFactor.regular)}`,
+          "--card-spacing-dense": `${b(
+            c["--font-corrected"],
+            e.cardSpacingFactor.dense
+          )}`,
+          "--card-heading-size": c["--font-size"],
+          "--card-heading-bold": c["--font-bold"],
+          "--card-heading-corrected": c["--font-corrected"],
+          "--card-heading-weight": c["font-weight"],
+          "--card-heading-lh": c["line-height"],
+          "--card-heading-ls": c["letter-spacing"],
+          "--card-heading-bc": c["--font-bc"],
+          "--card-heading-tc": c["--font-tc"],
+          padding: "var(--card-spacing)"
+        };
+      }
+    }
+  ],
+  [
+    /^fingertip-(.*)/,
+    (r, { theme: e }) => {
+      const t = r[1];
+      if (t.startsWith("[") && t.endsWith("]"))
+        return {
+          "--v-fingertip": t.slice(1, -1),
+          "--v-fingertip-half": b(t.slice(1, -1), 0.5)
+        };
+      if (["xs", "s", "m", "l", "xl"].includes(t))
+        return {
+          "--v-fingertip": e.spacing[`fingertip-${t}`],
+          "--v-fingertip-half": b(e.spacing[`fingertip-${t}`], 0.5)
+        };
+      if (e.spacing[t])
+        return {
+          "--v-fingertip": e.spacing[t],
+          "--v-fingertip-half": b(e.spacing[t], 0.5)
+        };
+    }
+  ]
+], K = [...J, ...G], Q = {
+  // FILLED
+  "c8-filled": o({
+    "": "current-bg-scope-color-500 rounded-base current-text-white current-icon-white icon-current/100 bg-current  text-current",
+    "hover:": "c8-filled-hover",
+    "focus-visible:": "c8-filled-hover",
+    "data-[highlighted]:": "c8-filled-hover",
+    "active:": "c8-filled-active",
+    "data-[active]:": "c8-filled-active"
+  }),
+  "c8-filled-hover": o({
+    "not-([disabled]):": "current-bg-scope-color-400",
+    "dark:not-([disabled]):": "current-bg-scope-color-600"
+  }),
+  "c8-filled-active": o({
+    "not-([disabled]):": "current-bg-scope-color-600",
+    "dark:not-([disabled]):": "current-bg-scope-color-400"
+  }),
+  // FLAT (Transparent)
+  "c8-flat": o({
+    "": "current-bg-scope-color-500 rounded-base current-text-black current-icon-black bg-current/0 text-current/80 icon-current/50",
+    "dark:": "current-text-white current-icon-white",
+    "hover:": "c8-flat-hover",
+    "focus-visible:": "c8-flat-hover",
+    "data-[highlighted]:": "c8-flat-hover",
+    "active:": "c8-flat-active",
+    "data-[active]:": "c8-flat-active",
+    "data-[selected=true]:": "c8-flat-selected",
+    "aria-[selected=true]:": "c8-flat-selected",
+    "aria-[pressed=true]:": "c8-flat-selected"
+  }),
+  "c8-flat-hover": o({
+    "not-([disabled]):": "bg-current/05 backdrop-blur-xl"
+  }),
+  "c8-flat-active": o({
+    "not-([disabled]):": "bg-current/10 backdrop-blur-xl"
+  }),
+  "c8-flat-selected": o({
+    "": "c8-flat-hover current-text-scope-color-500 text-current current-icon-scope-color-500 icon-current/100",
+    "dark:": "current-text-scope-color-400 current-icon-scope-color-400"
+  }),
+  // OUTLINED (Bordered)
+  "c8-outlined": o({
+    "": "c8-flat border-scope-color-500 rounded-base border current-text-scope-color-500 current-icon-scope-color-500 icon-current/100",
+    "dark:": "current-text-scope-color-400 current-icon-scope-color-400",
+    "hover:": "c8-outlined-hover",
+    "focus-visible:": "c8-outlined-hover",
+    "data-[highlighted]:": "c8-outlined-hover",
+    "active:": "c8-outlined-active",
+    "data-[active]:": "c8-outlined-active"
+  }),
+  "c8-outlined-hover": "c8-flat-hover",
+  "c8-outlined-active": "c8-flat-active",
+  // LIGHT (Filled/Transparent)
+  "c8-light": o({
+    "": "current-bg-scope-color-500 rounded-base current-text-scope-color-500 current-icon-scope-color-500 bg-current/10 text-current icon-current/80 backdrop-blur-xl",
+    "dark:": "current-text-scope-color-400 current-icon-scope-color-400",
+    "hover:": "c8-light-hover",
+    "focus-visible:": "c8-light-hover",
+    "data-[highlighted]:": "c8-light-hover",
+    "active:": "c8-light-active",
+    "data-[active]:": "c8-light-active",
+    "data-[selected=true]:": "c8-light-hover",
+    "aria-[selected=true]:": "c8-light-hover",
+    "aria-[pressed=true]:": "c8-light-hover"
+  }),
+  "c8-light-hover": o({
+    "not-([disabled]):": "bg-current/15"
+  }),
+  "c8-light-active": o({
+    "not-([disabled]):": "bg-current/20"
+  })
+}, U = {
+  i8: o({
+    "": "h-fingertip min-w-3em flex items-center select-none relative current-icon-grey-500 icon-current/75 content-box current-border-grey-500 border-current/20",
+    "data-[type=textarea]": "min-h-fingertip h-auto items-start",
+    "data-[active=true]:": "current-icon-scope-color-500 icon-current/100 current-bg-white",
+    // 'dark:': '',
+    "[&.i8-flat]:": {
+      "": "border-b"
+    },
+    "[&.i8-filled]:": {
+      "": " current-bg-scope-light-0 bg-current/75 border border-current/20 rounded-base backdrop-blur-xl",
+      "data-[active=true]:": "current-bg-scope-light-0 bg-current/100 current-outline-scope-color-500 outline-current/50 outline-2px outline",
+      "dark:": {
+        "": "current-bg-scope-dark-2",
+        "data-[active=true]:": "current-bg-scope-dark-0"
+      }
+    },
+    "[&.i8-no-border]:": "border-0! outline-none! rounded-0!",
+    "[&.i8-transparent]:": "bg-transparent!",
+    "[&.i8-round]:": "rounded-fingertip-half border border-current/20",
+    "aria-[disabled=true]:": "opacity-50 cursor-not-allowed",
+    // error
+    "group-[[data-error=true]]/i8:": {
+      "": "current-border-error-500 border-current"
+    }
+  }),
+  "i8-underline": o({
+    "group-[.i8-filled]/i8:": "hidden",
+    "": "absolute left-50% h-2px right-50% bottom-[-1px] pointer-events-none transition-all transition-duration-300 will-change-left will-change-right current-bg-scope-color-500 bg-current",
+    "group-[[data-active=true]]/i8:": "left-0 right-0"
+  }),
+  segmented: o({
+    "": {
+      "first-of-type:": "rounded-r-0!",
+      "last-of-type:": "rounded-lt-0! rounded-lb-0!",
+      "not-last-of-type:not-first-of-type:": "rounded-0!",
+      "not-first-of-type:": "border-l-0! border-l-grey-500/20",
+      "data-[active=true]:": "z-2"
+    },
+    "[&.i8-flat]:": {
+      "not-first-of-type:": "ml-$xs"
+    }
+  }),
+  "i8-input-wrapper": o({
+    "": "relative w-full h-full"
+  }),
+  "i8-input": o({
+    "": "w-full outline-none h-full bg-transparent",
+    "group-[.i8-flat]/i8:data-[has-prepend=true]": "pl-$s",
+    "group-[.i8-flat]/i8:data-[has-append=true]": "pr-$s",
+    "group-[.i8-filled]/i8:": "px-$m",
+    "selection:": "bg-scope-color-500 text-white",
+    "group-[.i8-round]/i8:[&[data-has-prepend='false']]:": "pl-fingertip-half",
+    "group-[.i8-round]/i8:[&[data-has-append='false']]:": "pr-fingertip-half",
+    "group-[[data-has-label]]/i8:": "pt-$m",
+    // groupped inputs paddings
+    "group-[.segmented:not(.i8-flat):not(:first-child)]/i8:": "pl-$m",
+    "group-[.segmented:not(.i8-flat):not(:last-child)]/i8:": "pr-$m"
+  }),
+  "i8-textarea": o({
+    "": "w-full outline-none h-full bg-transparent text-body",
+    // !
+    "group-[.i8-flat]/i8:data-[has-prepend=true]": "pl-$s",
+    "group-[.i8-flat]/i8:data-[has-append=true]": "pr-$s",
+    "group-[.i8-filled]/i8:": "px-$m",
+    "selection:": "bg-scope-color-500 text-white",
+    "group-[.i8-round]/i8:[&[data-has-prepend='false']]:": "pl-fingertip-half",
+    "group-[.i8-round]/i8:[&[data-has-append='false']]:": "pr-fingertip-half",
+    // groupped inputs paddings
+    "group-[.segmented:not(.i8-flat):not(:first-child)]/i8:": "pl-$m",
+    "group-[.segmented:not(.i8-flat):not(:last-child)]/i8:": "pr-$m"
+  }),
+  "i8-ta-wrapper": o({
+    "": "w-full pt-0.75em",
+    "group-[[data-has-label]]/i8:": "mt-$m"
+  }),
+  "i8-label": o({
+    "": "absolute top-0 h-fingertip text-body text-grey-400 lh-fingertip transition-all transition-duration-300 truncate text-ellipsis overflow-hidden max-w-70%",
+    "group-[[data-active=true]]/i8:": "h-[2em] lh-2em text-label font-size-[0.7em] text-scope-color-500",
+    "group-[[data-has-placeholder]]/i8:": "h-[2em] lh-2em text-label font-size-[0.7em]",
+    "group-[[data-has-value]]/i8:": "h-[2em] lh-2em text-label font-size-[0.7em]"
+    // 'data-[required=true]:after:': "content-['*'] text-error-500",
+  }),
+  "i8-label-wrapper": o({
+    "": "pointer-events-none absolute left-0 right-0 bottom-0 top-0",
+    // paddings
+    "group-[.i8-flat]/i8:data-[has-prepend=true]": "pl-$s",
+    "group-[.i8-flat]/i8:data-[has-append=true]": "pr-$s",
+    "group-[.i8-filled]/i8:": "px-$m",
+    "group-[.i8-round]/i8:[&[data-has-prepend='false']]:": "pl-fingertip-half",
+    "group-[.i8-round]/i8:[&[data-has-append='false']]:": "pr-fingertip-half",
+    // groupped inputs paddings
+    "group-[.segmented:not(.i8-flat):not(:first-child)]/i8:": "pl-$m",
+    "group-[.segmented:not(.i8-flat):not(:last-child)]/i8:": "pr-$m"
+  }),
+  "i8-hint": o({
+    "": "text-caption pt-$xs text-grey-400 flex-1"
+  }),
+  "i8-counter": o({
+    "": "text-caption pt-$xs text-grey-400"
+  }),
+  "i8-hint-wrapper": o({
+    "": "relative flex justify-between",
+    "group-[.i8-round]/i8:": "px-fingertip-half",
+    "group-[.i8-filled]/i8:": "px-$m"
+  }),
+  "i8-hint-wrapper-stack": o({
+    "": "relative flex justify-between"
+  }),
+  "i8-stack-label": o({
+    "": "relative pb-$xxs"
+  }),
+  "i8-prepend": o({
+    "": "my-1em",
+    "group-[.i8-filled]/i8:": "pl-$m",
+    "group-[.i8-round]/i8:": "pl-$m",
+    // groupped inputs paddings
+    "group-[.segmented:not(.i8-flat):not(:first-child)]/i8:": "pl-$m"
+  }),
+  "i8-append": o({
+    "": "my-1em flex gap-$s items-center",
+    "group-[.i8-filled]/i8:": "pr-$m",
+    "group-[.i8-round]/i8:": "pr-$m",
+    // groupped inputs paddings
+    "group-[.segmented:not(.i8-flat):not(:last-child)]/i8:": "pr-$m"
+  }),
+  "i8-before": o({
+    "": "h-fingertip flex items-center pr-$m current-icon-grey-500 icon-current/75",
+    "group-[[data-group-active=true]]/i8:": "current-icon-scope-color-500 icon-current/100"
+  }),
+  "i8-after": o({
+    "": "h-fingertip flex items-center pl-$m current-icon-grey-500 icon-current/75",
+    "group-[[data-group-active=true]]/i8:": "current-icon-scope-color-500 icon-current/100"
+  }),
+  "i8-icon-clickable": o({
+    "[&>.icon-color]:": "cursor-pointer",
+    "[&>.icon-color:hover]:": "current-icon-scope-color-500 icon-current"
+  })
+};
+function p(r, e, t, c, i) {
+  return {
+    weight: r,
+    boldWeight: e,
+    size: t,
+    height: c,
+    spacing: i
+  };
+}
+function n(r, e = 1) {
+  return e * 1.618 ** r;
+}
+const Z = {
+  h1: (
+    /*          */
+    p(
+      400,
+      700,
+      n(3.5),
+      /*   */
+      n(0.5),
+      -0.025
+    )
+  ),
+  h2: (
+    /*          */
+    p(
+      400,
+      700,
+      n(2.5),
+      /*   */
+      n(0.5),
+      -0.022
+    )
+  ),
+  h3: (
+    /*          */
+    p(
+      400,
+      700,
+      n(2),
+      /*   */
+      n(0.5),
+      -0.022
+    )
+  ),
+  h4: (
+    /*          */
+    p(
+      400,
+      600,
+      n(1),
+      /*     */
+      n(0.5),
+      -0.02
+    )
+  ),
+  h5: (
+    /*          */
+    p(
+      400,
+      600,
+      n(0.5),
+      /*   */
+      n(0.5),
+      -0.017
+    )
+  ),
+  h6: (
+    /*          */
+    p(
+      600,
+      700,
+      n(0.25),
+      /*  */
+      n(0.5),
+      -0.014
+    )
+  ),
+  subheading: (
+    /*  */
+    p(
+      400,
+      600,
+      n(-0.2),
+      /*  */
+      n(0.5),
+      -7e-3
+    )
+  ),
+  "body-l": (
+    /*      */
+    p(
+      400,
+      600,
+      n(0.5),
+      /*  */
+      n(0.75),
+      -0.014
+    )
+  ),
+  body: (
+    /*        */
+    p(
+      400,
+      600,
+      n(0),
+      /*    */
+      n(0.75),
+      -0.011
+    )
+  ),
+  "body-s": (
+    /*      */
+    p(
+      400,
+      600,
+      n(-0.5),
+      /*    */
+      n(1),
+      0
+    )
+  ),
+  callout: (
+    /*     */
+    p(
+      400,
+      600,
+      n(-0.25),
+      /* */
+      n(0.5),
+      -9e-3
+    )
+  ),
+  label: (
+    /*       */
+    p(
+      500,
+      700,
+      n(-0.25),
+      /* */
+      n(0.5),
+      -4e-3
+    )
+  ),
+  caption: (
+    /*     */
+    p(
+      400,
+      600,
+      n(-0.5),
+      /*  */
+      n(0.5),
+      -7e-3
+    )
+  ),
+  overline: (
+    /*    */
+    p(
+      400,
+      600,
+      n(-0.5),
+      /*  */
+      n(0.5),
+      0.0618
+    )
+  )
+};
+function _(r, e, t, c, i, a = 1, l = 0.5) {
+  const s = r * a, h = (c * r - s) / r, $ = s / 2, O = s * l - $ + h / 2, H = s * (1 - l) - $ + h / 2, k = g(O, 4), y = g(H, 4);
+  return {
+    mt: k,
+    mb: y,
+    size: r,
+    correctedSize: s,
+    theme: [
+      `${r}em`,
+      {
+        "--font-bold": t,
+        "--font-size": `${r}em`,
+        "--font-corrected": `${s}em`,
+        "--font-bc": `${-y}em`,
+        "--font-tc": `${-k}em`,
+        "font-weight": e,
+        "line-height": `${c}em`,
+        "letter-spacing": `${i}em`
+        // margins are compensationg font-height + extra font glyphs spacing
+        // 'margin-top': `${-mt}em`,
+        // 'margin-bottom': `${-mb}em`,
+      }
+      //   actualFontHeightFactor,
+    ]
+  };
+}
+const rr = (r) => {
+  const e = {
+    // canonical
+    $xxs: `${g(1 / r.spacingFactor ** 3, 3)}em`,
+    $xs: `${g(1 / r.spacingFactor ** 2, 3)}em`,
+    $s: `${g(1 / r.spacingFactor, 3)}em`,
+    $m: "1em",
+    $l: `${g(r.spacingFactor, 3)}em`,
+    $xl: `${g(r.spacingFactor ** 2, 3)}em`,
+    $xxl: `${g(r.spacingFactor ** 3, 3)}em`,
+    fingertip: "var(--v-fingertip)",
+    "fingertip-half": "var(--v-fingertip-half)",
+    "fingertip-xs": r.fingertip.xs,
+    "fingertip-s": r.fingertip.s,
+    "fingertip-m": r.fingertip.m,
+    "fingertip-l": r.fingertip.l,
+    "fingertip-xl": r.fingertip.xl,
+    // font-based
+    "$font-tc": "var(--font-bc)",
+    "$font-bc": "var(--font-tc)",
+    "$font-size": "var(--font-size)",
+    "$font-corrected": "var(--font-corrected)",
+    // cards
+    "$card-spacing": "var(--card-spacing)",
+    "$card-spacing-dense": "var(--card-spacing-dense)",
+    "$card-heading-size": "var(--card-heading-size)",
+    "$card-heading-corrected": "var(--card-heading-corrected)",
+    // radius
+    "base-radius": r.baseRadius
+  }, t = {
+    fingertip: "var(--v-fingertip)",
+    "fingertip-half": "var(--v-fingertip-half)",
+    "fingertip-xs": r.fingertip.xs,
+    "fingertip-s": r.fingertip.s,
+    "fingertip-m": r.fingertip.m,
+    "fingertip-l": r.fingertip.l,
+    "fingertip-xl": r.fingertip.xl
+  }, c = {
+    ...e,
+    base: r.baseRadius
+  }, i = {
+    $bold: "var(--font-bold)"
+  }, a = {
+    "card-header": [
+      "var(--card-heading-size)",
+      {
+        "--font-bold": "var(--card-heading-bold)",
+        "--font-size": "var(--card-heading-size)",
+        "--font-corrected": "var(--card-heading-corrected)",
+        "--font-bc": "var(--card-heading-bc)",
+        "--font-tc": "var(--card-heading-tc)",
+        "font-weight": "var(--card-heading-weight)",
+        "line-height": "var(--card-heading-lh)",
+        "letter-spacing": "var(--card-heading-ls)"
+      }
+    ]
+  };
+  for (const [s, u] of Object.entries(r.typography))
+    if (u != null && u.size) {
+      const h = _(
+        u.size || 1,
+        u.weight || 400,
+        u.boldWeight || 700,
+        u.height || 1,
+        u.spacing || 0,
+        u.actualHeightFactor || r.actualFontHeightFactor,
+        u.actualHeightTopBottomRatio || r.actualFontHeightTopBottomRatio
+      );
+      a[s] = h.theme, e[s] = `${h.size}em`;
+    }
+  const l = B(r.palette);
+  return {
+    colors: l.colors,
+    surfaces: l.surfaces,
+    borderColor: "red",
+    reverseLightLayers: r.layers.reverseLight,
+    reverseDarkLayers: r.layers.reverseDark,
+    lineHeight: t,
+    spacing: e,
+    fontWeight: i,
+    actualFontHeightFactor: r.actualFontHeightFactor,
+    cardSpacingFactor: r.cardSpacingFactor,
+    fontSize: a,
+    width: e,
+    height: e,
+    maxWidth: e,
+    maxHeight: e,
+    minWidth: e,
+    minHeight: e,
+    borderRadius: c,
+    animation: {
+      durations: {
+        "slide-down-and-fade": "100ms",
+        "slide-left-and-fade": "100ms",
+        "slide-up-and-fade": "100ms",
+        "slide-right-and-fade": "100ms",
+        "zoom-fade-in": "100ms"
+      },
+      keyframes: {
+        "slide-down-and-fade": `{
+          from { opacity: 0; transform: translateY(-6px) }
+          to { opacity: 1; transform: translateY(0) }
+        }`,
+        "slide-left-and-fade": `{
+          from { opacity: 0; transform: translateX(6px) }
+          to { opacity: 1; transform: translateX(0) }
+        }`,
+        "slide-up-and-fade": `{
+          from { opacity: 0; transform: translateY(6px) }
+          to { opacity: 1; transform: translateY(0) }
+        }`,
+        "slide-right-and-fade": `{
+          from { opacity: 0; transform: translateX(-6px) }
+          to { opacity: 1; transform: translateX(0) }
+        }`,
+        "zoom-fade-in": `{
+          from { opacity: 0; transform: scale(1.02) }
+          to { opacity: 1; transform: scale(1) }
+        }`,
+        "loading-dashoffset": `{
+          from {
+            stroke-dashoffset: 0;
+          }
+          to {
+            stroke-dashoffset: -76;
+          }
+        }`,
+        "cb-appear": `{
+          from {
+            clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
+          }
+          to {
+            clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
+          }
+        }`
+      }
+    }
+    // animation: {
+    //   slideDownAndFade: 'slideDownAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
+    //   slideLeftAndFade: 'slideLeftAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
+    //   slideUpAndFade: 'slideUpAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
+    //   slideRightAndFade: 'slideRightAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
+    // },
+  };
+};
+function j(r, e = 1) {
+  return e * Math.sqrt(1.618) ** r;
+}
+const er = {
+  spacingFactor: 1.618,
+  actualFontHeightFactor: 1,
+  actualFontHeightTopBottomRatio: 0.52,
+  cardSpacingFactor: {
+    regular: 1,
+    dense: 0.6
+  },
+  typography: Z,
+  layers: {
+    reverseDark: !1,
+    reverseLight: !1
+  },
+  fingertip: {
+    xs: `${g(j(-2, 3), 3)}em`,
+    s: `${g(j(-1, 3), 3)}em`,
+    m: "3em",
+    l: "3.5em",
+    xl: "4em"
+  },
+  baseRadius: `${g(1 / 1.618, 3)}em`
+}, lr = (r) => {
+  const e = w(r, er), t = tr();
+  t.preflights || (t.preflights = []), t.preflights.push(E), t.rules || (t.rules = []), t.rules.push(...K);
+  const c = P();
+  return {
+    ...t,
+    name: "vunor",
+    theme: w(rr(e), t.theme),
+    shortcuts: [...c, Q, U],
+    layers: {
+      preflights: 0,
+      shortcuts: 1,
+      default: 2,
+      utilities: 3
+    }
+  };
+};
+function tr() {
+  var e;
+  const r = N();
+  return (e = r.rules) == null || e.forEach((t) => {
+    t[0] instanceof RegExp && (t[0].source.startsWith("^m-") || t[0].source.startsWith("^ma?") || t[0].source.startsWith("^p-?") || t[0].source.startsWith("^pa?")) && (t[2] = t[2] || {}, t[2].layer = "utilities");
+  }), r;
+}
+export {
+  lr as presetVunor,
+  o as scFromObject,
+  ar as shortcuts
+};