@mhmo91/schmancy 0.9.27 → 0.10.1

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

package/src/overlay/overlay.animations.ts

@@ -1,23 +1,32 @@
 import {
 	DURATION_BACKDROP,
 	DURATION_EXIT,
-	EASE_IN,
 	EASE_OUT,
-	prefersReducedMotion,
+	getEasing,
 	SPRING_GENTLE,
+	SPRING_SMOOTH,
 	SPRING_SNAPPY,
 } from '../utils/animation'
-import type { OverlayLayout } from './overlay.types'
+import { reducedMotion$ } from '../directives/reduced-motion'
+import type { Anchor, OverlayLayout } from './overlay.types'
 
 /**
  * WAAPI keyframes + options per layout + direction.
  *
  * One animation vocabulary — no per-element bespoke keyframes. Aligns
- * with the `animation` skill (spring physics presets). Honors
- * `prefers-reduced-motion` by collapsing transforms to opacity-only.
+ * with the `animation` skill (spring physics presets). Every easing runs
+ * through `getEasing()` so modern browsers (that support
+ * `animation-timing-function: linear(0, 1)`) get the true `linear()`
+ * spring expression while older browsers fall through to the cubic-bezier
+ * fallback. Honors `prefers-reduced-motion` by collapsing transforms to
+ * opacity-only.
  *
- * Returns `null` when reduced-motion is active and only opacity change
- * is needed — the caller sets style directly.
+ * Anchor-origin bloom: the caller computes
+ * `anchorOriginVars(anchor, surfaceRect)` and writes the resulting CSS
+ * custom properties onto the surface element BEFORE triggering the
+ * entrance animation. Keyframes reference those vars via
+ * `transform-origin: var(--schmancy-overlay-origin-x, 50%) var(...)`, so
+ * the surface scales OUT of the click point — not from its own centre.
  */
 
 /**
@@ -34,7 +43,109 @@ export interface AnimationSpec {
 	}
 }
 
+/**
+ * Module-scope reduced-motion state, kept in sync with the house
+ * `reducedMotion$` BehaviorSubject. The subscribe has no teardown —
+ * module lifetime IS the subscription lifetime (house rxjs rule 4:
+ * module singletons don't need explicit teardown).
+ */
+let reducedMotion = reducedMotion$.value
+reducedMotion$.subscribe((v) => {
+	reducedMotion = v
+})
+
+const ORIGIN_X_VAR = '--schmancy-overlay-origin-x'
+const ORIGIN_Y_VAR = '--schmancy-overlay-origin-y'
+const ORIGIN_CSS = `var(${ORIGIN_X_VAR}, 50%) var(${ORIGIN_Y_VAR}, 50%)`
+
+function clampPercent(value: number): number {
+	if (Number.isNaN(value) || !Number.isFinite(value)) return 50
+	return Math.max(0, Math.min(100, value))
+}
+
+function getAnchorCenter(anchor: Anchor): { x: number; y: number } {
+	// Element | VirtualAnchor — anything exposing getBoundingClientRect()
+	if (
+		typeof (anchor as { getBoundingClientRect?: unknown }).getBoundingClientRect === 'function'
+	) {
+		const r = (anchor as { getBoundingClientRect(): DOMRect }).getBoundingClientRect()
+		return { x: r.left + r.width / 2, y: r.top + r.height / 2 }
+	}
+	// DOMRect — has left/top/width/height but no getBoundingClientRect()
+	if (
+		typeof (anchor as DOMRect).width === 'number' &&
+		typeof (anchor as DOMRect).height === 'number' &&
+		typeof (anchor as DOMRect).left === 'number' &&
+		typeof (anchor as DOMRect).top === 'number'
+	) {
+		const r = anchor as DOMRect
+		return { x: r.left + r.width / 2, y: r.top + r.height / 2 }
+	}
+	// MouseEvent / PointerEvent
+	if (typeof (anchor as MouseEvent).clientX === 'number' && typeof (anchor as MouseEvent).clientY === 'number') {
+		const e = anchor as MouseEvent
+		return { x: e.clientX, y: e.clientY }
+	}
+	// TouchEvent
+	if (
+		typeof (anchor as TouchEvent).touches !== 'undefined' &&
+		(anchor as TouchEvent).touches.length > 0
+	) {
+		const t = (anchor as TouchEvent).touches[0]
+		return { x: t.clientX, y: t.clientY }
+	}
+	// Plain { x, y } point
+	const pt = anchor as { x: number; y: number }
+	return { x: pt.x, y: pt.y }
+}
+
+/**
+ * Compute CSS-var values for the anchor-relative transform origin.
+ * Caller writes the returned record onto the surface element's style
+ * before triggering the entrance animation. When no anchor is present,
+ * returns sensible per-layout defaults (caller picks which to use):
+ *   - centered → 50% 50% (self-centre)
+ *   - sheet    → 50% 100% (rises from bottom edge)
+ *   - anchored → computed from the anchor's position relative to the
+ *                surface rect
+ */
+export function anchorOriginVars(
+	anchor: Anchor | undefined,
+	surfaceRect: DOMRect | { left: number; top: number; width: number; height: number },
+): Record<string, string> {
+	if (!anchor) {
+		return {
+			[ORIGIN_X_VAR]: '50%',
+			[ORIGIN_Y_VAR]: '50%',
+		}
+	}
+	const { x, y } = getAnchorCenter(anchor)
+	if (!surfaceRect.width || !surfaceRect.height) {
+		return {
+			[ORIGIN_X_VAR]: '50%',
+			[ORIGIN_Y_VAR]: '50%',
+		}
+	}
+	const originX = clampPercent(((x - surfaceRect.left) / surfaceRect.width) * 100)
+	const originY = clampPercent(((y - surfaceRect.top) / surfaceRect.height) * 100)
+	return {
+		[ORIGIN_X_VAR]: `${originX}%`,
+		[ORIGIN_Y_VAR]: `${originY}%`,
+	}
+}
+
 export function backdropAnimation(direction: 'in' | 'out'): AnimationSpec {
+	if (reducedMotion) {
+		return direction === 'in'
+			? {
+					keyframes: [{ opacity: 0 }, { opacity: 1 }],
+					options: { duration: 1, easing: 'linear', fill: 'forwards' },
+				}
+			: {
+					keyframes: [{ opacity: 1 }, { opacity: 0 }],
+					options: { duration: 1, easing: 'linear', fill: 'forwards' },
+				}
+	}
 	return direction === 'in'
 		? {
 				keyframes: [{ opacity: 0 }, { opacity: 1 }],
@@ -47,9 +158,7 @@ export function backdropAnimation(direction: 'in' | 'out'): AnimationSpec {
 }
 
 export function surfaceAnimation(layout: OverlayLayout, direction: 'in' | 'out'): AnimationSpec {
-	const reduced = prefersReducedMotion()
-
-	if (reduced) {
+	if (reducedMotion) {
 		// Opacity-only; explicit reset to { opacity: 1, transform: none } on `in`
 		// so any leftover transform from a prior `out` doesn't persist.
 		return direction === 'in'
@@ -71,24 +180,32 @@ export function surfaceAnimation(layout: OverlayLayout, direction: 'in' | 'out')
 
 	switch (layout) {
 		case 'centered':
+			// Anchor-origin bloom: scale 0.6 → 1 from the var-driven origin.
+			// More aggressive than dialog's 0.92 because the origin carries the
+			// spatial work, so less translate is needed. Caller sets the origin
+			// vars via anchorOriginVars() before triggering this animation.
 			return direction === 'in'
 				? {
 						keyframes: [
-							{ opacity: 0, transform: 'scale(0.92) translateY(16px)' },
-							{ opacity: 1, transform: 'scale(1) translateY(0)' },
+							{ opacity: 0, transform: 'scale(0.6)', transformOrigin: ORIGIN_CSS },
+							{ opacity: 1, transform: 'scale(1)', transformOrigin: ORIGIN_CSS },
 						],
 						options: {
 							duration: SPRING_SNAPPY.duration,
-							easing: SPRING_SNAPPY.easingFallback,
+							easing: getEasing(SPRING_SNAPPY),
 							fill: 'forwards',
 						},
 					}
 				: {
 						keyframes: [
-							{ opacity: 1, transform: 'scale(1) translateY(0)' },
-							{ opacity: 0, transform: 'scale(0.96) translateY(8px)' },
+							{ opacity: 1, transform: 'scale(1)', transformOrigin: ORIGIN_CSS },
+							{ opacity: 0, transform: 'scale(0.95)', transformOrigin: ORIGIN_CSS },
 						],
-						options: { duration: DURATION_EXIT, easing: EASE_IN, fill: 'forwards' },
+						options: {
+							duration: DURATION_EXIT,
+							easing: getEasing(SPRING_SMOOTH),
+							fill: 'forwards',
+						},
 					}
 
 		case 'sheet':
@@ -100,7 +217,7 @@ export function surfaceAnimation(layout: OverlayLayout, direction: 'in' | 'out')
 						],
 						options: {
 							duration: SPRING_GENTLE.duration,
-							easing: SPRING_GENTLE.easingFallback,
+							easing: getEasing(SPRING_GENTLE),
 							fill: 'forwards',
 						},
 					}
@@ -111,27 +228,81 @@ export function surfaceAnimation(layout: OverlayLayout, direction: 'in' | 'out')
 						],
 						options: {
 							duration: DURATION_EXIT,
-							easing: EASE_IN,
+							easing: getEasing(SPRING_SMOOTH),
 							fill: 'forwards',
 						},
 					}
 
 		case 'anchored':
-			// No transform — CSS Anchor Positioning / Floating UI owns position.
-			// Scale-from-origin via transform-origin would be nicer but conflicts
-			// with popover top-layer + position. Keep opacity-only for safety.
+			// Anchored surfaces get a scale-from-origin treatment too — the
+			// positioning strategy (Popover API / CSS Anchor / Floating UI) owns
+			// the final placement; the surface merely blooms from the anchor.
 			return direction === 'in'
 				? {
-						keyframes: [{ opacity: 0 }, { opacity: 1 }],
+						keyframes: [
+							{ opacity: 0, transform: 'scale(0.85)', transformOrigin: ORIGIN_CSS },
+							{ opacity: 1, transform: 'scale(1)', transformOrigin: ORIGIN_CSS },
+						],
 						options: {
 							duration: SPRING_SNAPPY.duration,
-							easing: SPRING_SNAPPY.easingFallback,
+							easing: getEasing(SPRING_SNAPPY),
 							fill: 'forwards',
 						},
 					}
 				: {
-						keyframes: [{ opacity: 1 }, { opacity: 0 }],
-						options: { duration: DURATION_EXIT, easing: EASE_IN, fill: 'forwards' },
+						keyframes: [
+							{ opacity: 1, transform: 'scale(1)', transformOrigin: ORIGIN_CSS },
+							{ opacity: 0, transform: 'scale(0.92)', transformOrigin: ORIGIN_CSS },
+						],
+						options: {
+							duration: DURATION_EXIT,
+							easing: getEasing(SPRING_SMOOTH),
+							fill: 'forwards',
+						},
 					}
 	}
 }
