@mhmo91/schmancy 0.9.28 → 0.10.2

package/dist/typewriter.js

@@ -1,214 +1,92 @@
-import { a as e } from "./tailwind.mixin-mdQR3BEO.js";
-import { t } from "./decorate-D_utPUsC.js";
-import { t as n } from "./litElement.mixin-CszkJuNl.js";
-import "./mixins.js";
-import { n as r } from "./delay-Dlk0A3he.js";
-import { t as i } from "./hashContent-B2IntJQf.js";
-import { t as a } from "./intersection-BrXp4YTO.js";
-import { customElement as o, property as s, query as c, queryAssignedElements as l, queryAssignedNodes as u } from "lit/decorators.js";
-import { css as d, html as f } from "lit";
-var p = null, m = class extends n(d`
-	:host {
-		display: inline-block;
-	}
-
-	#typewriter {
-		position: relative;
-	}
-
-	/* Enhanced cursor with glow effect */
-	#typewriter :global(.ti-cursor) {
-		animation: cursor-pulse 1.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
-		color: currentColor;
-		filter: drop-shadow(0 0 8px currentColor);
-	}
-
-	@keyframes cursor-pulse {
-		0%, 100% {
-			opacity: 1;
-			transform: scale(1);
-		}
-		50% {
-			opacity: 0.3;
-			transform: scale(0.95);
-		}
-	}
-
-	/* Character entrance animation */
-	#typewriter :global(.ti-container *) {
-		animation: char-entrance 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
-	}
-
-	@keyframes char-entrance {
-		0% {
-			opacity: 0;
-			transform: scale(0.3) translateY(10px);
-			filter: blur(4px);
-		}
-		50% {
-			opacity: 0.8;
-			transform: scale(1.1) translateY(-2px);
-		}
-		100% {
-			opacity: 1;
-			transform: scale(1) translateY(0);
-			filter: blur(0);
-		}
-	}
-
-	/* Subtle character wobble on appear */
-	#typewriter :global(.ti-container *:nth-child(odd)) {
-		animation: char-entrance 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) backwards,
-		           char-wobble 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s backwards;
-	}
-
-	@keyframes char-wobble {
-		0%, 100% {
-			transform: rotate(0deg);
-		}
-		25% {
-			transform: rotate(2deg);
-		}
-		75% {
-			transform: rotate(-2deg);
-		}
-	}
-
-	/* Deletion animation - fade out and scale down */
-	#typewriter :global(.ti-container .deleting) {
-		animation: char-delete 0.2s cubic-bezier(0.4, 0, 1, 1) forwards;
-	}
-
-	@keyframes char-delete {
-		0% {
-			opacity: 1;
-			transform: scale(1);
-			filter: blur(0);
-		}
-		50% {
-			opacity: 0.5;
-			transform: scale(0.8) translateY(-3px);
-		}
-		100% {
-			opacity: 0;
-			transform: scale(0.4) translateY(-8px);
-			filter: blur(3px);
-		}
-	}
-
-	/* Gradient text effect on typed text */
-	#typewriter :global(.ti-container) {
-		background: linear-gradient(
-			90deg,
-			currentColor 0%,
-			currentColor 70%,
-			transparent 100%
-		);
-		-webkit-background-clip: text;
-		background-clip: text;
-		animation: gradient-shift 3s ease-in-out infinite;
-	}
-
-	@keyframes gradient-shift {
-		0%, 100% {
-			filter: brightness(1) saturate(1);
-		}
-		50% {
-			filter: brightness(1.15) saturate(1.2);
-		}
-	}
-
-	/* Smooth transitions for all text */
-	#typewriter * {
-		transition: opacity 0.15s ease-out, transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
-	}
-`) {
+import { EMPTY as e, concat as t, defer as n, interval as r, of as i } from "rxjs";
+import { delay as a, repeat as o, take as s, tap as c } from "rxjs/operators";
+import { noChange as l } from "lit";
+import { AsyncDirective as u, directive as d } from "lit/async-directive.js";
+var f = class {
+	constructor(e = .3) {
+		this.audioContext = new AudioContext(), this.volume = Math.max(0, Math.min(1, e));
+	}
+	playKeyPress() {
+		let e = this.audioContext.currentTime, t = this.audioContext.createOscillator(), n = this.audioContext.createGain(), r = 800 + 200 * Math.random();
+		t.frequency.setValueAtTime(r, e), t.type = "sine", n.gain.setValueAtTime(0, e), n.gain.linearRampToValueAtTime(.2 * this.volume, e + .005), n.gain.exponentialRampToValueAtTime(.001, e + .03), t.connect(n), n.connect(this.audioContext.destination), t.start(e), t.stop(e + .03);
+		let i = this.audioContext.createOscillator(), a = this.audioContext.createGain();
+		i.frequency.setValueAtTime(1800 + 400 * Math.random(), e), i.type = "sine", a.gain.setValueAtTime(0, e), a.gain.linearRampToValueAtTime(.08 * this.volume, e + .003), a.gain.exponentialRampToValueAtTime(.001, e + .015), i.connect(a), a.connect(this.audioContext.destination), i.start(e), i.stop(e + .015);
+	}
+	playDelete() {
+		let e = this.audioContext.currentTime, t = this.audioContext.createOscillator(), n = this.audioContext.createGain();
+		t.frequency.setValueAtTime(600, e), t.frequency.exponentialRampToValueAtTime(200, e + .04), t.type = "sine", n.gain.setValueAtTime(0, e), n.gain.linearRampToValueAtTime(.12 * this.volume, e + .005), n.gain.exponentialRampToValueAtTime(.001, e + .04), t.connect(n), n.connect(this.audioContext.destination), t.start(e), t.stop(e + .04);
+	}
+	cleanup() {
+		this.audioContext.close();
+	}
+}, p = d(class extends u {
 	constructor(...e) {
-		super(...e), this.speed = 35, this.delay = 0, this.autoStart = !0, this.cursorChar = "", this.deleteSpeed = 20, this.once = !0, this.loop = !1, this.cyclePause = 1500, this.typeItInstance = null, this.sessionKey = "";
-	}
-	disconnectedCallback() {
-		super.disconnectedCallback(), this._destroyTypeIt();
-	}
-	async _startTyping() {
-		if (this._destroyTypeIt(), this.sessionKey = this.generateSessionKey(), this.once && sessionStorage.getItem(this.sessionKey) === "true") return void this.shadowRoot?.querySelector("slot")?.removeAttribute("hidden");
-		if (!this.typewriterContainer) return;
-		let e = {
-			speed: this.speed,
-			startDelay: this.delay,
-			cursor: !!this.cursorChar,
-			cursorChar: this.cursorChar,
-			deleteSpeed: this.deleteSpeed,
-			loop: this.loop,
-			afterComplete: () => {
-				if (this.once && !this.loop) try {
-					sessionStorage.setItem(this.sessionKey, "true");
-				} catch {}
-				this.dispatchEvent(new CustomEvent("typeit-complete", {
-					bubbles: !0,
-					composed: !0
-				})), this.loop || this.typewriterContainer.style.setProperty("--ti-cursor-display", "none");
+		super(...e), this.state = null, this.soundEngine = null;
+	}
+	render(e, t = {}) {
+		return l;
+	}
+	update(e, [t, n = {}]) {
+		let r = e.element;
+		if (!this.state || JSON.stringify(this.state.phrases) === JSON.stringify(t) && JSON.stringify(this.state.options) === JSON.stringify(n) || this.cleanup(), !this.state) {
+			let e = {
+				typeSpeed: 50,
+				deleteSpeed: 30,
+				pauseDuration: 1500,
+				loop: !0,
+				selector: ".typed",
+				cursor: !1,
+				finalMessage: "",
+				sound: !0,
+				volume: .08
+			};
+			if (this.state = {
+				phrases: t,
+				options: {
+					...e,
+					...n
+				},
+				element: r
+			}, this.state.options.sound && (this.soundEngine = new f(this.state.options.volume)), this.state.targetElement = r.querySelector(this.state.options.selector) ?? void 0, !this.state.targetElement) return l;
+			if (this.state.options.cursor) {
+				this.state.targetElement.style.position = "relative", this.state.targetElement.style.display = "inline-block";
+				let e = document.createElement("span");
+				if (e.className = "typewriter-cursor", e.textContent = "|", e.style.cssText = "\n					display: inline-block;\n					margin-left: 2px;\n					animation: typewriter-blink 1s step-end infinite;\n				", this.state.targetElement.appendChild(e), !document.getElementById("typewriter-styles")) {
+					let e = document.createElement("style");
+					e.id = "typewriter-styles", e.textContent = "\n						@keyframes typewriter-blink {\n							0%, 50% { opacity: 1; }\n							51%, 100% { opacity: 0; }\n						}\n					", document.head.appendChild(e);
+				}
 			}
-		}, t = await (p ||= import("./index.es-CLyb_o3Y.js").then((e) => e.default));
-		this.isConnected && (this.typeItInstance = new t(this.typewriterContainer, e), this._getSlottedNodes.forEach((e) => {
-			if (e.nodeType === Node.TEXT_NODE) {
-				let t = e.textContent || "";
-				t.trim() && this.typeItInstance?.type(t);
-			} else e instanceof HTMLElement && this._processCustomElement(e);
-		}), a(this.shadowRoot?.host).subscribe(() => {
-			this.typeItInstance?.go();
-		}));
-	}
-	generateSessionKey() {
-		let e = this._getSlottedElements.map((e) => e.outerHTML).join("");
-		return this.once ? i(e) : "";
-	}
-	_destroyTypeIt() {
-		if (this.typeItInstance) {
-			try {
-				this.typeItInstance.destroy();
-			} catch {}
-			this.typeItInstance = null;
-		}
-	}
-	_processCustomElement(e) {
-		let t = e.getAttribute("action"), n = e.getAttribute("value"), r = e.getAttribute("cycle");
-		if (r) {
-			let t = r.split("|").map((e) => e.trim());
-			this._processCycle(t, e);
-			return;
-		}
-		switch (t) {
-			case "pause":
-				this.typeItInstance?.pause(parseInt(n || "0", 10));
-				break;
-			case "delete":
-				this.typeItInstance?.delete(parseInt(n || "0", 10));
-				break;
-			default: e.tagName === "P" && this.typeItInstance?.break(), this.typeItInstance?.type(e.textContent || "");
-		}
-	}
-	_processCycle(e, t) {
-		if (e.length === 0) return;
-		let n = t.getAttribute("pause"), r = n ? parseInt(n, 10) : this.cyclePause;
-		e.forEach((t, n) => {
-			this.typeItInstance?.type(t), (n < e.length - 1 || this.loop) && this.typeItInstance?.pause(r), (n < e.length - 1 || this.loop) && this.typeItInstance?.delete(t.length);
-		});
-	}
-	render() {
-		return f`<div id="typewriter" aria-live="polite"></div>
-
-			<div class="typewriter">
-				<slot
-					hidden
-					@slotchange=${() => {
-			this._startTyping();
-		}}
-				></slot>
-			</div> `;
-	}
-};
-t([s({ type: Number })], m.prototype, "speed", void 0), t([e({
-	context: r,
-	subscribe: !0
-}), s({ type: Number })], m.prototype, "delay", void 0), t([s({ type: Boolean })], m.prototype, "autoStart", void 0), t([s({ type: String })], m.prototype, "cursorChar", void 0), t([s({ type: Number })], m.prototype, "deleteSpeed", void 0), t([s({ type: Boolean })], m.prototype, "once", void 0), t([s({ type: Boolean })], m.prototype, "loop", void 0), t([s({ type: Number })], m.prototype, "cyclePause", void 0), t([c("#typewriter")], m.prototype, "typewriterContainer", void 0), t([u({ flatten: !0 })], m.prototype, "_getSlottedNodes", void 0), t([l({ flatten: !0 })], m.prototype, "_getSlottedElements", void 0), m = t([o("schmancy-typewriter")], m);
-export { m as TypewriterElement };
+			this.startTyping();
+		}
+		return l;
+	}
+	startTyping() {
+		if (!this.state || !this.state.targetElement) return;
+		let { phrases: l, options: u, targetElement: d } = this.state, f = (o, l = !0) => t(n(() => t(...o.split("").map((e) => i(e).pipe(a(u.typeSpeed), c((e) => {
+			let t = this.getTextNode(d);
+			t && (t.textContent += e), this.soundEngine && this.soundEngine.playKeyPress();
+		}))))), i(null).pipe(a(u.pauseDuration)), l ? n(() => {
+			let e = o.length;
+			return r(u.deleteSpeed).pipe(s(e), c(() => {
+				let e = this.getTextNode(d);
+				e && e.textContent && (e.textContent = e.textContent.slice(0, -1)), this.soundEngine && this.soundEngine.playDelete();
+			}));
+		}) : e, l ? i(null).pipe(a(200)) : e), p = t(...l.map((e) => f(e))), m = u.finalMessage ? t(p, f(u.finalMessage, !1)) : p;
+		this.state.subscription = (u.loop ? p.pipe(o()) : m).subscribe({ error: (e) => {} });
+	}
+	getTextNode(e) {
+		for (let t of Array.from(e.childNodes)) if (t.nodeType === Node.TEXT_NODE) return t;
+		let t = document.createTextNode("");
+		return e.insertBefore(t, e.firstChild), t;
+	}
+	cleanup() {
+		this.state &&= (this.state.subscription && this.state.subscription.unsubscribe(), this.state.targetElement && this.state.targetElement.querySelector(".typewriter-cursor")?.remove(), this.soundEngine &&= (this.soundEngine.cleanup(), null), null);
+	}
+	disconnected() {
+		this.cleanup();
+	}
+	reconnected() {
+		this.state && !this.state.subscription && this.startTyping();
+	}
+});
+export { p as typewriter };

