@mhmo91/schmancy 0.9.28 → 0.10.2

package/src/overlay/overlay.service.ts

@@ -1,8 +1,10 @@
 import {
+	BehaviorSubject,
 	defer,
 	defaultIfEmpty,
 	distinctUntilChanged,
 	EMPTY,
+	filter,
 	firstValueFrom,
 	fromEvent,
 	map,
@@ -44,6 +46,72 @@ import type {
  */
 export const openOverlays$: Observable<readonly OverlayEntry[]> = internalStack$
 
+/* ======================================================================= *
+ *                        ambient event capture                              *
+ * ======================================================================= *
+ * Novel: callers do not need to pass `anchor: event` manually. The service
+ * listens to pointerdown / click / keydown at capture phase on the document
+ * and remembers the most-recent user gesture. When show() is invoked
+ * synchronously (or shortly after) in response to that gesture, the remembered
+ * event becomes the default anchor. This matches the "anchored is the novel
+ * default" principle without forcing callers to thread events through
+ * handlers.
+ *
+ * Staleness guard: an event older than AMBIENT_ANCHOR_MAX_AGE_MS is ignored.
+ * Timer-driven or async show() calls that don't originate from a user gesture
+ * fall through to centered / sheet layout.
+ */
+const AMBIENT_ANCHOR_MAX_AGE_MS = 750
+
+interface AmbientAnchor {
+	event: MouseEvent
+	capturedAt: number
+}
+
+/**
+ * BehaviorSubject projected off three document-level event streams,
+ * merged as Observables per rxjs principle 3 (every async source
+ * lifted into fromEvent). Keydown activations synthesize a MouseEvent
+ * at the focused element's bounding rect so the anchor path can
+ * carry keyboard-triggered opens uniformly.
+ *
+ * The singleton subscribe has no explicit teardown — the module's
+ * lifetime IS the subscription's lifetime, which is the correct
+ * SUBSCRIPTION_IS_STATE shape for a document-level event sink.
+ */
+const ambientAnchor$ = new BehaviorSubject<AmbientAnchor | null>(null)
+
+if (typeof document !== 'undefined') {
+	const pointerdown$ = fromEvent<PointerEvent>(document, 'pointerdown', { capture: true, passive: true }).pipe(
+		map((e): AmbientAnchor => ({ event: e, capturedAt: performance.now() })),
+	)
+	const click$ = fromEvent<MouseEvent>(document, 'click', { capture: true, passive: true }).pipe(
+		map((e): AmbientAnchor => ({ event: e, capturedAt: performance.now() })),
+	)
+	const keydown$ = fromEvent<KeyboardEvent>(document, 'keydown', { capture: true }).pipe(
+		filter((e) => e.target instanceof Element),
+		map((e): AmbientAnchor => {
+			const rect = (e.target as Element).getBoundingClientRect()
+			const synthetic = new MouseEvent('click', {
+				clientX: rect.left + rect.width / 2,
+				clientY: rect.top + rect.height / 2,
+				bubbles: true,
+			})
+			return { event: synthetic, capturedAt: performance.now() }
+		}),
+	)
+
+	merge(pointerdown$, click$, keydown$).subscribe((ambient) => ambientAnchor$.next(ambient))
+}
+
+function ambientAnchor(): MouseEvent | undefined {
+	const cur = ambientAnchor$.value
+	if (!cur) return undefined
+	if (performance.now() - cur.capturedAt > AMBIENT_ANCHOR_MAX_AGE_MS) return undefined
+	return cur.event
+}
+
+
 /* ======================================================================= *
  *                                   show                                    *
  * ======================================================================= */
@@ -72,6 +140,13 @@ export function show<T = void>(
 	options: ShowOptions = {},
 ): Observable<T | undefined> {
 	return defer(() => {
+		// Resolve anchor at subscribe time: caller's explicit anchor wins,
+		// otherwise the ambient gesture captured by ambientAnchor$ fills in.
+		const resolvedOptions: ShowOptions = {
+			...options,
+			anchor: options.anchor ?? ambientAnchor(),
+		}
+
 		return new Observable<T | undefined>((subscriber) => {
 			let el: SchmancyOverlay | null = null
 			let entry: OverlayEntry | null = null
@@ -88,14 +163,17 @@ export function show<T = void>(
 					await el.updateComplete
 
 					// Open it — mount content, resolve layout, animate in.
-					await el.open(content, options)
+					await el.open(content, resolvedOptions)
 
-					// Register with the stack (post-open so layout is resolved).
+					// Register with the stack (post-open so layout, modal, tier are all
+					// resolved by the element).
 					const id = generateId()
 					entry = {
 						id,
 						element: el,
 						layout: el.layout,
+						modal: el.modal,
+						tier: el.tier,
 					}
 					pushEntry(entry)
 
@@ -105,7 +183,7 @@ export function show<T = void>(
 					}
 
 					// History integration — push a sentinel unless silent.
-					const strategy: THistoryStrategy = options.historyStrategy ?? 'push'
+					const strategy: THistoryStrategy = resolvedOptions.historyStrategy ?? 'push'
 					if (strategy === 'push') {
 						history.pushState({ __schmancyOverlayId: id }, '', location.href)
 						historyPushed = true

package/src/overlay/overlay.stack.ts

@@ -46,21 +46,19 @@ export function clearStack(): void {
 	}
 }
 
-/** Top entry (LIFO). Undefined when stack is empty. */
-export function topEntry(): OverlayEntry | undefined {
-	const s = stack$$.value
-	return s[s.length - 1]
-}
-
 /* ---------------- scroll lock -------------------------------------------- */
 
 /**
- * Ref-counted body scroll lock, derived from the stack's length.
+ * Ref-counted body scroll lock. Active whenever ANY modal-tier overlay is
+ * in the stack. Popover-tier (Tier 1/2) overlays do NOT lock body scroll —
+ * a menu / share card / picker shouldn't freeze the page scroll behind it
+ * (that's platform UX convention).
+ *
  * Subscription is idempotent — subscribing multiple times won't stack
  * effects, because it's a distinctUntilChanged boolean projection.
  *
- * Inner overlay close does NOT release the lock while an outer is still
- * open (this was the pre-existing bug in sheet.service.ts).
+ * Inner overlay close does NOT release the lock while an outer modal is
+ * still open (this was the pre-existing bug in sheet.service.ts).
  */
 let scrollLockActive = false
 let previousOverflow = ''
@@ -68,7 +66,7 @@ let previousScrollbarGutter = ''
 
 stack$$
 	.pipe(
-		map((s) => s.length > 0),
+		map((s) => s.some((e) => e.modal)),
 		distinctUntilChanged(),
 	)
 	.subscribe((shouldLock) => {

package/src/overlay/overlay.types.ts

@@ -13,16 +13,56 @@ import type { THistoryStrategy } from '../area/router.types'
  */
 export type Content = ComponentType | TemplateResult
 
+/**
+ * Virtual reference object — same contract Floating UI and CSS Anchor
+ * Positioning accept. A caller who needs to anchor off something that
+ * isn't a real element (e.g. a computed region, a scroll-clipped shape)
+ * passes one of these. Must expose `getBoundingClientRect()` returning
+ * a DOMRect-shaped value.
+ */
+export interface VirtualAnchor {
+	getBoundingClientRect(): DOMRect
+}
+
 /**
  * Anchor hint for positioning. When provided, the layout engine tries to
- * anchor the overlay near this point via Floating UI / CSS Anchor Positioning.
+ * anchor the overlay near this point via the Tier-1/2/3 positioning ladder
+ * (CSS Anchor Positioning → Popover API + Floating UI → Floating UI only).
  * Falls back to centered / sheet if the anchored position can't fit.
  *
- * `MouseEvent | TouchEvent` — idiomatic: pass the event that triggered the show.
- * `HTMLElement` — anchor to the element's bounding box (menus, tooltips).
- * `{ x, y }` — explicit coordinates (rare; for programmatic positioning).
+ * Forms accepted (typeof-discriminated at runtime):
+ * - `MouseEvent | TouchEvent` — pass the event that triggered the show (most idiomatic)
+ * - `HTMLElement` — anchor to the element's bounding box (menus, tooltips)
+ * - `DOMRect` — explicit rect (rare; useful when the anchoring surface is virtual)
+ * - `VirtualAnchor` — anything with `getBoundingClientRect()` (computed regions)
+ * - `{ x: number; y: number }` — explicit coordinates (last resort)
+ */
+export type Anchor =
+	| MouseEvent
+	| TouchEvent
+	| HTMLElement
+	| DOMRect
+	| VirtualAnchor
+	| { x: number; y: number }
+
+/**
+ * Floating UI `Placement` subset the overlay exposes as a preferred
+ * placement hint. The full set of 12 placements is supported internally;
+ * this narrower list covers the practical cases a caller would name.
  */
-export type Anchor = MouseEvent | HTMLElement | { x: number; y: number }
+export type OverlayPlacement =
+	| 'top'
+	| 'top-start'
+	| 'top-end'
+	| 'bottom'
+	| 'bottom-start'
+	| 'bottom-end'
+	| 'left'
+	| 'left-start'
+	| 'left-end'
+	| 'right'
+	| 'right-start'
+	| 'right-end'
 
 /**
  * How the overlay should behave. All optional; the system handles every
@@ -61,6 +101,24 @@ export interface ShowOptions {
 	 *  - `'replace'` — replace current entry; back skips the overlay.
 	 *  - `'silent'` — no history; for tooltips / transient / ephemeral UI. */
 	historyStrategy?: THistoryStrategy
+
+	/** Preferred placement for anchored layouts. The positioning engine
+	 *  (Floating UI `flip` middleware on Tier 2/3, CSS `position-try` on
+	 *  Tier 1) will fall back when the preferred side doesn't fit.
+	 *  Default is `'bottom-start'`. Ignored for centered / sheet layouts. */
+	preferredPlacement?: OverlayPlacement
+
+	/** Render a tail arrow pointing from the surface to the anchor.
+	 *  Default `false`. Only meaningful on anchored layouts. */
+	arrow?: boolean
+
+	/** For anchored layouts: auto-track the anchor element's bounding rect
+	 *  via `autoUpdate` (Floating UI tiers) or native `anchor-name` tracking
+	 *  (CSS Anchor Positioning tier). Default `true` when an element anchor
+	 *  is passed; `false` when a point / DOMRect / event anchor is passed
+	 *  (those are inherently one-shot).
+	 */
+	track?: boolean
 }
 
 /**
@@ -73,6 +131,19 @@ export interface ShowOptions {
  */
 export type OverlayLayout = 'centered' | 'anchored' | 'sheet'
 
+/**
+ * Positioning tier an anchored overlay is using.
+ * - `'css-anchor'` — Tier 1: Popover API + CSS Anchor Positioning (Chromium).
+ *                    Lives in native top-layer; the library's z-index stack
+ *                    does not manage it.
+ * - `'popover-fui'` — Tier 2: Popover API + Floating UI. Native top-layer;
+ *                    z-index stack also skipped.
+ * - `'fui-only'` — Tier 3: Floating UI only, manual backdrop + click-outside.
+ *                    Uses the library's z-index stack.
+ * - `'modal'` — centered / sheet layout; custom shell, library z-index.
+ */
+export type OverlayTier = 'css-anchor' | 'popover-fui' | 'fui-only' | 'modal'
+
 /**
  * Read-only snapshot of an active overlay. Emitted as part of the
  * `openOverlays$` stream for stack introspection.
@@ -85,6 +156,13 @@ export interface OverlayEntry {
 	readonly element: HTMLElement
 	/** Current layout, chosen by the dispatch engine. */
 	readonly layout: OverlayLayout
+	/** Whether this overlay traps focus + inerts siblings. Centered / sheet
+	 *  default to modal; anchored defaults to non-modal (popover-like). */
+	readonly modal: boolean
+	/** Which positioning tier is in use. Scroll lock + sibling-inert only
+	 *  fire for `'modal'` and `'fui-only'` tiers — native top-layer tiers
+	 *  (`'popover-fui'`, `'css-anchor'`) handle stacking via the platform. */
+	readonly tier: OverlayTier
 }
 
 /**

package/src/page/page.ts

@@ -1,4 +1,4 @@
-import { $LitElement } from '@mixins/index'
+import { SchmancyElement } from '@mixins/index'
 import { css, html } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
 import '../layout/scroll/scroll'
@@ -8,20 +8,24 @@ import { theme } from '../theme/theme.service'
 import { fromResizeObserver } from '../directives/layout'
 
 /**
- * Mobile-first page container — fills remaining viewport height, suppresses double-tap zoom / pull-to-refresh / rubber-banding. Lays children in a CSS grid whose row template is `rows`.
+ * Native mobile-like page container.
+ * Prevents double-tap zoom, pull-to-refresh, rubber-banding.
+ * Automatically fills remaining viewport height.
  *
  * @element schmancy-page
- * @summary The root of any app view — wraps header / main / footer children in a full-viewport grid. Use rows="auto_1fr_auto" to make the middle child scroll while header/footer stay pinned.
+ *
  * @example
- * <schmancy-page rows="auto_1fr_auto">
- *   <schmancy-nav-drawer-appbar>Title</schmancy-nav-drawer-appbar>
- *   <main>Scrollable content</main>
- *   <schmancy-navigation-bar></schmancy-navigation-bar>
- * </schmancy-page>
- * @platform div - Full-height CSS-grid container. Degrades to a plain div if the tag never registers — children still flow vertically but without the height fill and gesture suppression.
+ * html`
+ *   <schmancy-page rows="1fr_2fr_auto">
+ *     <header>App Bar</header>
+ *     <main>Scrollable content</main>
+ *     <footer>Navigation</footer>
+ *   </schmancy-page>
+ * `
  */
 @customElement('schmancy-page')
-export class SchmancyPage extends $LitElement(css`
+export class SchmancyPage extends SchmancyElement {
+	static styles = [css`
 	:host {
 		display: block;
 		box-sizing: border-box;
@@ -29,7 +33,8 @@ export class SchmancyPage extends $LitElement(css`
 		overscroll-behavior: none;
 		-webkit-tap-highlight-color: transparent;
 	}
-`) {
+`]
+
 	/** Custom grid-template-rows using underscores (e.g. "1fr_2fr_auto") */
 	@property({ type: String })
 	rows = 'auto_1fr_auto'

package/src/payment-card-form/index.ts

@@ -0,0 +1 @@
+export * from './payment-card-form'

package/src/{components/form-elements → payment-card-form}/payment-card-form.ts

@@ -1,4 +1,4 @@
-import { $LitElement } from '@mixins/index'
+import { SchmancyElement } from '@mixins/index'
 import SchmancyForm from '@schmancy/form/form'
 import { SchmancyInputChangeEvent } from '@schmancy/input'
 import SchmancyInput from '@schmancy/input/input'
@@ -15,7 +15,7 @@ import { customElement, property, query, state } from 'lit/decorators.js'
  * @slot - Default slot for any additional content
  */
 @customElement('schmancy-payment-card-form')
-export class SchmancyPaymentCardForm extends $LitElement() {
+export class SchmancyPaymentCardForm extends SchmancyElement {
 	/**
 	 * The form data containing all payment card information
 	 */
@@ -69,7 +69,7 @@ export class SchmancyPaymentCardForm extends $LitElement() {
 	 */
 	firstUpdated(): void {
 		// Credit card number formatter with type detection
-		new Cleave(this.cardNumberInput, {
+		void new Cleave(this.cardNumberInput, {
 			creditCard: true,
 			creditCardStrictMode: true,
 			onCreditCardTypeChanged: type => {
@@ -95,7 +95,7 @@ export class SchmancyPaymentCardForm extends $LitElement() {
 		})
 
 		// Expiration date formatter (MM/YY)
-		new Cleave(this.expirationDateInput, {
+		void new Cleave(this.expirationDateInput, {
 			date: true,
 			datePattern: ['m', 'y'],
 			onValueChanged: e => {
@@ -130,7 +130,7 @@ export class SchmancyPaymentCardForm extends $LitElement() {
 		})
 
 		// CVV formatter (numeric only)
-		new Cleave(this.cvvInput, {
+		void new Cleave(this.cvvInput, {
 			blocks: [4], // Maximum size for AMEX
 			numericOnly: true,
 			onValueChanged: e => {
@@ -149,7 +149,7 @@ export class SchmancyPaymentCardForm extends $LitElement() {
 		})
 
 		// Card name formatter (uppercase)
-		new Cleave(this.cardNameInput, {
+		void new Cleave(this.cardNameInput, {
 			uppercase: true,
 			delimiter: ' ',
 			onValueChanged: e => {
@@ -209,7 +209,7 @@ export class SchmancyPaymentCardForm extends $LitElement() {
 					e.preventDefault()
 				}}
 			>
-				<schmancy-grid gap="md" class="w-full">
+				<div class="grid grid-flow-row auto-rows-max flex-1 gap-4 w-full">
 					<!-- Card Name Field -->
 					<schmancy-input
 						autocomplete="cc-name"
@@ -217,11 +217,11 @@ export class SchmancyPaymentCardForm extends $LitElement() {
 						.value=${this.cardName ?? ''}
 						.error=${!this.isCardNameValid}
 						type="text"
-						label="Name on card"
-						required
-						hint="${!this.isCardNameValid
+						.label=${'Name on card'}
+						.required=${true}
+						.hint=${!this.isCardNameValid
 							? 'Please enter the name as it appears on the card'
-							: 'Enter the name exactly as it appears on your card'}"
+							: 'Enter the name exactly as it appears on your card'}
 						@change=${(e: SchmancyInputChangeEvent) => {
 							this.cardName = e.detail.value
 							this.value.cardName = e.detail.value
@@ -235,10 +235,10 @@ export class SchmancyPaymentCardForm extends $LitElement() {
 							autocomplete="cc-number"
 							id="cardNumber"
 							type="text"
-							label="Card number"
+							.label=${'Card number'}
 							.error=${!this.isCardNumberValid}
-							required
-							hint="${!this.isCardNumberValid ? 'Please enter a valid card number' : 'Your 16-digit card number'}"
+							.required=${true}
+							.hint=${!this.isCardNumberValid ? 'Please enter a valid card number' : 'Your 16-digit card number'}
 							@change=${(e: SchmancyInputChangeEvent) => {
 								this.cardNumber = e.detail.value
 								this.value.cardNumber = e.detail.value
@@ -249,7 +249,7 @@ export class SchmancyPaymentCardForm extends $LitElement() {
 					</div>
 
 					<!-- Responsive grid for expiration date and CVV -->
-					<schmancy-grid gap="md" cols="1fr 1fr" class="w-full">
+					<div class="grid grid-cols-[1fr_1fr] gap-4 w-full">
 						<schmancy-input
 							autocomplete="cc-exp"
 							id="expirationDate"
@@ -260,10 +260,10 @@ export class SchmancyPaymentCardForm extends $LitElement() {
 							}}
 							type="text"
 							.error=${!this.isExpirationDateValid}
-							label="Expiration date"
+							.label=${'Expiration date'}
 							placeholder="MM/YY"
-							required
-							hint="${!this.isExpirationDateValid ? 'Invalid expiration date' : 'MM/YY format'}"
+							.required=${true}
+							.hint=${!this.isExpirationDateValid ? 'Invalid expiration date' : 'MM/YY format'}
 						></schmancy-input>
 
 						<schmancy-input
@@ -274,21 +274,21 @@ export class SchmancyPaymentCardForm extends $LitElement() {
 								this.value.cvv = e.detail.value
 								this.emitChange()
 							}}
-							label="CVV"
+							.label=${'CVV'}
 							.error=${!this.isCvvValid}
-							required
+							.required=${true}
 							type="text"
 							maxlength="${this.cardType === 'amex' ? '4' : '3'}"
 							minlength="${this.cardType === 'amex' ? '4' : '3'}"
-							hint="${!this.isCvvValid ? 'Invalid security code' : 'Security code on back of card'}"
+							.hint=${!this.isCvvValid ? 'Invalid security code' : 'Security code on back of card'}
 						></schmancy-input>
-					</schmancy-grid>
+					</div>
 
 					<!-- Show card acceptability notice -->
 					<div class="text-sm text-secondary-onContainer mt-2">${this.renderSecurityNotice()}</div>
 
 					<slot></slot>
-				</schmancy-grid>
+				</div>
 			</schmancy-form>
 		`
 	}

package/src/progress/progress.ts

@@ -1,11 +1,12 @@
-import { $LitElement } from '@mixins/litElement.mixin'
+import { SchmancyElement } from '@mixins/index'
 import { css, html } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
 import { classMap } from 'lit/directives/class-map.js'
 import { styleMap } from 'lit/directives/style-map.js'
 
 @customElement('schmancy-progress')
-export default class SchmancyProgress extends $LitElement(css`
+export default class SchmancyProgress extends SchmancyElement {
+  static styles = [css`
   :host {
     display: block;
   }
@@ -39,7 +40,8 @@ export default class SchmancyProgress extends $LitElement(css`
   .indeterminate-animation {
     animation: indeterminate 1.8s cubic-bezier(0.34, 1.2, 0.64, 1) infinite;
   }
-`) {
+`]
+
   @property({ type: Number, reflect: true })
   value = 0
 

package/src/qr-scanner/qr-scanner.ts

@@ -1,39 +1,27 @@
-import { $LitElement } from '@mixins/litElement.mixin'
+import { SchmancyElement } from '@mixins/index'
+import jsQR from 'jsqr'
 import { css, html } from 'lit'
 import { customElement, property, state } from 'lit/decorators.js'
 import { when } from 'lit/directives/when.js'
 import { animationFrames, Subject, timer } from 'rxjs'
 import { distinctUntilChanged, filter, map, takeUntil, throttleTime } from 'rxjs/operators'
 
-// jsQR (~53 KB gzipped) is loaded lazily the first time a camera stream
-// is attached — see ADR 0014. Until this resolves, scanFrame() returns
-// null and no decode happens, so the animationFrames loop spins harmlessly.
-type JsQR = typeof import('jsqr').default
-let jsQRFn: JsQR | null = null
-let jsQRPromise: Promise<JsQR> | null = null
-function loadJsQR(): Promise<JsQR> {
-	if (jsQRPromise) return jsQRPromise
-	jsQRPromise = import('jsqr').then(m => {
-		jsQRFn = m.default
-		return m.default
-	})
-	return jsQRPromise
-}
-
 interface QRScanResult {
 	data: string
 	timestamp: number
 }
 
 @customElement('schmancy-qr-scanner')
-export class SchmancyQRScanner extends $LitElement(css`
+export class SchmancyQRScanner extends SchmancyElement {
+	static styles = [css`
 	:host {
 		display: block;
 		width: 100%;
 		height: 100%;
 		min-height: 300px;
 	}
-`) {
+`]
+
 	@property({ type: Boolean }) continuous = true
 
 	@state() private hasPermission = false
@@ -69,12 +57,6 @@ export class SchmancyQRScanner extends $LitElement(css`
 			if (this.videoElement) {
 				this.videoElement.srcObject = this.stream
 				await this.videoElement.play()
-				// Preload jsQR before starting the animationFrames loop so the
-				// first few frames have the decoder available. If the fetch
-				// hasn't finished by the time a frame fires, scanFrame() just
-				// returns null for that tick — no decode, no error.
-				await loadJsQR()
-				if (!this.isConnected) return
 				this.startScanning()
 			}
 		} catch (error) {
@@ -142,12 +124,7 @@ export class SchmancyQRScanner extends $LitElement(css`
 			ctx.drawImage(this.videoElement, 0, 0)
 			const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height)
 
-			// Skip this frame if jsQR hasn't resolved yet — startCamera awaits
-			// loadJsQR() before this path runs, so in practice jsQRFn is
-			// always set here. Keeping the guard for safety during racy
-			// disconnects.
-			if (!jsQRFn) return null
-			const code = jsQRFn(imageData.data, imageData.width, imageData.height)
+			const code = jsQR(imageData.data, imageData.width, imageData.height)
 
 			if (code && code.data) {
 				return {

package/src/radio-group/radio-button.ts

@@ -1,21 +1,11 @@
-import { TailwindElement } from '@mixins/index'
+import { SchmancyElement } from '@mixins/index'
 import { html } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
 import { FormFieldMixin } from '../../mixins/formField.mixin'
 import { fromEvent, takeUntil } from 'rxjs'
 
 /**
- * Single radio button — always rendered as a child of `<schmancy-radio-group>`, never standalone.
- *
- * @element schmancy-radio-button
- * @summary Low-level primitive. Use schmancy-radio-group and pass `.options` for the common path; only instantiate schmancy-radio-button directly when you need per-button custom rendering.
- * @example
- * <schmancy-radio-group name="plan">
- *   <schmancy-radio-button value="free">Free</schmancy-radio-button>
- *   <schmancy-radio-button value="pro" checked>Pro</schmancy-radio-button>
- * </schmancy-radio-group>
- * @platform radio change - Schmancy-skinned `<input type="radio">` semantics. Degrades to native radio if the tag never registers.
- * @fires radio-button-click - Internal event consumed by the parent schmancy-radio-group; `detail.value` is the clicked button's value. Listen on schmancy-radio-group for the public `change` event instead of subscribing here.
+ * Radio button component for use within radio groups.
  *
  * @prop {string} name - Name attribute for grouping radio buttons
  * @prop {string} value - Value of this radio button
@@ -23,7 +13,7 @@ import { fromEvent, takeUntil } from 'rxjs'
  * @prop {boolean} disabled - Whether the radio button is disabled
  */
 @customElement('schmancy-radio-button')
-export class RadioButton extends FormFieldMixin(TailwindElement()) {
+export class RadioButton extends FormFieldMixin(SchmancyElement) {
 	@property({ type: String }) override value = ''
 	@property({ type: Boolean, reflect: true }) checked = false
 	@property({ type: Boolean }) override disabled = false

package/src/radio-group/radio-group.ts

@@ -1,8 +1,8 @@
-import { html } from 'lit'
+import { html, unsafeCSS } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
 import { Subject, fromEvent, takeUntil } from 'rxjs'
 import style from './radio-group.scss?inline'
-import { TailwindElement } from '@mixins/index'
+import { SchmancyElement } from '@mixins/index'
 import { when } from 'lit/directives/when.js'
 import { FormFieldMixin } from '../../mixins/formField.mixin'
 
@@ -13,26 +13,9 @@ export type SchmancyRadioGroupOption = {
 export type SchmancyRadioGroupChangeEvent = CustomEvent<{
 	value: string
 }>
-/**
- * Radio-button group — single-select from a static list of mutually-exclusive options. Form-associated.
- *
- * @element schmancy-radio-group
- * @summary Use for 2–5 mutually-exclusive options where all should stay visible ("Shipping: standard / express / overnight"). Prefer schmancy-select when the list grows.
- * @example
- * <schmancy-radio-group
- *   name="shipping"
- *   label="Shipping"
- *   .options=${[
- *     { label: 'Standard (5 days)', value: 'standard' },
- *     { label: 'Express (2 days)', value: 'express' },
- *     { label: 'Overnight', value: 'overnight' },
- *   ]}
- * ></schmancy-radio-group>
- * @platform radiogroup change - Renders schmancy-radio-button children. Degrades to a fieldset with native `<input type="radio" name="…">` siblings if the tag never registers.
- * @fires change - `SchmancyRadioGroupChangeEvent` with the selected `value`.
- */
 @customElement('schmancy-radio-group')
-export class RadioGroup extends FormFieldMixin(TailwindElement(style)) {
+export class RadioGroup extends FormFieldMixin(SchmancyElement) {
+	static styles = [unsafeCSS(style)];
 	@property({ type: String }) override label = ''
 	@property({ type: String }) override name = ''
 	@property({ type: String }) override value = ''
@@ -81,7 +64,7 @@ export class RadioGroup extends FormFieldMixin(TailwindElement(style)) {
 	}
 	
 	// For backwards compatibility with direct option setting
-	updated(changedProperties: Map<string, any>) {
+	updated(changedProperties: Map<string, unknown>) {
 		super.updated(changedProperties)
 		if (changedProperties.has('value')) {
 			this.updateChildRadioButtons()