@mhmo91/schmancy 0.10.36 → 0.10.38

package/dist/button-BQSOVnHn.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button-BQSOVnHn.js","names":["#ariaLabel"],"sources":["../src/button/context.ts","../src/button/button.ts"],"sourcesContent":["import { createContext } from '@lit/context'\n\nexport type SchmancyButtonSize = 'xxs' | 'xs' | 'sm' | 'md' | 'lg'\n\n/**\n * Provided by `<schmancy-button>` to its descendants so children\n * (e.g. `<schmancy-icon>`) can auto-size against the enclosing button.\n */\nexport const SchmancyButtonSizeContext = createContext<SchmancyButtonSize>('schmancy-button-size')\n","import { provide } from '@lit/context'\nimport { SchmancyElement } 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'\nimport { SchmancyButtonSizeContext, type SchmancyButtonSize } from './context'\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 * @csspart base - The underlying native `<button>` (or `<a>` when `href` is set).\n */\n@customElement('schmancy-button')\nexport class SchmancyButton extends SchmancyElement {\n\tstatic styles = [css`:host{\n\t\tdisplay: inline-flex;\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([width=\"full\"]) {\n\t\tdisplay: flex;\n\t\twidth: 100%;\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\tstatic formAssociated = true\n\tprivate internals: ElementInternals | undefined\n\t/**\n\t * When this button is `type=\"submit\"` and lives inside a <schmancy-form>,\n\t * the observer mirrors the form's `aria-busy` attribute onto this button\n\t * while a submit is in flight. Stays focusable; disabled buttons drop from\n\t * the tab order and are unreachable to AT (WCAG 2.2 AA).\n\t */\n\tprivate formBusyObserver?: MutationObserver\n\n\tconstructor() {\n\t\tsuper()\n\t\ttry {\n\t\t\tthis.internals = this.attachInternals()\n\t\t} catch {\n\t\t\tthis.internals = undefined\n\t\t}\n\t\t// Translate clicks into native form semantics so the button works\n\t\t// inside any <form>, not just inside <schmancy-form>.\n\t\tthis.addEventListener('click', (e: MouseEvent) => {\n\t\t\tif (this.disabled) {\n\t\t\t\te.preventDefault()\n\t\t\t\te.stopImmediatePropagation()\n\t\t\t\treturn\n\t\t\t}\n\t\t\tconst form = this.internals?.form\n\t\t\tif (!form) return\n\t\t\tif (this.type === 'submit') {\n\t\t\t\te.preventDefault()\n\t\t\t\tform.requestSubmit()\n\t\t\t} else if (this.type === 'reset') {\n\t\t\t\te.preventDefault()\n\t\t\t\tform.reset()\n\t\t\t}\n\t\t})\n\t}\n\n\t/** Associated form, when placed inside a <form>. */\n\tget form(): HTMLFormElement | null {\n\t\treturn this.internals?.form ?? null\n\t}\n\n\tformDisabledCallback(disabled: boolean): void {\n\t\tthis.disabled = disabled\n\t}\n\n\toverride connectedCallback(): void {\n\t\tsuper.connectedCallback()\n\t\t// Mirror the closest <schmancy-form>'s aria-busy onto this submit button\n\t\t// so the user gets a visible busy state during async submit handlers.\n\t\t// Schmancy-form sets aria-busy=\"true\" while status === 'submitting'.\n\t\tif (this.type !== 'submit') return\n\t\tconst form = this.closest('schmancy-form') as HTMLElement | null\n\t\tif (!form) return\n\t\tconst sync = () => {\n\t\t\tconst busy = form.getAttribute('aria-busy') === 'true'\n\t\t\tif (busy) {\n\t\t\t\tthis.setAttribute('aria-busy', 'true')\n\t\t\t\tthis.internals?.states.add('submitting')\n\t\t\t} else {\n\t\t\t\tthis.removeAttribute('aria-busy')\n\t\t\t\tthis.internals?.states.delete('submitting')\n\t\t\t}\n\t\t}\n\t\tsync()\n\t\tthis.formBusyObserver = new MutationObserver(sync)\n\t\tthis.formBusyObserver.observe(form, { attributes: true, attributeFilter: ['aria-busy'] })\n\t}\n\n\toverride disconnectedCallback(): void {\n\t\tthis.formBusyObserver?.disconnect()\n\t\tthis.formBusyObserver = undefined\n\t\tsuper.disconnectedCallback()\n\t}\n\n\t@query('[part=\"base\"]', true)\n\tprivate nativeElement!: HTMLElement\n\n\t#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({ reflect: true })\n\tpublic width: 'full' | 'auto' = 'auto'\n\n\t/**\n\t * The size of the button.\n\t * Provided as `SchmancyButtonSizeContext` to descendant elements so children\n\t * (e.g. `<schmancy-icon>`) can auto-size against the enclosing button.\n\t * @attr\n\t * @type {'xxs' | 'xs' | 'sm' | 'md' | 'lg'}\n\t * @default 'md'\n\t * @public\n\t */\n\t@provide({ context: SchmancyButtonSizeContext })\n\t@property({ type: String })\n\tpublic size: SchmancyButtonSize = '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 flex justify-center items-center outline-secondary-default focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-2 outline-hidden flex-1 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"],"mappings":"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"}

