@mhmo91/schmancy 0.8.6 → 0.9.2

package/dist/theme.service-D9lEas89.js

@@ -0,0 +1,108 @@
+import { M as e } from "./store-DYqDLAvT.js";
+import { n as t, t as n } from "./theme.events-Cv7N4Toe.js";
+import { BehaviorSubject as r, Observable as i, defaultIfEmpty as a, distinctUntilChanged as o, fromEvent as s, map as c, of as l, shareReplay as u, switchMap as d, takeUntil as f, tap as p, timer as m } from "rxjs";
+var h = e({
+	scheme: "auto",
+	color: "#6200ee"
+}, "local", "schmancy-theme-settings"), g = class e {
+	get scheme() {
+		return h.value.scheme;
+	}
+	get color() {
+		return h.value.color;
+	}
+	get theme() {
+		return this._theme$.getValue();
+	}
+	get themeComponent() {
+		return this._themeComponent$.getValue();
+	}
+	get fullscreen() {
+		return this._fullscreen$.getValue();
+	}
+	get bottomOffset() {
+		return this._bottomOffset$.getValue();
+	}
+	constructor() {
+		this._theme$ = new r({}), this._themeComponent$ = new r(null), this._fullscreen$ = new r(!1), this._bottomOffset$ = new r(0), this.scheme$ = h.$.pipe(c((e) => e.scheme), o(), u(1)), this.color$ = h.$.pipe(c((e) => e.color), o(), u(1)), this.theme$ = this._theme$.asObservable().pipe(o((e, t) => JSON.stringify(e) === JSON.stringify(t)), u(1)), this.themeComponent$ = this._themeComponent$.asObservable().pipe(o(), u(1)), this.fullscreen$ = this._fullscreen$.asObservable().pipe(o(), u(1)), this.bottomOffset$ = this._bottomOffset$.asObservable().pipe(o(), u(1)), this.resolvedScheme$ = this.scheme$.pipe(d((e) => {
+			if (e === "auto") {
+				let e = window.matchMedia("(prefers-color-scheme: dark)");
+				return new i((t) => {
+					let n = (e) => {
+						t.next(e.matches ? "dark" : "light");
+					};
+					return e.addEventListener("change", n), t.next(e.matches ? "dark" : "light"), () => e.removeEventListener("change", n);
+				});
+			}
+			return l(e);
+		}), o(), u(1)), this.discoverTheme();
+	}
+	discoverTheme() {
+		return s(window, n).pipe(f(m(100)), c((e) => e.detail.theme), a(null), p((e) => {
+			e && this.registerThemeComponent(e);
+		})).pipe(p(() => {
+			window.dispatchEvent(new CustomEvent(t, {
+				bubbles: !0,
+				composed: !0
+			}));
+		}), d(() => s(window, n).pipe(f(m(100)), c((e) => e.detail.theme), a(null), p((e) => {
+			e && this.registerThemeComponent(e);
+		}))));
+	}
+	registerThemeComponent(e) {
+		this._themeComponent$.next(e), h.set({
+			scheme: e.scheme,
+			color: e.color
+		}), this._theme$.next(e.theme);
+	}
+	updateTheme(e) {
+		let t = {};
+		e.scheme !== void 0 && (t.scheme = e.scheme), e.color !== void 0 && (t.color = e.color), Object.keys(t).length > 0 && h.set(t), e.theme !== void 0 && this._theme$.next(e.theme);
+	}
+	setScheme(e) {
+		let t = this.themeComponent;
+		t && (t.scheme = e), h.set({ scheme: e });
+	}
+	setColor(e) {
+		let t = this.themeComponent;
+		t && (t.color = e), h.set({ color: e });
+	}
+	isDarkMode() {
+		return this.resolvedScheme$.pipe(c((e) => e === "dark"));
+	}
+	toggleScheme() {
+		let e = this.scheme, t = e === "dark" ? "light" : e === "light" ? "dark" : "light";
+		this.setScheme(t);
+	}
+	getCSSVariable(e) {
+		let t = this.themeComponent;
+		if (t) {
+			let n = t.root ? document.body : t.shadowRoot?.host;
+			if (n) return getComputedStyle(n).getPropertyValue(`--schmancy-${e}`).trim();
+		}
+		return "";
+	}
+	watchCSSVariable(e) {
+		return this.theme$.pipe(c(() => this.getCSSVariable(e)), o());
+	}
+	setFullscreen(e) {
+		this._fullscreen$.next(e), window.dispatchEvent(new CustomEvent("fullscreen", {
+			detail: e,
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	toggleFullscreen() {
+		this.setFullscreen(!this.fullscreen);
+	}
+	setBottomOffset(e) {
+		this._bottomOffset$.next(e);
+	}
+	next(e) {
+		e.fullscreen !== void 0 && this.setFullscreen(e.fullscreen), e.scheme !== void 0 && this.setScheme(e.scheme), e.color !== void 0 && this.setColor(e.color);
+	}
+	static getInstance() {
+		return e.instance ||= new e(), e.instance;
+	}
+}.getInstance(), _ = g;
+export { g as n, _ as t };

package/dist/theme.service-D9lEas89.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.service-D9lEas89.js","names":[],"sources":["../src/theme/theme.service.ts"],"sourcesContent":["import {\n  BehaviorSubject,\n  Observable,\n  fromEvent,\n  timer,\n  map,\n  takeUntil,\n  defaultIfEmpty,\n  distinctUntilChanged,\n  shareReplay,\n  tap,\n  switchMap,\n  of\n} from 'rxjs'\nimport { ThemeHereIAm, ThemeHereIAmEvent, ThemeWhereAreYou } from './theme.events'\nimport type { SchmancyThemeComponent } from './theme.component'\nimport type { TSchmancyTheme } from './theme.interface'\nimport { createContext } from '../store'\n\ninterface ThemeSettings {\n  scheme: 'dark' | 'light' | 'auto'\n  color: string\n}\n\n// Single context for all theme settings\nconst ThemeContext = createContext<ThemeSettings>(\n  { scheme: 'auto', color: '#6200ee' },\n  'local',\n  'schmancy-theme-settings'\n)\n\n/**\n * Theme Service - Provides centralized theme management for Schmancy components.\n *\n * This service acts as a singleton interface to interact with the theme system,\n * providing reactive observables for theme state and methods to control theming.\n *\n * @example\n * ```typescript\n * import { theme } from '@schmancy/theme'\n *\n * // Subscribe to theme changes\n * theme.scheme$.subscribe(scheme => {\n *   console.log('Current scheme:', scheme) // 'light' | 'dark' | 'auto'\n * })\n *\n * // Get current values synchronously\n * const currentScheme = theme.scheme\n * const currentColor = theme.color\n *\n * // Toggle between light and dark mode\n * theme.toggleScheme()\n *\n * // Set specific scheme\n * theme.setScheme('dark')\n *\n * // Check if dark mode is active\n * theme.isDarkMode().subscribe(isDark => {\n *   console.log('Is dark mode:', isDark)\n * })\n * ```\n */\nclass ThemeService {\n  private static instance: ThemeService\n\n  // Observable properties for theme values\n  private _theme$ = new BehaviorSubject<Partial<TSchmancyTheme>>({})\n  private _themeComponent$ = new BehaviorSubject<SchmancyThemeComponent | null>(null)\n  private _fullscreen$ = new BehaviorSubject<boolean>(false)\n  private _bottomOffset$ = new BehaviorSubject<number>(0)\n\n  // Public observables derived from context\n  public readonly scheme$ = ThemeContext.$.pipe(\n    map(settings => settings.scheme),\n    distinctUntilChanged(),\n    shareReplay(1)\n  )\n\n  public readonly color$ = ThemeContext.$.pipe(\n    map(settings => settings.color),\n    distinctUntilChanged(),\n    shareReplay(1)\n  )\n\n  public readonly theme$ = this._theme$.asObservable().pipe(\n    distinctUntilChanged((a, b) => JSON.stringify(a) === JSON.stringify(b)),\n    shareReplay(1)\n  )\n\n  public readonly themeComponent$ = this._themeComponent$.asObservable().pipe(\n    distinctUntilChanged(),\n    shareReplay(1)\n  )\n\n  public readonly fullscreen$ = this._fullscreen$.asObservable().pipe(\n    distinctUntilChanged(),\n    shareReplay(1)\n  )\n\n  public readonly bottomOffset$ = this._bottomOffset$.asObservable().pipe(\n    distinctUntilChanged(),\n    shareReplay(1)\n  )\n\n  // Getters for synchronous access to current values\n  get scheme(): 'dark' | 'light' | 'auto' {\n    return ThemeContext.value.scheme\n  }\n\n  get color(): string {\n    return ThemeContext.value.color\n  }\n\n  get theme(): Partial<TSchmancyTheme> {\n    return this._theme$.getValue()\n  }\n\n  get themeComponent(): SchmancyThemeComponent | null {\n    return this._themeComponent$.getValue()\n  }\n\n  get fullscreen(): boolean {\n    return this._fullscreen$.getValue()\n  }\n\n  get bottomOffset(): number {\n    return this._bottomOffset$.getValue()\n  }\n\n  // Computed observable for actual scheme (resolving 'auto')\n  public readonly resolvedScheme$ = this.scheme$.pipe(\n    switchMap(scheme => {\n      if (scheme === 'auto') {\n        // Listen to system preference changes\n        const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')\n        return new Observable<'dark' | 'light'>(subscriber => {\n          const handler = (e: MediaQueryListEvent) => {\n            subscriber.next(e.matches ? 'dark' : 'light')\n          }\n          mediaQuery.addEventListener('change', handler)\n\n          // Emit initial value\n          subscriber.next(mediaQuery.matches ? 'dark' : 'light')\n\n          // Cleanup\n          return () => mediaQuery.removeEventListener('change', handler)\n        })\n      }\n      return of(scheme as 'dark' | 'light')\n    }),\n    distinctUntilChanged(),\n    shareReplay(1)\n  )\n\n  constructor() {\n    this.discoverTheme()\n  }\n\n  /**\n   * Discover the nearest theme component in the DOM.\n   * This method can be called to refresh the theme discovery process.\n   *\n   * @returns {Observable<SchmancyThemeComponent | null>} Observable that emits the discovered theme component or null\n   *\n   * @example\n   * ```typescript\n   * theme.discoverTheme().subscribe(component => {\n   *   if (component) {\n   *     console.log('Theme component found:', component)\n   *   } else {\n   *     console.log('No theme component found')\n   *   }\n   * })\n   * ```\n   */\n  public discoverTheme(): Observable<SchmancyThemeComponent | null> {\n    // Dispatch discovery event and wait for response\n    return fromEvent<ThemeHereIAmEvent>(window, ThemeHereIAm).pipe(\n      takeUntil(timer(100)), // Wait up to 100ms for response\n      map(e => e.detail.theme as SchmancyThemeComponent),\n      defaultIfEmpty(null),\n      tap(themeComponent => {\n        if (themeComponent) {\n          this.registerThemeComponent(themeComponent)\n        }\n      })\n    ).pipe(\n      tap(() => {\n        // Trigger theme discovery\n        window.dispatchEvent(\n          new CustomEvent(ThemeWhereAreYou, {\n            bubbles: true,\n            composed: true,\n          })\n        )\n      }),\n      switchMap(() =>\n        fromEvent<ThemeHereIAmEvent>(window, ThemeHereIAm).pipe(\n          takeUntil(timer(100)),\n          map(e => e.detail.theme as SchmancyThemeComponent),\n          defaultIfEmpty(null),\n          tap(themeComponent => {\n            if (themeComponent) {\n              this.registerThemeComponent(themeComponent)\n            }\n          })\n        )\n      )\n    )\n  }\n\n  /**\n   * Register a theme component and subscribe to its changes.\n   * This is typically called internally by theme components when they mount or update.\n   *\n   * @param {SchmancyThemeComponent} component - The theme component to register\n   *\n   * @internal\n   */\n  public registerThemeComponent(component: SchmancyThemeComponent): void {\n    this._themeComponent$.next(component)\n\n    // Update values from the component\n    ThemeContext.set({ scheme: component.scheme, color: component.color })\n    this._theme$.next(component.theme)\n  }\n\n  /**\n   * Update theme values. Usually called internally by theme components.\n   *\n   * @param {Object} values - Theme values to update\n   * @param {'dark' | 'light' | 'auto'} [values.scheme] - Color scheme to set\n   * @param {string} [values.color] - Primary color in hex format\n   * @param {Partial<TSchmancyTheme>} [values.theme] - Theme configuration object\n   *\n   * @internal\n   */\n  public updateTheme(values: {\n    scheme?: 'dark' | 'light' | 'auto'\n    color?: string\n    theme?: Partial<TSchmancyTheme>\n  }): void {\n    const updates: Partial<ThemeSettings> = {}\n    if (values.scheme !== undefined) {\n      updates.scheme = values.scheme\n    }\n    if (values.color !== undefined) {\n      updates.color = values.color\n    }\n    if (Object.keys(updates).length > 0) {\n      ThemeContext.set(updates)\n    }\n    if (values.theme !== undefined) {\n      this._theme$.next(values.theme)\n    }\n  }\n\n  /**\n   * Set the color scheme for the application.\n   *\n   * @param {'dark' | 'light' | 'auto'} scheme - The color scheme to set\n   *\n   * @example\n   * ```typescript\n   * // Set to dark mode\n   * theme.setScheme('dark')\n   *\n   * // Set to auto (follows system preference)\n   * theme.setScheme('auto')\n   * ```\n   */\n  public setScheme(scheme: 'dark' | 'light' | 'auto'): void {\n    const component = this.themeComponent\n    if (component) {\n      component.scheme = scheme\n      ThemeContext.set({ scheme })\n    } else {\n      console.warn('No theme component found. Scheme change may not persist.')\n      ThemeContext.set({ scheme })\n    }\n  }\n\n  /**\n   * Set the primary color for the theme.\n   *\n   * @param {string} color - Primary color in hex format (e.g., '#6200ee')\n   *\n   * @example\n   * ```typescript\n   * // Set primary color to purple\n   * theme.setColor('#6200ee')\n   *\n   * // Set primary color to blue\n   * theme.setColor('#2196f3')\n   * ```\n   */\n  public setColor(color: string): void {\n    const component = this.themeComponent\n    if (component) {\n      component.color = color\n      ThemeContext.set({ color })\n    } else {\n      console.warn('No theme component found. Color change may not persist.')\n      ThemeContext.set({ color })\n    }\n  }\n\n  /**\n   * Check if dark mode is currently active.\n   * This resolves 'auto' scheme to the actual value based on system preference.\n   *\n   * @returns {Observable<boolean>} Observable that emits true if dark mode is active, false otherwise\n   *\n   * @example\n   * ```typescript\n   * theme.isDarkMode().subscribe(isDark => {\n   *   if (isDark) {\n   *     console.log('Dark mode is active')\n   *   } else {\n   *     console.log('Light mode is active')\n   *   }\n   * })\n   * ```\n   */\n  public isDarkMode(): Observable<boolean> {\n    return this.resolvedScheme$.pipe(\n      map(scheme => scheme === 'dark')\n    )\n  }\n\n  /**\n   * Toggle between light and dark mode.\n   * If currently in 'auto' mode, defaults to 'light'.\n   *\n   * @example\n   * ```typescript\n   * // Toggle theme on button click\n   * button.addEventListener('click', () => {\n   *   theme.toggleScheme()\n   * })\n   * ```\n   */\n  public toggleScheme(): void {\n    const currentScheme = this.scheme\n    const newScheme = currentScheme === 'dark' ? 'light' :\n                     currentScheme === 'light' ? 'dark' :\n                     'light' // If 'auto', default to 'light'\n    this.setScheme(newScheme)\n  }\n\n  /**\n   * Get the current value of a CSS variable from the theme.\n   *\n   * @param {string} variableName - Name of the CSS variable (without '--schmancy-' prefix)\n   * @returns {string} The CSS variable value or empty string if not found\n   *\n   * @example\n   * ```typescript\n   * // Get primary color variable\n   * const primaryColor = theme.getCSSVariable('color-primary')\n   *\n   * // Get surface color\n   * const surfaceColor = theme.getCSSVariable('color-surface')\n   * ```\n   */\n  public getCSSVariable(variableName: string): string {\n    const component = this.themeComponent\n    if (component) {\n      const host = component.root ? document.body : (component.shadowRoot?.host as HTMLElement)\n      if (host) {\n        return getComputedStyle(host).getPropertyValue(`--schmancy-${variableName}`).trim()\n      }\n    }\n    return ''\n  }\n\n  /**\n   * Subscribe to changes of a specific CSS variable.\n   *\n   * @param {string} variableName - Name of the CSS variable to watch (without '--schmancy-' prefix)\n   * @returns {Observable<string>} Observable that emits the CSS variable value when it changes\n   *\n   * @example\n   * ```typescript\n   * // Watch for primary color changes\n   * theme.watchCSSVariable('color-primary').subscribe(color => {\n   *   console.log('Primary color changed to:', color)\n   * })\n   *\n   * // Watch for surface color changes\n   * theme.watchCSSVariable('color-surface').subscribe(color => {\n   *   console.log('Surface color changed to:', color)\n   * })\n   * ```\n   */\n  public watchCSSVariable(variableName: string): Observable<string> {\n    return this.theme$.pipe(\n      map(() => this.getCSSVariable(variableName)),\n      distinctUntilChanged()\n    )\n  }\n\n  /**\n   * Set the fullscreen state for the application.\n   * This emits a custom event that navigation components can listen to.\n   *\n   * @param {boolean} value - Whether fullscreen mode is active\n   *\n   * @example\n   * ```typescript\n   * // Enter fullscreen mode\n   * theme.setFullscreen(true)\n   *\n   * // Exit fullscreen mode\n   * theme.setFullscreen(false)\n   * ```\n   */\n  public setFullscreen(value: boolean): void {\n    this._fullscreen$.next(value)\n\n    // Emit custom event for components to listen to\n    window.dispatchEvent(\n      new CustomEvent('fullscreen', {\n        detail: value,\n        bubbles: true,\n        composed: true\n      })\n    )\n  }\n\n  /**\n   * Toggle fullscreen mode.\n   *\n   * @example\n   * ```typescript\n   * // Toggle fullscreen mode on button click\n   * button.addEventListener('click', () => {\n   *   theme.toggleFullscreen()\n   * })\n   * ```\n   */\n  public toggleFullscreen(): void {\n    this.setFullscreen(!this.fullscreen)\n  }\n\n  /**\n   * Set the bottom offset for viewport calculations.\n   * Used by navigation bars to inform fullHeight directive of reserved space.\n   *\n   * @param {number} value - Bottom offset in pixels\n   *\n   * @example\n   * ```typescript\n   * // Set bottom offset when nav bar is visible\n   * theme.setBottomOffset(80)\n   *\n   * // Clear bottom offset when nav bar is hidden\n   * theme.setBottomOffset(0)\n   * ```\n   */\n  public setBottomOffset(value: number): void {\n    this._bottomOffset$.next(value)\n  }\n\n  /**\n   * Convenience method to update theme state including fullscreen.\n   * Can be called with next() like syntax for familiarity.\n   *\n   * @param {Object} values - Theme values to update\n   * @param {boolean} [values.fullscreen] - Fullscreen state\n   * @param {'dark' | 'light' | 'auto'} [values.scheme] - Color scheme\n   * @param {string} [values.color] - Primary color\n   *\n   * @example\n   * ```typescript\n   * // Set fullscreen mode\n   * theme.next({ fullscreen: true })\n   *\n   * // Update multiple values\n   * theme.next({\n   *   fullscreen: true,\n   *   scheme: 'dark'\n   * })\n   * ```\n   */\n  public next(values: {\n    fullscreen?: boolean\n    scheme?: 'dark' | 'light' | 'auto'\n    color?: string\n  }): void {\n    if (values.fullscreen !== undefined) {\n      this.setFullscreen(values.fullscreen)\n    }\n    if (values.scheme !== undefined) {\n      this.setScheme(values.scheme)\n    }\n    if (values.color !== undefined) {\n      this.setColor(values.color)\n    }\n  }\n\n  /**\n   * Get the singleton instance of ThemeService.\n   *\n   * @returns {ThemeService} The singleton ThemeService instance\n   *\n   * @internal\n   */\n  static getInstance(): ThemeService {\n    if (!ThemeService.instance) {\n      ThemeService.instance = new ThemeService()\n    }\n    return ThemeService.instance\n  }\n}\n\n// Export singleton instance\nexport const theme = ThemeService.getInstance()\nexport const schmancyTheme = theme // Alias for convenience\nexport default theme"],"mappings":"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"}

package/dist/tooltip.cjs

@@ -1,2 +1,6 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./tooltip-ZtnGjoJd.cjs");Object.defineProperty(exports,"SchmancyTooltip",{enumerable:!0,get:()=>e.SchmancyTooltip}),exports.tooltip=e.tooltip;
-//# sourceMappingURL=tooltip.cjs.map
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`./chunk-BCfY8kxB.cjs`);const e=require(`./tailwind.mixin-DGiyLbEi.cjs`);let t=require(`rxjs`),n=require(`lit/decorators.js`),r=require(`lit`),i=require(`lit/directive.js`),a=require(`@floating-ui/dom`);var o=new WeakMap,s=class extends i.Directive{constructor(e){if(super(e),e.type!==i.PartType.ELEMENT)throw Error(`The tooltip directive can only be used on elements`)}render(e,t={}){return{text:e,options:t}}update(e,[n,r={}]){let i=e.element,s=r?.position||`top`,c=r?.delay||300,l=!1!==r?.showArrow,u=o.get(i);if(u)u.tooltipElement.textContent=n,u.arrowElement&&(u.arrowElement.style.visibility=l?`visible`:`hidden`);else{let e=document.createElement(`div`),r;e.className=`schmancy-tooltip`,Object.assign(e.style,{position:`absolute`,zIndex:`10000`,backgroundColor:`var(--schmancy-sys-color-surface-highest, #333)`,color:`var(--schmancy-sys-color-surface-on, white)`,padding:`8px 12px`,borderRadius:`4px`,fontSize:`14px`,fontWeight:`normal`,maxWidth:`300px`,pointerEvents:`none`,opacity:`0`,transition:`opacity 150ms ease`,boxShadow:`var(--schmancy-sys-elevation-2)`,textAlign:`center`,visibility:`hidden`}),l&&(r=document.createElement(`div`),r.className=`schmancy-tooltip-arrow`,Object.assign(r.style,{position:`absolute`,width:`8px`,height:`8px`,background:`inherit`,visibility:`hidden`,transform:`rotate(45deg)`}),e.appendChild(r)),e.setAttribute(`role`,`tooltip`);let d=`tooltip-${Math.random().toString(36).slice(2,9)}`;e.id=d,i.setAttribute(`aria-describedby`,d),document.body.appendChild(e),u={tooltipElement:e,arrowElement:r},o.set(i,u);let f=()=>{u?.showTimeout&&clearTimeout(u.showTimeout),u.showTimeout=window.setTimeout(()=>{u.tooltipElement.textContent=n,l&&u.arrowElement&&!u.tooltipElement.contains(u.arrowElement)&&u.tooltipElement.appendChild(u.arrowElement),u.tooltipElement.style.visibility=`visible`,u.cleanup&&u.cleanup(),u.cleanup=(0,a.autoUpdate)(i,u.tooltipElement,()=>async function(e,t,n,r){let i=[(0,a.offset)(8),(0,a.flip)({fallbackPlacements:[`top`,`right`,`bottom`,`left`].filter(e=>e!==n),padding:5}),(0,a.shift)({padding:5})];r&&t.arrowElement&&i.push((0,a.arrow)({element:t.arrowElement}));let{x:o,y:s,placement:c,middlewareData:l}=await(0,a.computePosition)(e,t.tooltipElement,{placement:n,middleware:i,strategy:`fixed`});if(Object.assign(t.tooltipElement.style,{left:`${o}px`,top:`${s}px`,position:`fixed`}),r&&t.arrowElement&&l.arrow){let{x:e,y:n}=l.arrow,r={top:`bottom`,right:`left`,bottom:`top`,left:`right`}[c.split(`-`)[0]]||`bottom`;Object.assign(t.arrowElement.style,{left:e==null?``:`${e}px`,top:n==null?``:`${n}px`,[r]:`-4px`,visibility:`visible`})}}(i,u,s,l)),requestAnimationFrame(()=>{u.tooltipElement.style.opacity=`1`})},c)},p=()=>{u?.showTimeout&&clearTimeout(u.showTimeout),u.tooltipElement.style.opacity=`0`,setTimeout(()=>{u.tooltipElement.style.visibility=`hidden`},150),u?.cleanup&&(u.cleanup(),u.cleanup=void 0)},m=[(0,t.fromEvent)(i,`mouseenter`).subscribe(f),(0,t.fromEvent)(i,`focus`).subscribe(f),(0,t.fromEvent)(i,`mouseleave`).subscribe(p),(0,t.fromEvent)(i,`blur`).subscribe(p),(0,t.fromEvent)(document,`keydown`).subscribe(e=>{e.key===`Escape`&&u?.tooltipElement.style.opacity===`1`&&p()})];u.subscriptions=m}return{text:n,options:r}}disconnected(e){let t=e.element,n=o.get(t);n&&(n.subscriptions&&n.subscriptions.forEach(e=>e.unsubscribe()),n.showTimeout&&clearTimeout(n.showTimeout),n.cleanup&&n.cleanup(),document.body.contains(n.tooltipElement)&&document.body.removeChild(n.tooltipElement),t.hasAttribute(`aria-describedby`)&&t.removeAttribute(`aria-describedby`),o.delete(t))}},c=(0,i.directive)(s),l=class extends e.t(r.css`
+	:host {
+		display: inline-block;
+		position: relative;
+	}
+`){constructor(...e){super(...e),this.text=``,this.position=`top`,this.delay=50,this.disabled=!1,this.visible=!1,this.triggerElement=null,this.tooltipElement=null}connectedCallback(){super.connectedCallback(),this.tooltipElement||this.createTooltipElement()}firstUpdated(){this.updateComplete.then(()=>{let e=(this.shadowRoot?.querySelector(`slot`))?.assignedElements()||[];e.length>0&&(this.triggerElement=e[0],this.setupEvents())})}createTooltipElement(){this.tooltipElement=document.createElement(`div`),this.tooltipElement.className=`schmancy-tooltip`,Object.assign(this.tooltipElement.style,{position:`absolute`,zIndex:`10000`,backgroundColor:`var(--schmancy-sys-color-surface-highest, #333)`,color:`var(--schmancy-sys-color-surface-on, white)`,padding:`8px 12px`,borderRadius:`4px`,fontSize:`14px`,fontWeight:`normal`,maxWidth:`300px`,pointerEvents:`none`,opacity:`0`,transition:`opacity 150ms ease`,boxShadow:`var(--schmancy-sys-elevation-2)`,textAlign:`center`}),this.tooltipElement.setAttribute(`role`,`tooltip`),document.body.appendChild(this.tooltipElement)}setupEvents(){if(!this.triggerElement||this.disabled)return;let e=`tooltip-${Math.random().toString(36).slice(2,9)}`;this.tooltipElement&&(this.tooltipElement.id=e,this.triggerElement.setAttribute(`aria-describedby`,e));let n=(0,t.fromEvent)(this.triggerElement,`mouseenter`),r=(0,t.fromEvent)(this.triggerElement,`focus`),i=(0,t.fromEvent)(this.triggerElement,`mouseleave`),a=(0,t.fromEvent)(this.triggerElement,`blur`);(0,t.fromEvent)(document,`keydown`).pipe((0,t.takeUntil)(this.disconnecting)).subscribe(e=>{e.key===`Escape`&&this.visible&&this.hideTooltip()}),(0,t.merge)(n,r).pipe((0,t.takeUntil)(this.disconnecting)).subscribe(()=>{this.showTooltip()}),(0,t.merge)(i,a).pipe((0,t.takeUntil)(this.disconnecting)).subscribe(()=>{this.hideTooltip()})}disconnectedCallback(){this.tooltipElement&&document.body.contains(this.tooltipElement)&&document.body.removeChild(this.tooltipElement),this.cleanup?.(),clearTimeout(this.showTimeoutId),super.disconnectedCallback()}showTooltip(){!this.disabled&&this.tooltipElement&&this.triggerElement&&(clearTimeout(this.showTimeoutId),this.showTimeoutId=window.setTimeout(()=>{this.tooltipElement&&(this.tooltipElement.textContent=this.text,this.visible=!0,this.tooltipElement.style.opacity=`1`,this.initializePositioning())},this.delay))}hideTooltip(){clearTimeout(this.showTimeoutId),this.tooltipElement&&(this.visible=!1,this.tooltipElement.style.opacity=`0`),this.cleanup&&=(this.cleanup(),void 0)}initializePositioning(){this.triggerElement&&this.tooltipElement&&(this.cleanup&&this.cleanup(),this.cleanup=(0,a.autoUpdate)(this.triggerElement,this.tooltipElement,()=>{(0,a.computePosition)(this.triggerElement,this.tooltipElement,{placement:this.position,middleware:[(0,a.offset)(8),(0,a.flip)({padding:5}),(0,a.shift)({padding:5})]}).then(({x:e,y:t})=>{this.tooltipElement&&Object.assign(this.tooltipElement.style,{left:`${e}px`,top:`${t}px`})})}))}render(){return r.html`<slot></slot>`}};e.i([(0,n.property)({type:String})],l.prototype,`text`,void 0),e.i([(0,n.property)({type:String})],l.prototype,`position`,void 0),e.i([(0,n.property)({type:Number})],l.prototype,`delay`,void 0),e.i([(0,n.property)({type:Boolean})],l.prototype,`disabled`,void 0),e.i([(0,n.state)()],l.prototype,`visible`,void 0),l=e.i([(0,n.customElement)(`schmancy-tooltip`)],l),Object.defineProperty(exports,`SchmancyTooltip`,{enumerable:!0,get:function(){return l}}),exports.tooltip=c;

package/dist/tooltip.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}
+{"version":3,"file":"tooltip.cjs","names":[],"sources":["../src/tooltip/tooltip.directive.ts","../src/tooltip/tooltip.ts"],"sourcesContent":["import { arrow, autoUpdate, computePosition, flip, offset, Placement, shift, Strategy } from '@floating-ui/dom'\nimport { Directive, directive, ElementPart, ElementPartInfo, PartType } from 'lit/directive.js'\nimport { fromEvent, Subscription } from 'rxjs'\n\n// Store tooltip data for elements\nconst tooltipMap = new WeakMap<\n\tElement,\n\t{\n\t\ttooltipElement: HTMLElement\n\t\tarrowElement?: HTMLElement\n\t\tcleanup?: () => void\n\t\tshowTimeout?: number\n\t\tsubscriptions?: Subscription[]\n\t}\n>()\n\nclass TooltipDirective extends Directive {\n\tconstructor(partInfo: ElementPartInfo) {\n\t\tsuper(partInfo)\n\t\tif (partInfo.type !== PartType.ELEMENT) {\n\t\t\tthrow new Error('The tooltip directive can only be used on elements')\n\t\t}\n\t}\n\n\trender(\n\t\ttext: string,\n\t\toptions: {\n\t\t\tposition?: 'top' | 'right' | 'bottom' | 'left'\n\t\t\tdelay?: number\n\t\t\tshowArrow?: boolean\n\t\t} = {},\n\t) {\n\t\treturn { text, options }\n\t}\n\n\tupdate(part: ElementPart, [text, options = {}]: [string, any]) {\n\t\tconst element = part.element as HTMLElement\n\t\tconst position = options?.position || 'top'\n\t\tconst delay = options?.delay || 300\n\t\tconst showArrow = options?.showArrow !== false // Default to true\n\n\t\t// Get or create tooltip data\n\t\tlet tooltipData = tooltipMap.get(element)\n\n\t\tif (!tooltipData) {\n\t\t\t// Create tooltip element\n\t\t\tconst tooltipElement = document.createElement('div')\n\t\t\ttooltipElement.className = 'schmancy-tooltip'\n\n\t\t\t// Apply styles\n\t\t\tObject.assign(tooltipElement.style, {\n\t\t\t\tposition: 'absolute',\n\t\t\t\tzIndex: '10000',\n\t\t\t\tbackgroundColor: 'var(--schmancy-sys-color-surface-highest, #333)',\n\t\t\t\tcolor: 'var(--schmancy-sys-color-surface-on, white)',\n\t\t\t\tpadding: '8px 12px',\n\t\t\t\tborderRadius: '4px',\n\t\t\t\tfontSize: '14px',\n\t\t\t\tfontWeight: 'normal',\n\t\t\t\tmaxWidth: '300px',\n\t\t\t\tpointerEvents: 'none',\n\t\t\t\topacity: '0',\n\t\t\t\ttransition: 'opacity 150ms ease',\n\t\t\t\tboxShadow: 'var(--schmancy-sys-elevation-2)',\n\t\t\t\ttextAlign: 'center',\n\t\t\t\t// Important: start with visibility hidden to avoid flash\n\t\t\t\tvisibility: 'hidden',\n\t\t\t})\n\n\t\t\t// Create arrow element if needed\n\t\t\tlet arrowElement: HTMLElement | undefined\n\t\t\tif (showArrow) {\n\t\t\t\tarrowElement = document.createElement('div')\n\t\t\t\tarrowElement.className = 'schmancy-tooltip-arrow'\n\t\t\t\tObject.assign(arrowElement.style, {\n\t\t\t\t\tposition: 'absolute',\n\t\t\t\t\twidth: '8px',\n\t\t\t\t\theight: '8px',\n\t\t\t\t\tbackground: 'inherit',\n\t\t\t\t\tvisibility: 'hidden',\n\t\t\t\t\t// We'll rotate this to create an arrow\n\t\t\t\t\ttransform: 'rotate(45deg)',\n\t\t\t\t})\n\t\t\t\ttooltipElement.appendChild(arrowElement)\n\t\t\t}\n\n\t\t\t// Set ARIA attributes\n\t\t\ttooltipElement.setAttribute('role', 'tooltip')\n\n\t\t\t// Generate unique ID\n\t\t\tconst tooltipId = `tooltip-${Math.random().toString(36).slice(2, 9)}`\n\t\t\ttooltipElement.id = tooltipId\n\t\t\telement.setAttribute('aria-describedby', tooltipId)\n\n\t\t\t// Add to document\n\t\t\tdocument.body.appendChild(tooltipElement)\n\n\t\t\t// Create tooltip data\n\t\t\ttooltipData = {\n\t\t\t\ttooltipElement,\n\t\t\t\tarrowElement,\n\t\t\t}\n\n\t\t\ttooltipMap.set(element, tooltipData)\n\n\t\t\t// Define show handler\n\t\t\tconst showTooltip = () => {\n\t\t\t\tif (tooltipData?.showTimeout) {\n\t\t\t\t\tclearTimeout(tooltipData.showTimeout)\n\t\t\t\t}\n\n\t\t\t\ttooltipData.showTimeout = window.setTimeout(() => {\n\t\t\t\t\t// Set content\n\t\t\t\t\ttooltipData.tooltipElement.textContent = text\n\n\t\t\t\t\t// Add arrow back if it was removed\n\t\t\t\t\tif (showArrow && tooltipData.arrowElement && !tooltipData.tooltipElement.contains(tooltipData.arrowElement)) {\n\t\t\t\t\t\ttooltipData.tooltipElement.appendChild(tooltipData.arrowElement)\n\t\t\t\t\t}\n\n\t\t\t\t\t// Make sure element is visible first\n\t\t\t\t\ttooltipData.tooltipElement.style.visibility = 'visible'\n\n\t\t\t\t\t// Clean up existing positioning\n\t\t\t\t\tif (tooltipData.cleanup) {\n\t\t\t\t\t\ttooltipData.cleanup()\n\t\t\t\t\t}\n\n\t\t\t\t\t// Set up positioning\n\t\t\t\t\ttooltipData.cleanup = autoUpdate(element, tooltipData.tooltipElement, () =>\n\t\t\t\t\t\tupdatePosition(element, tooltipData, position, showArrow),\n\t\t\t\t\t)\n\n\t\t\t\t\t// Make opacity 1 after positioning is set up\n\t\t\t\t\trequestAnimationFrame(() => {\n\t\t\t\t\t\ttooltipData.tooltipElement.style.opacity = '1'\n\t\t\t\t\t})\n\t\t\t\t}, delay)\n\t\t\t}\n\n\t\t\t// Define hide handler\n\t\t\tconst hideTooltip = () => {\n\t\t\t\tif (tooltipData?.showTimeout) {\n\t\t\t\t\tclearTimeout(tooltipData.showTimeout)\n\t\t\t\t}\n\n\t\t\t\ttooltipData.tooltipElement.style.opacity = '0'\n\n\t\t\t\t// Set visibility to hidden after fade out\n\t\t\t\tsetTimeout(() => {\n\t\t\t\t\ttooltipData.tooltipElement.style.visibility = 'hidden'\n\t\t\t\t}, 150) // Match transition time\n\n\t\t\t\t// Clean up positioning\n\t\t\t\tif (tooltipData?.cleanup) {\n\t\t\t\t\ttooltipData.cleanup()\n\t\t\t\t\ttooltipData.cleanup = undefined\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t// Add event listeners using fromEvent\n\t\t\tconst subscriptions = [\n\t\t\t\tfromEvent(element, 'mouseenter').subscribe(showTooltip),\n\t\t\t\tfromEvent(element, 'focus').subscribe(showTooltip),\n\t\t\t\tfromEvent(element, 'mouseleave').subscribe(hideTooltip),\n\t\t\t\tfromEvent(element, 'blur').subscribe(hideTooltip),\n\t\t\t\tfromEvent<KeyboardEvent>(document, 'keydown').subscribe((e: KeyboardEvent) => {\n\t\t\t\t\tif (e.key === 'Escape' && tooltipData?.tooltipElement.style.opacity === '1') {\n\t\t\t\t\t\thideTooltip()\n\t\t\t\t\t}\n\t\t\t\t})\n\t\t\t]\n\n\t\t\t// Store subscriptions for cleanup\n\t\t\ttooltipData.subscriptions = subscriptions\n\t\t} else {\n\t\t\t// Update content for existing tooltip\n\t\t\ttooltipData.tooltipElement.textContent = text\n\n\t\t\t// Update arrow visibility if needed\n\t\t\tif (tooltipData.arrowElement) {\n\t\t\t\ttooltipData.arrowElement.style.visibility = showArrow ? 'visible' : 'hidden'\n\t\t\t}\n\t\t}\n\n\t\treturn { text, options }\n\t}\n\n\tdisconnected(part: ElementPart) {\n\t\tconst element = part.element\n\t\tconst tooltipData = tooltipMap.get(element)\n\n\t\tif (tooltipData) {\n\t\t\t// Clean up subscriptions\n\t\t\tif (tooltipData.subscriptions) {\n\t\t\t\ttooltipData.subscriptions.forEach(subscription => subscription.unsubscribe())\n\t\t\t}\n\n\t\t\t// Clean up timeouts and positioning\n\t\t\tif (tooltipData.showTimeout) {\n\t\t\t\tclearTimeout(tooltipData.showTimeout)\n\t\t\t}\n\n\t\t\tif (tooltipData.cleanup) {\n\t\t\t\ttooltipData.cleanup()\n\t\t\t}\n\n\t\t\t// Remove tooltip element\n\t\t\tif (document.body.contains(tooltipData.tooltipElement)) {\n\t\t\t\tdocument.body.removeChild(tooltipData.tooltipElement)\n\t\t\t}\n\n\t\t\t// Remove ARIA attributes\n\t\t\tif (element.hasAttribute('aria-describedby')) {\n\t\t\t\telement.removeAttribute('aria-describedby')\n\t\t\t}\n\n\t\t\t// Remove from WeakMap\n\t\t\ttooltipMap.delete(element)\n\t\t}\n\t}\n}\n\n// Separate positioning function for clarity and reuse\nasync function updatePosition(element: HTMLElement, tooltipData: any, position: string, showArrow: boolean) {\n\t// Use floating-ui to compute position\n\tconst middleware = [\n\t\toffset(8), // Distance from the element\n\t\tflip({\n\t\t\tfallbackPlacements: ['top', 'right', 'bottom', 'left'].filter(p => p !== position) as Placement[],\n\t\t\tpadding: 5, // How far from the edges before flipping\n\t\t}),\n\t\tshift({ padding: 5 }), // Keep it within viewport bounds\n\t]\n\n\t// Add arrow middleware if needed\n\tif (showArrow && tooltipData.arrowElement) {\n\t\tmiddleware.push(arrow({ element: tooltipData.arrowElement }))\n\t}\n\n\tconst { x, y, placement, middlewareData } = await computePosition(element, tooltipData.tooltipElement, {\n\t\tplacement: position as Placement,\n\t\tmiddleware,\n\t\tstrategy: 'fixed' as Strategy, // Fixed positioning works better across contexts\n\t})\n\n\t// Apply position\n\tObject.assign(tooltipData.tooltipElement.style, {\n\t\tleft: `${x}px`,\n\t\ttop: `${y}px`,\n\t\tposition: 'fixed',\n\t})\n\n\t// Position the arrow if it exists\n\tif (showArrow && tooltipData.arrowElement && middlewareData.arrow) {\n\t\tconst { x: arrowX, y: arrowY } = middlewareData.arrow\n\n\t\t// Determine which side the arrow should be on based on placement\n\t\tconst staticSide =\n\t\t\t{\n\t\t\t\ttop: 'bottom',\n\t\t\t\tright: 'left',\n\t\t\t\tbottom: 'top',\n\t\t\t\tleft: 'right',\n\t\t\t}[placement.split('-')[0]] || 'bottom'\n\n\t\t// Position the arrow\n\t\tObject.assign(tooltipData.arrowElement.style, {\n\t\t\tleft: arrowX != null ? `${arrowX}px` : '',\n\t\t\ttop: arrowY != null ? `${arrowY}px` : '',\n\t\t\t[staticSide]: '-4px', // Position the arrow on the correct side\n\t\t\tvisibility: 'visible',\n\t\t})\n\t}\n}\n\nexport const tooltip = directive(TooltipDirective)\n","import { TailwindElement } from '@mixins/tailwind.mixin'\nimport { html, css } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { fromEvent, merge, takeUntil } from 'rxjs'\nimport { computePosition, flip, shift, offset, autoUpdate, Placement } from '@floating-ui/dom'\n\n/**\n * A tooltip component that displays a text tooltip when hovering over content.\n * Addresses shadow DOM limitations by teleporting the tooltip to document.body.\n *\n * @element schmancy-tooltip\n */\n@customElement('schmancy-tooltip')\nexport class SchmancyTooltip extends TailwindElement(css`\n\t:host {\n\t\tdisplay: inline-block;\n\t\tposition: relative;\n\t}\n`) {\n\t@property({ type: String })\n\ttext = ''\n\n\t@property({ type: String })\n\tposition: 'top' | 'right' | 'bottom' | 'left' = 'top'\n\n\t@property({ type: Number })\n\tdelay = 50\n\n\t@property({ type: Boolean })\n\tdisabled = false\n\n\t@state() private visible = false\n\n\tprivate triggerElement: HTMLElement | null = null\n\tprivate tooltipElement: HTMLElement | null = null\n\tprivate cleanup: (() => void) | undefined\n\tprivate showTimeoutId: number | undefined\n\n\tconnectedCallback() {\n\t\tsuper.connectedCallback()\n\n\t\t// Create tooltip element once\n\t\tif (!this.tooltipElement) {\n\t\t\tthis.createTooltipElement()\n\t\t}\n\t}\n\n\tfirstUpdated() {\n\t\t// Wait for slotted elements to be available\n\t\tthis.updateComplete.then(() => {\n\t\t\t// Get the first slotted element as trigger\n\t\t\tconst slot = this.shadowRoot?.querySelector('slot') as HTMLSlotElement\n\t\t\tconst slottedElements = slot?.assignedElements() || []\n\n\t\t\tif (slottedElements.length > 0) {\n\t\t\t\tthis.triggerElement = slottedElements[0] as HTMLElement\n\t\t\t\tthis.setupEvents()\n\t\t\t}\n\t\t})\n\t}\n\n\tprivate createTooltipElement() {\n\t\t// Create the tooltip element in document.body\n\t\tthis.tooltipElement = document.createElement('div')\n\t\tthis.tooltipElement.className = 'schmancy-tooltip'\n\n\t\t// Apply styles\n\t\tObject.assign(this.tooltipElement.style, {\n\t\t\tposition: 'absolute',\n\t\t\tzIndex: '10000',\n\t\t\tbackgroundColor: 'var(--schmancy-sys-color-surface-highest, #333)',\n\t\t\tcolor: 'var(--schmancy-sys-color-surface-on, white)',\n\t\t\tpadding: '8px 12px',\n\t\t\tborderRadius: '4px',\n\t\t\tfontSize: '14px',\n\t\t\tfontWeight: 'normal',\n\t\t\tmaxWidth: '300px',\n\t\t\tpointerEvents: 'none',\n\t\t\topacity: '0',\n\t\t\ttransition: 'opacity 150ms ease',\n\t\t\tboxShadow: 'var(--schmancy-sys-elevation-2)',\n\t\t\ttextAlign: 'center',\n\t\t})\n\n\t\t// Set ARIA attributes\n\t\tthis.tooltipElement.setAttribute('role', 'tooltip')\n\n\t\t// Add to document\n\t\tdocument.body.appendChild(this.tooltipElement)\n\t}\n\n\tprivate setupEvents() {\n\t\tif (!this.triggerElement || this.disabled) return\n\n\t\t// Generate unique ID for ARIA\n\t\tconst tooltipId = `tooltip-${Math.random().toString(36).slice(2, 9)}`\n\t\tif (this.tooltipElement) {\n\t\t\tthis.tooltipElement.id = tooltipId\n\t\t\tthis.triggerElement.setAttribute('aria-describedby', tooltipId)\n\t\t}\n\n\t\t// Setup event streams using RxJS\n\t\tconst mouseEnter$ = fromEvent(this.triggerElement, 'mouseenter')\n\t\tconst focus$ = fromEvent(this.triggerElement, 'focus')\n\t\tconst mouseLeave$ = fromEvent(this.triggerElement, 'mouseleave')\n\t\tconst blur$ = fromEvent(this.triggerElement, 'blur')\n\n\t\t// Global escape key handler\n\t\tfromEvent<KeyboardEvent>(document, 'keydown')\n\t\t\t.pipe(takeUntil(this.disconnecting))\n\t\t\t.subscribe(event => {\n\t\t\t\tif (event.key === 'Escape' && this.visible) {\n\t\t\t\t\tthis.hideTooltip()\n\t\t\t\t}\n\t\t\t})\n\n\t\t// Handle showing\n\t\tmerge(mouseEnter$, focus$)\n\t\t\t.pipe(takeUntil(this.disconnecting))\n\t\t\t.subscribe(() => {\n\t\t\t\tthis.showTooltip()\n\t\t\t})\n\n\t\t// Handle hiding\n\t\tmerge(mouseLeave$, blur$)\n\t\t\t.pipe(takeUntil(this.disconnecting))\n\t\t\t.subscribe(() => {\n\t\t\t\tthis.hideTooltip()\n\t\t\t})\n\t}\n\n\tdisconnectedCallback() {\n\t\t// Clean up\n\t\tif (this.tooltipElement && document.body.contains(this.tooltipElement)) {\n\t\t\tdocument.body.removeChild(this.tooltipElement)\n\t\t}\n\t\tthis.cleanup?.()\n\t\tclearTimeout(this.showTimeoutId)\n\t\tsuper.disconnectedCallback()\n\t}\n\n\tprivate showTooltip() {\n\t\tif (this.disabled || !this.tooltipElement || !this.triggerElement) return\n\n\t\t// Clear any existing timeout\n\t\tclearTimeout(this.showTimeoutId)\n\n\t\t// Set timeout for showing\n\t\tthis.showTimeoutId = window.setTimeout(() => {\n\t\t\t// Update content\n\t\t\tif (this.tooltipElement) {\n\t\t\t\tthis.tooltipElement.textContent = this.text\n\n\t\t\t\t// Make visible\n\t\t\t\tthis.visible = true\n\t\t\t\tthis.tooltipElement.style.opacity = '1'\n\n\t\t\t\t// Initialize positioning\n\t\t\t\tthis.initializePositioning()\n\t\t\t}\n\t\t}, this.delay)\n\t}\n\n\tprivate hideTooltip() {\n\t\t// Clear showing timeout\n\t\tclearTimeout(this.showTimeoutId)\n\n\t\t// Hide tooltip\n\t\tif (this.tooltipElement) {\n\t\t\tthis.visible = false\n\t\t\tthis.tooltipElement.style.opacity = '0'\n\t\t}\n\n\t\t// Clean up positioning\n\t\tif (this.cleanup) {\n\t\t\tthis.cleanup()\n\t\t\tthis.cleanup = undefined\n\t\t}\n\t}\n\n\tprivate initializePositioning() {\n\t\tif (!this.triggerElement || !this.tooltipElement) return\n\n\t\t// Clean up existing positioning\n\t\tif (this.cleanup) {\n\t\t\tthis.cleanup()\n\t\t}\n\n\t\t// Set up auto-updating position\n\t\tthis.cleanup = autoUpdate(this.triggerElement, this.tooltipElement, () => {\n\t\t\t// Compute position\n\t\t\tcomputePosition(this.triggerElement!, this.tooltipElement!, {\n\t\t\t\tplacement: this.position as Placement,\n\t\t\t\tmiddleware: [offset(8), flip({ padding: 5 }), shift({ padding: 5 })],\n\t\t\t}).then(({ x, y }) => {\n\t\t\t\t// Apply position\n\t\t\t\tif (this.tooltipElement) {\n\t\t\t\t\tObject.assign(this.tooltipElement.style, {\n\t\t\t\t\t\tleft: `${x}px`,\n\t\t\t\t\t\ttop: `${y}px`,\n\t\t\t\t\t})\n\t\t\t\t}\n\t\t\t})\n\t\t})\n\t}\n\n\trender() {\n\t\treturn html`<slot></slot>`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-tooltip': SchmancyTooltip\n\t}\n}\n"],"mappings":"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"}

package/dist/tooltip.js

@@ -1,6 +1,201 @@
-import { S as a, t as p } from "./tooltip-CjdvBf4X.js";
-export {
-  a as SchmancyTooltip,
-  p as tooltip
+import { i as e, t } from "./tailwind.mixin-C4cx3IOr.js";
+import { fromEvent as n, merge as r, takeUntil as i } from "rxjs";
+import { customElement as a, property as o, state as s } from "lit/decorators.js";
+import { css as c, html as l } from "lit";
+import { Directive as u, PartType as d, directive as f } from "lit/directive.js";
+import { arrow as p, autoUpdate as m, computePosition as h, flip as g, offset as _, shift as v } from "@floating-ui/dom";
+var y = /* @__PURE__ */ new WeakMap(), b = f(class extends u {
+	constructor(e) {
+		if (super(e), e.type !== d.ELEMENT) throw Error("The tooltip directive can only be used on elements");
+	}
+	render(e, t = {}) {
+		return {
+			text: e,
+			options: t
+		};
+	}
+	update(e, [t, r = {}]) {
+		let i = e.element, a = r?.position || "top", o = r?.delay || 300, s = !1 !== r?.showArrow, c = y.get(i);
+		if (c) c.tooltipElement.textContent = t, c.arrowElement && (c.arrowElement.style.visibility = s ? "visible" : "hidden");
+		else {
+			let e = document.createElement("div"), r;
+			e.className = "schmancy-tooltip", Object.assign(e.style, {
+				position: "absolute",
+				zIndex: "10000",
+				backgroundColor: "var(--schmancy-sys-color-surface-highest, #333)",
+				color: "var(--schmancy-sys-color-surface-on, white)",
+				padding: "8px 12px",
+				borderRadius: "4px",
+				fontSize: "14px",
+				fontWeight: "normal",
+				maxWidth: "300px",
+				pointerEvents: "none",
+				opacity: "0",
+				transition: "opacity 150ms ease",
+				boxShadow: "var(--schmancy-sys-elevation-2)",
+				textAlign: "center",
+				visibility: "hidden"
+			}), s && (r = document.createElement("div"), r.className = "schmancy-tooltip-arrow", Object.assign(r.style, {
+				position: "absolute",
+				width: "8px",
+				height: "8px",
+				background: "inherit",
+				visibility: "hidden",
+				transform: "rotate(45deg)"
+			}), e.appendChild(r)), e.setAttribute("role", "tooltip");
+			let l = `tooltip-${Math.random().toString(36).slice(2, 9)}`;
+			e.id = l, i.setAttribute("aria-describedby", l), document.body.appendChild(e), c = {
+				tooltipElement: e,
+				arrowElement: r
+			}, y.set(i, c);
+			let u = () => {
+				c?.showTimeout && clearTimeout(c.showTimeout), c.showTimeout = window.setTimeout(() => {
+					c.tooltipElement.textContent = t, s && c.arrowElement && !c.tooltipElement.contains(c.arrowElement) && c.tooltipElement.appendChild(c.arrowElement), c.tooltipElement.style.visibility = "visible", c.cleanup && c.cleanup(), c.cleanup = m(i, c.tooltipElement, () => async function(e, t, n, r) {
+						let i = [
+							_(8),
+							g({
+								fallbackPlacements: [
+									"top",
+									"right",
+									"bottom",
+									"left"
+								].filter((e) => e !== n),
+								padding: 5
+							}),
+							v({ padding: 5 })
+						];
+						r && t.arrowElement && i.push(p({ element: t.arrowElement }));
+						let { x: a, y: o, placement: s, middlewareData: c } = await h(e, t.tooltipElement, {
+							placement: n,
+							middleware: i,
+							strategy: "fixed"
+						});
+						if (Object.assign(t.tooltipElement.style, {
+							left: `${a}px`,
+							top: `${o}px`,
+							position: "fixed"
+						}), r && t.arrowElement && c.arrow) {
+							let { x: e, y: n } = c.arrow, r = {
+								top: "bottom",
+								right: "left",
+								bottom: "top",
+								left: "right"
+							}[s.split("-")[0]] || "bottom";
+							Object.assign(t.arrowElement.style, {
+								left: e == null ? "" : `${e}px`,
+								top: n == null ? "" : `${n}px`,
+								[r]: "-4px",
+								visibility: "visible"
+							});
+						}
+					}(i, c, a, s)), requestAnimationFrame(() => {
+						c.tooltipElement.style.opacity = "1";
+					});
+				}, o);
+			}, d = () => {
+				c?.showTimeout && clearTimeout(c.showTimeout), c.tooltipElement.style.opacity = "0", setTimeout(() => {
+					c.tooltipElement.style.visibility = "hidden";
+				}, 150), c?.cleanup && (c.cleanup(), c.cleanup = void 0);
+			}, f = [
+				n(i, "mouseenter").subscribe(u),
+				n(i, "focus").subscribe(u),
+				n(i, "mouseleave").subscribe(d),
+				n(i, "blur").subscribe(d),
+				n(document, "keydown").subscribe((e) => {
+					e.key === "Escape" && c?.tooltipElement.style.opacity === "1" && d();
+				})
+			];
+			c.subscriptions = f;
+		}
+		return {
+			text: t,
+			options: r
+		};
+	}
+	disconnected(e) {
+		let t = e.element, n = y.get(t);
+		n && (n.subscriptions && n.subscriptions.forEach((e) => e.unsubscribe()), n.showTimeout && clearTimeout(n.showTimeout), n.cleanup && n.cleanup(), document.body.contains(n.tooltipElement) && document.body.removeChild(n.tooltipElement), t.hasAttribute("aria-describedby") && t.removeAttribute("aria-describedby"), y.delete(t));
+	}
+}), x = class extends t(c`
+	:host {
+		display: inline-block;
+		position: relative;
+	}
+`) {
+	constructor(...e) {
+		super(...e), this.text = "", this.position = "top", this.delay = 50, this.disabled = !1, this.visible = !1, this.triggerElement = null, this.tooltipElement = null;
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.tooltipElement || this.createTooltipElement();
+	}
+	firstUpdated() {
+		this.updateComplete.then(() => {
+			let e = (this.shadowRoot?.querySelector("slot"))?.assignedElements() || [];
+			e.length > 0 && (this.triggerElement = e[0], this.setupEvents());
+		});
+	}
+	createTooltipElement() {
+		this.tooltipElement = document.createElement("div"), this.tooltipElement.className = "schmancy-tooltip", Object.assign(this.tooltipElement.style, {
+			position: "absolute",
+			zIndex: "10000",
+			backgroundColor: "var(--schmancy-sys-color-surface-highest, #333)",
+			color: "var(--schmancy-sys-color-surface-on, white)",
+			padding: "8px 12px",
+			borderRadius: "4px",
+			fontSize: "14px",
+			fontWeight: "normal",
+			maxWidth: "300px",
+			pointerEvents: "none",
+			opacity: "0",
+			transition: "opacity 150ms ease",
+			boxShadow: "var(--schmancy-sys-elevation-2)",
+			textAlign: "center"
+		}), this.tooltipElement.setAttribute("role", "tooltip"), document.body.appendChild(this.tooltipElement);
+	}
+	setupEvents() {
+		if (!this.triggerElement || this.disabled) return;
+		let e = `tooltip-${Math.random().toString(36).slice(2, 9)}`;
+		this.tooltipElement && (this.tooltipElement.id = e, this.triggerElement.setAttribute("aria-describedby", e));
+		let t = n(this.triggerElement, "mouseenter"), a = n(this.triggerElement, "focus"), o = n(this.triggerElement, "mouseleave"), s = n(this.triggerElement, "blur");
+		n(document, "keydown").pipe(i(this.disconnecting)).subscribe((e) => {
+			e.key === "Escape" && this.visible && this.hideTooltip();
+		}), r(t, a).pipe(i(this.disconnecting)).subscribe(() => {
+			this.showTooltip();
+		}), r(o, s).pipe(i(this.disconnecting)).subscribe(() => {
+			this.hideTooltip();
+		});
+	}
+	disconnectedCallback() {
+		this.tooltipElement && document.body.contains(this.tooltipElement) && document.body.removeChild(this.tooltipElement), this.cleanup?.(), clearTimeout(this.showTimeoutId), super.disconnectedCallback();
+	}
+	showTooltip() {
+		!this.disabled && this.tooltipElement && this.triggerElement && (clearTimeout(this.showTimeoutId), this.showTimeoutId = window.setTimeout(() => {
+			this.tooltipElement && (this.tooltipElement.textContent = this.text, this.visible = !0, this.tooltipElement.style.opacity = "1", this.initializePositioning());
+		}, this.delay));
+	}
+	hideTooltip() {
+		clearTimeout(this.showTimeoutId), this.tooltipElement && (this.visible = !1, this.tooltipElement.style.opacity = "0"), this.cleanup &&= (this.cleanup(), void 0);
+	}
+	initializePositioning() {
+		this.triggerElement && this.tooltipElement && (this.cleanup && this.cleanup(), this.cleanup = m(this.triggerElement, this.tooltipElement, () => {
+			h(this.triggerElement, this.tooltipElement, {
+				placement: this.position,
+				middleware: [
+					_(8),
+					g({ padding: 5 }),
+					v({ padding: 5 })
+				]
+			}).then(({ x: e, y: t }) => {
+				this.tooltipElement && Object.assign(this.tooltipElement.style, {
+					left: `${e}px`,
+					top: `${t}px`
+				});
+			});
+		}));
+	}
+	render() {
+		return l`<slot></slot>`;
+	}
 };
-//# sourceMappingURL=tooltip.js.map
+e([o({ type: String })], x.prototype, "text", void 0), e([o({ type: String })], x.prototype, "position", void 0), e([o({ type: Number })], x.prototype, "delay", void 0), e([o({ type: Boolean })], x.prototype, "disabled", void 0), e([s()], x.prototype, "visible", void 0), x = e([a("schmancy-tooltip")], x);
+export { x as SchmancyTooltip, b as tooltip };

package/dist/tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
+{"version":3,"file":"tooltip.js","names":[],"sources":["../src/tooltip/tooltip.directive.ts","../src/tooltip/tooltip.ts"],"sourcesContent":["import { arrow, autoUpdate, computePosition, flip, offset, Placement, shift, Strategy } from '@floating-ui/dom'\nimport { Directive, directive, ElementPart, ElementPartInfo, PartType } from 'lit/directive.js'\nimport { fromEvent, Subscription } from 'rxjs'\n\n// Store tooltip data for elements\nconst tooltipMap = new WeakMap<\n\tElement,\n\t{\n\t\ttooltipElement: HTMLElement\n\t\tarrowElement?: HTMLElement\n\t\tcleanup?: () => void\n\t\tshowTimeout?: number\n\t\tsubscriptions?: Subscription[]\n\t}\n>()\n\nclass TooltipDirective extends Directive {\n\tconstructor(partInfo: ElementPartInfo) {\n\t\tsuper(partInfo)\n\t\tif (partInfo.type !== PartType.ELEMENT) {\n\t\t\tthrow new Error('The tooltip directive can only be used on elements')\n\t\t}\n\t}\n\n\trender(\n\t\ttext: string,\n\t\toptions: {\n\t\t\tposition?: 'top' | 'right' | 'bottom' | 'left'\n\t\t\tdelay?: number\n\t\t\tshowArrow?: boolean\n\t\t} = {},\n\t) {\n\t\treturn { text, options }\n\t}\n\n\tupdate(part: ElementPart, [text, options = {}]: [string, any]) {\n\t\tconst element = part.element as HTMLElement\n\t\tconst position = options?.position || 'top'\n\t\tconst delay = options?.delay || 300\n\t\tconst showArrow = options?.showArrow !== false // Default to true\n\n\t\t// Get or create tooltip data\n\t\tlet tooltipData = tooltipMap.get(element)\n\n\t\tif (!tooltipData) {\n\t\t\t// Create tooltip element\n\t\t\tconst tooltipElement = document.createElement('div')\n\t\t\ttooltipElement.className = 'schmancy-tooltip'\n\n\t\t\t// Apply styles\n\t\t\tObject.assign(tooltipElement.style, {\n\t\t\t\tposition: 'absolute',\n\t\t\t\tzIndex: '10000',\n\t\t\t\tbackgroundColor: 'var(--schmancy-sys-color-surface-highest, #333)',\n\t\t\t\tcolor: 'var(--schmancy-sys-color-surface-on, white)',\n\t\t\t\tpadding: '8px 12px',\n\t\t\t\tborderRadius: '4px',\n\t\t\t\tfontSize: '14px',\n\t\t\t\tfontWeight: 'normal',\n\t\t\t\tmaxWidth: '300px',\n\t\t\t\tpointerEvents: 'none',\n\t\t\t\topacity: '0',\n\t\t\t\ttransition: 'opacity 150ms ease',\n\t\t\t\tboxShadow: 'var(--schmancy-sys-elevation-2)',\n\t\t\t\ttextAlign: 'center',\n\t\t\t\t// Important: start with visibility hidden to avoid flash\n\t\t\t\tvisibility: 'hidden',\n\t\t\t})\n\n\t\t\t// Create arrow element if needed\n\t\t\tlet arrowElement: HTMLElement | undefined\n\t\t\tif (showArrow) {\n\t\t\t\tarrowElement = document.createElement('div')\n\t\t\t\tarrowElement.className = 'schmancy-tooltip-arrow'\n\t\t\t\tObject.assign(arrowElement.style, {\n\t\t\t\t\tposition: 'absolute',\n\t\t\t\t\twidth: '8px',\n\t\t\t\t\theight: '8px',\n\t\t\t\t\tbackground: 'inherit',\n\t\t\t\t\tvisibility: 'hidden',\n\t\t\t\t\t// We'll rotate this to create an arrow\n\t\t\t\t\ttransform: 'rotate(45deg)',\n\t\t\t\t})\n\t\t\t\ttooltipElement.appendChild(arrowElement)\n\t\t\t}\n\n\t\t\t// Set ARIA attributes\n\t\t\ttooltipElement.setAttribute('role', 'tooltip')\n\n\t\t\t// Generate unique ID\n\t\t\tconst tooltipId = `tooltip-${Math.random().toString(36).slice(2, 9)}`\n\t\t\ttooltipElement.id = tooltipId\n\t\t\telement.setAttribute('aria-describedby', tooltipId)\n\n\t\t\t// Add to document\n\t\t\tdocument.body.appendChild(tooltipElement)\n\n\t\t\t// Create tooltip data\n\t\t\ttooltipData = {\n\t\t\t\ttooltipElement,\n\t\t\t\tarrowElement,\n\t\t\t}\n\n\t\t\ttooltipMap.set(element, tooltipData)\n\n\t\t\t// Define show handler\n\t\t\tconst showTooltip = () => {\n\t\t\t\tif (tooltipData?.showTimeout) {\n\t\t\t\t\tclearTimeout(tooltipData.showTimeout)\n\t\t\t\t}\n\n\t\t\t\ttooltipData.showTimeout = window.setTimeout(() => {\n\t\t\t\t\t// Set content\n\t\t\t\t\ttooltipData.tooltipElement.textContent = text\n\n\t\t\t\t\t// Add arrow back if it was removed\n\t\t\t\t\tif (showArrow && tooltipData.arrowElement && !tooltipData.tooltipElement.contains(tooltipData.arrowElement)) {\n\t\t\t\t\t\ttooltipData.tooltipElement.appendChild(tooltipData.arrowElement)\n\t\t\t\t\t}\n\n\t\t\t\t\t// Make sure element is visible first\n\t\t\t\t\ttooltipData.tooltipElement.style.visibility = 'visible'\n\n\t\t\t\t\t// Clean up existing positioning\n\t\t\t\t\tif (tooltipData.cleanup) {\n\t\t\t\t\t\ttooltipData.cleanup()\n\t\t\t\t\t}\n\n\t\t\t\t\t// Set up positioning\n\t\t\t\t\ttooltipData.cleanup = autoUpdate(element, tooltipData.tooltipElement, () =>\n\t\t\t\t\t\tupdatePosition(element, tooltipData, position, showArrow),\n\t\t\t\t\t)\n\n\t\t\t\t\t// Make opacity 1 after positioning is set up\n\t\t\t\t\trequestAnimationFrame(() => {\n\t\t\t\t\t\ttooltipData.tooltipElement.style.opacity = '1'\n\t\t\t\t\t})\n\t\t\t\t}, delay)\n\t\t\t}\n\n\t\t\t// Define hide handler\n\t\t\tconst hideTooltip = () => {\n\t\t\t\tif (tooltipData?.showTimeout) {\n\t\t\t\t\tclearTimeout(tooltipData.showTimeout)\n\t\t\t\t}\n\n\t\t\t\ttooltipData.tooltipElement.style.opacity = '0'\n\n\t\t\t\t// Set visibility to hidden after fade out\n\t\t\t\tsetTimeout(() => {\n\t\t\t\t\ttooltipData.tooltipElement.style.visibility = 'hidden'\n\t\t\t\t}, 150) // Match transition time\n\n\t\t\t\t// Clean up positioning\n\t\t\t\tif (tooltipData?.cleanup) {\n\t\t\t\t\ttooltipData.cleanup()\n\t\t\t\t\ttooltipData.cleanup = undefined\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t// Add event listeners using fromEvent\n\t\t\tconst subscriptions = [\n\t\t\t\tfromEvent(element, 'mouseenter').subscribe(showTooltip),\n\t\t\t\tfromEvent(element, 'focus').subscribe(showTooltip),\n\t\t\t\tfromEvent(element, 'mouseleave').subscribe(hideTooltip),\n\t\t\t\tfromEvent(element, 'blur').subscribe(hideTooltip),\n\t\t\t\tfromEvent<KeyboardEvent>(document, 'keydown').subscribe((e: KeyboardEvent) => {\n\t\t\t\t\tif (e.key === 'Escape' && tooltipData?.tooltipElement.style.opacity === '1') {\n\t\t\t\t\t\thideTooltip()\n\t\t\t\t\t}\n\t\t\t\t})\n\t\t\t]\n\n\t\t\t// Store subscriptions for cleanup\n\t\t\ttooltipData.subscriptions = subscriptions\n\t\t} else {\n\t\t\t// Update content for existing tooltip\n\t\t\ttooltipData.tooltipElement.textContent = text\n\n\t\t\t// Update arrow visibility if needed\n\t\t\tif (tooltipData.arrowElement) {\n\t\t\t\ttooltipData.arrowElement.style.visibility = showArrow ? 'visible' : 'hidden'\n\t\t\t}\n\t\t}\n\n\t\treturn { text, options }\n\t}\n\n\tdisconnected(part: ElementPart) {\n\t\tconst element = part.element\n\t\tconst tooltipData = tooltipMap.get(element)\n\n\t\tif (tooltipData) {\n\t\t\t// Clean up subscriptions\n\t\t\tif (tooltipData.subscriptions) {\n\t\t\t\ttooltipData.subscriptions.forEach(subscription => subscription.unsubscribe())\n\t\t\t}\n\n\t\t\t// Clean up timeouts and positioning\n\t\t\tif (tooltipData.showTimeout) {\n\t\t\t\tclearTimeout(tooltipData.showTimeout)\n\t\t\t}\n\n\t\t\tif (tooltipData.cleanup) {\n\t\t\t\ttooltipData.cleanup()\n\t\t\t}\n\n\t\t\t// Remove tooltip element\n\t\t\tif (document.body.contains(tooltipData.tooltipElement)) {\n\t\t\t\tdocument.body.removeChild(tooltipData.tooltipElement)\n\t\t\t}\n\n\t\t\t// Remove ARIA attributes\n\t\t\tif (element.hasAttribute('aria-describedby')) {\n\t\t\t\telement.removeAttribute('aria-describedby')\n\t\t\t}\n\n\t\t\t// Remove from WeakMap\n\t\t\ttooltipMap.delete(element)\n\t\t}\n\t}\n}\n\n// Separate positioning function for clarity and reuse\nasync function updatePosition(element: HTMLElement, tooltipData: any, position: string, showArrow: boolean) {\n\t// Use floating-ui to compute position\n\tconst middleware = [\n\t\toffset(8), // Distance from the element\n\t\tflip({\n\t\t\tfallbackPlacements: ['top', 'right', 'bottom', 'left'].filter(p => p !== position) as Placement[],\n\t\t\tpadding: 5, // How far from the edges before flipping\n\t\t}),\n\t\tshift({ padding: 5 }), // Keep it within viewport bounds\n\t]\n\n\t// Add arrow middleware if needed\n\tif (showArrow && tooltipData.arrowElement) {\n\t\tmiddleware.push(arrow({ element: tooltipData.arrowElement }))\n\t}\n\n\tconst { x, y, placement, middlewareData } = await computePosition(element, tooltipData.tooltipElement, {\n\t\tplacement: position as Placement,\n\t\tmiddleware,\n\t\tstrategy: 'fixed' as Strategy, // Fixed positioning works better across contexts\n\t})\n\n\t// Apply position\n\tObject.assign(tooltipData.tooltipElement.style, {\n\t\tleft: `${x}px`,\n\t\ttop: `${y}px`,\n\t\tposition: 'fixed',\n\t})\n\n\t// Position the arrow if it exists\n\tif (showArrow && tooltipData.arrowElement && middlewareData.arrow) {\n\t\tconst { x: arrowX, y: arrowY } = middlewareData.arrow\n\n\t\t// Determine which side the arrow should be on based on placement\n\t\tconst staticSide =\n\t\t\t{\n\t\t\t\ttop: 'bottom',\n\t\t\t\tright: 'left',\n\t\t\t\tbottom: 'top',\n\t\t\t\tleft: 'right',\n\t\t\t}[placement.split('-')[0]] || 'bottom'\n\n\t\t// Position the arrow\n\t\tObject.assign(tooltipData.arrowElement.style, {\n\t\t\tleft: arrowX != null ? `${arrowX}px` : '',\n\t\t\ttop: arrowY != null ? `${arrowY}px` : '',\n\t\t\t[staticSide]: '-4px', // Position the arrow on the correct side\n\t\t\tvisibility: 'visible',\n\t\t})\n\t}\n}\n\nexport const tooltip = directive(TooltipDirective)\n","import { TailwindElement } from '@mixins/tailwind.mixin'\nimport { html, css } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { fromEvent, merge, takeUntil } from 'rxjs'\nimport { computePosition, flip, shift, offset, autoUpdate, Placement } from '@floating-ui/dom'\n\n/**\n * A tooltip component that displays a text tooltip when hovering over content.\n * Addresses shadow DOM limitations by teleporting the tooltip to document.body.\n *\n * @element schmancy-tooltip\n */\n@customElement('schmancy-tooltip')\nexport class SchmancyTooltip extends TailwindElement(css`\n\t:host {\n\t\tdisplay: inline-block;\n\t\tposition: relative;\n\t}\n`) {\n\t@property({ type: String })\n\ttext = ''\n\n\t@property({ type: String })\n\tposition: 'top' | 'right' | 'bottom' | 'left' = 'top'\n\n\t@property({ type: Number })\n\tdelay = 50\n\n\t@property({ type: Boolean })\n\tdisabled = false\n\n\t@state() private visible = false\n\n\tprivate triggerElement: HTMLElement | null = null\n\tprivate tooltipElement: HTMLElement | null = null\n\tprivate cleanup: (() => void) | undefined\n\tprivate showTimeoutId: number | undefined\n\n\tconnectedCallback() {\n\t\tsuper.connectedCallback()\n\n\t\t// Create tooltip element once\n\t\tif (!this.tooltipElement) {\n\t\t\tthis.createTooltipElement()\n\t\t}\n\t}\n\n\tfirstUpdated() {\n\t\t// Wait for slotted elements to be available\n\t\tthis.updateComplete.then(() => {\n\t\t\t// Get the first slotted element as trigger\n\t\t\tconst slot = this.shadowRoot?.querySelector('slot') as HTMLSlotElement\n\t\t\tconst slottedElements = slot?.assignedElements() || []\n\n\t\t\tif (slottedElements.length > 0) {\n\t\t\t\tthis.triggerElement = slottedElements[0] as HTMLElement\n\t\t\t\tthis.setupEvents()\n\t\t\t}\n\t\t})\n\t}\n\n\tprivate createTooltipElement() {\n\t\t// Create the tooltip element in document.body\n\t\tthis.tooltipElement = document.createElement('div')\n\t\tthis.tooltipElement.className = 'schmancy-tooltip'\n\n\t\t// Apply styles\n\t\tObject.assign(this.tooltipElement.style, {\n\t\t\tposition: 'absolute',\n\t\t\tzIndex: '10000',\n\t\t\tbackgroundColor: 'var(--schmancy-sys-color-surface-highest, #333)',\n\t\t\tcolor: 'var(--schmancy-sys-color-surface-on, white)',\n\t\t\tpadding: '8px 12px',\n\t\t\tborderRadius: '4px',\n\t\t\tfontSize: '14px',\n\t\t\tfontWeight: 'normal',\n\t\t\tmaxWidth: '300px',\n\t\t\tpointerEvents: 'none',\n\t\t\topacity: '0',\n\t\t\ttransition: 'opacity 150ms ease',\n\t\t\tboxShadow: 'var(--schmancy-sys-elevation-2)',\n\t\t\ttextAlign: 'center',\n\t\t})\n\n\t\t// Set ARIA attributes\n\t\tthis.tooltipElement.setAttribute('role', 'tooltip')\n\n\t\t// Add to document\n\t\tdocument.body.appendChild(this.tooltipElement)\n\t}\n\n\tprivate setupEvents() {\n\t\tif (!this.triggerElement || this.disabled) return\n\n\t\t// Generate unique ID for ARIA\n\t\tconst tooltipId = `tooltip-${Math.random().toString(36).slice(2, 9)}`\n\t\tif (this.tooltipElement) {\n\t\t\tthis.tooltipElement.id = tooltipId\n\t\t\tthis.triggerElement.setAttribute('aria-describedby', tooltipId)\n\t\t}\n\n\t\t// Setup event streams using RxJS\n\t\tconst mouseEnter$ = fromEvent(this.triggerElement, 'mouseenter')\n\t\tconst focus$ = fromEvent(this.triggerElement, 'focus')\n\t\tconst mouseLeave$ = fromEvent(this.triggerElement, 'mouseleave')\n\t\tconst blur$ = fromEvent(this.triggerElement, 'blur')\n\n\t\t// Global escape key handler\n\t\tfromEvent<KeyboardEvent>(document, 'keydown')\n\t\t\t.pipe(takeUntil(this.disconnecting))\n\t\t\t.subscribe(event => {\n\t\t\t\tif (event.key === 'Escape' && this.visible) {\n\t\t\t\t\tthis.hideTooltip()\n\t\t\t\t}\n\t\t\t})\n\n\t\t// Handle showing\n\t\tmerge(mouseEnter$, focus$)\n\t\t\t.pipe(takeUntil(this.disconnecting))\n\t\t\t.subscribe(() => {\n\t\t\t\tthis.showTooltip()\n\t\t\t})\n\n\t\t// Handle hiding\n\t\tmerge(mouseLeave$, blur$)\n\t\t\t.pipe(takeUntil(this.disconnecting))\n\t\t\t.subscribe(() => {\n\t\t\t\tthis.hideTooltip()\n\t\t\t})\n\t}\n\n\tdisconnectedCallback() {\n\t\t// Clean up\n\t\tif (this.tooltipElement && document.body.contains(this.tooltipElement)) {\n\t\t\tdocument.body.removeChild(this.tooltipElement)\n\t\t}\n\t\tthis.cleanup?.()\n\t\tclearTimeout(this.showTimeoutId)\n\t\tsuper.disconnectedCallback()\n\t}\n\n\tprivate showTooltip() {\n\t\tif (this.disabled || !this.tooltipElement || !this.triggerElement) return\n\n\t\t// Clear any existing timeout\n\t\tclearTimeout(this.showTimeoutId)\n\n\t\t// Set timeout for showing\n\t\tthis.showTimeoutId = window.setTimeout(() => {\n\t\t\t// Update content\n\t\t\tif (this.tooltipElement) {\n\t\t\t\tthis.tooltipElement.textContent = this.text\n\n\t\t\t\t// Make visible\n\t\t\t\tthis.visible = true\n\t\t\t\tthis.tooltipElement.style.opacity = '1'\n\n\t\t\t\t// Initialize positioning\n\t\t\t\tthis.initializePositioning()\n\t\t\t}\n\t\t}, this.delay)\n\t}\n\n\tprivate hideTooltip() {\n\t\t// Clear showing timeout\n\t\tclearTimeout(this.showTimeoutId)\n\n\t\t// Hide tooltip\n\t\tif (this.tooltipElement) {\n\t\t\tthis.visible = false\n\t\t\tthis.tooltipElement.style.opacity = '0'\n\t\t}\n\n\t\t// Clean up positioning\n\t\tif (this.cleanup) {\n\t\t\tthis.cleanup()\n\t\t\tthis.cleanup = undefined\n\t\t}\n\t}\n\n\tprivate initializePositioning() {\n\t\tif (!this.triggerElement || !this.tooltipElement) return\n\n\t\t// Clean up existing positioning\n\t\tif (this.cleanup) {\n\t\t\tthis.cleanup()\n\t\t}\n\n\t\t// Set up auto-updating position\n\t\tthis.cleanup = autoUpdate(this.triggerElement, this.tooltipElement, () => {\n\t\t\t// Compute position\n\t\t\tcomputePosition(this.triggerElement!, this.tooltipElement!, {\n\t\t\t\tplacement: this.position as Placement,\n\t\t\t\tmiddleware: [offset(8), flip({ padding: 5 }), shift({ padding: 5 })],\n\t\t\t}).then(({ x, y }) => {\n\t\t\t\t// Apply position\n\t\t\t\tif (this.tooltipElement) {\n\t\t\t\t\tObject.assign(this.tooltipElement.style, {\n\t\t\t\t\t\tleft: `${x}px`,\n\t\t\t\t\t\ttop: `${y}px`,\n\t\t\t\t\t})\n\t\t\t\t}\n\t\t\t})\n\t\t})\n\t}\n\n\trender() {\n\t\treturn html`<slot></slot>`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-tooltip': SchmancyTooltip\n\t}\n}\n"],"mappings":"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"}

package/dist/tree.cjs

@@ -1,2 +1,26 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./tree-DP5U00NA.cjs");Object.defineProperty(exports,"SchmancyTree",{enumerable:!0,get:()=>e.SchmancyTree});
-//# sourceMappingURL=tree.cjs.map
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`./chunk-BCfY8kxB.cjs`);const e=require(`./tailwind.mixin-DGiyLbEi.cjs`);require(`./mixins.cjs`);let t=require(`rxjs`),n=require(`lit/decorators.js`),r=require(`lit`);var i=class extends e.t(r.css`
+	:host {
+		display: block;
+		position: relative;
+		background-color: initial;
+	}
+	::slotted([slot='root']) {
+		width: 100%;
+		text-align: left;
+	}
+	::slotted([slot='root'] + *) {
+		margin-top: 0.5rem;
+	}
+`){constructor(...e){super(...e),this.open=!1}firstUpdated(){this.open||(this.defaultSlot.hidden=!0),(0,t.merge)((0,t.fromEvent)(this.toggler,`click`).pipe((0,t.takeUntil)(this.disconnecting),(0,t.tap)(e=>{e.preventDefault(),e.stopPropagation(),this.dispatchEvent(new CustomEvent(`toggle`,{bubbles:!1,composed:!0}))})),(0,t.fromEvent)(this.chevron,`click`)).pipe((0,t.switchMap)(()=>{let e=this.open?180:0,n=this.open?0:180,r=this.chevron.animate([{transform:`rotate(${e}deg)`},{transform:`rotate(${n}deg)`}],{duration:150,easing:`ease-in`,fill:`forwards`});this.open||(this.defaultSlot.hidden=!1);let i=+!!this.open,a=+!this.open,o=this.defaultSlot.animate([{opacity:i},{opacity:a}],{duration:150,easing:`ease-out`,fill:`forwards`});return o.onfinish=()=>{this.open?this.defaultSlot.hidden=!0:(this.defaultSlot.style.height=`auto`,this.defaultSlot.style.opacity=`1`)},(0,t.zip)((0,t.fromEvent)(r,`finish`),(0,t.fromEvent)(o,`finish`)).pipe((0,t.takeUntil)(this.disconnecting))}),(0,t.tap)(()=>{this.open=!this.open}),(0,t.takeUntil)(this.disconnecting)).subscribe()}render(){return r.html`
+			<div class="flex content-center items-center justify-between">
+				<!-- Root toggler content -->
+				<slot id="toggler" name="root"></slot>
+
+				<!-- The chevron or arrow symbol -->
+				<!-- Stop propagation on the schmancy-button itself just to avoid double triggers -->
+				<schmancy-button slot="trailing" id="chevron" @click=${e=>e.stopPropagation()}> ⌅ </schmancy-button>
+			</div>
+
+			<!-- The default slot: tree children -->
+			<slot></slot>
+		`}};e.i([(0,n.property)({type:Boolean})],i.prototype,`open`,void 0),e.i([(0,n.query)(`#toggler`)],i.prototype,`toggler`,void 0),e.i([(0,n.query)(`slot:not([name="root"])`)],i.prototype,`defaultSlot`,void 0),e.i([(0,n.query)(`#chevron`)],i.prototype,`chevron`,void 0),i=e.i([(0,n.customElement)(`schmancy-tree`)],i),Object.defineProperty(exports,`SchmancyTree`,{enumerable:!0,get:function(){return i}});

package/dist/tree.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"tree.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}
+{"version":3,"file":"tree.cjs","names":[],"sources":["../src/tree/tree.ts"],"sourcesContent":["import { TailwindElement } from '@mixins/index'\nimport { css, html } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\nimport { fromEvent, merge, switchMap, takeUntil, tap, zip } from 'rxjs'\n\n/**\n * @element schmancy-tree\n * @slot root - The root element of the tree\n * @slot - The children of the tree\n */\n@customElement('schmancy-tree')\nexport class SchmancyTree extends TailwindElement(css`\n\t:host {\n\t\tdisplay: block;\n\t\tposition: relative;\n\t\tbackground-color: initial;\n\t}\n\t::slotted([slot='root']) {\n\t\twidth: 100%;\n\t\ttext-align: left;\n\t}\n\t::slotted([slot='root'] + *) {\n\t\tmargin-top: 0.5rem;\n\t}\n`) {\n\t/**\n\t * Whether the tree’s children are visible\n\t */\n\t@property({ type: Boolean }) open = false\n\n\t@query('#toggler') toggler!: HTMLSlotElement\n\t@query('slot:not([name=\"root\"])') defaultSlot!: HTMLSlotElement\n\n\t// Since it's actually a <schmancy-button>, use HTMLElement or a custom type\n\t@query('#chevron') chevron!: HTMLElement\n\n\tfirstUpdated() {\n\t\t// Hide or show the slot initially based on `open`\n\t\tif (!this.open) {\n\t\t\tthis.defaultSlot.hidden = true\n\t\t}\n\n\t\t// Root toggler\n\t\tconst toggleClick$ = fromEvent<MouseEvent>(this.toggler, 'click').pipe(\n\t\t\ttakeUntil(this.disconnecting),\n\t\t\ttap(e => {\n\t\t\t\te.preventDefault()\n\t\t\t\te.stopPropagation()\n\t\t\t\tthis.dispatchEvent(new CustomEvent('toggle', { bubbles: false, composed: true }))\n\t\t\t}),\n\t\t)\n\n\t\t// Chevron (the schmancy-button) click\n\t\tconst chevronClick$ = fromEvent<MouseEvent>(this.chevron, 'click')\n\n\t\tmerge(toggleClick$, chevronClick$)\n\t\t\t.pipe(\n\t\t\t\tswitchMap(() => {\n\t\t\t\t\t// 1. Animate the chevron rotation\n\t\t\t\t\t//    If `open` is true, rotate from 180 -> 0; if false, from 0 -> 180\n\t\t\t\t\tconst fromDeg = this.open ? 180 : 0\n\t\t\t\t\tconst toDeg = this.open ? 0 : 180\n\t\t\t\t\tconst chevronAnimation = this.chevron.animate(\n\t\t\t\t\t\t[{ transform: `rotate(${fromDeg}deg)` }, { transform: `rotate(${toDeg}deg)` }],\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tduration: 150,\n\t\t\t\t\t\t\teasing: 'ease-in',\n\t\t\t\t\t\t\tfill: 'forwards',\n\t\t\t\t\t\t},\n\t\t\t\t\t)\n\n\t\t\t\t\t// 2. Animate the slot’s height + opacity\n\t\t\t\t\tif (!this.open) {\n\t\t\t\t\t\t// We are about to open, so remove `hidden` to measure scrollHeight\n\t\t\t\t\t\tthis.defaultSlot.hidden = false\n\t\t\t\t\t}\n\n\t\t\t\t\tconst fromOpacity = this.open ? 1 : 0\n\t\t\t\t\tconst toOpacity = this.open ? 0 : 1\n\n\t\t\t\t\tconst slotAnimation = this.defaultSlot.animate([{ opacity: fromOpacity }, { opacity: toOpacity }], {\n\t\t\t\t\t\tduration: 150,\n\t\t\t\t\t\teasing: 'ease-out',\n\t\t\t\t\t\tfill: 'forwards',\n\t\t\t\t\t})\n\n\t\t\t\t\t// Hide the slot if we just closed it\n\t\t\t\t\tslotAnimation.onfinish = () => {\n\t\t\t\t\t\tif (this.open) {\n\t\t\t\t\t\t\tthis.defaultSlot.hidden = true\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tthis.defaultSlot.style.height = 'auto'\n\t\t\t\t\t\t\tthis.defaultSlot.style.opacity = '1'\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\n\t\t\t\t\t// Return an Observable that completes when both animations finish\n\t\t\t\t\treturn zip(fromEvent(chevronAnimation, 'finish'), fromEvent(slotAnimation, 'finish')).pipe(\n\t\t\t\t\t\ttakeUntil(this.disconnecting),\n\t\t\t\t\t)\n\t\t\t\t}),\n\t\t\t\ttap(() => {\n\t\t\t\t\t// Flip the open state\n\t\t\t\t\tthis.open = !this.open\n\t\t\t\t}),\n\t\t\t\ttakeUntil(this.disconnecting),\n\t\t\t)\n\t\t\t.subscribe()\n\t}\n\n\trender() {\n\t\treturn html`\n\t\t\t<div class=\"flex content-center items-center justify-between\">\n\t\t\t\t<!-- Root toggler content -->\n\t\t\t\t<slot id=\"toggler\" name=\"root\"></slot>\n\n\t\t\t\t<!-- The chevron or arrow symbol -->\n\t\t\t\t<!-- Stop propagation on the schmancy-button itself just to avoid double triggers -->\n\t\t\t\t<schmancy-button slot=\"trailing\" id=\"chevron\" @click=${(e: Event) => e.stopPropagation()}> ⌅ </schmancy-button>\n\t\t\t</div>\n\n\t\t\t<!-- The default slot: tree children -->\n\t\t\t<slot></slot>\n\t\t`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-tree': SchmancyTree\n\t}\n}\n"],"mappings":"kPAWO,IAAA,EAAA,cAA2B,EAAA,EAAgB,EAAA,GAAG;;;;;;;;;;;;;4CAiBhB,EAQpC,cAAA,CAEM,KAAK,OACT,KAAK,YAAY,OAAA,CAAS,IAgB3B,EAAA,EAAA,QAAA,EAAA,EAAA,WAZ2C,KAAK,QAAS,QAAA,CAAS,MAAA,EAAA,EAAA,WACvD,KAAK,cAAA,EAAc,EAAA,EAAA,KACzB,GAAA,CACH,EAAE,gBAAA,CACF,EAAE,iBAAA,CACF,KAAK,cAAc,IAAI,YAAY,SAAU,CAAE,QAAA,CAAS,EAAO,SAAA,CAAU,EAAA,CAAA,CAAA,EAAA,CAAA,EAE1E,EAAA,EAAA,WAG2C,KAAK,QAAS,QAAA,CAAA,CAGxD,MAAA,EAAA,EAAA,eAAA,CAIC,IAAM,EAAU,KAAK,KAAO,IAAM,EAC5B,EAAQ,KAAK,KAAO,EAAI,IACxB,EAAmB,KAAK,QAAQ,QACrC,CAAC,CAAE,UAAW,UAAU,EAAA,MAAA,CAAiB,CAAE,UAAW,UAAU,EAAA,MAAA,CAAA,CAChE,CACC,SAAU,IACV,OAAQ,UACR,KAAM,WAAA,CAAA,CAKH,KAAK,OAET,KAAK,YAAY,OAAA,CAAS,GAG3B,IAAM,EAAc,QAAK,KACnB,EAAY,OAAK,KAEjB,EAAgB,KAAK,YAAY,QAAQ,CAAC,CAAE,QAAS,EAAA,CAAe,CAAE,QAAS,EAAA,CAAA,CAAc,CAClG,SAAU,IACV,OAAQ,WACR,KAAM,WAAA,CAAA,CAcP,MAVA,GAAc,aAAA,CACT,KAAK,KACR,KAAK,YAAY,OAAA,CAAS,GAE1B,KAAK,YAAY,MAAM,OAAS,OAChC,KAAK,YAAY,MAAM,QAAU,OAKnC,EAAA,EAAA,MAAA,EAAA,EAAA,WAAqB,EAAkB,SAAA,EAAS,EAAA,EAAA,WAAY,EAAe,SAAA,CAAA,CAAW,MAAA,EAAA,EAAA,WAC3E,KAAK,cAAA,CAAA,EAAA,EAEf,EAAA,EAAA,SAAA,CAGD,KAAK,KAAA,CAAQ,KAAK,MAAA,EACjB,EAAA,EAAA,WACQ,KAAK,cAAA,CAAA,CAEf,WAAA,CAGH,QAAA,CACC,MAAO,GAAA,IAAI;;;;;;;2DAO+C,GAAa,EAAE,iBAAA,CAAA;;;;;0BA1FhE,CAAE,KAAM,QAAA,CAAA,CAAA,CAAU,EAAA,UAAA,OAAA,IAAA,GAAA,CAAA,EAAA,EAAA,EAAA,EAAA,EAAA,OAErB,WAAA,CAAA,CAAW,EAAA,UAAA,UAAA,IAAA,GAAA,CAAA,EAAA,EAAA,EAAA,EAAA,EAAA,OACX,0BAAA,CAAA,CAA0B,EAAA,UAAA,cAAA,IAAA,GAAA,CAAA,EAAA,EAAA,EAAA,EAAA,EAAA,OAG1B,WAAA,CAAA,CAAW,EAAA,UAAA,UAAA,IAAA,GAAA,CAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,eAxBJ,gBAAA,CAAA,CAAgB,EAAA,CAAA,OAAA,eAAA,QAAA,eAAA,CAAA,WAAA,CAAA,EAAA,IAAA,UAAA,CAAA,OAAA,GAAA,CAAA"}

package/dist/tree.js

@@ -1,5 +1,65 @@
-import { S as a } from "./tree-CBEjV7jP.js";
-export {
-  a as SchmancyTree
+import { i as e, t } from "./tailwind.mixin-C4cx3IOr.js";
+import "./mixins.js";
+import { fromEvent as n, merge as r, switchMap as i, takeUntil as a, tap as o, zip as s } from "rxjs";
+import { customElement as c, property as l, query as u } from "lit/decorators.js";
+import { css as d, html as f } from "lit";
+var p = class extends t(d`
+	:host {
+		display: block;
+		position: relative;
+		background-color: initial;
+	}
+	::slotted([slot='root']) {
+		width: 100%;
+		text-align: left;
+	}
+	::slotted([slot='root'] + *) {
+		margin-top: 0.5rem;
+	}
+`) {
+	constructor(...e) {
+		super(...e), this.open = !1;
+	}
+	firstUpdated() {
+		this.open || (this.defaultSlot.hidden = !0), r(n(this.toggler, "click").pipe(a(this.disconnecting), o((e) => {
+			e.preventDefault(), e.stopPropagation(), this.dispatchEvent(new CustomEvent("toggle", {
+				bubbles: !1,
+				composed: !0
+			}));
+		})), n(this.chevron, "click")).pipe(i(() => {
+			let e = this.open ? 180 : 0, t = this.open ? 0 : 180, r = this.chevron.animate([{ transform: `rotate(${e}deg)` }, { transform: `rotate(${t}deg)` }], {
+				duration: 150,
+				easing: "ease-in",
+				fill: "forwards"
+			});
+			this.open || (this.defaultSlot.hidden = !1);
+			let i = +!!this.open, o = +!this.open, c = this.defaultSlot.animate([{ opacity: i }, { opacity: o }], {
+				duration: 150,
+				easing: "ease-out",
+				fill: "forwards"
+			});
+			return c.onfinish = () => {
+				this.open ? this.defaultSlot.hidden = !0 : (this.defaultSlot.style.height = "auto", this.defaultSlot.style.opacity = "1");
+			}, s(n(r, "finish"), n(c, "finish")).pipe(a(this.disconnecting));
+		}), o(() => {
+			this.open = !this.open;
+		}), a(this.disconnecting)).subscribe();
+	}
+	render() {
+		return f`
+			<div class="flex content-center items-center justify-between">
+				<!-- Root toggler content -->
+				<slot id="toggler" name="root"></slot>
+
+				<!-- The chevron or arrow symbol -->
+				<!-- Stop propagation on the schmancy-button itself just to avoid double triggers -->
+				<schmancy-button slot="trailing" id="chevron" @click=${(e) => e.stopPropagation()}> ⌅ </schmancy-button>
+			</div>
+
+			<!-- The default slot: tree children -->
+			<slot></slot>
+		`;
+	}
 };
-//# sourceMappingURL=tree.js.map
+e([l({ type: Boolean })], p.prototype, "open", void 0), e([u("#toggler")], p.prototype, "toggler", void 0), e([u("slot:not([name=\"root\"])")], p.prototype, "defaultSlot", void 0), e([u("#chevron")], p.prototype, "chevron", void 0), p = e([c("schmancy-tree")], p);
+export { p as SchmancyTree };

package/dist/tree.js.map

@@ -1 +1 @@
-{"version":3,"file":"tree.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
+{"version":3,"file":"tree.js","names":[],"sources":["../src/tree/tree.ts"],"sourcesContent":["import { TailwindElement } from '@mixins/index'\nimport { css, html } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\nimport { fromEvent, merge, switchMap, takeUntil, tap, zip } from 'rxjs'\n\n/**\n * @element schmancy-tree\n * @slot root - The root element of the tree\n * @slot - The children of the tree\n */\n@customElement('schmancy-tree')\nexport class SchmancyTree extends TailwindElement(css`\n\t:host {\n\t\tdisplay: block;\n\t\tposition: relative;\n\t\tbackground-color: initial;\n\t}\n\t::slotted([slot='root']) {\n\t\twidth: 100%;\n\t\ttext-align: left;\n\t}\n\t::slotted([slot='root'] + *) {\n\t\tmargin-top: 0.5rem;\n\t}\n`) {\n\t/**\n\t * Whether the tree’s children are visible\n\t */\n\t@property({ type: Boolean }) open = false\n\n\t@query('#toggler') toggler!: HTMLSlotElement\n\t@query('slot:not([name=\"root\"])') defaultSlot!: HTMLSlotElement\n\n\t// Since it's actually a <schmancy-button>, use HTMLElement or a custom type\n\t@query('#chevron') chevron!: HTMLElement\n\n\tfirstUpdated() {\n\t\t// Hide or show the slot initially based on `open`\n\t\tif (!this.open) {\n\t\t\tthis.defaultSlot.hidden = true\n\t\t}\n\n\t\t// Root toggler\n\t\tconst toggleClick$ = fromEvent<MouseEvent>(this.toggler, 'click').pipe(\n\t\t\ttakeUntil(this.disconnecting),\n\t\t\ttap(e => {\n\t\t\t\te.preventDefault()\n\t\t\t\te.stopPropagation()\n\t\t\t\tthis.dispatchEvent(new CustomEvent('toggle', { bubbles: false, composed: true }))\n\t\t\t}),\n\t\t)\n\n\t\t// Chevron (the schmancy-button) click\n\t\tconst chevronClick$ = fromEvent<MouseEvent>(this.chevron, 'click')\n\n\t\tmerge(toggleClick$, chevronClick$)\n\t\t\t.pipe(\n\t\t\t\tswitchMap(() => {\n\t\t\t\t\t// 1. Animate the chevron rotation\n\t\t\t\t\t//    If `open` is true, rotate from 180 -> 0; if false, from 0 -> 180\n\t\t\t\t\tconst fromDeg = this.open ? 180 : 0\n\t\t\t\t\tconst toDeg = this.open ? 0 : 180\n\t\t\t\t\tconst chevronAnimation = this.chevron.animate(\n\t\t\t\t\t\t[{ transform: `rotate(${fromDeg}deg)` }, { transform: `rotate(${toDeg}deg)` }],\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tduration: 150,\n\t\t\t\t\t\t\teasing: 'ease-in',\n\t\t\t\t\t\t\tfill: 'forwards',\n\t\t\t\t\t\t},\n\t\t\t\t\t)\n\n\t\t\t\t\t// 2. Animate the slot’s height + opacity\n\t\t\t\t\tif (!this.open) {\n\t\t\t\t\t\t// We are about to open, so remove `hidden` to measure scrollHeight\n\t\t\t\t\t\tthis.defaultSlot.hidden = false\n\t\t\t\t\t}\n\n\t\t\t\t\tconst fromOpacity = this.open ? 1 : 0\n\t\t\t\t\tconst toOpacity = this.open ? 0 : 1\n\n\t\t\t\t\tconst slotAnimation = this.defaultSlot.animate([{ opacity: fromOpacity }, { opacity: toOpacity }], {\n\t\t\t\t\t\tduration: 150,\n\t\t\t\t\t\teasing: 'ease-out',\n\t\t\t\t\t\tfill: 'forwards',\n\t\t\t\t\t})\n\n\t\t\t\t\t// Hide the slot if we just closed it\n\t\t\t\t\tslotAnimation.onfinish = () => {\n\t\t\t\t\t\tif (this.open) {\n\t\t\t\t\t\t\tthis.defaultSlot.hidden = true\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tthis.defaultSlot.style.height = 'auto'\n\t\t\t\t\t\t\tthis.defaultSlot.style.opacity = '1'\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\n\t\t\t\t\t// Return an Observable that completes when both animations finish\n\t\t\t\t\treturn zip(fromEvent(chevronAnimation, 'finish'), fromEvent(slotAnimation, 'finish')).pipe(\n\t\t\t\t\t\ttakeUntil(this.disconnecting),\n\t\t\t\t\t)\n\t\t\t\t}),\n\t\t\t\ttap(() => {\n\t\t\t\t\t// Flip the open state\n\t\t\t\t\tthis.open = !this.open\n\t\t\t\t}),\n\t\t\t\ttakeUntil(this.disconnecting),\n\t\t\t)\n\t\t\t.subscribe()\n\t}\n\n\trender() {\n\t\treturn html`\n\t\t\t<div class=\"flex content-center items-center justify-between\">\n\t\t\t\t<!-- Root toggler content -->\n\t\t\t\t<slot id=\"toggler\" name=\"root\"></slot>\n\n\t\t\t\t<!-- The chevron or arrow symbol -->\n\t\t\t\t<!-- Stop propagation on the schmancy-button itself just to avoid double triggers -->\n\t\t\t\t<schmancy-button slot=\"trailing\" id=\"chevron\" @click=${(e: Event) => e.stopPropagation()}> ⌅ </schmancy-button>\n\t\t\t</div>\n\n\t\t\t<!-- The default slot: tree children -->\n\t\t\t<slot></slot>\n\t\t`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-tree': SchmancyTree\n\t}\n}\n"],"mappings":";;;;;AAWO,IAAA,IAAA,cAA2B,EAAgB,CAAG;;;;;;;;;;;;;;;4BAiBhB;;CAQpC,eAAA;AAEM,OAAK,SACT,KAAK,YAAY,SAAA,CAAS,IAgB3B,EAZqB,EAAsB,KAAK,SAAS,QAAA,CAAS,KACjE,EAAU,KAAK,cAAA,EACf,GAAI,MAAA;AACH,KAAE,gBAAA,EACF,EAAE,iBAAA,EACF,KAAK,cAAc,IAAI,YAAY,UAAU;IAAE,SAAA,CAAS;IAAO,UAAA,CAAU;IAAA,CAAA,CAAA;IAAA,CAAA,EAKrD,EAAsB,KAAK,SAAS,QAAA,CAAA,CAGxD,KACA,QAAA;GAGC,IAAM,IAAU,KAAK,OAAO,MAAM,GAC5B,IAAQ,KAAK,OAAO,IAAI,KACxB,IAAmB,KAAK,QAAQ,QACrC,CAAC,EAAE,WAAW,UAAU,EAAA,OAAA,EAAiB,EAAE,WAAW,UAAU,EAAA,OAAA,CAAA,EAChE;IACC,UAAU;IACV,QAAQ;IACR,MAAM;IAAA,CAAA;AAKH,QAAK,SAET,KAAK,YAAY,SAAA,CAAS;GAG3B,IAAM,IAAc,QAAK,MACnB,IAAY,OAAK,MAEjB,IAAgB,KAAK,YAAY,QAAQ,CAAC,EAAE,SAAS,GAAA,EAAe,EAAE,SAAS,GAAA,CAAA,EAAc;IAClG,UAAU;IACV,QAAQ;IACR,MAAM;IAAA,CAAA;AAcP,UAVA,EAAc,iBAAA;AACT,SAAK,OACR,KAAK,YAAY,SAAA,CAAS,KAE1B,KAAK,YAAY,MAAM,SAAS,QAChC,KAAK,YAAY,MAAM,UAAU;MAK5B,EAAI,EAAU,GAAkB,SAAA,EAAW,EAAU,GAAe,SAAA,CAAA,CAAW,KACrF,EAAU,KAAK,cAAA,CAAA;IAAA,EAGjB,QAAA;AAEC,QAAK,OAAA,CAAQ,KAAK;IAAA,EAEnB,EAAU,KAAK,cAAA,CAAA,CAEf,WAAA;;CAGH,SAAA;AACC,SAAO,CAAI;;;;;;;4DAO+C,MAAa,EAAE,iBAAA,CAAA;;;;;;;;GA1FzE,EAAS,EAAE,MAAM,SAAA,CAAA,CAAA,EAAU,EAAA,WAAA,QAAA,KAAA,EAAA,EAAA,EAAA,CAE3B,EAAM,WAAA,CAAA,EAAW,EAAA,WAAA,WAAA,KAAA,EAAA,EAAA,EAAA,CACjB,EAAM,4BAAA,CAAA,EAA0B,EAAA,WAAA,eAAA,KAAA,EAAA,EAAA,EAAA,CAGhC,EAAM,WAAA,CAAA,EAAW,EAAA,WAAA,WAAA,KAAA,EAAA,EAAA,IAAA,EAAA,CAxBlB,EAAc,gBAAA,CAAA,EAAgB,EAAA;AAAA,SAAA,KAAA"}