@mhmo91/schmancy 0.9.27 → 0.10.1

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
 

package/src/nav-drawer/appbar.ts

@@ -1,30 +1,20 @@
-import { TailwindElement } from '@mixins/index'
+import { SchmancyElement } from '@mixins/index'
 import { css, html } from 'lit'
 import { customElement } from 'lit/decorators.js'
 
 /**
- * Top app bar region inside schmancy-nav-drawer — the horizontal strip above the content area that typically holds the page title, hamburger trigger, and contextual actions.
- *
  * @element schmancy-nav-drawer-appbar
- * @summary Always nested inside schmancy-nav-drawer. Holds the page-level title + top-right actions. On mobile, the drawer's hamburger button renders inside this region.
- * @example
- * <schmancy-nav-drawer-appbar>
- *   <schmancy-typography type="title" token="lg">Dashboard</schmancy-typography>
- *   <schmancy-icon-button slot="trailing" aria-label="Notifications">
- *     <schmancy-icon>notifications</schmancy-icon>
- *   </schmancy-icon-button>
- * </schmancy-nav-drawer-appbar>
- * @platform header - Styled horizontal bar. Degrades to a plain header element if the tag never registers.
  * @slot - The default slot
  */
 @customElement('schmancy-nav-drawer-appbar')
-export class SchmancyDrawerAppbar extends TailwindElement(css`
+export class SchmancyDrawerAppbar extends SchmancyElement {
+	static styles = [css`
 	:host {
 		display: block;
 		width: 100%;
 		min-width: 0;
 	}
-`) {
+`];
 	render() {
 		return html`<slot></slot>`
 	}

package/src/nav-drawer/content.ts

@@ -1,28 +1,19 @@
-import { $LitElement } from '@mixins/index'
+import { SchmancyElement } from '@mixins/index'
 import { css, html } from 'lit'
 import { customElement } from 'lit/decorators.js'
 import { fromEvent, takeUntil } from 'rxjs'
 
-/**
- * Main content region inside schmancy-nav-drawer — typically hosts the router outlet or the page's body content.
- *
- * @element schmancy-nav-drawer-content
- * @summary Always nested inside schmancy-nav-drawer. Scrollable by default; propagates scroll events up so the drawer can collapse app-bar on scroll.
- * @example
- * <schmancy-nav-drawer-content>
- *   <schmancy-area name="main"></schmancy-area>
- * </schmancy-nav-drawer-content>
- * @platform main scroll - Scrollable `<main>`. Degrades to a plain scrollable div if the tag never registers.
- */
 @customElement('schmancy-nav-drawer-content')
-export class SchmancyNavigationDrawerContent extends $LitElement(css`
+export class SchmancyNavigationDrawerContent extends SchmancyElement {
+	static styles = [css`
 	:host {
 		display: block;
 		position: relative;
 		inset: 0;
 		overflow-y: auto;
 	}
-`) {
+`]
+
 	connectedCallback(): void {
 		super.connectedCallback()
 		fromEvent(this, 'scroll')

package/src/nav-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 } from 'lit'
 import { customElement, property, state } from 'lit/decorators.js'
 import { debounceTime, distinctUntilChanged, fromEvent, map, takeUntil, tap } from 'rxjs'
@@ -12,26 +12,12 @@ import {
 } from './context'
 
 /**
- * Responsive navigation drawer — a left sidebar that becomes a hamburger-triggered modal overlay on narrow viewports. Composes schmancy-nav-drawer-navbar (the nav rail), schmancy-nav-drawer-appbar (the top bar), and schmancy-nav-drawer-content (the main region).
- *
  * @element schmancy-nav-drawer
- * @summary The app-shell layout primitive. Wrap your whole app in this when you want "persistent sidebar on desktop, drawer on mobile" behavior. Mode auto-switches at the breakpoint.
- * @example
- * <schmancy-nav-drawer>
- *   <schmancy-nav-drawer-navbar>
- *     <!-- nav items, typically schmancy-list-item links -->
- *   </schmancy-nav-drawer-navbar>
- *   <schmancy-nav-drawer-appbar>App title</schmancy-nav-drawer-appbar>
- *   <schmancy-nav-drawer-content>
- *     <!-- router outlet / page content -->
- *   </schmancy-nav-drawer-content>
- * </schmancy-nav-drawer>
- * @platform div - Flex layout with viewport-width mode switching. Degrades to a stack of plain divs if the tag never registers.
  * @slot - The content slot
- * @fires schmancy-drawer-state - When the drawer open/close state changes on mobile.
  */
 @customElement('schmancy-nav-drawer')
