@mhmo91/schmancy 0.10.19 → 0.10.21

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/directives/fill.ts

@@ -0,0 +1,137 @@
+import { AsyncDirective, directive } from 'lit/async-directive.js'
+import { ElementPart, PartType } from 'lit/directive.js'
+import { EMPTY, Subject, combineLatest, fromEvent, merge, timer } from 'rxjs'
+import { debounceTime, distinctUntilChanged, filter, map, startWith, switchMap, takeUntil, tap } from 'rxjs/operators'
+import { theme } from '../theme/theme.service'
+import { fromResizeObserver } from './layout'
+
+/**
+ * fill directive — anchors an element to the viewport in both dimensions
+ * and contains overflow within its viewport-anchored box.
+ *
+ * The element's `getBoundingClientRect()` top/left are subtracted from the
+ * visual viewport size; the remaining pixels are applied as inline `height`
+ * and `width`. `overflow: hidden` ensures children cannot visually escape
+ * the box; inner scroll containers (apply `overflowWithin()` on the
+ * appropriate cell) handle scrolling.
+ *
+ * Layout is the consumer's responsibility — apply Tailwind classes
+ * (`grid grid-cols-[auto_1fr] grid-rows-[1fr]`, `flex`, etc.) on the same
+ * element to express the layout. The directive provides the definite-pixel
+ * box; the consumer decides how it's divided.
+ *
+ * Cascade-independent — measurement is taken in viewport coordinates
+ * rather than computed from CSS, so the directive works regardless of
+ * what the element's ancestors declare.
+ *
+ * Reactive sources: window/visualViewport resize + scroll, orientation
+ * change, iOS keyboard focus-out, parent/element ResizeObserver, theme
+ * fullscreen toggle, theme bottom offset (safe-area / nav-bar reservation).
+ *
+ * @example sidebar + main
+ *   <app-shell
+ *     ${fill()}
+ *     class="grid grid-cols-[auto_1fr] grid-rows-[1fr]"
+ *   >
+ *     <app-rail></app-rail>
+ *     <app-content></app-content>
+ *   </app-shell>
+ */
+class Fill extends AsyncDirective {
+	private element: HTMLElement | null = null
+	private disconnecting$ = new Subject<void>()
+
+	private apply(bottomOffset: number, isFullscreen: boolean) {
+		if (!this.element) return
+		const vv = window.visualViewport
+		const vh = vv?.height ?? window.innerHeight
+		const vw = vv?.width ?? window.innerWidth
+		const rect = this.element.getBoundingClientRect()
+		const height = Math.max(0, vh - rect.top)
+		const width = Math.max(0, vw - rect.left)
+		const padding = isFullscreen ? 0 : bottomOffset
+		const s = this.element.style
+		s.boxSizing = 'border-box'
+		s.height = `${height}px`
+		s.width = `${width}px`
+		s.paddingBottom = `${padding}px`
+		s.minHeight = '0'
+		s.minWidth = '0'
+		s.overflow = 'hidden'
+	}
+
+	private subscribe() {
+		if (!this.element) return
+
+		const windowResize$ = fromEvent(window, 'resize', { passive: true })
+		const viewportEvents$ = window.visualViewport
+			? merge(
+					fromEvent(window.visualViewport, 'resize', { passive: true }),
+					fromEvent(window.visualViewport, 'scroll', { passive: true }),
+				)
+			: windowResize$
+		const orientation$ = fromEvent(window, 'orientationchange')
+		const focusOut$ = fromEvent(document, 'focusout', { passive: true }).pipe(
+			switchMap(() => timer(100)),
+		)
+		const elementResize$ = fromResizeObserver(this.element)
+		const parentResize$ = this.element.parentElement
+			? fromResizeObserver(this.element.parentElement)
+			: EMPTY
+
+		combineLatest([
+			merge(
+				windowResize$,
+				viewportEvents$,
+				orientation$,
+				focusOut$,
+				elementResize$,
+				parentResize$,
+			).pipe(debounceTime(16), startWith(null)),
+			theme.bottomOffset$,
+			theme.fullscreen$,
+		])
+			.pipe(
+				filter(() => {
+					const vv = window.visualViewport
+					return vv ? Math.abs(vv.scale - 1) <= 0.01 : true
+				}),
+				map(([, bottomOffset, isFullscreen]) => ({ bottomOffset, isFullscreen })),
+				distinctUntilChanged(
+					(a, b) => a.bottomOffset === b.bottomOffset && a.isFullscreen === b.isFullscreen,
+				),
+				tap(({ bottomOffset, isFullscreen }) => this.apply(bottomOffset, isFullscreen)),
+				takeUntil(this.disconnecting$),
+			)
+			.subscribe()
+	}
+
+	render() {
+		return
+	}
+
+	override update(part: ElementPart) {
+		if (part.type !== PartType.ELEMENT) {
+			throw new Error('fill directive can only be used on elements')
+		}
+		const el = part.element as HTMLElement
+		if (this.element !== el) {
+			this.element = el
+			this.subscribe()
+		}
+	}
+
+	protected override disconnected() {
+		this.disconnecting$.next()
+		this.element = null
+	}
+
+	protected override reconnected() {
+		if (this.element) {
+			this.disconnecting$ = new Subject<void>()
+			this.subscribe()
+		}
+	}
+}
+
+export const fill = directive(Fill)

