@mhmo91/schmancy 0.10.15 → 0.10.17

package/dist/tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.js","names":[],"sources":["../src/tooltip/tooltip.directive.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"],"mappings":";;;AAKA,IAAM,oBAAa,IAAI,SAAA,EA+QV,IAAU,EApQvB,cAA+B,EAAA;CAC9B,YAAY,GAAA;AAEX,MADA,MAAM,EAAA,EACF,EAAS,SAAS,EAAS,QAC9B,OAAU,MAAM,qDAAA;;CAIlB,OACC,GACA,IAII,EAAA,EAAA;AAEJ,SAAO;GAAE,MAAA;GAAM,SAAA;GAAA;;CAGhB,OAAO,GAAA,CAAoB,GAAM,IAAU,EAAA,GAAA;EAC1C,IAAM,IAAU,EAAK,SACf,IAAW,GAAS,YAAY,OAChC,IAAQ,GAAS,SAAS,KAC1B,IAAA,CAAmC,MAAvB,GAAS,WAGvB,IAAc,EAAW,IAAI,EAAA;AAEjC,MAAK,EAqIJ,GAAY,eAAe,cAAc,GAGrC,EAAY,iBACf,EAAY,aAAa,MAAM,aAAa,IAAY,YAAY;OAzIpD;GAEjB,IAAM,IAAiB,SAAS,cAAc,MAAA,EAwB1C;AAvBJ,KAAe,YAAY,oBAG3B,OAAO,OAAO,EAAe,OAAO;IACnC,UAAU;IACV,QAAQ;IACR,iBAAiB;IACjB,OAAO;IACP,SAAS;IACT,cAAc;IACd,UAAU;IACV,YAAY;IACZ,UAAU;IACV,eAAe;IACf,SAAS;IACT,YAAY;IACZ,WAAW;IACX,WAAW;IAEX,YAAY;IAAA,CAAA,EAKT,MACH,IAAe,SAAS,cAAc,MAAA,EACtC,EAAa,YAAY,0BACzB,OAAO,OAAO,EAAa,OAAO;IACjC,UAAU;IACV,OAAO;IACP,QAAQ;IACR,YAAY;IACZ,YAAY;IAEZ,WAAW;IAAA,CAAA,EAEZ,EAAe,YAAY,EAAA,GAI5B,EAAe,aAAa,QAAQ,UAAA;GAGpC,IAAM,IAAY,WAAW,KAAK,QAAA,CAAS,SAAS,GAAA,CAAI,MAAM,GAAG,EAAA;AACjE,KAAe,KAAK,GACpB,EAAQ,aAAa,oBAAoB,EAAA,EAGzC,SAAS,KAAK,YAAY,EAAA,EAG1B,IAAc;IACb,gBAAA;IACA,cAAA;IAAA,EAGD,EAAW,IAAI,GAAS,EAAA;GAGxB,IAAM,UAAA;AACD,OAAa,eAChB,aAAa,EAAY,YAAA,EAG1B,EAAY,cAAc,OAAO,iBAAA;AAEhC,OAAY,eAAe,cAAc,GAGrC,KAAa,EAAY,gBAAA,CAAiB,EAAY,eAAe,SAAS,EAAY,aAAA,IAC7F,EAAY,eAAe,YAAY,EAAY,aAAA,EAIpD,EAAY,eAAe,MAAM,aAAa,WAG1C,EAAY,WACf,EAAY,SAAA,EAIb,EAAY,UAAU,EAAW,GAAS,EAAY,sBA+F3D,eAA8B,GAAsB,GAAkB,GAAkB,GAAA;MAEvF,IAAM,IAAa;OAClB,EAAO,EAAA;OACP,EAAK;QACJ,oBAAoB;SAAC;SAAO;SAAS;SAAU;SAAA,CAAQ,QAAO,MAAK,MAAM,EAAA;QACzE,SAAS;QAAA,CAAA;OAEV,EAAM,EAAE,SAAS,GAAA,CAAA;OAAA;AAId,WAAa,EAAY,gBAC5B,EAAW,KAAK,EAAM,EAAE,SAAS,EAAY,cAAA,CAAA,CAAA;MAG9C,IAAA,EAAM,GAAE,GAAA,GAAG,GAAA,WAAG,GAAA,gBAAW,MAAA,MAAyB,EAAgB,GAAS,EAAY,gBAAgB;OACtG,WAAW;OACX,YAAA;OACA,UAAU;OAAA,CAAA;AAWX,UAPA,OAAO,OAAO,EAAY,eAAe,OAAO;OAC/C,MAAM,GAAG,EAAA;OACT,KAAK,GAAG,EAAA;OACR,UAAU;OAAA,CAAA,EAIP,KAAa,EAAY,gBAAgB,EAAe,OAAO;OAClE,IAAA,EAAQ,GAAG,GAAQ,GAAG,MAAW,EAAe,OAG1C,IACL;QACC,KAAK;QACL,OAAO;QACP,QAAQ;QACR,MAAM;QAAA,CACL,EAAU,MAAM,IAAA,CAAK,OAAO;AAG/B,cAAO,OAAO,EAAY,aAAa,OAAO;QAC7C,MAAM,KAAU,OAAuB,KAAhB,GAAG,EAAA;QAC1B,KAAK,KAAU,OAAuB,KAAhB,GAAG,EAAA;SACxB,IAAa;QACd,YAAY;QAAA,CAAA;;OA7IM,GAAS,GAAa,GAAU,EAAA,CAAA,EAIhD,4BAAA;AACC,QAAY,eAAe,MAAM,UAAU;OAAA;OAE1C,EAAA;MAIE,UAAA;AACD,OAAa,eAChB,aAAa,EAAY,YAAA,EAG1B,EAAY,eAAe,MAAM,UAAU,KAG3C,iBAAA;AACC,OAAY,eAAe,MAAM,aAAa;OAC5C,IAAA,EAGC,GAAa,YAChB,EAAY,SAAA,EACZ,EAAY,UAAA,KAAU;MAKlB,IAAgB;IACrB,EAAU,GAAS,aAAA,CAAc,UAAU,EAAA;IAC3C,EAAU,GAAS,QAAA,CAAS,UAAU,EAAA;IACtC,EAAU,GAAS,aAAA,CAAc,UAAU,EAAA;IAC3C,EAAU,GAAS,OAAA,CAAQ,UAAU,EAAA;IACrC,EAAyB,UAAU,UAAA,CAAW,WAAW,MAAA;AAC1C,KAAV,EAAE,QAAQ,YAAY,GAAa,eAAe,MAAM,YAAY,OACvE,GAAA;MAAA;IAAA;AAMH,KAAY,gBAAgB;;AAW7B,SAAO;GAAE,MAAA;GAAM,SAAA;GAAA;;CAGhB,aAAa,GAAA;EACZ,IAAM,IAAU,EAAK,SACf,IAAc,EAAW,IAAI,EAAA;AAE/B,QAEC,EAAY,iBACf,EAAY,cAAc,SAAQ,MAAgB,EAAa,aAAA,CAAA,EAI5D,EAAY,eACf,aAAa,EAAY,YAAA,EAGtB,EAAY,WACf,EAAY,SAAA,EAIT,SAAS,KAAK,SAAS,EAAY,eAAA,IACtC,SAAS,KAAK,YAAY,EAAY,eAAA,EAInC,EAAQ,aAAa,mBAAA,IACxB,EAAQ,gBAAgB,mBAAA,EAIzB,EAAW,OAAO,EAAA;;EAAA;AAAA,SAAA,KAAA"}
+{"version":3,"file":"tooltip.js","names":[],"sources":["../src/tooltip/tooltip.directive.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"],"mappings":"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"}

package/dist/tree.cjs

