@mhmo91/schmancy 0.9.28 → 0.10.2

package/src/autocomplete/autocomplete.ts

@@ -1,9 +1,10 @@
-import { $LitElement } from '@mixins/index'
+import { SchmancyElement } from '@mixins/index'
 import { InputSize, SchmancyInput } from '@schmancy/input'
 import SchmancyOption from '@schmancy/option/option'
-import { html, nothing } from 'lit'
+import { html, nothing, unsafeCSS } from 'lit'
 import { customElement, property, query, queryAssignedElements, state } from 'lit/decorators.js'
 import { classMap } from 'lit/directives/class-map.js'
+import { ifDefined } from 'lit/directives/if-defined.js'
 import { createRef, ref } from 'lit/directives/ref.js'
 import { repeat } from 'lit/directives/repeat.js'
 import { when } from 'lit/directives/when.js'
@@ -36,18 +37,7 @@ interface FilteredOption {
 }
 
 /**
- * Combobox with type-ahead filtering over a list of `<schmancy-option>` children. Single or multi-select. Form-associated.
- *
- * @element schmancy-autocomplete
- * @summary Use when users need to pick from a known list of options but the list is too long for a plain select dropdown. Prefer schmancy-select for short static lists.
- * @example
- * <schmancy-autocomplete name="country" label="Country" placeholder="Start typing…">
- *   <schmancy-option value="US">United States</schmancy-option>
- *   <schmancy-option value="CA">Canada</schmancy-option>
- *   <schmancy-option value="GB">United Kingdom</schmancy-option>
- * </schmancy-autocomplete>
- * @platform combobox change - Composed of a schmancy-input + a floating listbox populated from `<schmancy-option>` children. Multi-select renders selections as schmancy-input-chip chips. Degrades to a datalist-backed native input if the tag never registers.
- * @fires change - `SchmancyAutocompleteChangeEvent` with `{ value }` (single) or `{ value, values }` (multi).
+ * Autocomplete input component with filtering and multi-select support.
  *
  * @prop {string} name - Name attribute for form submission
  * @prop {string} label - Label text displayed above the input
@@ -58,7 +48,9 @@ interface FilteredOption {
  * @prop {string[]} values - Selected values (multi-select mode)
  */
 @customElement('schmancy-autocomplete')
-export default class SchmancyAutocomplete extends $LitElement(style) {
+export default class SchmancyAutocomplete extends SchmancyElement {
+    static styles = [unsafeCSS(style)];
+
     static formAssociated = true
     internals: ElementInternals | undefined
 
@@ -220,16 +212,21 @@ export default class SchmancyAutocomplete extends $LitElement(style) {
             if (!option.id) {
                 option.id = `${this.id}-option-${index}`
             }
+            // Idempotent: slotchange may fire repeatedly for the same option nodes,
+            // and addEventListener doesn't replace prior handlers like onfoo= did.
+            if (option.dataset.schmancyAutocompleteHandlers === 'attached') return
+            option.dataset.schmancyAutocompleteHandlers = 'attached'
+
             // Prevent blur handler from interfering with option selection
-            option.onmousedown = (e: MouseEvent) => {
+            option.addEventListener('mousedown', (e: MouseEvent) => {
                 e.preventDefault() // Prevent focus loss
-            }
+            })
 
             // Handle the actual selection
-            option.onclick = (e: MouseEvent) => {
+            option.addEventListener('click', (e: MouseEvent) => {
                 e.stopPropagation()
                 this._selectOption(option)
-            }
+            })
         })
     }
 
