@mhmo91/schmancy 0.9.28 → 0.10.2

package/src/details/details.ts

@@ -1,4 +1,4 @@
-import { TailwindElement, SurfaceMixin } from '@mixins/index'
+import { SchmancyElement, SurfaceMixin } from '@mixins/index'
 import { css, html, LitElement, nothing } from 'lit'
 import { customElement, property, state } from 'lit/decorators.js'
 import { cursorGlow } from '../directives/cursor-glow'
@@ -9,21 +9,9 @@ import { distinctUntilChanged, filter, take, takeUntil, tap } from 'rxjs/operato
 import { SPRING_SNAPPY } from '../utils/animation.js'
 import { reducedMotion$ } from '../directives/reduced-motion'
 
-/**
- * Expandable disclosure panel — a styled `<details>` / `<summary>` pair with animated expand + overlay options.
- *
- * @element schmancy-details
- * @summary Use for progressive-disclosure content: FAQs, collapsible settings sections, accordion-style lists. Prefer schmancy-expand for full-page accordions where only one section can be open at a time.
- * @example
- * <schmancy-details summary="Shipping details">
- *   <p>Order ships in 2 business days.</p>
- * </schmancy-details>
- * @platform details toggle - Wraps native `<details>`/`<summary>`. Degrades to the native element if the tag never registers — same keyboard accessibility, just no animation.
- * @fires toggle - When the open state changes (bubbles from the native `<details>`).
- */
 @customElement('schmancy-details')
-export default class SchmancyDetails extends SurfaceMixin(
-	TailwindElement(css`
+export default class SchmancyDetails extends SurfaceMixin(SchmancyElement) {
+	static styles = [css`
 		:host {
 			display: block;
 			transition: box-shadow 400ms cubic-bezier(0.34, 1.2, 0.64, 1);
@@ -138,8 +126,7 @@ export default class SchmancyDetails extends SurfaceMixin(
 				transition: none;
 			}
 		}
-	`),
-) {
+	`];
 	protected static shadowRootOptions = {
 		...LitElement.shadowRootOptions,
 		mode: 'open' as const,

package/src/dialog/dialog-service.ts

@@ -240,6 +240,7 @@ export class DialogService {
 
 							// Remove from DOM
 							dialog.parentElement?.removeChild(dialog)
+							return
 						})
 						.catch((error: unknown) => {
 							target.reject?.(error)
@@ -421,6 +422,7 @@ export class DialogService {
 				content: container,
 			}).then(confirmed => {
 				resolve(confirmed ? inputValue : null)
+				return
 			})
 		})
 	}

package/src/dialog/dialog.component.ts