package/dist/typewriter.js.map

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

package/dist/typography.cjs

@@ -1,4 +1,4 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`./chunk-CncqDLb2.cjs`);const e=require(`./tailwind.mixin-DRI1oTYQ.cjs`),t=require(`./decorate-F9CuyeHg.cjs`);let n=require(`rxjs`),r=require(`rxjs/operators`),i=require(`lit/decorators.js`),a=require(`lit`),o=require(`lit/directives/ref.js`),s=require(`lit/static-html.js`);var c={display:{type:`display`,token:`lg`},"display-lg":{type:`display`,token:`lg`},"display-md":{type:`display`,token:`md`},"display-sm":{type:`display`,token:`sm`},"heading-lg":{type:`headline`,token:`lg`},"heading-md":{type:`headline`,token:`md`},"heading-sm":{type:`headline`,token:`sm`},"title-lg":{type:`title`,token:`lg`},"title-md":{type:`title`,token:`md`},"title-sm":{type:`title`,token:`sm`},"body-lg":{type:`body`,token:`lg`},"body-md":{type:`body`,token:`md`},"body-sm":{type:`body`,token:`sm`},"label-lg":{type:`label`,token:`lg`},"label-md":{type:`label`,token:`md`},"label-sm":{type:`label`,token:`sm`},caption:{type:`label`,token:`sm`}},l={h1:s.literal`h1`,h2:s.literal`h2`,h3:s.literal`h3`,h4:s.literal`h4`,h5:s.literal`h5`,h6:s.literal`h6`,p:s.literal`p`,span:s.literal`span`,div:s.literal`div`},u=class extends e.t(a.css`
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`./chunk-CncqDLb2.cjs`);const e=require(`./mixins-De3xfjrm.cjs`),t=require(`./decorate-DpFmy0nm.cjs`);let n=require(`rxjs`),r=require(`rxjs/operators`),i=require(`lit/decorators.js`),a=require(`lit`),o=require(`lit/directives/ref.js`);var s=class extends e.s{constructor(...e){super(...e),this.type=`body`,this.token=`md`,this.editable=!1,this.value=``,this.placeholder=``,this._editRef=(0,o.createRef)()}static{this.styles=[a.css`
 	:host {
 		display: block;
 		font-family: inherit;
@@ -274,9 +274,9 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`./ch
 		display: block;
 		opacity: 0.35;
 	}
-`){constructor(...e){super(...e),this.type=`body`,this.token=`md`,this.editable=!1,this.value=``,this.placeholder=``,this._editRef=(0,o.createRef)()}static{this.shadowRootOptions={mode:`open`,delegatesFocus:!0}}willUpdate(e){if(super.willUpdate?.(e),e.has(`preset`)&&this.preset&&c[this.preset]){let{type:e,token:t}=c[this.preset];this.type=e,this.token=t}}selectAll(){let e=this._editRef.value;if(!e)return;e.focus();let t=window.getSelection();if(t&&e.textContent){let n=document.createRange();n.selectNodeContents(e),t.removeAllRanges(),t.addRange(n)}}connectedCallback(){super.connectedCallback(),(0,n.fromEvent)(this,`focusout`).pipe((0,r.filter)(()=>this.editable),(0,r.tap)(()=>{let e=this._editRef.value;if(!e)return;let t=e.innerText.trim();t!==this.value&&this.dispatchEvent(new CustomEvent(`change`,{detail:{value:t},bubbles:!0,composed:!0})),t||(e.textContent=``)}),(0,r.takeUntil)(this.disconnecting)).subscribe(),(0,n.fromEvent)(this,`input`).pipe((0,r.filter)(()=>this.editable),(0,r.tap)(()=>{let e=this._editRef.value;e&&!e.innerText.trim()&&(e.textContent=``)}),(0,r.takeUntil)(this.disconnecting)).subscribe(),(0,n.fromEvent)(this,`keydown`).pipe((0,r.filter)(()=>this.editable),(0,r.filter)(e=>e.key===`Enter`),(0,r.tap)(e=>{e.preventDefault(),(this._editRef.value??this).blur()}),(0,r.takeUntil)(this.disconnecting)).subscribe()}updated(e){if(super.updated(e),e.has(`maxLines`)&&(this.classList.remove(`line-clamp-1`,`line-clamp-2`,`line-clamp-3`,`line-clamp-4`,`line-clamp-5`,`line-clamp-6`),this.maxLines&&this.classList.add(`line-clamp-${this.maxLines}`)),(e.has(`value`)||e.has(`editable`))&&this.editable){let e=this._editRef.value;e&&document.activeElement!==e&&(this.value?e.innerText=this.value:e.textContent=``)}}render(){if(this.editable)return a.html`<div
+`]}static{this.shadowRootOptions={mode:`open`,delegatesFocus:!0}}selectAll(){let e=this._editRef.value;if(!e)return;e.focus();let t=window.getSelection();if(t&&e.textContent){let n=document.createRange();n.selectNodeContents(e),t.removeAllRanges(),t.addRange(n)}}connectedCallback(){super.connectedCallback(),(0,n.fromEvent)(this,`focusout`).pipe((0,r.filter)(()=>this.editable),(0,r.tap)(()=>{let e=this._editRef.value;if(!e)return;let t=e.innerText.trim();t!==this.value&&this.dispatchEvent(new CustomEvent(`change`,{detail:{value:t},bubbles:!0,composed:!0})),t||(e.textContent=``)}),(0,r.takeUntil)(this.disconnecting)).subscribe(),(0,n.fromEvent)(this,`input`).pipe((0,r.filter)(()=>this.editable),(0,r.tap)(()=>{let e=this._editRef.value;e&&!e.innerText.trim()&&(e.textContent=``)}),(0,r.takeUntil)(this.disconnecting)).subscribe(),(0,n.fromEvent)(this,`keydown`).pipe((0,r.filter)(()=>this.editable),(0,r.filter)(e=>e.key===`Enter`),(0,r.tap)(e=>{e.preventDefault(),(this._editRef.value??this).blur()}),(0,r.takeUntil)(this.disconnecting)).subscribe()}updated(e){if(super.updated(e),e.has(`maxLines`)&&(this.classList.remove(`line-clamp-1`,`line-clamp-2`,`line-clamp-3`,`line-clamp-4`,`line-clamp-5`,`line-clamp-6`),this.maxLines&&this.classList.add(`line-clamp-${this.maxLines}`)),(e.has(`value`)||e.has(`editable`))&&this.editable){let e=this._editRef.value;e&&document.activeElement!==e&&(this.value?e.innerText=this.value:e.textContent=``)}}render(){return this.editable?a.html`<div
 				${(0,o.ref)(this._editRef)}
 				class="edit"
 				contenteditable="true"
 				data-placeholder=${this.placeholder??``}
-			></div>`;if(this.as&&l[this.as]){let e=l[this.as];return s.html`<${e}><slot></slot></${e}>`}return a.html`<slot></slot>`}};t.t([(0,i.property)({type:String,reflect:!0})],u.prototype,`type`,void 0),t.t([(0,i.property)({type:String,reflect:!0})],u.prototype,`preset`,void 0),t.t([(0,i.property)({type:String,reflect:!0})],u.prototype,`as`,void 0),t.t([(0,i.property)({type:String,reflect:!0})],u.prototype,`token`,void 0),t.t([(0,i.property)({type:String,reflect:!0})],u.prototype,`align`,void 0),t.t([(0,i.property)({type:String,reflect:!0})],u.prototype,`weight`,void 0),t.t([(0,i.property)({type:String,reflect:!0})],u.prototype,`transform`,void 0),t.t([(0,i.property)({type:Number})],u.prototype,`maxLines`,void 0),t.t([(0,i.property)({type:Boolean,reflect:!0})],u.prototype,`editable`,void 0),t.t([(0,i.property)({type:String})],u.prototype,`value`,void 0),t.t([(0,i.property)({type:String})],u.prototype,`placeholder`,void 0),u=t.t([(0,i.customElement)(`schmancy-typography`)],u),Object.defineProperty(exports,`SchmancyTypography`,{enumerable:!0,get:function(){return u}});
+			></div>`:a.html`<slot></slot>`}};t.t([(0,i.property)({type:String,reflect:!0})],s.prototype,`type`,void 0),t.t([(0,i.property)({type:String,reflect:!0})],s.prototype,`token`,void 0),t.t([(0,i.property)({type:String,reflect:!0})],s.prototype,`align`,void 0),t.t([(0,i.property)({type:String,reflect:!0})],s.prototype,`weight`,void 0),t.t([(0,i.property)({type:String,reflect:!0})],s.prototype,`transform`,void 0),t.t([(0,i.property)({type:Number})],s.prototype,`maxLines`,void 0),t.t([(0,i.property)({type:Boolean,reflect:!0})],s.prototype,`editable`,void 0),t.t([(0,i.property)({type:String})],s.prototype,`value`,void 0),t.t([(0,i.property)({type:String})],s.prototype,`placeholder`,void 0),s=t.t([(0,i.customElement)(`schmancy-typography`)],s),Object.defineProperty(exports,`SchmancyTypography`,{enumerable:!0,get:function(){return s}});

package/dist/typography.cjs.map

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