@mhmo91/schmancy 0.10.16 → 0.10.17

package/dist/input-chip-CtQ0pH5b.js.map

@@ -1 +1 @@
-{"version":3,"file":"input-chip-CtQ0pH5b.js","names":[],"sources":["../src/chips/input-chip.ts"],"sourcesContent":["import { SchmancyElement } from '@mixins/index'\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\nimport { BehaviorSubject, combineLatest } from 'rxjs'\nimport { map, takeUntil, tap } from 'rxjs/operators'\n\n/**\n * Input chip component - represents user-provided information that can be removed.\n *\n * IMPORTANT: Per Material Design 3 specification, input chips do NOT have selected state.\n * They represent discrete pieces of user input (like entered tags, selections from lists, etc.)\n * that can only be removed, not toggled on/off.\n *\n * Use cases:\n * - Displaying selected recipients in an email\n * - Showing applied filters that can be removed\n * - Tags or keywords entered by the user\n * - Selected items from a multi-select dropdown\n *\n * @fires click - Optional click event on chip body (value)\n * @fires remove - Dispatched when remove button is clicked (value)\n *\n * @example\n * ```html\n * <schmancy-input-chip value=\"john@example.com\" avatar=\"/avatars/john.jpg\">\n *   John Doe\n * </schmancy-input-chip>\n * ```\n */\n@customElement('schmancy-input-chip')\nexport class SchmancyInputChip extends SchmancyElement {\n\tstatic styles = [css`\n\t:host {\n\t\tdisplay: inline-block;\n\t\toutline: none;\n\t\tmin-width:fit-content\n\n\t}\n\n\t:host([disabled]) {\n\t\tpointer-events: none;\n\t}\n\n\tbutton {\n\t\tfont-family: inherit;\n\t}\n\n\t.avatar-img {\n\t\twidth: 20px;\n\t\theight: 20px;\n\t\tobject-fit: cover;\n\t}\n\n\t/* Material Symbols font for icons */\n\t.material-symbols-outlined {\n\t\tfont-family: 'Material Symbols Outlined';\n\t\tfont-weight: normal;\n\t\tfont-style: normal;\n\t\tfont-size: 18px;\n\t\tline-height: 1;\n\t\tletter-spacing: normal;\n\t\ttext-transform: none;\n\t\tdisplay: inline-block;\n\t\twhite-space: nowrap;\n\t\tword-wrap: normal;\n\t\tdirection: ltr;\n\t\t-webkit-font-smoothing: antialiased;\n\t\ttext-rendering: optimizeLegibility;\n\t\t-moz-osx-font-smoothing: grayscale;\n\t\tfont-feature-settings: 'liga';\n\t\tvertical-align: middle;\n\t}\n\n\t.ripple {\n\t\tposition: absolute;\n\t\tborder-radius: 50%;\n\t\ttransform: scale(0);\n\t\tanimation: ripple 600ms linear;\n\t\tbackground-color: rgba(0, 0, 0, 0.08);\n\t\tpointer-events: none;\n\t}\n\n\t@keyframes ripple {\n\t\tto {\n\t\t\ttransform: scale(4);\n\t\t\topacity: 0;\n\t\t}\n\t}\n\n\t/* State layer for M3 hover/focus/pressed states */\n\t.state-layer {\n\t\tposition: absolute;\n\t\tinset: 0;\n\t\tborder-radius: inherit;\n\t\tpointer-events: none;\n\t\tbackground-color: currentColor;\n\t\topacity: 0;\n\t\ttransition: opacity 200ms ease;\n\t}\n\n\t:host(:not([disabled])) .chip-container:hover .state-layer {\n\t\topacity: 0.08;\n\t}\n\n\t:host(:not([disabled])) .chip-container:focus-visible .state-layer {\n\t\topacity: 0.1;\n\t}\n\n\t:host(:not([disabled])) .chip-container:active .state-layer {\n\t\topacity: 0.1;\n\t}\n`];\n\t/** Value identifier for the chip */\n\t@property({ type: String, reflect: true })\n\tvalue: string = ''\n\n\t/** Optional icon name (Material Symbols) */\n\t@property({ type: String, reflect: true })\n\ticon: string = ''\n\n\t/** Optional avatar image URL */\n\t@property({ type: String, reflect: true })\n\tavatar: string = ''\n\n\t/** Whether to show remove button (default true for input chips) */\n\t@property({ type: Boolean, reflect: true })\n\tremovable: boolean = true\n\n\t/** Disable the chip */\n\t@property({ type: Boolean, reflect: true })\n\tdisabled: boolean = false\n\n\t/** Elevated style variant */\n\t@property({ type: Boolean, reflect: true })\n\televated: boolean = false\n\n\t// RxJS state streams\n\tprivate chipHover$ = new BehaviorSubject<boolean>(false)\n\tprivate removeHover$ = new BehaviorSubject<boolean>(false)\n\tprivate focused$ = new BehaviorSubject<boolean>(false)\n\tprivate pressed$ = new BehaviorSubject<boolean>(false)\n\n\t// UI state from combined streams\n\t@state()  uiState = {\n\t\tchipHover: false,\n\t\tremoveHover: false,\n\t\tfocused: false,\n\t\tpressed: false\n\t}\n\n\t// Ripple effects\n\t@state() private ripples: Array<{ x: number; y: number; id: number }> = []\n\tprivate nextRippleId = 0\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}\n\n\tprotected static shadowRootOptions = {\n\t\t...LitElement.shadowRootOptions,\n\t\tdelegatesFocus: true,\n\t}\n\n\tstatic formAssociated = true\n\tinternals: ElementInternals | undefined\n\tget form() {\n\t\treturn this.internals?.form\n\t}\n\n\tprotected updated(changed: Map<string, unknown>) {\n\t\tsuper.updated?.(changed)\n\t\tif (changed.has('value')) {\n\t\t\tthis.internals?.setFormValue(this.value || null)\n\t\t}\n\t}\n\n\tconnectedCallback() {\n\t\tsuper.connectedCallback()\n\n\t\t// Combine all UI state streams\n\t\tcombineLatest([\n\t\t\tthis.chipHover$,\n\t\t\tthis.removeHover$,\n\t\t\tthis.focused$,\n\t\t\tthis.pressed$\n\t\t]).pipe(\n\t\t\tmap(([chipHover, removeHover, focused, pressed]) => ({\n\t\t\t\tchipHover,\n\t\t\t\tremoveHover,\n\t\t\t\tfocused,\n\t\t\t\tpressed\n\t\t\t})),\n\t\t\ttap(state => {\n\t\t\t\tthis.uiState = state\n\t\t\t}),\n\t\t\ttakeUntil(this.disconnecting)\n\t\t).subscribe()\n\t}\n\n\tprivate handleChipClick = (e: MouseEvent) => {\n\t\tif (this.disabled) return\n\n\t\t// Add ripple effect\n\t\tconst chip = this.shadowRoot?.querySelector('.chip-container') as HTMLElement\n\t\tif (chip) {\n\t\t\tconst rect = chip.getBoundingClientRect()\n\t\t\tconst x = e.clientX - rect.left\n\t\t\tconst y = e.clientY - rect.top\n\t\t\tconst id = this.nextRippleId++\n\n\t\t\tthis.ripples = [...this.ripples, { x, y, id }]\n\n\t\t\t// Remove ripple after animation\n\t\t\tsetTimeout(() => {\n\t\t\t\tthis.ripples = this.ripples.filter(r => r.id !== id)\n\t\t\t}, 600)\n\t\t}\n\n\t\t// Dispatch optional click event (for custom handling if needed)\n\t\tthis.dispatchEvent(\n\t\t\tnew CustomEvent('click', {\n\t\t\t\tdetail: { value: this.value },\n\t\t\t\tbubbles: true,\n\t\t\t\tcomposed: true,\n\t\t\t})\n\t\t)\n\t}\n\n\tprivate handleRemove = (e: Event) => {\n\t\tif (this.disabled) return\n\n\t\te.stopPropagation()\n\n\t\t// Dispatch remove event\n\t\tthis.dispatchEvent(\n\t\t\tnew CustomEvent('remove', {\n\t\t\t\tdetail: { value: this.value },\n\t\t\t\tbubbles: true,\n\t\t\t\tcomposed: true,\n\t\t\t})\n\t\t)\n\t}\n\n\tprivate handleKeyDown = (e: KeyboardEvent) => {\n\t\tif (this.disabled) return\n\n\t\t// Delete or Backspace removes the chip\n\t\tif ((e.key === 'Delete' || e.key === 'Backspace') && this.removable) {\n\t\t\te.preventDefault()\n\t\t\tthis.handleRemove(e)\n\t\t}\n\t\t// Enter can optionally trigger click\n\t\telse if (e.key === 'Enter') {\n\t\t\te.preventDefault()\n\t\t\tconst clickEvent = new MouseEvent('click', {\n\t\t\t\tbubbles: true,\n\t\t\t\tcancelable: true,\n\t\t\t\tclientX: 0,\n\t\t\t\tclientY: 0\n\t\t\t})\n\t\t\tthis.handleChipClick(clickEvent)\n\t\t}\n\t}\n\n\tprivate handleFocus = () => {\n\t\tthis.focused$.next(true)\n\t}\n\n\tprivate handleBlur = () => {\n\t\tthis.focused$.next(false)\n\t}\n\n\tprotected render(): unknown {\n\t\tconst hasLeadingIcon = this.avatar || this.icon;\n\n\t\tconst chipClasses = {\n\t\t\t'chip-container': true,\n\t\t\t'inline-flex': true,\n\t\t\t'items-center': true,\n\t\t\t'gap-2': true,\n\t\t\t'h-8': true, // M3: 32px height\n\t\t\t'min-h-[32px]': true,\n\t\t\t'rounded-full': true,\n\t\t\t'cursor-default': true,\n\t\t\t'transition-all': true,\n\t\t\t'duration-200': true,\n\t\t\t'select-none': true,\n\t\t\t'text-sm': true, // M3: 14px Label Large\n\t\t\t'font-medium': true, // M3: 500 weight\n\t\t\t'relative': true,\n\t\t\t'overflow-hidden': true,\n\t\t\t'border': true,\n\n\t\t\t// M3 Padding: 8px with icon, 16px without (leading), 8px with trailing icon\n\t\t\t'pl-2': hasLeadingIcon, // 8px with avatar/icon\n\t\t\t'pl-4': !hasLeadingIcon, // 16px without\n\t\t\t'pr-2': this.removable, // 8px with remove button\n\t\t\t'pr-4': !this.removable, // 16px without\n\n\t\t\t// M3 Colors for input chips\n\t\t\t'bg-surface-containerLow': true,\n\t\t\t'text-surface-onVariant': true,\n\t\t\t'border-outline': true,\n\t\t\t'border-solid':true,\n\t\t\t// Input chips are flat (no elevation) per M3\n\n\t\t\t// Focus-visible state\n\t\t\t'focus-visible:outline': !this.disabled,\n\t\t\t'focus-visible:outline-2': !this.disabled,\n\t\t\t'focus-visible:outline-primary': !this.disabled,\n\t\t\t'focus-visible:outline-offset-2': !this.disabled,\n\n\t\t\t// Disabled state\n\t\t\t'opacity-38': this.disabled, // M3 disabled opacity\n\t\t\t'cursor-not-allowed': this.disabled\n\t\t}\n\n\t\tconst removeButtonClasses = {\n\t\t\t'size-[18px]': true, // M3: 18px icon size\n\t\t\t'flex': true,\n\t\t\t'items-center': true,\n\t\t\t'justify-center': true,\n\t\t\t'rounded-full': true,\n\t\t\t'transition-all': true,\n\t\t\t'duration-200': true,\n\t\t\t'cursor-pointer': !this.disabled,\n\t\t\t'-mr-1': true, // Adjust for visual balance\n\n\t\t\t// Hover state for remove button\n\t\t\t'hover:bg-surface-containerHighest': !this.disabled,\n\t\t\t'opacity-50': this.disabled\n\t\t}\n\n\t\treturn html`\n\t\t\t<div\n\t\t\t\tclass=${classMap(chipClasses)}\n\t\t\t\t@click=${this.handleChipClick}\n\t\t\t\t@keydown=${this.handleKeyDown}\n\t\t\t\t@mouseenter=${() => this.chipHover$.next(true)}\n\t\t\t\t@mouseleave=${() => this.chipHover$.next(false)}\n\t\t\t\t@mousedown=${() => this.pressed$.next(true)}\n\t\t\t\t@mouseup=${() => this.pressed$.next(false)}\n\t\t\t\t@focus=${this.handleFocus}\n\t\t\t\t@blur=${this.handleBlur}\n\t\t\t\trole=\"button\"\n\t\t\t\ttabindex=${this.disabled ? '-1' : '0'}\n\t\t\t\taria-disabled=${this.disabled}\n\t\t\t\taria-label=${this.value}\n\t\t\t>\n\t\t\t\t<!-- Avatar image (if provided) -->\n\t\t\t\t${this.avatar ? html`\n\t\t\t\t\t<img\n\t\t\t\t\t\tsrc=${this.avatar}\n\t\t\t\t\t\talt=\"\"\n\t\t\t\t\t\tclass=\"avatar-img rounded-full size-5\"\n\t\t\t\t\t/>\n\t\t\t\t` : ''}\n\n\t\t\t\t<!-- Icon (if provided and no avatar) -->\n\t\t\t\t${this.icon && !this.avatar ? html`\n\t\t\t\t\t<span class=\"material-symbols-outlined text-[18px] shrink-0\">\n\t\t\t\t\t\t${this.icon}\n\t\t\t\t\t</span>\n\t\t\t\t` : ''}\n\n\t\t\t\t<!-- Chip content -->\n\t\t\t\t<span class=\"text-sm font-medium leading-5\">\n\t\t\t\t\t<slot></slot>\n\t\t\t\t</span>\n\n\t\t\t\t<!-- Remove button (shown by default for input chips) -->\n\t\t\t\t${this.removable ? html`\n\t\t\t\t\t<button\n\t\t\t\t\t\tclass=${classMap(removeButtonClasses)}\n\t\t\t\t\t\t@click=${this.handleRemove}\n\t\t\t\t\t\t@mouseenter=${() => this.removeHover$.next(true)}\n\t\t\t\t\t\t@mouseleave=${() => this.removeHover$.next(false)}\n\t\t\t\t\t\taria-label=\"Remove\"\n\t\t\t\t\t\ttabindex=\"-1\"\n\t\t\t\t\t\t?disabled=${this.disabled}\n\t\t\t\t\t>\n\t\t\t\t\t\t<span class=\"material-symbols-outlined text-[18px]\">\n\t\t\t\t\t\t\tclose\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</button>\n\t\t\t\t` : ''}\n\n\t\t\t\t<!-- Ripple effects -->\n\t\t\t\t${this.ripples.map(ripple => html`\n\t\t\t\t\t<span\n\t\t\t\t\t\tclass=\"ripple\"\n\t\t\t\t\t\tstyle=\"left: ${ripple.x}px; top: ${ripple.y}px;\"\n\t\t\t\t\t></span>\n\t\t\t\t`)}\n\n\t\t\t\t<!-- State layer for M3 hover/focus/pressed states -->\n\t\t\t\t<div class=\"state-layer\"></div>\n\t\t\t</div>\n\t\t`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-input-chip': SchmancyInputChip\n\t}\n}\n\nexport type InputChipClickEvent = { value: string }\nexport type InputChipRemoveEvent = { value: string }"],"mappings":"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"}
+{"version":3,"file":"input-chip-CtQ0pH5b.js","names":[],"sources":["../src/chips/input-chip.ts"],"sourcesContent":["import { SchmancyElement } from '@mixins/index'\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\nimport { BehaviorSubject, combineLatest } from 'rxjs'\nimport { map, takeUntil, tap } from 'rxjs/operators'\n\n/**\n * Input chip component - represents user-provided information that can be removed.\n *\n * IMPORTANT: Per Material Design 3 specification, input chips do NOT have selected state.\n * They represent discrete pieces of user input (like entered tags, selections from lists, etc.)\n * that can only be removed, not toggled on/off.\n *\n * Use cases:\n * - Displaying selected recipients in an email\n * - Showing applied filters that can be removed\n * - Tags or keywords entered by the user\n * - Selected items from a multi-select dropdown\n *\n * @fires click - Optional click event on chip body (value)\n * @fires remove - Dispatched when remove button is clicked (value)\n *\n * @example\n * ```html\n * <schmancy-input-chip value=\"john@example.com\" avatar=\"/avatars/john.jpg\">\n *   John Doe\n * </schmancy-input-chip>\n * ```\n */\n@customElement('schmancy-input-chip')\nexport class SchmancyInputChip extends SchmancyElement {\n\tstatic styles = [css`\n\t:host {\n\t\tdisplay: inline-block;\n\t\toutline: none;\n\t\tmin-width:fit-content\n\n\t}\n\n\t:host([disabled]) {\n\t\tpointer-events: none;\n\t}\n\n\tbutton {\n\t\tfont-family: inherit;\n\t}\n\n\t.avatar-img {\n\t\twidth: 20px;\n\t\theight: 20px;\n\t\tobject-fit: cover;\n\t}\n\n\t/* Material Symbols font for icons */\n\t.material-symbols-outlined {\n\t\tfont-family: 'Material Symbols Outlined';\n\t\tfont-weight: normal;\n\t\tfont-style: normal;\n\t\tfont-size: 18px;\n\t\tline-height: 1;\n\t\tletter-spacing: normal;\n\t\ttext-transform: none;\n\t\tdisplay: inline-block;\n\t\twhite-space: nowrap;\n\t\tword-wrap: normal;\n\t\tdirection: ltr;\n\t\t-webkit-font-smoothing: antialiased;\n\t\ttext-rendering: optimizeLegibility;\n\t\t-moz-osx-font-smoothing: grayscale;\n\t\tfont-feature-settings: 'liga';\n\t\tvertical-align: middle;\n\t}\n\n\t.ripple {\n\t\tposition: absolute;\n\t\tborder-radius: 50%;\n\t\ttransform: scale(0);\n\t\tanimation: ripple 600ms linear;\n\t\tbackground-color: rgba(0, 0, 0, 0.08);\n\t\tpointer-events: none;\n\t}\n\n\t@keyframes ripple {\n\t\tto {\n\t\t\ttransform: scale(4);\n\t\t\topacity: 0;\n\t\t}\n\t}\n\n\t/* State layer for M3 hover/focus/pressed states */\n\t.state-layer {\n\t\tposition: absolute;\n\t\tinset: 0;\n\t\tborder-radius: inherit;\n\t\tpointer-events: none;\n\t\tbackground-color: currentColor;\n\t\topacity: 0;\n\t\ttransition: opacity 200ms ease;\n\t}\n\n\t:host(:not([disabled])) .chip-container:hover .state-layer {\n\t\topacity: 0.08;\n\t}\n\n\t:host(:not([disabled])) .chip-container:focus-visible .state-layer {\n\t\topacity: 0.1;\n\t}\n\n\t:host(:not([disabled])) .chip-container:active .state-layer {\n\t\topacity: 0.1;\n\t}\n`];\n\t/** Value identifier for the chip */\n\t@property({ type: String, reflect: true })\n\tvalue: string = ''\n\n\t/** Optional icon name (Material Symbols) */\n\t@property({ type: String, reflect: true })\n\ticon: string = ''\n\n\t/** Optional avatar image URL */\n\t@property({ type: String, reflect: true })\n\tavatar: string = ''\n\n\t/** Whether to show remove button (default true for input chips) */\n\t@property({ type: Boolean, reflect: true })\n\tremovable: boolean = true\n\n\t/** Disable the chip */\n\t@property({ type: Boolean, reflect: true })\n\tdisabled: boolean = false\n\n\t/** Elevated style variant */\n\t@property({ type: Boolean, reflect: true })\n\televated: boolean = false\n\n\t// RxJS state streams\n\tprivate chipHover$ = new BehaviorSubject<boolean>(false)\n\tprivate removeHover$ = new BehaviorSubject<boolean>(false)\n\tprivate focused$ = new BehaviorSubject<boolean>(false)\n\tprivate pressed$ = new BehaviorSubject<boolean>(false)\n\n\t// UI state from combined streams\n\t@state()  uiState = {\n\t\tchipHover: false,\n\t\tremoveHover: false,\n\t\tfocused: false,\n\t\tpressed: false\n\t}\n\n\t// Ripple effects\n\t@state() private ripples: Array<{ x: number; y: number; id: number }> = []\n\tprivate nextRippleId = 0\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}\n\n\tprotected static shadowRootOptions = {\n\t\t...LitElement.shadowRootOptions,\n\t\tdelegatesFocus: true,\n\t}\n\n\tstatic formAssociated = true\n\tinternals: ElementInternals | undefined\n\tget form() {\n\t\treturn this.internals?.form\n\t}\n\n\tprotected updated(changed: Map<string, unknown>) {\n\t\tsuper.updated?.(changed)\n\t\tif (changed.has('value')) {\n\t\t\tthis.internals?.setFormValue(this.value || null)\n\t\t}\n\t}\n\n\tconnectedCallback() {\n\t\tsuper.connectedCallback()\n\n\t\t// Combine all UI state streams\n\t\tcombineLatest([\n\t\t\tthis.chipHover$,\n\t\t\tthis.removeHover$,\n\t\t\tthis.focused$,\n\t\t\tthis.pressed$\n\t\t]).pipe(\n\t\t\tmap(([chipHover, removeHover, focused, pressed]) => ({\n\t\t\t\tchipHover,\n\t\t\t\tremoveHover,\n\t\t\t\tfocused,\n\t\t\t\tpressed\n\t\t\t})),\n\t\t\ttap(state => {\n\t\t\t\tthis.uiState = state\n\t\t\t}),\n\t\t\ttakeUntil(this.disconnecting)\n\t\t).subscribe()\n\t}\n\n\tprivate handleChipClick = (e: MouseEvent) => {\n\t\tif (this.disabled) return\n\n\t\t// Add ripple effect\n\t\tconst chip = this.shadowRoot?.querySelector('.chip-container') as HTMLElement\n\t\tif (chip) {\n\t\t\tconst rect = chip.getBoundingClientRect()\n\t\t\tconst x = e.clientX - rect.left\n\t\t\tconst y = e.clientY - rect.top\n\t\t\tconst id = this.nextRippleId++\n\n\t\t\tthis.ripples = [...this.ripples, { x, y, id }]\n\n\t\t\t// Remove ripple after animation\n\t\t\tsetTimeout(() => {\n\t\t\t\tthis.ripples = this.ripples.filter(r => r.id !== id)\n\t\t\t}, 600)\n\t\t}\n\n\t\t// Dispatch optional click event (for custom handling if needed)\n\t\tthis.dispatchEvent(\n\t\t\tnew CustomEvent('click', {\n\t\t\t\tdetail: { value: this.value },\n\t\t\t\tbubbles: true,\n\t\t\t\tcomposed: true,\n\t\t\t})\n\t\t)\n\t}\n\n\tprivate handleRemove = (e: Event) => {\n\t\tif (this.disabled) return\n\n\t\te.stopPropagation()\n\n\t\t// Dispatch remove event\n\t\tthis.dispatchEvent(\n\t\t\tnew CustomEvent('remove', {\n\t\t\t\tdetail: { value: this.value },\n\t\t\t\tbubbles: true,\n\t\t\t\tcomposed: true,\n\t\t\t})\n\t\t)\n\t}\n\n\tprivate handleKeyDown = (e: KeyboardEvent) => {\n\t\tif (this.disabled) return\n\n\t\t// Delete or Backspace removes the chip\n\t\tif ((e.key === 'Delete' || e.key === 'Backspace') && this.removable) {\n\t\t\te.preventDefault()\n\t\t\tthis.handleRemove(e)\n\t\t}\n\t\t// Enter can optionally trigger click\n\t\telse if (e.key === 'Enter') {\n\t\t\te.preventDefault()\n\t\t\tconst clickEvent = new MouseEvent('click', {\n\t\t\t\tbubbles: true,\n\t\t\t\tcancelable: true,\n\t\t\t\tclientX: 0,\n\t\t\t\tclientY: 0\n\t\t\t})\n\t\t\tthis.handleChipClick(clickEvent)\n\t\t}\n\t}\n\n\tprivate handleFocus = () => {\n\t\tthis.focused$.next(true)\n\t}\n\n\tprivate handleBlur = () => {\n\t\tthis.focused$.next(false)\n\t}\n\n\tprotected render(): unknown {\n\t\tconst hasLeadingIcon = this.avatar || this.icon;\n\n\t\tconst chipClasses = {\n\t\t\t'chip-container': true,\n\t\t\t'inline-flex': true,\n\t\t\t'items-center': true,\n\t\t\t'gap-2': true,\n\t\t\t'h-8': true, // M3: 32px height\n\t\t\t'min-h-[32px]': true,\n\t\t\t'rounded-full': true,\n\t\t\t'cursor-default': true,\n\t\t\t'transition-all': true,\n\t\t\t'duration-200': true,\n\t\t\t'select-none': true,\n\t\t\t'text-sm': true, // M3: 14px Label Large\n\t\t\t'font-medium': true, // M3: 500 weight\n\t\t\t'relative': true,\n\t\t\t'overflow-hidden': true,\n\t\t\t'border': true,\n\n\t\t\t// M3 Padding: 8px with icon, 16px without (leading), 8px with trailing icon\n\t\t\t'pl-2': hasLeadingIcon, // 8px with avatar/icon\n\t\t\t'pl-4': !hasLeadingIcon, // 16px without\n\t\t\t'pr-2': this.removable, // 8px with remove button\n\t\t\t'pr-4': !this.removable, // 16px without\n\n\t\t\t// M3 Colors for input chips\n\t\t\t'bg-surface-containerLow': true,\n\t\t\t'text-surface-onVariant': true,\n\t\t\t'border-outline': true,\n\t\t\t'border-solid':true,\n\t\t\t// Input chips are flat (no elevation) per M3\n\n\t\t\t// Focus-visible state\n\t\t\t'focus-visible:outline': !this.disabled,\n\t\t\t'focus-visible:outline-2': !this.disabled,\n\t\t\t'focus-visible:outline-primary': !this.disabled,\n\t\t\t'focus-visible:outline-offset-2': !this.disabled,\n\n\t\t\t// Disabled state\n\t\t\t'opacity-38': this.disabled, // M3 disabled opacity\n\t\t\t'cursor-not-allowed': this.disabled\n\t\t}\n\n\t\tconst removeButtonClasses = {\n\t\t\t'size-[18px]': true, // M3: 18px icon size\n\t\t\t'flex': true,\n\t\t\t'items-center': true,\n\t\t\t'justify-center': true,\n\t\t\t'rounded-full': true,\n\t\t\t'transition-all': true,\n\t\t\t'duration-200': true,\n\t\t\t'cursor-pointer': !this.disabled,\n\t\t\t'-mr-1': true, // Adjust for visual balance\n\n\t\t\t// Hover state for remove button\n\t\t\t'hover:bg-surface-containerHighest': !this.disabled,\n\t\t\t'opacity-50': this.disabled\n\t\t}\n\n\t\treturn html`\n\t\t\t<div\n\t\t\t\tclass=${classMap(chipClasses)}\n\t\t\t\t@click=${this.handleChipClick}\n\t\t\t\t@keydown=${this.handleKeyDown}\n\t\t\t\t@mouseenter=${() => this.chipHover$.next(true)}\n\t\t\t\t@mouseleave=${() => this.chipHover$.next(false)}\n\t\t\t\t@mousedown=${() => this.pressed$.next(true)}\n\t\t\t\t@mouseup=${() => this.pressed$.next(false)}\n\t\t\t\t@focus=${this.handleFocus}\n\t\t\t\t@blur=${this.handleBlur}\n\t\t\t\trole=\"button\"\n\t\t\t\ttabindex=${this.disabled ? '-1' : '0'}\n\t\t\t\taria-disabled=${this.disabled}\n\t\t\t\taria-label=${this.value}\n\t\t\t>\n\t\t\t\t<!-- Avatar image (if provided) -->\n\t\t\t\t${this.avatar ? html`\n\t\t\t\t\t<img\n\t\t\t\t\t\tsrc=${this.avatar}\n\t\t\t\t\t\talt=\"\"\n\t\t\t\t\t\tclass=\"avatar-img rounded-full size-5\"\n\t\t\t\t\t/>\n\t\t\t\t` : ''}\n\n\t\t\t\t<!-- Icon (if provided and no avatar) -->\n\t\t\t\t${this.icon && !this.avatar ? html`\n\t\t\t\t\t<span class=\"material-symbols-outlined text-[18px] shrink-0\">\n\t\t\t\t\t\t${this.icon}\n\t\t\t\t\t</span>\n\t\t\t\t` : ''}\n\n\t\t\t\t<!-- Chip content -->\n\t\t\t\t<span class=\"text-sm font-medium leading-5\">\n\t\t\t\t\t<slot></slot>\n\t\t\t\t</span>\n\n\t\t\t\t<!-- Remove button (shown by default for input chips) -->\n\t\t\t\t${this.removable ? html`\n\t\t\t\t\t<button\n\t\t\t\t\t\tclass=${classMap(removeButtonClasses)}\n\t\t\t\t\t\t@click=${this.handleRemove}\n\t\t\t\t\t\t@mouseenter=${() => this.removeHover$.next(true)}\n\t\t\t\t\t\t@mouseleave=${() => this.removeHover$.next(false)}\n\t\t\t\t\t\taria-label=\"Remove\"\n\t\t\t\t\t\ttabindex=\"-1\"\n\t\t\t\t\t\t?disabled=${this.disabled}\n\t\t\t\t\t>\n\t\t\t\t\t\t<span class=\"material-symbols-outlined text-[18px]\">\n\t\t\t\t\t\t\tclose\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</button>\n\t\t\t\t` : ''}\n\n\t\t\t\t<!-- Ripple effects -->\n\t\t\t\t${this.ripples.map(ripple => html`\n\t\t\t\t\t<span\n\t\t\t\t\t\tclass=\"ripple\"\n\t\t\t\t\t\tstyle=\"left: ${ripple.x}px; top: ${ripple.y}px;\"\n\t\t\t\t\t></span>\n\t\t\t\t`)}\n\n\t\t\t\t<!-- State layer for M3 hover/focus/pressed states -->\n\t\t\t\t<div class=\"state-layer\"></div>\n\t\t\t</div>\n\t\t`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-input-chip': SchmancyInputChip\n\t}\n}\n\nexport type InputChipClickEvent = { value: string }\nexport type InputChipRemoveEvent = { value: string }"],"mappings":"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"}

