@mhmo91/schmancy 0.10.18 → 0.10.20

package/src/button/icon-button.ts

@@ -16,13 +16,16 @@ import { ButtonVariant } from './button'
 export class SchmnacyIconButton extends SchmancyElement {
 	static styles = [css`
 	:host {
-		display: inline-block;
-		width: fit-content;
+		display: inline-flex;
 		border-radius: 9999px;
 		transition:
 			box-shadow 300ms cubic-bezier(0.34, 1.56, 0.64, 1),
 			transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
 	}
+	:host([width="full"]) {
+		display: flex;
+		width: 100%;
+	}
 	:host(:hover:not([disabled])) {
 		box-shadow: 0 2px 12px -4px color-mix(in srgb, var(--schmancy-sys-color-primary-default) 18%, transparent);
 	}
@@ -71,7 +74,7 @@ export class SchmnacyIconButton extends SchmancyElement {
 	 * @type {'full' | 'auto'}
 	 * @default 'auto'
 	 */
-	@property()
+	@property({ reflect: true })
 	public width: 'full' | 'auto' = 'auto'
 
 	/**
@@ -189,7 +192,7 @@ export class SchmnacyIconButton extends SchmancyElement {
 		event.stopPropagation()
 	}
 
-	protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void {
+	protected firstUpdated(_changedProperties: PropertyValueMap<unknown> | Map<PropertyKey, unknown>): void {
 		// Add any first-update logic here if needed.
 	}
 
@@ -210,7 +213,7 @@ export class SchmnacyIconButton extends SchmancyElement {
 					effectiveVariant === 'filled' ||
 					effectiveVariant === 'filled tonal'),
 			'hover:shadow-sm': !this.disabled && effectiveVariant === 'elevated',
-			'w-full text-center': this.width === 'full',
+			'flex-1 text-center': this.width === 'full',
 			'bg-surface-low text-primary-default shadow-xs': effectiveVariant === 'elevated',
 			'bg-transparent text-primary-default border-1 border-outline': effectiveVariant === 'outlined',
 			'bg-primary-default text-primary-on': effectiveVariant === 'filled',

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/index.ts

@@ -35,6 +35,14 @@ export * from './navigation-bar';
 export * from './navigation-rail';
 export * from './notification';
 export * from './option';
+// Overlay's `show`, `confirm`, `prompt`, etc. need to surface through
+// the main barrel. Module Federation's static-export discovery (and
+// rolldown's tree-shake analysis through MF virtual modules) walks
+// the package's main entry to enumerate available exports, so when
+// downstream code does `import { show } from '@mhmo91/schmancy/overlay'`
+// inside a federated context, the build-time check passes only if
+// `show` is reachable from the main barrel.
+export * from './overlay';
 export * from './page';
 export * from './progress';
 export * from './form/fields/radio-group';

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 {

package/src/state/index.ts

@@ -209,10 +209,22 @@ function detectKind(value: unknown): RuntimeKind {
 // share a single registry. Without this, source-state and dist-state would
 // each maintain their own `claimed` set and could both register the same
 // namespace, producing two singletons with the same name.
+//
+// Module Federation is the load-driver here: when web bundles its own copy
+// of schmancy/state and so does owl (the remote), both modules execute and
+// each tries to register every namespace its consumers declare. The global
+// claim Set is what dedupes that. The instance map below is what makes the
+// dedup TRANSPARENT — `state('user/state').memory(null)` returns the same
+// bound singleton the first caller got, so consumers don't need to know
+// who arrived first.
 const CLAIMED_KEY = Symbol.for('schmancy.state.claimed')
+const INSTANCES_KEY = Symbol.for('schmancy.state.instances')
 const __claimedSlot = (globalThis as { [CLAIMED_KEY]?: Set<string> })
 __claimedSlot[CLAIMED_KEY] ??= new Set<string>()
 const claimed = __claimedSlot[CLAIMED_KEY]!
+const __instancesSlot = (globalThis as { [INSTANCES_KEY]?: Map<string, unknown> })
+__instancesSlot[INSTANCES_KEY] ??= new Map<string, unknown>()
+const instances = __instancesSlot[INSTANCES_KEY]!
 
 // ---------------------------------------------------------------------------
 // Context resolution.
@@ -576,17 +588,27 @@ function createInstance(args: CreateInstanceArgs, options: CreateInstanceOptions
 }
 
 function makeHandle(namespace: string): Record<string, (initial: unknown) => unknown> {
-	if (claimed.has(namespace)) {
-		throw new Error(
-			`[state] namespace "${namespace}" already registered. Each namespace must be unique.`,
-		)
-	}
+	// Idempotent on `(namespace, storage)`. The first caller for a given
+	// namespace+storage combination creates the instance; later callers get
+	// the same instance back regardless of `initial`. (Initial value is
+	// scoped to construction by definition.) This makes the factory safe
+	// under module-duplication conditions — Module Federation's loadShare
+	// proxies, multiple build-time copies of schmancy, dev/HMR re-evaluation.
 	claimed.add(namespace)
+	const ensure = (storage: 'memory' | 'local' | 'session' | 'indexeddb') =>
+		(initial: unknown) => {
+			const key = `${namespace}@${storage}`
+			const cached = instances.get(key)
+			if (cached !== undefined) return cached
+			const instance = createInstance({ namespace, initial, storage })
+			instances.set(key, instance)
+			return instance
+		}
 	return {
-		memory: initial => createInstance({ namespace, initial, storage: 'memory' }),
-		local: initial => createInstance({ namespace, initial, storage: 'local' }),
-		session: initial => createInstance({ namespace, initial, storage: 'session' }),
-		idb: initial => createInstance({ namespace, initial, storage: 'indexeddb' }),
+		memory: ensure('memory'),
+		local: ensure('local'),
+		session: ensure('session'),
+		idb: ensure('indexeddb'),
 	}
 }