@mhmo91/schmancy 0.9.28 → 0.10.2

package/src/json/json.ts

@@ -1,11 +1,12 @@
-import { TailwindElement } from '@mixins/index'
+import { SchmancyElement } from '@mixins/index'
 import { css, html } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
 import { unsafeHTML } from 'lit/directives/unsafe-html.js'
 import { $notify } from '@schmancy/notification'
 
 @customElement('schmancy-json')
-export class SchmancyJson extends TailwindElement(css`:host { display: block }`) {
+export class SchmancyJson extends SchmancyElement {
+	static styles = [css`:host { display: block }`];
 	@property({ type: Object }) data: Record<string, any> = {}
 	@property({ type: Array }) highlightKeys: string[] = []
 	@property({ type: Boolean }) compact = false
@@ -25,7 +26,7 @@ export class SchmancyJson extends TailwindElement(css`:host { display: block }`)
 		try {
 			await navigator.clipboard.writeText(JSON.stringify(this.data, null, 2))
 			$notify.success('JSON copied to clipboard')
-		} catch (error) {
+		} catch {
 			$notify.error('Failed to copy JSON')
 		}
 	}

package/src/kbd/kbd.ts

@@ -1,4 +1,4 @@
-import { TailwindElement } from '@mixins/index'
+import { SchmancyElement } from '@mixins/index'
 import { css, html } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
 
@@ -17,7 +17,8 @@ import { customElement, property } from 'lit/decorators.js'
  * @csspart base - The inner native `<kbd>` element.
  */
 @customElement('schmancy-kbd')
-export class SchmancyKbd extends TailwindElement(css`
+export class SchmancyKbd extends SchmancyElement {
+	static styles = [css`
 	:host {
 		display: inline-block;
 		vertical-align: middle;
@@ -44,7 +45,7 @@ export class SchmancyKbd extends TailwindElement(css`
 		--_ksize: 1.25rem;
 		--_kfont: 0.6875rem;
 	}
-`) {
+`];
 	@property({ type: String, reflect: true }) size: 'sm' | 'md' = 'md'
 
 	render() {

package/src/layout/index.ts

@@ -1,5 +1 @@
-export * from './flex'
-export * from './grid'
-export * from './scroll'
-export * from './v2'
-export * from './layout'
+export * from './scroll'

package/src/layout/scroll/scroll.ts

@@ -1,4 +1,4 @@
-import { TailwindElement } from '@mixins/index'
+import { SchmancyElement } from '@mixins/index'
 import { css, html } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
 import { debounceTime, filter, fromEvent, takeUntil } from 'rxjs'
@@ -49,11 +49,7 @@ declare global {
 }
 
 /**
- * Scrollable container with debounced scroll events, horizontal/vertical direction, optional hidden scrollbar, and programmatic scrollTo via command events or refs.
- *
- * @element schmancy-scroll
- * @summary Use anywhere you'd reach for `overflow: auto` but also need debounced scroll events (for sticky headers, scroll spies, virtualization triggers) or the ability to drive scroll from elsewhere in the app by dispatching a schmancy-scroll-command event.
- * @platform div - Styled scrollable `<div>`. Degrades to a plain scrollable div if the tag never registers — loses the debounced scroll event and the command-bus integration.
+ * A custom scrollable container with enhanced features.
  *
  * @fires {SchmancyScrollEvent} scroll - Fired when scrolling occurs (with a configurable debounce)
  * @slot - Default slot for content to be scrolled
@@ -88,7 +84,8 @@ declare global {
  * ```
  */
 @customElement('schmancy-scroll')
-export class SchmancyScroll extends TailwindElement(css`
+export class SchmancyScroll extends SchmancyElement {
+	static styles = [css`
 	:host {
 		/* Flexible sizing for different layout contexts */
 		width: 100%;
@@ -113,7 +110,7 @@ export class SchmancyScroll extends TailwindElement(css`
 	:host([hide])::-webkit-scrollbar {
 		display: none; /* Chrome, Safari, and Opera */
 	}
-`) {
+`];
 	/**
 	 * Determines whether the scrollbar is hidden.
 	 *

package/src/lightbox/flip-directive.ts

@@ -259,7 +259,7 @@ class FlipDirective extends AsyncDirective {
 			if (this.element.complete) {
 				requestAnimationFrame(animate)
 			} else {
-				this.element.onload = () => requestAnimationFrame(animate)
+				this.element.addEventListener('load', () => requestAnimationFrame(animate), { once: true })
 			}
 		} else {
 			requestAnimationFrame(animate)

package/src/lightbox/lightbox.ts

@@ -4,26 +4,17 @@ import { when } from 'lit/directives/when.js'
 import { ref, createRef, Ref } from 'lit/directives/ref.js'
 import { fromEvent } from 'rxjs'
 import { filter, takeUntil, tap, switchMap, map, first } from 'rxjs/operators'
-import { $LitElement } from '@mixins/index'
+import { SchmancyElement } from '@mixins/index'
 import { overlayStack } from '../utils/overlay-stack'
 
-/**
- * Image lightbox — thumbnail grid that opens to a full-screen viewer on click, with keyboard navigation between images.
- *
- * @element schmancy-lightbox
- * @summary Drop-in for galleries / image lists where each thumbnail should expand to fill the viewport. Pass an `images` array of `{ src, alt, caption? }`.
- * @example
- * <schmancy-lightbox .images=${[{ src: '/a.jpg', alt: 'A' }, { src: '/b.jpg', alt: 'B' }]}></schmancy-lightbox>
- * @platform dialog close - Modal full-screen viewer with keyboard navigation. Degrades to a plain image grid if the tag never registers.
- * @fires change - When the active image index changes (next/prev). `detail.index` is the new active image's position in the array.
- * @fires close - When the viewer is dismissed (ESC, backdrop click, close button).
- */
 @customElement('schmancy-lightbox')
-export class SchmancyLightbox extends $LitElement(css`
+export class SchmancyLightbox extends SchmancyElement {
+	static styles = [css`
 	:host {
 		display: contents;
 	}
-`) {
+`]
+
 	@property({ type: String }) src: string = ''
 	@property({ type: Array }) images: string[] = []
 	@property({ type: Number }) initialIndex: number = 0

package/src/list/list-item.ts

@@ -1,28 +1,19 @@
 import { consume } from '@lit/context'
-import { TailwindElement } from '@mixins/index'
+import { SchmancyElement } from '@mixins/index'
 import { SchmancySurfaceTypeContext } from '@schmancy/surface/context'
 import { TSurfaceColor } from '@schmancy/types/surface'
 import { css, html } from 'lit'
 import { customElement, property, queryAssignedElements } from 'lit/decorators.js'
 
 /**
- * Single row in a schmancy-list — supports leading icon/avatar, main content, trailing actions. Clickable via click event, or used as a schmancy-menu-item's visual base.
- *
  * @element schmancy-list-item
- * @summary Prefer nesting inside schmancy-list for consistent spacing/surface. Use `href` to make the row a navigation target (renders as `<a>`), or a click handler for in-app actions.
- * @example
- * <schmancy-list-item href="/profile">
- *   <schmancy-icon slot="leading">person</schmancy-icon>
- *   Profile
- *   <schmancy-icon slot="trailing">chevron_right</schmancy-icon>
- * </schmancy-list-item>
- * @platform li click - Styled `<li>` or `<a>` depending on `href`. Degrades to a plain list item if the tag never registers.
  * @slot leading - leading content
  * @slot trailing - trailing content
  * @slot - default content
  */
 @customElement('schmancy-list-item')
-export class SchmancyListItem extends TailwindElement(css`
+export class SchmancyListItem extends SchmancyElement {
+	static styles = [css`
 	:host {
 		display: block;
 		border-radius: 0.5rem;
@@ -47,7 +38,7 @@ export class SchmancyListItem extends TailwindElement(css`
 		:host { transition: background 200ms ease; }
 		:host(:active:not([readonly])) { transform: none; }
 	}
-`) {
+`];
 	@consume({ context: SchmancySurfaceTypeContext, subscribe: true })
 	@property()
 	variant: TSurfaceColor

package/src/list/list.ts

@@ -1,5 +1,5 @@
 import { provide } from '@lit/context'
-import { TailwindElement } from '@mixins/index'
+import { SchmancyElement } from '@mixins/index'
 import { SchmancySurfaceFill } from '@schmancy/surface'
 import { TSurfaceColor } from '@schmancy/types/surface'
 import { css, html } from 'lit'
@@ -7,27 +7,29 @@ import { customElement, property } from 'lit/decorators.js'
 import { SchmancyListTypeContext } from './context'
 
 /**
- * Wrapped list container — holds schmancy-list-item children on a themed surface. Optionally scrollable.
+ * `<schmancy-list>` component.
+ *
+ * A list component that wraps its content within a customizable surface.
+ * It allows you to set the surface type and fill style, and can optionally
+ * enable scrolling behavior by delegating the scroller attribute to the surface.
  *
  * @element schmancy-list
- * @summary Use for vertical lists of similarly-shaped items: settings entries, menu items, contact lists, notification lists. Pair with schmancy-list-item children.
+ * @slot - The default slot for list items.
+ *
  * @example
  * <schmancy-list surface="container" scroller>
- *   <schmancy-list-item>First</schmancy-list-item>
- *   <schmancy-list-item>Second</schmancy-list-item>
- *   <schmancy-list-item>Third</schmancy-list-item>
+ *   <schmancy-list-item>List Item 1</schmancy-list-item>
  * </schmancy-list>
- * @platform ul - Styled list container. Degrades to a plain ul/div if the tag never registers.
- * @slot - The default slot for list items.
  */
 @customElement('schmancy-list')
-export class List extends TailwindElement(css`
+export class List extends SchmancyElement {
+	static styles = [css`
 	:host {
 		display: block;
 		padding-top: 8px;
 		padding-bottom: 8px;
 	}
-`) {
+`];
 	/**
 	 * Defines the type or color of the surface used by the component.
 	 * This value is provided to descendant components via context.

package/src/mailbox/email-editor.ts

@@ -1,4 +1,4 @@
-import { $LitElement } from '@mixins/index'
+import { SchmancyElement } from '@mixins/index'
 import { css, html } from 'lit'
 import { customElement, property, state } from 'lit/decorators.js'
 import { createRef, ref } from 'lit/directives/ref.js'
@@ -9,6 +9,7 @@ import { $dialog } from '../dialog'
 import { $notify } from '../notification'
 import { sheet } from '../sheet/sheet.service'
 import './email-layout-selector'
+import SchmancyTextarea from '../textarea/textarea'
 import { SchmancyEmailTemplatePicker } from './email-template-picker'
 import type { EmailAttachment, EmailComposeConfig, EmailTemplate } from './types'
 
@@ -32,12 +33,14 @@ import type { EmailAttachment, EmailComposeConfig, EmailTemplate } from './types
  * ```
  */
 @customElement('schmancy-email-editor')
-export class SchmancyEmailEditor extends $LitElement(css`
+export class SchmancyEmailEditor extends SchmancyElement {
+	static styles = [css`
 	:host {
 		display: block;
 		height: 100%;
 	}
-`) {
+`]
+
 	/** Email subject */
 	@property({ type: String }) subject = ''
 	
@@ -63,7 +66,7 @@ export class SchmancyEmailEditor extends $LitElement(css`
 
 	/** Element references */
 	private subjectInputRef = createRef<HTMLInputElement>()
-	private bodyTextAreaRef = createRef<any>()
+	private bodyTextAreaRef = createRef<SchmancyTextarea>()
 	private fileInputRef = createRef<HTMLInputElement>()
 	private imageInputRef = createRef<HTMLInputElement>()
 
@@ -402,7 +405,7 @@ The Fulfillment Team`
 	}
 
 	/** Handle body textarea changes */
-	private handleBodyChange = (event: any) => {
+	private handleBodyChange = (event: CustomEvent<{ value: string }>) => {
 		this.body = event.detail.value
 		this.dispatchChange()
 	}
@@ -451,6 +454,7 @@ The Fulfillment Team`
 					updatedTextarea.setSelectionRange(start + text.length, start + text.length)
 				}
 			}
+			return
 		})
 	}
 
@@ -489,6 +493,7 @@ The Fulfillment Team`
 					updatedTextarea.setSelectionRange(start + newText.length, start + newText.length)
 				}
 			}
+			return
 		})
 	}
 
@@ -685,8 +690,8 @@ Your primary content goes here. This area takes up most of the width while the s
 	private createDataUrl = (file: File): Promise<string> => {
 		return new Promise((resolve, reject) => {
 			const reader = new FileReader()
-			reader.onload = () => resolve(reader.result as string)
-			reader.onerror = reject
+			reader.addEventListener('load', () => resolve(reader.result as string), { once: true })
+			reader.addEventListener('error', () => reject(reader.error), { once: true })
 			reader.readAsDataURL(file)
 		})
 	}
@@ -695,14 +700,14 @@ Your primary content goes here. This area takes up most of the width while the s
 	private getImageDimensions = (file: File): Promise<{width: number, height: number}> => {
 		return new Promise((resolve) => {
 			const img = new Image()
-			img.onload = () => {
+			img.addEventListener('load', () => {
 				resolve({ width: img.width, height: img.height })
 				URL.revokeObjectURL(img.src)
-			}
-			img.onerror = () => {
+			}, { once: true })
+			img.addEventListener('error', () => {
 				resolve({ width: 400, height: 300 }) // Default dimensions
 				URL.revokeObjectURL(img.src)
-			}
+			}, { once: true })
 			img.src = URL.createObjectURL(file)
 		})
 	}
@@ -732,6 +737,7 @@ Your primary content goes here. This area takes up most of the width while the s
 				updatedTextarea.setSelectionRange(newPosition, newPosition)
 				updatedTextarea.focus()
 			}
+			return
 		})
 	}
 

package/src/mailbox/email-layout-selector.ts

@@ -1,4 +1,4 @@
-import { TailwindElement } from '@mixins/index'
+import { SchmancyElement } from '@mixins/index'
 import { html } from 'lit'
 import { customElement } from 'lit/decorators.js'
 
@@ -10,7 +10,7 @@ import { customElement } from 'lit/decorators.js'
  * @fires layout-select - When a layout is selected with {detail: {layout: string}}
  */
 @customElement('schmancy-email-layout-selector')
-export class SchmancyEmailLayoutSelector extends TailwindElement() {
+export class SchmancyEmailLayoutSelector extends SchmancyElement {
 	
 	private layouts = [
 		{ id: 'columns-2', icon: 'view_week', label: '2 Col' },

package/src/mailbox/email-recipients.ts

@@ -1,4 +1,4 @@
-import { $LitElement } from '@mixins/index'
+import { SchmancyElement } from '@mixins/index'
 import { css, html } from 'lit'
 import { customElement, property, state } from 'lit/decorators.js'
 import { createRef, ref } from 'lit/directives/ref.js'
@@ -6,7 +6,7 @@ import { repeat } from 'lit/directives/repeat.js'
 import { when } from 'lit/directives/when.js'
 import { fromEvent, takeUntil } from 'rxjs'
 import { $notify } from '../notification'
-import type { BoatState } from './types'
+import type { BoatState, ImportSource } from './types'
 
 /**
  * CSV parser interface (optional dependency)
@@ -39,17 +39,22 @@ interface CSVParser {
  * ```
  */
 @customElement('schmancy-email-recipients')
-export class SchmancyEmailRecipients extends $LitElement(css`
+export class SchmancyEmailRecipients extends SchmancyElement {
+	static styles = [css`
 	:host {
 		display: block;
 		height: 100%;
 	}
-`) {
+`]
+
 	/** Disable all interactions */
 	@property({ type: Boolean }) disabled = false
 	
 	/** All available recipients */
 	@property({ type: Array }) recipients: string[] = []
+
+	/** Sources users can import recipients from (forwarded from parent) */
+	@property({ type: Array }) importSources: ImportSource[] = []
 	
 	/** Currently selected recipients */
 	@property({ type: Array }) selectedRecipients: string[] = []
@@ -102,7 +107,7 @@ export class SchmancyEmailRecipients extends $LitElement(css`
 		this.requestUpdate()
 	}
 
-	updated(changedProperties: Map<string, any>) {
+	updated(changedProperties: Map<string, unknown>) {
 		super.updated(changedProperties)
 		
 		// Sync selection state when selectedRecipients prop changes
@@ -157,8 +162,8 @@ export class SchmancyEmailRecipients extends $LitElement(css`
 		}
 
 		const reader = new FileReader()
-		reader.onload = e => {
-			const content = e.target?.result as string
+		reader.addEventListener('load', e => {
+			const content = (e.target as FileReader | null)?.result as string
 			try {
 				const emails = this.parseCSV(content)
 
@@ -179,7 +184,7 @@ export class SchmancyEmailRecipients extends $LitElement(css`
 				$notify.error('Failed to parse CSV file')
 				console.error('CSV parse error:', error)
 			}
-		}
+		}, { once: true })
 		reader.readAsText(file)
 	}
 

package/src/mailbox/email-template-picker.ts

@@ -1,4 +1,4 @@
-import { $LitElement } from '@mixins/index'
+import { SchmancyElement } from '@mixins/index'
 import { css, html } from 'lit'
 import { customElement, property, state } from 'lit/decorators.js'
 import { repeat } from 'lit/directives/repeat.js'
@@ -26,11 +26,13 @@ import type { EmailTemplate } from './types'
  * ```
  */
 @customElement('schmancy-email-template-picker')
-export class SchmancyEmailTemplatePicker extends $LitElement(css`
+export class SchmancyEmailTemplatePicker extends SchmancyElement {
+	static styles = [css`
 	:host {
 		display: block;
 	}
-`) {
+`]
+
 	/** Available templates */
 	@property({ type: Array }) templates: EmailTemplate[] = []
 	
@@ -48,7 +50,7 @@ export class SchmancyEmailTemplatePicker extends $LitElement(css`
 		this.updateFilteredTemplates()
 	}
 
-	updated(changed: Map<string, any>) {
+	updated(changed: Map<string, unknown>) {
 		if (changed.has('templates') || changed.has('searchQuery') || changed.has('selectedCategory')) {
 			this.updateFilteredTemplates()
 		}
@@ -234,7 +236,6 @@ export class SchmancyEmailTemplatePicker extends $LitElement(css`
 											<schmancy-email-viewer
 												subject=${template.subject}
 												body=${template.body}
-												mode="desktop"
 												class="max-h-96 overflow-y-auto"
 											></schmancy-email-viewer>
 										</div>

package/src/mailbox/email-viewer.ts

@@ -1,4 +1,4 @@
-import { $LitElement } from '@mixins/index'
+import { SchmancyElement } from '@mixins/index'
 import { css, html } from 'lit'
 import { customElement, property, state } from 'lit/decorators.js'
 import { repeat } from 'lit/directives/repeat.js'
@@ -28,11 +28,13 @@ import type { EmailAttachment, EmailPreviewMode } from './types'
  * ```
  */
 @customElement('schmancy-email-viewer')
-export class SchmancyEmailViewer extends $LitElement(css`
+export class SchmancyEmailViewer extends SchmancyElement {
+	static styles = [css`
 	:host {
 		display: block;
 	}
-`) {
+`]
+
 	/** Email subject */
 	@property({ type: String }) subject = ''
 	

package/src/mailbox/mailbox.ts

@@ -1,4 +1,4 @@
-import { $LitElement } from '@mixins/index'
+import { SchmancyElement } from '@mixins/index'
 import { html, css } from 'lit'
 import { customElement, property, state } from 'lit/decorators.js'
 import { when } from 'lit/directives/when.js'
@@ -30,12 +30,14 @@ import type {
  * ```
  */
 @customElement('schmancy-mailbox')
-export class SchmancyMailbox extends $LitElement(css`
+export class SchmancyMailbox extends SchmancyElement {
+	static styles = [css`
 	:host {
 		display: block;
 		height: 100%;
 	}
-`) {
+`]
+
 	/** Configuration for endpoints and handlers */
 	@property({ type: Object }) config: EmailComposeConfig = {}
 	
@@ -77,7 +79,7 @@ export class SchmancyMailbox extends $LitElement(css`
 		this.setSending(this.disabled)
 	}
 
-	updated(changedProperties: Map<string, any>) {
+	updated(changedProperties: Map<string, unknown>) {
 		super.updated(changedProperties)
 		
 		// Sync sending state
@@ -323,7 +325,6 @@ export class SchmancyMailbox extends $LitElement(css`
 							<schmancy-button
 								variant="filled"
 								?disabled=${!canSend}
-								?loading=${this.isSending}
 								@click=${this.handleSend}
 								class="w-full sm:w-auto"
 							>

package/src/map/map.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 { ref, createRef } from 'lit/directives/ref.js'
@@ -30,6 +30,7 @@ declare global {
 }
 
 // Singleton for managing Google Maps script loading
+// oxlint-disable-next-line typescript/no-extraneous-class
 class GoogleMapsLoader {
   private static loading$?: Observable<boolean>
 
@@ -64,10 +65,10 @@ class GoogleMapsLoader {
         observer.complete()
       }
 
-      script.onerror = (error) => {
+      script.addEventListener('error', (error) => {
         console.error('Google Maps script loading error:', error)
         observer.error(new Error('Failed to load Google Maps. Please check API key configuration and ensure the domain is authorized.'))
-      }
+      }, { once: true })
 
       document.head.appendChild(script)
     }).pipe(
@@ -103,7 +104,8 @@ class GoogleMapsLoader {
  * <schmancy-map address="Eiffel Tower, Paris" interactive="false" controls="false"></schmancy-map>
  */
 @customElement('schmancy-map')
-export default class SchmancyMap extends TailwindElement(css`
+export default class SchmancyMap extends SchmancyElement {
+	static styles = [css`
   :host {
     display: block;
     position: relative;
@@ -165,7 +167,7 @@ export default class SchmancyMap extends TailwindElement(css`
     color: var(--schmancy-sys-color-surface-onVariant);
     line-height: 1.5;
   }
-`) {
+`];
   /**
    * Simple address string that automatically geocodes to display the location.
    * Takes precedence over latitude/longitude if both are provided.
@@ -409,7 +411,7 @@ export default class SchmancyMap extends TailwindElement(css`
     })
   }
 
-  protected updated(changedProperties: Map<string, any>) {
+  protected updated(changedProperties: Map<string, unknown>) {
     super.updated(changedProperties)
 
     if (changedProperties.has('height')) {

package/src/menu/menu-item.ts

@@ -1,27 +1,16 @@
-import { $LitElement } from '@mixins/index'
+import { SchmancyElement } from '@mixins/index'
 import { css, html } from 'lit'
 import { customElement } from 'lit/decorators.js'
 import { $dialog } from '../dialog/dialog-service'
 
-/**
- * Single item inside a schmancy-menu. Auto-dismisses the menu dialog on click — attach your action handler to `@click` and it just works.
- *
- * @element schmancy-menu-item
- * @summary Always nested inside schmancy-menu. The click handler runs before the dialog closes, so `@click=${() => doThing()}` is the full pattern.
- * @example
- * <schmancy-menu-item @click=${() => archive()}>
- *   <schmancy-icon slot="leading">archive</schmancy-icon>
- *   Archive
- * </schmancy-menu-item>
- * @platform menuitem click - Wraps schmancy-list-item with auto-dismiss. Degrades to a styled `<button role="menuitem">` if the tag never registers.
- * @slot - The item label and optional icons.
- */
 @customElement('schmancy-menu-item')
-export default class SchmancyMenuItem extends $LitElement(css`
+export default class SchmancyMenuItem extends SchmancyElement {
+	static styles = [css`
 	:host {
 		display: block;
 	}
-`) {
+`]
+
 
 	protected render(): unknown {
 		return html`

package/src/menu/menu.ts

@@ -1,33 +1,47 @@
-import { $LitElement } from '@mixins/index'
+import { SchmancyElement } from '@mixins/index'
 import { css, html } from 'lit'
 import { customElement, query } from 'lit/decorators.js'
 import { $dialog } from '../dialog/dialog-service'
 
 /**
- * Floating menu — a trigger button + a list of schmancy-menu-item children that open as a positioned dialog on click.
+ * Menu Component
  *
- * @element schmancy-menu
- * @summary Use for dropdown menus attached to a button or icon — "More actions", "Account", row overflow menus in tables. Clicking a schmancy-menu-item inside auto-dismisses; custom components slotted inside must call `$dialog.dismiss()` themselves.
- * @example
+ * CRITICAL: The dialog ONLY renders the raw menu items passed via the default slot.
+ * NO <ul> wrapper, NO classes, NO additional markup in the dialog call.
+ * The dialog service handles positioning and display - we just pass the pure content.
+ *
+ * @example Basic menu with auto-dismiss
+ * ```typescript
+ * <schmancy-menu>
+ *   <schmancy-button slot="trigger">Actions</schmancy-button>
+ *   <schmancy-menu-item @click=${() => editItem()}>Edit</schmancy-menu-item>
+ *   <schmancy-menu-item @click=${() => deleteItem()}>Delete</schmancy-menu-item>
+ * </schmancy-menu>
+ * ```
+ * Note: Dialog auto-dismisses when schmancy-menu-item is clicked
+ *
+ * @example Custom component (manual dismiss)
+ * ```typescript
  * <schmancy-menu>
- *   <schmancy-icon-button slot="trigger" aria-label="Actions">
- *     <schmancy-icon>more_vert</schmancy-icon>
- *   </schmancy-icon-button>
- *   <schmancy-menu-item @click=${() => edit()}>Edit</schmancy-menu-item>
- *   <schmancy-menu-item @click=${() => remove()}>Delete</schmancy-menu-item>
+ *   <schmancy-icon-button slot="trigger">settings</schmancy-icon-button>
+ *   <my-settings-form @submit=${() => $dialog.dismiss()}></my-settings-form>
  * </schmancy-menu>
- * @platform menu close - Trigger + floating listbox dialog. Degrades to a native `<select>` or inline list if the tag never registers.
+ * ```
+ * Note: Custom components must call $dialog.dismiss() manually
+ *
  * @slot trigger - Button to open menu (new naming)
  * @slot button - Button to open menu (backward compatible)
  * @slot default - Menu items or any custom component to display in dialog
  */
 @customElement('schmancy-menu')
-export default class SchmancyMenu extends $LitElement(css`
+export default class SchmancyMenu extends SchmancyElement {
+	static styles = [css`
 	:host {
 		position: relative;
 		display: flex;
 	}
-`) {
+`]
+
 	@query('slot:not([name])')
 	private menuSlot!: HTMLSlotElement