@mhmo91/schmancy 0.8.6 → 0.9.3

package/dist/button.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"button.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}
+{"version":3,"file":"button.cjs","names":[],"sources":["../src/button/button.ts","../src/button/icon-button.ts"],"sourcesContent":["import { $LitElement } from '@mixins/index'\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, query, queryAssignedElements } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { when } from 'lit/directives/when.js'\nimport { magnetic } from '../directives/magnetic'\n\nexport interface SchmancyButtonEventMap {\n\tSchmancyFocus: CustomEvent<void>\n\tSchmancyBlur: CustomEvent<void>\n}\n\nexport type ButtonVariant = 'elevated' | 'filled' | 'filled tonal' | 'tonal' | 'outlined' | 'text'\nexport type ButtonColor = 'primary' | 'secondary' | 'success' | 'error' | 'warning' | 'info' | 'neutral'\n\n/**\n * A button component.\n * @element schmancy-button\n * @slot - The default slot.\n * @slot prefix - The prefix slot.\n * @slot suffix - The suffix slot.\n */\n@customElement('schmancy-button')\nexport class SchmancyButton extends $LitElement(\n\tcss`:host{\n\t\tdisplay: inline-block;\n\t\tmin-width: fit-content;\n\t\toverflow: hidden;\n\t\tposition: relative;\n\t\ttouch-action: manipulation;\n\t\tborder-radius: 1rem;\n\t\ttransition:\n\t\t\tbox-shadow 300ms cubic-bezier(0.34, 1.56, 0.64, 1),\n\t\t\ttransform 200ms cubic-bezier(0.34, 1.56, 0.64, 1);\n\t}\n\t:host(:hover:not([disabled])) {\n\t\tbox-shadow: 0 4px 16px -4px color-mix(in srgb, var(--schmancy-sys-color-primary-default) 20%, transparent);\n\t}\n\t:host(:active:not([disabled])) {\n\t\ttransform: scale(0.97);\n\t\tbox-shadow: 0 1px 4px -2px color-mix(in srgb, var(--schmancy-sys-color-primary-default) 10%, transparent);\n\t\ttransition-duration: 100ms;\n\t}\n\t@media (prefers-reduced-motion: reduce) {\n\t\t:host { transition: none; }\n\t\t:host(:hover:not([disabled])) { box-shadow: none; }\n\t\t:host(:active:not([disabled])) { transform: none; box-shadow: none; }\n\t}\n\t:host *,\n\t* {\n\t\ttouch-action: manipulation;\n\t}`\n) {\n\tprotected static shadowRootOptions = {\n\t\t...LitElement.shadowRootOptions,\n\t\tmode: 'open',\n\t\tdelegatesFocus: true,\n\t}\n\n\t@query('[part=\"base\"]', true)\n\tprivate nativeElement!: HTMLElement\n\n\tprivate _ariaLabel!: string\n\n\t/**\n\t * The variant of the button.\n\t * @attr\n\t * @default 'text'\n\t * @public\n\t */\n\t@property({ reflect: true, type: String })\n\tpublic variant: ButtonVariant = 'text'\n\n\t/**\n\t * The color of the button.\n\t * @attr\n\t * @default Depends on variant: 'primary' for filled/elevated/outlined/text, 'secondary' for tonal\n\t * @public\n\t */\n\t@property({ reflect: true, type: String })\n\tpublic color?: ButtonColor\n\n\t/**\n\t * The width of the button.\n\t * @attr\n\t * @type {'full' | 'auto'}\n\t * @default 'auto'\n\t * @public\n\t */\n\t@property()\n\tpublic width: 'full' | 'auto' = 'auto'\n\n\t/**\n\t * The size of the button.\n\t * @attr\n\t * @type {'xxs' | 'xs' | 'sm' | 'md' | 'lg'}\n\t * @default 'md'\n\t * @public\n\t */\n\t@property({ type: String })\n\tpublic size: 'xxs' | 'xs' | 'sm' | 'md' | 'lg' = 'md'\n\n\t/**\n\t * The type of the button.\n\t * Defaults to 'button' (preventing accidental form submissions).\n\t * @attr\n\t */\n\t@property({ reflect: true, type: String })\n\tpublic type: 'button' | 'reset' | 'submit' = 'button'\n\n\t/**\n\t * The URL the button points to.\n\t * If provided, the component will render as an anchor element.\n\t * @attr\n\t */\n\t@property()\n\tpublic href?: string\n\n\t/**\n\t * Determines whether the button is disabled.\n\t * @attr\n\t */\n\t@property({ type: Boolean, reflect: true })\n\tpublic disabled = false\n\n\tpublic override set ariaLabel(value: string) {\n\t\tconst oldVal = this._ariaLabel\n\t\tthis._ariaLabel = value\n\n\t\tif (this.hasAttribute('aria-label')) {\n\t\t\tthis.removeAttribute('aria-label')\n\t\t}\n\t\tthis.requestUpdate('ariaLabel', oldVal)\n\t}\n\n\t@property({ attribute: 'aria-label' })\n\tpublic override get ariaLabel() {\n\t\treturn this._ariaLabel\n\t}\n\n\t@queryAssignedElements({\n\t\tslot: 'prefix',\n\t\tflatten: true,\n\t\tselector: 'img',\n\t})\n\tprivate prefixImgs!: HTMLImageElement[]\n\n\t@queryAssignedElements({\n\t\tslot: 'suffix',\n\t\tflatten: true,\n\t\tselector: 'img',\n\t})\n\tprivate suffixImgs!: HTMLImageElement[]\n\n\t/** Sets focus in the button. */\n\tpublic override focus(options?: FocusOptions) {\n\t\tthis.nativeElement.focus(options)\n\t}\n\n\t/** Removes focus from the button. */\n\tpublic override blur() {\n\t\tthis.nativeElement.blur()\n\t}\n\n\t/**\n\t * Get the effective color based on variant if not explicitly set\n\t * M3 spec: filled = primary, tonal = secondary, others = primary\n\t */\n\tprotected get effectiveColor(): ButtonColor {\n\t\tif (this.color) return this.color\n\n\t\t// Map 'tonal' to 'filled tonal' for checking\n\t\tconst effectiveVariant = this.variant === 'tonal' ? 'filled tonal' : this.variant\n\n\t\t// M3 defaults: tonal uses secondary, others use primary\n\t\treturn effectiveVariant === 'filled tonal' ? 'secondary' : 'primary'\n\t}\n\n\tprotected get imgClasses(): string[] {\n\t\t// M3 spec: icon sizes scale with button size\n\t\tconst sizeMap = {\n\t\t\txxs: 'w-3 h-3',    // 12px for 24px button (ultra-compact)\n\t\t\txs: 'w-4 h-4',     // 16px for 32px button (M3 dense)\n\t\t\tsm: 'w-5 h-5',     // 20px for 40px button (M3 default)\n\t\t\tmd: 'w-6 h-6',     // 24px for 48px button (M3 large)\n\t\t\tlg: 'w-7 h-7'      // 28px for 56px button (M3 extra large)\n\t\t}\n\t\treturn [sizeMap[this.size], 'object-contain']\n\t}\n\n\tfirstUpdated() {\n\t\t// Add image classes and ensure decorative images have an empty alt.\n\t\tthis.prefixImgs?.forEach(img => {\n\t\t\timg.classList.add(...this.imgClasses)\n\t\t\tif (!img.hasAttribute('alt')) {\n\t\t\t\timg.setAttribute('alt', '')\n\t\t\t}\n\t\t})\n\t\tthis.suffixImgs?.forEach(img => {\n\t\t\timg.classList.add(...this.imgClasses)\n\t\t\tif (!img.hasAttribute('alt')) {\n\t\t\t\timg.setAttribute('alt', '')\n\t\t\t}\n\t\t})\n\t}\n\n\tclick(): void {\n\t\tthis.dispatchEvent(new Event('click', { bubbles: true, composed: true }))\n\t}\n\n\t// Prevent default behavior when the component is disabled.\n\tprivate _preventDefault(event: Event) {\n\t\tevent.preventDefault()\n\t\tevent.stopPropagation()\n\t}\n\n\trender() {\n\t\t// Map 'tonal' variant to 'filled tonal' for backwards compatibility\n\t\tconst effectiveVariant = this.variant === 'tonal' ? 'filled tonal' : this.variant;\n\n\t\t// Compute classes for the interactive element.\n\t\tconst classes = {\n\t\t\t'z-0 transition-all duration-200 relative rounded-2xl inline-flex justify-center items-center outline-secondary-default focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-2 outline-hidden w-[inherit] overflow-hidden':\n\t\t\t\ttrue,\n\t\t\t// Height - M3 spec: 24dp (xxs) → 32dp (dense) → 40dp (default) → 48dp (large) → 56dp (XL)\n\t\t\t'h-6': this.size === 'xxs',   // 24px - Ultra-compact\n\t\t\t'h-8': this.size === 'xs',    // 32px - M3 dense/compact\n\t\t\t'h-10': this.size === 'sm',   // 40px - M3 default\n\t\t\t'h-12': this.size === 'md',   // 48px - M3 large\n\t\t\t'h-14': this.size === 'lg',   // 56px - M3 extra large\n\t\t\t// Padding - M3 spec: horizontal padding 24dp default, scaled proportionally\n\t\t\t'py-1 px-2': this.size === 'xxs',    // 4px/8px for 24px height\n\t\t\t'py-2 px-4': this.size === 'xs',     // 8px/16px for 32px height\n\t\t\t'py-2.5 px-5': this.size === 'sm',   // 10px/20px for 40px height\n\t\t\t'py-3 px-6': this.size === 'md',     // 12px/24px for 48px height (M3 default)\n\t\t\t'py-4 px-7': this.size === 'lg',     // 16px/28px for 56px height\n\t\t\t// Typography - M3 spec: label-large (14px) default, scaled\n\t\t\t'text-[10px] font-medium leading-3': this.size === 'xxs', // 10px\n\t\t\t'text-xs font-medium leading-4': this.size === 'xs',   // 12px\n\t\t\t'text-sm font-medium leading-5': this.size === 'sm' || this.size === 'md',   // 14px - M3 label-large\n\t\t\t'text-base font-medium leading-6': this.size === 'lg', // 16px\n\t\t\t// Letter spacing - M3 spec\n\t\t\t'tracking-[0.1px]': true,\n\t\t\t// Gap - Scaled with size\n\t\t\t'gap-0.5': this.size === 'xxs', // 2px\n\t\t\t'gap-1': this.size === 'xs',    // 4px\n\t\t\t'gap-1.5': this.size === 'sm',  // 6px\n\t\t\t'gap-2': this.size === 'md',    // 8px\n\t\t\t'gap-2.5': this.size === 'lg',  // 10px\n\t\t\t'cursor-pointer': !this.disabled,\n\t\t\t'opacity-[0.38]': this.disabled,\n\t\t\t'hover:shadow-sm': !this.disabled && effectiveVariant === 'elevated',\n\t\t\t'w-full tex-center': this.width === 'full',\n\t\t\t// Elevated variant\n\t\t\t'bg-surface-low shadow-xs': effectiveVariant === 'elevated',\n\t\t\t// Outlined variant\n\t\t\t'bg-transparent border-1 border-solid': effectiveVariant === 'outlined',\n\t\t\t'border-outline': effectiveVariant === 'outlined' && this.effectiveColor === 'primary',\n\t\t\t'border-success-default': effectiveVariant === 'outlined' && this.effectiveColor === 'success',\n\t\t\t'border-error-default': effectiveVariant === 'outlined' && this.effectiveColor === 'error',\n\t\t\t'border-warning-default': effectiveVariant === 'outlined' && this.effectiveColor === 'warning',\n\t\t\t'border-info-default': effectiveVariant === 'outlined' && this.effectiveColor === 'info',\n\t\t\t'border-secondary-default': effectiveVariant === 'outlined' && this.effectiveColor === 'secondary',\n\t\t\t'border-outline-variant': effectiveVariant === 'outlined' && this.effectiveColor === 'neutral',\n\t\t\t// Filled variant - background colors\n\t\t\t'bg-primary-default': effectiveVariant === 'filled' && this.effectiveColor === 'primary',\n\t\t\t'bg-secondary-default': effectiveVariant === 'filled' && this.effectiveColor === 'secondary',\n\t\t\t'bg-success-default': effectiveVariant === 'filled' && this.effectiveColor === 'success',\n\t\t\t'bg-error-default': effectiveVariant === 'filled' && this.effectiveColor === 'error',\n\t\t\t'bg-warning-default': effectiveVariant === 'filled' && this.effectiveColor === 'warning',\n\t\t\t'bg-info-default': effectiveVariant === 'filled' && this.effectiveColor === 'info',\n\t\t\t'bg-surface-containerHighest': effectiveVariant === 'filled' && this.effectiveColor === 'neutral',\n\t\t\t// Filled variant - text colors\n\t\t\t'text-primary-on': effectiveVariant === 'filled' && this.effectiveColor === 'primary',\n\t\t\t'text-secondary-on': effectiveVariant === 'filled' && this.effectiveColor === 'secondary',\n\t\t\t'text-success-on': effectiveVariant === 'filled' && this.effectiveColor === 'success',\n\t\t\t'text-error-on': effectiveVariant === 'filled' && this.effectiveColor === 'error',\n\t\t\t'text-warning-on': effectiveVariant === 'filled' && this.effectiveColor === 'warning',\n\t\t\t'text-info-on': effectiveVariant === 'filled' && this.effectiveColor === 'info',\n\t\t\t'text-surface-on': effectiveVariant === 'filled' && this.effectiveColor === 'neutral',\n\t\t\t// Filled tonal variant - background colors\n\t\t\t'bg-primary-container': effectiveVariant === 'filled tonal' && this.effectiveColor === 'primary',\n\t\t\t'bg-secondary-container': effectiveVariant === 'filled tonal' && this.effectiveColor === 'secondary',\n\t\t\t'bg-success-container': effectiveVariant === 'filled tonal' && this.effectiveColor === 'success',\n\t\t\t'bg-error-container': effectiveVariant === 'filled tonal' && this.effectiveColor === 'error',\n\t\t\t'bg-warning-container': effectiveVariant === 'filled tonal' && this.effectiveColor === 'warning',\n\t\t\t'bg-info-container': effectiveVariant === 'filled tonal' && this.effectiveColor === 'info',\n\t\t\t'bg-surface-containerLow': effectiveVariant === 'filled tonal' && this.effectiveColor === 'neutral',\n\t\t\t// Filled tonal variant - text colors\n\t\t\t'text-primary-onContainer': effectiveVariant === 'filled tonal' && this.effectiveColor === 'primary',\n\t\t\t'text-secondary-onContainer': effectiveVariant === 'filled tonal' && this.effectiveColor === 'secondary',\n\t\t\t'text-success-onContainer': effectiveVariant === 'filled tonal' && this.effectiveColor === 'success',\n\t\t\t'text-error-onContainer': effectiveVariant === 'filled tonal' && this.effectiveColor === 'error',\n\t\t\t'text-warning-onContainer': effectiveVariant === 'filled tonal' && this.effectiveColor === 'warning',\n\t\t\t'text-info-onContainer': effectiveVariant === 'filled tonal' && this.effectiveColor === 'info',\n\t\t\t// Text and elevated variants - text colors\n\t\t\t'text-primary-default': (effectiveVariant === 'text' || effectiveVariant === 'elevated' || effectiveVariant === 'outlined') && this.effectiveColor === 'primary',\n\t\t\t'text-secondary-default': (effectiveVariant === 'text' || effectiveVariant === 'elevated' || effectiveVariant === 'outlined') && this.effectiveColor === 'secondary',\n\t\t\t'text-success-default': (effectiveVariant === 'text' || effectiveVariant === 'elevated' || effectiveVariant === 'outlined') && this.effectiveColor === 'success',\n\t\t\t'text-error-default': (effectiveVariant === 'text' || effectiveVariant === 'elevated' || effectiveVariant === 'outlined') && this.effectiveColor === 'error',\n\t\t\t'text-warning-default': (effectiveVariant === 'text' || effectiveVariant === 'elevated' || effectiveVariant === 'outlined') && this.effectiveColor === 'warning',\n\t\t\t'text-info-default': (effectiveVariant === 'text' || effectiveVariant === 'elevated' || effectiveVariant === 'outlined') && this.effectiveColor === 'info',\n\t\t\t'text-surface-onVariant': (effectiveVariant === 'text' || effectiveVariant === 'elevated' || effectiveVariant === 'outlined' || effectiveVariant === 'filled tonal') && this.effectiveColor === 'neutral',\n\t\t}\n\n\t\tconst stateLayerClasses = {\n\t\t\t'absolute inset-0 hover:opacity-[0.08] z-0 rounded-2xl': true,\n\t\t\t// M3 focus and pressed states\n\t\t\t'focus-visible:opacity-[0.10]': true,  // M3 focus state\n\t\t\t'active:opacity-[0.10]': true,         // M3 pressed state\n\t\t\t// Filled variant hover\n\t\t\t'hover:bg-primary-on': effectiveVariant === 'filled' && this.effectiveColor === 'primary',\n\t\t\t'hover:bg-secondary-on': effectiveVariant === 'filled' && this.effectiveColor === 'secondary',\n\t\t\t'hover:bg-success-on': effectiveVariant === 'filled' && this.effectiveColor === 'success',\n\t\t\t'hover:bg-error-on': effectiveVariant === 'filled' && this.effectiveColor === 'error',\n\t\t\t'hover:bg-warning-on': effectiveVariant === 'filled' && this.effectiveColor === 'warning',\n\t\t\t'hover:bg-info-on': effectiveVariant === 'filled' && this.effectiveColor === 'info',\n\t\t\t'hover:bg-surface-on': effectiveVariant === 'filled' && this.effectiveColor === 'neutral',\n\t\t\t// Outlined, elevated, text variants hover\n\t\t\t'hover:bg-primary-default': (effectiveVariant === 'outlined' || effectiveVariant === 'elevated' || effectiveVariant === 'text') && this.effectiveColor === 'primary',\n\t\t\t'hover:bg-secondary-default': (effectiveVariant === 'outlined' || effectiveVariant === 'elevated' || effectiveVariant === 'text') && this.effectiveColor === 'secondary',\n\t\t\t'hover:bg-success-default': (effectiveVariant === 'outlined' || effectiveVariant === 'elevated' || effectiveVariant === 'text') && this.effectiveColor === 'success',\n\t\t\t'hover:bg-error-default': (effectiveVariant === 'outlined' || effectiveVariant === 'elevated' || effectiveVariant === 'text') && this.effectiveColor === 'error',\n\t\t\t'hover:bg-warning-default': (effectiveVariant === 'outlined' || effectiveVariant === 'elevated' || effectiveVariant === 'text') && this.effectiveColor === 'warning',\n\t\t\t'hover:bg-info-default': (effectiveVariant === 'outlined' || effectiveVariant === 'elevated' || effectiveVariant === 'text') && this.effectiveColor === 'info',\n\t\t\t'hover:bg-surface-onVariant': (effectiveVariant === 'outlined' || effectiveVariant === 'elevated' || effectiveVariant === 'text') && this.effectiveColor === 'neutral',\n\t\t\t// Filled tonal hover\n\t\t\t'hover:bg-primary-container': effectiveVariant === 'filled tonal' && this.effectiveColor === 'primary',\n\t\t\t'hover:bg-secondary-container': effectiveVariant === 'filled tonal' && this.effectiveColor === 'secondary',\n\t\t\t'hover:bg-success-container': effectiveVariant === 'filled tonal' && this.effectiveColor === 'success',\n\t\t\t'hover:bg-error-container': effectiveVariant === 'filled tonal' && this.effectiveColor === 'error',\n\t\t\t'hover:bg-warning-container': effectiveVariant === 'filled tonal' && this.effectiveColor === 'warning',\n\t\t\t'hover:bg-info-container': effectiveVariant === 'filled tonal' && this.effectiveColor === 'info',\n\t\t\t'hover:bg-surface-containerLow': effectiveVariant === 'filled tonal' && this.effectiveColor === 'neutral',\n\t\t}\n\n\t\t// If href is provided, render an anchor element.\n\t\tif (this.href) {\n\t\t\treturn html`\n\t\t\t\t<a\n\t\t\t\t\t${magnetic({ strength: 3, radius: 60 })}\n\t\t\t\t\tpart=\"base\"\n\t\t\t\t\thref=${ifDefined(this.disabled ? undefined : this.href)}\n\t\t\t\t\taria-label=${ifDefined(this.ariaLabel)}\n\t\t\t\t\tclass=\"${this.classMap(classes)}\"\n\t\t\t\t\ttabindex=${this.disabled ? '-1' : '0'}\n\t\t\t\t\taria-disabled=${this.disabled}\n\t\t\t\t\t@click=${this.disabled ? this._preventDefault : undefined}\n\t\t\t\t>\n\t\t\t\t\t${when(!this.disabled, () => html`<div class=\"${this.classMap(stateLayerClasses)}\"></div>`)}\n\t\t\t\t\t<slot name=\"prefix\"></slot>\n\t\t\t\t\t<slot></slot>\n\t\t\t\t\t<slot name=\"suffix\"></slot>\n\t\t\t\t</a>\n\t\t\t`\n\t\t}\n\n\t\t// Otherwise, render a native button element.\n\t\treturn html`\n\t\t\t<button\n\t\t\t\t${magnetic({ strength: 3, radius: 60 })}\n\t\t\t\tpart=\"base\"\n\t\t\t\taria-label=${ifDefined(this.ariaLabel)}\n\t\t\t\t?disabled=${this.disabled}\n\t\t\t\tclass=\"${this.classMap(classes)}\"\n\t\t\t\ttype=${ifDefined(this.type)}\n\t\t\t\ttabindex=${ifDefined(this.disabled ? '-1' : undefined)}\n\t\t\t>\n\t\t\t\t${when(!this.disabled, () => html`<div class=\"${this.classMap(stateLayerClasses)}\"></div>`)}\n\t\t\t\t<slot name=\"prefix\"></slot>\n\t\t\t\t<slot></slot>\n\t\t\t\t<slot name=\"suffix\"></slot>\n\t\t\t</button>\n\t\t`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-button': SchmancyButton\n\t}\n}\n","import { $LitElement } from '@mixins/index'\nimport { css, html, LitElement, PropertyValueMap } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { when } from 'lit/directives/when.js'\nimport { magnetic } from '../directives/magnetic'\nimport { ButtonVariant } from './button'\n\n/**\n * An icon button component.\n * @element schmancy-icon-button\n * @slot - The default slot.\n */\n@customElement('schmancy-icon-button')\nexport class SchmnacyIconButton extends $LitElement(css`\n\t:host {\n\t\tdisplay: block;\n\t\tborder-radius: 9999px;\n\t\ttransition:\n\t\t\tbox-shadow 300ms cubic-bezier(0.34, 1.56, 0.64, 1),\n\t\t\ttransform 200ms cubic-bezier(0.34, 1.56, 0.64, 1);\n\t}\n\t:host(:hover:not([disabled])) {\n\t\tbox-shadow: 0 2px 12px -4px color-mix(in srgb, var(--schmancy-sys-color-primary-default) 18%, transparent);\n\t}\n\t:host(:active:not([disabled])) {\n\t\ttransform: scale(0.92);\n\t\tbox-shadow: none;\n\t\ttransition-duration: 100ms;\n\t}\n\t@media (prefers-reduced-motion: reduce) {\n\t\t:host { transition: none; }\n\t\t:host(:hover:not([disabled])) { box-shadow: none; }\n\t\t:host(:active:not([disabled])) { transform: none; box-shadow: none; }\n\t}\n`) {\n\tprotected static shadowRootOptions = {\n\t\t...LitElement.shadowRootOptions,\n\t\tmode: 'open',\n\t\tdelegatesFocus: true,\n\t}\n\n\t@query('[part=\"base\"]', true)\n\tprivate nativeElement!: HTMLElement\n\n\tprivate _ariaLabel!: string\n\n\t/**\n\t * The size of the icon.\n\t * @attr\n\t * @default 'md'\n\t */\n\t@property({ type: String })\n\tpublic size: 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md'\n\n\t/**\n\t * The variant of the button.\n\t * @attr\n\t * @default 'text'\n\t */\n\t@property({ reflect: true, type: String })\n\tpublic variant: ButtonVariant = 'text'\n\n\t/**\n\t * The width of the button.\n\t * @attr\n\t * @type {'full' | 'auto'}\n\t * @default 'auto'\n\t */\n\t@property()\n\tpublic width: 'full' | 'auto' = 'auto'\n\n\t/**\n\t * The type of the button.\n\t * Defaults to 'button' (preventing accidental form submissions).\n\t * @attr\n\t */\n\t@property({ reflect: true, type: String })\n\tpublic type: 'button' | 'reset' | 'submit' = 'button'\n\n\t/**\n\t * The URL the button points to.\n\t * If provided, the component will render as an anchor element.\n\t * @attr\n\t */\n\t@property()\n\tpublic href?: string\n\n\t/**\n\t * Determines whether the button is disabled.\n\t * @attr\n\t */\n\t@property({ type: Boolean, reflect: true })\n\tpublic disabled = false\n\n\t/**\n\t * Render slot content as text instead of wrapping in schmancy-icon.\n\t * Use this when you want to display text labels in the button.\n\t * @attr\n\t */\n\t@property({ type: Boolean, reflect: true })\n\tpublic text = false\n\n\t/**\n\t * Icon name - use this instead of slot content to prevent translation breaking icons.\n\t * Example: <schmancy-icon-button icon=\"add\"></schmancy-icon-button>\n\t * @attr\n\t */\n\t@property({ type: String })\n\tpublic icon?: string\n\n\t// Reactively captured icon name from slot content (translation-proof)\n\t@state()\n\tprivate _capturedIcon?: string\n\n\tconnectedCallback(): void {\n\t\tsuper.connectedCallback()\n\t\t// Pre-capture icon from children to avoid double render flash\n\t\tthis._captureIconFromChildren()\n\t}\n\n\t// Capture icon from direct children (for initial render)\n\tprivate _captureIconFromChildren(): void {\n\t\tif (this.icon || this.text) return\n\t\tfor (const node of this.childNodes) {\n\t\t\tif (node.nodeType === Node.TEXT_NODE) {\n\t\t\t\tconst text = node.textContent?.trim()\n\t\t\t\tif (text) {\n\t\t\t\t\tthis._capturedIcon = text\n\t\t\t\t\treturn\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t// Handle slot content changes reactively (for dynamic updates)\n\tprivate _handleSlotChange(e: Event): void {\n\t\tif (this.icon || this.text) return\n\t\tconst slot = e.target as HTMLSlotElement\n\t\tconst nodes = slot.assignedNodes({ flatten: true })\n\t\tfor (const node of nodes) {\n\t\t\tif (node.nodeType === Node.TEXT_NODE) {\n\t\t\t\tconst text = node.textContent?.trim()\n\t\t\t\tif (text) {\n\t\t\t\t\tthis._capturedIcon = text\n\t\t\t\t\treturn\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t// Manage aria-label manually so that we can always use our internal property.\n\tpublic override set ariaLabel(value: string) {\n\t\tconst oldVal = this._ariaLabel\n\t\tthis._ariaLabel = value\n\n\t\tif (this.hasAttribute('aria-label')) {\n\t\t\tthis.removeAttribute('aria-label')\n\t\t}\n\t\tthis.requestUpdate('ariaLabel', oldVal)\n\t}\n\n\t@property({ attribute: 'aria-label' })\n\tpublic override get ariaLabel() {\n\t\treturn this._ariaLabel\n\t}\n\n\t/** Sets focus in the button. */\n\tpublic override focus(options?: FocusOptions) {\n\t\tthis.nativeElement.focus(options)\n\t}\n\n\t/** Removes focus from the button. */\n\tpublic override blur() {\n\t\tthis.nativeElement.blur()\n\t}\n\n\tclick(): void {\n\t\tthis.dispatchEvent(new Event('click', { bubbles: true, composed: true }))\n\t}\n\n\t// Prevent default behavior when the component is disabled.\n\tprivate _preventDefault(event: Event) {\n\t\tevent.preventDefault()\n\t\tevent.stopPropagation()\n\t}\n\n\tprotected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void {\n\t\t// Add any first-update logic here if needed.\n\t}\n\n\trender() {\n\t\t// Map 'tonal' variant to 'filled tonal' for backwards compatibility\n\t\tconst effectiveVariant = this.variant === 'tonal' ? 'filled tonal' : this.variant;\n\n\t\t// Compute classes for the interactive element.\n\t\tconst classes = {\n\t\t\t'z-0 h-full transition-all duration-200 relative rounded-full inline-flex justify-center items-center gap-[8px] outline-secondary-default focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-2 outline-hidden':\n\t\t\t\ttrue,\n\t\t\t'opacity-[0.38]': this.disabled,\n\t\t\t'cursor-pointer': !this.disabled,\n\t\t\t'hover:shadow-xs':\n\t\t\t\t!this.disabled &&\n\t\t\t\t(effectiveVariant === 'outlined' ||\n\t\t\t\t\teffectiveVariant === 'text' ||\n\t\t\t\t\teffectiveVariant === 'filled' ||\n\t\t\t\t\teffectiveVariant === 'filled tonal'),\n\t\t\t'hover:shadow-sm': !this.disabled && effectiveVariant === 'elevated',\n\t\t\t'w-full text-center': this.width === 'full',\n\t\t\t'bg-surface-low text-primary-default shadow-xs': effectiveVariant === 'elevated',\n\t\t\t'bg-transparent text-primary-default border-1 border-outline': effectiveVariant === 'outlined',\n\t\t\t'bg-primary-default text-primary-on': effectiveVariant === 'filled',\n\t\t\t'bg-secondary-container text-secondary-onContainer': effectiveVariant === 'filled tonal',\n\t\t\t'text-primary-default': effectiveVariant === 'text',\n\t\t\t// M3 spec: 24dp (xxs) → 32dp (dense) → 40dp (default) → 48dp (standard) → 56dp (large)\n\t\t\t'p-1.5': this.size === 'xxs',    // 6px padding  = 24px total (12px icon) - Ultra-compact\n\t\t\t'p-2': this.size === 'xs',       // 8px padding  = 32px total (16px icon) - M3 dense\n\t\t\t'p-2.5': this.size === 'sm',     // 10px padding = 40px total (20px icon) - M3 default\n\t\t\t'p-3': this.size === 'md',       // 12px padding = 48px total (24px icon) - M3 standard\n\t\t\t'p-4': this.size === 'lg',       // 16px padding = 56px total (24px icon) - M3 large\n\t\t\t'p-5': this.size === 'xl',       // 20px padding = 80px total (40px icon) - custom XL\n\t\t}\n\n\t\tconst stateLayerClasses = {\n\t\t\t'hover:opacity-[0.08] rounded-full z-0': true,\n\t\t\t'hover:bg-primary-on': effectiveVariant === 'filled',\n\t\t\t'hover:bg-primary-default': effectiveVariant === 'outlined' || effectiveVariant === 'elevated' || effectiveVariant === 'text',\n\t\t\t'hover:bg-secondary-container': effectiveVariant === 'filled tonal',\n\t\t}\n\n\t\t// Icon size mapping - M3 spec: 24dp standard, scaled for density\n\t\tconst iconSize = this.size === 'xxs' ? '12px' : this.size === 'xs' ? '16px' : this.size === 'sm' ? '20px' : this.size === 'md' ? '24px' : this.size === 'lg' ? '24px' : '40px';\n\n\t\t// If href is provided, render an anchor element.\n\t\tif (this.href) {\n\t\t\treturn html`\n\t\t\t\t<a\n\t\t\t\t\t${magnetic({ strength: 3, radius: 50 })}\n\t\t\t\t\tpart=\"base\"\n\t\t\t\t\thref=${ifDefined(this.disabled ? undefined : this.href)}\n\t\t\t\t\taria-label=${ifDefined(this.ariaLabel)}\n\t\t\t\t\tclass=\"${this.classMap(classes)}\"\n\t\t\t\t\ttabindex=${this.disabled ? '-1' : '0'}\n\t\t\t\t\taria-disabled=${this.disabled}\n\t\t\t\t\t@click=${this.disabled ? this._preventDefault : undefined}\n\t\t\t\t>\n\t\t\t\t\t${when(!this.disabled, () => html`<div class=\"absolute inset-0 ${this.classMap(stateLayerClasses)}\"></div>`)}\n\t\t\t\t\t${this.text\n\t\t\t\t\t\t? html`<slot></slot>`\n\t\t\t\t\t\t: html`\n\t\t\t\t\t\t\t<slot style=\"display:none\" @slotchange=${this._handleSlotChange}></slot>\n\t\t\t\t\t\t\t<schmancy-icon size=${iconSize} icon=${this.icon || this._capturedIcon}></schmancy-icon>\n\t\t\t\t\t\t`\n\t\t\t\t\t}\n\t\t\t\t</a>\n\t\t\t`\n\t\t}\n\n\t\t// Otherwise, render a native button element.\n\t\treturn html`\n\t\t\t<button\n\t\t\t\t${magnetic({ strength: 3, radius: 50 })}\n\t\t\t\tpart=\"base\"\n\t\t\t\taria-label=${ifDefined(this.ariaLabel)}\n\t\t\t\t?disabled=${this.disabled}\n\t\t\t\tclass=\"${this.classMap(classes)}\"\n\t\t\t\ttype=${ifDefined(this.type)}\n\t\t\t\ttabindex=${ifDefined(this.disabled ? '-1' : undefined)}\n\t\t\t>\n\t\t\t\t${when(!this.disabled, () => html`<div class=\"absolute inset-0 ${this.classMap(stateLayerClasses)}\"></div>`)}\n\t\t\t\t${this.text\n\t\t\t\t\t? html`<slot></slot>`\n\t\t\t\t\t: html`\n\t\t\t\t\t\t<slot style=\"display:none\" @slotchange=${this._handleSlotChange}></slot>\n\t\t\t\t\t\t<schmancy-icon size=${iconSize} icon=${this.icon || this._capturedIcon}></schmancy-icon>\n\t\t\t\t\t`\n\t\t\t\t}\n\t\t\t</button>\n\t\t`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-icon-button': SchmnacyIconButton\n\t}\n}\n"],"mappings":"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"}

