@mhmo91/schmancy 0.10.41 → 0.10.42

package/src/badge/badge.ts

@@ -5,30 +5,31 @@ import { customElement, property } from 'lit/decorators.js'
 import { SchmancyTheme } from '..'
 
 /**
- * Badge color types for predefined styles
+ * Semantic color of the badge. Each name maps to one theme color role —
+ * filled badges use that role's container / onContainer, outlined badges
+ * use its strong tone for text and border.
  */
 export type BadgeColor = 'primary' | 'secondary' | 'tertiary' | 'success' | 'warning' | 'error' | 'neutral' | 'surface'
 
 /**
- * Badge size variants
+ * Badge size. Sizes differ only in type scale and padding density.
  */
-export type BadgeSize = 'xs' | 'sm' | 'md' | 'lg'
+export type BadgeSize = 'xs' | 'sm' | 'md'
 
 /**
- * Badge shape variants
+ * Badge corner shape.
  */
-export type BadgeShape = 'rounded' | 'pill' | 'square'
+export type BadgeShape = 'pill' | 'rounded'
 
 /**
- * @element sch-badge
- * A versatile badge component for status indicators, labels, and counts
+ * @element schmancy-badge
+ * A status, label, or count pill. It annotates content; it does not
+ * compete with it — no shadow, no hover affordance, no motion.
  *
- * @slot - The content of the badge (text or HTML)
- * @slot icon - Optional icon to display before the content
+ * @slot - The content of the badge (text or short HTML)
  *
  * @csspart badge - The badge element container
  * @csspart content - The content container
- * @csspart icon - The icon container
  */
 @customElement('schmancy-badge')
 export class SchmancyBadgeV2 extends SchmancyElement {
@@ -38,232 +39,79 @@ export class SchmancyBadgeV2 extends SchmancyElement {
 		flex-shrink: 0;
 		width: fit-content;
 	}
-
-	/* Enhanced pulse animation for better attention-getting */
-	@keyframes elegant-pulse {
-		0%, 100% {
-			opacity: 1;
-		}
-		50% {
-			opacity: 0.85;
-		}
-	}
-
-	.animate-pulse {
-		animation: elegant-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
-	}
 `];
 	/**
-	 * The color variant of the badge
+	 * The semantic color of the badge.
 	 * @attr
 	 */
 	@property({ type: String, reflect: true })
 	color: BadgeColor = 'primary'
 
 	/**
-	 * The size of the badge
+	 * The size of the badge.
 	 * @attr
 	 */
 	@property({ type: String, reflect: true })
 	size: BadgeSize = 'md'
 
 	/**
-	 * The shape of the badge
+	 * The corner shape of the badge.
 	 * @attr
 	 */
 	@property({ type: String, reflect: true })
 	shape: BadgeShape = 'pill'
 
 	/**
-	 * Whether the badge has an outlined style
+	 * Outlined style: transparent fill, the color's strong tone for text and border.
 	 * @attr
 	 */
 	@property({ type: Boolean, reflect: true })
 	outlined = false
 
-	/**
-	 * Custom icon name to display (if no icon slot is provided)
-	 * @attr
-	 */
-	@property({ type: String })
-	icon = ''
-
-	/**
-	 * Whether to make the badge pulse to draw attention
-	 * @attr
-	 */
-	@property({ type: Boolean, reflect: true })
-	pulse = false
-
-	/**
-	 * Convert the size to appropriate Tailwind classes for the badge container
-	 * Using harmonious padding ratios based on golden ratio principles
-	 * Refined for more elegant proportions
-	 */
-	private getSizeClasses(): string {
-		switch (this.size) {
-			case 'xs':
-				return 'text-xs py-0.75 px-1.5 gap-0.5 leading-none'
-			case 'sm':
-				return 'text-xs py-1.5 px-2.5 gap-0.5 tracking-wide leading-none'
-			case 'lg':
-				return 'text-base py-2 px-4 gap-1 tracking-wide'
-			case 'md':
-			default:
-				return 'text-sm py-1.5 px-3 gap-0.5'
-		}
-	}
-
-	/**
-	 * Get shape classes based on selected shape
-	 */
-	private getShapeClasses(): string {
-		switch (this.shape) {
-			case 'square':
-				return 'rounded'
-			case 'rounded':
-				return 'rounded-md'
-			case 'pill':
-			default:
-				return 'rounded-full'
-		}
-	}
-
-	/**
-	 * Get icon size based on badge size with harmonious proportions
-	 * Using golden ratio-inspired proportions relative to text size
-	 */
-	private getIconSizeClass(): string {
-		switch (this.size) {
-			case 'xs': return 'text-xs'
-			case 'sm': return 'text-sm'
-			case 'lg': return 'text-lg'
-			case 'md':
-			default:   return 'text-sm'
-		}
-	}
-
-	/**
-	 * Get additional styling for specific sizes
-	 */
-	private getExoticStyles(): Record<string, string> {
-		const styles: Record<string, string> = {}
-
-		if (this.size === 'lg') {
-			styles.letterSpacing = '0.03em'
-			styles.fontWeight = '500'
-		}
-
-		if (this.size === 'sm') {
-			styles.letterSpacing = '0.02em'
-		}
-
-		return styles
-	}
-
-	/**
-	 * Get background and text colors based on selected color variant
-	 * Enhanced for more elegant color combinations with refined contrasts
-	 */
-	private getColorStyles() {
-		const colors: Record<BadgeColor, { bg: string; text: string; border?: string }> = {
-			primary: {
-				bg: this.outlined ? 'transparent' : `color-mix(in srgb, ${SchmancyTheme.sys.color.primary.container} 92%, ${SchmancyTheme.sys.color.primary.default} 8%)`,
-				text: this.outlined ? SchmancyTheme.sys.color.primary.default : SchmancyTheme.sys.color.primary.onContainer,
-				border: this.outlined ? `color-mix(in srgb, ${SchmancyTheme.sys.color.primary.default} 90%, ${SchmancyTheme.sys.color.surface.highest} 10%)` : undefined,
-			},
-			secondary: {
-				bg: this.outlined ? 'transparent' : `color-mix(in srgb, ${SchmancyTheme.sys.color.secondary.container} 95%, ${SchmancyTheme.sys.color.secondary.default} 5%)`,
-				text: this.outlined ? SchmancyTheme.sys.color.secondary.default : SchmancyTheme.sys.color.secondary.onContainer,
-				border: this.outlined ? `color-mix(in srgb, ${SchmancyTheme.sys.color.secondary.default} 85%, ${SchmancyTheme.sys.color.surface.highest} 15%)` : undefined,
-			},
-			tertiary: {
-				bg: this.outlined ? 'transparent' : `color-mix(in srgb, ${SchmancyTheme.sys.color.tertiary.container} 94%, ${SchmancyTheme.sys.color.tertiary.default} 6%)`,
-				text: this.outlined ? SchmancyTheme.sys.color.tertiary.default : SchmancyTheme.sys.color.tertiary.onContainer,
-				border: this.outlined ? `color-mix(in srgb, ${SchmancyTheme.sys.color.tertiary.default} 88%, ${SchmancyTheme.sys.color.surface.highest} 12%)` : undefined,
-			},
-			success: {
-				bg: this.outlined ? 'transparent' : `color-mix(in srgb, ${SchmancyTheme.sys.color.success.container} 90%, ${SchmancyTheme.sys.color.success.default} 10%)`,
-				text: this.outlined ? SchmancyTheme.sys.color.success.default : SchmancyTheme.sys.color.success.onContainer,
-				border: this.outlined ? `color-mix(in srgb, ${SchmancyTheme.sys.color.success.default} 85%, ${SchmancyTheme.sys.color.surface.bright} 15%)` : undefined,
-			},
-			warning: {
-				bg: this.outlined ? 'transparent' : `color-mix(in srgb, ${SchmancyTheme.sys.color.tertiary.container} 85%, ${SchmancyTheme.sys.color.tertiary.default} 15%)`,
-				text: this.outlined ? SchmancyTheme.sys.color.tertiary.default : SchmancyTheme.sys.color.tertiary.onContainer,
-				border: this.outlined ? `color-mix(in srgb, ${SchmancyTheme.sys.color.tertiary.default} 90%, ${SchmancyTheme.sys.color.surface.highest} 10%)` : undefined,
-			},
-			error: {
-				bg: this.outlined ? 'transparent' : `color-mix(in srgb, ${SchmancyTheme.sys.color.error.container} 92%, ${SchmancyTheme.sys.color.error.default} 8%)`,
-				text: this.outlined ? SchmancyTheme.sys.color.error.default : SchmancyTheme.sys.color.error.onContainer,
-				border: this.outlined ? `color-mix(in srgb, ${SchmancyTheme.sys.color.error.default} 88%, ${SchmancyTheme.sys.color.surface.bright} 12%)` : undefined,
-			},
+	render() {
+		const sizeClasses =
+			this.size === 'xs' ? 'text-xs px-1.5 py-0.5'
+			: this.size === 'sm' ? 'text-xs px-2 py-0.5'
+			: 'text-sm px-2.5 py-0.5'
+
+		const shapeClass = this.shape === 'rounded' ? 'rounded-md' : 'rounded-full'
+
+		const role = {
+			primary: SchmancyTheme.sys.color.primary,
+			secondary: SchmancyTheme.sys.color.secondary,
+			tertiary: SchmancyTheme.sys.color.tertiary,
+			success: SchmancyTheme.sys.color.success,
+			warning: SchmancyTheme.sys.color.warning,
+			error: SchmancyTheme.sys.color.error,
 			neutral: {
-				bg: this.outlined ? 'transparent' : `color-mix(in srgb, ${SchmancyTheme.sys.color.surface.high} 95%, ${SchmancyTheme.sys.color.outline} 5%)`,
-				text: this.outlined ? `color-mix(in srgb, ${SchmancyTheme.sys.color.surface.on} 95%, ${SchmancyTheme.sys.color.surface.default} 5%)` : SchmancyTheme.sys.color.surface.on,
-				border: this.outlined ? `color-mix(in srgb, ${SchmancyTheme.sys.color.outline} 85%, ${SchmancyTheme.sys.color.surface.highest} 15%)` : undefined,
+				container: SchmancyTheme.sys.color.surface.high,
+				onContainer: SchmancyTheme.sys.color.surface.on,
+				default: SchmancyTheme.sys.color.surface.on,
 			},
 			surface: {
-				bg: this.outlined ? 'transparent' : SchmancyTheme.sys.color.surface.high,
-				text: SchmancyTheme.sys.color.surface.on,
-				border: this.outlined ? SchmancyTheme.sys.color.outline : undefined,
+				container: SchmancyTheme.sys.color.surface.container,
+				onContainer: SchmancyTheme.sys.color.surface.on,
+				default: SchmancyTheme.sys.color.surface.on,
 			},
-		}
-
-		return colors[this.color]
-	}
-
-	render() {
-		const sizeClasses = this.getSizeClasses()
-		const shapeClasses = this.getShapeClasses()
-		const colorStyles = this.getColorStyles()
-		const iconSizeClass = this.getIconSizeClass()
-		const exoticStyles = this.getExoticStyles()
-
-		const badgeClasses = {
-			'inline-flex items-center justify-center font-medium': true,
-			'transition-all duration-200 ease-in-out': true,
-			[sizeClasses]: true,
-			[shapeClasses]: true,
-			'animate-pulse': this.pulse,
-			'border border-solid': this.outlined,
-			'shadow-sm': !this.outlined && this.size === 'sm',
-			'shadow': !this.outlined && this.size === 'md',
-			'shadow-md': !this.outlined && this.size === 'lg',
-			'hover:brightness-95 hover:-translate-y-px': this.outlined,
-			'hover:brightness-[0.98]': !this.outlined,
-		}
-
-		// Refined styles for a more elegant look (only CSS that can't be done with Tailwind)
-		const styles = {
-			borderColor: colorStyles.border,
-			backdropFilter: this.outlined ? 'blur(4px)' : undefined,
-			boxShadow: this.size === 'lg' && !this.outlined ? '0 1px 2px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.1)' : undefined,
-			...exoticStyles,
-		}
+		}[this.color]
 
 		return html`
 			<div
 				part="badge"
-				class="${this.classMap(badgeClasses)}"
-				style="${this.styleMap(styles)}"
+				class="${this.classMap({
+					'inline-flex items-center justify-center font-medium leading-none': true,
+					'transition-colors duration-150': true,
+					'border border-solid': this.outlined,
+					[sizeClasses]: true,
+					[shapeClass]: true,
+				})}"
+				style="${this.styleMap({ borderColor: this.outlined ? role.default : undefined })}"
 				${color({
-					bgColor: colorStyles.bg,
-					color: colorStyles.text,
+					bgColor: this.outlined ? 'transparent' : role.container,
+					color: this.outlined ? role.default : role.onContainer,
 				})}
 			>