@@ -604,7 +601,7 @@ export default class SchmancyAutocomplete extends $LitElement(style) {
                                 aria-haspopup="listbox"
                                 aria-controls="options"
                                 aria-expanded=${this._open}
-                                aria-describedby=${this.description ? descriptionId : undefined}
+                                aria-describedby=${ifDefined(this.description ? descriptionId : undefined)}
                                 @input=${(e: Event) => {
                                     const value = (e.target as HTMLInputElement).value
                                     this._inputValue = value
@@ -734,7 +731,7 @@ export default class SchmancyAutocomplete extends $LitElement(style) {
         if (!isOpen) return
 
         const visibleOptions = this._options.filter(opt => !opt.hidden)
-            .sort((a, b) => parseInt(a.style.order || '0') - parseInt(b.style.order || '0'))
+            .toSorted((a, b) => parseInt(a.style.order || '0') - parseInt(b.style.order || '0'))
 
         const focusedOption = visibleOptions.find(opt => opt === document.activeElement)
         const currentIndex = focusedOption ? visibleOptions.indexOf(focusedOption) : -1

package/src/{avatar.ts → avatar/avatar.ts}

@@ -1,4 +1,4 @@
-import { $LitElement } from '@mixins/index'
+import { SchmancyElement } from '@mixins/index'
 import { html } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
 import { color } from '@schmancy/directives'
@@ -41,7 +41,7 @@ export type AvatarStatus = 'online' | 'offline' | 'busy' | 'away' | 'none'
  * ></schmancy-avatar>
  */
 @customElement('schmancy-avatar')
-export class SchmancyAvatar extends $LitElement() {
+export class SchmancyAvatar extends SchmancyElement {
 	@property({ type: String }) initials: string = ''
 	@property({ type: String }) src: string = ''
 	@property({ type: String }) icon: string = ''

package/src/avatar/index.ts

@@ -0,0 +1 @@
+export * from './avatar'

package/src/badge/badge.ts

@@ -1,4 +1,4 @@
-import { TailwindElement } from '@mixins/index'
+import { SchmancyElement } from '@mixins/index'
 import { color } from '@schmancy/directives'
 import { css, html } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
@@ -31,7 +31,8 @@ export type BadgeShape = 'rounded' | 'pill' | 'square'
  * @csspart icon - The icon container
  */
 @customElement('schmancy-badge')
-export class SchmancyBadgeV2 extends TailwindElement(css`
+export class SchmancyBadgeV2 extends SchmancyElement {
+	static styles = [css`
 	:host {
 		display: inline-flex;
 		width: fit-content;
@@ -50,7 +51,7 @@ export class SchmancyBadgeV2 extends TailwindElement(css`
 	.animate-pulse {
 		animation: elegant-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
 	}
-`) {
+`];
 	/**
 	 * The color variant of the badge
 	 * @attr

package/src/boat/boat.ts

@@ -1,4 +1,4 @@
-import { $LitElement } from '@mixins/index'
+import { SchmancyElement } from '@mixins/index'
 import { css, html } from 'lit'
 import { customElement, property, state } from 'lit/decorators.js'
 import { classMap } from 'lit/directives/class-map.js'
@@ -22,7 +22,8 @@ interface Position {
 }
 
 @customElement('schmancy-boat')
-export default class SchmancyBoat extends $LitElement(css`
+export default class SchmancyBoat extends SchmancyElement {
+	static styles = [css`
 	:host {
 		display: contents;
 		position: relative;
@@ -31,7 +32,8 @@ export default class SchmancyBoat extends $LitElement(css`
 	:host([hidden]) {
 		display: none !important;
 	}
-`) {
+`]
+
 	@property({ type: String }) id: string = 'default'
 	@property({ type: String }) icon?: string
 	@property({ type: String }) label?: string
@@ -95,9 +97,9 @@ export default class SchmancyBoat extends $LitElement(css`
 		return 'inset(0px 0px 0px 0px round 12px)'
 	}
 
-	private get elevation(): string {
-		if (this.open) return '4'
-		return this.lowered ? '1' : '3'
+	private get elevation(): 0 | 1 | 2 | 3 | 4 | 5 {
+		if (this.open) return 4
+		return this.lowered ? 1 : 3
 	}
 
 	// ============================================
@@ -225,6 +227,7 @@ export default class SchmancyBoat extends $LitElement(css`
 			if (container.isConnected) {
 				container.style.transform = ''
 			}
+			return
 		})
 
 		this._savePosition()
@@ -241,50 +244,37 @@ export default class SchmancyBoat extends $LitElement(css`
 
 		let didDrag = false
 
-		merge(
-			fromEvent<MouseEvent>(header, 'mousedown').pipe(
+		fromEvent<PointerEvent>(header, 'pointerdown')
+			.pipe(
 				filter(e => e.button === 0),
 				tap(e => {
 					e.preventDefault()
 					e.stopPropagation()
+					header.setPointerCapture(e.pointerId)
 				}),
-				map(e => ({ clientX: e.clientX, clientY: e.clientY, type: 'mouse' as const })),
-			),
-			fromEvent<TouchEvent>(header, 'touchstart').pipe(
-				map(e => ({
-					clientX: e.touches[0].clientX,
-					clientY: e.touches[0].clientY,
-					type: 'touch' as const,
-				})),
-			),
-		)
-			.pipe(
-				map(({ clientX, clientY, type }) => {
+				map(e => {
 					const rect = container.getBoundingClientRect()
 					const isBottom = this._currentCorner.includes('bottom')
 					const wasOpen = this.open
 					didDrag = false
 					return {
-						startX: clientX,
-						startY: clientY,
-						offsetX: clientX - rect.left,
-						offsetY: clientY - rect.top,
+						pointerId: e.pointerId,
+						startX: e.clientX,
+						startY: e.clientY,
+						offsetX: e.clientX - rect.left,
+						offsetY: e.clientY - rect.top,
 						rect,
 						isBottom,
 						wasOpen,
-						type,
 					}
 				}),
-				switchMap(({ startX, startY, offsetX, offsetY, rect, isBottom, wasOpen, type }) => {
-					const move$ =
-						type === 'mouse'
-							? fromEvent<MouseEvent>(window, 'mousemove').pipe(
-									map(e => ({ clientX: e.clientX, clientY: e.clientY })),
-								)
-							: fromEvent<TouchEvent>(window, 'touchmove').pipe(
-									map(e => ({ clientX: e.touches[0].clientX, clientY: e.touches[0].clientY })),
-								)
-					const end$ = type === 'mouse' ? fromEvent(window, 'mouseup') : fromEvent(window, 'touchend')
+				switchMap(({ pointerId, startX, startY, offsetX, offsetY, rect, isBottom, wasOpen }) => {
+					const sameId = (e: PointerEvent) => e.pointerId === pointerId
+					const move$ = fromEvent<PointerEvent>(window, 'pointermove').pipe(filter(sameId))
+					const end$ = merge(
+						fromEvent<PointerEvent>(window, 'pointerup'),
+						fromEvent<PointerEvent>(window, 'pointercancel'),
+					).pipe(filter(sameId))
 
 					return move$.pipe(
 						tap(({ clientX, clientY }) => {
@@ -441,6 +431,7 @@ export default class SchmancyBoat extends $LitElement(css`
 				container.style.clipPath = ''
 				container.style.overflow = ''
 			}
+			return
 		})
 
 		this.dispatchScopedEvent('toggle', 'expanded')
@@ -563,6 +554,7 @@ export default class SchmancyBoat extends $LitElement(css`
 			'items-center': true,
 			'gap-2': true,
 			'select-none': true,
+			'touch-none': true,
 			'cursor-grabbing': this.isDragging,
 			'cursor-move': !this.isDragging,
 			'transition-opacity': true,
@@ -575,7 +567,7 @@ export default class SchmancyBoat extends $LitElement(css`
 			<schmancy-surface
 				${ref(this._containerRef)}
 				type="glass"
-				elevation="${this.elevation}"
+				.elevation=${this.elevation}
 				class=${containerClasses}
 				style=${containerStyles}
 				aria-expanded=${this.open}

package/src/breadcrumb/breadcrumb.ts

@@ -1,25 +1,19 @@
-import { TailwindElement } from '@mixins/index'
+import { SchmancyElement } from '@mixins/index'
 import { css, html } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
 
 /**
- * Breadcrumb trail — navigation history from root to current page. Renders schmancy-breadcrumb-item children with separators between.
+ * Breadcrumb navigation container. Wraps a list of `schmancy-breadcrumb-item`
+ * elements with the correct ARIA landmark and semantics.
  *
  * @element schmancy-breadcrumb
- * @summary Use for deep hierarchical navigation (file explorer paths, e-commerce category chains, admin settings trees). Last item is styled as the current page automatically.
- * @example
- * <schmancy-breadcrumb separator="›">
- *   <schmancy-breadcrumb-item href="/">Home</schmancy-breadcrumb-item>
- *   <schmancy-breadcrumb-item href="/docs">Docs</schmancy-breadcrumb-item>
- *   <schmancy-breadcrumb-item>Getting started</schmancy-breadcrumb-item>
- * </schmancy-breadcrumb>
- * @platform nav - Styled `<nav aria-label="Breadcrumb">`. Degrades to a plain nav if the tag never registers.
  * @slot - Default slot for `<schmancy-breadcrumb-item>` children.
  * @attr separator - Character or string rendered between items. Default `/`.
  * @csspart separator - The separator element.
  */
 @customElement('schmancy-breadcrumb')
-export class SchmancyBreadcrumb extends TailwindElement(css`
+export class SchmancyBreadcrumb extends SchmancyElement {
+	static styles = [css`
 	:host {
 		display: block;
 	}
@@ -37,7 +31,7 @@ export class SchmancyBreadcrumb extends TailwindElement(css`
 	::slotted(schmancy-breadcrumb-item:last-of-type) {
 		font-weight: 500;
 	}
-`) {
+`];
 	@property({ type: String }) separator = '/'
 
 	connectedCallback(): void {
@@ -76,19 +70,17 @@ export class SchmancyBreadcrumb extends TailwindElement(css`
 }
 
 /**
- * Single segment in a schmancy-breadcrumb trail — a link when `href` is set, or a plain span (the current page) when omitted.
+ * Individual breadcrumb item. Renders as a link when `href` is provided,
+ * otherwise as a plain span (represents the current page).
  *
  * @element schmancy-breadcrumb-item
- * @summary Always nested inside schmancy-breadcrumb. Omit `href` on the current page — it gets aria-current="page" automatically.
- * @example
- * <schmancy-breadcrumb-item href="/products">Products</schmancy-breadcrumb-item>
- * @platform a - Renders an `<a>` or `<span>` depending on href. Degrades to a plain anchor/span if the tag never registers.
  * @slot - Label content.
  * @attr href - If set, renders as an anchor.
  * @attr current - Marks as `aria-current="page"`.
  */
 @customElement('schmancy-breadcrumb-item')
-export class SchmancyBreadcrumbItem extends TailwindElement(css`
+export class SchmancyBreadcrumbItem extends SchmancyElement {
+	static styles = [css`
 	:host {
 		display: inline-block;
 	}
@@ -99,7 +91,7 @@ export class SchmancyBreadcrumbItem extends TailwindElement(css`
 	a:hover {
 		text-decoration: underline;
 	}
-`) {
+`];
 	@property({ type: String }) href = ''
 	@property({ type: Boolean, reflect: true }) current = false
 

package/src/busy/busy.ts

@@ -1,9 +1,10 @@
-import { TailwindElement } from '@mixins/index'
+import { SchmancyElement } from '@mixins/index'
 import { css, html } from 'lit'
 import { customElement } from 'lit/decorators.js'
 
 @customElement('schmancy-busy')
-export default class SchmancyBusy extends TailwindElement(css`
+export default class SchmancyBusy extends SchmancyElement {
+	static styles = [css`
 	:host {
 		display: inline;
 		position: absolute;
@@ -11,7 +12,7 @@ export default class SchmancyBusy extends TailwindElement(css`
 		pointer-events: all;
 		z-index: 50;
 	}
-`) {
+`];
 	protected render(): unknown {
 		return html`
 			<!-- Clean overlay with subtle backdrop -->

package/src/busy/spinner.ts

@@ -1,9 +1,10 @@
-import { TailwindElement } from '@mixins/index'
+import { SchmancyElement } from '@mixins/index'
 import { css, html } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
 
 @customElement('schmancy-spinner')
-export default class SchmnacySpinner extends TailwindElement(css`
+export default class SchmnacySpinner extends SchmancyElement {
+	static styles = [css`
 	:host {
 		display: inline-block;
 		color: inherit; /* Inherit from parent by default */
@@ -79,7 +80,7 @@ export default class SchmnacySpinner extends TailwindElement(css`
 			transform: rotate(360deg);
 		}
 	}
-`) {
+`];
 	@property({ type: String, reflect: true })
 	color?: 'primary' | 'on-primary' | 'secondary' | 'on-secondary' |
 	        'tertiary' | 'on-tertiary' | 'error' | 'on-error' |

package/src/button/button.ts

@@ -1,4 +1,4 @@
-import { $LitElement } from '@mixins/index'
+import { SchmancyElement } from '@mixins/index'
 import { provide } from '@lit/context'
 import { css, html, LitElement } from 'lit'
 import { customElement, property, query, queryAssignedElements } from 'lit/decorators.js'
@@ -16,21 +16,16 @@ export type ButtonVariant = 'elevated' | 'filled' | 'filled tonal' | 'tonal' | '
 export type ButtonColor = 'primary' | 'secondary' | 'success' | 'error' | 'warning' | 'info' | 'neutral'
 
 /**
- * Material Design button — primary interactive surface for triggering actions or navigation.
+ * A button component.
  * @element schmancy-button
- * @summary Trigger actions or navigate. Form-associated; participates in native form submission.
- * @example
- * <schmancy-button variant="filled" @click=${() => save()}>Save</schmancy-button>
- * <schmancy-button variant="outlined" href="/next">Continue</schmancy-button>
- * @platform button click - Schmancy-skinned native `<button type="submit">`. When `href` is set, degrades to `<a href="…">`. Falls back to plain `<button>` styled with Tailwind if the tag never registers.
  * @slot - The default slot.
  * @slot prefix - The prefix slot.
  * @slot suffix - The suffix slot.
  * @csspart base - The underlying native `<button>` (or `<a>` when `href` is set).
  */
 @customElement('schmancy-button')
-export class SchmancyButton extends $LitElement(
-	css`:host{
+export class SchmancyButton extends SchmancyElement {
+	static styles = [css`:host{
 		display: inline-block;
 		min-width: fit-content;
 		overflow: hidden;
@@ -57,8 +52,8 @@ export class SchmancyButton extends $LitElement(
 	:host *,
 	* {
 		touch-action: manipulation;
-	}`
-) {
+	}`]
+
 	protected static shadowRootOptions = {
 		...LitElement.shadowRootOptions,
 		mode: 'open',

package/src/button/icon-button.ts

@@ -1,4 +1,4 @@
-import { $LitElement } from '@mixins/index'
+import { SchmancyElement } from '@mixins/index'
 import { css, html, LitElement, PropertyValueMap } from 'lit'
 import { customElement, property, query, state } from 'lit/decorators.js'
 import { ifDefined } from 'lit/directives/if-defined.js'
@@ -7,19 +7,14 @@ import { magnetic } from '../directives/magnetic'
 import { ButtonVariant } from './button'
 
 /**
- * Icon-only button for toolbar actions, close affordances, or overflow menus.
+ * An icon button component.
  * @element schmancy-icon-button
- * @summary Compact round/square button wrapping a single icon glyph. Form-associated like schmancy-button.
- * @example
- * <schmancy-icon-button aria-label="Close" @click=${() => close()}>
- *   <schmancy-icon>close</schmancy-icon>
- * </schmancy-icon-button>
- * @platform button click - Schmancy-skinned native `<button>` (or `<a>` when `href` is set). aria-label is required for a11y because there's no text content.
  * @slot - The default slot (usually an icon or glyph).
  * @csspart base - The underlying native `<button>` (or `<a>` when `href` is set).
  */
 @customElement('schmancy-icon-button')
-export class SchmnacyIconButton extends $LitElement(css`
+export class SchmnacyIconButton extends SchmancyElement {
+	static styles = [css`
 	:host {
 		display: block;
 		border-radius: 9999px;
@@ -40,7 +35,8 @@ export class SchmnacyIconButton extends $LitElement(css`
 		:host(:hover:not([disabled])) { box-shadow: none; }
 		:host(:active:not([disabled])) { transform: none; box-shadow: none; }
 	}
-`) {
+`]
+
 	protected static shadowRootOptions = {
 		...LitElement.shadowRootOptions,
 		mode: 'open',
@@ -256,7 +252,7 @@ export class SchmnacyIconButton extends $LitElement(css`
 						? html`<slot></slot>`
 						: html`
 							<slot style="display:none" @slotchange=${this._handleSlotChange}></slot>
-							<schmancy-icon size=${iconSize} icon=${this.icon || this._capturedIcon}></schmancy-icon>
+							<schmancy-icon size=${iconSize} icon=${ifDefined(this.icon || this._capturedIcon)}></schmancy-icon>
 						`
 					}
 				</a>
@@ -279,7 +275,7 @@ export class SchmnacyIconButton extends $LitElement(css`
 					? html`<slot></slot>`
 					: html`
 						<slot style="display:none" @slotchange=${this._handleSlotChange}></slot>
-						<schmancy-icon size=${iconSize} icon=${this.icon || this._capturedIcon}></schmancy-icon>
+						<schmancy-icon size=${iconSize} icon=${ifDefined(this.icon || this._capturedIcon)}></schmancy-icon>
 					`
 				}
 			</button>

package/src/card/actions.ts

@@ -1,22 +1,14 @@
-import { TailwindElement } from '@mixins/index'
+import { SchmancyElement } from '@mixins/index'
 import { css, html } from 'lit'
 import { customElement } from 'lit/decorators.js'
 
 /**
- * Action row of a schmancy-card — holds the card's buttons / links (typically aligned bottom-right).
- *
  * @element schmancy-card-action
- * @summary Always nested inside schmancy-card. Holds the primary + secondary CTAs for the card.
- * @example
- * <schmancy-card-action>
- *   <schmancy-button variant="text">Cancel</schmancy-button>
- *   <schmancy-button variant="filled">Save</schmancy-button>
- * </schmancy-card-action>
- * @platform div - Styled flex container. Degrades to a plain div if the tag never registers.
  * @slot - The content of the action
  */
 @customElement('schmancy-card-action')
-export default class SchmancyCardAction extends TailwindElement(css`
+export default class SchmancyCardAction extends SchmancyElement {
+	static styles = [css`
 	:host {
 		display: flex;
 		gap: 0.5rem;
@@ -24,7 +16,7 @@ export default class SchmancyCardAction extends TailwindElement(css`
 		align-items: center;
 		justify-content: flex-end;
 	}
-`) {
+`];
 	protected render(): unknown {
 		return html`<slot></slot>`
 	}

package/src/card/card.ts

@@ -1,30 +1,12 @@
-import { TailwindElement } from '@mixins/index'
+import { SchmancyElement } from '@mixins/index'
 import { css, html, LitElement } from 'lit'
 import { customElement, property, state } from 'lit/decorators.js'
 import { cursorGlow } from '../directives/cursor-glow'
 import { ifDefined } from 'lit/directives/if-defined.js'
 
-/**
- * Material Design card — a surface-level container for grouping related content with media / content / actions slots.
- *
- * @element schmancy-card
- * @summary Use for discrete pieces of content that appear in a list (a product, a note, a message). Combine with schmancy-card-media / schmancy-card-content / schmancy-card-action children.
- * @example
- * <schmancy-card type="elevated" href="/items/42">
- *   <schmancy-card-media src="/thumb.jpg" alt="Thumbnail"></schmancy-card-media>
- *   <schmancy-card-content>
- *     <h3>Title</h3>
- *     <p>One-line description of the card's content.</p>
- *   </schmancy-card-content>
- *   <schmancy-card-action>
- *     <schmancy-button variant="text">Open</schmancy-button>
- *   </schmancy-card-action>
- * </schmancy-card>
- * @platform div - Styled `<div>`; becomes an `<a>` when `href` is set so the whole card is a single interactive surface. Degrades to a plain div/a if the tag never registers.
- * @fires schmancy-click - When an interactive card is clicked or activated via keyboard. `detail.value` echoes the card's `type`. Only fires when `interactive` is set.
- */
 @customElement('schmancy-card')
-export default class SchmancyCard extends TailwindElement(css`
+export default class SchmancyCard extends SchmancyElement {
+	static styles = [css`
 	:host {
 		display: block;
 		position: relative;
@@ -107,7 +89,7 @@ export default class SchmancyCard extends TailwindElement(css`
 			opacity: 0;
 		}
 	}
-`) {
+`];
 	protected static shadowRootOptions = {
 		...LitElement.shadowRootOptions,
 		mode: 'open',
@@ -177,7 +159,7 @@ export default class SchmancyCard extends TailwindElement(css`
 		this._updateAriaAttributes()
 	}
 
-	updated(changedProperties: Map<string, any>) {
+	updated(changedProperties: Map<string, unknown>) {
 		super.updated(changedProperties)
 		if (changedProperties.has('interactive') || changedProperties.has('disabled')) {
 			this._updateAriaAttributes()

package/src/card/content.ts

@@ -1,26 +1,18 @@
-import { TailwindElement } from '@mixins/index'
+import { SchmancyElement } from '@mixins/index'
 import { css, html } from 'lit'
 import { customElement } from 'lit/decorators.js'
 
 /**
- * Content region of a schmancy-card — holds the card's headline, supporting text, and inline controls.
- *
  * @element schmancy-card-content
- * @summary Always nested inside schmancy-card. The padded content block between the media and action rows.
- * @example
- * <schmancy-card-content>
- *   <h3>Card title</h3>
- *   <p>Supporting text that describes the card's subject.</p>
- * </schmancy-card-content>
- * @platform div - Styled `<div>` with padding. Degrades to a plain div if the tag never registers.
  */
 @customElement('schmancy-card-content')
-export default class SchmancyCardContent extends TailwindElement(css`
+export default class SchmancyCardContent extends SchmancyElement {
+	static styles = [css`
 	:host {
 		display: block;
 		padding: 1rem;
 	}
-`) {
+`];
 	protected render(): unknown {
 		return html`<slot></slot>`
 	}

package/src/card/media.ts

@@ -1,18 +1,13 @@
-import { TailwindElement } from '@mixins/index'
+import { SchmancyElement } from '@mixins/index'
 import { css, html } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
 
 /**
- * Media region of a schmancy-card — the image / thumbnail at the top of the card.
- *
  * @element schmancy-card-media
- * @summary Always nested inside schmancy-card. Pass `src` + `alt` props or slot an `<img>` / `<video>` for custom media.
- * @example
- * <schmancy-card-media src="/thumb.jpg" alt="Product photo"></schmancy-card-media>
- * @platform img - Renders an `<img>` (or wraps a slotted media element). Degrades to a styled `<img>` if the tag never registers.
  */
 @customElement('schmancy-card-media')
-export default class SchmancyCardMedia extends TailwindElement(css`
+export default class SchmancyCardMedia extends SchmancyElement {
+	static styles = [css`
 	:host {
 		display: block;
 		position: relative;
@@ -57,7 +52,7 @@ export default class SchmancyCardMedia extends TailwindElement(css`
 	:host([fit="scale-down"]) ::slotted(img) {
 		object-fit: scale-down;
 	}
-`) {
+`];
 	@property({ type: String, reflect: true })
 	src: string = ''