@mhmo91/schmancy 0.10.41 → 0.10.43

package/dist/typography-ByF2k5yW.js

@@ -0,0 +1,358 @@
+import { t as e, u as t } from "./SchmancyElement-Ob9yGkiG.js";
+import "./mixins-q4KAL8Xr.js";
+import { fromEvent as n } from "rxjs";
+import { filter as r, takeUntil as i, tap as a } from "rxjs/operators";
+import { customElement as o, property as s } from "lit/decorators.js";
+import { css as c, html as l } from "lit";
+import { createRef as u, ref as d } from "lit/directives/ref.js";
+var f = class extends e {
+	constructor(...e) {
+		super(...e), this.type = "body", this.token = "md", this.editable = !1, this.value = "", this.placeholder = "", this.editRef = u();
+	}
+	static {
+		this.styles = [c`
+			:host {
+				display: block;
+				font-family: inherit;
+				hyphens: none;
+			}
+
+			/* Text alignment */
+			:host([align='center']) {
+				text-align: center;
+			}
+
+			:host([align='left']) {
+				text-align: start;
+			}
+
+			:host([align='right']) {
+				text-align: right;
+			}
+
+			:host([align='justify']) {
+				text-align: justify;
+			}
+
+			/* Font weight */
+			:host([weight='bold']) {
+				font-weight: 700;
+			}
+
+			:host([weight='medium']) {
+				font-weight: 500;
+			}
+
+			:host([weight='normal']) {
+				font-weight: 400;
+			}
+
+			/* Text transform */
+			:host([transform='uppercase']) {
+				text-transform: uppercase;
+			}
+
+			:host([transform='lowercase']) {
+				text-transform: lowercase;
+			}
+
+			:host([transform='capitalize']) {
+				text-transform: capitalize;
+			}
+
+			:host([transform='normal']) {
+				text-transform: none;
+			}
+
+			/* Type-based weight defaults (when using Tailwind classes without token) */
+			:host([type='display']),
+			:host([type='headline']),
+			:host([type='body']) {
+				font-weight: 400;
+			}
+
+			:host([type='label']),
+			:host([type='subtitle']),
+			:host([type='title']) {
+				font-weight: 500;
+			}
+
+			/* Display typography variants - Material Design 3 + Extended */
+			:host([type='display'][token='xl']) {
+				font-size: 72px;
+				line-height: 80px;
+				font-weight: 400;
+			}
+
+			:host([type='display'][token='lg']) {
+				font-size: 57px;
+				line-height: 64px;
+				font-weight: 400;
+			}
+
+			:host([type='display'][token='md']) {
+				font-size: 45px;
+				line-height: 52px;
+				font-weight: 400;
+			}
+
+			:host([type='display'][token='sm']) {
+				font-size: 36px;
+				line-height: 44px;
+				font-weight: 400;
+			}
+
+			:host([type='display'][token='xs']) {
+				font-size: 28px;
+				line-height: 36px;
+				font-weight: 400;
+			}
+
+			/* Headline typography variants - Material Design 3 + Extended */
+			:host([type='headline'][token='xl']) {
+				font-size: 36px;
+				line-height: 44px;
+				font-weight: 400;
+			}
+
+			:host([type='headline'][token='lg']) {
+				font-size: 32px;
+				line-height: 40px;
+				font-weight: 400;
+			}
+
+			:host([type='headline'][token='md']) {
+				font-size: 28px;
+				line-height: 36px;
+				font-weight: 400;
+			}
+
+			:host([type='headline'][token='sm']) {
+				font-size: 24px;
+				line-height: 32px;
+				font-weight: 400;
+			}
+
+			:host([type='headline'][token='xs']) {
+				font-size: 20px;
+				line-height: 28px;
+				font-weight: 400;
+			}
+
+			/* Title typography variants - Material Design 3 + Extended */
+			:host([type='title'][token='xl']) {
+				font-size: 24px;
+				line-height: 32px;
+				font-weight: 400;
+			}
+
+			:host([type='title'][token='lg']) {
+				font-size: 22px;
+				line-height: 28px;
+				font-weight: 400;
+			}
+
+			:host([type='title'][token='md']) {
+				font-size: 16px;
+				line-height: 24px;
+				font-weight: 500;
+			}
+
+			:host([type='title'][token='sm']) {
+				font-size: 14px;
+				line-height: 20px;
+				font-weight: 500;
+			}
+
+			:host([type='title'][token='xs']) {
+				font-size: 12px;
+				line-height: 16px;
+				font-weight: 500;
+			}
+
+			/* Subtitle typography variants - Extended from Material Design 3 */
+			:host([type='subtitle'][token='xl']) {
+				font-size: 20px;
+				line-height: 28px;
+				font-weight: 500;
+			}
+
+			:host([type='subtitle'][token='lg']) {
+				font-size: 18px;
+				line-height: 24px;
+				font-weight: 500;
+			}
+
+			:host([type='subtitle'][token='md']) {
+				font-size: 16px;
+				line-height: 24px;
+				font-weight: 500;
+			}
+
+			:host([type='subtitle'][token='sm']) {
+				font-size: 14px;
+				line-height: 20px;
+				font-weight: 500;
+			}
+
+			:host([type='subtitle'][token='xs']) {
+				font-size: 12px;
+				line-height: 16px;
+				font-weight: 500;
+			}
+
+			/* Body typography variants - Material Design 3 + Extended */
+			:host([type='body'][token='xl']) {
+				font-size: 18px;
+				line-height: 28px;
+				font-weight: 400;
+			}
+
+			:host([type='body'][token='lg']) {
+				font-size: 16px;
+				line-height: 24px;
+				font-weight: 400;
+			}
+
+			:host([type='body'][token='md']) {
+				font-size: 14px;
+				line-height: 20px;
+				font-weight: 400;
+			}
+
+			:host([type='body'][token='sm']) {
+				font-size: 12px;
+				line-height: 16px;
+				font-weight: 400;
+			}
+
+			:host([type='body'][token='xs']) {
+				font-size: 10px;
+				line-height: 14px;
+				font-weight: 400;
+			}
+
+			/* Label typography variants - Material Design 3 + Extended */
+			:host([type='label'][token='xl']) {
+				font-size: 16px;
+				line-height: 22px;
+				font-weight: 500;
+			}
+
+			:host([type='label'][token='lg']) {
+				font-size: 14px;
+				line-height: 20px;
+				font-weight: 500;
+			}
+
+			:host([type='label'][token='md']) {
+				font-size: 12px;
+				line-height: 16px;
+				font-weight: 500;
+			}
+
+			:host([type='label'][token='sm']) {
+				font-size: 11px;
+				line-height: 16px;
+				font-weight: 500;
+			}
+
+			:host([type='label'][token='xs']) {
+				font-size: 10px;
+				line-height: 14px;
+				font-weight: 500;
+			}
+
+			/* Note: Custom letter-spacing, font-size, and line-height should be applied via inline styles or Tailwind classes */
+
+			:host([editable]) {
+				cursor: text;
+				border-radius: 4px;
+				transition: background 150ms;
+				min-height: 1em;
+			}
+			/* Editable div lives in shadow DOM so light DOM (Lit markers) is untouched */
+			.edit {
+				outline: none;
+				min-height: 1em;
+				font: inherit;
+				color: inherit;
+				letter-spacing: inherit;
+				line-height: inherit;
+			}
+			.edit:empty::before {
+				content: attr(data-placeholder);
+				pointer-events: none;
+				display: block;
+				opacity: 0.35;
+			}
+		`];
+	}
+	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(), n(this, "focusout").pipe(r(() => this.editable), a(() => {
+			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 = "");
+		}), i(this.disconnecting)).subscribe(), n(this, "input").pipe(r(() => this.editable), a(() => {
+			let e = this.editRef.value;
+			e && !e.innerText.trim() && (e.textContent = "");
+		}), i(this.disconnecting)).subscribe(), n(this, "keydown").pipe(r(() => this.editable), r((e) => e.key === "Enter"), a((e) => {
+			e.preventDefault(), (this.editRef.value ?? this).blur();
+		}), i(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 ? l`<div
+				${d(this.editRef)}
+				class="edit"
+				contenteditable="true"
+				data-placeholder=${this.placeholder ?? ""}
+			></div>` : l`<slot></slot>`;
+	}
+};
+t([s({
+	type: String,
+	reflect: !0
+})], f.prototype, "type", void 0), t([s({
+	type: String,
+	reflect: !0
+})], f.prototype, "token", void 0), t([s({
+	type: String,
+	reflect: !0
+})], f.prototype, "align", void 0), t([s({
+	type: String,
+	reflect: !0
+})], f.prototype, "weight", void 0), t([s({
+	type: String,
+	reflect: !0
+})], f.prototype, "transform", void 0), t([s({ type: Number })], f.prototype, "maxLines", void 0), t([s({
+	type: Boolean,
+	reflect: !0
+})], f.prototype, "editable", void 0), t([s({ type: String })], f.prototype, "value", void 0), t([s({ type: String })], f.prototype, "placeholder", void 0), f = t([o("schmancy-typography")], f);
+export { f as t };