package/dist/button.js

@@ -1,6 +1,399 @@
-import { S as n, a as o } from "./icon-button-CmZBLHWC.js";
-export {
-  n as SchmancyButton,
-  o as SchmnacyIconButton
+import { i as e } from "./tailwind.mixin-BIVhjNvD.js";
+import { t } from "./litElement.mixin-Dm-4L8zL.js";
+import "./mixins.js";
+import { t as n } from "./magnetic-BZGFxAWG.js";
+import { customElement as r, property as i, query as a, queryAssignedElements as o, state as s } from "lit/decorators.js";
+import { LitElement as c, css as l, html as u } from "lit";
+import { when as d } from "lit/directives/when.js";
+import { ifDefined as f } from "lit/directives/if-defined.js";
+var p = class extends t(l`:host{
+		display: inline-block;
+		min-width: fit-content;
+		overflow: hidden;
+		position: relative;
+		touch-action: manipulation;
+		border-radius: 1rem;
+		transition:
+			box-shadow 300ms cubic-bezier(0.34, 1.56, 0.64, 1),
+			transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
+	}
+	:host(:hover:not([disabled])) {
+		box-shadow: 0 4px 16px -4px color-mix(in srgb, var(--schmancy-sys-color-primary-default) 20%, transparent);
+	}
+	:host(:active:not([disabled])) {
+		transform: scale(0.97);
+		box-shadow: 0 1px 4px -2px color-mix(in srgb, var(--schmancy-sys-color-primary-default) 10%, transparent);
+		transition-duration: 100ms;
+	}
+	@media (prefers-reduced-motion: reduce) {
+		:host { transition: none; }
+		:host(:hover:not([disabled])) { box-shadow: none; }
+		:host(:active:not([disabled])) { transform: none; box-shadow: none; }
+	}
+	:host *,
+	* {
+		touch-action: manipulation;
+	}`) {
+	constructor(...e) {
+		super(...e), this.variant = "text", this.width = "auto", this.size = "md", this.type = "button", this.disabled = !1;
+	}
+	static {
+		this.shadowRootOptions = {
+			...c.shadowRootOptions,
+			mode: "open",
+			delegatesFocus: !0
+		};
+	}
+	set ariaLabel(e) {
+		let t = this._ariaLabel;
+		this._ariaLabel = e, this.hasAttribute("aria-label") && this.removeAttribute("aria-label"), this.requestUpdate("ariaLabel", t);
+	}
+	get ariaLabel() {
+		return this._ariaLabel;
+	}
+	focus(e) {
+		this.nativeElement.focus(e);
+	}
+	blur() {
+		this.nativeElement.blur();
+	}
+	get effectiveColor() {
+		return this.color ? this.color : (this.variant === "tonal" ? "filled tonal" : this.variant) === "filled tonal" ? "secondary" : "primary";
+	}
+	get imgClasses() {
+		return [{
+			xxs: "w-3 h-3",
+			xs: "w-4 h-4",
+			sm: "w-5 h-5",
+			md: "w-6 h-6",
+			lg: "w-7 h-7"
+		}[this.size], "object-contain"];
+	}
+	firstUpdated() {
+		this.prefixImgs?.forEach((e) => {
+			e.classList.add(...this.imgClasses), e.hasAttribute("alt") || e.setAttribute("alt", "");
+		}), this.suffixImgs?.forEach((e) => {
+			e.classList.add(...this.imgClasses), e.hasAttribute("alt") || e.setAttribute("alt", "");
+		});
+	}
+	click() {
+		this.dispatchEvent(new Event("click", {
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	_preventDefault(e) {
+		e.preventDefault(), e.stopPropagation();
+	}
+	render() {
+		let e = this.variant === "tonal" ? "filled tonal" : this.variant, t = {
+			"z-0 transition-all duration-200 relative rounded-2xl inline-flex justify-center items-center outline-secondary-default focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-2 outline-hidden w-[inherit] overflow-hidden": !0,
+			"h-6": this.size === "xxs",
+			"h-8": this.size === "xs",
+			"h-10": this.size === "sm",
+			"h-12": this.size === "md",
+			"h-14": this.size === "lg",
+			"py-1 px-2": this.size === "xxs",
+			"py-2 px-4": this.size === "xs",
+			"py-2.5 px-5": this.size === "sm",
+			"py-3 px-6": this.size === "md",
+			"py-4 px-7": this.size === "lg",
+			"text-[10px] font-medium leading-3": this.size === "xxs",
+			"text-xs font-medium leading-4": this.size === "xs",
+			"text-sm font-medium leading-5": this.size === "sm" || this.size === "md",
+			"text-base font-medium leading-6": this.size === "lg",
+			"tracking-[0.1px]": !0,
+			"gap-0.5": this.size === "xxs",
+			"gap-1": this.size === "xs",
+			"gap-1.5": this.size === "sm",
+			"gap-2": this.size === "md",
+			"gap-2.5": this.size === "lg",
+			"cursor-pointer": !this.disabled,
+			"opacity-[0.38]": this.disabled,
+			"hover:shadow-sm": !this.disabled && e === "elevated",
+			"w-full tex-center": this.width === "full",
+			"bg-surface-low shadow-xs": e === "elevated",
+			"bg-transparent border-1 border-solid": e === "outlined",
+			"border-outline": e === "outlined" && this.effectiveColor === "primary",
+			"border-success-default": e === "outlined" && this.effectiveColor === "success",
+			"border-error-default": e === "outlined" && this.effectiveColor === "error",
+			"border-warning-default": e === "outlined" && this.effectiveColor === "warning",
+			"border-info-default": e === "outlined" && this.effectiveColor === "info",
+			"border-secondary-default": e === "outlined" && this.effectiveColor === "secondary",
+			"border-outline-variant": e === "outlined" && this.effectiveColor === "neutral",
+			"bg-primary-default": e === "filled" && this.effectiveColor === "primary",
+			"bg-secondary-default": e === "filled" && this.effectiveColor === "secondary",
+			"bg-success-default": e === "filled" && this.effectiveColor === "success",
+			"bg-error-default": e === "filled" && this.effectiveColor === "error",
+			"bg-warning-default": e === "filled" && this.effectiveColor === "warning",
+			"bg-info-default": e === "filled" && this.effectiveColor === "info",
+			"bg-surface-containerHighest": e === "filled" && this.effectiveColor === "neutral",
+			"text-primary-on": e === "filled" && this.effectiveColor === "primary",
+			"text-secondary-on": e === "filled" && this.effectiveColor === "secondary",
+			"text-success-on": e === "filled" && this.effectiveColor === "success",
+			"text-error-on": e === "filled" && this.effectiveColor === "error",
+			"text-warning-on": e === "filled" && this.effectiveColor === "warning",
+			"text-info-on": e === "filled" && this.effectiveColor === "info",
+			"text-surface-on": e === "filled" && this.effectiveColor === "neutral",
+			"bg-primary-container": e === "filled tonal" && this.effectiveColor === "primary",
+			"bg-secondary-container": e === "filled tonal" && this.effectiveColor === "secondary",
+			"bg-success-container": e === "filled tonal" && this.effectiveColor === "success",
+			"bg-error-container": e === "filled tonal" && this.effectiveColor === "error",
+			"bg-warning-container": e === "filled tonal" && this.effectiveColor === "warning",
+			"bg-info-container": e === "filled tonal" && this.effectiveColor === "info",
+			"bg-surface-containerLow": e === "filled tonal" && this.effectiveColor === "neutral",
+			"text-primary-onContainer": e === "filled tonal" && this.effectiveColor === "primary",
+			"text-secondary-onContainer": e === "filled tonal" && this.effectiveColor === "secondary",
+			"text-success-onContainer": e === "filled tonal" && this.effectiveColor === "success",
+			"text-error-onContainer": e === "filled tonal" && this.effectiveColor === "error",
+			"text-warning-onContainer": e === "filled tonal" && this.effectiveColor === "warning",
+			"text-info-onContainer": e === "filled tonal" && this.effectiveColor === "info",
+			"text-primary-default": (e === "text" || e === "elevated" || e === "outlined") && this.effectiveColor === "primary",
+			"text-secondary-default": (e === "text" || e === "elevated" || e === "outlined") && this.effectiveColor === "secondary",
+			"text-success-default": (e === "text" || e === "elevated" || e === "outlined") && this.effectiveColor === "success",
+			"text-error-default": (e === "text" || e === "elevated" || e === "outlined") && this.effectiveColor === "error",
+			"text-warning-default": (e === "text" || e === "elevated" || e === "outlined") && this.effectiveColor === "warning",
+			"text-info-default": (e === "text" || e === "elevated" || e === "outlined") && this.effectiveColor === "info",
+			"text-surface-onVariant": (e === "text" || e === "elevated" || e === "outlined" || e === "filled tonal") && this.effectiveColor === "neutral"
+		}, r = {
+			"absolute inset-0 hover:opacity-[0.08] z-0 rounded-2xl": !0,
+			"focus-visible:opacity-[0.10]": !0,
+			"active:opacity-[0.10]": !0,
+			"hover:bg-primary-on": e === "filled" && this.effectiveColor === "primary",
+			"hover:bg-secondary-on": e === "filled" && this.effectiveColor === "secondary",
+			"hover:bg-success-on": e === "filled" && this.effectiveColor === "success",
+			"hover:bg-error-on": e === "filled" && this.effectiveColor === "error",
+			"hover:bg-warning-on": e === "filled" && this.effectiveColor === "warning",
+			"hover:bg-info-on": e === "filled" && this.effectiveColor === "info",
+			"hover:bg-surface-on": e === "filled" && this.effectiveColor === "neutral",
+			"hover:bg-primary-default": (e === "outlined" || e === "elevated" || e === "text") && this.effectiveColor === "primary",
+			"hover:bg-secondary-default": (e === "outlined" || e === "elevated" || e === "text") && this.effectiveColor === "secondary",
+			"hover:bg-success-default": (e === "outlined" || e === "elevated" || e === "text") && this.effectiveColor === "success",
+			"hover:bg-error-default": (e === "outlined" || e === "elevated" || e === "text") && this.effectiveColor === "error",
+			"hover:bg-warning-default": (e === "outlined" || e === "elevated" || e === "text") && this.effectiveColor === "warning",
+			"hover:bg-info-default": (e === "outlined" || e === "elevated" || e === "text") && this.effectiveColor === "info",
+			"hover:bg-surface-onVariant": (e === "outlined" || e === "elevated" || e === "text") && this.effectiveColor === "neutral",
+			"hover:bg-primary-container": e === "filled tonal" && this.effectiveColor === "primary",
+			"hover:bg-secondary-container": e === "filled tonal" && this.effectiveColor === "secondary",
+			"hover:bg-success-container": e === "filled tonal" && this.effectiveColor === "success",
+			"hover:bg-error-container": e === "filled tonal" && this.effectiveColor === "error",
+			"hover:bg-warning-container": e === "filled tonal" && this.effectiveColor === "warning",
+			"hover:bg-info-container": e === "filled tonal" && this.effectiveColor === "info",
+			"hover:bg-surface-containerLow": e === "filled tonal" && this.effectiveColor === "neutral"
+		};
+		return this.href ? u`
+				<a
+					${n({
+			strength: 3,
+			radius: 60
+		})}
+					part="base"
+					href=${f(this.disabled ? void 0 : this.href)}
+					aria-label=${f(this.ariaLabel)}
+					class="${this.classMap(t)}"
+					tabindex=${this.disabled ? "-1" : "0"}
+					aria-disabled=${this.disabled}
+					@click=${this.disabled ? this._preventDefault : void 0}
+				>
+					${d(!this.disabled, () => u`<div class="${this.classMap(r)}"></div>`)}
+					<slot name="prefix"></slot>
+					<slot></slot>
+					<slot name="suffix"></slot>
+				</a>
+			` : u`
+			<button
+				${n({
+			strength: 3,
+			radius: 60
+		})}
+				part="base"
+				aria-label=${f(this.ariaLabel)}
+				?disabled=${this.disabled}
+				class="${this.classMap(t)}"
+				type=${f(this.type)}
+				tabindex=${f(this.disabled ? "-1" : void 0)}
+			>
+				${d(!this.disabled, () => u`<div class="${this.classMap(r)}"></div>`)}
+				<slot name="prefix"></slot>
+				<slot></slot>
+				<slot name="suffix"></slot>
+			</button>
+		`;
+	}
 };
-//# sourceMappingURL=button.js.map
+e([a("[part=\"base\"]", !0)], p.prototype, "nativeElement", void 0), e([i({
+	reflect: !0,
+	type: String
+})], p.prototype, "variant", void 0), e([i({
+	reflect: !0,
+	type: String
+})], p.prototype, "color", void 0), e([i()], p.prototype, "width", void 0), e([i({ type: String })], p.prototype, "size", void 0), e([i({
+	reflect: !0,
+	type: String
+})], p.prototype, "type", void 0), e([i()], p.prototype, "href", void 0), e([i({
+	type: Boolean,
+	reflect: !0
+})], p.prototype, "disabled", void 0), e([i({ attribute: "aria-label" })], p.prototype, "ariaLabel", null), e([o({
+	slot: "prefix",
+	flatten: !0,
+	selector: "img"
+})], p.prototype, "prefixImgs", void 0), e([o({
+	slot: "suffix",
+	flatten: !0,
+	selector: "img"
+})], p.prototype, "suffixImgs", void 0), p = e([r("schmancy-button")], p);
+var m = class extends t(l`
+	:host {
+		display: block;
+		border-radius: 9999px;
+		transition:
+			box-shadow 300ms cubic-bezier(0.34, 1.56, 0.64, 1),
+			transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
+	}
+	:host(:hover:not([disabled])) {
+		box-shadow: 0 2px 12px -4px color-mix(in srgb, var(--schmancy-sys-color-primary-default) 18%, transparent);
+	}
+	:host(:active:not([disabled])) {
+		transform: scale(0.92);
+		box-shadow: none;
+		transition-duration: 100ms;
+	}
+	@media (prefers-reduced-motion: reduce) {
+		:host { transition: none; }
+		:host(:hover:not([disabled])) { box-shadow: none; }
+		:host(:active:not([disabled])) { transform: none; box-shadow: none; }
+	}
+`) {
+	constructor(...e) {
+		super(...e), this.size = "md", this.variant = "text", this.width = "auto", this.type = "button", this.disabled = !1, this.text = !1;
+	}
+	static {
+		this.shadowRootOptions = {
+			...c.shadowRootOptions,
+			mode: "open",
+			delegatesFocus: !0
+		};
+	}
+	connectedCallback() {
+		super.connectedCallback(), this._captureIconFromChildren();
+	}
+	_captureIconFromChildren() {
+		if (!this.icon && !this.text) {
+			for (let e of this.childNodes) if (e.nodeType === Node.TEXT_NODE) {
+				let t = e.textContent?.trim();
+				if (t) return void (this._capturedIcon = t);
+			}
+		}
+	}
+	_handleSlotChange(e) {
+		if (this.icon || this.text) return;
+		let t = e.target.assignedNodes({ flatten: !0 });
+		for (let e of t) if (e.nodeType === Node.TEXT_NODE) {
+			let t = e.textContent?.trim();
+			if (t) return void (this._capturedIcon = t);
+		}
+	}
+	set ariaLabel(e) {
+		let t = this._ariaLabel;
+		this._ariaLabel = e, this.hasAttribute("aria-label") && this.removeAttribute("aria-label"), this.requestUpdate("ariaLabel", t);
+	}
+	get ariaLabel() {
+		return this._ariaLabel;
+	}
+	focus(e) {
+		this.nativeElement.focus(e);
+	}
+	blur() {
+		this.nativeElement.blur();
+	}
+	click() {
+		this.dispatchEvent(new Event("click", {
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	_preventDefault(e) {
+		e.preventDefault(), e.stopPropagation();
+	}
+	firstUpdated(e) {}
+	render() {
+		let e = this.variant === "tonal" ? "filled tonal" : this.variant, t = {
+			"z-0 h-full transition-all duration-200 relative rounded-full inline-flex justify-center items-center gap-[8px] outline-secondary-default focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-2 outline-hidden": !0,
+			"opacity-[0.38]": this.disabled,
+			"cursor-pointer": !this.disabled,
+			"hover:shadow-xs": !this.disabled && (e === "outlined" || e === "text" || e === "filled" || e === "filled tonal"),
+			"hover:shadow-sm": !this.disabled && e === "elevated",
+			"w-full text-center": this.width === "full",
+			"bg-surface-low text-primary-default shadow-xs": e === "elevated",
+			"bg-transparent text-primary-default border-1 border-outline": e === "outlined",
+			"bg-primary-default text-primary-on": e === "filled",
+			"bg-secondary-container text-secondary-onContainer": e === "filled tonal",
+			"text-primary-default": e === "text",
+			"p-1.5": this.size === "xxs",
+			"p-2": this.size === "xs",
+			"p-2.5": this.size === "sm",
+			"p-3": this.size === "md",
+			"p-4": this.size === "lg",
+			"p-5": this.size === "xl"
+		}, r = {
+			"hover:opacity-[0.08] rounded-full z-0": !0,
+			"hover:bg-primary-on": e === "filled",
+			"hover:bg-primary-default": e === "outlined" || e === "elevated" || e === "text",
+			"hover:bg-secondary-container": e === "filled tonal"
+		}, i = this.size === "xxs" ? "12px" : this.size === "xs" ? "16px" : this.size === "sm" ? "20px" : this.size === "md" || this.size === "lg" ? "24px" : "40px";
+		return this.href ? u`
+				<a
+					${n({
+			strength: 3,
+			radius: 50
+		})}
+					part="base"
+					href=${f(this.disabled ? void 0 : this.href)}
+					aria-label=${f(this.ariaLabel)}
+					class="${this.classMap(t)}"
+					tabindex=${this.disabled ? "-1" : "0"}
+					aria-disabled=${this.disabled}
+					@click=${this.disabled ? this._preventDefault : void 0}
+				>
+					${d(!this.disabled, () => u`<div class="absolute inset-0 ${this.classMap(r)}"></div>`)}
+					${this.text ? u`<slot></slot>` : u`
+							<slot style="display:none" @slotchange=${this._handleSlotChange}></slot>
+							<schmancy-icon size=${i} icon=${this.icon || this._capturedIcon}></schmancy-icon>
+						`}
+				</a>
+			` : u`
+			<button
+				${n({
+			strength: 3,
+			radius: 50
+		})}
+				part="base"
+				aria-label=${f(this.ariaLabel)}
+				?disabled=${this.disabled}
+				class="${this.classMap(t)}"
+				type=${f(this.type)}
+				tabindex=${f(this.disabled ? "-1" : void 0)}
+			>
+				${d(!this.disabled, () => u`<div class="absolute inset-0 ${this.classMap(r)}"></div>`)}
+				${this.text ? u`<slot></slot>` : u`
+						<slot style="display:none" @slotchange=${this._handleSlotChange}></slot>
+						<schmancy-icon size=${i} icon=${this.icon || this._capturedIcon}></schmancy-icon>
+					`}
+			</button>
+		`;
+	}
+};
+e([a("[part=\"base\"]", !0)], m.prototype, "nativeElement", void 0), e([i({ type: String })], m.prototype, "size", void 0), e([i({
+	reflect: !0,
+	type: String
+})], m.prototype, "variant", void 0), e([i()], m.prototype, "width", void 0), e([i({
+	reflect: !0,
+	type: String
+})], m.prototype, "type", void 0), e([i()], m.prototype, "href", void 0), e([i({
+	type: Boolean,
+	reflect: !0
+})], m.prototype, "disabled", void 0), e([i({
+	type: Boolean,
+	reflect: !0
+})], m.prototype, "text", void 0), e([i({ type: String })], m.prototype, "icon", void 0), e([s()], m.prototype, "_capturedIcon", void 0), e([i({ attribute: "aria-label" })], m.prototype, "ariaLabel", null), m = e([r("schmancy-icon-button")], m);
+export { p as SchmancyButton, m as SchmnacyIconButton };

package/dist/button.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
+{"version":3,"file":"button.js","names":[],"sources":["../src/button/button.ts","../src/button/icon-button.ts"],"sourcesContent":["import { $LitElement } from '@mixins/index'\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, query, queryAssignedElements } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { when } from 'lit/directives/when.js'\nimport { magnetic } from '../directives/magnetic'\n\nexport interface SchmancyButtonEventMap {\n\tSchmancyFocus: CustomEvent<void>\n\tSchmancyBlur: CustomEvent<void>\n}\n\nexport type ButtonVariant = 'elevated' | 'filled' | 'filled tonal' | 'tonal' | 'outlined' | 'text'\nexport type ButtonColor = 'primary' | 'secondary' | 'success' | 'error' | 'warning' | 'info' | 'neutral'\n\n/**\n * A button component.\n * @element schmancy-button\n * @slot - The default slot.\n * @slot prefix - The prefix slot.\n * @slot suffix - The suffix slot.\n */\n@customElement('schmancy-button')\nexport class SchmancyButton extends $LitElement(\n\tcss`:host{\n\t\tdisplay: inline-block;\n\t\tmin-width: fit-content;\n\t\toverflow: hidden;\n\t\tposition: relative;\n\t\ttouch-action: manipulation;\n\t\tborder-radius: 1rem;\n\t\ttransition:\n\t\t\tbox-shadow 300ms cubic-bezier(0.34, 1.56, 0.64, 1),\n\t\t\ttransform 200ms cubic-bezier(0.34, 1.56, 0.64, 1);\n\t}\n\t:host(:hover:not([disabled])) {\n\t\tbox-shadow: 0 4px 16px -4px color-mix(in srgb, var(--schmancy-sys-color-primary-default) 20%, transparent);\n\t}\n\t:host(:active:not([disabled])) {\n\t\ttransform: scale(0.97);\n\t\tbox-shadow: 0 1px 4px -2px color-mix(in srgb, var(--schmancy-sys-color-primary-default) 10%, transparent);\n\t\ttransition-duration: 100ms;\n\t}\n\t@media (prefers-reduced-motion: reduce) {\n\t\t:host { transition: none; }\n\t\t:host(:hover:not([disabled])) { box-shadow: none; }\n\t\t:host(:active:not([disabled])) { transform: none; box-shadow: none; }\n\t}\n\t:host *,\n\t* {\n\t\ttouch-action: manipulation;\n\t}`\n) {\n\tprotected static shadowRootOptions = {\n\t\t...LitElement.shadowRootOptions,\n\t\tmode: 'open',\n\t\tdelegatesFocus: true,\n\t}\n\n\t@query('[part=\"base\"]', true)\n\tprivate nativeElement!: HTMLElement\n\n\tprivate _ariaLabel!: string\n\n\t/**\n\t * The variant of the button.\n\t * @attr\n\t * @default 'text'\n\t * @public\n\t */\n\t@property({ reflect: true, type: String })\n\tpublic variant: ButtonVariant = 'text'\n\n\t/**\n\t * The color of the button.\n\t * @attr\n\t * @default Depends on variant: 'primary' for filled/elevated/outlined/text, 'secondary' for tonal\n\t * @public\n\t */\n\t@property({ reflect: true, type: String })\n\tpublic color?: ButtonColor\n\n\t/**\n\t * The width of the button.\n\t * @attr\n\t * @type {'full' | 'auto'}\n\t * @default 'auto'\n\t * @public\n\t */\n\t@property()\n\tpublic width: 'full' | 'auto' = 'auto'\n\n\t/**\n\t * The size of the button.\n\t * @attr\n\t * @type {'xxs' | 'xs' | 'sm' | 'md' | 'lg'}\n\t * @default 'md'\n\t * @public\n\t */\n\t@property({ type: String })\n\tpublic size: 'xxs' | 'xs' | 'sm' | 'md' | 'lg' = 'md'\n\n\t/**\n\t * The type of the button.\n\t * Defaults to 'button' (preventing accidental form submissions).\n\t * @attr\n\t */\n\t@property({ reflect: true, type: String })\n\tpublic type: 'button' | 'reset' | 'submit' = 'button'\n\n\t/**\n\t * The URL the button points to.\n\t * If provided, the component will render as an anchor element.\n\t * @attr\n\t */\n\t@property()\n\tpublic href?: string\n\n\t/**\n\t * Determines whether the button is disabled.\n\t * @attr\n\t */\n\t@property({ type: Boolean, reflect: true })\n\tpublic disabled = false\n\n\tpublic override set ariaLabel(value: string) {\n\t\tconst oldVal = this._ariaLabel\n\t\tthis._ariaLabel = value\n\n\t\tif (this.hasAttribute('aria-label')) {\n\t\t\tthis.removeAttribute('aria-label')\n\t\t}\n\t\tthis.requestUpdate('ariaLabel', oldVal)\n\t}\n\n\t@property({ attribute: 'aria-label' })\n\tpublic override get ariaLabel() {\n\t\treturn this._ariaLabel\n\t}\n\n\t@queryAssignedElements({\n\t\tslot: 'prefix',\n\t\tflatten: true,\n\t\tselector: 'img',\n\t})\n\tprivate prefixImgs!: HTMLImageElement[]\n\n\t@queryAssignedElements({\n\t\tslot: 'suffix',\n\t\tflatten: true,\n\t\tselector: 'img',\n\t})\n\tprivate suffixImgs!: HTMLImageElement[]\n\n\t/** Sets focus in the button. */\n\tpublic override focus(options?: FocusOptions) {\n\t\tthis.nativeElement.focus(options)\n\t}\n\n\t/** Removes focus from the button. */\n\tpublic override blur() {\n\t\tthis.nativeElement.blur()\n\t}\n\n\t/**\n\t * Get the effective color based on variant if not explicitly set\n\t * M3 spec: filled = primary, tonal = secondary, others = primary\n\t */\n\tprotected get effectiveColor(): ButtonColor {\n\t\tif (this.color) return this.color\n\n\t\t// Map 'tonal' to 'filled tonal' for checking\n\t\tconst effectiveVariant = this.variant === 'tonal' ? 'filled tonal' : this.variant\n\n\t\t// M3 defaults: tonal uses secondary, others use primary\n\t\treturn effectiveVariant === 'filled tonal' ? 'secondary' : 'primary'\n\t}\n\n\tprotected get imgClasses(): string[] {\n\t\t// M3 spec: icon sizes scale with button size\n\t\tconst sizeMap = {\n\t\t\txxs: 'w-3 h-3',    // 12px for 24px button (ultra-compact)\n\t\t\txs: 'w-4 h-4',     // 16px for 32px button (M3 dense)\n\t\t\tsm: 'w-5 h-5',     // 20px for 40px button (M3 default)\n\t\t\tmd: 'w-6 h-6',     // 24px for 48px button (M3 large)\n\t\t\tlg: 'w-7 h-7'      // 28px for 56px button (M3 extra large)\n\t\t}\n\t\treturn [sizeMap[this.size], 'object-contain']\n\t}\n\n\tfirstUpdated() {\n\t\t// Add image classes and ensure decorative images have an empty alt.\n\t\tthis.prefixImgs?.forEach(img => {\n\t\t\timg.classList.add(...this.imgClasses)\n\t\t\tif (!img.hasAttribute('alt')) {\n\t\t\t\timg.setAttribute('alt', '')\n\t\t\t}\n\t\t})\n\t\tthis.suffixImgs?.forEach(img => {\n\t\t\timg.classList.add(...this.imgClasses)\n\t\t\tif (!img.hasAttribute('alt')) {\n\t\t\t\timg.setAttribute('alt', '')\n\t\t\t}\n\t\t})\n\t}\n\n\tclick(): void {\n\t\tthis.dispatchEvent(new Event('click', { bubbles: true, composed: true }))\n\t}\n\n\t// Prevent default behavior when the component is disabled.\n\tprivate _preventDefault(event: Event) {\n\t\tevent.preventDefault()\n\t\tevent.stopPropagation()\n\t}\n\n\trender() {\n\t\t// Map 'tonal' variant to 'filled tonal' for backwards compatibility\n\t\tconst effectiveVariant = this.variant === 'tonal' ? 'filled tonal' : this.variant;\n\n\t\t// Compute classes for the interactive element.\n\t\tconst classes = {\n\t\t\t'z-0 transition-all duration-200 relative rounded-2xl inline-flex justify-center items-center outline-secondary-default focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-2 outline-hidden w-[inherit] overflow-hidden':\n\t\t\t\ttrue,\n\t\t\t// Height - M3 spec: 24dp (xxs) → 32dp (dense) → 40dp (default) → 48dp (large) → 56dp (XL)\n\t\t\t'h-6': this.size === 'xxs',   // 24px - Ultra-compact\n\t\t\t'h-8': this.size === 'xs',    // 32px - M3 dense/compact\n\t\t\t'h-10': this.size === 'sm',   // 40px - M3 default\n\t\t\t'h-12': this.size === 'md',   // 48px - M3 large\n\t\t\t'h-14': this.size === 'lg',   // 56px - M3 extra large\n\t\t\t// Padding - M3 spec: horizontal padding 24dp default, scaled proportionally\n\t\t\t'py-1 px-2': this.size === 'xxs',    // 4px/8px for 24px height\n\t\t\t'py-2 px-4': this.size === 'xs',     // 8px/16px for 32px height\n\t\t\t'py-2.5 px-5': this.size === 'sm',   // 10px/20px for 40px height\n\t\t\t'py-3 px-6': this.size === 'md',     // 12px/24px for 48px height (M3 default)\n\t\t\t'py-4 px-7': this.size === 'lg',     // 16px/28px for 56px height\n\t\t\t// Typography - M3 spec: label-large (14px) default, scaled\n\t\t\t'text-[10px] font-medium leading-3': this.size === 'xxs', // 10px\n\t\t\t'text-xs font-medium leading-4': this.size === 'xs',   // 12px\n\t\t\t'text-sm font-medium leading-5': this.size === 'sm' || this.size === 'md',   // 14px - M3 label-large\n\t\t\t'text-base font-medium leading-6': this.size === 'lg', // 16px\n\t\t\t// Letter spacing - M3 spec\n\t\t\t'tracking-[0.1px]': true,\n\t\t\t// Gap - Scaled with size\n\t\t\t'gap-0.5': this.size === 'xxs', // 2px\n\t\t\t'gap-1': this.size === 'xs',    // 4px\n\t\t\t'gap-1.5': this.size === 'sm',  // 6px\n\t\t\t'gap-2': this.size === 'md',    // 8px\n\t\t\t'gap-2.5': this.size === 'lg',  // 10px\n\t\t\t'cursor-pointer': !this.disabled,\n\t\t\t'opacity-[0.38]': this.disabled,\n\t\t\t'hover:shadow-sm': !this.disabled && effectiveVariant === 'elevated',\n\t\t\t'w-full tex-center': this.width === 'full',\n\t\t\t// Elevated variant\n\t\t\t'bg-surface-low shadow-xs': effectiveVariant === 'elevated',\n\t\t\t// Outlined variant\n\t\t\t'bg-transparent border-1 border-solid': effectiveVariant === 'outlined',\n\t\t\t'border-outline': effectiveVariant === 'outlined' && this.effectiveColor === 'primary',\n\t\t\t'border-success-default': effectiveVariant === 'outlined' && this.effectiveColor === 'success',\n\t\t\t'border-error-default': effectiveVariant === 'outlined' && this.effectiveColor === 'error',\n\t\t\t'border-warning-default': effectiveVariant === 'outlined' && this.effectiveColor === 'warning',\n\t\t\t'border-info-default': effectiveVariant === 'outlined' && this.effectiveColor === 'info',\n\t\t\t'border-secondary-default': effectiveVariant === 'outlined' && this.effectiveColor === 'secondary',\n\t\t\t'border-outline-variant': effectiveVariant === 'outlined' && this.effectiveColor === 'neutral',\n\t\t\t// Filled variant - background colors\n\t\t\t'bg-primary-default': effectiveVariant === 'filled' && this.effectiveColor === 'primary',\n\t\t\t'bg-secondary-default': effectiveVariant === 'filled' && this.effectiveColor === 'secondary',\n\t\t\t'bg-success-default': effectiveVariant === 'filled' && this.effectiveColor === 'success',\n\t\t\t'bg-error-default': effectiveVariant === 'filled' && this.effectiveColor === 'error',\n\t\t\t'bg-warning-default': effectiveVariant === 'filled' && this.effectiveColor === 'warning',\n\t\t\t'bg-info-default': effectiveVariant === 'filled' && this.effectiveColor === 'info',\n\t\t\t'bg-surface-containerHighest': effectiveVariant === 'filled' && this.effectiveColor === 'neutral',\n\t\t\t// Filled variant - text colors\n\t\t\t'text-primary-on': effectiveVariant === 'filled' && this.effectiveColor === 'primary',\n\t\t\t'text-secondary-on': effectiveVariant === 'filled' && this.effectiveColor === 'secondary',\n\t\t\t'text-success-on': effectiveVariant === 'filled' && this.effectiveColor === 'success',\n\t\t\t'text-error-on': effectiveVariant === 'filled' && this.effectiveColor === 'error',\n\t\t\t'text-warning-on': effectiveVariant === 'filled' && this.effectiveColor === 'warning',\n\t\t\t'text-info-on': effectiveVariant === 'filled' && this.effectiveColor === 'info',\n\t\t\t'text-surface-on': effectiveVariant === 'filled' && this.effectiveColor === 'neutral',\n\t\t\t// Filled tonal variant - background colors\n\t\t\t'bg-primary-container': effectiveVariant === 'filled tonal' && this.effectiveColor === 'primary',\n\t\t\t'bg-secondary-container': effectiveVariant === 'filled tonal' && this.effectiveColor === 'secondary',\n\t\t\t'bg-success-container': effectiveVariant === 'filled tonal' && this.effectiveColor === 'success',\n\t\t\t'bg-error-container': effectiveVariant === 'filled tonal' && this.effectiveColor === 'error',\n\t\t\t'bg-warning-container': effectiveVariant === 'filled tonal' && this.effectiveColor === 'warning',\n\t\t\t'bg-info-container': effectiveVariant === 'filled tonal' && this.effectiveColor === 'info',\n\t\t\t'bg-surface-containerLow': effectiveVariant === 'filled tonal' && this.effectiveColor === 'neutral',\n\t\t\t// Filled tonal variant - text colors\n\t\t\t'text-primary-onContainer': effectiveVariant === 'filled tonal' && this.effectiveColor === 'primary',\n\t\t\t'text-secondary-onContainer': effectiveVariant === 'filled tonal' && this.effectiveColor === 'secondary',\n\t\t\t'text-success-onContainer': effectiveVariant === 'filled tonal' && this.effectiveColor === 'success',\n\t\t\t'text-error-onContainer': effectiveVariant === 'filled tonal' && this.effectiveColor === 'error',\n\t\t\t'text-warning-onContainer': effectiveVariant === 'filled tonal' && this.effectiveColor === 'warning',\n\t\t\t'text-info-onContainer': effectiveVariant === 'filled tonal' && this.effectiveColor === 'info',\n\t\t\t// Text and elevated variants - text colors\n\t\t\t'text-primary-default': (effectiveVariant === 'text' || effectiveVariant === 'elevated' || effectiveVariant === 'outlined') && this.effectiveColor === 'primary',\n\t\t\t'text-secondary-default': (effectiveVariant === 'text' || effectiveVariant === 'elevated' || effectiveVariant === 'outlined') && this.effectiveColor === 'secondary',\n\t\t\t'text-success-default': (effectiveVariant === 'text' || effectiveVariant === 'elevated' || effectiveVariant === 'outlined') && this.effectiveColor === 'success',\n\t\t\t'text-error-default': (effectiveVariant === 'text' || effectiveVariant === 'elevated' || effectiveVariant === 'outlined') && this.effectiveColor === 'error',\n\t\t\t'text-warning-default': (effectiveVariant === 'text' || effectiveVariant === 'elevated' || effectiveVariant === 'outlined') && this.effectiveColor === 'warning',\n\t\t\t'text-info-default': (effectiveVariant === 'text' || effectiveVariant === 'elevated' || effectiveVariant === 'outlined') && this.effectiveColor === 'info',\n\t\t\t'text-surface-onVariant': (effectiveVariant === 'text' || effectiveVariant === 'elevated' || effectiveVariant === 'outlined' || effectiveVariant === 'filled tonal') && this.effectiveColor === 'neutral',\n\t\t}\n\n\t\tconst stateLayerClasses = {\n\t\t\t'absolute inset-0 hover:opacity-[0.08] z-0 rounded-2xl': true,\n\t\t\t// M3 focus and pressed states\n\t\t\t'focus-visible:opacity-[0.10]': true,  // M3 focus state\n\t\t\t'active:opacity-[0.10]': true,         // M3 pressed state\n\t\t\t// Filled variant hover\n\t\t\t'hover:bg-primary-on': effectiveVariant === 'filled' && this.effectiveColor === 'primary',\n\t\t\t'hover:bg-secondary-on': effectiveVariant === 'filled' && this.effectiveColor === 'secondary',\n\t\t\t'hover:bg-success-on': effectiveVariant === 'filled' && this.effectiveColor === 'success',\n\t\t\t'hover:bg-error-on': effectiveVariant === 'filled' && this.effectiveColor === 'error',\n\t\t\t'hover:bg-warning-on': effectiveVariant === 'filled' && this.effectiveColor === 'warning',\n\t\t\t'hover:bg-info-on': effectiveVariant === 'filled' && this.effectiveColor === 'info',\n\t\t\t'hover:bg-surface-on': effectiveVariant === 'filled' && this.effectiveColor === 'neutral',\n\t\t\t// Outlined, elevated, text variants hover\n\t\t\t'hover:bg-primary-default': (effectiveVariant === 'outlined' || effectiveVariant === 'elevated' || effectiveVariant === 'text') && this.effectiveColor === 'primary',\n\t\t\t'hover:bg-secondary-default': (effectiveVariant === 'outlined' || effectiveVariant === 'elevated' || effectiveVariant === 'text') && this.effectiveColor === 'secondary',\n\t\t\t'hover:bg-success-default': (effectiveVariant === 'outlined' || effectiveVariant === 'elevated' || effectiveVariant === 'text') && this.effectiveColor === 'success',\n\t\t\t'hover:bg-error-default': (effectiveVariant === 'outlined' || effectiveVariant === 'elevated' || effectiveVariant === 'text') && this.effectiveColor === 'error',\n\t\t\t'hover:bg-warning-default': (effectiveVariant === 'outlined' || effectiveVariant === 'elevated' || effectiveVariant === 'text') && this.effectiveColor === 'warning',\n\t\t\t'hover:bg-info-default': (effectiveVariant === 'outlined' || effectiveVariant === 'elevated' || effectiveVariant === 'text') && this.effectiveColor === 'info',\n\t\t\t'hover:bg-surface-onVariant': (effectiveVariant === 'outlined' || effectiveVariant === 'elevated' || effectiveVariant === 'text') && this.effectiveColor === 'neutral',\n\t\t\t// Filled tonal hover\n\t\t\t'hover:bg-primary-container': effectiveVariant === 'filled tonal' && this.effectiveColor === 'primary',\n\t\t\t'hover:bg-secondary-container': effectiveVariant === 'filled tonal' && this.effectiveColor === 'secondary',\n\t\t\t'hover:bg-success-container': effectiveVariant === 'filled tonal' && this.effectiveColor === 'success',\n\t\t\t'hover:bg-error-container': effectiveVariant === 'filled tonal' && this.effectiveColor === 'error',\n\t\t\t'hover:bg-warning-container': effectiveVariant === 'filled tonal' && this.effectiveColor === 'warning',\n\t\t\t'hover:bg-info-container': effectiveVariant === 'filled tonal' && this.effectiveColor === 'info',\n\t\t\t'hover:bg-surface-containerLow': effectiveVariant === 'filled tonal' && this.effectiveColor === 'neutral',\n\t\t}\n\n\t\t// If href is provided, render an anchor element.\n\t\tif (this.href) {\n\t\t\treturn html`\n\t\t\t\t<a\n\t\t\t\t\t${magnetic({ strength: 3, radius: 60 })}\n\t\t\t\t\tpart=\"base\"\n\t\t\t\t\thref=${ifDefined(this.disabled ? undefined : this.href)}\n\t\t\t\t\taria-label=${ifDefined(this.ariaLabel)}\n\t\t\t\t\tclass=\"${this.classMap(classes)}\"\n\t\t\t\t\ttabindex=${this.disabled ? '-1' : '0'}\n\t\t\t\t\taria-disabled=${this.disabled}\n\t\t\t\t\t@click=${this.disabled ? this._preventDefault : undefined}\n\t\t\t\t>\n\t\t\t\t\t${when(!this.disabled, () => html`<div class=\"${this.classMap(stateLayerClasses)}\"></div>`)}\n\t\t\t\t\t<slot name=\"prefix\"></slot>\n\t\t\t\t\t<slot></slot>\n\t\t\t\t\t<slot name=\"suffix\"></slot>\n\t\t\t\t</a>\n\t\t\t`\n\t\t}\n\n\t\t// Otherwise, render a native button element.\n\t\treturn html`\n\t\t\t<button\n\t\t\t\t${magnetic({ strength: 3, radius: 60 })}\n\t\t\t\tpart=\"base\"\n\t\t\t\taria-label=${ifDefined(this.ariaLabel)}\n\t\t\t\t?disabled=${this.disabled}\n\t\t\t\tclass=\"${this.classMap(classes)}\"\n\t\t\t\ttype=${ifDefined(this.type)}\n\t\t\t\ttabindex=${ifDefined(this.disabled ? '-1' : undefined)}\n\t\t\t>\n\t\t\t\t${when(!this.disabled, () => html`<div class=\"${this.classMap(stateLayerClasses)}\"></div>`)}\n\t\t\t\t<slot name=\"prefix\"></slot>\n\t\t\t\t<slot></slot>\n\t\t\t\t<slot name=\"suffix\"></slot>\n\t\t\t</button>\n\t\t`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-button': SchmancyButton\n\t}\n}\n","import { $LitElement } from '@mixins/index'\nimport { css, html, LitElement, PropertyValueMap } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { when } from 'lit/directives/when.js'\nimport { magnetic } from '../directives/magnetic'\nimport { ButtonVariant } from './button'\n\n/**\n * An icon button component.\n * @element schmancy-icon-button\n * @slot - The default slot.\n */\n@customElement('schmancy-icon-button')\nexport class SchmnacyIconButton extends $LitElement(css`\n\t:host {\n\t\tdisplay: block;\n\t\tborder-radius: 9999px;\n\t\ttransition:\n\t\t\tbox-shadow 300ms cubic-bezier(0.34, 1.56, 0.64, 1),\n\t\t\ttransform 200ms cubic-bezier(0.34, 1.56, 0.64, 1);\n\t}\n\t:host(:hover:not([disabled])) {\n\t\tbox-shadow: 0 2px 12px -4px color-mix(in srgb, var(--schmancy-sys-color-primary-default) 18%, transparent);\n\t}\n\t:host(:active:not([disabled])) {\n\t\ttransform: scale(0.92);\n\t\tbox-shadow: none;\n\t\ttransition-duration: 100ms;\n\t}\n\t@media (prefers-reduced-motion: reduce) {\n\t\t:host { transition: none; }\n\t\t:host(:hover:not([disabled])) { box-shadow: none; }\n\t\t:host(:active:not([disabled])) { transform: none; box-shadow: none; }\n\t}\n`) {\n\tprotected static shadowRootOptions = {\n\t\t...LitElement.shadowRootOptions,\n\t\tmode: 'open',\n\t\tdelegatesFocus: true,\n\t}\n\n\t@query('[part=\"base\"]', true)\n\tprivate nativeElement!: HTMLElement\n\n\tprivate _ariaLabel!: string\n\n\t/**\n\t * The size of the icon.\n\t * @attr\n\t * @default 'md'\n\t */\n\t@property({ type: String })\n\tpublic size: 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md'\n\n\t/**\n\t * The variant of the button.\n\t * @attr\n\t * @default 'text'\n\t */\n\t@property({ reflect: true, type: String })\n\tpublic variant: ButtonVariant = 'text'\n\n\t/**\n\t * The width of the button.\n\t * @attr\n\t * @type {'full' | 'auto'}\n\t * @default 'auto'\n\t */\n\t@property()\n\tpublic width: 'full' | 'auto' = 'auto'\n\n\t/**\n\t * The type of the button.\n\t * Defaults to 'button' (preventing accidental form submissions).\n\t * @attr\n\t */\n\t@property({ reflect: true, type: String })\n\tpublic type: 'button' | 'reset' | 'submit' = 'button'\n\n\t/**\n\t * The URL the button points to.\n\t * If provided, the component will render as an anchor element.\n\t * @attr\n\t */\n\t@property()\n\tpublic href?: string\n\n\t/**\n\t * Determines whether the button is disabled.\n\t * @attr\n\t */\n\t@property({ type: Boolean, reflect: true })\n\tpublic disabled = false\n\n\t/**\n\t * Render slot content as text instead of wrapping in schmancy-icon.\n\t * Use this when you want to display text labels in the button.\n\t * @attr\n\t */\n\t@property({ type: Boolean, reflect: true })\n\tpublic text = false\n\n\t/**\n\t * Icon name - use this instead of slot content to prevent translation breaking icons.\n\t * Example: <schmancy-icon-button icon=\"add\"></schmancy-icon-button>\n\t * @attr\n\t */\n\t@property({ type: String })\n\tpublic icon?: string\n\n\t// Reactively captured icon name from slot content (translation-proof)\n\t@state()\n\tprivate _capturedIcon?: string\n\n\tconnectedCallback(): void {\n\t\tsuper.connectedCallback()\n\t\t// Pre-capture icon from children to avoid double render flash\n\t\tthis._captureIconFromChildren()\n\t}\n\n\t// Capture icon from direct children (for initial render)\n\tprivate _captureIconFromChildren(): void {\n\t\tif (this.icon || this.text) return\n\t\tfor (const node of this.childNodes) {\n\t\t\tif (node.nodeType === Node.TEXT_NODE) {\n\t\t\t\tconst text = node.textContent?.trim()\n\t\t\t\tif (text) {\n\t\t\t\t\tthis._capturedIcon = text\n\t\t\t\t\treturn\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t// Handle slot content changes reactively (for dynamic updates)\n\tprivate _handleSlotChange(e: Event): void {\n\t\tif (this.icon || this.text) return\n\t\tconst slot = e.target as HTMLSlotElement\n\t\tconst nodes = slot.assignedNodes({ flatten: true })\n\t\tfor (const node of nodes) {\n\t\t\tif (node.nodeType === Node.TEXT_NODE) {\n\t\t\t\tconst text = node.textContent?.trim()\n\t\t\t\tif (text) {\n\t\t\t\t\tthis._capturedIcon = text\n\t\t\t\t\treturn\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t// Manage aria-label manually so that we can always use our internal property.\n\tpublic override set ariaLabel(value: string) {\n\t\tconst oldVal = this._ariaLabel\n\t\tthis._ariaLabel = value\n\n\t\tif (this.hasAttribute('aria-label')) {\n\t\t\tthis.removeAttribute('aria-label')\n\t\t}\n\t\tthis.requestUpdate('ariaLabel', oldVal)\n\t}\n\n\t@property({ attribute: 'aria-label' })\n\tpublic override get ariaLabel() {\n\t\treturn this._ariaLabel\n\t}\n\n\t/** Sets focus in the button. */\n\tpublic override focus(options?: FocusOptions) {\n\t\tthis.nativeElement.focus(options)\n\t}\n\n\t/** Removes focus from the button. */\n\tpublic override blur() {\n\t\tthis.nativeElement.blur()\n\t}\n\n\tclick(): void {\n\t\tthis.dispatchEvent(new Event('click', { bubbles: true, composed: true }))\n\t}\n\n\t// Prevent default behavior when the component is disabled.\n\tprivate _preventDefault(event: Event) {\n\t\tevent.preventDefault()\n\t\tevent.stopPropagation()\n\t}\n\n\tprotected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void {\n\t\t// Add any first-update logic here if needed.\n\t}\n\n\trender() {\n\t\t// Map 'tonal' variant to 'filled tonal' for backwards compatibility\n\t\tconst effectiveVariant = this.variant === 'tonal' ? 'filled tonal' : this.variant;\n\n\t\t// Compute classes for the interactive element.\n\t\tconst classes = {\n\t\t\t'z-0 h-full transition-all duration-200 relative rounded-full inline-flex justify-center items-center gap-[8px] outline-secondary-default focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-2 outline-hidden':\n\t\t\t\ttrue,\n\t\t\t'opacity-[0.38]': this.disabled,\n\t\t\t'cursor-pointer': !this.disabled,\n\t\t\t'hover:shadow-xs':\n\t\t\t\t!this.disabled &&\n\t\t\t\t(effectiveVariant === 'outlined' ||\n\t\t\t\t\teffectiveVariant === 'text' ||\n\t\t\t\t\teffectiveVariant === 'filled' ||\n\t\t\t\t\teffectiveVariant === 'filled tonal'),\n\t\t\t'hover:shadow-sm': !this.disabled && effectiveVariant === 'elevated',\n\t\t\t'w-full text-center': this.width === 'full',\n\t\t\t'bg-surface-low text-primary-default shadow-xs': effectiveVariant === 'elevated',\n\t\t\t'bg-transparent text-primary-default border-1 border-outline': effectiveVariant === 'outlined',\n\t\t\t'bg-primary-default text-primary-on': effectiveVariant === 'filled',\n\t\t\t'bg-secondary-container text-secondary-onContainer': effectiveVariant === 'filled tonal',\n\t\t\t'text-primary-default': effectiveVariant === 'text',\n\t\t\t// M3 spec: 24dp (xxs) → 32dp (dense) → 40dp (default) → 48dp (standard) → 56dp (large)\n\t\t\t'p-1.5': this.size === 'xxs',    // 6px padding  = 24px total (12px icon) - Ultra-compact\n\t\t\t'p-2': this.size === 'xs',       // 8px padding  = 32px total (16px icon) - M3 dense\n\t\t\t'p-2.5': this.size === 'sm',     // 10px padding = 40px total (20px icon) - M3 default\n\t\t\t'p-3': this.size === 'md',       // 12px padding = 48px total (24px icon) - M3 standard\n\t\t\t'p-4': this.size === 'lg',       // 16px padding = 56px total (24px icon) - M3 large\n\t\t\t'p-5': this.size === 'xl',       // 20px padding = 80px total (40px icon) - custom XL\n\t\t}\n\n\t\tconst stateLayerClasses = {\n\t\t\t'hover:opacity-[0.08] rounded-full z-0': true,\n\t\t\t'hover:bg-primary-on': effectiveVariant === 'filled',\n\t\t\t'hover:bg-primary-default': effectiveVariant === 'outlined' || effectiveVariant === 'elevated' || effectiveVariant === 'text',\n\t\t\t'hover:bg-secondary-container': effectiveVariant === 'filled tonal',\n\t\t}\n\n\t\t// Icon size mapping - M3 spec: 24dp standard, scaled for density\n\t\tconst iconSize = this.size === 'xxs' ? '12px' : this.size === 'xs' ? '16px' : this.size === 'sm' ? '20px' : this.size === 'md' ? '24px' : this.size === 'lg' ? '24px' : '40px';\n\n\t\t// If href is provided, render an anchor element.\n\t\tif (this.href) {\n\t\t\treturn html`\n\t\t\t\t<a\n\t\t\t\t\t${magnetic({ strength: 3, radius: 50 })}\n\t\t\t\t\tpart=\"base\"\n\t\t\t\t\thref=${ifDefined(this.disabled ? undefined : this.href)}\n\t\t\t\t\taria-label=${ifDefined(this.ariaLabel)}\n\t\t\t\t\tclass=\"${this.classMap(classes)}\"\n\t\t\t\t\ttabindex=${this.disabled ? '-1' : '0'}\n\t\t\t\t\taria-disabled=${this.disabled}\n\t\t\t\t\t@click=${this.disabled ? this._preventDefault : undefined}\n\t\t\t\t>\n\t\t\t\t\t${when(!this.disabled, () => html`<div class=\"absolute inset-0 ${this.classMap(stateLayerClasses)}\"></div>`)}\n\t\t\t\t\t${this.text\n\t\t\t\t\t\t? html`<slot></slot>`\n\t\t\t\t\t\t: html`\n\t\t\t\t\t\t\t<slot style=\"display:none\" @slotchange=${this._handleSlotChange}></slot>\n\t\t\t\t\t\t\t<schmancy-icon size=${iconSize} icon=${this.icon || this._capturedIcon}></schmancy-icon>\n\t\t\t\t\t\t`\n\t\t\t\t\t}\n\t\t\t\t</a>\n\t\t\t`\n\t\t}\n\n\t\t// Otherwise, render a native button element.\n\t\treturn html`\n\t\t\t<button\n\t\t\t\t${magnetic({ strength: 3, radius: 50 })}\n\t\t\t\tpart=\"base\"\n\t\t\t\taria-label=${ifDefined(this.ariaLabel)}\n\t\t\t\t?disabled=${this.disabled}\n\t\t\t\tclass=\"${this.classMap(classes)}\"\n\t\t\t\ttype=${ifDefined(this.type)}\n\t\t\t\ttabindex=${ifDefined(this.disabled ? '-1' : undefined)}\n\t\t\t>\n\t\t\t\t${when(!this.disabled, () => html`<div class=\"absolute inset-0 ${this.classMap(stateLayerClasses)}\"></div>`)}\n\t\t\t\t${this.text\n\t\t\t\t\t? html`<slot></slot>`\n\t\t\t\t\t: html`\n\t\t\t\t\t\t<slot style=\"display:none\" @slotchange=${this._handleSlotChange}></slot>\n\t\t\t\t\t\t<schmancy-icon size=${iconSize} icon=${this.icon || this._capturedIcon}></schmancy-icon>\n\t\t\t\t\t`\n\t\t\t\t}\n\t\t\t</button>\n\t\t`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-icon-button': SchmnacyIconButton\n\t}\n}\n"],"mappings":"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"}