@mhmo91/schmancy 0.9.27 → 0.10.1

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 = ''
 

package/src/charts/area-chart.ts

@@ -1,7 +1,7 @@
 import { html, css, PropertyValues } from 'lit'
 import { customElement, property, state } from 'lit/decorators.js'
 import { ref, createRef, Ref } from 'lit/directives/ref.js'
-import { $LitElement } from '@mixins/index'
+import { SchmancyElement } from '@mixins/index'
 import type { ChartDataPoint, ChartTheme, ProcessedDataPoint } from './types'
 import { catmullRomSpline, hexToRgba, easeOutCubic } from './utils'
 
@@ -15,11 +15,13 @@ interface TooltipData {
 }
 
 @customElement('schmancy-area-chart')
-export class SchmancyAreaChart extends $LitElement(css`
+export class SchmancyAreaChart extends SchmancyElement {
+	static styles = [css`
 	:host {
 		display: block;
 	}
-`) {
+`]
+
 	/** Chart data points */
 	@property({ type: Array })
 	data: ChartDataPoint[] = []
@@ -195,7 +197,7 @@ export class SchmancyAreaChart extends $LitElement(css`
 		if (!this.data || this.data.length === 0) return []
 
 		// Find top N peak values
-		const sortedByValue = [...this.data].sort((a, b) => b.value - a.value)
+		const sortedByValue = [...this.data].toSorted((a, b) => b.value - a.value)
 		const peakLabels = new Set(sortedByValue.slice(0, this.peakCount).map(d => d.label))
 
 		return this.data.map(d => ({
@@ -244,6 +246,7 @@ export class SchmancyAreaChart extends $LitElement(css`
 		const maxValue = Math.max(...data.map(d => d.value), 1)
 
 		// Calculate positions
+		// oxlint-disable-next-line oxc/no-map-spread
 		const points = data.map((d, i) => ({
 			...d,
 			x: padding.left + (data.length > 1 ? (i / (data.length - 1)) * chartWidth : chartWidth / 2),

package/src/charts/pills.ts

@@ -1,7 +1,7 @@
 import { html, css, PropertyValues } from 'lit'
 import { customElement, property, state } from 'lit/decorators.js'
 import { repeat } from 'lit/directives/repeat.js'
-import { $LitElement } from '@mixins/index'
+import { SchmancyElement } from '@mixins/index'
 import type { PillDataPoint, PillSegment } from './types'
 
 /** Default color palette for segments - expanded for uniqueness */
@@ -24,11 +24,13 @@ const DEFAULT_COLORS = [
 ]
 
 @customElement('schmancy-pills')
-export class SchmancyPills extends $LitElement(css`
+export class SchmancyPills extends SchmancyElement {
+	static styles = [css`
 	:host {
 		display: block;
 	}
-`) {
+`]
+
 	/** Chart data points */
 	@property({ type: Array })
 	data: PillDataPoint[] = []
@@ -168,7 +170,7 @@ export class SchmancyPills extends $LitElement(css`
 
 		// Sort by total value (most = first color)
 		const sortedCategories = Array.from(categoryTotals.entries())
-			.sort((a, b) => b[1] - a[1])
+			.toSorted((a, b) => b[1] - a[1])
 			.map(([cat]) => cat)
 
 		// Clear and rebuild - use explicit colors if available, otherwise default palette

package/src/checkbox/checkbox.test.ts

@@ -2,6 +2,8 @@ import { afterEach, beforeEach, describe, expect, it } from 'vitest'
 import { expectNoA11yViolations } from '../test-utils/a11y'
 import './checkbox'
 
+const nextUpdate = () => new Promise(r => requestAnimationFrame(() => r(null)))
+
 describe('schmancy-checkbox', () => {
 	let host: HTMLDivElement
 
@@ -14,8 +16,6 @@ describe('schmancy-checkbox', () => {
 		host.remove()
 	})
 
-	const nextUpdate = () => new Promise(r => requestAnimationFrame(() => r(null)))
-
 	it('is defined on the element registry', () => {
 		expect(customElements.get('schmancy-checkbox')).toBeDefined()
 	})

package/src/checkbox/checkbox.ts

@@ -1,5 +1,5 @@
 import '@material/web/checkbox/checkbox.js'
-import { TailwindElement } from '@mixins/index'
+import { SchmancyElement } from '@mixins/index'
 import { html, LitElement } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
 import { when } from 'lit/directives/when.js'
@@ -9,19 +9,13 @@ export type schmancyCheckBoxChangeEvent = CustomEvent<{
 }>
 
 /**
- * Binary checkbox for multi-select or boolean form fields. Wraps Material Web's `<md-checkbox>`; form-associated.
- *
  * @element schmancy-checkbox
- * @summary Use for "select many from a list" or any boolean that's part of a form submission. Prefer schmancy-switch for immediate-effect toggles.
- * @example
- * <schmancy-checkbox name="tos" required>I accept the terms</schmancy-checkbox>
- * @platform checkbox change - Wraps `<md-checkbox>` from `@material/web`. Degrades to styled native `<input type="checkbox">` if the tag never registers.
  * @slot - The label for the checkbox.
- * @fires valueChange - `CustomEvent<{ value: boolean }>` when the checkbox is toggled.
+ * @fires valueChange - Event fired when the checkbox value changes.
  **/
 
 @customElement('schmancy-checkbox')
-class SchmancyCheckboxElement extends TailwindElement() {
+class SchmancyCheckboxElement extends SchmancyElement {
 	protected static shadowRootOptions = {
 		...LitElement.shadowRootOptions,
 		delegatesFocus: true,

package/src/chips/assist-chip.ts

@@ -1,4 +1,4 @@
-import { TailwindElement } from '@mixins/tailwind.mixin'
+import { SchmancyElement } from '@mixins/index'
 import { css, html, LitElement } from 'lit'
 import { customElement, property, state } from 'lit/decorators.js'
 import { classMap } from 'lit/directives/class-map.js'
@@ -6,20 +6,12 @@ import { BehaviorSubject, combineLatest } from 'rxjs'
 import { takeUntil } from 'rxjs/operators'
 
 /**
- * Assist chip — single-tap trigger for a contextual action (open calendar event, share content, jump to related view). Distinct from filter and input chips: assist chips have no selected state; clicking fires `action`.
- *
- * @element schmancy-assist-chip
- * @summary Use for "do this thing" suggestions surfaced in context (next to a date, after a recipient list, near a long description). Pair with schmancy-icon for the leading glyph.
- * @example
- * <schmancy-assist-chip @action=${(e) => share(e.detail.value)}>
- *   <schmancy-icon slot="icon">share</schmancy-icon>
- *   Share
- * </schmancy-assist-chip>
- * @platform button click - Material 3 assist-chip semantics. Degrades to a plain `<button>` if the tag never registers.
- * @fires action - When the chip is clicked or activated via keyboard. `detail.value` echoes the chip's `value` attribute.
+ * Assist chip component - prompts user actions like opening calendar events or sharing content
+ * Pure Schmancy implementation with Tailwind CSS and RxJS state management
  */
 @customElement('schmancy-assist-chip')
-export class SchmancyAssistChip extends TailwindElement(css`
+export class SchmancyAssistChip extends SchmancyElement {
+	static styles = [css`
 	:host {
 		display: inline-block;
 		outline: none;
@@ -68,7 +60,7 @@ export class SchmancyAssistChip extends TailwindElement(css`
 	:host(:not([disabled])) button:active .state-layer {
 		opacity: 0.1;
 	}
-`) {
+`];
 	/** Value identifier for the chip */
 	@property({ reflect: true }) value = ''
 

package/src/chips/chips.ts

@@ -1,4 +1,4 @@
-import { $LitElement } from '@mixins/index'
+import { SchmancyElement } from '@mixins/index'
 import { css, html, PropertyValues } from 'lit'
 import { customElement, property, queryAssignedElements } from 'lit/decorators.js'
 import { BehaviorSubject, combineLatest } from 'rxjs'
@@ -7,32 +7,18 @@ import { fullWidth } from '../directives/layout'
 import type { FilterChipChangeEvent as SchmancyChipChangeEvent } from './filter-chip'
 import { SchmancyFilterChip as SchmancyChip } from './filter-chip'
 
-/**
- * Filter-chip group — container for selectable `<schmancy-chip>` children. Single or multi-select.
- *
- * @element schmancy-chips
- * @summary Use for filtering or choosing from 2–8 mutually-visible options ("Status: active / paused / archived"). Prefer schmancy-select when the list gets long or vertical.
- * @example
- * <schmancy-chips multi @change=${(e) => this.filters = e.detail.values}>
- *   <schmancy-chip value="active">Active</schmancy-chip>
- *   <schmancy-chip value="paused">Paused</schmancy-chip>
- *   <schmancy-chip value="archived">Archived</schmancy-chip>
- * </schmancy-chips>
- * @platform chip-group change - No direct native equivalent. Degrades to a styled schmancy-select with similar semantics if the tag never registers.
- * @fires change - `CustomEvent<{ value: string }>` (single) or `{ values: string[] }` (multi).
- */
 @customElement('schmancy-chips')
-export default class SchmancyChips extends $LitElement(
-
-css`
+export default class SchmancyChips extends SchmancyElement {
+	static styles = [css`
 :host{
 	display:block;
 	height:fit-content;
 	width:fit-content;
 }
-	
-`
-) {
+
+`]
+
+
 	// RxJS state streams - initialized with undefined to detect if properties were set
 	private value$ = new BehaviorSubject<string>('')
 	private values$ = new BehaviorSubject<string[]>([])

package/src/chips/filter-chip.ts

@@ -1,4 +1,4 @@
-import { TailwindElement } from '@mixins/tailwind.mixin'
+import { SchmancyElement } from '@mixins/index'
 import { css, html, LitElement } from 'lit'
 import { property } from 'lit/decorators.js'
 import { magnetic } from '../directives/magnetic'
@@ -19,7 +19,8 @@ import { magnetic } from '../directives/magnetic'
  * </schmancy-filter-chip>
  * ```
  */
-export class SchmancyFilterChip extends TailwindElement(css`
+export class SchmancyFilterChip extends SchmancyElement {
+	static styles = [css`
 	:host {
 		display: inline-block;
 		outline: none;
@@ -58,7 +59,7 @@ export class SchmancyFilterChip extends TailwindElement(css`
 	button {
 		font-family: inherit;
 	}
-`) {
+`];
 	/** Unique identifier for this filter chip */
 	@property({ type: String, reflect: true })
 	value: string = ''

package/src/chips/input-chip.ts

@@ -1,4 +1,4 @@
-import { TailwindElement } from '@mixins/tailwind.mixin'
+import { SchmancyElement } from '@mixins/index'
 import { css, html, LitElement } from 'lit'
 import { customElement, property, state } from 'lit/decorators.js'
 import { classMap } from 'lit/directives/class-map.js'
@@ -6,7 +6,7 @@ import { BehaviorSubject, combineLatest } from 'rxjs'
 import { map, takeUntil, tap } from 'rxjs/operators'
 
 /**
- * Input chip — displays user-provided information (tags, recipients, filters) that can be removed but not toggled.
+ * Input chip component - represents user-provided information that can be removed.
  *
  * IMPORTANT: Per Material Design 3 specification, input chips do NOT have selected state.
  * They represent discrete pieces of user input (like entered tags, selections from lists, etc.)
@@ -18,18 +18,19 @@ import { map, takeUntil, tap } from 'rxjs/operators'
  * - Tags or keywords entered by the user
  * - Selected items from a multi-select dropdown
  *
- * @element schmancy-input-chip
- * @summary Removable pill that represents a single user input value. No selected state — use schmancy-chip (filter chip) for toggleable options.
+ * @fires click - Optional click event on chip body (value)
+ * @fires remove - Dispatched when remove button is clicked (value)
+ *
  * @example
+ * ```html
  * <schmancy-input-chip value="john@example.com" avatar="/avatars/john.jpg">
  *   John Doe
  * </schmancy-input-chip>
- * @platform chip remove - No native equivalent. Composed of a labeled pill + close button. Degrades to a styled `<span>` with a trailing close `<button>` if the tag never registers.
- * @fires click - Optional click event on chip body (value)
- * @fires remove - Dispatched when remove button is clicked (value)
+ * ```
  */
 @customElement('schmancy-input-chip')
-export class SchmancyInputChip extends TailwindElement(css`
+export class SchmancyInputChip extends SchmancyElement {
+	static styles = [css`
 	:host {
 		display: inline-block;
 		outline: none;
@@ -109,7 +110,7 @@ export class SchmancyInputChip extends TailwindElement(css`
 	:host(:not([disabled])) .chip-container:active .state-layer {
 		opacity: 0.1;
 	}
-`) {
+`];
 	/** Value identifier for the chip */
 	@property({ type: String, reflect: true })
 	value: string = ''