@rozie-ui/toast-lit 0.1.0 → 0.1.1

package/dist/index.cjs

@@ -263,12 +263,9 @@ let Toaster = class Toaster extends (0, _lit_labs_preact_signals.SignalWatcher)(
 			if (this._swipeGesture.value && this._swipeGesture.value.id === t.id) this._swipeGesture.value = null;
 			if (this._swipe.value && this._swipe.value.id === t.id) this._swipe.value = null;
 		};
-		this.depth = (t) => {
-			const idx = this._toasts.value.findIndex((x) => x.id === t.id);
-			return idx === -1 ? 0 : this._toasts.value.length - 1 - idx;
-		};
-		this.toastStyle = (t) => {
-			const depthDecl = "--rozie-toast-depth: " + this.depth(t) + ";";
+		this.depth = (ti) => this._toasts.value.length - 1 - ti;
+		this.toastStyle = (t, ti) => {
+			const depthDecl = "--rozie-toast-depth: " + this.depth(ti) + ";";
 			if (t.exiting) return t.swipeExitSign != null ? depthDecl + " --rozie-toast-swipe-exit: " + t.swipeExitSign + ";" : depthDecl;
 			const dragState = this._swipe.value;
 			if (!dragState || dragState.id !== t.id) return depthDecl;
@@ -483,7 +480,7 @@ to[data-rozie-s-12d4265c] { transform: rotate(360deg); }
 			this.onMouseLeave();
 		}} ${(0, _rozie_runtime_lit.rozieListeners)(this.$listeners)} data-rozie-s-12d4265c>
   
