@dennykuo/glass-toast 0.1.0 → 0.1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (17) hide show
  1. package/CHANGELOG.md +44 -0
  2. package/README.md +142 -76
  3. package/README.zh-TW.md +229 -0
  4. package/dist/auto.d.cts +1 -0
  5. package/dist/auto.js +2 -3
  6. package/dist/glass-toast.css +1 -1
  7. package/dist/glass-toast.css.d.ts +1 -0
  8. package/dist/glass-toast.js +1 -2
  9. package/dist/glass-toast.umd.cjs +2 -1
  10. package/dist/glass-toast.umd.js +2 -0
  11. package/dist/icons.d.cts +7 -0
  12. package/dist/index.d.cts +1 -0
  13. package/dist/toast-GM0D-R2d.js +312 -0
  14. package/dist/toast.d.cts +97 -0
  15. package/dist/toast.d.ts +11 -4
  16. package/package.json +38 -18
  17. package/dist/toast-Bh3vjjkJ.js +0 -237
package/dist/glass-toast.umd.cjs CHANGED
@@ -1 +1,2 @@
1
- (function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports):typeof define==`function`&&define.amd?define([`exports`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.GlassToast={}))})(this,function(e){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});var t={success:`<svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd"/></svg>`,error:`<svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z" clip-rule="evenodd"/></svg>`,warning:`<svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.168 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495zM10 6a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 0110 6zm0 9a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"/></svg>`,info:`<svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a.75.75 0 000 1.5h.253a.25.25 0 01.244.304l-.459 2.066A1.75 1.75 0 0010.747 15H11a.75.75 0 000-1.5h-.253a.25.25 0 01-.244-.304l.459-2.066A1.75 1.75 0 009.253 9H9z" clip-rule="evenodd"/></svg>`,close:`<svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z"/></svg>`},n=`.glass-toast-container,.glass-toast,.glass-toast *{box-sizing:border-box}.glass-toast-container{z-index:2147483647;pointer-events:none;flex-direction:column;gap:.75rem;display:flex;position:fixed}.glass-toast-container--top-right{align-items:flex-end;top:1rem;right:1rem}.glass-toast-container--bottom-right{align-items:flex-end;bottom:1rem;right:1rem}.glass-toast-container--bottom-center{align-items:center;bottom:1rem;left:50%;transform:translate(-50%)}.glass-toast{--gt-bg:#fffc;--gt-bg-opaque:#fffffff5;--gt-border:#e5e7eb66;--gt-text:#4a5565;--gt-blur:24px;--gt-radius:1rem;--gt-shadow:0 4px 24px -4px #00000014, 0 1px 2px #0000000a;--gt-close-bg:#f9fafb;--gt-close-border:#e5e7eb;--gt-close-text:#99a1af;--gt-close-bg-hover:#f3f4f6;--gt-close-border-hover:#d1d5dc;--gt-close-text-hover:#4a5565;--gt-focus-ring:#2563eb;pointer-events:auto;background-color:var(--gt-bg);width:24rem;max-width:calc(100vw - 2rem);-webkit-backdrop-filter:blur(var(--gt-blur));backdrop-filter:blur(var(--gt-blur));border:1px solid var(--gt-border);border-radius:var(--gt-radius);box-shadow:var(--gt-shadow);align-items:center;gap:.75rem;padding:.875rem 1rem;display:flex;position:relative;overflow:hidden}@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){.glass-toast{background-color:var(--gt-bg-opaque)}}.glass-toast--success{--gt-pill-bg:#d0fae5;--gt-icon:#047857;--gt-bar:#00bb7f;--gt-ring:16, 185, 129}.glass-toast--error{--gt-pill-bg:#ffe2e2;--gt-icon:#dc2626;--gt-bar:#ff6568;--gt-ring:239, 68, 68}.glass-toast--warning{--gt-pill-bg:#fef3c6;--gt-icon:#b45309;--gt-bar:#fcbb00;--gt-ring:245, 158, 11}.glass-toast--info{--gt-pill-bg:#e2eaf1;--gt-icon:#3a5b7a;--gt-bar:#6f92ad;--gt-ring:76, 112, 144}.glass-toast--animated{transition:all .28s cubic-bezier(0,0,.2,1)}.glass-toast--leaving{transition-timing-function:cubic-bezier(.4,0,1,1)}.glass-toast--enter,.glass-toast--faded{opacity:0}.glass-toast--enter[data-position=top-right],.glass-toast--enter[data-position=bottom-right]{transform:translate(2rem)}.glass-toast--enter[data-position=bottom-center]{transform:translateY(2rem)}.glass-toast__icon{background-color:var(--gt-pill-bg);width:1.75rem;height:1.75rem;color:var(--gt-icon);border-radius:.5rem;flex-shrink:0;justify-content:center;align-items:center;display:flex}.glass-toast__icon svg{flex-shrink:0;width:18px;height:18px;display:block}.glass-toast__message{min-width:0;color:var(--gt-text);overflow-wrap:anywhere;-webkit-line-clamp:5;line-clamp:5;-webkit-box-orient:vertical;flex:1;margin:0;font-size:.9375rem;line-height:1.625;display:-webkit-box;overflow:hidden}.glass-toast__action{border:1px solid var(--gt-action-border,var(--gt-border));background-color:var(--gt-action-bg,transparent);color:var(--gt-action-text,var(--gt-icon));font:inherit;white-space:nowrap;cursor:pointer;appearance:none;border-radius:.5rem;flex-shrink:0;align-self:center;padding:.3125rem .75rem;font-size:.8125rem;font-weight:600;line-height:1;transition:background-color .15s cubic-bezier(.4,0,.2,1),border-color .15s cubic-bezier(.4,0,.2,1)}.glass-toast__action:hover{background-color:var(--gt-action-bg-hover,var(--gt-pill-bg))}.glass-toast__action:focus-visible{outline:2px solid var(--gt-focus-ring);outline-offset:2px}.glass-toast__close{border:1px solid var(--gt-close-border);background-color:var(--gt-close-bg);width:2rem;height:2rem;color:var(--gt-close-text);font:inherit;cursor:pointer;appearance:none;border-radius:9999px;flex-shrink:0;justify-content:center;align-self:center;align-items:center;padding:0;transition:all .15s cubic-bezier(.4,0,.2,1);display:flex}.glass-toast__close:hover{background-color:var(--gt-close-bg-hover);border-color:var(--gt-close-border-hover);color:var(--gt-close-text-hover)}.glass-toast__close:focus-visible{outline:2px solid var(--gt-focus-ring);outline-offset:2px}.glass-toast__close svg{width:.875rem;height:.875rem;display:block}.glass-toast__bar{background-color:var(--gt-bar);opacity:.4;border-radius:9999px;height:2px;position:absolute;bottom:0;left:0}@media (width>=768px){.glass-toast__message{font-size:14px}}@media (prefers-color-scheme:dark){:where(:root:not([data-theme=light]):not(.light)) .glass-toast{--gt-bg:#1c1c1eb8;--gt-bg-opaque:#1c1c1eeb;--gt-border:#ffffff1a;--gt-text:#e5e7eb;--gt-close-bg:#ffffff0f;--gt-close-border:#ffffff1f;--gt-close-text:#cbd5e1;--gt-close-bg-hover:#ffffff1f;--gt-close-border-hover:#ffffff38;--gt-close-text-hover:#f1f5f9;--gt-focus-ring:#93c5fd}}:where([data-theme=dark],.dark) .glass-toast{--gt-bg:#1c1c1eb8;--gt-bg-opaque:#1c1c1eeb;--gt-border:#ffffff1a;--gt-text:#e5e7eb;--gt-close-bg:#ffffff0f;--gt-close-border:#ffffff1f;--gt-close-text:#cbd5e1;--gt-close-bg-hover:#ffffff1f;--gt-close-border-hover:#ffffff38;--gt-close-text-hover:#f1f5f9;--gt-focus-ring:#93c5fd}`,r=280,i=12,a=1400,o={error:1e4},s=5500,c=4,l=`info`,u=`top-right`,d={success:{role:`status`,live:`polite`,ringRgb:`16, 185, 129`},error:{role:`alert`,live:`assertive`,ringRgb:`239, 68, 68`},warning:{role:`status`,live:`polite`,ringRgb:`245, 158, 11`},info:{role:`status`,live:`polite`,ringRgb:`76, 112, 144`}},f={"top-right":`glass-toast-container--top-right`,"bottom-right":`glass-toast-container--bottom-right`,"bottom-center":`glass-toast-container--bottom-center`},p=`0 4px 24px -4px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04)`,m=!0;function h(){if(typeof document>`u`||document.querySelector(`style[data-glass-toast], link[data-glass-toast]`))return;let e=document.createElement(`style`);e.setAttribute(`data-glass-toast`,``),e.textContent=n,document.head.prepend(e)}var g=()=>window.matchMedia?.(`(prefers-reduced-motion: reduce)`).matches,_=new Map,v=!1;function y(e){let t=_.get(e);if(t&&t.isConnected)return t;let n=document.createElement(`div`);return n.className=`glass-toast-container ${f[e]}`,n.dataset.toastContainer=e,document.body.appendChild(n),_.set(e,n),n}function b(e){let t=[...e.children].filter(e=>!e.dataset.dismissing);for(;t.length>=c;){let e=t.shift();typeof e.__dismiss==`function`?e.__dismiss():e.remove()}}function x(e){if(e&&e.isConnected&&typeof e.focus==`function`){e.focus();return}let t=document.querySelector(`.glass-toast__close`);t&&t.focus()}function S(e,{type:n,position:r,persistent:i,duration:a,action:o}){let s=d[n],c=g(),l=document.createElement(`div`);l.setAttribute(`role`,s.role),l.setAttribute(`aria-live`,s.live),l.dataset.position=r,l.className=[`glass-toast`,`glass-toast--${n}`,c?`glass-toast--faded`:`glass-toast--animated glass-toast--enter`].join(` `);let u=document.createElement(`span`);u.className=`glass-toast__icon`,u.innerHTML=t[n];let f=document.createElement(`p`);f.className=`glass-toast__message`,f.textContent=e,l.append(u,f);let p=null;o&&o.label&&(p=document.createElement(`button`),p.type=`button`,p.className=`glass-toast__action`,p.textContent=o.label,l.appendChild(p));let m=document.createElement(`button`);if(m.type=`button`,m.className=`glass-toast__close`,m.setAttribute(`aria-label`,`關閉通知`),m.innerHTML=t.close,l.appendChild(m),!i){let e=document.createElement(`div`);e.className=`glass-toast__bar`,e.style.width=`100%`,e.style.transition=`width ${a}ms linear`,l.appendChild(e),requestAnimationFrame(()=>{requestAnimationFrame(()=>{e.style.width=`0%`})})}return{el:l,btn:m,actionBtn:p}}function C(e,t){if(g()||typeof e.animate!=`function`)return;let n=getComputedStyle(e),r=n.getPropertyValue(`--gt-ring`).trim().replace(/\s*,\s*/g,`, `)||d[t].ringRgb,i=n.getPropertyValue(`--gt-shadow`).trim()||p;e.animate([{boxShadow:`0 0 18px 6px rgba(${r}, 0.75), ${i}`,offset:0},{boxShadow:`0 0 22px 8px rgba(${r}, 0.7), ${i}`,offset:.35},{boxShadow:`0 0 56px 26px rgba(${r}, 0), ${i}`,offset:1}],{duration:a,easing:`ease-out`,fill:`none`})}function w(e,t){e.remove();let n=_.get(t);n&&n.children.length===0&&(n.remove(),_.delete(t))}function T(e,t,n){if(e.dataset.dismissing)return;e.dataset.dismissing=`true`;let a=e.contains(document.activeElement),o=()=>{w(e,t),a&&x(n)};if(g()){e.classList.add(`glass-toast--faded`),setTimeout(o,r);return}e.classList.add(`glass-toast--leaving`);let s=e.offsetHeight;e.style.height=`${s}px`,e.offsetHeight,e.classList.add(`glass-toast--enter`),e.style.height=`0px`,e.style.paddingTop=`0`,e.style.paddingBottom=`0`,e.style.borderTopWidth=`0`,e.style.borderBottomWidth=`0`,e.style.marginTop=`-${i}px`,setTimeout(o,r)}function E(e,t={}){if(v)return()=>{};let{type:n=l,position:r=u,persistent:i=!1,action:a}=t;d[n]||(n=l),f[r]||(r=u);let c=t.duration!==void 0,p=c?t.duration:o[n]??s;(a&&a.label&&!c||p<=0)&&(i=!0),m&&h();let _=y(r);b(_);let{el:x,btn:w,actionBtn:E}=S(e,{type:n,position:r,persistent:i,duration:p,action:a}),D=typeof document<`u`?document.activeElement:null;_.appendChild(x);let O=g()?`glass-toast--faded`:`glass-toast--enter`;requestAnimationFrame(()=>{requestAnimationFrame(()=>{x.classList.remove(O),C(x,n)})});let k=()=>T(x,r,D);if(x.__dismiss=k,w.addEventListener(`click`,k),E&&E.addEventListener(`click`,()=>{a.onClick?.(),k()}),x.addEventListener(`keydown`,e=>{e.key===`Escape`&&(e.stopPropagation(),k())}),!i){let e=x.querySelector(`.glass-toast__bar`),t=p,n=Date.now(),r=setTimeout(k,t),i=!1,a=!1,o=!1,s=()=>{if(!i&&(i=!0,clearTimeout(r),t-=Date.now()-n,e)){let t=e.getBoundingClientRect().width;e.style.transition=`none`,e.style.width=`${t}px`}},c=()=>{if(i){if(i=!1,t<=0){k();return}n=Date.now(),r=setTimeout(k,t),e&&requestAnimationFrame(()=>{e.style.transition=`width ${t}ms linear`,e.style.width=`0%`})}},l=()=>{!a&&!o&&c()};x.addEventListener(`mouseenter`,()=>{a=!0,s()}),x.addEventListener(`mouseleave`,()=>{a=!1,l()}),x.addEventListener(`focusin`,()=>{o=!0,s()}),x.addEventListener(`focusout`,e=>{x.contains(e.relatedTarget)||(o=!1,l())})}return k}function D({suppress:e=!1}={}){e&&(v=!0);for(let e of _.values())e.remove();_.clear()}function O(){v=!1}function k(e,t){return E(e,{...t,type:`success`})}function A(e,t){return E(e,{...t,type:`error`})}function j(e,t){return E(e,{...t,type:`warning`})}function M(e,t){return E(e,{...t,type:`info`})}var N={show:E,success:k,error:A,warning:j,info:M,dismissAll:D,resume:O};function P({global:e=!0,injectStyles:t=!0,target:n}={}){if(m=t,t&&h(),e){let e=n??(typeof window<`u`?window:void 0);e&&(e.toast=N)}return N}e.dismissAll=D,e.ensureStyles=h,e.error=A,e.info=M,e.register=P,e.resume=O,e.show=E,e.success=k,e.warning=j});
1
+ (function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports):typeof define==`function`&&define.amd?define([`exports`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.GlassToast={}))})(this,function(e){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});var t={success:`<svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd"/></svg>`,error:`<svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z" clip-rule="evenodd"/></svg>`,warning:`<svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.168 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495zM10 6a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 0110 6zm0 9a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"/></svg>`,info:`<svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a.75.75 0 000 1.5h.253a.25.25 0 01.244.304l-.459 2.066A1.75 1.75 0 0010.747 15H11a.75.75 0 000-1.5h-.253a.25.25 0 01-.244-.304l.459-2.066A1.75 1.75 0 009.253 9H9z" clip-rule="evenodd"/></svg>`,close:`<svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z"/></svg>`},n=`.glass-toast-container,.glass-toast,.glass-toast *{box-sizing:border-box}.glass-toast-announcer{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.glass-toast-container{width:min(26rem,100%);max-height:100dvh;padding:1rem;padding-top:max(1rem, env(safe-area-inset-top));padding-right:max(1rem, env(safe-area-inset-right));padding-bottom:max(1rem, env(safe-area-inset-bottom));padding-left:max(1rem, env(safe-area-inset-left));scrollbar-width:none;z-index:2147483647;pointer-events:none;flex-direction:column;gap:.75rem;display:flex;position:fixed;overflow:auto}.glass-toast-container[data-scrollable]{pointer-events:auto}.glass-toast-container--top-right{align-items:flex-end;top:0;right:0}.glass-toast-container--bottom-right{align-items:flex-end;bottom:0;right:0}.glass-toast-container--bottom-center{align-items:center;bottom:0;left:50%;transform:translate(-50%)}.glass-toast{--gt-bg:#fffc;--gt-bg-opaque:#fffffff5;--gt-border:#e5e7eb66;--gt-text:#4a5565;--gt-blur:24px;--gt-radius:1rem;--gt-shadow:0 4px 24px -4px #00000014, 0 1px 2px #0000000a;--gt-close-bg:#f9fafb;--gt-close-border:#e5e7eb;--gt-close-text:#667085;--gt-close-bg-hover:#f3f4f6;--gt-close-border-hover:#d1d5dc;--gt-close-text-hover:#4a5565;--gt-focus-ring:#2563eb;pointer-events:auto;background-color:var(--gt-bg);width:24rem;max-width:calc(100vw - 2rem);-webkit-backdrop-filter:blur(var(--gt-blur));backdrop-filter:blur(var(--gt-blur));border:1px solid var(--gt-border);border-radius:var(--gt-radius);box-shadow:var(--gt-shadow);grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.75rem;padding:.875rem 1rem;display:grid;position:relative;overflow:hidden}.glass-toast-container>.glass-toast{flex:none;max-width:100%}@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){.glass-toast{background-color:var(--gt-bg-opaque)}}.glass-toast--success{--gt-pill-bg:#d0fae5;--gt-icon:#047857;--gt-bar:#00bb7f;--gt-ring:16, 185, 129}.glass-toast--error{--gt-pill-bg:#ffe2e2;--gt-icon:#dc2626;--gt-action-text:#b91c1c;--gt-bar:#ff6568;--gt-ring:239, 68, 68}.glass-toast--warning{--gt-pill-bg:#fef3c6;--gt-icon:#b45309;--gt-bar:#fcbb00;--gt-ring:245, 158, 11}.glass-toast--info{--gt-pill-bg:#e2eaf1;--gt-icon:#3a5b7a;--gt-bar:#6f92ad;--gt-ring:76, 112, 144}.glass-toast--animated{transition:all .28s cubic-bezier(0,0,.2,1)}.glass-toast--leaving{transition-timing-function:cubic-bezier(.4,0,1,1)}.glass-toast--enter,.glass-toast--faded{opacity:0}.glass-toast--enter[data-position=top-right],.glass-toast--enter[data-position=bottom-right]{transform:translate(2rem)}.glass-toast--enter[data-position=bottom-center]{transform:translateY(2rem)}.glass-toast__icon{background-color:var(--gt-pill-bg);width:1.75rem;height:1.75rem;color:var(--gt-icon);border-radius:.5rem;flex-shrink:0;justify-content:center;align-items:center;display:flex}.glass-toast__icon svg{flex-shrink:0;width:18px;height:18px;display:block}.glass-toast__message{min-width:0;color:var(--gt-text);overflow-wrap:anywhere;-webkit-line-clamp:5;line-clamp:5;-webkit-box-orient:vertical;margin:0;font-size:.9375rem;line-height:1.625;display:-webkit-box;overflow:hidden}.glass-toast__action{border:1px solid var(--gt-action-border,var(--gt-border));background-color:var(--gt-action-bg,transparent);min-width:0;max-width:100%;min-height:2rem;color:var(--gt-action-text,var(--gt-icon));font:inherit;overflow-wrap:anywhere;cursor:pointer;appearance:none;border-radius:.5rem;grid-area:2/2;place-self:center start;padding:.3125rem .75rem;font-size:.8125rem;font-weight:600;line-height:1.25;transition:background-color .15s cubic-bezier(.4,0,.2,1),border-color .15s cubic-bezier(.4,0,.2,1)}.glass-toast__action:hover{background-color:var(--gt-action-bg-hover,var(--gt-pill-bg))}.glass-toast__action[aria-disabled=true]{cursor:progress}.glass-toast__action:focus-visible{outline:2px solid var(--gt-focus-ring);outline-offset:2px}.glass-toast__close{border:1px solid var(--gt-close-border);background-color:var(--gt-close-bg);width:2rem;height:2rem;color:var(--gt-close-text);font:inherit;cursor:pointer;appearance:none;border-radius:9999px;grid-area:1/-2;justify-content:center;align-self:center;align-items:center;padding:0;transition:all .15s cubic-bezier(.4,0,.2,1);display:flex}.glass-toast__close:hover{background-color:var(--gt-close-bg-hover);border-color:var(--gt-close-border-hover);color:var(--gt-close-text-hover)}.glass-toast__close:focus-visible{outline:2px solid var(--gt-focus-ring);outline-offset:2px}.glass-toast__close svg{width:.875rem;height:.875rem;display:block}.glass-toast__bar{background-color:var(--gt-bar);opacity:.4;border-radius:9999px;height:2px;position:absolute;bottom:0;left:0}@media (width>=768px){.glass-toast__message{font-size:14px}.glass-toast:has(.glass-toast__action){grid-template-columns:auto minmax(0,1fr) minmax(0,35%) auto}.glass-toast:has(.glass-toast__action) .glass-toast__action{grid-area:1/3}}@media (prefers-color-scheme:dark){:where(:root:not([data-theme=light]):not(.light)) .glass-toast{--gt-bg:#1c1c1eb8;--gt-bg-opaque:#1c1c1eeb;--gt-border:#ffffff1a;--gt-text:#e5e7eb;--gt-close-bg:#ffffff0f;--gt-close-border:#ffffff1f;--gt-close-text:#cbd5e1;--gt-close-bg-hover:#ffffff1f;--gt-close-border-hover:#ffffff38;--gt-close-text-hover:#f1f5f9;--gt-focus-ring:#93c5fd;--gt-action-text:var(--gt-text);--gt-action-bg-hover:var(--gt-close-bg-hover)}}:where([data-theme=dark],.dark) .glass-toast{--gt-bg:#1c1c1eb8;--gt-bg-opaque:#1c1c1eeb;--gt-border:#ffffff1a;--gt-text:#e5e7eb;--gt-close-bg:#ffffff0f;--gt-close-border:#ffffff1f;--gt-close-text:#cbd5e1;--gt-close-bg-hover:#ffffff1f;--gt-close-border-hover:#ffffff38;--gt-close-text-hover:#f1f5f9;--gt-focus-ring:#93c5fd;--gt-action-text:var(--gt-text);--gt-action-bg-hover:var(--gt-close-bg-hover)}`,r=280,i=12,a=1400,o={error:1e4},s=5500,c=2147483647,l=4,u=`info`,d=`top-right`,f=`Close`,p={success:`16, 185, 129`,error:`239, 68, 68`,warning:`245, 158, 11`,info:`76, 112, 144`},m={"top-right":`glass-toast-container--top-right`,"bottom-right":`glass-toast-container--bottom-right`,"bottom-center":`glass-toast-container--bottom-center`},h=`0 4px 24px -4px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04)`,g=!0,_=f;function v(){if(typeof document>`u`||document.querySelector(`style[data-glass-toast], link[data-glass-toast]`))return;let e=document.createElement(`style`);e.setAttribute(`data-glass-toast`,``),e.textContent=n,document.head.prepend(e)}var y=()=>window.matchMedia?.(`(prefers-reduced-motion: reduce)`).matches,b=new Map,x=new WeakMap,S=new WeakMap;function C(e){for(let[e,t]of b)e.isConnected||z(t);let t=b.get(e);return t||(t={root:e,containers:new Map,announcers:void 0},e.localName===`dialog`&&(t.onClose=()=>{e.open||z(t)},e.addEventListener(`close`,t.onClose)),b.set(e,t)),t}function w(e){for(let t of Object.values(e??{}))cancelAnimationFrame(t.frame),t.frame=void 0,t.pending.length=0,t.el.textContent=``}function T(e){let{announcers:t,root:n}=e;if(!(t?.status.el.isConnected&&t.alert.el.isConnected)){w(t);for(let e of Object.values(t??{}))e.el.remove();e.announcers=Object.fromEntries([`status`,`alert`].map(e=>{let t=document.createElement(`div`);return t.className=`glass-toast-announcer`,t.setAttribute(`role`,e),t.setAttribute(`aria-atomic`,`true`),n.appendChild(t),[e,{el:t,pending:[],frame:void 0}]}))}}function E(e,t,n,r){T(e);let i=e.announcers[n===`error`?`alert`:`status`];i.pending.push({toast:t,message:r}),i.frame===void 0&&(i.el.textContent=``,i.frame=requestAnimationFrame(()=>{i.frame=requestAnimationFrame(()=>{i.frame=void 0;let e=i.pending.splice(0);i.el.isConnected&&(i.el.textContent=e.filter(({toast:e})=>e.isConnected&&!e.dataset.dismissing).map(({message:e})=>e).join(`
2
+ `))})}))}var D=!1;function O(e){e.toggleAttribute(`data-scrollable`,e.scrollHeight>e.clientHeight)}function k(e){S.get(e)?.disconnect(),e.remove()}function A({root:e,containers:t},n){let r=t.get(n);if(r&&r.isConnected)return r;r&&k(r);let i=document.createElement(`div`);if(i.className=`glass-toast-container ${m[n]}`,i.dataset.toastContainer=n,i.tabIndex=-1,e.appendChild(i),t.set(n,i),typeof ResizeObserver==`function`){let e=new ResizeObserver(()=>O(i));e.observe(i),S.set(i,e)}return i}function j(e){let t=[...e.children].filter(e=>!e.dataset.dismissing);for(;t.length>=l;){let e=t.shift();x.has(e)?x.get(e).dismiss():e.remove()}}function M(e,t){if(e&&e.isConnected&&typeof e.focus==`function`&&(e.focus(),document.activeElement===e))return;let n=t.querySelector(`[data-toast-container] > .glass-toast:not([data-dismissing]) .glass-toast__close`);n&&n.focus()}function N(e,{type:n,position:r,persistent:i,duration:a,action:o}){let s=y(),c=document.createElement(`div`);c.dataset.position=r,c.className=[`glass-toast`,`glass-toast--${n}`,s?`glass-toast--faded`:`glass-toast--animated glass-toast--enter`].join(` `);let l=document.createElement(`span`);l.className=`glass-toast__icon`,l.innerHTML=t[n];let u=document.createElement(`p`);u.className=`glass-toast__message`,u.textContent=e,c.append(l,u);let d=null;o&&o.label&&(d=document.createElement(`button`),d.type=`button`,d.className=`glass-toast__action`,d.textContent=o.label,c.appendChild(d));let f=document.createElement(`button`);if(f.type=`button`,f.className=`glass-toast__close`,f.setAttribute(`aria-label`,_),f.innerHTML=t.close,c.appendChild(f),!i){let e=document.createElement(`div`);e.className=`glass-toast__bar`,e.style.width=`100%`,e.style.transition=`width ${a}ms linear`,c.appendChild(e)}return{el:c,btn:f,actionBtn:d}}function P(e,t){if(y()||typeof e.animate!=`function`)return;let n=getComputedStyle(e),r=n.getPropertyValue(`--gt-ring`).trim().replace(/\s*,\s*/g,`, `)||p[t],i=n.getPropertyValue(`--gt-shadow`).trim()||h;return e.animate([{boxShadow:`0 0 18px 6px rgba(${r}, 0.75), ${i}`,offset:0},{boxShadow:`0 0 22px 8px rgba(${r}, 0.7), ${i}`,offset:.35},{boxShadow:`0 0 56px 26px rgba(${r}, 0), ${i}`,offset:1}],{duration:a,easing:`ease-out`,fill:`none`})}function F(e,t,n){let r=e.parentElement;e.remove(),r&&r.children.length===0?(k(r),t.get(n)===r&&t.delete(n)):r&&O(r)}function I(e){if(y()){e.classList.add(`glass-toast--faded`);return}e.classList.add(`glass-toast--leaving`);let t=e.offsetHeight;e.style.height=`${t}px`,e.offsetHeight,e.classList.add(`glass-toast--enter`),e.style.height=`0px`,e.style.paddingTop=`0`,e.style.paddingBottom=`0`,e.style.borderTopWidth=`0`,e.style.borderBottomWidth=`0`,e.style.marginTop=`-${i}px`}function L(e,t={}){if(D||typeof document>`u`||!document.body)return()=>{};let{dialog:n}=t;if(n&&(!n.isConnected||!n.open))return()=>{};let{type:i=u,position:a=d,persistent:l=!1,action:f}=t;Object.hasOwn(p,i)||(i=u),Object.hasOwn(m,a)||(a=d);let h=Number.isFinite(t.duration),_=h?Math.min(t.duration,c):o[i]??s;(f&&f.label&&!h||_<=0)&&(l=!0),g&&v();let b=C(n??document.body),S=A(b,a);j(S);let{el:w,btn:T,actionBtn:k}=N(e,{type:i,position:a,persistent:l,duration:_,action:f}),L=document.activeElement,R=!S.contains(L)&&S.scrollHeight-S.clientHeight-S.scrollTop<=1;S.appendChild(w),O(S),R&&(S.scrollTop=S.scrollHeight);let z=w.querySelector(`.glass-toast__bar`),B,V,H,U,W,G=!1,K=!1,q,J,Y=()=>{clearTimeout(B),cancelAnimationFrame(H),cancelAnimationFrame(U),W?.cancel()},X=()=>{G||(G=!0,Y(),clearTimeout(V),x.delete(w),F(w,b.containers,a))},Z=()=>{G||w.dataset.dismissing||(w.isConnected?(w.dataset.dismissing=`true`,Y(),I(w),V=setTimeout(()=>{let e=w.contains(document.activeElement);X(),e&&M(L,b.root)},r)):X())};x.set(w,{dismiss:Z,remove:X,invoker:L}),E(b,w,i,e);let Q=y()?`glass-toast--faded`:`glass-toast--enter`;if(H=requestAnimationFrame(()=>{H=requestAnimationFrame(()=>{w.isConnected?(w.classList.remove(Q),W=P(w,i)):X()})}),T.addEventListener(`click`,Z),w.addEventListener(`keydown`,e=>{e.key===`Escape`&&(e.stopPropagation(),Z())}),!l){let e=_,t=Date.now();B=setTimeout(Z,e);let n=!1,r=!1,i=!1,a=()=>{z.style.transition=`width ${e}ms linear`,z.style.width=`0%`};U=requestAnimationFrame(()=>{U=requestAnimationFrame(a)}),q=()=>{if(n||G||w.dataset.dismissing)return;n=!0,clearTimeout(B),cancelAnimationFrame(U),e-=Date.now()-t;let r=z.getBoundingClientRect().width;z.style.transition=`none`,z.style.width=`${r}px`};let o=()=>{!n||G||w.dataset.dismissing||(n=!1,e<=0?Z():(t=Date.now(),B=setTimeout(Z,e),U=requestAnimationFrame(a)))};J=()=>{r||i||K||o()},w.addEventListener(`mouseenter`,()=>{r=!0,q()}),w.addEventListener(`mouseleave`,()=>{r=!1,J()}),w.addEventListener(`focusin`,()=>{i=!0,q()}),w.addEventListener(`focusout`,e=>{w.contains(e.relatedTarget)||(i=!1,J())})}if(k){let e=e=>{console.error(`glass-toast: action failed`,e),K=!1,G||w.dataset.dismissing||(k.removeAttribute(`aria-disabled`),J?.())};k.addEventListener(`click`,()=>{if(!(G||w.dataset.dismissing||K)){K=!0,k.setAttribute(`aria-disabled`,`true`),q?.();try{let t=f.onClick?.();typeof t?.then==`function`?Promise.resolve(t).then(Z,e):Z()}catch(t){e(t)}}})}return Z}function R({announcers:e,containers:t}){w(e);let n;for(let e of t.values()){for(let t of[...e.children]){let e=x.get(t);t.contains(document.activeElement)&&(n=e),e?.remove()}k(e)}return t.clear(),n}function z(e){R(e);for(let t of Object.values(e.announcers??{}))t.el.remove();e.onClose&&e.root.removeEventListener(`close`,e.onClose),b.delete(e.root)}function B({suppress:e=!1}={}){e&&(D=!0);let t;for(let e of b.values()){let n=R(e);n&&(t=()=>M(n.invoker,e.root))}t?.()}function V(){D=!1}function H(e,t){return L(e,{...t,type:`success`})}function U(e,t){return L(e,{...t,type:`error`})}function W(e,t){return L(e,{...t,type:`warning`})}function G(e,t){return L(e,{...t,type:`info`})}var K={show:L,success:H,error:U,warning:W,info:G,dismissAll:B,resume:V};function q({global:e=!0,injectStyles:t=!0,target:n,closeLabel:r}={}){if(g=t,_=typeof r==`string`&&r.trim()?r:f,t&&v(),typeof document<`u`&&document.body&&T(C(document.body)),e){let e=n??(typeof window<`u`?window:void 0);e&&(e.toast=K)}return K}e.dismissAll=B,e.ensureStyles=v,e.error=U,e.info=G,e.register=q,e.resume=V,e.show=L,e.success=H,e.warning=W});
package/dist/glass-toast.umd.js ADDED
@@ -0,0 +1,2 @@
1
+ (function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports):typeof define==`function`&&define.amd?define([`exports`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.GlassToast={}))})(this,function(e){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});var t={success:`<svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd"/></svg>`,error:`<svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z" clip-rule="evenodd"/></svg>`,warning:`<svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.168 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495zM10 6a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 0110 6zm0 9a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"/></svg>`,info:`<svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a.75.75 0 000 1.5h.253a.25.25 0 01.244.304l-.459 2.066A1.75 1.75 0 0010.747 15H11a.75.75 0 000-1.5h-.253a.25.25 0 01-.244-.304l.459-2.066A1.75 1.75 0 009.253 9H9z" clip-rule="evenodd"/></svg>`,close:`<svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z"/></svg>`},n=`.glass-toast-container,.glass-toast,.glass-toast *{box-sizing:border-box}.glass-toast-announcer{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.glass-toast-container{width:min(26rem,100%);max-height:100dvh;padding:1rem;padding-top:max(1rem, env(safe-area-inset-top));padding-right:max(1rem, env(safe-area-inset-right));padding-bottom:max(1rem, env(safe-area-inset-bottom));padding-left:max(1rem, env(safe-area-inset-left));scrollbar-width:none;z-index:2147483647;pointer-events:none;flex-direction:column;gap:.75rem;display:flex;position:fixed;overflow:auto}.glass-toast-container[data-scrollable]{pointer-events:auto}.glass-toast-container--top-right{align-items:flex-end;top:0;right:0}.glass-toast-container--bottom-right{align-items:flex-end;bottom:0;right:0}.glass-toast-container--bottom-center{align-items:center;bottom:0;left:50%;transform:translate(-50%)}.glass-toast{--gt-bg:#fffc;--gt-bg-opaque:#fffffff5;--gt-border:#e5e7eb66;--gt-text:#4a5565;--gt-blur:24px;--gt-radius:1rem;--gt-shadow:0 4px 24px -4px #00000014, 0 1px 2px #0000000a;--gt-close-bg:#f9fafb;--gt-close-border:#e5e7eb;--gt-close-text:#667085;--gt-close-bg-hover:#f3f4f6;--gt-close-border-hover:#d1d5dc;--gt-close-text-hover:#4a5565;--gt-focus-ring:#2563eb;pointer-events:auto;background-color:var(--gt-bg);width:24rem;max-width:calc(100vw - 2rem);-webkit-backdrop-filter:blur(var(--gt-blur));backdrop-filter:blur(var(--gt-blur));border:1px solid var(--gt-border);border-radius:var(--gt-radius);box-shadow:var(--gt-shadow);grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.75rem;padding:.875rem 1rem;display:grid;position:relative;overflow:hidden}.glass-toast-container>.glass-toast{flex:none;max-width:100%}@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){.glass-toast{background-color:var(--gt-bg-opaque)}}.glass-toast--success{--gt-pill-bg:#d0fae5;--gt-icon:#047857;--gt-bar:#00bb7f;--gt-ring:16, 185, 129}.glass-toast--error{--gt-pill-bg:#ffe2e2;--gt-icon:#dc2626;--gt-action-text:#b91c1c;--gt-bar:#ff6568;--gt-ring:239, 68, 68}.glass-toast--warning{--gt-pill-bg:#fef3c6;--gt-icon:#b45309;--gt-bar:#fcbb00;--gt-ring:245, 158, 11}.glass-toast--info{--gt-pill-bg:#e2eaf1;--gt-icon:#3a5b7a;--gt-bar:#6f92ad;--gt-ring:76, 112, 144}.glass-toast--animated{transition:all .28s cubic-bezier(0,0,.2,1)}.glass-toast--leaving{transition-timing-function:cubic-bezier(.4,0,1,1)}.glass-toast--enter,.glass-toast--faded{opacity:0}.glass-toast--enter[data-position=top-right],.glass-toast--enter[data-position=bottom-right]{transform:translate(2rem)}.glass-toast--enter[data-position=bottom-center]{transform:translateY(2rem)}.glass-toast__icon{background-color:var(--gt-pill-bg);width:1.75rem;height:1.75rem;color:var(--gt-icon);border-radius:.5rem;flex-shrink:0;justify-content:center;align-items:center;display:flex}.glass-toast__icon svg{flex-shrink:0;width:18px;height:18px;display:block}.glass-toast__message{min-width:0;color:var(--gt-text);overflow-wrap:anywhere;-webkit-line-clamp:5;line-clamp:5;-webkit-box-orient:vertical;margin:0;font-size:.9375rem;line-height:1.625;display:-webkit-box;overflow:hidden}.glass-toast__action{border:1px solid var(--gt-action-border,var(--gt-border));background-color:var(--gt-action-bg,transparent);min-width:0;max-width:100%;min-height:2rem;color:var(--gt-action-text,var(--gt-icon));font:inherit;overflow-wrap:anywhere;cursor:pointer;appearance:none;border-radius:.5rem;grid-area:2/2;place-self:center start;padding:.3125rem .75rem;font-size:.8125rem;font-weight:600;line-height:1.25;transition:background-color .15s cubic-bezier(.4,0,.2,1),border-color .15s cubic-bezier(.4,0,.2,1)}.glass-toast__action:hover{background-color:var(--gt-action-bg-hover,var(--gt-pill-bg))}.glass-toast__action[aria-disabled=true]{cursor:progress}.glass-toast__action:focus-visible{outline:2px solid var(--gt-focus-ring);outline-offset:2px}.glass-toast__close{border:1px solid var(--gt-close-border);background-color:var(--gt-close-bg);width:2rem;height:2rem;color:var(--gt-close-text);font:inherit;cursor:pointer;appearance:none;border-radius:9999px;grid-area:1/-2;justify-content:center;align-self:center;align-items:center;padding:0;transition:all .15s cubic-bezier(.4,0,.2,1);display:flex}.glass-toast__close:hover{background-color:var(--gt-close-bg-hover);border-color:var(--gt-close-border-hover);color:var(--gt-close-text-hover)}.glass-toast__close:focus-visible{outline:2px solid var(--gt-focus-ring);outline-offset:2px}.glass-toast__close svg{width:.875rem;height:.875rem;display:block}.glass-toast__bar{background-color:var(--gt-bar);opacity:.4;border-radius:9999px;height:2px;position:absolute;bottom:0;left:0}@media (width>=768px){.glass-toast__message{font-size:14px}.glass-toast:has(.glass-toast__action){grid-template-columns:auto minmax(0,1fr) minmax(0,35%) auto}.glass-toast:has(.glass-toast__action) .glass-toast__action{grid-area:1/3}}@media (prefers-color-scheme:dark){:where(:root:not([data-theme=light]):not(.light)) .glass-toast{--gt-bg:#1c1c1eb8;--gt-bg-opaque:#1c1c1eeb;--gt-border:#ffffff1a;--gt-text:#e5e7eb;--gt-close-bg:#ffffff0f;--gt-close-border:#ffffff1f;--gt-close-text:#cbd5e1;--gt-close-bg-hover:#ffffff1f;--gt-close-border-hover:#ffffff38;--gt-close-text-hover:#f1f5f9;--gt-focus-ring:#93c5fd;--gt-action-text:var(--gt-text);--gt-action-bg-hover:var(--gt-close-bg-hover)}}:where([data-theme=dark],.dark) .glass-toast{--gt-bg:#1c1c1eb8;--gt-bg-opaque:#1c1c1eeb;--gt-border:#ffffff1a;--gt-text:#e5e7eb;--gt-close-bg:#ffffff0f;--gt-close-border:#ffffff1f;--gt-close-text:#cbd5e1;--gt-close-bg-hover:#ffffff1f;--gt-close-border-hover:#ffffff38;--gt-close-text-hover:#f1f5f9;--gt-focus-ring:#93c5fd;--gt-action-text:var(--gt-text);--gt-action-bg-hover:var(--gt-close-bg-hover)}`,r=280,i=12,a=1400,o={error:1e4},s=5500,c=2147483647,l=4,u=`info`,d=`top-right`,f=`Close`,p={success:`16, 185, 129`,error:`239, 68, 68`,warning:`245, 158, 11`,info:`76, 112, 144`},m={"top-right":`glass-toast-container--top-right`,"bottom-right":`glass-toast-container--bottom-right`,"bottom-center":`glass-toast-container--bottom-center`},h=`0 4px 24px -4px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04)`,g=!0,_=f;function v(){if(typeof document>`u`||document.querySelector(`style[data-glass-toast], link[data-glass-toast]`))return;let e=document.createElement(`style`);e.setAttribute(`data-glass-toast`,``),e.textContent=n,document.head.prepend(e)}var y=()=>window.matchMedia?.(`(prefers-reduced-motion: reduce)`).matches,b=new Map,x=new WeakMap,S=new WeakMap;function C(e){for(let[e,t]of b)e.isConnected||z(t);let t=b.get(e);return t||(t={root:e,containers:new Map,announcers:void 0},e.localName===`dialog`&&(t.onClose=()=>{e.open||z(t)},e.addEventListener(`close`,t.onClose)),b.set(e,t)),t}function w(e){for(let t of Object.values(e??{}))cancelAnimationFrame(t.frame),t.frame=void 0,t.pending.length=0,t.el.textContent=``}function T(e){let{announcers:t,root:n}=e;if(!(t?.status.el.isConnected&&t.alert.el.isConnected)){w(t);for(let e of Object.values(t??{}))e.el.remove();e.announcers=Object.fromEntries([`status`,`alert`].map(e=>{let t=document.createElement(`div`);return t.className=`glass-toast-announcer`,t.setAttribute(`role`,e),t.setAttribute(`aria-atomic`,`true`),n.appendChild(t),[e,{el:t,pending:[],frame:void 0}]}))}}function E(e,t,n,r){T(e);let i=e.announcers[n===`error`?`alert`:`status`];i.pending.push({toast:t,message:r}),i.frame===void 0&&(i.el.textContent=``,i.frame=requestAnimationFrame(()=>{i.frame=requestAnimationFrame(()=>{i.frame=void 0;let e=i.pending.splice(0);i.el.isConnected&&(i.el.textContent=e.filter(({toast:e})=>e.isConnected&&!e.dataset.dismissing).map(({message:e})=>e).join(`
2
+ `))})}))}var D=!1;function O(e){e.toggleAttribute(`data-scrollable`,e.scrollHeight>e.clientHeight)}function k(e){S.get(e)?.disconnect(),e.remove()}function A({root:e,containers:t},n){let r=t.get(n);if(r&&r.isConnected)return r;r&&k(r);let i=document.createElement(`div`);if(i.className=`glass-toast-container ${m[n]}`,i.dataset.toastContainer=n,i.tabIndex=-1,e.appendChild(i),t.set(n,i),typeof ResizeObserver==`function`){let e=new ResizeObserver(()=>O(i));e.observe(i),S.set(i,e)}return i}function j(e){let t=[...e.children].filter(e=>!e.dataset.dismissing);for(;t.length>=l;){let e=t.shift();x.has(e)?x.get(e).dismiss():e.remove()}}function M(e,t){if(e&&e.isConnected&&typeof e.focus==`function`&&(e.focus(),document.activeElement===e))return;let n=t.querySelector(`[data-toast-container] > .glass-toast:not([data-dismissing]) .glass-toast__close`);n&&n.focus()}function N(e,{type:n,position:r,persistent:i,duration:a,action:o}){let s=y(),c=document.createElement(`div`);c.dataset.position=r,c.className=[`glass-toast`,`glass-toast--${n}`,s?`glass-toast--faded`:`glass-toast--animated glass-toast--enter`].join(` `);let l=document.createElement(`span`);l.className=`glass-toast__icon`,l.innerHTML=t[n];let u=document.createElement(`p`);u.className=`glass-toast__message`,u.textContent=e,c.append(l,u);let d=null;o&&o.label&&(d=document.createElement(`button`),d.type=`button`,d.className=`glass-toast__action`,d.textContent=o.label,c.appendChild(d));let f=document.createElement(`button`);if(f.type=`button`,f.className=`glass-toast__close`,f.setAttribute(`aria-label`,_),f.innerHTML=t.close,c.appendChild(f),!i){let e=document.createElement(`div`);e.className=`glass-toast__bar`,e.style.width=`100%`,e.style.transition=`width ${a}ms linear`,c.appendChild(e)}return{el:c,btn:f,actionBtn:d}}function P(e,t){if(y()||typeof e.animate!=`function`)return;let n=getComputedStyle(e),r=n.getPropertyValue(`--gt-ring`).trim().replace(/\s*,\s*/g,`, `)||p[t],i=n.getPropertyValue(`--gt-shadow`).trim()||h;return e.animate([{boxShadow:`0 0 18px 6px rgba(${r}, 0.75), ${i}`,offset:0},{boxShadow:`0 0 22px 8px rgba(${r}, 0.7), ${i}`,offset:.35},{boxShadow:`0 0 56px 26px rgba(${r}, 0), ${i}`,offset:1}],{duration:a,easing:`ease-out`,fill:`none`})}function F(e,t,n){let r=e.parentElement;e.remove(),r&&r.children.length===0?(k(r),t.get(n)===r&&t.delete(n)):r&&O(r)}function I(e){if(y()){e.classList.add(`glass-toast--faded`);return}e.classList.add(`glass-toast--leaving`);let t=e.offsetHeight;e.style.height=`${t}px`,e.offsetHeight,e.classList.add(`glass-toast--enter`),e.style.height=`0px`,e.style.paddingTop=`0`,e.style.paddingBottom=`0`,e.style.borderTopWidth=`0`,e.style.borderBottomWidth=`0`,e.style.marginTop=`-${i}px`}function L(e,t={}){if(D||typeof document>`u`||!document.body)return()=>{};let{dialog:n}=t;if(n&&(!n.isConnected||!n.open))return()=>{};let{type:i=u,position:a=d,persistent:l=!1,action:f}=t;Object.hasOwn(p,i)||(i=u),Object.hasOwn(m,a)||(a=d);let h=Number.isFinite(t.duration),_=h?Math.min(t.duration,c):o[i]??s;(f&&f.label&&!h||_<=0)&&(l=!0),g&&v();let b=C(n??document.body),S=A(b,a);j(S);let{el:w,btn:T,actionBtn:k}=N(e,{type:i,position:a,persistent:l,duration:_,action:f}),L=document.activeElement,R=!S.contains(L)&&S.scrollHeight-S.clientHeight-S.scrollTop<=1;S.appendChild(w),O(S),R&&(S.scrollTop=S.scrollHeight);let z=w.querySelector(`.glass-toast__bar`),B,V,H,U,W,G=!1,K=!1,q,J,Y=()=>{clearTimeout(B),cancelAnimationFrame(H),cancelAnimationFrame(U),W?.cancel()},X=()=>{G||(G=!0,Y(),clearTimeout(V),x.delete(w),F(w,b.containers,a))},Z=()=>{G||w.dataset.dismissing||(w.isConnected?(w.dataset.dismissing=`true`,Y(),I(w),V=setTimeout(()=>{let e=w.contains(document.activeElement);X(),e&&M(L,b.root)},r)):X())};x.set(w,{dismiss:Z,remove:X,invoker:L}),E(b,w,i,e);let Q=y()?`glass-toast--faded`:`glass-toast--enter`;if(H=requestAnimationFrame(()=>{H=requestAnimationFrame(()=>{w.isConnected?(w.classList.remove(Q),W=P(w,i)):X()})}),T.addEventListener(`click`,Z),w.addEventListener(`keydown`,e=>{e.key===`Escape`&&(e.stopPropagation(),Z())}),!l){let e=_,t=Date.now();B=setTimeout(Z,e);let n=!1,r=!1,i=!1,a=()=>{z.style.transition=`width ${e}ms linear`,z.style.width=`0%`};U=requestAnimationFrame(()=>{U=requestAnimationFrame(a)}),q=()=>{if(n||G||w.dataset.dismissing)return;n=!0,clearTimeout(B),cancelAnimationFrame(U),e-=Date.now()-t;let r=z.getBoundingClientRect().width;z.style.transition=`none`,z.style.width=`${r}px`};let o=()=>{!n||G||w.dataset.dismissing||(n=!1,e<=0?Z():(t=Date.now(),B=setTimeout(Z,e),U=requestAnimationFrame(a)))};J=()=>{r||i||K||o()},w.addEventListener(`mouseenter`,()=>{r=!0,q()}),w.addEventListener(`mouseleave`,()=>{r=!1,J()}),w.addEventListener(`focusin`,()=>{i=!0,q()}),w.addEventListener(`focusout`,e=>{w.contains(e.relatedTarget)||(i=!1,J())})}if(k){let e=e=>{console.error(`glass-toast: action failed`,e),K=!1,G||w.dataset.dismissing||(k.removeAttribute(`aria-disabled`),J?.())};k.addEventListener(`click`,()=>{if(!(G||w.dataset.dismissing||K)){K=!0,k.setAttribute(`aria-disabled`,`true`),q?.();try{let t=f.onClick?.();typeof t?.then==`function`?Promise.resolve(t).then(Z,e):Z()}catch(t){e(t)}}})}return Z}function R({announcers:e,containers:t}){w(e);let n;for(let e of t.values()){for(let t of[...e.children]){let e=x.get(t);t.contains(document.activeElement)&&(n=e),e?.remove()}k(e)}return t.clear(),n}function z(e){R(e);for(let t of Object.values(e.announcers??{}))t.el.remove();e.onClose&&e.root.removeEventListener(`close`,e.onClose),b.delete(e.root)}function B({suppress:e=!1}={}){e&&(D=!0);let t;for(let e of b.values()){let n=R(e);n&&(t=()=>M(n.invoker,e.root))}t?.()}function V(){D=!1}function H(e,t){return L(e,{...t,type:`success`})}function U(e,t){return L(e,{...t,type:`error`})}function W(e,t){return L(e,{...t,type:`warning`})}function G(e,t){return L(e,{...t,type:`info`})}var K={show:L,success:H,error:U,warning:W,info:G,dismissAll:B,resume:V};function q({global:e=!0,injectStyles:t=!0,target:n,closeLabel:r}={}){if(g=t,_=typeof r==`string`&&r.trim()?r:f,t&&v(),typeof document<`u`&&document.body&&T(C(document.body)),e){let e=n??(typeof window<`u`?window:void 0);e&&(e.toast=K)}return K}e.dismissAll=B,e.ensureStyles=v,e.error=U,e.info=G,e.register=q,e.resume=V,e.show=L,e.success=H,e.warning=W});
package/dist/icons.d.cts ADDED
@@ -0,0 +1,7 @@
1
+ export namespace ICONS {
2
+ let success: string;
3
+ let error: string;
4
+ let warning: string;
5
+ let info: string;
6
+ let close: string;
7
+ }
package/dist/index.d.cts ADDED
@@ -0,0 +1 @@
1
+ export { show, success, error, warning, info, dismissAll, resume, register, ensureStyles } from "./toast.cjs";
package/dist/toast-GM0D-R2d.js ADDED
@@ -0,0 +1,312 @@
1
+ // src/icons.js
2
+ var e = {
3
+ success: "<svg viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\"><path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z\" clip-rule=\"evenodd\"/></svg>",
4
+ error: "<svg viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\"><path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z\" clip-rule=\"evenodd\"/></svg>",
5
+ warning: "<svg viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\"><path fill-rule=\"evenodd\" d=\"M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.168 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495zM10 6a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 0110 6zm0 9a1 1 0 100-2 1 1 0 000 2z\" clip-rule=\"evenodd\"/></svg>",
6
+ info: "<svg viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\"><path fill-rule=\"evenodd\" d=\"M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a.75.75 0 000 1.5h.253a.25.25 0 01.244.304l-.459 2.066A1.75 1.75 0 0010.747 15H11a.75.75 0 000-1.5h-.253a.25.25 0 01-.244-.304l.459-2.066A1.75 1.75 0 009.253 9H9z\" clip-rule=\"evenodd\"/></svg>",
7
+ close: "<svg viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\"><path d=\"M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z\"/></svg>"
8
+ }, t = ".glass-toast-container,.glass-toast,.glass-toast *{box-sizing:border-box}.glass-toast-announcer{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.glass-toast-container{width:min(26rem,100%);max-height:100dvh;padding:1rem;padding-top:max(1rem, env(safe-area-inset-top));padding-right:max(1rem, env(safe-area-inset-right));padding-bottom:max(1rem, env(safe-area-inset-bottom));padding-left:max(1rem, env(safe-area-inset-left));scrollbar-width:none;z-index:2147483647;pointer-events:none;flex-direction:column;gap:.75rem;display:flex;position:fixed;overflow:auto}.glass-toast-container[data-scrollable]{pointer-events:auto}.glass-toast-container--top-right{align-items:flex-end;top:0;right:0}.glass-toast-container--bottom-right{align-items:flex-end;bottom:0;right:0}.glass-toast-container--bottom-center{align-items:center;bottom:0;left:50%;transform:translate(-50%)}.glass-toast{--gt-bg:#fffc;--gt-bg-opaque:#fffffff5;--gt-border:#e5e7eb66;--gt-text:#4a5565;--gt-blur:24px;--gt-radius:1rem;--gt-shadow:0 4px 24px -4px #00000014, 0 1px 2px #0000000a;--gt-close-bg:#f9fafb;--gt-close-border:#e5e7eb;--gt-close-text:#667085;--gt-close-bg-hover:#f3f4f6;--gt-close-border-hover:#d1d5dc;--gt-close-text-hover:#4a5565;--gt-focus-ring:#2563eb;pointer-events:auto;background-color:var(--gt-bg);width:24rem;max-width:calc(100vw - 2rem);-webkit-backdrop-filter:blur(var(--gt-blur));backdrop-filter:blur(var(--gt-blur));border:1px solid var(--gt-border);border-radius:var(--gt-radius);box-shadow:var(--gt-shadow);grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.75rem;padding:.875rem 1rem;display:grid;position:relative;overflow:hidden}.glass-toast-container>.glass-toast{flex:none;max-width:100%}@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){.glass-toast{background-color:var(--gt-bg-opaque)}}.glass-toast--success{--gt-pill-bg:#d0fae5;--gt-icon:#047857;--gt-bar:#00bb7f;--gt-ring:16, 185, 129}.glass-toast--error{--gt-pill-bg:#ffe2e2;--gt-icon:#dc2626;--gt-action-text:#b91c1c;--gt-bar:#ff6568;--gt-ring:239, 68, 68}.glass-toast--warning{--gt-pill-bg:#fef3c6;--gt-icon:#b45309;--gt-bar:#fcbb00;--gt-ring:245, 158, 11}.glass-toast--info{--gt-pill-bg:#e2eaf1;--gt-icon:#3a5b7a;--gt-bar:#6f92ad;--gt-ring:76, 112, 144}.glass-toast--animated{transition:all .28s cubic-bezier(0,0,.2,1)}.glass-toast--leaving{transition-timing-function:cubic-bezier(.4,0,1,1)}.glass-toast--enter,.glass-toast--faded{opacity:0}.glass-toast--enter[data-position=top-right],.glass-toast--enter[data-position=bottom-right]{transform:translate(2rem)}.glass-toast--enter[data-position=bottom-center]{transform:translateY(2rem)}.glass-toast__icon{background-color:var(--gt-pill-bg);width:1.75rem;height:1.75rem;color:var(--gt-icon);border-radius:.5rem;flex-shrink:0;justify-content:center;align-items:center;display:flex}.glass-toast__icon svg{flex-shrink:0;width:18px;height:18px;display:block}.glass-toast__message{min-width:0;color:var(--gt-text);overflow-wrap:anywhere;-webkit-line-clamp:5;line-clamp:5;-webkit-box-orient:vertical;margin:0;font-size:.9375rem;line-height:1.625;display:-webkit-box;overflow:hidden}.glass-toast__action{border:1px solid var(--gt-action-border,var(--gt-border));background-color:var(--gt-action-bg,transparent);min-width:0;max-width:100%;min-height:2rem;color:var(--gt-action-text,var(--gt-icon));font:inherit;overflow-wrap:anywhere;cursor:pointer;appearance:none;border-radius:.5rem;grid-area:2/2;place-self:center start;padding:.3125rem .75rem;font-size:.8125rem;font-weight:600;line-height:1.25;transition:background-color .15s cubic-bezier(.4,0,.2,1),border-color .15s cubic-bezier(.4,0,.2,1)}.glass-toast__action:hover{background-color:var(--gt-action-bg-hover,var(--gt-pill-bg))}.glass-toast__action[aria-disabled=true]{cursor:progress}.glass-toast__action:focus-visible{outline:2px solid var(--gt-focus-ring);outline-offset:2px}.glass-toast__close{border:1px solid var(--gt-close-border);background-color:var(--gt-close-bg);width:2rem;height:2rem;color:var(--gt-close-text);font:inherit;cursor:pointer;appearance:none;border-radius:9999px;grid-area:1/-2;justify-content:center;align-self:center;align-items:center;padding:0;transition:all .15s cubic-bezier(.4,0,.2,1);display:flex}.glass-toast__close:hover{background-color:var(--gt-close-bg-hover);border-color:var(--gt-close-border-hover);color:var(--gt-close-text-hover)}.glass-toast__close:focus-visible{outline:2px solid var(--gt-focus-ring);outline-offset:2px}.glass-toast__close svg{width:.875rem;height:.875rem;display:block}.glass-toast__bar{background-color:var(--gt-bar);opacity:.4;border-radius:9999px;height:2px;position:absolute;bottom:0;left:0}@media (width>=768px){.glass-toast__message{font-size:14px}.glass-toast:has(.glass-toast__action){grid-template-columns:auto minmax(0,1fr) minmax(0,35%) auto}.glass-toast:has(.glass-toast__action) .glass-toast__action{grid-area:1/3}}@media (prefers-color-scheme:dark){:where(:root:not([data-theme=light]):not(.light)) .glass-toast{--gt-bg:#1c1c1eb8;--gt-bg-opaque:#1c1c1eeb;--gt-border:#ffffff1a;--gt-text:#e5e7eb;--gt-close-bg:#ffffff0f;--gt-close-border:#ffffff1f;--gt-close-text:#cbd5e1;--gt-close-bg-hover:#ffffff1f;--gt-close-border-hover:#ffffff38;--gt-close-text-hover:#f1f5f9;--gt-focus-ring:#93c5fd;--gt-action-text:var(--gt-text);--gt-action-bg-hover:var(--gt-close-bg-hover)}}:where([data-theme=dark],.dark) .glass-toast{--gt-bg:#1c1c1eb8;--gt-bg-opaque:#1c1c1eeb;--gt-border:#ffffff1a;--gt-text:#e5e7eb;--gt-close-bg:#ffffff0f;--gt-close-border:#ffffff1f;--gt-close-text:#cbd5e1;--gt-close-bg-hover:#ffffff1f;--gt-close-border-hover:#ffffff38;--gt-close-text-hover:#f1f5f9;--gt-focus-ring:#93c5fd;--gt-action-text:var(--gt-text);--gt-action-bg-hover:var(--gt-close-bg-hover)}", n = 280, r = 12, i = 1400, a = { error: 1e4 }, o = 5500, s = 2147483647, c = 4, l = "info", u = "top-right", d = "Close", f = {
9
+ success: "16, 185, 129",
10
+ error: "239, 68, 68",
11
+ warning: "245, 158, 11",
12
+ info: "76, 112, 144"
13
+ }, p = {
14
+ "top-right": "glass-toast-container--top-right",
15
+ "bottom-right": "glass-toast-container--bottom-right",
16
+ "bottom-center": "glass-toast-container--bottom-center"
17
+ }, m = "0 4px 24px -4px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04)", h = !0, g = d;
18
+ function _() {
19
+ if (typeof document > "u" || document.querySelector("style[data-glass-toast], link[data-glass-toast]")) return;
20
+ let e = document.createElement("style");
21
+ e.setAttribute("data-glass-toast", ""), e.textContent = t, document.head.prepend(e);
22
+ }
23
+ var v = () => window.matchMedia?.("(prefers-reduced-motion: reduce)").matches, y = /* @__PURE__ */ new Map(), b = /* @__PURE__ */ new WeakMap(), x = /* @__PURE__ */ new WeakMap();
24
+ function S(e) {
25
+ for (let [e, t] of y) e.isConnected || R(t);
26
+ let t = y.get(e);
27
+ return t || (t = {
28
+ root: e,
29
+ containers: /* @__PURE__ */ new Map(),
30
+ announcers: void 0
31
+ }, e.localName === "dialog" && (t.onClose = () => {
32
+ e.open || R(t);
33
+ }, e.addEventListener("close", t.onClose)), y.set(e, t)), t;
34
+ }
35
+ function C(e) {
36
+ for (let t of Object.values(e ?? {})) cancelAnimationFrame(t.frame), t.frame = void 0, t.pending.length = 0, t.el.textContent = "";
37
+ }
38
+ function w(e) {
39
+ let { announcers: t, root: n } = e;
40
+ if (!(t?.status.el.isConnected && t.alert.el.isConnected)) {
41
+ C(t);
42
+ for (let e of Object.values(t ?? {})) e.el.remove();
43
+ e.announcers = Object.fromEntries(["status", "alert"].map((e) => {
44
+ let t = document.createElement("div");
45
+ return t.className = "glass-toast-announcer", t.setAttribute("role", e), t.setAttribute("aria-atomic", "true"), n.appendChild(t), [e, {
46
+ el: t,
47
+ pending: [],
48
+ frame: void 0
49
+ }];
50
+ }));
51
+ }
52
+ }
53
+ function T(e, t, n, r) {
54
+ w(e);
55
+ let i = e.announcers[n === "error" ? "alert" : "status"];
56
+ i.pending.push({
57
+ toast: t,
58
+ message: r
59
+ }), i.frame === void 0 && (i.el.textContent = "", i.frame = requestAnimationFrame(() => {
60
+ i.frame = requestAnimationFrame(() => {
61
+ i.frame = void 0;
62
+ let e = i.pending.splice(0);
63
+ i.el.isConnected && (i.el.textContent = e.filter(({ toast: e }) => e.isConnected && !e.dataset.dismissing).map(({ message: e }) => e).join("\n"));
64
+ });
65
+ }));
66
+ }
67
+ var E = !1;
68
+ function D(e) {
69
+ e.toggleAttribute("data-scrollable", e.scrollHeight > e.clientHeight);
70
+ }
71
+ function O(e) {
72
+ x.get(e)?.disconnect(), e.remove();
73
+ }
74
+ function k({ root: e, containers: t }, n) {
75
+ let r = t.get(n);
76
+ if (r && r.isConnected) return r;
77
+ r && O(r);
78
+ let i = document.createElement("div");
79
+ if (i.className = `glass-toast-container ${p[n]}`, i.dataset.toastContainer = n, i.tabIndex = -1, e.appendChild(i), t.set(n, i), typeof ResizeObserver == "function") {
80
+ let e = new ResizeObserver(() => D(i));
81
+ e.observe(i), x.set(i, e);
82
+ }
83
+ return i;
84
+ }
85
+ function A(e) {
86
+ let t = [...e.children].filter((e) => !e.dataset.dismissing);
87
+ for (; t.length >= c;) {
88
+ let e = t.shift();
89
+ b.has(e) ? b.get(e).dismiss() : e.remove();
90
+ }
91
+ }
92
+ function j(e, t) {
93
+ if (e && e.isConnected && typeof e.focus == "function" && (e.focus(), document.activeElement === e)) return;
94
+ let n = t.querySelector("[data-toast-container] > .glass-toast:not([data-dismissing]) .glass-toast__close");
95
+ n && n.focus();
96
+ }
97
+ function M(t, { type: n, position: r, persistent: i, duration: a, action: o }) {
98
+ let s = v(), c = document.createElement("div");
99
+ c.dataset.position = r, c.className = [
100
+ "glass-toast",
101
+ `glass-toast--${n}`,
102
+ s ? "glass-toast--faded" : "glass-toast--animated glass-toast--enter"
103
+ ].join(" ");
104
+ let l = document.createElement("span");
105
+ l.className = "glass-toast__icon", l.innerHTML = e[n];
106
+ let u = document.createElement("p");
107
+ u.className = "glass-toast__message", u.textContent = t, c.append(l, u);
108
+ let d = null;
109
+ o && o.label && (d = document.createElement("button"), d.type = "button", d.className = "glass-toast__action", d.textContent = o.label, c.appendChild(d));
110
+ let f = document.createElement("button");
111
+ if (f.type = "button", f.className = "glass-toast__close", f.setAttribute("aria-label", g), f.innerHTML = e.close, c.appendChild(f), !i) {
112
+ let e = document.createElement("div");
113
+ e.className = "glass-toast__bar", e.style.width = "100%", e.style.transition = `width ${a}ms linear`, c.appendChild(e);
114
+ }
115
+ return {
116
+ el: c,
117
+ btn: f,
118
+ actionBtn: d
119
+ };
120
+ }
121
+ function N(e, t) {
122
+ if (v() || typeof e.animate != "function") return;
123
+ let n = getComputedStyle(e), r = n.getPropertyValue("--gt-ring").trim().replace(/\s*,\s*/g, ", ") || f[t], a = n.getPropertyValue("--gt-shadow").trim() || m;
124
+ return e.animate([
125
+ {
126
+ boxShadow: `0 0 18px 6px rgba(${r}, 0.75), ${a}`,
127
+ offset: 0
128
+ },
129
+ {
130
+ boxShadow: `0 0 22px 8px rgba(${r}, 0.7), ${a}`,
131
+ offset: .35
132
+ },
133
+ {
134
+ boxShadow: `0 0 56px 26px rgba(${r}, 0), ${a}`,
135
+ offset: 1
136
+ }
137
+ ], {
138
+ duration: i,
139
+ easing: "ease-out",
140
+ fill: "none"
141
+ });
142
+ }
143
+ function P(e, t, n) {
144
+ let r = e.parentElement;
145
+ e.remove(), r && r.children.length === 0 ? (O(r), t.get(n) === r && t.delete(n)) : r && D(r);
146
+ }
147
+ function F(e) {
148
+ if (v()) {
149
+ e.classList.add("glass-toast--faded");
150
+ return;
151
+ }
152
+ e.classList.add("glass-toast--leaving");
153
+ let t = e.offsetHeight;
154
+ e.style.height = `${t}px`, e.offsetHeight, e.classList.add("glass-toast--enter"), e.style.height = "0px", e.style.paddingTop = "0", e.style.paddingBottom = "0", e.style.borderTopWidth = "0", e.style.borderBottomWidth = "0", e.style.marginTop = `-${r}px`;
155
+ }
156
+ function I(e, t = {}) {
157
+ if (E || typeof document > "u" || !document.body) return () => {};
158
+ let { dialog: r } = t;
159
+ if (r && (!r.isConnected || !r.open)) return () => {};
160
+ let { type: i = l, position: c = u, persistent: d = !1, action: m } = t;
161
+ Object.hasOwn(f, i) || (i = l), Object.hasOwn(p, c) || (c = u);
162
+ let g = Number.isFinite(t.duration), y = g ? Math.min(t.duration, s) : a[i] ?? o;
163
+ (m && m.label && !g || y <= 0) && (d = !0), h && _();
164
+ let x = S(r ?? document.body), C = k(x, c);
165
+ A(C);
166
+ let { el: w, btn: O, actionBtn: I } = M(e, {
167
+ type: i,
168
+ position: c,
169
+ persistent: d,
170
+ duration: y,
171
+ action: m
172
+ }), L = document.activeElement, R = !C.contains(L) && C.scrollHeight - C.clientHeight - C.scrollTop <= 1;
173
+ C.appendChild(w), D(C), R && (C.scrollTop = C.scrollHeight);
174
+ let z = w.querySelector(".glass-toast__bar"), B, V, H, U, W, G = !1, K = !1, q, J, Y = () => {
175
+ clearTimeout(B), cancelAnimationFrame(H), cancelAnimationFrame(U), W?.cancel();
176
+ }, X = () => {
177
+ G || (G = !0, Y(), clearTimeout(V), b.delete(w), P(w, x.containers, c));
178
+ }, Z = () => {
179
+ G || w.dataset.dismissing || (w.isConnected ? (w.dataset.dismissing = "true", Y(), F(w), V = setTimeout(() => {
180
+ let e = w.contains(document.activeElement);
181
+ X(), e && j(L, x.root);
182
+ }, n)) : X());
183
+ };
184
+ b.set(w, {
185
+ dismiss: Z,
186
+ remove: X,
187
+ invoker: L
188
+ }), T(x, w, i, e);
189
+ let Q = v() ? "glass-toast--faded" : "glass-toast--enter";
190
+ if (H = requestAnimationFrame(() => {
191
+ H = requestAnimationFrame(() => {
192
+ w.isConnected ? (w.classList.remove(Q), W = N(w, i)) : X();
193
+ });
194
+ }), O.addEventListener("click", Z), w.addEventListener("keydown", (e) => {
195
+ e.key === "Escape" && (e.stopPropagation(), Z());
196
+ }), !d) {
197
+ let e = y, t = Date.now();
198
+ B = setTimeout(Z, e);
199
+ let n = !1, r = !1, i = !1, a = () => {
200
+ z.style.transition = `width ${e}ms linear`, z.style.width = "0%";
201
+ };
202
+ U = requestAnimationFrame(() => {
203
+ U = requestAnimationFrame(a);
204
+ }), q = () => {
205
+ if (n || G || w.dataset.dismissing) return;
206
+ n = !0, clearTimeout(B), cancelAnimationFrame(U), e -= Date.now() - t;
207
+ let r = z.getBoundingClientRect().width;
208
+ z.style.transition = "none", z.style.width = `${r}px`;
209
+ };
210
+ let o = () => {
211
+ !n || G || w.dataset.dismissing || (n = !1, e <= 0 ? Z() : (t = Date.now(), B = setTimeout(Z, e), U = requestAnimationFrame(a)));
212
+ };
213
+ J = () => {
214
+ r || i || K || o();
215
+ }, w.addEventListener("mouseenter", () => {
216
+ r = !0, q();
217
+ }), w.addEventListener("mouseleave", () => {
218
+ r = !1, J();
219
+ }), w.addEventListener("focusin", () => {
220
+ i = !0, q();
221
+ }), w.addEventListener("focusout", (e) => {
222
+ w.contains(e.relatedTarget) || (i = !1, J());
223
+ });
224
+ }
225
+ if (I) {
226
+ let e = (e) => {
227
+ console.error("glass-toast: action failed", e), K = !1, G || w.dataset.dismissing || (I.removeAttribute("aria-disabled"), J?.());
228
+ };
229
+ I.addEventListener("click", () => {
230
+ if (!(G || w.dataset.dismissing || K)) {
231
+ K = !0, I.setAttribute("aria-disabled", "true"), q?.();
232
+ try {
233
+ let t = m.onClick?.();
234
+ typeof t?.then == "function" ? Promise.resolve(t).then(Z, e) : Z();
235
+ } catch (t) {
236
+ e(t);
237
+ }
238
+ }
239
+ });
240
+ }
241
+ return Z;
242
+ }
243
+ function L({ announcers: e, containers: t }) {
244
+ C(e);
245
+ let n;
246
+ for (let e of t.values()) {
247
+ for (let t of [...e.children]) {
248
+ let e = b.get(t);
249
+ t.contains(document.activeElement) && (n = e), e?.remove();
250
+ }
251
+ O(e);
252
+ }
253
+ return t.clear(), n;
254
+ }
255
+ function R(e) {
256
+ L(e);
257
+ for (let t of Object.values(e.announcers ?? {})) t.el.remove();
258
+ e.onClose && e.root.removeEventListener("close", e.onClose), y.delete(e.root);
259
+ }
260
+ function z({ suppress: e = !1 } = {}) {
261
+ e && (E = !0);
262
+ let t;
263
+ for (let e of y.values()) {
264
+ let n = L(e);
265
+ n && (t = () => j(n.invoker, e.root));
266
+ }
267
+ t?.();
268
+ }
269
+ function B() {
270
+ E = !1;
271
+ }
272
+ function V(e, t) {
273
+ return I(e, {
274
+ ...t,
275
+ type: "success"
276
+ });
277
+ }
278
+ function H(e, t) {
279
+ return I(e, {
280
+ ...t,
281
+ type: "error"
282
+ });
283
+ }
284
+ function U(e, t) {
285
+ return I(e, {
286
+ ...t,
287
+ type: "warning"
288
+ });
289
+ }
290
+ function W(e, t) {
291
+ return I(e, {
292
+ ...t,
293
+ type: "info"
294
+ });
295
+ }
296
+ var G = {
297
+ show: I,
298
+ success: V,
299
+ error: H,
300
+ warning: U,
301
+ info: W,
302
+ dismissAll: z,
303
+ resume: B
304
+ };
305
+ function K({ global: e = !0, injectStyles: t = !0, target: n, closeLabel: r } = {}) {
306
+ if (h = t, g = typeof r == "string" && r.trim() ? r : d, t && _(), typeof document < "u" && document.body && w(S(document.body)), e) {
307
+ let e = n ?? (typeof window < "u" ? window : void 0);
308
+ e && (e.toast = G);
309
+ }
310
+ return G;
311
+ }
312
+ export { K as a, V as c, W as i, U as l, _ as n, B as o, H as r, I as s, z as t };
package/dist/toast.d.cts ADDED
@@ -0,0 +1,97 @@
1
+ /**
2
+ * 確保套件樣式已載入（冪等；SSR 無 document 時 no-op）。
3
+ * 顯式 import style.css 的專案可在自己的 <link> / <style> 加 data-glass-toast
4
+ * 屬性讓本函式跳過注入，或呼叫 register({ injectStyles: false }) 全面停用。
5
+ */
6
+ export function ensureStyles(): void;
7
+ /**
8
+ * 顯示一則 toast。
9
+ * @param {string} message 訊息文字
10
+ * @param {ToastOptions} [options]
11
+ * @returns {() => void} 手動 dismiss 函式
12
+ */
13
+ export function show(message: string, options?: ToastOptions): () => void;
14
+ /**
15
+ * 清空所有 toast。預設只清空、不影響後續 show()。
16
+ * 若要鎖住後續 show()（供 session 過期硬導航前，避免 redirect 與 unload 之間
17
+ * 閃現新 toast）傳 { suppress: true }；頁面重載後自動解鎖，SPA 不重載時呼叫 resume()。
18
+ * @param {{ suppress?: boolean }} [options]
19
+ */
20
+ export function dismissAll({ suppress }?: {
21
+ suppress?: boolean;
22
+ }): void;
23
+ /** 解除 dismissAll() 造成的 show() 靜音鎖 */
24
+ export function resume(): void;
25
+ /** @param {string} message @param {Omit<ToastOptions, 'type'>} [options] */
26
+ export function success(message: string, options?: Omit<ToastOptions, "type">): () => void;
27
+ /** @param {string} message @param {Omit<ToastOptions, 'type'>} [options] */
28
+ export function error(message: string, options?: Omit<ToastOptions, "type">): () => void;
29
+ /** @param {string} message @param {Omit<ToastOptions, 'type'>} [options] */
30
+ export function warning(message: string, options?: Omit<ToastOptions, "type">): () => void;
31
+ /** @param {string} message @param {Omit<ToastOptions, 'type'>} [options] */
32
+ export function info(message: string, options?: Omit<ToastOptions, "type">): () => void;
33
+ /**
34
+ * 掛載全域 toast + 注入樣式。import '@dennykuo/glass-toast/auto' 等價
35
+ * register() 預設值；只 import 具名 API 的專案不需要呼叫。
36
+ * @param {Object} [options]
37
+ * @param {boolean} [options.global=true] 是否掛 target.toast
38
+ * @param {boolean} [options.injectStyles=true] false 時全面停用自動樣式注入（CSP / 顯式 import style.css 場景）
39
+ * @param {Object} [options.target=window] 全域掛載目標
40
+ * @param {string} [options.closeLabel='Close'] 關閉按鈕的 aria-label，套用到之後顯示的 toast；
41
+ * 空字串或非字串時退回預設，避免產生沒有名稱的按鈕
42
+ * @returns {ToastApi}
43
+ */
44
+ export function register({ global, injectStyles, target, closeLabel: label }?: {
45
+ global?: boolean;
46
+ injectStyles?: boolean;
47
+ target?: any;
48
+ closeLabel?: string;
49
+ }): ToastApi;
50
+ export type ToastType = "success" | "error" | "warning" | "info";
51
+ export type ToastPosition = "top-right" | "bottom-right" | "bottom-center";
52
+ export type ToastAction = {
53
+ /**
54
+ * 按鈕文字
55
+ */
56
+ label: string;
57
+ /**
58
+ * 成功後關閉；可回傳 Promise，失敗時保留通知及重試按鈕
59
+ */
60
+ onClick: () => unknown;
61
+ };
62
+ export type ToastOptions = {
63
+ /**
64
+ * 變體
65
+ */
66
+ type?: ToastType;
67
+ /**
68
+ * 顯示位置
69
+ */
70
+ position?: ToastPosition;
71
+ /**
72
+ * true 時不自動消失、無進度條
73
+ */
74
+ persistent?: boolean;
75
+ /**
76
+ * 自動消失毫秒數（未指定時 error 為 10000、其餘 5500）；
77
+ * 非有限值視為未指定；有限值 ≤ 0 視為 persistent，正值上限為 2147483647
78
+ */
79
+ duration?: number;
80
+ /**
81
+ * 內嵌操作按鈕（如「重試」）；未顯式給 duration 時預設 persistent
82
+ */
83
+ action?: ToastAction;
84
+ /**
85
+ * 掛載至已開啟的原生對話框，關閉時清除該對話框的通知
86
+ */
87
+ dialog?: HTMLDialogElement;
88
+ };
89
+ export type ToastApi = {
90
+ show: typeof show;
91
+ success: typeof success;
92
+ error: typeof error;
93
+ warning: typeof warning;
94
+ info: typeof info;
95
+ dismissAll: typeof dismissAll;
96
+ resume: typeof resume;
97
+ };
package/dist/toast.d.ts CHANGED
@@ -37,12 +37,15 @@ export function info(message: string, options?: Omit<ToastOptions, "type">): ()
37
37
  * @param {boolean} [options.global=true] 是否掛 target.toast
