@mhmo91/schmancy 0.9.27 → 0.10.1

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

package/src/details/details.ts

@@ -1,4 +1,4 @@
-import { TailwindElement, SurfaceMixin } from '@mixins/index'
+import { SchmancyElement, SurfaceMixin } from '@mixins/index'
 import { css, html, LitElement, nothing } from 'lit'
 import { customElement, property, state } from 'lit/decorators.js'
 import { cursorGlow } from '../directives/cursor-glow'
@@ -9,21 +9,9 @@ import { distinctUntilChanged, filter, take, takeUntil, tap } from 'rxjs/operato
 import { SPRING_SNAPPY } from '../utils/animation.js'
 import { reducedMotion$ } from '../directives/reduced-motion'
 
-/**
- * Expandable disclosure panel — a styled `<details>` / `<summary>` pair with animated expand + overlay options.
- *
- * @element schmancy-details
- * @summary Use for progressive-disclosure content: FAQs, collapsible settings sections, accordion-style lists. Prefer schmancy-expand for full-page accordions where only one section can be open at a time.
- * @example
- * <schmancy-details summary="Shipping details">
- *   <p>Order ships in 2 business days.</p>
- * </schmancy-details>
- * @platform details toggle - Wraps native `<details>`/`<summary>`. Degrades to the native element if the tag never registers — same keyboard accessibility, just no animation.
- * @fires toggle - When the open state changes (bubbles from the native `<details>`).
- */
 @customElement('schmancy-details')
-export default class SchmancyDetails extends SurfaceMixin(
-	TailwindElement(css`
+export default class SchmancyDetails extends SurfaceMixin(SchmancyElement) {
+	static styles = [css`
 		:host {
 			display: block;
 			transition: box-shadow 400ms cubic-bezier(0.34, 1.2, 0.64, 1);
@@ -138,8 +126,7 @@ export default class SchmancyDetails extends SurfaceMixin(
 				transition: none;
 			}
 		}
-	`),
-) {
+	`];
 	protected static shadowRootOptions = {
 		...LitElement.shadowRootOptions,
 		mode: 'open' as const,

package/src/dialog/dialog-service.ts

@@ -240,6 +240,7 @@ export class DialogService {
 
 							// Remove from DOM
 							dialog.parentElement?.removeChild(dialog)
+							return
 						})
 						.catch((error: unknown) => {
 							target.reject?.(error)
@@ -421,6 +422,7 @@ export class DialogService {
 				content: container,
 			}).then(confirmed => {
 				resolve(confirmed ? inputValue : null)
+				return
 			})
 		})
 	}

package/src/dialog/dialog.component.ts

