@mhmo91/schmancy 0.8.6 → 0.9.2

package/src/busy/spinner.ts

@@ -0,0 +1,165 @@
+import { TailwindElement } 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`
+	:host {
+		display: inline-block;
+		color: inherit; /* Inherit from parent by default */
+	}
+
+	/* Explicit color options when needed */
+	:host([color="primary"]) {
+		color: var(--schmancy-sys-color-primary-default);
+	}
+
+	:host([color="on-primary"]) {
+		color: var(--schmancy-sys-color-primary-on);
+	}
+
+	:host([color="secondary"]) {
+		color: var(--schmancy-sys-color-secondary-default);
+	}
+
+	:host([color="on-secondary"]) {
+		color: var(--schmancy-sys-color-secondary-on);
+	}
+
+	:host([color="tertiary"]) {
+		color: var(--schmancy-sys-color-tertiary-default);
+	}
+
+	:host([color="on-tertiary"]) {
+		color: var(--schmancy-sys-color-tertiary-on);
+	}
+
+	:host([color="error"]) {
+		color: var(--schmancy-sys-color-error-default);
+	}
+
+	:host([color="on-error"]) {
+		color: var(--schmancy-sys-color-error-on);
+	}
+
+	:host([color="success"]) {
+		color: var(--schmancy-sys-color-success-default);
+	}
+
+	:host([color="on-success"]) {
+		color: var(--schmancy-sys-color-success-on);
+	}
+
+	:host([color="surface"]) {
+		color: var(--schmancy-sys-color-surface-default);
+	}
+
+	:host([color="on-surface"]) {
+		color: var(--schmancy-sys-color-surface-on);
+	}
+
+	:host([color="surface-variant"]) {
+		color: var(--schmancy-sys-color-surface-variant-default);
+	}
+
+	:host([color="on-surface-variant"]) {
+		color: var(--schmancy-sys-color-surface-onVariant);
+	}
+
+	.spinner {
+		animation: spin 1s linear infinite;
+		animation-direction: reverse;
+	}
+
+	@keyframes spin {
+		from {
+			transform: rotate(0deg);
+		}
+		to {
+			transform: rotate(360deg);
+		}
+	}
+`) {
+	@property({ type: String, reflect: true })
+	color?: 'primary' | 'on-primary' | 'secondary' | 'on-secondary' |
+	        'tertiary' | 'on-tertiary' | 'error' | 'on-error' |
+	        'success' | 'on-success' | 'surface' | 'on-surface' |
+	        'surface-variant' | 'on-surface-variant'
+
+	/**
+	 * Size of the spinner - M3 aligned tokens or numeric Tailwind units
+	 * Tokens: 'xxs' (12px), 'xs' (16px), 'sm' (20px), 'md' (24px), 'lg' (32px)
+	 * Numeric: Tailwind units where each unit = 4px (e.g., 6 = 24px)
+	 */
+	@property() size: 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | number = 'md'
+	@property({ type: Boolean }) glass: boolean = false
+
+	protected render(): unknown {
+		// M3 aligned token sizes (fit inside buttons of same token)
+		const tokenSizes: Record<string, number> = {
+			xxs: 12, // fits in 24px button (ultra-compact)
+			xs: 16,  // fits in 32px button
+			sm: 20,  // fits in 40px button
+			md: 24,  // fits in 48px button (default)
+			lg: 32,  // fits in 56px button
+		}
+
+		// Support both token and numeric sizes for backward compatibility
+		let sizeInPx: number
+		if (typeof this.size === 'string' && this.size in tokenSizes) {
+			sizeInPx = tokenSizes[this.size]
+		} else if (typeof this.size === 'number' && !isNaN(this.size)) {
+			// Legacy numeric: Tailwind units (each unit = 4px)
+			sizeInPx = this.size * 4
+		} else {
+			sizeInPx = 24 // fallback to md
+		}
+
+		const style = {
+			width: `${sizeInPx}px`,
+			height: `${sizeInPx}px`,
+		}
+		
+		return this.glass ? html`
+			<div class="spinner relative" style=${this.styleMap(style)}>
+				<!-- Glass container with Apple-style effect -->
+				<div class="absolute inset-0 rounded-full backdrop-blur-xl backdrop-saturate-150
+							bg-surface-container/20
+							shadow-[inset_0_1px_1px_0_rgba(255,255,255,0.2)]
+							border border-outline-variant/30"></div>
+				
+				<!-- Spinner SVG -->
+				<svg fill="none" viewBox="0 0 16 16" aria-hidden="true" role="img" 
+					 style="width: 100%; height: 100%;" class="relative z-10">
+					<path
+						opacity=".7"
+						d="M8 15A7 7 0 108 1a7 7 0 000 14v0z"
+						stroke="currentColor"
+						stroke-width="2"
+					></path>
+					<path d="M15 8a7 7 0 01-7 7" stroke="currentColor" stroke-width="2"></path>
+					<path d="M8 12a4 4 0 100-8 4 4 0 000 8z" fill="currentColor" opacity="0.8"></path>
+				</svg>
+			</div>
+		` : html`
+			<div class="spinner" style=${this.styleMap(style)}>
+				<svg fill="none" viewBox="0 0 16 16" aria-hidden="true" role="img" style="width: 100%; height: 100%;">
+					<path
+						opacity=".5"
+						d="M8 15A7 7 0 108 1a7 7 0 000 14v0z"
+						stroke="currentColor"
+						stroke-width="2"
+					></path>
+					<path d="M15 8a7 7 0 01-7 7" stroke="currentColor" stroke-width="2"></path>
+					<path d="M8 12a4 4 0 100-8 4 4 0 000 8z" fill="currentColor"></path>
+				</svg>
+			</div>
+		`
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'schmancy-spinner': SchmnacySpinner
+	}
+}