package/dist/input-chip-DZktYohr.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"input-chip-DZktYohr.cjs","names":[],"sources":["../src/chips/input-chip.ts"],"sourcesContent":["import { SchmancyElement } from '@mixins/index'\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\nimport { BehaviorSubject, combineLatest } from 'rxjs'\nimport { map, takeUntil, tap } from 'rxjs/operators'\n\n/**\n * Input chip component - represents user-provided information that can be removed.\n *\n * IMPORTANT: Per Material Design 3 specification, input chips do NOT have selected state.\n * They represent discrete pieces of user input (like entered tags, selections from lists, etc.)\n * that can only be removed, not toggled on/off.\n *\n * Use cases:\n * - Displaying selected recipients in an email\n * - Showing applied filters that can be removed\n * - Tags or keywords entered by the user\n * - Selected items from a multi-select dropdown\n *\n * @fires click - Optional click event on chip body (value)\n * @fires remove - Dispatched when remove button is clicked (value)\n *\n * @example\n * ```html\n * <schmancy-input-chip value=\"john@example.com\" avatar=\"/avatars/john.jpg\">\n *   John Doe\n * </schmancy-input-chip>\n * ```\n */\n@customElement('schmancy-input-chip')\nexport class SchmancyInputChip extends SchmancyElement {\n\tstatic styles = [css`\n\t:host {\n\t\tdisplay: inline-block;\n\t\toutline: none;\n\t\tmin-width:fit-content\n\n\t}\n\n\t:host([disabled]) {\n\t\tpointer-events: none;\n\t}\n\n\tbutton {\n\t\tfont-family: inherit;\n\t}\n\n\t.avatar-img {\n\t\twidth: 20px;\n\t\theight: 20px;\n\t\tobject-fit: cover;\n\t}\n\n\t/* Material Symbols font for icons */\n\t.material-symbols-outlined {\n\t\tfont-family: 'Material Symbols Outlined';\n\t\tfont-weight: normal;\n\t\tfont-style: normal;\n\t\tfont-size: 18px;\n\t\tline-height: 1;\n\t\tletter-spacing: normal;\n\t\ttext-transform: none;\n\t\tdisplay: inline-block;\n\t\twhite-space: nowrap;\n\t\tword-wrap: normal;\n\t\tdirection: ltr;\n\t\t-webkit-font-smoothing: antialiased;\n\t\ttext-rendering: optimizeLegibility;\n\t\t-moz-osx-font-smoothing: grayscale;\n\t\tfont-feature-settings: 'liga';\n\t\tvertical-align: middle;\n\t}\n\n\t.ripple {\n\t\tposition: absolute;\n\t\tborder-radius: 50%;\n\t\ttransform: scale(0);\n\t\tanimation: ripple 600ms linear;\n\t\tbackground-color: rgba(0, 0, 0, 0.08);\n\t\tpointer-events: none;\n\t}\n\n\t@keyframes ripple {\n\t\tto {\n\t\t\ttransform: scale(4);\n\t\t\topacity: 0;\n\t\t}\n\t}\n\n\t/* State layer for M3 hover/focus/pressed states */\n\t.state-layer {\n\t\tposition: absolute;\n\t\tinset: 0;\n\t\tborder-radius: inherit;\n\t\tpointer-events: none;\n\t\tbackground-color: currentColor;\n\t\topacity: 0;\n\t\ttransition: opacity 200ms ease;\n\t}\n\n\t:host(:not([disabled])) .chip-container:hover .state-layer {\n\t\topacity: 0.08;\n\t}\n\n\t:host(:not([disabled])) .chip-container:focus-visible .state-layer {\n\t\topacity: 0.1;\n\t}\n\n\t:host(:not([disabled])) .chip-container:active .state-layer {\n\t\topacity: 0.1;\n\t}\n`];\n\t/** Value identifier for the chip */\n\t@property({ type: String, reflect: true })\n\tvalue: string = ''\n\n\t/** Optional icon name (Material Symbols) */\n\t@property({ type: String, reflect: true })\n\ticon: string = ''\n\n\t/** Optional avatar image URL */\n\t@property({ type: String, reflect: true })\n\tavatar: string = ''\n\n\t/** Whether to show remove button (default true for input chips) */\n\t@property({ type: Boolean, reflect: true })\n\tremovable: boolean = true\n\n\t/** Disable the chip */\n\t@property({ type: Boolean, reflect: true })\n\tdisabled: boolean = false\n\n\t/** Elevated style variant */\n\t@property({ type: Boolean, reflect: true })\n\televated: boolean = false\n\n\t// RxJS state streams\n\tprivate chipHover$ = new BehaviorSubject<boolean>(false)\n\tprivate removeHover$ = new BehaviorSubject<boolean>(false)\n\tprivate focused$ = new BehaviorSubject<boolean>(false)\n\tprivate pressed$ = new BehaviorSubject<boolean>(false)\n\n\t// UI state from combined streams\n\t@state()  uiState = {\n\t\tchipHover: false,\n\t\tremoveHover: false,\n\t\tfocused: false,\n\t\tpressed: false\n\t}\n\n\t// Ripple effects\n\t@state() private ripples: Array<{ x: number; y: number; id: number }> = []\n\tprivate nextRippleId = 0\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}\n\n\tprotected static shadowRootOptions = {\n\t\t...LitElement.shadowRootOptions,\n\t\tdelegatesFocus: true,\n\t}\n\n\tstatic formAssociated = true\n\tinternals: ElementInternals | undefined\n\tget form() {\n\t\treturn this.internals?.form\n\t}\n\n\tprotected updated(changed: Map<string, unknown>) {\n\t\tsuper.updated?.(changed)\n\t\tif (changed.has('value')) {\n\t\t\tthis.internals?.setFormValue(this.value || null)\n\t\t}\n\t}\n\n\tconnectedCallback() {\n\t\tsuper.connectedCallback()\n\n\t\t// Combine all UI state streams\n\t\tcombineLatest([\n\t\t\tthis.chipHover$,\n\t\t\tthis.removeHover$,\n\t\t\tthis.focused$,\n\t\t\tthis.pressed$\n\t\t]).pipe(\n\t\t\tmap(([chipHover, removeHover, focused, pressed]) => ({\n\t\t\t\tchipHover,\n\t\t\t\tremoveHover,\n\t\t\t\tfocused,\n\t\t\t\tpressed\n\t\t\t})),\n\t\t\ttap(state => {\n\t\t\t\tthis.uiState = state\n\t\t\t}),\n\t\t\ttakeUntil(this.disconnecting)\n\t\t).subscribe()\n\t}\n\n\tprivate handleChipClick = (e: MouseEvent) => {\n\t\tif (this.disabled) return\n\n\t\t// Add ripple effect\n\t\tconst chip = this.shadowRoot?.querySelector('.chip-container') as HTMLElement\n\t\tif (chip) {\n\t\t\tconst rect = chip.getBoundingClientRect()\n\t\t\tconst x = e.clientX - rect.left\n\t\t\tconst y = e.clientY - rect.top\n\t\t\tconst id = this.nextRippleId++\n\n\t\t\tthis.ripples = [...this.ripples, { x, y, id }]\n\n\t\t\t// Remove ripple after animation\n\t\t\tsetTimeout(() => {\n\t\t\t\tthis.ripples = this.ripples.filter(r => r.id !== id)\n\t\t\t}, 600)\n\t\t}\n\n\t\t// Dispatch optional click event (for custom handling if needed)\n\t\tthis.dispatchEvent(\n\t\t\tnew CustomEvent('click', {\n\t\t\t\tdetail: { value: this.value },\n\t\t\t\tbubbles: true,\n\t\t\t\tcomposed: true,\n\t\t\t})\n\t\t)\n\t}\n\n\tprivate handleRemove = (e: Event) => {\n\t\tif (this.disabled) return\n\n\t\te.stopPropagation()\n\n\t\t// Dispatch remove event\n\t\tthis.dispatchEvent(\n\t\t\tnew CustomEvent('remove', {\n\t\t\t\tdetail: { value: this.value },\n\t\t\t\tbubbles: true,\n\t\t\t\tcomposed: true,\n\t\t\t})\n\t\t)\n\t}\n\n\tprivate handleKeyDown = (e: KeyboardEvent) => {\n\t\tif (this.disabled) return\n\n\t\t// Delete or Backspace removes the chip\n\t\tif ((e.key === 'Delete' || e.key === 'Backspace') && this.removable) {\n\t\t\te.preventDefault()\n\t\t\tthis.handleRemove(e)\n\t\t}\n\t\t// Enter can optionally trigger click\n\t\telse if (e.key === 'Enter') {\n\t\t\te.preventDefault()\n\t\t\tconst clickEvent = new MouseEvent('click', {\n\t\t\t\tbubbles: true,\n\t\t\t\tcancelable: true,\n\t\t\t\tclientX: 0,\n\t\t\t\tclientY: 0\n\t\t\t})\n\t\t\tthis.handleChipClick(clickEvent)\n\t\t}\n\t}\n\n\tprivate handleFocus = () => {\n\t\tthis.focused$.next(true)\n\t}\n\n\tprivate handleBlur = () => {\n\t\tthis.focused$.next(false)\n\t}\n\n\tprotected render(): unknown {\n\t\tconst hasLeadingIcon = this.avatar || this.icon;\n\n\t\tconst chipClasses = {\n\t\t\t'chip-container': true,\n\t\t\t'inline-flex': true,\n\t\t\t'items-center': true,\n\t\t\t'gap-2': true,\n\t\t\t'h-8': true, // M3: 32px height\n\t\t\t'min-h-[32px]': true,\n\t\t\t'rounded-full': true,\n\t\t\t'cursor-default': true,\n\t\t\t'transition-all': true,\n\t\t\t'duration-200': true,\n\t\t\t'select-none': true,\n\t\t\t'text-sm': true, // M3: 14px Label Large\n\t\t\t'font-medium': true, // M3: 500 weight\n\t\t\t'relative': true,\n\t\t\t'overflow-hidden': true,\n\t\t\t'border': true,\n\n\t\t\t// M3 Padding: 8px with icon, 16px without (leading), 8px with trailing icon\n\t\t\t'pl-2': hasLeadingIcon, // 8px with avatar/icon\n\t\t\t'pl-4': !hasLeadingIcon, // 16px without\n\t\t\t'pr-2': this.removable, // 8px with remove button\n\t\t\t'pr-4': !this.removable, // 16px without\n\n\t\t\t// M3 Colors for input chips\n\t\t\t'bg-surface-containerLow': true,\n\t\t\t'text-surface-onVariant': true,\n\t\t\t'border-outline': true,\n\t\t\t'border-solid':true,\n\t\t\t// Input chips are flat (no elevation) per M3\n\n\t\t\t// Focus-visible state\n\t\t\t'focus-visible:outline': !this.disabled,\n\t\t\t'focus-visible:outline-2': !this.disabled,\n\t\t\t'focus-visible:outline-primary': !this.disabled,\n\t\t\t'focus-visible:outline-offset-2': !this.disabled,\n\n\t\t\t// Disabled state\n\t\t\t'opacity-38': this.disabled, // M3 disabled opacity\n\t\t\t'cursor-not-allowed': this.disabled\n\t\t}\n\n\t\tconst removeButtonClasses = {\n\t\t\t'size-[18px]': true, // M3: 18px icon size\n\t\t\t'flex': true,\n\t\t\t'items-center': true,\n\t\t\t'justify-center': true,\n\t\t\t'rounded-full': true,\n\t\t\t'transition-all': true,\n\t\t\t'duration-200': true,\n\t\t\t'cursor-pointer': !this.disabled,\n\t\t\t'-mr-1': true, // Adjust for visual balance\n\n\t\t\t// Hover state for remove button\n\t\t\t'hover:bg-surface-containerHighest': !this.disabled,\n\t\t\t'opacity-50': this.disabled\n\t\t}\n\n\t\treturn html`\n\t\t\t<div\n\t\t\t\tclass=${classMap(chipClasses)}\n\t\t\t\t@click=${this.handleChipClick}\n\t\t\t\t@keydown=${this.handleKeyDown}\n\t\t\t\t@mouseenter=${() => this.chipHover$.next(true)}\n\t\t\t\t@mouseleave=${() => this.chipHover$.next(false)}\n\t\t\t\t@mousedown=${() => this.pressed$.next(true)}\n\t\t\t\t@mouseup=${() => this.pressed$.next(false)}\n\t\t\t\t@focus=${this.handleFocus}\n\t\t\t\t@blur=${this.handleBlur}\n\t\t\t\trole=\"button\"\n\t\t\t\ttabindex=${this.disabled ? '-1' : '0'}\n\t\t\t\taria-disabled=${this.disabled}\n\t\t\t\taria-label=${this.value}\n\t\t\t>\n\t\t\t\t<!-- Avatar image (if provided) -->\n\t\t\t\t${this.avatar ? html`\n\t\t\t\t\t<img\n\t\t\t\t\t\tsrc=${this.avatar}\n\t\t\t\t\t\talt=\"\"\n\t\t\t\t\t\tclass=\"avatar-img rounded-full size-5\"\n\t\t\t\t\t/>\n\t\t\t\t` : ''}\n\n\t\t\t\t<!-- Icon (if provided and no avatar) -->\n\t\t\t\t${this.icon && !this.avatar ? html`\n\t\t\t\t\t<span class=\"material-symbols-outlined text-[18px] shrink-0\">\n\t\t\t\t\t\t${this.icon}\n\t\t\t\t\t</span>\n\t\t\t\t` : ''}\n\n\t\t\t\t<!-- Chip content -->\n\t\t\t\t<span class=\"text-sm font-medium leading-5\">\n\t\t\t\t\t<slot></slot>\n\t\t\t\t</span>\n\n\t\t\t\t<!-- Remove button (shown by default for input chips) -->\n\t\t\t\t${this.removable ? html`\n\t\t\t\t\t<button\n\t\t\t\t\t\tclass=${classMap(removeButtonClasses)}\n\t\t\t\t\t\t@click=${this.handleRemove}\n\t\t\t\t\t\t@mouseenter=${() => this.removeHover$.next(true)}\n\t\t\t\t\t\t@mouseleave=${() => this.removeHover$.next(false)}\n\t\t\t\t\t\taria-label=\"Remove\"\n\t\t\t\t\t\ttabindex=\"-1\"\n\t\t\t\t\t\t?disabled=${this.disabled}\n\t\t\t\t\t>\n\t\t\t\t\t\t<span class=\"material-symbols-outlined text-[18px]\">\n\t\t\t\t\t\t\tclose\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</button>\n\t\t\t\t` : ''}\n\n\t\t\t\t<!-- Ripple effects -->\n\t\t\t\t${this.ripples.map(ripple => html`\n\t\t\t\t\t<span\n\t\t\t\t\t\tclass=\"ripple\"\n\t\t\t\t\t\tstyle=\"left: ${ripple.x}px; top: ${ripple.y}px;\"\n\t\t\t\t\t></span>\n\t\t\t\t`)}\n\n\t\t\t\t<!-- State layer for M3 hover/focus/pressed states -->\n\t\t\t\t<div class=\"state-layer\"></div>\n\t\t\t</div>\n\t\t`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-input-chip': SchmancyInputChip\n\t}\n}\n\nexport type InputChipClickEvent = { value: string }\nexport type InputChipRemoveEvent = { value: string }"],"mappings":"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"}
+{"version":3,"file":"input-chip-DZktYohr.cjs","names":[],"sources":["../src/chips/input-chip.ts"],"sourcesContent":["import { SchmancyElement } from '@mixins/index'\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\nimport { BehaviorSubject, combineLatest } from 'rxjs'\nimport { map, takeUntil, tap } from 'rxjs/operators'\n\n/**\n * Input chip component - represents user-provided information that can be removed.\n *\n * IMPORTANT: Per Material Design 3 specification, input chips do NOT have selected state.\n * They represent discrete pieces of user input (like entered tags, selections from lists, etc.)\n * that can only be removed, not toggled on/off.\n *\n * Use cases:\n * - Displaying selected recipients in an email\n * - Showing applied filters that can be removed\n * - Tags or keywords entered by the user\n * - Selected items from a multi-select dropdown\n *\n * @fires click - Optional click event on chip body (value)\n * @fires remove - Dispatched when remove button is clicked (value)\n *\n * @example\n * ```html\n * <schmancy-input-chip value=\"john@example.com\" avatar=\"/avatars/john.jpg\">\n *   John Doe\n * </schmancy-input-chip>\n * ```\n */\n@customElement('schmancy-input-chip')\nexport class SchmancyInputChip extends SchmancyElement {\n\tstatic styles = [css`\n\t:host {\n\t\tdisplay: inline-block;\n\t\toutline: none;\n\t\tmin-width:fit-content\n\n\t}\n\n\t:host([disabled]) {\n\t\tpointer-events: none;\n\t}\n\n\tbutton {\n\t\tfont-family: inherit;\n\t}\n\n\t.avatar-img {\n\t\twidth: 20px;\n\t\theight: 20px;\n\t\tobject-fit: cover;\n\t}\n\n\t/* Material Symbols font for icons */\n\t.material-symbols-outlined {\n\t\tfont-family: 'Material Symbols Outlined';\n\t\tfont-weight: normal;\n\t\tfont-style: normal;\n\t\tfont-size: 18px;\n\t\tline-height: 1;\n\t\tletter-spacing: normal;\n\t\ttext-transform: none;\n\t\tdisplay: inline-block;\n\t\twhite-space: nowrap;\n\t\tword-wrap: normal;\n\t\tdirection: ltr;\n\t\t-webkit-font-smoothing: antialiased;\n\t\ttext-rendering: optimizeLegibility;\n\t\t-moz-osx-font-smoothing: grayscale;\n\t\tfont-feature-settings: 'liga';\n\t\tvertical-align: middle;\n\t}\n\n\t.ripple {\n\t\tposition: absolute;\n\t\tborder-radius: 50%;\n\t\ttransform: scale(0);\n\t\tanimation: ripple 600ms linear;\n\t\tbackground-color: rgba(0, 0, 0, 0.08);\n\t\tpointer-events: none;\n\t}\n\n\t@keyframes ripple {\n\t\tto {\n\t\t\ttransform: scale(4);\n\t\t\topacity: 0;\n\t\t}\n\t}\n\n\t/* State layer for M3 hover/focus/pressed states */\n\t.state-layer {\n\t\tposition: absolute;\n\t\tinset: 0;\n\t\tborder-radius: inherit;\n\t\tpointer-events: none;\n\t\tbackground-color: currentColor;\n\t\topacity: 0;\n\t\ttransition: opacity 200ms ease;\n\t}\n\n\t:host(:not([disabled])) .chip-container:hover .state-layer {\n\t\topacity: 0.08;\n\t}\n\n\t:host(:not([disabled])) .chip-container:focus-visible .state-layer {\n\t\topacity: 0.1;\n\t}\n\n\t:host(:not([disabled])) .chip-container:active .state-layer {\n\t\topacity: 0.1;\n\t}\n`];\n\t/** Value identifier for the chip */\n\t@property({ type: String, reflect: true })\n\tvalue: string = ''\n\n\t/** Optional icon name (Material Symbols) */\n\t@property({ type: String, reflect: true })\n\ticon: string = ''\n\n\t/** Optional avatar image URL */\n\t@property({ type: String, reflect: true })\n\tavatar: string = ''\n\n\t/** Whether to show remove button (default true for input chips) */\n\t@property({ type: Boolean, reflect: true })\n\tremovable: boolean = true\n\n\t/** Disable the chip */\n\t@property({ type: Boolean, reflect: true })\n\tdisabled: boolean = false\n\n\t/** Elevated style variant */\n\t@property({ type: Boolean, reflect: true })\n\televated: boolean = false\n\n\t// RxJS state streams\n\tprivate chipHover$ = new BehaviorSubject<boolean>(false)\n\tprivate removeHover$ = new BehaviorSubject<boolean>(false)\n\tprivate focused$ = new BehaviorSubject<boolean>(false)\n\tprivate pressed$ = new BehaviorSubject<boolean>(false)\n\n\t// UI state from combined streams\n\t@state()  uiState = {\n\t\tchipHover: false,\n\t\tremoveHover: false,\n\t\tfocused: false,\n\t\tpressed: false\n\t}\n\n\t// Ripple effects\n\t@state() private ripples: Array<{ x: number; y: number; id: number }> = []\n\tprivate nextRippleId = 0\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}\n\n\tprotected static shadowRootOptions = {\n\t\t...LitElement.shadowRootOptions,\n\t\tdelegatesFocus: true,\n\t}\n\n\tstatic formAssociated = true\n\tinternals: ElementInternals | undefined\n\tget form() {\n\t\treturn this.internals?.form\n\t}\n\n\tprotected updated(changed: Map<string, unknown>) {\n\t\tsuper.updated?.(changed)\n\t\tif (changed.has('value')) {\n\t\t\tthis.internals?.setFormValue(this.value || null)\n\t\t}\n\t}\n\n\tconnectedCallback() {\n\t\tsuper.connectedCallback()\n\n\t\t// Combine all UI state streams\n\t\tcombineLatest([\n\t\t\tthis.chipHover$,\n\t\t\tthis.removeHover$,\n\t\t\tthis.focused$,\n\t\t\tthis.pressed$\n\t\t]).pipe(\n\t\t\tmap(([chipHover, removeHover, focused, pressed]) => ({\n\t\t\t\tchipHover,\n\t\t\t\tremoveHover,\n\t\t\t\tfocused,\n\t\t\t\tpressed\n\t\t\t})),\n\t\t\ttap(state => {\n\t\t\t\tthis.uiState = state\n\t\t\t}),\n\t\t\ttakeUntil(this.disconnecting)\n\t\t).subscribe()\n\t}\n\n\tprivate handleChipClick = (e: MouseEvent) => {\n\t\tif (this.disabled) return\n\n\t\t// Add ripple effect\n\t\tconst chip = this.shadowRoot?.querySelector('.chip-container') as HTMLElement\n\t\tif (chip) {\n\t\t\tconst rect = chip.getBoundingClientRect()\n\t\t\tconst x = e.clientX - rect.left\n\t\t\tconst y = e.clientY - rect.top\n\t\t\tconst id = this.nextRippleId++\n\n\t\t\tthis.ripples = [...this.ripples, { x, y, id }]\n\n\t\t\t// Remove ripple after animation\n\t\t\tsetTimeout(() => {\n\t\t\t\tthis.ripples = this.ripples.filter(r => r.id !== id)\n\t\t\t}, 600)\n\t\t}\n\n\t\t// Dispatch optional click event (for custom handling if needed)\n\t\tthis.dispatchEvent(\n\t\t\tnew CustomEvent('click', {\n\t\t\t\tdetail: { value: this.value },\n\t\t\t\tbubbles: true,\n\t\t\t\tcomposed: true,\n\t\t\t})\n\t\t)\n\t}\n\n\tprivate handleRemove = (e: Event) => {\n\t\tif (this.disabled) return\n\n\t\te.stopPropagation()\n\n\t\t// Dispatch remove event\n\t\tthis.dispatchEvent(\n\t\t\tnew CustomEvent('remove', {\n\t\t\t\tdetail: { value: this.value },\n\t\t\t\tbubbles: true,\n\t\t\t\tcomposed: true,\n\t\t\t})\n\t\t)\n\t}\n\n\tprivate handleKeyDown = (e: KeyboardEvent) => {\n\t\tif (this.disabled) return\n\n\t\t// Delete or Backspace removes the chip\n\t\tif ((e.key === 'Delete' || e.key === 'Backspace') && this.removable) {\n\t\t\te.preventDefault()\n\t\t\tthis.handleRemove(e)\n\t\t}\n\t\t// Enter can optionally trigger click\n\t\telse if (e.key === 'Enter') {\n\t\t\te.preventDefault()\n\t\t\tconst clickEvent = new MouseEvent('click', {\n\t\t\t\tbubbles: true,\n\t\t\t\tcancelable: true,\n\t\t\t\tclientX: 0,\n\t\t\t\tclientY: 0\n\t\t\t})\n\t\t\tthis.handleChipClick(clickEvent)\n\t\t}\n\t}\n\n\tprivate handleFocus = () => {\n\t\tthis.focused$.next(true)\n\t}\n\n\tprivate handleBlur = () => {\n\t\tthis.focused$.next(false)\n\t}\n\n\tprotected render(): unknown {\n\t\tconst hasLeadingIcon = this.avatar || this.icon;\n\n\t\tconst chipClasses = {\n\t\t\t'chip-container': true,\n\t\t\t'inline-flex': true,\n\t\t\t'items-center': true,\n\t\t\t'gap-2': true,\n\t\t\t'h-8': true, // M3: 32px height\n\t\t\t'min-h-[32px]': true,\n\t\t\t'rounded-full': true,\n\t\t\t'cursor-default': true,\n\t\t\t'transition-all': true,\n\t\t\t'duration-200': true,\n\t\t\t'select-none': true,\n\t\t\t'text-sm': true, // M3: 14px Label Large\n\t\t\t'font-medium': true, // M3: 500 weight\n\t\t\t'relative': true,\n\t\t\t'overflow-hidden': true,\n\t\t\t'border': true,\n\n\t\t\t// M3 Padding: 8px with icon, 16px without (leading), 8px with trailing icon\n\t\t\t'pl-2': hasLeadingIcon, // 8px with avatar/icon\n\t\t\t'pl-4': !hasLeadingIcon, // 16px without\n\t\t\t'pr-2': this.removable, // 8px with remove button\n\t\t\t'pr-4': !this.removable, // 16px without\n\n\t\t\t// M3 Colors for input chips\n\t\t\t'bg-surface-containerLow': true,\n\t\t\t'text-surface-onVariant': true,\n\t\t\t'border-outline': true,\n\t\t\t'border-solid':true,\n\t\t\t// Input chips are flat (no elevation) per M3\n\n\t\t\t// Focus-visible state\n\t\t\t'focus-visible:outline': !this.disabled,\n\t\t\t'focus-visible:outline-2': !this.disabled,\n\t\t\t'focus-visible:outline-primary': !this.disabled,\n\t\t\t'focus-visible:outline-offset-2': !this.disabled,\n\n\t\t\t// Disabled state\n\t\t\t'opacity-38': this.disabled, // M3 disabled opacity\n\t\t\t'cursor-not-allowed': this.disabled\n\t\t}\n\n\t\tconst removeButtonClasses = {\n\t\t\t'size-[18px]': true, // M3: 18px icon size\n\t\t\t'flex': true,\n\t\t\t'items-center': true,\n\t\t\t'justify-center': true,\n\t\t\t'rounded-full': true,\n\t\t\t'transition-all': true,\n\t\t\t'duration-200': true,\n\t\t\t'cursor-pointer': !this.disabled,\n\t\t\t'-mr-1': true, // Adjust for visual balance\n\n\t\t\t// Hover state for remove button\n\t\t\t'hover:bg-surface-containerHighest': !this.disabled,\n\t\t\t'opacity-50': this.disabled\n\t\t}\n\n\t\treturn html`\n\t\t\t<div\n\t\t\t\tclass=${classMap(chipClasses)}\n\t\t\t\t@click=${this.handleChipClick}\n\t\t\t\t@keydown=${this.handleKeyDown}\n\t\t\t\t@mouseenter=${() => this.chipHover$.next(true)}\n\t\t\t\t@mouseleave=${() => this.chipHover$.next(false)}\n\t\t\t\t@mousedown=${() => this.pressed$.next(true)}\n\t\t\t\t@mouseup=${() => this.pressed$.next(false)}\n\t\t\t\t@focus=${this.handleFocus}\n\t\t\t\t@blur=${this.handleBlur}\n\t\t\t\trole=\"button\"\n\t\t\t\ttabindex=${this.disabled ? '-1' : '0'}\n\t\t\t\taria-disabled=${this.disabled}\n\t\t\t\taria-label=${this.value}\n\t\t\t>\n\t\t\t\t<!-- Avatar image (if provided) -->\n\t\t\t\t${this.avatar ? html`\n\t\t\t\t\t<img\n\t\t\t\t\t\tsrc=${this.avatar}\n\t\t\t\t\t\talt=\"\"\n\t\t\t\t\t\tclass=\"avatar-img rounded-full size-5\"\n\t\t\t\t\t/>\n\t\t\t\t` : ''}\n\n\t\t\t\t<!-- Icon (if provided and no avatar) -->\n\t\t\t\t${this.icon && !this.avatar ? html`\n\t\t\t\t\t<span class=\"material-symbols-outlined text-[18px] shrink-0\">\n\t\t\t\t\t\t${this.icon}\n\t\t\t\t\t</span>\n\t\t\t\t` : ''}\n\n\t\t\t\t<!-- Chip content -->\n\t\t\t\t<span class=\"text-sm font-medium leading-5\">\n\t\t\t\t\t<slot></slot>\n\t\t\t\t</span>\n\n\t\t\t\t<!-- Remove button (shown by default for input chips) -->\n\t\t\t\t${this.removable ? html`\n\t\t\t\t\t<button\n\t\t\t\t\t\tclass=${classMap(removeButtonClasses)}\n\t\t\t\t\t\t@click=${this.handleRemove}\n\t\t\t\t\t\t@mouseenter=${() => this.removeHover$.next(true)}\n\t\t\t\t\t\t@mouseleave=${() => this.removeHover$.next(false)}\n\t\t\t\t\t\taria-label=\"Remove\"\n\t\t\t\t\t\ttabindex=\"-1\"\n\t\t\t\t\t\t?disabled=${this.disabled}\n\t\t\t\t\t>\n\t\t\t\t\t\t<span class=\"material-symbols-outlined text-[18px]\">\n\t\t\t\t\t\t\tclose\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</button>\n\t\t\t\t` : ''}\n\n\t\t\t\t<!-- Ripple effects -->\n\t\t\t\t${this.ripples.map(ripple => html`\n\t\t\t\t\t<span\n\t\t\t\t\t\tclass=\"ripple\"\n\t\t\t\t\t\tstyle=\"left: ${ripple.x}px; top: ${ripple.y}px;\"\n\t\t\t\t\t></span>\n\t\t\t\t`)}\n\n\t\t\t\t<!-- State layer for M3 hover/focus/pressed states -->\n\t\t\t\t<div class=\"state-layer\"></div>\n\t\t\t</div>\n\t\t`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-input-chip': SchmancyInputChip\n\t}\n}\n\nexport type InputChipClickEvent = { value: string }\nexport type InputChipRemoveEvent = { value: string }"],"mappings":"4PA+BO,IAAA,EAAA,cAAgC,EAAA,CAAA,CAAA,OAAA,KAAA,OACtB,CAAC,EAAA,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2HpB,aAAA,CACC,OAAA,CAAA,KAAA,MAzCe,GAAA,KAAA,KAID,GAAA,KAAA,OAIE,GAAA,KAAA,UAAA,CAII,EAAA,KAAA,SAAA,CAID,EAAA,KAAA,SAAA,CAIA,EAAA,KAAA,WAGC,IAAI,EAAA,gBAAA,CAAyB,EAAA,CAAA,KAAA,aAC3B,IAAI,EAAA,gBAAA,CAAyB,EAAA,CAAA,KAAA,SACjC,IAAI,EAAA,gBAAA,CAAyB,EAAA,CAAA,KAAA,SAC7B,IAAI,EAAA,gBAAA,CAAyB,EAAA,CAAA,KAAA,QAG5B,CACnB,UAAA,CAAW,EACX,YAAA,CAAa,EACb,QAAA,CAAS,EACT,QAAA,CAAS,EAAA,CAAA,KAAA,QAI8D,EAAA,CAAA,KAAA,aACjD,EAAA,KAAA,gBAoDI,GAAA,CAC1B,GAAI,KAAK,SAAU,OAGnB,IAAM,EAAO,KAAK,YAAY,cAAc,kBAAA,CAC5C,GAAI,EAAM,CACT,IAAM,EAAO,EAAK,uBAAA,CACZ,EAAI,EAAE,QAAU,EAAK,KACrB,EAAI,EAAE,QAAU,EAAK,IACrB,EAAK,KAAK,eAEhB,KAAK,QAAU,CAAA,GAAI,KAAK,QAAS,CAAE,EAAA,EAAG,EAAA,EAAG,GAAA,EAAA,CAAA,CAGzC,eAAA,CACC,KAAK,QAAU,KAAK,QAAQ,OAAO,GAAK,EAAE,KAAO,EAAA,EAC/C,IAAA,CAIJ,KAAK,cACJ,IAAI,YAAY,QAAS,CACxB,OAAQ,CAAE,MAAO,KAAK,MAAA,CACtB,QAAA,CAAS,EACT,SAAA,CAAU,EAAA,CAAA,CAAA,EAAA,KAAA,aAKW,GAAA,CACnB,KAAK,WAET,EAAE,iBAAA,CAGF,KAAK,cACJ,IAAI,YAAY,SAAU,CACzB,OAAQ,CAAE,MAAO,KAAK,MAAA,CACtB,QAAA,CAAS,EACT,SAAA,CAAU,EAAA,CAAA,CAAA,GAAA,KAAA,cAKY,GAAA,CACxB,GAAA,CAAI,KAAK,SAGT,GAAK,EAAE,MAAQ,UAAY,EAAE,MAAQ,aAAR,CAAwB,KAAK,UAKrD,IAAI,EAAE,MAAQ,QAAS,CAC3B,EAAE,gBAAA,CACF,IAAM,EAAa,IAAI,WAAW,QAAS,CAC1C,QAAA,CAAS,EACT,WAAA,CAAY,EACZ,QAAS,EACT,QAAS,EAAA,CAAA,CAEV,KAAK,gBAAgB,EAAA,OAZrB,EAAE,gBAAA,CACF,KAAK,aAAa,EAAA,EAAA,KAAA,gBAAA,CAgBnB,KAAK,SAAS,KAAA,CAAK,EAAA,EAAA,KAAA,eAAA,CAInB,KAAK,SAAS,KAAA,CAAK,EAAA,EAtHnB,GAAA,CACC,KAAK,UAAY,KAAK,iBAAA,MAAA,CAEtB,KAAK,UAAA,IAAY,IAAA,OAAA,KAAA,kBAIkB,CAAA,GACjC,EAAA,WAAW,kBACd,eAAA,CAAgB,EAAA,CAAA,OAAA,KAAA,eAAA,CAGO,EAExB,IAAA,MAAI,CACH,OAAO,KAAK,WAAW,KAGxB,QAAkB,EAAA,CACjB,MAAM,UAAU,EAAA,CACZ,EAAQ,IAAI,QAAA,EACf,KAAK,WAAW,aAAa,KAAK,OAAS,KAAA,CAI7C,mBAAA,CACC,MAAM,mBAAA,EAGN,EAAA,EAAA,eAAc,CACb,KAAK,WACL,KAAK,aACL,KAAK,SACL,KAAK,SAAA,CAAA,CACH,MAAA,EAAA,EAAA,MAAA,CACI,EAAW,EAAa,EAAS,MAAA,CACtC,UAAA,EACA,YAAA,EACA,QAAA,EACA,QAAA,EAAA,EAAA,EACE,EAAA,EAAA,KACC,GAAA,CACH,KAAK,QAAU,GAAA,EACd,EAAA,EAAA,WACQ,KAAK,cAAA,CAAA,CACd,WAAA,CA4EH,QAAA,CACC,IAAM,EAAiB,KAAK,QAAU,KAAK,KAErC,EAAc,CACnB,iBAAA,CAAkB,EAClB,cAAA,CAAe,EACf,eAAA,CAAgB,EAChB,QAAA,CAAS,EACT,MAAA,CAAO,EACP,eAAA,CAAgB,EAChB,eAAA,CAAgB,EAChB,iBAAA,CAAkB,EAClB,iBAAA,CAAkB,EAClB,eAAA,CAAgB,EAChB,cAAA,CAAe,EACf,UAAA,CAAW,EACX,cAAA,CAAe,EACf,SAAA,CAAY,EACZ,kBAAA,CAAmB,EACnB,OAAA,CAAU,EAGV,OAAQ,EACR,OAAA,CAAS,EACT,OAAQ,KAAK,UACb,OAAA,CAAS,KAAK,UAGd,0BAAA,CAA2B,EAC3B,yBAAA,CAA0B,EAC1B,iBAAA,CAAkB,EAClB,eAAA,CAAe,EAIf,wBAAA,CAA0B,KAAK,SAC/B,0BAAA,CAA4B,KAAK,SACjC,gCAAA,CAAkC,KAAK,SACvC,iCAAA,CAAmC,KAAK,SAGxC,aAAc,KAAK,SACnB,qBAAsB,KAAK,SAAA,CAGtB,EAAsB,CAC3B,cAAA,CAAe,EACf,KAAA,CAAQ,EACR,eAAA,CAAgB,EAChB,iBAAA,CAAkB,EAClB,eAAA,CAAgB,EAChB,iBAAA,CAAkB,EAClB,eAAA,CAAgB,EAChB,iBAAA,CAAmB,KAAK,SACxB,QAAA,CAAS,EAGT,oCAAA,CAAsC,KAAK,SAC3C,aAAc,KAAK,SAAA,CAGpB,MAAO,GAAA,IAAI;;2BAEQ,EAAA,CAAA;aACR,KAAK,gBAAA;eACH,KAAK,cAAA;sBACI,KAAK,WAAW,KAAA,CAAK,EAAA,CAAA;sBACrB,KAAK,WAAW,KAAA,CAAK,EAAA,CAAA;qBACtB,KAAK,SAAS,KAAA,CAAK,EAAA,CAAA;mBACrB,KAAK,SAAS,KAAA,CAAK,EAAA,CAAA;aAC3B,KAAK,YAAA;YACN,KAAK,WAAA;;eAEF,KAAK,SAAW,KAAO,IAAA;oBAClB,KAAK,SAAA;iBACR,KAAK,MAAA;;;MAGhB,KAAK,OAAS,EAAA,IAAI;;YAEZ,KAAK,OAAA;;;;MAIT,GAAA;;;MAGF,KAAK,MAAA,CAAS,KAAK,OAAS,EAAA,IAAI;;QAE9B,KAAK,KAAA;;MAEL,GAAA;;;;;;;;MAQF,KAAK,UAAY,EAAA,IAAI;;6BAEJ,EAAA,CAAA;eACR,KAAK,aAAA;wBACM,KAAK,aAAa,KAAA,CAAK,EAAA,CAAA;wBACvB,KAAK,aAAa,KAAA,CAAK,EAAA,CAAA;;;kBAG/B,KAAK,SAAA;;;;;;MAMf,GAAA;;;MAGF,KAAK,QAAQ,IAAI,GAAU,EAAA,IAAI;;;qBAGhB,EAAO,EAAA,WAAa,EAAO,EAAA;;;;;;;0BA3RrC,CAAE,KAAM,OAAQ,QAAA,CAAS,EAAA,CAAA,CAAA,CAAO,EAAA,UAAA,QAAA,IAAA,GAAA,CAAA,EAAA,EAAA,EAAA,EAAA,EAAA,UAIhC,CAAE,KAAM,OAAQ,QAAA,CAAS,EAAA,CAAA,CAAA,CAAO,EAAA,UAAA,OAAA,IAAA,GAAA,CAAA,EAAA,EAAA,EAAA,EAAA,EAAA,UAIhC,CAAE,KAAM,OAAQ,QAAA,CAAS,EAAA,CAAA,CAAA,CAAO,EAAA,UAAA,SAAA,IAAA,GAAA,CAAA,EAAA,EAAA,EAAA,EAAA,EAAA,UAIhC,CAAE,KAAM,QAAS,QAAA,CAAS,EAAA,CAAA,CAAA,CAAO,EAAA,UAAA,YAAA,IAAA,GAAA,CAAA,EAAA,EAAA,EAAA,EAAA,EAAA,UAIjC,CAAE,KAAM,QAAS,QAAA,CAAS,EAAA,CAAA,CAAA,CAAO,EAAA,UAAA,WAAA,IAAA,GAAA,CAAA,EAAA,EAAA,EAAA,EAAA,EAAA,UAIjC,CAAE,KAAM,QAAS,QAAA,CAAS,EAAA,CAAA,CAAA,CAAO,EAAA,UAAA,WAAA,IAAA,GAAA,CAAA,EAAA,EAAA,EAAA,EAAA,EAAA,QAAA,CAAA,CAUnC,EAAA,UAAA,UAAA,IAAA,GAAA,CAAA,EAAA,EAAA,EAAA,EAAA,EAAA,QAAA,CAAA,CAQA,EAAA,UAAA,UAAA,IAAA,GAAA,CAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,eA1HM,sBAAA,CAAA,CAAsB,EAAA,CAAA,OAAA,eAAA,QAAA,IAAA,CAAA,WAAA,CAAA,EAAA,IAAA,UAAA,CAAA,OAAA,GAAA,CAAA"}