@@ -10,28 +10,28 @@ import { DialogBase } from './dialog-base.mixin'
 import { DialogHereMorty, DialogWhereAreYouRicky, DialogWhereAreYouRickyEvent } from './dialog-events'
 
 /**
- * Modal dialog — content-only (just a styled panel) or confirm mode (title + message + confirm/cancel buttons). Prefer the imperative `$dialog` service for most use cases; use the element directly only when you want a declaratively-positioned dialog.
+ * Unified dialog component that handles both content-only and confirm modes.
  *
  * @element schmancy-dialog
- * @summary Blocks interaction with the rest of the page until dismissed. For quick confirmations, prefer `$dialog.confirm({ ... })` over this element. For arbitrary dialog content driven imperatively, prefer `$dialog.component(MyComponent)`.
- * @platform dialog close - Positioned overlay in light DOM. Degrades to a styled `<dialog>` if the tag never registers — loses custom animations but keeps focus trap + ESC close.
  * @slot default - Content slot for dialog body (used in content mode)
  * @slot content - Named slot for custom content in confirm mode
- * @fires confirm - In confirm mode, when the confirm button is clicked.
- * @fires cancel - In confirm mode, when the cancel button or ESC is activated.
  *
  * @example Content mode (no buttons):
+ * ```html
  * <schmancy-dialog>
  *   <my-custom-content></my-custom-content>
  * </schmancy-dialog>
+ * ```
  *
  * @example Confirm mode (with buttons):
+ * ```html
  * <schmancy-dialog
- *   title="Delete item?"
- *   message="This action cannot be undone."
- *   confirm-text="Delete"
- *   cancel-text="Keep"
+ *   title="Confirm Action"
+ *   message="Are you sure?"
+ *   confirm-text="Yes"
+ *   cancel-text="No"
  * ></schmancy-dialog>
+ * ```
  */
 @customElement('schmancy-dialog')
 export class SchmancyDialog extends DialogBase(

package/src/directives/drag.ts

@@ -1,5 +1,5 @@
 import { nothing } from 'lit'
-import { Directive, directive, type ElementPart, type PartInfo } from 'lit/directive.js'
+import { Directive, directive, type ElementPart } from 'lit/directive.js'
 import { animationFrameScheduler, BehaviorSubject, EMPTY, fromEvent, Subject, timer } from 'rxjs'
 import { distinctUntilChanged, observeOn, skip, switchMap, take, takeUntil, tap } from 'rxjs/operators'
 import { SPRING_SNAPPY } from '../utils/animation'
@@ -146,10 +146,6 @@ export class DragDirective extends Directive {
 	private registeredId?: string
 	private destroy$ = new Subject<void>()
 
-	constructor(partInfo: PartInfo) {
-		super(partInfo)
-	}
-
 	update(part: ElementPart, [id]: [string]) {
 		this.id = id
 
@@ -285,10 +281,6 @@ export class DropDirective extends Directive {
 	private destinationId!: string
 	private destroy$ = new Subject<void>()
 
-	constructor(partInfo: PartInfo) {
-		super(partInfo)
-	}
-
 	update(part: ElementPart, [destinationId]: [string]) {
 		this.destinationId = destinationId
 

package/src/directives/index.ts

@@ -16,4 +16,3 @@ export * from './nebula';
 export * from './reduced-motion';
 export * from './reveal';
 export * from './ripple';
-export * from './typewriter';

package/src/discovery/discovery.service.ts

@@ -196,7 +196,7 @@ export function discover<T extends HTMLElement>(
 	query: string,
 	timeout = 150,
 ): Observable<T | null> {
-	const isCssSelector = /^[#.\[]/.test(query)
+	const isCssSelector = /^[#.[]/.test(query)
 
 	if (isCssSelector) {
 		return discoverElement<T>(query, timeout)

package/src/divider/divider.ts

@@ -1,21 +1,11 @@
 // divider.ts
-import { $LitElement } from '@mixins/index'
+import { SchmancyElement } from '@mixins/index'
 import { css, html } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
 
-/**
- * Thin horizontal (or vertical) separator rule between sections of content.
- *
- * @element schmancy-divider
- * @summary Semantic separator between groups — list items, menu sections, content blocks. Uses outline theme token.
- * @example
- * <schmancy-list-item>First</schmancy-list-item>
- * <schmancy-divider></schmancy-divider>
- * <schmancy-list-item>Second</schmancy-list-item>
- * @platform hr - Styled horizontal rule. Degrades to a native `<hr>` if the tag never registers.
- */
 @customElement('schmancy-divider')
-export default class SchmancyDivider extends $LitElement(css`
+export default class SchmancyDivider extends SchmancyElement {
+	static styles = [css`
 	:host {
 		display: block;
 	}
@@ -69,7 +59,8 @@ export default class SchmancyDivider extends $LitElement(css`
 		animation: grow-vertical 400ms ease-out;
 		transform-origin: center;
 	}
-`) {
+`]
+
 	@property({ type: String }) outline: 'default' | 'variant' = 'variant'
 	@property({ type: Boolean }) vertical = false
 	@property({ type: String }) grow: 'start' | 'end' | 'both' = 'start'

package/src/dropdown/dropdown-component.ts

@@ -1,30 +1,18 @@
 import { autoUpdate, computePosition, flip, offset, shift } from '@floating-ui/dom'
-import { $LitElement } from '@mixins/index'
+import { SchmancyElement } from '@mixins/index'
 import { html } from 'lit'
 import { customElement, property, query, queryAssignedElements, state } from 'lit/decorators.js'
 import { filter, fromEvent, takeUntil, Subscription } from 'rxjs'
 
 /**
- * Anchored floating dropdown — a generic "show this content relative to that trigger" primitive. Unlike schmancy-menu (which uses the dialog service and is list-shaped), dropdown is a low-level popover anchored with Floating UI. Use when you want a custom-shaped overlay tied to a specific trigger element without the menu semantics.
+ * A dropdown component that displays content when triggered.
  *
  * @element schmancy-dropdown
- * @summary Prefer schmancy-menu for action lists, schmancy-autocomplete for type-ahead, schmancy-tooltip for hover hints. Reach for schmancy-dropdown when none of those fit — custom filters, color pickers, inline forms anchored to a trigger.
- * @example
- * <schmancy-dropdown>
- *   <schmancy-button slot="trigger">Filters</schmancy-button>
- *   <schmancy-dropdown-content>
- *     <schmancy-form>…</schmancy-form>
- *   </schmancy-dropdown-content>
- * </schmancy-dropdown>
- * @platform div - Anchored via Floating UI (autoUpdate, flip, shift). Degrades to inline content if the tag never registers — loses positioning but content stays accessible.
- * @attr open - Boolean; whether the dropdown is visible.
- * @fires open - When the dropdown opens.
- * @fires close - When the dropdown closes.
  * @slot trigger - The element that triggers the dropdown
  * @slot - Default slot for the dropdown content
  */
 @customElement('schmancy-dropdown')
-export class SchmancyDropdown extends $LitElement() {
+export class SchmancyDropdown extends SchmancyElement {
 	/**
 	 * Whether the dropdown is currently open
 	 */
@@ -153,7 +141,7 @@ export class SchmancyDropdown extends $LitElement() {
 		this.open = !this.open
 	}
 
-	updated(changedProps: Map<string, any>) {
+	updated(changedProps: Map<string, unknown>) {
 		super.updated(changedProps)
 
 		if (changedProps.has('open')) {
@@ -203,6 +191,7 @@ export class SchmancyDropdown extends $LitElement() {
 					left: `${x}px`,
 					top: `${y - 8}px`,
 				})
+				return
 			})
 		})
 	}

package/src/dropdown/dropdown-content.ts

@@ -1,25 +1,18 @@
-import { TailwindElement } from '@mixins/index'
+import { SchmancyElement } from '@mixins/index'
 import { css, html } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
 
 /**
- * Content panel for a schmancy-dropdown — a styled positioned surface. Always nested inside schmancy-dropdown and placed alongside the trigger slot.
+ * Content container for the schmancy-dropdown component.
  *
  * @element schmancy-dropdown-content
- * @summary Nest this inside schmancy-dropdown (not in the trigger slot). Use the `content` CSS part to customize backgrounds / shadows / padding without shadow-root piercing.
- * @example
- * <schmancy-dropdown>
- *   <schmancy-button slot="trigger">Open</schmancy-button>
- *   <schmancy-dropdown-content>
- *     Panel contents…
- *   </schmancy-dropdown-content>
- * </schmancy-dropdown>
- * @platform div - Positioned panel with theme-aware styling. Degrades to an inline div if the tag never registers.
  * @slot - Default slot for dropdown content.
- * @csspart content - The inner wrapper element; style to override panel backgrounds, shadows, padding, or borders without shadow-root piercing.
+ * @csspart content - The inner wrapper element; style to override panel
+ *   backgrounds, shadows, padding, or borders without shadow-root piercing.
  */
 @customElement('schmancy-dropdown-content')
-export class SchmancyDropdownContent extends TailwindElement(css`
+export class SchmancyDropdownContent extends SchmancyElement {
+	static styles = [css`
 	:host {
 		display: block;
 		position: absolute;
@@ -61,7 +54,7 @@ export class SchmancyDropdownContent extends TailwindElement(css`
 		transform-origin: top left;
 		animation: dropdownAnimation 0.1s ease-out forwards;
 	}
-`) {
+`];
 	/**
 	 * Width of the dropdown content
 	 */

package/src/expand/expand-root.component.ts

@@ -1,26 +1,15 @@
 import { css, html, nothing } from 'lit'
 import { customElement, property, state } from 'lit/decorators.js'
 import { createRef, ref } from 'lit/directives/ref.js'
-import { TailwindElement, SurfaceMixin } from '@mixins/index'
+import { SchmancyElement, SurfaceMixin } from '@mixins/index'
 import type { TSurfaceColor } from '@schmancy/types'
 import { SPRING_SMOOTH } from '../utils/animation.js'
 import { reducedMotion$ } from '../directives/reduced-motion'
 import '../surface/surface.js'
 
-/**
- * Container for schmancy-expand children — coordinates mutual-exclusion so only one child is open at a time. Also renders the portal panel that the active child expands into.
- *
- * @element schmancy-expand-root
- * @summary Always wrap a group of schmancy-expand children. Without a root, each schmancy-expand behaves independently (which is usually not what you want — prefer schmancy-details for that).
- * @example
- * <schmancy-expand-root>
- *   <schmancy-expand summary="Step 1">…</schmancy-expand>
- *   <schmancy-expand summary="Step 2">…</schmancy-expand>
- * </schmancy-expand-root>
- * @platform div - Coordinating wrapper. Degrades to a plain div if the tag never registers — children fall back to independent `<details>` behavior.
- */
 @customElement('schmancy-expand-root')
-export class SchmancyExpandRoot extends SurfaceMixin(TailwindElement(css`
+export class SchmancyExpandRoot extends SurfaceMixin(SchmancyElement) {
+	static styles = [css`
 	:host {
 		display: contents;
 	}
@@ -57,7 +46,7 @@ export class SchmancyExpandRoot extends SurfaceMixin(TailwindElement(css`
 		opacity: 1;
 		background: rgb(0 0 0 / 0.08);
 	}
-`)) {
+`];
 	@property({ reflect: true }) override type: TSurfaceColor = 'solid'
 	@state() isOpen = false
 	private summaryRect: DOMRect | null = null
@@ -190,6 +179,7 @@ export class SchmancyExpandRoot extends SurfaceMixin(TailwindElement(css`
 				panel.style.height = 'auto'
 				panel.style.maxHeight = `${window.innerHeight - finalTop - 16}px`
 			}
+			return
 		})
 
 		const btn = this._btnRef.value

package/src/expand/expand.component.ts

@@ -4,7 +4,7 @@ import { createRef, ref } from 'lit/directives/ref.js'
 import { styleMap } from 'lit/directives/style-map.js'
 import { filter, fromEvent, lastValueFrom } from 'rxjs'
 import { tap, takeUntil } from 'rxjs/operators'
-import { TailwindElement } from '@mixins/index'
+import { SchmancyElement } from '@mixins/index'
 import { SPRING_SNAPPY } from '../utils/animation.js'
 import { reducedMotion$ } from '../directives/reduced-motion'
 import { SchmancyExpandRoot } from './expand-root.component.js'
@@ -12,22 +12,9 @@ import { SchmancyExpandRoot } from './expand-root.component.js'
 /** Dispatch this event on window to close whichever schmancy-expand is currently open */
 export const SCHMANCY_EXPAND_REQUEST_CLOSE = 'schmancy-expand-request-close'
 
-/**
- * Accordion-style section — expands on click, coordinates with siblings via schmancy-expand-root to close any sibling when a new one opens. Only one schmancy-expand can be open at a time within the same root.
- *
- * @element schmancy-expand
- * @summary Use for grouped progressive-disclosure where only one section should be open at a time. Prefer schmancy-details when sections should be independent.
- * @example
- * <schmancy-expand-root>
- *   <schmancy-expand summary="Billing">Billing form…</schmancy-expand>
- *   <schmancy-expand summary="Shipping">Shipping form…</schmancy-expand>
- *   <schmancy-expand summary="Review">Order review…</schmancy-expand>
- * </schmancy-expand-root>
- * @platform details toggle - Schmancy-skinned accordion section. Degrades to `<details>` if the tag never registers — loses mutual-exclusion behavior but stays functional.
- * @fires toggle - When the open state changes.
- */
 @customElement('schmancy-expand')
-export default class SchmancyExpand extends TailwindElement(css`
+export default class SchmancyExpand extends SchmancyElement {
+	static styles = [css`
 	:host {
 		display: block;
 	}
@@ -59,7 +46,7 @@ export default class SchmancyExpand extends TailwindElement(css`
 		min-height: 0;
 		overflow: hidden;
 	}
-`) {
+`];
 	@property() summary = ''
 
 	@property({ type: Boolean, reflect: true }) open = false

package/src/extra/countries/countries.ts

@@ -1,4 +1,4 @@
-import { $LitElement } from '@mixins/index'
+import { SchmancyElement } from '@mixins/index'
 import { SchmancyAutocompleteChangeEvent } from '@schmancy/autocomplete'
 import { css, html } from 'lit'
 import { customElement, property, query, state } from 'lit/decorators.js'
@@ -6,22 +6,14 @@ import { repeat } from 'lit/directives/repeat.js'
 import countriesData from './countries.data'
 import SchmancyAutocomplete from '@schmancy/autocomplete/autocomplete'
 
-/**
- * Country picker — type-ahead autocomplete over the ISO 3166-1 country list. Form-associated.
- *
- * @element schmancy-select-countries
- * @summary Drop-in replacement for schmancy-autocomplete when the options are specifically "every country". Pre-seeds the list from countries.data.
- * @example
- * <schmancy-select-countries name="country" label="Shipping country" required></schmancy-select-countries>
- * @platform combobox change - Composes schmancy-autocomplete with a static options list. Value is the 2-letter ISO code.
- * @fires change - `SchmancyAutocompleteChangeEvent` with `{ value: string }` (the ISO code).
- */
 @customElement('schmancy-select-countries')
-export class SchmancyCountriesSelect extends $LitElement(css`
+export class SchmancyCountriesSelect extends SchmancyElement {
+	static styles = [css`
 	:host {
 		display: block;
 	}
-`) {
+`]
+
 	// Form association setup
 	static formAssociated = true
 	private internals?: ElementInternals

package/src/extra/timezone/timezone.ts

@@ -1,4 +1,4 @@
-import { $LitElement } from '@mixins/index'
+import { SchmancyElement } from '@mixins/index'
 import { css, html } from 'lit'
 import { customElement, property, query, state } from 'lit/decorators.js'
 import { repeat } from 'lit/directives/repeat.js'
@@ -6,14 +6,7 @@ import timezonesData from './timezones.data'
 import SchmancyAutocomplete from '@schmancy/autocomplete/autocomplete'
 
 /**
- * Timezone picker — type-ahead autocomplete over the IANA tz database. Form-associated.
- *
- * @element schmancy-select-timezones
- * @summary Drop-in replacement for schmancy-autocomplete when the options are IANA timezone names. Value is the IANA identifier ("America/Los_Angeles").
- * @example
- * <schmancy-select-timezones name="tz" label="Timezone" value="America/New_York"></schmancy-select-timezones>
- * @platform combobox change - Composes schmancy-autocomplete with a static IANA timezones list.
- * @fires change - `SchmancyAutocompleteChangeEvent` with `{ value: string }` (the IANA tz name).
+ * Timezone selector component with autocomplete filtering.
  *
  * @prop {string} name - Name attribute for form submission
  * @prop {string} value - Selected timezone value
@@ -21,11 +14,13 @@ import SchmancyAutocomplete from '@schmancy/autocomplete/autocomplete'
  * @prop {boolean} required - Whether the field is required
  */
 @customElement('schmancy-select-timezones')
-export class SchmancyTimezonesSelect extends $LitElement(css`
+export class SchmancyTimezonesSelect extends SchmancyElement {
+	static styles = [css`
 	:host {
 		display: block;
 	}
-`) {
+`]
+
 	// Form association setup
 	static formAssociated = true
 	private internals?: ElementInternals
@@ -99,7 +94,7 @@ export class SchmancyTimezonesSelect extends $LitElement(css`
 		return html`
 			<schmancy-autocomplete
 				.placeholder=${this.placeholder}
-				.hint=${this.hint}
+				.description=${this.hint}
 				.required=${this.required}
 				.label=${this.label}
 				.value=${this.value ?? ''}

package/src/form/form.test.ts

@@ -4,6 +4,8 @@ import '../input/input'
 import '../button/button'
 import '../checkbox/checkbox'
 
+const nextUpdate = () => new Promise(r => requestAnimationFrame(() => r(null)))
+
 describe('schmancy-form', () => {
 	let host: HTMLDivElement
 
@@ -16,8 +18,6 @@ describe('schmancy-form', () => {
 		host.remove()
 	})
 
-	const nextUpdate = () => new Promise(r => requestAnimationFrame(() => r(null)))
-
 	it('wraps children in a real light-DOM <form>', async () => {
 		host.innerHTML = `
 			<schmancy-form>

package/src/form/form.ts

@@ -1,7 +1,8 @@
 import { customElement } from 'lit/decorators.js'
 
 /**
- * Ergonomic wrapper around a native `<form>`. Children are reparented into a light-DOM `<form>` on connection so form-associated custom elements resolve `internals.form` via native DOM ancestry.
+ * A thin ergonomic wrapper around a native `<form>` element. Its children are
+ * reparented into a `<form>` element in light DOM on connection, so:
  *
  * - Form-associated custom elements (FACE) resolve their `internals.form`
  *   correctly via native DOM ancestry.
@@ -17,14 +18,6 @@ import { customElement } from 'lit/decorators.js'
  * lifting is the platform's.
  *
  * @element schmancy-form
- * @summary Always wrap form-associated schmancy components in schmancy-form (or a native `<form>`) so `new FormData(form)` just works.
- * @example
- * <schmancy-form @submit=${(e) => console.log(Object.fromEntries(e.detail))}>
- *   <schmancy-input name="email" type="email" required></schmancy-input>
- *   <schmancy-input name="password" type="password" required></schmancy-input>
- *   <schmancy-button type="submit" variant="filled">Sign in</schmancy-button>
- * </schmancy-form>
- * @platform form submit - Light-DOM native `<form>` element. Degrades to a `<form>` if the tag never registers — same semantics, just no CustomEvent translation.
  * @fires submit - `CustomEvent<FormData>` emitted when the form is submitted.
  * @fires reset - Emitted after the underlying form resets.
  */

package/src/icons/icon.ts

@@ -1,4 +1,4 @@
-import { TailwindElement } from '@mixins/index'
+import { SchmancyElement } from '@mixins/index'
 import { consume } from '@lit/context'
 import { css, html } from 'lit'
 import { customElement, property, state } from 'lit/decorators.js'
@@ -29,7 +29,8 @@ export type IconSize = 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | string
  * @csspart icon - The inner `<span>` carrying the Material Symbols glyph.
  */
 @customElement('schmancy-icon')
-export default class SchmancyIcon extends TailwindElement(css`
+export default class SchmancyIcon extends SchmancyElement {
+	static styles = [css`
 	:host {
 		--schmancy-icon-size: 24px;
 		--schmancy-icon-fill: 0;
@@ -77,7 +78,7 @@ export default class SchmancyIcon extends TailwindElement(css`
 	.material-symbols[data-icon]::before {
 		content: attr(data-icon);
 	}
-`) {
+`];
 	// Static flag to track if Google Fonts have been loaded
 	private static fontsLoaded = false
 

package/src/iframe/iframe.ts

@@ -1,6 +1,7 @@
-import { TailwindElement } from '@mixins/index'
+import { SchmancyElement } from '@mixins/index'
 import { css, html, PropertyValues } from 'lit'
 import { customElement, property, state } from 'lit/decorators.js'
+import { createRef, ref } from 'lit/directives/ref.js'
 
 /** Sensible document reset for iframe content — font, spacing, word-wrap */
 const DEFAULT_BASE_CSS = `html,body{margin:0;padding:0;overflow:hidden;background:#fff;color:#1a1a1a;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;font-size:14px;line-height:1.6;word-wrap:break-word;overflow-wrap:break-word}
@@ -27,7 +28,8 @@ code{background:#f5f5f5;padding:.1em .3em;border-radius:3px;font-size:.9em}`
  * ```
  */
 @customElement('schmancy-iframe')
-export default class SchmancyIframe extends TailwindElement(css`
+export default class SchmancyIframe extends SchmancyElement {
+	static styles = [css`
 	:host {
 		display: block;
 	}
@@ -35,7 +37,7 @@ export default class SchmancyIframe extends TailwindElement(css`
 		border: 0;
 		width: 100%;
 	}
-`) {
+`];
 	/** HTML body fragment to render inside the iframe */
 	@property({ type: String }) html = ''
 
@@ -53,6 +55,7 @@ export default class SchmancyIframe extends TailwindElement(css`
 
 	@state() private _height = 60
 	private _srcdoc = ''
+	private _iframeRef = createRef<HTMLIFrameElement>()
 
 	protected willUpdate(changed: PropertyValues) {
 		if (changed.has('html') || changed.has('css') || changed.has('baseCss')) {
@@ -61,6 +64,12 @@ export default class SchmancyIframe extends TailwindElement(css`
 		}
 	}
 
+	protected updated(changed: PropertyValues) {
+		if (changed.has('sandbox')) {
+			this._iframeRef.value?.setAttribute('sandbox', this.sandbox)
+		}
+	}
+
 	private buildSrcdoc(): string {
 		const styles = this.css ? `${this.baseCss}\n${this.css}` : this.baseCss
 		return `<!DOCTYPE html><html><head>
@@ -83,8 +92,8 @@ export default class SchmancyIframe extends TailwindElement(css`
 	protected render() {
 		if (!this.html) return html``
 		return html`<iframe
+			${ref(this._iframeRef)}
 			.srcdoc=${this._srcdoc}
-			sandbox=${this.sandbox}
 			style="height:${this._height}px;min-height:${this.minHeight}px;overflow:hidden"
 			@load=${this.onLoad}
 		></iframe>`

package/src/index.ts

@@ -10,7 +10,6 @@ export * from './charts';
 export * from './checkbox';
 export * from './chips';
 export * from './code-highlight';
-export * from './components';
 export * from './connectivity';
 export * from './content-drawer';
 export * from './date-range';
@@ -37,13 +36,13 @@ export * from './list';
 export * from './mailbox';
 export * from './map';
 export * from './menu';
-export * from './metric';
 export * from './nav-drawer';
 export * from './navigation-bar';
 export * from './navigation-rail';
 export * from './notification';
 export * from './option';
 export * from './page';
+export * from './payment-card-form';
 export * from './progress';
 export * from './qr-scanner';
 export * from './radio-group';
@@ -52,8 +51,8 @@ export * from './rxjs-utils';
 export * from './select';
 export * from './sheet';
 export * from './slider';
+export * from './state';
 export * from './steps';
-export * from './store';
 export * from './surface';
 export * from './table';
 export * from './tabs';
@@ -61,6 +60,7 @@ export * from './teleport';
 export * from './textarea';
 export * from './theme';
 export * from './theme-button';
+export * from './timeline';
 export * from './tooltip';
 export * from './tree';
 export * from './types';

package/src/input/input.ts

@@ -1,4 +1,4 @@
-import { html, LitElement, nothing, PropertyValueMap } from 'lit'
+import { html, LitElement, nothing, PropertyValueMap, unsafeCSS } from 'lit'
 import { customElement, property, query, state } from 'lit/decorators.js'
 import { ifDefined } from 'lit/directives/if-defined.js'
 import { createRef, ref } from 'lit/directives/ref.js'
@@ -43,18 +43,11 @@ export type SchmancyInputEnterEvent = CustomEvent<EventDetails>
 export type InputSize = 'xxs' | 'xs' | 'sm' | 'md' | 'lg'
 
 /**
- * Single-line text input — the primary form-text primitive. Form-associated via ElementInternals, so it participates in native `<form>` submission, validation, and reset without additional wiring.
+ * Enhanced version of the SchmancyInput component with improved form integration
+ * and compatibility with legacy API.
  *
- * @element schmancy-input
- * @summary Text input with Material Design styling, native form integration, and RxJS-debounced input/change/enter events.
- * @example
- * <schmancy-form @submit=${onSubmit}>
- *   <schmancy-input name="email" type="email" label="Email" required></schmancy-input>
- * </schmancy-form>
- * @platform input change - Schmancy-skinned native `<input>`. Degrades to `<input class="…">` styled via Tailwind if the tag never registers.
- * @fires input - `CustomEvent<{value: string}>` on every keystroke.
- * @fires change - `CustomEvent<{value: string}>` on blur/change.
- * @fires enter - `CustomEvent<{value: string}>` when user presses Enter.
+ * This component uses the native form association API and maintains parity with
+ * native input behaviors while providing a stylish, accessible interface.
  *
  * @prop {string} name - Name attribute for form submission (inherited from FormFieldMixin)
  * @prop {string} label - Label text for the form field (inherited from FormFieldMixin)
@@ -66,7 +59,7 @@ export type InputSize = 'xxs' | 'xs' | 'sm' | 'md' | 'lg'
  * @prop {string} hint - Optional hint text to display below the field (inherited from FormFieldMixin)
  */
 @customElement('schmancy-input')
-export default class SchmancyInput extends SchmancyFormField(style) {
+export default class SchmancyInput extends SchmancyFormField(unsafeCSS(style)) {
 	// ----------------------------
 	//  A) Public properties
 	// ----------------------------