@mhmo91/schmancy 0.10.42 → 0.10.43

package/dist/{chips-DF7akwz7.js → chips-DACeW7YL.js}

@@ -1,7 +1,7 @@
-import { t as e, u as t } from "./SchmancyElement-OG71FtNv.js";
-import { o as n } from "./mixins-bCEXbwJV.js";
-import "./input-chip-CYI17YOq.js";
-import { r } from "./layout-DDxw0EwL.js";
+import { t as e, u as t } from "./SchmancyElement-Ob9yGkiG.js";
+import { o as n } from "./mixins-q4KAL8Xr.js";
+import "./input-chip-C3a1fwKB.js";
+import { r } from "./layout-k6fOkpif.js";
 import { t as i } from "./magnetic-DaOOv5Dz.js";
 import { BehaviorSubject as a, combineLatest as o } from "rxjs";
 import { debounceTime as s, distinctUntilChanged as c, takeUntil as l } from "rxjs/operators";
@@ -49,56 +49,56 @@ var x = class extends e {
 	}
 	static {
 		this.styles = [g`
-	:host {
-		display: inline-block;
-		outline: none;
-		width: fit-content;
-		min-width: fit-content;
-	}
+			:host {
+				display: inline-block;
+				outline: none;
+				width: fit-content;
+				min-width: fit-content;
+			}
 
-	:host([disabled]) {
-		pointer-events: none;
-	}
+			:host([disabled]) {
+				pointer-events: none;
+			}
 
-	.ripple {
-		position: absolute;
-		border-radius: 50%;
-		transform: scale(0);
-		animation: ripple 600ms linear;
-		background-color: rgba(0, 0, 0, 0.08);
-		pointer-events: none;
-	}
+			.ripple {
+				position: absolute;
+				border-radius: 50%;
+				transform: scale(0);
+				animation: ripple 600ms linear;
+				background-color: rgba(0, 0, 0, 0.08);
+				pointer-events: none;
+			}
 
-	@keyframes ripple {
-		to {
-			transform: scale(4);
-			opacity: 0;
-		}
-	}
+			@keyframes ripple {
+				to {
+					transform: scale(4);
+					opacity: 0;
+				}
+			}
 
-	/* State layer for M3 hover/focus/pressed states */
-	.state-layer {
-		position: absolute;
-		inset: 0;
-		border-radius: inherit;
-		pointer-events: none;
-		background-color: currentColor;
-		opacity: 0;
-		transition: opacity 200ms ease;
-	}
+			/* State layer for M3 hover/focus/pressed states */
+			.state-layer {
+				position: absolute;
+				inset: 0;
+				border-radius: inherit;
+				pointer-events: none;
+				background-color: currentColor;
+				opacity: 0;
+				transition: opacity 200ms ease;
+			}
 
-	:host(:not([disabled])) button:hover .state-layer {
-		opacity: 0.08;
-	}
+			:host(:not([disabled])) button:hover .state-layer {
+				opacity: 0.08;
+			}
 
-	:host(:not([disabled])) button:focus-visible .state-layer {
-		opacity: 0.1;
-	}
+			:host(:not([disabled])) button:focus-visible .state-layer {
+				opacity: 0.1;
+			}
 
-	:host(:not([disabled])) button:active .state-layer {
-		opacity: 0.1;
-	}
-`];
+			:host(:not([disabled])) button:active .state-layer {
+				opacity: 0.1;
+			}
+		`];
 	}
 	static {
 		this.shadowRootOptions = {
@@ -159,20 +159,13 @@ var x = class extends e {
 				aria-disabled=${this.disabled}
 				aria-label=${this.value}
 			>
-				${this.icon ? _`
-					<schmancy-icon class="text-[18px] shrink-0">${this.icon}</schmancy-icon>
-				` : ""}
+				${this.icon ? _` <schmancy-icon class="text-[18px] shrink-0">${this.icon}</schmancy-icon> ` : ""}
 				<span class="text-sm font-medium leading-5">
 					<slot></slot>
 				</span>
 
 				<!-- Ripple effects -->
-				${this.ripples.map((e) => _`
-					<span
-						class="ripple"
-						style="left: ${e.x}px; top: ${e.y}px;"
-					></span>
-				`)}
+				${this.ripples.map((e) => _` <span class="ripple" style="left: ${e.x}px; top: ${e.y}px;"></span> `)}
 
 				<!-- State layer for M3 hover/focus/pressed states -->
 				<div class="state-layer"></div>
@@ -188,11 +181,11 @@ t([f({ reflect: !0 })], x.prototype, "value", void 0), t([f({ reflect: !0 })], x
 	reflect: !0
 })], x.prototype, "elevated", void 0), t([m()], x.prototype, "ripples", void 0), x = t([d("schmancy-assist-chip")], x);
 var S = class extends n(g`
-:host {
-	display: block;
-	height: fit-content;
-	width: fit-content;
-}
+	:host {
+		display: block;
+		height: fit-content;
+		width: fit-content;
+	}
 `) {
 	constructor(...e) {
 		super(...e), this.multi = !1, this.wrap = !1, this.justify = "start", this.value$ = new a(""), this.values$ = new a([]);
@@ -279,8 +272,7 @@ var S = class extends n(g`
 			"rounded-lg transition-all duration-200": !0,
 			"outline outline-2 outline-offset-4 outline-error-default": this.error
 		};
-		return _`
-			<div class="${this.classMap(t)}">
+		return _` <div class="${this.classMap(t)}">
 				<schmancy-scroll
 					hide
 					.direction=${this.wrap ? "vertical" : "horizontal"}