@@ -10,28 +10,28 @@ import { DialogBase } from './dialog-base.mixin'
 import { DialogHereMorty, DialogWhereAreYouRicky, DialogWhereAreYouRickyEvent } from './dialog-events'
 
 /**
- * Modal dialog — content-only (just a styled panel) or confirm mode (title + message + confirm/cancel buttons). Prefer the imperative `$dialog` service for most use cases; use the element directly only when you want a declaratively-positioned dialog.
+ * Unified dialog component that handles both content-only and confirm modes.
  *
  * @element schmancy-dialog
- * @summary Blocks interaction with the rest of the page until dismissed. For quick confirmations, prefer `$dialog.confirm({ ... })` over this element. For arbitrary dialog content driven imperatively, prefer `$dialog.component(MyComponent)`.
- * @platform dialog close - Positioned overlay in light DOM. Degrades to a styled `<dialog>` if the tag never registers — loses custom animations but keeps focus trap + ESC close.
  * @slot default - Content slot for dialog body (used in content mode)
  * @slot content - Named slot for custom content in confirm mode
- * @fires confirm - In confirm mode, when the confirm button is clicked.
- * @fires cancel - In confirm mode, when the cancel button or ESC is activated.
  *
  * @example Content mode (no buttons):
+ * ```html
  * <schmancy-dialog>
  *   <my-custom-content></my-custom-content>
  * </schmancy-dialog>
+ * ```
  *
  * @example Confirm mode (with buttons):
+ * ```html
  * <schmancy-dialog
- *   title="Delete item?"
- *   message="This action cannot be undone."
- *   confirm-text="Delete"
- *   cancel-text="Keep"
+ *   title="Confirm Action"
+ *   message="Are you sure?"
+ *   confirm-text="Yes"
+ *   cancel-text="No"
  * ></schmancy-dialog>
+ * ```
  */
 @customElement('schmancy-dialog')
 export class SchmancyDialog extends DialogBase(

package/src/directives/drag.ts

@@ -1,5 +1,5 @@
 import { nothing } from 'lit'
-import { Directive, directive, type ElementPart, type PartInfo } from 'lit/directive.js'
+import { Directive, directive, type ElementPart } from 'lit/directive.js'
 import { animationFrameScheduler, BehaviorSubject, EMPTY, fromEvent, Subject, timer } from 'rxjs'
 import { distinctUntilChanged, observeOn, skip, switchMap, take, takeUntil, tap } from 'rxjs/operators'
 import { SPRING_SNAPPY } from '../utils/animation'
@@ -146,10 +146,6 @@ export class DragDirective extends Directive {
 	private registeredId?: string
 	private destroy$ = new Subject<void>()
 
-	constructor(partInfo: PartInfo) {
-		super(partInfo)
-	}
-
 	update(part: ElementPart, [id]: [string]) {
 		this.id = id
 
@@ -285,10 +281,6 @@ export class DropDirective extends Directive {
 	private destinationId!: string
 	private destroy$ = new Subject<void>()
 
-	constructor(partInfo: PartInfo) {
-		super(partInfo)
-	}
-
 	update(part: ElementPart, [destinationId]: [string]) {
 		this.destinationId = destinationId
 

package/src/directives/index.ts

@@ -16,4 +16,3 @@ export * from './nebula';
 export * from './reduced-motion';
 export * from './reveal';
 export * from './ripple';
-export * from './typewriter';

package/src/discovery/discovery.service.ts

@@ -196,7 +196,7 @@ export function discover<T extends HTMLElement>(
 	query: string,
 	timeout = 150,
 ): Observable<T | null> {
-	const isCssSelector = /^[#.\[]/.test(query)
+	const isCssSelector = /^[#.[]/.test(query)
 
 	if (isCssSelector) {
 		return discoverElement<T>(query, timeout)

package/src/divider/divider.ts

@@ -1,21 +1,11 @@
 // divider.ts
-import { $LitElement } from '@mixins/index'
+import { SchmancyElement } from '@mixins/index'
 import { css, html } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
 
-/**
- * Thin horizontal (or vertical) separator rule between sections of content.
- *
- * @element schmancy-divider
- * @summary Semantic separator between groups — list items, menu sections, content blocks. Uses outline theme token.
- * @example
- * <schmancy-list-item>First</schmancy-list-item>
- * <schmancy-divider></schmancy-divider>
- * <schmancy-list-item>Second</schmancy-list-item>
- * @platform hr - Styled horizontal rule. Degrades to a native `<hr>` if the tag never registers.
- */
 @customElement('schmancy-divider')
-export default class SchmancyDivider extends $LitElement(css`
+export default class SchmancyDivider extends SchmancyElement {
+	static styles = [css`
 	:host {
 		display: block;
 	}
@@ -69,7 +59,8 @@ export default class SchmancyDivider extends $LitElement(css`
 		animation: grow-vertical 400ms ease-out;
 		transform-origin: center;
 	}
-`) {
+`]
+
 	@property({ type: String }) outline: 'default' | 'variant' = 'variant'
 	@property({ type: Boolean }) vertical = false
 	@property({ type: String }) grow: 'start' | 'end' | 'both' = 'start'

package/src/dropdown/dropdown-component.ts

@@ -1,30 +1,18 @@
 import { autoUpdate, computePosition, flip, offset, shift } from '@floating-ui/dom'
-import { $LitElement } from '@mixins/index'
+import { SchmancyElement } from '@mixins/index'
 import { html } from 'lit'
 import { customElement, property, query, queryAssignedElements, state } from 'lit/decorators.js'
 import { filter, fromEvent, takeUntil, Subscription } from 'rxjs'
 
 /**
- * Anchored floating dropdown — a generic "show this content relative to that trigger" primitive. Unlike schmancy-menu (which uses the dialog service and is list-shaped), dropdown is a low-level popover anchored with Floating UI. Use when you want a custom-shaped overlay tied to a specific trigger element without the menu semantics.
+ * A dropdown component that displays content when triggered.
  *
  * @element schmancy-dropdown
- * @summary Prefer schmancy-menu for action lists, schmancy-autocomplete for type-ahead, schmancy-tooltip for hover hints. Reach for schmancy-dropdown when none of those fit — custom filters, color pickers, inline forms anchored to a trigger.
- * @example
- * <schmancy-dropdown>
- *   <schmancy-button slot="trigger">Filters</schmancy-button>
- *   <schmancy-dropdown-content>
- *     <schmancy-form>…</schmancy-form>
- *   </schmancy-dropdown-content>
- * </schmancy-dropdown>
- * @platform div - Anchored via Floating UI (autoUpdate, flip, shift). Degrades to inline content if the tag never registers — loses positioning but content stays accessible.
- * @attr open - Boolean; whether the dropdown is visible.
- * @fires open - When the dropdown opens.
- * @fires close - When the dropdown closes.
  * @slot trigger - The element that triggers the dropdown
  * @slot - Default slot for the dropdown content
  */
 @customElement('schmancy-dropdown')
-export class SchmancyDropdown extends $LitElement() {
+export class SchmancyDropdown extends SchmancyElement {
 	/**
 	 * Whether the dropdown is currently open
 	 */
@@ -153,7 +141,7 @@ export class SchmancyDropdown extends $LitElement() {
 		this.open = !this.open
 	}
 
-	updated(changedProps: Map<string, any>) {
+	updated(changedProps: Map<string, unknown>) {
 		super.updated(changedProps)
 
 		if (changedProps.has('open')) {
@@ -203,6 +191,7 @@ export class SchmancyDropdown extends $LitElement() {
 					left: `${x}px`,
 					top: `${y - 8}px`,
 				})
+				return
 			})
 		})
 	}

package/src/dropdown/dropdown-content.ts

@@ -1,25 +1,18 @@
-import { TailwindElement } from '@mixins/index'
+import { SchmancyElement } from '@mixins/index'
 import { css, html } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
 
 /**
- * Content panel for a schmancy-dropdown — a styled positioned surface. Always nested inside schmancy-dropdown and placed alongside the trigger slot.
+ * Content container for the schmancy-dropdown component.
  *
  * @element schmancy-dropdown-content
- * @summary Nest this inside schmancy-dropdown (not in the trigger slot). Use the `content` CSS part to customize backgrounds / shadows / padding without shadow-root piercing.
- * @example
- * <schmancy-dropdown>
- *   <schmancy-button slot="trigger">Open</schmancy-button>
- *   <schmancy-dropdown-content>
- *     Panel contents…
- *   </schmancy-dropdown-content>
- * </schmancy-dropdown>
- * @platform div - Positioned panel with theme-aware styling. Degrades to an inline div if the tag never registers.
  * @slot - Default slot for dropdown content.
- * @csspart content - The inner wrapper element; style to override panel backgrounds, shadows, padding, or borders without shadow-root piercing.
+ * @csspart content - The inner wrapper element; style to override panel
+ *   backgrounds, shadows, padding, or borders without shadow-root piercing.
  */
 @customElement('schmancy-dropdown-content')
-export class SchmancyDropdownContent extends TailwindElement(css`
+export class SchmancyDropdownContent extends SchmancyElement {
+	static styles = [css`
 	:host {
 		display: block;
 		position: absolute;
@@ -61,7 +54,7 @@ export class SchmancyDropdownContent extends TailwindElement(css`
 		transform-origin: top left;
 		animation: dropdownAnimation 0.1s ease-out forwards;
 	}
-`) {
+`];
 	/**
 	 * Width of the dropdown content
 	 */