package/dist/input.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./input-BtcIhu0Q.cjs`);exports.SchmancyInput=e.n,Object.defineProperty(exports,`SchmancyInputCompat`,{enumerable:!0,get:function(){return e.t}});
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./input-BGrF2qVq.cjs`);exports.SchmancyInput=e.n,Object.defineProperty(exports,`SchmancyInputCompat`,{enumerable:!0,get:function(){return e.t}});

package/dist/input.js

@@ -1,2 +1,2 @@
-import { n as e, t } from "./input-B-fw6f_r.js";
+import { n as e, t } from "./input-C1SnMNuQ.js";
 export { e as SchmancyInput, t as SchmancyInputCompat };

package/dist/json.cjs

@@ -1,4 +1,4 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`./chunk-CncqDLb2.cjs`);const e=require(`./mixins-BOOu6q2n.cjs`),t=require(`./active-host-jH3iloCR.cjs`),n=require(`./notification-Dy2azMyt.cjs`);let r=require(`lit/decorators.js`),i=require(`lit`),a=require(`lit/directives/unsafe-html.js`);var o=class extends e.c{constructor(...e){super(...e),this.data={},this.highlightKeys=[],this.compact=!1}static{this.styles=[i.css`:host { display: block }`]}highlightChanges(e,t){let n=e;return t.forEach(e=>{let t=RegExp(`("${e}":\\s*)([^,\\n}]+)`,`g`);n=n.replace(t,(e,t,n)=>`${t}<span class="text-warning-default font-bold">${n}</span>`)}),n}async copyJSON(){try{await navigator.clipboard.writeText(JSON.stringify(this.data,null,2)),n.r.success(`JSON copied to clipboard`)}catch{n.r.error(`Failed to copy JSON`)}}render(){let e=JSON.stringify(this.data,null,this.compact?0:2),t=this.highlightKeys.length>0?this.highlightChanges(e,this.highlightKeys):e;return i.html`
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`./chunk-CncqDLb2.cjs`);const e=require(`./mixins-BOOu6q2n.cjs`),t=require(`./active-host-jH3iloCR.cjs`),n=require(`./notification-CliGbcfU.cjs`);let r=require(`lit/decorators.js`),i=require(`lit`),a=require(`lit/directives/unsafe-html.js`);var o=class extends e.c{constructor(...e){super(...e),this.data={},this.highlightKeys=[],this.compact=!1}static{this.styles=[i.css`:host { display: block }`]}highlightChanges(e,t){let n=e;return t.forEach(e=>{let t=RegExp(`("${e}":\\s*)([^,\\n}]+)`,`g`);n=n.replace(t,(e,t,n)=>`${t}<span class="text-warning-default font-bold">${n}</span>`)}),n}async copyJSON(){try{await navigator.clipboard.writeText(JSON.stringify(this.data,null,2)),n.r.success(`JSON copied to clipboard`)}catch{n.r.error(`Failed to copy JSON`)}}render(){let e=JSON.stringify(this.data,null,this.compact?0:2),t=this.highlightKeys.length>0?this.highlightChanges(e,this.highlightKeys):e;return i.html`
 			<div
 				class="bg-surface-container rounded-lg p-2 font-mono overflow-auto cursor-pointer hover:bg-surface-container-high transition-colors"
 				@click=${this.copyJSON}

package/dist/json.js

@@ -1,6 +1,6 @@
 import { c as e } from "./mixins-BWb9_e1s.js";
 import { a as t } from "./active-host-BP0zy_Y9.js";
-import { r as n } from "./notification-CUmb9c3Y.js";
+import { r as n } from "./notification-R2_Mf1HR.js";
 import { customElement as r, property as i } from "lit/decorators.js";
 import { css as a, html as o } from "lit";
 import { unsafeHTML as s } from "lit/directives/unsafe-html.js";

package/dist/json.js.map

@@ -1 +1 @@
-{"version":3,"file":"json.js","names":[],"sources":["../src/json/json.ts"],"sourcesContent":["import { SchmancyElement } from '@mixins/index'\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js'\nimport { $notify } from '@schmancy/notification'\n\n@customElement('schmancy-json')\nexport class SchmancyJson extends SchmancyElement {\n\tstatic styles = [css`:host { display: block }`];\n\t@property({ type: Object }) data: Record<string, any> = {}\n\t@property({ type: Array }) highlightKeys: string[] = []\n\t@property({ type: Boolean }) compact = false\n\n\tprivate highlightChanges(json: string, changedKeys: string[]): string {\n\t\tlet highlighted = json\n\t\tchangedKeys.forEach(key => {\n\t\t\tconst regex = new RegExp(`(\"${key}\":\\\\s*)([^,\\\\n}]+)`, 'g')\n\t\t\thighlighted = highlighted.replace(regex, (_match, keyPart, valuePart) => {\n\t\t\t\treturn `${keyPart}<span class=\"text-warning-default font-bold\">${valuePart}</span>`\n\t\t\t})\n\t\t})\n\t\treturn highlighted\n\t}\n\n\tprivate async copyJSON() {\n\t\ttry {\n\t\t\tawait navigator.clipboard.writeText(JSON.stringify(this.data, null, 2))\n\t\t\t$notify.success('JSON copied to clipboard')\n\t\t} catch {\n\t\t\t$notify.error('Failed to copy JSON')\n\t\t}\n\t}\n\n\trender() {\n\t\tconst jsonString = JSON.stringify(this.data, null, this.compact ? 0 : 2)\n\t\tconst highlighted = this.highlightKeys.length > 0 ? this.highlightChanges(jsonString, this.highlightKeys) : jsonString\n\n\t\treturn html`\n\t\t\t<div\n\t\t\t\tclass=\"bg-surface-container rounded-lg p-2 font-mono overflow-auto cursor-pointer hover:bg-surface-container-high transition-colors\"\n\t\t\t\t@click=${this.copyJSON}\n\t\t\t>\n\t\t\t\t<div class=\"flex items-center justify-between mb-1\">\n\t\t\t\t\t<schmancy-icon size=\"12px\" class=\"text-on-surface-variant\">content_copy</schmancy-icon>\n\t\t\t\t</div>\n\t\t\t\t<pre class=\"text-[10px] leading-tight\">${unsafeHTML(highlighted)}</pre>\n\t\t\t</div>\n\t\t`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-json': SchmancyJson\n\t}\n}\n"],"mappings":";;;;;;AAOO,IAAA,IAAA,cAA2B,EAAA;CAAA,YAAA,GAAA,GAAA;AAAA,QAAA,GAAA,EAAA,EAAA,KAAA,OAEuB,EAAA,EAAA,KAAA,gBACH,EAAA,EAAA,KAAA,UAAA,CACd;;CAAA;AAAA,OAAA,SAHvB,CAAC,CAAG,2BAAA;;CAKpB,iBAAyB,GAAc,GAAA;EACtC,IAAI,IAAc;AAOlB,SANA,EAAY,SAAQ,MAAA;GACnB,IAAM,IAAY,OAAO,KAAK,EAAA,qBAAyB,IAAA;AACvD,OAAc,EAAY,QAAQ,IAAQ,GAAQ,GAAS,MACnD,GAAG,EAAA,+CAAuD,EAAA,SAAA;IAAA,EAG5D;;CAGR,MAAA,WAAc;AACb,MAAA;AAAA,SACO,UAAU,UAAU,UAAU,KAAK,UAAU,KAAK,MAAM,MAAM,EAAA,CAAA,EACpE,EAAQ,QAAQ,2BAAA;UAAA;AAEhB,KAAQ,MAAM,sBAAA;;;CAIhB,SAAA;EACC,IAAM,IAAa,KAAK,UAAU,KAAK,MAAM,MAAM,KAAK,UAAU,IAAI,EAAA,EAChE,IAAc,KAAK,cAAc,SAAS,IAAI,KAAK,iBAAiB,GAAY,KAAK,cAAA,GAAiB;AAE5G,SAAO,CAAI;;;aAGA,KAAK,SAAA;;;;;6CAK2B,EAAW,EAAA,CAAA;;;;;GApCtD,EAAS,EAAE,MAAM,QAAA,CAAA,CAAA,EAAS,EAAA,WAAA,QAAA,KAAA,EAAA,EAAA,EAAA,CAC1B,EAAS,EAAE,MAAM,OAAA,CAAA,CAAA,EAAQ,EAAA,WAAA,iBAAA,KAAA,EAAA,EAAA,EAAA,CACzB,EAAS,EAAE,MAAM,SAAA,CAAA,CAAA,EAAU,EAAA,WAAA,WAAA,KAAA,EAAA,EAAA,IAAA,EAAA,CAL5B,EAAc,gBAAA,CAAA,EAAgB,EAAA;AAAA,SAAA,KAAA"}
+{"version":3,"file":"json.js","names":[],"sources":["../src/json/json.ts"],"sourcesContent":["import { SchmancyElement } from '@mixins/index'\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js'\nimport { $notify } from '@schmancy/notification'\n\n@customElement('schmancy-json')\nexport class SchmancyJson extends SchmancyElement {\n\tstatic styles = [css`:host { display: block }`];\n\t@property({ type: Object }) data: Record<string, any> = {}\n\t@property({ type: Array }) highlightKeys: string[] = []\n\t@property({ type: Boolean }) compact = false\n\n\tprivate highlightChanges(json: string, changedKeys: string[]): string {\n\t\tlet highlighted = json\n\t\tchangedKeys.forEach(key => {\n\t\t\tconst regex = new RegExp(`(\"${key}\":\\\\s*)([^,\\\\n}]+)`, 'g')\n\t\t\thighlighted = highlighted.replace(regex, (_match, keyPart, valuePart) => {\n\t\t\t\treturn `${keyPart}<span class=\"text-warning-default font-bold\">${valuePart}</span>`\n\t\t\t})\n\t\t})\n\t\treturn highlighted\n\t}\n\n\tprivate async copyJSON() {\n\t\ttry {\n\t\t\tawait navigator.clipboard.writeText(JSON.stringify(this.data, null, 2))\n\t\t\t$notify.success('JSON copied to clipboard')\n\t\t} catch {\n\t\t\t$notify.error('Failed to copy JSON')\n\t\t}\n\t}\n\n\trender() {\n\t\tconst jsonString = JSON.stringify(this.data, null, this.compact ? 0 : 2)\n\t\tconst highlighted = this.highlightKeys.length > 0 ? this.highlightChanges(jsonString, this.highlightKeys) : jsonString\n\n\t\treturn html`\n\t\t\t<div\n\t\t\t\tclass=\"bg-surface-container rounded-lg p-2 font-mono overflow-auto cursor-pointer hover:bg-surface-container-high transition-colors\"\n\t\t\t\t@click=${this.copyJSON}\n\t\t\t>\n\t\t\t\t<div class=\"flex items-center justify-between mb-1\">\n\t\t\t\t\t<schmancy-icon size=\"12px\" class=\"text-on-surface-variant\">content_copy</schmancy-icon>\n\t\t\t\t</div>\n\t\t\t\t<pre class=\"text-[10px] leading-tight\">${unsafeHTML(highlighted)}</pre>\n\t\t\t</div>\n\t\t`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-json': SchmancyJson\n\t}\n}\n"],"mappings":";;;;;;AAOO,IAAA,IAAA,cAA2B,EAAA;CAAA,YAAA,GAAA,GAAA;EAAA,MAAA,GAAA,EAAA,EAAA,KAAA,OAEuB,EAAA,EAAA,KAAA,gBACH,EAAA,EAAA,KAAA,UAAA,CACd;;CAAA;EAAA,KAAA,SAHvB,CAAC,CAAG,2BAAA;;CAKpB,iBAAyB,GAAc,GAAA;EACtC,IAAI,IAAc;EAOlB,OANA,EAAY,SAAQ,MAAA;GACnB,IAAM,IAAY,OAAO,KAAK,EAAA,qBAAyB,IAAA;GACvD,IAAc,EAAY,QAAQ,IAAQ,GAAQ,GAAS,MACnD,GAAG,EAAA,+CAAuD,EAAA,SAAA;IAAA,EAG5D;;CAGR,MAAA,WAAc;EACb,IAAA;GAAA,MACO,UAAU,UAAU,UAAU,KAAK,UAAU,KAAK,MAAM,MAAM,EAAA,CAAA,EACpE,EAAQ,QAAQ,2BAAA;UAAA;GAEhB,EAAQ,MAAM,sBAAA;;;CAIhB,SAAA;EACC,IAAM,IAAa,KAAK,UAAU,KAAK,MAAM,MAAM,KAAK,UAAU,IAAI,EAAA,EAChE,IAAc,KAAK,cAAc,SAAS,IAAI,KAAK,iBAAiB,GAAY,KAAK,cAAA,GAAiB;EAE5G,OAAO,CAAI;;;aAGA,KAAK,SAAA;;;;;6CAK2B,EAAW,EAAA,CAAA;;;;;GApCtD,EAAS,EAAE,MAAM,QAAA,CAAA,CAAA,EAAS,EAAA,WAAA,QAAA,KAAA,EAAA,EAAA,EAAA,CAC1B,EAAS,EAAE,MAAM,OAAA,CAAA,CAAA,EAAQ,EAAA,WAAA,iBAAA,KAAA,EAAA,EAAA,EAAA,CACzB,EAAS,EAAE,MAAM,SAAA,CAAA,CAAA,EAAU,EAAA,WAAA,WAAA,KAAA,EAAA,EAAA,IAAA,EAAA,CAL5B,EAAc,gBAAA,CAAA,EAAgB,EAAA;AAAA,SAAA,KAAA"}

package/dist/kbd.js.map

@@ -1 +1 @@
-{"version":3,"file":"kbd.js","names":[],"sources":["../src/kbd/kbd.ts"],"sourcesContent":["import { SchmancyElement } from '@mixins/index'\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\n/**\n * Renders a keyboard shortcut hint (e.g. `⌘ K`, `Ctrl+C`). Semantically a\n * `<kbd>` element for screen readers; visually styled as a pressed key.\n *\n * Compose multiple instances for combinations:\n * ```html\n * <schmancy-kbd>⌘</schmancy-kbd> + <schmancy-kbd>K</schmancy-kbd>\n * ```\n *\n * @element schmancy-kbd\n * @slot - The key label (e.g. `⌘`, `Shift`, `K`).\n * @attr size - 'sm' | 'md'. Default 'md'.\n * @csspart base - The inner native `<kbd>` element.\n */\n@customElement('schmancy-kbd')\nexport class SchmancyKbd extends SchmancyElement {\n\tstatic styles = [css`\n\t:host {\n\t\tdisplay: inline-block;\n\t\tvertical-align: middle;\n\t}\n\tkbd {\n\t\tdisplay: inline-flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\tmin-width: var(--_ksize, 1.5rem);\n\t\theight: var(--_ksize, 1.5rem);\n\t\tpadding: 0 0.375rem;\n\t\tfont-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;\n\t\tfont-size: var(--_kfont, 0.75rem);\n\t\tfont-weight: 500;\n\t\tline-height: 1;\n\t\tcolor: var(--schmancy-sys-color-surface-on, #1d1b20);\n\t\tbackground: var(--schmancy-sys-color-surface-container, #f3f0f7);\n\t\tborder: 1px solid var(--schmancy-sys-color-outline-variant, #cac4d0);\n\t\tborder-radius: 0.375rem;\n\t\tbox-shadow: inset 0 -1px 0 var(--schmancy-sys-color-outline-variant, #cac4d0);\n\t\twhite-space: nowrap;\n\t}\n\t:host([size='sm']) kbd {\n\t\t--_ksize: 1.25rem;\n\t\t--_kfont: 0.6875rem;\n\t}\n`];\n\t@property({ type: String, reflect: true }) size: 'sm' | 'md' = 'md'\n\n\trender() {\n\t\treturn html`<kbd part=\"base\"><slot></slot></kbd>`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-kbd': SchmancyKbd\n\t}\n}\n"],"mappings":";;;;AAmBO,IAAA,IAAA,cAA0B,EAAA;CAAA,YAAA,GAAA,GAAA;AAAA,QAAA,GAAA,EAAA,EAAA,KAAA,OA6B+B;;CAAA;AAAA,OAAA,SA5B/C,CAAC,CAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8BpB,SAAA;AACC,SAAO,CAAI;;;AAAA,EAAA,CAHX,EAAS;CAAE,MAAM;CAAQ,SAAA,CAAS;CAAA,CAAA,CAAA,EAAO,EAAA,WAAA,QAAA,KAAA,EAAA,EAAA,IAAA,EAAA,CA9B1C,EAAc,eAAA,CAAA,EAAe,EAAA;AAAA,SAAA,KAAA"}
+{"version":3,"file":"kbd.js","names":[],"sources":["../src/kbd/kbd.ts"],"sourcesContent":["import { SchmancyElement } from '@mixins/index'\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\n/**\n * Renders a keyboard shortcut hint (e.g. `⌘ K`, `Ctrl+C`). Semantically a\n * `<kbd>` element for screen readers; visually styled as a pressed key.\n *\n * Compose multiple instances for combinations:\n * ```html\n * <schmancy-kbd>⌘</schmancy-kbd> + <schmancy-kbd>K</schmancy-kbd>\n * ```\n *\n * @element schmancy-kbd\n * @slot - The key label (e.g. `⌘`, `Shift`, `K`).\n * @attr size - 'sm' | 'md'. Default 'md'.\n * @csspart base - The inner native `<kbd>` element.\n */\n@customElement('schmancy-kbd')\nexport class SchmancyKbd extends SchmancyElement {\n\tstatic styles = [css`\n\t:host {\n\t\tdisplay: inline-block;\n\t\tvertical-align: middle;\n\t}\n\tkbd {\n\t\tdisplay: inline-flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\tmin-width: var(--_ksize, 1.5rem);\n\t\theight: var(--_ksize, 1.5rem);\n\t\tpadding: 0 0.375rem;\n\t\tfont-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;\n\t\tfont-size: var(--_kfont, 0.75rem);\n\t\tfont-weight: 500;\n\t\tline-height: 1;\n\t\tcolor: var(--schmancy-sys-color-surface-on, #1d1b20);\n\t\tbackground: var(--schmancy-sys-color-surface-container, #f3f0f7);\n\t\tborder: 1px solid var(--schmancy-sys-color-outline-variant, #cac4d0);\n\t\tborder-radius: 0.375rem;\n\t\tbox-shadow: inset 0 -1px 0 var(--schmancy-sys-color-outline-variant, #cac4d0);\n\t\twhite-space: nowrap;\n\t}\n\t:host([size='sm']) kbd {\n\t\t--_ksize: 1.25rem;\n\t\t--_kfont: 0.6875rem;\n\t}\n`];\n\t@property({ type: String, reflect: true }) size: 'sm' | 'md' = 'md'\n\n\trender() {\n\t\treturn html`<kbd part=\"base\"><slot></slot></kbd>`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-kbd': SchmancyKbd\n\t}\n}\n"],"mappings":";;;;AAmBO,IAAA,IAAA,cAA0B,EAAA;CAAA,YAAA,GAAA,GAAA;EAAA,MAAA,GAAA,EAAA,EAAA,KAAA,OA6B+B;;CAAA;EAAA,KAAA,SA5B/C,CAAC,CAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8BpB,SAAA;EACC,OAAO,CAAI;;;AAAA,EAAA,CAHX,EAAS;CAAE,MAAM;CAAQ,SAAA,CAAS;CAAA,CAAA,CAAA,EAAO,EAAA,WAAA,QAAA,KAAA,EAAA,EAAA,IAAA,EAAA,CA9B1C,EAAc,eAAA,CAAA,EAAe,EAAA;AAAA,SAAA,KAAA"}

package/dist/layout-BH28sKGc.js.map

@@ -1 +1 @@
-{"version":3,"file":"layout-BH28sKGc.js","names":[],"sources":["../src/directives/layout.ts"],"sourcesContent":["import { directive, ElementPart, PartType } from 'lit/directive.js'\nimport { AsyncDirective } from 'lit/async-directive.js'\nimport { Subject, fromEvent, merge, Observable, EMPTY, timer, combineLatest } from 'rxjs'\nimport { debounceTime, switchMap, takeUntil, distinctUntilChanged, map, tap, startWith, filter } from 'rxjs/operators'\n\n/** Returns true if user is pinch-zoomed (scale !== 1) */\nfunction isZoomed(): boolean {\n\tconst vv = window.visualViewport\n\treturn vv ? Math.abs(vv.scale - 1) > 0.01 : false\n}\nimport { theme } from '../theme/theme.service'\n\n// Shared global update stream (lazy-initialized, cleaned up when no elements use it)\nlet update$: Subject<void> | null = null\nlet updateSub: { unsubscribe: () => void } | null = null\nlet elementCount = 0\n\nfunction getUpdateStream(): Subject<void> {\n\tif (!update$) {\n\t\tupdate$ = new Subject<void>()\n\n\t\tconst windowResize$ = fromEvent(window, 'resize', { passive: true })\n\n\t\tconst viewportEvents$ = window.visualViewport\n\t\t\t? merge(\n\t\t\t\t\tfromEvent(window.visualViewport, 'resize', { passive: true }),\n\t\t\t\t\tfromEvent(window.visualViewport, 'scroll', { passive: true })\n\t\t\t\t)\n\t\t\t: windowResize$\n\n\t\tconst orientation$ = fromEvent(window, 'orientationchange')\n\n\t\t// iOS Safari: force recalc after keyboard dismissal\n\t\tconst focusOut$ = fromEvent(document, 'focusout', { passive: true }).pipe(\n\t\t\tswitchMap(() => timer(100))\n\t\t)\n\n\t\tupdateSub = merge(windowResize$, viewportEvents$, orientation$, focusOut$)\n\t\t\t.pipe(debounceTime(16))\n\t\t\t.subscribe(() => update$!.next())\n\t}\n\treturn update$\n}\n\nfunction cleanup() {\n\tif (elementCount === 0 && updateSub) {\n\t\tupdateSub.unsubscribe()\n\t\tupdateSub = null\n\t\tupdate$ = null\n\t}\n}\n\n\n/**\n * RxJS wrapper for ResizeObserver - auto-cleans on unsubscribe\n */\nexport function fromResizeObserver(element: Element): Observable<ResizeObserverEntry[]> {\n\treturn new Observable(subscriber => {\n\t\tconst observer = new ResizeObserver(entries => subscriber.next(entries))\n\t\tobserver.observe(element)\n\t\treturn () => observer.disconnect()\n\t})\n}\n\n/**\n * fullHeight directive - fills remaining viewport space\n *\n * Reactive sources:\n * - Parent ResizeObserver (layout shifts)\n * - Window resize / visualViewport (viewport changes)\n * - Orientation change (device rotation)\n * - Focus out (mobile keyboard dismiss)\n * - Theme fullscreen toggle\n *\n * Performance:\n * - distinctUntilChanged prevents redundant style writes\n * - debounceTime(16) batches rapid events (~60fps)\n * - Single shared stream for global events\n */\nclass FullHeight extends AsyncDirective {\n\tprivate element: HTMLElement | null = null\n\tprivate disconnecting$ = new Subject<void>()\n\n\tprivate calculateHeight(): number {\n\t\tif (!this.element) return 0\n\t\tconst viewportHeight = window.visualViewport?.height ?? window.innerHeight\n\t\tconst topOffset = this.element.getBoundingClientRect().top\n\t\treturn Math.max(0, viewportHeight - topOffset)\n\t}\n\n\tprivate applyStyles(height: number, bottomPadding: number) {\n\t\tif (this.element) {\n\t\t\tthis.element.style.boxSizing = 'border-box'\n\t\t\tthis.element.style.height = `${height}px`\n\t\t\tthis.element.style.paddingBottom = `${bottomPadding}px`\n\t\t}\n\t}\n\n\tprivate setupHeightStream() {\n\t\tif (!this.element) return\n\n\t\tconst element = this.element\n\n\t\t// Parent resize detects layout shifts (e.g., header rendering after load)\n\t\tconst parentResize$ = element.parentElement\n\t\t\t? fromResizeObserver(element.parentElement)\n\t\t\t: EMPTY\n\n\t\t// Global events (resize, viewport, orientation, fullscreen)\n\t\tconst globalEvents$ = getUpdateStream()\n\n\t\t// Combine all sources, calculate height and padding, dedupe, apply\n\t\t// Skip updates while pinch-zoomed to prevent layout thrashing\n\t\tcombineLatest([\n\t\t\tmerge(parentResize$, globalEvents$).pipe(startWith(null)),\n\t\t\ttheme.bottomOffset$,\n\t\t\ttheme.fullscreen$\n\t\t]).pipe(\n\t\t\tfilter(() => !isZoomed()),\n\t\t\tmap(([, bottomOffset, isFullscreen]) => ({\n\t\t\t\theight: this.calculateHeight(),\n\t\t\t\tpadding: isFullscreen ? 0 : bottomOffset\n\t\t\t})),\n\t\t\tdistinctUntilChanged((a, b) => a.height === b.height && a.padding === b.padding),\n\t\t\ttap(({ height, padding }) => this.applyStyles(height, padding)),\n\t\t\ttakeUntil(this.disconnecting$)\n\t\t).subscribe()\n\n\t}\n\n\trender() {\n\t\treturn\n\t}\n\n\tupdate(part: ElementPart) {\n\t\tif (part.type !== PartType.ELEMENT) {\n\t\t\tthrow new Error('fullHeight directive can only be used on elements')\n\t\t}\n\t\tconst el = part.element as HTMLElement\n\t\tif (this.element !== el) {\n\t\t\tthis.element = el\n\t\t\telementCount++\n\t\t\tthis.setupHeightStream()\n\t\t}\n\t}\n\n\tdisconnected() {\n\t\tthis.disconnecting$.next()\n\t\telementCount--\n\t\tcleanup()\n\t\tthis.element = null\n\t}\n\n\treconnected() {\n\t\tif (this.element) {\n\t\t\telementCount++\n\t\t\tthis.disconnecting$ = new Subject<void>()\n\t\t\tthis.setupHeightStream()\n\t\t}\n\t}\n}\n\nexport const fullHeight = directive(FullHeight)\n\n/**\n * fullWidth directive - fills remaining horizontal viewport space\n *\n * Reactive sources:\n * - Element ResizeObserver (detects when element moves/resizes)\n * - Parent ResizeObserver (layout shifts, e.g., sidebar)\n * - Window resize / visualViewport (viewport changes)\n * - Orientation change (device rotation)\n * - Theme fullscreen toggle (sidebar visibility)\n *\n * Performance:\n * - distinctUntilChanged prevents redundant style writes\n * - debounceTime(16) batches rapid events (~60fps)\n * - Single shared stream for global events\n */\nclass FullWidth extends AsyncDirective {\n\tprivate element: HTMLElement | null = null\n\tprivate disconnecting$ = new Subject<void>()\n\n\tprivate calculateWidth(): number {\n\t\tif (!this.element) return 0\n\t\tconst viewportWidth = window.visualViewport?.width ?? window.innerWidth\n\t\tconst leftOffset = this.element.getBoundingClientRect().left\n\t\treturn Math.max(0, viewportWidth - leftOffset)\n\t}\n\n\tprivate applyStyles(width: number) {\n\t\tif (this.element) {\n\t\t\tthis.element.style.boxSizing = 'border-box'\n\t\t\tthis.element.style.maxWidth = `${width}px`\n\t\t}\n\t}\n\n\tprivate setupWidthStream() {\n\t\tif (!this.element) return\n\n\t\tconst element = this.element\n\n\t\t// Element resize detects when element itself moves (e.g., after layout settles)\n\t\tconst elementResize$ = fromResizeObserver(element)\n\n\t\t// Parent resize detects layout shifts (e.g., sidebar opening/closing)\n\t\tconst parentResize$ = element.parentElement\n\t\t\t? fromResizeObserver(element.parentElement)\n\t\t\t: EMPTY\n\n\t\t// Global events (resize, viewport, orientation)\n\t\tconst globalEvents$ = getUpdateStream()\n\n\t\t// Combine all sources with theme observables for synchronous initial emission\n\t\t// theme.fullscreen$ has shareReplay(1) ensuring immediate emission on subscribe\n\t\t// Skip updates while pinch-zoomed to prevent layout thrashing\n\t\tcombineLatest([\n\t\t\tmerge(elementResize$, parentResize$, globalEvents$).pipe(startWith(null)),\n\t\t\ttheme.fullscreen$\n\t\t]).pipe(\n\t\t\tfilter(() => !isZoomed()),\n\t\t\tmap(() => this.calculateWidth()),\n\t\t\tdistinctUntilChanged(),\n\t\t\ttap(width => this.applyStyles(width)),\n\t\t\ttakeUntil(this.disconnecting$)\n\t\t).subscribe()\n\t}\n\n\trender() {\n\t\treturn\n\t}\n\n\tupdate(part: ElementPart) {\n\t\tif (part.type !== PartType.ELEMENT) {\n\t\t\tthrow new Error('fullWidth directive can only be used on elements')\n\t\t}\n\t\tconst el = part.element as HTMLElement\n\t\tif (this.element !== el) {\n\t\t\tthis.element = el\n\t\t\telementCount++\n\t\t\tthis.setupWidthStream()\n\t\t}\n\t}\n\n\tdisconnected() {\n\t\tthis.disconnecting$.next()\n\t\telementCount--\n\t\tcleanup()\n\t\tthis.element = null\n\t}\n\n\treconnected() {\n\t\tif (this.element) {\n\t\t\telementCount++\n\t\t\tthis.disconnecting$ = new Subject<void>()\n\t\t\tthis.setupWidthStream()\n\t\t}\n\t}\n}\n\nexport const fullWidth = directive(FullWidth)\n"],"mappings":"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"}
+{"version":3,"file":"layout-BH28sKGc.js","names":[],"sources":["../src/directives/layout.ts"],"sourcesContent":["import { directive, ElementPart, PartType } from 'lit/directive.js'\nimport { AsyncDirective } from 'lit/async-directive.js'\nimport { Subject, fromEvent, merge, Observable, EMPTY, timer, combineLatest } from 'rxjs'\nimport { debounceTime, switchMap, takeUntil, distinctUntilChanged, map, tap, startWith, filter } from 'rxjs/operators'\n\n/** Returns true if user is pinch-zoomed (scale !== 1) */\nfunction isZoomed(): boolean {\n\tconst vv = window.visualViewport\n\treturn vv ? Math.abs(vv.scale - 1) > 0.01 : false\n}\nimport { theme } from '../theme/theme.service'\n\n// Shared global update stream (lazy-initialized, cleaned up when no elements use it)\nlet update$: Subject<void> | null = null\nlet updateSub: { unsubscribe: () => void } | null = null\nlet elementCount = 0\n\nfunction getUpdateStream(): Subject<void> {\n\tif (!update$) {\n\t\tupdate$ = new Subject<void>()\n\n\t\tconst windowResize$ = fromEvent(window, 'resize', { passive: true })\n\n\t\tconst viewportEvents$ = window.visualViewport\n\t\t\t? merge(\n\t\t\t\t\tfromEvent(window.visualViewport, 'resize', { passive: true }),\n\t\t\t\t\tfromEvent(window.visualViewport, 'scroll', { passive: true })\n\t\t\t\t)\n\t\t\t: windowResize$\n\n\t\tconst orientation$ = fromEvent(window, 'orientationchange')\n\n\t\t// iOS Safari: force recalc after keyboard dismissal\n\t\tconst focusOut$ = fromEvent(document, 'focusout', { passive: true }).pipe(\n\t\t\tswitchMap(() => timer(100))\n\t\t)\n\n\t\tupdateSub = merge(windowResize$, viewportEvents$, orientation$, focusOut$)\n\t\t\t.pipe(debounceTime(16))\n\t\t\t.subscribe(() => update$!.next())\n\t}\n\treturn update$\n}\n\nfunction cleanup() {\n\tif (elementCount === 0 && updateSub) {\n\t\tupdateSub.unsubscribe()\n\t\tupdateSub = null\n\t\tupdate$ = null\n\t}\n}\n\n\n/**\n * RxJS wrapper for ResizeObserver - auto-cleans on unsubscribe\n */\nexport function fromResizeObserver(element: Element): Observable<ResizeObserverEntry[]> {\n\treturn new Observable(subscriber => {\n\t\tconst observer = new ResizeObserver(entries => subscriber.next(entries))\n\t\tobserver.observe(element)\n\t\treturn () => observer.disconnect()\n\t})\n}\n\n/**\n * fullHeight directive - fills remaining viewport space\n *\n * Reactive sources:\n * - Parent ResizeObserver (layout shifts)\n * - Window resize / visualViewport (viewport changes)\n * - Orientation change (device rotation)\n * - Focus out (mobile keyboard dismiss)\n * - Theme fullscreen toggle\n *\n * Performance:\n * - distinctUntilChanged prevents redundant style writes\n * - debounceTime(16) batches rapid events (~60fps)\n * - Single shared stream for global events\n */\nclass FullHeight extends AsyncDirective {\n\tprivate element: HTMLElement | null = null\n\tprivate disconnecting$ = new Subject<void>()\n\n\tprivate calculateHeight(): number {\n\t\tif (!this.element) return 0\n\t\tconst viewportHeight = window.visualViewport?.height ?? window.innerHeight\n\t\tconst topOffset = this.element.getBoundingClientRect().top\n\t\treturn Math.max(0, viewportHeight - topOffset)\n\t}\n\n\tprivate applyStyles(height: number, bottomPadding: number) {\n\t\tif (this.element) {\n\t\t\tthis.element.style.boxSizing = 'border-box'\n\t\t\tthis.element.style.height = `${height}px`\n\t\t\tthis.element.style.paddingBottom = `${bottomPadding}px`\n\t\t}\n\t}\n\n\tprivate setupHeightStream() {\n\t\tif (!this.element) return\n\n\t\tconst element = this.element\n\n\t\t// Parent resize detects layout shifts (e.g., header rendering after load)\n\t\tconst parentResize$ = element.parentElement\n\t\t\t? fromResizeObserver(element.parentElement)\n\t\t\t: EMPTY\n\n\t\t// Global events (resize, viewport, orientation, fullscreen)\n\t\tconst globalEvents$ = getUpdateStream()\n\n\t\t// Combine all sources, calculate height and padding, dedupe, apply\n\t\t// Skip updates while pinch-zoomed to prevent layout thrashing\n\t\tcombineLatest([\n\t\t\tmerge(parentResize$, globalEvents$).pipe(startWith(null)),\n\t\t\ttheme.bottomOffset$,\n\t\t\ttheme.fullscreen$\n\t\t]).pipe(\n\t\t\tfilter(() => !isZoomed()),\n\t\t\tmap(([, bottomOffset, isFullscreen]) => ({\n\t\t\t\theight: this.calculateHeight(),\n\t\t\t\tpadding: isFullscreen ? 0 : bottomOffset\n\t\t\t})),\n\t\t\tdistinctUntilChanged((a, b) => a.height === b.height && a.padding === b.padding),\n\t\t\ttap(({ height, padding }) => this.applyStyles(height, padding)),\n\t\t\ttakeUntil(this.disconnecting$)\n\t\t).subscribe()\n\n\t}\n\n\trender() {\n\t\treturn\n\t}\n\n\tupdate(part: ElementPart) {\n\t\tif (part.type !== PartType.ELEMENT) {\n\t\t\tthrow new Error('fullHeight directive can only be used on elements')\n\t\t}\n\t\tconst el = part.element as HTMLElement\n\t\tif (this.element !== el) {\n\t\t\tthis.element = el\n\t\t\telementCount++\n\t\t\tthis.setupHeightStream()\n\t\t}\n\t}\n\n\tdisconnected() {\n\t\tthis.disconnecting$.next()\n\t\telementCount--\n\t\tcleanup()\n\t\tthis.element = null\n\t}\n\n\treconnected() {\n\t\tif (this.element) {\n\t\t\telementCount++\n\t\t\tthis.disconnecting$ = new Subject<void>()\n\t\t\tthis.setupHeightStream()\n\t\t}\n\t}\n}\n\nexport const fullHeight = directive(FullHeight)\n\n/**\n * fullWidth directive - fills remaining horizontal viewport space\n *\n * Reactive sources:\n * - Element ResizeObserver (detects when element moves/resizes)\n * - Parent ResizeObserver (layout shifts, e.g., sidebar)\n * - Window resize / visualViewport (viewport changes)\n * - Orientation change (device rotation)\n * - Theme fullscreen toggle (sidebar visibility)\n *\n * Performance:\n * - distinctUntilChanged prevents redundant style writes\n * - debounceTime(16) batches rapid events (~60fps)\n * - Single shared stream for global events\n */\nclass FullWidth extends AsyncDirective {\n\tprivate element: HTMLElement | null = null\n\tprivate disconnecting$ = new Subject<void>()\n\n\tprivate calculateWidth(): number {\n\t\tif (!this.element) return 0\n\t\tconst viewportWidth = window.visualViewport?.width ?? window.innerWidth\n\t\tconst leftOffset = this.element.getBoundingClientRect().left\n\t\treturn Math.max(0, viewportWidth - leftOffset)\n\t}\n\n\tprivate applyStyles(width: number) {\n\t\tif (this.element) {\n\t\t\tthis.element.style.boxSizing = 'border-box'\n\t\t\tthis.element.style.maxWidth = `${width}px`\n\t\t}\n\t}\n\n\tprivate setupWidthStream() {\n\t\tif (!this.element) return\n\n\t\tconst element = this.element\n\n\t\t// Element resize detects when element itself moves (e.g., after layout settles)\n\t\tconst elementResize$ = fromResizeObserver(element)\n\n\t\t// Parent resize detects layout shifts (e.g., sidebar opening/closing)\n\t\tconst parentResize$ = element.parentElement\n\t\t\t? fromResizeObserver(element.parentElement)\n\t\t\t: EMPTY\n\n\t\t// Global events (resize, viewport, orientation)\n\t\tconst globalEvents$ = getUpdateStream()\n\n\t\t// Combine all sources with theme observables for synchronous initial emission\n\t\t// theme.fullscreen$ has shareReplay(1) ensuring immediate emission on subscribe\n\t\t// Skip updates while pinch-zoomed to prevent layout thrashing\n\t\tcombineLatest([\n\t\t\tmerge(elementResize$, parentResize$, globalEvents$).pipe(startWith(null)),\n\t\t\ttheme.fullscreen$\n\t\t]).pipe(\n\t\t\tfilter(() => !isZoomed()),\n\t\t\tmap(() => this.calculateWidth()),\n\t\t\tdistinctUntilChanged(),\n\t\t\ttap(width => this.applyStyles(width)),\n\t\t\ttakeUntil(this.disconnecting$)\n\t\t).subscribe()\n\t}\n\n\trender() {\n\t\treturn\n\t}\n\n\tupdate(part: ElementPart) {\n\t\tif (part.type !== PartType.ELEMENT) {\n\t\t\tthrow new Error('fullWidth directive can only be used on elements')\n\t\t}\n\t\tconst el = part.element as HTMLElement\n\t\tif (this.element !== el) {\n\t\t\tthis.element = el\n\t\t\telementCount++\n\t\t\tthis.setupWidthStream()\n\t\t}\n\t}\n\n\tdisconnected() {\n\t\tthis.disconnecting$.next()\n\t\telementCount--\n\t\tcleanup()\n\t\tthis.element = null\n\t}\n\n\treconnected() {\n\t\tif (this.element) {\n\t\t\telementCount++\n\t\t\tthis.disconnecting$ = new Subject<void>()\n\t\t\tthis.setupWidthStream()\n\t\t}\n\t}\n}\n\nexport const fullWidth = directive(FullWidth)\n"],"mappings":"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"}

package/dist/layout.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./scroll-D8vBF_gY.cjs`);Object.defineProperty(exports,`SchmancyScroll`,{enumerable:!0,get:function(){return e.t}});
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./scroll-nIZyoEMt.cjs`);Object.defineProperty(exports,`SchmancyScroll`,{enumerable:!0,get:function(){return e.t}});