package/src/button/button.ts

@@ -0,0 +1,382 @@
+import { $LitElement } from '@mixins/index'
+import { css, html, LitElement } from 'lit'
+import { customElement, property, query, queryAssignedElements } from 'lit/decorators.js'
+import { ifDefined } from 'lit/directives/if-defined.js'
+import { when } from 'lit/directives/when.js'
+import { magnetic } from '../directives/magnetic'
+
+export interface SchmancyButtonEventMap {
+	SchmancyFocus: CustomEvent<void>
+	SchmancyBlur: CustomEvent<void>
+}
+
+export type ButtonVariant = 'elevated' | 'filled' | 'filled tonal' | 'tonal' | 'outlined' | 'text'
+export type ButtonColor = 'primary' | 'secondary' | 'success' | 'error' | 'warning' | 'info' | 'neutral'
+
+/**
+ * A button component.
+ * @element schmancy-button
+ * @slot - The default slot.
+ * @slot prefix - The prefix slot.
+ * @slot suffix - The suffix slot.
+ */
+@customElement('schmancy-button')
+export class SchmancyButton extends $LitElement(
+	css`:host{
+		display: inline-block;
+		min-width: fit-content;
+		overflow: hidden;
+		position: relative;
+		touch-action: manipulation;
+		border-radius: 1rem;
+		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(:hover:not([disabled])) {
+		box-shadow: 0 4px 16px -4px color-mix(in srgb, var(--schmancy-sys-color-primary-default) 20%, transparent);
+	}
+	:host(:active:not([disabled])) {
+		transform: scale(0.97);
+		box-shadow: 0 1px 4px -2px color-mix(in srgb, var(--schmancy-sys-color-primary-default) 10%, transparent);
+		transition-duration: 100ms;
+	}
+	@media (prefers-reduced-motion: reduce) {
+		:host { transition: none; }
+		:host(:hover:not([disabled])) { box-shadow: none; }
+		:host(:active:not([disabled])) { transform: none; box-shadow: none; }
+	}
+	:host *,
+	* {
+		touch-action: manipulation;
+	}`
+) {
+	protected static shadowRootOptions = {
+		...LitElement.shadowRootOptions,
+		mode: 'open',
+		delegatesFocus: true,
+	}
+
+	@query('[part="base"]', true)
+	private nativeElement!: HTMLElement
+
+	private _ariaLabel!: string
+
+	/**
+	 * The variant of the button.
+	 * @attr
+	 * @default 'text'
+	 * @public
+	 */
+	@property({ reflect: true, type: String })
+	public variant: ButtonVariant = 'text'
+
+	/**
+	 * The color of the button.
+	 * @attr
+	 * @default Depends on variant: 'primary' for filled/elevated/outlined/text, 'secondary' for tonal
+	 * @public
+	 */
+	@property({ reflect: true, type: String })
+	public color?: ButtonColor
+
+	/**
+	 * The width of the button.
+	 * @attr
+	 * @type {'full' | 'auto'}
+	 * @default 'auto'
+	 * @public
+	 */
+	@property()
+	public width: 'full' | 'auto' = 'auto'
+
+	/**
+	 * The size of the button.
+	 * @attr
+	 * @type {'xxs' | 'xs' | 'sm' | 'md' | 'lg'}
+	 * @default 'md'
+	 * @public
+	 */
+	@property({ type: String })
+	public size: 'xxs' | 'xs' | 'sm' | 'md' | 'lg' = 'md'
+
+	/**
+	 * The type of the button.
+	 * Defaults to 'button' (preventing accidental form submissions).
+	 * @attr
+	 */
+	@property({ reflect: true, type: String })
+	public type: 'button' | 'reset' | 'submit' = 'button'
+
+	/**
+	 * The URL the button points to.
+	 * If provided, the component will render as an anchor element.
+	 * @attr
+	 */
+	@property()
+	public href?: string
+
+	/**
+	 * Determines whether the button is disabled.
+	 * @attr
+	 */
+	@property({ type: Boolean, reflect: true })
+	public disabled = false
+
+	public override set ariaLabel(value: string) {
+		const oldVal = this._ariaLabel
+		this._ariaLabel = value
+
+		if (this.hasAttribute('aria-label')) {
+			this.removeAttribute('aria-label')
+		}
+		this.requestUpdate('ariaLabel', oldVal)
+	}
+
+	@property({ attribute: 'aria-label' })
+	public override get ariaLabel() {
+		return this._ariaLabel
+	}
+
+	@queryAssignedElements({
+		slot: 'prefix',
+		flatten: true,
+		selector: 'img',
+	})
+	private prefixImgs!: HTMLImageElement[]
+
+	@queryAssignedElements({
+		slot: 'suffix',
+		flatten: true,
+		selector: 'img',
+	})
+	private suffixImgs!: HTMLImageElement[]
+
+	/** Sets focus in the button. */
+	public override focus(options?: FocusOptions) {
+		this.nativeElement.focus(options)
+	}
+
+	/** Removes focus from the button. */
+	public override blur() {
+		this.nativeElement.blur()
+	}
+
+	/**
+	 * Get the effective color based on variant if not explicitly set
+	 * M3 spec: filled = primary, tonal = secondary, others = primary
+	 */
+	protected get effectiveColor(): ButtonColor {
+		if (this.color) return this.color
+
+		// Map 'tonal' to 'filled tonal' for checking
+		const effectiveVariant = this.variant === 'tonal' ? 'filled tonal' : this.variant
+
+		// M3 defaults: tonal uses secondary, others use primary
+		return effectiveVariant === 'filled tonal' ? 'secondary' : 'primary'
+	}
+
+	protected get imgClasses(): string[] {
+		// M3 spec: icon sizes scale with button size
+		const sizeMap = {
+			xxs: 'w-3 h-3',    // 12px for 24px button (ultra-compact)
+			xs: 'w-4 h-4',     // 16px for 32px button (M3 dense)
+			sm: 'w-5 h-5',     // 20px for 40px button (M3 default)
+			md: 'w-6 h-6',     // 24px for 48px button (M3 large)
+			lg: 'w-7 h-7'      // 28px for 56px button (M3 extra large)
+		}
+		return [sizeMap[this.size], 'object-contain']
+	}
+
+	firstUpdated() {
+		// Add image classes and ensure decorative images have an empty alt.
+		this.prefixImgs?.forEach(img => {
+			img.classList.add(...this.imgClasses)
+			if (!img.hasAttribute('alt')) {
+				img.setAttribute('alt', '')
+			}
+		})
+		this.suffixImgs?.forEach(img => {
+			img.classList.add(...this.imgClasses)
+			if (!img.hasAttribute('alt')) {
+				img.setAttribute('alt', '')
+			}
+		})
+	}
+
+	click(): void {
+		this.dispatchEvent(new Event('click', { bubbles: true, composed: true }))
+	}
+
+	// Prevent default behavior when the component is disabled.
+	private _preventDefault(event: Event) {
+		event.preventDefault()
+		event.stopPropagation()
+	}
+
+	render() {
+		// Map 'tonal' variant to 'filled tonal' for backwards compatibility
+		const effectiveVariant = this.variant === 'tonal' ? 'filled tonal' : this.variant;
+
+		// Compute classes for the interactive element.
+		const classes = {
+			'z-0 transition-all duration-200 relative rounded-2xl inline-flex justify-center items-center outline-secondary-default focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-2 outline-hidden w-[inherit] overflow-hidden':
+				true,
+			// Height - M3 spec: 24dp (xxs) → 32dp (dense) → 40dp (default) → 48dp (large) → 56dp (XL)
+			'h-6': this.size === 'xxs',   // 24px - Ultra-compact
+			'h-8': this.size === 'xs',    // 32px - M3 dense/compact
+			'h-10': this.size === 'sm',   // 40px - M3 default
+			'h-12': this.size === 'md',   // 48px - M3 large
+			'h-14': this.size === 'lg',   // 56px - M3 extra large
+			// Padding - M3 spec: horizontal padding 24dp default, scaled proportionally
+			'py-1 px-2': this.size === 'xxs',    // 4px/8px for 24px height
+			'py-2 px-4': this.size === 'xs',     // 8px/16px for 32px height
+			'py-2.5 px-5': this.size === 'sm',   // 10px/20px for 40px height
+			'py-3 px-6': this.size === 'md',     // 12px/24px for 48px height (M3 default)
+			'py-4 px-7': this.size === 'lg',     // 16px/28px for 56px height
+			// Typography - M3 spec: label-large (14px) default, scaled
+			'text-[10px] font-medium leading-3': this.size === 'xxs', // 10px
+			'text-xs font-medium leading-4': this.size === 'xs',   // 12px
+			'text-sm font-medium leading-5': this.size === 'sm' || this.size === 'md',   // 14px - M3 label-large
+			'text-base font-medium leading-6': this.size === 'lg', // 16px
+			// Letter spacing - M3 spec
+			'tracking-[0.1px]': true,
+			// Gap - Scaled with size
+			'gap-0.5': this.size === 'xxs', // 2px
+			'gap-1': this.size === 'xs',    // 4px
+			'gap-1.5': this.size === 'sm',  // 6px
+			'gap-2': this.size === 'md',    // 8px
+			'gap-2.5': this.size === 'lg',  // 10px
+			'cursor-pointer': !this.disabled,
+			'opacity-[0.38]': this.disabled,
+			'hover:shadow-sm': !this.disabled && effectiveVariant === 'elevated',
+			'w-full tex-center': this.width === 'full',
+			// Elevated variant
+			'bg-surface-low shadow-xs': effectiveVariant === 'elevated',
+			// Outlined variant
+			'bg-transparent border-1 border-solid': effectiveVariant === 'outlined',
+			'border-outline': effectiveVariant === 'outlined' && this.effectiveColor === 'primary',
+			'border-success-default': effectiveVariant === 'outlined' && this.effectiveColor === 'success',
+			'border-error-default': effectiveVariant === 'outlined' && this.effectiveColor === 'error',
+			'border-warning-default': effectiveVariant === 'outlined' && this.effectiveColor === 'warning',
+			'border-info-default': effectiveVariant === 'outlined' && this.effectiveColor === 'info',
+			'border-secondary-default': effectiveVariant === 'outlined' && this.effectiveColor === 'secondary',
+			'border-outline-variant': effectiveVariant === 'outlined' && this.effectiveColor === 'neutral',
+			// Filled variant - background colors
+			'bg-primary-default': effectiveVariant === 'filled' && this.effectiveColor === 'primary',
+			'bg-secondary-default': effectiveVariant === 'filled' && this.effectiveColor === 'secondary',
+			'bg-success-default': effectiveVariant === 'filled' && this.effectiveColor === 'success',
+			'bg-error-default': effectiveVariant === 'filled' && this.effectiveColor === 'error',
+			'bg-warning-default': effectiveVariant === 'filled' && this.effectiveColor === 'warning',
+			'bg-info-default': effectiveVariant === 'filled' && this.effectiveColor === 'info',
+			'bg-surface-containerHighest': effectiveVariant === 'filled' && this.effectiveColor === 'neutral',
+			// Filled variant - text colors
+			'text-primary-on': effectiveVariant === 'filled' && this.effectiveColor === 'primary',
+			'text-secondary-on': effectiveVariant === 'filled' && this.effectiveColor === 'secondary',
+			'text-success-on': effectiveVariant === 'filled' && this.effectiveColor === 'success',
+			'text-error-on': effectiveVariant === 'filled' && this.effectiveColor === 'error',
+			'text-warning-on': effectiveVariant === 'filled' && this.effectiveColor === 'warning',
+			'text-info-on': effectiveVariant === 'filled' && this.effectiveColor === 'info',
+			'text-surface-on': effectiveVariant === 'filled' && this.effectiveColor === 'neutral',
+			// Filled tonal variant - background colors
+			'bg-primary-container': effectiveVariant === 'filled tonal' && this.effectiveColor === 'primary',
+			'bg-secondary-container': effectiveVariant === 'filled tonal' && this.effectiveColor === 'secondary',
+			'bg-success-container': effectiveVariant === 'filled tonal' && this.effectiveColor === 'success',
+			'bg-error-container': effectiveVariant === 'filled tonal' && this.effectiveColor === 'error',
+			'bg-warning-container': effectiveVariant === 'filled tonal' && this.effectiveColor === 'warning',
+			'bg-info-container': effectiveVariant === 'filled tonal' && this.effectiveColor === 'info',
+			'bg-surface-containerLow': effectiveVariant === 'filled tonal' && this.effectiveColor === 'neutral',
+			// Filled tonal variant - text colors
+			'text-primary-onContainer': effectiveVariant === 'filled tonal' && this.effectiveColor === 'primary',
+			'text-secondary-onContainer': effectiveVariant === 'filled tonal' && this.effectiveColor === 'secondary',
+			'text-success-onContainer': effectiveVariant === 'filled tonal' && this.effectiveColor === 'success',
+			'text-error-onContainer': effectiveVariant === 'filled tonal' && this.effectiveColor === 'error',
+			'text-warning-onContainer': effectiveVariant === 'filled tonal' && this.effectiveColor === 'warning',
+			'text-info-onContainer': effectiveVariant === 'filled tonal' && this.effectiveColor === 'info',
+			// Text and elevated variants - text colors
+			'text-primary-default': (effectiveVariant === 'text' || effectiveVariant === 'elevated' || effectiveVariant === 'outlined') && this.effectiveColor === 'primary',
+			'text-secondary-default': (effectiveVariant === 'text' || effectiveVariant === 'elevated' || effectiveVariant === 'outlined') && this.effectiveColor === 'secondary',
+			'text-success-default': (effectiveVariant === 'text' || effectiveVariant === 'elevated' || effectiveVariant === 'outlined') && this.effectiveColor === 'success',
+			'text-error-default': (effectiveVariant === 'text' || effectiveVariant === 'elevated' || effectiveVariant === 'outlined') && this.effectiveColor === 'error',
+			'text-warning-default': (effectiveVariant === 'text' || effectiveVariant === 'elevated' || effectiveVariant === 'outlined') && this.effectiveColor === 'warning',
+			'text-info-default': (effectiveVariant === 'text' || effectiveVariant === 'elevated' || effectiveVariant === 'outlined') && this.effectiveColor === 'info',
+			'text-surface-onVariant': (effectiveVariant === 'text' || effectiveVariant === 'elevated' || effectiveVariant === 'outlined' || effectiveVariant === 'filled tonal') && this.effectiveColor === 'neutral',
+		}
+
+		const stateLayerClasses = {
+			'absolute inset-0 hover:opacity-[0.08] z-0 rounded-2xl': true,
+			// M3 focus and pressed states
+			'focus-visible:opacity-[0.10]': true,  // M3 focus state
+			'active:opacity-[0.10]': true,         // M3 pressed state
+			// Filled variant hover
+			'hover:bg-primary-on': effectiveVariant === 'filled' && this.effectiveColor === 'primary',
+			'hover:bg-secondary-on': effectiveVariant === 'filled' && this.effectiveColor === 'secondary',
+			'hover:bg-success-on': effectiveVariant === 'filled' && this.effectiveColor === 'success',
+			'hover:bg-error-on': effectiveVariant === 'filled' && this.effectiveColor === 'error',
+			'hover:bg-warning-on': effectiveVariant === 'filled' && this.effectiveColor === 'warning',
+			'hover:bg-info-on': effectiveVariant === 'filled' && this.effectiveColor === 'info',
+			'hover:bg-surface-on': effectiveVariant === 'filled' && this.effectiveColor === 'neutral',
+			// Outlined, elevated, text variants hover
+			'hover:bg-primary-default': (effectiveVariant === 'outlined' || effectiveVariant === 'elevated' || effectiveVariant === 'text') && this.effectiveColor === 'primary',
+			'hover:bg-secondary-default': (effectiveVariant === 'outlined' || effectiveVariant === 'elevated' || effectiveVariant === 'text') && this.effectiveColor === 'secondary',
+			'hover:bg-success-default': (effectiveVariant === 'outlined' || effectiveVariant === 'elevated' || effectiveVariant === 'text') && this.effectiveColor === 'success',
+			'hover:bg-error-default': (effectiveVariant === 'outlined' || effectiveVariant === 'elevated' || effectiveVariant === 'text') && this.effectiveColor === 'error',
+			'hover:bg-warning-default': (effectiveVariant === 'outlined' || effectiveVariant === 'elevated' || effectiveVariant === 'text') && this.effectiveColor === 'warning',
+			'hover:bg-info-default': (effectiveVariant === 'outlined' || effectiveVariant === 'elevated' || effectiveVariant === 'text') && this.effectiveColor === 'info',
+			'hover:bg-surface-onVariant': (effectiveVariant === 'outlined' || effectiveVariant === 'elevated' || effectiveVariant === 'text') && this.effectiveColor === 'neutral',
+			// Filled tonal hover
+			'hover:bg-primary-container': effectiveVariant === 'filled tonal' && this.effectiveColor === 'primary',
+			'hover:bg-secondary-container': effectiveVariant === 'filled tonal' && this.effectiveColor === 'secondary',
+			'hover:bg-success-container': effectiveVariant === 'filled tonal' && this.effectiveColor === 'success',
+			'hover:bg-error-container': effectiveVariant === 'filled tonal' && this.effectiveColor === 'error',
+			'hover:bg-warning-container': effectiveVariant === 'filled tonal' && this.effectiveColor === 'warning',
+			'hover:bg-info-container': effectiveVariant === 'filled tonal' && this.effectiveColor === 'info',
+			'hover:bg-surface-containerLow': effectiveVariant === 'filled tonal' && this.effectiveColor === 'neutral',
+		}
+
+		// If href is provided, render an anchor element.
+		if (this.href) {
+			return html`
+				<a
+					${magnetic({ strength: 3, radius: 60 })}
+					part="base"
+					href=${ifDefined(this.disabled ? undefined : this.href)}
+					aria-label=${ifDefined(this.ariaLabel)}
+					class="${this.classMap(classes)}"
+					tabindex=${this.disabled ? '-1' : '0'}
+					aria-disabled=${this.disabled}
+					@click=${this.disabled ? this._preventDefault : undefined}
+				>
+					${when(!this.disabled, () => html`<div class="${this.classMap(stateLayerClasses)}"></div>`)}
+					<slot name="prefix"></slot>
+					<slot></slot>
+					<slot name="suffix"></slot>
+				</a>
+			`
+		}
+
+		// Otherwise, render a native button element.
+		return html`
+			<button
+				${magnetic({ strength: 3, radius: 60 })}
+				part="base"
+				aria-label=${ifDefined(this.ariaLabel)}
+				?disabled=${this.disabled}
+				class="${this.classMap(classes)}"
+				type=${ifDefined(this.type)}
+				tabindex=${ifDefined(this.disabled ? '-1' : undefined)}
+			>
+				${when(!this.disabled, () => html`<div class="${this.classMap(stateLayerClasses)}"></div>`)}
+				<slot name="prefix"></slot>
+				<slot></slot>
+				<slot name="suffix"></slot>
+			</button>
+		`
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'schmancy-button': SchmancyButton
+	}
+}