@pihanga2/shadcn 0.2.4 → 0.2.6

package/components/ui/field.js

@@ -2,10 +2,10 @@ import { cn as e } from "../../lib/utils.js";
 import { Label as t } from "./label.js";
 import "./separator.js";
 import { useMemo as n } from "react";
-import { cva as r } from "class-variance-authority";
-import { jsx as i } from "react/jsx-runtime";
+import { jsx as r } from "react/jsx-runtime";
+import { cva as i } from "class-variance-authority";
 //#region src/components/ui/field.tsx
-var a = r("group/field flex w-full gap-3 data-[invalid=true]:text-destructive", {
+var a = i("group/field flex w-full gap-3 data-[invalid=true]:text-destructive", {
 	variants: { orientation: {
 		vertical: ["flex-col [&>*]:w-full [&>.sr-only]:w-auto"],
 		horizontal: [
@@ -21,40 +21,40 @@ var a = r("group/field flex w-full gap-3 data-[invalid=true]:text-destructive",
 	} },
 	defaultVariants: { orientation: "vertical" }
 });
-function o({ className: t, orientation: n = "vertical", ...r }) {
-	return /* @__PURE__ */ i("div", {
+function o({ className: t, orientation: n = "vertical", ...i }) {
+	return /* @__PURE__ */ r("div", {
 		role: "group",
 		"data-slot": "field",
 		"data-orientation": n,
 		className: e(a({ orientation: n }), t),
-		...r
+		...i
 	});
 }
-function s({ className: n, ...r }) {
-	return /* @__PURE__ */ i(t, {
+function s({ className: n, ...i }) {
+	return /* @__PURE__ */ r(t, {
 		"data-slot": "field-label",
 		className: e("group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50", "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-4", "has-data-[state=checked]:border-primary has-data-[state=checked]:bg-primary/5 dark:has-data-[state=checked]:bg-primary/10", n),
-		...r
+		...i
 	});
 }
 function c({ className: t, ...n }) {
-	return /* @__PURE__ */ i("p", {
+	return /* @__PURE__ */ r("p", {
 		"data-slot": "field-description",
 		className: e("text-sm leading-normal font-normal text-muted-foreground group-has-[[data-orientation=horizontal]]/field:text-balance", "last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&]:-mt-1.5", "[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary", t),
 		...n
 	});
 }
-function l({ className: t, children: r, errors: a, ...o }) {
+function l({ className: t, children: i, errors: a, ...o }) {
 	let s = n(() => {
-		if (r) return r;
+		if (i) return i;
 		if (!a?.length) return null;
 		let e = [...new Map(a.map((e) => [e?.message, e])).values()];
-		return e?.length == 1 ? e[0]?.message : /* @__PURE__ */ i("ul", {
+		return e?.length == 1 ? e[0]?.message : /* @__PURE__ */ r("ul", {
 			className: "ml-4 flex list-disc flex-col gap-1",
-			children: e.map((e, t) => e?.message && /* @__PURE__ */ i("li", { children: e.message }, t))
+			children: e.map((e, t) => e?.message && /* @__PURE__ */ r("li", { children: e.message }, t))
 		});
-	}, [r, a]);
-	return s ? /* @__PURE__ */ i("div", {
+	}, [i, a]);
+	return s ? /* @__PURE__ */ r("div", {
 		role: "alert",
 		"data-slot": "field-error",
 		className: e("text-sm font-normal text-destructive", t),

package/components/ui/label.js

@@ -1,10 +1,10 @@
 import { cn as e } from "../../lib/utils.js";
 import "react";
-import { jsx as t } from "react/jsx-runtime";
-import { Label as n } from "radix-ui";
+import { Label as t } from "radix-ui";
+import { jsx as n } from "react/jsx-runtime";
 //#region src/components/ui/label.tsx
 function r({ className: r, ...i }) {
-	return /* @__PURE__ */ t(n.Root, {
+	return /* @__PURE__ */ n(t.Root, {
 		"data-slot": "label",
 		className: e("flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50", r),
 		...i

package/components/ui/separator.js

@@ -1,5 +1,5 @@
 "use client";
 import "../../lib/utils.js";
 import "react";
-import "react/jsx-runtime";
 import "radix-ui";
+import "react/jsx-runtime";

package/components/ui/toggle-group.js

@@ -2,9 +2,9 @@
 import { cn as e } from "../../lib/utils.js";
 import { toggleVariants as t } from "./toggle.js";
 import * as n from "react";
+import { ToggleGroup as r } from "radix-ui";
+import { jsx as i } from "react/jsx-runtime";
 import "class-variance-authority";
-import { jsx as r } from "react/jsx-runtime";
-import { ToggleGroup as i } from "radix-ui";
 //#region src/components/ui/toggle-group.tsx
 var a = n.createContext({
 	size: "default",
@@ -12,7 +12,7 @@ var a = n.createContext({
 	spacing: 0
 });
 function o({ className: t, variant: n, size: o, spacing: s = 0, children: c, ...l }) {
-	return /* @__PURE__ */ r(i.Root, {
+	return /* @__PURE__ */ i(r.Root, {
 		"data-slot": "toggle-group",
 		"data-variant": n,
 		"data-size": o,
@@ -20,7 +20,7 @@ function o({ className: t, variant: n, size: o, spacing: s = 0, children: c, ...
 		style: { "--gap": s },
 		className: e("group/toggle-group flex w-fit items-center gap-[--spacing(var(--gap))] rounded-md data-[spacing=default]:data-[variant=outline]:shadow-xs", t),
 		...l,
-		children: /* @__PURE__ */ r(a.Provider, {
+		children: /* @__PURE__ */ i(a.Provider, {
 			value: {
 				variant: n,
 				size: o,
@@ -32,7 +32,7 @@ function o({ className: t, variant: n, size: o, spacing: s = 0, children: c, ...
 }
 function s({ className: o, children: s, variant: c, size: l, ...u }) {
 	let d = n.useContext(a);
-	return /* @__PURE__ */ r(i.Item, {
+	return /* @__PURE__ */ i(r.Item, {
 		"data-slot": "toggle-group-item",
 		"data-variant": d.variant || c,
 		"data-size": d.size || l,

package/components/ui/toggle.js

@@ -1,8 +1,8 @@
 import "../../lib/utils.js";
 import "react";
-import { cva as e } from "class-variance-authority";
-import "react/jsx-runtime";
 import "radix-ui";
+import "react/jsx-runtime";
+import { cva as e } from "class-variance-authority";
 //#region src/components/ui/toggle.tsx
 var t = e("inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-[color,box-shadow] outline-none hover:bg-muted hover:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
 	variants: {

package/lib/utils.d.ts

@@ -1,2 +1,17 @@
 import { ClassValue } from 'clsx';
 export declare function cn(...inputs: ClassValue[]): string;
+/**
+ * Returns "#000000" or "#ffffff" for maximum contrast against the given background color (hex or rgb).
+ *
+ * Based on WCAG relative luminance, which models human visual perception:
+ *   L = 0.2126·R + 0.7152·G + 0.0722·B
+ *
+ * The weights reflect how sensitive our eyes are to each channel —
+ * green contributes 71% of perceived brightness, red ~21%, blue only 7%.
+ * This means a vivid red like #c0392b is perceptually *dim* (L≈0.11), so
+ * white text (contrast 8.7:1) beats black text (2.4:1) against it.
+ *
+ * The threshold L > 0.179 is the luminance midpoint where both black and
+ * white achieve ~4.5:1 contrast — the WCAG AA minimum.
+ */
+export declare function contrastColor(bg: string, threshold?: number): "#000000" | "#ffffff";

package/lib/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","names":[],"sources":["../../src/lib/utils.ts"],"sourcesContent":["import {clsx, type ClassValue} from \"clsx\";\nimport {twMerge} from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n"],"mappings":";;;AAGA,SAAgB,EAAG,GAAG,GAAsB;CAC1C,OAAO,EAAQ,EAAK,CAAM,CAAC;AAC7B"}
+{"version":3,"file":"utils.js","names":[],"sources":["../../src/lib/utils.ts"],"sourcesContent":["import {clsx, type ClassValue} from \"clsx\";\nimport {twMerge} from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n\n/**\n * Returns \"#000000\" or \"#ffffff\" for maximum contrast against the given background color (hex or rgb).\n *\n * Based on WCAG relative luminance, which models human visual perception:\n *   L = 0.2126·R + 0.7152·G + 0.0722·B\n *\n * The weights reflect how sensitive our eyes are to each channel —\n * green contributes 71% of perceived brightness, red ~21%, blue only 7%.\n * This means a vivid red like #c0392b is perceptually *dim* (L≈0.11), so\n * white text (contrast 8.7:1) beats black text (2.4:1) against it.\n *\n * The threshold L > 0.179 is the luminance midpoint where both black and\n * white achieve ~4.5:1 contrast — the WCAG AA minimum.\n */\nexport function contrastColor(\n  bg: string,\n  threshold = 0.179,\n): \"#000000\" | \"#ffffff\" {\n  const m = bg.match(/\\w\\w/g) ?? bg.match(/\\d+/g);\n  const [r, g, b] = bg.startsWith(\"#\")\n    ? (bg.length === 4\n        ? [bg[1] + bg[1], bg[2] + bg[2], bg[3] + bg[3]]\n        : [bg.slice(1, 3), bg.slice(3, 5), bg.slice(5, 7)]\n      ).map((h) => parseInt(h, 16))\n    : (m ?? []).map(Number);\n  // WCAG relative luminance\n  const toLinear = (c: number) => {\n    const s = c / 255;\n    return s <= 0.04045 ? s / 12.92 : ((s + 0.055) / 1.055) ** 2.4;\n  };\n  const L = 0.2126 * toLinear(r) + 0.7152 * toLinear(g) + 0.0722 * toLinear(b);\n  return L > threshold ? \"#000000\" : \"#ffffff\";\n}\n"],"mappings":";;;AAGA,SAAgB,EAAG,GAAG,GAAsB;CAC1C,OAAO,EAAQ,EAAK,CAAM,CAAC;AAC7B"}

package/package.json

@@ -1,9 +1,13 @@
 {
   "name": "@pihanga2/shadcn",
-  "version": "0.2.4",
+  "version": "0.2.6",
   "description": "Pihanga core card components built on shadcn/ui and Radix UI — the npm distribution of pihanga-shadcn.",
   "type": "module",
   "exports": {
+    "./cards/avatar": {
+      "import": "./cards/avatar/index.js",
+      "types": "./cards/avatar/index.d.ts"
+    },
     "./cards/badge": {
       "import": "./cards/badge/index.js",
       "types": "./cards/badge/index.d.ts"
@@ -32,6 +36,10 @@
       "import": "./cards/dialog/index.js",
       "types": "./cards/dialog/index.d.ts"
     },
+    "./cards/drawer": {
+      "import": "./cards/drawer/index.js",
+      "types": "./cards/drawer/index.d.ts"
+    },
     "./cards/dropDownMenu": {
       "import": "./cards/dropDownMenu/index.js",
       "types": "./cards/dropDownMenu/index.d.ts"
@@ -92,6 +100,10 @@
       "import": "./cards/pageWithNavbar/index.js",
       "types": "./cards/pageWithNavbar/index.d.ts"
     },
+    "./cards/pageWithNavbarMeta": {
+      "import": "./cards/pageWithNavbarMeta/index.js",
+      "types": "./cards/pageWithNavbarMeta/index.d.ts"
+    },
     "./cards/pasteTarget": {
       "import": "./cards/pasteTarget/index.js",
       "types": "./cards/pasteTarget/index.d.ts"
@@ -100,6 +112,10 @@
       "import": "./cards/resizable/index.js",
       "types": "./cards/resizable/index.d.ts"
     },
+    "./cards/scrollbarWithAnnotations": {
+      "import": "./cards/scrollbarWithAnnotations/index.js",
+      "types": "./cards/scrollbarWithAnnotations/index.d.ts"
+    },
     "./cards/select": {
       "import": "./cards/select/index.js",
       "types": "./cards/select/index.d.ts"
@@ -151,9 +167,14 @@
     "./cards/icons": {
       "import": "./cards/icons.js",
       "types": "./cards/icons.d.ts"
+    },
+    "./lib/utils": {
+      "import": "./lib/utils.js",
+      "types": "./lib/utils.d.ts"
     }
   },
   "sideEffects": [
+    "./cards/avatar/index.js",
     "./cards/badge/index.js",
     "./cards/box/index.js",
     "./cards/button/index.js",
@@ -161,6 +182,7 @@
     "./cards/conditional/index.js",
     "./cards/dataTable/index.js",
     "./cards/dialog/index.js",
+    "./cards/drawer/index.js",
     "./cards/dropDownMenu/index.js",
     "./cards/field/index.js",
     "./cards/fileDrop/index.js",
@@ -176,8 +198,10 @@
     "./cards/modeToggle/index.js",
     "./cards/navbarSearch/index.js",
     "./cards/pageWithNavbar/index.js",
+    "./cards/pageWithNavbarMeta/index.js",
     "./cards/pasteTarget/index.js",
     "./cards/resizable/index.js",
+    "./cards/scrollbarWithAnnotations/index.js",
     "./cards/select/index.js",
     "./cards/slider/index.js",
     "./cards/sliderValue/index.js",
@@ -208,7 +232,7 @@
   "peerDependencies": {
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
-    "@pihanga2/core": "*",
+    "@pihanga2/core": "^0.3.21",
     "@pihanga2/cards": "*"
   },
   "dependencies": {
@@ -229,6 +253,7 @@
     "react-json-view-lite": "^2.5.0",
     "react-resizable-panels": "^2.0.0",
     "sonner": "^2.0.7",
-    "tailwind-merge": "^3.3.0"
+    "tailwind-merge": "^3.3.0",
+    "vaul": "^1.1.2"
   }
 }

package/pihanga-shadcn.css

@@ -1,2 +0,0 @@
-.pi-file-drop-root label{border:2px dashed #999;flex-grow:1;justify-content:space-between;max-width:100%;display:flex}.pi-file-drop-root .dropzone-msg{cursor:pointer;text-align:center;flex-grow:4;margin:3em 0}.pi-file-drop-root .pi-progress{max-width:100%;padding:1.25em}.pi-file-drop-root .pi-progress-label{font-size:1rem;font-weight:600;line-height:1.5rem}.pi-file-drop -root.pi-progress-container{background-color:#dadfe5;border-radius:4px;height:1rem;display:flex;position:relative;overflow:hidden}.pi-file-drop-root .pi-progress-bar{color:#fff;background-color:#0054a6;flex-direction:column;justify-content:center;display:flex;overflow:hidden}.pi-file-drop-root .pi-progress .label{font-size:1em;display:block}._GzYRV{white-space:pre-wrap;white-space:-moz-pre-wrap;white-space:-pre-wrap;white-space:-o-pre-wrap;word-wrap:break-word;line-height:1.2}._3eOF8{margin-right:5px;font-weight:700}._3eOF8+._3eOF8{margin-left:-5px}._1MFti{cursor:pointer}._f10Tu{-webkit-user-select:none;user-select:none;margin-right:5px;font-size:1.2em}._1UmXx:after{content:"▸"}._1LId0:after{content:"▾"}._1pNG9{margin-right:5px}._1pNG9:after{content:"...";font-size:.8em}._2IvMF{background:#eee}._2bkNM{margin:0;padding:0 10px}._1BXBN{margin:0;padding:0}._1MGIk{color:#000;margin-right:5px;font-weight:600}._3uHL6{color:#000}._2T6PJ,._1Gho6{color:#df113a}._vGjyY{color:#2a3f3c}._1bQdo{color:#0b75f5}._3zQKs{color:#469038}._1xvuR{color:#43413d}._oLqym,._2AXVT,._2KJWg{color:#000}._11RoI{background:#002b36}._17H2C,._3QHg2,._3fDAz{color:#fdf6e3}._2bSDX{color:#fdf6e3;margin-right:5px;font-weight:bolder}._gsbQL{color:#fdf6e3}._LaAZe,._GTKgm{color:#81b5ac}._Chy1W{color:#cb4b16}._2bveF{color:#d33682}._2vRm-{color:#ae81ff}._1prJR{color:#268bd2}.jv-wrapper{position:relative}.jv-copy-btn{z-index:10;width:22px;height:22px;color:hsl(var(--muted-foreground,0 0% 55%));cursor:pointer;opacity:.35;background:0 0;border:1px solid #0000;border-radius:4px;justify-content:center;align-items:center;padding:0;transition:opacity .15s,color .15s,background .15s,border-color .15s;display:inline-flex;position:absolute;top:4px;right:4px}.jv-wrapper:hover .jv-copy-btn,.jv-wrapper:focus-within .jv-copy-btn{opacity:1}.jv-copy-btn:hover{color:hsl(var(--foreground));background:hsl(var(--muted,0 0% 96%));border-color:hsl(var(--border,0 0% 88%))}.jv-copy-btn--done{opacity:1;color:#2e7d32}.dark .jv-copy-btn--done{color:#81c784}.jv-container{white-space:pre-wrap;word-wrap:break-word;color:var(--foreground);background:0 0;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,monospace;font-size:12.5px;font-weight:400;line-height:1.55}.jv-basic-child{margin:0;padding:0 0 0 1.1em;display:block;position:relative}.jv-label{color:var(--foreground);margin-right:0;font-weight:400}.jv-clickable-label{color:var(--foreground);cursor:pointer;margin-right:0;font-weight:400}.jv-clickable-label:hover{-webkit-text-decoration:underline dotted;text-decoration:underline dotted}.jv-punctuation{color:var(--foreground);font-weight:400}.jv-expand-icon,.jv-collapse-icon{width:1em;color:hsl(var(--muted-foreground,0 0% 55%));-webkit-user-select:none;user-select:none;cursor:pointer;justify-content:center;align-items:center;font-size:.65em;line-height:1;display:inline-flex;position:absolute;top:.775em;left:0;transform:translateY(-50%)}.jv-expand-icon:after{content:"▶"}.jv-collapse-icon:after{content:"▼"}.jv-collapsed-content{cursor:pointer;color:hsl(var(--muted-foreground,0 0% 55%))}.jv-collapsed-content:after{content:" …"}.jv-child-fields-container{border-left:1px solid hsl(var(--border,0 0% 88%));margin:0 0 0 .3em;padding:0 0 0 1.25em}.jv-null,.jv-undefined{color:#c0392b}.jv-string{color:#2e7d32}.jv-number{color:#1565c0}.jv-boolean{color:#00796b}.jv-other{color:var(--foreground)}.dark .jv-string{color:#81c784}.dark .jv-number{color:#64b5f6}.dark .jv-boolean{color:#4db6ac}.dark .jv-null,.dark .jv-undefined{color:#ef9a9a}.dark .jv-child-fields-container{border-left-color:hsl(var(--border,0 0% 25%))}.overlay-wrapper{flex-direction:column;width:100%;min-width:0;display:flex;position:relative}.overlay-wrapper.is-loading.fill-parent{min-height:12rem}.overlay-content{flex-direction:column;flex-grow:1;width:100%;min-width:0;display:flex;position:relative;overflow-y:hidden}.overlay-wrapper.fill-parent .overlay-content{min-height:inherit}.loading-overlay{opacity:0;pointer-events:none;z-index:2;background:oklch(100% 0 0/.7);justify-content:center;align-items:center;transition:opacity .15s;display:flex;position:absolute;inset:0}.overlay-wrapper.viewport-centered .loading-overlay{z-index:50;position:fixed;inset:0}.dark .loading-overlay{background:oklch(14.5% 0 0/.5)}.overlay-wrapper.is-loading .loading-overlay{opacity:1;pointer-events:auto}.loading-overlay__content{color:var(--muted-foreground);align-items:center;gap:.5rem;font-size:.875rem;display:flex}.window{justify-content:center;width:100%;height:100%;display:flex}.page{flex-direction:column;flex:1;width:100%;height:100%;display:flex}.header{border-bottom:1px solid var(--border);background-color:var(--background);flex-shrink:0;align-items:center;gap:1rem;padding-left:1rem;padding-right:1rem;display:flex}@media (width>=768px){.header{padding-left:1.5rem;padding-right:1.5rem}}.title-section{align-items:center;gap:.5rem;display:inline-flex}.title-section .title-icon{flex-shrink:0;width:1.5rem;height:1.5rem}.title-section .title-text{color:var(--foreground);font-size:1.125rem;font-weight:600;line-height:1.75rem}.nav-md{display:none}@media (width>=768px){.nav-md{flex-direction:row;align-items:center;gap:1.25rem;display:flex}}@media (width>=1024px){.nav-md{gap:1.5rem}}.nav-md .nav-link{color:var(--muted-foreground);padding-left:0;padding-right:0;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.nav-md .nav-link:hover{color:var(--foreground)}.nav-sm{gap:1.5rem;padding:1rem;font-size:1.125rem;font-weight:500;line-height:1.75rem;display:grid}.nav-sm .nav-link{color:var(--muted-foreground);justify-content:flex-start;padding-left:0;padding-right:0;font-size:1.125rem;line-height:1.75rem}.nav-sm .nav-link:hover{color:var(--foreground)}.header-actions{align-items:center;gap:.5rem;margin-left:auto;display:flex}@media (width>=1024px){.header-actions{gap:1rem}}.main{background-color:var(--background);flex:1;min-height:0;padding:.5rem 1rem;overflow-y:auto}@media (width>=768px){.main{padding:1rem 2rem}}.footer{background-color:var(--background);color:var(--muted-foreground);flex-shrink:0;padding:.5rem 1rem}@media (width>=768px){.footer{padding:1rem 2rem}}.pihanga-paste-target{border:2px dashed #999}.pihanga-paste-target .paste-target-msg-title{font-size:1.2em}.pihanga-paste-target textarea:focus{outline:none}.pihanga-paste-target-focused{border-width:3px;border-color:#007bff}.pihanga-paste-target-focused .paste-target-focus-reminder{display:none}.pi-stepper{--pi-stepper-indicator-size-sm:1.5rem;--pi-stepper-indicator-size-md:2rem;--pi-stepper-indicator-size-lg:2.5rem;--pi-stepper-indicator-size:var(--pi-stepper-indicator-size-md);--pi-stepper-connector-thickness:2px;--pi-stepper-connector-min-height:1.5rem;--pi-stepper-label-max-width:6rem}.pi-stepper--sm{--pi-stepper-indicator-size:var(--pi-stepper-indicator-size-sm)}.pi-stepper--md{--pi-stepper-indicator-size:var(--pi-stepper-indicator-size-md)}.pi-stepper--lg{--pi-stepper-indicator-size:var(--pi-stepper-indicator-size-lg)}.pi-stepper__indicator{transition:background-color .2s,border-color .2s,color .2s,outline-color .2s}.pi-stepper__indicator--clickable{cursor:pointer}.pi-stepper__indicator--clickable:hover{opacity:.8}.pi-stepper__indicator--static{cursor:default}.pi-stepper__connector{transition:background-color .3s}.pi-stepper__connector--vertical{min-height:var(--pi-stepper-connector-min-height)}.pi-stepper__label-title{transition:color .2s}
-/*$vite$:1*/