-				<!-- Icon slot or named icon -->
-				<slot name="icon">
-					${this.icon
-						? html`
-								<div part="icon" class="shrink-0 flex items-center justify-center leading-none">
-									<schmancy-icon class="${iconSizeClass} flex items-center justify-center">${this.icon}</schmancy-icon>
-								</div>
-							`
-						: ''}
-				</slot>
-
-				<!-- Content with proper spacing from icon -->
-				<div part="content" class="flex items-center leading-none tracking-[0.01em] ${this.icon ? 'ml-[0.38em]' : ''}">
+				<div part="content" class="flex items-center leading-none tracking-[0.01em]">
 					<slot></slot>
 				</div>
 			</div>

package/src/boat/boat.ts

@@ -400,9 +400,7 @@ export default class SchmancyBoat extends SchmancyElement {
 			<schmancy-surface
 				${ref(this.containerRef)}
 				type="glass"
-				rounded="all"
-				.elevation=${3}
-				class="${containerClasses} overflow-hidden rounded-2xl"
+				class="${containerClasses} overflow-hidden rounded-2xl shadow-md"
 				style=${containerStyles}
 				aria-expanded=${this.open}
 			>

package/src/connectivity/connectivity-status.ts

@@ -131,9 +131,7 @@ export class SchmancyConnectivityStatus extends SchmancyElement {
 				<schmancy-surface
 					${ref(this.surfaceRef)}
 					type="error"
-					rounded="all"
-					elevation="3"
-					class="mx-auto max-w-sm shadow-lg pointer-events-auto"
+					class="mx-auto max-w-sm rounded-2xl shadow-lg pointer-events-auto"
 				>
 					<div class="flex items-center gap-3 px-4 py-3">
 						<span ${ref(this.iconRef)} class="text-2xl">🙀</span>

package/src/details/details.ts

@@ -14,6 +14,7 @@ export default class SchmancyDetails extends SurfaceMixin(SchmancyElement) {
 	static styles = [css`
 		:host {
 			display: block;
+			border-radius: 1rem;
 		}
 
 		:host([overlay]) {
@@ -185,7 +186,6 @@ export default class SchmancyDetails extends SurfaceMixin(SchmancyElement) {
 	constructor() {
 		super()
 		this.type = 'solid'
-		this.rounded = 'all'
 	}
 
 	connectedCallback() {

package/src/list/list.ts

@@ -61,7 +61,7 @@ export class List extends SchmancyElement {
 	 */
 	render() {
 		return html`
-			<schmancy-surface .elevation=${this.elevation} type=${this.surface}>
+			<schmancy-surface class=${(['', 'shadow-sm', 'shadow', 'shadow-md', 'shadow-lg', 'shadow-2xl'] as const)[this.elevation]} type=${this.surface}>
 				<ul>
 					<slot></slot>
 				</ul>

package/src/surface/surface.styles.ts

@@ -184,94 +184,9 @@ export const surfaceTypeStyles = css`
 `
 
 /**
- * Surface rounded corner styles
- */
-export const surfaceRoundedStyles = css`
-	:host([rounded='none']) {
-		border-radius: 0;
-	}
-	:host([rounded='top']) {
-		border-radius: var(--schmancy-sys-shape-corner-large) var(--schmancy-sys-shape-corner-large) 0 0;
-	}
-	:host([rounded='left']) {
-		border-radius: var(--schmancy-sys-shape-corner-large) 0 0 var(--schmancy-sys-shape-corner-large);
-	}
-	:host([rounded='right']) {
-		border-radius: 0 var(--schmancy-sys-shape-corner-large) var(--schmancy-sys-shape-corner-large) 0;
-	}
-	:host([rounded='bottom']) {
-		border-radius: 0 0 var(--schmancy-sys-shape-corner-large) var(--schmancy-sys-shape-corner-large);
-	}
-	:host([rounded='all']) {
-		border-radius: var(--schmancy-sys-shape-corner-large);
-	}
-`
-
-/**
- * Luminous glow elevation — replaces M3 dark drop shadows with primary-colored glow.
- * No ::after tint overlay — depth comes from glow intensity, not surface tint.
- */
-export const surfaceElevationStyles = css`
-	:host([elevation='1']) {
-		box-shadow: 0 2px 12px -2px color-mix(in srgb, var(--schmancy-sys-color-primary-default) 15%, transparent);
-		position: relative;
-	}
-	:host([elevation='2']) {
-		box-shadow: 0 4px 20px -2px color-mix(in srgb, var(--schmancy-sys-color-primary-default) 22%, transparent);
-		position: relative;
-	}
-	:host([elevation='3']) {
-		box-shadow: 0 8px 32px -4px color-mix(in srgb, var(--schmancy-sys-color-primary-default) 28%, transparent);
-		position: relative;
-	}
-	:host([elevation='4']) {
-		box-shadow: 0 12px 44px -4px color-mix(in srgb, var(--schmancy-sys-color-primary-default) 35%, transparent);
-		position: relative;
-	}
-	:host([elevation='5']) {
-		box-shadow: 0 20px 60px -4px color-mix(in srgb, var(--schmancy-sys-color-primary-default) 42%, transparent);
-		position: relative;
-	}
-`
-
-/**
- * Surface clickable styles - luminous hover, spring active
- */
-export const surfaceClickableStyles = css`
-	:host([clickable]) {
-		cursor: pointer;
-		user-select: none;
-		-webkit-tap-highlight-color: transparent;
-		transition:
-			filter 200ms ease,
-			transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1),
-			box-shadow 400ms ease;
-	}
-	:host([clickable]:hover) {
-		filter: brightness(1.03);
-	}
-	:host([clickable]:active) {
-		filter: brightness(0.96);
-		transform: scale(0.98);
-		transition-duration: 100ms;
-	}
-	:host([clickable]:focus-visible) {
-		outline: 2px solid var(--schmancy-sys-color-primary-default);
-		outline-offset: 2px;
-	}
-	@media (prefers-reduced-motion: reduce) {
-		:host([clickable]) { transition: filter 150ms ease; }
-		:host([clickable]:hover) { transform: none; box-shadow: none; }
-		:host([clickable]:active) { transform: none; }
-	}
-`
-
-/**
- * Combined surface styles - includes all surface styling capabilities
+ * Combined surface styles — type variants only.
+ * Corner radius, shadow, and cursor are stock Tailwind classes applied by the consumer.
  */
 export const surfaceStyles = css`
 	${surfaceTypeStyles}
-	${surfaceRoundedStyles}
-	${surfaceElevationStyles}
-	${surfaceClickableStyles}
 `

package/src/surface/surface.ts

@@ -7,23 +7,23 @@ import { customElement, property } from 'lit/decorators.js'
 
 export const SchmancySurfaceTypeContext = createContext<TSurfaceColor>('surface')
 
-export type { SchmancySurfaceRounded, SchmancySurfaceElevation } from '@mixins/surface.mixin'
-
 /**
  * `<schmancy-surface>` component
  *
- * Styled container that supports rounding, elevation, and background/text color variants.
- * Sizing is the consumer's responsibility — use Tailwind utilities (`class="w-full h-full"`)
- * on the element directly.
+ * Color-variant container that paints a background and establishes the inherited
+ * text color for descendants. Corner radius, shadow depth, and cursor behavior
+ * are the consumer's responsibility — apply stock Tailwind classes directly on
+ * the element.
  *
- * SurfaceMixin automatically provides surfaceStyles CSS.
+ * Sizing is the consumer's responsibility — use Tailwind utilities
+ * (`class="w-full h-full"`) on the element directly.
  *
  * @element schmancy-surface
  * @slot - Default slot for projecting child content.
  *
  * @example
- * <schmancy-surface class="w-full h-full" rounded="all" elevation="3" type="surfaceBright" scroller>
- *   <p>Your scrollable content here</p>
+ * <schmancy-surface type="surfaceBright" class="rounded-2xl shadow-lg w-full">
+ *   <p>Content here</p>
  * </schmancy-surface>
  */
 @customElement('schmancy-surface')

package/src/table/table.ts

@@ -200,7 +200,7 @@ export class SchmancyDataTable<T extends Record<string, any> = any> extends Schm
 				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-surface type="glass" class="rounded-t-2xl shadow-sm sticky top-0 z-10">
 					<div
 						class="grid items-center gap-4 px-4 py-3"
 						style=${this.styleMap({

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

@@ -411,7 +411,7 @@ export class SchmancyThemeAudioPlayer extends SchmancyElement {
 				${when(
 					this.audioSequence,
 					() => html`
-						<schmancy-surface type="subtle" rounded="all" class="p-4 space-y-3">
+						<schmancy-surface type="subtle" class="rounded-2xl p-4 space-y-3">
 							<div class="flex items-center justify-between">
 								<div>
 									<schmancy-typography type="label" token="lg"> ${this.detectedMood} </schmancy-typography>

package/src/window/window.ts

@@ -112,11 +112,6 @@ export default class SchmancyWindow extends SchmancyElement {
 		return 'inset(0px 0px 0px 0px round 12px)'
 	}
 
-	private get elevation(): 0 | 1 | 2 | 3 | 4 | 5 {
-		if (this.open) return 4
-		return this.lowered ? 1 : 3
-	}
-
 	// ============================================
 	// POSITION MANAGEMENT
 	// ============================================
@@ -632,6 +627,9 @@ export default class SchmancyWindow extends SchmancyElement {
 			'rounded-2xl': this.open,
 			'rounded-[22px]': !this.open,
 			'overflow-hidden': true,
+			'shadow-sm': !this.open && this.lowered,
+			'shadow-md': !this.open && !this.lowered,
+			'shadow-lg': this.open,
 		})
 
 		const containerStyles = styleMap({
@@ -658,7 +656,6 @@ export default class SchmancyWindow extends SchmancyElement {
 			<schmancy-surface
 				${ref(this.containerRef)}
 				type="glass"
-				.elevation=${this.elevation}
 				class=${containerClasses}
 				style=${containerStyles}
 				aria-expanded=${this.open}

package/types/mixins/surface.mixin.d.ts

@@ -1,24 +1,19 @@
 import type { Constructor } from './constructor';
 import { LitElement } from 'lit';
 import type { TSurfaceColor } from '../src/types/surface';
-export type SchmancySurfaceRounded = 'none' | 'top' | 'left' | 'right' | 'bottom' | 'all';
-export type SchmancySurfaceElevation = 0 | 1 | 2 | 3 | 4 | 5;
 export declare class ISurfaceMixin {
-    rounded: SchmancySurfaceRounded;
-    elevation: SchmancySurfaceElevation;
     type: TSurfaceColor;
-    clickable: boolean;
 }
 /**
- * SurfaceMixin - Adds surface styling properties AND styles to any LitElement
+ * SurfaceMixin — injects surface color-variant styles into any LitElement.
  *
- * Uses Lit's finalizeStyles hook to inject surfaceStyles CSS for all surface type selectors.
- * This is the recommended pattern for mixins that need to add styles.
+ * Uses Lit's `finalizeStyles` hook to inject `surfaceTypeStyles` CSS for all
+ * color-variant selectors. Corner radius, shadow depth, and cursor behavior are
+ * the consumer's responsibility — apply stock Tailwind classes directly on the
+ * element (`rounded-2xl`, `shadow-lg`, `cursor-pointer`).
  *
- * Provides these reflected properties:
- * - `rounded`: 'none' | 'top' | 'left' | 'right' | 'bottom' | 'all' - Corner rounding
- * - `elevation`: 0-5 - Shadow depth level
- * - `type`: TSurfaceColor - Surface color variant (26+ options)
+ * Provides one reflected property:
+ * - `type`: TSurfaceColor — the color variant (26+ options)
  *
  * Usage:
  * ```typescript
@@ -28,8 +23,7 @@ export declare class ISurfaceMixin {
  * class MyComponent extends SurfaceMixin(TailwindElement(css`
  *   :host { display: block; }
  * `)) {
- *   // Component now has type, fill, rounded, elevation properties
- *   // AND surfaceStyles are automatically included
+ *   // Component now has the type property and surfaceTypeStyles
  * }
  * ```
  */