@mhmo91/schmancy 0.9.28 → 0.10.2

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)
 	 */

package/src/navigation-bar/navigation-bar.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'
@@ -15,11 +15,17 @@ const NAV_BAR_HEIGHT = 80
 const MOBILE_BREAKPOINT = '(max-width: 767px)'
 
 /**
- * Bottom navigation bar — Material Design 3 horizontal nav for mobile primary destinations (3–7 items). Auto-hides in fullscreen mode.
+ * `<schmancy-navigation-bar>` component
+ *
+ * A horizontal navigation component following Material Design 3 specifications.
+ * Navigation bars provide access to between 3-7 primary destinations.
+ * Automatically hides in fullscreen mode when triggered via schmancyTheme.next({ fullscreen: true }).
+ *
+ * **IMPORTANT**: This component includes `z-10` by default (consistent with navigation-rail).
+ * The consumer is responsible for positioning the navigation bar in their layout.
+ * For typical bottom-fixed positioning, add: `class="fixed bottom-0 left-0 right-0"`.
  *
  * @element schmancy-navigation-bar
- * @summary Use for mobile primary navigation (home, search, favorites, settings). For persistent desktop nav, prefer schmancy-navigation-rail or schmancy-nav-drawer. Consumer is responsible for fixed-bottom positioning via class.
- * @platform nav - Styled horizontal nav with schmancy-navigation-bar-item children. Degrades to a plain flex container if the tag never registers.
  * @slot - Default slot for navigation bar items
  *
  * @fires navigation-change - When an item is selected
@@ -43,7 +49,8 @@ const MOBILE_BREAKPOINT = '(max-width: 767px)'
  * </div>
  */
 @customElement('schmancy-navigation-bar')