38
38
  * @param {boolean} [options.injectStyles=true] false 時全面停用自動樣式注入（CSP / 顯式 import style.css 場景）
39
39
  * @param {Object} [options.target=window] 全域掛載目標
40
+ * @param {string} [options.closeLabel='Close'] 關閉按鈕的 aria-label，套用到之後顯示的 toast；
41
+ * 空字串或非字串時退回預設，避免產生沒有名稱的按鈕
40
42
  * @returns {ToastApi}
41
43
  */
42
- export function register({ global, injectStyles, target }?: {
44
+ export function register({ global, injectStyles, target, closeLabel: label }?: {
43
45
  global?: boolean;
44
46
  injectStyles?: boolean;
45
47
  target?: any;
48
+ closeLabel?: string;
46
49
  }): ToastApi;
47
50
  export type ToastType = "success" | "error" | "warning" | "info";
48
51
  export type ToastPosition = "top-right" | "bottom-right" | "bottom-center";
@@ -52,9 +55,9 @@ export type ToastAction = {
52
55
  */
53
56
  label: string;
54
57
  /**
55
- * 點擊後執行（執行完自動 dismiss）
58
+ * 成功後關閉；可回傳 Promise，失敗時保留通知及重試按鈕
56
59
  */
57
- onClick: () => void;
60
+ onClick: () => unknown;
58
61
  };
59
62
  export type ToastOptions = {
60
63
  /**
@@ -71,13 +74,17 @@ export type ToastOptions = {
71
74
  persistent?: boolean;
72
75
  /**
73
76
  * 自動消失毫秒數（未指定時 error 為 10000、其餘 5500）；
74
- * ≤ 0 視為 persistent
77
+ * 非有限值視為未指定；有限值 ≤ 0 視為 persistent，正值上限為 2147483647
75
78
  */
76
79
  duration?: number;
77
80
  /**
78
81
  * 內嵌操作按鈕（如「重試」）；未顯式給 duration 時預設 persistent
79
82
  */
80
83
  action?: ToastAction;
84
+ /**
85
+ * 掛載至已開啟的原生對話框，關閉時清除該對話框的通知
86
+ */
87
+ dialog?: HTMLDialogElement;
81
88
  };
82
89
  export type ToastApi = {
83
90
  show: typeof show;