@mhmo91/schmancy 0.10.19 → 0.10.20

package/src/chips/filter-chip.ts

@@ -22,10 +22,8 @@ import { magnetic } from '../directives/magnetic'
 export class SchmancyFilterChip extends SchmancyElement {
 	static styles = [css`
 	:host {
-		display: inline-block;
+		display: inline-flex;
 		outline: none;
-		width: fit-content;
-		min-width: fit-content;
 		border-radius: 0.5rem;
 		transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
 	}

package/src/details/details.ts

@@ -216,7 +216,7 @@ export default class SchmancyDetails extends SurfaceMixin(SchmancyElement) {
 
 		const detailsClasses = this.classMap({
 			'w-full rounded-xl transition-shadow duration-200 ease-out': true,
-			'overflow-hidden': !this.overlay,
+			'overflow-visible': !this.overlay,
 			'overflow-visible relative': this.overlay,
 		})
 

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

@@ -1,7 +1,6 @@
 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'
 
 /**
@@ -13,62 +12,41 @@ import { fromEvent, takeUntil } from 'rxjs'
  * @prop {boolean} disabled - Whether the radio button is disabled
  */
 @customElement('schmancy-radio-button')
-export class RadioButton extends FormFieldMixin(SchmancyElement) {
-	@property({ type: String }) override value = ''
+export class RadioButton extends SchmancyElement {
+	@property({ type: String }) value = ''
 	@property({ type: Boolean, reflect: true }) checked = false
-	@property({ type: Boolean }) override disabled = false
-	@property({ type: String }) override name = ''
+	@property({ type: Boolean }) disabled = false
+	@property({ type: String }) name = ''
 
 	connectedCallback() {
 		super.connectedCallback()
-		// Listen for click events
 		fromEvent<MouseEvent>(this, 'click')
 			.pipe(takeUntil(this.disconnecting))
-			.subscribe(this.handleClick)
+			.subscribe(this._handleClick)
 	}
 
-	disconnectedCallback() {
-		super.disconnectedCallback()
-		// Event listeners are automatically cleaned up via takeUntil(this.disconnecting)
-	}
-
-	private handleClick() {
+	private _handleClick = () => {
 		if (this.disabled) return
-
-		// Find parent radio-group if exists
-		const radioGroup = this.closest('schmancy-radio-group')
-		if (radioGroup) {
-			// Let the radio-group handle the change
-			const event = new CustomEvent('radio-button-click', {
-				detail: { value: this.value },
-				bubbles: true,
-				composed: true,
-			})
-			this.dispatchEvent(event)
-		} else {
-			// Standalone usage
-			this.checked = true
-			this.emitChange({ value: this.value })
-		}
+		this.dispatchEvent(new CustomEvent('radio-button-click', {
+			detail: { value: this.value },
+			bubbles: true,
+			composed: true,
+		}))
 	}
 
 	render() {
 		return html`
-			<label class="relative flex items-start cursor-pointer">
-				<div class="flex items-center h-6">
-					<input
-						type="radio"
-						class="h-4 w-4 text-primary-default focus:ring-primary-container border-outline"
-						.value=${this.value}
-						.checked=${this.checked}
-						.disabled=${this.disabled}
-						.name=${this.name}
-						@change=${() => {}}
-					/>
-				</div>
-				<div class="ml-3">
-					<slot name="label"></slot>
-				</div>
+			<label class="flex items-center gap-3 cursor-pointer">
+				<input
+					type="radio"
+					class="h-4 w-4 text-primary-default focus:ring-primary-container border-outline"
+					.value=${this.value}
+					.checked=${this.checked}
+					.disabled=${this.disabled}
+					.name=${this.name}
+					@change=${() => {}}
+				/>
+				<slot></slot>
 			</label>
 		`
 	}

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

@@ -1,104 +1,49 @@
 import { html, unsafeCSS } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
-import { Subject, fromEvent, takeUntil } from 'rxjs'
+import { fromEvent, takeUntil } from 'rxjs'
 import style from './radio-group.scss?inline'
 import { SchmancyElement } from '@mixins/index'
 import { when } from 'lit/directives/when.js'
 import { FormFieldMixin } from '@mixins/formField.mixin'
+import type { RadioButton } from './radio-button.ts'
+
+export type SchmancyRadioGroupChangeEvent = CustomEvent<{ value: string }>
 
-export type SchmancyRadioGroupOption = {
-	label: string
-	value: string
-}
-export type SchmancyRadioGroupChangeEvent = CustomEvent<{
-	value: string
-}>
 @customElement('schmancy-radio-group')
 export class RadioGroup extends FormFieldMixin(SchmancyElement) {
-	static styles = [unsafeCSS(style)];
+	static styles = [unsafeCSS(style)]
 	@property({ type: String }) override label = ''
 	@property({ type: String }) override name = ''
 	@property({ type: String }) override value = ''
-	@property({ type: Array }) options: SchmancyRadioGroupOption[] = []
-	@property({ type: Boolean }) override required: boolean = false
-	private selection$ = new Subject<string>()
+	@property({ type: Boolean }) override required = false
 
 	connectedCallback() {
 		super.connectedCallback()
-		this.selection$.pipe(takeUntil(this.disconnecting)).subscribe(value => {
-			this.value = value
-			this.emitChange({ value })
-			// Update all child radio buttons
-			this.updateChildRadioButtons()
-		})
-
-		// Listen for radio button clicks from children
 		fromEvent<CustomEvent>(this, 'radio-button-click')
 			.pipe(takeUntil(this.disconnecting))
-			.subscribe((e: CustomEvent) => {
-				this.selection$.next(e.detail.value)
+			.subscribe((e: CustomEvent<{ value: string }>) => {
+				this.value = e.detail.value
+				this.emitChange({ value: e.detail.value })
+				this._syncChildren()
 			})
 	}
 
-	disconnectedCallback() {
-		super.disconnectedCallback()
-		// Subscriptions are automatically cleaned up via takeUntil(this.disconnecting)
-		this.selection$?.complete()
+	updated(changed: Map<string, unknown>) {
+		super.updated(changed)
+		if (changed.has('value')) this._syncChildren()
 	}
-	
-	private handleSelection(value: string) {
-		this.selection$.next(value)
-	}
-	
-	private updateChildRadioButtons() {
-		// Update child radio buttons checked state
-		const radioButtons = this.querySelectorAll('schmancy-radio-button')
-		radioButtons.forEach(button => {
-			const buttonValue = button.getAttribute('value')
-			if (buttonValue === this.value) {
-				button.setAttribute('checked', '')
-			} else {
-				button.removeAttribute('checked')
-			}
+
+	private _syncChildren() {
+		this.querySelectorAll<RadioButton>('schmancy-radio-button').forEach(btn => {
+			btn.checked = btn.value === this.value
 		})
 	}
-	
-	// For backwards compatibility with direct option setting
-	updated(changedProperties: Map<string, unknown>) {
-		super.updated(changedProperties)
-		if (changedProperties.has('value')) {
-			this.updateChildRadioButtons()
-		}
-	}
 
 	render() {
-		// Check if we have any slotted radio buttons
-		const hasSlottedContent = this.childElementCount > 0
-		
 		return html`
-			<div class="grid gap-4">
-				${when(this.label, () => html` <label class="text-base font-semibold text-surface-on">${this.label}</label> `)}
-				
-				${hasSlottedContent ? 
-					html`<slot></slot>` :
-					this.options?.map(option => html`
-						<div class="flex items-center">
-							<input
-								.required=${this.required}
-								id=${option.value}
-								class="h-4 w-4 border-outline text-primary-default focus:ring-primary-default"
-								type="radio"
-								name=${this.name}
-								.value=${option.value}
-								.checked=${option.value === this.value}
-								@change=${() => this.handleSelection(option.value)}
-							/>
-							<label for=${option.value} class="ml-3 block text-sm font-medium leading-6 text-surface-on">
-								${option.label || option.value}
-							</label>
-						</div>
-					`)
-				}
+			<div role="radiogroup" aria-label=${this.label} aria-required=${this.required} class="grid gap-2">
+				${when(this.label, () => html`<schmancy-typography type="label" token="lg">${this.label}</schmancy-typography>`)}
+				<slot></slot>
 			</div>
 		`
 	}

package/src/form/fields/select/select.ts

@@ -52,10 +52,11 @@ export class SchmancySelect extends SchmancyFormField() {
 	@property({ type: String, reflect: true })
 	override get value(): string | string[] {
 		return this.multi
-			? this._selectedValues$.value
-			: this._selectedValue$.value
+			? (this._selectedValues$?.value ?? [])
+			: (this._selectedValue$?.value ?? '')
 	}
 	override set value(val: string | string[]) {
+		if (!this._selectedValue$ || !this._selectedValues$) return
 		if (this.multi) {
 			const values = Array.isArray(val)
 				? val

package/src/overlay/overlay.component.ts

@@ -409,51 +409,41 @@ export class SchmancyOverlay extends SchmancyElement {
 			)
 			.subscribe()
 
-		// Modal tier: manual Esc (popover tiers use native toggle event).
-		if (this.tier === 'modal') {
-			fromEvent<KeyboardEvent>(document, 'keydown')
-				.pipe(
-					filter((e) => e.key === 'Escape'),
-					tap((e) => {
-						if (!this.dismissable) {
-							e.preventDefault()
-							return
-						}
+		// Manual Esc — all tiers. Modal has no native dismiss; anchored
+		// tiers use `popover="manual"` so the browser doesn't auto-Esc them
+		// either (the auto popover-stack would close ancestor overlays when
+		// a nested overlay opens — see positionPopoverAPI's comment).
+		fromEvent<KeyboardEvent>(document, 'keydown')
+			.pipe(
+				filter((e) => e.key === 'Escape'),
+				tap((e) => {
+					if (!this.dismissable) {
 						e.preventDefault()
-						void this.close('escape')
-					}),
-					takeUntil(until),
-				)
-				.subscribe()
-		}
-
-		// Popover tiers: native `toggle` event fires on open/close, with
-		// `newState: 'closed'` when the browser light-dismisses the popover.
-		if (this.tier === 'popover-fui' || this.tier === 'css-anchor') {
-			fromEvent<ToggleEvent>(this._surface, 'toggle')
-				.pipe(
-					filter((e) => e.newState === 'closed'),
-					take(1),
-					tap(() => {
-						if (!this._closing) void this.close('light-dismiss')
-					}),
-					takeUntil(until),
-				)
-				.subscribe()
-		}
+						return
+					}
+					e.preventDefault()
+					void this.close('escape')
+				}),
+				takeUntil(until),
+			)
+			.subscribe()
 
-		// Floating-UI-only tier: manual outside-click dismissal.
-		if (this.tier === 'fui-only') {
+		// Manual outside-click — all anchored tiers. Modal layouts have a
+		// backdrop that catches outside clicks via `onBackdropClick`; the
+		// anchored tiers (no backdrop) need a document-level pointerdown
+		// listener that ignores clicks whose composedPath includes the
+		// surface or anchor. Use composedPath membership (not
+		// `Node.contains`) so clicks on elements inside slotted /
+		// shadow-DOM descendants of the surface are correctly classified
+		// as "inside".
+		if (this.tier !== 'modal') {
 			fromEvent<PointerEvent>(document, 'pointerdown', { capture: true })
 				.pipe(
 					filter((e) => {
 						if (!this.dismissable) return false
-						const target = e.composedPath()[0] as Node | undefined
-						if (!target) return false
-						// Clicks inside the surface shouldn't dismiss.
-						if (this._surface?.contains(target as Node)) return false
-						// Clicks on the anchor itself shouldn't dismiss (avoid re-toggle).
-						if (this._resolvedAnchor?.el?.contains(target as Node)) return false
+						const path = e.composedPath()
+						if (this._surface && path.includes(this._surface)) return false
+						if (this._resolvedAnchor?.el && path.includes(this._resolvedAnchor.el)) return false
 						return true
 					}),
 					take(1),

package/src/overlay/overlay.positioning.ts

@@ -145,18 +145,26 @@ function cssForPlacement(p: OverlayPlacement): string {
  * ======================================================================= */
 
 /**
- * Wire the Popover API lifecycle — the surface gets `popover="auto"` and
+ * Wire the Popover API lifecycle — the surface gets `popover="manual"` and
  * `showPopover()` is called to promote it into the native top layer. No
  * position math here; the caller pairs this with `positionFloatingUI` for
  * the geometry, since Tier 2 is Popover-for-stacking + Floating UI-for-math.
  *
+ * `manual` (not `auto`) so stacked overlays don't fight the browser's
+ * popover-auto light-dismiss algorithm: opening a second `popover="auto"`
+ * that isn't a DOM/invoker descendant of the first closes the first via
+ * the toggle event. Each schmancy overlay is appended as a sibling to
+ * `<body>`, so the browser can't see the nesting and would dismiss the
+ * parent. With `manual`, schmancy owns Esc + outside-click via
+ * `wireCloseTriggers`, and the top-layer rendering is preserved.
+ *
  * Returns a cleanup function that hides the popover and strips the attr.
  */
 export function positionPopoverAPI(surface: HTMLElement): () => void {
 	if (!CAPS.popover) {
 		throw new Error('positionPopoverAPI requires Popover API support')
 	}
-	surface.setAttribute('popover', 'auto')
+	surface.setAttribute('popover', 'manual')
 	try {
 		;(surface as unknown as { showPopover(): void }).showPopover()
 	} catch {