npm - @mhmo91/schmancy - Versions diffs - 0.9.24 → 0.9.25 - Mend

@mhmo91/schmancy 0.9.24 → 0.9.25

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (46) hide show

package/custom-elements.json +30 -15
package/dist/agent/schmancy.agent.js +99 -8
package/dist/agent/schmancy.agent.js.map +1 -1
package/dist/agent/schmancy.manifest.json +128 -3
package/dist/area-CFLFXu0Z.cjs.map +1 -1
package/dist/area-CfozaCAZ.js.map +1 -1
package/dist/card-CTUaARLm.js.map +1 -1
package/dist/card-DtN6p1Jq.cjs.map +1 -1
package/dist/chips-B-27tj7O.cjs.map +1 -1
package/dist/chips-DhAWrSgi.js.map +1 -1
package/dist/handover/agent-runtime-followups.md +1 -1
package/dist/handover/agent-runtime-v1.md +3 -3
package/dist/handover/agent-runtime-v2-loopback.md +5 -5
package/dist/lightbox-Cb5-XPWV.js.map +1 -1
package/dist/lightbox-Dk2ICCBB.cjs.map +1 -1
package/dist/radio-group-DYvIgv3P.cjs.map +1 -1
package/dist/radio-group-DchZApJl.js.map +1 -1
package/dist/table-B8H-zioX.js.map +1 -1
package/dist/table-ChHS4xby.cjs.map +1 -1
package/dist/tree.cjs.map +1 -1
package/dist/tree.js.map +1 -1
package/dist/typewriter.cjs.map +1 -1
package/dist/typewriter.js.map +1 -1
package/dist/typography.cjs.map +1 -1
package/dist/typography.js.map +1 -1
package/package.json +1 -1
package/src/area/area.component.ts +14 -0
package/src/card/card.ts +1 -0
package/src/chips/assist-chip.ts +11 -2
package/src/chips/suggestion-chip.ts +9 -6
package/src/lightbox/lightbox.ts +11 -0
package/src/radio-group/radio-button.ts +1 -0
package/src/table/table.ts +8 -2
package/src/tree/tree.ts +1 -0
package/src/typewriter/typewriter.ts +12 -0
package/src/typography/typography.ts +1 -0
package/types/src/area/area.component.d.ts +14 -0
package/types/src/card/card.d.ts +1 -0
package/types/src/chips/assist-chip.d.ts +11 -2
package/types/src/chips/suggestion-chip.d.ts +9 -6
package/types/src/lightbox/lightbox.d.ts +11 -0
package/types/src/radio-group/radio-button.d.ts +1 -0
package/types/src/table/table.d.ts +8 -2
package/types/src/tree/tree.d.ts +1 -0
package/types/src/typewriter/typewriter.d.ts +12 -0
package/types/src/typography/typography.d.ts +1 -0

