@manufosela/slide-notification 2.0.0 → 2.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 manufosela
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -130,6 +130,14 @@ showSlideNotification({
 | `--slide-notification-z-index`    | `10000`                        | Z-index            |
 | `--slide-notification-min-height` | `80px`                         | Minimum height     |
 
+## Accessibility
+
+- Uses `role="alert"` with `aria-live="assertive"` for error/warning types
+- Uses `role="status"` with `aria-live="polite"` for info/success types
+- Icons are hidden from screen readers (`aria-hidden="true"`)
+- Click-to-close for persistent notifications is accessible
+- Respects `prefers-reduced-motion` by disabling slide animation
+
 ## slide-notification vs toast-notification
 
 This library includes two notification components. Choose based on your needs:

package/package.json

@@ -1,18 +1,26 @@
 {
   "name": "@manufosela/slide-notification",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "description": "Slide-in notification web component from the right edge",
-  "main": "src/slide-notification.js",
-  "module": "src/slide-notification.js",
+  "license": "MIT",
+  "author": "manufosela",
   "type": "module",
+  "main": "./src/slide-notification.js",
+  "module": "./src/slide-notification.js",
+  "types": "./src/slide-notification.d.ts",
+  "exports": {
+    ".": {
+      "types": "./src/slide-notification.d.ts",
+      "import": "./src/slide-notification.js"
+    }
+  },
   "files": [
     "src"
   ],
-  "scripts": {
-    "start": "web-dev-server --node-resolve --open demo/ --watch",
-    "test": "web-test-runner",
-    "test:watch": "web-test-runner --watch",
-    "test:coverage": "web-test-runner --coverage"
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/manufosela/ui-components",
+    "directory": "packages/slide-notification"
   },
   "keywords": [
     "web-components",
@@ -22,13 +30,6 @@
     "toast",
     "alert"
   ],
-  "author": "manufosela",
-  "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/manufosela/ui-components",
-    "directory": "packages/slide-notification"
-  },
   "homepage": "https://github.com/manufosela/ui-components/tree/main/packages/slide-notification#readme",
   "bugs": {
     "url": "https://github.com/manufosela/ui-components/issues"
@@ -36,9 +37,12 @@
   "dependencies": {
     "lit": "^3.2.1"
   },
-  "devDependencies": {
-    "@open-wc/testing": "^4.0.0",
-    "@web/dev-server": "^0.4.6",
-    "@web/test-runner": "^0.19.0"
+  "customElements": "custom-elements.json",
+  "scripts": {
+    "start": "web-dev-server --node-resolve --open demo/ --watch",
+    "test": "web-test-runner",
+    "test:watch": "web-test-runner --watch",
+    "test:coverage": "web-test-runner --coverage",
+    "build:types": "tsc --declaration --declarationMap --emitDeclarationOnly --allowJs --checkJs --outDir ./src ./src/slide-notification.js"
   }
-}
+}

package/src/slide-notification.js

@@ -2,22 +2,16 @@ import { LitElement, html } from 'lit';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 import { slideNotificationStyles } from './slide-notification.styles.js';
 
-const DEFAULT_COLORS = {
-  error: '#dc3545',
-  success: '#22c55e',
-  warning: '#ffc107',
-  info: '#17a2b8'
-};
-
 const ICONS = {
   error: '❌',
   success: '✅',
   warning: '⚠️',
-  info: 'ℹ️'
+  info: 'ℹ️',
 };
 
 /**
  * A slide-in notification component from the right edge.
+ * Fully themeable via CSS custom properties with design system token fallbacks.
  *
  * @element slide-notification
  * @fires slide-notification-shown - Fired when notification appears
@@ -27,14 +21,38 @@ const ICONS = {
  * @attr {String} message - Notification message (supports HTML)
  * @attr {Number} timetohide - Time in ms before auto-hide (default: 3000, 0 = persistent)
  * @attr {String} type - Type: 'info', 'success', 'warning', 'error'
- * @attr {String} background-color - Custom background color
+ * @attr {String} background-color - Custom background color (overrides type color)
  * @attr {Boolean} persistent - If true, notification stays until clicked (same as timetohide=0)
  *
- * @cssprop --slide-notification-width - Width (default: 300px)
- * @cssprop --slide-notification-bg - Background color (default: #17a2b8)
- * @cssprop --slide-notification-color - Text color (default: white)
- * @cssprop --slide-notification-radius - Border radius (default: 8px)
- * @cssprop --slide-notification-z-index - Z-index (default: 10000)
+ * @csspart container - The notification container wrapper
+ * @csspart title - The notification title element
+ * @csspart content - The notification content wrapper (icon + message)
+ * @csspart icon - The notification icon
+ * @csspart message - The notification message element
+ *
+ * @cssprop [--notification-bg] - Background color (falls back to type-specific token)
+ * @cssprop [--notification-text] - Text color (falls back to --text-inverse or #ffffff)
+ * @cssprop [--notification-border-radius] - Border radius (falls back to --radius-md or 6px)
+ * @cssprop [--notification-shadow] - Box shadow (falls back to --shadow-lg)
+ * @cssprop [--notification-padding] - Padding (falls back to --spacing-md or 1rem)
+ * @cssprop [--notification-min-width=300px] - Minimum width
+ * @cssprop [--notification-max-width=400px] - Maximum width
+ * @cssprop [--notification-min-height=80px] - Minimum height
+ * @cssprop [--notification-bottom=20px] - Distance from bottom
+ * @cssprop [--notification-z-index=10000] - Z-index
+ *
+ * @cssprop [--notification-title-size] - Title font size (falls back to --font-size-lg or 1.1rem)
+ * @cssprop [--notification-title-weight=600] - Title font weight
+ * @cssprop [--notification-message-size] - Message font size (falls back to --font-size-base or 1rem)
+ * @cssprop [--notification-icon-size=1.2em] - Icon size
+ *
+ * @cssprop [--notification-animation-duration=0.5s] - Animation duration
+ * @cssprop [--notification-slide-distance=100%] - Slide distance
+ *
+ * @cssprop [--notification-success-bg=#22c55e] - Success type background
+ * @cssprop [--notification-error-bg=#dc3545] - Error type background
+ * @cssprop [--notification-warning-bg=#ffc107] - Warning type background
+ * @cssprop [--notification-info-bg=#17a2b8] - Info type background
  */
 export class SlideNotification extends LitElement {
   static styles = slideNotificationStyles;
@@ -83,10 +101,12 @@ export class SlideNotification extends LitElement {
         this.classList.remove('hiding');
         this.classList.add('visible');
 
-        this.dispatchEvent(new CustomEvent('slide-notification-shown', {
-          bubbles: true,
-          composed: true
-        }));
+        this.dispatchEvent(
+          new CustomEvent('slide-notification-shown', {
+            bubbles: true,
+            composed: true,
+          })
+        );
       });
 
       // Auto-hide after timeout (unless persistent)
@@ -103,7 +123,7 @@ export class SlideNotification extends LitElement {
     if (this.persistent || this.timetohide === 0) {
       this.hide();
     }
-  }
+  };
 
   disconnectedCallback() {
     super.disconnectedCallback();
@@ -126,10 +146,12 @@ export class SlideNotification extends LitElement {
     this.classList.remove('visible');
     this.classList.add('hiding');
 
-    this.dispatchEvent(new CustomEvent('slide-notification-hidden', {
-      bubbles: true,
-      composed: true
-    }));
+    this.dispatchEvent(
+      new CustomEvent('slide-notification-hidden', {
+        bubbles: true,
+        composed: true,
+      })
+    );
 
     // Remove from DOM if created programmatically
     if (this._removeOnHide) {
@@ -141,36 +163,30 @@ export class SlideNotification extends LitElement {
     this._showNotification();
   }
 
-  _getBackgroundColor() {
-    if (this.backgroundColor) return this.backgroundColor;
-    return DEFAULT_COLORS[this.type] || DEFAULT_COLORS.info;
+  _getRole() {
+    // Use alert for error/warning (more urgent), status for info/success
+    return this.type === 'error' || this.type === 'warning' ? 'alert' : 'status';
   }
 
-  _getTextColor() {
-    return this.type === 'warning' ? '#212529' : 'white';
-  }
-
-  _getTextShadow() {
-    return this.type === 'warning'
-      ? '1px 1px 2px rgba(0, 0, 0, 0.3)'
-      : '1px 1px 2px rgba(0, 0, 0, 0.5)';
+  _getAriaLive() {
+    return this.type === 'error' || this.type === 'warning' ? 'assertive' : 'polite';
   }
 
   render() {
     const icon = ICONS[this.type] || ICONS.info;
-    const bgColor = this._getBackgroundColor();
-    const textColor = this._getTextColor();
-    const textShadow = this._getTextShadow();
 
-    this.style.setProperty('--_bg', bgColor);
-    this.style.setProperty('--_color', textColor);
-    this.style.setProperty('--_text-shadow', textShadow);
+    // Allow backgroundColor attribute to override CSS token
+    if (this.backgroundColor) {
+      this.style.setProperty('--notification-bg', this.backgroundColor);
+    }
 
     return html`
-      ${this.title ? html`<div class="title">${this.title}</div>` : ''}
-      <div class="notification-content">
-        <span class="icon">${icon}</span>
-        <div class="message">${unsafeHTML(this.message)}</div>
+      <div part="container" role="${this._getRole()}" aria-live="${this._getAriaLive()}">
+        ${this.title ? html`<div class="title" part="title">${this.title}</div>` : ''}
+        <div class="notification-content" part="content">
+          <span class="icon" part="icon" aria-hidden="true">${icon}</span>
+          <div class="message" part="message">${unsafeHTML(this.message)}</div>
+        </div>
       </div>
     `;
   }
@@ -185,7 +201,7 @@ customElements.define('slide-notification', SlideNotification);
  * @param {string} options.message - Notification message (supports HTML)
  * @param {number} options.timetohide - Time in ms before auto-hide (default: 3000, 0 = persistent)
  * @param {string} options.type - Type: 'info' | 'success' | 'warning' | 'error'
- * @param {string} options.backgroundColor - Custom background color
+ * @param {string} options.backgroundColor - Custom background color (overrides type)
  * @param {boolean} options.persistent - If true, stays until clicked
  * @returns {SlideNotification} The created notification element
  */

package/src/slide-notification.styles.js

@@ -2,41 +2,85 @@ import { css } from 'lit';
 
 export const slideNotificationStyles = css`
   :host {
-    --_width: var(--slide-notification-width, 300px);
-    --_bg: var(--slide-notification-bg, #17a2b8);
-    --_color: var(--slide-notification-color, white);
-    --_text-shadow: var(--slide-notification-text-shadow, 1px 1px 2px rgba(0, 0, 0, 0.5));
+    /* ========================================
+       Design System Tokens
+       ======================================== */
 
+    /* Base tokens */
+    --notification-bg: var(--notification-info-bg, #17a2b8);
+    --notification-text: var(--text-inverse, #ffffff);
+    --notification-border-radius: var(--radius-md, 6px);
+    --notification-shadow: var(--shadow-lg, 0 4px 8px rgba(0, 0, 0, 0.15));
+    --notification-padding: var(--spacing-md, 1rem);
+    --notification-min-width: 300px;
+    --notification-max-width: 400px;
+
+    /* Title */
+    --notification-title-size: var(--font-size-lg, 1.1rem);
+    --notification-title-weight: 600;
+
+    /* Message */
+    --notification-message-size: var(--font-size-base, 1rem);
+
+    /* Icon */
+    --notification-icon-size: 1.2em;
+
+    /* Animation */
+    --notification-animation-duration: 0.5s;
+    --notification-slide-distance: 100%;
+
+    /* Layout */
     position: fixed;
-    bottom: var(--slide-notification-bottom, 20px);
-    right: calc(-20px - var(--_width));
-    width: var(--_width);
-    min-height: var(--slide-notification-min-height, 80px);
-    background: var(--_bg);
-    color: var(--_color);
-    border-radius: var(--slide-notification-radius, 8px);
+    bottom: var(--notification-bottom, 20px);
+    right: calc(-20px - var(--notification-max-width));
+    width: var(--notification-max-width);
+    min-width: var(--notification-min-width);
+    min-height: var(--notification-min-height, 80px);
+    background: var(--notification-bg);
+    color: var(--notification-text);
+    border-radius: var(--notification-border-radius);
     border-left: 4px solid rgba(255, 255, 255, 0.3);
-    padding: var(--slide-notification-padding, 1.5rem);
-    box-shadow: var(--slide-notification-shadow, 0 2px 8px rgba(0, 0, 0, 0.2));
-    font-size: 1rem;
+    padding: var(--notification-padding);
+    box-shadow: var(--notification-shadow);
+    font-size: var(--notification-message-size);
     font-weight: 500;
     opacity: 0;
-    transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
+    transition:
+      transform var(--notification-animation-duration) ease-in-out,
+      opacity var(--notification-animation-duration) ease-in-out;
     transform: translateX(0);
-    z-index: var(--slide-notification-z-index, 10000);
+    z-index: var(--notification-z-index, 10000);
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
   }
 
+  /* Type variants using attribute selectors */
+  :host([type='success']) {
+    --notification-bg: var(--notification-success-bg, #22c55e);
+  }
+
+  :host([type='error']) {
+    --notification-bg: var(--notification-error-bg, #dc3545);
+  }
+
+  :host([type='warning']) {
+    --notification-bg: var(--notification-warning-bg, #ffc107);
+    --notification-text: var(--text-primary, #333333);
+  }
+
+  :host([type='info']) {
+    --notification-bg: var(--notification-info-bg, #17a2b8);
+  }
+
   :host(.visible) {
     opacity: 1;
-    transform: translateX(calc(-1 * var(--_width) - 40px));
+    transform: translateX(calc(-1 * var(--notification-max-width) - 40px));
   }
 
   :host(.hiding) {
-    transform: translateX(calc(var(--_width) + 40px));
+    transform: translateX(calc(var(--notification-max-width) + 40px));
   }
 
   :host([persistent]) {
@@ -44,9 +88,10 @@ export const slideNotificationStyles = css`
   }
 
   .title {
-    font-weight: 600;
+    font-size: var(--notification-title-size);
+    font-weight: var(--notification-title-weight);
     margin-bottom: 0.25rem;
-    text-shadow: var(--_text-shadow);
+    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
   }
 
   .notification-content {
@@ -56,12 +101,19 @@ export const slideNotificationStyles = css`
   }
 
   .message {
+    font-size: var(--notification-message-size);
     font-weight: 500;
-    text-shadow: var(--_text-shadow);
+    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
   }
 
   .icon {
-    font-size: 1.2em;
+    font-size: var(--notification-icon-size);
     flex-shrink: 0;
   }
+
+  @media (prefers-reduced-motion: reduce) {
+    :host {
+      transition: none;
+    }
+  }
 `;