package/dist/button-WRmXlNyw.cjs

@@ -0,0 +1,62 @@
+require(`./chunk-CncqDLb2.cjs`);const e=require(`./SchmancyElement-C41uPa6l.cjs`);require(`./mixins-fIpzhVMd.cjs`);const t=require(`./magnetic-DKtc4umC.cjs`);let n=require(`@lit/context`),r=require(`lit/decorators.js`),i=require(`lit`),a=require(`lit/directives/if-defined.js`),o=require(`lit/directives/when.js`);var s=(0,n.createContext)(`schmancy-button-size`),c=class extends e.t{static{this.styles=[i.css`:host{
+		display: inline-flex;
+		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([width="full"]) {
+		display: flex;
+		width: 100%;
+	}
+	: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;
+	}`]}static{this.shadowRootOptions={...i.LitElement.shadowRootOptions,mode:`open`,delegatesFocus:!0}}static{this.formAssociated=!0}constructor(){super(),this.variant=`text`,this.width=`auto`,this.size=`md`,this.type=`button`,this.disabled=!1;try{this.internals=this.attachInternals()}catch{this.internals=void 0}this.addEventListener(`click`,e=>{if(this.disabled)return e.preventDefault(),void e.stopImmediatePropagation();let t=this.internals?.form;t&&(this.type===`submit`?(e.preventDefault(),t.requestSubmit()):this.type===`reset`&&(e.preventDefault(),t.reset()))})}get form(){return this.internals?.form??null}formDisabledCallback(e){this.disabled=e}connectedCallback(){if(super.connectedCallback(),this.type!==`submit`)return;let e=this.closest(`schmancy-form`);if(!e)return;let t=()=>{e.getAttribute(`aria-busy`)===`true`?(this.setAttribute(`aria-busy`,`true`),this.internals?.states.add(`submitting`)):(this.removeAttribute(`aria-busy`),this.internals?.states.delete(`submitting`))};t(),this.formBusyObserver=new MutationObserver(t),this.formBusyObserver.observe(e,{attributes:!0,attributeFilter:[`aria-busy`]})}disconnectedCallback(){this.formBusyObserver?.disconnect(),this.formBusyObserver=void 0,super.disconnectedCallback()}#e;set ariaLabel(e){let t=this.#e;this.#e=e,this.hasAttribute(`aria-label`)&&this.removeAttribute(`aria-label`),this.requestUpdate(`ariaLabel`,t)}get ariaLabel(){return this.#e}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,n={"z-0 transition-all duration-200 relative rounded-2xl flex justify-center items-center outline-secondary-default focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-2 outline-hidden flex-1 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?i.html`
+				<a
+					${t.t({strength:3,radius:60})}
+					part="base"
+					href=${(0,a.ifDefined)(this.disabled?void 0:this.href)}
+					aria-label=${(0,a.ifDefined)(this.ariaLabel)}
+					class="${this.classMap(n)}"
+					tabindex=${this.disabled?`-1`:`0`}
+					aria-disabled=${this.disabled}
+					@click=${this.disabled?this.preventDefault:void 0}
+				>
+					${(0,o.when)(!this.disabled,()=>i.html`<div class="${this.classMap(r)}"></div>`)}
+					<slot name="prefix"></slot>
+					<slot></slot>
+					<slot name="suffix"></slot>
+				</a>
+			`:i.html`
+			<button
+				${t.t({strength:3,radius:60})}
+				part="base"
+				aria-label=${(0,a.ifDefined)(this.ariaLabel)}
+				?disabled=${this.disabled}
+				class="${this.classMap(n)}"
+				type=${(0,a.ifDefined)(this.type)}
+				tabindex=${(0,a.ifDefined)(this.disabled?`-1`:void 0)}
+			>
+				${(0,o.when)(!this.disabled,()=>i.html`<div class="${this.classMap(r)}"></div>`)}
+				<slot name="prefix"></slot>
+				<slot></slot>
+				<slot name="suffix"></slot>
+			</button>
+		`}};e.u([(0,r.query)(`[part="base"]`,!0)],c.prototype,`nativeElement`,void 0),e.u([(0,r.property)({reflect:!0,type:String})],c.prototype,`variant`,void 0),e.u([(0,r.property)({reflect:!0,type:String})],c.prototype,`color`,void 0),e.u([(0,r.property)({reflect:!0})],c.prototype,`width`,void 0),e.u([(0,n.provide)({context:s}),(0,r.property)({type:String})],c.prototype,`size`,void 0),e.u([(0,r.property)({reflect:!0,type:String})],c.prototype,`type`,void 0),e.u([(0,r.property)()],c.prototype,`href`,void 0),e.u([(0,r.property)({type:Boolean,reflect:!0})],c.prototype,`disabled`,void 0),e.u([(0,r.property)({attribute:`aria-label`})],c.prototype,`ariaLabel`,null),e.u([(0,r.queryAssignedElements)({slot:`prefix`,flatten:!0,selector:`img`})],c.prototype,`prefixImgs`,void 0),e.u([(0,r.queryAssignedElements)({slot:`suffix`,flatten:!0,selector:`img`})],c.prototype,`suffixImgs`,void 0),c=e.u([(0,r.customElement)(`schmancy-button`)],c),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return c}});

package/dist/button-WRmXlNyw.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"button-WRmXlNyw.cjs","names":["#ariaLabel"],"sources":["../src/button/context.ts","../src/button/button.ts"],"sourcesContent":["import { createContext } from '@lit/context'\n\nexport type SchmancyButtonSize = 'xxs' | 'xs' | 'sm' | 'md' | 'lg'\n\n/**\n * Provided by `<schmancy-button>` to its descendants so children\n * (e.g. `<schmancy-icon>`) can auto-size against the enclosing button.\n */\nexport const SchmancyButtonSizeContext = createContext<SchmancyButtonSize>('schmancy-button-size')\n","import { provide } from '@lit/context'\nimport { SchmancyElement } 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'\nimport { SchmancyButtonSizeContext, type SchmancyButtonSize } from './context'\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 * @csspart base - The underlying native `<button>` (or `<a>` when `href` is set).\n */\n@customElement('schmancy-button')\nexport class SchmancyButton extends SchmancyElement {\n\tstatic styles = [css`:host{\n\t\tdisplay: inline-flex;\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([width=\"full\"]) {\n\t\tdisplay: flex;\n\t\twidth: 100%;\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\tstatic formAssociated = true\n\tprivate internals: ElementInternals | undefined\n\t/**\n\t * When this button is `type=\"submit\"` and lives inside a <schmancy-form>,\n\t * the observer mirrors the form's `aria-busy` attribute onto this button\n\t * while a submit is in flight. Stays focusable; disabled buttons drop from\n\t * the tab order and are unreachable to AT (WCAG 2.2 AA).\n\t */\n\tprivate formBusyObserver?: MutationObserver\n\n\tconstructor() {\n\t\tsuper()\n\t\ttry {\n\t\t\tthis.internals = this.attachInternals()\n\t\t} catch {\n\t\t\tthis.internals = undefined\n\t\t}\n\t\t// Translate clicks into native form semantics so the button works\n\t\t// inside any <form>, not just inside <schmancy-form>.\n\t\tthis.addEventListener('click', (e: MouseEvent) => {\n\t\t\tif (this.disabled) {\n\t\t\t\te.preventDefault()\n\t\t\t\te.stopImmediatePropagation()\n\t\t\t\treturn\n\t\t\t}\n\t\t\tconst form = this.internals?.form\n\t\t\tif (!form) return\n\t\t\tif (this.type === 'submit') {\n\t\t\t\te.preventDefault()\n\t\t\t\tform.requestSubmit()\n\t\t\t} else if (this.type === 'reset') {\n\t\t\t\te.preventDefault()\n\t\t\t\tform.reset()\n\t\t\t}\n\t\t})\n\t}\n\n\t/** Associated form, when placed inside a <form>. */\n\tget form(): HTMLFormElement | null {\n\t\treturn this.internals?.form ?? null\n\t}\n\n\tformDisabledCallback(disabled: boolean): void {\n\t\tthis.disabled = disabled\n\t}\n\n\toverride connectedCallback(): void {\n\t\tsuper.connectedCallback()\n\t\t// Mirror the closest <schmancy-form>'s aria-busy onto this submit button\n\t\t// so the user gets a visible busy state during async submit handlers.\n\t\t// Schmancy-form sets aria-busy=\"true\" while status === 'submitting'.\n\t\tif (this.type !== 'submit') return\n\t\tconst form = this.closest('schmancy-form') as HTMLElement | null\n\t\tif (!form) return\n\t\tconst sync = () => {\n\t\t\tconst busy = form.getAttribute('aria-busy') === 'true'\n\t\t\tif (busy) {\n\t\t\t\tthis.setAttribute('aria-busy', 'true')\n\t\t\t\tthis.internals?.states.add('submitting')\n\t\t\t} else {\n\t\t\t\tthis.removeAttribute('aria-busy')\n\t\t\t\tthis.internals?.states.delete('submitting')\n\t\t\t}\n\t\t}\n\t\tsync()\n\t\tthis.formBusyObserver = new MutationObserver(sync)\n\t\tthis.formBusyObserver.observe(form, { attributes: true, attributeFilter: ['aria-busy'] })\n\t}\n\n\toverride disconnectedCallback(): void {\n\t\tthis.formBusyObserver?.disconnect()\n\t\tthis.formBusyObserver = undefined\n\t\tsuper.disconnectedCallback()\n\t}\n\n\t@query('[part=\"base\"]', true)\n\tprivate nativeElement!: HTMLElement\n\n\t#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({ reflect: true })\n\tpublic width: 'full' | 'auto' = 'auto'\n\n\t/**\n\t * The size of the button.\n\t * Provided as `SchmancyButtonSizeContext` to descendant elements so children\n\t * (e.g. `<schmancy-icon>`) can auto-size against the enclosing button.\n\t * @attr\n\t * @type {'xxs' | 'xs' | 'sm' | 'md' | 'lg'}\n\t * @default 'md'\n\t * @public\n\t */\n\t@provide({ context: SchmancyButtonSizeContext })\n\t@property({ type: String })\n\tpublic size: SchmancyButtonSize = '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 flex justify-center items-center outline-secondary-default focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-2 outline-hidden flex-1 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"],"mappings":"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"}

package/dist/button.cjs

@@ -1,4 +1,4 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`./chunk-CncqDLb2.cjs`);const e=require(`./SchmancyElement-BBzRWB1w.cjs`);require(`./mixins-DPdzC9ZH.cjs`);const t=require(`./magnetic-DKtc4umC.cjs`),n=require(`./button-CkwQH-g3.cjs`);let r=require(`lit/decorators.js`),i=require(`lit`),a=require(`lit/directives/if-defined.js`),o=require(`lit/directives/when.js`);var s=class extends e.t{constructor(...e){super(...e),this.size=`md`,this.variant=`text`,this.width=`auto`,this.type=`button`,this.disabled=!1,this.text=!1}static{this.styles=[i.css`
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`./chunk-CncqDLb2.cjs`);const e=require(`./SchmancyElement-C41uPa6l.cjs`);require(`./mixins-fIpzhVMd.cjs`);const t=require(`./magnetic-DKtc4umC.cjs`),n=require(`./button-WRmXlNyw.cjs`);let r=require(`lit/decorators.js`),i=require(`lit`),a=require(`lit/directives/if-defined.js`),o=require(`lit/directives/when.js`);var s=class extends e.t{constructor(...e){super(...e),this.size=`md`,this.variant=`text`,this.width=`auto`,this.type=`button`,this.disabled=!1,this.text=!1}static{this.styles=[i.css`
 	:host {
 		display: inline-flex;
 		border-radius: 9999px;
@@ -23,7 +23,7 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`./ch
 		:host(:hover:not([disabled])) { box-shadow: none; }
 		:host(:active:not([disabled])) { transform: none; box-shadow: none; }
 	}
-`]}static{this.shadowRootOptions={...i.LitElement.shadowRootOptions,mode:`open`,delegatesFocus:!0}}connectedCallback(){super.connectedCallback(),this._captureIcon(),this._observer=new MutationObserver(()=>this._captureIcon()),this._observer.observe(this,{childList:!0,characterData:!0,subtree:!0})}disconnectedCallback(){super.disconnectedCallback(),this._observer?.disconnect()}_captureIcon(){this.icon||this.text||(this._capturedIcon=this.textContent?.trim()||void 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()}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,n={"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`,"flex-1 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`},s=this.size===`xxs`?`text-xs`:this.size===`xs`?`text-base`:this.size===`sm`?`text-xl`:this.size===`md`||this.size===`lg`?`text-2xl`:`text-4xl`;return this.href?i.html`
+`]}static{this.shadowRootOptions={...i.LitElement.shadowRootOptions,mode:`open`,delegatesFocus:!0}}#e;connectedCallback(){super.connectedCallback(),this.captureIcon(),this.observer=new MutationObserver(()=>this.captureIcon()),this.observer.observe(this,{childList:!0,characterData:!0,subtree:!0})}disconnectedCallback(){super.disconnectedCallback(),this.observer?.disconnect()}captureIcon(){this.icon||this.text||(this.capturedIcon=this.textContent?.trim()||void 0)}set ariaLabel(e){let t=this.#e;this.#e=e,this.hasAttribute(`aria-label`)&&this.removeAttribute(`aria-label`),this.requestUpdate(`ariaLabel`,t)}get ariaLabel(){return this.#e}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(){}render(){let e=this.variant===`tonal`?`filled tonal`:this.variant,n={"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`,"flex-1 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`},s=this.size===`xxs`?`text-xs`:this.size===`xs`?`text-base`:this.size===`sm`?`text-xl`:this.size===`md`||this.size===`lg`?`text-2xl`:`text-4xl`;return this.href?i.html`
 				<a
 					${t.t({strength:3,radius:50})}
 					part="base"
@@ -32,12 +32,12 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`./ch
 					class="${this.classMap(n)}"
 					tabindex=${this.disabled?`-1`:`0`}
 					aria-disabled=${this.disabled}
-					@click=${this.disabled?this._preventDefault:void 0}
+					@click=${this.disabled?this.preventDefault:void 0}
 				>
 					${(0,o.when)(!this.disabled,()=>i.html`<div class="absolute inset-0 ${this.classMap(r)}"></div>`)}
 					${this.text?i.html`<slot></slot>`:i.html`
 							<slot style="display:none"></slot>
-							<schmancy-icon class=${s}>${this.icon||this._capturedIcon}</schmancy-icon>
+							<schmancy-icon class=${s}>${this.icon||this.capturedIcon}</schmancy-icon>
 						`}
 				</a>
 			`:i.html`
@@ -53,7 +53,7 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`./ch
 				${(0,o.when)(!this.disabled,()=>i.html`<div class="absolute inset-0 ${this.classMap(r)}"></div>`)}
 				${this.text?i.html`<slot></slot>`:i.html`
 						<slot style="display:none"></slot>
-						<schmancy-icon class=${s}>${this.icon||this._capturedIcon}</schmancy-icon>
+						<schmancy-icon class=${s}>${this.icon||this.capturedIcon}</schmancy-icon>
 					`}
 			</button>
-		`}};e.u([(0,r.query)(`[part="base"]`,!0)],s.prototype,`nativeElement`,void 0),e.u([(0,r.property)({type:String})],s.prototype,`size`,void 0),e.u([(0,r.property)({reflect:!0,type:String})],s.prototype,`variant`,void 0),e.u([(0,r.property)({reflect:!0})],s.prototype,`width`,void 0),e.u([(0,r.property)({reflect:!0,type:String})],s.prototype,`type`,void 0),e.u([(0,r.property)()],s.prototype,`href`,void 0),e.u([(0,r.property)({type:Boolean,reflect:!0})],s.prototype,`disabled`,void 0),e.u([(0,r.property)({type:Boolean,reflect:!0})],s.prototype,`text`,void 0),e.u([(0,r.property)({type:String})],s.prototype,`icon`,void 0),e.u([(0,r.state)()],s.prototype,`_capturedIcon`,void 0),e.u([(0,r.property)({attribute:`aria-label`})],s.prototype,`ariaLabel`,null),s=e.u([(0,r.customElement)(`schmancy-icon-button`)],s),Object.defineProperty(exports,`SchmancyButton`,{enumerable:!0,get:function(){return n.t}}),Object.defineProperty(exports,`SchmnacyIconButton`,{enumerable:!0,get:function(){return s}});
+		`}};e.u([(0,r.query)(`[part="base"]`,!0)],s.prototype,`nativeElement`,void 0),e.u([(0,r.property)({type:String})],s.prototype,`size`,void 0),e.u([(0,r.property)({reflect:!0,type:String})],s.prototype,`variant`,void 0),e.u([(0,r.property)({reflect:!0})],s.prototype,`width`,void 0),e.u([(0,r.property)({reflect:!0,type:String})],s.prototype,`type`,void 0),e.u([(0,r.property)()],s.prototype,`href`,void 0),e.u([(0,r.property)({type:Boolean,reflect:!0})],s.prototype,`disabled`,void 0),e.u([(0,r.property)({type:Boolean,reflect:!0})],s.prototype,`text`,void 0),e.u([(0,r.property)({type:String})],s.prototype,`icon`,void 0),e.u([(0,r.state)()],s.prototype,`capturedIcon`,void 0),e.u([(0,r.property)({attribute:`aria-label`})],s.prototype,`ariaLabel`,null),s=e.u([(0,r.customElement)(`schmancy-icon-button`)],s),Object.defineProperty(exports,`SchmancyButton`,{enumerable:!0,get:function(){return n.t}}),Object.defineProperty(exports,`SchmnacyIconButton`,{enumerable:!0,get:function(){return s}});

package/dist/button.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"button.cjs","names":[],"sources":["../src/button/icon-button.ts"],"sourcesContent":["import { SchmancyElement } 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 (usually an icon or glyph).\n * @csspart base - The underlying native `<button>` (or `<a>` when `href` is set).\n */\n@customElement('schmancy-icon-button')\nexport class SchmnacyIconButton extends SchmancyElement {\n\tstatic styles = [css`\n\t:host {\n\t\tdisplay: inline-flex;\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([width=\"full\"]) {\n\t\tdisplay: flex;\n\t\twidth: 100%;\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\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({ reflect: true })\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// Mirrors <schmancy-icon>: a MutationObserver on the light DOM keeps this\n\t// in sync no matter how the consumer passes the name — a plain text node,\n\t// a dynamic ${...} binding (Lit mutates the text node's data in place, so\n\t// no slotchange ever fires), or a nested <schmancy-icon> element.\n\t// `textContent` flattens through all three.\n\t@state()\n\tprivate _capturedIcon?: string\n\n\tprivate _observer?: MutationObserver\n\n\tconnectedCallback(): void {\n\t\tsuper.connectedCallback()\n\t\tthis._captureIcon()\n\t\tthis._observer = new MutationObserver(() => this._captureIcon())\n\t\tthis._observer.observe(this, { childList: true, characterData: true, subtree: true })\n\t}\n\n\tdisconnectedCallback(): void {\n\t\tsuper.disconnectedCallback()\n\t\tthis._observer?.disconnect()\n\t}\n\n\tprivate _captureIcon(): void {\n\t\tif (this.icon || this.text) return\n\t\tthis._capturedIcon = this.textContent?.trim() || undefined\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<unknown> | 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'flex-1 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\tconst iconSizeClass = this.size === 'xxs' ? 'text-xs' : this.size === 'xs' ? 'text-base' : this.size === 'sm' ? 'text-xl' : this.size === 'md' ? 'text-2xl' : this.size === 'lg' ? 'text-2xl' : 'text-4xl';\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\"></slot>\n\t\t\t\t\t\t\t<schmancy-icon class=${iconSizeClass}>${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\"></slot>\n\t\t\t\t\t\t<schmancy-icon class=${iconSizeClass}>${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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"}
+{"version":3,"file":"button.cjs","names":["#ariaLabel"],"sources":["../src/button/icon-button.ts"],"sourcesContent":["import { SchmancyElement } from '@mixins/index'\nimport { css, html, LitElement } 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 (usually an icon or glyph).\n * @csspart base - The underlying native `<button>` (or `<a>` when `href` is set).\n */\n@customElement('schmancy-icon-button')\nexport class SchmnacyIconButton extends SchmancyElement {\n\tstatic styles = [css`\n\t:host {\n\t\tdisplay: inline-flex;\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([width=\"full\"]) {\n\t\tdisplay: flex;\n\t\twidth: 100%;\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\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\t#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({ reflect: true })\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// Mirrors <schmancy-icon>: a MutationObserver on the light DOM keeps this\n\t// in sync no matter how the consumer passes the name — a plain text node,\n\t// a dynamic ${...} binding (Lit mutates the text node's data in place, so\n\t// no slotchange ever fires), or a nested <schmancy-icon> element.\n\t// `textContent` flattens through all three.\n\t@state()\n\tprivate capturedIcon?: string\n\n\tprivate observer?: MutationObserver\n\n\tconnectedCallback(): void {\n\t\tsuper.connectedCallback()\n\t\tthis.captureIcon()\n\t\tthis.observer = new MutationObserver(() => this.captureIcon())\n\t\tthis.observer.observe(this, { childList: true, characterData: true, subtree: true })\n\t}\n\n\tdisconnectedCallback(): void {\n\t\tsuper.disconnectedCallback()\n\t\tthis.observer?.disconnect()\n\t}\n\n\tprivate captureIcon(): void {\n\t\tif (this.icon || this.text) return\n\t\tthis.capturedIcon = this.textContent?.trim() || undefined\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(): 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'flex-1 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\tconst iconSizeClass = this.size === 'xxs' ? 'text-xs' : this.size === 'xs' ? 'text-base' : this.size === 'sm' ? 'text-xl' : this.size === 'md' ? 'text-2xl' : this.size === 'lg' ? 'text-2xl' : 'text-4xl';\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\"></slot>\n\t\t\t\t\t\t\t<schmancy-icon class=${iconSizeClass}>${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\"></slot>\n\t\t\t\t\t\t<schmancy-icon class=${iconSizeClass}>${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,7 +1,7 @@
-import { t as e, u as t } from "./SchmancyElement-C3CpdNsi.js";
-import "./mixins-DTzfFVyv.js";
+import { t as e, u as t } from "./SchmancyElement-BNnyBOwk.js";
+import "./mixins-DGBI7YPO.js";
 import { t as n } from "./magnetic-DaOOv5Dz.js";
-import { t as r } from "./button-C89bPnHt.js";
+import { t as r } from "./button-BQSOVnHn.js";
 import { customElement as i, property as a, query as o, state as s } from "lit/decorators.js";
 import { LitElement as c, css as l, html as u } from "lit";
 import { ifDefined as d } from "lit/directives/if-defined.js";
@@ -45,25 +45,26 @@ var p = class extends e {
 			delegatesFocus: !0
 		};
 	}
+	#e;
 	connectedCallback() {
-		super.connectedCallback(), this._captureIcon(), this._observer = new MutationObserver(() => this._captureIcon()), this._observer.observe(this, {
+		super.connectedCallback(), this.captureIcon(), this.observer = new MutationObserver(() => this.captureIcon()), this.observer.observe(this, {
 			childList: !0,
 			characterData: !0,
 			subtree: !0
 		});
 	}
 	disconnectedCallback() {
-		super.disconnectedCallback(), this._observer?.disconnect();
+		super.disconnectedCallback(), this.observer?.disconnect();
 	}
-	_captureIcon() {
-		this.icon || this.text || (this._capturedIcon = this.textContent?.trim() || void 0);
+	captureIcon() {
+		this.icon || this.text || (this.capturedIcon = this.textContent?.trim() || void 0);
 	}
 	set ariaLabel(e) {
-		let t = this._ariaLabel;
-		this._ariaLabel = e, this.hasAttribute("aria-label") && this.removeAttribute("aria-label"), this.requestUpdate("ariaLabel", t);
+		let t = this.#e;
+		this.#e = e, this.hasAttribute("aria-label") && this.removeAttribute("aria-label"), this.requestUpdate("ariaLabel", t);
 	}
 	get ariaLabel() {
-		return this._ariaLabel;
+		return this.#e;
 	}
 	focus(e) {
 		this.nativeElement.focus(e);
@@ -77,10 +78,10 @@ var p = class extends e {
 			composed: !0
 		}));
 	}
-	_preventDefault(e) {
+	preventDefault(e) {
 		e.preventDefault(), e.stopPropagation();
 	}
-	firstUpdated(e) {}
+	firstUpdated() {}
 	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,
@@ -118,12 +119,12 @@ var p = class extends e {
 					class="${this.classMap(t)}"
 					tabindex=${this.disabled ? "-1" : "0"}
 					aria-disabled=${this.disabled}
-					@click=${this.disabled ? this._preventDefault : void 0}
+					@click=${this.disabled ? this.preventDefault : void 0}
 				>
 					${f(!this.disabled, () => u`<div class="absolute inset-0 ${this.classMap(r)}"></div>`)}
 					${this.text ? u`<slot></slot>` : u`
 							<slot style="display:none"></slot>
-							<schmancy-icon class=${i}>${this.icon || this._capturedIcon}</schmancy-icon>
+							<schmancy-icon class=${i}>${this.icon || this.capturedIcon}</schmancy-icon>
 						`}
 				</a>
 			` : u`
@@ -142,7 +143,7 @@ var p = class extends e {
 				${f(!this.disabled, () => u`<div class="absolute inset-0 ${this.classMap(r)}"></div>`)}
 				${this.text ? u`<slot></slot>` : u`
 						<slot style="display:none"></slot>
-						<schmancy-icon class=${i}>${this.icon || this._capturedIcon}</schmancy-icon>
+						<schmancy-icon class=${i}>${this.icon || this.capturedIcon}</schmancy-icon>
 					`}
 			</button>
 		`;
@@ -160,5 +161,5 @@ t([o("[part=\"base\"]", !0)], p.prototype, "nativeElement", void 0), t([a({ type
 })], p.prototype, "disabled", void 0), t([a({
 	type: Boolean,
 	reflect: !0
-})], p.prototype, "text", void 0), t([a({ type: String })], p.prototype, "icon", void 0), t([s()], p.prototype, "_capturedIcon", void 0), t([a({ attribute: "aria-label" })], p.prototype, "ariaLabel", null), p = t([i("schmancy-icon-button")], p);
+})], p.prototype, "text", void 0), t([a({ type: String })], p.prototype, "icon", void 0), t([s()], p.prototype, "capturedIcon", void 0), t([a({ attribute: "aria-label" })], p.prototype, "ariaLabel", null), p = t([i("schmancy-icon-button")], p);
 export { r as SchmancyButton, p as SchmnacyIconButton };

package/dist/button.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.js","names":[],"sources":["../src/button/icon-button.ts"],"sourcesContent":["import { SchmancyElement } 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 (usually an icon or glyph).\n * @csspart base - The underlying native `<button>` (or `<a>` when `href` is set).\n */\n@customElement('schmancy-icon-button')\nexport class SchmnacyIconButton extends SchmancyElement {\n\tstatic styles = [css`\n\t:host {\n\t\tdisplay: inline-flex;\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([width=\"full\"]) {\n\t\tdisplay: flex;\n\t\twidth: 100%;\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\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({ reflect: true })\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// Mirrors <schmancy-icon>: a MutationObserver on the light DOM keeps this\n\t// in sync no matter how the consumer passes the name — a plain text node,\n\t// a dynamic ${...} binding (Lit mutates the text node's data in place, so\n\t// no slotchange ever fires), or a nested <schmancy-icon> element.\n\t// `textContent` flattens through all three.\n\t@state()\n\tprivate _capturedIcon?: string\n\n\tprivate _observer?: MutationObserver\n\n\tconnectedCallback(): void {\n\t\tsuper.connectedCallback()\n\t\tthis._captureIcon()\n\t\tthis._observer = new MutationObserver(() => this._captureIcon())\n\t\tthis._observer.observe(this, { childList: true, characterData: true, subtree: true })\n\t}\n\n\tdisconnectedCallback(): void {\n\t\tsuper.disconnectedCallback()\n\t\tthis._observer?.disconnect()\n\t}\n\n\tprivate _captureIcon(): void {\n\t\tif (this.icon || this.text) return\n\t\tthis._capturedIcon = this.textContent?.trim() || undefined\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<unknown> | 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'flex-1 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\tconst iconSizeClass = this.size === 'xxs' ? 'text-xs' : this.size === 'xs' ? 'text-base' : this.size === 'sm' ? 'text-xl' : this.size === 'md' ? 'text-2xl' : this.size === 'lg' ? 'text-2xl' : 'text-4xl';\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\"></slot>\n\t\t\t\t\t\t\t<schmancy-icon class=${iconSizeClass}>${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\"></slot>\n\t\t\t\t\t\t<schmancy-icon class=${iconSizeClass}>${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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"}
+{"version":3,"file":"button.js","names":["#ariaLabel"],"sources":["../src/button/icon-button.ts"],"sourcesContent":["import { SchmancyElement } from '@mixins/index'\nimport { css, html, LitElement } 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 (usually an icon or glyph).\n * @csspart base - The underlying native `<button>` (or `<a>` when `href` is set).\n */\n@customElement('schmancy-icon-button')\nexport class SchmnacyIconButton extends SchmancyElement {\n\tstatic styles = [css`\n\t:host {\n\t\tdisplay: inline-flex;\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([width=\"full\"]) {\n\t\tdisplay: flex;\n\t\twidth: 100%;\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\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\t#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({ reflect: true })\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// Mirrors <schmancy-icon>: a MutationObserver on the light DOM keeps this\n\t// in sync no matter how the consumer passes the name — a plain text node,\n\t// a dynamic ${...} binding (Lit mutates the text node's data in place, so\n\t// no slotchange ever fires), or a nested <schmancy-icon> element.\n\t// `textContent` flattens through all three.\n\t@state()\n\tprivate capturedIcon?: string\n\n\tprivate observer?: MutationObserver\n\n\tconnectedCallback(): void {\n\t\tsuper.connectedCallback()\n\t\tthis.captureIcon()\n\t\tthis.observer = new MutationObserver(() => this.captureIcon())\n\t\tthis.observer.observe(this, { childList: true, characterData: true, subtree: true })\n\t}\n\n\tdisconnectedCallback(): void {\n\t\tsuper.disconnectedCallback()\n\t\tthis.observer?.disconnect()\n\t}\n\n\tprivate captureIcon(): void {\n\t\tif (this.icon || this.text) return\n\t\tthis.capturedIcon = this.textContent?.trim() || undefined\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(): 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'flex-1 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\tconst iconSizeClass = this.size === 'xxs' ? 'text-xs' : this.size === 'xs' ? 'text-base' : this.size === 'sm' ? 'text-xl' : this.size === 'md' ? 'text-2xl' : this.size === 'lg' ? 'text-2xl' : 'text-4xl';\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\"></slot>\n\t\t\t\t\t\t\t<schmancy-icon class=${iconSizeClass}>${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\"></slot>\n\t\t\t\t\t\t<schmancy-icon class=${iconSizeClass}>${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/{card-CFsCgJKZ.js → card-BHTz1GwB.js}

@@ -1,5 +1,5 @@
-import { t as e, u as t } from "./SchmancyElement-C3CpdNsi.js";
-import "./mixins-DTzfFVyv.js";
+import { t as e, u as t } from "./SchmancyElement-BNnyBOwk.js";
+import "./mixins-DGBI7YPO.js";
 import { t as n } from "./cursor-glow-Ah7VXSj7.js";
 import { customElement as r, property as i, state as a } from "lit/decorators.js";
 import { LitElement as o, css as s, html as c } from "lit";
@@ -26,18 +26,18 @@ var d = class extends e {
 		super(...e), this.type = "elevated", this.interactive = !1, this.disabled = !1, this.dragged = !1, this.role = "article", this.ariaLabel = "", this.pressed = !1, this.ripples = [], this.nextRippleId = 0, this.handleClick = (e) => {
 			if (this.disabled || !this.interactive) return;
 			let t = this.getBoundingClientRect();
-			this._triggerAction(e.clientX - t.left, e.clientY - t.top);
+			this.triggerAction(e.clientX - t.left, e.clientY - t.top);
 		}, this.handleKeyDown = (e) => {
 			if (!this.disabled && this.interactive && (e.key === "Enter" || e.key === " ")) {
-				e.preventDefault(), this._setPressed(!0);
+				e.preventDefault(), this.setPressed(!0);
 				let t = this.getBoundingClientRect();
-				this._triggerAction(t.width / 2, t.height / 2);
+				this.triggerAction(t.width / 2, t.height / 2);
 			}
 		}, this.handleKeyUp = (e) => {
-			e.key !== "Enter" && e.key !== " " || this._setPressed(!1);
+			e.key !== "Enter" && e.key !== " " || this.setPressed(!1);
 		}, this.handleMouseDown = () => {
-			!this.disabled && this.interactive && this._setPressed(!0);
-		}, this.handleMouseUp = () => this._setPressed(!1), this.handleMouseLeave = () => this._setPressed(!1);
+			!this.disabled && this.interactive && this.setPressed(!0);
+		}, this.handleMouseUp = () => this.setPressed(!1), this.handleMouseLeave = () => this.setPressed(!1);
 	}
 	static {
 		this.styles = [s`
@@ -133,15 +133,15 @@ var d = class extends e {
 		};
 	}
 	connectedCallback() {
-		super.connectedCallback(), this._updateAriaAttributes();
+		super.connectedCallback(), this.updateAriaAttributes();
 	}
 	updated(e) {
-		super.updated(e), (e.has("interactive") || e.has("disabled")) && this._updateAriaAttributes();
+		super.updated(e), (e.has("interactive") || e.has("disabled")) && this.updateAriaAttributes();
 	}
-	_updateAriaAttributes() {
+	updateAriaAttributes() {
 		this.interactive && !this.disabled ? (this.setAttribute("tabindex", "0"), this.role && this.role !== "article" || (this.role = this.href ? "link" : "button")) : (this.removeAttribute("tabindex"), this.role !== "button" && this.role !== "link" || (this.role = "article"));
 	}
-	_addRipple(e, t) {
+	addRipple(e, t) {
 		let n = this.nextRippleId++;
 		this.ripples = [...this.ripples, {
 			x: e,
@@ -151,17 +151,17 @@ var d = class extends e {
 			this.ripples = this.ripples.filter((e) => e.id !== n);
 		}, 600);
 	}
-	_navigate() {
+	navigate() {
 		this.href && (this.target === "_blank" ? window.open(this.href, "_blank") : window.location.href = this.href);
 	}
-	_triggerAction(e, t) {
-		this._addRipple(e, t), this._navigate(), this.dispatchEvent(new CustomEvent("schmancy-click", {
+	triggerAction(e, t) {
+		this.addRipple(e, t), this.navigate(), this.dispatchEvent(new CustomEvent("schmancy-click", {
 			detail: { value: this.type },
 			bubbles: !0,
 			composed: !0
 		}));
 	}
-	_setPressed(e) {
+	setPressed(e) {
 		this.pressed = e, e ? this.setAttribute("pressed", "") : this.removeAttribute("pressed");
 	}
 	render() {