@mhmo91/schmancy 0.9.27 → 0.10.1

package/src/steps/schmancy-step.ts

@@ -4,16 +4,18 @@ import { customElement, property, state } from 'lit/decorators.js'
 import { when } from 'lit/directives/when.js'
 import { Subscription } from 'rxjs'
 import { stepsContext, StepsController } from './steps.context'
-import { $LitElement } from '@mixins/litElement.mixin'
+import { SchmancyElement } from '@mixins/index'
 
 @customElement('schmancy-step')
-export class SchmancyStep extends $LitElement(css`
+export class SchmancyStep extends SchmancyElement {
+	static styles = [css`
 	:host {
 		display: grid;
 		/* Base display is just grid, flex properties will be applied dynamically */
 		transition: all 0.2s ease-in-out;
 	}
-`) {
+`]
+
 	/**
 	 * The step's position (1-based). This is used to compare against
 	 * the container's current step to decide if it's "complete",

package/src/steps/schmancy-steps-container.ts

@@ -1,5 +1,5 @@
 import { provide } from '@lit/context'
-import { $LitElement } from '@mixins/litElement.mixin'
+import { SchmancyElement } from '@mixins/index'
 import { css, html } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
 import { distinctUntilChanged, takeUntil, tap } from 'rxjs/operators'
@@ -13,12 +13,14 @@ import { StepsController, stepsContext } from './steps.context'
 export type SchmancyStepsChangeEvent = CustomEvent<{ value: number }>
 
 @customElement('schmancy-steps-container')
-export class SchmancyStepsContainer extends $LitElement(css`
+export class SchmancyStepsContainer extends SchmancyElement {
+	static styles = [css`
 	:host {
 		display: block;
 		overflow: auto;
 	}
-`) {
+`]
+
 	private controller = new StepsController()
 
 	@provide({ context: stepsContext })

package/src/surface/surface.ts

@@ -1,5 +1,5 @@
 import { createContext, provide } from '@lit/context'
-import { TailwindElement } from '@mixins/tailwind.mixin'
+import { SchmancyElement } from '@mixins/index'
 import { SurfaceMixin } from '@mixins/surface.mixin'
 import { TSurfaceColor } from '@schmancy/types'
 import { css, html } from 'lit'
@@ -11,27 +11,32 @@ export const SchmancySurfaceTypeContext = createContext<TSurfaceColor>('surface'
 export type { SchmancySurfaceFill, SchmancySurfaceRounded, SchmancySurfaceElevation } from '@mixins/surface.mixin'
 
 /**
- * Themed container — the root surface primitive. Sets background, text color, rounding, elevation, and (optionally) internal scroll. Provides a `SchmancySurfaceTypeContext` so descendants can adapt to the enclosing surface variant.
+ * `<schmancy-surface>` component
+ *
+ * This component renders a styled container that adapts its dimensions based on the `fill` property.
+ * It supports various rounding options, elevation levels, and applies background and text color classes
+ * based on the specified surface variant. Additionally, when the `scroller` property is true, the component
+ * enables internal scrolling by applying overflow and scroll-behavior styles.
+ *
+ * SurfaceMixin automatically provides surfaceStyles CSS.
  *
  * @element schmancy-surface
- * @summary Wrap a region of a page when you need it to pick up theme tokens (background + on-color + elevation). Nest surfaces to express Material Design's hierarchical color stacking.
+ * @slot - Default slot for projecting child content.
+ *
  * @example
  * <schmancy-surface fill="all" rounded="all" elevation="3" type="surfaceBright" scroller>
  *   <p>Your scrollable content here</p>
  * </schmancy-surface>
- * @platform div - Styled `<div>` with theme-driven background/color/elevation. Degrades to a plain `<div>` if the tag never registers — text stays readable, just loses theming.
- * @slot - Default slot for projecting child content.
  */
 @customElement('schmancy-surface')