package/dist/typewriter.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"typewriter.js","names":[],"sources":["../src/typewriter/typewriter.ts"],"sourcesContent":["import { consume } from '@lit/context'\nimport { $LitElement } from '@mixins/index'\nimport { delayContext } from '@schmancy/delay'\nimport hashContent from '@schmancy/utils/hashContent'\nimport { intersection$ } from '@schmancy/utils/intersection'\nimport { css, html, TemplateResult } from 'lit'\nimport { customElement, property, query, queryAssignedElements, queryAssignedNodes } from 'lit/decorators.js'\n// TypeIt is loaded lazily on first render — see ADR 0014 in the parent\n// monorepo. The static import was replaced with a type-only import plus a\n// memoised dynamic loader so the ~15 KB gzipped vendor chunk stays out of\n// the agent bundle's first paint for pages that don't render a typewriter.\nimport type { Options as TypeItOptions } from 'typeit'\ntype TypeItCtor = typeof import('typeit').default\ntype TypeItInstance = InstanceType<TypeItCtor>\n\nlet typeItPromise: Promise<TypeItCtor> \| null = null\nfunction loadTypeIt(): Promise<TypeItCtor> {\n\tif (typeItPromise) return typeItPromise\n\ttypeItPromise = import('typeit').then(m => m.default)\n\treturn typeItPromise\n}\n\n@customElement('schmancy-typewriter')\nexport class TypewriterElement extends $LitElement(css`\n\t:host {\n\t\tdisplay: inline-block;\n\t}\n\n\t#typewriter {\n\t\tposition: relative;\n\t}\n\n\t/* Enhanced cursor with glow effect /\n\t#typewriter :global(.ti-cursor) {\n\t\tanimation: cursor-pulse 1.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;\n\t\tcolor: currentColor;\n\t\tfilter: drop-shadow(0 0 8px currentColor);\n\t}\n\n\t@keyframes cursor-pulse {\n\t\t0%, 100% {\n\t\t\topacity: 1;\n\t\t\ttransform: scale(1);\n\t\t}\n\t\t50% {\n\t\t\topacity: 0.3;\n\t\t\ttransform: scale(0.95);\n\t\t}\n\t}\n\n\t/ Character entrance animation /\n\t#typewriter :global(.ti-container ) {\n\t\tanimation: char-entrance 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;\n\t}\n\n\t@keyframes char-entrance {\n\t\t0% {\n\t\t\topacity: 0;\n\t\t\ttransform: scale(0.3) translateY(10px);\n\t\t\tfilter: blur(4px);\n\t\t}\n\t\t50% {\n\t\t\topacity: 0.8;\n\t\t\ttransform: scale(1.1) translateY(-2px);\n\t\t}\n\t\t100% {\n\t\t\topacity: 1;\n\t\t\ttransform: scale(1) translateY(0);\n\t\t\tfilter: blur(0);\n\t\t}\n\t}\n\n\t/* Subtle character wobble on appear /\n\t#typewriter :global(.ti-container :nth-child(odd)) {\n\t\tanimation: char-entrance 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) backwards,\n\t\t char-wobble 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s backwards;\n\t}\n\n\t@keyframes char-wobble {\n\t\t0%, 100% {\n\t\t\ttransform: rotate(0deg);\n\t\t}\n\t\t25% {\n\t\t\ttransform: rotate(2deg);\n\t\t}\n\t\t75% {\n\t\t\ttransform: rotate(-2deg);\n\t\t}\n\t}\n\n\t/* Deletion animation - fade out and scale down /\n\t#typewriter :global(.ti-container .deleting) {\n\t\tanimation: char-delete 0.2s cubic-bezier(0.4, 0, 1, 1) forwards;\n\t}\n\n\t@keyframes char-delete {\n\t\t0% {\n\t\t\topacity: 1;\n\t\t\ttransform: scale(1);\n\t\t\tfilter: blur(0);\n\t\t}\n\t\t50% {\n\t\t\topacity: 0.5;\n\t\t\ttransform: scale(0.8) translateY(-3px);\n\t\t}\n\t\t100% {\n\t\t\topacity: 0;\n\t\t\ttransform: scale(0.4) translateY(-8px);\n\t\t\tfilter: blur(3px);\n\t\t}\n\t}\n\n\t/ Gradient text effect on typed text /\n\t#typewriter :global(.ti-container) {\n\t\tbackground: linear-gradient(\n\t\t\t90deg,\n\t\t\tcurrentColor 0%,\n\t\t\tcurrentColor 70%,\n\t\t\ttransparent 100%\n\t\t);\n\t\t-webkit-background-clip: text;\n\t\tbackground-clip: text;\n\t\tanimation: gradient-shift 3s ease-in-out infinite;\n\t}\n\n\t@keyframes gradient-shift {\n\t\t0%, 100% {\n\t\t\tfilter: brightness(1) saturate(1);\n\t\t}\n\t\t50% {\n\t\t\tfilter: brightness(1.15) saturate(1.2);\n\t\t}\n\t}\n\n\t/ Smooth transitions for all text /\n\t#typewriter {\n\t\ttransition: opacity 0.15s ease-out, transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);\n\t}\n`) {\n\t/*\n\t Typing speed in milliseconds per character.\n\t /\n\t@property({ type: Number })\n\tspeed: number = 35\n\n\t/\n\t Delay before typing starts (ms).\n\t /\n\t@consume({ context: delayContext, subscribe: true })\n\t@property({ type: Number })\n\tdelay: number = 0\n\n\t/\n\t Automatically start typing on initialization.\n\t /\n\t@property({ type: Boolean })\n\tautoStart: boolean = true\n\n\t/\n\t The cursor character.\n\t /\n\t@property({ type: String })\n\tcursorChar: string = ''\n\n\t/\n\t Typing speed for deletions (ms per character).\n\t /\n\t@property({ type: Number })\n\tdeleteSpeed: number = 20\n\n\t/\n\t Only animate once per session.\n\t /\n\t@property({ type: Boolean }) once = true\n\n\t/\n\t Loop the animation infinitely (overrides once).\n\t /\n\t@property({ type: Boolean }) loop = false\n\n\t/\n\t Default pause duration for cycling (ms).\n\t /\n\t@property({ type: Number }) cyclePause = 1500\n\t/\n\t TypeIt instance. Populated after `loadTypeIt()` resolves inside\n\t * `_startTyping()` — null until then, which is correct for a cold start\n\t * where the vendor chunk hasn't loaded yet.\n\t /\n\tprivate typeItInstance: TypeItInstance \| null = null\n\n\t/\n\t Reference to the typewriter container.\n\t /\n\t@query('#typewriter')\n\tprivate typewriterContainer!: HTMLElement\n\n\t@queryAssignedNodes({\n\t\tflatten: true,\n\t})\n\tprivate _getSlottedNodes!: Node[]\n\n\t@queryAssignedElements({\n\t\tflatten: true,\n\t})\n\tprivate _getSlottedElements!: HTMLElement[]\n\t/\n\t Lifecycle method called when the component is disconnected from the DOM.\n\t * Ensures that TypeIt instances are properly cleaned up.\n\t /\n\n\tprivate sessionKey = ''\n\tdisconnectedCallback() {\n\t\tsuper.disconnectedCallback()\n\t\tthis._destroyTypeIt()\n\t}\n\n\t/\n\t Initializes the TypeIt instance with the provided slotted content.\n\t * Async because TypeIt itself is lazy-loaded on first render.\n\t /\n\tprivate async _startTyping() {\n\t\t// Destroy any existing TypeIt instance\n\t\tthis._destroyTypeIt()\n\n\t\tthis.sessionKey = this.generateSessionKey()\n\n\t\tif (this.once && sessionStorage.getItem(this.sessionKey) === 'true') {\n\t\t\t// Skip delay and render immediately if once is set and already rendered\n\t\t\tthis.shadowRoot?.querySelector('slot')?.removeAttribute('hidden')\n\t\t\treturn\n\t\t}\n\n\t\tif (!this.typewriterContainer) {\n\t\t\tconsole.warn('Typewriter container not found.')\n\t\t\treturn\n\t\t}\n\n\t\t// Configure TypeIt options\n\t\tconst typeItOptions: TypeItOptions = {\n\t\t\tspeed: this.speed,\n\t\t\tstartDelay: this.delay,\n\t\t\tcursor: !!this.cursorChar,\n\t\t\tcursorChar: this.cursorChar,\n\t\t\tdeleteSpeed: this.deleteSpeed,\n\t\t\tloop: this.loop,\n\t\t\tafterComplete: () => {\n\t\t\t\tif (this.once && !this.loop) {\n\t\t\t\t\ttry {\n\t\t\t\t\t\tsessionStorage.setItem(this.sessionKey, 'true')\n\t\t\t\t\t} catch (error) {\n\t\t\t\t\t\tconsole.error('Error saving to session storage:', error)\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\t// Dispatch the custom event\n\t\t\t\tthis.dispatchEvent(new CustomEvent('typeit-complete', { bubbles: true, composed: true }))\n\n\t\t\t\t// Hide the cursor (unless looping)\n\t\t\t\tif (!this.loop) {\n\t\t\t\t\tthis.typewriterContainer.style.setProperty('--ti-cursor-display', 'none')\n\t\t\t\t}\n\t\t\t},\n\t\t}\n\n\t\t// Load TypeIt lazily on first call (module-scope memoised promise).\n\t\tconst TypeIt = await loadTypeIt()\n\t\t// Bail if we were disconnected during the load — avoids attaching to\n\t\t// a detached host.\n\t\tif (!this.isConnected) return\n\n\t\t// Initialize TypeIt\n\t\tthis.typeItInstance = new TypeIt(this.typewriterContainer, typeItOptions)\n\n\t\t// Process slotted content as actions\n\t\tconst slottedNodes = this._getSlottedNodes\n\t\tslottedNodes.forEach(node => {\n\t\t\tif (node.nodeType === Node.TEXT_NODE) {\n\t\t\t\t// Handle plain text - skip whitespace-only text nodes\n\t\t\t\tconst textContent = node.textContent \|\| ''\n\t\t\t\tif (textContent.trim()) {\n\t\t\t\t\tthis.typeItInstance?.type(textContent)\n\t\t\t\t}\n\t\t\t} else if (node instanceof HTMLElement) {\n\t\t\t\t// Handle custom element\n\t\t\t\tthis._processCustomElement(node)\n\t\t\t}\n\t\t})\n\n\t\t// Start the typing animation if autoStart is enabled\n\t\t// use rxjs to detect once we are in the view port\n\t\tintersection$(this.shadowRoot?.host as Element).subscribe(() => {\n\t\t\t// alert('in view')\n\t\t\tthis.typeItInstance?.go()\n\t\t})\n\t\t// Start the typing animation if autoStart is enabled\n\t}\n\n\tprivate generateSessionKey(): string {\n\t\tconst slotContent = this._getSlottedElements.map(el => el.outerHTML).join('')\n\t\treturn this.once ? hashContent(slotContent) : ''\n\t}\n\t/\n\t Destroys the current TypeIt instance if it exists.\n\t /\n\tprivate _destroyTypeIt() {\n\t\tif (this.typeItInstance) {\n\t\t\ttry {\n\t\t\t\tthis.typeItInstance.destroy()\n\t\t\t} catch (error) {\n\t\t\t\tconsole.error('Error destroying TypeIt instance:', error)\n\t\t\t}\n\t\t\tthis.typeItInstance = null\n\t\t}\n\t}\n\n\t/\n\t Processes a custom element for its typing behavior.\n\t /\n\tprivate _processCustomElement(element: HTMLElement) {\n\t\tconst action = element.getAttribute('action')\n\t\tconst value = element.getAttribute('value')\n\t\tconst cycle = element.getAttribute('cycle')\n\n\t\t// Handle cycle attribute - simple pipe-separated list\n\t\tif (cycle) {\n\t\t\tconst items = cycle.split('\|').map(item => item.trim())\n\t\t\tthis._processCycle(items, element)\n\t\t\treturn\n\t\t}\n\n\t\tswitch (action) {\n\t\t\tcase 'pause':\n\t\t\t\tthis.typeItInstance?.pause(parseInt(value \|\| '0', 10))\n\t\t\t\tbreak\n\t\t\tcase 'delete':\n\t\t\t\tthis.typeItInstance?.delete(parseInt(value \|\| '0', 10))\n\t\t\t\tbreak\n\t\t\tdefault:\n\t\t\t\tif (element.tagName === 'P') {\n\t\t\t\t\tthis.typeItInstance?.break()\n\t\t\t\t}\n\t\t\t\t// Treat as text if no action is defined\n\t\t\t\tthis.typeItInstance?.type(element.textContent \|\| '')\n\t\t\t\tbreak\n\t\t}\n\t}\n\n\t/\n\t Processes cycling text with auto-calculated delete counts.\n\t /\n\tprivate _processCycle(items: string[], element: HTMLElement) {\n\t\tif (items.length === 0) return\n\n\t\tconst customPause = element.getAttribute('pause')\n\t\tconst pauseDuration = customPause ? parseInt(customPause, 10) : this.cyclePause\n\n\t\t// Type each item with automatic deletion\n\t\titems.forEach((item, index) => {\n\t\t\t// Type the item\n\t\t\tthis.typeItInstance?.type(item)\n\n\t\t\t// Pause after typing (except after last item when not looping)\n\t\t\tif (index < items.length - 1 \|\| this.loop) {\n\t\t\t\tthis.typeItInstance?.pause(pauseDuration)\n\t\t\t}\n\n\t\t\t// Delete back to start (except for last item when not looping)\n\t\t\tif (index < items.length - 1) {\n\t\t\t\tthis.typeItInstance?.delete(item.length)\n\t\t\t} else if (this.loop) {\n\t\t\t\t// For looping, delete and start over\n\t\t\t\tthis.typeItInstance?.delete(item.length)\n\t\t\t}\n\t\t})\n\t}\n\n\t/\n\t Renders the component's HTML.\n\t */\n\trender(): TemplateResult {\n\t\treturn html`<div id=\"typewriter\" aria-live=\"polite\"></div>\n\n\t\t\t<div class=\"typewriter\">\n\t\t\t\t<slot\n\t\t\t\t\thidden\n\t\t\t\t\t@slotchange=${() => {\n\t\t\t\t\t\tthis._startTyping()\n\t\t\t\t\t}}\n\t\t\t\t></slot>\n\t\t\t</div> `\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-typewriter': TypewriterElement\n\t}\n}\n"],"mappings":"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"}
1	+ {"version":3,"file":"typewriter.js","names":[],"sources":["../src/typewriter/typewriter.ts"],"sourcesContent":["import { consume } from '@lit/context'\nimport { $LitElement } from '@mixins/index'\nimport { delayContext } from '@schmancy/delay'\nimport hashContent from '@schmancy/utils/hashContent'\nimport { intersection$ } from '@schmancy/utils/intersection'\nimport { css, html, TemplateResult } from 'lit'\nimport { customElement, property, query, queryAssignedElements, queryAssignedNodes } from 'lit/decorators.js'\n// TypeIt is loaded lazily on first render — see ADR 0014 in the parent\n// monorepo. The static import was replaced with a type-only import plus a\n// memoised dynamic loader so the ~15 KB gzipped vendor chunk stays out of\n// the agent bundle's first paint for pages that don't render a typewriter.\nimport type { Options as TypeItOptions } from 'typeit'\ntype TypeItCtor = typeof import('typeit').default\ntype TypeItInstance = InstanceType<TypeItCtor>\n\nlet typeItPromise: Promise<TypeItCtor> \| null = null\nfunction loadTypeIt(): Promise<TypeItCtor> {\n\tif (typeItPromise) return typeItPromise\n\ttypeItPromise = import('typeit').then(m => m.default)\n\treturn typeItPromise\n}\n\n/*\n Typewriter effect — animates text typing/deletion with a cursor. Wraps the TypeIt library, lazy-loaded on first render.\n \n @element schmancy-typewriter\n * @summary Drop string content as the default slot or use `<p>` / `<span>` with `cycle=\"A\|B\|C\"` attribute children for cycling phrases. Set `loop` for infinite cycling, `once` to remember completion across sessions via sessionStorage.\n * @example\n * <schmancy-typewriter speed=\"35\" cursor-char=\"\|\">\n * Hello, world.\n * </schmancy-typewriter>\n * @platform span - Animated text container. Degrades to its raw text content if the tag never registers — animation is lost but content stays visible.\n * @fires typeit-complete - When the animation finishes typing all content. Fires after the final `afterComplete` callback in the underlying TypeIt instance.\n /\n@customElement('schmancy-typewriter')\nexport class TypewriterElement extends $LitElement(css`\n\t:host {\n\t\tdisplay: inline-block;\n\t}\n\n\t#typewriter {\n\t\tposition: relative;\n\t}\n\n\t/ Enhanced cursor with glow effect /\n\t#typewriter :global(.ti-cursor) {\n\t\tanimation: cursor-pulse 1.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;\n\t\tcolor: currentColor;\n\t\tfilter: drop-shadow(0 0 8px currentColor);\n\t}\n\n\t@keyframes cursor-pulse {\n\t\t0%, 100% {\n\t\t\topacity: 1;\n\t\t\ttransform: scale(1);\n\t\t}\n\t\t50% {\n\t\t\topacity: 0.3;\n\t\t\ttransform: scale(0.95);\n\t\t}\n\t}\n\n\t/ Character entrance animation /\n\t#typewriter :global(.ti-container ) {\n\t\tanimation: char-entrance 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;\n\t}\n\n\t@keyframes char-entrance {\n\t\t0% {\n\t\t\topacity: 0;\n\t\t\ttransform: scale(0.3) translateY(10px);\n\t\t\tfilter: blur(4px);\n\t\t}\n\t\t50% {\n\t\t\topacity: 0.8;\n\t\t\ttransform: scale(1.1) translateY(-2px);\n\t\t}\n\t\t100% {\n\t\t\topacity: 1;\n\t\t\ttransform: scale(1) translateY(0);\n\t\t\tfilter: blur(0);\n\t\t}\n\t}\n\n\t/* Subtle character wobble on appear /\n\t#typewriter :global(.ti-container :nth-child(odd)) {\n\t\tanimation: char-entrance 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) backwards,\n\t\t char-wobble 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s backwards;\n\t}\n\n\t@keyframes char-wobble {\n\t\t0%, 100% {\n\t\t\ttransform: rotate(0deg);\n\t\t}\n\t\t25% {\n\t\t\ttransform: rotate(2deg);\n\t\t}\n\t\t75% {\n\t\t\ttransform: rotate(-2deg);\n\t\t}\n\t}\n\n\t/* Deletion animation - fade out and scale down /\n\t#typewriter :global(.ti-container .deleting) {\n\t\tanimation: char-delete 0.2s cubic-bezier(0.4, 0, 1, 1) forwards;\n\t}\n\n\t@keyframes char-delete {\n\t\t0% {\n\t\t\topacity: 1;\n\t\t\ttransform: scale(1);\n\t\t\tfilter: blur(0);\n\t\t}\n\t\t50% {\n\t\t\topacity: 0.5;\n\t\t\ttransform: scale(0.8) translateY(-3px);\n\t\t}\n\t\t100% {\n\t\t\topacity: 0;\n\t\t\ttransform: scale(0.4) translateY(-8px);\n\t\t\tfilter: blur(3px);\n\t\t}\n\t}\n\n\t/ Gradient text effect on typed text /\n\t#typewriter :global(.ti-container) {\n\t\tbackground: linear-gradient(\n\t\t\t90deg,\n\t\t\tcurrentColor 0%,\n\t\t\tcurrentColor 70%,\n\t\t\ttransparent 100%\n\t\t);\n\t\t-webkit-background-clip: text;\n\t\tbackground-clip: text;\n\t\tanimation: gradient-shift 3s ease-in-out infinite;\n\t}\n\n\t@keyframes gradient-shift {\n\t\t0%, 100% {\n\t\t\tfilter: brightness(1) saturate(1);\n\t\t}\n\t\t50% {\n\t\t\tfilter: brightness(1.15) saturate(1.2);\n\t\t}\n\t}\n\n\t/ Smooth transitions for all text /\n\t#typewriter {\n\t\ttransition: opacity 0.15s ease-out, transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);\n\t}\n`) {\n\t/*\n\t Typing speed in milliseconds per character.\n\t /\n\t@property({ type: Number })\n\tspeed: number = 35\n\n\t/\n\t Delay before typing starts (ms).\n\t /\n\t@consume({ context: delayContext, subscribe: true })\n\t@property({ type: Number })\n\tdelay: number = 0\n\n\t/\n\t Automatically start typing on initialization.\n\t /\n\t@property({ type: Boolean })\n\tautoStart: boolean = true\n\n\t/\n\t The cursor character.\n\t /\n\t@property({ type: String })\n\tcursorChar: string = ''\n\n\t/\n\t Typing speed for deletions (ms per character).\n\t /\n\t@property({ type: Number })\n\tdeleteSpeed: number = 20\n\n\t/\n\t Only animate once per session.\n\t /\n\t@property({ type: Boolean }) once = true\n\n\t/\n\t Loop the animation infinitely (overrides once).\n\t /\n\t@property({ type: Boolean }) loop = false\n\n\t/\n\t Default pause duration for cycling (ms).\n\t /\n\t@property({ type: Number }) cyclePause = 1500\n\t/\n\t TypeIt instance. Populated after `loadTypeIt()` resolves inside\n\t * `_startTyping()` — null until then, which is correct for a cold start\n\t * where the vendor chunk hasn't loaded yet.\n\t /\n\tprivate typeItInstance: TypeItInstance \| null = null\n\n\t/\n\t Reference to the typewriter container.\n\t /\n\t@query('#typewriter')\n\tprivate typewriterContainer!: HTMLElement\n\n\t@queryAssignedNodes({\n\t\tflatten: true,\n\t})\n\tprivate _getSlottedNodes!: Node[]\n\n\t@queryAssignedElements({\n\t\tflatten: true,\n\t})\n\tprivate _getSlottedElements!: HTMLElement[]\n\t/\n\t Lifecycle method called when the component is disconnected from the DOM.\n\t * Ensures that TypeIt instances are properly cleaned up.\n\t /\n\n\tprivate sessionKey = ''\n\tdisconnectedCallback() {\n\t\tsuper.disconnectedCallback()\n\t\tthis._destroyTypeIt()\n\t}\n\n\t/\n\t Initializes the TypeIt instance with the provided slotted content.\n\t * Async because TypeIt itself is lazy-loaded on first render.\n\t /\n\tprivate async _startTyping() {\n\t\t// Destroy any existing TypeIt instance\n\t\tthis._destroyTypeIt()\n\n\t\tthis.sessionKey = this.generateSessionKey()\n\n\t\tif (this.once && sessionStorage.getItem(this.sessionKey) === 'true') {\n\t\t\t// Skip delay and render immediately if once is set and already rendered\n\t\t\tthis.shadowRoot?.querySelector('slot')?.removeAttribute('hidden')\n\t\t\treturn\n\t\t}\n\n\t\tif (!this.typewriterContainer) {\n\t\t\tconsole.warn('Typewriter container not found.')\n\t\t\treturn\n\t\t}\n\n\t\t// Configure TypeIt options\n\t\tconst typeItOptions: TypeItOptions = {\n\t\t\tspeed: this.speed,\n\t\t\tstartDelay: this.delay,\n\t\t\tcursor: !!this.cursorChar,\n\t\t\tcursorChar: this.cursorChar,\n\t\t\tdeleteSpeed: this.deleteSpeed,\n\t\t\tloop: this.loop,\n\t\t\tafterComplete: () => {\n\t\t\t\tif (this.once && !this.loop) {\n\t\t\t\t\ttry {\n\t\t\t\t\t\tsessionStorage.setItem(this.sessionKey, 'true')\n\t\t\t\t\t} catch (error) {\n\t\t\t\t\t\tconsole.error('Error saving to session storage:', error)\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\t// Dispatch the custom event\n\t\t\t\tthis.dispatchEvent(new CustomEvent('typeit-complete', { bubbles: true, composed: true }))\n\n\t\t\t\t// Hide the cursor (unless looping)\n\t\t\t\tif (!this.loop) {\n\t\t\t\t\tthis.typewriterContainer.style.setProperty('--ti-cursor-display', 'none')\n\t\t\t\t}\n\t\t\t},\n\t\t}\n\n\t\t// Load TypeIt lazily on first call (module-scope memoised promise).\n\t\tconst TypeIt = await loadTypeIt()\n\t\t// Bail if we were disconnected during the load — avoids attaching to\n\t\t// a detached host.\n\t\tif (!this.isConnected) return\n\n\t\t// Initialize TypeIt\n\t\tthis.typeItInstance = new TypeIt(this.typewriterContainer, typeItOptions)\n\n\t\t// Process slotted content as actions\n\t\tconst slottedNodes = this._getSlottedNodes\n\t\tslottedNodes.forEach(node => {\n\t\t\tif (node.nodeType === Node.TEXT_NODE) {\n\t\t\t\t// Handle plain text - skip whitespace-only text nodes\n\t\t\t\tconst textContent = node.textContent \|\| ''\n\t\t\t\tif (textContent.trim()) {\n\t\t\t\t\tthis.typeItInstance?.type(textContent)\n\t\t\t\t}\n\t\t\t} else if (node instanceof HTMLElement) {\n\t\t\t\t// Handle custom element\n\t\t\t\tthis._processCustomElement(node)\n\t\t\t}\n\t\t})\n\n\t\t// Start the typing animation if autoStart is enabled\n\t\t// use rxjs to detect once we are in the view port\n\t\tintersection$(this.shadowRoot?.host as Element).subscribe(() => {\n\t\t\t// alert('in view')\n\t\t\tthis.typeItInstance?.go()\n\t\t})\n\t\t// Start the typing animation if autoStart is enabled\n\t}\n\n\tprivate generateSessionKey(): string {\n\t\tconst slotContent = this._getSlottedElements.map(el => el.outerHTML).join('')\n\t\treturn this.once ? hashContent(slotContent) : ''\n\t}\n\t/\n\t Destroys the current TypeIt instance if it exists.\n\t /\n\tprivate _destroyTypeIt() {\n\t\tif (this.typeItInstance) {\n\t\t\ttry {\n\t\t\t\tthis.typeItInstance.destroy()\n\t\t\t} catch (error) {\n\t\t\t\tconsole.error('Error destroying TypeIt instance:', error)\n\t\t\t}\n\t\t\tthis.typeItInstance = null\n\t\t}\n\t}\n\n\t/\n\t Processes a custom element for its typing behavior.\n\t /\n\tprivate _processCustomElement(element: HTMLElement) {\n\t\tconst action = element.getAttribute('action')\n\t\tconst value = element.getAttribute('value')\n\t\tconst cycle = element.getAttribute('cycle')\n\n\t\t// Handle cycle attribute - simple pipe-separated list\n\t\tif (cycle) {\n\t\t\tconst items = cycle.split('\|').map(item => item.trim())\n\t\t\tthis._processCycle(items, element)\n\t\t\treturn\n\t\t}\n\n\t\tswitch (action) {\n\t\t\tcase 'pause':\n\t\t\t\tthis.typeItInstance?.pause(parseInt(value \|\| '0', 10))\n\t\t\t\tbreak\n\t\t\tcase 'delete':\n\t\t\t\tthis.typeItInstance?.delete(parseInt(value \|\| '0', 10))\n\t\t\t\tbreak\n\t\t\tdefault:\n\t\t\t\tif (element.tagName === 'P') {\n\t\t\t\t\tthis.typeItInstance?.break()\n\t\t\t\t}\n\t\t\t\t// Treat as text if no action is defined\n\t\t\t\tthis.typeItInstance?.type(element.textContent \|\| '')\n\t\t\t\tbreak\n\t\t}\n\t}\n\n\t/\n\t Processes cycling text with auto-calculated delete counts.\n\t /\n\tprivate _processCycle(items: string[], element: HTMLElement) {\n\t\tif (items.length === 0) return\n\n\t\tconst customPause = element.getAttribute('pause')\n\t\tconst pauseDuration = customPause ? parseInt(customPause, 10) : this.cyclePause\n\n\t\t// Type each item with automatic deletion\n\t\titems.forEach((item, index) => {\n\t\t\t// Type the item\n\t\t\tthis.typeItInstance?.type(item)\n\n\t\t\t// Pause after typing (except after last item when not looping)\n\t\t\tif (index < items.length - 1 \|\| this.loop) {\n\t\t\t\tthis.typeItInstance?.pause(pauseDuration)\n\t\t\t}\n\n\t\t\t// Delete back to start (except for last item when not looping)\n\t\t\tif (index < items.length - 1) {\n\t\t\t\tthis.typeItInstance?.delete(item.length)\n\t\t\t} else if (this.loop) {\n\t\t\t\t// For looping, delete and start over\n\t\t\t\tthis.typeItInstance?.delete(item.length)\n\t\t\t}\n\t\t})\n\t}\n\n\t/\n\t Renders the component's HTML.\n\t */\n\trender(): TemplateResult {\n\t\treturn html`<div id=\"typewriter\" aria-live=\"polite\"></div>\n\n\t\t\t<div class=\"typewriter\">\n\t\t\t\t<slot\n\t\t\t\t\thidden\n\t\t\t\t\t@slotchange=${() => {\n\t\t\t\t\t\tthis._startTyping()\n\t\t\t\t\t}}\n\t\t\t\t></slot>\n\t\t\t</div> `\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-typewriter': TypewriterElement\n\t}\n}\n"],"mappings":";;;;;;;;;AAeA,IAAI,IAA4C,MAoBzC,IAAA,cAAgC,EAAY,CAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;4BAwHrC,IAAA,KAAA,QAOA,GAAA,KAAA,YAAA,CAMK,GAAA,KAAA,aAMA,IAAA,KAAA,cAMC,IAAA,KAAA,OAAA,CAKc,GAAA,KAAA,OAAA,CAKA,GAAA,KAAA,aAKK,MAAA,KAAA,iBAMO,MAAA,KAAA,aAsB3B;;CACrB,uBAAA;AACC,QAAM,sBAAA,EACN,KAAK,gBAAA;;CAON,MAAA,eAAc;AAMb,MAJA,KAAK,gBAAA,EAEL,KAAK,aAAa,KAAK,oBAAA,EAEnB,KAAK,QAAQ,eAAe,QAAQ,KAAK,WAAA,KAAgB,OAG5D,QAAA,KADA,KAAK,YAAY,cAAc,OAAA,EAAS,gBAAgB,SAAA;AAIzD,MAAA,CAAK,KAAK,oBAET;EAID,IAAM,IAA+B;GACpC,OAAO,KAAK;GACZ,YAAY,KAAK;GACjB,QAAA,CAAA,CAAU,KAAK;GACf,YAAY,KAAK;GACjB,aAAa,KAAK;GAClB,MAAM,KAAK;GACX,qBAAA;AACC,QAAI,KAAK,QAAA,CAAS,KAAK,KACtB,KAAA;AACC,oBAAe,QAAQ,KAAK,YAAY,OAAA;YAChC;AAKV,SAAK,cAAc,IAAI,YAAY,mBAAmB;KAAE,SAAA,CAAS;KAAM,UAAA,CAAU;KAAA,CAAA,CAAA,EAG5E,KAAK,QACT,KAAK,oBAAoB,MAAM,YAAY,uBAAuB,OAAA;;GAAA,EAM/D,IAAA,OApQH,AACJ,MAAgB,OAAO,0BAAU,MAAK,MAAK,EAAE,QAAA;AAsQvC,OAAK,gBAGV,KAAK,iBAAiB,IAAI,EAAO,KAAK,qBAAqB,EAAA,EAGtC,KAAK,iBACb,SAAQ,MAAA;AACpB,OAAI,EAAK,aAAa,KAAK,WAAW;IAErC,IAAM,IAAc,EAAK,eAAe;AACpC,MAAY,MAAA,IACf,KAAK,gBAAgB,KAAK,EAAA;SAEjB,cAAgB,eAE1B,KAAK,sBAAsB,EAAA;IAAA,EAM7B,EAAc,KAAK,YAAY,KAAA,CAAiB,gBAAA;AAE/C,QAAK,gBAAgB,IAAA;IAAA;;CAKvB,qBAAA;EACC,IAAM,IAAc,KAAK,oBAAoB,KAAI,MAAM,EAAG,UAAA,CAAW,KAAK,GAAA;AAC1E,SAAO,KAAK,OAAO,EAAY,EAAA,GAAe;;CAK/C,iBAAA;AACC,MAAI,KAAK,gBAAgB;AACxB,OAAA;AACC,SAAK,eAAe,SAAA;WACZ;AAGT,QAAK,iBAAiB;;;CAOxB,sBAA8B,GAAA;EAC7B,IAAM,IAAS,EAAQ,aAAa,SAAA,EAC9B,IAAQ,EAAQ,aAAa,QAAA,EAC7B,IAAQ,EAAQ,aAAa,QAAA;AAGnC,MAAI,GAAO;GACV,IAAM,IAAQ,EAAM,MAAM,IAAA,CAAK,KAAI,MAAQ,EAAK,MAAA,CAAA;AAEhD,GADA,KAAK,cAAc,GAAO,EAAA;AAC1B;;AAGD,UAAQ,GAAR;GACC,KAAK;AACJ,SAAK,gBAAgB,MAAM,SAAS,KAAS,KAAK,GAAA,CAAA;AAClD;GACD,KAAK;AACJ,SAAK,gBAAgB,OAAO,SAAS,KAAS,KAAK,GAAA,CAAA;AACnD;GACD,QACyB,CAApB,EAAQ,YAAY,OACvB,KAAK,gBAAgB,OAAA,EAGtB,KAAK,gBAAgB,KAAK,EAAQ,eAAe,GAAA;;;CAQpD,cAAsB,GAAiB,GAAA;AACtC,MAAI,EAAM,WAAW,EAAG;EAExB,IAAM,IAAc,EAAQ,aAAa,QAAA,EACnC,IAAgB,IAAc,SAAS,GAAa,GAAA,GAAM,KAAK;AAGrE,IAAM,SAAS,GAAM,MAAA;AAEpB,QAAK,gBAAgB,KAAK,EAAA,GAGtB,IAAQ,EAAM,SAAS,KAAK,KAAK,SACpC,KAAK,gBAAgB,MAAM,EAAA,GAIxB,IAAQ,EAAM,SAAS,KAEhB,KAAK,SADf,KAAK,gBAAgB,OAAO,EAAK,OAAA;IAAA;;CAWpC,SAAA;AACC,SAAO,CAAI;;;;;;AAMP,QAAK,cAAA;IAAA;;;;;GApPT,EAAS,EAAE,MAAM,QAAA,CAAA,CAAA,EAAS,EAAA,WAAA,SAAA,KAAA,EAAA,EAAA,EAAA,CAM1B,EAAQ;CAAE,SAAS;CAAc,WAAA,CAAW;CAAA,CAAA,EAC5C,EAAS,EAAE,MAAM,QAAA,CAAA,CAAA,EAAS,EAAA,WAAA,SAAA,KAAA,EAAA,EAAA,EAAA,CAM1B,EAAS,EAAE,MAAM,SAAA,CAAA,CAAA,EAAU,EAAA,WAAA,aAAA,KAAA,EAAA,EAAA,EAAA,CAM3B,EAAS,EAAE,MAAM,QAAA,CAAA,CAAA,EAAS,EAAA,WAAA,cAAA,KAAA,EAAA,EAAA,EAAA,CAM1B,EAAS,EAAE,MAAM,QAAA,CAAA,CAAA,EAAS,EAAA,WAAA,eAAA,KAAA,EAAA,EAAA,EAAA,CAM1B,EAAS,EAAE,MAAM,SAAA,CAAA,CAAA,EAAU,EAAA,WAAA,QAAA,KAAA,EAAA,EAAA,EAAA,CAK3B,EAAS,EAAE,MAAM,SAAA,CAAA,CAAA,EAAU,EAAA,WAAA,QAAA,KAAA,EAAA,EAAA,EAAA,CAK3B,EAAS,EAAE,MAAM,QAAA,CAAA,CAAA,EAAS,EAAA,WAAA,cAAA,KAAA,EAAA,EAAA,EAAA,CAW1B,EAAM,cAAA,CAAA,EAAc,EAAA,WAAA,uBAAA,KAAA,EAAA,EAAA,EAAA,CAGpB,EAAmB,EACnB,SAAA,CAAS,GAAA,CAAA,CAAA,EACR,EAAA,WAAA,oBAAA,KAAA,EAAA,EAAA,EAAA,CAGD,EAAsB,EACtB,SAAA,CAAS,GAAA,CAAA,CAAA,EACR,EAAA,WAAA,uBAAA,KAAA,EAAA,EAAA,IAAA,EAAA,CAtLF,EAAc,sBAAA,CAAA,EAAsB,EAAA;AAAA,SAAA,KAAA"}

