@c2n/toast 0.0.11 → 0.0.13

package/custom-elements.json

@@ -0,0 +1 @@
+{"schemaVersion":"1.0.0","readme":"","modules":[{"kind":"javascript-module","path":"src/toast.ts","declarations":[{"kind":"class","description":"A notification card. Use c2-toast-region to manage stacking, queueing and timed dismissal.","name":"Toast","cssProperties":[{"type":{"text":"color"},"name":"--c2-toast__container--background","default":"#ffffff"},{"type":{"text":"color"},"name":"--c2-toast__container--color","default":"#18181b"},{"type":{"text":"border"},"name":"--c2-toast__container--border","default":"1px solid #e4e4e7"},{"type":{"text":"border-radius"},"name":"--c2-toast__container--border-radius","default":"10px"},{"type":{"text":"padding"},"name":"--c2-toast__container--padding","default":"14px 16px"},{"type":{"text":"pixel"},"name":"--c2-toast__container--gap","default":"12px"},{"type":{"text":"box-shadow"},"name":"--c2-toast__container--box-shadow","default":"0 4px 16px rgba(0, 0, 0, 0.1)"},{"type":{"text":"font-family"},"name":"--c2-toast__container--font-family","default":"inherit"},{"type":{"text":"font-size"},"name":"--c2-toast__container--font-size","default":"14px"},{"type":{"text":"line-height"},"name":"--c2-toast__container--line-height","default":"1.5"},{"type":{"text":"font-weight"},"name":"--c2-toast__heading--font-weight","default":"600"},{"type":{"text":"align-self"},"name":"--c2-toast__icon--align-self","default":"center"},{"type":{"text":"pixel"},"name":"--c2-toast__progress--height","default":"3px"},{"type":{"text":"color"},"name":"--c2-toast__progress--color","default":"#2563eb"},{"type":{"text":"color"},"name":"--c2-toast__progress--background","default":"rgba(37, 99, 235, 0.15)"},{"type":{"text":"pixel"},"name":"--c2-toast__icon--size","default":"20px"},{"type":{"text":"color"},"name":"--c2-toast__icon--color","default":"#71717a"},{"type":{"text":"color"},"name":"--c2-toast__icon__info--color","default":"#2563eb"},{"type":{"text":"color"},"name":"--c2-toast__icon__success--color","default":"#15803d"},{"type":{"text":"color"},"name":"--c2-toast__icon__warning--color","default":"#a16207"},{"type":{"text":"color"},"name":"--c2-toast__icon__error--color","default":"#dc2626"},{"type":{"text":"color"},"name":"--c2-toast__action--color","default":"#2563eb"},{"type":{"text":"color"},"name":"--c2-toast__close--color","default":"#71717a"},{"type":{"text":"color"},"name":"--c2-toast__close__hover--background","default":"#f4f4f5"},{"type":{"text":"outline"},"name":"--c2-toast__button__focus--outline","default":"2px solid #476ef9"}],"cssParts":[{"name":"container","description":"Shadow DOM styling hook for the container element."},{"name":"icon","description":"Shadow DOM styling hook for the icon element."},{"name":"heading","description":"Shadow DOM styling hook for the heading element."},{"name":"message","description":"Shadow DOM styling hook for the message element."},{"name":"action","description":"Shadow DOM styling hook for the action element."},{"name":"close","description":"Shadow DOM styling hook for the close element."},{"name":"progress","description":"Shadow DOM styling hook for the progress element."},{"name":"progress-bar","description":"Shadow DOM styling hook for the progress bar element."}],"slots":[{"description":"Message content, replacing message.","name":"default"},{"description":"Leading icon, with a variant-specific SVG default.","name":"icon"},{"description":"Custom action content, replacing the action-label button.","name":"action"},{"description":"Replaces the dismiss button icon.","name":"close-icon"}],"members":[{"kind":"field","name":"message","type":{"text":"string"},"default":"''","description":"Plain-text message; the default slot can replace it.","attribute":"message"},{"kind":"field","name":"heading","type":{"text":"string"},"default":"''","description":"Optional title above the message.","attribute":"heading"},{"kind":"field","name":"variant","type":{"text":"'neutral' | 'info' | 'success' | 'warning' | 'error'"},"default":"'neutral'","description":"Semantic icon variant.","attribute":"variant","reflects":true},{"kind":"field","name":"noIcon","type":{"text":"boolean"},"default":"false","description":"Hides the leading icon and removes its space from the layout.","attribute":"no-icon"},{"kind":"field","name":"showProgress","type":{"text":"boolean"},"default":"false","description":"Displays a countdown bar. Managed toasts receive progress from their region.","attribute":"show-progress"},{"kind":"field","name":"progress","type":{"text":"number"},"default":"1","description":"Remaining fraction from 0 to 1. Standalone cards display this value without starting a timer.","attribute":"progress"},{"kind":"field","name":"dismissible","type":{"text":"boolean"},"default":"false","description":"Shows a keyboard-accessible dismiss button.","attribute":"dismissible"},{"kind":"field","name":"actionLabel","type":{"text":"string"},"default":"''","description":"Label for the optional action button.","attribute":"action-label"},{"kind":"field","name":"closeLabel","type":{"text":"string"},"default":"'Dismiss notification'","description":"Accessible name of the dismiss button.","attribute":"close-label"},{"kind":"field","name":"managed","type":{"text":"boolean"},"default":"false","description":"Set by a region to prevent duplicate announcements.","attribute":"managed"},{"kind":"method","name":"dismiss","description":"Requests dismissal. Standalone toasts are hidden; a region removes managed toasts."},{"kind":"method","name":"handleKeydown","privacy":"private","parameters":[{"name":"event","type":{"text":"KeyboardEvent"}}]},{"kind":"method","name":"renderIcon","privacy":"private"}],"events":[{"name":"toast-close","type":{"text":"CustomEvent"},"description":"Dismiss requested by the close button or Escape; detail contains reason."},{"name":"toast-action","type":{"text":"CustomEvent"},"description":"The action-label button was activated."}],"attributes":[{"name":"message","type":{"text":"string"},"default":"''","description":"Plain-text message; the default slot can replace it.","fieldName":"message"},{"name":"heading","type":{"text":"string"},"default":"''","description":"Optional title above the message.","fieldName":"heading"},{"name":"variant","type":{"text":"'neutral' | 'info' | 'success' | 'warning' | 'error'"},"default":"'neutral'","description":"Semantic icon variant.","fieldName":"variant"},{"name":"no-icon","type":{"text":"boolean"},"default":"false","description":"Hides the leading icon and removes its space from the layout.","fieldName":"noIcon"},{"name":"show-progress","type":{"text":"boolean"},"default":"false","description":"Displays a countdown bar. Managed toasts receive progress from their region.","fieldName":"showProgress"},{"name":"progress","type":{"text":"number"},"default":"1","description":"Remaining fraction from 0 to 1. Standalone cards display this value without starting a timer.","fieldName":"progress"},{"name":"dismissible","type":{"text":"boolean"},"default":"false","description":"Shows a keyboard-accessible dismiss button.","fieldName":"dismissible"},{"name":"action-label","type":{"text":"string"},"default":"''","description":"Label for the optional action button.","fieldName":"actionLabel"},{"name":"close-label","type":{"text":"string"},"default":"'Dismiss notification'","description":"Accessible name of the dismiss button.","fieldName":"closeLabel"},{"name":"managed","type":{"text":"boolean"},"default":"false","description":"Set by a region to prevent duplicate announcements.","fieldName":"managed"}],"superclass":{"name":"LitElement","package":"lit"},"tagName":"c2-toast","customElement":true},{"kind":"class","description":"Fixed notification stack with a FIFO overflow queue and independent visible lifetimes.","name":"ToastRegion","cssProperties":[{"type":{"text":"pixel"},"name":"--c2-toast-region__container--width","default":"360px"},{"type":{"text":"pixel"},"name":"--c2-toast-region__container--gap","default":"12px"},{"type":{"text":"pixel"},"name":"--c2-toast-region__container--offset","default":"20px"},{"type":{"text":"number"},"name":"--c2-toast-region__container--z-index","default":"1000"}],"cssParts":[{"name":"stack","description":"Shadow DOM styling hook for the stack element."}],"members":[{"kind":"field","name":"position","type":{"text":"'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right'"},"default":"'bottom-right'","description":"Viewport corner or center edge at which notifications appear.","attribute":"position","reflects":true},{"kind":"field","name":"maxVisible","type":{"text":"number"},"default":"3","description":"Maximum visible notifications; the rest wait without running their timers.","attribute":"max-visible"},{"kind":"field","name":"label","type":{"text":"string"},"default":"'Notifications'","description":"Accessible region name.","attribute":"label"},{"kind":"field","name":"inline","type":{"text":"boolean"},"default":"false","description":"Inline layout for embedded notification stacks.","attribute":"inline","reflects":true},{"kind":"field","name":"enterAnimation","type":{"text":"ToastAnimation"},"default":"'slide-up'","description":"Entrance effect. Directions describe movement: slide-down enters from above.","attribute":"enter-animation"},{"kind":"field","name":"exitAnimation","type":{"text":"ToastAnimation"},"default":"'fade'","description":"Exit effect. Directions describe movement: slide-right exits toward the right.","attribute":"exit-animation"},{"kind":"field","name":"animationDuration","type":{"text":"number"},"default":"200","description":"Entrance and exit duration in milliseconds. Zero disables animation.","attribute":"animation-duration"},{"kind":"field","name":"showProgress","type":{"text":"boolean"},"default":"true","description":"Shows a remaining-time bar on timed notifications by default; set false to hide it.","attribute":"show-progress"},{"kind":"field","name":"progressFrame","type":{"text":"number | undefined"},"privacy":"private"},{"kind":"field","name":"entered","privacy":"private","default":"new WeakSet<Element>()"},{"kind":"field","name":"animations","privacy":"private","default":"new Map<Element, Animation>()"},{"kind":"field","name":"exits","privacy":"private","default":"new Map<string, Animation>()"},{"kind":"field","name":"controller","privacy":"private","default":"new ToastController( (toast, reason) => { this.dispatchEvent(new CustomEvent('toast-dismiss', { bubbles: true, composed: true, detail: { id: toast.id, toast, reason } })) }, (toast) => this.animateExit(toast.id), )"},{"kind":"field","name":"unsubscribe","type":{"text":"() => void | undefined"},"privacy":"private"},{"kind":"field","name":"visibilityChanged","privacy":"private"},{"kind":"field","name":"updateProgress","privacy":"private"},{"kind":"method","name":"animateToast","privacy":"private","return":{"type":{"text":"Animation | undefined"}},"parameters":[{"name":"element","type":{"text":"HTMLElement"}},{"name":"effect","type":{"text":"ToastAnimation"}},{"name":"exiting","type":{"text":"boolean"}}]},{"kind":"method","name":"animateExit","privacy":"private","return":{"type":{"text":"Promise<unknown> | undefined"}},"parameters":[{"name":"id","type":{"text":"string"}}]},{"kind":"field","name":"queuedCount","description":"Number of notifications waiting for a visible slot.","readonly":true},{"kind":"field","name":"count","description":"Number of visible and queued notifications.","readonly":true},{"kind":"method","name":"show","return":{"type":{"text":"string"}},"parameters":[{"name":"options","type":{"text":"ToastOptions"}}],"description":"Adds a notification or updates the one with the same ID. Returns its ID."},{"kind":"method","name":"updateToast","return":{"type":{"text":"boolean"}},"parameters":[{"name":"id","type":{"text":"string"}},{"name":"options","type":{"text":"Partial<Omit<ToastOptions, 'id'>>"}}],"description":"Updates content in place and restarts its visible lifetime."},{"kind":"method","name":"dismiss","return":{"type":{"text":"boolean"}},"parameters":[{"name":"id","type":{"text":"string"}},{"name":"reason","default":"'programmatic'","type":{"text":"ToastDismissReason"}}],"description":"Removes a visible or queued toast."},{"kind":"method","name":"clear","description":"Removes all visible and queued notifications and cancels their timers."},{"kind":"method","name":"pause","description":"Pauses all visible timers until resume is called."},{"kind":"method","name":"resume"},{"kind":"method","name":"handleFocusout","privacy":"private"},{"kind":"method","name":"handleAction","privacy":"private","parameters":[{"name":"event","type":{"text":"Event"}},{"name":"id","type":{"text":"string"}}]}],"events":[{"name":"toast-action","type":{"text":"CustomEvent"},"description":"Action activated; detail contains id and toast. The toast is then dismissed."},{"type":{"text":"CustomEvent"},"description":"A toast was removed; detail contains id, toast and reason.","name":"toast-dismiss"}],"attributes":[{"name":"position","type":{"text":"'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right'"},"default":"'bottom-right'","description":"Viewport corner or center edge at which notifications appear.","fieldName":"position"},{"name":"max-visible","type":{"text":"number"},"default":"3","description":"Maximum visible notifications; the rest wait without running their timers.","fieldName":"maxVisible"},{"name":"label","type":{"text":"string"},"default":"'Notifications'","description":"Accessible region name.","fieldName":"label"},{"name":"inline","type":{"text":"boolean"},"default":"false","description":"Inline layout for embedded notification stacks.","fieldName":"inline"},{"name":"enter-animation","type":{"text":"ToastAnimation"},"default":"'slide-up'","description":"Entrance effect. Directions describe movement: slide-down enters from above.","fieldName":"enterAnimation"},{"name":"exit-animation","type":{"text":"ToastAnimation"},"default":"'fade'","description":"Exit effect. Directions describe movement: slide-right exits toward the right.","fieldName":"exitAnimation"},{"name":"animation-duration","type":{"text":"number"},"default":"200","description":"Entrance and exit duration in milliseconds. Zero disables animation.","fieldName":"animationDuration"},{"name":"show-progress","type":{"text":"boolean"},"default":"true","description":"Shows a remaining-time bar on timed notifications by default; set false to hide it.","fieldName":"showProgress"}],"superclass":{"name":"LitElement","package":"lit"},"tagName":"c2-toast-region","customElement":true,"internalComponents":["c2-toast"]},{"kind":"variable","name":"toast"},{"kind":"function","name":"getToastRegion","return":{"type":{"text":"ToastRegion"}},"description":"Creates a shared region on first use. Safe to import during SSR; call only in a browser."}],"exports":[{"kind":"js","name":"ToastOptions","declaration":{"name":"ToastOptions","module":"./toast-controller.js"}},{"kind":"js","name":"ToastRecord","declaration":{"name":"ToastRecord","module":"./toast-controller.js"}},{"kind":"js","name":"ToastVariant","declaration":{"name":"ToastVariant","module":"./toast-controller.js"}},{"kind":"js","name":"ToastDismissReason","declaration":{"name":"ToastDismissReason","module":"./toast-controller.js"}},{"kind":"js","name":"Toast","declaration":{"name":"Toast","module":"src/toast.ts"}},{"kind":"custom-element-definition","name":"c2-toast","declaration":{"name":"Toast","module":"src/toast.ts"}},{"kind":"js","name":"ToastRegion","declaration":{"name":"ToastRegion","module":"src/toast.ts"}},{"kind":"custom-element-definition","name":"c2-toast-region","declaration":{"name":"ToastRegion","module":"src/toast.ts"}},{"kind":"js","name":"getToastRegion","declaration":{"name":"getToastRegion","module":"src/toast.ts"}},{"kind":"js","name":"toast","declaration":{"name":"toast","module":"src/toast.ts"}}]}]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@c2n/toast",
-  "version": "0.0.11",
+  "version": "0.0.13",
   "type": "module",
   "main": "dist/toast.js",
   "exports": {
@@ -21,6 +21,7 @@
   "files": [
     "dist",
     "types",
+    "custom-elements.json",
     "react.d.ts",
     "react.js",
     "vue.d.ts",
@@ -62,12 +63,12 @@
     }
   },
   "dependencies": {
-    "@c2n/core": "0.0.11",
+    "@c2n/core": "0.0.13",
     "lit": "3.3.3"
   },
   "devDependencies": {
     "@c2n/config": "*"
   },
   "customElements": "custom-elements.json",
-  "gitHead": "bf962fba5e49a0ac7555a082584e262949d323a5"
+  "gitHead": "aa19b641f64fbc54c36b7649a8171d7a686abbdd"
 }

