@mhmo91/schmancy 0.10.26 → 0.10.27

package/dist/typography-BJMm6b0b.js.map

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

package/dist/typography-Bc4MmSal.cjs

@@ -0,0 +1,282 @@
+require(`./chunk-CncqDLb2.cjs`);const e=require(`./mixins-BF3Vj8_c.cjs`),t=require(`./active-host-jH3iloCR.cjs`);let n=require(`rxjs`),r=require(`rxjs/operators`),i=require(`lit/decorators.js`),a=require(`lit`),o=require(`lit/directives/ref.js`);var s=class extends e.c{constructor(...e){super(...e),this.type=`body`,this.token=`md`,this.editable=!1,this.value=``,this.placeholder=``,this._editRef=(0,o.createRef)()}static{this.styles=[a.css`
+	:host {
+		display: block;
+		font-family: inherit;
+		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,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>`:a.html`<slot></slot>`}};t.a([(0,i.property)({type:String,reflect:!0})],s.prototype,`type`,void 0),t.a([(0,i.property)({type:String,reflect:!0})],s.prototype,`token`,void 0),t.a([(0,i.property)({type:String,reflect:!0})],s.prototype,`align`,void 0),t.a([(0,i.property)({type:String,reflect:!0})],s.prototype,`weight`,void 0),t.a([(0,i.property)({type:String,reflect:!0})],s.prototype,`transform`,void 0),t.a([(0,i.property)({type:Number})],s.prototype,`maxLines`,void 0),t.a([(0,i.property)({type:Boolean,reflect:!0})],s.prototype,`editable`,void 0),t.a([(0,i.property)({type:String})],s.prototype,`value`,void 0),t.a([(0,i.property)({type:String})],s.prototype,`placeholder`,void 0),s=t.a([(0,i.customElement)(`schmancy-typography`)],s),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return s}});

package/dist/typography-Bc4MmSal.cjs.map

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

package/dist/typography.cjs

@@ -1,282 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`./chunk-CncqDLb2.cjs`);const e=require(`./mixins-DSy-enUd.cjs`),t=require(`./active-host-jH3iloCR.cjs`);let n=require(`rxjs`),r=require(`rxjs/operators`),i=require(`lit/decorators.js`),a=require(`lit`),o=require(`lit/directives/ref.js`);var s=class extends e.c{constructor(...e){super(...e),this.type=`body`,this.token=`md`,this.editable=!1,this.value=``,this.placeholder=``,this._editRef=(0,o.createRef)()}static{this.styles=[a.css`
-	:host {
-		display: block;
-		font-family: inherit;
-		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,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>`:a.html`<slot></slot>`}};t.a([(0,i.property)({type:String,reflect:!0})],s.prototype,`type`,void 0),t.a([(0,i.property)({type:String,reflect:!0})],s.prototype,`token`,void 0),t.a([(0,i.property)({type:String,reflect:!0})],s.prototype,`align`,void 0),t.a([(0,i.property)({type:String,reflect:!0})],s.prototype,`weight`,void 0),t.a([(0,i.property)({type:String,reflect:!0})],s.prototype,`transform`,void 0),t.a([(0,i.property)({type:Number})],s.prototype,`maxLines`,void 0),t.a([(0,i.property)({type:Boolean,reflect:!0})],s.prototype,`editable`,void 0),t.a([(0,i.property)({type:String})],s.prototype,`value`,void 0),t.a([(0,i.property)({type:String})],s.prototype,`placeholder`,void 0),s=t.a([(0,i.customElement)(`schmancy-typography`)],s),Object.defineProperty(exports,`SchmancyTypography`,{enumerable:!0,get:function(){return s}});
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./typography-Bc4MmSal.cjs`);Object.defineProperty(exports,`SchmancyTypography`,{enumerable:!0,get:function(){return e.t}});