package/dist/typography.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"typography.cjs","names":[],"sources":["../src/typography/typography.ts"],"sourcesContent":["import { TailwindElement } from '@mixins/tailwind.mixin'\nimport { css, html, type PropertyValues } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { createRef, ref } from 'lit/directives/ref.js'\nimport { html as staticHtml, literal } from 'lit/static-html.js'\nimport { fromEvent } from 'rxjs'\nimport { filter, tap, takeUntil } from 'rxjs/operators'\n\n/*\n Preset → (type, token) shorthand. Saves the two-decision-per-text-node\n * fatigue that 50+ typography nodes in a single page cause.\n /\nexport type TypographyPreset =\n\t\| 'display' \| 'display-lg' \| 'display-md' \| 'display-sm'\n\t\| 'heading-lg' \| 'heading-md' \| 'heading-sm'\n\t\| 'title-lg' \| 'title-md' \| 'title-sm'\n\t\| 'body-lg' \| 'body-md' \| 'body-sm'\n\t\| 'label-lg' \| 'label-md' \| 'label-sm'\n\t\| 'caption'\n\nconst PRESET_MAP: Record<TypographyPreset, { type: string; token: string }> = {\n\t'display': { type: 'display', token: 'lg' },\n\t'display-lg': { type: 'display', token: 'lg' },\n\t'display-md': { type: 'display', token: 'md' },\n\t'display-sm': { type: 'display', token: 'sm' },\n\t'heading-lg': { type: 'headline', token: 'lg' },\n\t'heading-md': { type: 'headline', token: 'md' },\n\t'heading-sm': { type: 'headline', token: 'sm' },\n\t'title-lg': { type: 'title', token: 'lg' },\n\t'title-md': { type: 'title', token: 'md' },\n\t'title-sm': { type: 'title', token: 'sm' },\n\t'body-lg': { type: 'body', token: 'lg' },\n\t'body-md': { type: 'body', token: 'md' },\n\t'body-sm': { type: 'body', token: 'sm' },\n\t'label-lg': { type: 'label', token: 'lg' },\n\t'label-md': { type: 'label', token: 'md' },\n\t'label-sm': { type: 'label', token: 'sm' },\n\t'caption': { type: 'label', token: 'sm' },\n}\n\n/\n Allowed semantic tag names for the `as` prop. Closed enum so we can\n * use `literal` template parts safely with `lit/static-html`.\n /\nexport type TypographyTag = 'h1' \| 'h2' \| 'h3' \| 'h4' \| 'h5' \| 'h6' \| 'p' \| 'span' \| 'div'\n\nconst TAG_LITERALS: Record<TypographyTag, ReturnType<typeof literal>> = {\n\th1: literal`h1`,\n\th2: literal`h2`,\n\th3: literal`h3`,\n\th4: literal`h4`,\n\th5: literal`h5`,\n\th6: literal`h6`,\n\tp: literal`p`,\n\tspan: literal`span`,\n\tdiv: literal`div`,\n}\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 TailwindElement(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 Shorthand for picking a (type, token) pair in one go. When set, derives\n\t * `type` and `token` automatically — saves the two-decisions-per-text-node\n\t * fatigue that hits when a single page has 50+ typography nodes.\n\t \n\t @attr preset\n\t * @type {TypographyPreset}\n\t * @example <schmancy-typography preset=\"heading-md\">Title</schmancy-typography>\n\t /\n\t@property({ type: String, reflect: true })\n\tpreset?: TypographyPreset\n\n\t/\n\t Render the slot wrapped in the requested semantic HTML element so screen\n\t * readers expose the right role / heading level. Without `as`, the slot\n\t * sits directly in the shadow root and the host is a generic element.\n\t \n\t @attr as\n\t * @type {TypographyTag}\n\t * @example <schmancy-typography preset=\"heading-md\" as=\"h2\">Section</schmancy-typography>\n\t /\n\t@property({ type: String, reflect: true })\n\tas?: TypographyTag\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\tprotected override willUpdate(changed: PropertyValues): void {\n\t\tsuper.willUpdate?.(changed)\n\t\t// `preset` shorthand expands to (type, token) so the existing CSS\n\t\t// selectors keep matching without duplicating the size scale.\n\t\tif (changed.has('preset') && this.preset && PRESET_MAP[this.preset]) {\n\t\t\tconst { type, token } = PRESET_MAP[this.preset]\n\t\t\tthis.type = type as typeof this.type\n\t\t\tthis.token = token as typeof this.token\n\t\t}\n\t}\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\t// `as` wraps the slot in the requested semantic tag so heading levels\n\t\t// land in the accessibility tree. Without `as` the slot is bare and\n\t\t// the host element carries the visual styling only.\n\t\tif (this.as && TAG_LITERALS[this.as]) {\n\t\t\tconst tag = TAG_LITERALS[this.as]\n\t\t\treturn staticHtml`<${tag}><slot></slot></${tag}>`\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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"}
1	+ {"version":3,"file":"typography.cjs","names":[],"sources":["../src/typography/typography.ts"],"sourcesContent":["import { TailwindElement } from '@mixins/tailwind.mixin'\nimport { css, html, type PropertyValues } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { createRef, ref } from 'lit/directives/ref.js'\nimport { html as staticHtml, literal } from 'lit/static-html.js'\nimport { fromEvent } from 'rxjs'\nimport { filter, tap, takeUntil } from 'rxjs/operators'\n\n/*\n Preset → (type, token) shorthand. Saves the two-decision-per-text-node\n * fatigue that 50+ typography nodes in a single page cause.\n /\nexport type TypographyPreset =\n\t\| 'display' \| 'display-lg' \| 'display-md' \| 'display-sm'\n\t\| 'heading-lg' \| 'heading-md' \| 'heading-sm'\n\t\| 'title-lg' \| 'title-md' \| 'title-sm'\n\t\| 'body-lg' \| 'body-md' \| 'body-sm'\n\t\| 'label-lg' \| 'label-md' \| 'label-sm'\n\t\| 'caption'\n\nconst PRESET_MAP: Record<TypographyPreset, { type: string; token: string }> = {\n\t'display': { type: 'display', token: 'lg' },\n\t'display-lg': { type: 'display', token: 'lg' },\n\t'display-md': { type: 'display', token: 'md' },\n\t'display-sm': { type: 'display', token: 'sm' },\n\t'heading-lg': { type: 'headline', token: 'lg' },\n\t'heading-md': { type: 'headline', token: 'md' },\n\t'heading-sm': { type: 'headline', token: 'sm' },\n\t'title-lg': { type: 'title', token: 'lg' },\n\t'title-md': { type: 'title', token: 'md' },\n\t'title-sm': { type: 'title', token: 'sm' },\n\t'body-lg': { type: 'body', token: 'lg' },\n\t'body-md': { type: 'body', token: 'md' },\n\t'body-sm': { type: 'body', token: 'sm' },\n\t'label-lg': { type: 'label', token: 'lg' },\n\t'label-md': { type: 'label', token: 'md' },\n\t'label-sm': { type: 'label', token: 'sm' },\n\t'caption': { type: 'label', token: 'sm' },\n}\n\n/\n Allowed semantic tag names for the `as` prop. Closed enum so we can\n * use `literal` template parts safely with `lit/static-html`.\n /\nexport type TypographyTag = 'h1' \| 'h2' \| 'h3' \| 'h4' \| 'h5' \| 'h6' \| 'p' \| 'span' \| 'div'\n\nconst TAG_LITERALS: Record<TypographyTag, ReturnType<typeof literal>> = {\n\th1: literal`h1`,\n\th2: literal`h2`,\n\th3: literal`h3`,\n\th4: literal`h4`,\n\th5: literal`h5`,\n\th6: literal`h6`,\n\tp: literal`p`,\n\tspan: literal`span`,\n\tdiv: literal`div`,\n}\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 * @fires change - When `editable` is true, fires on blur or Enter with `detail.value` set to the new text content. Not fired when `editable` is unset (the default).\n /\n@customElement('schmancy-typography')\nexport class SchmancyTypography extends TailwindElement(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 Shorthand for picking a (type, token) pair in one go. When set, derives\n\t * `type` and `token` automatically — saves the two-decisions-per-text-node\n\t * fatigue that hits when a single page has 50+ typography nodes.\n\t \n\t @attr preset\n\t * @type {TypographyPreset}\n\t * @example <schmancy-typography preset=\"heading-md\">Title</schmancy-typography>\n\t /\n\t@property({ type: String, reflect: true })\n\tpreset?: TypographyPreset\n\n\t/\n\t Render the slot wrapped in the requested semantic HTML element so screen\n\t * readers expose the right role / heading level. Without `as`, the slot\n\t * sits directly in the shadow root and the host is a generic element.\n\t \n\t @attr as\n\t * @type {TypographyTag}\n\t * @example <schmancy-typography preset=\"heading-md\" as=\"h2\">Section</schmancy-typography>\n\t /\n\t@property({ type: String, reflect: true })\n\tas?: TypographyTag\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\tprotected override willUpdate(changed: PropertyValues): void {\n\t\tsuper.willUpdate?.(changed)\n\t\t// `preset` shorthand expands to (type, token) so the existing CSS\n\t\t// selectors keep matching without duplicating the size scale.\n\t\tif (changed.has('preset') && this.preset && PRESET_MAP[this.preset]) {\n\t\t\tconst { type, token } = PRESET_MAP[this.preset]\n\t\t\tthis.type = type as typeof this.type\n\t\t\tthis.token = token as typeof this.token\n\t\t}\n\t}\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\t// `as` wraps the slot in the requested semantic tag so heading levels\n\t\t// land in the accessibility tree. Without `as` the slot is bare and\n\t\t// the host element carries the visual styling only.\n\t\tif (this.as && TAG_LITERALS[this.as]) {\n\t\t\tconst tag = TAG_LITERALS[this.as]\n\t\t\treturn staticHtml`<${tag}><slot></slot></${tag}>`\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.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"typography.js","names":[],"sources":["../src/typography/typography.ts"],"sourcesContent":["import { TailwindElement } from '@mixins/tailwind.mixin'\nimport { css, html, type PropertyValues } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { createRef, ref } from 'lit/directives/ref.js'\nimport { html as staticHtml, literal } from 'lit/static-html.js'\nimport { fromEvent } from 'rxjs'\nimport { filter, tap, takeUntil } from 'rxjs/operators'\n\n/*\n Preset → (type, token) shorthand. Saves the two-decision-per-text-node\n * fatigue that 50+ typography nodes in a single page cause.\n /\nexport type TypographyPreset =\n\t\| 'display' \| 'display-lg' \| 'display-md' \| 'display-sm'\n\t\| 'heading-lg' \| 'heading-md' \| 'heading-sm'\n\t\| 'title-lg' \| 'title-md' \| 'title-sm'\n\t\| 'body-lg' \| 'body-md' \| 'body-sm'\n\t\| 'label-lg' \| 'label-md' \| 'label-sm'\n\t\| 'caption'\n\nconst PRESET_MAP: Record<TypographyPreset, { type: string; token: string }> = {\n\t'display': { type: 'display', token: 'lg' },\n\t'display-lg': { type: 'display', token: 'lg' },\n\t'display-md': { type: 'display', token: 'md' },\n\t'display-sm': { type: 'display', token: 'sm' },\n\t'heading-lg': { type: 'headline', token: 'lg' },\n\t'heading-md': { type: 'headline', token: 'md' },\n\t'heading-sm': { type: 'headline', token: 'sm' },\n\t'title-lg': { type: 'title', token: 'lg' },\n\t'title-md': { type: 'title', token: 'md' },\n\t'title-sm': { type: 'title', token: 'sm' },\n\t'body-lg': { type: 'body', token: 'lg' },\n\t'body-md': { type: 'body', token: 'md' },\n\t'body-sm': { type: 'body', token: 'sm' },\n\t'label-lg': { type: 'label', token: 'lg' },\n\t'label-md': { type: 'label', token: 'md' },\n\t'label-sm': { type: 'label', token: 'sm' },\n\t'caption': { type: 'label', token: 'sm' },\n}\n\n/\n Allowed semantic tag names for the `as` prop. Closed enum so we can\n * use `literal` template parts safely with `lit/static-html`.\n /\nexport type TypographyTag = 'h1' \| 'h2' \| 'h3' \| 'h4' \| 'h5' \| 'h6' \| 'p' \| 'span' \| 'div'\n\nconst TAG_LITERALS: Record<TypographyTag, ReturnType<typeof literal>> = {\n\th1: literal`h1`,\n\th2: literal`h2`,\n\th3: literal`h3`,\n\th4: literal`h4`,\n\th5: literal`h5`,\n\th6: literal`h6`,\n\tp: literal`p`,\n\tspan: literal`span`,\n\tdiv: literal`div`,\n}\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 TailwindElement(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 Shorthand for picking a (type, token) pair in one go. When set, derives\n\t * `type` and `token` automatically — saves the two-decisions-per-text-node\n\t * fatigue that hits when a single page has 50+ typography nodes.\n\t \n\t @attr preset\n\t * @type {TypographyPreset}\n\t * @example <schmancy-typography preset=\"heading-md\">Title</schmancy-typography>\n\t /\n\t@property({ type: String, reflect: true })\n\tpreset?: TypographyPreset\n\n\t/\n\t Render the slot wrapped in the requested semantic HTML element so screen\n\t * readers expose the right role / heading level. Without `as`, the slot\n\t * sits directly in the shadow root and the host is a generic element.\n\t \n\t @attr as\n\t * @type {TypographyTag}\n\t * @example <schmancy-typography preset=\"heading-md\" as=\"h2\">Section</schmancy-typography>\n\t /\n\t@property({ type: String, reflect: true })\n\tas?: TypographyTag\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\tprotected override willUpdate(changed: PropertyValues): void {\n\t\tsuper.willUpdate?.(changed)\n\t\t// `preset` shorthand expands to (type, token) so the existing CSS\n\t\t// selectors keep matching without duplicating the size scale.\n\t\tif (changed.has('preset') && this.preset && PRESET_MAP[this.preset]) {\n\t\t\tconst { type, token } = PRESET_MAP[this.preset]\n\t\t\tthis.type = type as typeof this.type\n\t\t\tthis.token = token as typeof this.token\n\t\t}\n\t}\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\t// `as` wraps the slot in the requested semantic tag so heading levels\n\t\t// land in the accessibility tree. Without `as` the slot is bare and\n\t\t// the host element carries the visual styling only.\n\t\tif (this.as && TAG_LITERALS[this.as]) {\n\t\t\tconst tag = TAG_LITERALS[this.as]\n\t\t\treturn staticHtml`<${tag}><slot></slot></${tag}>`\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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"}
1	+ {"version":3,"file":"typography.js","names":[],"sources":["../src/typography/typography.ts"],"sourcesContent":["import { TailwindElement } from '@mixins/tailwind.mixin'\nimport { css, html, type PropertyValues } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { createRef, ref } from 'lit/directives/ref.js'\nimport { html as staticHtml, literal } from 'lit/static-html.js'\nimport { fromEvent } from 'rxjs'\nimport { filter, tap, takeUntil } from 'rxjs/operators'\n\n/*\n Preset → (type, token) shorthand. Saves the two-decision-per-text-node\n * fatigue that 50+ typography nodes in a single page cause.\n /\nexport type TypographyPreset =\n\t\| 'display' \| 'display-lg' \| 'display-md' \| 'display-sm'\n\t\| 'heading-lg' \| 'heading-md' \| 'heading-sm'\n\t\| 'title-lg' \| 'title-md' \| 'title-sm'\n\t\| 'body-lg' \| 'body-md' \| 'body-sm'\n\t\| 'label-lg' \| 'label-md' \| 'label-sm'\n\t\| 'caption'\n\nconst PRESET_MAP: Record<TypographyPreset, { type: string; token: string }> = {\n\t'display': { type: 'display', token: 'lg' },\n\t'display-lg': { type: 'display', token: 'lg' },\n\t'display-md': { type: 'display', token: 'md' },\n\t'display-sm': { type: 'display', token: 'sm' },\n\t'heading-lg': { type: 'headline', token: 'lg' },\n\t'heading-md': { type: 'headline', token: 'md' },\n\t'heading-sm': { type: 'headline', token: 'sm' },\n\t'title-lg': { type: 'title', token: 'lg' },\n\t'title-md': { type: 'title', token: 'md' },\n\t'title-sm': { type: 'title', token: 'sm' },\n\t'body-lg': { type: 'body', token: 'lg' },\n\t'body-md': { type: 'body', token: 'md' },\n\t'body-sm': { type: 'body', token: 'sm' },\n\t'label-lg': { type: 'label', token: 'lg' },\n\t'label-md': { type: 'label', token: 'md' },\n\t'label-sm': { type: 'label', token: 'sm' },\n\t'caption': { type: 'label', token: 'sm' },\n}\n\n/\n Allowed semantic tag names for the `as` prop. Closed enum so we can\n * use `literal` template parts safely with `lit/static-html`.\n /\nexport type TypographyTag = 'h1' \| 'h2' \| 'h3' \| 'h4' \| 'h5' \| 'h6' \| 'p' \| 'span' \| 'div'\n\nconst TAG_LITERALS: Record<TypographyTag, ReturnType<typeof literal>> = {\n\th1: literal`h1`,\n\th2: literal`h2`,\n\th3: literal`h3`,\n\th4: literal`h4`,\n\th5: literal`h5`,\n\th6: literal`h6`,\n\tp: literal`p`,\n\tspan: literal`span`,\n\tdiv: literal`div`,\n}\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 * @fires change - When `editable` is true, fires on blur or Enter with `detail.value` set to the new text content. Not fired when `editable` is unset (the default).\n /\n@customElement('schmancy-typography')\nexport class SchmancyTypography extends TailwindElement(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 Shorthand for picking a (type, token) pair in one go. When set, derives\n\t * `type` and `token` automatically — saves the two-decisions-per-text-node\n\t * fatigue that hits when a single page has 50+ typography nodes.\n\t \n\t @attr preset\n\t * @type {TypographyPreset}\n\t * @example <schmancy-typography preset=\"heading-md\">Title</schmancy-typography>\n\t /\n\t@property({ type: String, reflect: true })\n\tpreset?: TypographyPreset\n\n\t/\n\t Render the slot wrapped in the requested semantic HTML element so screen\n\t * readers expose the right role / heading level. Without `as`, the slot\n\t * sits directly in the shadow root and the host is a generic element.\n\t \n\t @attr as\n\t * @type {TypographyTag}\n\t * @example <schmancy-typography preset=\"heading-md\" as=\"h2\">Section</schmancy-typography>\n\t /\n\t@property({ type: String, reflect: true })\n\tas?: TypographyTag\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\tprotected override willUpdate(changed: PropertyValues): void {\n\t\tsuper.willUpdate?.(changed)\n\t\t// `preset` shorthand expands to (type, token) so the existing CSS\n\t\t// selectors keep matching without duplicating the size scale.\n\t\tif (changed.has('preset') && this.preset && PRESET_MAP[this.preset]) {\n\t\t\tconst { type, token } = PRESET_MAP[this.preset]\n\t\t\tthis.type = type as typeof this.type\n\t\t\tthis.token = token as typeof this.token\n\t\t}\n\t}\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\t// `as` wraps the slot in the requested semantic tag so heading levels\n\t\t// land in the accessibility tree. Without `as` the slot is bare and\n\t\t// the host element carries the visual styling only.\n\t\tif (this.as && TAG_LITERALS[this.as]) {\n\t\t\tconst tag = TAG_LITERALS[this.as]\n\t\t\treturn staticHtml`<${tag}><slot></slot></${tag}>`\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/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
 	"name": "@mhmo91/schmancy",
-	"version": "0.9.24",
+	"version": "0.9.25",
 	"description": "UI library build with web components",
 	"main": "./dist/index.js",
 	"customElements": "custom-elements.json",

package/src/area/area.component.ts CHANGED Viewed

@@ -20,6 +20,20 @@ import area from './area.service'
 import { RouteComponent, SchmancyRoute } from './route.component'
 import { ActiveRoute, HISTORY_STRATEGY, RouteAction } from './router.types'
+/**
+ * Router outlet — renders the active route's component for the named area. Drives the schmancy router via the `area` service.
+ *
+ * @element schmancy-area
+ * @summary Mount once per "addressable region" of the app (typically the main content area). Use the imperative `area.push({ area, component, params })` service to navigate. Multiple named areas can coexist on a page (e.g. main content + a sheet).
+ * @example
+ * <schmancy-area name="main"></schmancy-area>
+ * <script>
+ *   import { area } from '@mhmo91/schmancy';
+ *   area.push({ area: 'main', component: MyDashboardView, params: { id: 42 } });
+ * </script>
+ * @platform div - Routing outlet. Degrades to an empty div if the tag never registers — routing is lost but the page stays accessible.
+ * @fires redirect - When the area resolves a route to a different destination (programmatic redirect). `detail.from` and `detail.to` are the route names.
+ */
 @customElement('schmancy-area')
 export class SchmancyArea extends $LitElement(css`
 	:host {

package/src/card/card.ts CHANGED Viewed

@@ -21,6 +21,7 @@ import { ifDefined } from 'lit/directives/if-defined.js'
  *   </schmancy-card-action>
  * </schmancy-card>
  * @platform div - Styled `<div>`; becomes an `<a>` when `href` is set so the whole card is a single interactive surface. Degrades to a plain div/a if the tag never registers.
+ * @fires schmancy-click - When an interactive card is clicked or activated via keyboard. `detail.value` echoes the card's `type`. Only fires when `interactive` is set.
  */
 @customElement('schmancy-card')
 export default class SchmancyCard extends TailwindElement(css`

package/src/chips/assist-chip.ts CHANGED Viewed

@@ -6,8 +6,17 @@ import { BehaviorSubject, combineLatest } from 'rxjs'
 import { takeUntil } from 'rxjs/operators'
 /**
- * Assist chip component - prompts user actions like opening calendar events or sharing content
- * Pure Schmancy implementation with Tailwind CSS and RxJS state management
+ * Assist chip — single-tap trigger for a contextual action (open calendar event, share content, jump to related view). Distinct from filter and input chips: assist chips have no selected state; clicking fires `action`.
+ *
+ * @element schmancy-assist-chip
+ * @summary Use for "do this thing" suggestions surfaced in context (next to a date, after a recipient list, near a long description). Pair with schmancy-icon for the leading glyph.
+ * @example
+ * <schmancy-assist-chip @action=${(e) => share(e.detail.value)}>
+ *   <schmancy-icon slot="icon">share</schmancy-icon>
+ *   Share
+ * </schmancy-assist-chip>
+ * @platform button click - Material 3 assist-chip semantics. Degrades to a plain `<button>` if the tag never registers.
+ * @fires action - When the chip is clicked or activated via keyboard. `detail.value` echoes the chip's `value` attribute.
  */
 @customElement('schmancy-assist-chip')
 export class SchmancyAssistChip extends TailwindElement(css`

package/src/chips/suggestion-chip.ts CHANGED Viewed

@@ -6,13 +6,16 @@ import { BehaviorSubject, combineLatest } from 'rxjs'
 import { takeUntil } from 'rxjs/operators'
 /**
- * Suggestion chip component - provides contextual recommendations to users
+ * Suggestion chip — single-tap insertion of a recommended value. Distinct from filter chips (no selected state) and assist chips (assist triggers an action; suggestion offers a value the user can pick).
  *
- * IMPORTANT: Suggestion chips do NOT have a selected state. They are designed to
- * provide suggestions and recommendations that trigger actions when clicked.
- * Unlike filter chips, they cannot be toggled on/off.
- *
- * Pure Schmancy implementation with Tailwind CSS and RxJS state management
+ * @element schmancy-suggestion-chip
+ * @summary Use for "would you also like to…" prompts above a search input or below a message thread. Click fires `action` with the chip's `value` so the parent can insert it into a field or trigger a search.
+ * @example
+ * <schmancy-suggestion-chip value="yesterday" @action=${(e) => setRange(e.detail.value)}>
+ *   Yesterday
+ * </schmancy-suggestion-chip>
+ * @platform button click - Material 3 suggestion-chip semantics. Degrades to a plain `<button>` if the tag never registers.
+ * @fires action - When the chip is clicked or activated via keyboard. `detail.value` echoes the chip's `value` attribute.
  */
 @customElement('schmancy-suggestion-chip')
 export class SchmancySuggestionChip extends TailwindElement(css`

package/src/lightbox/lightbox.ts CHANGED Viewed

@@ -7,6 +7,17 @@ import { filter, takeUntil, tap, switchMap, map, first } from 'rxjs/operators'
 import { $LitElement } from '@mixins/index'
 import { overlayStack } from '../utils/overlay-stack'
+/**
+ * Image lightbox — thumbnail grid that opens to a full-screen viewer on click, with keyboard navigation between images.
+ *
+ * @element schmancy-lightbox
+ * @summary Drop-in for galleries / image lists where each thumbnail should expand to fill the viewport. Pass an `images` array of `{ src, alt, caption? }`.
+ * @example
+ * <schmancy-lightbox .images=${[{ src: '/a.jpg', alt: 'A' }, { src: '/b.jpg', alt: 'B' }]}></schmancy-lightbox>
+ * @platform dialog close - Modal full-screen viewer with keyboard navigation. Degrades to a plain image grid if the tag never registers.
+ * @fires change - When the active image index changes (next/prev). `detail.index` is the new active image's position in the array.
+ * @fires close - When the viewer is dismissed (ESC, backdrop click, close button).
+ */
 @customElement('schmancy-lightbox')
 export class SchmancyLightbox extends $LitElement(css`
 	:host {

package/src/radio-group/radio-button.ts CHANGED Viewed

@@ -15,6 +15,7 @@ import { fromEvent, takeUntil } from 'rxjs'
  *   <schmancy-radio-button value="pro" checked>Pro</schmancy-radio-button>
  * </schmancy-radio-group>
  * @platform radio change - Schmancy-skinned `<input type="radio">` semantics. Degrades to native radio if the tag never registers.
+ * @fires radio-button-click - Internal event consumed by the parent schmancy-radio-group; `detail.value` is the clicked button's value. Listen on schmancy-radio-group for the public `change` event instead of subscribing here.
  *
  * @prop {string} name - Name attribute for grouping radio buttons
  * @prop {string} value - Value of this radio button

package/src/table/table.ts CHANGED Viewed

@@ -26,9 +26,15 @@ export interface RowEventDetail<T> {
 export type SortDirection = 'asc' | 'desc' | null
 /**
- * SchmancyDataTable is a generic data table component.
- * It supports sorting, filtering, and custom rendering of rows.
+ * Generic data table — typed columns, optional sort, custom renderers per column. Pass `data` (array) and `columns` (TableColumn descriptors).
  *
+ * @element schmancy-table
+ * @summary Use for tabular data where each column has a known shape. Pair with `<schmancy-table-row>` for the per-row interaction surface. Sort by setting `sortable: true` on a column descriptor; the table emits `sort-change` so the parent can re-fetch / re-sort in the data layer if needed.
+ * @example
+ * <schmancy-table .data=${rows} .columns=${[{ name: 'Name', key: 'name' }, { name: 'Status', key: 'status' }]}></schmancy-table>
+ * @platform table - Renders an accessible table with `<lit-virtualizer>` for large datasets. Degrades to a styled `<table>` if the tag never registers.
+ * @fires click - When a data row is activated. `detail.item` is the row's source object, `detail.index` is the position in the data array.
+ * @fires sort-change - When the user toggles a column sort. `detail.column` is the column key, `detail.direction` is `'asc' | 'desc' | null`.
  */
 @customElement('schmancy-table')
 export class SchmancyDataTable<T extends Record<string, any> = any> extends $LitElement() {

package/src/tree/tree.ts CHANGED Viewed

@@ -19,6 +19,7 @@ import { fromEvent, merge, switchMap, takeUntil, tap, zip } from 'rxjs'
  * @platform details toggle - Recursive `<details>`-like disclosure. Degrades to a plain nested list if the tag never registers — loses expand/collapse but stays navigable.
  * @slot root - The root element of the tree
  * @slot - The children of the tree
+ * @fires toggle - When the root toggler or chevron is clicked. Fires before the open state flips; the host's `open` property reflects the new state on the next animation frame.
  */
 @customElement('schmancy-tree')
 export class SchmancyTree extends TailwindElement(css`

package/src/typewriter/typewriter.ts CHANGED Viewed

@@ -20,6 +20,18 @@ function loadTypeIt(): Promise<TypeItCtor> {
 	return typeItPromise
 }
+/**
+ * Typewriter effect — animates text typing/deletion with a cursor. Wraps the TypeIt library, lazy-loaded on first render.
+ *
+ * @element schmancy-typewriter
+ * @summary Drop string content as the default slot or use `<p>` / `<span>` with `cycle="A|B|C"` attribute children for cycling phrases. Set `loop` for infinite cycling, `once` to remember completion across sessions via sessionStorage.
+ * @example
+ * <schmancy-typewriter speed="35" cursor-char="|">
+ *   Hello, world.
+ * </schmancy-typewriter>
+ * @platform span - Animated text container. Degrades to its raw text content if the tag never registers — animation is lost but content stays visible.
+ * @fires typeit-complete - When the animation finishes typing all content. Fires after the final `afterComplete` callback in the underlying TypeIt instance.
+ */
 @customElement('schmancy-typewriter')
 export class TypewriterElement extends $LitElement(css`
 	:host {

package/src/typography/typography.ts CHANGED Viewed

@@ -61,6 +61,7 @@ const TAG_LITERALS: Record<TypographyTag, ReturnType<typeof literal>> = {
 /**
  * @element schmancy-typography
  * @slot - The text for the typography.
+ * @fires change - When `editable` is true, fires on blur or Enter with `detail.value` set to the new text content. Not fired when `editable` is unset (the default).
  */
 @customElement('schmancy-typography')
 export class SchmancyTypography extends TailwindElement(css`

package/types/src/area/area.component.d.ts CHANGED Viewed

@@ -1,5 +1,19 @@
 import { RouteComponent } from './route.component';
 declare const SchmancyArea_base: CustomElementConstructor & import("@mixins/index").Constructor<import("lit").LitElement> & import("@mixins/index").Constructor<import("@mixins/index").IBaseMixin>;
+/**
+ * Router outlet — renders the active route's component for the named area. Drives the schmancy router via the `area` service.
+ *
+ * @element schmancy-area
+ * @summary Mount once per "addressable region" of the app (typically the main content area). Use the imperative `area.push({ area, component, params })` service to navigate. Multiple named areas can coexist on a page (e.g. main content + a sheet).
+ * @example
+ * <schmancy-area name="main"></schmancy-area>
+ * <script>
+ *   import { area } from '@mhmo91/schmancy';
+ *   area.push({ area: 'main', component: MyDashboardView, params: { id: 42 } });
+ * </script>
+ * @platform div - Routing outlet. Degrades to an empty div if the tag never registers — routing is lost but the page stays accessible.
+ * @fires redirect - When the area resolves a route to a different destination (programmatic redirect). `detail.from` and `detail.to` are the route names.
+ */
 export declare class SchmancyArea extends SchmancyArea_base {
     /**
      * The name of the router outlet

package/types/src/card/card.d.ts CHANGED Viewed

@@ -17,6 +17,7 @@ declare const SchmancyCard_base: import("@mixins/index").Constructor<CustomEleme
  *   </schmancy-card-action>
  * </schmancy-card>
  * @platform div - Styled `<div>`; becomes an `<a>` when `href` is set so the whole card is a single interactive surface. Degrades to a plain div/a if the tag never registers.
+ * @fires schmancy-click - When an interactive card is clicked or activated via keyboard. `detail.value` echoes the card's `type`. Only fires when `interactive` is set.
  */
 export default class SchmancyCard extends SchmancyCard_base {
     protected static shadowRootOptions: {

package/types/src/chips/assist-chip.d.ts CHANGED Viewed

@@ -1,8 +1,17 @@
 import { LitElement } from 'lit';
 declare const SchmancyAssistChip_base: import("../../mixins").Constructor<CustomElementConstructor> & import("../../mixins").Constructor<import("@mixins/tailwind.mixin").ITailwindElementMixin> & import("../../mixins").Constructor<LitElement> & import("../../mixins").Constructor<import("../../mixins").IBaseMixin>;
 /**
- * Assist chip component - prompts user actions like opening calendar events or sharing content
- * Pure Schmancy implementation with Tailwind CSS and RxJS state management
+ * Assist chip — single-tap trigger for a contextual action (open calendar event, share content, jump to related view). Distinct from filter and input chips: assist chips have no selected state; clicking fires `action`.
+ *
+ * @element schmancy-assist-chip
+ * @summary Use for "do this thing" suggestions surfaced in context (next to a date, after a recipient list, near a long description). Pair with schmancy-icon for the leading glyph.
+ * @example
+ * <schmancy-assist-chip @action=${(e) => share(e.detail.value)}>
+ *   <schmancy-icon slot="icon">share</schmancy-icon>
+ *   Share
+ * </schmancy-assist-chip>
+ * @platform button click - Material 3 assist-chip semantics. Degrades to a plain `<button>` if the tag never registers.
+ * @fires action - When the chip is clicked or activated via keyboard. `detail.value` echoes the chip's `value` attribute.
  */
 export declare class SchmancyAssistChip extends SchmancyAssistChip_base {
     /** Value identifier for the chip */

package/types/src/chips/suggestion-chip.d.ts CHANGED Viewed

@@ -1,13 +1,16 @@
 import { LitElement } from 'lit';
 declare const SchmancySuggestionChip_base: import("../../mixins").Constructor<CustomElementConstructor> & import("../../mixins").Constructor<import("@mixins/tailwind.mixin").ITailwindElementMixin> & import("../../mixins").Constructor<LitElement> & import("../../mixins").Constructor<import("../../mixins").IBaseMixin>;
 /**
- * Suggestion chip component - provides contextual recommendations to users
+ * Suggestion chip — single-tap insertion of a recommended value. Distinct from filter chips (no selected state) and assist chips (assist triggers an action; suggestion offers a value the user can pick).
  *
- * IMPORTANT: Suggestion chips do NOT have a selected state. They are designed to
- * provide suggestions and recommendations that trigger actions when clicked.
- * Unlike filter chips, they cannot be toggled on/off.
- *
- * Pure Schmancy implementation with Tailwind CSS and RxJS state management
+ * @element schmancy-suggestion-chip
+ * @summary Use for "would you also like to…" prompts above a search input or below a message thread. Click fires `action` with the chip's `value` so the parent can insert it into a field or trigger a search.
+ * @example
+ * <schmancy-suggestion-chip value="yesterday" @action=${(e) => setRange(e.detail.value)}>
+ *   Yesterday
+ * </schmancy-suggestion-chip>
+ * @platform button click - Material 3 suggestion-chip semantics. Degrades to a plain `<button>` if the tag never registers.
+ * @fires action - When the chip is clicked or activated via keyboard. `detail.value` echoes the chip's `value` attribute.
  */
 export declare class SchmancySuggestionChip extends SchmancySuggestionChip_base {
     /** Value identifier for the chip */

package/types/src/lightbox/lightbox.d.ts CHANGED Viewed

@@ -1,5 +1,16 @@
 import { PropertyValues } from 'lit';
 declare const SchmancyLightbox_base: CustomElementConstructor & import("@mixins/index").Constructor<import("lit").LitElement> & import("@mixins/index").Constructor<import("@mixins/index").IBaseMixin>;
+/**
+ * Image lightbox — thumbnail grid that opens to a full-screen viewer on click, with keyboard navigation between images.
+ *
+ * @element schmancy-lightbox
+ * @summary Drop-in for galleries / image lists where each thumbnail should expand to fill the viewport. Pass an `images` array of `{ src, alt, caption? }`.
+ * @example
+ * <schmancy-lightbox .images=${[{ src: '/a.jpg', alt: 'A' }, { src: '/b.jpg', alt: 'B' }]}></schmancy-lightbox>
+ * @platform dialog close - Modal full-screen viewer with keyboard navigation. Degrades to a plain image grid if the tag never registers.
+ * @fires change - When the active image index changes (next/prev). `detail.index` is the new active image's position in the array.
+ * @fires close - When the viewer is dismissed (ESC, backdrop click, close button).
+ */
 export declare class SchmancyLightbox extends SchmancyLightbox_base {
     src: string;
     images: string[];

package/types/src/radio-group/radio-button.d.ts CHANGED Viewed

@@ -10,6 +10,7 @@ declare const RadioButton_base: import("@mixins/index").Constructor<import("@mix
  *   <schmancy-radio-button value="pro" checked>Pro</schmancy-radio-button>
  * </schmancy-radio-group>
  * @platform radio change - Schmancy-skinned `<input type="radio">` semantics. Degrades to native radio if the tag never registers.
+ * @fires radio-button-click - Internal event consumed by the parent schmancy-radio-group; `detail.value` is the clicked button's value. Listen on schmancy-radio-group for the public `change` event instead of subscribing here.
  *
  * @prop {string} name - Name attribute for grouping radio buttons
  * @prop {string} value - Value of this radio button

package/types/src/table/table.d.ts CHANGED Viewed

@@ -17,9 +17,15 @@ export interface RowEventDetail<T> {
 export type SortDirection = 'asc' | 'desc' | null;
 declare const SchmancyDataTable_base: CustomElementConstructor & import("../../mixins").Constructor<import("lit").LitElement> & import("../../mixins").Constructor<import("../../mixins").IBaseMixin>;
 /**
- * SchmancyDataTable is a generic data table component.
- * It supports sorting, filtering, and custom rendering of rows.
+ * Generic data table — typed columns, optional sort, custom renderers per column. Pass `data` (array) and `columns` (TableColumn descriptors).
  *
+ * @element schmancy-table
+ * @summary Use for tabular data where each column has a known shape. Pair with `<schmancy-table-row>` for the per-row interaction surface. Sort by setting `sortable: true` on a column descriptor; the table emits `sort-change` so the parent can re-fetch / re-sort in the data layer if needed.
+ * @example
+ * <schmancy-table .data=${rows} .columns=${[{ name: 'Name', key: 'name' }, { name: 'Status', key: 'status' }]}></schmancy-table>
+ * @platform table - Renders an accessible table with `<lit-virtualizer>` for large datasets. Degrades to a styled `<table>` if the tag never registers.
+ * @fires click - When a data row is activated. `detail.item` is the row's source object, `detail.index` is the position in the data array.
+ * @fires sort-change - When the user toggles a column sort. `detail.column` is the column key, `detail.direction` is `'asc' | 'desc' | null`.
  */
 export declare class SchmancyDataTable<T extends Record<string, any> = any> extends SchmancyDataTable_base {
     columns: TableColumn<T>[];

package/types/src/tree/tree.d.ts CHANGED Viewed

@@ -15,6 +15,7 @@ declare const SchmancyTree_base: import("@mixins/index").Constructor<CustomEleme
  * @platform details toggle - Recursive `<details>`-like disclosure. Degrades to a plain nested list if the tag never registers — loses expand/collapse but stays navigable.
  * @slot root - The root element of the tree
  * @slot - The children of the tree
+ * @fires toggle - When the root toggler or chevron is clicked. Fires before the open state flips; the host's `open` property reflects the new state on the next animation frame.
  */
 export declare class SchmancyTree extends SchmancyTree_base {
     /**