-export class SchmancySurface extends SurfaceMixin(
-	TailwindElement(css`
+export class SchmancySurface extends SurfaceMixin(SchmancyElement) {
+	static styles = [css`
 		:host {
 			display: block;
 			box-sizing: border-box;
 			overflow: visible;
 		}
-	`),
-) {
+	`];
 	/**
 	 * Specifies the surface type for styling.
 	 * Provided to descendant components via context.

package/src/switch/switch.test.ts

@@ -2,6 +2,8 @@ import { afterEach, beforeEach, describe, expect, it } from 'vitest'
 import { expectNoA11yViolations } from '../test-utils/a11y'
 import './switch'
 
+const nextUpdate = () => new Promise(r => requestAnimationFrame(() => r(null)))
+
 describe('schmancy-switch', () => {
 	let host: HTMLDivElement
 
@@ -14,8 +16,6 @@ describe('schmancy-switch', () => {
 		host.remove()
 	})
 
-	const nextUpdate = () => new Promise(r => requestAnimationFrame(() => r(null)))
-
 	it('is form-associated and contributes when checked', async () => {
 		host.innerHTML = `
 			<form>

package/src/switch/switch.ts

@@ -1,19 +1,16 @@
-import { TailwindElement } from '@mixins/index'
+import { SchmancyElement } from '@mixins/index'
 import { css, html, LitElement, nothing } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
 
 export type SchmancySwitchChangeEvent = CustomEvent<{ value: boolean }>
 
 /**
- * Binary on/off control with immediate effect. Form-associated, keyboard-accessible, semantically a switch (ARIA role="switch"). Distinct from `schmancy-checkbox`: a switch represents an immediate state change, a checkbox represents a selection in a form to be submitted.
+ * Binary on/off control. Form-associated, keyboard-accessible, semantically a
+ * switch (ARIA role="switch"). Distinct from `schmancy-checkbox`: a switch
+ * represents an immediate state change, a checkbox represents a selection in
+ * a form to be submitted.
  *
  * @element schmancy-switch
- * @summary Use when flipping the control takes effect right away (e.g. "Dark mode", "Enable notifications"). Prefer schmancy-checkbox for form submissions.
- * @example
- * <schmancy-switch ?checked=${this.darkMode} @change=${(e) => this.darkMode = e.detail.value}>
- *   Dark mode
- * </schmancy-switch>
- * @platform switch change - Accessible native `<button role="switch" aria-checked>` under the hood. No native HTML element exists; falls back to a styled checkbox if the tag never registers.
  * @fires change - `CustomEvent<{ value: boolean }>` when the state changes.
  * @attr checked - Initial checked state (also reflected via `value`).
  * @attr disabled - Disables interaction.
@@ -23,7 +20,8 @@ export type SchmancySwitchChangeEvent = CustomEvent<{ value: boolean }>
  * @csspart thumb - The moving thumb.
  */
 @customElement('schmancy-switch')
-export class SchmancySwitch extends TailwindElement(css`
+export class SchmancySwitch extends SchmancyElement {
+	static styles = [css`
 	:host {
 		display: inline-block;
 	}
@@ -76,7 +74,7 @@ export class SchmancySwitch extends TailwindElement(css`
 	@media (prefers-reduced-motion: reduce) {
 		.track, .thumb { transition: none; }
 	}
-`) {
+`];
 	static formAssociated = true
 	private internals: ElementInternals | undefined
 

package/src/table/row.ts

@@ -1,10 +1,10 @@
-import { $LitElement } from '@mixins/litElement.mixin'
+import { SchmancyElement } from '@mixins/index'
 import { html, TemplateResult } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
 import { TableColumn } from './table' // Import TableColumn interface with updated types
 
 @customElement('schmancy-table-row')
-export class SchmancyTableRow<T extends Record<string, any> = any> extends $LitElement() {
+export class SchmancyTableRow<T extends Record<string, any> = any> extends SchmancyElement {
 	@property({ type: Array, attribute: false })
 	columns: TableColumn<T>[] = []
 
@@ -45,9 +45,12 @@ export class SchmancyTableRow<T extends Record<string, any> = any> extends $LitE
 	render(): TemplateResult {
 		return html`
 			<schmancy-list-item class="w-full">
-				<schmancy-grid .cols=${this.cols} align="center" gap="md">
+				<div
+					class="grid items-center gap-4"
+					style=${this.styleMap({ gridTemplateColumns: this.cols })}
+				>
 					${this.columns.map(column => this.renderCell(column))}
-				</schmancy-grid>
+				</div>
 			</schmancy-list-item>
 		`
 	}

package/src/table/table.ts

@@ -1,5 +1,5 @@
 import '@lit-labs/virtualizer'
-import { $LitElement } from '@mixins/litElement.mixin'
+import { SchmancyElement } from '@mixins/index'
 import { html, TemplateResult } from 'lit'
 import { customElement, property, state } from 'lit/decorators.js'
 import './row' // Import the schmancy-table-row component
@@ -26,18 +26,12 @@ export interface RowEventDetail<T> {
 export type SortDirection = 'asc' | 'desc' | null
 
 /**
- * Generic data table — typed columns, optional sort, custom renderers per column. Pass `data` (array) and `columns` (TableColumn descriptors).
+ * SchmancyDataTable is a generic data table component.
+ * It supports sorting, filtering, and custom rendering of rows.
  *
- * @element schmancy-table
- * @summary Use for tabular data where each column has a known shape. Pair with `<schmancy-table-row>` for the per-row interaction surface. Sort by setting `sortable: true` on a column descriptor; the table emits `sort-change` so the parent can re-fetch / re-sort in the data layer if needed.
- * @example
- * <schmancy-table .data=${rows} .columns=${[{ name: 'Name', key: 'name' }, { name: 'Status', key: 'status' }]}></schmancy-table>
- * @platform table - Renders an accessible table with `<lit-virtualizer>` for large datasets. Degrades to a styled `<table>` if the tag never registers.
- * @fires click - When a data row is activated. `detail.item` is the row's source object, `detail.index` is the position in the data array.
- * @fires sort-change - When the user toggles a column sort. `detail.column` is the column key, `detail.direction` is `'asc' | 'desc' | null`.
  */
 @customElement('schmancy-table')
-export class SchmancyDataTable<T extends Record<string, any> = any> extends $LitElement() {
+export class SchmancyDataTable<T extends Record<string, any> = any> extends SchmancyElement {
 	@property({ type: Array, attribute: false })
 	columns: TableColumn<T>[] = []
 
@@ -202,9 +196,18 @@ export class SchmancyDataTable<T extends Record<string, any> = any> extends $Lit
 			'cursor-pointer gap-1': this.sortable && column.sortable !== false && column.key,
 		})
 		return html`
-			<schmancy-grid class="h-full w-full" cols="1fr" rows="auto 1fr">
+			<div
+				class="grid h-full w-full"
+				style="grid-template-columns: 1fr; grid-template-rows: auto 1fr;"
+			>
 				<schmancy-surface rounded="top" elevation="1" type="glass" class="sticky top-0 z-10">
-					<schmancy-grid align="center" class="px-4 py-3" .cols=${this.cols} gap="md" rows="1fr">
+					<div
+						class="grid items-center gap-4 px-4 py-3"
+						style=${this.styleMap({
+							gridTemplateColumns: this.cols,
+							gridTemplateRows: '1fr',
+						})}
+					>
 						${this.columns.map(
 							column => html`
 								<div
@@ -218,7 +221,7 @@ export class SchmancyDataTable<T extends Record<string, any> = any> extends $Lit
 								</div>
 							`,
 						)}
-					</schmancy-grid>
+					</div>
 				</schmancy-surface>
 
 				${this.filteredData.length > 0
@@ -260,7 +263,7 @@ export class SchmancyDataTable<T extends Record<string, any> = any> extends $Lit
 								<schmancy-typography type="body" token="lg"> No data available </schmancy-typography>
 							</div>
 						`}
-			</schmancy-grid>
+			</div>
 		`
 	}
 }

package/src/tabs/index.ts

@@ -1,4 +1,2 @@
 export * from './tab';
 export * from './tabs-group';
-export * from './tabs-compatibility';
-export * from './tabs-compatibility';

package/src/tabs/tab.ts

@@ -1,11 +1,11 @@
 import { consume } from '@lit/context'
-import { TailwindElement } from '@mixins/index'
+import { SchmancyElement } from '@mixins/index'
 import { html } from 'lit'
 import { customElement, property, state } from 'lit/decorators.js'
 import { SchmancyTabsModeContext } from './context'
 
 @customElement('schmancy-tab')
-export default class SchmancyTab extends TailwindElement() {
+export default class SchmancyTab extends SchmancyElement {
 	@property({ type: String, reflect: true }) label
 	@property({ type: String, reflect: true }) value
 	@property({ type: Boolean, reflect: true }) active!: boolean

package/src/tabs/tabs-group.ts

@@ -1,5 +1,5 @@
 import { provide } from '@lit/context'
-import { TailwindElement } from '@mixins/index'
+import { SchmancyElement } from '@mixins/index'
 import { css, html } from 'lit'
 import { customElement, property, query, queryAssignedElements, state } from 'lit/decorators.js'
 import { repeat } from 'lit/directives/repeat.js'
@@ -12,12 +12,13 @@ import SchmancyTab from './tab'
  * @fires tab-changed - The event fired when the tab is changed
  */
 @customElement('schmancy-tab-group')
-export default class SchmancyTabGroup extends TailwindElement(css`
+export default class SchmancyTabGroup extends SchmancyElement {
+	static styles = [css`
 	:host {
 		display: block;
 		height: 100%;
 	}
-`) {
+`];
 	@provide({ context: SchmancyTabsModeContext })
 	@property({ type: String })
 	mode: TSchmancyTabsMode = 'tabs'
@@ -114,7 +115,9 @@ export default class SchmancyTabGroup extends TailwindElement(css`
 				tab.active = false
 			}
 		})
-		this.mode === 'tabs' && (this.activeTab = selectedTab.value)
+		if (this.mode === 'tabs') {
+			this.activeTab = selectedTab.value
+		}
 		this.dispatchEvent(new CustomEvent('tab-changed', { detail: this.activeTab }))
 	}
 

package/src/teleport/teleport.component.ts

@@ -11,9 +11,11 @@ import {
 	default as teleportationService,
 } from './teleport.service'
 import { watchElementRect } from './watcher'
-import { $LitElement } from '@mixins/index'
+import { SchmancyElement } from '@mixins/index'
 @customElement('schmancy-teleport')
-export class SchmancyTeleportation extends $LitElement(css``) {
+export class SchmancyTeleportation extends SchmancyElement {
+	static styles = [css``]
+
 	/**
 	 * @attr {string} uuid - The component tag to teleport
 	 * @readonly
@@ -28,7 +30,7 @@ export class SchmancyTeleportation extends $LitElement(css``) {
 
 	@property({ type: Number }) delay = 0
 
-	debugging = import.meta.env.DEV ? true : false
+	debugging = Boolean(import.meta.env.DEV)
 
 	get _slottedChildren() {
 		const slot = this.shadowRoot.querySelector('slot')

package/src/textarea/textarea.ts

@@ -1,22 +1,14 @@
-import { LitElement, html, nothing, type PropertyValues } from 'lit'
+import { LitElement, html, nothing, unsafeCSS, type PropertyValues } from 'lit'
 import { customElement, property, query } from 'lit/decorators.js'
 import { ifDefined } from 'lit/directives/if-defined.js'
 import { createRef, ref } from 'lit/directives/ref.js'
 import { when } from 'lit/directives/when.js'
 import { distinctUntilChanged, filter, fromEvent, map } from 'rxjs'
 import style from './textarea.scss?inline'
-import { TailwindElement } from '@mixins/index'
+import { SchmancyElement } from '@mixins/index'
 
 /**
- * Multi-line text input with auto-resize and form integration. Form-associated.
- *
- * @element schmancy-textarea
- * @summary Textarea for freeform text — notes, descriptions, messages. Auto-grows with content up to a maxlength.
- * @example
- * <schmancy-textarea name="description" label="Description" rows="4" maxlength="500"></schmancy-textarea>
- * @platform textarea change - Schmancy-skinned native `<textarea>`. Degrades to styled native `<textarea>` if the tag never registers.
- * @fires input - On every keystroke.
- * @fires change - On blur.
+ * Textarea component with auto-resize and form integration.
  *
  * @prop {string} name - Name attribute for form submission
  * @prop {string} value - Current value of the textarea
@@ -28,7 +20,9 @@ import { TailwindElement } from '@mixins/index'
  * @prop {number} maxlength - Maximum character length
  */
 @customElement('schmancy-textarea')
-export default class SchmancyTextarea extends TailwindElement(style) {
+export default class SchmancyTextarea extends SchmancyElement {
+	static styles = [unsafeCSS(style)];
+
 	protected static shadowRootOptions = {
 		...LitElement.shadowRootOptions,
 		delegatesFocus: true,

package/src/theme/theme-audio-player.ts

@@ -18,7 +18,7 @@
  * ```
  */
 
-import { $LitElement } from '@mixins/litElement.mixin'
+import { SchmancyElement } from '@mixins/index'
 import { html, css } from 'lit'
 import { customElement, state } from 'lit/decorators.js'
 import { when } from 'lit/directives/when.js'
@@ -59,11 +59,13 @@ declare global {
  * Integrates with the Sound Service for consistent sound management
  */
 @customElement('schmancy-theme-audio-player')
-export class SchmancyThemeAudioPlayer extends $LitElement(css`
+export class SchmancyThemeAudioPlayer extends SchmancyElement {
+	static styles = [css`
 	:host {
 		display: block;
 	}
-`) {
+`]
+
 	/** Current theme color */
 	@state() private currentColor: string = '#6200ee'
 
@@ -364,7 +366,7 @@ export class SchmancyThemeAudioPlayer extends $LitElement(css`
 						placeholder="I'm feeling..."
 						.value=${this.moodText}
 						@input=${this.handleMoodInput}
-						?disabled=${this.isGenerating}
+						.disabled=${this.isGenerating}
 						class="w-full"
 					></schmancy-input>
 				</div>
@@ -385,7 +387,7 @@ export class SchmancyThemeAudioPlayer extends $LitElement(css`
 					${when(
 						this.isGenerating,
 						() => html`
-							<schmancy-progress-circular indeterminate size="20"></schmancy-progress-circular>
+							<schmancy-progress indeterminate size="sm"></schmancy-progress>
 							<span class="ml-2">Generating...</span>
 						`,
 						() => html`

package/src/theme/theme-controller.ts

@@ -1,4 +1,4 @@
-import { $LitElement } from '@mixins/litElement.mixin'
+import { SchmancyElement } from '@mixins/index'
 import { html } from 'lit'
 import { customElement, property, state } from 'lit/decorators.js'
 import { debounceTime, Subject, takeUntil, tap, switchMap, of } from 'rxjs'
@@ -34,7 +34,7 @@ export type { ColorPreset as ThemeColorPreset }
  * ```
  */
 @customElement('schmancy-theme-controller')
-export class SchmancyThemeController extends $LitElement() {
+export class SchmancyThemeController extends SchmancyElement {
 	@state() protected currentScheme: 'dark' | 'light' | 'auto' = 'auto'
 	@state() protected currentColor: string = '#6200ee'
 	@state() protected resolvedScheme: 'dark' | 'light' = 'light'

package/src/theme/theme.component.ts

@@ -1,6 +1,6 @@
 import { provide } from '@lit/context'
 import { argbFromHex, themeFromSourceColor } from '@material/material-color-utilities'
-import { $LitElement } from '../../mixins/index'
+import { SchmancyElement } from '../../mixins/index'
 import { html, unsafeCSS } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
 import { Observable, of, switchMap, fromEvent, takeUntil } from 'rxjs'
@@ -27,26 +27,33 @@ const $colorScheme = new Observable<string>(subscriber => {
 })
 
 /**
- * Theme provider — generates a Material 3 palette from a seed color, resolves light/dark scheme, and publishes the token set to descendants as CSS custom properties (var(--schmancy-sys-color-…)).
+ * SchmancyThemeComponent - Provides theming capabilities for Schmancy components.
+ *
+ * This component manages color schemes, primary colors, and theme distribution
+ * throughout the component tree. It can be used at the root level or nested
+ * to provide different themes to different parts of the application.
  *
  * @element schmancy-theme
- * @summary Always wrap your app root in a `<schmancy-theme root scheme="auto" color="#…">`. Nest additional `<schmancy-theme>` blocks to override theming for a subtree.
+ *
  * @example
+ * ```html
  * <!-- Root theme provider -->
- * <schmancy-theme root scheme="auto" color="#6200ee">
+ * <schmancy-theme color="#6200ee" scheme="auto" root>
  *   <your-app></your-app>
  * </schmancy-theme>
- * @example
- * <!-- Nested theme for a specific section -->
- * <schmancy-theme scheme="dark" color="#2196f3">
- *   <schmancy-surface fill="all">
- *     <!-- Components here use the blue dark theme -->
- *   </schmancy-surface>
+ *
+ * <!-- Nested theme for specific section -->
+ * <schmancy-theme color="#2196f3" scheme="dark">
+ *   <div class="dark-section">
+ *     <!-- Components here will use blue dark theme -->
+ *   </div>
  * </schmancy-theme>
- * @platform div - Styled `<div>` that publishes theme tokens via inline `--schmancy-sys-color-*` custom properties. Degrades to a plain div if the tag never registers — children lose theming and fall back to browser defaults.
+ * ```
  */
 @customElement('schmancy-theme')
-export class SchmancyThemeComponent extends $LitElement(tailwindStyles) {
+export class SchmancyThemeComponent extends SchmancyElement {
+	static styles = [tailwindStyles]
+
 	/**
 	 * Primary color for the theme in hex format.
 	 * @attr color
@@ -189,7 +196,7 @@ export class SchmancyThemeComponent extends $LitElement(tailwindStyles) {
 
 		const formattedTheme = formatTheme(
 			themeFromSourceColor(argbFromHex(colorHex)),
-			this.scheme === 'dark' ? true : false,
+			this.scheme === 'dark',
 			{
 				success: argbFromHex('#4CAF50'), // Material Green 500 - vibrant but balanced
 				warning: argbFromHex('#FF9800'), // Material Orange 500 - better contrast than amber
@@ -286,9 +293,9 @@ export class SchmancyThemeComponent extends $LitElement(tailwindStyles) {
 
 	protected render(): unknown {
 		return html`
-			<schmancy-container type="containerLowest">
+			<schmancy-surface type="containerLowest">
 				<slot></slot>
-			</schmancy-container>
+			</schmancy-surface>
 		`
 	}
 }

package/src/theme/theme.service.ts

@@ -15,19 +15,18 @@ import {
 import { ThemeHereIAm, ThemeHereIAmEvent, ThemeWhereAreYou } from './theme.events'
 import type { SchmancyThemeComponent } from './theme.component'
 import type { TSchmancyTheme } from './theme.interface'
-import { createContext } from '../store'
+import { state } from '../state'
 
 interface ThemeSettings {
   scheme: 'dark' | 'light' | 'auto'
   color: string
 }
 
-// Single context for all theme settings
-const ThemeContext = createContext<ThemeSettings>(
-  { scheme: 'auto', color: '#6200ee' },
-  'local',
-  'schmancy-theme-settings'
-)
+// Theme settings — persists to localStorage under namespace `schmancy/theme`.
+const ThemeContext = state<ThemeSettings>('schmancy/theme').local({
+  scheme: 'auto',
+  color: '#6200ee',
+})
 
 /**
  * Theme Service - Provides centralized theme management for Schmancy components.

package/src/theme/theme.style.css

@@ -449,6 +449,7 @@
 	--perspective-midrange: 800px;
 	--perspective-distant: 1200px;
 	--aspect-video: 16 / 9;
+	--aspect-a4: 210 / 297;
 	--ease-in: cubic-bezier(0.4, 0, 1, 1);
 	--ease-out: cubic-bezier(0, 0, 0.2, 1);
 	--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

package/src/theme-button/theme-button.ts

@@ -1,9 +1,9 @@
-import { TailwindElement } from '@mixins/index'
+import { SchmancyElement } from '@mixins/index'
 import { html } from 'lit'
 import { customElement, query } from 'lit/decorators.js'
 
 @customElement('schmancy-theme-button')
-export default class SchmancyThemeButton extends TailwindElement() {
+export default class SchmancyThemeButton extends SchmancyElement {
 	@query('#color') color!: HTMLElement
 
 	protected render(): unknown {

package/src/timeline/index.ts

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