@mhmo91/schmancy 0.9.27 → 0.10.1

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

@@ -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)

package/src/json/json.ts

@@ -1,11 +1,12 @@
-import { TailwindElement } from '@mixins/index'
+import { SchmancyElement } from '@mixins/index'
 import { css, html } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
 import { unsafeHTML } from 'lit/directives/unsafe-html.js'
 import { $notify } from '@schmancy/notification'
 
 @customElement('schmancy-json')
-export class SchmancyJson extends TailwindElement(css`:host { display: block }`) {
+export class SchmancyJson extends SchmancyElement {
+	static styles = [css`:host { display: block }`];
 	@property({ type: Object }) data: Record<string, any> = {}
 	@property({ type: Array }) highlightKeys: string[] = []
 	@property({ type: Boolean }) compact = false
@@ -25,7 +26,7 @@ export class SchmancyJson extends TailwindElement(css`:host { display: block }`)
 		try {
 			await navigator.clipboard.writeText(JSON.stringify(this.data, null, 2))
 			$notify.success('JSON copied to clipboard')
-		} catch (error) {
+		} catch {
 			$notify.error('Failed to copy JSON')
 		}
 	}

package/src/kbd/kbd.ts

@@ -1,4 +1,4 @@
-import { TailwindElement } from '@mixins/index'
+import { SchmancyElement } from '@mixins/index'
 import { css, html } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
 
@@ -17,7 +17,8 @@ import { customElement, property } from 'lit/decorators.js'
  * @csspart base - The inner native `<kbd>` element.
  */
 @customElement('schmancy-kbd')
-export class SchmancyKbd extends TailwindElement(css`
+export class SchmancyKbd extends SchmancyElement {
+	static styles = [css`
 	:host {
 		display: inline-block;
 		vertical-align: middle;
@@ -44,7 +45,7 @@ export class SchmancyKbd extends TailwindElement(css`
 		--_ksize: 1.25rem;
 		--_kfont: 0.6875rem;
 	}
-`) {
+`];
 	@property({ type: String, reflect: true }) size: 'sm' | 'md' = 'md'
 
 	render() {

package/src/layout/index.ts

@@ -1,5 +1 @@
-export * from './flex'
-export * from './grid'
-export * from './scroll'
-export * from './v2'
-export * from './layout'
+export * from './scroll'

package/src/layout/scroll/scroll.ts

@@ -1,4 +1,4 @@
-import { TailwindElement } from '@mixins/index'
+import { SchmancyElement } from '@mixins/index'
 import { css, html } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
 import { debounceTime, filter, fromEvent, takeUntil } from 'rxjs'
@@ -49,11 +49,7 @@ declare global {
 }
 
 /**
- * Scrollable container with debounced scroll events, horizontal/vertical direction, optional hidden scrollbar, and programmatic scrollTo via command events or refs.
- *
- * @element schmancy-scroll
- * @summary Use anywhere you'd reach for `overflow: auto` but also need debounced scroll events (for sticky headers, scroll spies, virtualization triggers) or the ability to drive scroll from elsewhere in the app by dispatching a schmancy-scroll-command event.
- * @platform div - Styled scrollable `<div>`. Degrades to a plain scrollable div if the tag never registers — loses the debounced scroll event and the command-bus integration.
+ * A custom scrollable container with enhanced features.
  *
  * @fires {SchmancyScrollEvent} scroll - Fired when scrolling occurs (with a configurable debounce)
  * @slot - Default slot for content to be scrolled
@@ -88,7 +84,8 @@ declare global {
  * ```
  */
 @customElement('schmancy-scroll')
-export class SchmancyScroll extends TailwindElement(css`
+export class SchmancyScroll extends SchmancyElement {
+	static styles = [css`
 	:host {
 		/* Flexible sizing for different layout contexts */
 		width: 100%;
@@ -113,7 +110,7 @@ export class SchmancyScroll extends TailwindElement(css`
 	:host([hide])::-webkit-scrollbar {
 		display: none; /* Chrome, Safari, and Opera */
 	}
-`) {
+`];
 	/**
 	 * Determines whether the scrollbar is hidden.
 	 *

package/src/lightbox/flip-directive.ts

@@ -259,7 +259,7 @@ class FlipDirective extends AsyncDirective {
 			if (this.element.complete) {
 				requestAnimationFrame(animate)
 			} else {
-				this.element.onload = () => requestAnimationFrame(animate)
+				this.element.addEventListener('load', () => requestAnimationFrame(animate), { once: true })
 			}
 		} else {
 			requestAnimationFrame(animate)

package/src/lightbox/lightbox.ts

@@ -4,26 +4,17 @@ import { when } from 'lit/directives/when.js'
 import { ref, createRef, Ref } from 'lit/directives/ref.js'
 import { fromEvent } from 'rxjs'
 import { filter, takeUntil, tap, switchMap, map, first } from 'rxjs/operators'
-import { $LitElement } from '@mixins/index'
+import { SchmancyElement } from '@mixins/index'
 import { overlayStack } from '../utils/overlay-stack'
 
-/**
- * Image lightbox — thumbnail grid that opens to a full-screen viewer on click, with keyboard navigation between images.
- *
- * @element schmancy-lightbox
- * @summary Drop-in for galleries / image lists where each thumbnail should expand to fill the viewport. Pass an `images` array of `{ src, alt, caption? }`.
- * @example
- * <schmancy-lightbox .images=${[{ src: '/a.jpg', alt: 'A' }, { src: '/b.jpg', alt: 'B' }]}></schmancy-lightbox>
- * @platform dialog close - Modal full-screen viewer with keyboard navigation. Degrades to a plain image grid if the tag never registers.
- * @fires change - When the active image index changes (next/prev). `detail.index` is the new active image's position in the array.
- * @fires close - When the viewer is dismissed (ESC, backdrop click, close button).
- */
 @customElement('schmancy-lightbox')
-export class SchmancyLightbox extends $LitElement(css`
+export class SchmancyLightbox extends SchmancyElement {
+	static styles = [css`
 	:host {
 		display: contents;
 	}
-`) {
+`]
+
 	@property({ type: String }) src: string = ''
 	@property({ type: Array }) images: string[] = []
 	@property({ type: Number }) initialIndex: number = 0

package/src/list/list-item.ts

@@ -1,28 +1,19 @@
 import { consume } from '@lit/context'
-import { TailwindElement } from '@mixins/index'
+import { SchmancyElement } from '@mixins/index'
 import { SchmancySurfaceTypeContext } from '@schmancy/surface/context'
 import { TSurfaceColor } from '@schmancy/types/surface'
 import { css, html } from 'lit'
 import { customElement, property, queryAssignedElements } from 'lit/decorators.js'
 
 /**
- * Single row in a schmancy-list — supports leading icon/avatar, main content, trailing actions. Clickable via click event, or used as a schmancy-menu-item's visual base.
- *
  * @element schmancy-list-item
- * @summary Prefer nesting inside schmancy-list for consistent spacing/surface. Use `href` to make the row a navigation target (renders as `<a>`), or a click handler for in-app actions.
- * @example
- * <schmancy-list-item href="/profile">
- *   <schmancy-icon slot="leading">person</schmancy-icon>
- *   Profile
- *   <schmancy-icon slot="trailing">chevron_right</schmancy-icon>
- * </schmancy-list-item>
- * @platform li click - Styled `<li>` or `<a>` depending on `href`. Degrades to a plain list item if the tag never registers.
  * @slot leading - leading content
  * @slot trailing - trailing content
  * @slot - default content
  */
 @customElement('schmancy-list-item')
-export class SchmancyListItem extends TailwindElement(css`
+export class SchmancyListItem extends SchmancyElement {
+	static styles = [css`
 	:host {
 		display: block;
 		border-radius: 0.5rem;
@@ -47,7 +38,7 @@ export class SchmancyListItem extends TailwindElement(css`
 		:host { transition: background 200ms ease; }
 		:host(:active:not([readonly])) { transform: none; }
 	}
-`) {
+`];
 	@consume({ context: SchmancySurfaceTypeContext, subscribe: true })
 	@property()
 	variant: TSurfaceColor

package/src/list/list.ts

@@ -1,5 +1,5 @@
 import { provide } from '@lit/context'
-import { TailwindElement } from '@mixins/index'
+import { SchmancyElement } from '@mixins/index'
 import { SchmancySurfaceFill } from '@schmancy/surface'
 import { TSurfaceColor } from '@schmancy/types/surface'
 import { css, html } from 'lit'
@@ -7,27 +7,29 @@ import { customElement, property } from 'lit/decorators.js'
 import { SchmancyListTypeContext } from './context'
 
 /**
- * Wrapped list container — holds schmancy-list-item children on a themed surface. Optionally scrollable.
+ * `<schmancy-list>` component.
+ *
+ * A list component that wraps its content within a customizable surface.
+ * It allows you to set the surface type and fill style, and can optionally
+ * enable scrolling behavior by delegating the scroller attribute to the surface.
  *
  * @element schmancy-list
- * @summary Use for vertical lists of similarly-shaped items: settings entries, menu items, contact lists, notification lists. Pair with schmancy-list-item children.
+ * @slot - The default slot for list items.
+ *
  * @example
  * <schmancy-list surface="container" scroller>
- *   <schmancy-list-item>First</schmancy-list-item>
- *   <schmancy-list-item>Second</schmancy-list-item>
- *   <schmancy-list-item>Third</schmancy-list-item>
+ *   <schmancy-list-item>List Item 1</schmancy-list-item>
  * </schmancy-list>
- * @platform ul - Styled list container. Degrades to a plain ul/div if the tag never registers.
- * @slot - The default slot for list items.
  */
 @customElement('schmancy-list')
-export class List extends TailwindElement(css`
+export class List extends SchmancyElement {
+	static styles = [css`
 	:host {
 		display: block;
 		padding-top: 8px;
 		padding-bottom: 8px;
 	}
-`) {
+`];
 	/**
 	 * Defines the type or color of the surface used by the component.
 	 * This value is provided to descendant components via context.