-export class SchmancyNavigationDrawer extends $LitElement(css`
+export class SchmancyNavigationDrawer extends SchmancyElement {
+	static styles = [css`
 	:host {
 		display: grid;
 		grid-template-columns: auto 1fr;
@@ -50,7 +36,8 @@ export class SchmancyNavigationDrawer extends $LitElement(css`
 	:host([fullscreen]) {
 		grid-template-columns: 1fr;
 	}
-`) {
+`]
+
 	@property({ type: Boolean, reflect: true })
 	fullscreen: boolean = false
 

package/src/nav-drawer/navbar.ts

@@ -1,5 +1,5 @@
 import { consume } from '@lit/context'
-import { $LitElement } from '@mixins/index'
+import { SchmancyElement } from '@mixins/index'
 import { html } from 'lit'
 import { customElement, property, query, state } from 'lit/decorators.js'
 import { SchmancyEvents, SchmancyTheme, color } from '..'
@@ -16,22 +16,8 @@ const OVERLAY_ANIM_DURATION_OPEN = 200
 const OVERLAY_ANIM_DURATION_CLOSE = 150
 const NAV_ANIM_DURATION = 200
 
-/**
- * Sidebar region inside schmancy-nav-drawer — the persistent-on-desktop / modal-on-mobile nav rail.
- *
- * @element schmancy-nav-drawer-navbar
- * @summary Always nested inside schmancy-nav-drawer. On desktop: pinned left sidebar. On mobile: modal overlay triggered by the hamburger button in schmancy-nav-drawer-appbar.
- * @example
- * <schmancy-nav-drawer-navbar>
- *   <schmancy-list>
- *     <schmancy-list-item href="/dashboard">Dashboard</schmancy-list-item>
- *     <schmancy-list-item href="/settings">Settings</schmancy-list-item>
- *   </schmancy-list>
- * </schmancy-nav-drawer-navbar>
- * @platform nav - Sidebar `<nav>` with responsive open/close behavior. Degrades to a plain sidebar div if the tag never registers.
- */
 @customElement('schmancy-nav-drawer-navbar')
-export class SchmancyNavigationDrawerSidebar extends $LitElement() {
+export class SchmancyNavigationDrawerSidebar extends SchmancyElement {
 	// Consume context values. Renamed from "state" to "drawerState" to avoid confusion.
 	@consume({ context: SchmancyDrawerNavbarMode, subscribe: true })
 	@state()
@@ -73,7 +59,7 @@ export class SchmancyNavigationDrawerSidebar extends $LitElement() {
 	 * updated()
 	 * Trigger animations when either the consumed mode or state changes.
 	 */
-	updated(changedProperties: Map<string, any>) {
+	updated(changedProperties: Map<string, unknown>) {
 		if (!this._initialized) return
 
 		if (changedProperties.has('drawerState') || changedProperties.has('mode')) {

package/src/navigation-bar/navigation-bar-item.ts

@@ -1,4 +1,4 @@
-import { TailwindElement } from '@mixins/tailwind.mixin'
+import { SchmancyElement } from '@mixins/index'
 import { color } from '@schmancy/directives'
 import { css, html } from 'lit'
 import { customElement, property, state } from 'lit/decorators.js'
@@ -7,11 +7,12 @@ import { BehaviorSubject, fromEvent, merge, timer } from 'rxjs'
 import { takeUntil, tap, filter } from 'rxjs/operators'
 
 /**
- * Single destination inside schmancy-navigation-bar — an icon + optional label representing one primary app destination.
+ * `<schmancy-navigation-bar-item>` component
+ *
+ * Individual navigation item for use within a navigation bar.
+ * Represents a single destination with an icon and optional label following Material Design 3 specifications.
  *
  * @element schmancy-navigation-bar-item
- * @summary Always nested inside schmancy-navigation-bar. Use `icon` attr for a Material Symbols glyph or slot=icon for custom content.
- * @platform button click - Styled navigation target. Degrades to a plain `<button>` if the tag never registers.
  * @slot icon - Slot for custom icon content
  * @slot - Default slot for custom content
  *
@@ -28,7 +29,8 @@ import { takeUntil, tap, filter } from 'rxjs/operators'
  * </schmancy-navigation-bar-item>
  */
 @customElement('schmancy-navigation-bar-item')
-export class SchmancyNavigationBarItem extends TailwindElement(css`
+export class SchmancyNavigationBarItem extends SchmancyElement {
+	static styles = [css`
 	:host {
 		display: flex;
 		flex: 1;
@@ -81,7 +83,7 @@ export class SchmancyNavigationBarItem extends TailwindElement(css`
 		animation: ripple 0.6s ease-out;
 		pointer-events: none;
 	}
-`) {
+`];
 	/**
 	 * Icon name for the navigation item (Material Symbols Outlined)
 	 */