package/dist/layout.js

@@ -1,2 +1,2 @@
-import { t as e } from "./scroll-CG5up5oy.js";
+import { t as e } from "./scroll-BFHUtZOa.js";
 export { e as SchmancyScroll };

package/dist/lazy-D-bO2r4m.js.map

@@ -1 +1 @@
-{"version":3,"file":"lazy-D-bO2r4m.js","names":[],"sources":["../src/area/lazy.ts"],"sourcesContent":["/**\r\n * Lazy loading for Schmancy Area components\r\n * Similar to React.lazy() but adapted for Web Components\r\n */\r\n\r\n// Type definition for custom element constructors\r\ntype CustomElementConstructor = typeof HTMLElement\r\n\r\n/**\r\n * LazyComponent interface with preload capability\r\n */\r\nexport interface LazyComponent<T extends CustomElementConstructor = CustomElementConstructor> {\r\n  (): Promise<{ default: T }>\r\n  preload(): Promise<void>\r\n  _promise?: Promise<{ default: T }>\r\n  _module?: { default: T }\r\n}\r\n\r\n/**\r\n * Create a lazy-loaded component that will be imported on demand\r\n *\r\n * @example\r\n * ```typescript\r\n * const LazyProfile = lazy(() => import('./profile'))\r\n *\r\n * // Use with area.push\r\n * area.push({\r\n *   component: LazyProfile,\r\n *   area: 'main'\r\n * })\r\n *\r\n * // Preload on hover\r\n * element.addEventListener('mouseenter', () => LazyProfile.preload())\r\n * ```\r\n *\r\n * @param loader - Dynamic import function that returns a module with default export\r\n * @returns LazyComponent function compatible with area.push()\r\n */\r\nexport function lazy<T extends CustomElementConstructor>(\r\n  loader: () => Promise<{ default: T }>\r\n): LazyComponent<T> {\r\n\r\n  // Create the lazy component function\r\n  const lazyComponent = function(): Promise<{ default: T }> {\r\n    // Return cached promise if already loading/loaded\r\n    if (lazyComponent._promise) {\r\n      return lazyComponent._promise\r\n    }\r\n\r\n    // Return cached module if already loaded\r\n    if (lazyComponent._module) {\r\n      return Promise.resolve(lazyComponent._module)\r\n    }\r\n\r\n    // Start loading and cache the promise\r\n    lazyComponent._promise = loader()\r\n      .then(module => {\r\n        // Cache the loaded module\r\n        lazyComponent._module = module\r\n        return module\r\n      })\r\n      .catch(error => {\r\n        // Clear promise on error to allow retry\r\n        lazyComponent._promise = undefined\r\n        throw error\r\n      })\r\n\r\n    return lazyComponent._promise\r\n  } as LazyComponent<T>\r\n\r\n  // Add preload method for manual preloading\r\n  lazyComponent.preload = async function(): Promise<void> {\r\n    try {\r\n      await lazyComponent()\r\n    } catch (error) {\r\n      console.error('Failed to preload component:', error)\r\n    }\r\n  }\r\n\r\n  return lazyComponent\r\n}\r\n\r\n\r\n"],"mappings":"AAsCA,SAAgB,EACd,GAAA;CAIA,IAAM,IAAgB,WAAA;AAEpB,SAAI,EAAc,WACT,EAAc,WAInB,EAAc,UACT,QAAQ,QAAQ,EAAc,QAAA,IAIvC,EAAc,WAAW,GAAA,CACtB,MAAK,OAEJ,EAAc,UAAU,GACjB,GAAA,CAER,OAAM,MAAA;AAGL,SADA,EAAc,WAAA,KAAW,GACnB;IAAA,EAGH,EAAc;;AAYvB,QARA,EAAc,UAAU,iBAAA;AACtB,MAAA;AAAA,SACQ,GAAA;UACC;IAKJ;;AAAA,SAAA"}
+{"version":3,"file":"lazy-D-bO2r4m.js","names":[],"sources":["../src/area/lazy.ts"],"sourcesContent":["/**\r\n * Lazy loading for Schmancy Area components\r\n * Similar to React.lazy() but adapted for Web Components\r\n */\r\n\r\n// Type definition for custom element constructors\r\ntype CustomElementConstructor = typeof HTMLElement\r\n\r\n/**\r\n * LazyComponent interface with preload capability\r\n */\r\nexport interface LazyComponent<T extends CustomElementConstructor = CustomElementConstructor> {\r\n  (): Promise<{ default: T }>\r\n  preload(): Promise<void>\r\n  _promise?: Promise<{ default: T }>\r\n  _module?: { default: T }\r\n}\r\n\r\n/**\r\n * Create a lazy-loaded component that will be imported on demand\r\n *\r\n * @example\r\n * ```typescript\r\n * const LazyProfile = lazy(() => import('./profile'))\r\n *\r\n * // Use with area.push\r\n * area.push({\r\n *   component: LazyProfile,\r\n *   area: 'main'\r\n * })\r\n *\r\n * // Preload on hover\r\n * element.addEventListener('mouseenter', () => LazyProfile.preload())\r\n * ```\r\n *\r\n * @param loader - Dynamic import function that returns a module with default export\r\n * @returns LazyComponent function compatible with area.push()\r\n */\r\nexport function lazy<T extends CustomElementConstructor>(\r\n  loader: () => Promise<{ default: T }>\r\n): LazyComponent<T> {\r\n\r\n  // Create the lazy component function\r\n  const lazyComponent = function(): Promise<{ default: T }> {\r\n    // Return cached promise if already loading/loaded\r\n    if (lazyComponent._promise) {\r\n      return lazyComponent._promise\r\n    }\r\n\r\n    // Return cached module if already loaded\r\n    if (lazyComponent._module) {\r\n      return Promise.resolve(lazyComponent._module)\r\n    }\r\n\r\n    // Start loading and cache the promise\r\n    lazyComponent._promise = loader()\r\n      .then(module => {\r\n        // Cache the loaded module\r\n        lazyComponent._module = module\r\n        return module\r\n      })\r\n      .catch(error => {\r\n        // Clear promise on error to allow retry\r\n        lazyComponent._promise = undefined\r\n        throw error\r\n      })\r\n\r\n    return lazyComponent._promise\r\n  } as LazyComponent<T>\r\n\r\n  // Add preload method for manual preloading\r\n  lazyComponent.preload = async function(): Promise<void> {\r\n    try {\r\n      await lazyComponent()\r\n    } catch (error) {\r\n      console.error('Failed to preload component:', error)\r\n    }\r\n  }\r\n\r\n  return lazyComponent\r\n}\r\n\r\n\r\n"],"mappings":"AAsCA,SAAgB,EACd,GAAA;CAIA,IAAM,IAAgB,WAAA;EAEpB,OAAI,EAAc,WACT,EAAc,WAInB,EAAc,UACT,QAAQ,QAAQ,EAAc,QAAA,IAIvC,EAAc,WAAW,GAAA,CACtB,MAAK,OAEJ,EAAc,UAAU,GACjB,GAAA,CAER,OAAM,MAAA;GAGL,MADA,EAAc,WAAA,KAAW,GACnB;IAAA,EAGH,EAAc;;CAYvB,OARA,EAAc,UAAU,iBAAA;EACtB,IAAA;GAAA,MACQ,GAAA;UACC;IAKJ;;AAAA,SAAA"}