@mhmo91/schmancy 0.9.28 → 0.10.2

package/src/charts/area-chart.ts

@@ -1,7 +1,7 @@
 import { html, css, PropertyValues } from 'lit'
 import { customElement, property, state } from 'lit/decorators.js'
 import { ref, createRef, Ref } from 'lit/directives/ref.js'
-import { $LitElement } from '@mixins/index'
+import { SchmancyElement } from '@mixins/index'
 import type { ChartDataPoint, ChartTheme, ProcessedDataPoint } from './types'
 import { catmullRomSpline, hexToRgba, easeOutCubic } from './utils'
 
@@ -15,11 +15,13 @@ interface TooltipData {
 }
 
 @customElement('schmancy-area-chart')
-export class SchmancyAreaChart extends $LitElement(css`
+export class SchmancyAreaChart extends SchmancyElement {
+	static styles = [css`
 	:host {
 		display: block;
 	}
-`) {
+`]
+
 	/** Chart data points */
 	@property({ type: Array })
 	data: ChartDataPoint[] = []
@@ -195,7 +197,7 @@ export class SchmancyAreaChart extends $LitElement(css`
 		if (!this.data || this.data.length === 0) return []
 
 		// Find top N peak values
-		const sortedByValue = [...this.data].sort((a, b) => b.value - a.value)
+		const sortedByValue = [...this.data].toSorted((a, b) => b.value - a.value)
 		const peakLabels = new Set(sortedByValue.slice(0, this.peakCount).map(d => d.label))
 
 		return this.data.map(d => ({
@@ -244,6 +246,7 @@ export class SchmancyAreaChart extends $LitElement(css`
 		const maxValue = Math.max(...data.map(d => d.value), 1)
 
 		// Calculate positions
+		// oxlint-disable-next-line oxc/no-map-spread
 		const points = data.map((d, i) => ({
 			...d,
 			x: padding.left + (data.length > 1 ? (i / (data.length - 1)) * chartWidth : chartWidth / 2),

package/src/charts/pills.ts

@@ -1,7 +1,7 @@
 import { html, css, PropertyValues } from 'lit'
 import { customElement, property, state } from 'lit/decorators.js'
 import { repeat } from 'lit/directives/repeat.js'
-import { $LitElement } from '@mixins/index'
+import { SchmancyElement } from '@mixins/index'
 import type { PillDataPoint, PillSegment } from './types'
 
 /** Default color palette for segments - expanded for uniqueness */
@@ -24,11 +24,13 @@ const DEFAULT_COLORS = [
 ]
 
 @customElement('schmancy-pills')
-export class SchmancyPills extends $LitElement(css`
+export class SchmancyPills extends SchmancyElement {
+	static styles = [css`
 	:host {
 		display: block;
 	}
-`) {
+`]
+
 	/** Chart data points */
 	@property({ type: Array })
 	data: PillDataPoint[] = []
@@ -168,7 +170,7 @@ export class SchmancyPills extends $LitElement(css`
 
 		// Sort by total value (most = first color)
 		const sortedCategories = Array.from(categoryTotals.entries())
-			.sort((a, b) => b[1] - a[1])
+			.toSorted((a, b) => b[1] - a[1])
 			.map(([cat]) => cat)
 
 		// Clear and rebuild - use explicit colors if available, otherwise default palette

package/src/checkbox/checkbox.test.ts

@@ -2,6 +2,8 @@ import { afterEach, beforeEach, describe, expect, it } from 'vitest'
 import { expectNoA11yViolations } from '../test-utils/a11y'
 import './checkbox'
 
+const nextUpdate = () => new Promise(r => requestAnimationFrame(() => r(null)))
+
 describe('schmancy-checkbox', () => {
 	let host: HTMLDivElement
 
@@ -14,8 +16,6 @@ describe('schmancy-checkbox', () => {
 		host.remove()
 	})
 
-	const nextUpdate = () => new Promise(r => requestAnimationFrame(() => r(null)))
-
 	it('is defined on the element registry', () => {
 		expect(customElements.get('schmancy-checkbox')).toBeDefined()
 	})

package/src/checkbox/checkbox.ts

@@ -1,5 +1,5 @@
 import '@material/web/checkbox/checkbox.js'
-import { TailwindElement } from '@mixins/index'
+import { SchmancyElement } from '@mixins/index'
 import { html, LitElement } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
 import { when } from 'lit/directives/when.js'
@@ -9,19 +9,13 @@ export type schmancyCheckBoxChangeEvent = CustomEvent<{
 }>
 
 /**
- * Binary checkbox for multi-select or boolean form fields. Wraps Material Web's `<md-checkbox>`; form-associated.
- *
  * @element schmancy-checkbox
- * @summary Use for "select many from a list" or any boolean that's part of a form submission. Prefer schmancy-switch for immediate-effect toggles.
- * @example
- * <schmancy-checkbox name="tos" required>I accept the terms</schmancy-checkbox>
- * @platform checkbox change - Wraps `<md-checkbox>` from `@material/web`. Degrades to styled native `<input type="checkbox">` if the tag never registers.
  * @slot - The label for the checkbox.
- * @fires valueChange - `CustomEvent<{ value: boolean }>` when the checkbox is toggled.
+ * @fires valueChange - Event fired when the checkbox value changes.
  **/
 
 @customElement('schmancy-checkbox')
-class SchmancyCheckboxElement extends TailwindElement() {
+class SchmancyCheckboxElement extends SchmancyElement {
 	protected static shadowRootOptions = {
 		...LitElement.shadowRootOptions,
 		delegatesFocus: true,

package/src/chips/assist-chip.ts

@@ -1,4 +1,4 @@
-import { TailwindElement } from '@mixins/tailwind.mixin'
+import { SchmancyElement } from '@mixins/index'
 import { css, html, LitElement } from 'lit'
 import { customElement, property, state } from 'lit/decorators.js'
 import { classMap } from 'lit/directives/class-map.js'
@@ -6,20 +6,12 @@ import { BehaviorSubject, combineLatest } from 'rxjs'
 import { takeUntil } from 'rxjs/operators'
 
 /**
- * Assist chip — single-tap trigger for a contextual action (open calendar event, share content, jump to related view). Distinct from filter and input chips: assist chips have no selected state; clicking fires `action`.
- *
- * @element schmancy-assist-chip
- * @summary Use for "do this thing" suggestions surfaced in context (next to a date, after a recipient list, near a long description). Pair with schmancy-icon for the leading glyph.
- * @example
- * <schmancy-assist-chip @action=${(e) => share(e.detail.value)}>
- *   <schmancy-icon slot="icon">share</schmancy-icon>
- *   Share
- * </schmancy-assist-chip>
- * @platform button click - Material 3 assist-chip semantics. Degrades to a plain `<button>` if the tag never registers.
- * @fires action - When the chip is clicked or activated via keyboard. `detail.value` echoes the chip's `value` attribute.
+ * Assist chip component - prompts user actions like opening calendar events or sharing content
+ * Pure Schmancy implementation with Tailwind CSS and RxJS state management
  */
 @customElement('schmancy-assist-chip')
-export class SchmancyAssistChip extends TailwindElement(css`
+export class SchmancyAssistChip extends SchmancyElement {
+	static styles = [css`
 	:host {
 		display: inline-block;
 		outline: none;
@@ -68,7 +60,7 @@ export class SchmancyAssistChip extends TailwindElement(css`
 	:host(:not([disabled])) button:active .state-layer {
 		opacity: 0.1;
 	}
-`) {
+`];
 	/** Value identifier for the chip */
 	@property({ reflect: true }) value = ''
 

package/src/chips/chips.ts

@@ -1,4 +1,4 @@
-import { $LitElement } from '@mixins/index'
+import { SchmancyElement } from '@mixins/index'
 import { css, html, PropertyValues } from 'lit'
 import { customElement, property, queryAssignedElements } from 'lit/decorators.js'
 import { BehaviorSubject, combineLatest } from 'rxjs'
@@ -7,32 +7,18 @@ import { fullWidth } from '../directives/layout'
 import type { FilterChipChangeEvent as SchmancyChipChangeEvent } from './filter-chip'
 import { SchmancyFilterChip as SchmancyChip } from './filter-chip'
 
-/**
- * Filter-chip group — container for selectable `<schmancy-chip>` children. Single or multi-select.
- *
- * @element schmancy-chips
- * @summary Use for filtering or choosing from 2–8 mutually-visible options ("Status: active / paused / archived"). Prefer schmancy-select when the list gets long or vertical.
- * @example
- * <schmancy-chips multi @change=${(e) => this.filters = e.detail.values}>
- *   <schmancy-chip value="active">Active</schmancy-chip>
- *   <schmancy-chip value="paused">Paused</schmancy-chip>
- *   <schmancy-chip value="archived">Archived</schmancy-chip>
- * </schmancy-chips>
- * @platform chip-group change - No direct native equivalent. Degrades to a styled schmancy-select with similar semantics if the tag never registers.
- * @fires change - `CustomEvent<{ value: string }>` (single) or `{ values: string[] }` (multi).
- */
 @customElement('schmancy-chips')
-export default class SchmancyChips extends $LitElement(
-
-css`
+export default class SchmancyChips extends SchmancyElement {
+	static styles = [css`
 :host{
 	display:block;
 	height:fit-content;
 	width:fit-content;
 }
-	
-`
-) {
+
+`]
+
+
 	// RxJS state streams - initialized with undefined to detect if properties were set
 	private value$ = new BehaviorSubject<string>('')
 	private values$ = new BehaviorSubject<string[]>([])

package/src/chips/filter-chip.ts

@@ -1,4 +1,4 @@
-import { TailwindElement } from '@mixins/tailwind.mixin'
+import { SchmancyElement } from '@mixins/index'
 import { css, html, LitElement } from 'lit'
 import { property } from 'lit/decorators.js'
 import { magnetic } from '../directives/magnetic'
@@ -19,7 +19,8 @@ import { magnetic } from '../directives/magnetic'
  * </schmancy-filter-chip>
  * ```
  */
-export class SchmancyFilterChip extends TailwindElement(css`
+export class SchmancyFilterChip extends SchmancyElement {
+	static styles = [css`
 	:host {
 		display: inline-block;
 		outline: none;
@@ -58,7 +59,7 @@ export class SchmancyFilterChip extends TailwindElement(css`
 	button {
 		font-family: inherit;
 	}
-`) {
+`];
 	/** Unique identifier for this filter chip */
 	@property({ type: String, reflect: true })
 	value: string = ''

package/src/chips/input-chip.ts

@@ -1,4 +1,4 @@
-import { TailwindElement } from '@mixins/tailwind.mixin'
+import { SchmancyElement } from '@mixins/index'
 import { css, html, LitElement } from 'lit'
 import { customElement, property, state } from 'lit/decorators.js'
 import { classMap } from 'lit/directives/class-map.js'
@@ -6,7 +6,7 @@ import { BehaviorSubject, combineLatest } from 'rxjs'
 import { map, takeUntil, tap } from 'rxjs/operators'
 
 /**
- * Input chip — displays user-provided information (tags, recipients, filters) that can be removed but not toggled.
+ * Input chip component - represents user-provided information that can be removed.
  *
  * IMPORTANT: Per Material Design 3 specification, input chips do NOT have selected state.
  * They represent discrete pieces of user input (like entered tags, selections from lists, etc.)
@@ -18,18 +18,19 @@ import { map, takeUntil, tap } from 'rxjs/operators'
  * - Tags or keywords entered by the user
  * - Selected items from a multi-select dropdown
  *
- * @element schmancy-input-chip
- * @summary Removable pill that represents a single user input value. No selected state — use schmancy-chip (filter chip) for toggleable options.
+ * @fires click - Optional click event on chip body (value)
+ * @fires remove - Dispatched when remove button is clicked (value)
+ *
  * @example
+ * ```html
  * <schmancy-input-chip value="john@example.com" avatar="/avatars/john.jpg">
  *   John Doe
  * </schmancy-input-chip>
- * @platform chip remove - No native equivalent. Composed of a labeled pill + close button. Degrades to a styled `<span>` with a trailing close `<button>` if the tag never registers.
- * @fires click - Optional click event on chip body (value)
- * @fires remove - Dispatched when remove button is clicked (value)
+ * ```
  */
 @customElement('schmancy-input-chip')
-export class SchmancyInputChip extends TailwindElement(css`
+export class SchmancyInputChip extends SchmancyElement {
+	static styles = [css`
 	:host {
 		display: inline-block;
 		outline: none;
@@ -109,7 +110,7 @@ export class SchmancyInputChip extends TailwindElement(css`
 	:host(:not([disabled])) .chip-container:active .state-layer {
 		opacity: 0.1;
 	}
-`) {
+`];
 	/** Value identifier for the chip */
 	@property({ type: String, reflect: true })
 	value: string = ''

package/src/chips/suggestion-chip.ts

@@ -1,4 +1,4 @@
-import { TailwindElement } from '@mixins/tailwind.mixin'
+import { SchmancyElement } from '@mixins/index'
 import { css, html, LitElement } from 'lit'
 import { customElement, property, state } from 'lit/decorators.js'
 import { classMap } from 'lit/directives/class-map.js'
@@ -6,19 +6,17 @@ import { BehaviorSubject, combineLatest } from 'rxjs'
 import { takeUntil } from 'rxjs/operators'
 
 /**
- * Suggestion chip — single-tap insertion of a recommended value. Distinct from filter chips (no selected state) and assist chips (assist triggers an action; suggestion offers a value the user can pick).
+ * Suggestion chip component - provides contextual recommendations to users
  *
- * @element schmancy-suggestion-chip
- * @summary Use for "would you also like to…" prompts above a search input or below a message thread. Click fires `action` with the chip's `value` so the parent can insert it into a field or trigger a search.
- * @example
- * <schmancy-suggestion-chip value="yesterday" @action=${(e) => setRange(e.detail.value)}>
- *   Yesterday
- * </schmancy-suggestion-chip>
- * @platform button click - Material 3 suggestion-chip semantics. Degrades to a plain `<button>` if the tag never registers.
- * @fires action - When the chip is clicked or activated via keyboard. `detail.value` echoes the chip's `value` attribute.
+ * IMPORTANT: Suggestion chips do NOT have a selected state. They are designed to
+ * provide suggestions and recommendations that trigger actions when clicked.
+ * Unlike filter chips, they cannot be toggled on/off.
+ *
+ * Pure Schmancy implementation with Tailwind CSS and RxJS state management
  */
 @customElement('schmancy-suggestion-chip')
-export class SchmancySuggestionChip extends TailwindElement(css`
+export class SchmancySuggestionChip extends SchmancyElement {
+	static styles = [css`
 	:host {
 		display: inline-block;
 		outline: none;
@@ -67,7 +65,7 @@ export class SchmancySuggestionChip extends TailwindElement(css`
 	:host(:not([disabled])) button:active .state-layer {
 		opacity: 0.1;
 	}
-`) {
+`];
 	/** Value identifier for the chip */
 	@property({ reflect: true }) value = ''
 

package/src/code-highlight/code-highlight.ts

@@ -1,44 +1,29 @@
-import { TailwindElement } from '@mixins/index'
+import { SchmancyElement } from '@mixins/index'
+import hljs from 'highlight.js/lib/core'
+import bash from 'highlight.js/lib/languages/bash'
+import javascript from 'highlight.js/lib/languages/javascript'
+import markdown from 'highlight.js/lib/languages/markdown'
+import typescript from 'highlight.js/lib/languages/typescript'
+import xml from 'highlight.js/lib/languages/xml'
 import { css, html } from 'lit'
 import { customElement, property, state } from 'lit/decorators.js'
 import { unsafeHTML } from 'lit/directives/unsafe-html.js'
 
-// highlight.js + all 6 language grammars are loaded lazily on first render.
-// Static imports were previously responsible for ~15 KB gzipped (vendor-
-// highlight chunk) being eagerly fetched on every agent-bundle first paint,
-// even for pages that never rendered <schmancy-code>. See ADR 0014 in the
-// parent monorepo.
-type Hljs = typeof import('highlight.js/lib/core').default
-
-let hljsPromise: Promise<Hljs> | null = null
-function loadHljs(): Promise<Hljs> {
-	if (hljsPromise) return hljsPromise
-	hljsPromise = Promise.all([
-		import('highlight.js/lib/core'),
-		import('highlight.js/lib/languages/bash'),
-		import('highlight.js/lib/languages/javascript'),
-		import('highlight.js/lib/languages/markdown'),
-		import('highlight.js/lib/languages/typescript'),
-		import('highlight.js/lib/languages/xml'),
-	]).then(([core, bash, javascript, markdown, typescript, xml]) => {
-		const hljs = core.default
-		hljs.registerLanguage('javascript', javascript.default)
-		hljs.registerLanguage('typescript', typescript.default)
-		hljs.registerLanguage('html', xml.default)
-		hljs.registerLanguage('xml', xml.default)
-		hljs.registerLanguage('markdown', markdown.default)
-		hljs.registerLanguage('bash', bash.default)
-		return hljs
-	})
-	return hljsPromise
-}
+// Register only the languages we need
+hljs.registerLanguage('javascript', javascript)
+hljs.registerLanguage('typescript', typescript)
+hljs.registerLanguage('html', xml)
+hljs.registerLanguage('xml', xml)
+hljs.registerLanguage('markdown', markdown)
+hljs.registerLanguage('bash', bash)
 
 /**
  * @element schmancy-code
  * Code highlighting component using highlight.js with schmancy theming support
  */
 @customElement('schmancy-code')
-export class SchmancyCode extends TailwindElement(css`
+export class SchmancyCode extends SchmancyElement {
+	static styles = [css`
 	:host {
 		display: block;
 		width: 100%;
@@ -158,7 +143,7 @@ export class SchmancyCode extends TailwindElement(css`
 		user-select: none;
 		font-size: inherit;
 	}
-`) {
+`];
 	/**
 	 * Programming language for syntax highlighting
 	 */
@@ -204,48 +189,32 @@ export class SchmancyCode extends TailwindElement(css`
 	@state()
 	private copied: boolean = false
 
-	/**
-	 * Fully-rendered highlighted HTML — populated asynchronously after
-	 * `loadHljs()` resolves. Empty on first render (one microtask) for a
-	 * cold component; non-empty from then on.
-	 */
-	@state()
-	private _highlightedCode: string = ''
-
-	protected override updated(changed: Map<string, unknown>): void {
-		super.updated?.(changed)
-		if (changed.has('code') || changed.has('language') || changed.has('lineNumbers') || changed.has('highlightLines')) {
-			void this._rehighlight()
-		}
-	}
-
-	private async _rehighlight(): Promise<void> {
-		if (!this.code) {
-			this._highlightedCode = ''
-			return
-		}
-		const hljs = await loadHljs()
-		// Guard against unmount + racing property changes.
-		if (!this.isConnected) return
+	private get highlightedCode(): string {
+		if (!this.code) return ''
 
 		let highlightedHtml = ''
+
 		try {
+			// Use highlight.js to get highlighted code
 			const result = hljs.highlight(this.code.trim(), { language: this.language })
 			highlightedHtml = result.value
 		} catch {
+			// Fallback to auto-detection if language is not supported
 			try {
 				const result = hljs.highlightAuto(this.code.trim())
 				highlightedHtml = result.value
 			} catch {
+				// Final fallback to escaped plain text
 				highlightedHtml = this.escapeHtml(this.code.trim())
 			}
 		}
 
+		// Process for line numbers and highlighting if needed
 		if (this.lineNumbers || this.highlightLines) {
-			this._highlightedCode = this.addLineFeatures(highlightedHtml)
-		} else {
-			this._highlightedCode = highlightedHtml
+			return this.addLineFeatures(highlightedHtml)
 		}
+
+		return highlightedHtml
 	}
 
 	private escapeHtml(text: string): string {
@@ -362,7 +331,7 @@ export class SchmancyCode extends TailwindElement(css`
 				</section>
 				<!-- Code -->
 				<div class="overflow-auto" style="${this.maxHeight ? `max-height: ${this.maxHeight}` : ''}">
-					<pre class="m-0"><code class="${codeClass}">${unsafeHTML(this._highlightedCode)}</code></pre>
+					<pre class="m-0"><code class="${codeClass}">${unsafeHTML(this.highlightedCode)}</code></pre>
 				</div>
 			</schmancy-details>
 		`

package/src/code-highlight/code-preview.ts

@@ -1,4 +1,4 @@
-import { TailwindElement } from '@mixins/index'
+import { SchmancyElement } from '@mixins/index'
 import { css, html } from 'lit'
 import { customElement, property, state } from 'lit/decorators.js'
 import { timer } from 'rxjs'
@@ -10,14 +10,16 @@ import { take } from 'rxjs/operators'
  * Takes the content as a slot and displays both the source and rendered result
  */
 @customElement('schmancy-code-preview')
-export class SchmancyCodePreview extends TailwindElement(
-	css`:host{
-		display:block;
-		overflow:hidden;
-		position:relative;
-		inset:0;
-	}`
-) {
+export class SchmancyCodePreview extends SchmancyElement {
+	static styles = [
+		css`:host{
+			display:block;
+			overflow:hidden;
+			position:relative;
+			inset:0;
+		}`,
+	];
+
 	/**
 	 * Programming language for syntax highlighting
 	 */

package/src/connectivity/connectivity-status.ts

@@ -1,4 +1,4 @@
-import { TailwindElement } from '@mixins/tailwind.mixin'
+import { SchmancyElement } from '@mixins/index'
 import { css, html } from 'lit'
 import { customElement } from 'lit/decorators.js'
 import { createRef, ref } from 'lit/directives/ref.js'
@@ -16,7 +16,8 @@ import { $sounds } from '../audio'
  * <schmancy-connectivity-status></schmancy-connectivity-status>
  */
 @customElement('schmancy-connectivity-status')
-export class SchmancyConnectivityStatus extends TailwindElement(css`
+export class SchmancyConnectivityStatus extends SchmancyElement {
+	static styles = [css`
 	:host {
 		display: block;
 	}
@@ -57,7 +58,7 @@ export class SchmancyConnectivityStatus extends TailwindElement(css`
 	.icon-bounce {
 		animation: icon-bounce 600ms ease-out;
 	}
-`) {
+`];
 	private bannerRef = createRef<HTMLDivElement>()
 	private surfaceRef = createRef<HTMLElement>()
 	private iconRef = createRef<HTMLSpanElement>()

package/src/content-drawer/drawer.ts

@@ -1,5 +1,5 @@
 import { provide } from '@lit/context'
-import { $LitElement } from '@mixins/index'
+import { SchmancyElement } from '@mixins/index'
 import { css, html, nothing } from 'lit'
 import { customElement, property, queryAssignedElements, state } from 'lit/decorators.js'
 import { debounceTime, distinctUntilChanged, fromEvent, map, merge, startWith, takeUntil, tap } from 'rxjs'
@@ -20,14 +20,16 @@ import {
  * @slot - The content slot
  */
 @customElement('schmancy-content-drawer')
-export class SchmancyContentDrawer extends $LitElement(css`
+export class SchmancyContentDrawer extends SchmancyElement {
+	static styles = [css`
 	:host {
 		position: relative;
 		inset: 0;
 		display: block;
 		overflow: hidden;
 	}
-`) {
+`]
+
 	/**
 	 * The minimum width of the sheet
 	 * @attr	minWidth

package/src/content-drawer/main.ts

@@ -1,5 +1,5 @@
 import { consume } from '@lit/context'
-import { $LitElement } from '@mixins/index'
+import { SchmancyElement } from '@mixins/index'
 import { PropertyValueMap, css, html } from 'lit'
 import { customElement, property, state } from 'lit/decorators.js'
 import { SchmancyEvents } from '..'
@@ -12,12 +12,14 @@ import {
 import { when } from 'lit/directives/when.js'
 
 @customElement('schmancy-content-drawer-main')
-export class SchmancyContentDrawerMain extends $LitElement(css`
+export class SchmancyContentDrawerMain extends SchmancyElement {
+	static styles = [css`
 	:host {
 		display: block;
 		overflow: hidden;
 	}
-`) {
+`]
+
 	@property({ type: Number })
 	minWidth: number
 

package/src/content-drawer/sheet.ts

@@ -1,5 +1,5 @@
 import { consume } from '@lit/context'
-import { $LitElement } from '@mixins/index'
+import { SchmancyElement } from '@mixins/index'
 import { css, html } from 'lit'
 import { customElement, property, query, queryAssignedElements, state } from 'lit/decorators.js'
 import { from, merge, Observable, of, takeUntil, tap } from 'rxjs'
@@ -18,11 +18,13 @@ import {
 // import { animate } from '@packages/anime-beta-master'
 
 @customElement('schmancy-content-drawer-sheet')
-export class SchmancyContentDrawerSheet extends $LitElement(css`
+export class SchmancyContentDrawerSheet extends SchmancyElement {
+	static styles = [css`
 	:host {
 		overflow: scroll;
 	}
-`) {
+`]
+
 	@property({ type: Number })
 	minWidth
 
@@ -56,7 +58,7 @@ export class SchmancyContentDrawerSheet extends $LitElement(css`
 		}
 	}
 
-	updated(changedProperties: Map<string, any>) {
+	updated(changedProperties: Map<string, unknown>) {
 		super.updated(changedProperties)
 		if (changedProperties.has('minWidth') && this.minWidth) {
 			// If the 'minWidth' property changed

package/src/date-range/date-range-dialog.ts

@@ -1,4 +1,4 @@
-import { $LitElement } from '@mixins/index'
+import { SchmancyElement } from '@mixins/index'
 import dayjs from 'dayjs'
 import { html } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
@@ -25,7 +25,7 @@ interface PresetGroup {
  * @element schmancy-date-range-dialog
  */
 @customElement('schmancy-date-range-dialog')
-export class SchmancyDateRangeDialog extends $LitElement() {
+export class SchmancyDateRangeDialog extends SchmancyElement {
 	@property({ type: String }) type: 'date' | 'datetime-local' = 'date'
 	@property({ type: Object }) dateFrom: { label: string; value: string } = { label: 'From', value: '' }
 	@property({ type: Object }) dateTo: { label: string; value: string } = { label: 'To', value: '' }

package/src/date-range/date-range.ts

@@ -1,4 +1,4 @@
-import { $LitElement } from '@mixins/index'
+import { SchmancyElement } from '@mixins/index'
 import dayjs from 'dayjs'
 import quarterOfYear from 'dayjs/plugin/quarterOfYear'
 import { html, PropertyValues, render } from 'lit'
@@ -26,7 +26,7 @@ export type SchmancyDateRangeChangeEvent = CustomEvent<{
  * @fires change - Fired when the date range changes with dateFrom and dateTo values
  */
 @customElement('schmancy-date-range')
-export class SchmancyDateRange extends $LitElement() {
+export class SchmancyDateRange extends SchmancyElement {
 	// Core properties
 	@property({ type: String }) type: 'date' | 'datetime-local' = 'date'
 	@property({ type: Object }) dateFrom: { label: string; value: string } = { label: 'From', value: '' }
@@ -276,6 +276,7 @@ export class SchmancyDateRange extends $LitElement() {
 				position: e
 			}).then(() => {
 				this.isOpen = false
+				return
 			})
 		}
 	}

package/src/delay/delay.ts

@@ -1,6 +1,6 @@
 import { animate, fadeIn, flyAbove, flyBelow } from '@lit-labs/motion'
 import { consume, createContext, provide } from '@lit/context'
-import { $LitElement } from '@mixins/litElement.mixin'
+import { SchmancyElement } from '@mixins/index'
 import hashContent from '@schmancy/utils/hashContent'
 import { html } from 'lit'
 import { customElement, property, queryAssignedElements, state } from 'lit/decorators.js'
@@ -11,7 +11,7 @@ import { takeUntil } from 'rxjs/operators'
 export const delayContext = createContext<number>('delay-context')
 
 @customElement('schmancy-delay')
-export class SchmancyDelay extends $LitElement() {
+export class SchmancyDelay extends SchmancyElement {
 	@property({ type: Number, reflect: true }) delay = 0 // Delay in milliseconds
 	@property({ type: String }) motion = 'flyBelow' // Motion type (default: flyBelow)
 	@state() private rendered = false // Tracks if the content is rendered