@mhmo91/schmancy 0.10.22 → 0.10.24

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@mhmo91/schmancy",
-	"version": "0.10.22",
+	"version": "0.10.24",
 	"description": "UI library build with web components",
 	"main": "./dist/index.js",
 	"customElements": "custom-elements.json",

package/skills/schmancy/overlay.md

@@ -39,6 +39,10 @@ Centered is the fallback (no anchor given). Sheet is the responsive adaptation (
 
 Always prefer `() => html\`...\`` over `html\`...\`` when the template closes over any variable — the factory form evaluates those variables at mount time rather than baking them in at the call site.
 
+## Default padding
+
+The overlay surface applies `padding: var(--schmancy-overlay-padding, 1.5rem)` to all content — `show()`, `confirm()`, and `prompt()` alike. Content components do **not** need their own padding against the surface edge. Override the token via `style="--schmancy-overlay-padding: 0"` on the host if a component supplies its own full-bleed layout.
+
 ## API
 
 | Export | Signature | Purpose |

package/src/badge/badge.ts

@@ -132,17 +132,13 @@ export class SchmancyBadgeV2 extends SchmancyElement {
 	 * Get icon size based on badge size with harmonious proportions
 	 * Using golden ratio-inspired proportions relative to text size
 	 */
-	private getIconSize(): string {
+	private getIconSizeClass(): string {
 		switch (this.size) {
-			case 'xs':
-				return '11px' // Approximately 0.9 × text size (12px × 0.9)
-			case 'sm':
-				return '13px' // Approximately 1.1 × text size (12px × 1.1)
-			case 'lg':
-				return '18px' // Approximately 1.1 × text size (16px × 1.1)
+			case 'xs': return 'text-xs'
+			case 'sm': return 'text-sm'
+			case 'lg': return 'text-lg'
 			case 'md':
-			default:
-				return '15px' // Approximately 1.1 × text size (14px × 1.1)
+			default:   return 'text-sm'
 		}
 	}
 
@@ -219,7 +215,7 @@ export class SchmancyBadgeV2 extends SchmancyElement {
 		const sizeClasses = this.getSizeClasses()
 		const shapeClasses = this.getShapeClasses()
 		const colorStyles = this.getColorStyles()
-		const iconSize = this.getIconSize()
+		const iconSizeClass = this.getIconSizeClass()
 		const exoticStyles = this.getExoticStyles()
 
 		const badgeClasses = {
@@ -259,7 +255,7 @@ export class SchmancyBadgeV2 extends SchmancyElement {
 					${this.icon
 						? html`
 								<div part="icon" class="shrink-0 flex items-center justify-center leading-none">
-									<schmancy-icon .size=${iconSize} class="flex items-center justify-center">${this.icon}</schmancy-icon>
+									<schmancy-icon class="${iconSizeClass} flex items-center justify-center">${this.icon}</schmancy-icon>
 								</div>
 							`
 						: ''}

package/src/button/icon-button.ts

@@ -235,8 +235,7 @@ export class SchmnacyIconButton extends SchmancyElement {
 			'hover:bg-secondary-container': effectiveVariant === 'filled tonal',
 		}
 
-		// Icon size mapping - M3 spec: 24dp standard, scaled for density
-		const iconSize = this.size === 'xxs' ? '12px' : this.size === 'xs' ? '16px' : this.size === 'sm' ? '20px' : this.size === 'md' ? '24px' : this.size === 'lg' ? '24px' : '40px';
+		const iconSizeClass = this.size === 'xxs' ? 'text-xs' : this.size === 'xs' ? 'text-base' : this.size === 'sm' ? 'text-xl' : this.size === 'md' ? 'text-2xl' : this.size === 'lg' ? 'text-2xl' : 'text-4xl';
 
 		// If href is provided, render an anchor element.
 		if (this.href) {
@@ -256,7 +255,7 @@ export class SchmnacyIconButton extends SchmancyElement {
 						? html`<slot></slot>`
 						: html`
 							<slot style="display:none" @slotchange=${this._handleSlotChange}></slot>
-							<schmancy-icon size=${iconSize} icon=${ifDefined(this.icon || this._capturedIcon)}></schmancy-icon>
+							<schmancy-icon class=${iconSizeClass}>${this.icon || this._capturedIcon}</schmancy-icon>
 						`
 					}
 				</a>
@@ -279,7 +278,7 @@ export class SchmnacyIconButton extends SchmancyElement {
 					? html`<slot></slot>`
 					: html`
 						<slot style="display:none" @slotchange=${this._handleSlotChange}></slot>
-						<schmancy-icon size=${iconSize} icon=${ifDefined(this.icon || this._capturedIcon)}></schmancy-icon>
+						<schmancy-icon class=${iconSizeClass}>${this.icon || this._capturedIcon}</schmancy-icon>
 					`
 				}
 			</button>

package/src/icons/icon.ts

@@ -1,306 +1,56 @@
 import { SchmancyElement } from '@mixins/index'
-import { consume } from '@lit/context'
 import { css, html } from 'lit'
-import { customElement, property, state } from 'lit/decorators.js'
-import { BehaviorSubject, combineLatest, takeUntil } from 'rxjs'
-import { tap } from 'rxjs/operators'
-import { SchmancyButtonSizeContext, type SchmancyButtonSize } from '../button/context'
+import { customElement } from 'lit/decorators.js'
 
-/**
- * Icon size tokens - M3 aligned with optical size optimization
- * - xxs: 12px (opsz: 20) - fits in 24px buttons (ultra-compact)
- * - xs: 16px (opsz: 20) - fits in 32px buttons
- * - sm: 20px (opsz: 20) - fits in 40px buttons
- * - md: 24px (opsz: 24) - fits in 48px buttons (default)
- * - lg: 32px (opsz: 40) - fits in 56px buttons
- * - Or custom string like '48px'
- */
-export type IconSize = 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | string
-
-/**
- * @element schmancy-icon
- * Material Symbols icon component with flexible font variation properties
- *
- * @cssprop --schmancy-icon-size - The size of the icon (default: 24px)
- * @cssprop --schmancy-icon-fill - Fill value for icon (0-1)
- * @cssprop --schmancy-icon-weight - Weight value for icon (100-700)
- * @cssprop --schmancy-icon-grade - Grade value for icon (-50-200)
- * @cssprop --schmancy-icon-opsz - Optical size (default: 24)
- * @csspart icon - The inner `<span>` carrying the Material Symbols glyph.
- */
 @customElement('schmancy-icon')
 export default class SchmancyIcon extends SchmancyElement {
 	static styles = [css`
-	:host {
-		--schmancy-icon-size: 24px;
-		--schmancy-icon-fill: 0;
-		--schmancy-icon-weight: 400;
-		--schmancy-icon-grade: 0;
-		--schmancy-icon-opsz: 24;
-
-		display: inline-flex;
-		align-items: center;
-		justify-content: center;
-		width: var(--schmancy-icon-size);
-		height: var(--schmancy-icon-size);
-		font-size: var(--schmancy-icon-size);
-		color: inherit;
-		transition: font-variation-settings 0.2s ease;
-	}
-
-	.material-symbols {
-		font-family: var(--schmancy-icon-font, 'Material Symbols Outlined');
-		font-weight: normal;
-		font-style: normal;
-		line-height: 1;
-		letter-spacing: normal;
-		text-transform: none;
-		display: inline-block;
-		white-space: nowrap;
-		word-wrap: normal;
-		direction: ltr;
-		-webkit-font-smoothing: antialiased;
-		-webkit-font-feature-settings: 'liga';
-		font-feature-settings: 'liga';
-		font-variation-settings:
-			'FILL' var(--schmancy-icon-fill),
-			'wght' var(--schmancy-icon-weight),
-			'GRAD' var(--schmancy-icon-grade),
-			'opsz' var(--schmancy-icon-opsz);
-		width: 100%;
-		height: 100%;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-	}
-
-	/* CSS-generated content is NOT translated by Google Translate */
-	.material-symbols[data-icon]::before {
-		content: attr(data-icon);
-	}
-`];
-	// Static flag to track if Google Fonts have been loaded
-	private static fontsLoaded = false
-
-	/**
-	 * Load Material Symbols fonts from Google Fonts CDN
-	 */
-	private static loadFonts(): void {
-		if (SchmancyIcon.fontsLoaded) {
+		:host {
+			font-family: 'Material Symbols Outlined';
+			font-size: 24px;
+			width: 1em;
+			height: 1em;
+			color: inherit;
+			font-variation-settings: inherit;
+			font-weight: 400;
+			display: inline-flex;
+			font-style: normal;
+			place-items: center;
+			place-content: center;
+			line-height: 1;
+			overflow: hidden;
+			letter-spacing: normal;
+			text-transform: none;
+			user-select: none;
+			white-space: nowrap;
+			flex-shrink: 0;
+			-webkit-font-smoothing: antialiased;
+			text-rendering: optimizeLegibility;
+		}
+
+		::slotted(svg) {
+			fill: currentColor;
+		}
+
+		::slotted(*) {
+			height: 100%;
+			width: 100%;
+		}
+	`]
+
+	override connectedCallback(): void {
+		super.connectedCallback()
+		const ariaHidden = this.getAttribute('aria-hidden')
+		if (ariaHidden === 'false') {
+			this.removeAttribute('aria-hidden')
 			return
 		}
-
-		const link = document.createElement('link')
-		link.rel = 'stylesheet'
-		link.href = 'https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&family=Material+Symbols+Sharp:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=swap'
-		document.head.appendChild(link)
-
-		SchmancyIcon.fontsLoaded = true
-	}
-
-	/**
-	 * Fill value for the icon (0-1)
-	 * 0 = outlined, 1 = filled
-	 */
-	@property({ type: Number, reflect: true })
-	fill = 0
-
-	/**
-	 * Weight value for the icon (100-700)
-	 * Controls the thickness of the icon strokes
-	 */
-	@property({ type: Number, reflect: true })
-	weight = 400
-
-	/**
-	 * Grade value for the icon (-50-200)
-	 * Adjusts the visual weight/grade
-	 */
-	@property({ type: Number, reflect: true })
-	grade = 0
-
-	/**
-	 * Icon variant style
-	 * @values outlined | rounded | sharp
-	 */
-	@property({ type: String, reflect: true })
-	variant: 'outlined' | 'rounded' | 'sharp' = 'outlined'
-
-	/**
-	 * Size of the icon - M3 aligned tokens or custom string
-	 * Tokens: 'xxs' (12px), 'xs' (16px), 'sm' (20px), 'md' (24px), 'lg' (32px)
-	 * Custom: any CSS size string like '48px', '2rem'
-	 *
-	 * When this icon is a descendant of `<schmancy-button>`, the button's
-	 * `size` wins (via `SchmancyButtonSizeContext`). The local `size` only
-	 * applies when there is no ancestor button.
-	 */
-	@property({ type: String, reflect: true })
-	size: IconSize = 'md'
-
-	/**
-	 * Size inherited from an ancestor `<schmancy-button>` via context.
-	 * Undefined when the icon is not nested in a button.
-	 */
-	@consume({ context: SchmancyButtonSizeContext, subscribe: true })
-	@state()
-	private _buttonSize?: SchmancyButtonSize
-
-	/**
-	 * Icon name - use this instead of slot content to prevent translation breaking icons.
-	 * When set, this takes precedence over slot content.
-	 * Example: <schmancy-icon icon="delete"></schmancy-icon>
-	 */
-	@property({ type: String })
-	icon?: string
-
-	// M3 aligned token sizes with optimal optical sizes
-	private static readonly tokenSizes: Record<string, { size: string; opsz: number }> = {
-		xxs: { size: '12px', opsz: 20 }, // fits in 24px buttons (ultra-compact)
-		xs: { size: '16px', opsz: 20 },  // fits in 32px buttons
-		sm: { size: '20px', opsz: 20 },  // fits in 40px buttons
-		md: { size: '24px', opsz: 24 },  // fits in 48px buttons (default)
-		lg: { size: '32px', opsz: 40 },  // fits in 56px buttons
-	}
-
-	/** Extract pixel value from a custom size string for optical size */
-	private static computeOpticalSize(size: string): number {
-		const px = parseFloat(size)
-		return isNaN(px) ? 24 : Math.max(20, Math.min(48, Math.round(px)))
-	}
-
-	// RxJS subjects for reactive property updates
-	private fill$ = new BehaviorSubject(this.fill)
-	private weight$ = new BehaviorSubject(this.weight)
-	private grade$ = new BehaviorSubject(this.grade)
-	private variant$ = new BehaviorSubject(this.variant)
-
-	// Captured icon name from slot content (translation-proof)
-	@state()
-	private _capturedIcon?: string
-
-	// Observer for text content changes (ternaries update text nodes, not DOM structure)
-	private _observer?: MutationObserver
-
-	connectedCallback(): void {
-		super.connectedCallback()
-
-		// Capture initial icon name
-		this._updateCapturedIcon()
-
-		// Watch for text content changes (characterData) for dynamic icon updates
-		this._observer = new MutationObserver(() => this._updateCapturedIcon())
-		this._observer.observe(this, { childList: true, characterData: true, subtree: true })
-
-		// Load Google Fonts if not already loaded
-		SchmancyIcon.loadFonts()
-
-		// Prevent browser translation from breaking icon ligatures
-		// Using multiple methods for maximum compatibility:
-		// - translate="no" (HTML5 standard)
-		// - class="notranslate" (Google Translate specific)
+		this.setAttribute('aria-hidden', 'true')
 		this.setAttribute('translate', 'no')
-		this.classList.add('notranslate')
-
-		// Set accessibility attributes for decorative icons
-		if (!this.hasAttribute('aria-label') &&
-		    !this.hasAttribute('aria-labelledby') &&
-		    !this.hasAttribute('aria-hidden') &&
-		    !this.hasAttribute('role')) {
-			this.setAttribute('aria-hidden', 'true')
-		}
-
-		// Setup reactive CSS variable updates
-		combineLatest([
-			this.fill$,
-			this.weight$,
-			this.grade$,
-			this.variant$
-		]).pipe(
-			tap(([fill, weight, grade, variant]) => {
-				// Update CSS custom properties for smooth transitions
-				this.style.setProperty('--schmancy-icon-fill', String(fill))
-				this.style.setProperty('--schmancy-icon-weight', String(weight))
-				this.style.setProperty('--schmancy-icon-grade', String(grade))
-
-				// Update font family based on variant
-				const fontFamily = {
-					'outlined': 'Material Symbols Outlined',
-					'rounded': 'Material Symbols Rounded',
-					'sharp': 'Material Symbols Sharp'
-				}[variant] || 'Material Symbols Outlined'
-
-				this.style.setProperty('--schmancy-icon-font', fontFamily)
-			}),
-			takeUntil(this.disconnecting)
-		).subscribe()
-
 	}
 
-	/**
-	 * Update captured icon from current text content
-	 */
-	private _updateCapturedIcon(): void {
-		if (!this.icon) {
-			const textContent = this.textContent?.trim()
-			if (textContent && textContent !== this._capturedIcon) {
-				this._capturedIcon = textContent
-			}
-		}
-	}
-
-	protected updated(changedProperties: Map<string | number | symbol, unknown>): void {
-		super.updated(changedProperties)
-
-		// Update BehaviorSubjects when properties change
-		if (changedProperties.has('fill')) {
-			this.fill$.next(this.fill)
-		}
-		if (changedProperties.has('weight')) {
-			this.weight$.next(this.weight)
-		}
-		if (changedProperties.has('grade')) {
-			this.grade$.next(this.grade)
-		}
-		if (changedProperties.has('variant')) {
-			this.variant$.next(this.variant)
-		}
-	}
-
-	protected render(): unknown {
-		const fontFamily = {
-			'outlined': 'Material Symbols Outlined',
-			'rounded': 'Material Symbols Rounded',
-			'sharp': 'Material Symbols Sharp'
-		}[this.variant] || 'Material Symbols Outlined'
-
-		// Effective size: ancestor `<schmancy-button>` wins via context, else local `size`.
-		const effectiveSize: IconSize = this._buttonSize ?? this.size
-		// Resolve size: token → px, bare number → px, or pass through as-is
-		const sizeConfig = SchmancyIcon.tokenSizes[effectiveSize]
-		const isNumeric = !sizeConfig && /^\d+(\.\d+)?$/.test(effectiveSize)
-		const iconSize = sizeConfig?.size || (isNumeric ? `${effectiveSize}px` : effectiveSize)
-		const opticalSize = sizeConfig?.opsz || SchmancyIcon.computeOpticalSize(iconSize)
-
-		// Set size on HOST so :host CSS picks it up
-		this.style.setProperty('--schmancy-icon-size', iconSize)
-		this.style.setProperty('--schmancy-icon-opsz', String(opticalSize))
-
-		const style = {
-			'--schmancy-icon-fill': this.fill,
-			'--schmancy-icon-weight': this.weight,
-			'--schmancy-icon-grade': this.grade,
-			'--schmancy-icon-font': fontFamily,
-		}
-
-		// Priority: icon property > captured icon (for dynamic content)
-		const iconName = this.icon || this._capturedIcon
-
-		// Always render slot (hidden) to observe content changes, display via data-icon
-		return html`
-			<span class="material-symbols notranslate" part="icon" translate="no" data-icon=${iconName || ''} style=${this.styleMap(style)}></span>
-			<slot style="display:none"></slot>
-		`
+	protected override render(): unknown {
+		return html`<slot></slot>`
 	}
 }
 
@@ -308,4 +58,4 @@ declare global {
 	interface HTMLElementTagNameMap {
 		'schmancy-icon': SchmancyIcon
 	}
-}
+}

package/src/json/json.ts

@@ -41,7 +41,7 @@ export class SchmancyJson extends SchmancyElement {
 				@click=${this.copyJSON}
 			>
 				<div class="flex items-center justify-between mb-1">
-					<schmancy-icon size="12px" class="text-on-surface-variant">content_copy</schmancy-icon>
+					<schmancy-icon class="text-xs text-on-surface-variant">content_copy</schmancy-icon>
 				</div>
 				<pre class="text-[10px] leading-tight">${unsafeHTML(highlighted)}</pre>
 			</div>

package/src/table/table.ts

@@ -182,9 +182,9 @@ export class SchmancyDataTable<T extends Record<string, any> = any> extends Schm
 		return html`
 			<span class="ml-1">
 				${this.sortDirection === 'asc'
-					? html`<schmancy-icon size="16px">arrow_upward</schmancy-icon>`
+					? html`<schmancy-icon class="text-base">arrow_upward</schmancy-icon>`
 					: this.sortDirection === 'desc'
-						? html`<schmancy-icon size="16px">arrow_downward</schmancy-icon>`
+						? html`<schmancy-icon class="text-base">arrow_downward</schmancy-icon>`
 						: null}
 			</span>
 		`

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

@@ -349,7 +349,7 @@ export class SchmancyThemeAudioPlayer extends SchmancyElement {
 						this.currentThemeName !== 'default',
 						() => html`
 							<schmancy-button variant="text" size="sm" @click=${() => this.resetToDefaults()}>
-								<schmancy-icon size="16px">refresh</schmancy-icon>
+								<schmancy-icon class="text-base">refresh</schmancy-icon>
 								Reset
 							</schmancy-button>
 						`

package/types/src/badge/badge.d.ts

@@ -68,7 +68,7 @@ export declare class SchmancyBadgeV2 extends SchmancyElement {
      * Get icon size based on badge size with harmonious proportions
      * Using golden ratio-inspired proportions relative to text size
      */
-    private getIconSize;
+    private getIconSizeClass;
     /**
      * Get additional styling for specific sizes
      */

package/types/src/icons/icon.d.ts

@@ -1,88 +1,7 @@
 import { SchmancyElement } from '@mixins/index';
-/**
- * Icon size tokens - M3 aligned with optical size optimization
- * - xxs: 12px (opsz: 20) - fits in 24px buttons (ultra-compact)
- * - xs: 16px (opsz: 20) - fits in 32px buttons
- * - sm: 20px (opsz: 20) - fits in 40px buttons
- * - md: 24px (opsz: 24) - fits in 48px buttons (default)
- * - lg: 32px (opsz: 40) - fits in 56px buttons
- * - Or custom string like '48px'
- */
-export type IconSize = 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | string;
-/**
- * @element schmancy-icon
- * Material Symbols icon component with flexible font variation properties
- *
- * @cssprop --schmancy-icon-size - The size of the icon (default: 24px)
- * @cssprop --schmancy-icon-fill - Fill value for icon (0-1)
- * @cssprop --schmancy-icon-weight - Weight value for icon (100-700)
- * @cssprop --schmancy-icon-grade - Grade value for icon (-50-200)
- * @cssprop --schmancy-icon-opsz - Optical size (default: 24)
- * @csspart icon - The inner `<span>` carrying the Material Symbols glyph.
- */
 export default class SchmancyIcon extends SchmancyElement {
     static styles: import("lit").CSSResult[];
-    private static fontsLoaded;
-    /**
-     * Load Material Symbols fonts from Google Fonts CDN
-     */
-    private static loadFonts;
-    /**
-     * Fill value for the icon (0-1)
-     * 0 = outlined, 1 = filled
-     */
-    fill: number;
-    /**
-     * Weight value for the icon (100-700)
-     * Controls the thickness of the icon strokes
-     */
-    weight: number;
-    /**
-     * Grade value for the icon (-50-200)
-     * Adjusts the visual weight/grade
-     */
-    grade: number;
-    /**
-     * Icon variant style
-     * @values outlined | rounded | sharp
-     */
-    variant: 'outlined' | 'rounded' | 'sharp';
-    /**
-     * Size of the icon - M3 aligned tokens or custom string
-     * Tokens: 'xxs' (12px), 'xs' (16px), 'sm' (20px), 'md' (24px), 'lg' (32px)
-     * Custom: any CSS size string like '48px', '2rem'
-     *
-     * When this icon is a descendant of `<schmancy-button>`, the button's
-     * `size` wins (via `SchmancyButtonSizeContext`). The local `size` only
-     * applies when there is no ancestor button.
-     */
-    size: IconSize;
-    /**
-     * Size inherited from an ancestor `<schmancy-button>` via context.
-     * Undefined when the icon is not nested in a button.
-     */
-    private _buttonSize?;
-    /**
-     * Icon name - use this instead of slot content to prevent translation breaking icons.
-     * When set, this takes precedence over slot content.
-     * Example: <schmancy-icon icon="delete"></schmancy-icon>
-     */
-    icon?: string;
-    private static readonly tokenSizes;
-    /** Extract pixel value from a custom size string for optical size */
-    private static computeOpticalSize;
-    private fill$;
-    private weight$;
-    private grade$;
-    private variant$;
-    private _capturedIcon?;
-    private _observer?;
     connectedCallback(): void;
-    /**
-     * Update captured icon from current text content
-     */
-    private _updateCapturedIcon;
-    protected updated(changedProperties: Map<string | number | symbol, unknown>): void;
     protected render(): unknown;
 }
 declare global {