tiny-essentials/changelog/1/11/0.md

Collection of small, essential scripts designed to be used across various projects. These simple utilities are crafted for speed, ease of use, and versatility.

# 🎉 Tiny-Essentials v1.11.0 — The Notification Update! 🚨🔔

Tiny hi! We’re back with a super tiny fresh new version of **Tiny-Essentials**. :3

### 🌟 What's New in v1.11.0?

Say hello to **two new notification systems** that just landed in this release:

## 🛎️ TinyNotifyCenter

- **Dynamic notifications** with optional **titles**, **avatars**, and rich **HTML/text** content  
- Individual **close buttons** for each notification, plus a **clear all** button with a sleek broom icon 🧹  
- Mark notifications as **read/unread** with visual distinction  
- Clickable notifications with custom `onClick` handlers  
- Overlay with dimmed background and intuitive outside-click to close the notification list  
- Smooth animations on notification removal, preventing UI freezes  
- Live badge count that recalculates accurately from the DOM  
- Easy-to-use static template injection for instant integration

## 🎨 Design

The UI is minimal but expressive, placing the notification bell at the top-right corner, with a badge showing unread counts. Notifications appear in a clean list, with avatars for quick identification.

## ⚙️ Usage

Simply call `.add()` with your message or structured notification object, and watch your notifications come to life!

---

## 📣 TinyToast - Lightweight Notification System

**TinyToast** is a flexible and minimalist toast/notification system built with JavaScript.
Easily display beautiful, customizable, auto-dismissable toasts with optional avatars and click events!

## 💬 Showing Notifications

### Basic Message

```js
toaster.show('Hello world!');
```

### With Options

```js
toaster.show({
  message: 'File uploaded successfully!',
  title: 'Success',
  onClick: (event, close) => {
    alert('Notification clicked!');
    close(); // Close the notification manually
  },
  html: false,
  avatar: 'https://example.com/avatar.png'
});
```
---

## 📚 More Documentation

For a complete reference of all options, internals, and usage patterns, check out the detailed documentation file:

> 📄 **docs/v1/libs/TinyNotifyCenter.md**
> 📄 **docs/v1/libs/TinyToastNotify.md**

**Full Changelog**: https://github.com/JasminDreasond/Tiny-Essentials/compare/1.10.2...1.11.0