@@ -1,4 +1,4 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`./chunk-CncqDLb2.cjs`);const e=require(`./mixins-DvAYa-F7.cjs`),t=require(`./decorate-DpFmy0nm.cjs`);let n=require(`rxjs`),r=require(`lit/decorators.js`),i=require(`lit`);var a=class extends e.s{constructor(...e){super(...e),this.open=!1,this._a11yId=`schmancy-tree-${Math.random().toString(36).slice(2,10)}`,this._internals=(()=>{try{return this.attachInternals()}catch{return}})()}static{this.styles=[i.css`
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`./chunk-CncqDLb2.cjs`);const e=require(`./mixins-BOOu6q2n.cjs`),t=require(`./active-host-jH3iloCR.cjs`);let n=require(`rxjs`),r=require(`lit/decorators.js`),i=require(`lit`);var a=class extends e.c{constructor(...e){super(...e),this.open=!1,this._a11yId=`schmancy-tree-${Math.random().toString(36).slice(2,10)}`,this._internals=(()=>{try{return this.attachInternals()}catch{return}})()}static{this.styles=[i.css`
 	:host {
 		display: block;
 		position: relative;
@@ -32,4 +32,4 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`./ch
 
 			<!-- The default slot: tree children -->
 			<slot id=${this._contentId}></slot>
-		`}};t.t([(0,r.property)({type:Boolean})],a.prototype,`open`,void 0),t.t([(0,r.query)(`#toggler`)],a.prototype,`toggler`,void 0),t.t([(0,r.query)(`slot:not([name="root"])`)],a.prototype,`defaultSlot`,void 0),t.t([(0,r.query)(`#chevron`)],a.prototype,`chevron`,void 0),a=t.t([(0,r.customElement)(`schmancy-tree`)],a),Object.defineProperty(exports,`SchmancyTree`,{enumerable:!0,get:function(){return a}});
+		`}};t.a([(0,r.property)({type:Boolean})],a.prototype,`open`,void 0),t.a([(0,r.query)(`#toggler`)],a.prototype,`toggler`,void 0),t.a([(0,r.query)(`slot:not([name="root"])`)],a.prototype,`defaultSlot`,void 0),t.a([(0,r.query)(`#chevron`)],a.prototype,`chevron`,void 0),a=t.a([(0,r.customElement)(`schmancy-tree`)],a),Object.defineProperty(exports,`SchmancyTree`,{enumerable:!0,get:function(){return a}});

package/dist/tree.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"tree.cjs","names":[],"sources":["../src/tree/tree.ts"],"sourcesContent":["import { SchmancyElement } 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 SchmancyElement {\n\tstatic styles = [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\tprivate readonly _a11yId = `schmancy-tree-${Math.random().toString(36).slice(2, 10)}`\n\tprivate get _contentId() { return `${this._a11yId}-content` }\n\n\t/** ElementInternals — broadcasts `:state(open)` for consumer CSS. */\n\tprivate readonly _internals: ElementInternals | undefined = (() => {\n\t\ttry { return this.attachInternals() } catch { return undefined }\n\t})()\n\n\tupdated(changed: Map<string, unknown>) {\n\t\tsuper.updated?.(changed)\n\t\tif (changed.has('open')) {\n\t\t\tif (this.open) this._internals?.states.add('open')\n\t\t\telse this._internals?.states.delete('open')\n\t\t}\n\t}\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\n\t\t\t\t\tslot=\"trailing\"\n\t\t\t\t\tid=\"chevron\"\n\t\t\t\t\taria-expanded=${this.open ? 'true' : 'false'}\n\t\t\t\t\taria-controls=${this._contentId}\n\t\t\t\t\taria-label=${this.open ? 'Collapse' : 'Expand'}\n\t\t\t\t\t@click=${(e: Event) => e.stopPropagation()}\n\t\t\t\t>\n\t\t\t\t\t⌅\n\t\t\t\t</schmancy-button>\n\t\t\t</div>\n\n\t\t\t<!-- The default slot: tree children -->\n\t\t\t<slot id=${this._contentId}></slot>\n\t\t`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-tree': SchmancyTree\n\t}\n}\n"],"mappings":"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"}
+{"version":3,"file":"tree.cjs","names":[],"sources":["../src/tree/tree.ts"],"sourcesContent":["import { SchmancyElement } 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 SchmancyElement {\n\tstatic styles = [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\tprivate readonly _a11yId = `schmancy-tree-${Math.random().toString(36).slice(2, 10)}`\n\tprivate get _contentId() { return `${this._a11yId}-content` }\n\n\t/** ElementInternals — broadcasts `:state(open)` for consumer CSS. */\n\tprivate readonly _internals: ElementInternals | undefined = (() => {\n\t\ttry { return this.attachInternals() } catch { return undefined }\n\t})()\n\n\tupdated(changed: Map<string, unknown>) {\n\t\tsuper.updated?.(changed)\n\t\tif (changed.has('open')) {\n\t\t\tif (this.open) this._internals?.states.add('open')\n\t\t\telse this._internals?.states.delete('open')\n\t\t}\n\t}\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\n\t\t\t\t\tslot=\"trailing\"\n\t\t\t\t\tid=\"chevron\"\n\t\t\t\t\taria-expanded=${this.open ? 'true' : 'false'}\n\t\t\t\t\taria-controls=${this._contentId}\n\t\t\t\t\taria-label=${this.open ? 'Collapse' : 'Expand'}\n\t\t\t\t\t@click=${(e: Event) => e.stopPropagation()}\n\t\t\t\t>\n\t\t\t\t\t⌅\n\t\t\t\t</schmancy-button>\n\t\t\t</div>\n\n\t\t\t<!-- The default slot: tree children -->\n\t\t\t<slot id=${this._contentId}></slot>\n\t\t`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-tree': SchmancyTree\n\t}\n}\n"],"mappings":"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"}

package/dist/tree.js

@@ -1,5 +1,5 @@
-import { s as e } from "./mixins-BV0w2yIE.js";
-import { t } from "./decorate-23nYs4Le.js";
+import { c as e } from "./mixins-BWb9_e1s.js";
+import { a as t } from "./active-host-BP0zy_Y9.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";

package/dist/tree.js.map

@@ -1 +1 @@
-{"version":3,"file":"tree.js","names":[],"sources":["../src/tree/tree.ts"],"sourcesContent":["import { SchmancyElement } 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 SchmancyElement {\n\tstatic styles = [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\tprivate readonly _a11yId = `schmancy-tree-${Math.random().toString(36).slice(2, 10)}`\n\tprivate get _contentId() { return `${this._a11yId}-content` }\n\n\t/** ElementInternals — broadcasts `:state(open)` for consumer CSS. */\n\tprivate readonly _internals: ElementInternals | undefined = (() => {\n\t\ttry { return this.attachInternals() } catch { return undefined }\n\t})()\n\n\tupdated(changed: Map<string, unknown>) {\n\t\tsuper.updated?.(changed)\n\t\tif (changed.has('open')) {\n\t\t\tif (this.open) this._internals?.states.add('open')\n\t\t\telse this._internals?.states.delete('open')\n\t\t}\n\t}\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\n\t\t\t\t\tslot=\"trailing\"\n\t\t\t\t\tid=\"chevron\"\n\t\t\t\t\taria-expanded=${this.open ? 'true' : 'false'}\n\t\t\t\t\taria-controls=${this._contentId}\n\t\t\t\t\taria-label=${this.open ? 'Collapse' : 'Expand'}\n\t\t\t\t\t@click=${(e: Event) => e.stopPropagation()}\n\t\t\t\t>\n\t\t\t\t\t⌅\n\t\t\t\t</schmancy-button>\n\t\t\t</div>\n\n\t\t\t<!-- The default slot: tree children -->\n\t\t\t<slot id=${this._contentId}></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,EAAA;CAAA,YAAA,GAAA,GAAA;AAAA,QAAA,GAAA,EAAA,EAAA,KAAA,OAAA,CAkBG,GAAA,KAAA,UAQT,iBAAiB,KAAK,QAAA,CAAS,SAAS,GAAA,CAAI,MAAM,GAAG,GAAA,IAAA,KAAA,oBAAA;AAK/E,OAAA;AAAM,WAAO,KAAK,iBAAA;WAAA;AAA4B;;MAAA;;CAAA;AAAA,OAAA,SA9B/B,CAAC,CAAG;;;;;;;;;;;;;;;CA0BpB,IAAA,aAAY;AAAe,SAAO,GAAG,KAAK,QAAA;;CAO1C,QAAQ,GAAA;AACP,QAAM,UAAU,EAAA,EACZ,EAAQ,IAAI,OAAA,KACX,KAAK,OAAM,KAAK,YAAY,OAAO,IAAI,OAAA,GACtC,KAAK,YAAY,OAAO,OAAO,OAAA;;CAItC,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;;;;;;;;;;qBAUQ,KAAK,OAAO,SAAS,QAAA;qBACrB,KAAK,WAAA;kBACR,KAAK,OAAO,aAAa,SAAA;eAC5B,MAAa,EAAE,iBAAA,CAAA;;;;;;;cAOhB,KAAK,WAAA;;;;GAvHjB,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,CAzBlB,EAAc,gBAAA,CAAA,EAAgB,EAAA;AAAA,SAAA,KAAA"}
+{"version":3,"file":"tree.js","names":[],"sources":["../src/tree/tree.ts"],"sourcesContent":["import { SchmancyElement } 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 SchmancyElement {\n\tstatic styles = [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\tprivate readonly _a11yId = `schmancy-tree-${Math.random().toString(36).slice(2, 10)}`\n\tprivate get _contentId() { return `${this._a11yId}-content` }\n\n\t/** ElementInternals — broadcasts `:state(open)` for consumer CSS. */\n\tprivate readonly _internals: ElementInternals | undefined = (() => {\n\t\ttry { return this.attachInternals() } catch { return undefined }\n\t})()\n\n\tupdated(changed: Map<string, unknown>) {\n\t\tsuper.updated?.(changed)\n\t\tif (changed.has('open')) {\n\t\t\tif (this.open) this._internals?.states.add('open')\n\t\t\telse this._internals?.states.delete('open')\n\t\t}\n\t}\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\n\t\t\t\t\tslot=\"trailing\"\n\t\t\t\t\tid=\"chevron\"\n\t\t\t\t\taria-expanded=${this.open ? 'true' : 'false'}\n\t\t\t\t\taria-controls=${this._contentId}\n\t\t\t\t\taria-label=${this.open ? 'Collapse' : 'Expand'}\n\t\t\t\t\t@click=${(e: Event) => e.stopPropagation()}\n\t\t\t\t>\n\t\t\t\t\t⌅\n\t\t\t\t</schmancy-button>\n\t\t\t</div>\n\n\t\t\t<!-- The default slot: tree children -->\n\t\t\t<slot id=${this._contentId}></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,EAAA;CAAA,YAAA,GAAA,GAAA;EAAA,MAAA,GAAA,EAAA,EAAA,KAAA,OAAA,CAkBG,GAAA,KAAA,UAQT,iBAAiB,KAAK,QAAA,CAAS,SAAS,GAAA,CAAI,MAAM,GAAG,GAAA,IAAA,KAAA,oBAAA;GAK/E,IAAA;IAAM,OAAO,KAAK,iBAAA;WAAA;IAA4B;;MAAA;;CAAA;EAAA,KAAA,SA9B/B,CAAC,CAAG;;;;;;;;;;;;;;;CA0BpB,IAAA,aAAY;EAAe,OAAO,GAAG,KAAK,QAAA;;CAO1C,QAAQ,GAAA;EACP,MAAM,UAAU,EAAA,EACZ,EAAQ,IAAI,OAAA,KACX,KAAK,OAAM,KAAK,YAAY,OAAO,IAAI,OAAA,GACtC,KAAK,YAAY,OAAO,OAAO,OAAA;;CAItC,eAAA;EAEM,KAAK,SACT,KAAK,YAAY,SAAA,CAAS,IAgB3B,EAZqB,EAAsB,KAAK,SAAS,QAAA,CAAS,KACjE,EAAU,KAAK,cAAA,EACf,GAAI,MAAA;GACH,EAAE,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;GAKH,KAAK,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;GAcP,OAVA,EAAc,iBAAA;IACT,KAAK,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;GAEC,KAAK,OAAA,CAAQ,KAAK;IAAA,EAEnB,EAAU,KAAK,cAAA,CAAA,CAEf,WAAA;;CAGH,SAAA;EACC,OAAO,CAAI;;;;;;;;;;qBAUQ,KAAK,OAAO,SAAS,QAAA;qBACrB,KAAK,WAAA;kBACR,KAAK,OAAO,aAAa,SAAA;eAC5B,MAAa,EAAE,iBAAA,CAAA;;;;;;;cAOhB,KAAK,WAAA;;;;GAvHjB,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,CAzBlB,EAAc,gBAAA,CAAA,EAAgB,EAAA;AAAA,SAAA,KAAA"}

package/dist/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","names":[],"sources":["../src/types/events.ts"],"sourcesContent":["export enum SchmancyEvents {\n\tNavDrawer_toggle = 'SchmancytoggleSidebar',\n\tContentDrawerToggle = 'ContentDrawerToggle',\n\tContentDrawerResize = 'ContentDrawerResize',\n}\n"],"mappings":"AAAA,IAAY,IAAL,SAAA,GAAA;AAAA,QACN,EAAA,mBAAmB,yBACnB,EAAA,sBAAsB,uBACtB,EAAA,sBAAsB,uBAAA;EAHhB,EAAA,CAAA;AAAA,SAAA,KAAA"}
+{"version":3,"file":"types.js","names":[],"sources":["../src/types/events.ts"],"sourcesContent":["export enum SchmancyEvents {\n\tNavDrawer_toggle = 'SchmancytoggleSidebar',\n\tContentDrawerToggle = 'ContentDrawerToggle',\n\tContentDrawerResize = 'ContentDrawerResize',\n}\n"],"mappings":"AAAA,IAAY,IAAL,SAAA,GAAA;CAAA,OACN,EAAA,mBAAmB,yBACnB,EAAA,sBAAsB,uBACtB,EAAA,sBAAsB,uBAAA;EAHhB,EAAA,CAAA;AAAA,SAAA,KAAA"}

package/dist/typewriter.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"typewriter.cjs","names":[],"sources":["../src/typewriter/typewriter.directive.ts"],"sourcesContent":["/**\n * Typewriter Directive - RxJS-based typing animation\n *\n * Creates a smooth typewriter effect with automatic cycling through phrases.\n * Uses RxJS for precise timing and clean reactive patterns.\n *\n * @example\n * ```ts\n * // Simple cycling through words\n * html`<div ${typewriter(['Trustless', 'Permissionless', 'Transparent'])}>\n *   <span class=\"typed\"></span>\n * </div>`\n *\n * // Custom speeds and pauses\n * html`<div ${typewriter(['Fast', 'Typing'], { typeSpeed: 50, pauseDuration: 1000 })}>\n *   <span class=\"typed\"></span>\n * </div>`\n *\n * // One-time typing (no loop)\n * html`<div ${typewriter(['Hello World'], { loop: false })}>\n *   <span class=\"typed\"></span>\n * </div>`\n * ```\n */\n\nimport type { ElementPart } from 'lit'\nimport { noChange } from 'lit'\nimport { AsyncDirective, directive } from 'lit/async-directive.js'\nimport { concat, defer, EMPTY, interval, of, Subscription } from 'rxjs'\nimport { delay, repeat, take, tap } from 'rxjs/operators'\n\nexport interface TypewriterOptions {\n\ttypeSpeed?: number // Speed of typing (ms per character)\n\tdeleteSpeed?: number // Speed of deleting (ms per character)\n\tpauseDuration?: number // Pause after typing before deleting (ms)\n\tloop?: boolean // Whether to loop through phrases\n\tselector?: string // CSS selector for target element (default: '.typed')\n\tcursor?: boolean // Show cursor\n\tfinalMessage?: string // Message to display after cycling completes\n\tsound?: boolean // Play typewriter sounds (default: true)\n\tvolume?: number // Sound volume (0-1, default: 0.3)\n}\n\ninterface TypewriterState {\n\tphrases: string[]\n\toptions: Required<TypewriterOptions>\n\telement?: HTMLElement\n\ttargetElement?: HTMLElement\n\tsubscription?: Subscription\n\taudioContext?: AudioContext\n}\n\n// Typewriter sound generator using Web Audio API\nclass TypewriterSound {\n\tprivate audioContext: AudioContext\n\tprivate volume: number\n\n\tconstructor(volume: number = 0.3) {\n\t\tthis.audioContext = new AudioContext()\n\t\tthis.volume = Math.max(0, Math.min(1, volume))\n\t}\n\n\t// Generate cute, soft typing sound - like a gentle \"pop\"\n\tplayKeyPress() {\n\t\tconst now = this.audioContext.currentTime\n\n\t\t// Higher, softer main tone - more \"pop\" than \"clack\"\n\t\tconst osc = this.audioContext.createOscillator()\n\t\tconst gainNode = this.audioContext.createGain()\n\n\t\t// Higher base frequency for cute sound + randomness\n\t\tconst baseFreq = 800 + Math.random() * 200\n\t\tosc.frequency.setValueAtTime(baseFreq, now)\n\t\tosc.type = 'sine' // Smoother, rounder sound\n\n\t\t// Gentler attack, quick but soft\n\t\tgainNode.gain.setValueAtTime(0, now)\n\t\tgainNode.gain.linearRampToValueAtTime(this.volume * 0.2, now + 0.005)\n\t\tgainNode.gain.exponentialRampToValueAtTime(0.001, now + 0.03)\n\n\t\tosc.connect(gainNode)\n\t\tgainNode.connect(this.audioContext.destination)\n\n\t\tosc.start(now)\n\t\tosc.stop(now + 0.03)\n\n\t\t// Add a cute high \"bleep\" for character\n\t\tconst bleepOsc = this.audioContext.createOscillator()\n\t\tconst bleepGain = this.audioContext.createGain()\n\n\t\tbleepOsc.frequency.setValueAtTime(1800 + Math.random() * 400, now)\n\t\tbleepOsc.type = 'sine'\n\n\t\tbleepGain.gain.setValueAtTime(0, now)\n\t\tbleepGain.gain.linearRampToValueAtTime(this.volume * 0.08, now + 0.003)\n\t\tbleepGain.gain.exponentialRampToValueAtTime(0.001, now + 0.015)\n\n\t\tbleepOsc.connect(bleepGain)\n\t\tbleepGain.connect(this.audioContext.destination)\n\n\t\tbleepOsc.start(now)\n\t\tbleepOsc.stop(now + 0.015)\n\t}\n\n\t// Softer \"whoosh\" sound for deletion - like erasing\n\tplayDelete() {\n\t\tconst now = this.audioContext.currentTime\n\n\t\tconst osc = this.audioContext.createOscillator()\n\t\tconst gainNode = this.audioContext.createGain()\n\n\t\t// Descending pitch for \"erasing\" feel\n\t\tosc.frequency.setValueAtTime(600, now)\n\t\tosc.frequency.exponentialRampToValueAtTime(200, now + 0.04)\n\t\tosc.type = 'sine'\n\n\t\tgainNode.gain.setValueAtTime(0, now)\n\t\tgainNode.gain.linearRampToValueAtTime(this.volume * 0.12, now + 0.005)\n\t\tgainNode.gain.exponentialRampToValueAtTime(0.001, now + 0.04)\n\n\t\tosc.connect(gainNode)\n\t\tgainNode.connect(this.audioContext.destination)\n\n\t\tosc.start(now)\n\t\tosc.stop(now + 0.04)\n\t}\n\n\tcleanup() {\n\t\tthis.audioContext.close()\n\t}\n}\n\nclass TypewriterDirective extends AsyncDirective {\n\tprivate state: TypewriterState | null = null\n\tprivate soundEngine: TypewriterSound | null = null\n\n\trender(_phrases: string[], _options: TypewriterOptions = {}) {\n\t\treturn noChange\n\t}\n\n\toverride update(\n\t\tpart: ElementPart,\n\t\t[phrases, options = {}]: [string[], TypewriterOptions]\n\t) {\n\t\tconst element = part.element as HTMLElement\n\n\t\t// Clean up if params changed\n\t\tif (\n\t\t\tthis.state &&\n\t\t\t(JSON.stringify(this.state.phrases) !== JSON.stringify(phrases) ||\n\t\t\t\tJSON.stringify(this.state.options) !== JSON.stringify(options))\n\t\t) {\n\t\t\tthis.cleanup()\n\t\t}\n\n\t\t// Initialize state\n\t\tif (!this.state) {\n\t\t\tconst defaultOptions: Required<TypewriterOptions> = {\n\t\t\t\ttypeSpeed: 50,\n\t\t\t\tdeleteSpeed: 30,\n\t\t\t\tpauseDuration: 1500,\n\t\t\t\tloop: true,\n\t\t\t\tselector: '.typed',\n\t\t\t\tcursor: false,\n\t\t\t\tfinalMessage: '',\n\t\t\t\tsound: true,\n\t\t\t\tvolume: 0.08,\n\t\t\t}\n\n\t\t\tthis.state = {\n\t\t\t\tphrases,\n\t\t\t\toptions: { ...defaultOptions, ...options },\n\t\t\t\telement,\n\t\t\t}\n\n\t\t\t// Initialize sound engine if enabled\n\t\t\tif (this.state.options.sound) {\n\t\t\t\tthis.soundEngine = new TypewriterSound(this.state.options.volume)\n\t\t\t}\n\n\t\t\t// Find target element\n\t\t\tthis.state.targetElement = element.querySelector<HTMLElement>(\n\t\t\t\tthis.state.options.selector\n\t\t\t) ?? undefined\n\n\t\t\tif (!this.state.targetElement) {\n\t\t\t\tconsole.warn(\n\t\t\t\t\t`Typewriter: Target element \"${this.state.options.selector}\" not found`\n\t\t\t\t)\n\t\t\t\treturn noChange\n\t\t\t}\n\n\t\t\t// Add cursor if enabled\n\t\t\tif (this.state.options.cursor) {\n\t\t\t\tthis.state.targetElement.style.position = 'relative'\n\t\t\t\tthis.state.targetElement.style.display = 'inline-block'\n\t\t\t\tconst cursor = document.createElement('span')\n\t\t\t\tcursor.className = 'typewriter-cursor'\n\t\t\t\tcursor.textContent = '|'\n\t\t\t\tcursor.style.cssText = `\n\t\t\t\t\tdisplay: inline-block;\n\t\t\t\t\tmargin-left: 2px;\n\t\t\t\t\tanimation: typewriter-blink 1s step-end infinite;\n\t\t\t\t`\n\t\t\t\tthis.state.targetElement.appendChild(cursor)\n\n\t\t\t\t// Add blink animation if not already present\n\t\t\t\tif (!document.getElementById('typewriter-styles')) {\n\t\t\t\t\tconst style = document.createElement('style')\n\t\t\t\t\tstyle.id = 'typewriter-styles'\n\t\t\t\t\tstyle.textContent = `\n\t\t\t\t\t\t@keyframes typewriter-blink {\n\t\t\t\t\t\t\t0%, 50% { opacity: 1; }\n\t\t\t\t\t\t\t51%, 100% { opacity: 0; }\n\t\t\t\t\t\t}\n\t\t\t\t\t`\n\t\t\t\t\tdocument.head.appendChild(style)\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tthis.startTyping()\n\t\t}\n\n\t\treturn noChange\n\t}\n\n\tprivate startTyping() {\n\t\tif (!this.state || !this.state.targetElement) return\n\n\t\tconst { phrases, options, targetElement } = this.state\n\n\t\t// Create typing observable for a single phrase\n\t\tconst typePhrase = (phrase: string, shouldDelete: boolean = true) => {\n\t\t\treturn concat(\n\t\t\t\t// Type each character\n\t\t\t\tdefer(() => {\n\t\t\t\t\tconst chars = phrase.split('')\n\t\t\t\t\treturn concat(\n\t\t\t\t\t\t...chars.map((char) =>\n\t\t\t\t\t\t\tof(char).pipe(\n\t\t\t\t\t\t\t\tdelay(options.typeSpeed),\n\t\t\t\t\t\t\t\ttap((c) => {\n\t\t\t\t\t\t\t\t\tconst textNode = this.getTextNode(targetElement)\n\t\t\t\t\t\t\t\t\tif (textNode) {\n\t\t\t\t\t\t\t\t\t\ttextNode.textContent += c\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t// Play key press sound\n\t\t\t\t\t\t\t\t\tif (this.soundEngine) {\n\t\t\t\t\t\t\t\t\t\tthis.soundEngine.playKeyPress()\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t})\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t)\n\t\t\t\t\t)\n\t\t\t\t}),\n\t\t\t\t// Pause after typing\n\t\t\t\tof(null).pipe(delay(options.pauseDuration)),\n\t\t\t\t// Delete each character (only if shouldDelete is true)\n\t\t\t\tshouldDelete ? defer(() => {\n\t\t\t\t\tconst deleteCount = phrase.length\n\t\t\t\t\treturn interval(options.deleteSpeed).pipe(\n\t\t\t\t\t\ttake(deleteCount),\n\t\t\t\t\t\ttap(() => {\n\t\t\t\t\t\t\tconst textNode = this.getTextNode(targetElement)\n\t\t\t\t\t\t\tif (textNode && textNode.textContent) {\n\t\t\t\t\t\t\t\ttextNode.textContent = textNode.textContent.slice(0, -1)\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t// Play delete sound\n\t\t\t\t\t\t\tif (this.soundEngine) {\n\t\t\t\t\t\t\t\tthis.soundEngine.playDelete()\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t})\n\t\t\t\t\t)\n\t\t\t\t}) : EMPTY,\n\t\t\t\t// Small pause before next phrase\n\t\t\t\tshouldDelete ? of(null).pipe(delay(200)) : EMPTY\n\t\t\t)\n\t\t}\n\n\t\t// Create observable that cycles through all phrases\n\t\tconst phrasesSequence = concat(\n\t\t\t...phrases.map((phrase) => typePhrase(phrase))\n\t\t)\n\n\t\t// Add final message if provided\n\t\tconst typingSequence = options.finalMessage\n\t\t\t? concat(\n\t\t\t\t\tphrasesSequence,\n\t\t\t\t\ttypePhrase(options.finalMessage, false) // Don't delete final message\n\t\t\t\t)\n\t\t\t: phrasesSequence\n\n\t\t// Subscribe and optionally loop\n\t\tthis.state.subscription = (\n\t\t\toptions.loop ? phrasesSequence.pipe(repeat()) : typingSequence\n\t\t).subscribe({\n\t\t\terror: (err) => console.error('Typewriter error:', err),\n\t\t})\n\t}\n\n\tprivate getTextNode(targetElement: HTMLElement): Text | null {\n\t\t// Get or create text node (ignoring cursor element)\n\t\tfor (const child of Array.from(targetElement.childNodes)) {\n\t\t\tif (child.nodeType === Node.TEXT_NODE) {\n\t\t\t\treturn child as Text\n\t\t\t}\n\t\t}\n\t\t// Create text node if it doesn't exist\n\t\tconst textNode = document.createTextNode('')\n\t\ttargetElement.insertBefore(textNode, targetElement.firstChild)\n\t\treturn textNode\n\t}\n\n\tprivate cleanup() {\n\t\tif (!this.state) return\n\n\t\t// Unsubscribe from typing observable\n\t\tif (this.state.subscription) {\n\t\t\tthis.state.subscription.unsubscribe()\n\t\t}\n\n\t\t// Remove cursor if present\n\t\tif (this.state.targetElement) {\n\t\t\tconst cursor = this.state.targetElement.querySelector('.typewriter-cursor')\n\t\t\tcursor?.remove()\n\t\t}\n\n\t\t// Cleanup sound engine\n\t\tif (this.soundEngine) {\n\t\t\tthis.soundEngine.cleanup()\n\t\t\tthis.soundEngine = null\n\t\t}\n\n\t\tthis.state = null\n\t}\n\n\toverride disconnected() {\n\t\tthis.cleanup()\n\t}\n\n\toverride reconnected(): void {\n\t\t// Re-start typing if state exists\n\t\tif (this.state && !this.state.subscription) {\n\t\t\tthis.startTyping()\n\t\t}\n\t}\n}\n\nexport const typewriter = directive(TypewriterDirective)\n"],"mappings":"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"}
+{"version":3,"file":"typewriter.cjs","names":[],"sources":["../src/typewriter/typewriter.directive.ts"],"sourcesContent":["/**\n * Typewriter Directive - RxJS-based typing animation\n *\n * Creates a smooth typewriter effect with automatic cycling through phrases.\n * Uses RxJS for precise timing and clean reactive patterns.\n *\n * @example\n * ```ts\n * // Simple cycling through words\n * html`<div ${typewriter(['Trustless', 'Permissionless', 'Transparent'])}>\n *   <span class=\"typed\"></span>\n * </div>`\n *\n * // Custom speeds and pauses\n * html`<div ${typewriter(['Fast', 'Typing'], { typeSpeed: 50, pauseDuration: 1000 })}>\n *   <span class=\"typed\"></span>\n * </div>`\n *\n * // One-time typing (no loop)\n * html`<div ${typewriter(['Hello World'], { loop: false })}>\n *   <span class=\"typed\"></span>\n * </div>`\n * ```\n */\n\nimport type { ElementPart } from 'lit'\nimport { noChange } from 'lit'\nimport { AsyncDirective, directive } from 'lit/async-directive.js'\nimport { concat, defer, EMPTY, interval, of, Subscription } from 'rxjs'\nimport { delay, repeat, take, tap } from 'rxjs/operators'\n\nexport interface TypewriterOptions {\n\ttypeSpeed?: number // Speed of typing (ms per character)\n\tdeleteSpeed?: number // Speed of deleting (ms per character)\n\tpauseDuration?: number // Pause after typing before deleting (ms)\n\tloop?: boolean // Whether to loop through phrases\n\tselector?: string // CSS selector for target element (default: '.typed')\n\tcursor?: boolean // Show cursor\n\tfinalMessage?: string // Message to display after cycling completes\n\tsound?: boolean // Play typewriter sounds (default: true)\n\tvolume?: number // Sound volume (0-1, default: 0.3)\n}\n\ninterface TypewriterState {\n\tphrases: string[]\n\toptions: Required<TypewriterOptions>\n\telement?: HTMLElement\n\ttargetElement?: HTMLElement\n\tsubscription?: Subscription\n\taudioContext?: AudioContext\n}\n\n// Typewriter sound generator using Web Audio API\nclass TypewriterSound {\n\tprivate audioContext: AudioContext\n\tprivate volume: number\n\n\tconstructor(volume: number = 0.3) {\n\t\tthis.audioContext = new AudioContext()\n\t\tthis.volume = Math.max(0, Math.min(1, volume))\n\t}\n\n\t// Generate cute, soft typing sound - like a gentle \"pop\"\n\tplayKeyPress() {\n\t\tconst now = this.audioContext.currentTime\n\n\t\t// Higher, softer main tone - more \"pop\" than \"clack\"\n\t\tconst osc = this.audioContext.createOscillator()\n\t\tconst gainNode = this.audioContext.createGain()\n\n\t\t// Higher base frequency for cute sound + randomness\n\t\tconst baseFreq = 800 + Math.random() * 200\n\t\tosc.frequency.setValueAtTime(baseFreq, now)\n\t\tosc.type = 'sine' // Smoother, rounder sound\n\n\t\t// Gentler attack, quick but soft\n\t\tgainNode.gain.setValueAtTime(0, now)\n\t\tgainNode.gain.linearRampToValueAtTime(this.volume * 0.2, now + 0.005)\n\t\tgainNode.gain.exponentialRampToValueAtTime(0.001, now + 0.03)\n\n\t\tosc.connect(gainNode)\n\t\tgainNode.connect(this.audioContext.destination)\n\n\t\tosc.start(now)\n\t\tosc.stop(now + 0.03)\n\n\t\t// Add a cute high \"bleep\" for character\n\t\tconst bleepOsc = this.audioContext.createOscillator()\n\t\tconst bleepGain = this.audioContext.createGain()\n\n\t\tbleepOsc.frequency.setValueAtTime(1800 + Math.random() * 400, now)\n\t\tbleepOsc.type = 'sine'\n\n\t\tbleepGain.gain.setValueAtTime(0, now)\n\t\tbleepGain.gain.linearRampToValueAtTime(this.volume * 0.08, now + 0.003)\n\t\tbleepGain.gain.exponentialRampToValueAtTime(0.001, now + 0.015)\n\n\t\tbleepOsc.connect(bleepGain)\n\t\tbleepGain.connect(this.audioContext.destination)\n\n\t\tbleepOsc.start(now)\n\t\tbleepOsc.stop(now + 0.015)\n\t}\n\n\t// Softer \"whoosh\" sound for deletion - like erasing\n\tplayDelete() {\n\t\tconst now = this.audioContext.currentTime\n\n\t\tconst osc = this.audioContext.createOscillator()\n\t\tconst gainNode = this.audioContext.createGain()\n\n\t\t// Descending pitch for \"erasing\" feel\n\t\tosc.frequency.setValueAtTime(600, now)\n\t\tosc.frequency.exponentialRampToValueAtTime(200, now + 0.04)\n\t\tosc.type = 'sine'\n\n\t\tgainNode.gain.setValueAtTime(0, now)\n\t\tgainNode.gain.linearRampToValueAtTime(this.volume * 0.12, now + 0.005)\n\t\tgainNode.gain.exponentialRampToValueAtTime(0.001, now + 0.04)\n\n\t\tosc.connect(gainNode)\n\t\tgainNode.connect(this.audioContext.destination)\n\n\t\tosc.start(now)\n\t\tosc.stop(now + 0.04)\n\t}\n\n\tcleanup() {\n\t\tthis.audioContext.close()\n\t}\n}\n\nclass TypewriterDirective extends AsyncDirective {\n\tprivate state: TypewriterState | null = null\n\tprivate soundEngine: TypewriterSound | null = null\n\n\trender(_phrases: string[], _options: TypewriterOptions = {}) {\n\t\treturn noChange\n\t}\n\n\toverride update(\n\t\tpart: ElementPart,\n\t\t[phrases, options = {}]: [string[], TypewriterOptions]\n\t) {\n\t\tconst element = part.element as HTMLElement\n\n\t\t// Clean up if params changed\n\t\tif (\n\t\t\tthis.state &&\n\t\t\t(JSON.stringify(this.state.phrases) !== JSON.stringify(phrases) ||\n\t\t\t\tJSON.stringify(this.state.options) !== JSON.stringify(options))\n\t\t) {\n\t\t\tthis.cleanup()\n\t\t}\n\n\t\t// Initialize state\n\t\tif (!this.state) {\n\t\t\tconst defaultOptions: Required<TypewriterOptions> = {\n\t\t\t\ttypeSpeed: 50,\n\t\t\t\tdeleteSpeed: 30,\n\t\t\t\tpauseDuration: 1500,\n\t\t\t\tloop: true,\n\t\t\t\tselector: '.typed',\n\t\t\t\tcursor: false,\n\t\t\t\tfinalMessage: '',\n\t\t\t\tsound: true,\n\t\t\t\tvolume: 0.08,\n\t\t\t}\n\n\t\t\tthis.state = {\n\t\t\t\tphrases,\n\t\t\t\toptions: { ...defaultOptions, ...options },\n\t\t\t\telement,\n\t\t\t}\n\n\t\t\t// Initialize sound engine if enabled\n\t\t\tif (this.state.options.sound) {\n\t\t\t\tthis.soundEngine = new TypewriterSound(this.state.options.volume)\n\t\t\t}\n\n\t\t\t// Find target element\n\t\t\tthis.state.targetElement = element.querySelector<HTMLElement>(\n\t\t\t\tthis.state.options.selector\n\t\t\t) ?? undefined\n\n\t\t\tif (!this.state.targetElement) {\n\t\t\t\tconsole.warn(\n\t\t\t\t\t`Typewriter: Target element \"${this.state.options.selector}\" not found`\n\t\t\t\t)\n\t\t\t\treturn noChange\n\t\t\t}\n\n\t\t\t// Add cursor if enabled\n\t\t\tif (this.state.options.cursor) {\n\t\t\t\tthis.state.targetElement.style.position = 'relative'\n\t\t\t\tthis.state.targetElement.style.display = 'inline-block'\n\t\t\t\tconst cursor = document.createElement('span')\n\t\t\t\tcursor.className = 'typewriter-cursor'\n\t\t\t\tcursor.textContent = '|'\n\t\t\t\tcursor.style.cssText = `\n\t\t\t\t\tdisplay: inline-block;\n\t\t\t\t\tmargin-left: 2px;\n\t\t\t\t\tanimation: typewriter-blink 1s step-end infinite;\n\t\t\t\t`\n\t\t\t\tthis.state.targetElement.appendChild(cursor)\n\n\t\t\t\t// Add blink animation if not already present\n\t\t\t\tif (!document.getElementById('typewriter-styles')) {\n\t\t\t\t\tconst style = document.createElement('style')\n\t\t\t\t\tstyle.id = 'typewriter-styles'\n\t\t\t\t\tstyle.textContent = `\n\t\t\t\t\t\t@keyframes typewriter-blink {\n\t\t\t\t\t\t\t0%, 50% { opacity: 1; }\n\t\t\t\t\t\t\t51%, 100% { opacity: 0; }\n\t\t\t\t\t\t}\n\t\t\t\t\t`\n\t\t\t\t\tdocument.head.appendChild(style)\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tthis.startTyping()\n\t\t}\n\n\t\treturn noChange\n\t}\n\n\tprivate startTyping() {\n\t\tif (!this.state || !this.state.targetElement) return\n\n\t\tconst { phrases, options, targetElement } = this.state\n\n\t\t// Create typing observable for a single phrase\n\t\tconst typePhrase = (phrase: string, shouldDelete: boolean = true) => {\n\t\t\treturn concat(\n\t\t\t\t// Type each character\n\t\t\t\tdefer(() => {\n\t\t\t\t\tconst chars = phrase.split('')\n\t\t\t\t\treturn concat(\n\t\t\t\t\t\t...chars.map((char) =>\n\t\t\t\t\t\t\tof(char).pipe(\n\t\t\t\t\t\t\t\tdelay(options.typeSpeed),\n\t\t\t\t\t\t\t\ttap((c) => {\n\t\t\t\t\t\t\t\t\tconst textNode = this.getTextNode(targetElement)\n\t\t\t\t\t\t\t\t\tif (textNode) {\n\t\t\t\t\t\t\t\t\t\ttextNode.textContent += c\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t// Play key press sound\n\t\t\t\t\t\t\t\t\tif (this.soundEngine) {\n\t\t\t\t\t\t\t\t\t\tthis.soundEngine.playKeyPress()\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t})\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t)\n\t\t\t\t\t)\n\t\t\t\t}),\n\t\t\t\t// Pause after typing\n\t\t\t\tof(null).pipe(delay(options.pauseDuration)),\n\t\t\t\t// Delete each character (only if shouldDelete is true)\n\t\t\t\tshouldDelete ? defer(() => {\n\t\t\t\t\tconst deleteCount = phrase.length\n\t\t\t\t\treturn interval(options.deleteSpeed).pipe(\n\t\t\t\t\t\ttake(deleteCount),\n\t\t\t\t\t\ttap(() => {\n\t\t\t\t\t\t\tconst textNode = this.getTextNode(targetElement)\n\t\t\t\t\t\t\tif (textNode && textNode.textContent) {\n\t\t\t\t\t\t\t\ttextNode.textContent = textNode.textContent.slice(0, -1)\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t// Play delete sound\n\t\t\t\t\t\t\tif (this.soundEngine) {\n\t\t\t\t\t\t\t\tthis.soundEngine.playDelete()\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t})\n\t\t\t\t\t)\n\t\t\t\t}) : EMPTY,\n\t\t\t\t// Small pause before next phrase\n\t\t\t\tshouldDelete ? of(null).pipe(delay(200)) : EMPTY\n\t\t\t)\n\t\t}\n\n\t\t// Create observable that cycles through all phrases\n\t\tconst phrasesSequence = concat(\n\t\t\t...phrases.map((phrase) => typePhrase(phrase))\n\t\t)\n\n\t\t// Add final message if provided\n\t\tconst typingSequence = options.finalMessage\n\t\t\t? concat(\n\t\t\t\t\tphrasesSequence,\n\t\t\t\t\ttypePhrase(options.finalMessage, false) // Don't delete final message\n\t\t\t\t)\n\t\t\t: phrasesSequence\n\n\t\t// Subscribe and optionally loop\n\t\tthis.state.subscription = (\n\t\t\toptions.loop ? phrasesSequence.pipe(repeat()) : typingSequence\n\t\t).subscribe({\n\t\t\terror: (err) => console.error('Typewriter error:', err),\n\t\t})\n\t}\n\n\tprivate getTextNode(targetElement: HTMLElement): Text | null {\n\t\t// Get or create text node (ignoring cursor element)\n\t\tfor (const child of Array.from(targetElement.childNodes)) {\n\t\t\tif (child.nodeType === Node.TEXT_NODE) {\n\t\t\t\treturn child as Text\n\t\t\t}\n\t\t}\n\t\t// Create text node if it doesn't exist\n\t\tconst textNode = document.createTextNode('')\n\t\ttargetElement.insertBefore(textNode, targetElement.firstChild)\n\t\treturn textNode\n\t}\n\n\tprivate cleanup() {\n\t\tif (!this.state) return\n\n\t\t// Unsubscribe from typing observable\n\t\tif (this.state.subscription) {\n\t\t\tthis.state.subscription.unsubscribe()\n\t\t}\n\n\t\t// Remove cursor if present\n\t\tif (this.state.targetElement) {\n\t\t\tconst cursor = this.state.targetElement.querySelector('.typewriter-cursor')\n\t\t\tcursor?.remove()\n\t\t}\n\n\t\t// Cleanup sound engine\n\t\tif (this.soundEngine) {\n\t\t\tthis.soundEngine.cleanup()\n\t\t\tthis.soundEngine = null\n\t\t}\n\n\t\tthis.state = null\n\t}\n\n\toverride disconnected() {\n\t\tthis.cleanup()\n\t}\n\n\toverride reconnected(): void {\n\t\t// Re-start typing if state exists\n\t\tif (this.state && !this.state.subscription) {\n\t\t\tthis.startTyping()\n\t\t}\n\t}\n}\n\nexport const typewriter = directive(TypewriterDirective)\n"],"mappings":"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"}

package/dist/typewriter.js.map

@@ -1 +1 @@
-{"version":3,"file":"typewriter.js","names":[],"sources":["../src/typewriter/typewriter.directive.ts"],"sourcesContent":["/**\n * Typewriter Directive - RxJS-based typing animation\n *\n * Creates a smooth typewriter effect with automatic cycling through phrases.\n * Uses RxJS for precise timing and clean reactive patterns.\n *\n * @example\n * ```ts\n * // Simple cycling through words\n * html`<div ${typewriter(['Trustless', 'Permissionless', 'Transparent'])}>\n *   <span class=\"typed\"></span>\n * </div>`\n *\n * // Custom speeds and pauses\n * html`<div ${typewriter(['Fast', 'Typing'], { typeSpeed: 50, pauseDuration: 1000 })}>\n *   <span class=\"typed\"></span>\n * </div>`\n *\n * // One-time typing (no loop)\n * html`<div ${typewriter(['Hello World'], { loop: false })}>\n *   <span class=\"typed\"></span>\n * </div>`\n * ```\n */\n\nimport type { ElementPart } from 'lit'\nimport { noChange } from 'lit'\nimport { AsyncDirective, directive } from 'lit/async-directive.js'\nimport { concat, defer, EMPTY, interval, of, Subscription } from 'rxjs'\nimport { delay, repeat, take, tap } from 'rxjs/operators'\n\nexport interface TypewriterOptions {\n\ttypeSpeed?: number // Speed of typing (ms per character)\n\tdeleteSpeed?: number // Speed of deleting (ms per character)\n\tpauseDuration?: number // Pause after typing before deleting (ms)\n\tloop?: boolean // Whether to loop through phrases\n\tselector?: string // CSS selector for target element (default: '.typed')\n\tcursor?: boolean // Show cursor\n\tfinalMessage?: string // Message to display after cycling completes\n\tsound?: boolean // Play typewriter sounds (default: true)\n\tvolume?: number // Sound volume (0-1, default: 0.3)\n}\n\ninterface TypewriterState {\n\tphrases: string[]\n\toptions: Required<TypewriterOptions>\n\telement?: HTMLElement\n\ttargetElement?: HTMLElement\n\tsubscription?: Subscription\n\taudioContext?: AudioContext\n}\n\n// Typewriter sound generator using Web Audio API\nclass TypewriterSound {\n\tprivate audioContext: AudioContext\n\tprivate volume: number\n\n\tconstructor(volume: number = 0.3) {\n\t\tthis.audioContext = new AudioContext()\n\t\tthis.volume = Math.max(0, Math.min(1, volume))\n\t}\n\n\t// Generate cute, soft typing sound - like a gentle \"pop\"\n\tplayKeyPress() {\n\t\tconst now = this.audioContext.currentTime\n\n\t\t// Higher, softer main tone - more \"pop\" than \"clack\"\n\t\tconst osc = this.audioContext.createOscillator()\n\t\tconst gainNode = this.audioContext.createGain()\n\n\t\t// Higher base frequency for cute sound + randomness\n\t\tconst baseFreq = 800 + Math.random() * 200\n\t\tosc.frequency.setValueAtTime(baseFreq, now)\n\t\tosc.type = 'sine' // Smoother, rounder sound\n\n\t\t// Gentler attack, quick but soft\n\t\tgainNode.gain.setValueAtTime(0, now)\n\t\tgainNode.gain.linearRampToValueAtTime(this.volume * 0.2, now + 0.005)\n\t\tgainNode.gain.exponentialRampToValueAtTime(0.001, now + 0.03)\n\n\t\tosc.connect(gainNode)\n\t\tgainNode.connect(this.audioContext.destination)\n\n\t\tosc.start(now)\n\t\tosc.stop(now + 0.03)\n\n\t\t// Add a cute high \"bleep\" for character\n\t\tconst bleepOsc = this.audioContext.createOscillator()\n\t\tconst bleepGain = this.audioContext.createGain()\n\n\t\tbleepOsc.frequency.setValueAtTime(1800 + Math.random() * 400, now)\n\t\tbleepOsc.type = 'sine'\n\n\t\tbleepGain.gain.setValueAtTime(0, now)\n\t\tbleepGain.gain.linearRampToValueAtTime(this.volume * 0.08, now + 0.003)\n\t\tbleepGain.gain.exponentialRampToValueAtTime(0.001, now + 0.015)\n\n\t\tbleepOsc.connect(bleepGain)\n\t\tbleepGain.connect(this.audioContext.destination)\n\n\t\tbleepOsc.start(now)\n\t\tbleepOsc.stop(now + 0.015)\n\t}\n\n\t// Softer \"whoosh\" sound for deletion - like erasing\n\tplayDelete() {\n\t\tconst now = this.audioContext.currentTime\n\n\t\tconst osc = this.audioContext.createOscillator()\n\t\tconst gainNode = this.audioContext.createGain()\n\n\t\t// Descending pitch for \"erasing\" feel\n\t\tosc.frequency.setValueAtTime(600, now)\n\t\tosc.frequency.exponentialRampToValueAtTime(200, now + 0.04)\n\t\tosc.type = 'sine'\n\n\t\tgainNode.gain.setValueAtTime(0, now)\n\t\tgainNode.gain.linearRampToValueAtTime(this.volume * 0.12, now + 0.005)\n\t\tgainNode.gain.exponentialRampToValueAtTime(0.001, now + 0.04)\n\n\t\tosc.connect(gainNode)\n\t\tgainNode.connect(this.audioContext.destination)\n\n\t\tosc.start(now)\n\t\tosc.stop(now + 0.04)\n\t}\n\n\tcleanup() {\n\t\tthis.audioContext.close()\n\t}\n}\n\nclass TypewriterDirective extends AsyncDirective {\n\tprivate state: TypewriterState | null = null\n\tprivate soundEngine: TypewriterSound | null = null\n\n\trender(_phrases: string[], _options: TypewriterOptions = {}) {\n\t\treturn noChange\n\t}\n\n\toverride update(\n\t\tpart: ElementPart,\n\t\t[phrases, options = {}]: [string[], TypewriterOptions]\n\t) {\n\t\tconst element = part.element as HTMLElement\n\n\t\t// Clean up if params changed\n\t\tif (\n\t\t\tthis.state &&\n\t\t\t(JSON.stringify(this.state.phrases) !== JSON.stringify(phrases) ||\n\t\t\t\tJSON.stringify(this.state.options) !== JSON.stringify(options))\n\t\t) {\n\t\t\tthis.cleanup()\n\t\t}\n\n\t\t// Initialize state\n\t\tif (!this.state) {\n\t\t\tconst defaultOptions: Required<TypewriterOptions> = {\n\t\t\t\ttypeSpeed: 50,\n\t\t\t\tdeleteSpeed: 30,\n\t\t\t\tpauseDuration: 1500,\n\t\t\t\tloop: true,\n\t\t\t\tselector: '.typed',\n\t\t\t\tcursor: false,\n\t\t\t\tfinalMessage: '',\n\t\t\t\tsound: true,\n\t\t\t\tvolume: 0.08,\n\t\t\t}\n\n\t\t\tthis.state = {\n\t\t\t\tphrases,\n\t\t\t\toptions: { ...defaultOptions, ...options },\n\t\t\t\telement,\n\t\t\t}\n\n\t\t\t// Initialize sound engine if enabled\n\t\t\tif (this.state.options.sound) {\n\t\t\t\tthis.soundEngine = new TypewriterSound(this.state.options.volume)\n\t\t\t}\n\n\t\t\t// Find target element\n\t\t\tthis.state.targetElement = element.querySelector<HTMLElement>(\n\t\t\t\tthis.state.options.selector\n\t\t\t) ?? undefined\n\n\t\t\tif (!this.state.targetElement) {\n\t\t\t\tconsole.warn(\n\t\t\t\t\t`Typewriter: Target element \"${this.state.options.selector}\" not found`\n\t\t\t\t)\n\t\t\t\treturn noChange\n\t\t\t}\n\n\t\t\t// Add cursor if enabled\n\t\t\tif (this.state.options.cursor) {\n\t\t\t\tthis.state.targetElement.style.position = 'relative'\n\t\t\t\tthis.state.targetElement.style.display = 'inline-block'\n\t\t\t\tconst cursor = document.createElement('span')\n\t\t\t\tcursor.className = 'typewriter-cursor'\n\t\t\t\tcursor.textContent = '|'\n\t\t\t\tcursor.style.cssText = `\n\t\t\t\t\tdisplay: inline-block;\n\t\t\t\t\tmargin-left: 2px;\n\t\t\t\t\tanimation: typewriter-blink 1s step-end infinite;\n\t\t\t\t`\n\t\t\t\tthis.state.targetElement.appendChild(cursor)\n\n\t\t\t\t// Add blink animation if not already present\n\t\t\t\tif (!document.getElementById('typewriter-styles')) {\n\t\t\t\t\tconst style = document.createElement('style')\n\t\t\t\t\tstyle.id = 'typewriter-styles'\n\t\t\t\t\tstyle.textContent = `\n\t\t\t\t\t\t@keyframes typewriter-blink {\n\t\t\t\t\t\t\t0%, 50% { opacity: 1; }\n\t\t\t\t\t\t\t51%, 100% { opacity: 0; }\n\t\t\t\t\t\t}\n\t\t\t\t\t`\n\t\t\t\t\tdocument.head.appendChild(style)\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tthis.startTyping()\n\t\t}\n\n\t\treturn noChange\n\t}\n\n\tprivate startTyping() {\n\t\tif (!this.state || !this.state.targetElement) return\n\n\t\tconst { phrases, options, targetElement } = this.state\n\n\t\t// Create typing observable for a single phrase\n\t\tconst typePhrase = (phrase: string, shouldDelete: boolean = true) => {\n\t\t\treturn concat(\n\t\t\t\t// Type each character\n\t\t\t\tdefer(() => {\n\t\t\t\t\tconst chars = phrase.split('')\n\t\t\t\t\treturn concat(\n\t\t\t\t\t\t...chars.map((char) =>\n\t\t\t\t\t\t\tof(char).pipe(\n\t\t\t\t\t\t\t\tdelay(options.typeSpeed),\n\t\t\t\t\t\t\t\ttap((c) => {\n\t\t\t\t\t\t\t\t\tconst textNode = this.getTextNode(targetElement)\n\t\t\t\t\t\t\t\t\tif (textNode) {\n\t\t\t\t\t\t\t\t\t\ttextNode.textContent += c\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t// Play key press sound\n\t\t\t\t\t\t\t\t\tif (this.soundEngine) {\n\t\t\t\t\t\t\t\t\t\tthis.soundEngine.playKeyPress()\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t})\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t)\n\t\t\t\t\t)\n\t\t\t\t}),\n\t\t\t\t// Pause after typing\n\t\t\t\tof(null).pipe(delay(options.pauseDuration)),\n\t\t\t\t// Delete each character (only if shouldDelete is true)\n\t\t\t\tshouldDelete ? defer(() => {\n\t\t\t\t\tconst deleteCount = phrase.length\n\t\t\t\t\treturn interval(options.deleteSpeed).pipe(\n\t\t\t\t\t\ttake(deleteCount),\n\t\t\t\t\t\ttap(() => {\n\t\t\t\t\t\t\tconst textNode = this.getTextNode(targetElement)\n\t\t\t\t\t\t\tif (textNode && textNode.textContent) {\n\t\t\t\t\t\t\t\ttextNode.textContent = textNode.textContent.slice(0, -1)\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t// Play delete sound\n\t\t\t\t\t\t\tif (this.soundEngine) {\n\t\t\t\t\t\t\t\tthis.soundEngine.playDelete()\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t})\n\t\t\t\t\t)\n\t\t\t\t}) : EMPTY,\n\t\t\t\t// Small pause before next phrase\n\t\t\t\tshouldDelete ? of(null).pipe(delay(200)) : EMPTY\n\t\t\t)\n\t\t}\n\n\t\t// Create observable that cycles through all phrases\n\t\tconst phrasesSequence = concat(\n\t\t\t...phrases.map((phrase) => typePhrase(phrase))\n\t\t)\n\n\t\t// Add final message if provided\n\t\tconst typingSequence = options.finalMessage\n\t\t\t? concat(\n\t\t\t\t\tphrasesSequence,\n\t\t\t\t\ttypePhrase(options.finalMessage, false) // Don't delete final message\n\t\t\t\t)\n\t\t\t: phrasesSequence\n\n\t\t// Subscribe and optionally loop\n\t\tthis.state.subscription = (\n\t\t\toptions.loop ? phrasesSequence.pipe(repeat()) : typingSequence\n\t\t).subscribe({\n\t\t\terror: (err) => console.error('Typewriter error:', err),\n\t\t})\n\t}\n\n\tprivate getTextNode(targetElement: HTMLElement): Text | null {\n\t\t// Get or create text node (ignoring cursor element)\n\t\tfor (const child of Array.from(targetElement.childNodes)) {\n\t\t\tif (child.nodeType === Node.TEXT_NODE) {\n\t\t\t\treturn child as Text\n\t\t\t}\n\t\t}\n\t\t// Create text node if it doesn't exist\n\t\tconst textNode = document.createTextNode('')\n\t\ttargetElement.insertBefore(textNode, targetElement.firstChild)\n\t\treturn textNode\n\t}\n\n\tprivate cleanup() {\n\t\tif (!this.state) return\n\n\t\t// Unsubscribe from typing observable\n\t\tif (this.state.subscription) {\n\t\t\tthis.state.subscription.unsubscribe()\n\t\t}\n\n\t\t// Remove cursor if present\n\t\tif (this.state.targetElement) {\n\t\t\tconst cursor = this.state.targetElement.querySelector('.typewriter-cursor')\n\t\t\tcursor?.remove()\n\t\t}\n\n\t\t// Cleanup sound engine\n\t\tif (this.soundEngine) {\n\t\t\tthis.soundEngine.cleanup()\n\t\t\tthis.soundEngine = null\n\t\t}\n\n\t\tthis.state = null\n\t}\n\n\toverride disconnected() {\n\t\tthis.cleanup()\n\t}\n\n\toverride reconnected(): void {\n\t\t// Re-start typing if state exists\n\t\tif (this.state && !this.state.subscription) {\n\t\t\tthis.startTyping()\n\t\t}\n\t}\n}\n\nexport const typewriter = directive(TypewriterDirective)\n"],"mappings":"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"}
+{"version":3,"file":"typewriter.js","names":[],"sources":["../src/typewriter/typewriter.directive.ts"],"sourcesContent":["/**\n * Typewriter Directive - RxJS-based typing animation\n *\n * Creates a smooth typewriter effect with automatic cycling through phrases.\n * Uses RxJS for precise timing and clean reactive patterns.\n *\n * @example\n * ```ts\n * // Simple cycling through words\n * html`<div ${typewriter(['Trustless', 'Permissionless', 'Transparent'])}>\n *   <span class=\"typed\"></span>\n * </div>`\n *\n * // Custom speeds and pauses\n * html`<div ${typewriter(['Fast', 'Typing'], { typeSpeed: 50, pauseDuration: 1000 })}>\n *   <span class=\"typed\"></span>\n * </div>`\n *\n * // One-time typing (no loop)\n * html`<div ${typewriter(['Hello World'], { loop: false })}>\n *   <span class=\"typed\"></span>\n * </div>`\n * ```\n */\n\nimport type { ElementPart } from 'lit'\nimport { noChange } from 'lit'\nimport { AsyncDirective, directive } from 'lit/async-directive.js'\nimport { concat, defer, EMPTY, interval, of, Subscription } from 'rxjs'\nimport { delay, repeat, take, tap } from 'rxjs/operators'\n\nexport interface TypewriterOptions {\n\ttypeSpeed?: number // Speed of typing (ms per character)\n\tdeleteSpeed?: number // Speed of deleting (ms per character)\n\tpauseDuration?: number // Pause after typing before deleting (ms)\n\tloop?: boolean // Whether to loop through phrases\n\tselector?: string // CSS selector for target element (default: '.typed')\n\tcursor?: boolean // Show cursor\n\tfinalMessage?: string // Message to display after cycling completes\n\tsound?: boolean // Play typewriter sounds (default: true)\n\tvolume?: number // Sound volume (0-1, default: 0.3)\n}\n\ninterface TypewriterState {\n\tphrases: string[]\n\toptions: Required<TypewriterOptions>\n\telement?: HTMLElement\n\ttargetElement?: HTMLElement\n\tsubscription?: Subscription\n\taudioContext?: AudioContext\n}\n\n// Typewriter sound generator using Web Audio API\nclass TypewriterSound {\n\tprivate audioContext: AudioContext\n\tprivate volume: number\n\n\tconstructor(volume: number = 0.3) {\n\t\tthis.audioContext = new AudioContext()\n\t\tthis.volume = Math.max(0, Math.min(1, volume))\n\t}\n\n\t// Generate cute, soft typing sound - like a gentle \"pop\"\n\tplayKeyPress() {\n\t\tconst now = this.audioContext.currentTime\n\n\t\t// Higher, softer main tone - more \"pop\" than \"clack\"\n\t\tconst osc = this.audioContext.createOscillator()\n\t\tconst gainNode = this.audioContext.createGain()\n\n\t\t// Higher base frequency for cute sound + randomness\n\t\tconst baseFreq = 800 + Math.random() * 200\n\t\tosc.frequency.setValueAtTime(baseFreq, now)\n\t\tosc.type = 'sine' // Smoother, rounder sound\n\n\t\t// Gentler attack, quick but soft\n\t\tgainNode.gain.setValueAtTime(0, now)\n\t\tgainNode.gain.linearRampToValueAtTime(this.volume * 0.2, now + 0.005)\n\t\tgainNode.gain.exponentialRampToValueAtTime(0.001, now + 0.03)\n\n\t\tosc.connect(gainNode)\n\t\tgainNode.connect(this.audioContext.destination)\n\n\t\tosc.start(now)\n\t\tosc.stop(now + 0.03)\n\n\t\t// Add a cute high \"bleep\" for character\n\t\tconst bleepOsc = this.audioContext.createOscillator()\n\t\tconst bleepGain = this.audioContext.createGain()\n\n\t\tbleepOsc.frequency.setValueAtTime(1800 + Math.random() * 400, now)\n\t\tbleepOsc.type = 'sine'\n\n\t\tbleepGain.gain.setValueAtTime(0, now)\n\t\tbleepGain.gain.linearRampToValueAtTime(this.volume * 0.08, now + 0.003)\n\t\tbleepGain.gain.exponentialRampToValueAtTime(0.001, now + 0.015)\n\n\t\tbleepOsc.connect(bleepGain)\n\t\tbleepGain.connect(this.audioContext.destination)\n\n\t\tbleepOsc.start(now)\n\t\tbleepOsc.stop(now + 0.015)\n\t}\n\n\t// Softer \"whoosh\" sound for deletion - like erasing\n\tplayDelete() {\n\t\tconst now = this.audioContext.currentTime\n\n\t\tconst osc = this.audioContext.createOscillator()\n\t\tconst gainNode = this.audioContext.createGain()\n\n\t\t// Descending pitch for \"erasing\" feel\n\t\tosc.frequency.setValueAtTime(600, now)\n\t\tosc.frequency.exponentialRampToValueAtTime(200, now + 0.04)\n\t\tosc.type = 'sine'\n\n\t\tgainNode.gain.setValueAtTime(0, now)\n\t\tgainNode.gain.linearRampToValueAtTime(this.volume * 0.12, now + 0.005)\n\t\tgainNode.gain.exponentialRampToValueAtTime(0.001, now + 0.04)\n\n\t\tosc.connect(gainNode)\n\t\tgainNode.connect(this.audioContext.destination)\n\n\t\tosc.start(now)\n\t\tosc.stop(now + 0.04)\n\t}\n\n\tcleanup() {\n\t\tthis.audioContext.close()\n\t}\n}\n\nclass TypewriterDirective extends AsyncDirective {\n\tprivate state: TypewriterState | null = null\n\tprivate soundEngine: TypewriterSound | null = null\n\n\trender(_phrases: string[], _options: TypewriterOptions = {}) {\n\t\treturn noChange\n\t}\n\n\toverride update(\n\t\tpart: ElementPart,\n\t\t[phrases, options = {}]: [string[], TypewriterOptions]\n\t) {\n\t\tconst element = part.element as HTMLElement\n\n\t\t// Clean up if params changed\n\t\tif (\n\t\t\tthis.state &&\n\t\t\t(JSON.stringify(this.state.phrases) !== JSON.stringify(phrases) ||\n\t\t\t\tJSON.stringify(this.state.options) !== JSON.stringify(options))\n\t\t) {\n\t\t\tthis.cleanup()\n\t\t}\n\n\t\t// Initialize state\n\t\tif (!this.state) {\n\t\t\tconst defaultOptions: Required<TypewriterOptions> = {\n\t\t\t\ttypeSpeed: 50,\n\t\t\t\tdeleteSpeed: 30,\n\t\t\t\tpauseDuration: 1500,\n\t\t\t\tloop: true,\n\t\t\t\tselector: '.typed',\n\t\t\t\tcursor: false,\n\t\t\t\tfinalMessage: '',\n\t\t\t\tsound: true,\n\t\t\t\tvolume: 0.08,\n\t\t\t}\n\n\t\t\tthis.state = {\n\t\t\t\tphrases,\n\t\t\t\toptions: { ...defaultOptions, ...options },\n\t\t\t\telement,\n\t\t\t}\n\n\t\t\t// Initialize sound engine if enabled\n\t\t\tif (this.state.options.sound) {\n\t\t\t\tthis.soundEngine = new TypewriterSound(this.state.options.volume)\n\t\t\t}\n\n\t\t\t// Find target element\n\t\t\tthis.state.targetElement = element.querySelector<HTMLElement>(\n\t\t\t\tthis.state.options.selector\n\t\t\t) ?? undefined\n\n\t\t\tif (!this.state.targetElement) {\n\t\t\t\tconsole.warn(\n\t\t\t\t\t`Typewriter: Target element \"${this.state.options.selector}\" not found`\n\t\t\t\t)\n\t\t\t\treturn noChange\n\t\t\t}\n\n\t\t\t// Add cursor if enabled\n\t\t\tif (this.state.options.cursor) {\n\t\t\t\tthis.state.targetElement.style.position = 'relative'\n\t\t\t\tthis.state.targetElement.style.display = 'inline-block'\n\t\t\t\tconst cursor = document.createElement('span')\n\t\t\t\tcursor.className = 'typewriter-cursor'\n\t\t\t\tcursor.textContent = '|'\n\t\t\t\tcursor.style.cssText = `\n\t\t\t\t\tdisplay: inline-block;\n\t\t\t\t\tmargin-left: 2px;\n\t\t\t\t\tanimation: typewriter-blink 1s step-end infinite;\n\t\t\t\t`\n\t\t\t\tthis.state.targetElement.appendChild(cursor)\n\n\t\t\t\t// Add blink animation if not already present\n\t\t\t\tif (!document.getElementById('typewriter-styles')) {\n\t\t\t\t\tconst style = document.createElement('style')\n\t\t\t\t\tstyle.id = 'typewriter-styles'\n\t\t\t\t\tstyle.textContent = `\n\t\t\t\t\t\t@keyframes typewriter-blink {\n\t\t\t\t\t\t\t0%, 50% { opacity: 1; }\n\t\t\t\t\t\t\t51%, 100% { opacity: 0; }\n\t\t\t\t\t\t}\n\t\t\t\t\t`\n\t\t\t\t\tdocument.head.appendChild(style)\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tthis.startTyping()\n\t\t}\n\n\t\treturn noChange\n\t}\n\n\tprivate startTyping() {\n\t\tif (!this.state || !this.state.targetElement) return\n\n\t\tconst { phrases, options, targetElement } = this.state\n\n\t\t// Create typing observable for a single phrase\n\t\tconst typePhrase = (phrase: string, shouldDelete: boolean = true) => {\n\t\t\treturn concat(\n\t\t\t\t// Type each character\n\t\t\t\tdefer(() => {\n\t\t\t\t\tconst chars = phrase.split('')\n\t\t\t\t\treturn concat(\n\t\t\t\t\t\t...chars.map((char) =>\n\t\t\t\t\t\t\tof(char).pipe(\n\t\t\t\t\t\t\t\tdelay(options.typeSpeed),\n\t\t\t\t\t\t\t\ttap((c) => {\n\t\t\t\t\t\t\t\t\tconst textNode = this.getTextNode(targetElement)\n\t\t\t\t\t\t\t\t\tif (textNode) {\n\t\t\t\t\t\t\t\t\t\ttextNode.textContent += c\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t// Play key press sound\n\t\t\t\t\t\t\t\t\tif (this.soundEngine) {\n\t\t\t\t\t\t\t\t\t\tthis.soundEngine.playKeyPress()\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t})\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t)\n\t\t\t\t\t)\n\t\t\t\t}),\n\t\t\t\t// Pause after typing\n\t\t\t\tof(null).pipe(delay(options.pauseDuration)),\n\t\t\t\t// Delete each character (only if shouldDelete is true)\n\t\t\t\tshouldDelete ? defer(() => {\n\t\t\t\t\tconst deleteCount = phrase.length\n\t\t\t\t\treturn interval(options.deleteSpeed).pipe(\n\t\t\t\t\t\ttake(deleteCount),\n\t\t\t\t\t\ttap(() => {\n\t\t\t\t\t\t\tconst textNode = this.getTextNode(targetElement)\n\t\t\t\t\t\t\tif (textNode && textNode.textContent) {\n\t\t\t\t\t\t\t\ttextNode.textContent = textNode.textContent.slice(0, -1)\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t// Play delete sound\n\t\t\t\t\t\t\tif (this.soundEngine) {\n\t\t\t\t\t\t\t\tthis.soundEngine.playDelete()\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t})\n\t\t\t\t\t)\n\t\t\t\t}) : EMPTY,\n\t\t\t\t// Small pause before next phrase\n\t\t\t\tshouldDelete ? of(null).pipe(delay(200)) : EMPTY\n\t\t\t)\n\t\t}\n\n\t\t// Create observable that cycles through all phrases\n\t\tconst phrasesSequence = concat(\n\t\t\t...phrases.map((phrase) => typePhrase(phrase))\n\t\t)\n\n\t\t// Add final message if provided\n\t\tconst typingSequence = options.finalMessage\n\t\t\t? concat(\n\t\t\t\t\tphrasesSequence,\n\t\t\t\t\ttypePhrase(options.finalMessage, false) // Don't delete final message\n\t\t\t\t)\n\t\t\t: phrasesSequence\n\n\t\t// Subscribe and optionally loop\n\t\tthis.state.subscription = (\n\t\t\toptions.loop ? phrasesSequence.pipe(repeat()) : typingSequence\n\t\t).subscribe({\n\t\t\terror: (err) => console.error('Typewriter error:', err),\n\t\t})\n\t}\n\n\tprivate getTextNode(targetElement: HTMLElement): Text | null {\n\t\t// Get or create text node (ignoring cursor element)\n\t\tfor (const child of Array.from(targetElement.childNodes)) {\n\t\t\tif (child.nodeType === Node.TEXT_NODE) {\n\t\t\t\treturn child as Text\n\t\t\t}\n\t\t}\n\t\t// Create text node if it doesn't exist\n\t\tconst textNode = document.createTextNode('')\n\t\ttargetElement.insertBefore(textNode, targetElement.firstChild)\n\t\treturn textNode\n\t}\n\n\tprivate cleanup() {\n\t\tif (!this.state) return\n\n\t\t// Unsubscribe from typing observable\n\t\tif (this.state.subscription) {\n\t\t\tthis.state.subscription.unsubscribe()\n\t\t}\n\n\t\t// Remove cursor if present\n\t\tif (this.state.targetElement) {\n\t\t\tconst cursor = this.state.targetElement.querySelector('.typewriter-cursor')\n\t\t\tcursor?.remove()\n\t\t}\n\n\t\t// Cleanup sound engine\n\t\tif (this.soundEngine) {\n\t\t\tthis.soundEngine.cleanup()\n\t\t\tthis.soundEngine = null\n\t\t}\n\n\t\tthis.state = null\n\t}\n\n\toverride disconnected() {\n\t\tthis.cleanup()\n\t}\n\n\toverride reconnected(): void {\n\t\t// Re-start typing if state exists\n\t\tif (this.state && !this.state.subscription) {\n\t\t\tthis.startTyping()\n\t\t}\n\t}\n}\n\nexport const typewriter = directive(TypewriterDirective)\n"],"mappings":"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"}

package/dist/typography.cjs

@@ -1,4 +1,4 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`./chunk-CncqDLb2.cjs`);const e=require(`./mixins-DvAYa-F7.cjs`),t=require(`./decorate-DpFmy0nm.cjs`);let n=require(`rxjs`),r=require(`rxjs/operators`),i=require(`lit/decorators.js`),a=require(`lit`),o=require(`lit/directives/ref.js`);var s=class extends e.s{constructor(...e){super(...e),this.type=`body`,this.token=`md`,this.editable=!1,this.value=``,this.placeholder=``,this._editRef=(0,o.createRef)()}static{this.styles=[a.css`
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`./chunk-CncqDLb2.cjs`);const e=require(`./mixins-BOOu6q2n.cjs`),t=require(`./active-host-jH3iloCR.cjs`);let n=require(`rxjs`),r=require(`rxjs/operators`),i=require(`lit/decorators.js`),a=require(`lit`),o=require(`lit/directives/ref.js`);var s=class extends e.c{constructor(...e){super(...e),this.type=`body`,this.token=`md`,this.editable=!1,this.value=``,this.placeholder=``,this._editRef=(0,o.createRef)()}static{this.styles=[a.css`
 	:host {
 		display: block;
 		font-family: inherit;
@@ -279,4 +279,4 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`./ch
 				class="edit"
 				contenteditable="true"
 				data-placeholder=${this.placeholder??``}
-			></div>`:a.html`<slot></slot>`}};t.t([(0,i.property)({type:String,reflect:!0})],s.prototype,`type`,void 0),t.t([(0,i.property)({type:String,reflect:!0})],s.prototype,`token`,void 0),t.t([(0,i.property)({type:String,reflect:!0})],s.prototype,`align`,void 0),t.t([(0,i.property)({type:String,reflect:!0})],s.prototype,`weight`,void 0),t.t([(0,i.property)({type:String,reflect:!0})],s.prototype,`transform`,void 0),t.t([(0,i.property)({type:Number})],s.prototype,`maxLines`,void 0),t.t([(0,i.property)({type:Boolean,reflect:!0})],s.prototype,`editable`,void 0),t.t([(0,i.property)({type:String})],s.prototype,`value`,void 0),t.t([(0,i.property)({type:String})],s.prototype,`placeholder`,void 0),s=t.t([(0,i.customElement)(`schmancy-typography`)],s),Object.defineProperty(exports,`SchmancyTypography`,{enumerable:!0,get:function(){return s}});
+			></div>`:a.html`<slot></slot>`}};t.a([(0,i.property)({type:String,reflect:!0})],s.prototype,`type`,void 0),t.a([(0,i.property)({type:String,reflect:!0})],s.prototype,`token`,void 0),t.a([(0,i.property)({type:String,reflect:!0})],s.prototype,`align`,void 0),t.a([(0,i.property)({type:String,reflect:!0})],s.prototype,`weight`,void 0),t.a([(0,i.property)({type:String,reflect:!0})],s.prototype,`transform`,void 0),t.a([(0,i.property)({type:Number})],s.prototype,`maxLines`,void 0),t.a([(0,i.property)({type:Boolean,reflect:!0})],s.prototype,`editable`,void 0),t.a([(0,i.property)({type:String})],s.prototype,`value`,void 0),t.a([(0,i.property)({type:String})],s.prototype,`placeholder`,void 0),s=t.a([(0,i.customElement)(`schmancy-typography`)],s),Object.defineProperty(exports,`SchmancyTypography`,{enumerable:!0,get:function(){return s}});

package/dist/typography.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"typography.cjs","names":[],"sources":["../src/typography/typography.ts"],"sourcesContent":["import { SchmancyElement } from '@mixins/index'\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { createRef, ref } from 'lit/directives/ref.js'\nimport { fromEvent } from 'rxjs'\nimport { filter, tap, takeUntil } from 'rxjs/operators'\n\n// Material Design 3 typography - https://m3.material.io/styles/typography/type-scale-tokens\n\n/**\n * @element schmancy-typography\n * @slot - The text for the typography.\n */\n@customElement('schmancy-typography')\nexport class SchmancyTypography extends SchmancyElement {\n\tstatic styles = [css`\n\t:host {\n\t\tdisplay: block;\n\t\tfont-family: inherit;\n\t\thyphens: none;\n\t}\n\n\t/* Text alignment */\n\t:host([align='center']) {\n\t\ttext-align: center;\n\t}\n\n\t:host([align='left']) {\n\t\ttext-align: start;\n\t}\n\n\t:host([align='right']) {\n\t\ttext-align: right;\n\t}\n\n\t:host([align='justify']) {\n\t\ttext-align: justify;\n\t}\n\n\t/* Font weight */\n\t:host([weight='bold']) {\n\t\tfont-weight: 700;\n\t}\n\n\t:host([weight='medium']) {\n\t\tfont-weight: 500;\n\t}\n\n\t:host([weight='normal']) {\n\t\tfont-weight: 400;\n\t}\n\n\t/* Text transform */\n\t:host([transform='uppercase']) {\n\t\ttext-transform: uppercase;\n\t}\n\n\t:host([transform='lowercase']) {\n\t\ttext-transform: lowercase;\n\t}\n\n\t:host([transform='capitalize']) {\n\t\ttext-transform: capitalize;\n\t}\n\n\t:host([transform='normal']) {\n\t\ttext-transform: none;\n\t}\n\n\t/* Type-based weight defaults (when using Tailwind classes without token) */\n\t:host([type='display']),\n\t:host([type='headline']),\n\t:host([type='body']) {\n\t\tfont-weight: 400;\n\t}\n\n\t:host([type='label']),\n\t:host([type='subtitle']),\n\t:host([type='title']) {\n\t\tfont-weight: 500;\n\t}\n\n\t/* Display typography variants - Material Design 3 + Extended */\n\t:host([type='display'][token='xl']) {\n\t\tfont-size: 72px;\n\t\tline-height: 80px;\n\t\tfont-weight: 400;\n\t}\n\n\t:host([type='display'][token='lg']) {\n\t\tfont-size: 57px;\n\t\tline-height: 64px;\n\t\tfont-weight: 400;\n\t}\n\n\t:host([type='display'][token='md']) {\n\t\tfont-size: 45px;\n\t\tline-height: 52px;\n\t\tfont-weight: 400;\n\t}\n\n\t:host([type='display'][token='sm']) {\n\t\tfont-size: 36px;\n\t\tline-height: 44px;\n\t\tfont-weight: 400;\n\t}\n\n\t:host([type='display'][token='xs']) {\n\t\tfont-size: 28px;\n\t\tline-height: 36px;\n\t\tfont-weight: 400;\n\t}\n\n\t/* Headline typography variants - Material Design 3 + Extended */\n\t:host([type='headline'][token='xl']) {\n\t\tfont-size: 36px;\n\t\tline-height: 44px;\n\t\tfont-weight: 400;\n\t}\n\n\t:host([type='headline'][token='lg']) {\n\t\tfont-size: 32px;\n\t\tline-height: 40px;\n\t\tfont-weight: 400;\n\t}\n\n\t:host([type='headline'][token='md']) {\n\t\tfont-size: 28px;\n\t\tline-height: 36px;\n\t\tfont-weight: 400;\n\t}\n\n\t:host([type='headline'][token='sm']) {\n\t\tfont-size: 24px;\n\t\tline-height: 32px;\n\t\tfont-weight: 400;\n\t}\n\n\t:host([type='headline'][token='xs']) {\n\t\tfont-size: 20px;\n\t\tline-height: 28px;\n\t\tfont-weight: 400;\n\t}\n\n\t/* Title typography variants - Material Design 3 + Extended */\n\t:host([type='title'][token='xl']) {\n\t\tfont-size: 24px;\n\t\tline-height: 32px;\n\t\tfont-weight: 400;\n\t}\n\n\t:host([type='title'][token='lg']) {\n\t\tfont-size: 22px;\n\t\tline-height: 28px;\n\t\tfont-weight: 400;\n\t}\n\n\t:host([type='title'][token='md']) {\n\t\tfont-size: 16px;\n\t\tline-height: 24px;\n\t\tfont-weight: 500;\n\t}\n\n\t:host([type='title'][token='sm']) {\n\t\tfont-size: 14px;\n\t\tline-height: 20px;\n\t\tfont-weight: 500;\n\t}\n\n\t:host([type='title'][token='xs']) {\n\t\tfont-size: 12px;\n\t\tline-height: 16px;\n\t\tfont-weight: 500;\n\t}\n\n\t/* Subtitle typography variants - Extended from Material Design 3 */\n\t:host([type='subtitle'][token='xl']) {\n\t\tfont-size: 20px;\n\t\tline-height: 28px;\n\t\tfont-weight: 500;\n\t}\n\n\t:host([type='subtitle'][token='lg']) {\n\t\tfont-size: 18px;\n\t\tline-height: 24px;\n\t\tfont-weight: 500;\n\t}\n\n\t:host([type='subtitle'][token='md']) {\n\t\tfont-size: 16px;\n\t\tline-height: 24px;\n\t\tfont-weight: 500;\n\t}\n\n\t:host([type='subtitle'][token='sm']) {\n\t\tfont-size: 14px;\n\t\tline-height: 20px;\n\t\tfont-weight: 500;\n\t}\n\n\t:host([type='subtitle'][token='xs']) {\n\t\tfont-size: 12px;\n\t\tline-height: 16px;\n\t\tfont-weight: 500;\n\t}\n\n\t/* Body typography variants - Material Design 3 + Extended */\n\t:host([type='body'][token='xl']) {\n\t\tfont-size: 18px;\n\t\tline-height: 28px;\n\t\tfont-weight: 400;\n\t}\n\n\t:host([type='body'][token='lg']) {\n\t\tfont-size: 16px;\n\t\tline-height: 24px;\n\t\tfont-weight: 400;\n\t}\n\n\t:host([type='body'][token='md']) {\n\t\tfont-size: 14px;\n\t\tline-height: 20px;\n\t\tfont-weight: 400;\n\t}\n\n\t:host([type='body'][token='sm']) {\n\t\tfont-size: 12px;\n\t\tline-height: 16px;\n\t\tfont-weight: 400;\n\t}\n\n\t:host([type='body'][token='xs']) {\n\t\tfont-size: 10px;\n\t\tline-height: 14px;\n\t\tfont-weight: 400;\n\t}\n\n\t/* Label typography variants - Material Design 3 + Extended */\n\t:host([type='label'][token='xl']) {\n\t\tfont-size: 16px;\n\t\tline-height: 22px;\n\t\tfont-weight: 500;\n\t}\n\n\t:host([type='label'][token='lg']) {\n\t\tfont-size: 14px;\n\t\tline-height: 20px;\n\t\tfont-weight: 500;\n\t}\n\n\t:host([type='label'][token='md']) {\n\t\tfont-size: 12px;\n\t\tline-height: 16px;\n\t\tfont-weight: 500;\n\t}\n\n\t:host([type='label'][token='sm']) {\n\t\tfont-size: 11px;\n\t\tline-height: 16px;\n\t\tfont-weight: 500;\n\t}\n\n\t:host([type='label'][token='xs']) {\n\t\tfont-size: 10px;\n\t\tline-height: 14px;\n\t\tfont-weight: 500;\n\t}\n\n\t/* Note: Custom letter-spacing, font-size, and line-height should be applied via inline styles or Tailwind classes */\n\n\t:host([editable]) {\n\t\tcursor: text;\n\t\tborder-radius: 4px;\n\t\ttransition: background 150ms;\n\t\tmin-height: 1em;\n\t}\n\t/* Editable div lives in shadow DOM so light DOM (Lit markers) is untouched */\n\t.edit {\n\t\toutline: none;\n\t\tmin-height: 1em;\n\t\tfont: inherit;\n\t\tcolor: inherit;\n\t\tletter-spacing: inherit;\n\t\tline-height: inherit;\n\t}\n\t.edit:empty::before {\n\t\tcontent: attr(data-placeholder);\n\t\tpointer-events: none;\n\t\tdisplay: block;\n\t\topacity: 0.35;\n\t}\n`];\n\tstatic shadowRootOptions: ShadowRootInit = {\n\t\tmode: 'open',\n\t\tdelegatesFocus: true,\n\t}\n\n\t/**\n\t * @attr type - The type of the typography.\n\t * @default 'body'\n\t * @type {'display' | 'headline' | 'title' | 'subtitle' | 'body' | 'label'}\n\t */\n\t@property({ type: String, reflect: true })\n\ttype: 'display' | 'headline' | 'title' | 'subtitle' | 'body' | 'label' = 'body'\n\n\t/**\n\t * @attr token - The size token.\n\t * @deprecated Prefer using Tailwind responsive text classes for better responsive design.\n\t * Set token=\"\" and use class=\"text-sm md:text-base lg:text-lg\" instead.\n\t * Example: <schmancy-typography type=\"display\" token=\"\" class=\"text-2xl sm:text-3xl md:text-4xl\">\n\t * @default 'md'\n\t * @type {'xs' | 'sm' | 'md' | 'lg' | 'xl' | ''}\n\t */\n\t@property({ type: String, reflect: true })\n\ttoken: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '' = 'md'\n\n\t/**\n\t * @attr\n\t * @default inherit\n\t * @type {'left' |'center' |'right'}\n\t */\n\t@property({ type: String, reflect: true })\n\talign: 'left' | 'center' | 'justify' | 'right' | undefined\n\n\t/**\n\t * @attr\n\t * @default inherit\n\t * @type {'normal' | 'medium' |'bold'}\n\t * @public\n\t */\n\t@property({ type: String, reflect: true })\n\tweight: 'normal' | 'medium' | 'bold' | undefined\n\t\n\t/**\n\t *\n\t * @attr\n\t * @default inherit\n\t * @type {'uppercase' |'lowercase' |'capitalize' |'normal'}\n\t * @public\n\t */\n\t@property({ type: String, reflect: true }) \n\ttransform: 'uppercase' | 'lowercase' | 'capitalize' | 'normal' | undefined\n\n\t@property({ type: Number })\n\tmaxLines: 1 | 2 | 3 | 4 | 5 | 6 | undefined\n\n\t/** When true, the element becomes contenteditable and dispatches 'change' events on blur/Enter */\n\t@property({ type: Boolean, reflect: true }) editable = false\n\t/** The text value when in editable mode. Set via property binding: .value=${...} */\n\t@property({ type: String }) value = ''\n\t/** Placeholder shown when editable and empty */\n\t@property({ type: String }) placeholder = ''\n\n\tprivate _editRef = createRef<HTMLDivElement>()\n\n\t/** Focus and select all text in editable mode */\n\tselectAll() {\n\t\tconst el = this._editRef.value\n\t\tif (!el) return\n\t\tel.focus()\n\t\tconst sel = window.getSelection()\n\t\tif (sel && el.textContent) {\n\t\t\tconst range = document.createRange()\n\t\t\trange.selectNodeContents(el)\n\t\t\tsel.removeAllRanges()\n\t\t\tsel.addRange(range)\n\t\t}\n\t}\n\n\tconnectedCallback() {\n\t\tsuper.connectedCallback()\n\n\t\tfromEvent<FocusEvent>(this, 'focusout').pipe(\n\t\t\tfilter(() => this.editable),\n\t\t\ttap(() => {\n\t\t\t\tconst el = this._editRef.value\n\t\t\t\tif (!el) return\n\t\t\t\tconst newValue = el.innerText.trim()\n\t\t\t\tif (newValue !== this.value) {\n\t\t\t\t\tthis.dispatchEvent(new CustomEvent('change', {\n\t\t\t\t\t\tdetail: { value: newValue },\n\t\t\t\t\t\tbubbles: true,\n\t\t\t\t\t\tcomposed: true,\n\t\t\t\t\t}))\n\t\t\t\t}\n\t\t\t\t// Ensure truly empty so :empty CSS placeholder works\n\t\t\t\tif (!newValue) el.textContent = ''\n\t\t\t}),\n\t\t\ttakeUntil(this.disconnecting),\n\t\t).subscribe()\n\n\t\t// Clean stray <br> / whitespace nodes so :empty CSS matches\n\t\tfromEvent(this, 'input').pipe(\n\t\t\tfilter(() => this.editable),\n\t\t\ttap(() => {\n\t\t\t\tconst el = this._editRef.value\n\t\t\t\tif (el && !el.innerText.trim()) el.textContent = ''\n\t\t\t}),\n\t\t\ttakeUntil(this.disconnecting),\n\t\t).subscribe()\n\n\t\tfromEvent<KeyboardEvent>(this, 'keydown').pipe(\n\t\t\tfilter(() => this.editable),\n\t\t\tfilter(e => e.key === 'Enter'),\n\t\t\ttap(e => { e.preventDefault(); (this._editRef.value ?? this).blur() }),\n\t\t\ttakeUntil(this.disconnecting),\n\t\t).subscribe()\n\t}\n\n\tprotected updated(changedProperties: Map<string, unknown>): void {\n\t\tsuper.updated(changedProperties)\n\t\tif (changedProperties.has('maxLines')) {\n\t\t\t// Remove all line-clamp classes\n\t\t\tthis.classList.remove('line-clamp-1', 'line-clamp-2', 'line-clamp-3', 'line-clamp-4', 'line-clamp-5', 'line-clamp-6')\n\t\t\t// Add the appropriate one\n\t\t\tif (this.maxLines) {\n\t\t\t\tthis.classList.add(`line-clamp-${this.maxLines}`)\n\t\t\t}\n\t\t}\n\t\tif ((changedProperties.has('value') || changedProperties.has('editable')) && this.editable) {\n\t\t\tconst el = this._editRef.value\n\t\t\tif (el && document.activeElement !== el) {\n\t\t\t\tif (this.value) {\n\t\t\t\t\tel.innerText = this.value\n\t\t\t\t} else {\n\t\t\t\t\tel.textContent = ''\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\tprotected render(): unknown {\n\t\tif (this.editable) {\n\t\t\treturn html`<div\n\t\t\t\t${ref(this._editRef)}\n\t\t\t\tclass=\"edit\"\n\t\t\t\tcontenteditable=\"true\"\n\t\t\t\tdata-placeholder=${this.placeholder ?? ''}\n\t\t\t></div>`\n\t\t}\n\t\treturn html`<slot></slot>`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-typography': SchmancyTypography\n\t}\n}"],"mappings":"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"}
+{"version":3,"file":"typography.cjs","names":[],"sources":["../src/typography/typography.ts"],"sourcesContent":["import { SchmancyElement } from '@mixins/index'\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { createRef, ref } from 'lit/directives/ref.js'\nimport { fromEvent } from 'rxjs'\nimport { filter, tap, takeUntil } from 'rxjs/operators'\n\n// Material Design 3 typography - https://m3.material.io/styles/typography/type-scale-tokens\n\n/**\n * @element schmancy-typography\n * @slot - The text for the typography.\n */\n@customElement('schmancy-typography')\nexport class SchmancyTypography extends SchmancyElement {\n\tstatic styles = [css`\n\t:host {\n\t\tdisplay: block;\n\t\tfont-family: inherit;\n\t\thyphens: none;\n\t}\n\n\t/* Text alignment */\n\t:host([align='center']) {\n\t\ttext-align: center;\n\t}\n\n\t:host([align='left']) {\n\t\ttext-align: start;\n\t}\n\n\t:host([align='right']) {\n\t\ttext-align: right;\n\t}\n\n\t:host([align='justify']) {\n\t\ttext-align: justify;\n\t}\n\n\t/* Font weight */\n\t:host([weight='bold']) {\n\t\tfont-weight: 700;\n\t}\n\n\t:host([weight='medium']) {\n\t\tfont-weight: 500;\n\t}\n\n\t:host([weight='normal']) {\n\t\tfont-weight: 400;\n\t}\n\n\t/* Text transform */\n\t:host([transform='uppercase']) {\n\t\ttext-transform: uppercase;\n\t}\n\n\t:host([transform='lowercase']) {\n\t\ttext-transform: lowercase;\n\t}\n\n\t:host([transform='capitalize']) {\n\t\ttext-transform: capitalize;\n\t}\n\n\t:host([transform='normal']) {\n\t\ttext-transform: none;\n\t}\n\n\t/* Type-based weight defaults (when using Tailwind classes without token) */\n\t:host([type='display']),\n\t:host([type='headline']),\n\t:host([type='body']) {\n\t\tfont-weight: 400;\n\t}\n\n\t:host([type='label']),\n\t:host([type='subtitle']),\n\t:host([type='title']) {\n\t\tfont-weight: 500;\n\t}\n\n\t/* Display typography variants - Material Design 3 + Extended */\n\t:host([type='display'][token='xl']) {\n\t\tfont-size: 72px;\n\t\tline-height: 80px;\n\t\tfont-weight: 400;\n\t}\n\n\t:host([type='display'][token='lg']) {\n\t\tfont-size: 57px;\n\t\tline-height: 64px;\n\t\tfont-weight: 400;\n\t}\n\n\t:host([type='display'][token='md']) {\n\t\tfont-size: 45px;\n\t\tline-height: 52px;\n\t\tfont-weight: 400;\n\t}\n\n\t:host([type='display'][token='sm']) {\n\t\tfont-size: 36px;\n\t\tline-height: 44px;\n\t\tfont-weight: 400;\n\t}\n\n\t:host([type='display'][token='xs']) {\n\t\tfont-size: 28px;\n\t\tline-height: 36px;\n\t\tfont-weight: 400;\n\t}\n\n\t/* Headline typography variants - Material Design 3 + Extended */\n\t:host([type='headline'][token='xl']) {\n\t\tfont-size: 36px;\n\t\tline-height: 44px;\n\t\tfont-weight: 400;\n\t}\n\n\t:host([type='headline'][token='lg']) {\n\t\tfont-size: 32px;\n\t\tline-height: 40px;\n\t\tfont-weight: 400;\n\t}\n\n\t:host([type='headline'][token='md']) {\n\t\tfont-size: 28px;\n\t\tline-height: 36px;\n\t\tfont-weight: 400;\n\t}\n\n\t:host([type='headline'][token='sm']) {\n\t\tfont-size: 24px;\n\t\tline-height: 32px;\n\t\tfont-weight: 400;\n\t}\n\n\t:host([type='headline'][token='xs']) {\n\t\tfont-size: 20px;\n\t\tline-height: 28px;\n\t\tfont-weight: 400;\n\t}\n\n\t/* Title typography variants - Material Design 3 + Extended */\n\t:host([type='title'][token='xl']) {\n\t\tfont-size: 24px;\n\t\tline-height: 32px;\n\t\tfont-weight: 400;\n\t}\n\n\t:host([type='title'][token='lg']) {\n\t\tfont-size: 22px;\n\t\tline-height: 28px;\n\t\tfont-weight: 400;\n\t}\n\n\t:host([type='title'][token='md']) {\n\t\tfont-size: 16px;\n\t\tline-height: 24px;\n\t\tfont-weight: 500;\n\t}\n\n\t:host([type='title'][token='sm']) {\n\t\tfont-size: 14px;\n\t\tline-height: 20px;\n\t\tfont-weight: 500;\n\t}\n\n\t:host([type='title'][token='xs']) {\n\t\tfont-size: 12px;\n\t\tline-height: 16px;\n\t\tfont-weight: 500;\n\t}\n\n\t/* Subtitle typography variants - Extended from Material Design 3 */\n\t:host([type='subtitle'][token='xl']) {\n\t\tfont-size: 20px;\n\t\tline-height: 28px;\n\t\tfont-weight: 500;\n\t}\n\n\t:host([type='subtitle'][token='lg']) {\n\t\tfont-size: 18px;\n\t\tline-height: 24px;\n\t\tfont-weight: 500;\n\t}\n\n\t:host([type='subtitle'][token='md']) {\n\t\tfont-size: 16px;\n\t\tline-height: 24px;\n\t\tfont-weight: 500;\n\t}\n\n\t:host([type='subtitle'][token='sm']) {\n\t\tfont-size: 14px;\n\t\tline-height: 20px;\n\t\tfont-weight: 500;\n\t}\n\n\t:host([type='subtitle'][token='xs']) {\n\t\tfont-size: 12px;\n\t\tline-height: 16px;\n\t\tfont-weight: 500;\n\t}\n\n\t/* Body typography variants - Material Design 3 + Extended */\n\t:host([type='body'][token='xl']) {\n\t\tfont-size: 18px;\n\t\tline-height: 28px;\n\t\tfont-weight: 400;\n\t}\n\n\t:host([type='body'][token='lg']) {\n\t\tfont-size: 16px;\n\t\tline-height: 24px;\n\t\tfont-weight: 400;\n\t}\n\n\t:host([type='body'][token='md']) {\n\t\tfont-size: 14px;\n\t\tline-height: 20px;\n\t\tfont-weight: 400;\n\t}\n\n\t:host([type='body'][token='sm']) {\n\t\tfont-size: 12px;\n\t\tline-height: 16px;\n\t\tfont-weight: 400;\n\t}\n\n\t:host([type='body'][token='xs']) {\n\t\tfont-size: 10px;\n\t\tline-height: 14px;\n\t\tfont-weight: 400;\n\t}\n\n\t/* Label typography variants - Material Design 3 + Extended */\n\t:host([type='label'][token='xl']) {\n\t\tfont-size: 16px;\n\t\tline-height: 22px;\n\t\tfont-weight: 500;\n\t}\n\n\t:host([type='label'][token='lg']) {\n\t\tfont-size: 14px;\n\t\tline-height: 20px;\n\t\tfont-weight: 500;\n\t}\n\n\t:host([type='label'][token='md']) {\n\t\tfont-size: 12px;\n\t\tline-height: 16px;\n\t\tfont-weight: 500;\n\t}\n\n\t:host([type='label'][token='sm']) {\n\t\tfont-size: 11px;\n\t\tline-height: 16px;\n\t\tfont-weight: 500;\n\t}\n\n\t:host([type='label'][token='xs']) {\n\t\tfont-size: 10px;\n\t\tline-height: 14px;\n\t\tfont-weight: 500;\n\t}\n\n\t/* Note: Custom letter-spacing, font-size, and line-height should be applied via inline styles or Tailwind classes */\n\n\t:host([editable]) {\n\t\tcursor: text;\n\t\tborder-radius: 4px;\n\t\ttransition: background 150ms;\n\t\tmin-height: 1em;\n\t}\n\t/* Editable div lives in shadow DOM so light DOM (Lit markers) is untouched */\n\t.edit {\n\t\toutline: none;\n\t\tmin-height: 1em;\n\t\tfont: inherit;\n\t\tcolor: inherit;\n\t\tletter-spacing: inherit;\n\t\tline-height: inherit;\n\t}\n\t.edit:empty::before {\n\t\tcontent: attr(data-placeholder);\n\t\tpointer-events: none;\n\t\tdisplay: block;\n\t\topacity: 0.35;\n\t}\n`];\n\tstatic shadowRootOptions: ShadowRootInit = {\n\t\tmode: 'open',\n\t\tdelegatesFocus: true,\n\t}\n\n\t/**\n\t * @attr type - The type of the typography.\n\t * @default 'body'\n\t * @type {'display' | 'headline' | 'title' | 'subtitle' | 'body' | 'label'}\n\t */\n\t@property({ type: String, reflect: true })\n\ttype: 'display' | 'headline' | 'title' | 'subtitle' | 'body' | 'label' = 'body'\n\n\t/**\n\t * @attr token - The size token.\n\t * @deprecated Prefer using Tailwind responsive text classes for better responsive design.\n\t * Set token=\"\" and use class=\"text-sm md:text-base lg:text-lg\" instead.\n\t * Example: <schmancy-typography type=\"display\" token=\"\" class=\"text-2xl sm:text-3xl md:text-4xl\">\n\t * @default 'md'\n\t * @type {'xs' | 'sm' | 'md' | 'lg' | 'xl' | ''}\n\t */\n\t@property({ type: String, reflect: true })\n\ttoken: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '' = 'md'\n\n\t/**\n\t * @attr\n\t * @default inherit\n\t * @type {'left' |'center' |'right'}\n\t */\n\t@property({ type: String, reflect: true })\n\talign: 'left' | 'center' | 'justify' | 'right' | undefined\n\n\t/**\n\t * @attr\n\t * @default inherit\n\t * @type {'normal' | 'medium' |'bold'}\n\t * @public\n\t */\n\t@property({ type: String, reflect: true })\n\tweight: 'normal' | 'medium' | 'bold' | undefined\n\t\n\t/**\n\t *\n\t * @attr\n\t * @default inherit\n\t * @type {'uppercase' |'lowercase' |'capitalize' |'normal'}\n\t * @public\n\t */\n\t@property({ type: String, reflect: true }) \n\ttransform: 'uppercase' | 'lowercase' | 'capitalize' | 'normal' | undefined\n\n\t@property({ type: Number })\n\tmaxLines: 1 | 2 | 3 | 4 | 5 | 6 | undefined\n\n\t/** When true, the element becomes contenteditable and dispatches 'change' events on blur/Enter */\n\t@property({ type: Boolean, reflect: true }) editable = false\n\t/** The text value when in editable mode. Set via property binding: .value=${...} */\n\t@property({ type: String }) value = ''\n\t/** Placeholder shown when editable and empty */\n\t@property({ type: String }) placeholder = ''\n\n\tprivate _editRef = createRef<HTMLDivElement>()\n\n\t/** Focus and select all text in editable mode */\n\tselectAll() {\n\t\tconst el = this._editRef.value\n\t\tif (!el) return\n\t\tel.focus()\n\t\tconst sel = window.getSelection()\n\t\tif (sel && el.textContent) {\n\t\t\tconst range = document.createRange()\n\t\t\trange.selectNodeContents(el)\n\t\t\tsel.removeAllRanges()\n\t\t\tsel.addRange(range)\n\t\t}\n\t}\n\n\tconnectedCallback() {\n\t\tsuper.connectedCallback()\n\n\t\tfromEvent<FocusEvent>(this, 'focusout').pipe(\n\t\t\tfilter(() => this.editable),\n\t\t\ttap(() => {\n\t\t\t\tconst el = this._editRef.value\n\t\t\t\tif (!el) return\n\t\t\t\tconst newValue = el.innerText.trim()\n\t\t\t\tif (newValue !== this.value) {\n\t\t\t\t\tthis.dispatchEvent(new CustomEvent('change', {\n\t\t\t\t\t\tdetail: { value: newValue },\n\t\t\t\t\t\tbubbles: true,\n\t\t\t\t\t\tcomposed: true,\n\t\t\t\t\t}))\n\t\t\t\t}\n\t\t\t\t// Ensure truly empty so :empty CSS placeholder works\n\t\t\t\tif (!newValue) el.textContent = ''\n\t\t\t}),\n\t\t\ttakeUntil(this.disconnecting),\n\t\t).subscribe()\n\n\t\t// Clean stray <br> / whitespace nodes so :empty CSS matches\n\t\tfromEvent(this, 'input').pipe(\n\t\t\tfilter(() => this.editable),\n\t\t\ttap(() => {\n\t\t\t\tconst el = this._editRef.value\n\t\t\t\tif (el && !el.innerText.trim()) el.textContent = ''\n\t\t\t}),\n\t\t\ttakeUntil(this.disconnecting),\n\t\t).subscribe()\n\n\t\tfromEvent<KeyboardEvent>(this, 'keydown').pipe(\n\t\t\tfilter(() => this.editable),\n\t\t\tfilter(e => e.key === 'Enter'),\n\t\t\ttap(e => { e.preventDefault(); (this._editRef.value ?? this).blur() }),\n\t\t\ttakeUntil(this.disconnecting),\n\t\t).subscribe()\n\t}\n\n\tprotected updated(changedProperties: Map<string, unknown>): void {\n\t\tsuper.updated(changedProperties)\n\t\tif (changedProperties.has('maxLines')) {\n\t\t\t// Remove all line-clamp classes\n\t\t\tthis.classList.remove('line-clamp-1', 'line-clamp-2', 'line-clamp-3', 'line-clamp-4', 'line-clamp-5', 'line-clamp-6')\n\t\t\t// Add the appropriate one\n\t\t\tif (this.maxLines) {\n\t\t\t\tthis.classList.add(`line-clamp-${this.maxLines}`)\n\t\t\t}\n\t\t}\n\t\tif ((changedProperties.has('value') || changedProperties.has('editable')) && this.editable) {\n\t\t\tconst el = this._editRef.value\n\t\t\tif (el && document.activeElement !== el) {\n\t\t\t\tif (this.value) {\n\t\t\t\t\tel.innerText = this.value\n\t\t\t\t} else {\n\t\t\t\t\tel.textContent = ''\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\tprotected render(): unknown {\n\t\tif (this.editable) {\n\t\t\treturn html`<div\n\t\t\t\t${ref(this._editRef)}\n\t\t\t\tclass=\"edit\"\n\t\t\t\tcontenteditable=\"true\"\n\t\t\t\tdata-placeholder=${this.placeholder ?? ''}\n\t\t\t></div>`\n\t\t}\n\t\treturn html`<slot></slot>`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-typography': SchmancyTypography\n\t}\n}"],"mappings":"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"}

package/dist/typography.js

@@ -1,5 +1,5 @@
-import { s as e } from "./mixins-BV0w2yIE.js";
-import { t } from "./decorate-23nYs4Le.js";
+import { c as e } from "./mixins-BWb9_e1s.js";
+import { a as t } from "./active-host-BP0zy_Y9.js";
 import { fromEvent as n } from "rxjs";
 import { filter as r, takeUntil as i, tap as a } from "rxjs/operators";
 import { customElement as o, property as s } from "lit/decorators.js";

package/dist/typography.js.map

@@ -1 +1 @@
-{"version":3,"file":"typography.js","names":[],"sources":["../src/typography/typography.ts"],"sourcesContent":["import { SchmancyElement } from '@mixins/index'\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { createRef, ref } from 'lit/directives/ref.js'\nimport { fromEvent } from 'rxjs'\nimport { filter, tap, takeUntil } from 'rxjs/operators'\n\n// Material Design 3 typography - https://m3.material.io/styles/typography/type-scale-tokens\n\n/**\n * @element schmancy-typography\n * @slot - The text for the typography.\n */\n@customElement('schmancy-typography')\nexport class SchmancyTypography extends SchmancyElement {\n\tstatic styles = [css`\n\t:host {\n\t\tdisplay: block;\n\t\tfont-family: inherit;\n\t\thyphens: none;\n\t}\n\n\t/* Text alignment */\n\t:host([align='center']) {\n\t\ttext-align: center;\n\t}\n\n\t:host([align='left']) {\n\t\ttext-align: start;\n\t}\n\n\t:host([align='right']) {\n\t\ttext-align: right;\n\t}\n\n\t:host([align='justify']) {\n\t\ttext-align: justify;\n\t}\n\n\t/* Font weight */\n\t:host([weight='bold']) {\n\t\tfont-weight: 700;\n\t}\n\n\t:host([weight='medium']) {\n\t\tfont-weight: 500;\n\t}\n\n\t:host([weight='normal']) {\n\t\tfont-weight: 400;\n\t}\n\n\t/* Text transform */\n\t:host([transform='uppercase']) {\n\t\ttext-transform: uppercase;\n\t}\n\n\t:host([transform='lowercase']) {\n\t\ttext-transform: lowercase;\n\t}\n\n\t:host([transform='capitalize']) {\n\t\ttext-transform: capitalize;\n\t}\n\n\t:host([transform='normal']) {\n\t\ttext-transform: none;\n\t}\n\n\t/* Type-based weight defaults (when using Tailwind classes without token) */\n\t:host([type='display']),\n\t:host([type='headline']),\n\t:host([type='body']) {\n\t\tfont-weight: 400;\n\t}\n\n\t:host([type='label']),\n\t:host([type='subtitle']),\n\t:host([type='title']) {\n\t\tfont-weight: 500;\n\t}\n\n\t/* Display typography variants - Material Design 3 + Extended */\n\t:host([type='display'][token='xl']) {\n\t\tfont-size: 72px;\n\t\tline-height: 80px;\n\t\tfont-weight: 400;\n\t}\n\n\t:host([type='display'][token='lg']) {\n\t\tfont-size: 57px;\n\t\tline-height: 64px;\n\t\tfont-weight: 400;\n\t}\n\n\t:host([type='display'][token='md']) {\n\t\tfont-size: 45px;\n\t\tline-height: 52px;\n\t\tfont-weight: 400;\n\t}\n\n\t:host([type='display'][token='sm']) {\n\t\tfont-size: 36px;\n\t\tline-height: 44px;\n\t\tfont-weight: 400;\n\t}\n\n\t:host([type='display'][token='xs']) {\n\t\tfont-size: 28px;\n\t\tline-height: 36px;\n\t\tfont-weight: 400;\n\t}\n\n\t/* Headline typography variants - Material Design 3 + Extended */\n\t:host([type='headline'][token='xl']) {\n\t\tfont-size: 36px;\n\t\tline-height: 44px;\n\t\tfont-weight: 400;\n\t}\n\n\t:host([type='headline'][token='lg']) {\n\t\tfont-size: 32px;\n\t\tline-height: 40px;\n\t\tfont-weight: 400;\n\t}\n\n\t:host([type='headline'][token='md']) {\n\t\tfont-size: 28px;\n\t\tline-height: 36px;\n\t\tfont-weight: 400;\n\t}\n\n\t:host([type='headline'][token='sm']) {\n\t\tfont-size: 24px;\n\t\tline-height: 32px;\n\t\tfont-weight: 400;\n\t}\n\n\t:host([type='headline'][token='xs']) {\n\t\tfont-size: 20px;\n\t\tline-height: 28px;\n\t\tfont-weight: 400;\n\t}\n\n\t/* Title typography variants - Material Design 3 + Extended */\n\t:host([type='title'][token='xl']) {\n\t\tfont-size: 24px;\n\t\tline-height: 32px;\n\t\tfont-weight: 400;\n\t}\n\n\t:host([type='title'][token='lg']) {\n\t\tfont-size: 22px;\n\t\tline-height: 28px;\n\t\tfont-weight: 400;\n\t}\n\n\t:host([type='title'][token='md']) {\n\t\tfont-size: 16px;\n\t\tline-height: 24px;\n\t\tfont-weight: 500;\n\t}\n\n\t:host([type='title'][token='sm']) {\n\t\tfont-size: 14px;\n\t\tline-height: 20px;\n\t\tfont-weight: 500;\n\t}\n\n\t:host([type='title'][token='xs']) {\n\t\tfont-size: 12px;\n\t\tline-height: 16px;\n\t\tfont-weight: 500;\n\t}\n\n\t/* Subtitle typography variants - Extended from Material Design 3 */\n\t:host([type='subtitle'][token='xl']) {\n\t\tfont-size: 20px;\n\t\tline-height: 28px;\n\t\tfont-weight: 500;\n\t}\n\n\t:host([type='subtitle'][token='lg']) {\n\t\tfont-size: 18px;\n\t\tline-height: 24px;\n\t\tfont-weight: 500;\n\t}\n\n\t:host([type='subtitle'][token='md']) {\n\t\tfont-size: 16px;\n\t\tline-height: 24px;\n\t\tfont-weight: 500;\n\t}\n\n\t:host([type='subtitle'][token='sm']) {\n\t\tfont-size: 14px;\n\t\tline-height: 20px;\n\t\tfont-weight: 500;\n\t}\n\n\t:host([type='subtitle'][token='xs']) {\n\t\tfont-size: 12px;\n\t\tline-height: 16px;\n\t\tfont-weight: 500;\n\t}\n\n\t/* Body typography variants - Material Design 3 + Extended */\n\t:host([type='body'][token='xl']) {\n\t\tfont-size: 18px;\n\t\tline-height: 28px;\n\t\tfont-weight: 400;\n\t}\n\n\t:host([type='body'][token='lg']) {\n\t\tfont-size: 16px;\n\t\tline-height: 24px;\n\t\tfont-weight: 400;\n\t}\n\n\t:host([type='body'][token='md']) {\n\t\tfont-size: 14px;\n\t\tline-height: 20px;\n\t\tfont-weight: 400;\n\t}\n\n\t:host([type='body'][token='sm']) {\n\t\tfont-size: 12px;\n\t\tline-height: 16px;\n\t\tfont-weight: 400;\n\t}\n\n\t:host([type='body'][token='xs']) {\n\t\tfont-size: 10px;\n\t\tline-height: 14px;\n\t\tfont-weight: 400;\n\t}\n\n\t/* Label typography variants - Material Design 3 + Extended */\n\t:host([type='label'][token='xl']) {\n\t\tfont-size: 16px;\n\t\tline-height: 22px;\n\t\tfont-weight: 500;\n\t}\n\n\t:host([type='label'][token='lg']) {\n\t\tfont-size: 14px;\n\t\tline-height: 20px;\n\t\tfont-weight: 500;\n\t}\n\n\t:host([type='label'][token='md']) {\n\t\tfont-size: 12px;\n\t\tline-height: 16px;\n\t\tfont-weight: 500;\n\t}\n\n\t:host([type='label'][token='sm']) {\n\t\tfont-size: 11px;\n\t\tline-height: 16px;\n\t\tfont-weight: 500;\n\t}\n\n\t:host([type='label'][token='xs']) {\n\t\tfont-size: 10px;\n\t\tline-height: 14px;\n\t\tfont-weight: 500;\n\t}\n\n\t/* Note: Custom letter-spacing, font-size, and line-height should be applied via inline styles or Tailwind classes */\n\n\t:host([editable]) {\n\t\tcursor: text;\n\t\tborder-radius: 4px;\n\t\ttransition: background 150ms;\n\t\tmin-height: 1em;\n\t}\n\t/* Editable div lives in shadow DOM so light DOM (Lit markers) is untouched */\n\t.edit {\n\t\toutline: none;\n\t\tmin-height: 1em;\n\t\tfont: inherit;\n\t\tcolor: inherit;\n\t\tletter-spacing: inherit;\n\t\tline-height: inherit;\n\t}\n\t.edit:empty::before {\n\t\tcontent: attr(data-placeholder);\n\t\tpointer-events: none;\n\t\tdisplay: block;\n\t\topacity: 0.35;\n\t}\n`];\n\tstatic shadowRootOptions: ShadowRootInit = {\n\t\tmode: 'open',\n\t\tdelegatesFocus: true,\n\t}\n\n\t/**\n\t * @attr type - The type of the typography.\n\t * @default 'body'\n\t * @type {'display' | 'headline' | 'title' | 'subtitle' | 'body' | 'label'}\n\t */\n\t@property({ type: String, reflect: true })\n\ttype: 'display' | 'headline' | 'title' | 'subtitle' | 'body' | 'label' = 'body'\n\n\t/**\n\t * @attr token - The size token.\n\t * @deprecated Prefer using Tailwind responsive text classes for better responsive design.\n\t * Set token=\"\" and use class=\"text-sm md:text-base lg:text-lg\" instead.\n\t * Example: <schmancy-typography type=\"display\" token=\"\" class=\"text-2xl sm:text-3xl md:text-4xl\">\n\t * @default 'md'\n\t * @type {'xs' | 'sm' | 'md' | 'lg' | 'xl' | ''}\n\t */\n\t@property({ type: String, reflect: true })\n\ttoken: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '' = 'md'\n\n\t/**\n\t * @attr\n\t * @default inherit\n\t * @type {'left' |'center' |'right'}\n\t */\n\t@property({ type: String, reflect: true })\n\talign: 'left' | 'center' | 'justify' | 'right' | undefined\n\n\t/**\n\t * @attr\n\t * @default inherit\n\t * @type {'normal' | 'medium' |'bold'}\n\t * @public\n\t */\n\t@property({ type: String, reflect: true })\n\tweight: 'normal' | 'medium' | 'bold' | undefined\n\t\n\t/**\n\t *\n\t * @attr\n\t * @default inherit\n\t * @type {'uppercase' |'lowercase' |'capitalize' |'normal'}\n\t * @public\n\t */\n\t@property({ type: String, reflect: true }) \n\ttransform: 'uppercase' | 'lowercase' | 'capitalize' | 'normal' | undefined\n\n\t@property({ type: Number })\n\tmaxLines: 1 | 2 | 3 | 4 | 5 | 6 | undefined\n\n\t/** When true, the element becomes contenteditable and dispatches 'change' events on blur/Enter */\n\t@property({ type: Boolean, reflect: true }) editable = false\n\t/** The text value when in editable mode. Set via property binding: .value=${...} */\n\t@property({ type: String }) value = ''\n\t/** Placeholder shown when editable and empty */\n\t@property({ type: String }) placeholder = ''\n\n\tprivate _editRef = createRef<HTMLDivElement>()\n\n\t/** Focus and select all text in editable mode */\n\tselectAll() {\n\t\tconst el = this._editRef.value\n\t\tif (!el) return\n\t\tel.focus()\n\t\tconst sel = window.getSelection()\n\t\tif (sel && el.textContent) {\n\t\t\tconst range = document.createRange()\n\t\t\trange.selectNodeContents(el)\n\t\t\tsel.removeAllRanges()\n\t\t\tsel.addRange(range)\n\t\t}\n\t}\n\n\tconnectedCallback() {\n\t\tsuper.connectedCallback()\n\n\t\tfromEvent<FocusEvent>(this, 'focusout').pipe(\n\t\t\tfilter(() => this.editable),\n\t\t\ttap(() => {\n\t\t\t\tconst el = this._editRef.value\n\t\t\t\tif (!el) return\n\t\t\t\tconst newValue = el.innerText.trim()\n\t\t\t\tif (newValue !== this.value) {\n\t\t\t\t\tthis.dispatchEvent(new CustomEvent('change', {\n\t\t\t\t\t\tdetail: { value: newValue },\n\t\t\t\t\t\tbubbles: true,\n\t\t\t\t\t\tcomposed: true,\n\t\t\t\t\t}))\n\t\t\t\t}\n\t\t\t\t// Ensure truly empty so :empty CSS placeholder works\n\t\t\t\tif (!newValue) el.textContent = ''\n\t\t\t}),\n\t\t\ttakeUntil(this.disconnecting),\n\t\t).subscribe()\n\n\t\t// Clean stray <br> / whitespace nodes so :empty CSS matches\n\t\tfromEvent(this, 'input').pipe(\n\t\t\tfilter(() => this.editable),\n\t\t\ttap(() => {\n\t\t\t\tconst el = this._editRef.value\n\t\t\t\tif (el && !el.innerText.trim()) el.textContent = ''\n\t\t\t}),\n\t\t\ttakeUntil(this.disconnecting),\n\t\t).subscribe()\n\n\t\tfromEvent<KeyboardEvent>(this, 'keydown').pipe(\n\t\t\tfilter(() => this.editable),\n\t\t\tfilter(e => e.key === 'Enter'),\n\t\t\ttap(e => { e.preventDefault(); (this._editRef.value ?? this).blur() }),\n\t\t\ttakeUntil(this.disconnecting),\n\t\t).subscribe()\n\t}\n\n\tprotected updated(changedProperties: Map<string, unknown>): void {\n\t\tsuper.updated(changedProperties)\n\t\tif (changedProperties.has('maxLines')) {\n\t\t\t// Remove all line-clamp classes\n\t\t\tthis.classList.remove('line-clamp-1', 'line-clamp-2', 'line-clamp-3', 'line-clamp-4', 'line-clamp-5', 'line-clamp-6')\n\t\t\t// Add the appropriate one\n\t\t\tif (this.maxLines) {\n\t\t\t\tthis.classList.add(`line-clamp-${this.maxLines}`)\n\t\t\t}\n\t\t}\n\t\tif ((changedProperties.has('value') || changedProperties.has('editable')) && this.editable) {\n\t\t\tconst el = this._editRef.value\n\t\t\tif (el && document.activeElement !== el) {\n\t\t\t\tif (this.value) {\n\t\t\t\t\tel.innerText = this.value\n\t\t\t\t} else {\n\t\t\t\t\tel.textContent = ''\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\tprotected render(): unknown {\n\t\tif (this.editable) {\n\t\t\treturn html`<div\n\t\t\t\t${ref(this._editRef)}\n\t\t\t\tclass=\"edit\"\n\t\t\t\tcontenteditable=\"true\"\n\t\t\t\tdata-placeholder=${this.placeholder ?? ''}\n\t\t\t></div>`\n\t\t}\n\t\treturn html`<slot></slot>`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-typography': SchmancyTypography\n\t}\n}"],"mappings":"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"}
+{"version":3,"file":"typography.js","names":[],"sources":["../src/typography/typography.ts"],"sourcesContent":["import { SchmancyElement } from '@mixins/index'\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { createRef, ref } from 'lit/directives/ref.js'\nimport { fromEvent } from 'rxjs'\nimport { filter, tap, takeUntil } from 'rxjs/operators'\n\n// Material Design 3 typography - https://m3.material.io/styles/typography/type-scale-tokens\n\n/**\n * @element schmancy-typography\n * @slot - The text for the typography.\n */\n@customElement('schmancy-typography')\nexport class SchmancyTypography extends SchmancyElement {\n\tstatic styles = [css`\n\t:host {\n\t\tdisplay: block;\n\t\tfont-family: inherit;\n\t\thyphens: none;\n\t}\n\n\t/* Text alignment */\n\t:host([align='center']) {\n\t\ttext-align: center;\n\t}\n\n\t:host([align='left']) {\n\t\ttext-align: start;\n\t}\n\n\t:host([align='right']) {\n\t\ttext-align: right;\n\t}\n\n\t:host([align='justify']) {\n\t\ttext-align: justify;\n\t}\n\n\t/* Font weight */\n\t:host([weight='bold']) {\n\t\tfont-weight: 700;\n\t}\n\n\t:host([weight='medium']) {\n\t\tfont-weight: 500;\n\t}\n\n\t:host([weight='normal']) {\n\t\tfont-weight: 400;\n\t}\n\n\t/* Text transform */\n\t:host([transform='uppercase']) {\n\t\ttext-transform: uppercase;\n\t}\n\n\t:host([transform='lowercase']) {\n\t\ttext-transform: lowercase;\n\t}\n\n\t:host([transform='capitalize']) {\n\t\ttext-transform: capitalize;\n\t}\n\n\t:host([transform='normal']) {\n\t\ttext-transform: none;\n\t}\n\n\t/* Type-based weight defaults (when using Tailwind classes without token) */\n\t:host([type='display']),\n\t:host([type='headline']),\n\t:host([type='body']) {\n\t\tfont-weight: 400;\n\t}\n\n\t:host([type='label']),\n\t:host([type='subtitle']),\n\t:host([type='title']) {\n\t\tfont-weight: 500;\n\t}\n\n\t/* Display typography variants - Material Design 3 + Extended */\n\t:host([type='display'][token='xl']) {\n\t\tfont-size: 72px;\n\t\tline-height: 80px;\n\t\tfont-weight: 400;\n\t}\n\n\t:host([type='display'][token='lg']) {\n\t\tfont-size: 57px;\n\t\tline-height: 64px;\n\t\tfont-weight: 400;\n\t}\n\n\t:host([type='display'][token='md']) {\n\t\tfont-size: 45px;\n\t\tline-height: 52px;\n\t\tfont-weight: 400;\n\t}\n\n\t:host([type='display'][token='sm']) {\n\t\tfont-size: 36px;\n\t\tline-height: 44px;\n\t\tfont-weight: 400;\n\t}\n\n\t:host([type='display'][token='xs']) {\n\t\tfont-size: 28px;\n\t\tline-height: 36px;\n\t\tfont-weight: 400;\n\t}\n\n\t/* Headline typography variants - Material Design 3 + Extended */\n\t:host([type='headline'][token='xl']) {\n\t\tfont-size: 36px;\n\t\tline-height: 44px;\n\t\tfont-weight: 400;\n\t}\n\n\t:host([type='headline'][token='lg']) {\n\t\tfont-size: 32px;\n\t\tline-height: 40px;\n\t\tfont-weight: 400;\n\t}\n\n\t:host([type='headline'][token='md']) {\n\t\tfont-size: 28px;\n\t\tline-height: 36px;\n\t\tfont-weight: 400;\n\t}\n\n\t:host([type='headline'][token='sm']) {\n\t\tfont-size: 24px;\n\t\tline-height: 32px;\n\t\tfont-weight: 400;\n\t}\n\n\t:host([type='headline'][token='xs']) {\n\t\tfont-size: 20px;\n\t\tline-height: 28px;\n\t\tfont-weight: 400;\n\t}\n\n\t/* Title typography variants - Material Design 3 + Extended */\n\t:host([type='title'][token='xl']) {\n\t\tfont-size: 24px;\n\t\tline-height: 32px;\n\t\tfont-weight: 400;\n\t}\n\n\t:host([type='title'][token='lg']) {\n\t\tfont-size: 22px;\n\t\tline-height: 28px;\n\t\tfont-weight: 400;\n\t}\n\n\t:host([type='title'][token='md']) {\n\t\tfont-size: 16px;\n\t\tline-height: 24px;\n\t\tfont-weight: 500;\n\t}\n\n\t:host([type='title'][token='sm']) {\n\t\tfont-size: 14px;\n\t\tline-height: 20px;\n\t\tfont-weight: 500;\n\t}\n\n\t:host([type='title'][token='xs']) {\n\t\tfont-size: 12px;\n\t\tline-height: 16px;\n\t\tfont-weight: 500;\n\t}\n\n\t/* Subtitle typography variants - Extended from Material Design 3 */\n\t:host([type='subtitle'][token='xl']) {\n\t\tfont-size: 20px;\n\t\tline-height: 28px;\n\t\tfont-weight: 500;\n\t}\n\n\t:host([type='subtitle'][token='lg']) {\n\t\tfont-size: 18px;\n\t\tline-height: 24px;\n\t\tfont-weight: 500;\n\t}\n\n\t:host([type='subtitle'][token='md']) {\n\t\tfont-size: 16px;\n\t\tline-height: 24px;\n\t\tfont-weight: 500;\n\t}\n\n\t:host([type='subtitle'][token='sm']) {\n\t\tfont-size: 14px;\n\t\tline-height: 20px;\n\t\tfont-weight: 500;\n\t}\n\n\t:host([type='subtitle'][token='xs']) {\n\t\tfont-size: 12px;\n\t\tline-height: 16px;\n\t\tfont-weight: 500;\n\t}\n\n\t/* Body typography variants - Material Design 3 + Extended */\n\t:host([type='body'][token='xl']) {\n\t\tfont-size: 18px;\n\t\tline-height: 28px;\n\t\tfont-weight: 400;\n\t}\n\n\t:host([type='body'][token='lg']) {\n\t\tfont-size: 16px;\n\t\tline-height: 24px;\n\t\tfont-weight: 400;\n\t}\n\n\t:host([type='body'][token='md']) {\n\t\tfont-size: 14px;\n\t\tline-height: 20px;\n\t\tfont-weight: 400;\n\t}\n\n\t:host([type='body'][token='sm']) {\n\t\tfont-size: 12px;\n\t\tline-height: 16px;\n\t\tfont-weight: 400;\n\t}\n\n\t:host([type='body'][token='xs']) {\n\t\tfont-size: 10px;\n\t\tline-height: 14px;\n\t\tfont-weight: 400;\n\t}\n\n\t/* Label typography variants - Material Design 3 + Extended */\n\t:host([type='label'][token='xl']) {\n\t\tfont-size: 16px;\n\t\tline-height: 22px;\n\t\tfont-weight: 500;\n\t}\n\n\t:host([type='label'][token='lg']) {\n\t\tfont-size: 14px;\n\t\tline-height: 20px;\n\t\tfont-weight: 500;\n\t}\n\n\t:host([type='label'][token='md']) {\n\t\tfont-size: 12px;\n\t\tline-height: 16px;\n\t\tfont-weight: 500;\n\t}\n\n\t:host([type='label'][token='sm']) {\n\t\tfont-size: 11px;\n\t\tline-height: 16px;\n\t\tfont-weight: 500;\n\t}\n\n\t:host([type='label'][token='xs']) {\n\t\tfont-size: 10px;\n\t\tline-height: 14px;\n\t\tfont-weight: 500;\n\t}\n\n\t/* Note: Custom letter-spacing, font-size, and line-height should be applied via inline styles or Tailwind classes */\n\n\t:host([editable]) {\n\t\tcursor: text;\n\t\tborder-radius: 4px;\n\t\ttransition: background 150ms;\n\t\tmin-height: 1em;\n\t}\n\t/* Editable div lives in shadow DOM so light DOM (Lit markers) is untouched */\n\t.edit {\n\t\toutline: none;\n\t\tmin-height: 1em;\n\t\tfont: inherit;\n\t\tcolor: inherit;\n\t\tletter-spacing: inherit;\n\t\tline-height: inherit;\n\t}\n\t.edit:empty::before {\n\t\tcontent: attr(data-placeholder);\n\t\tpointer-events: none;\n\t\tdisplay: block;\n\t\topacity: 0.35;\n\t}\n`];\n\tstatic shadowRootOptions: ShadowRootInit = {\n\t\tmode: 'open',\n\t\tdelegatesFocus: true,\n\t}\n\n\t/**\n\t * @attr type - The type of the typography.\n\t * @default 'body'\n\t * @type {'display' | 'headline' | 'title' | 'subtitle' | 'body' | 'label'}\n\t */\n\t@property({ type: String, reflect: true })\n\ttype: 'display' | 'headline' | 'title' | 'subtitle' | 'body' | 'label' = 'body'\n\n\t/**\n\t * @attr token - The size token.\n\t * @deprecated Prefer using Tailwind responsive text classes for better responsive design.\n\t * Set token=\"\" and use class=\"text-sm md:text-base lg:text-lg\" instead.\n\t * Example: <schmancy-typography type=\"display\" token=\"\" class=\"text-2xl sm:text-3xl md:text-4xl\">\n\t * @default 'md'\n\t * @type {'xs' | 'sm' | 'md' | 'lg' | 'xl' | ''}\n\t */\n\t@property({ type: String, reflect: true })\n\ttoken: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '' = 'md'\n\n\t/**\n\t * @attr\n\t * @default inherit\n\t * @type {'left' |'center' |'right'}\n\t */\n\t@property({ type: String, reflect: true })\n\talign: 'left' | 'center' | 'justify' | 'right' | undefined\n\n\t/**\n\t * @attr\n\t * @default inherit\n\t * @type {'normal' | 'medium' |'bold'}\n\t * @public\n\t */\n\t@property({ type: String, reflect: true })\n\tweight: 'normal' | 'medium' | 'bold' | undefined\n\t\n\t/**\n\t *\n\t * @attr\n\t * @default inherit\n\t * @type {'uppercase' |'lowercase' |'capitalize' |'normal'}\n\t * @public\n\t */\n\t@property({ type: String, reflect: true }) \n\ttransform: 'uppercase' | 'lowercase' | 'capitalize' | 'normal' | undefined\n\n\t@property({ type: Number })\n\tmaxLines: 1 | 2 | 3 | 4 | 5 | 6 | undefined\n\n\t/** When true, the element becomes contenteditable and dispatches 'change' events on blur/Enter */\n\t@property({ type: Boolean, reflect: true }) editable = false\n\t/** The text value when in editable mode. Set via property binding: .value=${...} */\n\t@property({ type: String }) value = ''\n\t/** Placeholder shown when editable and empty */\n\t@property({ type: String }) placeholder = ''\n\n\tprivate _editRef = createRef<HTMLDivElement>()\n\n\t/** Focus and select all text in editable mode */\n\tselectAll() {\n\t\tconst el = this._editRef.value\n\t\tif (!el) return\n\t\tel.focus()\n\t\tconst sel = window.getSelection()\n\t\tif (sel && el.textContent) {\n\t\t\tconst range = document.createRange()\n\t\t\trange.selectNodeContents(el)\n\t\t\tsel.removeAllRanges()\n\t\t\tsel.addRange(range)\n\t\t}\n\t}\n\n\tconnectedCallback() {\n\t\tsuper.connectedCallback()\n\n\t\tfromEvent<FocusEvent>(this, 'focusout').pipe(\n\t\t\tfilter(() => this.editable),\n\t\t\ttap(() => {\n\t\t\t\tconst el = this._editRef.value\n\t\t\t\tif (!el) return\n\t\t\t\tconst newValue = el.innerText.trim()\n\t\t\t\tif (newValue !== this.value) {\n\t\t\t\t\tthis.dispatchEvent(new CustomEvent('change', {\n\t\t\t\t\t\tdetail: { value: newValue },\n\t\t\t\t\t\tbubbles: true,\n\t\t\t\t\t\tcomposed: true,\n\t\t\t\t\t}))\n\t\t\t\t}\n\t\t\t\t// Ensure truly empty so :empty CSS placeholder works\n\t\t\t\tif (!newValue) el.textContent = ''\n\t\t\t}),\n\t\t\ttakeUntil(this.disconnecting),\n\t\t).subscribe()\n\n\t\t// Clean stray <br> / whitespace nodes so :empty CSS matches\n\t\tfromEvent(this, 'input').pipe(\n\t\t\tfilter(() => this.editable),\n\t\t\ttap(() => {\n\t\t\t\tconst el = this._editRef.value\n\t\t\t\tif (el && !el.innerText.trim()) el.textContent = ''\n\t\t\t}),\n\t\t\ttakeUntil(this.disconnecting),\n\t\t).subscribe()\n\n\t\tfromEvent<KeyboardEvent>(this, 'keydown').pipe(\n\t\t\tfilter(() => this.editable),\n\t\t\tfilter(e => e.key === 'Enter'),\n\t\t\ttap(e => { e.preventDefault(); (this._editRef.value ?? this).blur() }),\n\t\t\ttakeUntil(this.disconnecting),\n\t\t).subscribe()\n\t}\n\n\tprotected updated(changedProperties: Map<string, unknown>): void {\n\t\tsuper.updated(changedProperties)\n\t\tif (changedProperties.has('maxLines')) {\n\t\t\t// Remove all line-clamp classes\n\t\t\tthis.classList.remove('line-clamp-1', 'line-clamp-2', 'line-clamp-3', 'line-clamp-4', 'line-clamp-5', 'line-clamp-6')\n\t\t\t// Add the appropriate one\n\t\t\tif (this.maxLines) {\n\t\t\t\tthis.classList.add(`line-clamp-${this.maxLines}`)\n\t\t\t}\n\t\t}\n\t\tif ((changedProperties.has('value') || changedProperties.has('editable')) && this.editable) {\n\t\t\tconst el = this._editRef.value\n\t\t\tif (el && document.activeElement !== el) {\n\t\t\t\tif (this.value) {\n\t\t\t\t\tel.innerText = this.value\n\t\t\t\t} else {\n\t\t\t\t\tel.textContent = ''\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\tprotected render(): unknown {\n\t\tif (this.editable) {\n\t\t\treturn html`<div\n\t\t\t\t${ref(this._editRef)}\n\t\t\t\tclass=\"edit\"\n\t\t\t\tcontenteditable=\"true\"\n\t\t\t\tdata-placeholder=${this.placeholder ?? ''}\n\t\t\t></div>`\n\t\t}\n\t\treturn html`<slot></slot>`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-typography': SchmancyTypography\n\t}\n}"],"mappings":"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"}

package/dist/{utils-kND2Z9Xg.js → utils-Cj_nRRyx.js}

@@ -1,5 +1,5 @@
-import "./animation-BK-8BwY8.js";
-import "./overlay-stack-DCDS17uj.js";
+import "./animation-DCznELuT.js";
+import "./overlay-stack-BR4iYivO.js";
 import { Observable as e } from "rxjs";
 function t(t, n = { threshold: .5 }) {
 	return new e((e) => {