package/dist/typography-ByF2k5yW.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"typography-ByF2k5yW.js","names":[],"sources":["../src/typography/typography.ts"],"sourcesContent":["import { SchmancyElement } from '@mixins/index'\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { createRef, ref } from 'lit/directives/ref.js'\nimport { fromEvent } from 'rxjs'\nimport { filter, tap, takeUntil } from 'rxjs/operators'\n\n// Material Design 3 typography - https://m3.material.io/styles/typography/type-scale-tokens\n\n/**\n * @element schmancy-typography\n * @slot - The text for the typography.\n */\n@customElement('schmancy-typography')\nexport class SchmancyTypography extends SchmancyElement {\n\tstatic styles = [\n\t\tcss`\n\t\t\t:host {\n\t\t\t\tdisplay: block;\n\t\t\t\tfont-family: inherit;\n\t\t\t\thyphens: none;\n\t\t\t}\n\n\t\t\t/* Text alignment */\n\t\t\t:host([align='center']) {\n\t\t\t\ttext-align: center;\n\t\t\t}\n\n\t\t\t:host([align='left']) {\n\t\t\t\ttext-align: start;\n\t\t\t}\n\n\t\t\t:host([align='right']) {\n\t\t\t\ttext-align: right;\n\t\t\t}\n\n\t\t\t:host([align='justify']) {\n\t\t\t\ttext-align: justify;\n\t\t\t}\n\n\t\t\t/* Font weight */\n\t\t\t:host([weight='bold']) {\n\t\t\t\tfont-weight: 700;\n\t\t\t}\n\n\t\t\t:host([weight='medium']) {\n\t\t\t\tfont-weight: 500;\n\t\t\t}\n\n\t\t\t:host([weight='normal']) {\n\t\t\t\tfont-weight: 400;\n\t\t\t}\n\n\t\t\t/* Text transform */\n\t\t\t:host([transform='uppercase']) {\n\t\t\t\ttext-transform: uppercase;\n\t\t\t}\n\n\t\t\t:host([transform='lowercase']) {\n\t\t\t\ttext-transform: lowercase;\n\t\t\t}\n\n\t\t\t:host([transform='capitalize']) {\n\t\t\t\ttext-transform: capitalize;\n\t\t\t}\n\n\t\t\t:host([transform='normal']) {\n\t\t\t\ttext-transform: none;\n\t\t\t}\n\n\t\t\t/* Type-based weight defaults (when using Tailwind classes without token) */\n\t\t\t:host([type='display']),\n\t\t\t:host([type='headline']),\n\t\t\t:host([type='body']) {\n\t\t\t\tfont-weight: 400;\n\t\t\t}\n\n\t\t\t:host([type='label']),\n\t\t\t:host([type='subtitle']),\n\t\t\t:host([type='title']) {\n\t\t\t\tfont-weight: 500;\n\t\t\t}\n\n\t\t\t/* Display typography variants - Material Design 3 + Extended */\n\t\t\t:host([type='display'][token='xl']) {\n\t\t\t\tfont-size: 72px;\n\t\t\t\tline-height: 80px;\n\t\t\t\tfont-weight: 400;\n\t\t\t}\n\n\t\t\t:host([type='display'][token='lg']) {\n\t\t\t\tfont-size: 57px;\n\t\t\t\tline-height: 64px;\n\t\t\t\tfont-weight: 400;\n\t\t\t}\n\n\t\t\t:host([type='display'][token='md']) {\n\t\t\t\tfont-size: 45px;\n\t\t\t\tline-height: 52px;\n\t\t\t\tfont-weight: 400;\n\t\t\t}\n\n\t\t\t:host([type='display'][token='sm']) {\n\t\t\t\tfont-size: 36px;\n\t\t\t\tline-height: 44px;\n\t\t\t\tfont-weight: 400;\n\t\t\t}\n\n\t\t\t:host([type='display'][token='xs']) {\n\t\t\t\tfont-size: 28px;\n\t\t\t\tline-height: 36px;\n\t\t\t\tfont-weight: 400;\n\t\t\t}\n\n\t\t\t/* Headline typography variants - Material Design 3 + Extended */\n\t\t\t:host([type='headline'][token='xl']) {\n\t\t\t\tfont-size: 36px;\n\t\t\t\tline-height: 44px;\n\t\t\t\tfont-weight: 400;\n\t\t\t}\n\n\t\t\t:host([type='headline'][token='lg']) {\n\t\t\t\tfont-size: 32px;\n\t\t\t\tline-height: 40px;\n\t\t\t\tfont-weight: 400;\n\t\t\t}\n\n\t\t\t:host([type='headline'][token='md']) {\n\t\t\t\tfont-size: 28px;\n\t\t\t\tline-height: 36px;\n\t\t\t\tfont-weight: 400;\n\t\t\t}\n\n\t\t\t:host([type='headline'][token='sm']) {\n\t\t\t\tfont-size: 24px;\n\t\t\t\tline-height: 32px;\n\t\t\t\tfont-weight: 400;\n\t\t\t}\n\n\t\t\t:host([type='headline'][token='xs']) {\n\t\t\t\tfont-size: 20px;\n\t\t\t\tline-height: 28px;\n\t\t\t\tfont-weight: 400;\n\t\t\t}\n\n\t\t\t/* Title typography variants - Material Design 3 + Extended */\n\t\t\t:host([type='title'][token='xl']) {\n\t\t\t\tfont-size: 24px;\n\t\t\t\tline-height: 32px;\n\t\t\t\tfont-weight: 400;\n\t\t\t}\n\n\t\t\t:host([type='title'][token='lg']) {\n\t\t\t\tfont-size: 22px;\n\t\t\t\tline-height: 28px;\n\t\t\t\tfont-weight: 400;\n\t\t\t}\n\n\t\t\t:host([type='title'][token='md']) {\n\t\t\t\tfont-size: 16px;\n\t\t\t\tline-height: 24px;\n\t\t\t\tfont-weight: 500;\n\t\t\t}\n\n\t\t\t:host([type='title'][token='sm']) {\n\t\t\t\tfont-size: 14px;\n\t\t\t\tline-height: 20px;\n\t\t\t\tfont-weight: 500;\n\t\t\t}\n\n\t\t\t:host([type='title'][token='xs']) {\n\t\t\t\tfont-size: 12px;\n\t\t\t\tline-height: 16px;\n\t\t\t\tfont-weight: 500;\n\t\t\t}\n\n\t\t\t/* Subtitle typography variants - Extended from Material Design 3 */\n\t\t\t:host([type='subtitle'][token='xl']) {\n\t\t\t\tfont-size: 20px;\n\t\t\t\tline-height: 28px;\n\t\t\t\tfont-weight: 500;\n\t\t\t}\n\n\t\t\t:host([type='subtitle'][token='lg']) {\n\t\t\t\tfont-size: 18px;\n\t\t\t\tline-height: 24px;\n\t\t\t\tfont-weight: 500;\n\t\t\t}\n\n\t\t\t:host([type='subtitle'][token='md']) {\n\t\t\t\tfont-size: 16px;\n\t\t\t\tline-height: 24px;\n\t\t\t\tfont-weight: 500;\n\t\t\t}\n\n\t\t\t:host([type='subtitle'][token='sm']) {\n\t\t\t\tfont-size: 14px;\n\t\t\t\tline-height: 20px;\n\t\t\t\tfont-weight: 500;\n\t\t\t}\n\n\t\t\t:host([type='subtitle'][token='xs']) {\n\t\t\t\tfont-size: 12px;\n\t\t\t\tline-height: 16px;\n\t\t\t\tfont-weight: 500;\n\t\t\t}\n\n\t\t\t/* Body typography variants - Material Design 3 + Extended */\n\t\t\t:host([type='body'][token='xl']) {\n\t\t\t\tfont-size: 18px;\n\t\t\t\tline-height: 28px;\n\t\t\t\tfont-weight: 400;\n\t\t\t}\n\n\t\t\t:host([type='body'][token='lg']) {\n\t\t\t\tfont-size: 16px;\n\t\t\t\tline-height: 24px;\n\t\t\t\tfont-weight: 400;\n\t\t\t}\n\n\t\t\t:host([type='body'][token='md']) {\n\t\t\t\tfont-size: 14px;\n\t\t\t\tline-height: 20px;\n\t\t\t\tfont-weight: 400;\n\t\t\t}\n\n\t\t\t:host([type='body'][token='sm']) {\n\t\t\t\tfont-size: 12px;\n\t\t\t\tline-height: 16px;\n\t\t\t\tfont-weight: 400;\n\t\t\t}\n\n\t\t\t:host([type='body'][token='xs']) {\n\t\t\t\tfont-size: 10px;\n\t\t\t\tline-height: 14px;\n\t\t\t\tfont-weight: 400;\n\t\t\t}\n\n\t\t\t/* Label typography variants - Material Design 3 + Extended */\n\t\t\t:host([type='label'][token='xl']) {\n\t\t\t\tfont-size: 16px;\n\t\t\t\tline-height: 22px;\n\t\t\t\tfont-weight: 500;\n\t\t\t}\n\n\t\t\t:host([type='label'][token='lg']) {\n\t\t\t\tfont-size: 14px;\n\t\t\t\tline-height: 20px;\n\t\t\t\tfont-weight: 500;\n\t\t\t}\n\n\t\t\t:host([type='label'][token='md']) {\n\t\t\t\tfont-size: 12px;\n\t\t\t\tline-height: 16px;\n\t\t\t\tfont-weight: 500;\n\t\t\t}\n\n\t\t\t:host([type='label'][token='sm']) {\n\t\t\t\tfont-size: 11px;\n\t\t\t\tline-height: 16px;\n\t\t\t\tfont-weight: 500;\n\t\t\t}\n\n\t\t\t:host([type='label'][token='xs']) {\n\t\t\t\tfont-size: 10px;\n\t\t\t\tline-height: 14px;\n\t\t\t\tfont-weight: 500;\n\t\t\t}\n\n\t\t\t/* Note: Custom letter-spacing, font-size, and line-height should be applied via inline styles or Tailwind classes */\n\n\t\t\t:host([editable]) {\n\t\t\t\tcursor: text;\n\t\t\t\tborder-radius: 4px;\n\t\t\t\ttransition: background 150ms;\n\t\t\t\tmin-height: 1em;\n\t\t\t}\n\t\t\t/* Editable div lives in shadow DOM so light DOM (Lit markers) is untouched */\n\t\t\t.edit {\n\t\t\t\toutline: none;\n\t\t\t\tmin-height: 1em;\n\t\t\t\tfont: inherit;\n\t\t\t\tcolor: inherit;\n\t\t\t\tletter-spacing: inherit;\n\t\t\t\tline-height: inherit;\n\t\t\t}\n\t\t\t.edit:empty::before {\n\t\t\t\tcontent: attr(data-placeholder);\n\t\t\t\tpointer-events: none;\n\t\t\t\tdisplay: block;\n\t\t\t\topacity: 0.35;\n\t\t\t}\n\t\t`,\n\t]\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\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')\n\t\t\t.pipe(\n\t\t\t\tfilter(() => this.editable),\n\t\t\t\ttap(() => {\n\t\t\t\t\tconst el = this.editRef.value\n\t\t\t\t\tif (!el) return\n\t\t\t\t\tconst newValue = el.innerText.trim()\n\t\t\t\t\tif (newValue !== this.value) {\n\t\t\t\t\t\tthis.dispatchEvent(\n\t\t\t\t\t\t\tnew CustomEvent('change', {\n\t\t\t\t\t\t\t\tdetail: { value: newValue },\n\t\t\t\t\t\t\t\tbubbles: true,\n\t\t\t\t\t\t\t\tcomposed: true,\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\t// Ensure truly empty so :empty CSS placeholder works\n\t\t\t\t\tif (!newValue) el.textContent = ''\n\t\t\t\t}),\n\t\t\t\ttakeUntil(this.disconnecting),\n\t\t\t)\n\t\t\t.subscribe()\n\n\t\t// Clean stray <br> / whitespace nodes so :empty CSS matches\n\t\tfromEvent(this, 'input')\n\t\t\t.pipe(\n\t\t\t\tfilter(() => this.editable),\n\t\t\t\ttap(() => {\n\t\t\t\t\tconst el = this.editRef.value\n\t\t\t\t\tif (el && !el.innerText.trim()) el.textContent = ''\n\t\t\t\t}),\n\t\t\t\ttakeUntil(this.disconnecting),\n\t\t\t)\n\t\t\t.subscribe()\n\n\t\tfromEvent<KeyboardEvent>(this, 'keydown')\n\t\t\t.pipe(\n\t\t\t\tfilter(() => this.editable),\n\t\t\t\tfilter(e => e.key === 'Enter'),\n\t\t\t\ttap(e => {\n\t\t\t\t\te.preventDefault()\n\t\t\t\t\t;(this.editRef.value ?? this).blur()\n\t\t\t\t}),\n\t\t\t\ttakeUntil(this.disconnecting),\n\t\t\t)\n\t\t\t.subscribe()\n\t}\n\n\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(\n\t\t\t\t'line-clamp-1',\n\t\t\t\t'line-clamp-2',\n\t\t\t\t'line-clamp-3',\n\t\t\t\t'line-clamp-4',\n\t\t\t\t'line-clamp-5',\n\t\t\t\t'line-clamp-6',\n\t\t\t)\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}\n"],"mappings":"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"}

