@mhmo91/schmancy 0.4.93 → 0.4.95

package/dist/{chips-7TbOS1By.js → chips-BdwPstWQ.js}

@@ -1,17 +1,17 @@
-import { T as C } from "./tailwind.mixin-C13RR5x6.js";
-import { css as E, LitElement as S, html as r } from "lit";
-import { property as o, queryAssignedElements as O, state as w, customElement as R } from "lit/decorators.js";
-import { when as H } from "lit/directives/when.js";
+import { T as C } from "./tailwind.mixin-BYp3JxPB.js";
+import { css as S, LitElement as E, html as r } from "lit";
+import { property as l, queryAssignedElements as O, state as w, customElement as R } from "lit/decorators.js";
+import { when as M } from "lit/directives/when.js";
 import { BehaviorSubject as h, combineLatest as g } from "rxjs";
-import { takeUntil as x, map as D, tap as M, distinctUntilChanged as B, debounceTime as j } from "rxjs/operators";
+import { takeUntil as x, map as D, tap as H, distinctUntilChanged as B, debounceTime as j } from "rxjs/operators";
 import { classMap as k } from "lit/directives/class-map.js";
 import "lit/directives/style-map.js";
-import { $ as F } from "./litElement.mixin-Efwm8boA.js";
-var P = Object.defineProperty, z = Object.getOwnPropertyDescriptor, f = (e, t, i, l) => {
-  for (var a, s = l > 1 ? void 0 : l ? z(t, i) : t, n = e.length - 1; n >= 0; n--) (a = e[n]) && (s = (l ? a(t, i, s) : a(s)) || s);
-  return l && s && P(t, i, s), s;
+import { $ as F } from "./litElement.mixin-D379V_-T.js";
+var P = Object.defineProperty, I = Object.getOwnPropertyDescriptor, m = (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;
 };
-const _ = class _ extends C(E`
+const _ = class _ extends C(S`
 	:host {
 		display: inline-block;
 		outline: none;
@@ -77,8 +77,8 @@ const _ = class _ extends C(E`
     return this._selected;
   }
   set selected(t) {
-    const i = this._selected;
-    this._selected = t, this.requestUpdate("selected", i);
+    const s = this._selected;
+    this._selected = t, this.requestUpdate("selected", s);
   }
   get form() {
     return this.internals?.form;
@@ -105,14 +105,14 @@ const _ = class _ extends C(E`
 				tabindex="0"
 			>
 				<!-- Icon container - conditionally shown using when directive -->
-				${H(this._selected || this.icon || this.iconSlotElements?.length > 0, () => r`
+				${M(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-base sm:text-[18px]">
+								<span class="material-symbols-outlined text-[18px]">
 									check
 								</span>
 							` : this.icon ? r`
-								<span class="material-symbols-outlined text-base sm:text-[18px]">
+								<span class="material-symbols-outlined text-[18px]">
 									${this.icon}
 								</span>
 							` : r`
@@ -141,18 +141,18 @@ const _ = class _ extends C(E`
 		`;
   }
 };
-_.shadowRootOptions = { ...S.shadowRootOptions, delegatesFocus: !0 }, _.formAssociated = !0;
-let c = _;
-if (f([o({ type: String, reflect: !0 })], c.prototype, "value", 2), f([o({ type: Boolean, reflect: !0 })], c.prototype, "selected", 1), f([o({ type: String, reflect: !0 })], c.prototype, "icon", 2), f([o({ type: Boolean, reflect: !0 })], c.prototype, "removable", 2), f([o({ type: Boolean, reflect: !0 })], c.prototype, "disabled", 2), f([o({ type: Boolean, reflect: !0 })], c.prototype, "elevated", 2), f([O({ slot: "icon" })], c.prototype, "iconSlotElements", 2), customElements.get("schmancy-filter-chip") || customElements.define("schmancy-filter-chip", c), !customElements.get("schmancy-chip")) {
-  class e extends c {
+_.shadowRootOptions = { ...E.shadowRootOptions, delegatesFocus: !0 }, _.formAssociated = !0;
+let d = _;
+if (m([l({ type: String, reflect: !0 })], d.prototype, "value", 2), m([l({ type: Boolean, reflect: !0 })], d.prototype, "selected", 1), m([l({ type: String, reflect: !0 })], d.prototype, "icon", 2), m([l({ type: Boolean, reflect: !0 })], d.prototype, "removable", 2), m([l({ type: Boolean, reflect: !0 })], d.prototype, "disabled", 2), m([l({ type: Boolean, reflect: !0 })], d.prototype, "elevated", 2), m([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 I = Object.defineProperty, L = Object.getOwnPropertyDescriptor, m = (e, t, i, l) => {
-  for (var a, s = l > 1 ? void 0 : l ? L(t, i) : t, n = e.length - 1; n >= 0; n--) (a = e[n]) && (s = (l ? a(t, i, s) : a(s)) || s);
-  return l && s && I(t, i, s), s;
+var L = Object.defineProperty, z = Object.getOwnPropertyDescriptor, v = (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 p = class extends C(E`
+let p = class extends C(S`
 	:host {
 		display: inline-block;
 		outline: none;
@@ -178,15 +178,38 @@ let p = class extends C(E`
 			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) => {
+    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 i = t.getBoundingClientRect(), l = e.clientX - i.left, a = e.clientY - i.top, s = this.nextRippleId++;
-        this.ripples = [...this.ripples, { x: l, y: a, id: s }], setTimeout(() => {
-          this.ripples = this.ripples.filter((n) => n.id !== s);
+        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 }));
@@ -206,11 +229,11 @@ let p = class extends C(E`
     super.connectedCallback(), g([this.hover$, this.pressed$, this.focused$]).pipe(x(this.disconnecting)).subscribe();
   }
   render() {
-    const e = { relative: !0, "inline-flex": !0, "items-center": !0, "gap-1 sm:gap-1.5 md:gap-2": !0, "px-2 py-1 sm:px-3 sm:py-1.5 md:px-4 md:py-2": !0, "rounded-full": !0, "cursor-pointer": !this.disabled, "transition-all": !0, "duration-200": !0, "select-none": !0, "overflow-hidden": !0, "bg-surface-container": !this.elevated, "text-surface-on": !0, "bg-surface-containerLow": this.elevated, "shadow-md": this.elevated && !this.disabled, "hover:bg-surface-containerHigh": !this.disabled && !this.elevated, "hover:shadow-lg": this.elevated && !this.disabled, "focus-visible:outline": !this.disabled, "focus-visible:outline-2": !this.disabled, "focus-visible:outline-primary-default": !this.disabled, "focus-visible:outline-offset-2": !this.disabled, "active:scale-95": !this.disabled, "opacity-50": this.disabled, "cursor-not-allowed": this.disabled };
+    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(e)}
+				class=${k(t)}
 				?disabled=${this.disabled}
 				@click=${this.handleClick}
 				@keydown=${this.handleKeyDown}
@@ -226,29 +249,32 @@ let p = class extends C(E`
 				aria-label=${this.value}
 			>
 				${this.icon ? r`
-					<schmancy-icon class="text-sm sm:text-base">${this.icon}</schmancy-icon>
+					<schmancy-icon class="text-[18px] shrink-0">${this.icon}</schmancy-icon>
 				` : ""}
-				<span class="text-xs sm:text-sm font-medium">
+				<span class="text-sm font-medium leading-5">
 					<slot></slot>
 				</span>
 
 				<!-- Ripple effects -->
-				${this.ripples.map((t) => r`
+				${this.ripples.map((s) => r`
 					<span
 						class="ripple"
-						style="left: ${t.x}px; top: ${t.y}px;"
+						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 = { ...S.shadowRootOptions, delegatesFocus: !0 }, m([o({ reflect: !0 })], p.prototype, "value", 2), m([o({ reflect: !0 })], p.prototype, "icon", 2), m([o({ reflect: !0 })], p.prototype, "href", 2), m([o({ reflect: !0 })], p.prototype, "target", 2), m([o({ type: Boolean, reflect: !0 })], p.prototype, "disabled", 2), m([o({ type: Boolean, reflect: !0 })], p.prototype, "elevated", 2), m([w()], p.prototype, "ripples", 2), p = m([R("schmancy-assist-chip")], p);
-var K = Object.defineProperty, T = Object.getOwnPropertyDescriptor, b = (e, t, i, l) => {
-  for (var a, s = l > 1 ? void 0 : l ? T(t, i) : t, n = e.length - 1; n >= 0; n--) (a = e[n]) && (s = (l ? a(t, i, s) : a(s)) || s);
-  return l && s && K(t, i, s), s;
+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 K = Object.defineProperty, T = Object.getOwnPropertyDescriptor, b = (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;
 };
-let d = class extends C(E`
+let c = class extends C(S`
 	:host {
 		display: inline-block;
 		outline: none;
@@ -305,15 +331,38 @@ let d = class extends C(E`
 			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 i = t.getBoundingClientRect(), l = e.clientX - i.left, a = e.clientY - i.top, s = this.nextRippleId++;
-        this.ripples = [...this.ripples, { x: l, y: a, id: s }], setTimeout(() => {
-          this.ripples = this.ripples.filter((n) => n.id !== s);
+        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 }));
@@ -342,15 +391,15 @@ let d = class extends C(E`
     return this.internals?.form;
   }
   connectedCallback() {
-    super.connectedCallback(), g([this.chipHover$, this.removeHover$, this.focused$, this.pressed$]).pipe(D(([e, t, i, l]) => ({ chipHover: e, removeHover: t, focused: i, pressed: l })), M((e) => {
+    super.connectedCallback(), g([this.chipHover$, this.removeHover$, this.focused$, this.pressed$]).pipe(D(([e, t, s, o]) => ({ chipHover: e, removeHover: t, focused: s, pressed: o })), H((e) => {
       this.uiState = e;
     }), x(this.disconnecting)).subscribe();
   }
   render() {
-    const e = { "chip-container": !0, "inline-flex": !0, "items-center": !0, "gap-1 sm:gap-1.5 md:gap-2": !0, "pl-3": !this.avatar, "pl-1": this.avatar, "pr-2": this.removable, "pr-3": !this.removable, "py-1 sm:py-1.5 md:py-2": !0, "rounded-full": !0, "cursor-default": !0, "transition-all": !0, "duration-200": !0, "select-none": !0, "text-xs sm:text-sm": !0, "font-medium": !0, relative: !0, "overflow-hidden": !0, "bg-surface-container": !0, "text-surface-on": !0, "shadow-md": this.elevated && !this.disabled, "hover:bg-surface-containerHigh": !this.disabled && !this.uiState.removeHover, "hover:shadow-lg": this.elevated && !this.disabled, "focus-visible:outline": !this.disabled, "focus-visible:outline-2": !this.disabled, "focus-visible:outline-primary-default": !this.disabled, "focus-visible:outline-offset-2": !this.disabled, "opacity-50": this.disabled, "cursor-not-allowed": this.disabled }, t = { "size-5 sm:size-6": !0, "rounded-full": !0, "transition-all": !0, "duration-200": !0, "cursor-pointer": !this.disabled, "bg-error-container": this.uiState.removeHover && !this.disabled, "text-error-onContainer": this.uiState.removeHover && !this.disabled, "hover:scale-110": this.uiState.removeHover && !this.disabled, "hover:bg-surface-containerHighest": !this.uiState.removeHover && !this.disabled, "opacity-50": this.disabled };
+    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(e)}
+				class=${k(t)}
 				@click=${this.handleChipClick}
 				@keydown=${this.handleKeyDown}
 				@mouseenter=${() => this.chipHover$.next(!0)}
@@ -369,26 +418,26 @@ let d = class extends C(E`
 					<img
 						src=${this.avatar}
 						alt=""
-						class="avatar-img rounded-full sm:size-6"
+						class="avatar-img rounded-full size-5"
 					/>
 				` : ""}
 
 				<!-- Icon (if provided and no avatar) -->
 				${this.icon && !this.avatar ? r`
-					<span class="material-symbols-outlined rounded-full text-base sm:text-[18px]">
+					<span class="material-symbols-outlined text-[18px] shrink-0">
 						${this.icon}
 					</span>
 				` : ""}
 
 				<!-- Chip content -->
-				<span>
+				<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(t)}
+						class=${k(s)}
 						@click=${this.handleRemove}
 						@mouseenter=${() => this.removeHover$.next(!0)}
 						@mouseleave=${() => this.removeHover$.next(!1)}
@@ -396,29 +445,32 @@ let d = class extends C(E`
 						tabindex="-1"
 						?disabled=${this.disabled}
 					>
-						<span class="material-symbols-outlined text-sm sm:text-[16px]">
+						<span class="material-symbols-outlined text-[18px]">
 							close
 						</span>
 					</button>
 				` : ""}
 
 				<!-- Ripple effects -->
-				${this.ripples.map((i) => r`
+				${this.ripples.map((o) => r`
 					<span
 						class="ripple"
-						style="left: ${i.x}px; top: ${i.y}px;"
+						style="left: ${o.x}px; top: ${o.y}px;"
 					></span>
 				`)}
+
+				<!-- State layer for M3 hover/focus/pressed states -->
+				<div class="state-layer"></div>
 			</div>
 		`;
   }
 };
-d.shadowRootOptions = { ...S.shadowRootOptions, delegatesFocus: !0 }, d.formAssociated = !0, b([o({ type: String, reflect: !0 })], d.prototype, "value", 2), b([o({ type: String, reflect: !0 })], d.prototype, "icon", 2), b([o({ type: String, reflect: !0 })], d.prototype, "avatar", 2), b([o({ type: Boolean, reflect: !0 })], d.prototype, "removable", 2), b([o({ type: Boolean, reflect: !0 })], d.prototype, "disabled", 2), b([o({ type: Boolean, reflect: !0 })], d.prototype, "elevated", 2), b([w()], d.prototype, "uiState", 2), b([w()], d.prototype, "ripples", 2), d = b([R("schmancy-input-chip")], d);
-var U = Object.defineProperty, A = Object.getOwnPropertyDescriptor, v = (e, t, i, l) => {
-  for (var a, s = l > 1 ? void 0 : l ? A(t, i) : t, n = e.length - 1; n >= 0; n--) (a = e[n]) && (s = (l ? a(t, i, s) : a(s)) || s);
-  return l && s && U(t, i, s), s;
+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 U = Object.defineProperty, A = Object.getOwnPropertyDescriptor, f = (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 u = class extends C(E`
+let u = class extends C(S`
 	:host {
 		display: inline-block;
 		outline: none;
@@ -444,15 +496,38 @@ let u = class extends C(E`
 			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 i = t.getBoundingClientRect(), l = e.clientX - i.left, a = e.clientY - i.top, s = this.nextRippleId++;
-        this.ripples = [...this.ripples, { x: l, y: a, id: s }], setTimeout(() => {
-          this.ripples = this.ripples.filter((n) => n.id !== s);
+        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 }));
@@ -472,11 +547,11 @@ let u = class extends C(E`
     super.connectedCallback(), g([this.hover$, this.pressed$, this.focused$]).pipe(x(this.disconnecting)).subscribe();
   }
   render() {
-    const e = { relative: !0, "inline-flex": !0, "items-center": !0, "gap-1 sm:gap-1.5 md:gap-2": !0, "px-2 py-1 sm:px-3 sm:py-1.5 md:px-4 md:py-2": !0, "rounded-full": !0, "cursor-pointer": !this.disabled, "transition-all": !0, "duration-200": !0, "select-none": !0, "overflow-hidden": !0, "bg-surface-containerLow": !this.elevated, "text-surface-on": !0, "bg-surface": this.elevated, "shadow-md": this.elevated && !this.disabled, "hover:bg-surface-containerHigh": !this.disabled, "hover:shadow-lg": this.elevated && !this.disabled, "focus-visible:outline": !this.disabled, "focus-visible:outline-2": !this.disabled, "focus-visible:outline-primary-default": !this.disabled, "focus-visible:outline-offset-2": !this.disabled, "active:scale-95": !this.disabled, "opacity-50": this.disabled, "cursor-not-allowed": this.disabled };
+    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(e)}
+				class=${k(t)}
 				?disabled=${this.disabled}
 				@click=${this.handleClick}
 				@keydown=${this.handleKeyDown}
@@ -492,27 +567,30 @@ let u = class extends C(E`
 				aria-label=${this.value}
 			>
 				${this.icon ? r`
-					<schmancy-icon class="text-sm sm:text-base">${this.icon}</schmancy-icon>
+					<schmancy-icon class="text-[18px] shrink-0">${this.icon}</schmancy-icon>
 				` : ""}
-				<span class="text-xs sm:text-sm font-medium">
+				<span class="text-sm font-medium leading-5">
 					<slot></slot>
 				</span>
 
 				<!-- Ripple effects -->
-				${this.ripples.map((t) => r`
+				${this.ripples.map((s) => r`
 					<span
 						class="ripple"
-						style="left: ${t.x}px; top: ${t.y}px;"
+						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 = { ...S.shadowRootOptions, delegatesFocus: !0 }, v([o({ reflect: !0 })], u.prototype, "value", 2), v([o({ reflect: !0 })], u.prototype, "icon", 2), v([o({ reflect: !0 })], u.prototype, "href", 2), v([o({ reflect: !0 })], u.prototype, "target", 2), v([o({ type: Boolean, reflect: !0 })], u.prototype, "disabled", 2), v([o({ type: Boolean, reflect: !0 })], u.prototype, "elevated", 2), v([w()], u.prototype, "ripples", 2), u = v([R("schmancy-suggestion-chip")], u);
-var Y = Object.defineProperty, q = Object.getOwnPropertyDescriptor, $ = (e, t, i, l) => {
-  for (var a, s = l > 1 ? void 0 : l ? q(t, i) : t, n = e.length - 1; n >= 0; n--) (a = e[n]) && (s = (l ? a(t, i, s) : a(s)) || s);
-  return l && s && Y(t, i, s), s;
+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);
+var Y = Object.defineProperty, q = Object.getOwnPropertyDescriptor, $ = (e, t, s, o) => {
+  for (var a, i = o > 1 ? void 0 : o ? q(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 && Y(t, s, i), i;
 };
 let y = class extends F() {
   constructor() {
@@ -540,22 +618,22 @@ let y = class extends F() {
     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((i, l) => i === t[l])))]).pipe(j(0), x(this.disconnecting)).subscribe(([e, t]) => {
+    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(j(0), x(this.disconnecting)).subscribe(([e, t]) => {
       this.updateChipStates(this.mode, e, t);
     });
   }
-  updateChipStates(e, t, i) {
-    this.chips && e !== "none" && this.chips.forEach((l) => {
-      if ("value" in l && "selected" in l) {
-        const a = l;
-        e === "multi" ? a.selected = i.length > 0 && i.includes(a.value) : e === "single" && (a.selected = t !== "" && t === a.value);
+  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: i } = e.detail;
-    this.mode === "multi" ? i ? this._values.includes(t) || (this._values = [...this._values, t], this.values$.next(this._values)) : (this._values = this._values.filter((l) => l !== t), this.values$.next(this._values)) : this.mode === "single" && (this._value = i ? t : "", this.value$.next(this._value)), this.requestUpdate(), this.dispatchEvent(new CustomEvent("change", { detail: this.mode === "multi" ? this._values : this._value, bubbles: !0 }));
+    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);
@@ -573,12 +651,12 @@ let y = class extends F() {
 		`;
   }
 };
-$([o({ type: Boolean, reflect: !0 })], y.prototype, "multi", 1), $([o({ type: Array, reflect: !0 })], y.prototype, "values", 1), $([o({ type: String, reflect: !0 })], y.prototype, "value", 1), $([O({ selector: "schmancy-chip, schmancy-filter-chip, schmancy-assist-chip, schmancy-input-chip, schmancy-suggestion-chip", flatten: !0 })], y.prototype, "chips", 2), $([o({ type: Boolean, reflect: !0 })], y.prototype, "wrap", 2), y = $([R("schmancy-chips")], y);
+$([l({ type: Boolean, reflect: !0 })], y.prototype, "multi", 1), $([l({ type: Array, reflect: !0 })], y.prototype, "values", 1), $([l({ type: String, reflect: !0 })], y.prototype, "value", 1), $([O({ selector: "schmancy-chip, schmancy-filter-chip, schmancy-assist-chip, schmancy-input-chip, schmancy-suggestion-chip", flatten: !0 })], y.prototype, "chips", 2), $([l({ type: Boolean, reflect: !0 })], y.prototype, "wrap", 2), y = $([R("schmancy-chips")], y);
 export {
-  c as S,
+  d as S,
   p as a,
-  d as b,
+  c as b,
   u as c,
   y as d
 };
-//# sourceMappingURL=chips-7TbOS1By.js.map
+//# sourceMappingURL=chips-BdwPstWQ.js.map