-  ${(0, lit_directives_repeat_js.repeat)(this._toasts.value, (t, _idx) => t.id, (t, _idx) => lit.html`<div class="rozie-toast ${(0, _rozie_runtime_lit.rozieClass)("rozie-toast--" + t.type + (t.exiting ? " rozie-toast--exiting" : "") + (t.swipeExitSign != null ? " rozie-toast--swipe-exit" : ""))}" key=${(0, _rozie_runtime_lit.rozieAttr)(t.id)} style=${(0, _rozie_runtime_lit.rozieStyle)(this.toastStyle(t))} role="status" aria-live=${(0, _rozie_runtime_lit.rozieAttr)(this.liveFor(t.type))} @animationend=${($event) => {
+  ${(0, lit_directives_repeat_js.repeat)(this._toasts.value, (t, ti) => t.id, (t, ti) => lit.html`<div class="rozie-toast ${(0, _rozie_runtime_lit.rozieClass)("rozie-toast--" + t.type + (t.exiting ? " rozie-toast--exiting" : "") + (t.swipeExitSign != null ? " rozie-toast--swipe-exit" : ""))}" key=${(0, _rozie_runtime_lit.rozieAttr)(t.id)} style=${(0, _rozie_runtime_lit.rozieStyle)(this.toastStyle(t, ti))} role="status" aria-live=${(0, _rozie_runtime_lit.rozieAttr)(this.liveFor(t.type))} @animationend=${($event) => {
 			t.exiting && this.removeToast(t.id);
 		}} @pointerdown=${($event) => {
 			this.onToastPointerDown(t, $event);
@@ -524,9 +521,16 @@ to[data-rozie-s-12d4265c] { transform: rotate(360deg); }
 	* with React/Vue/Svelte/Solid/Angular). Both Lit attribute-naming
 	* forms are folded into the skip set: kebab-case for model props
 	* (explicit `attribute:`) AND lowercased property name (Lit's default).
+	*
+	* command-palette-per-level-virtual / portal-through-portal cluster —
+	* `data-rozie-ref` is ALWAYS skipped too (a reserved compiler bookkeeping
+	* attribute, never a consumer prop) so a parent-assigned `ref=` on this
+	* component's own host tag can never clobber this component's OWN
+	* internal `data-rozie-ref` ref markers via fallthrough re-application.
 	*/
 	get $attrs() {
 		const __skip = new Set([
+			"data-rozie-ref",
 			"position",
 			"duration",
 			"max",

package/dist/index.d.cts

@@ -77,8 +77,8 @@ declare class Toaster extends Toaster_base {
   onToastPointerMove: (t: any, event: any) => void;
   onToastPointerUp: (t: any, event: any) => void;
   onToastPointerCancel: (t: any) => void;
-  depth: (t: any) => number;
-  toastStyle: (t: any) => string;
+  depth: (ti: any) => number;
+  toastStyle: (t: any, ti: any) => string;
   onMouseEnter: () => void;
   onMouseLeave: () => void;
   regionLabel: () => string;
@@ -94,6 +94,12 @@ declare class Toaster extends Toaster_base {
    * with React/Vue/Svelte/Solid/Angular). Both Lit attribute-naming
    * forms are folded into the skip set: kebab-case for model props
    * (explicit `attribute:`) AND lowercased property name (Lit's default).
+   *
+   * command-palette-per-level-virtual / portal-through-portal cluster —
+   * `data-rozie-ref` is ALWAYS skipped too (a reserved compiler bookkeeping
+   * attribute, never a consumer prop) so a parent-assigned `ref=` on this
+   * component's own host tag can never clobber this component's OWN
+   * internal `data-rozie-ref` ref markers via fallthrough re-application.
    */
   private get $attrs();
   /**

package/dist/index.d.mts

@@ -77,8 +77,8 @@ declare class Toaster extends Toaster_base {
   onToastPointerMove: (t: any, event: any) => void;
   onToastPointerUp: (t: any, event: any) => void;
   onToastPointerCancel: (t: any) => void;
-  depth: (t: any) => number;
-  toastStyle: (t: any) => string;
+  depth: (ti: any) => number;
+  toastStyle: (t: any, ti: any) => string;
   onMouseEnter: () => void;
   onMouseLeave: () => void;
   regionLabel: () => string;
@@ -94,6 +94,12 @@ declare class Toaster extends Toaster_base {
    * with React/Vue/Svelte/Solid/Angular). Both Lit attribute-naming
    * forms are folded into the skip set: kebab-case for model props
    * (explicit `attribute:`) AND lowercased property name (Lit's default).
+   *
+   * command-palette-per-level-virtual / portal-through-portal cluster —
+   * `data-rozie-ref` is ALWAYS skipped too (a reserved compiler bookkeeping
+   * attribute, never a consumer prop) so a parent-assigned `ref=` on this
+   * component's own host tag can never clobber this component's OWN
+   * internal `data-rozie-ref` ref markers via fallthrough re-application.
    */
   private get $attrs();
   /**

package/dist/index.mjs

@@ -259,12 +259,9 @@ let Toaster = class Toaster extends SignalWatcher(LitElement) {
 			if (this._swipeGesture.value && this._swipeGesture.value.id === t.id) this._swipeGesture.value = null;
 			if (this._swipe.value && this._swipe.value.id === t.id) this._swipe.value = null;
 		};
-		this.depth = (t) => {
-			const idx = this._toasts.value.findIndex((x) => x.id === t.id);
-			return idx === -1 ? 0 : this._toasts.value.length - 1 - idx;
-		};
-		this.toastStyle = (t) => {
-			const depthDecl = "--rozie-toast-depth: " + this.depth(t) + ";";
+		this.depth = (ti) => this._toasts.value.length - 1 - ti;
+		this.toastStyle = (t, ti) => {
+			const depthDecl = "--rozie-toast-depth: " + this.depth(ti) + ";";
 			if (t.exiting) return t.swipeExitSign != null ? depthDecl + " --rozie-toast-swipe-exit: " + t.swipeExitSign + ";" : depthDecl;
 			const dragState = this._swipe.value;
 			if (!dragState || dragState.id !== t.id) return depthDecl;
@@ -479,7 +476,7 @@ to[data-rozie-s-12d4265c] { transform: rotate(360deg); }
 			this.onMouseLeave();
 		}} ${rozieListeners(this.$listeners)} data-rozie-s-12d4265c>
   
-  ${repeat(this._toasts.value, (t, _idx) => t.id, (t, _idx) => html`<div class="rozie-toast ${rozieClass("rozie-toast--" + t.type + (t.exiting ? " rozie-toast--exiting" : "") + (t.swipeExitSign != null ? " rozie-toast--swipe-exit" : ""))}" key=${rozieAttr(t.id)} style=${rozieStyle(this.toastStyle(t))} role="status" aria-live=${rozieAttr(this.liveFor(t.type))} @animationend=${($event) => {
+  ${repeat(this._toasts.value, (t, ti) => t.id, (t, ti) => html`<div class="rozie-toast ${rozieClass("rozie-toast--" + t.type + (t.exiting ? " rozie-toast--exiting" : "") + (t.swipeExitSign != null ? " rozie-toast--swipe-exit" : ""))}" key=${rozieAttr(t.id)} style=${rozieStyle(this.toastStyle(t, ti))} role="status" aria-live=${rozieAttr(this.liveFor(t.type))} @animationend=${($event) => {
 			t.exiting && this.removeToast(t.id);
 		}} @pointerdown=${($event) => {
 			this.onToastPointerDown(t, $event);
@@ -520,9 +517,16 @@ to[data-rozie-s-12d4265c] { transform: rotate(360deg); }
 	* with React/Vue/Svelte/Solid/Angular). Both Lit attribute-naming
 	* forms are folded into the skip set: kebab-case for model props
 	* (explicit `attribute:`) AND lowercased property name (Lit's default).
+	*
+	* command-palette-per-level-virtual / portal-through-portal cluster —
+	* `data-rozie-ref` is ALWAYS skipped too (a reserved compiler bookkeeping
+	* attribute, never a consumer prop) so a parent-assigned `ref=` on this
+	* component's own host tag can never clobber this component's OWN
+	* internal `data-rozie-ref` ref markers via fallthrough re-application.
 	*/
 	get $attrs() {
 		const __skip = new Set([
+			"data-rozie-ref",
 			"position",
 			"duration",
 			"max",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rozie-ui/toast-lit",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "type": "module",
   "private": false,
   "license": "MIT",
@@ -45,7 +45,7 @@
     "src"
   ],
   "dependencies": {
-    "@rozie/runtime-lit": "0.2.0"
+    "@rozie/runtime-lit": "0.2.1"
   },
   "peerDependencies": {
     "lit": "^3.2",

package/src/Toaster.ts

@@ -248,7 +248,7 @@ to[data-rozie-s-12d4265c] { transform: rotate(360deg); }
     return html`
 <div class="rozie-toaster ${(rozieClass('rozie-toaster--' + this.position + (this.stacked ? ' rozie-toaster--stacked' : '')))}" role="region" aria-label=${rozieAttr(this.regionLabel())} ${rozieSpread(this.$attrs)} @mouseenter=${($event: MouseEvent & { currentTarget: HTMLDivElement; target: HTMLDivElement }) => { this.onMouseEnter(); }} @mouseleave=${($event: MouseEvent & { currentTarget: HTMLDivElement; target: HTMLDivElement }) => { this.onMouseLeave(); }} ${rozieListeners(this.$listeners)} data-rozie-s-12d4265c>
   
-  ${repeat<any>(this._toasts.value, (t, _idx) => t.id, (t, _idx) => html`<div class="rozie-toast ${(rozieClass('rozie-toast--' + t.type + (t.exiting ? ' rozie-toast--exiting' : '') + (t.swipeExitSign != null ? ' rozie-toast--swipe-exit' : '')))}" key=${rozieAttr(t.id)} style=${rozieStyle(this.toastStyle(t))} role="status" aria-live=${rozieAttr(this.liveFor(t.type))} @animationend=${($event: Event & { currentTarget: HTMLDivElement; target: HTMLDivElement }) => { t.exiting && this.removeToast(t.id); }} @pointerdown=${($event: PointerEvent & { currentTarget: HTMLDivElement; target: HTMLDivElement }) => { this.onToastPointerDown(t, $event); }} @pointermove=${($event: PointerEvent & { currentTarget: HTMLDivElement; target: HTMLDivElement }) => { this.onToastPointerMove(t, $event); }} @pointerup=${($event: PointerEvent & { currentTarget: HTMLDivElement; target: HTMLDivElement }) => { this.onToastPointerUp(t, $event); }} @pointercancel=${($event: PointerEvent & { currentTarget: HTMLDivElement; target: HTMLDivElement }) => { this.onToastPointerCancel(t); }} data-rozie-s-12d4265c>
+  ${repeat<any>(this._toasts.value, (t, ti) => t.id, (t, ti) => html`<div class="rozie-toast ${(rozieClass('rozie-toast--' + t.type + (t.exiting ? ' rozie-toast--exiting' : '') + (t.swipeExitSign != null ? ' rozie-toast--swipe-exit' : '')))}" key=${rozieAttr(t.id)} style=${rozieStyle(this.toastStyle(t, ti))} role="status" aria-live=${rozieAttr(this.liveFor(t.type))} @animationend=${($event: Event & { currentTarget: HTMLDivElement; target: HTMLDivElement }) => { t.exiting && this.removeToast(t.id); }} @pointerdown=${($event: PointerEvent & { currentTarget: HTMLDivElement; target: HTMLDivElement }) => { this.onToastPointerDown(t, $event); }} @pointermove=${($event: PointerEvent & { currentTarget: HTMLDivElement; target: HTMLDivElement }) => { this.onToastPointerMove(t, $event); }} @pointerup=${($event: PointerEvent & { currentTarget: HTMLDivElement; target: HTMLDivElement }) => { this.onToastPointerUp(t, $event); }} @pointercancel=${($event: PointerEvent & { currentTarget: HTMLDivElement; target: HTMLDivElement }) => { this.onToastPointerCancel(t); }} data-rozie-s-12d4265c>
     ${this.toast !== undefined ? this.toast({toast: t, dismiss: this.dismiss}) : html`<slot name="toast" data-rozie-params=${(() => { try { return JSON.stringify({toast: t}); } catch { return '{}'; } })()} @rozie-toast-dismiss=${($event: CustomEvent) => ((this.dismiss) as (...args: any[]) => any)($event.detail)}>
       ${t.type === 'loading' ? html`<span class="rozie-toast-spinner" aria-hidden="true" data-rozie-s-12d4265c></span>` : nothing}<span class="rozie-toast-message" data-rozie-s-12d4265c>${rozieDisplay(t.message)}</span>
       <button class="rozie-toast-close" type="button" aria-label="Dismiss" @click=${($event: MouseEvent & { currentTarget: HTMLButtonElement; target: HTMLButtonElement }) => { this.dismissBegin(t.id, 'close'); }} data-rozie-s-12d4265c>×</button>
@@ -590,13 +590,10 @@ to[data-rozie-s-12d4265c] { transform: rotate(360deg); }
   if (this._swipe.value && this._swipe.value.id === t.id) this._swipe.value = null;
 };
 
-  depth = (t: any) => {
-  const idx = this._toasts.value.findIndex((x: any) => x.id === t.id);
-  return idx === -1 ? 0 : this._toasts.value.length - 1 - idx;
-};
+  depth = (ti: any) => this._toasts.value.length - 1 - ti;
 
-  toastStyle = (t: any) => {
-  const depthDecl = '--rozie-toast-depth: ' + this.depth(t) + ';';
+  toastStyle = (t: any, ti: any) => {
+  const depthDecl = '--rozie-toast-depth: ' + this.depth(ti) + ';';
   if (t.exiting) {
     return t.swipeExitSign != null ? depthDecl + ' --rozie-toast-swipe-exit: ' + t.swipeExitSign + ';' : depthDecl;
   }
@@ -635,9 +632,15 @@ to[data-rozie-s-12d4265c] { transform: rotate(360deg); }
    * with React/Vue/Svelte/Solid/Angular). Both Lit attribute-naming
    * forms are folded into the skip set: kebab-case for model props
    * (explicit `attribute:`) AND lowercased property name (Lit's default).
+   *
+   * command-palette-per-level-virtual / portal-through-portal cluster —
+   * `data-rozie-ref` is ALWAYS skipped too (a reserved compiler bookkeeping
+   * attribute, never a consumer prop) so a parent-assigned `ref=` on this
+   * component's own host tag can never clobber this component's OWN
+   * internal `data-rozie-ref` ref markers via fallthrough re-application.
    */
   private get $attrs(): Record<string, string> {
-    const __skip = new Set<string>(['position', 'duration', 'max', 'disable-pause-on-hover', 'disablepauseonhover', 'aria-label', 'arialabel', 'disable-swipe', 'disableswipe', 'stacked']);
+    const __skip = new Set<string>(['data-rozie-ref', 'position', 'duration', 'max', 'disable-pause-on-hover', 'disablepauseonhover', 'aria-label', 'arialabel', 'disable-swipe', 'disableswipe', 'stacked']);
     const out: Record<string, string> = {};
     for (const a of Array.from(this.attributes)) {
       if (__skip.has(a.name)) continue;