@mhmo91/schmancy 0.5.11 → 0.5.13

package/dist/suggestion-chip-p0k9PAya.js

@@ -1,661 +0,0 @@
-import { T as C } from "./tailwind.mixin-R2xLfpws.js";
-import { css as S, html as r, LitElement as E } from "lit";
-import { property as l, state as w, customElement as R, queryAssignedElements as O } from "lit/decorators.js";
-import { classMap as k } from "lit/directives/class-map.js";
-import { BehaviorSubject as h, combineLatest as g } from "rxjs";
-import { takeUntil as x, distinctUntilChanged as B, debounceTime as D, map as M, tap as H } from "rxjs/operators";
-import "lit/directives/style-map.js";
-import { $ as j } from "./litElement.mixin-CEPZ0lJP.js";
-import { when as F } from "lit/directives/when.js";
-var P = Object.defineProperty, I = Object.getOwnPropertyDescriptor, v = (e, t, s, o) => {
-  for (var a, i = o > 1 ? void 0 : o ? I(t, s) : t, n = e.length - 1; n >= 0; n--) (a = e[n]) && (i = (o ? a(t, s, i) : a(i)) || i);
-  return o && i && P(t, s, i), i;
-};
-let p = class extends C(S`
-	:host {
-		display: inline-block;
-		outline: none;
-		min-width:fit-content
-	}
-
-	: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;
-	}
-
-	@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;
-	}
-
-	: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:active .state-layer {
-		opacity: 0.1;
-	}
-`) {
-  constructor() {
-    super(...arguments), this.value = "", this.icon = "", this.href = "", this.target = "", this.disabled = !1, this.elevated = !0, this.hover$ = new h(!1), this.pressed$ = new h(!1), this.focused$ = new h(!1), this.ripples = [], this.nextRippleId = 0, this.handleClick = (e) => {
-      if (this.disabled) return;
-      const t = this.shadowRoot?.querySelector("button");
-      if (t) {
-        const s = t.getBoundingClientRect(), o = e.clientX - s.left, a = e.clientY - s.top, i = this.nextRippleId++;
-        this.ripples = [...this.ripples, { x: o, y: a, id: i }], setTimeout(() => {
-          this.ripples = this.ripples.filter((n) => n.id !== i);
-        }, 600);
-      }
-      this.href && (this.target === "_blank" ? window.open(this.href, "_blank") : window.location.href = this.href), this.dispatchEvent(new CustomEvent("action", { detail: { value: this.value }, bubbles: !0, composed: !0 }));
-    }, this.handleKeyDown = (e) => {
-      if (!this.disabled && (e.key === "Enter" || e.key === " ")) {
-        e.preventDefault(), this.pressed$.next(!0);
-        const t = new MouseEvent("click", { bubbles: !0, cancelable: !0, clientX: 0, clientY: 0 });
-        this.handleClick(t), setTimeout(() => this.pressed$.next(!1), 100);
-      }
-    }, this.handleFocus = () => {
-      this.focused$.next(!0);
-    }, this.handleBlur = () => {
-      this.focused$.next(!1);
-    };
-  }
-  connectedCallback() {
-    super.connectedCallback(), g([this.hover$, this.pressed$, this.focused$]).pipe(x(this.disconnecting)).subscribe();
-  }
-  render() {
-    const e = !!this.icon, t = { relative: !0, "inline-flex": !0, "items-center": !0, "gap-2": !0, "h-8": !0, "min-h-[32px]": !0, "rounded-full": !0, "cursor-pointer": !this.disabled, "transition-all": !0, "duration-200": !0, "select-none": !0, "overflow-hidden": !0, "pl-2": e, "pl-4": !e, "pr-4": !0, "bg-surface-containerLow": !0, "text-surface-onVariant": !0, "shadow-sm": this.elevated && !this.disabled, "hover:shadow-md": this.elevated && !this.disabled, "focus-visible:outline": !this.disabled, "focus-visible:outline-2": !this.disabled, "focus-visible:outline-primary": !this.disabled, "focus-visible:outline-offset-2": !this.disabled, "opacity-38": this.disabled, "cursor-not-allowed": this.disabled };
-    return r`
-			<button
-				type="button"
-				class=${k(t)}
-				?disabled=${this.disabled}
-				@click=${this.handleClick}
-				@keydown=${this.handleKeyDown}
-				@mouseenter=${() => this.hover$.next(!0)}
-				@mouseleave=${() => this.hover$.next(!1)}
-				@mousedown=${() => this.pressed$.next(!0)}
-				@mouseup=${() => this.pressed$.next(!1)}
-				@focus=${this.handleFocus}
-				@blur=${this.handleBlur}
-				tabindex=${this.disabled ? "-1" : "0"}
-				role="button"
-				aria-disabled=${this.disabled}
-				aria-label=${this.value}
-			>
-				${this.icon ? r`
-					<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((s) => r`
-					<span
-						class="ripple"
-						style="left: ${s.x}px; top: ${s.y}px;"
-					></span>
-				`)}
-
-				<!-- State layer for M3 hover/focus/pressed states -->
-				<div class="state-layer"></div>
-			</button>
-		`;
-  }
-};
-p.shadowRootOptions = { ...E.shadowRootOptions, delegatesFocus: !0 }, v([l({ reflect: !0 })], p.prototype, "value", 2), v([l({ reflect: !0 })], p.prototype, "icon", 2), v([l({ reflect: !0 })], p.prototype, "href", 2), v([l({ reflect: !0 })], p.prototype, "target", 2), v([l({ type: Boolean, reflect: !0 })], p.prototype, "disabled", 2), v([l({ type: Boolean, reflect: !0 })], p.prototype, "elevated", 2), v([w()], p.prototype, "ripples", 2), p = v([R("schmancy-assist-chip")], p);
-var L = Object.defineProperty, z = Object.getOwnPropertyDescriptor, $ = (e, t, s, o) => {
-  for (var a, i = o > 1 ? void 0 : o ? z(t, s) : t, n = e.length - 1; n >= 0; n--) (a = e[n]) && (i = (o ? a(t, s, i) : a(i)) || i);
-  return o && i && L(t, s, i), i;
-};
-let m = class extends j() {
-  constructor() {
-    super(...arguments), this.value$ = new h(""), this.values$ = new h([]), this._value = "", this._values = [], this._multi = !1, this._valueSet = !1, this._valuesSet = !1, this.wrap = !1;
-  }
-  get multi() {
-    return this._multi;
-  }
-  set multi(e) {
-    this._multi = e;
-  }
-  get mode() {
-    return this._valuesSet ? "multi" : this._valueSet ? "single" : this.hasAttribute("values") ? "multi" : this.hasAttribute("value") ? "single" : this._multi === !0 ? "multi" : "none";
-  }
-  get values() {
-    return this._values;
-  }
-  set values(e) {
-    this._values = e || [], this._valuesSet = !0, this.values$.next(this._values);
-  }
-  get value() {
-    return this._value;
-  }
-  set value(e) {
-    this._value = e || "", this._valueSet = !0, this.value$.next(this._value);
-  }
-  connectedCallback() {
-    super.connectedCallback(), this.value$.next(this._value), this.values$.next(this._values), g([this.value$.pipe(B()), this.values$.pipe(B((e, t) => e.length === t.length && e.every((s, o) => s === t[o])))]).pipe(D(0), x(this.disconnecting)).subscribe(([e, t]) => {
-      this.updateChipStates(this.mode, e, t);
-    });
-  }
-  updateChipStates(e, t, s) {
-    this.chips && e !== "none" && this.chips.forEach((o) => {
-      if ("value" in o && "selected" in o) {
-        const a = o;
-        e === "multi" ? a.selected = s.length > 0 && s.includes(a.value) : e === "single" && (a.selected = t !== "" && t === a.value);
-      }
-    });
-  }
-  async change(e) {
-    if (e.preventDefault(), e.stopPropagation(), this.mode === "none") return;
-    const { value: t, selected: s } = e.detail;
-    this.mode === "multi" ? s ? this._values.includes(t) || (this._values = [...this._values, t], this.values$.next(this._values)) : (this._values = this._values.filter((o) => o !== t), this.values$.next(this._values)) : this.mode === "single" && (this._value = s ? t : "", this.value$.next(this._value)), this.requestUpdate(), this.dispatchEvent(new CustomEvent("change", { detail: this.mode === "multi" ? this._values : this._value, bubbles: !0 }));
-  }
-  firstUpdated(e) {
-    super.firstUpdated(e), this.updateChipStates(this.mode, this._value, this._values);
-  }
-  render() {
-    const e = this.classMap({ "inset-2": !0, flex: !0, "gap-2": !0, "items-center": !0, "flex-wrap": this.wrap, "overflow-x-auto": !this.wrap, "scrollbar-hide": !this.wrap });
-    return r`
-			<div class=${e} @change=${this.change}>
-				<slot
-					@slotchange=${() => {
-      this.updateChipStates(this.mode, this._value, this._values);
-    }}
-				></slot>
-			</div>
-		`;
-  }
-};
-$([l({ type: Boolean, reflect: !0 })], m.prototype, "multi", 1), $([l({ type: Array, reflect: !0 })], m.prototype, "values", 1), $([l({ type: String, reflect: !0 })], m.prototype, "value", 1), $([O({ selector: "schmancy-chip, schmancy-filter-chip, schmancy-assist-chip, schmancy-input-chip, schmancy-suggestion-chip", flatten: !0 })], m.prototype, "chips", 2), $([l({ type: Boolean, reflect: !0 })], m.prototype, "wrap", 2), m = $([R("schmancy-chips")], m);
-var K = Object.defineProperty, T = Object.getOwnPropertyDescriptor, y = (e, t, s, o) => {
-  for (var a, i = o > 1 ? void 0 : o ? T(t, s) : t, n = e.length - 1; n >= 0; n--) (a = e[n]) && (i = (o ? a(t, s, i) : a(i)) || i);
-  return o && i && K(t, s, i), i;
-};
-const _ = class _ extends C(S`
-	:host {
-		display: inline-block;
-		outline: none;
-		min-width:fit-content
-	}
-
-	:host([disabled]) {
-		pointer-events: none;
-		opacity: 0.5;
-	}
-
-	button {
-		font-family: inherit;
-	}
-
-	/* Material Symbols font for icons */
-	.material-symbols-outlined {
-		font-family: 'Material Symbols Outlined';
-		font-weight: normal;
-		font-style: normal;
-		font-size: 18px;
-		line-height: 1;
-		letter-spacing: normal;
-		text-transform: none;
-		display: inline-block;
-		white-space: nowrap;
-		word-wrap: normal;
-		direction: ltr;
-		-webkit-font-smoothing: antialiased;
-		text-rendering: optimizeLegibility;
-		-moz-osx-font-smoothing: grayscale;
-		font-feature-settings: 'liga';
-		vertical-align: middle;
-	}
-`) {
-  constructor() {
-    super(), this.value = "", this._selected = !1, this.icon = "", this.removable = !1, this.disabled = !1, this.elevated = !1, this.hover$ = new h(!1), this.pressed$ = new h(!1), this.focused$ = new h(!1), this.handleClick = () => {
-      this.disabled || this.dispatchEvent(new CustomEvent("change", { detail: { value: this.value, selected: !this._selected }, bubbles: !0, composed: !0 }));
-    }, this.handleRemove = (t) => {
-      this.disabled || (t.stopPropagation(), this.dispatchEvent(new CustomEvent("remove", { detail: { value: this.value }, bubbles: !0, composed: !0 })));
-    }, this.handleKeyDown = (t) => {
-      this.disabled || t.key !== "Enter" && t.key !== " " || (t.preventDefault(), this.dispatchEvent(new CustomEvent("change", { detail: { value: this.value, selected: !this._selected }, bubbles: !0, composed: !0 })));
-    }, this.handleMouseEnter = () => {
-      this.hover$.next(!0);
-    }, this.handleMouseLeave = () => {
-      this.hover$.next(!1), this.pressed$.next(!1);
-    }, this.handleMouseDown = () => {
-      this.pressed$.next(!0);
-    }, this.handleMouseUp = () => {
-      this.pressed$.next(!1);
-    }, this.handleFocus = () => {
-      this.focused$.next(!0);
-    }, this.handleBlur = () => {
-      this.focused$.next(!1);
-    };
-    try {
-      this.internals = this.attachInternals();
-    } catch {
-      this.internals = void 0;
-    }
-  }
-  get selected() {
-    return this._selected;
-  }
-  set selected(t) {
-    const s = this._selected;
-    this._selected = t, this.requestUpdate("selected", s);
-  }
-  get form() {
-    return this.internals?.form;
-  }
-  connectedCallback() {
-    super.connectedCallback(), g([this.hover$, this.pressed$, this.focused$]).pipe(x(this.disconnecting)).subscribe();
-  }
-  render() {
-    const t = { "inline-flex": !0, "items-center": !0, "gap-2": !0, "rounded-full": !0, "h-8 px-4": !0, "cursor-pointer": !this.disabled, "transition-all": !0, "duration-200": !0, "select-none": !0, "text-sm": !0, "font-medium": !0, border: !0, relative: !0, "min-h-[32px]": !0, "bg-secondary-container": this._selected, "text-secondary-onContainer": this._selected, "border-secondary-container": this._selected, "bg-surface-container": !this._selected, "text-surface-on": !this._selected, "border-outline-variant": !this._selected, "hover:brightness-95": this._selected && !this.disabled, "hover:bg-surface-containerHigh": !this._selected && !this.disabled, "active:scale-95": !this.disabled, "focus-visible:outline": !this.disabled, "focus-visible:outline-2": !this.disabled, "focus-visible:outline-offset-2": !this.disabled, "focus-visible:outline-primary-default": !this.disabled, "shadow-md": this.elevated && !this.disabled, "hover:shadow-lg": this.elevated && !this.disabled, "opacity-50": this.disabled, "cursor-not-allowed": this.disabled };
-    return r`
-			<button
-				class=${this.classMap(t)}
-				@click=${this.handleClick}
-				@keydown=${this.handleKeyDown}
-				@mouseenter=${this.handleMouseEnter}
-				@mouseleave=${this.handleMouseLeave}
-				@mousedown=${this.handleMouseDown}
-				@mouseup=${this.handleMouseUp}
-				@focus=${this.handleFocus}
-				@blur=${this.handleBlur}
-				?disabled=${this.disabled}
-				aria-pressed=${this._selected ? "true" : "false"}
-				role="checkbox"
-				tabindex="0"
-			>
-				<!-- Icon container - conditionally shown using when directive -->
-				${F(this._selected || this.icon || this.iconSlotElements?.length > 0, () => r`
-						<span class="inline-flex w-[18px] h-[18px] items-center justify-center shrink-0">
-							${this._selected ? r`
-								<span class="material-symbols-outlined text-[18px]">
-									check
-								</span>
-							` : this.icon ? r`
-								<span class="material-symbols-outlined text-[18px]">
-									${this.icon}
-								</span>
-							` : r`
-								<slot name="icon"></slot>
-							`}
-						</span>
-					`)}
-
-				<!-- Chip content -->
-				<slot></slot>
-
-				<!-- Remove button (if removable) -->
-				${this.removable ? r`
-					<button
-						class="ml-1 -mr-1 p-0.5 rounded-full hover:bg-surface-containerHighest transition-colors"
-						@click=${this.handleRemove}
-						aria-label="Remove filter"
-						tabindex="-1"
-					>
-						<span class="material-symbols-outlined text-sm sm:text-[16px]">
-							close
-						</span>
-					</button>
-				` : ""}
-			</button>
-		`;
-  }
-};
-_.shadowRootOptions = { ...E.shadowRootOptions, delegatesFocus: !0 }, _.formAssociated = !0;
-let d = _;
-if (y([l({ type: String, reflect: !0 })], d.prototype, "value", 2), y([l({ type: Boolean, reflect: !0 })], d.prototype, "selected", 1), y([l({ type: String, reflect: !0 })], d.prototype, "icon", 2), y([l({ type: Boolean, reflect: !0 })], d.prototype, "removable", 2), y([l({ type: Boolean, reflect: !0 })], d.prototype, "disabled", 2), y([l({ type: Boolean, reflect: !0 })], d.prototype, "elevated", 2), y([O({ slot: "icon" })], d.prototype, "iconSlotElements", 2), customElements.get("schmancy-filter-chip") || customElements.define("schmancy-filter-chip", d), !customElements.get("schmancy-chip")) {
-  class e extends d {
-  }
-  customElements.define("schmancy-chip", e);
-}
-var U = Object.defineProperty, A = Object.getOwnPropertyDescriptor, b = (e, t, s, o) => {
-  for (var a, i = o > 1 ? void 0 : o ? A(t, s) : t, n = e.length - 1; n >= 0; n--) (a = e[n]) && (i = (o ? a(t, s, i) : a(i)) || i);
-  return o && i && U(t, s, i), i;
-};
-let c = class extends C(S`
-	:host {
-		display: inline-block;
-		outline: none;
-		min-width:fit-content
-
-	}
-
-	:host([disabled]) {
-		pointer-events: none;
-	}
-
-	button {
-		font-family: inherit;
-	}
-
-	.avatar-img {
-		width: 20px;
-		height: 20px;
-		object-fit: cover;
-	}
-
-	/* Material Symbols font for icons */
-	.material-symbols-outlined {
-		font-family: 'Material Symbols Outlined';
-		font-weight: normal;
-		font-style: normal;
-		font-size: 18px;
-		line-height: 1;
-		letter-spacing: normal;
-		text-transform: none;
-		display: inline-block;
-		white-space: nowrap;
-		word-wrap: normal;
-		direction: ltr;
-		-webkit-font-smoothing: antialiased;
-		text-rendering: optimizeLegibility;
-		-moz-osx-font-smoothing: grayscale;
-		font-feature-settings: 'liga';
-		vertical-align: middle;
-	}
-
-	.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;
-		}
-	}
-
-	/* 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])) .chip-container:hover .state-layer {
-		opacity: 0.08;
-	}
-
-	:host(:not([disabled])) .chip-container:focus-visible .state-layer {
-		opacity: 0.1;
-	}
-
-	:host(:not([disabled])) .chip-container:active .state-layer {
-		opacity: 0.1;
-	}
-`) {
-  constructor() {
-    super(), this.value = "", this.icon = "", this.avatar = "", this.removable = !0, this.disabled = !1, this.elevated = !1, this.chipHover$ = new h(!1), this.removeHover$ = new h(!1), this.focused$ = new h(!1), this.pressed$ = new h(!1), this.uiState = { chipHover: !1, removeHover: !1, focused: !1, pressed: !1 }, this.ripples = [], this.nextRippleId = 0, this.handleChipClick = (e) => {
-      if (this.disabled) return;
-      const t = this.shadowRoot?.querySelector(".chip-container");
-      if (t) {
-        const s = t.getBoundingClientRect(), o = e.clientX - s.left, a = e.clientY - s.top, i = this.nextRippleId++;
-        this.ripples = [...this.ripples, { x: o, y: a, id: i }], setTimeout(() => {
-          this.ripples = this.ripples.filter((n) => n.id !== i);
-        }, 600);
-      }
-      this.dispatchEvent(new CustomEvent("click", { detail: { value: this.value }, bubbles: !0, composed: !0 }));
-    }, this.handleRemove = (e) => {
-      this.disabled || (e.stopPropagation(), this.dispatchEvent(new CustomEvent("remove", { detail: { value: this.value }, bubbles: !0, composed: !0 })));
-    }, this.handleKeyDown = (e) => {
-      if (!this.disabled) if (e.key !== "Delete" && e.key !== "Backspace" || !this.removable) {
-        if (e.key === "Enter") {
-          e.preventDefault();
-          const t = new MouseEvent("click", { bubbles: !0, cancelable: !0, clientX: 0, clientY: 0 });
-          this.handleChipClick(t);
-        }
-      } else e.preventDefault(), this.handleRemove(e);
-    }, this.handleFocus = () => {
-      this.focused$.next(!0);
-    }, this.handleBlur = () => {
-      this.focused$.next(!1);
-    };
-    try {
-      this.internals = this.attachInternals();
-    } catch {
-      this.internals = void 0;
-    }
-  }
-  get form() {
-    return this.internals?.form;
-  }
-  connectedCallback() {
-    super.connectedCallback(), g([this.chipHover$, this.removeHover$, this.focused$, this.pressed$]).pipe(M(([e, t, s, o]) => ({ chipHover: e, removeHover: t, focused: s, pressed: o })), H((e) => {
-      this.uiState = e;
-    }), x(this.disconnecting)).subscribe();
-  }
-  render() {
-    const e = this.avatar || this.icon, t = { "chip-container": !0, "inline-flex": !0, "items-center": !0, "gap-2": !0, "h-8": !0, "min-h-[32px]": !0, "rounded-full": !0, "cursor-default": !0, "transition-all": !0, "duration-200": !0, "select-none": !0, "text-sm": !0, "font-medium": !0, relative: !0, "overflow-hidden": !0, border: !0, "pl-2": e, "pl-4": !e, "pr-2": this.removable, "pr-4": !this.removable, "bg-surface-containerLow": !0, "text-surface-onVariant": !0, "border-outline": !0, "focus-visible:outline": !this.disabled, "focus-visible:outline-2": !this.disabled, "focus-visible:outline-primary": !this.disabled, "focus-visible:outline-offset-2": !this.disabled, "opacity-38": this.disabled, "cursor-not-allowed": this.disabled }, s = { "size-[18px]": !0, flex: !0, "items-center": !0, "justify-center": !0, "rounded-full": !0, "transition-all": !0, "duration-200": !0, "cursor-pointer": !this.disabled, "-mr-1": !0, "hover:bg-surface-containerHighest": !this.disabled, "opacity-50": this.disabled };
-    return r`
-			<div
-				class=${k(t)}
-				@click=${this.handleChipClick}
-				@keydown=${this.handleKeyDown}
-				@mouseenter=${() => this.chipHover$.next(!0)}
-				@mouseleave=${() => this.chipHover$.next(!1)}
-				@mousedown=${() => this.pressed$.next(!0)}
-				@mouseup=${() => this.pressed$.next(!1)}
-				@focus=${this.handleFocus}
-				@blur=${this.handleBlur}
-				role="button"
-				tabindex=${this.disabled ? "-1" : "0"}
-				aria-disabled=${this.disabled}
-				aria-label=${this.value}
-			>
-				<!-- Avatar image (if provided) -->
-				${this.avatar ? r`
-					<img
-						src=${this.avatar}
-						alt=""
-						class="avatar-img rounded-full size-5"
-					/>
-				` : ""}
-
-				<!-- Icon (if provided and no avatar) -->
-				${this.icon && !this.avatar ? r`
-					<span class="material-symbols-outlined text-[18px] shrink-0">
-						${this.icon}
-					</span>
-				` : ""}
-
-				<!-- Chip content -->
-				<span class="text-sm font-medium leading-5">
-					<slot></slot>
-				</span>
-
-				<!-- Remove button (shown by default for input chips) -->
-				${this.removable ? r`
-					<button
-						class=${k(s)}
-						@click=${this.handleRemove}
-						@mouseenter=${() => this.removeHover$.next(!0)}
-						@mouseleave=${() => this.removeHover$.next(!1)}
-						aria-label="Remove"
-						tabindex="-1"
-						?disabled=${this.disabled}
-					>
-						<span class="material-symbols-outlined text-[18px]">
-							close
-						</span>
-					</button>
-				` : ""}
-
-				<!-- Ripple effects -->
-				${this.ripples.map((o) => r`
-					<span
-						class="ripple"
-						style="left: ${o.x}px; top: ${o.y}px;"
-					></span>
-				`)}
-
-				<!-- State layer for M3 hover/focus/pressed states -->
-				<div class="state-layer"></div>
-			</div>
-		`;
-  }
-};
-c.shadowRootOptions = { ...E.shadowRootOptions, delegatesFocus: !0 }, c.formAssociated = !0, b([l({ type: String, reflect: !0 })], c.prototype, "value", 2), b([l({ type: String, reflect: !0 })], c.prototype, "icon", 2), b([l({ type: String, reflect: !0 })], c.prototype, "avatar", 2), b([l({ type: Boolean, reflect: !0 })], c.prototype, "removable", 2), b([l({ type: Boolean, reflect: !0 })], c.prototype, "disabled", 2), b([l({ type: Boolean, reflect: !0 })], c.prototype, "elevated", 2), b([w()], c.prototype, "uiState", 2), b([w()], c.prototype, "ripples", 2), c = b([R("schmancy-input-chip")], c);
-var q = Object.defineProperty, X = Object.getOwnPropertyDescriptor, f = (e, t, s, o) => {
-  for (var a, i = o > 1 ? void 0 : o ? X(t, s) : t, n = e.length - 1; n >= 0; n--) (a = e[n]) && (i = (o ? a(t, s, i) : a(i)) || i);
-  return o && i && q(t, s, i), i;
-};
-let u = class extends C(S`
-	:host {
-		display: inline-block;
-		outline: none;
-		min-width:fit-content
-	}
-
-	: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;
-	}
-
-	@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;
-	}
-
-	: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:active .state-layer {
-		opacity: 0.1;
-	}
-`) {
-  constructor() {
-    super(...arguments), this.value = "", this.icon = "", this.href = "", this.target = "", this.disabled = !1, this.elevated = !1, this.hover$ = new h(!1), this.pressed$ = new h(!1), this.focused$ = new h(!1), this.ripples = [], this.nextRippleId = 0, this.handleClick = (e) => {
-      if (this.disabled) return;
-      const t = this.shadowRoot?.querySelector("button");
-      if (t) {
-        const s = t.getBoundingClientRect(), o = e.clientX - s.left, a = e.clientY - s.top, i = this.nextRippleId++;
-        this.ripples = [...this.ripples, { x: o, y: a, id: i }], setTimeout(() => {
-          this.ripples = this.ripples.filter((n) => n.id !== i);
-        }, 600);
-      }
-      this.href && (this.target === "_blank" ? window.open(this.href, "_blank") : window.location.href = this.href), this.dispatchEvent(new CustomEvent("action", { detail: { value: this.value }, bubbles: !0, composed: !0 }));
-    }, this.handleKeyDown = (e) => {
-      if (!this.disabled && (e.key === "Enter" || e.key === " ")) {
-        e.preventDefault(), this.pressed$.next(!0);
-        const t = new MouseEvent("click", { bubbles: !0, cancelable: !0, clientX: 0, clientY: 0 });
-        this.handleClick(t), setTimeout(() => this.pressed$.next(!1), 100);
-      }
-    }, this.handleFocus = () => {
-      this.focused$.next(!0);
-    }, this.handleBlur = () => {
-      this.focused$.next(!1);
-    };
-  }
-  connectedCallback() {
-    super.connectedCallback(), g([this.hover$, this.pressed$, this.focused$]).pipe(x(this.disconnecting)).subscribe();
-  }
-  render() {
-    const e = !!this.icon, t = { relative: !0, "inline-flex": !0, "items-center": !0, "gap-2": !0, "h-8": !0, "min-h-[32px]": !0, "rounded-full": !0, "cursor-pointer": !this.disabled, "transition-all": !0, "duration-200": !0, "select-none": !0, "overflow-hidden": !0, border: !0, "pl-2": e, "pl-4": !e, "pr-4": !0, "bg-surface-containerLow": !0, "text-surface-onVariant": !0, "border-outline": !0, "focus-visible:outline": !this.disabled, "focus-visible:outline-2": !this.disabled, "focus-visible:outline-primary": !this.disabled, "focus-visible:outline-offset-2": !this.disabled, "opacity-38": this.disabled, "cursor-not-allowed": this.disabled };
-    return r`
-			<button
-				type="button"
-				class=${k(t)}
-				?disabled=${this.disabled}
-				@click=${this.handleClick}
-				@keydown=${this.handleKeyDown}
-				@mouseenter=${() => this.hover$.next(!0)}
-				@mouseleave=${() => this.hover$.next(!1)}
-				@mousedown=${() => this.pressed$.next(!0)}
-				@mouseup=${() => this.pressed$.next(!1)}
-				@focus=${this.handleFocus}
-				@blur=${this.handleBlur}
-				tabindex=${this.disabled ? "-1" : "0"}
-				role="button"
-				aria-disabled=${this.disabled}
-				aria-label=${this.value}
-			>
-				${this.icon ? r`
-					<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((s) => r`
-					<span
-						class="ripple"
-						style="left: ${s.x}px; top: ${s.y}px;"
-					></span>
-				`)}
-
-				<!-- State layer for M3 hover/focus/pressed states -->
-				<div class="state-layer"></div>
-			</button>
-		`;
-  }
-};
-u.shadowRootOptions = { ...E.shadowRootOptions, delegatesFocus: !0 }, f([l({ reflect: !0 })], u.prototype, "value", 2), f([l({ reflect: !0 })], u.prototype, "icon", 2), f([l({ reflect: !0 })], u.prototype, "href", 2), f([l({ reflect: !0 })], u.prototype, "target", 2), f([l({ type: Boolean, reflect: !0 })], u.prototype, "disabled", 2), f([l({ type: Boolean, reflect: !0 })], u.prototype, "elevated", 2), f([w()], u.prototype, "ripples", 2), u = f([R("schmancy-suggestion-chip")], u);
-export {
-  p as S,
-  d as a,
-  c as b,
-  u as c
-};
-//# sourceMappingURL=suggestion-chip-p0k9PAya.js.map