+
+/**
+ * FLIP (First / Last / Invert / Play) animation from `before` rect to
+ * `after` rect. Caller has already moved the element between the two
+ * states; this produces the WAAPI spec that animates the delta back.
+ *
+ * Used by the ResizeObserver-driven layout re-resolve in the overlay
+ * element — when content grows past threshold mid-session and the
+ * layout switches from centered → sheet, this animates the transition
+ * instead of a hard cut.
+ *
+ * Reduced-motion collapses to an instant 1ms no-op; caller should check
+ * `reducedMotion` (not exported) — or just run this and tolerate the
+ * 1ms animation.
+ */
+export function flipAnimation(
+	before: DOMRect | { left: number; top: number; width: number; height: number },
+	after: DOMRect | { left: number; top: number; width: number; height: number },
+): AnimationSpec {
+	if (reducedMotion) {
+		return {
+			keyframes: [{ transform: 'none' }, { transform: 'none' }],
+			options: { duration: 1, easing: 'linear', fill: 'forwards' },
+		}
+	}
+	const dx = before.left - after.left
+	const dy = before.top - after.top
+	const sx = after.width > 0 ? before.width / after.width : 1
+	const sy = after.height > 0 ? before.height / after.height : 1
+	return {
+		keyframes: [
+			{
+				transform: `translate(${dx}px, ${dy}px) scale(${sx}, ${sy})`,
+				transformOrigin: 'top left',
+			},
+			{ transform: 'none', transformOrigin: 'top left' },
+		],
+		options: {
+			duration: SPRING_SMOOTH.duration,
+			easing: getEasing(SPRING_SMOOTH),
+			fill: 'forwards',
+		},
+	}
+}