-export class SchmancyNavigationBar extends TailwindElement(css`
+export class SchmancyNavigationBar extends SchmancyElement {
+	static styles = [css`
 	:host {
 		display: block;
 		transition: transform 0.3s ease-in-out;
@@ -64,7 +71,7 @@ export class SchmancyNavigationBar extends TailwindElement(css`
 		outline: 2px solid var(--schmancy-sys-color-primary);
 		outline-offset: -2px;
 	}
-`) {
+`];
 	/**
 	 * Observable for active index state
 	 */
@@ -262,7 +269,7 @@ export class SchmancyNavigationBar extends TailwindElement(css`
 	private handleItemClick = (event: CustomEvent) => {
 		const items = this.getItems()
 		const clickedItem = event.target as HTMLElement
-		const index = items.indexOf(clickedItem as any)
+		const index = items.findIndex(it => it === clickedItem)
 
 		if (index === -1) return
 
@@ -330,8 +337,7 @@ export class SchmancyNavigationBar extends TailwindElement(css`
 			case ' ':
 				event.preventDefault()
 				if (this.focusedIndex !== -1) {
-					const item = items[this.focusedIndex] as any
-					item?.click()
+					items[this.focusedIndex]?.click()
 				}
 				break
 		}
@@ -394,21 +400,15 @@ export class SchmancyNavigationBar extends TailwindElement(css`
 	private updateActiveStates(activeIndex: number) {
 		const items = this.getItems()
 		items.forEach((item, index) => {
-			const navItem = item as any
 			// Use setActive method to trigger item's reactive update
-			if (navItem.setActive) {
-				navItem.setActive(index === activeIndex)
-			} else {
-				// Fallback for backward compatibility
-				navItem.active = index === activeIndex
-			}
-			navItem.hideLabels = this.hideLabels
+			item.setActive(index === activeIndex)
+			item.hideLabels = this.hideLabels
 			// Set tabindex for accessibility
-			;(item as HTMLElement).tabIndex = index === activeIndex ? 0 : -1
+			item.tabIndex = index === activeIndex ? 0 : -1
 		})
 	}
 
-	updated(changedProperties: Map<string, any>) {
+	updated(changedProperties: Map<string, unknown>) {
 		super.updated(changedProperties)
 
 		if (changedProperties.has('hideLabels')) {

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

@@ -1,4 +1,4 @@
-import { $LitElement } from '@mixins/index'
+import { SchmancyElement } from '@mixins/index'
 import { html, PropertyValues } from 'lit'
 import { customElement, property, state } from 'lit/decorators.js'
 import { when } from 'lit/directives/when.js'
@@ -13,11 +13,15 @@ export type NavigationRailItemClickEvent = CustomEvent<{
 }>
 
 /**
- * Single destination inside schmancy-navigation-rail — vertically-stacked icon + optional label. @see https://m3.material.io/components/navigation-rail/overview
+ * Material Design 3 Navigation Rail Item Component
+ * @see https://m3.material.io/components/navigation-rail/overview
+ *
+ * `<schmancy-navigation-rail-item>` component
+ *
+ * Individual navigation item for use within a navigation rail.
+ * Represents a single destination or action with an icon and optional label.
  *
  * @element schmancy-navigation-rail-item
- * @summary Always nested inside schmancy-navigation-rail. Use `icon` attr for a Material Symbols glyph, or slot=icon for custom content. Supports a `badge` slot for notification dots / counts.
- * @platform button click - Styled vertical navigation target. Degrades to a plain `<button>` if the tag never registers.
  * @slot icon - Slot for the navigation item icon (e.g., schmancy-icon)
  * @slot - Default slot for custom content
  * @slot badge - Custom badge content
@@ -55,7 +59,7 @@ export type NavigationRailItemClickEvent = CustomEvent<{
  * </schmancy-navigation-rail-item>
  */
 @customElement('schmancy-navigation-rail-item')
-export class SchmancyNavigationRailItem extends $LitElement() {
+export class SchmancyNavigationRailItem extends SchmancyElement {
 	// Observable state
 	private hovering$ = new BehaviorSubject<boolean>(false)
 	private pressing$ = new BehaviorSubject<boolean>(false)

package/src/navigation-rail/navigation-rail.ts

@@ -1,4 +1,4 @@
-import { $LitElement } from '@mixins/index'
+import { SchmancyElement } from '@mixins/index'
 import { html, PropertyValues } from 'lit'
 import { customElement, property, queryAssignedElements, state } from 'lit/decorators.js'
 import { BehaviorSubject, fromEvent, takeUntil } from 'rxjs'
@@ -15,20 +15,16 @@ export type NavigationRailFabClickEvent = CustomEvent<void>
 export type LabelVisibility = 'all' | 'selected' | 'none'
 
 /**
- * Vertical navigation rail — Material Design 3 compact left-side nav for desktop / tablet layouts with 3–7 primary destinations. Auto-hides in fullscreen mode. @see https://m3.material.io/components/navigation-rail/overview
+ * Material Design 3 Navigation Rail Component
+ * @see https://m3.material.io/components/navigation-rail/overview
+ *
+ * `<schmancy-navigation-rail>` component
+ *
+ * A Material Design 3 vertical navigation component positioned on the left side of an application.
+ * Navigation rails provide access to between 3-7 primary destinations with a compact footprint.
+ * Automatically hides in fullscreen mode when triggered via schmancyTheme.next({ fullscreen: true }).
  *
  * @element schmancy-navigation-rail
- * @summary Use as the desktop counterpart of schmancy-navigation-bar: same destinations, different form factor. Prefer schmancy-nav-drawer when you also want a drawer + app-bar combo.
- * @example
- * <schmancy-navigation-rail activeIndex="0">
- *   <schmancy-icon-button slot="fab" variant="filled">
- *     <schmancy-icon>add</schmancy-icon>
- *   </schmancy-icon-button>
- *   <schmancy-navigation-rail-item icon="home" label="Home"></schmancy-navigation-rail-item>
- *   <schmancy-navigation-rail-item icon="search" label="Search"></schmancy-navigation-rail-item>
- *   <schmancy-navigation-rail-item icon="settings" label="Settings"></schmancy-navigation-rail-item>
- * </schmancy-navigation-rail>
- * @platform nav - Vertical styled nav. Degrades to a plain vertical flex container if the tag never registers.
  * @slot fab - Slot for a floating action button at the top
  * @slot menu - Slot for a menu icon or button below the FAB
  * @slot header - Custom header content slot
@@ -59,7 +55,7 @@ export type LabelVisibility = 'all' | 'selected' | 'none'
  * </schmancy-navigation-rail>
  */
 @customElement('schmancy-navigation-rail')
-export class SchmancyNavigationRail extends $LitElement() {
+export class SchmancyNavigationRail extends SchmancyElement {
 	// Observable state
 	private activeIndex$ = new BehaviorSubject<number>(-1)
 

package/src/notification/notification-service.ts

@@ -330,5 +330,3 @@ export const $notify = {
 		return NotificationService.getInstance().update(id, options)
 	},
 }
-
-export default NotificationService

package/src/notification/notification.ts

@@ -1,5 +1,5 @@
-import { $LitElement } from '@mixins/index'
-import { html } from 'lit'
+import { SchmancyElement } from '@mixins/index'
+import { html, unsafeCSS } from 'lit'
 import { customElement, property, state } from 'lit/decorators.js'
 import { BehaviorSubject, timer, interval, NEVER } from 'rxjs'
 import { switchMap, takeUntil, map, tap, distinctUntilChanged } from 'rxjs/operators'
@@ -31,7 +31,9 @@ function calculateArcPoint(
  * @fires close - When notification is closed
  */
 @customElement('sch-notification')
-export default class SchmancyNotification extends $LitElement(style) {
+export default class SchmancyNotification extends SchmancyElement {
+	static styles = [unsafeCSS(style)];
+
 	@property({ type: String }) title = ''
 	@property({ type: String }) message = ''
 	@property({ type: String }) type: NotificationType = 'info'
@@ -65,6 +67,7 @@ export default class SchmancyNotification extends $LitElement(style) {
 		// Animate in after first render
 		this.updateComplete.then(() => {
 			this.animateIn()
+			return
 		})
 
 		if (this.duration > 0) {

package/src/option/option.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 { fromEvent, takeUntil } from 'rxjs'
@@ -9,7 +9,8 @@ import { fromEvent, takeUntil } from 'rxjs'
  * @fires click - When the option is clicked
  */
 @customElement('schmancy-option')
-export default class SchmancyOption extends TailwindElement(css`
+export default class SchmancyOption extends SchmancyElement {
+	static styles = [css`
 	:host {
 		display: block;
 		cursor: pointer;
@@ -30,7 +31,7 @@ export default class SchmancyOption extends TailwindElement(css`
 		opacity: 0.5;
 		pointer-events: none;
 	}
-`) {
+`];
 	/**
 	 * The value of the option, will be used when selected.
 	 */