@@ -324,33 +316,37 @@ t([f({
 var C = class extends e {
 	static {
 		this.styles = [g`
-	:host {
-		display: inline-flex;
-		flex-shrink: 0;
-		outline: none;
-		border-radius: 0.5rem;
-		transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
-	}
+			:host {
+				display: inline-flex;
+				flex-shrink: 0;
+				outline: none;
+				border-radius: 0.5rem;
+				transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
+			}
 
-	:host(:active:not([disabled])) {
-		transform: scale(0.95);
-		transition-duration: 100ms;
-	}
+			:host(:active:not([disabled])) {
+				transform: scale(0.95);
+				transition-duration: 100ms;
+			}
 
-	:host([disabled]) {
-		pointer-events: none;
-		opacity: var(--schmancy-sys-state-disabled-opacity);
-	}
+			:host([disabled]) {
+				pointer-events: none;
+				opacity: var(--schmancy-sys-state-disabled-opacity);
+			}
 
-	@media (prefers-reduced-motion: reduce) {
-		:host { transition: none; }
-		:host(:active:not([disabled])) { transform: none; }
-	}
+			@media (prefers-reduced-motion: reduce) {
+				:host {
+					transition: none;
+				}
+				:host(:active:not([disabled])) {
+					transform: none;
+				}
+			}
 
-	button {
-		font-family: inherit;
-	}
-`];
+			button {
+				font-family: inherit;
+			}
+		`];
 	}
 	#e;
 	get selected() {
@@ -535,56 +531,56 @@ var w = class extends e {
 	}
 	static {
 		this.styles = [g`
-	:host {
-		display: inline-block;
-		outline: none;
-		width: fit-content;
-		min-width: fit-content;
-	}
+			:host {
+				display: inline-block;
+				outline: none;
+				width: fit-content;
+				min-width: fit-content;
+			}
 
-	:host([disabled]) {
-		pointer-events: none;
-	}
+			:host([disabled]) {
+				pointer-events: none;
+			}
 
-	.ripple {
-		position: absolute;
-		border-radius: 50%;
-		transform: scale(0);
-		animation: ripple 600ms linear;
-		background-color: rgba(0, 0, 0, 0.08);
-		pointer-events: none;
-	}
+			.ripple {
+				position: absolute;
+				border-radius: 50%;
+				transform: scale(0);
+				animation: ripple 600ms linear;
+				background-color: rgba(0, 0, 0, 0.08);
+				pointer-events: none;
+			}
 
-	@keyframes ripple {
-		to {
-			transform: scale(4);
-			opacity: 0;
-		}
-	}
+			@keyframes ripple {
+				to {
+					transform: scale(4);
+					opacity: 0;
+				}
+			}
 
-	/* State layer for M3 hover/focus/pressed states */
-	.state-layer {
-		position: absolute;
-		inset: 0;
-		border-radius: inherit;
-		pointer-events: none;
-		background-color: currentColor;
-		opacity: 0;
-		transition: opacity 200ms ease;
-	}
+			/* State layer for M3 hover/focus/pressed states */
+			.state-layer {
+				position: absolute;
+				inset: 0;
+				border-radius: inherit;
+				pointer-events: none;
+				background-color: currentColor;
+				opacity: 0;
+				transition: opacity 200ms ease;
+			}
 
-	:host(:not([disabled])) button:hover .state-layer {
-		opacity: 0.08;
-	}
+			:host(:not([disabled])) button:hover .state-layer {
+				opacity: 0.08;
+			}
 
-	:host(:not([disabled])) button:focus-visible .state-layer {
-		opacity: 0.1;
-	}
+			:host(:not([disabled])) button:focus-visible .state-layer {
+				opacity: 0.1;
+			}
 
-	:host(:not([disabled])) button:active .state-layer {
-		opacity: 0.1;
-	}
-`];
+			:host(:not([disabled])) button:active .state-layer {
+				opacity: 0.1;
+			}
+		`];
 	}
 	static {
 		this.shadowRootOptions = {
@@ -643,20 +639,13 @@ var w = class extends e {
 				aria-disabled=${this.disabled}
 				aria-label=${this.value}
 			>
-				${this.icon ? _`
-					<schmancy-icon class="text-[18px] shrink-0">${this.icon}</schmancy-icon>
-				` : ""}
+				${this.icon ? _` <schmancy-icon class="text-[18px] shrink-0">${this.icon}</schmancy-icon> ` : ""}
 				<span class="text-sm font-medium leading-5">
 					<slot></slot>
 				</span>
 
 				<!-- Ripple effects -->
-				${this.ripples.map((e) => _`
-					<span
-						class="ripple"
-						style="left: ${e.x}px; top: ${e.y}px;"
-					></span>
-				`)}
+				${this.ripples.map((e) => _` <span class="ripple" style="left: ${e.x}px; top: ${e.y}px;"></span> `)}
 
 				<!-- State layer for M3 hover/focus/pressed states -->
 				<div class="state-layer"></div>

package/dist/chips-DACeW7YL.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chips-DACeW7YL.js","names":["#selected"],"sources":["../src/form/fields/chips/assist-chip.ts","../src/form/fields/chips/chips.ts","../src/form/fields/chips/filter-chip.ts","../src/form/fields/chips/suggestion-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 { takeUntil } from 'rxjs/operators'\n\n/**\n * Assist chip component - prompts user actions like opening calendar events or sharing content\n * Pure Schmancy implementation with Tailwind CSS and RxJS state management\n */\n@customElement('schmancy-assist-chip')\nexport class SchmancyAssistChip extends SchmancyElement {\n\tstatic styles = [\n\t\tcss`\n\t\t\t:host {\n\t\t\t\tdisplay: inline-block;\n\t\t\t\toutline: none;\n\t\t\t\twidth: fit-content;\n\t\t\t\tmin-width: fit-content;\n\t\t\t}\n\n\t\t\t:host([disabled]) {\n\t\t\t\tpointer-events: none;\n\t\t\t}\n\n\t\t\t.ripple {\n\t\t\t\tposition: absolute;\n\t\t\t\tborder-radius: 50%;\n\t\t\t\ttransform: scale(0);\n\t\t\t\tanimation: ripple 600ms linear;\n\t\t\t\tbackground-color: rgba(0, 0, 0, 0.08);\n\t\t\t\tpointer-events: none;\n\t\t\t}\n\n\t\t\t@keyframes ripple {\n\t\t\t\tto {\n\t\t\t\t\ttransform: scale(4);\n\t\t\t\t\topacity: 0;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t/* State layer for M3 hover/focus/pressed states */\n\t\t\t.state-layer {\n\t\t\t\tposition: absolute;\n\t\t\t\tinset: 0;\n\t\t\t\tborder-radius: inherit;\n\t\t\t\tpointer-events: none;\n\t\t\t\tbackground-color: currentColor;\n\t\t\t\topacity: 0;\n\t\t\t\ttransition: opacity 200ms ease;\n\t\t\t}\n\n\t\t\t:host(:not([disabled])) button:hover .state-layer {\n\t\t\t\topacity: 0.08;\n\t\t\t}\n\n\t\t\t:host(:not([disabled])) button:focus-visible .state-layer {\n\t\t\t\topacity: 0.1;\n\t\t\t}\n\n\t\t\t:host(:not([disabled])) button:active .state-layer {\n\t\t\t\topacity: 0.1;\n\t\t\t}\n\t\t`,\n\t]\n\t/** Value identifier for the chip */\n\t@property({ reflect: true }) value = ''\n\n\t/** Optional icon name (Material Symbols) */\n\t@property({ reflect: true }) icon = ''\n\n\t/** Optional href for navigation */\n\t@property({ reflect: true }) href = ''\n\n\t/** Target for navigation (e.g., '_blank') */\n\t@property({ reflect: true }) target = ''\n\n\t/** Disable the chip */\n\t@property({ type: Boolean, reflect: true }) disabled = false\n\n\t/** Elevated style variant - true by default per M3 spec for assist chips */\n\t@property({ type: Boolean, reflect: true }) elevated = true\n\n\t// RxJS state streams\n\tprivate hover$ = new BehaviorSubject<boolean>(false)\n\tprivate pressed$ = new BehaviorSubject<boolean>(false)\n\tprivate focused$ = new BehaviorSubject<boolean>(false)\n\n\t// UI state - only ripples needed for rendering\n\t@state() private ripples: Array<{ x: number; y: number; id: number }> = []\n\n\tprotected static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true }\n\n\tprivate nextRippleId = 0\n\n\tconnectedCallback() {\n\t\tsuper.connectedCallback()\n\n\t\t// Stream management for future extensions\n\t\t// Currently, states are handled directly in event handlers\n\t\t// This pipeline can be extended for more complex state interactions\n\t\tcombineLatest([this.hover$, this.pressed$, this.focused$])\n\t\t\t.pipe(\n\t\t\t\t// States are managed through event handlers directly\n\t\t\t\t// This pipeline is kept for potential future state combinations\n\t\t\t\ttakeUntil(this.disconnecting),\n\t\t\t)\n\t\t\t.subscribe()\n\t}\n\n\tprivate handleClick = (e: MouseEvent) => {\n\t\tif (this.disabled) return\n\n\t\t// Add ripple effect\n\t\tconst button = this.shadowRoot?.querySelector('button')\n\t\tif (button) {\n\t\t\tconst rect = button.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// Navigate if href is provided\n\t\tif (this.href) {\n\t\t\tif (this.target === '_blank') {\n\t\t\t\twindow.open(this.href, '_blank')\n\t\t\t} else {\n\t\t\t\twindow.location.href = this.href\n\t\t\t}\n\t\t}\n\n\t\t// Dispatch action event\n\t\tthis.dispatchEvent(\n\t\t\tnew CustomEvent('action', {\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\tif (e.key === 'Enter' || e.key === ' ') {\n\t\t\te.preventDefault()\n\t\t\tthis.pressed$.next(true)\n\n\t\t\t// Simulate click\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.handleClick(clickEvent)\n\n\t\t\tsetTimeout(() => this.pressed$.next(false), 100)\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\trender() {\n\t\tconst hasIcon = !!this.icon\n\n\t\tconst classes = {\n\t\t\trelative: 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-pointer': !this.disabled,\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'overflow-hidden': true,\n\n\t\t\t// M3 Padding: 8px with icon, 16px without (leading), 16px trailing\n\t\t\t'pl-2': hasIcon, // 8px with icon\n\t\t\t'pl-4': !hasIcon, // 16px without icon\n\t\t\t'pr-4': true, // 16px trailing\n\n\t\t\t// M3 Colors - assist chips are elevated by default\n\t\t\t'bg-surface-containerLow': true,\n\t\t\t'text-surface-onVariant': true,\n\n\t\t\t// M3: Assist chips elevated by default (shadow-1)\n\t\t\t'shadow-sm': this.elevated && !this.disabled, // shadow-1 for elevation\n\t\t\t'hover:shadow-md': this.elevated && !this.disabled, // elevated on hover\n\n\t\t\t// Focus 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\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\treturn html`\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\tclass=${classMap(classes)}\n\t\t\t\t?disabled=${this.disabled}\n\t\t\t\t@click=${this.handleClick}\n\t\t\t\t@keydown=${this.handleKeyDown}\n\t\t\t\t@mouseenter=${() => this.hover$.next(true)}\n\t\t\t\t@mouseleave=${() => this.hover$.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\ttabindex=${this.disabled ? '-1' : '0'}\n\t\t\t\trole=\"button\"\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${this.icon ? html` <schmancy-icon class=\"text-[18px] shrink-0\">${this.icon}</schmancy-icon> ` : ''}\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<!-- Ripple effects -->\n\t\t\t\t${this.ripples.map(\n\t\t\t\t\tripple => html` <span class=\"ripple\" style=\"left: ${ripple.x}px; top: ${ripple.y}px;\"></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</button>\n\t\t`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-assist-chip': SchmancyAssistChip\n\t}\n}\n\nexport type AssistChipActionEvent = { value: string }\n","import { SchmancyFormField } from '@mixins/formField.mixin'\nimport { css, html, nothing, PropertyValues } from 'lit'\nimport { customElement, property, queryAssignedElements } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { when } from 'lit/directives/when.js'\nimport { BehaviorSubject, combineLatest } from 'rxjs'\nimport { debounceTime, distinctUntilChanged, takeUntil } from 'rxjs/operators'\nimport { fullWidth } from '../../../directives/layout'\nimport type { FilterChipChangeEvent as SchmancyChipChangeEvent } from './filter-chip'\nimport { SchmancyFilterChip as SchmancyChip } from './filter-chip'\n\nexport type SchmancyChipsChangeEvent = CustomEvent<{ value: string | string[] }>\n\n@customElement('schmancy-chips')\nexport default class SchmancyChips extends SchmancyFormField(css`\n\t:host {\n\t\tdisplay: block;\n\t\theight: fit-content;\n\t\twidth: fit-content;\n\t}\n`) {\n\t// FACE wiring (formAssociated, internals, attachInternals) comes from\n\t// SchmancyFormField. Same for: name, required, disabled, validationMessage,\n\t// validateOn, touched/dirty/pristine/submitted, markTouched/markSubmitted,\n\t// formResetCallback, formDisabledCallback, FIELD_CONNECT_EVENT dispatch,\n\t// emitChange(), checkValidity(), reportValidity(), setCustomValidity().\n\n\t/** Whether multiple chips can be selected simultaneously. */\n\t@property({ type: Boolean, reflect: true })\n\tmulti: boolean = false\n\n\t// Override `value` with the chips-specific type and a custom getter/setter\n\t// pair backed by reactive subjects.\n\t@property({ reflect: false })\n\toverride get value(): string | string[] {\n\t\treturn this.multi ? (this.values$?.value ?? []) : (this.value$?.value ?? '')\n\t}\n\toverride set value(v: string | string[]) {\n\t\tconst old = this.value\n\t\tif (this.multi) {\n\t\t\tconst arr = Array.isArray(v)\n\t\t\t\t? v\n\t\t\t\t: v\n\t\t\t\t\t? String(v)\n\t\t\t\t\t\t\t.split(',')\n\t\t\t\t\t\t\t.map(s => s.trim())\n\t\t\t\t\t\t\t.filter(Boolean)\n\t\t\t\t\t: []\n\t\t\tthis.values$?.next(arr)\n\t\t} else {\n\t\t\tthis.value$?.next(Array.isArray(v) ? (v[0] ?? '') : String(v ?? ''))\n\t\t}\n\t\tthis.requestUpdate('value', old)\n\t}\n\n\t/** Typed convenience alias for multi-mode consumers. */\n\tget values(): string[] {\n\t\treturn [...(this.values$?.value ?? [])]\n\t}\n\tset values(v: string[]) {\n\t\tthis.values$?.next(Array.isArray(v) ? [...v] : [])\n\t}\n\n\t@property({ type: Boolean, reflect: true })\n\twrap: boolean = false\n\n\t@property({ type: String, reflect: true })\n\tjustify: 'start' | 'center' | 'end' = 'start'\n\n\t@queryAssignedElements({\n\t\tselector:\n\t\t\t'schmancy-chip, schmancy-filter-chip, schmancy-assist-chip, schmancy-input-chip, schmancy-suggestion-chip',\n\t\tflatten: true,\n\t})\n\tchips!: (SchmancyChip | HTMLElement)[]\n\n\t// Two internal streams — one for single mode, one for multi mode.\n\tprivate value$ = new BehaviorSubject<string>('')\n\tprivate values$ = new BehaviorSubject<string[]>([])\n\n\tprotected override willUpdate(changedProps: PropertyValues): void {\n\t\tsuper.willUpdate(changedProps)\n\t\t// super handles the string path; fix the array path for multi mode.\n\t\tif (changedProps.has('value') && Array.isArray(this.value) && this.name) {\n\t\t\tconst fd = new FormData()\n\t\t\tthis.value.forEach(v => fd.append(this.name, v))\n\t\t\tthis.internals?.setFormValue(fd)\n\t\t}\n\t}\n\n\toverride checkValidity(): boolean {\n\t\tif (this.required && Array.isArray(this.value) && this.value.length === 0) {\n\t\t\tconst msg = this.errorMessages?.valueMissing ?? 'This field is required'\n\t\t\tthis.internals?.setValidity({ valueMissing: true }, msg)\n\t\t\tif (this.submitted || this.dirty || this.touched || this.validateOn === 'always') {\n\t\t\t\tthis.error = true\n\t\t\t\tthis.validationMessage = msg\n\t\t\t}\n\t\t\treturn false\n\t\t}\n\t\treturn super.checkValidity()\n\t}\n\n\toverride connectedCallback() {\n\t\tsuper.connectedCallback()\n\n\t\t// Sync BehaviorSubjects with whatever value was set before connection.\n\t\tif (this.multi) {\n\t\t\tconst cur = this.value\n\t\t\tthis.values$.next(Array.isArray(cur) ? cur : [])\n\t\t} else {\n\t\t\tconst cur = this.value\n\t\t\tthis.value$.next(Array.isArray(cur) ? (cur[0] ?? '') : String(cur ?? ''))\n\t\t}\n\n\t\tcombineLatest([\n\t\t\tthis.value$.pipe(distinctUntilChanged()),\n\t\t\tthis.values$.pipe(\n\t\t\t\tdistinctUntilChanged((prev, curr) => prev.length === curr.length && prev.every((v, i) => v === curr[i])),\n\t\t\t),\n\t\t])\n\t\t\t.pipe(debounceTime(0), takeUntil(this.disconnecting))\n\t\t\t.subscribe(([value, values]) => {\n\t\t\t\tthis.updateChipStates(value, values)\n\t\t\t})\n\t}\n\n\tprivate updateChipStates(value: string, values: string[]) {\n\t\tif (!this.chips) return\n\n\t\tthis.chips.forEach(chip => {\n\t\t\tif ('value' in chip && 'selected' in chip) {\n\t\t\t\tconst filterChip = chip as SchmancyChip\n\t\t\t\tif (this.multi) {\n\t\t\t\t\tfilterChip.selected = values.length > 0 && values.includes(filterChip.value)\n\t\t\t\t} else {\n\t\t\t\t\tfilterChip.selected = value !== '' && value === filterChip.value\n\t\t\t\t}\n\t\t\t}\n\t\t})\n\t}\n\n\tasync change(e: CustomEvent<SchmancyChipChangeEvent>) {\n\t\te.preventDefault()\n\t\te.stopPropagation()\n\n\t\tconst { value: chipValue, selected } = e.detail\n\n\t\tif (this.multi) {\n\t\t\tconst old = this.value\n\t\t\tif (selected) {\n\t\t\t\tif (!this.values$.value.includes(chipValue)) {\n\t\t\t\t\tthis.values$.next([...this.values$.value, chipValue])\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\tthis.values$.next(this.values$.value.filter(v => v !== chipValue))\n\t\t\t}\n\t\t\tthis.requestUpdate('value', old)\n\t\t} else {\n\t\t\tconst old = this.value\n\t\t\tif (selected) {\n\t\t\t\tthis.value$.next(chipValue)\n\t\t\t} else if (!this.required) {\n\t\t\t\tthis.value$.next('')\n\t\t\t} else {\n\t\t\t\t// Required single-mode: ignore deselection attempt.\n\t\t\t\treturn\n\t\t\t}\n\t\t\tthis.requestUpdate('value', old)\n\t\t}\n\n\t\tthis.emitChange({ value: this.multi ? this.values$.value : this.value$.value })\n\t}\n\n\toverride resetForm(): void {\n\t\tsuper.resetForm()\n\t\tthis.value$.next('')\n\t\tthis.values$.next([])\n\t}\n\n\tprotected firstUpdated(changedProperties: PropertyValues): void {\n\t\tsuper.firstUpdated(changedProperties)\n\t\tthis.updateChipStates(this.value$.value, this.values$.value)\n\t}\n\n\tprotected render(): unknown {\n\t\tconst classes = {\n\t\t\t'flex flex-nowrap justify-center gap-2': true,\n\t\t\t'flex-wrap': this.wrap,\n\t\t\t'justify-center': this.justify === 'center',\n\t\t}\n\t\tconst wrapperClasses = {\n\t\t\t'rounded-lg transition-all duration-200': true,\n\t\t\t'outline outline-2 outline-offset-4 outline-error-default': this.error,\n\t\t}\n\t\treturn html` <div class=\"${this.classMap(wrapperClasses)}\">\n\t\t\t\t<schmancy-scroll\n\t\t\t\t\thide\n\t\t\t\t\t.direction=${this.wrap ? 'vertical' : 'horizontal'}\n\t\t\t\t\tclass=\"${this.classMap(classes)}\"\n\t\t\t\t\t${fullWidth()}\n\t\t\t\t\t@change=${this.change}\n\t\t\t\t>\n\t\t\t\t\t<slot\n\t\t\t\t\t\t@slotchange=${() => {\n\t\t\t\t\t\t\tthis.updateChipStates(this.value$.value, this.values$.value)\n\t\t\t\t\t\t}}\n\t\t\t\t\t></slot>\n\t\t\t\t</schmancy-scroll>\n\t\t\t</div>\n\n\t\t\t${when(\n\t\t\t\tthis.hint || (this.error && this.validationMessage),\n\t\t\t\t() => html`\n\t\t\t\t\t<div\n\t\t\t\t\t\tid=\"hint-${this.id}\"\n\t\t\t\t\t\tclass=\"mt-1 text-sm ${this.error ? 'text-error-default' : 'text-surface-onVariant'}\"\n\t\t\t\t\t\trole=${ifDefined(this.error ? 'alert' : undefined)}\n\t\t\t\t\t\taria-live=\"polite\"\n\t\t\t\t\t>\n\t\t\t\t\t\t${this.error && this.validationMessage ? this.validationMessage : this.hint}\n\t\t\t\t\t</div>\n\t\t\t\t`,\n\t\t\t\t() => nothing,\n\t\t\t)}`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-chips': SchmancyChips\n\t}\n}\n","import { SchmancyElement } from '@mixins/index'\nimport { css, html, LitElement } from 'lit'\nimport { property } from 'lit/decorators.js'\nimport { magnetic } from '../../../directives/magnetic'\n\n/**\n * Filter chip component for content filtering.\n *\n * Filter chips are the ONLY chip type that maintains persistent selected state.\n * They are used for filtering content by toggling on/off different filter criteria.\n *\n * @fires change - Dispatched when selection state changes with {value, selected}\n * @fires remove - Dispatched when remove button is clicked (if removable)\n *\n * @example\n * ```html\n * <schmancy-filter-chip value=\"category-1\" selected>\n *   Category 1\n * </schmancy-filter-chip>\n * ```\n */\nexport class SchmancyFilterChip extends SchmancyElement {\n\tstatic styles = [\n\t\tcss`\n\t\t\t:host {\n\t\t\t\tdisplay: inline-flex;\n\t\t\t\tflex-shrink: 0;\n\t\t\t\toutline: none;\n\t\t\t\tborder-radius: 0.5rem;\n\t\t\t\ttransition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1);\n\t\t\t}\n\n\t\t\t:host(:active:not([disabled])) {\n\t\t\t\ttransform: scale(0.95);\n\t\t\t\ttransition-duration: 100ms;\n\t\t\t}\n\n\t\t\t:host([disabled]) {\n\t\t\t\tpointer-events: none;\n\t\t\t\topacity: var(--schmancy-sys-state-disabled-opacity);\n\t\t\t}\n\n\t\t\t@media (prefers-reduced-motion: reduce) {\n\t\t\t\t:host {\n\t\t\t\t\ttransition: none;\n\t\t\t\t}\n\t\t\t\t:host(:active:not([disabled])) {\n\t\t\t\t\ttransform: none;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tbutton {\n\t\t\t\tfont-family: inherit;\n\t\t\t}\n\t\t`,\n\t]\n\t/** Unique identifier for this filter chip */\n\t@property({ type: String, reflect: true })\n\tvalue: string = ''\n\n\t/** Whether the filter chip is selected (active filter) */\n\t#selected: boolean = false\n\n\t@property({ type: Boolean, reflect: true })\n\tget selected(): boolean {\n\t\treturn this.#selected\n\t}\n\tset selected(value: boolean) {\n\t\tconst oldValue = this.#selected\n\t\tthis.#selected = value\n\t\tthis.requestUpdate('selected', oldValue)\n\t}\n\n\t/** Whether to show a remove button */\n\t@property({ type: Boolean, reflect: true })\n\tremovable: boolean = false\n\n\t/** Whether the chip is disabled */\n\t@property({ type: Boolean, reflect: true })\n\tdisabled: boolean = false\n\n\t/** Whether to use elevated style with shadow */\n\t@property({ type: Boolean, reflect: true })\n\televated: boolean = false\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\tconnectedCallback() {\n\t\tsuper.connectedCallback()\n\t}\n\n\tprotected updated(changed: Map<string, unknown>) {\n\t\tsuper.updated?.(changed)\n\t\tif (changed.has('value') || changed.has('selected')) {\n\t\t\tthis.internals?.setFormValue(this.#selected ? this.value || 'on' : null)\n\t\t}\n\t}\n\n\tformResetCallback(): void {\n\t\tthis.#selected = this.hasAttribute('selected')\n\t}\n\n\tformDisabledCallback(disabled: boolean): void {\n\t\tthis.disabled = disabled\n\t}\n\n\tprivate handleClick = () => {\n\t\tif (this.disabled) return\n\n\t\tthis.dispatchEvent(\n\t\t\tnew CustomEvent('change', {\n\t\t\t\tdetail: { value: this.value, selected: !this.#selected },\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\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\tif (e.key === 'Enter' || e.key === ' ') {\n\t\t\te.preventDefault()\n\t\t\tthis.dispatchEvent(\n\t\t\t\tnew CustomEvent('change', {\n\t\t\t\t\tdetail: { value: this.value, selected: !this.#selected },\n\t\t\t\t\tbubbles: true,\n\t\t\t\t\tcomposed: true,\n\t\t\t\t}),\n\t\t\t)\n\t\t}\n\t}\n\n\tprotected render(): unknown {\n\t\tconst chipClasses = {\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'rounded-lg': true,\n\t\t\t'h-8 px-4': true,\n\t\t\t'cursor-pointer': !this.disabled,\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,\n\t\t\t'font-medium': true,\n\t\t\trelative: true,\n\t\t\t'min-h-[32px]': true,\n\n\t\t\t// Background and text colors based on selection state\n\t\t\t'bg-secondary-container': this.#selected,\n\t\t\t'text-secondary-onContainer': this.#selected,\n\t\t\t'bg-surface-container': !this.#selected,\n\t\t\t'text-surface-on': !this.#selected,\n\n\t\t\t// Hover states\n\t\t\t'hover:brightness-95': this.#selected && !this.disabled,\n\t\t\t'hover:bg-surface-containerHigh': !this.#selected && !this.disabled,\n\n\t\t\t// Pressed state\n\t\t\t'active:brightness-90': !this.disabled,\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-offset-2': !this.disabled,\n\t\t\t'focus-visible:outline-primary-default': !this.disabled,\n\n\t\t\t// Elevated style\n\t\t\t'shadow-md': this.elevated && !this.disabled,\n\t\t\t'hover:shadow-lg': this.elevated && !this.disabled,\n\n\t\t\t// Disabled state\n\t\t\t'opacity-[var(--schmancy-sys-state-disabled-opacity)]': this.disabled,\n\t\t\t'cursor-not-allowed': this.disabled,\n\t\t}\n\n\t\treturn html`\n\t\t\t<button\n\t\t\t\t${magnetic({ strength: 2, radius: 40 })}\n\t\t\t\tclass=${this.classMap(chipClasses)}\n\t\t\t\t@click=${this.handleClick}\n\t\t\t\t@keydown=${this.handleKeyDown}\n\t\t\t\t?disabled=${this.disabled}\n\t\t\t\taria-pressed=${this.#selected ? 'true' : 'false'}\n\t\t\t\trole=\"checkbox\"\n\t\t\t\ttabindex=\"0\"\n\t\t\t>\n\t\t\t\t<slot></slot>\n\n\t\t\t\t${this.removable\n\t\t\t\t\t? html`\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\tclass=\"ml-1 -mr-1 p-0.5 rounded-full hover:bg-surface-containerHighest transition-colors duration-200\"\n\t\t\t\t\t\t\t\t@click=${this.handleRemove}\n\t\t\t\t\t\t\t\taria-label=\"Remove filter\"\n\t\t\t\t\t\t\t\ttabindex=\"-1\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<span class=\"material-symbols-outlined text-sm\">close</span>\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t`\n\t\t\t\t\t: ''}\n\t\t\t</button>\n\t\t`\n\t}\n}\n\nif (!customElements.get('schmancy-filter-chip')) {\n\tcustomElements.define('schmancy-filter-chip', SchmancyFilterChip)\n}\n\nif (!customElements.get('schmancy-chip')) {\n\tclass SchmancyChipCompat extends SchmancyFilterChip {}\n\tcustomElements.define('schmancy-chip', SchmancyChipCompat)\n}\n\nexport { SchmancyFilterChip as SchmancyChip }\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-chip': SchmancyFilterChip\n\t\t'schmancy-filter-chip': SchmancyFilterChip\n\t}\n}\n\nexport type FilterChipChangeEvent = { value: string; selected: boolean }\nexport type FilterChipRemoveEvent = { value: string }\nexport type SchmancyChipChangeEvent = FilterChipChangeEvent\n","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 { takeUntil } from 'rxjs/operators'\n\n/**\n * Suggestion chip component - provides contextual recommendations to users\n *\n * IMPORTANT: Suggestion chips do NOT have a selected state. They are designed to\n * provide suggestions and recommendations that trigger actions when clicked.\n * Unlike filter chips, they cannot be toggled on/off.\n *\n * Pure Schmancy implementation with Tailwind CSS and RxJS state management\n */\n@customElement('schmancy-suggestion-chip')\nexport class SchmancySuggestionChip extends SchmancyElement {\n\tstatic styles = [\n\t\tcss`\n\t\t\t:host {\n\t\t\t\tdisplay: inline-block;\n\t\t\t\toutline: none;\n\t\t\t\twidth: fit-content;\n\t\t\t\tmin-width: fit-content;\n\t\t\t}\n\n\t\t\t:host([disabled]) {\n\t\t\t\tpointer-events: none;\n\t\t\t}\n\n\t\t\t.ripple {\n\t\t\t\tposition: absolute;\n\t\t\t\tborder-radius: 50%;\n\t\t\t\ttransform: scale(0);\n\t\t\t\tanimation: ripple 600ms linear;\n\t\t\t\tbackground-color: rgba(0, 0, 0, 0.08);\n\t\t\t\tpointer-events: none;\n\t\t\t}\n\n\t\t\t@keyframes ripple {\n\t\t\t\tto {\n\t\t\t\t\ttransform: scale(4);\n\t\t\t\t\topacity: 0;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t/* State layer for M3 hover/focus/pressed states */\n\t\t\t.state-layer {\n\t\t\t\tposition: absolute;\n\t\t\t\tinset: 0;\n\t\t\t\tborder-radius: inherit;\n\t\t\t\tpointer-events: none;\n\t\t\t\tbackground-color: currentColor;\n\t\t\t\topacity: 0;\n\t\t\t\ttransition: opacity 200ms ease;\n\t\t\t}\n\n\t\t\t:host(:not([disabled])) button:hover .state-layer {\n\t\t\t\topacity: 0.08;\n\t\t\t}\n\n\t\t\t:host(:not([disabled])) button:focus-visible .state-layer {\n\t\t\t\topacity: 0.1;\n\t\t\t}\n\n\t\t\t:host(:not([disabled])) button:active .state-layer {\n\t\t\t\topacity: 0.1;\n\t\t\t}\n\t\t`,\n\t]\n\t/** Value identifier for the chip */\n\t@property({ reflect: true }) value = ''\n\n\t/** Optional icon name (Material Symbols) */\n\t@property({ reflect: true }) icon = ''\n\n\t/** Optional href for navigation */\n\t@property({ reflect: true }) href = ''\n\n\t/** Target for navigation (e.g., '_blank') */\n\t@property({ reflect: true }) target = ''\n\n\t/** Disable the chip */\n\t@property({ type: Boolean, reflect: true }) disabled = false\n\n\t/** Elevated style variant - flat by default per M3 spec */\n\t@property({ type: Boolean, reflect: true }) elevated = false\n\n\t// RxJS state streams\n\tprivate hover$ = new BehaviorSubject<boolean>(false)\n\tprivate pressed$ = new BehaviorSubject<boolean>(false)\n\tprivate focused$ = new BehaviorSubject<boolean>(false)\n\n\t// UI state - only ripples needed for rendering\n\t@state() private ripples: Array<{ x: number; y: number; id: number }> = []\n\n\tprotected static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true }\n\n\tprivate nextRippleId = 0\n\n\tconnectedCallback() {\n\t\tsuper.connectedCallback()\n\n\t\t// Stream management for future extensions\n\t\t// Currently, states are handled directly in event handlers\n\t\t// This pipeline can be extended for more complex state interactions\n\t\tcombineLatest([this.hover$, this.pressed$, this.focused$])\n\t\t\t.pipe(\n\t\t\t\t// States are managed through event handlers directly\n\t\t\t\t// This pipeline is kept for potential future state combinations\n\t\t\t\ttakeUntil(this.disconnecting),\n\t\t\t)\n\t\t\t.subscribe()\n\t}\n\n\tprivate handleClick = (e: MouseEvent) => {\n\t\tif (this.disabled) return\n\n\t\t// Add ripple effect\n\t\tconst button = this.shadowRoot?.querySelector('button')\n\t\tif (button) {\n\t\t\tconst rect = button.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// Navigate if href is provided\n\t\tif (this.href) {\n\t\t\tif (this.target === '_blank') {\n\t\t\t\twindow.open(this.href, '_blank')\n\t\t\t} else {\n\t\t\t\twindow.location.href = this.href\n\t\t\t}\n\t\t}\n\n\t\t// Dispatch action event\n\t\tthis.dispatchEvent(\n\t\t\tnew CustomEvent('action', {\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\tif (e.key === 'Enter' || e.key === ' ') {\n\t\t\te.preventDefault()\n\t\t\tthis.pressed$.next(true)\n\n\t\t\t// Simulate click\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.handleClick(clickEvent)\n\n\t\t\tsetTimeout(() => this.pressed$.next(false), 100)\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 hasIcon = !!this.icon\n\n\t\tconst classes = {\n\t\t\trelative: 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-pointer': !this.disabled,\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'overflow-hidden': true,\n\n\t\t\t// M3 Padding: 8px with icon, 16px without (leading), 16px trailing\n\t\t\t'pl-2': hasIcon, // 8px with icon\n\t\t\t'pl-4': !hasIcon, // 16px without icon\n\t\t\t'pr-4': true, // 16px trailing\n\n\t\t\t// M3 Colors for suggestion chips\n\t\t\t'bg-surface-containerLow': true,\n\t\t\t'text-surface-onVariant': true,\n\n\t\t\t// Suggestion chips are flat by default (no elevation per M3)\n\n\t\t\t// Focus 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\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\treturn html`\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\tclass=${classMap(classes)}\n\t\t\t\t?disabled=${this.disabled}\n\t\t\t\t@click=${this.handleClick}\n\t\t\t\t@keydown=${this.handleKeyDown}\n\t\t\t\t@mouseenter=${() => this.hover$.next(true)}\n\t\t\t\t@mouseleave=${() => this.hover$.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\ttabindex=${this.disabled ? '-1' : '0'}\n\t\t\t\trole=\"button\"\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${this.icon ? html` <schmancy-icon class=\"text-[18px] shrink-0\">${this.icon}</schmancy-icon> ` : ''}\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<!-- Ripple effects -->\n\t\t\t\t${this.ripples.map(\n\t\t\t\t\tripple => html` <span class=\"ripple\" style=\"left: ${ripple.x}px; top: ${ripple.y}px;\"></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</button>\n\t\t`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-suggestion-chip': SchmancySuggestionChip\n\t}\n}\n\nexport type SuggestionChipActionEvent = { value: string }\n"],"mappings":"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"}

package/dist/chips.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./input-chip-CV91URyU.cjs`),t=require(`./chips-9eG-96_D.cjs`);Object.defineProperty(exports,`SchmancyAssistChip`,{enumerable:!0,get:function(){return t.r}}),exports.SchmancyChip=t.n,exports.SchmancyFilterChip=t.n,Object.defineProperty(exports,`SchmancyInputChip`,{enumerable:!0,get:function(){return e.t}}),Object.defineProperty(exports,`SchmancySuggestionChip`,{enumerable:!0,get:function(){return t.t}});
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./input-chip-BUuFJUky.cjs`),t=require(`./chips-BHBVkxsa.cjs`);Object.defineProperty(exports,`SchmancyAssistChip`,{enumerable:!0,get:function(){return t.r}}),exports.SchmancyChip=t.n,exports.SchmancyFilterChip=t.n,Object.defineProperty(exports,`SchmancyInputChip`,{enumerable:!0,get:function(){return e.t}}),Object.defineProperty(exports,`SchmancySuggestionChip`,{enumerable:!0,get:function(){return t.t}});

package/dist/chips.js

@@ -1,3 +1,3 @@
-import { t as e } from "./input-chip-CYI17YOq.js";
-import { n as t, r as n, t as r } from "./chips-DF7akwz7.js";
+import { t as e } from "./input-chip-C3a1fwKB.js";
+import { n as t, r as n, t as r } from "./chips-DACeW7YL.js";
 export { n as SchmancyAssistChip, t as SchmancyChip, t as SchmancyFilterChip, e as SchmancyInputChip, r as SchmancySuggestionChip };

package/dist/connectivity.cjs

@@ -1,45 +1,63 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`./chunk-CncqDLb2.cjs`);const e=require(`./SchmancyElement-PS1u0j1B.cjs`);require(`./mixins-BoMURWag.cjs`);const t=require(`./audio-B924fI5N.cjs`);let n=require(`rxjs`),r=require(`rxjs/operators`),i=require(`lit/decorators.js`),a=require(`lit`),o=require(`lit/directives/ref.js`);var s=class extends e.t{constructor(...e){super(...e),this.bannerRef=(0,o.createRef)(),this.surfaceRef=(0,o.createRef)(),this.iconRef=(0,o.createRef)(),this.messageRef=(0,o.createRef)()}static{this.styles=[a.css`
-	:host {
-		display: block;
-	}
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`./chunk-CncqDLb2.cjs`);const e=require(`./SchmancyElement-CeKrBW2j.cjs`);require(`./mixins-Cjn20BQH.cjs`);const t=require(`./audio-CpwrIaw-.cjs`);let n=require(`rxjs`),r=require(`rxjs/operators`),i=require(`lit/decorators.js`),a=require(`lit`),o=require(`lit/directives/ref.js`);var s=class extends e.t{constructor(...e){super(...e),this.bannerRef=(0,o.createRef)(),this.surfaceRef=(0,o.createRef)(),this.iconRef=(0,o.createRef)(),this.messageRef=(0,o.createRef)()}static{this.styles=[a.css`
+			:host {
+				display: block;
+			}
 
-	.banner {
-		transform: translateY(-100%);
-		opacity: 0;
-		transition: transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity 400ms ease-out;
-	}
+			.banner {
+				transform: translateY(-100%);
+				opacity: 0;
+				transition:
+					transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1),
+					opacity 400ms ease-out;
+			}
 
-	.banner.visible {
-		transform: translateY(0);
-		opacity: 1;
-	}
+			.banner.visible {
+				transform: translateY(0);
+				opacity: 1;
+			}
 
-	.banner.exiting {
-		transform: translateY(-100%);
-		opacity: 0;
-		transition: transform 300ms ease-out, opacity 300ms ease-out;
-	}
+			.banner.exiting {
+				transform: translateY(-100%);
+				opacity: 0;
+				transition:
+					transform 300ms ease-out,
+					opacity 300ms ease-out;
+			}
 
-	@keyframes icon-pulse {
-		0%, 100% { transform: scale(1); }
-		50% { transform: scale(1.2); }
-	}
+			@keyframes icon-pulse {
+				0%,
+				100% {
+					transform: scale(1);
+				}
+				50% {
+					transform: scale(1.2);
+				}
+			}
 
-	@keyframes icon-bounce {
-		0%, 100% { transform: translateY(0); }
-		25% { transform: translateY(-6px); }
-		50% { transform: translateY(0); }
-		75% { transform: translateY(-3px); }
-	}
+			@keyframes icon-bounce {
+				0%,
+				100% {
+					transform: translateY(0);
+				}
+				25% {
+					transform: translateY(-6px);
+				}
+				50% {
+					transform: translateY(0);
+				}
+				75% {
+					transform: translateY(-3px);
+				}
+			}
 
-	.icon-pulse {
-		animation: icon-pulse 1s ease-in-out infinite;
-	}
+			.icon-pulse {
+				animation: icon-pulse 1s ease-in-out infinite;
+			}
 
-	.icon-bounce {
-		animation: icon-bounce 600ms ease-out;
-	}
-`]}connectedCallback(){super.connectedCallback();let e=(0,n.merge)((0,n.fromEvent)(window,`online`).pipe((0,r.map)(()=>!0)),(0,n.fromEvent)(window,`offline`).pipe((0,r.map)(()=>!1))).pipe((0,r.distinctUntilChanged)());e.pipe((0,r.tap)(e=>this.updateBanner(e)),(0,r.takeUntil)(this.disconnecting)).subscribe(),e.pipe((0,r.skip)(1),(0,r.tap)(e=>t.t.play(e?`celebrated`:`disappointed`)),(0,r.takeUntil)(this.disconnecting)).subscribe()}updateBanner(e){let t=this.bannerRef.value,i=this.surfaceRef.value,a=this.iconRef.value,o=this.messageRef.value;t&&i&&a&&o&&(e?(i.setAttribute(`type`,`primary`),a.textContent=`🎉`,a.className=`text-2xl icon-bounce`,o.textContent=`Back online`,t.classList.remove(`exiting`),t.classList.add(`visible`),(0,n.timer)(1500).pipe((0,r.tap)(()=>{t.classList.add(`exiting`),(0,n.timer)(300).pipe((0,r.tap)(()=>t.classList.remove(`visible`,`exiting`)),(0,r.takeUntil)(this.disconnecting)).subscribe()}),(0,r.takeUntil)(this.disconnecting)).subscribe()):(i.setAttribute(`type`,`error`),a.textContent=`🙀`,a.className=`text-2xl icon-pulse`,o.textContent=`You're offline`,t.classList.remove(`exiting`),t.classList.add(`visible`)))}render(){return a.html`
+			.icon-bounce {
+				animation: icon-bounce 600ms ease-out;
+			}
+		`]}connectedCallback(){super.connectedCallback();let e=(0,n.merge)((0,n.fromEvent)(window,`online`).pipe((0,r.map)(()=>!0)),(0,n.fromEvent)(window,`offline`).pipe((0,r.map)(()=>!1))).pipe((0,r.distinctUntilChanged)());e.pipe((0,r.tap)(e=>this.updateBanner(e)),(0,r.takeUntil)(this.disconnecting)).subscribe(),e.pipe((0,r.skip)(1),(0,r.tap)(e=>t.t.play(e?`celebrated`:`disappointed`)),(0,r.takeUntil)(this.disconnecting)).subscribe()}updateBanner(e){let t=this.bannerRef.value,i=this.surfaceRef.value,a=this.iconRef.value,o=this.messageRef.value;t&&i&&a&&o&&(e?(i.setAttribute(`type`,`primary`),a.textContent=`🎉`,a.className=`text-2xl icon-bounce`,o.textContent=`Back online`,t.classList.remove(`exiting`),t.classList.add(`visible`),(0,n.timer)(1500).pipe((0,r.tap)(()=>{t.classList.add(`exiting`),(0,n.timer)(300).pipe((0,r.tap)(()=>t.classList.remove(`visible`,`exiting`)),(0,r.takeUntil)(this.disconnecting)).subscribe()}),(0,r.takeUntil)(this.disconnecting)).subscribe()):(i.setAttribute(`type`,`error`),a.textContent=`🙀`,a.className=`text-2xl icon-pulse`,o.textContent=`You're offline`,t.classList.remove(`exiting`),t.classList.add(`visible`)))}render(){return a.html`
 			<div ${(0,o.ref)(this.bannerRef)} class="banner fixed top-0 inset-x-0 z-50 p-2 pointer-events-none">
 				<schmancy-surface
 					${(0,o.ref)(this.surfaceRef)}

package/dist/connectivity.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"connectivity.cjs","names":[],"sources":["../src/connectivity/connectivity-status.ts"],"sourcesContent":["import { SchmancyElement } from '@mixins/index'\nimport { css, html } from 'lit'\nimport { customElement } from 'lit/decorators.js'\nimport { createRef, ref } from 'lit/directives/ref.js'\nimport { merge, fromEvent, timer } from 'rxjs'\nimport { map, distinctUntilChanged, tap, takeUntil, skip } from 'rxjs/operators'\nimport { $sounds } from '../audio'\n\n/**\n * @element schmancy-connectivity-status\n * A beautiful connectivity status component that monitors online/offline state\n * and shows subtle animated banners when connectivity changes.\n *\n * @example\n * <!-- Add once to your app root -->\n * <schmancy-connectivity-status></schmancy-connectivity-status>\n */\n@customElement('schmancy-connectivity-status')\nexport class SchmancyConnectivityStatus extends SchmancyElement {\n\tstatic styles = [css`\n\t:host {\n\t\tdisplay: block;\n\t}\n\n\t.banner {\n\t\ttransform: translateY(-100%);\n\t\topacity: 0;\n\t\ttransition: transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity 400ms ease-out;\n\t}\n\n\t.banner.visible {\n\t\ttransform: translateY(0);\n\t\topacity: 1;\n\t}\n\n\t.banner.exiting {\n\t\ttransform: translateY(-100%);\n\t\topacity: 0;\n\t\ttransition: transform 300ms ease-out, opacity 300ms ease-out;\n\t}\n\n\t@keyframes icon-pulse {\n\t\t0%, 100% { transform: scale(1); }\n\t\t50% { transform: scale(1.2); }\n\t}\n\n\t@keyframes icon-bounce {\n\t\t0%, 100% { transform: translateY(0); }\n\t\t25% { transform: translateY(-6px); }\n\t\t50% { transform: translateY(0); }\n\t\t75% { transform: translateY(-3px); }\n\t}\n\n\t.icon-pulse {\n\t\tanimation: icon-pulse 1s ease-in-out infinite;\n\t}\n\n\t.icon-bounce {\n\t\tanimation: icon-bounce 600ms ease-out;\n\t}\n`];\n\tprivate bannerRef = createRef<HTMLDivElement>()\n\tprivate surfaceRef = createRef<HTMLElement>()\n\tprivate iconRef = createRef<HTMLSpanElement>()\n\tprivate messageRef = createRef<HTMLSpanElement>()\n\n\tconnectedCallback(): void {\n\t\tsuper.connectedCallback()\n\n\t\tconst connectivity$ = merge(\n\t\t\tfromEvent(window, 'online').pipe(map(() => true)),\n\t\t\tfromEvent(window, 'offline').pipe(map(() => false))\n\t\t).pipe(distinctUntilChanged())\n\n\t\t// UI updates via refs\n\t\tconnectivity$.pipe(\n\t\t\ttap(online => this.updateBanner(online)),\n\t\t\ttakeUntil(this.disconnecting)\n\t\t).subscribe()\n\n\t\t// Sounds (skip initial)\n\t\tconnectivity$.pipe(\n\t\t\tskip(1),\n\t\t\ttap(online => $sounds.play(online ? 'celebrated' : 'disappointed')),\n\t\t\ttakeUntil(this.disconnecting)\n\t\t).subscribe()\n\t}\n\n\tprivate updateBanner(online: boolean): void {\n\t\tconst banner = this.bannerRef.value\n\t\tconst surface = this.surfaceRef.value\n\t\tconst icon = this.iconRef.value\n\t\tconst message = this.messageRef.value\n\n\t\tif (!banner || !surface || !icon || !message) return\n\n\t\tif (!online) {\n\t\t\t// Going offline\n\t\t\tsurface.setAttribute('type', 'error')\n\t\t\ticon.textContent = '🙀'\n\t\t\ticon.className = 'text-2xl icon-pulse'\n\t\t\tmessage.textContent = \"You're offline\"\n\t\t\tbanner.classList.remove('exiting')\n\t\t\tbanner.classList.add('visible')\n\t\t} else {\n\t\t\t// Back online\n\t\t\tsurface.setAttribute('type', 'primary')\n\t\t\ticon.textContent = '🎉'\n\t\t\ticon.className = 'text-2xl icon-bounce'\n\t\t\tmessage.textContent = 'Back online'\n\t\t\tbanner.classList.remove('exiting')\n\t\t\tbanner.classList.add('visible')\n\n\t\t\t// Auto-dismiss after 1.5 seconds\n\t\t\ttimer(1500).pipe(\n\t\t\t\ttap(() => {\n\t\t\t\t\tbanner.classList.add('exiting')\n\t\t\t\t\ttimer(300).pipe(\n\t\t\t\t\t\ttap(() => banner.classList.remove('visible', 'exiting')),\n\t\t\t\t\t\ttakeUntil(this.disconnecting)\n\t\t\t\t\t).subscribe()\n\t\t\t\t}),\n\t\t\t\ttakeUntil(this.disconnecting)\n\t\t\t).subscribe()\n\t\t}\n\t}\n\n\tprotected render(): unknown {\n\t\treturn html`\n\t\t\t<div ${ref(this.bannerRef)} class=\"banner fixed top-0 inset-x-0 z-50 p-2 pointer-events-none\">\n\t\t\t\t<schmancy-surface\n\t\t\t\t\t${ref(this.surfaceRef)}\n\t\t\t\t\ttype=\"error\"\n\t\t\t\t\tclass=\"mx-auto max-w-sm rounded-2xl shadow-lg pointer-events-auto\"\n\t\t\t\t>\n\t\t\t\t\t<div class=\"flex items-center gap-3 px-4 py-3\">\n\t\t\t\t\t\t<span ${ref(this.iconRef)} class=\"text-2xl\">🙀</span>\n\t\t\t\t\t\t<schmancy-typography type=\"body\" token=\"md\">\n\t\t\t\t\t\t\t<span ${ref(this.messageRef)}>You're offline</span>\n\t\t\t\t\t\t</schmancy-typography>\n\t\t\t\t\t</div>\n\t\t\t\t</schmancy-surface>\n\t\t\t</div>\n\t\t`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-connectivity-status': SchmancyConnectivityStatus\n\t}\n}\n"],"mappings":"mWAkBO,IAAA,EAAA,cAAyC,EAAA,CAAA,CAAA,YAAA,GAAA,EAAA,CAAA,MAAA,GAAA,CAAA,EAAA,KAAA,WAAA,EAAA,EAAA,WAAA,EAAA,KAAA,YAAA,EAAA,EAAA,WAAA,EAAA,KAAA,SAAA,EAAA,EAAA,WAAA,EAAA,KAAA,YAAA,EAAA,EAAA,WAAA,CAAA,CAAA,OAAA,KAAA,OAC/B,CAAC,EAAA,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+CpB,mBAAA,CACC,MAAM,kBAAA,EAEN,IAAM,GAAA,EAAA,EAAA,QAAA,EAAA,EAAA,WACK,OAAQ,QAAA,EAAU,MAAA,EAAA,EAAA,SAAA,CAAe,CAAA,CAAA,GAAK,EAAA,EAAA,WACtC,OAAQ,SAAA,EAAW,MAAA,EAAA,EAAA,SAAA,CAAe,CAAA,CAAA,CAAA,EAC3C,MAAA,EAAA,EAAA,sBAAA,CAAA,EAGF,EAAc,MAAA,EAAA,EAAA,KACT,GAAU,KAAK,aAAa,CAAA,CAAA,GAAO,EAAA,EAAA,WAC7B,KAAK,aAAA,CAAA,EACd,UAAA,EAGF,EAAc,MAAA,EAAA,EAAA,MACR,CAAA,GAAC,EAAA,EAAA,KACF,GAAU,EAAA,EAAQ,KAAK,EAAS,aAAe,cAAA,CAAA,GAAe,EAAA,EAAA,WACxD,KAAK,aAAA,CAAA,EACd,UAAA,CACH,CAEA,aAAqB,EAAA,CACpB,IAAM,EAAS,KAAK,UAAU,MACxB,EAAU,KAAK,WAAW,MAC1B,EAAO,KAAK,QAAQ,MACpB,EAAU,KAAK,WAAW,MAE3B,GAAW,GAAY,GAAS,IAEhC,GAUJ,EAAQ,aAAa,OAAQ,SAAA,EAC7B,EAAK,YAAc,KACnB,EAAK,UAAY,uBACjB,EAAQ,YAAc,cACtB,EAAO,UAAU,OAAO,SAAA,EACxB,EAAO,UAAU,IAAI,SAAA,GAGrB,EAAA,EAAA,OAAM,IAAA,EAAM,MAAA,EAAA,EAAA,SAAA,CAEV,EAAO,UAAU,IAAI,SAAA,GACrB,EAAA,EAAA,OAAM,GAAA,EAAK,MAAA,EAAA,EAAA,SACA,EAAO,UAAU,OAAO,UAAW,SAAA,CAAA,GAAU,EAAA,EAAA,WAC7C,KAAK,aAAA,CAAA,EACd,UAAA,CAAA,CAAA,GACF,EAAA,EAAA,WACS,KAAK,aAAA,CAAA,EACd,UAAA,IAzBF,EAAQ,aAAa,OAAQ,OAAA,EAC7B,EAAK,YAAc,KACnB,EAAK,UAAY,sBACjB,EAAQ,YAAc,iBACtB,EAAO,UAAU,OAAO,SAAA,EACxB,EAAO,UAAU,IAAI,SAAA,GAsBvB,CAEA,QAAA,CACC,MAAO,GAAA,IAAI;oBACC,KAAK,SAAA,EAAA;;iBAER,KAAK,UAAA,EAAA;;;;;wBAKE,KAAK,OAAA,EAAA;;yBAEJ,KAAK,UAAA,EAAA;;;;;GAMvB,CAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,eA/Hc,8BAAA,CAAA,EAA8B,CAAA,EAAA,OAAA,eAAA,QAAA,6BAAA,CAAA,WAAA,CAAA,EAAA,IAAA,UAAA,CAAA,OAAA,CAAA,CAAA,CAAA"}
+{"version":3,"file":"connectivity.cjs","names":[],"sources":["../src/connectivity/connectivity-status.ts"],"sourcesContent":["import { SchmancyElement } from '@mixins/index'\nimport { css, html } from 'lit'\nimport { customElement } from 'lit/decorators.js'\nimport { createRef, ref } from 'lit/directives/ref.js'\nimport { merge, fromEvent, timer } from 'rxjs'\nimport { map, distinctUntilChanged, tap, takeUntil, skip } from 'rxjs/operators'\nimport { $sounds } from '../audio'\n\n/**\n * @element schmancy-connectivity-status\n * A beautiful connectivity status component that monitors online/offline state\n * and shows subtle animated banners when connectivity changes.\n *\n * @example\n * <!-- Add once to your app root -->\n * <schmancy-connectivity-status></schmancy-connectivity-status>\n */\n@customElement('schmancy-connectivity-status')\nexport class SchmancyConnectivityStatus extends SchmancyElement {\n\tstatic styles = [\n\t\tcss`\n\t\t\t:host {\n\t\t\t\tdisplay: block;\n\t\t\t}\n\n\t\t\t.banner {\n\t\t\t\ttransform: translateY(-100%);\n\t\t\t\topacity: 0;\n\t\t\t\ttransition:\n\t\t\t\t\ttransform 400ms cubic-bezier(0.34, 1.56, 0.64, 1),\n\t\t\t\t\topacity 400ms ease-out;\n\t\t\t}\n\n\t\t\t.banner.visible {\n\t\t\t\ttransform: translateY(0);\n\t\t\t\topacity: 1;\n\t\t\t}\n\n\t\t\t.banner.exiting {\n\t\t\t\ttransform: translateY(-100%);\n\t\t\t\topacity: 0;\n\t\t\t\ttransition:\n\t\t\t\t\ttransform 300ms ease-out,\n\t\t\t\t\topacity 300ms ease-out;\n\t\t\t}\n\n\t\t\t@keyframes icon-pulse {\n\t\t\t\t0%,\n\t\t\t\t100% {\n\t\t\t\t\ttransform: scale(1);\n\t\t\t\t}\n\t\t\t\t50% {\n\t\t\t\t\ttransform: scale(1.2);\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t@keyframes icon-bounce {\n\t\t\t\t0%,\n\t\t\t\t100% {\n\t\t\t\t\ttransform: translateY(0);\n\t\t\t\t}\n\t\t\t\t25% {\n\t\t\t\t\ttransform: translateY(-6px);\n\t\t\t\t}\n\t\t\t\t50% {\n\t\t\t\t\ttransform: translateY(0);\n\t\t\t\t}\n\t\t\t\t75% {\n\t\t\t\t\ttransform: translateY(-3px);\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t.icon-pulse {\n\t\t\t\tanimation: icon-pulse 1s ease-in-out infinite;\n\t\t\t}\n\n\t\t\t.icon-bounce {\n\t\t\t\tanimation: icon-bounce 600ms ease-out;\n\t\t\t}\n\t\t`,\n\t]\n\tprivate bannerRef = createRef<HTMLDivElement>()\n\tprivate surfaceRef = createRef<HTMLElement>()\n\tprivate iconRef = createRef<HTMLSpanElement>()\n\tprivate messageRef = createRef<HTMLSpanElement>()\n\n\tconnectedCallback(): void {\n\t\tsuper.connectedCallback()\n\n\t\tconst connectivity$ = merge(\n\t\t\tfromEvent(window, 'online').pipe(map(() => true)),\n\t\t\tfromEvent(window, 'offline').pipe(map(() => false)),\n\t\t).pipe(distinctUntilChanged())\n\n\t\t// UI updates via refs\n\t\tconnectivity$\n\t\t\t.pipe(\n\t\t\t\ttap(online => this.updateBanner(online)),\n\t\t\t\ttakeUntil(this.disconnecting),\n\t\t\t)\n\t\t\t.subscribe()\n\n\t\t// Sounds (skip initial)\n\t\tconnectivity$\n\t\t\t.pipe(\n\t\t\t\tskip(1),\n\t\t\t\ttap(online => $sounds.play(online ? 'celebrated' : 'disappointed')),\n\t\t\t\ttakeUntil(this.disconnecting),\n\t\t\t)\n\t\t\t.subscribe()\n\t}\n\n\tprivate updateBanner(online: boolean): void {\n\t\tconst banner = this.bannerRef.value\n\t\tconst surface = this.surfaceRef.value\n\t\tconst icon = this.iconRef.value\n\t\tconst message = this.messageRef.value\n\n\t\tif (!banner || !surface || !icon || !message) return\n\n\t\tif (!online) {\n\t\t\t// Going offline\n\t\t\tsurface.setAttribute('type', 'error')\n\t\t\ticon.textContent = '🙀'\n\t\t\ticon.className = 'text-2xl icon-pulse'\n\t\t\tmessage.textContent = \"You're offline\"\n\t\t\tbanner.classList.remove('exiting')\n\t\t\tbanner.classList.add('visible')\n\t\t} else {\n\t\t\t// Back online\n\t\t\tsurface.setAttribute('type', 'primary')\n\t\t\ticon.textContent = '🎉'\n\t\t\ticon.className = 'text-2xl icon-bounce'\n\t\t\tmessage.textContent = 'Back online'\n\t\t\tbanner.classList.remove('exiting')\n\t\t\tbanner.classList.add('visible')\n\n\t\t\t// Auto-dismiss after 1.5 seconds\n\t\t\ttimer(1500)\n\t\t\t\t.pipe(\n\t\t\t\t\ttap(() => {\n\t\t\t\t\t\tbanner.classList.add('exiting')\n\t\t\t\t\t\ttimer(300)\n\t\t\t\t\t\t\t.pipe(\n\t\t\t\t\t\t\t\ttap(() => banner.classList.remove('visible', 'exiting')),\n\t\t\t\t\t\t\t\ttakeUntil(this.disconnecting),\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t.subscribe()\n\t\t\t\t\t}),\n\t\t\t\t\ttakeUntil(this.disconnecting),\n\t\t\t\t)\n\t\t\t\t.subscribe()\n\t\t}\n\t}\n\n\tprotected render(): unknown {\n\t\treturn html`\n\t\t\t<div ${ref(this.bannerRef)} class=\"banner fixed top-0 inset-x-0 z-50 p-2 pointer-events-none\">\n\t\t\t\t<schmancy-surface\n\t\t\t\t\t${ref(this.surfaceRef)}\n\t\t\t\t\ttype=\"error\"\n\t\t\t\t\tclass=\"mx-auto max-w-sm rounded-2xl shadow-lg pointer-events-auto\"\n\t\t\t\t>\n\t\t\t\t\t<div class=\"flex items-center gap-3 px-4 py-3\">\n\t\t\t\t\t\t<span ${ref(this.iconRef)} class=\"text-2xl\">🙀</span>\n\t\t\t\t\t\t<schmancy-typography type=\"body\" token=\"md\">\n\t\t\t\t\t\t\t<span ${ref(this.messageRef)}>You're offline</span>\n\t\t\t\t\t\t</schmancy-typography>\n\t\t\t\t\t</div>\n\t\t\t\t</schmancy-surface>\n\t\t\t</div>\n\t\t`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-connectivity-status': SchmancyConnectivityStatus\n\t}\n}\n"],"mappings":"mWAkBO,IAAA,EAAA,cAAyC,EAAA,CAAA,CAAA,YAAA,GAAA,EAAA,CAAA,MAAA,GAAA,CAAA,EAAA,KAAA,WAAA,EAAA,EAAA,WAAA,EAAA,KAAA,YAAA,EAAA,EAAA,WAAA,EAAA,KAAA,SAAA,EAAA,EAAA,WAAA,EAAA,KAAA,YAAA,EAAA,EAAA,WAAA,CAAA,CAAA,OAAA,KAAA,OAC/B,CACf,EAAA,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAkEJ,mBAAA,CACC,MAAM,kBAAA,EAEN,IAAM,GAAA,EAAA,EAAA,QAAA,EAAA,EAAA,WACK,OAAQ,QAAA,EAAU,MAAA,EAAA,EAAA,SAAA,CAAe,CAAA,CAAA,GAAK,EAAA,EAAA,WACtC,OAAQ,SAAA,EAAW,MAAA,EAAA,EAAA,SAAA,CAAe,CAAA,CAAA,CAAA,EAC3C,MAAA,EAAA,EAAA,sBAAA,CAAA,EAGF,EACE,MAAA,EAAA,EAAA,KACI,GAAU,KAAK,aAAa,CAAA,CAAA,GAAO,EAAA,EAAA,WAC7B,KAAK,aAAA,CAAA,EAEf,UAAA,EAGF,EACE,MAAA,EAAA,EAAA,MACK,CAAA,GAAC,EAAA,EAAA,KACF,GAAU,EAAA,EAAQ,KAAK,EAAS,aAAe,cAAA,CAAA,GAAe,EAAA,EAAA,WACxD,KAAK,aAAA,CAAA,EAEf,UAAA,CACH,CAEA,aAAqB,EAAA,CACpB,IAAM,EAAS,KAAK,UAAU,MACxB,EAAU,KAAK,WAAW,MAC1B,EAAO,KAAK,QAAQ,MACpB,EAAU,KAAK,WAAW,MAE3B,GAAW,GAAY,GAAS,IAEhC,GAUJ,EAAQ,aAAa,OAAQ,SAAA,EAC7B,EAAK,YAAc,KACnB,EAAK,UAAY,uBACjB,EAAQ,YAAc,cACtB,EAAO,UAAU,OAAO,SAAA,EACxB,EAAO,UAAU,IAAI,SAAA,GAGrB,EAAA,EAAA,OAAM,IAAA,EACJ,MAAA,EAAA,EAAA,SAAA,CAEC,EAAO,UAAU,IAAI,SAAA,GACrB,EAAA,EAAA,OAAM,GAAA,EACJ,MAAA,EAAA,EAAA,SACU,EAAO,UAAU,OAAO,UAAW,SAAA,CAAA,GAAU,EAAA,EAAA,WAC7C,KAAK,aAAA,CAAA,EAEf,UAAA,CAAA,CAAA,GACF,EAAA,EAAA,WACS,KAAK,aAAA,CAAA,EAEf,UAAA,IA7BF,EAAQ,aAAa,OAAQ,OAAA,EAC7B,EAAK,YAAc,KACnB,EAAK,UAAY,sBACjB,EAAQ,YAAc,iBACtB,EAAO,UAAU,OAAO,SAAA,EACxB,EAAO,UAAU,IAAI,SAAA,GA0BvB,CAEA,QAAA,CACC,MAAO,GAAA,IAAI;oBACC,KAAK,SAAA,EAAA;;iBAER,KAAK,UAAA,EAAA;;;;;wBAKE,KAAK,OAAA,EAAA;;yBAEJ,KAAK,UAAA,EAAA;;;;;GAMvB,CAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,eA3Jc,8BAAA,CAAA,EAA8B,CAAA,EAAA,OAAA,eAAA,QAAA,6BAAA,CAAA,WAAA,CAAA,EAAA,IAAA,UAAA,CAAA,OAAA,CAAA,CAAA,CAAA"}