package/react.d.ts

@@ -6,18 +6,35 @@
 //
 // Register the elements at module scope before React renders, or React writes an object prop as an
 // attribute and it stringifies.
+//
+// On a server-rendered page (Next.js, React Router SSR) write a camelCase property by its kebab-case attribute
+// name ('row-key', not rowKey): the server emits props verbatim, HTML lowercases them, and hydration does not
+// set properties. Those names are listed next to the properties below.
 
 import type { DetailedHTMLProps, HTMLAttributes } from 'react'
 import type { Toast, ToastRegion } from '@c2n/toast'
 
 /** Standard React host-element attributes plus the element's own public properties. */
 type C2Props<T> = DetailedHTMLProps<HTMLAttributes<T>, T> & Partial<Omit<T, keyof HTMLElement>>
+/** What React writes to a custom element's attribute: true becomes the empty string, false removes it. */
+type Attribute = string | number | boolean
 
 declare module 'react' {
   namespace JSX {
     interface IntrinsicElements {
-      'c2-toast': C2Props<Toast>
-      'c2-toast-region': C2Props<ToastRegion>
+      'c2-toast': C2Props<Toast> & {
+        'no-icon'?: Attribute
+        'show-progress'?: Attribute
+        'action-label'?: Attribute
+        'close-label'?: Attribute
+      }
+      'c2-toast-region': C2Props<ToastRegion> & {
+        'max-visible'?: Attribute
+        'enter-animation'?: Attribute
+        'exit-animation'?: Attribute
+        'animation-duration'?: Attribute
+        'show-progress'?: Attribute
+      }
     }
   }
 }