package/src/directives/index.ts

@@ -5,6 +5,7 @@ export * from './cursor-glow';
 export * from './cycle-text';
 export * from './depth-of-field';
 export * from './drag';
+export * from './fill';
 export * from './gravity';
 export * from './intersect';
 export * from './layout';
@@ -16,3 +17,4 @@ export * from './nebula';
 export * from './reduced-motion';
 export * from './reveal';
 export * from './ripple';
+export * from './overflow-within';

package/src/directives/overflow-within.ts

@@ -0,0 +1,186 @@
+import { noChange } from 'lit'
+import { AsyncDirective, directive } from 'lit/async-directive.js'
+import { ElementPart, PartType } from 'lit/directive.js'
+import { Subject, debounceTime, filter, fromEvent, takeUntil } from 'rxjs'
+
+/**
+ * Detail payload for the directive's enriched `scroll` event.
+ */
+export interface OverflowWithinEvent
+	extends CustomEvent<{
+		scrollTop: number
+		scrollHeight: number
+		clientHeight: number
+		scrollLeft: number
+		scrollWidth: number
+		clientWidth: number
+		e: Event
+	}> {}
+
+/**
+ * Detail payload for the global `@schmancy:scrollTo` command.
+ */
+export interface OverflowWithinCommandEvent
+	extends CustomEvent<{
+		name: string
+		action: 'scrollTo'
+		top: number
+		left?: number
+	}> {}
+
+export interface OverflowWithinOptions {
+	/** Hide native scrollbars while keeping scroll behavior intact. */
+	hide?: boolean
+	/** Which axis can scroll. Default `'both'`. */
+	direction?: 'vertical' | 'horizontal' | 'both'
+	/**
+	 * Optional name for cross-component control via the global
+	 * `@schmancy:scrollTo` event.
+	 */
+	name?: string
+	/** Debounce in ms for the dispatched `scroll` event. Default `10`. */
+	debounce?: number
+}
+
+const SCROLLBAR_HIDE_CLASS = 'schmancy-overflow-within-hidden'
+let stylesheetInstalled = false
+
+function installHideStylesheet() {
+	if (stylesheetInstalled) return
+	stylesheetInstalled = true
+	const sheet = new CSSStyleSheet()
+	sheet.replaceSync(
+		`.${SCROLLBAR_HIDE_CLASS} { scrollbar-width: none; -ms-overflow-style: none; }
+		 .${SCROLLBAR_HIDE_CLASS}::-webkit-scrollbar { display: none; }`,
+	)
+	document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet]
+}
+
+/**
+ * overflowWithin directive — turns any element into a contained overflow
+ * boundary. Content stays *within* the element; what overflows scrolls
+ * inside, can't escape (overscroll contained, rubber-band suppressed).
+ *
+ *   - Overflow per `direction` axis
+ *   - Smooth scroll-behavior
+ *   - Overscroll containment (no rubber-band escape)
+ *   - Optional hidden scrollbar via a document-level stylesheet
+ *   - Debounced enriched `scroll` event
+ *   - Global `@schmancy:scrollTo` command listener (when `name` is set)
+ *   - min-height / min-width 0 so the container can clip inside grid/flex cells
+ *
+ * Apply at the element where overflow should be contained; the consumer's
+ * layout grid/flex container can itself be the overflow boundary — no
+ * wrapper element needed.
+ *
+ * @example
+ *   render() {
+ *     return html`
+ *       <div class="grid grid-rows-[auto_1fr]" ${overflowWithin({ hide: true })}>
+ *         <header>...</header>
+ *         <section>...scrollable content...</section>
+ *       </div>
+ *     `
+ *   }
+ */
+class OverflowWithinDirective extends AsyncDirective {
+	private element: HTMLElement | null = null
+	private disconnecting$ = new Subject<void>()
+	private currentName?: string
+
+	render(_options?: OverflowWithinOptions) {
+		return noChange
+	}
+
+	override update(part: ElementPart, [options = {}]: [OverflowWithinOptions?]) {
+		if (part.type !== PartType.ELEMENT) {
+			throw new Error('overflowWithin directive can only be used on elements')
+		}
+		const el = part.element as HTMLElement
+		const { hide = false, direction = 'both', name, debounce = 10 } = options
+
+		const s = el.style
+		s.minHeight = '0'
+		s.minWidth = '0'
+		s.boxSizing = 'border-box'
+		s.overflowY = direction === 'horizontal' ? 'hidden' : 'auto'
+		s.overflowX = direction === 'vertical' ? 'hidden' : 'auto'
+		s.scrollBehavior = 'smooth'
+		s.overscrollBehavior = 'contain'
+
+		if (hide) {
+			installHideStylesheet()
+			el.classList.add(SCROLLBAR_HIDE_CLASS)
+		} else {
+			el.classList.remove(SCROLLBAR_HIDE_CLASS)
+		}
+
+		const isNewElement = this.element !== el
+		const isNameChange = this.currentName !== name
+
+		if (isNewElement) {
+			this.element = el
+			this.subscribe(debounce, name)
+		} else if (isNameChange) {
+			// resubscribe with new name binding
+			this.disconnecting$.next()
+			this.disconnecting$ = new Subject<void>()
+			this.subscribe(debounce, name)
+		}
+		this.currentName = name
+
+		return noChange
+	}
+
+	private subscribe(debounce: number, name: string | undefined) {
+		if (!this.element) return
+		const el = this.element
+
+		fromEvent(el, 'scroll', { passive: true })
+			.pipe(debounceTime(debounce), takeUntil(this.disconnecting$))
+			.subscribe((e) => {
+				el.dispatchEvent(
+					new CustomEvent('scroll', {
+						detail: {
+							scrollTop: el.scrollTop,
+							scrollHeight: el.scrollHeight,
+							clientHeight: el.clientHeight,
+							scrollLeft: el.scrollLeft,
+							scrollWidth: el.scrollWidth,
+							clientWidth: el.clientWidth,
+							e,
+						},
+						bubbles: true,
+						composed: true,
+					}) as OverflowWithinEvent,
+				)
+			})
+
+		if (name !== undefined) {
+			fromEvent<OverflowWithinCommandEvent>(window, '@schmancy:scrollTo')
+				.pipe(
+					filter((evt) => evt.detail.name === name && evt.detail.action === 'scrollTo'),
+					takeUntil(this.disconnecting$),
+				)
+				.subscribe((evt) => {
+					const options: ScrollToOptions = { behavior: 'smooth', top: evt.detail.top }
+					if (typeof evt.detail.left === 'number') options.left = evt.detail.left
+					el.scrollTo(options)
+				})
+		}
+	}
+
+	protected override disconnected() {
+		this.disconnecting$.next()
+		this.element = null
+	}
+
+	protected override reconnected() {
+		if (this.element) {
+			this.disconnecting$ = new Subject<void>()
+			this.subscribe(10, this.currentName)
+		}
+	}
+}
+
+export const overflowWithin = directive(OverflowWithinDirective)

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

@@ -43,7 +43,6 @@ export * from './option';
 // 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';
 export * from './form/fields/range';

package/src/overlay/index.ts

@@ -11,5 +11,6 @@ export type {
 	OverlayPromptOptions,
 	ShowFn,
 	ShowOptions,
+	TemplateFactory,
 } from './overlay.types'
 export { lazy } from '../area/lazy'