package/dist/typography-Cfav17it.cjs

@@ -0,0 +1,282 @@
+require(`./chunk-CncqDLb2.cjs`);const e=require(`./SchmancyElement-CeKrBW2j.cjs`);require(`./mixins-Cjn20BQH.cjs`);let t=require(`rxjs`),n=require(`rxjs/operators`),r=require(`lit/decorators.js`),i=require(`lit`),a=require(`lit/directives/ref.js`);var o=class extends e.t{constructor(...e){super(...e),this.type=`body`,this.token=`md`,this.editable=!1,this.value=``,this.placeholder=``,this.editRef=(0,a.createRef)()}static{this.styles=[i.css`
+			:host {
+				display: block;
+				font-family: inherit;
+				hyphens: none;
+			}
+
+			/* Text alignment */
+			:host([align='center']) {
+				text-align: center;
+			}
+
+			:host([align='left']) {
+				text-align: start;
+			}
+
+			:host([align='right']) {
+				text-align: right;
+			}
+
+			:host([align='justify']) {
+				text-align: justify;
+			}
+
+			/* Font weight */
+			:host([weight='bold']) {
+				font-weight: 700;
+			}
+
+			:host([weight='medium']) {
+				font-weight: 500;
+			}
+
+			:host([weight='normal']) {
+				font-weight: 400;
+			}
+
+			/* Text transform */
+			:host([transform='uppercase']) {
+				text-transform: uppercase;
+			}
+
+			:host([transform='lowercase']) {
+				text-transform: lowercase;
+			}
+
+			:host([transform='capitalize']) {
+				text-transform: capitalize;
+			}
+
+			:host([transform='normal']) {
+				text-transform: none;
+			}
+
+			/* Type-based weight defaults (when using Tailwind classes without token) */
+			:host([type='display']),
+			:host([type='headline']),
+			:host([type='body']) {
+				font-weight: 400;
+			}
+
+			:host([type='label']),
+			:host([type='subtitle']),
+			:host([type='title']) {
+				font-weight: 500;
+			}
+
+			/* Display typography variants - Material Design 3 + Extended */
+			:host([type='display'][token='xl']) {
+				font-size: 72px;
+				line-height: 80px;
+				font-weight: 400;
+			}
+
+			:host([type='display'][token='lg']) {
+				font-size: 57px;
+				line-height: 64px;
+				font-weight: 400;
+			}
+
+			:host([type='display'][token='md']) {
+				font-size: 45px;
+				line-height: 52px;
+				font-weight: 400;
+			}
+
+			:host([type='display'][token='sm']) {
+				font-size: 36px;
+				line-height: 44px;
+				font-weight: 400;
+			}
+
+			:host([type='display'][token='xs']) {
+				font-size: 28px;
+				line-height: 36px;
+				font-weight: 400;
+			}
+
+			/* Headline typography variants - Material Design 3 + Extended */
+			:host([type='headline'][token='xl']) {
+				font-size: 36px;
+				line-height: 44px;
+				font-weight: 400;
+			}
+
+			:host([type='headline'][token='lg']) {
+				font-size: 32px;
+				line-height: 40px;
+				font-weight: 400;
+			}
+
+			:host([type='headline'][token='md']) {
+				font-size: 28px;
+				line-height: 36px;
+				font-weight: 400;
+			}
+
+			:host([type='headline'][token='sm']) {
+				font-size: 24px;
+				line-height: 32px;
+				font-weight: 400;
+			}
+
+			:host([type='headline'][token='xs']) {
+				font-size: 20px;
+				line-height: 28px;
+				font-weight: 400;
+			}
+
+			/* Title typography variants - Material Design 3 + Extended */
+			:host([type='title'][token='xl']) {
+				font-size: 24px;
+				line-height: 32px;
+				font-weight: 400;
+			}
+
+			:host([type='title'][token='lg']) {
+				font-size: 22px;
+				line-height: 28px;
+				font-weight: 400;
+			}
+
+			:host([type='title'][token='md']) {
+				font-size: 16px;
+				line-height: 24px;
+				font-weight: 500;
+			}
+
+			:host([type='title'][token='sm']) {
+				font-size: 14px;
+				line-height: 20px;
+				font-weight: 500;
+			}
+
+			:host([type='title'][token='xs']) {
+				font-size: 12px;
+				line-height: 16px;
+				font-weight: 500;
+			}
+
+			/* Subtitle typography variants - Extended from Material Design 3 */
+			:host([type='subtitle'][token='xl']) {
+				font-size: 20px;
+				line-height: 28px;
+				font-weight: 500;
+			}
+
+			:host([type='subtitle'][token='lg']) {
+				font-size: 18px;
+				line-height: 24px;
+				font-weight: 500;
+			}
+
+			:host([type='subtitle'][token='md']) {
+				font-size: 16px;
+				line-height: 24px;
+				font-weight: 500;
+			}
+
+			:host([type='subtitle'][token='sm']) {
+				font-size: 14px;
+				line-height: 20px;
+				font-weight: 500;
+			}
+
+			:host([type='subtitle'][token='xs']) {
+				font-size: 12px;
+				line-height: 16px;
+				font-weight: 500;
+			}
+
+			/* Body typography variants - Material Design 3 + Extended */
+			:host([type='body'][token='xl']) {
+				font-size: 18px;
+				line-height: 28px;
+				font-weight: 400;
+			}
+
+			:host([type='body'][token='lg']) {
+				font-size: 16px;
+				line-height: 24px;
+				font-weight: 400;
+			}
+
+			:host([type='body'][token='md']) {
+				font-size: 14px;
+				line-height: 20px;
+				font-weight: 400;
+			}
+
+			:host([type='body'][token='sm']) {
+				font-size: 12px;
+				line-height: 16px;
+				font-weight: 400;
+			}
+
+			:host([type='body'][token='xs']) {
+				font-size: 10px;
+				line-height: 14px;
+				font-weight: 400;
+			}
+
+			/* Label typography variants - Material Design 3 + Extended */
+			:host([type='label'][token='xl']) {
+				font-size: 16px;
+				line-height: 22px;
+				font-weight: 500;
+			}
+
+			:host([type='label'][token='lg']) {
+				font-size: 14px;
+				line-height: 20px;
+				font-weight: 500;
+			}
+
+			:host([type='label'][token='md']) {
+				font-size: 12px;
+				line-height: 16px;
+				font-weight: 500;
+			}
+
+			:host([type='label'][token='sm']) {
+				font-size: 11px;
+				line-height: 16px;
+				font-weight: 500;
+			}
+
+			:host([type='label'][token='xs']) {
+				font-size: 10px;
+				line-height: 14px;
+				font-weight: 500;
+			}
+
+			/* Note: Custom letter-spacing, font-size, and line-height should be applied via inline styles or Tailwind classes */
+
+			:host([editable]) {
+				cursor: text;
+				border-radius: 4px;
+				transition: background 150ms;
+				min-height: 1em;
+			}
+			/* Editable div lives in shadow DOM so light DOM (Lit markers) is untouched */
+			.edit {
+				outline: none;
+				min-height: 1em;
+				font: inherit;
+				color: inherit;
+				letter-spacing: inherit;
+				line-height: inherit;
+			}
+			.edit:empty::before {
+				content: attr(data-placeholder);
+				pointer-events: none;
+				display: block;
+				opacity: 0.35;
+			}
+		`]}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,t.fromEvent)(this,`focusout`).pipe((0,n.filter)(()=>this.editable),(0,n.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,n.takeUntil)(this.disconnecting)).subscribe(),(0,t.fromEvent)(this,`input`).pipe((0,n.filter)(()=>this.editable),(0,n.tap)(()=>{let e=this.editRef.value;e&&!e.innerText.trim()&&(e.textContent=``)}),(0,n.takeUntil)(this.disconnecting)).subscribe(),(0,t.fromEvent)(this,`keydown`).pipe((0,n.filter)(()=>this.editable),(0,n.filter)(e=>e.key===`Enter`),(0,n.tap)(e=>{e.preventDefault(),(this.editRef.value??this).blur()}),(0,n.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?i.html`<div
+				${(0,a.ref)(this.editRef)}
+				class="edit"
+				contenteditable="true"
+				data-placeholder=${this.placeholder??``}
+			></div>`:i.html`<slot></slot>`}};e.u([(0,r.property)({type:String,reflect:!0})],o.prototype,`type`,void 0),e.u([(0,r.property)({type:String,reflect:!0})],o.prototype,`token`,void 0),e.u([(0,r.property)({type:String,reflect:!0})],o.prototype,`align`,void 0),e.u([(0,r.property)({type:String,reflect:!0})],o.prototype,`weight`,void 0),e.u([(0,r.property)({type:String,reflect:!0})],o.prototype,`transform`,void 0),e.u([(0,r.property)({type:Number})],o.prototype,`maxLines`,void 0),e.u([(0,r.property)({type:Boolean,reflect:!0})],o.prototype,`editable`,void 0),e.u([(0,r.property)({type:String})],o.prototype,`value`,void 0),e.u([(0,r.property)({type:String})],o.prototype,`placeholder`,void 0),o=e.u([(0,r.customElement)(`schmancy-typography`)],o),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return o}});