@mhmo91/schmancy 0.10.37 → 0.10.38

package/src/form/fields/switch/switch.ts

@@ -94,11 +94,11 @@ export class SchmancySwitch extends SchmancyFormField(css`
 	checked: boolean = false
 
 	/** Snapshot of `checked` at first render — drives the `dirty` override. */
-	private _checkedDefault: boolean = false
+	private checkedDefault: boolean = false
 
 	override firstUpdated(changed: PropertyValues): void {
 		super.firstUpdated(changed)
-		this._checkedDefault = this.checked
+		this.checkedDefault = this.checked
 	}
 
 	/**
@@ -106,7 +106,7 @@ export class SchmancySwitch extends SchmancyFormField(css`
 	 * meaningful state is `checked`, not the FormData string.
 	 */
 	override get dirty(): boolean {
-		return this.checked !== this._checkedDefault
+		return this.checked !== this.checkedDefault
 	}
 
 	override willUpdate(changed: PropertyValues): void {
@@ -142,7 +142,7 @@ export class SchmancySwitch extends SchmancyFormField(css`
 			isValid ? undefined : message,
 		)
 
-		if (this._shouldShowError()) {
+		if (this.shouldShowError()) {
 			this.error = !isValid
 			this.validationMessage = message
 		}
@@ -156,21 +156,21 @@ export class SchmancySwitch extends SchmancyFormField(css`
 	}
 
 	override resetForm(): void {
-		this.checked = this._checkedDefault
+		this.checked = this.checkedDefault
 		super.resetForm()
 	}
 
-	private _toggle = () => {
+	private toggle = () => {
 		if (this.disabled) return
 		this.checked = !this.checked
 		this.markTouched()
 		this.emitChange({ value: this.checked })
 	}
 
-	private _onKeydown = (e: KeyboardEvent) => {
+	private onKeydown = (e: KeyboardEvent) => {
 		if (e.key === ' ' || e.key === 'Enter') {
 			e.preventDefault()
-			this._toggle()
+			this.toggle()
 		}
 	}
 
@@ -183,8 +183,8 @@ export class SchmancySwitch extends SchmancyFormField(css`
 				aria-label=${this.label || nothing}
 				aria-required=${this.required ? 'true' : 'false'}
 				?disabled=${this.disabled}
-				@click=${this._toggle}
-				@keydown=${this._onKeydown}
+				@click=${this.toggle}
+				@keydown=${this.onKeydown}
 			>
 				<span part="track" class="track">
 					<span part="thumb" class="thumb"></span>

package/src/form/fields/textarea/textarea.ts

@@ -33,7 +33,7 @@ export default class SchmancyTextarea extends SchmancyFormField(unsafeCSS(style)
 	// `formResetCallback`, `formDisabledCallback` — all from the mixin.
 	textareaRef = createRef<HTMLTextAreaElement>()
 
-	private readonly _a11yId = `schmancy-textarea-${Math.random().toString(36).slice(2, 10)}`
+	private readonly a11yId = `schmancy-textarea-${Math.random().toString(36).slice(2, 10)}`
 
 	/**
 	 * The placeholder of the control.
@@ -359,7 +359,7 @@ export default class SchmancyTextarea extends SchmancyFormField(unsafeCSS(style)
 			'w-full min-w-0': true,
 			'flex flex-col h-full': this.fillHeight,
 		}
-		const hintId = `${this._a11yId}-hint`
+		const hintId = `${this.a11yId}-hint`
 		return html`
 		<div class="${this.classMap(containerClasses)}">
 			${when(

package/src/form/form-summary.ts

@@ -30,69 +30,69 @@ export class SchmancyFormSummary extends SchmancyElement {
 	 * Render bumper — incremented to force a re-render when the form's state
 	 * changes (the actual content is computed from the DOM in render()).
 	 */
-	@state() private _bump: number = 0
+	@state() private bump: number = 0
 
-	private _form: SchmancyForm | null = null
-	private _formObserver?: MutationObserver
+	private form: SchmancyForm | null = null
+	private formObserver?: MutationObserver
 
 	override connectedCallback(): void {
 		super.connectedCallback()
-		this._form = this.closest('schmancy-form') as SchmancyForm | null
-		if (!this._form) {
+		this.form = this.closest('schmancy-form') as SchmancyForm | null
+		if (!this.form) {
 			console.error('[schmancy-form-summary] must be a descendant of <schmancy-form>')
 			return
 		}
-		const bump = () => { this._bump++ }
-		this._formObserver = new MutationObserver(bump)
+		const bump = () => { this.bump++ }
+		this.formObserver = new MutationObserver(bump)
 		// Form host attribute changes (aria-busy, :state class reflections,
 		// descendant attribute changes for fields' aria-invalid). subtree:true
 		// catches attribute mutations on every descendant including light-DOM
 		// fields and the form's own host.
-		this._formObserver.observe(this._form, {
+		this.formObserver.observe(this.form, {
 			attributes: true,
 			subtree: true,
 		})
 		// Defer live-region observation until the form has rendered its
 		// shadow tree.
 		const attachLiveRegionObserver = async (): Promise<void> => {
-			await this._form?.updateComplete
-			const liveRegion = this._form?.shadowRoot?.querySelector('[role="status"]')
+			await this.form?.updateComplete
+			const liveRegion = this.form?.shadowRoot?.querySelector('[role="status"]')
 			if (liveRegion) {
-				this._formObserver?.observe(liveRegion, {
+				this.formObserver?.observe(liveRegion, {
 					childList: true,
 					characterData: true,
 					subtree: true,
 				})
 			}
 			// Force a render so the initial state is reflected.
-			this._bump++
+			this.bump++
 		}
 		void attachLiveRegionObserver()
 	}
 
 	override disconnectedCallback(): void {
-		this._formObserver?.disconnect()
-		this._formObserver = undefined
+		this.formObserver?.disconnect()
+		this.formObserver = undefined
 		super.disconnectedCallback()
 	}
 
-	private _readFormStatus(): 'idle' | 'submitting' | 'success' | 'error' {
-		if (!this._form) return 'idle'
-		if (this._form.matches(':state(error)')) return 'error'
-		if (this._form.matches(':state(submitting)')) return 'submitting'
-		if (this._form.matches(':state(success)')) return 'success'
+	private readFormStatus(): 'idle' | 'submitting' | 'success' | 'error' {
+		if (!this.form) return 'idle'
+		if (this.form.matches(':state(error)')) return 'error'
+		if (this.form.matches(':state(submitting)')) return 'submitting'
+		if (this.form.matches(':state(success)')) return 'success'
 		return 'idle'
 	}
 
-	private _readFormMessage(): string {
-		const liveRegion = this._form?.shadowRoot?.querySelector('[role="status"]')
+	private readFormMessage(): string {
+		const liveRegion = this.form?.shadowRoot?.querySelector('[role="status"]')
 		return liveRegion?.textContent?.trim() ?? ''
 	}
 
-	private _readInvalidFields(): Array<{ id: string; label: string; message: string }> {
-		if (!this._form) return []
+	private readInvalidFields(): Array<{ id: string; label: string; message: string }> {
+		if (!this.form) return []
 		const result: Array<{ id: string; label: string; message: string }> = []
-		for (const el of Array.from(this._form.querySelectorAll('*'))) {
+		for (const el of Array.from(this.form.querySelectorAll('*'))) {
 			if (!(el instanceof HTMLElement)) continue
 			let isInvalid = false
 			try {
@@ -117,15 +117,15 @@ export class SchmancyFormSummary extends SchmancyElement {
 
 	render() {
 		// Read everything fresh from the DOM each render — no @state cache, no
-		// re-render loops. The MutationObserver bumps `_bump` to trigger this
-		// render; `_bump` itself is never read here.
-		void this._bump
+		// re-render loops. The MutationObserver bumps `bump` to trigger this
+		// render; `bump` itself is never read here.
+		void this.bump
 
-		const status = this._readFormStatus()
+		const status = this.readFormStatus()
 		if (status !== 'error') return nothing
 
-		const formMessage = this._readFormMessage()
-		const invalid = this._readInvalidFields()
+		const formMessage = this.readFormMessage()
+		const invalid = this.readInvalidFields()
 		const count = invalid.length
 		const heading =
 			this.heading ??
@@ -145,7 +145,7 @@ export class SchmancyFormSummary extends SchmancyElement {
 									<li>
 										<a
 											href="#${f.id}"
-											@click=${(e: MouseEvent) => this._jumpToField(e, f.id)}
+											@click=${(e: MouseEvent) => this.jumpToField(e, f.id)}
 										>${f.label}: ${f.message}</a>
 									</li>
 								`,
@@ -157,9 +157,9 @@ export class SchmancyFormSummary extends SchmancyElement {
 		`
 	}
 
-	private _jumpToField(e: MouseEvent, fieldId: string): void {
+	private jumpToField(e: MouseEvent, fieldId: string): void {
 		e.preventDefault()
-		const target = this._form?.querySelector(`#${CSS.escape(fieldId)}`) as HTMLElement | null
+		const target = this.form?.querySelector(`#${CSS.escape(fieldId)}`) as HTMLElement | null
 		target?.focus()
 	}
 }

package/src/form/form.ts

@@ -66,8 +66,8 @@ export default class SchmancyForm<TSchema extends ParseSchema | undefined = unde
 	@property({ type: Boolean })
 	novalidate: boolean = true
 
-	private _fields = new Set<IFormFieldMixin>()
-	private _submitting = false
+	private fields = new Set<IFormFieldMixin>()
+	private submitting = false
 
 	/**
 	 * Local mirror of the submit-state status — drives the inline live region
@@ -75,9 +75,9 @@ export default class SchmancyForm<TSchema extends ParseSchema | undefined = unde
 	 * chain (which has known cross-await fallback semantics) so the AT-facing
 	 * announcement is always correct for this form instance.
 	 */
-	@state() private _liveStatus: 'idle' | 'submitting' | 'success' | 'error' = 'idle'
-	@state() private _liveError: string = ''
-	private _internals: ElementInternals | undefined = (() => {
+	@state() private liveStatus: 'idle' | 'submitting' | 'success' | 'error' = 'idle'
+	@state() private liveError: string = ''
+	private internals: ElementInternals | undefined = (() => {
 		try {
 			return this.attachInternals()
 		} catch {
@@ -97,7 +97,7 @@ export default class SchmancyForm<TSchema extends ParseSchema | undefined = unde
 		// Field registry — composed event from FormFieldMixin.connectedCallback.
 		fromEvent<CustomEvent<IFormFieldMixin>>(this, FIELD_CONNECT_EVENT)
 			.pipe(takeUntil(this.disconnecting))
-			.subscribe(e => this._fields.add(e.detail))
+			.subscribe(e => this.fields.add(e.detail))
 
 		// Submit-trigger interception — slotted descendants live in light DOM
 		// while the inner <form> is in shadow DOM, so native form-association
@@ -108,7 +108,7 @@ export default class SchmancyForm<TSchema extends ParseSchema | undefined = unde
 		// chain that a directly-associated button would have triggered.
 		fromEvent<MouseEvent>(this, 'click')
 			.pipe(takeUntil(this.disconnecting))
-			.subscribe(e => this._maybeRequestSubmit(e))
+			.subscribe(e => this.maybeRequestSubmit(e))
 		fromEvent<KeyboardEvent>(this, 'keydown')
 			.pipe(takeUntil(this.disconnecting))
 			.subscribe(e => {
@@ -117,14 +117,14 @@ export default class SchmancyForm<TSchema extends ParseSchema | undefined = unde
 				const target = e.target as HTMLElement | null
 				if (target?.tagName === 'TEXTAREA') return
 				if (target?.isContentEditable) return
-				this._maybeRequestSubmit(e)
+				this.maybeRequestSubmit(e)
 			})
 	}
 
-	private _maybeRequestSubmit(e: Event): void {
+	private maybeRequestSubmit(e: Event): void {
 		// On click: trigger only when the target is a type=submit button.
 		// On keydown(Enter): always trigger if focus is on a registered field.
-		// type=reset is handled separately in _maybeReset.
+		// type=reset is handled separately in maybeReset.
 		if (e.type === 'click') {
 			const path = e.composedPath()
 			const resetBtn = path.find(
@@ -147,25 +147,25 @@ export default class SchmancyForm<TSchema extends ParseSchema | undefined = unde
 	}
 
 	/** Active fields — drops stale refs from disconnected nodes. */
-	private get _activeFields(): IFormFieldMixin[] {
-		return [...this._fields].filter(f => f.isConnected)
+	private get activeFields(): IFormFieldMixin[] {
+		return [...this.fields].filter(f => f.isConnected)
 	}
 
-	private async _onSubmit(e: SubmitEvent): Promise<void> {
+	private async onSubmit(e: SubmitEvent): Promise<void> {
 		e.preventDefault()
 		e.stopPropagation()
-		if (this._submitting) return
+		if (this.submitting) return
 
 		// If any field has an async validator pending, wait for them all to
 		// settle before deciding validity. This is the hard-block model: the
 		// user clicks submit, the form holds (aria-busy="true"), waits for
 		// validators, then proceeds with the truth they reported.
-		const pendingValidators = this._activeFields.filter(f => f.isValidating)
+		const pendingValidators = this.activeFields.filter(f => f.isValidating)
 		if (pendingValidators.length > 0) {
-			this._broadcastStatus('submitting')
+			this.broadcastStatus('submitting')
 			await new Promise<void>(resolve => {
 				const tick = () => {
-					if (this._activeFields.every(f => !f.isValidating)) resolve()
+					if (this.activeFields.every(f => !f.isValidating)) resolve()
 					else requestAnimationFrame(tick)
 				}
 				tick()
@@ -173,10 +173,10 @@ export default class SchmancyForm<TSchema extends ParseSchema | undefined = unde
 		}
 
 		// Phase 4 — submit forces error display on every field.
-		this._activeFields.forEach(f => f.markSubmitted())
+		this.activeFields.forEach(f => f.markSubmitted())
 
 		// Validate; success path entered ONLY if all valid.
-		const allValid = this._activeFields.every(f => f.checkValidity())
+		const allValid = this.activeFields.every(f => f.checkValidity())
 		const fs = formSubmitState.value
 		if (!allValid) {
 			formSubmitState.set({
@@ -184,26 +184,26 @@ export default class SchmancyForm<TSchema extends ParseSchema | undefined = unde
 				status: 'error',
 				error: { message: 'Validation failed' },
 			})
-			this._broadcastStatus('error', 'Validation failed. Please correct the highlighted fields.')
-			const firstInvalid = this._activeFields.find(f => f.error) as unknown as
+			this.broadcastStatus('error', 'Validation failed. Please correct the highlighted fields.')
+			const firstInvalid = this.activeFields.find(f => f.error) as unknown as
 				| HTMLElement
 				| undefined
 			firstInvalid?.focus()
 			return
 		}
 
-		this._submitting = true
+		this.submitting = true
 		formSubmitState.set({
 			...fs,
 			status: 'submitting',
 			error: null,
 			submitCount: fs.submitCount + 1,
 		})
-		this._broadcastStatus('submitting')
+		this.broadcastStatus('submitting')
 
 		// Build payload from the registered fields' contracted toFormEntries().
 		const formData = new FormData()
-		for (const field of this._activeFields) {
+		for (const field of this.activeFields) {
 			for (const [k, v] of field.toFormEntries()) formData.append(k, v)
 		}
 		const raw = Object.fromEntries(formData)
@@ -228,7 +228,7 @@ export default class SchmancyForm<TSchema extends ParseSchema | undefined = unde
 				status: 'success',
 				error: null,
 			})
-			this._broadcastStatus('success')
+			this.broadcastStatus('success')
 		} catch (err) {
 			const message = err instanceof Error ? err.message : String(err)
 			formSubmitState.set({
@@ -236,24 +236,24 @@ export default class SchmancyForm<TSchema extends ParseSchema | undefined = unde
 				status: 'error',
 				error: { message },
 			})
-			this._broadcastStatus('error', message)
+			this.broadcastStatus('error', message)
 		} finally {
-			this._submitting = false
+			this.submitting = false
 		}
 	}
 
-	private _onReset(e: Event): void {
+	private onReset(e: Event): void {
 		e.stopPropagation()
-		this._activeFields.forEach(f => f.resetForm())
+		this.activeFields.forEach(f => f.resetForm())
 		formSubmitState.set({ status: 'idle', error: null, submitCount: 0 })
-		this._broadcastStatus('idle')
+		this.broadcastStatus('idle')
 		this.dispatchEvent(new CustomEvent('reset'))
 	}
 
-	private _broadcastStatus(status: FormSubmitState['status'], errorMessage?: string): void {
-		this._liveStatus = status
-		this._liveError = errorMessage ?? ''
-		const states = this._internals?.states
+	private broadcastStatus(status: FormSubmitState['status'], errorMessage?: string): void {
+		this.liveStatus = status
+		this.liveError = errorMessage ?? ''
+		const states = this.internals?.states
 		if (states) {
 			for (const s of ['submitting', 'success', 'error', 'idle']) states.delete(s)
 			states.add(status)
@@ -279,7 +279,7 @@ export default class SchmancyForm<TSchema extends ParseSchema | undefined = unde
 	 * error displays by marking it submitted.
 	 */
 	public setFieldError(name: string, message: string): boolean {
-		const field = this._activeFields.find(f => f.name === name)
+		const field = this.activeFields.find(f => f.name === name)
 		if (!field) return false
 		field.setCustomValidity(message)
 		field.markSubmitted()
@@ -296,27 +296,27 @@ export default class SchmancyForm<TSchema extends ParseSchema | undefined = unde
 			status: 'error',
 			error: { message, code } as FormError,
 		})
-		this._broadcastStatus('error', message)
+		this.broadcastStatus('error', message)
 	}
 
 	/**
 	 * Clear the `submitted` flag on every registered field without resetting
 	 * their values. Wizard pattern: stepping back from a later step should not
 	 * leave the earlier step's fields in aggressive "show all errors" mode
-	 * (which `submitted = true` triggers via the `_shouldShowError()` gate).
+	 * (which `submitted = true` triggers via the `shouldShowError()` gate).
 	 *
 	 * Pristine fields with `validateOn: 'dirty'` go quiet again. Fields the
 	 * user actually dirtied keep showing their errors (correct UX — those are
 	 * still genuine mistakes the user can see).
 	 */
 	public clearSubmitted(): void {
-		this._activeFields.forEach(f => f.clearSubmitted())
+		this.activeFields.forEach(f => f.clearSubmitted())
 		formSubmitState.set({
 			...formSubmitState.value,
 			status: 'idle',
 			error: null,
 		})
-		this._broadcastStatus('idle')
+		this.broadcastStatus('idle')
 	}
 
 	/** Programmatically submit via the native submitter pipeline. */
@@ -334,17 +334,17 @@ export default class SchmancyForm<TSchema extends ParseSchema | undefined = unde
 	}
 
 	public reportValidity(): boolean {
-		return this._activeFields.every(f => f.reportValidity())
+		return this.activeFields.every(f => f.reportValidity())
 	}
 
 	public checkValidity(): boolean {
-		return this._activeFields.every(f => f.checkValidity())
+		return this.activeFields.every(f => f.checkValidity())
 	}
 
 	/** Snapshot of current form values from the registered fields. */
 	public getFormData(): FormData {
 		const formData = new FormData()
-		for (const field of this._activeFields) {
+		for (const field of this.activeFields) {
 			for (const [k, v] of field.toFormEntries()) formData.append(k, v)
 		}
 		return formData
@@ -355,8 +355,8 @@ export default class SchmancyForm<TSchema extends ParseSchema | undefined = unde
 			<schmancy-context .provides=${[formSubmitState]}>
 				<form
 					?novalidate=${this.novalidate}
-					@submit=${this._onSubmit}
-					@reset=${this._onReset}
+					@submit=${this.onSubmit}
+					@reset=${this.onReset}
 				>
 					<slot></slot>
 				</form>
@@ -373,7 +373,7 @@ export default class SchmancyForm<TSchema extends ParseSchema | undefined = unde
 					aria-live="assertive"
 					aria-atomic="true"
 					class="sr-only"
-				>${this._liveStatus === 'error' ? this._liveError : ''}</div>
+				>${this.liveStatus === 'error' ? this.liveError : ''}</div>
 			</schmancy-context>
 		`
 	}

package/src/icons/icon.ts

@@ -4,6 +4,7 @@ import { customElement, state } from 'lit/decorators.js'
 
 declare global {
   interface Window {
+    // eslint-disable-next-line no-underscore-dangle -- public runtime contract: global populated by the external schmancy-icons Vite plugin; renaming breaks consumers
     __siIcons?: Record<string, string>
   }
 }
@@ -44,28 +45,29 @@ export default class SchmancyIcon extends SchmancyElement {
 		}
 	`]
 
-	@state() private _name = ''
+	@state() private name = ''
 
-	private _observer?: MutationObserver
+	private observer?: MutationObserver
 
 	override connectedCallback(): void {
 		super.connectedCallback()
-		this._name = this.textContent?.trim() ?? ''
-		this._observer = new MutationObserver(() => {
-			this._name = this.textContent?.trim() ?? ''
+		this.name = this.textContent?.trim() ?? ''
+		this.observer = new MutationObserver(() => {
+			this.name = this.textContent?.trim() ?? ''
 		})
-		this._observer.observe(this, { childList: true, characterData: true, subtree: true })
+		this.observer.observe(this, { childList: true, characterData: true, subtree: true })
 		this.setAttribute('aria-hidden', 'true')
 		this.setAttribute('translate', 'no')
 	}
 
 	override disconnectedCallback(): void {
 		super.disconnectedCallback()
-		this._observer?.disconnect()
+		this.observer?.disconnect()
 	}
 
 	protected override render(): unknown {
-		const path = window.__siIcons?.[this._name]
+		// eslint-disable-next-line no-underscore-dangle -- public runtime contract: see Window.__siIcons declaration above
+		const path = window.__siIcons?.[this.name]
 		return html`
 			<slot style="display:none"></slot>
 			${path

package/src/iframe/iframe.ts

@@ -53,20 +53,20 @@ export default class SchmancyIframe extends SchmancyElement {
 	/** Minimum height in pixels */
 	@property({ type: Number }) minHeight = 60
 
-	@state() private _height = 60
-	private _srcdoc = ''
-	private _iframeRef = createRef<HTMLIFrameElement>()
+	@state() private height = 60
+	private srcdoc = ''
+	private iframeRef = createRef<HTMLIFrameElement>()
 
 	protected willUpdate(changed: PropertyValues) {
 		if (changed.has('html') || changed.has('css') || changed.has('baseCss')) {
-			this._srcdoc = this.html ? this.buildSrcdoc() : ''
-			this._height = this.minHeight
+			this.srcdoc = this.html ? this.buildSrcdoc() : ''
+			this.height = this.minHeight
 		}
 	}
 
 	protected updated(changed: PropertyValues) {
 		if (changed.has('sandbox')) {
-			this._iframeRef.value?.setAttribute('sandbox', this.sandbox)
+			this.iframeRef.value?.setAttribute('sandbox', this.sandbox)
 		}
 	}
 
@@ -83,18 +83,18 @@ export default class SchmancyIframe extends SchmancyElement {
 		try {
 			const doc = iframe.contentDocument
 			if (!doc) return
-			this._height = Math.max(doc.documentElement.scrollHeight, this.minHeight)
+			this.height = Math.max(doc.documentElement.scrollHeight, this.minHeight)
 		} catch {
-			this._height = Math.max(200, this.minHeight)
+			this.height = Math.max(200, this.minHeight)
 		}
 	}
 
 	protected render() {
 		if (!this.html) return html``
 		return html`<iframe
-			${ref(this._iframeRef)}
-			.srcdoc=${this._srcdoc}
-			style="height:${this._height}px;min-height:${this.minHeight}px;overflow:hidden"
+			${ref(this.iframeRef)}
+			.srcdoc=${this.srcdoc}
+			style="height:${this.height}px;min-height:${this.minHeight}px;overflow:hidden"
 			@load=${this.onLoad}
 		></iframe>`
 	}

package/src/lightbox/flip-directive.ts

@@ -69,7 +69,8 @@ class FlipDirective extends AsyncDirective {
 		}
 	}
 
-	render(_options?: FlipOptions) {
+	render(options?: FlipOptions) {
+		void options
 		return noChange
 	}
 

package/src/lightbox/lightbox.directive.ts

@@ -28,7 +28,8 @@ class LightboxDirective extends AsyncDirective {
 		}
 	}
 
-	render(_options?: LightboxOptions) {
+	render(options?: LightboxOptions) {
+		void options
 		return noChange
 	}
 

package/src/nav-drawer/navbar.ts

@@ -31,7 +31,7 @@ export class SchmancyNavigationDrawerSidebar extends SchmancyElement {
 	@query('nav') nav!: HTMLElement
 
 	@property({ type: String }) width = '220px'
-	@state() private _initialized = false
+	@state() private initialized = false
 
 	/**
 	 * firstUpdated()
@@ -52,7 +52,7 @@ export class SchmancyNavigationDrawerSidebar extends SchmancyElement {
 			this.nav.style.transform = 'translateX(0)'
 			this.overlay.style.display = 'none'
 		}
-		this._initialized = true
+		this.initialized = true
 	}
 
 	/**
@@ -60,7 +60,7 @@ export class SchmancyNavigationDrawerSidebar extends SchmancyElement {
 	 * Trigger animations when either the consumed mode or state changes.
 	 */
 	updated(changedProperties: Map<string, unknown>) {
-		if (!this._initialized) return
+		if (!this.initialized) return
 
 		if (changedProperties.has('drawerState') || changedProperties.has('mode')) {
 			if (this.mode === 'overlay') {