@gspa/ui 0.3.0 → 0.3.2

package/dist/Toast.css

@@ -1 +1 @@
-@keyframes toast-progress-8acde4d1{0%{transform:scaleX(1)}to{transform:scaleX(0)}}.animate-toast-progress[data-v-8acde4d1]{animation:toast-progress-8acde4d1 linear forwards}
+.kv-toast-region[data-v-dc27cb89]{position:fixed;z-index:10000;width:min(408px,100vw);max-height:100dvh;padding:16px;box-sizing:border-box;pointer-events:none}.kv-toast-region--top-left[data-v-dc27cb89]{top:0;left:0}.kv-toast-region--top-center[data-v-dc27cb89]{top:0;left:50%;transform:translate(-50%)}.kv-toast-region--top-right[data-v-dc27cb89]{top:0;right:0}.kv-toast-region--bottom-left[data-v-dc27cb89]{bottom:0;left:0}.kv-toast-region--bottom-center[data-v-dc27cb89]{bottom:0;left:50%;transform:translate(-50%)}.kv-toast-region--bottom-right[data-v-dc27cb89]{right:0;bottom:0}.kv-toast-stack[data-v-dc27cb89]{display:flex;width:100%;flex-direction:column;gap:10px}.kv-toast-stack--bottom[data-v-dc27cb89]{flex-direction:column-reverse}.kv-toast[data-v-dc27cb89]{--toast-accent: var(--ui-primary, #173866);--toast-soft: var(--ui-primary-soft, #e6edf7);position:relative;display:grid;grid-template-columns:34px minmax(0,1fr) 28px;align-items:start;gap:10px;width:100%;min-height:58px;padding:12px 10px 13px 12px;overflow:hidden;box-sizing:border-box;color:var(--ui-text, #172033);background:var(--ui-surface, #ffffff);border:1px solid var(--ui-border, #dce3ed);border-radius:14px;box-shadow:0 12px 30px #0f172a24,0 2px 8px #0f172a12;pointer-events:auto;transition:transform .18s ease,box-shadow .18s ease}.kv-toast[data-v-dc27cb89]:before{position:absolute;top:12px;bottom:12px;left:0;width:3px;background:var(--toast-accent);border-radius:0 3px 3px 0;content:""}.kv-toast[data-v-dc27cb89]:hover{transform:translateY(-1px);box-shadow:0 16px 38px #0f172a2b,0 3px 10px #0f172a14}.kv-toast--info[data-v-dc27cb89]{--toast-accent: var(--ui-cyber, #176b87);--toast-soft: var(--ui-cyber-soft, #e0f2f7)}.kv-toast--success[data-v-dc27cb89]{--toast-accent: var(--ui-success, #14745d);--toast-soft: var(--ui-success-soft, #def3eb)}.kv-toast--warning[data-v-dc27cb89]{--toast-accent: var(--ui-warning, #a96008);--toast-soft: var(--ui-warning-soft, #fff0d6)}.kv-toast--error[data-v-dc27cb89]{--toast-accent: var(--ui-danger, #b4233c);--toast-soft: var(--ui-danger-soft, #fde7eb)}.kv-toast--subtle[data-v-dc27cb89]:before{opacity:.65}.kv-toast__icon[data-v-dc27cb89]{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;color:var(--toast-accent);background:var(--toast-soft);border-radius:10px}.kv-toast__icon[data-v-dc27cb89] svg{display:block;width:19px;height:19px}.kv-toast--loading .kv-toast__icon[data-v-dc27cb89] svg{animation:kv-toast-spin-dc27cb89 .9s linear infinite}.kv-toast__content[data-v-dc27cb89]{min-width:0;padding:1px 0}.kv-toast__heading[data-v-dc27cb89]{display:flex;align-items:center;gap:7px;min-width:0}.kv-toast__title[data-v-dc27cb89],.kv-toast__message[data-v-dc27cb89]{padding:0;margin:0;font-family:inherit}.kv-toast__title[data-v-dc27cb89]{min-width:0;overflow-wrap:anywhere;color:var(--ui-text, #172033);font-size:.875rem;font-weight:650;line-height:1.35;letter-spacing:-.006em}.kv-toast__status[data-v-dc27cb89]{display:inline-flex;flex:none;align-items:center;min-height:18px;padding:1px 5px;color:var(--toast-accent);font-size:.625rem;font-weight:750;line-height:1;letter-spacing:.03em;background:var(--toast-soft);border-radius:5px}.kv-toast__message[data-v-dc27cb89]{margin-top:3px;overflow-wrap:anywhere;color:var(--ui-text-muted, #5b687a);font-size:.8125rem;font-weight:400;line-height:1.45}.kv-toast__custom-content[data-v-dc27cb89]{margin-top:9px}.kv-toast__action[data-v-dc27cb89]{display:inline-flex;align-items:center;gap:5px;min-height:26px;padding:3px 7px;margin:9px 0 0 -7px;color:var(--toast-accent);font:inherit;font-size:.775rem;font-weight:650;line-height:1;background:transparent;border:0;border-radius:7px;cursor:pointer}.kv-toast__action[data-v-dc27cb89]:hover{background:var(--toast-soft)}.kv-toast__action[data-v-dc27cb89] svg{width:13px;height:13px;transition:transform .15s ease}.kv-toast__action[data-v-dc27cb89]:hover svg{transform:translate(2px)}.kv-toast__close[data-v-dc27cb89]{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;color:var(--ui-text-soft, #78869a);background:transparent;border:0;border-radius:8px;cursor:pointer;transition:color .15s ease,background .15s ease}.kv-toast__close[data-v-dc27cb89]:hover{color:var(--ui-text, #172033);background:var(--ui-surface-muted, #f0f3f8)}.kv-toast__close[data-v-dc27cb89]:focus-visible,.kv-toast__action[data-v-dc27cb89]:focus-visible{outline:2px solid var(--ui-ring, var(--ui-primary, #173866));outline-offset:2px}.kv-toast__close[data-v-dc27cb89] svg{width:16px;height:16px}.kv-toast-enter-active[data-v-dc27cb89],.kv-toast-leave-active[data-v-dc27cb89],.kv-toast-move[data-v-dc27cb89]{transition:opacity .22s ease,transform .26s cubic-bezier(.16,1,.3,1)}.kv-toast-enter-from[data-v-dc27cb89],.kv-toast-leave-to[data-v-dc27cb89]{opacity:0;transform:translateY(-8px) scale(.98)}@keyframes kv-toast-spin-dc27cb89{to{transform:rotate(360deg)}}@media (max-width: 480px){.kv-toast-region[data-v-dc27cb89]{width:100vw;padding:10px}.kv-toast[data-v-dc27cb89]{border-radius:12px}}@media (prefers-reduced-motion: reduce){.kv-toast[data-v-dc27cb89],.kv-toast-enter-active[data-v-dc27cb89],.kv-toast-leave-active[data-v-dc27cb89],.kv-toast-move[data-v-dc27cb89],.kv-toast__action[data-v-dc27cb89] svg{transition-duration:.01ms}.kv-toast--loading .kv-toast__icon[data-v-dc27cb89] svg{animation-duration:1.8s}}

package/dist/components/Toast.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),S=require("class-variance-authority"),o=require("../utils/cn.cjs"),q=require("../lib/toast.cjs"),s=require("./Icon.cjs"),I=require("../_plugin-vue_export-helper-BHFhmbuH.cjs"),P=["aria-live"],j={class:"flex-1 min-w-0 pt-0.5"},A=["onClick"],$=["onClick"],K={key:2,class:"absolute bottom-0 left-0 right-0 h-0.5 overflow-hidden"},L={__name:"Toast",props:{position:{type:String,default:"top-right",validator:i=>["top-left","top-center","top-right","bottom-left","bottom-center","bottom-right"].includes(i)},hotkey:{type:Array,default:()=>["altKey","KeyT"]},richColors:{type:Boolean,default:!0},expand:{type:Boolean,default:!1},visibleToasts:{type:Number,default:3},closeButton:{type:Boolean,default:!0}},setup(i){const n=i,{toasts:p,dismiss:v}=q.useToaster(),x=e.computed(()=>p.value.slice(0,n.visibleToasts)),w={"top-left":"top-0 left-0 flex-col items-start","top-center":"top-0 left-1/2 -translate-x-1/2 flex-col items-center","top-right":"top-0 right-0 flex-col items-end","bottom-left":"bottom-0 left-0 flex-col-reverse items-start","bottom-center":"bottom-0 left-1/2 -translate-x-1/2 flex-col-reverse items-center","bottom-right":"bottom-0 right-0 flex-col-reverse items-end"},b=e.computed(()=>o.cn(w[n.position])),k=S.cva("group pointer-events-auto relative flex w-full items-start gap-3 overflow-hidden rounded-xl border p-4 transition-all duration-200 hover:-translate-y-0.5",{variants:{variant:{default:"ui-surface ui-border-strong ui-text shadow-lg shadow-black/5 dark:shadow-black/30",info:"border-blue-700 bg-blue-700 ui-text-inverse shadow-lg shadow-blue-900/25",success:"border-green-700 bg-green-700 ui-text-inverse shadow-lg shadow-green-900/25",warning:"border-amber-600 bg-amber-600 ui-text-inverse shadow-lg shadow-amber-900/25",error:"border-red-700 bg-red-700 ui-text-inverse shadow-lg shadow-red-900/25",loading:"ui-surface ui-border-strong ui-text shadow-lg shadow-black/5 dark:shadow-black/30"}},defaultVariants:{variant:"default"}}),y=r=>o.cn(k({variant:r.variant})),l={default:"bell",info:"info",success:"check-circle",warning:"triangle-exclamation",error:"circle-xmark",loading:"loader-circle"},c={default:"ui-primary",info:"text-white",success:"text-white",warning:"text-white",error:"text-white",loading:"ui-primary"},u={default:"ui-surface-muted border ui-border",info:"bg-white/15 ring-1 ring-white/25",success:"bg-white/15 ring-1 ring-white/25",warning:"bg-white/15 ring-1 ring-white/25",error:"bg-white/15 ring-1 ring-white/25",loading:"ui-surface-muted border ui-border"},d={default:"bg-(--ui-primary)",info:"bg-white/70",success:"bg-white/70",warning:"bg-white/70",error:"bg-white/70",loading:"bg-(--ui-primary)"},h={default:"ui-primary hover:text-(--ui-primary-strong) underline-offset-4 hover:underline",info:"text-white/90 hover:text-white underline-offset-4 hover:underline",success:"text-white/90 hover:text-white underline-offset-4 hover:underline",warning:"text-white/90 hover:text-white underline-offset-4 hover:underline",error:"text-white/90 hover:text-white underline-offset-4 hover:underline",loading:"ui-primary hover:text-(--ui-primary-strong) underline-offset-4 hover:underline"},m={default:"ui-text",info:"text-white",success:"text-white",warning:"text-white",error:"text-white",loading:"ui-text"},f={default:"ui-text-muted",info:"text-white/90",success:"text-white/90",warning:"text-white/90",error:"text-white/90",loading:"ui-text-muted"},g={default:"ui-text-soft hover:bg-black/5 dark:hover:bg-white/10 hover:text-(--ui-text)",info:"text-white/80 hover:text-white hover:bg-white/15",success:"text-white/80 hover:text-white hover:bg-white/15",warning:"text-white/80 hover:text-white hover:bg-white/15",error:"text-white/80 hover:text-white hover:bg-white/15",loading:"ui-text hover:bg-black/5 dark:hover:bg-white/5 hover:text-(--ui-text)"},C=r=>r.icon||l[r.variant]||l.default,B=r=>{const a=c[r.variant]||c.default;return r.variant==="loading"?`${a} animate-spin`:a},_=r=>u[r.variant]||u.default,V=r=>d[r.variant]||d.default,N=r=>h[r.variant]||h.default,T=r=>m[r.variant]||m.default,z=r=>f[r.variant]||f.default,E=r=>g[r.variant]||g.default,M=r=>r.icon!==!1,D=r=>r.dismissible!==!1&&(r.closeButton||n.closeButton||r.dismissible);return(r,a)=>(e.openBlock(),e.createBlock(e.Teleport,{to:"body"},[e.createElementVNode("div",{class:e.normalizeClass(e.unref(o.cn)(b.value,"fixed z-[10000] flex max-h-screen w-full p-4 md:max-w-[420px] pointer-events-none"))},[e.createVNode(e.TransitionGroup,{"enter-active-class":"transition-all duration-400 ease-[cubic-bezier(0.16,1,0.3,1)]","enter-from-class":"transform translate-x-full opacity-0 scale-90","enter-to-class":"transform translate-x-0 opacity-100 scale-100","leave-active-class":"transition-all duration-300 ease-[cubic-bezier(0.4,0,1,1)]","leave-from-class":"transform translate-x-0 opacity-100 scale-100","leave-to-class":"transform translate-x-full opacity-0 scale-90","move-class":"transition-all duration-300 ease-out",tag:"div",class:"w-full space-y-3"},{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(x.value,t=>(e.openBlock(),e.createElementBlock("div",{key:t.id,class:e.normalizeClass(y(t)),role:"alert","aria-live":t.variant==="error"?"assertive":"polite"},[M(t)?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(e.unref(o.cn)("relative flex h-10 w-10 shrink-0 items-center justify-center rounded-lg transition-all duration-300",_(t)))},[e.createVNode(s.default,{icon:C(t),class:e.normalizeClass(e.unref(o.cn)("h-5 w-5 transition-transform duration-300 group-hover:scale-110",B(t)))},null,8,["icon","class"])],2)):e.createCommentVNode("",!0),e.createElementVNode("div",j,[t.title?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(e.unref(o.cn)("text-md font-semibold leading-tight mb-1",T(t)))},e.toDisplayString(t.title),3)):e.createCommentVNode("",!0),t.message||t.description?(e.openBlock(),e.createElementBlock("div",{key:1,class:e.normalizeClass(e.unref(o.cn)("text-md leading-relaxed",z(t)))},e.toDisplayString(t.message||t.description),3)):e.createCommentVNode("",!0),t.component?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(t.component),e.mergeProps({key:2,ref_for:!0},t.componentProps,{class:"mt-3"}),null,16)):e.createCommentVNode("",!0),t.action?(e.openBlock(),e.createElementBlock("button",{key:3,class:e.normalizeClass(["mt-3 inline-flex items-center gap-1.5 text-sm font-medium transition-colors",N(t)]),onClick:t.action.onClick},[e.createTextVNode(e.toDisplayString(t.action.label)+" ",1),e.createVNode(s.default,{icon:"arrow-right",class:"h-3 w-3 transition-transform duration-200 group-hover:translate-x-0.5"})],10,A)):e.createCommentVNode("",!0)]),D(t)?(e.openBlock(),e.createElementBlock("button",{key:1,class:e.normalizeClass(e.unref(o.cn)("absolute right-2 top-2 flex h-7 w-7 shrink-0 items-center justify-center rounded-md opacity-70 transition-all hover:opacity-100 focus:opacity-100 focus:outline-none focus:ring-2 focus:ring-(--ui-ring)",E(t))),"aria-label":"Dismiss",onClick:G=>e.unref(v)(t.id)},[e.createVNode(s.default,{icon:"x",class:"h-4 w-4"})],10,$)):e.createCommentVNode("",!0),t.duration&&t.duration>0?(e.openBlock(),e.createElementBlock("div",K,[e.createElementVNode("div",{class:e.normalizeClass(e.unref(o.cn)("h-full origin-left animate-toast-progress",V(t))),style:e.normalizeStyle({animationDuration:`${t.duration}ms`})},null,6)])):e.createCommentVNode("",!0)],10,P))),128))]),_:1})],2)]))}},F=I._export_sfc(L,[["__scopeId","data-v-8acde4d1"]]);exports.default=F;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),E=require("../lib/toast.cjs"),M=require("./Icon.cjs"),w=require("../_plugin-vue_export-helper-BHFhmbuH.cjs"),D=["data-expanded","data-hotkey"],S=["aria-live"],L={key:0,class:"kv-toast__icon"},$={class:"kv-toast__content"},q={key:0,class:"kv-toast__heading"},P={key:0,class:"kv-toast__title"},j=["aria-label"],z={key:1,class:"kv-toast__message"},A=["onClick"],H=["onClick"],K={__name:"Toast",props:{position:{type:String,default:"top-right",validator:s=>["top-left","top-center","top-right","bottom-left","bottom-center","bottom-right"].includes(s)},hotkey:{type:Array,default:()=>["altKey","KeyT"]},richColors:{type:Boolean,default:!0},expand:{type:Boolean,default:!1},visibleToasts:{type:Number,default:3},closeButton:{type:Boolean,default:!0}},setup(s){const c=s,{toasts:d,dismiss:u}=E.useToaster(),p=e.computed(()=>d.value.slice(0,c.visibleToasts)),n=(t,i)=>({name:`Toast${t}Icon`,render(){return e.h("svg",{"data-toast-icon":t.toLowerCase(),viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":1.9,"stroke-linecap":"round","stroke-linejoin":"round","aria-hidden":"true"},i.map(([o,l])=>e.h(o,l)))}}),k=n("default",[["path",{d:"M18 8a6 6 0 0 0-12 0c0 7-3 7-3 9h18c0-2-3-2-3-9"}],["path",{d:"M10 21h4"}]]),_=n("info",[["circle",{cx:"12",cy:"12",r:"9"}],["path",{d:"M12 11v5"}],["path",{d:"M12 8h.01"}]]),h=n("success",[["circle",{cx:"12",cy:"12",r:"9"}],["path",{d:"m8.5 12 2.3 2.3 4.9-5"}]]),v=n("warning",[["path",{d:"M10.3 4.1 2.7 17.2A1.8 1.8 0 0 0 4.3 20h15.4a1.8 1.8 0 0 0 1.6-2.8L13.7 4.1a2 2 0 0 0-3.4 0Z"}],["path",{d:"M12 9v4"}],["path",{d:"M12 16.5h.01"}]]),m=n("error",[["circle",{cx:"12",cy:"12",r:"9"}],["path",{d:"m9 9 6 6"}],["path",{d:"m15 9-6 6"}]]),y=n("loading",[["path",{d:"M21 12a9 9 0 1 1-2.64-6.36"}]]),f=n("close",[["path",{d:"m7.5 7.5 9 9"}],["path",{d:"m16.5 7.5-9 9"}]]),B=n("arrow",[["path",{d:"M5 12h14"}],["path",{d:"m14 7 5 5-5 5"}]]),a={default:k,info:_,success:h,warning:v,error:m,loading:y},r=t=>a[t.variant]?t.variant:"default",g=t=>a[r(t)],C=t=>typeof t.icon=="string",b=t=>t.icon&&typeof t.icon!="string"&&t.icon!==!0?t.icon:g(t),N=t=>t.icon!==!1,V=t=>t.dismissible!==!1&&(t.closeButton||c.closeButton||t.dismissible),T=e.computed(()=>`kv-toast-region--${c.position}`),x=e.computed(()=>c.position.startsWith("bottom-")?"kv-toast-stack--bottom":"");return(t,i)=>(e.openBlock(),e.createBlock(e.Teleport,{to:"body"},[e.createElementVNode("section",{class:e.normalizeClass(["kv-toast-region",T.value]),"aria-label":"Notifications","data-expanded":c.expand,"data-hotkey":c.hotkey.join("+")},[e.createVNode(e.TransitionGroup,{name:"kv-toast",tag:"div",class:e.normalizeClass(["kv-toast-stack",x.value])},{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(p.value,o=>(e.openBlock(),e.createElementBlock("article",{key:o.id,class:e.normalizeClass(["kv-toast",[`kv-toast--${r(o)}`,{"kv-toast--subtle":!c.richColors}]]),role:"alert","aria-live":o.variant==="error"?"assertive":"polite","aria-atomic":"true"},[N(o)?(e.openBlock(),e.createElementBlock("span",L,[C(o)?(e.openBlock(),e.createBlock(M.default,{key:0,icon:o.icon,"aria-hidden":"true"},null,8,["icon"])):(e.openBlock(),e.createBlock(e.resolveDynamicComponent(b(o)),{key:1}))])):e.createCommentVNode("",!0),e.createElementVNode("div",$,[o.title||o.statusCode?(e.openBlock(),e.createElementBlock("div",q,[o.title?(e.openBlock(),e.createElementBlock("p",P,e.toDisplayString(o.title),1)):e.createCommentVNode("",!0),o.statusCode?(e.openBlock(),e.createElementBlock("span",{key:1,class:"kv-toast__status","aria-label":`HTTP status ${o.statusCode}`},e.toDisplayString(o.statusCode),9,j)):e.createCommentVNode("",!0)])):e.createCommentVNode("",!0),o.message||o.description?(e.openBlock(),e.createElementBlock("p",z,e.toDisplayString(o.message||o.description),1)):e.createCommentVNode("",!0),o.component?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(o.component),e.mergeProps({key:2,ref_for:!0},o.componentProps,{class:"kv-toast__custom-content"}),null,16)):e.createCommentVNode("",!0),o.action?(e.openBlock(),e.createElementBlock("button",{key:3,type:"button",class:"kv-toast__action",onClick:o.action.onClick},[e.createTextVNode(e.toDisplayString(o.action.label)+" ",1),e.createVNode(e.unref(B))],8,A)):e.createCommentVNode("",!0)]),V(o)?(e.openBlock(),e.createElementBlock("button",{key:1,type:"button",class:"kv-toast__close","aria-label":"Dismiss notification",onClick:l=>e.unref(u)(o.id)},[e.createVNode(e.unref(f))],8,H)):e.createCommentVNode("",!0)],10,S))),128))]),_:1},8,["class"])],10,D)]))}},W=w._export_sfc(K,[["__scopeId","data-v-dc27cb89"]]);exports.default=W;

package/dist/components/Toast.js

@@ -1,26 +1,33 @@
-import { computed as _, createBlock as C, openBlock as r, Teleport as G, createElementVNode as h, normalizeClass as i, unref as n, createVNode as l, TransitionGroup as q, withCtx as H, createElementBlock as s, Fragment as J, renderList as O, createCommentVNode as a, toDisplayString as f, resolveDynamicComponent as Q, mergeProps as R, createTextVNode as U, normalizeStyle as W } from "vue";
-import { cva as X } from "class-variance-authority";
-import { cn as o } from "../utils/cn.js";
-import { useToaster as Y } from "../lib/toast.js";
-import g from "./Icon.js";
-import { _ as Z } from "../_plugin-vue_export-helper-CHgC5LLL.js";
-const ee = ["aria-live"], te = { class: "flex-1 min-w-0 pt-0.5" }, re = ["onClick"], ie = ["onClick"], oe = {
-  key: 2,
-  class: "absolute bottom-0 left-0 right-0 h-0.5 overflow-hidden"
-}, ne = {
+import { computed as d, createBlock as i, openBlock as e, Teleport as W, createElementVNode as y, normalizeClass as u, createVNode as p, TransitionGroup as z, withCtx as F, createElementBlock as s, Fragment as G, renderList as H, createCommentVNode as a, resolveDynamicComponent as b, toDisplayString as r, mergeProps as Z, createTextVNode as q, unref as _, h as g } from "vue";
+import { useToaster as J } from "../lib/toast.js";
+import O from "./Icon.js";
+import { _ as Q } from "../_plugin-vue_export-helper-CHgC5LLL.js";
+const R = ["data-expanded", "data-hotkey"], U = ["aria-live"], X = {
+  key: 0,
+  class: "kv-toast__icon"
+}, Y = { class: "kv-toast__content" }, I = {
+  key: 0,
+  class: "kv-toast__heading"
+}, oo = {
+  key: 0,
+  class: "kv-toast__title"
+}, to = ["aria-label"], eo = {
+  key: 1,
+  class: "kv-toast__message"
+}, so = ["onClick"], no = ["onClick"], ao = {
   __name: "Toast",
   props: {
     position: {
       type: String,
       default: "top-right",
-      validator: (c) => [
+      validator: (l) => [
         "top-left",
         "top-center",
         "top-right",
         "bottom-left",
         "bottom-center",
         "bottom-right"
-      ].includes(c)
+      ].includes(l)
     },
     hotkey: {
       type: Array,
@@ -43,189 +50,126 @@ const ee = ["aria-live"], te = { class: "flex-1 min-w-0 pt-0.5" }, re = ["onClic
       default: !0
     }
   },
-  setup(c) {
-    const u = c, { toasts: B, dismiss: T } = Y(), M = _(
-      () => B.value.slice(0, u.visibleToasts)
-    ), N = {
-      "top-left": "top-0 left-0 flex-col items-start",
-      "top-center": "top-0 left-1/2 -translate-x-1/2 flex-col items-center",
-      "top-right": "top-0 right-0 flex-col items-end",
-      "bottom-left": "bottom-0 left-0 flex-col-reverse items-start",
-      "bottom-center": "bottom-0 left-1/2 -translate-x-1/2 flex-col-reverse items-center",
-      "bottom-right": "bottom-0 right-0 flex-col-reverse items-end"
-    }, V = _(
-      () => o(N[u.position])
-    ), z = X(
-      "group pointer-events-auto relative flex w-full items-start gap-3 overflow-hidden rounded-xl border p-4 transition-all duration-200 hover:-translate-y-0.5",
-      {
-        variants: {
-          variant: {
-            default: "ui-surface ui-border-strong ui-text shadow-lg shadow-black/5 dark:shadow-black/30",
-            info: "border-blue-700 bg-blue-700 ui-text-inverse shadow-lg shadow-blue-900/25",
-            success: "border-green-700 bg-green-700 ui-text-inverse shadow-lg shadow-green-900/25",
-            warning: "border-amber-600 bg-amber-600 ui-text-inverse shadow-lg shadow-amber-900/25",
-            error: "border-red-700 bg-red-700 ui-text-inverse shadow-lg shadow-red-900/25",
-            loading: "ui-surface ui-border-strong ui-text shadow-lg shadow-black/5 dark:shadow-black/30"
-          }
-        },
-        defaultVariants: { variant: "default" }
+  setup(l) {
+    const c = l, { toasts: C, dismiss: m } = J(), x = d(() => C.value.slice(0, c.visibleToasts)), n = (t, v) => ({
+      name: `Toast${t}Icon`,
+      render() {
+        return g("svg", {
+          "data-toast-icon": t.toLowerCase(),
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          "stroke-width": 1.9,
+          "stroke-linecap": "round",
+          "stroke-linejoin": "round",
+          "aria-hidden": "true"
+        }, v.map(([o, f]) => g(o, f)));
       }
-    ), D = (t) => o(z({ variant: t.variant })), m = {
-      default: "bell",
-      info: "info",
-      success: "check-circle",
-      warning: "triangle-exclamation",
-      error: "circle-xmark",
-      loading: "loader-circle"
-    }, p = {
-      default: "ui-primary",
-      info: "text-white",
-      success: "text-white",
-      warning: "text-white",
-      error: "text-white",
-      loading: "ui-primary"
-    }, v = {
-      default: "ui-surface-muted border ui-border",
-      info: "bg-white/15 ring-1 ring-white/25",
-      success: "bg-white/15 ring-1 ring-white/25",
-      warning: "bg-white/15 ring-1 ring-white/25",
-      error: "bg-white/15 ring-1 ring-white/25",
-      loading: "ui-surface-muted border ui-border"
-    }, x = {
-      default: "bg-(--ui-primary)",
-      info: "bg-white/70",
-      success: "bg-white/70",
-      warning: "bg-white/70",
-      error: "bg-white/70",
-      loading: "bg-(--ui-primary)"
-    }, w = {
-      default: "ui-primary hover:text-(--ui-primary-strong) underline-offset-4 hover:underline",
-      info: "text-white/90 hover:text-white underline-offset-4 hover:underline",
-      success: "text-white/90 hover:text-white underline-offset-4 hover:underline",
-      warning: "text-white/90 hover:text-white underline-offset-4 hover:underline",
-      error: "text-white/90 hover:text-white underline-offset-4 hover:underline",
-      loading: "ui-primary hover:text-(--ui-primary-strong) underline-offset-4 hover:underline"
-    }, b = {
-      default: "ui-text",
-      info: "text-white",
-      success: "text-white",
-      warning: "text-white",
-      error: "text-white",
-      loading: "ui-text"
-    }, y = {
-      default: "ui-text-muted",
-      info: "text-white/90",
-      success: "text-white/90",
-      warning: "text-white/90",
-      error: "text-white/90",
-      loading: "ui-text-muted"
-    }, k = {
-      default: "ui-text-soft hover:bg-black/5 dark:hover:bg-white/10 hover:text-(--ui-text)",
-      info: "text-white/80 hover:text-white hover:bg-white/15",
-      success: "text-white/80 hover:text-white hover:bg-white/15",
-      warning: "text-white/80 hover:text-white hover:bg-white/15",
-      error: "text-white/80 hover:text-white hover:bg-white/15",
-      loading: "ui-text hover:bg-black/5 dark:hover:bg-white/5 hover:text-(--ui-text)"
-    }, I = (t) => t.icon || m[t.variant] || m.default, $ = (t) => {
-      const d = p[t.variant] || p.default;
-      return t.variant === "loading" ? `${d} animate-spin` : d;
-    }, P = (t) => v[t.variant] || v.default, S = (t) => x[t.variant] || x.default, j = (t) => w[t.variant] || w.default, A = (t) => b[t.variant] || b.default, E = (t) => y[t.variant] || y.default, K = (t) => k[t.variant] || k.default, L = (t) => t.icon !== !1, F = (t) => t.dismissible !== !1 && (t.closeButton || u.closeButton || t.dismissible);
-    return (t, d) => (r(), C(G, { to: "body" }, [
-      h("div", {
-        class: i(n(o)(
-          V.value,
-          "fixed z-[10000] flex max-h-screen w-full p-4 md:max-w-[420px] pointer-events-none"
-        ))
+    }), T = n("default", [
+      ["path", { d: "M18 8a6 6 0 0 0-12 0c0 7-3 7-3 9h18c0-2-3-2-3-9" }],
+      ["path", { d: "M10 21h4" }]
+    ]), B = n("info", [
+      ["circle", { cx: "12", cy: "12", r: "9" }],
+      ["path", { d: "M12 11v5" }],
+      ["path", { d: "M12 8h.01" }]
+    ]), w = n("success", [
+      ["circle", { cx: "12", cy: "12", r: "9" }],
+      ["path", { d: "m8.5 12 2.3 2.3 4.9-5" }]
+    ]), M = n("warning", [
+      ["path", { d: "M10.3 4.1 2.7 17.2A1.8 1.8 0 0 0 4.3 20h15.4a1.8 1.8 0 0 0 1.6-2.8L13.7 4.1a2 2 0 0 0-3.4 0Z" }],
+      ["path", { d: "M12 9v4" }],
+      ["path", { d: "M12 16.5h.01" }]
+    ]), N = n("error", [
+      ["circle", { cx: "12", cy: "12", r: "9" }],
+      ["path", { d: "m9 9 6 6" }],
+      ["path", { d: "m15 9-6 6" }]
+    ]), $ = n("loading", [
+      ["path", { d: "M21 12a9 9 0 1 1-2.64-6.36" }]
+    ]), D = n("close", [
+      ["path", { d: "m7.5 7.5 9 9" }],
+      ["path", { d: "m16.5 7.5-9 9" }]
+    ]), L = n("arrow", [
+      ["path", { d: "M5 12h14" }],
+      ["path", { d: "m14 7 5 5-5 5" }]
+    ]), h = {
+      default: T,
+      info: B,
+      success: w,
+      warning: M,
+      error: N,
+      loading: $
+    }, k = (t) => h[t.variant] ? t.variant : "default", S = (t) => h[k(t)], V = (t) => typeof t.icon == "string", A = (t) => t.icon && typeof t.icon != "string" && t.icon !== !0 ? t.icon : S(t), E = (t) => t.icon !== !1, P = (t) => t.dismissible !== !1 && (t.closeButton || c.closeButton || t.dismissible), j = d(() => `kv-toast-region--${c.position}`), K = d(() => c.position.startsWith("bottom-") ? "kv-toast-stack--bottom" : "");
+    return (t, v) => (e(), i(W, { to: "body" }, [
+      y("section", {
+        class: u(["kv-toast-region", j.value]),
+        "aria-label": "Notifications",
+        "data-expanded": c.expand,
+        "data-hotkey": c.hotkey.join("+")
       }, [
-        l(q, {
-          "enter-active-class": "transition-all duration-400 ease-[cubic-bezier(0.16,1,0.3,1)]",
-          "enter-from-class": "transform translate-x-full opacity-0 scale-90",
-          "enter-to-class": "transform translate-x-0 opacity-100 scale-100",
-          "leave-active-class": "transition-all duration-300 ease-[cubic-bezier(0.4,0,1,1)]",
-          "leave-from-class": "transform translate-x-0 opacity-100 scale-100",
-          "leave-to-class": "transform translate-x-full opacity-0 scale-90",
-          "move-class": "transition-all duration-300 ease-out",
+        p(z, {
+          name: "kv-toast",
           tag: "div",
-          class: "w-full space-y-3"
+          class: u(["kv-toast-stack", K.value])
         }, {
-          default: H(() => [
-            (r(!0), s(J, null, O(M.value, (e) => (r(), s("div", {
-              key: e.id,
-              class: i(D(e)),
+          default: F(() => [
+            (e(!0), s(G, null, H(x.value, (o) => (e(), s("article", {
+              key: o.id,
+              class: u(["kv-toast", [
+                `kv-toast--${k(o)}`,
+                { "kv-toast--subtle": !c.richColors }
+              ]]),
               role: "alert",
-              "aria-live": e.variant === "error" ? "assertive" : "polite"
+              "aria-live": o.variant === "error" ? "assertive" : "polite",
+              "aria-atomic": "true"
             }, [
-              L(e) ? (r(), s("div", {
-                key: 0,
-                class: i(n(o)(
-                  "relative flex h-10 w-10 shrink-0 items-center justify-center rounded-lg transition-all duration-300",
-                  P(e)
-                ))
-              }, [
-                l(g, {
-                  icon: I(e),
-                  class: i(n(o)(
-                    "h-5 w-5 transition-transform duration-300 group-hover:scale-110",
-                    $(e)
-                  ))
-                }, null, 8, ["icon", "class"])
-              ], 2)) : a("", !0),
-              h("div", te, [
-                e.title ? (r(), s("div", {
+              E(o) ? (e(), s("span", X, [
+                V(o) ? (e(), i(O, {
                   key: 0,
-                  class: i(n(o)("text-md font-semibold leading-tight mb-1", A(e)))
-                }, f(e.title), 3)) : a("", !0),
-                e.message || e.description ? (r(), s("div", {
-                  key: 1,
-                  class: i(n(o)("text-md leading-relaxed", E(e)))
-                }, f(e.message || e.description), 3)) : a("", !0),
-                e.component ? (r(), C(Q(e.component), R({
+                  icon: o.icon,
+                  "aria-hidden": "true"
+                }, null, 8, ["icon"])) : (e(), i(b(A(o)), { key: 1 }))
+              ])) : a("", !0),
+              y("div", Y, [
+                o.title || o.statusCode ? (e(), s("div", I, [
+                  o.title ? (e(), s("p", oo, r(o.title), 1)) : a("", !0),
+                  o.statusCode ? (e(), s("span", {
+                    key: 1,
+                    class: "kv-toast__status",
+                    "aria-label": `HTTP status ${o.statusCode}`
+                  }, r(o.statusCode), 9, to)) : a("", !0)
+                ])) : a("", !0),
+                o.message || o.description ? (e(), s("p", eo, r(o.message || o.description), 1)) : a("", !0),
+                o.component ? (e(), i(b(o.component), Z({
                   key: 2,
                   ref_for: !0
-                }, e.componentProps, { class: "mt-3" }), null, 16)) : a("", !0),
-                e.action ? (r(), s("button", {
+                }, o.componentProps, { class: "kv-toast__custom-content" }), null, 16)) : a("", !0),
+                o.action ? (e(), s("button", {
                   key: 3,
-                  class: i(["mt-3 inline-flex items-center gap-1.5 text-sm font-medium transition-colors", j(e)]),
-                  onClick: e.action.onClick
+                  type: "button",
+                  class: "kv-toast__action",
+                  onClick: o.action.onClick
                 }, [
-                  U(f(e.action.label) + " ", 1),
-                  l(g, {
-                    icon: "arrow-right",
-                    class: "h-3 w-3 transition-transform duration-200 group-hover:translate-x-0.5"
-                  })
-                ], 10, re)) : a("", !0)
+                  q(r(o.action.label) + " ", 1),
+                  p(_(L))
+                ], 8, so)) : a("", !0)
               ]),
-              F(e) ? (r(), s("button", {
+              P(o) ? (e(), s("button", {
                 key: 1,
-                class: i(n(o)(
-                  "absolute right-2 top-2 flex h-7 w-7 shrink-0 items-center justify-center rounded-md opacity-70 transition-all hover:opacity-100 focus:opacity-100 focus:outline-none focus:ring-2 focus:ring-(--ui-ring)",
-                  K(e)
-                )),
-                "aria-label": "Dismiss",
-                onClick: (se) => n(T)(e.id)
+                type: "button",
+                class: "kv-toast__close",
+                "aria-label": "Dismiss notification",
+                onClick: (f) => _(m)(o.id)
               }, [
-                l(g, {
-                  icon: "x",
-                  class: "h-4 w-4"
-                })
-              ], 10, ie)) : a("", !0),
-              e.duration && e.duration > 0 ? (r(), s("div", oe, [
-                h("div", {
-                  class: i(n(o)(
-                    "h-full origin-left animate-toast-progress",
-                    S(e)
-                  )),
-                  style: W({ animationDuration: `${e.duration}ms` })
-                }, null, 6)
-              ])) : a("", !0)
-            ], 10, ee))), 128))
+                p(_(D))
+              ], 8, no)) : a("", !0)
+            ], 10, U))), 128))
           ]),
           _: 1
-        })
-      ], 2)
+        }, 8, ["class"])
+      ], 10, R)
     ]));
   }
-}, fe = /* @__PURE__ */ Z(ne, [["__scopeId", "data-v-8acde4d1"]]);
+}, uo = /* @__PURE__ */ Q(ao, [["__scopeId", "data-v-dc27cb89"]]);
 export {
-  fe as default
+  uo as default
 };