@mhmo91/schmancy 0.5.12 → 0.5.13

package/dist/input-chip-B_YxvaM_.js

@@ -0,0 +1,206 @@
+import { T as m } from "./tailwind.mixin-DmqqUtYJ.js";
+import { css as b, html as c, LitElement as v } from "lit";
+import { property as r, state as h, customElement as f } from "lit/decorators.js";
+import { classMap as u } from "lit/directives/class-map.js";
+import { BehaviorSubject as d, combineLatest as y } from "rxjs";
+import { map as $, tap as g, takeUntil as x } from "rxjs/operators";
+var w = Object.defineProperty, k = Object.getOwnPropertyDescriptor, n = (e, t, o, s) => {
+  for (var l, a = s > 1 ? void 0 : s ? k(t, o) : t, p = e.length - 1; p >= 0; p--) (l = e[p]) && (a = (s ? l(t, o, a) : l(a)) || a);
+  return s && a && w(t, o, a), a;
+};
+let i = class extends m(b`
+	: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 d(!1), this.removeHover$ = new d(!1), this.focused$ = new d(!1), this.pressed$ = new d(!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 o = t.getBoundingClientRect(), s = e.clientX - o.left, l = e.clientY - o.top, a = this.nextRippleId++;
+        this.ripples = [...this.ripples, { x: s, y: l, id: a }], setTimeout(() => {
+          this.ripples = this.ripples.filter((p) => p.id !== a);
+        }, 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(), y([this.chipHover$, this.removeHover$, this.focused$, this.pressed$]).pipe($(([e, t, o, s]) => ({ chipHover: e, removeHover: t, focused: o, pressed: s })), g((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, "border-solid": !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 }, o = { "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 c`
+			<div
+				class=${u(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 ? c`
+					<img
+						src=${this.avatar}
+						alt=""
+						class="avatar-img rounded-full size-5"
+					/>
+				` : ""}
+
+				<!-- Icon (if provided and no avatar) -->
+				${this.icon && !this.avatar ? c`
+					<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 ? c`
+					<button
+						class=${u(o)}
+						@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((s) => c`
+					<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>
+			</div>
+		`;
+  }
+};
+i.shadowRootOptions = { ...v.shadowRootOptions, delegatesFocus: !0 }, i.formAssociated = !0, n([r({ type: String, reflect: !0 })], i.prototype, "value", 2), n([r({ type: String, reflect: !0 })], i.prototype, "icon", 2), n([r({ type: String, reflect: !0 })], i.prototype, "avatar", 2), n([r({ type: Boolean, reflect: !0 })], i.prototype, "removable", 2), n([r({ type: Boolean, reflect: !0 })], i.prototype, "disabled", 2), n([r({ type: Boolean, reflect: !0 })], i.prototype, "elevated", 2), n([h()], i.prototype, "uiState", 2), n([h()], i.prototype, "ripples", 2), i = n([f("schmancy-input-chip")], i);
+export {
+  i as S
+};
+//# sourceMappingURL=input-chip-B_YxvaM_.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"input-chip-B_YxvaM_.js","sources":["../src/chips/input-chip.ts"],"sourcesContent":["import { TailwindElement } from '@mixins/tailwind.mixin'\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\nimport { BehaviorSubject, combineLatest } from 'rxjs'\nimport { map, takeUntil, tap } from 'rxjs/operators'\n\n/**\n * Input chip component - represents user-provided information that can be removed.\n *\n * IMPORTANT: Per Material Design 3 specification, input chips do NOT have selected state.\n * They represent discrete pieces of user input (like entered tags, selections from lists, etc.)\n * that can only be removed, not toggled on/off.\n *\n * Use cases:\n * - Displaying selected recipients in an email\n * - Showing applied filters that can be removed\n * - Tags or keywords entered by the user\n * - Selected items from a multi-select dropdown\n *\n * @fires click - Optional click event on chip body (value)\n * @fires remove - Dispatched when remove button is clicked (value)\n *\n * @example\n * ```html\n * <schmancy-input-chip value=\"john@example.com\" avatar=\"/avatars/john.jpg\">\n *   John Doe\n * </schmancy-input-chip>\n * ```\n */\n@customElement('schmancy-input-chip')\nexport class SchmancyInputChip extends TailwindElement(css`\n\t:host {\n\t\tdisplay: inline-block;\n\t\toutline: none;\n\t\tmin-width:fit-content\n\n\t}\n\n\t:host([disabled]) {\n\t\tpointer-events: none;\n\t}\n\n\tbutton {\n\t\tfont-family: inherit;\n\t}\n\n\t.avatar-img {\n\t\twidth: 20px;\n\t\theight: 20px;\n\t\tobject-fit: cover;\n\t}\n\n\t/* Material Symbols font for icons */\n\t.material-symbols-outlined {\n\t\tfont-family: 'Material Symbols Outlined';\n\t\tfont-weight: normal;\n\t\tfont-style: normal;\n\t\tfont-size: 18px;\n\t\tline-height: 1;\n\t\tletter-spacing: normal;\n\t\ttext-transform: none;\n\t\tdisplay: inline-block;\n\t\twhite-space: nowrap;\n\t\tword-wrap: normal;\n\t\tdirection: ltr;\n\t\t-webkit-font-smoothing: antialiased;\n\t\ttext-rendering: optimizeLegibility;\n\t\t-moz-osx-font-smoothing: grayscale;\n\t\tfont-feature-settings: 'liga';\n\t\tvertical-align: middle;\n\t}\n\n\t.ripple {\n\t\tposition: absolute;\n\t\tborder-radius: 50%;\n\t\ttransform: scale(0);\n\t\tanimation: ripple 600ms linear;\n\t\tbackground-color: rgba(0, 0, 0, 0.08);\n\t\tpointer-events: none;\n\t}\n\n\t@keyframes ripple {\n\t\tto {\n\t\t\ttransform: scale(4);\n\t\t\topacity: 0;\n\t\t}\n\t}\n\n\t/* State layer for M3 hover/focus/pressed states */\n\t.state-layer {\n\t\tposition: absolute;\n\t\tinset: 0;\n\t\tborder-radius: inherit;\n\t\tpointer-events: none;\n\t\tbackground-color: currentColor;\n\t\topacity: 0;\n\t\ttransition: opacity 200ms ease;\n\t}\n\n\t:host(:not([disabled])) .chip-container:hover .state-layer {\n\t\topacity: 0.08;\n\t}\n\n\t:host(:not([disabled])) .chip-container:focus-visible .state-layer {\n\t\topacity: 0.1;\n\t}\n\n\t:host(:not([disabled])) .chip-container:active .state-layer {\n\t\topacity: 0.1;\n\t}\n`) {\n\t/** Value identifier for the chip */\n\t@property({ type: String, reflect: true })\n\tvalue: string = ''\n\n\t/** Optional icon name (Material Symbols) */\n\t@property({ type: String, reflect: true })\n\ticon: string = ''\n\n\t/** Optional avatar image URL */\n\t@property({ type: String, reflect: true })\n\tavatar: string = ''\n\n\t/** Whether to show remove button (default true for input chips) */\n\t@property({ type: Boolean, reflect: true })\n\tremovable: boolean = true\n\n\t/** Disable the chip */\n\t@property({ type: Boolean, reflect: true })\n\tdisabled: boolean = false\n\n\t/** Elevated style variant */\n\t@property({ type: Boolean, reflect: true })\n\televated: boolean = false\n\n\t// RxJS state streams\n\tprivate chipHover$ = new BehaviorSubject<boolean>(false)\n\tprivate removeHover$ = new BehaviorSubject<boolean>(false)\n\tprivate focused$ = new BehaviorSubject<boolean>(false)\n\tprivate pressed$ = new BehaviorSubject<boolean>(false)\n\n\t// UI state from combined streams\n\t@state()  uiState = {\n\t\tchipHover: false,\n\t\tremoveHover: false,\n\t\tfocused: false,\n\t\tpressed: false\n\t}\n\n\t// Ripple effects\n\t@state() private ripples: Array<{ x: number; y: number; id: number }> = []\n\tprivate nextRippleId = 0\n\n\tconstructor() {\n\t\tsuper()\n\t\ttry {\n\t\t\tthis.internals = this.attachInternals()\n\t\t} catch {\n\t\t\tthis.internals = undefined\n\t\t}\n\t}\n\n\tprotected static shadowRootOptions = {\n\t\t...LitElement.shadowRootOptions,\n\t\tdelegatesFocus: true,\n\t}\n\n\tstatic formAssociated = true\n\tinternals: ElementInternals | undefined\n\tget form() {\n\t\treturn this.internals?.form\n\t}\n\n\tconnectedCallback() {\n\t\tsuper.connectedCallback()\n\n\t\t// Combine all UI state streams\n\t\tcombineLatest([\n\t\t\tthis.chipHover$,\n\t\t\tthis.removeHover$,\n\t\t\tthis.focused$,\n\t\t\tthis.pressed$\n\t\t]).pipe(\n\t\t\tmap(([chipHover, removeHover, focused, pressed]) => ({\n\t\t\t\tchipHover,\n\t\t\t\tremoveHover,\n\t\t\t\tfocused,\n\t\t\t\tpressed\n\t\t\t})),\n\t\t\ttap(state => {\n\t\t\t\tthis.uiState = state\n\t\t\t}),\n\t\t\ttakeUntil(this.disconnecting)\n\t\t).subscribe()\n\t}\n\n\tprivate handleChipClick = (e: MouseEvent) => {\n\t\tif (this.disabled) return\n\n\t\t// Add ripple effect\n\t\tconst chip = this.shadowRoot?.querySelector('.chip-container') as HTMLElement\n\t\tif (chip) {\n\t\t\tconst rect = chip.getBoundingClientRect()\n\t\t\tconst x = e.clientX - rect.left\n\t\t\tconst y = e.clientY - rect.top\n\t\t\tconst id = this.nextRippleId++\n\n\t\t\tthis.ripples = [...this.ripples, { x, y, id }]\n\n\t\t\t// Remove ripple after animation\n\t\t\tsetTimeout(() => {\n\t\t\t\tthis.ripples = this.ripples.filter(r => r.id !== id)\n\t\t\t}, 600)\n\t\t}\n\n\t\t// Dispatch optional click event (for custom handling if needed)\n\t\tthis.dispatchEvent(\n\t\t\tnew CustomEvent('click', {\n\t\t\t\tdetail: { value: this.value },\n\t\t\t\tbubbles: true,\n\t\t\t\tcomposed: true,\n\t\t\t})\n\t\t)\n\t}\n\n\tprivate handleRemove = (e: Event) => {\n\t\tif (this.disabled) return\n\n\t\te.stopPropagation()\n\n\t\t// Dispatch remove event\n\t\tthis.dispatchEvent(\n\t\t\tnew CustomEvent('remove', {\n\t\t\t\tdetail: { value: this.value },\n\t\t\t\tbubbles: true,\n\t\t\t\tcomposed: true,\n\t\t\t})\n\t\t)\n\t}\n\n\tprivate handleKeyDown = (e: KeyboardEvent) => {\n\t\tif (this.disabled) return\n\n\t\t// Delete or Backspace removes the chip\n\t\tif ((e.key === 'Delete' || e.key === 'Backspace') && this.removable) {\n\t\t\te.preventDefault()\n\t\t\tthis.handleRemove(e)\n\t\t}\n\t\t// Enter can optionally trigger click\n\t\telse if (e.key === 'Enter') {\n\t\t\te.preventDefault()\n\t\t\tconst clickEvent = new MouseEvent('click', {\n\t\t\t\tbubbles: true,\n\t\t\t\tcancelable: true,\n\t\t\t\tclientX: 0,\n\t\t\t\tclientY: 0\n\t\t\t})\n\t\t\tthis.handleChipClick(clickEvent)\n\t\t}\n\t}\n\n\tprivate handleFocus = () => {\n\t\tthis.focused$.next(true)\n\t}\n\n\tprivate handleBlur = () => {\n\t\tthis.focused$.next(false)\n\t}\n\n\tprotected render(): unknown {\n\t\tconst hasLeadingIcon = this.avatar || this.icon;\n\n\t\tconst chipClasses = {\n\t\t\t'chip-container': true,\n\t\t\t'inline-flex': true,\n\t\t\t'items-center': true,\n\t\t\t'gap-2': true,\n\t\t\t'h-8': true, // M3: 32px height\n\t\t\t'min-h-[32px]': true,\n\t\t\t'rounded-full': true,\n\t\t\t'cursor-default': true,\n\t\t\t'transition-all': true,\n\t\t\t'duration-200': true,\n\t\t\t'select-none': true,\n\t\t\t'text-sm': true, // M3: 14px Label Large\n\t\t\t'font-medium': true, // M3: 500 weight\n\t\t\t'relative': true,\n\t\t\t'overflow-hidden': true,\n\t\t\t'border': true,\n\n\t\t\t// M3 Padding: 8px with icon, 16px without (leading), 8px with trailing icon\n\t\t\t'pl-2': hasLeadingIcon, // 8px with avatar/icon\n\t\t\t'pl-4': !hasLeadingIcon, // 16px without\n\t\t\t'pr-2': this.removable, // 8px with remove button\n\t\t\t'pr-4': !this.removable, // 16px without\n\n\t\t\t// M3 Colors for input chips\n\t\t\t'bg-surface-containerLow': true,\n\t\t\t'text-surface-onVariant': true,\n\t\t\t'border-outline': true,\n\t\t\t'border-solid':true,\n\t\t\t// Input chips are flat (no elevation) per M3\n\n\t\t\t// Focus-visible state\n\t\t\t'focus-visible:outline': !this.disabled,\n\t\t\t'focus-visible:outline-2': !this.disabled,\n\t\t\t'focus-visible:outline-primary': !this.disabled,\n\t\t\t'focus-visible:outline-offset-2': !this.disabled,\n\n\t\t\t// Disabled state\n\t\t\t'opacity-38': this.disabled, // M3 disabled opacity\n\t\t\t'cursor-not-allowed': this.disabled\n\t\t}\n\n\t\tconst removeButtonClasses = {\n\t\t\t'size-[18px]': true, // M3: 18px icon size\n\t\t\t'flex': true,\n\t\t\t'items-center': true,\n\t\t\t'justify-center': true,\n\t\t\t'rounded-full': true,\n\t\t\t'transition-all': true,\n\t\t\t'duration-200': true,\n\t\t\t'cursor-pointer': !this.disabled,\n\t\t\t'-mr-1': true, // Adjust for visual balance\n\n\t\t\t// Hover state for remove button\n\t\t\t'hover:bg-surface-containerHighest': !this.disabled,\n\t\t\t'opacity-50': this.disabled\n\t\t}\n\n\t\treturn html`\n\t\t\t<div\n\t\t\t\tclass=${classMap(chipClasses)}\n\t\t\t\t@click=${this.handleChipClick}\n\t\t\t\t@keydown=${this.handleKeyDown}\n\t\t\t\t@mouseenter=${() => this.chipHover$.next(true)}\n\t\t\t\t@mouseleave=${() => this.chipHover$.next(false)}\n\t\t\t\t@mousedown=${() => this.pressed$.next(true)}\n\t\t\t\t@mouseup=${() => this.pressed$.next(false)}\n\t\t\t\t@focus=${this.handleFocus}\n\t\t\t\t@blur=${this.handleBlur}\n\t\t\t\trole=\"button\"\n\t\t\t\ttabindex=${this.disabled ? '-1' : '0'}\n\t\t\t\taria-disabled=${this.disabled}\n\t\t\t\taria-label=${this.value}\n\t\t\t>\n\t\t\t\t<!-- Avatar image (if provided) -->\n\t\t\t\t${this.avatar ? html`\n\t\t\t\t\t<img\n\t\t\t\t\t\tsrc=${this.avatar}\n\t\t\t\t\t\talt=\"\"\n\t\t\t\t\t\tclass=\"avatar-img rounded-full size-5\"\n\t\t\t\t\t/>\n\t\t\t\t` : ''}\n\n\t\t\t\t<!-- Icon (if provided and no avatar) -->\n\t\t\t\t${this.icon && !this.avatar ? html`\n\t\t\t\t\t<span class=\"material-symbols-outlined text-[18px] shrink-0\">\n\t\t\t\t\t\t${this.icon}\n\t\t\t\t\t</span>\n\t\t\t\t` : ''}\n\n\t\t\t\t<!-- Chip content -->\n\t\t\t\t<span class=\"text-sm font-medium leading-5\">\n\t\t\t\t\t<slot></slot>\n\t\t\t\t</span>\n\n\t\t\t\t<!-- Remove button (shown by default for input chips) -->\n\t\t\t\t${this.removable ? html`\n\t\t\t\t\t<button\n\t\t\t\t\t\tclass=${classMap(removeButtonClasses)}\n\t\t\t\t\t\t@click=${this.handleRemove}\n\t\t\t\t\t\t@mouseenter=${() => this.removeHover$.next(true)}\n\t\t\t\t\t\t@mouseleave=${() => this.removeHover$.next(false)}\n\t\t\t\t\t\taria-label=\"Remove\"\n\t\t\t\t\t\ttabindex=\"-1\"\n\t\t\t\t\t\t?disabled=${this.disabled}\n\t\t\t\t\t>\n\t\t\t\t\t\t<span class=\"material-symbols-outlined text-[18px]\">\n\t\t\t\t\t\t\tclose\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</button>\n\t\t\t\t` : ''}\n\n\t\t\t\t<!-- Ripple effects -->\n\t\t\t\t${this.ripples.map(ripple => html`\n\t\t\t\t\t<span\n\t\t\t\t\t\tclass=\"ripple\"\n\t\t\t\t\t\tstyle=\"left: ${ripple.x}px; top: ${ripple.y}px;\"\n\t\t\t\t\t></span>\n\t\t\t\t`)}\n\n\t\t\t\t<!-- State layer for M3 hover/focus/pressed states -->\n\t\t\t\t<div class=\"state-layer\"></div>\n\t\t\t</div>\n\t\t`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-input-chip': SchmancyInputChip\n\t}\n}\n\nexport type InputChipClickEvent = { value: string }\nexport type InputChipRemoveEvent = { value: string }"],"names":["SchmancyInputChip","TailwindElement","css","super","this","value","icon","avatar","removable","disabled","elevated","chipHover$","BehaviorSubject","removeHover$","focused$","pressed$","uiState","chipHover","removeHover","focused","pressed","ripples","nextRippleId","handleChipClick","e","chip","shadowRoot","querySelector","rect","getBoundingClientRect","x","clientX","left","y","clientY","top","id","setTimeout","filter","r","dispatchEvent","CustomEvent","detail","bubbles","composed","handleRemove","stopPropagation","handleKeyDown","key","preventDefault","clickEvent","MouseEvent","cancelable","handleFocus","next","handleBlur","internals","attachInternals","form","connectedCallback","combineLatest","pipe","map","tap","state","takeUntil","disconnecting","subscribe","render","hasLeadingIcon","chipClasses","relative","border","removeButtonClasses","flex","html","classMap","ripple","shadowRootOptions","LitElement","delegatesFocus","formAssociated","__decorateClass","property","type","String","reflect","prototype","Boolean","customElement"],"mappings":";;;;;;;;;;AA+BO,IAAMA,IAAN,cAAgCC,EAAgBC;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA,CA2HtD,EAAA;AAAA,EAAA;AACCC,UAAAA,GAzCDC,KAAAC,QAAgB,IAIhBD,KAAAE,OAAe,IAIfF,KAAAG,SAAiB,IAIjBH,KAAAI,gBAIAJ,KAAAK,eAIAL,KAAAM,eAGAN,KAAQO,aAAa,IAAIC,IAAyB,GAClDR,KAAQS,eAAe,IAAID,EAAAA,KAC3BR,KAAQU,WAAW,IAAIF,EAAAA,EAAyB,GAChDR,KAAQW,WAAW,IAAIH,IAAyB,GAGtCR,KAAAY,UAAU,EACnBC,WAAAA,IACAC,aAAAA,IACAC,SAAAA,IACAC,YAAS,GAIDhB,KAAQiB,UAAuD,CAAA,GACxEjB,KAAQkB,eAAe,GA6CvBlB,KAAQmB,kBAAmBC,CAAAA,MAAAA;AAC1B,UAAIpB,KAAKK,SAAU;AAGnB,YAAMgB,IAAOrB,KAAKsB,YAAYC,cAAc,iBAAA;AAC5C,UAAIF,GAAM;AACT,cAAMG,IAAOH,EAAKI,yBACZC,IAAIN,EAAEO,UAAUH,EAAKI,MACrBC,IAAIT,EAAEU,UAAUN,EAAKO,KACrBC,IAAKhC,KAAKkB;AAEhBlB,aAAKiB,UAAU,CAAA,GAAIjB,KAAKiB,SAAS,EAAES,MAAGG,GAAAA,GAAGG,IAAAA,EAAAA,CAAAA,GAGzCC,WAAW,MAAA;AACVjC,eAAKiB,UAAUjB,KAAKiB,QAAQiB,OAAOC,CAAAA,MAAKA,EAAEH,OAAOA,CAAAA;AAAAA,QAAAA,GAC/C,GAAA;AAAA,MACJ;AAGAhC,WAAKoC,cACJ,IAAIC,YAAY,SAAS,EACxBC,QAAQ,EAAErC,OAAOD,KAAKC,SACtBsC,SAAAA,IACAC,aAAU,CAAA,CAAA;AAAA,IAAA,GAKbxC,KAAQyC,eAAgBrB,CAAAA,MAAAA;AACnBpB,WAAKK,aAETe,EAAEsB,gBAAAA,GAGF1C,KAAKoC,cACJ,IAAIC,YAAY,UAAU,EACzBC,QAAQ,EAAErC,OAAOD,KAAKC,MAAAA,GACtBsC,aACAC,UAAAA;OAKHxC,KAAQ2C,gBAAiBvB,CAAAA;AACxB,UAAA,CAAIpB,KAAKK,SAGT,KAAKe,EAAEwB,QAAQ,YAAYxB,EAAEwB,QAAQ,eAARA,CAAwB5C,KAAKI;AAG1D,YAESgB,EAAEwB,QAAQ,SAAS;AAC3BxB,UAAAA,EAAEyB,eAAAA;AACF,gBAAMC,IAAa,IAAIC,WAAW,SAAS,EAC1CR,SAAAA,IACAS,YAAAA,IACArB,SAAS,GACTG,SAAS,EAAA,CAAA;AAEV9B,eAAKmB,gBAAgB2B,CAAAA;AAAAA,QACtB;AAAA,YAbC1B,CAAAA,EAAEyB,eAAAA,GACF7C,KAAKyC,aAAarB,CAAAA;AAAAA,IAAAA,GAepBpB,KAAQiD,cAAc,MAAA;AACrBjD,WAAKU,SAASwC,KAAAA,EAAK;AAAA,IAAA,GAGpBlD,KAAQmD,aAAa,MAAA;AACpBnD,WAAKU,SAASwC,KAAAA,EAAK;AAAA,IAAA;AA/GnB,QAAA;AACClD,WAAKoD,YAAYpD,KAAKqD;IACvB,QAAA;AACCrD,WAAKoD,YAAAA;AAAAA,IACN;AAAA,EACD;AAAA,EASA,IAAA;AACC,WAAOpD,KAAKoD,WAAWE;AAAAA,EACxB;AAAA,EAEA,oBAAAC;AACCxD,UAAMwD,kBAAAA,GAGNC,EAAc,CACbxD,KAAKO,YACLP,KAAKS,cACLT,KAAKU,UACLV,KAAKW,QAAAA,CAAAA,EACH8C,KACFC,EAAI,CAAA,CAAE7C,GAAWC,GAAaC,GAASC,QAAO,EAC7CH,WAAAA,GACAC,gBACAC,SAAAA,GACAC,SAAAA,EAAAA,EAAAA,GAED2C,EAAIC,CAAAA,MAAAA;AACH5D,WAAKY,UAAUgD;AAAAA,IAAAA,CAAAA,GAEhBC,EAAU7D,KAAK8D,aAAAA,CAAAA,EACdC,UAAAA;AAAAA,EACH;AAAA,EA2EU,SAAAC;AACT,UAAMC,IAAiBjE,KAAKG,UAAUH,KAAKE,MAErCgE,IAAc,EACnB,kBAAA,IACA,eAAA,IACA,gBAAA,IACA,aACA,OAAA,IACA,gBAAA,IACA,oBACA,kBAAA,IACA,kBAAA,IACA,oBACA,eAAA,IACA,WAAA,IACA,mBACAC,UAAAA,IACA,mBAAA,IACAC,YAGA,QAAQH,GACR,QAAA,CAASA,GACT,QAAQjE,KAAKI,WACb,SAASJ,KAAKI,WAGd,+BACA,0BAAA,IACA,kBAAA,IACA,oBAIA,yBAAA,CAA0BJ,KAAKK,UAC/B,4BAA4BL,KAAKK,UACjC,kCAAkCL,KAAKK,UACvC,mCAAmCL,KAAKK,UAGxC,cAAcL,KAAKK,UACnB,sBAAsBL,KAAKK,SAAAA,GAGtBgE,IAAsB,EAC3B,eAAA,IACAC,MAAAA,IACA,oBACA,kBAAA,IACA,gBAAA,IACA,sBACA,gBAAA,IACA,kBAAA,CAAmBtE,KAAKK,UACxB,SAAA,IAGA,sCAAsCL,KAAKK,UAC3C,cAAcL,KAAKK,SAAAA;AAGpB,WAAOkE;AAAAA;AAAAA,YAEGC,EAASN,CAAAA,CAAAA;AAAAA,aACRlE,KAAKmB,eAAAA;AAAAA,eACHnB,KAAK2C,aAAAA;AAAAA,kBACF,MAAM3C,KAAKO,WAAW2C,KAAAA,EAAK,CAAA;AAAA,kBAC3B,MAAMlD,KAAKO,WAAW2C,KAAAA,EAAK,CAAA;AAAA,iBAC5B,MAAMlD,KAAKW,SAASuC,KAAAA,EAAK,CAAA;AAAA,eAC3B,MAAMlD,KAAKW,SAASuC,KAAAA,EAAK,CAAA;AAAA,aAC3BlD,KAAKiD,WAAAA;AAAAA,YACNjD,KAAKmD,UAAAA;AAAAA;AAAAA,eAEFnD,KAAKK,WAAW,OAAO,GAAA;AAAA,oBAClBL,KAAKK,QAAAA;AAAAA,iBACRL,KAAKC,KAAAA;AAAAA;AAAAA;AAAAA,MAGhBD,KAAKG,SAASoE;AAAAA;AAAAA,YAERvE,KAAKG,MAAAA;AAAAA;AAAAA;AAAAA;AAAAA,QAIT,EAAA;AAAA;AAAA;AAAA,MAGFH,KAAKE,QAAAA,CAASF,KAAKG,SAASoE;AAAAA;AAAAA,QAE1BvE,KAAKE,IAAAA;AAAAA;AAAAA,QAEL,EAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAQFF,KAAKI,YAAYmE;AAAAA;AAAAA,cAETC,EAASH,CAAAA,CAAAA;AAAAA,eACRrE,KAAKyC,YAAAA;AAAAA,oBACA,MAAMzC,KAAKS,aAAayC,KAAAA,EAAK,CAAA;AAAA,oBAC7B,MAAMlD,KAAKS,aAAayC,KAAAA,EAAK,CAAA;AAAA;AAAA;AAAA,kBAG/BlD,KAAKK,QAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA,QAMf,EAAA;AAAA;AAAA;AAAA,MAGFL,KAAKiB,QAAQyC,IAAIe,CAAAA,MAAUF;AAAAA;AAAAA;AAAAA,qBAGZE,EAAO/C,aAAa+C,EAAO5C,CAAAA;AAAAA;AAAAA;;;;;;EAQ/C;AAAA;AA9WYjC,EAoIK8E,oBAAoB,EAAA,GACjCC,EAAWD,mBACdE,gBAAAA,GAAgB,GAtILhF,EAyILiF,iBAAAA,IAtDPC,EAAA,CADCC,EAAS,EAAEC,MAAMC,QAAQC,SAAAA,QAlFdtF,EAmFZuF,WAAA,SAAA,CAAA,GAIAL,EAAA,CADCC,EAAS,EAAEC,MAAMC,QAAQC,SAAAA,GAAS,CAAA,CAAA,GAtFvBtF,EAuFZuF,WAAA,QAAA,CAAA,GAIAL,EAAA,CADCC,EAAS,EAAEC,MAAMC,QAAQC,YAAS,CAAA,CAAA,GA1FvBtF,EA2FZuF,WAAA,UAAA,CAAA,GAIAL,EAAA,CADCC,EAAS,EAAEC,MAAMI,SAASF,SAAAA,QA9FftF,EA+FZuF,WAAA,aAAA,CAAA,GAIAL,EAAA,CADCC,EAAS,EAAEC,MAAMI,SAASF,SAAAA,GAAS,CAAA,CAAA,GAlGxBtF,EAmGZuF,WAAA,YAAA,IAIAL,EAAA,CADCC,EAAS,EAAEC,MAAMI,SAASF,YAAS,CAAA,CAAA,GAtGxBtF,EAuGZuF,WAAA,YAAA,CAAA,GASUL,EAAA,CAATlB,EAAAA,CAAAA,GAhHWhE,EAgHFuF,WAAA,WAAA,CAAA,GAQOL,EAAA,CAAhBlB,EAAAA,CAAAA,GAxHWhE,EAwHKuF,WAAA,WAAA,CAAA,GAxHLvF,IAANkF,EAAA,CADNO,EAAc,qBAAA,CAAA,GACFzF,CAAAA;"}

package/dist/input-chip-DH-ltFro.cjs

@@ -0,0 +1,147 @@
+"use strict";const u=require("./tailwind.mixin-2ShBHr1a.cjs"),r=require("lit"),a=require("lit/decorators.js"),d=require("lit/directives/class-map.js"),c=require("rxjs"),h=require("rxjs/operators");var m=Object.defineProperty,v=Object.getOwnPropertyDescriptor,n=(e,t,s,i)=>{for(var l,o=i>1?void 0:i?v(t,s):t,p=e.length-1;p>=0;p--)(l=e[p])&&(o=(i?l(t,s,o):l(o))||o);return i&&o&&m(t,s,o),o};exports.SchmancyInputChip=class extends u.TailwindElement(r.css`
+	: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 c.BehaviorSubject(!1),this.removeHover$=new c.BehaviorSubject(!1),this.focused$=new c.BehaviorSubject(!1),this.pressed$=new c.BehaviorSubject(!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(),i=e.clientX-s.left,l=e.clientY-s.top,o=this.nextRippleId++;this.ripples=[...this.ripples,{x:i,y:l,id:o}],setTimeout(()=>{this.ripples=this.ripples.filter(p=>p.id!==o)},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(),c.combineLatest([this.chipHover$,this.removeHover$,this.focused$,this.pressed$]).pipe(h.map(([e,t,s,i])=>({chipHover:e,removeHover:t,focused:s,pressed:i})),h.tap(e=>{this.uiState=e}),h.takeUntil(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,"border-solid":!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.html`
+			<div
+				class=${d.classMap(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.html`
+					<img
+						src=${this.avatar}
+						alt=""
+						class="avatar-img rounded-full size-5"
+					/>
+				`:""}
+
+				<!-- Icon (if provided and no avatar) -->
+				${this.icon&&!this.avatar?r.html`
+					<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.html`
+					<button
+						class=${d.classMap(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(i=>r.html`
+					<span
+						class="ripple"
+						style="left: ${i.x}px; top: ${i.y}px;"
+					></span>
+				`)}
+
+				<!-- State layer for M3 hover/focus/pressed states -->
+				<div class="state-layer"></div>
+			</div>
+		`}},exports.SchmancyInputChip.shadowRootOptions={...r.LitElement.shadowRootOptions,delegatesFocus:!0},exports.SchmancyInputChip.formAssociated=!0,n([a.property({type:String,reflect:!0})],exports.SchmancyInputChip.prototype,"value",2),n([a.property({type:String,reflect:!0})],exports.SchmancyInputChip.prototype,"icon",2),n([a.property({type:String,reflect:!0})],exports.SchmancyInputChip.prototype,"avatar",2),n([a.property({type:Boolean,reflect:!0})],exports.SchmancyInputChip.prototype,"removable",2),n([a.property({type:Boolean,reflect:!0})],exports.SchmancyInputChip.prototype,"disabled",2),n([a.property({type:Boolean,reflect:!0})],exports.SchmancyInputChip.prototype,"elevated",2),n([a.state()],exports.SchmancyInputChip.prototype,"uiState",2),n([a.state()],exports.SchmancyInputChip.prototype,"ripples",2),exports.SchmancyInputChip=n([a.customElement("schmancy-input-chip")],exports.SchmancyInputChip);
+//# sourceMappingURL=input-chip-DH-ltFro.cjs.map

package/dist/input-chip-DH-ltFro.cjs.map

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

package/dist/input.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./input-C6nkFZ0J.cjs");Object.defineProperty(exports,"SchmancyInput",{enumerable:!0,get:()=>e.SchmancyInput}),Object.defineProperty(exports,"SchmancyInputCompat",{enumerable:!0,get:()=>e.SchmancyInputCompat});
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./input-ClaO85hD.cjs");Object.defineProperty(exports,"SchmancyInput",{enumerable:!0,get:()=>e.SchmancyInput}),Object.defineProperty(exports,"SchmancyInputCompat",{enumerable:!0,get:()=>e.SchmancyInputCompat});
 //# sourceMappingURL=input.cjs.map

package/dist/input.js

@@ -1,4 +1,4 @@
-import { S as m, a as n } from "./input-CelKeexC.js";
+import { S as m, a as n } from "./input-Cphkeayy.js";
 export {
   m as SchmancyInput,
   n as SchmancyInputCompat

package/dist/layout.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./flex-fSrnbN_9.cjs");Object.defineProperty(exports,"SchmancyFlex",{enumerable:!0,get:()=>e.SchmancyFlex}),Object.defineProperty(exports,"SchmancyFlexV2",{enumerable:!0,get:()=>e.SchmancyFlexV2}),Object.defineProperty(exports,"SchmancyGrid",{enumerable:!0,get:()=>e.SchmancyGrid}),Object.defineProperty(exports,"SchmancyScroll",{enumerable:!0,get:()=>e.SchmancyScroll});
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./flex-_oJb1WUg.cjs");Object.defineProperty(exports,"SchmancyFlex",{enumerable:!0,get:()=>e.SchmancyFlex}),Object.defineProperty(exports,"SchmancyFlexV2",{enumerable:!0,get:()=>e.SchmancyFlexV2}),Object.defineProperty(exports,"SchmancyGrid",{enumerable:!0,get:()=>e.SchmancyGrid}),Object.defineProperty(exports,"SchmancyScroll",{enumerable:!0,get:()=>e.SchmancyScroll});
 //# sourceMappingURL=layout.cjs.map

package/dist/layout.js

@@ -1,4 +1,4 @@
-import { S, c as m, a as h, b as l } from "./flex-CCqq8WLW.js";
+import { S, c as m, a as h, b as l } from "./flex-Ddzbguaf.js";
 export {
   S as SchmancyFlex,
   m as SchmancyFlexV2,

package/dist/{list-C86nJOsl.js → list-B2OyjLBr.js}

@@ -3,7 +3,7 @@ import "rxjs";
 import "lit/directives/class-map.js";
 import "lit/directives/style-map.js";
 import { property as p, queryAssignedElements as m, customElement as h } from "lit/decorators.js";
-import { T as y } from "./tailwind.mixin-BMDZASqc.js";
+import { T as y } from "./tailwind.mixin-DmqqUtYJ.js";
 import { n as f, e as v } from "./provide-tcktw8xB.js";
 import { html as u, css as b } from "lit";
 import { when as x } from "lit/directives/when.js";
@@ -65,4 +65,4 @@ export {
   $ as S,
   r as a
 };
-//# sourceMappingURL=list-C86nJOsl.js.map
+//# sourceMappingURL=list-B2OyjLBr.js.map

package/dist/{list-C86nJOsl.js.map → list-B2OyjLBr.js.map}

@@ -1 +1 @@
-{"version":3,"file":"list-C86nJOsl.js","sources":["../src/list/context.ts","../src/surface/context.ts","../src/list/list-item.ts","../src/list/list.ts"],"sourcesContent":["import { createContext } from '@lit/context'\nimport { TSurfaceColor } from '@schmancy/types/surface'\nexport const SchmancyListTypeContext = createContext<TSurfaceColor>(undefined)\n","import { createContext } from '@lit/context'\nimport { TSurfaceColor } from '@schmancy/types/surface'\nexport const SchmancySurfaceTypeContext = createContext<TSurfaceColor>('surface')\n","import { consume } from '@lit/context'\nimport { TailwindElement } from '@mixins/index'\nimport { SchmancySurfaceTypeContext } from '@schmancy/surface/context'\nimport { TSurfaceColor } from '@schmancy/types/surface'\nimport { html } from 'lit'\nimport { customElement, property, queryAssignedElements } from 'lit/decorators.js'\nimport { when } from 'lit/directives/when.js'\n\n/**\n * @element schmancy-list-item\n * @slot leading - leading content\n * @slot trailing - trailing content\n * @slot - default content\n */\n@customElement('schmancy-list-item')\nexport class SchmancyListItem extends TailwindElement() {\n\t@consume({ context: SchmancySurfaceTypeContext, subscribe: true })\n\t@property()\n\tvariant: TSurfaceColor\n\n\t@property({ type: Boolean })\n\trounded: boolean\n\n\t@property({ type: Boolean }) readonly: boolean\n\n\t@property({ type: Boolean }) selected: boolean = false\n\n\t@queryAssignedElements({\n\t\tslot: 'leading',\n\t\tflatten: true,\n\t})\n\tprivate leading!: HTMLElement[]\n\n\t@queryAssignedElements({\n\t\tslot: 'trailing',\n\t\tflatten: true,\n\t})\n\tprivate trailing!: HTMLElement[]\n\n\tprotected get imgClasses(): string[] {\n\t\treturn ['h-5', 'w-5', 'sm:h-6', 'sm:w-6', 'object-contain']\n\t}\n\n\tfirstUpdated() {\n\t\tthis.leading?.forEach(img => {\n\t\t\timg.classList.add(...this.imgClasses)\n\t\t})\n\t\tthis.trailing?.forEach(img => {\n\t\t\timg.classList.add(...this.imgClasses)\n\t\t})\n\t}\n\n\trender() {\n\t\tconst classes = {\n\t\t\t'rounded-none': this.rounded === false,\n\t\t\t'rounded-full': this.rounded,\n\t\t\t'relative inset-0 w-full flex items-center min-h-[44px] sm:min-h-[48px] md:min-h-[56px] py-1 px-2 sm:py-2 sm:px-3 md:py-2 md:px-4 text-sm sm:text-base duration-500 transition-colors focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-0 focus-visible:z-1 outline-secondary-default outline-hidden':\n\t\t\t\ttrue,\n\t\t\t'bg-secondary-container text-secondery-onContainer': this.selected,\n\t\t}\n\n\t\tconst stateLayerClasses = {\n\t\t\t'z-0 duration-500 transition-opacity': true,\n\t\t\t'rounded-none': this.rounded === false,\n\t\t\t'rounded-full': this.rounded,\n\t\t\t'hover:bg-surface-on opacity-[0.08] cursor-pointer absolute inset-0 ': !this.readonly,\n\t\t}\n\t\treturn html` <li .tabIndex=${this.readonly ? -1 : 0} class=${this.classMap(classes)}>\n\t\t\t${when(!this.readonly, () => html` <div class=\"${this.classMap(stateLayerClasses)}\"></div>`)}\n\t\t\t<slot></slot>\n\t\t</li>`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-list-item': SchmancyListItem\n\t}\n}\n","import { provide } from '@lit/context'\nimport { TailwindElement } from '@mixins/index'\nimport { SchmancySurfaceFill } from '@schmancy/surface'\nimport { TSurfaceColor } from '@schmancy/types/surface'\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { SchmancyListTypeContext } from './context'\n\n/**\n * `<schmancy-list>` component.\n *\n * A list component that wraps its content within a customizable surface.\n * It allows you to set the surface type and fill style, and can optionally\n * enable scrolling behavior by delegating the scroller attribute to the surface.\n *\n * @element schmancy-list\n * @slot - The default slot for list items.\n *\n * @example\n * <schmancy-list surface=\"container\" scroller>\n *   <schmancy-list-item>List Item 1</schmancy-list-item>\n * </schmancy-list>\n */\n@customElement('schmancy-list')\nexport class List extends TailwindElement(css`\n\t:host {\n\t\tdisplay: block;\n\t\tpadding-top: 8px;\n\t\tpadding-bottom: 8px;\n\t}\n`) {\n\t/**\n\t * Defines the type or color of the surface used by the component.\n\t * This value is provided to descendant components via context.\n\t *\n\t * @attr surface\n\t * @type {TSurfaceColor}\n\t * @default 'surface'\n\t */\n\t@provide({ context: SchmancyListTypeContext })\n\t@property()\n\tsurface: TSurfaceColor\n\n\t/**\n\t * Determines the fill style of the underlying surface.\n\t *\n\t * @attr fill\n\t * @type {SchmancySurfaceFill}\n\t * @default 'auto'\n\t */\n\t@property({ type: String, reflect: true })\n\tfill: SchmancySurfaceFill = 'auto'\n\n\t/**\n\t * Defines the elevation level of the surface.\n\t *\n\t * @attr elevation\n\t * @type {number}\n\t * @default 0\n\t */\n\t@property({ type: Number })\n\televation: 0 | 1 | 2 | 3 | 4 | 5 = 0\n\n\t/**\n\t * Renders the component's template.\n\t * The list content is wrapped inside a `<schmancy-surface>` element.\n\t * The scroller property is delegated to the surface so that it controls\n\t * the scrollable behavior.\n\t *\n\t * @returns The HTML template for the component.\n\t */\n\trender() {\n\t\treturn html`\n\t\t\t<schmancy-surface .elevation=${this.elevation} .fill=${this.fill} type=${this.surface}>\n\t\t\t\t<ul>\n\t\t\t\t\t<slot></slot>\n\t\t\t\t</ul>\n\t\t\t</schmancy-surface>\n\t\t`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-list': List\n\t}\n}\n"],"names":["SchmancyListTypeContext","createContext","SchmancySurfaceTypeContext","SchmancyListItem","TailwindElement","constructor","super","arguments","this","selected","imgClasses","firstUpdated","leading","forEach","img","classList","add","trailing","render","classes","rounded","stateLayerClasses","readonly","html","classMap","when","__decorateClass","consume","context","subscribe","property","prototype","type","Boolean","queryAssignedElements","slot","flatten","customElement","List","css","fill","elevation","surface","provide","String","reflect","Number"],"mappings":"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"}
+{"version":3,"file":"list-B2OyjLBr.js","sources":["../src/list/context.ts","../src/surface/context.ts","../src/list/list-item.ts","../src/list/list.ts"],"sourcesContent":["import { createContext } from '@lit/context'\nimport { TSurfaceColor } from '@schmancy/types/surface'\nexport const SchmancyListTypeContext = createContext<TSurfaceColor>(undefined)\n","import { createContext } from '@lit/context'\nimport { TSurfaceColor } from '@schmancy/types/surface'\nexport const SchmancySurfaceTypeContext = createContext<TSurfaceColor>('surface')\n","import { consume } from '@lit/context'\nimport { TailwindElement } from '@mixins/index'\nimport { SchmancySurfaceTypeContext } from '@schmancy/surface/context'\nimport { TSurfaceColor } from '@schmancy/types/surface'\nimport { html } from 'lit'\nimport { customElement, property, queryAssignedElements } from 'lit/decorators.js'\nimport { when } from 'lit/directives/when.js'\n\n/**\n * @element schmancy-list-item\n * @slot leading - leading content\n * @slot trailing - trailing content\n * @slot - default content\n */\n@customElement('schmancy-list-item')\nexport class SchmancyListItem extends TailwindElement() {\n\t@consume({ context: SchmancySurfaceTypeContext, subscribe: true })\n\t@property()\n\tvariant: TSurfaceColor\n\n\t@property({ type: Boolean })\n\trounded: boolean\n\n\t@property({ type: Boolean }) readonly: boolean\n\n\t@property({ type: Boolean }) selected: boolean = false\n\n\t@queryAssignedElements({\n\t\tslot: 'leading',\n\t\tflatten: true,\n\t})\n\tprivate leading!: HTMLElement[]\n\n\t@queryAssignedElements({\n\t\tslot: 'trailing',\n\t\tflatten: true,\n\t})\n\tprivate trailing!: HTMLElement[]\n\n\tprotected get imgClasses(): string[] {\n\t\treturn ['h-5', 'w-5', 'sm:h-6', 'sm:w-6', 'object-contain']\n\t}\n\n\tfirstUpdated() {\n\t\tthis.leading?.forEach(img => {\n\t\t\timg.classList.add(...this.imgClasses)\n\t\t})\n\t\tthis.trailing?.forEach(img => {\n\t\t\timg.classList.add(...this.imgClasses)\n\t\t})\n\t}\n\n\trender() {\n\t\tconst classes = {\n\t\t\t'rounded-none': this.rounded === false,\n\t\t\t'rounded-full': this.rounded,\n\t\t\t'relative inset-0 w-full flex items-center min-h-[44px] sm:min-h-[48px] md:min-h-[56px] py-1 px-2 sm:py-2 sm:px-3 md:py-2 md:px-4 text-sm sm:text-base duration-500 transition-colors focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-0 focus-visible:z-1 outline-secondary-default outline-hidden':\n\t\t\t\ttrue,\n\t\t\t'bg-secondary-container text-secondery-onContainer': this.selected,\n\t\t}\n\n\t\tconst stateLayerClasses = {\n\t\t\t'z-0 duration-500 transition-opacity': true,\n\t\t\t'rounded-none': this.rounded === false,\n\t\t\t'rounded-full': this.rounded,\n\t\t\t'hover:bg-surface-on opacity-[0.08] cursor-pointer absolute inset-0 ': !this.readonly,\n\t\t}\n\t\treturn html` <li .tabIndex=${this.readonly ? -1 : 0} class=${this.classMap(classes)}>\n\t\t\t${when(!this.readonly, () => html` <div class=\"${this.classMap(stateLayerClasses)}\"></div>`)}\n\t\t\t<slot></slot>\n\t\t</li>`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-list-item': SchmancyListItem\n\t}\n}\n","import { provide } from '@lit/context'\nimport { TailwindElement } from '@mixins/index'\nimport { SchmancySurfaceFill } from '@schmancy/surface'\nimport { TSurfaceColor } from '@schmancy/types/surface'\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { SchmancyListTypeContext } from './context'\n\n/**\n * `<schmancy-list>` component.\n *\n * A list component that wraps its content within a customizable surface.\n * It allows you to set the surface type and fill style, and can optionally\n * enable scrolling behavior by delegating the scroller attribute to the surface.\n *\n * @element schmancy-list\n * @slot - The default slot for list items.\n *\n * @example\n * <schmancy-list surface=\"container\" scroller>\n *   <schmancy-list-item>List Item 1</schmancy-list-item>\n * </schmancy-list>\n */\n@customElement('schmancy-list')\nexport class List extends TailwindElement(css`\n\t:host {\n\t\tdisplay: block;\n\t\tpadding-top: 8px;\n\t\tpadding-bottom: 8px;\n\t}\n`) {\n\t/**\n\t * Defines the type or color of the surface used by the component.\n\t * This value is provided to descendant components via context.\n\t *\n\t * @attr surface\n\t * @type {TSurfaceColor}\n\t * @default 'surface'\n\t */\n\t@provide({ context: SchmancyListTypeContext })\n\t@property()\n\tsurface: TSurfaceColor\n\n\t/**\n\t * Determines the fill style of the underlying surface.\n\t *\n\t * @attr fill\n\t * @type {SchmancySurfaceFill}\n\t * @default 'auto'\n\t */\n\t@property({ type: String, reflect: true })\n\tfill: SchmancySurfaceFill = 'auto'\n\n\t/**\n\t * Defines the elevation level of the surface.\n\t *\n\t * @attr elevation\n\t * @type {number}\n\t * @default 0\n\t */\n\t@property({ type: Number })\n\televation: 0 | 1 | 2 | 3 | 4 | 5 = 0\n\n\t/**\n\t * Renders the component's template.\n\t * The list content is wrapped inside a `<schmancy-surface>` element.\n\t * The scroller property is delegated to the surface so that it controls\n\t * the scrollable behavior.\n\t *\n\t * @returns The HTML template for the component.\n\t */\n\trender() {\n\t\treturn html`\n\t\t\t<schmancy-surface .elevation=${this.elevation} .fill=${this.fill} type=${this.surface}>\n\t\t\t\t<ul>\n\t\t\t\t\t<slot></slot>\n\t\t\t\t</ul>\n\t\t\t</schmancy-surface>\n\t\t`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-list': List\n\t}\n}\n"],"names":["SchmancyListTypeContext","createContext","SchmancySurfaceTypeContext","SchmancyListItem","TailwindElement","constructor","super","arguments","this","selected","imgClasses","firstUpdated","leading","forEach","img","classList","add","trailing","render","classes","rounded","stateLayerClasses","readonly","html","classMap","when","__decorateClass","consume","context","subscribe","property","prototype","type","Boolean","queryAssignedElements","slot","flatten","customElement","List","css","fill","elevation","surface","provide","String","reflect","Number"],"mappings":";;;;;;;;;AAEO,MAAMA,IAA0BC,QAA6B,GCAvDC,IAA6BD,EAA6B,SAAA;;;;;ACahE,IAAME,IAAN,cAA+BC,EAAAA,EAAAA;AAAAA,EAA/B,cAAAC;AAAAC,UAAAA,GAAAC,SAAAA,GAUuBC,KAAAC;EAAoB;AAAA,EAcjD,IAAA,aAAcC;AACb,WAAO,CAAC,OAAO,OAAO,UAAU,UAAU,gBAAA;AAAA,EAC3C;AAAA,EAEA,eAAAC;AACCH,SAAKI,SAASC,QAAQC,CAAAA,MAAAA;AACrBA,MAAAA,EAAIC,UAAUC,IAAAA,GAAOR,KAAKE,UAAAA;AAAAA,IAAAA,CAAAA,GAE3BF,KAAKS,UAAUJ,QAAQC,CAAAA,MAAAA;AACtBA,MAAAA,EAAIC,UAAUC,IAAAA,GAAOR,KAAKE,UAAAA;AAAAA,IAAAA,CAAAA;AAAAA,EAE5B;AAAA,EAEA,SAAAQ;AACC,UAAMC,IAAU,EACf,gBAAgBX,KAAKY,YAArB,IACA,gBAAgBZ,KAAKY,SACrB,0UAEA,qDAAqDZ,KAAKC,SAAAA,GAGrDY,IAAoB,EACzB,uCAAA,IACA,gBAAgBb,KAAKY,YAArB,IACA,gBAAgBZ,KAAKY,SACrB,uEAAA,CAAwEZ,KAAKc,SAAAA;AAE9E,WAAOC,mBAAsBf,KAAKc,gBAAgB,CAAA,UAAWd,KAAKgB,SAASL,CAAAA,CAAAA;AAAAA,KACxEM,EAAAA,CAAMjB,KAAKc,UAAU,MAAMC,iBAAoBf,KAAKgB,SAASH,CAAAA,CAAAA,UAAAA,CAAAA;AAAAA;AAAAA;AAAAA,EAGjE;AAAA;AArDAK,EAAA,CAFCC,EAAQ,EAAEC,SAAS1B,GAA4B2B,WAAAA,GAAW,CAAA,GAC1DC,EAAAA,CAAAA,GAFW3B,EAGZ4B,WAAA,WAAA,CAAA,GAGAL,EAAA,CADCI,EAAS,EAAEE,MAAMC,QAAAA,CAAAA,CAAAA,GALN9B,EAMZ4B,WAAA,WAAA,CAAA,GAE6BL,EAAA,CAA5BI,EAAS,EAAEE,MAAMC,aARN9B,EAQiB4B,WAAA,YAAA,CAAA,GAEAL,EAAA,CAA5BI,EAAS,EAAEE,MAAMC,QAAAA,CAAAA,CAAAA,GAVN9B,EAUiB4B,WAAA,YAAA,CAAA,GAMrBL,EAAA,CAJPQ,EAAsB,EACtBC,MAAM,WACNC,SAAAA,GAAS,CAAA,CAAA,GAdEjC,EAgBJ4B,WAAA,WAAA,CAAA,GAMAL,EAAA,CAJPQ,EAAsB,EACtBC,MAAM,YACNC,YAAS,CAAA,CAAA,GApBEjC,EAsBJ4B,WAAA,YAAA,CAAA,GAtBI5B,IAANuB,EAAA,CADNW,EAAc,oBAAA,CAAA,GACFlC,CAAAA;;;;;ACSN,IAAMmC,IAAN,cAAmBlC,EAAgBmC;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA,CAAnC,EAAA;AAAA,EAAA,cAAAlC;AAAAC,UAAAA,GAAAC,SAAAA,GA2BNC,KAAAgC,OAA4B,QAU5BhC,KAAAiC,YAAmC;AAAA,EAAA;AAAA,EAUnC,SAAAvB;AACC,WAAOK;AAAAA,kCACyBf,KAAKiC,SAAAA,UAAmBjC,KAAKgC,IAAAA,SAAahC,KAAKkC,OAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA,EAMhF;AAAA;AAtCAhB,EAAA,CAFCiB,EAAQ,EAAEf,SAAS5B,EAAAA,CAAAA,GACnB8B,MAhBWQ,EAiBZP,WAAA,WAAA,CAAA,GAUAL,EAAA,CADCI,EAAS,EAAEE,MAAMY,QAAQC,YAAS,CAAA,CAAA,GA1BvBP,EA2BZP,WAAA,QAAA,IAUAL,EAAA,CADCI,EAAS,EAAEE,MAAMc,YApCNR,EAqCZP,WAAA,aAAA,CAAA,GArCYO,IAANZ,EAAA,CADNW,EAAc,eAAA,CAAA,GACFC,CAAAA;"}

package/dist/{list-IHwpVck4.cjs → list-CWVDZZtG.cjs}

@@ -1,4 +1,4 @@
-"use strict";const y=require("./consume-edta5ng5.cjs");require("rxjs"),require("lit/directives/class-map.js"),require("lit/directives/style-map.js");const r=require("lit/decorators.js"),m=require("./tailwind.mixin-nOWQtiUE.cjs"),d=require("./provide-BxZ2kn_p.cjs"),p=require("lit"),h=require("lit/directives/when.js"),u=d.n(void 0),f=d.n("surface");var g=Object.defineProperty,v=Object.getOwnPropertyDescriptor,a=(t,s,n,i)=>{for(var o,e=i>1?void 0:i?v(s,n):s,l=t.length-1;l>=0;l--)(o=t[l])&&(e=(i?o(s,n,e):o(e))||e);return i&&e&&g(s,n,e),e};exports.SchmancyListItem=class extends m.TailwindElement(){constructor(){super(...arguments),this.selected=!1}get imgClasses(){return["h-5","w-5","sm:h-6","sm:w-6","object-contain"]}firstUpdated(){this.leading?.forEach(t=>{t.classList.add(...this.imgClasses)}),this.trailing?.forEach(t=>{t.classList.add(...this.imgClasses)})}render(){const t={"rounded-none":this.rounded===!1,"rounded-full":this.rounded,"relative inset-0 w-full flex items-center min-h-[44px] sm:min-h-[48px] md:min-h-[56px] py-1 px-2 sm:py-2 sm:px-3 md:py-2 md:px-4 text-sm sm:text-base duration-500 transition-colors focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-0 focus-visible:z-1 outline-secondary-default outline-hidden":!0,"bg-secondary-container text-secondery-onContainer":this.selected},s={"z-0 duration-500 transition-opacity":!0,"rounded-none":this.rounded===!1,"rounded-full":this.rounded,"hover:bg-surface-on opacity-[0.08] cursor-pointer absolute inset-0 ":!this.readonly};return p.html` <li .tabIndex=${this.readonly?-1:0} class=${this.classMap(t)}>
+"use strict";const y=require("./consume-edta5ng5.cjs");require("rxjs"),require("lit/directives/class-map.js"),require("lit/directives/style-map.js");const r=require("lit/decorators.js"),m=require("./tailwind.mixin-2ShBHr1a.cjs"),d=require("./provide-BxZ2kn_p.cjs"),p=require("lit"),h=require("lit/directives/when.js"),u=d.n(void 0),f=d.n("surface");var g=Object.defineProperty,v=Object.getOwnPropertyDescriptor,a=(t,s,n,i)=>{for(var o,e=i>1?void 0:i?v(s,n):s,l=t.length-1;l>=0;l--)(o=t[l])&&(e=(i?o(s,n,e):o(e))||e);return i&&e&&g(s,n,e),e};exports.SchmancyListItem=class extends m.TailwindElement(){constructor(){super(...arguments),this.selected=!1}get imgClasses(){return["h-5","w-5","sm:h-6","sm:w-6","object-contain"]}firstUpdated(){this.leading?.forEach(t=>{t.classList.add(...this.imgClasses)}),this.trailing?.forEach(t=>{t.classList.add(...this.imgClasses)})}render(){const t={"rounded-none":this.rounded===!1,"rounded-full":this.rounded,"relative inset-0 w-full flex items-center min-h-[44px] sm:min-h-[48px] md:min-h-[56px] py-1 px-2 sm:py-2 sm:px-3 md:py-2 md:px-4 text-sm sm:text-base duration-500 transition-colors focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-0 focus-visible:z-1 outline-secondary-default outline-hidden":!0,"bg-secondary-container text-secondery-onContainer":this.selected},s={"z-0 duration-500 transition-opacity":!0,"rounded-none":this.rounded===!1,"rounded-full":this.rounded,"hover:bg-surface-on opacity-[0.08] cursor-pointer absolute inset-0 ":!this.readonly};return p.html` <li .tabIndex=${this.readonly?-1:0} class=${this.classMap(t)}>
 			${h.when(!this.readonly,()=>p.html` <div class="${this.classMap(s)}"></div>`)}
 			<slot></slot>
 		</li>`}},a([y.c({context:f,subscribe:!0}),r.property()],exports.SchmancyListItem.prototype,"variant",2),a([r.property({type:Boolean})],exports.SchmancyListItem.prototype,"rounded",2),a([r.property({type:Boolean})],exports.SchmancyListItem.prototype,"readonly",2),a([r.property({type:Boolean})],exports.SchmancyListItem.prototype,"selected",2),a([r.queryAssignedElements({slot:"leading",flatten:!0})],exports.SchmancyListItem.prototype,"leading",2),a([r.queryAssignedElements({slot:"trailing",flatten:!0})],exports.SchmancyListItem.prototype,"trailing",2),exports.SchmancyListItem=a([r.customElement("schmancy-list-item")],exports.SchmancyListItem);var b=Object.defineProperty,x=Object.getOwnPropertyDescriptor,c=(t,s,n,i)=>{for(var o,e=i>1?void 0:i?x(s,n):s,l=t.length-1;l>=0;l--)(o=t[l])&&(e=(i?o(s,n,e):o(e))||e);return i&&e&&b(s,n,e),e};exports.List=class extends m.TailwindElement(p.css`
@@ -14,4 +14,4 @@
 				</ul>
 			</schmancy-surface>
 		`}},c([d.e({context:u}),r.property()],exports.List.prototype,"surface",2),c([r.property({type:String,reflect:!0})],exports.List.prototype,"fill",2),c([r.property({type:Number})],exports.List.prototype,"elevation",2),exports.List=c([r.customElement("schmancy-list")],exports.List),exports.SchmancyListTypeContext=u;
-//# sourceMappingURL=list-IHwpVck4.cjs.map
+//# sourceMappingURL=list-CWVDZZtG.cjs.map

package/dist/{list-IHwpVck4.cjs.map → list-CWVDZZtG.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"list-IHwpVck4.cjs","sources":["../src/list/context.ts","../src/surface/context.ts","../src/list/list-item.ts","../src/list/list.ts"],"sourcesContent":["import { createContext } from '@lit/context'\nimport { TSurfaceColor } from '@schmancy/types/surface'\nexport const SchmancyListTypeContext = createContext<TSurfaceColor>(undefined)\n","import { createContext } from '@lit/context'\nimport { TSurfaceColor } from '@schmancy/types/surface'\nexport const SchmancySurfaceTypeContext = createContext<TSurfaceColor>('surface')\n","import { consume } from '@lit/context'\nimport { TailwindElement } from '@mixins/index'\nimport { SchmancySurfaceTypeContext } from '@schmancy/surface/context'\nimport { TSurfaceColor } from '@schmancy/types/surface'\nimport { html } from 'lit'\nimport { customElement, property, queryAssignedElements } from 'lit/decorators.js'\nimport { when } from 'lit/directives/when.js'\n\n/**\n * @element schmancy-list-item\n * @slot leading - leading content\n * @slot trailing - trailing content\n * @slot - default content\n */\n@customElement('schmancy-list-item')\nexport class SchmancyListItem extends TailwindElement() {\n\t@consume({ context: SchmancySurfaceTypeContext, subscribe: true })\n\t@property()\n\tvariant: TSurfaceColor\n\n\t@property({ type: Boolean })\n\trounded: boolean\n\n\t@property({ type: Boolean }) readonly: boolean\n\n\t@property({ type: Boolean }) selected: boolean = false\n\n\t@queryAssignedElements({\n\t\tslot: 'leading',\n\t\tflatten: true,\n\t})\n\tprivate leading!: HTMLElement[]\n\n\t@queryAssignedElements({\n\t\tslot: 'trailing',\n\t\tflatten: true,\n\t})\n\tprivate trailing!: HTMLElement[]\n\n\tprotected get imgClasses(): string[] {\n\t\treturn ['h-5', 'w-5', 'sm:h-6', 'sm:w-6', 'object-contain']\n\t}\n\n\tfirstUpdated() {\n\t\tthis.leading?.forEach(img => {\n\t\t\timg.classList.add(...this.imgClasses)\n\t\t})\n\t\tthis.trailing?.forEach(img => {\n\t\t\timg.classList.add(...this.imgClasses)\n\t\t})\n\t}\n\n\trender() {\n\t\tconst classes = {\n\t\t\t'rounded-none': this.rounded === false,\n\t\t\t'rounded-full': this.rounded,\n\t\t\t'relative inset-0 w-full flex items-center min-h-[44px] sm:min-h-[48px] md:min-h-[56px] py-1 px-2 sm:py-2 sm:px-3 md:py-2 md:px-4 text-sm sm:text-base duration-500 transition-colors focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-0 focus-visible:z-1 outline-secondary-default outline-hidden':\n\t\t\t\ttrue,\n\t\t\t'bg-secondary-container text-secondery-onContainer': this.selected,\n\t\t}\n\n\t\tconst stateLayerClasses = {\n\t\t\t'z-0 duration-500 transition-opacity': true,\n\t\t\t'rounded-none': this.rounded === false,\n\t\t\t'rounded-full': this.rounded,\n\t\t\t'hover:bg-surface-on opacity-[0.08] cursor-pointer absolute inset-0 ': !this.readonly,\n\t\t}\n\t\treturn html` <li .tabIndex=${this.readonly ? -1 : 0} class=${this.classMap(classes)}>\n\t\t\t${when(!this.readonly, () => html` <div class=\"${this.classMap(stateLayerClasses)}\"></div>`)}\n\t\t\t<slot></slot>\n\t\t</li>`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-list-item': SchmancyListItem\n\t}\n}\n","import { provide } from '@lit/context'\nimport { TailwindElement } from '@mixins/index'\nimport { SchmancySurfaceFill } from '@schmancy/surface'\nimport { TSurfaceColor } from '@schmancy/types/surface'\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { SchmancyListTypeContext } from './context'\n\n/**\n * `<schmancy-list>` component.\n *\n * A list component that wraps its content within a customizable surface.\n * It allows you to set the surface type and fill style, and can optionally\n * enable scrolling behavior by delegating the scroller attribute to the surface.\n *\n * @element schmancy-list\n * @slot - The default slot for list items.\n *\n * @example\n * <schmancy-list surface=\"container\" scroller>\n *   <schmancy-list-item>List Item 1</schmancy-list-item>\n * </schmancy-list>\n */\n@customElement('schmancy-list')\nexport class List extends TailwindElement(css`\n\t:host {\n\t\tdisplay: block;\n\t\tpadding-top: 8px;\n\t\tpadding-bottom: 8px;\n\t}\n`) {\n\t/**\n\t * Defines the type or color of the surface used by the component.\n\t * This value is provided to descendant components via context.\n\t *\n\t * @attr surface\n\t * @type {TSurfaceColor}\n\t * @default 'surface'\n\t */\n\t@provide({ context: SchmancyListTypeContext })\n\t@property()\n\tsurface: TSurfaceColor\n\n\t/**\n\t * Determines the fill style of the underlying surface.\n\t *\n\t * @attr fill\n\t * @type {SchmancySurfaceFill}\n\t * @default 'auto'\n\t */\n\t@property({ type: String, reflect: true })\n\tfill: SchmancySurfaceFill = 'auto'\n\n\t/**\n\t * Defines the elevation level of the surface.\n\t *\n\t * @attr elevation\n\t * @type {number}\n\t * @default 0\n\t */\n\t@property({ type: Number })\n\televation: 0 | 1 | 2 | 3 | 4 | 5 = 0\n\n\t/**\n\t * Renders the component's template.\n\t * The list content is wrapped inside a `<schmancy-surface>` element.\n\t * The scroller property is delegated to the surface so that it controls\n\t * the scrollable behavior.\n\t *\n\t * @returns The HTML template for the component.\n\t */\n\trender() {\n\t\treturn html`\n\t\t\t<schmancy-surface .elevation=${this.elevation} .fill=${this.fill} type=${this.surface}>\n\t\t\t\t<ul>\n\t\t\t\t\t<slot></slot>\n\t\t\t\t</ul>\n\t\t\t</schmancy-surface>\n\t\t`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-list': List\n\t}\n}\n"],"names":["SchmancyListTypeContext","createContext","SchmancySurfaceTypeContext","SchmancyListItem","TailwindElement","super","arguments","this","selected","firstUpdated","leading","forEach","img","classList","add","imgClasses","trailing","render","classes","rounded","stateLayerClasses","readonly","html","classMap","when","__decorateClass","consume","context","subscribe","property","prototype","type","Boolean","queryAssignedElements","slot","flatten","customElement","List","css","constructor","fill","elevation","surface","provide","String","reflect","Number"],"mappings":"8TAEaA,EAA0BC,EAAAA,EAAAA,MAA6B,ECAvDC,EAA6BD,EAAAA,EAA6B,SAAA,kMCa1DE,QAAAA,iBAAN,cAA+BC,EAAAA,gBAAAA,CAAAA,CAA/B,cAAAC,MAAAA,GAAAC,SAAAA,EAUuBC,KAAAC,SAAAA,EAAoB,CAcjD,IAAA,aACC,MAAO,CAAC,MAAO,MAAO,SAAU,SAAU,gBAAA,CAC3C,CAEA,cAAAC,CACCF,KAAKG,SAASC,QAAQC,IACrBA,EAAIC,UAAUC,IAAAA,GAAOP,KAAKQ,cAE3BR,KAAKS,UAAUL,QAAQC,GAAAA,CACtBA,EAAIC,UAAUC,IAAAA,GAAOP,KAAKQ,UAAAA,CAAAA,CAAAA,CAE5B,CAEA,QAAAE,CACC,MAAMC,EAAU,CACf,eAAgBX,KAAKY,UAArB,GACA,eAAgBZ,KAAKY,QACrB,qUAAA,GAEA,oDAAqDZ,KAAKC,QAAAA,EAGrDY,EAAoB,CACzB,sCAAA,GACA,eAAgBb,KAAKY,UAArB,GACA,eAAgBZ,KAAKY,QACrB,uEAAwEZ,KAAKc,QAAAA,EAE9E,OAAOC,wBAAsBf,KAAKc,YAAgB,CAAA,UAAWd,KAAKgB,SAASL,CAAAA,CAAAA;AAAAA,KACxEM,QAAMjB,KAAKc,SAAU,IAAMC,EAAAA,oBAAoBf,KAAKgB,SAASH,CAAAA,CAAAA,UAAAA,CAAAA;AAAAA;AAAAA,QAGjE,CAAA,EArDAK,EAAA,CAFCC,EAAAA,EAAQ,CAAEC,QAASzB,EAA4B0B,UAAAA,EAAW,CAAA,EAC1DC,EAAAA,SAAAA,CAAAA,EAFW1B,yBAGZ2B,UAAA,UAAA,CAAA,EAGAL,EAAA,CADCI,WAAS,CAAEE,KAAMC,WALN7B,yBAMZ2B,UAAA,UAAA,GAE6BL,EAAA,CAA5BI,WAAS,CAAEE,KAAMC,OAAAA,CAAAA,CAAAA,EARN7B,yBAQiB2B,UAAA,WAAA,CAAA,EAEAL,EAAA,CAA5BI,WAAS,CAAEE,KAAMC,WAVN7B,yBAUiB2B,UAAA,WAAA,GAMrBL,EAAA,CAJPQ,wBAAsB,CACtBC,KAAM,UACNC,QAAAA,MAdWhC,yBAgBJ2B,UAAA,UAAA,GAMAL,EAAA,CAJPQ,wBAAsB,CACtBC,KAAM,WACNC,QAAAA,EAAS,CAAA,CAAA,EApBEhC,yBAsBJ2B,UAAA,WAAA,GAtBI3B,QAAAA,iBAANsB,EAAA,CADNW,EAAAA,cAAc,oBAAA,CAAA,EACFjC,0NCSAkC,QAAAA,KAAN,cAAmBjC,EAAAA,gBAAgBkC,EAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA,CAAnC,CAAA,CAAA,aAAAC,CAAAlC,MAAAA,GAAAC,SAAAA,EA2BNC,KAAAiC,KAA4B,OAU5BjC,KAAAkC,UAAmC,CAAA,CAUnC,QAAAxB,CACC,OAAOK,EAAAA;AAAAA,kCACyBf,KAAKkC,SAAAA,UAAmBlC,KAAKiC,IAAAA,SAAajC,KAAKmC,OAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA,GAMhF,CAAA,EAtCAjB,EAAA,CAFCkB,IAAQ,CAAEhB,QAAS3B,CAAAA,CAAAA,EACnB6B,EAAAA,SAAAA,CAAAA,EAhBWQ,aAiBZP,UAAA,UAAA,CAAA,EAUAL,EAAA,CADCI,EAAAA,SAAS,CAAEE,KAAMa,OAAQC,QAAAA,EAAS,CAAA,CAAA,EA1BvBR,aA2BZP,UAAA,OAAA,CAAA,EAUAL,EAAA,CADCI,WAAS,CAAEE,KAAMe,MAAAA,CAAAA,CAAAA,EApCNT,aAqCZP,UAAA,YAAA,CAAA,EArCYO,QAAAA,KAANZ,EAAA,CADNW,EAAAA,cAAc,eAAA,CAAA,EACFC"}
+{"version":3,"file":"list-CWVDZZtG.cjs","sources":["../src/list/context.ts","../src/surface/context.ts","../src/list/list-item.ts","../src/list/list.ts"],"sourcesContent":["import { createContext } from '@lit/context'\nimport { TSurfaceColor } from '@schmancy/types/surface'\nexport const SchmancyListTypeContext = createContext<TSurfaceColor>(undefined)\n","import { createContext } from '@lit/context'\nimport { TSurfaceColor } from '@schmancy/types/surface'\nexport const SchmancySurfaceTypeContext = createContext<TSurfaceColor>('surface')\n","import { consume } from '@lit/context'\nimport { TailwindElement } from '@mixins/index'\nimport { SchmancySurfaceTypeContext } from '@schmancy/surface/context'\nimport { TSurfaceColor } from '@schmancy/types/surface'\nimport { html } from 'lit'\nimport { customElement, property, queryAssignedElements } from 'lit/decorators.js'\nimport { when } from 'lit/directives/when.js'\n\n/**\n * @element schmancy-list-item\n * @slot leading - leading content\n * @slot trailing - trailing content\n * @slot - default content\n */\n@customElement('schmancy-list-item')\nexport class SchmancyListItem extends TailwindElement() {\n\t@consume({ context: SchmancySurfaceTypeContext, subscribe: true })\n\t@property()\n\tvariant: TSurfaceColor\n\n\t@property({ type: Boolean })\n\trounded: boolean\n\n\t@property({ type: Boolean }) readonly: boolean\n\n\t@property({ type: Boolean }) selected: boolean = false\n\n\t@queryAssignedElements({\n\t\tslot: 'leading',\n\t\tflatten: true,\n\t})\n\tprivate leading!: HTMLElement[]\n\n\t@queryAssignedElements({\n\t\tslot: 'trailing',\n\t\tflatten: true,\n\t})\n\tprivate trailing!: HTMLElement[]\n\n\tprotected get imgClasses(): string[] {\n\t\treturn ['h-5', 'w-5', 'sm:h-6', 'sm:w-6', 'object-contain']\n\t}\n\n\tfirstUpdated() {\n\t\tthis.leading?.forEach(img => {\n\t\t\timg.classList.add(...this.imgClasses)\n\t\t})\n\t\tthis.trailing?.forEach(img => {\n\t\t\timg.classList.add(...this.imgClasses)\n\t\t})\n\t}\n\n\trender() {\n\t\tconst classes = {\n\t\t\t'rounded-none': this.rounded === false,\n\t\t\t'rounded-full': this.rounded,\n\t\t\t'relative inset-0 w-full flex items-center min-h-[44px] sm:min-h-[48px] md:min-h-[56px] py-1 px-2 sm:py-2 sm:px-3 md:py-2 md:px-4 text-sm sm:text-base duration-500 transition-colors focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-0 focus-visible:z-1 outline-secondary-default outline-hidden':\n\t\t\t\ttrue,\n\t\t\t'bg-secondary-container text-secondery-onContainer': this.selected,\n\t\t}\n\n\t\tconst stateLayerClasses = {\n\t\t\t'z-0 duration-500 transition-opacity': true,\n\t\t\t'rounded-none': this.rounded === false,\n\t\t\t'rounded-full': this.rounded,\n\t\t\t'hover:bg-surface-on opacity-[0.08] cursor-pointer absolute inset-0 ': !this.readonly,\n\t\t}\n\t\treturn html` <li .tabIndex=${this.readonly ? -1 : 0} class=${this.classMap(classes)}>\n\t\t\t${when(!this.readonly, () => html` <div class=\"${this.classMap(stateLayerClasses)}\"></div>`)}\n\t\t\t<slot></slot>\n\t\t</li>`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-list-item': SchmancyListItem\n\t}\n}\n","import { provide } from '@lit/context'\nimport { TailwindElement } from '@mixins/index'\nimport { SchmancySurfaceFill } from '@schmancy/surface'\nimport { TSurfaceColor } from '@schmancy/types/surface'\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { SchmancyListTypeContext } from './context'\n\n/**\n * `<schmancy-list>` component.\n *\n * A list component that wraps its content within a customizable surface.\n * It allows you to set the surface type and fill style, and can optionally\n * enable scrolling behavior by delegating the scroller attribute to the surface.\n *\n * @element schmancy-list\n * @slot - The default slot for list items.\n *\n * @example\n * <schmancy-list surface=\"container\" scroller>\n *   <schmancy-list-item>List Item 1</schmancy-list-item>\n * </schmancy-list>\n */\n@customElement('schmancy-list')\nexport class List extends TailwindElement(css`\n\t:host {\n\t\tdisplay: block;\n\t\tpadding-top: 8px;\n\t\tpadding-bottom: 8px;\n\t}\n`) {\n\t/**\n\t * Defines the type or color of the surface used by the component.\n\t * This value is provided to descendant components via context.\n\t *\n\t * @attr surface\n\t * @type {TSurfaceColor}\n\t * @default 'surface'\n\t */\n\t@provide({ context: SchmancyListTypeContext })\n\t@property()\n\tsurface: TSurfaceColor\n\n\t/**\n\t * Determines the fill style of the underlying surface.\n\t *\n\t * @attr fill\n\t * @type {SchmancySurfaceFill}\n\t * @default 'auto'\n\t */\n\t@property({ type: String, reflect: true })\n\tfill: SchmancySurfaceFill = 'auto'\n\n\t/**\n\t * Defines the elevation level of the surface.\n\t *\n\t * @attr elevation\n\t * @type {number}\n\t * @default 0\n\t */\n\t@property({ type: Number })\n\televation: 0 | 1 | 2 | 3 | 4 | 5 = 0\n\n\t/**\n\t * Renders the component's template.\n\t * The list content is wrapped inside a `<schmancy-surface>` element.\n\t * The scroller property is delegated to the surface so that it controls\n\t * the scrollable behavior.\n\t *\n\t * @returns The HTML template for the component.\n\t */\n\trender() {\n\t\treturn html`\n\t\t\t<schmancy-surface .elevation=${this.elevation} .fill=${this.fill} type=${this.surface}>\n\t\t\t\t<ul>\n\t\t\t\t\t<slot></slot>\n\t\t\t\t</ul>\n\t\t\t</schmancy-surface>\n\t\t`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-list': List\n\t}\n}\n"],"names":["SchmancyListTypeContext","createContext","SchmancySurfaceTypeContext","SchmancyListItem","TailwindElement","super","arguments","this","selected","firstUpdated","leading","forEach","img","classList","add","imgClasses","trailing","render","classes","rounded","stateLayerClasses","readonly","html","classMap","when","__decorateClass","consume","context","subscribe","property","prototype","type","Boolean","queryAssignedElements","slot","flatten","customElement","List","css","constructor","fill","elevation","surface","provide","String","reflect","Number"],"mappings":"8TAEaA,EAA0BC,EAAAA,EAAAA,MAA6B,ECAvDC,EAA6BD,EAAAA,EAA6B,SAAA,kMCa1DE,QAAAA,iBAAN,cAA+BC,EAAAA,gBAAAA,CAAAA,CAA/B,cAAAC,MAAAA,GAAAC,SAAAA,EAUuBC,KAAAC,SAAAA,EAAoB,CAcjD,IAAA,aACC,MAAO,CAAC,MAAO,MAAO,SAAU,SAAU,gBAAA,CAC3C,CAEA,cAAAC,CACCF,KAAKG,SAASC,QAAQC,IACrBA,EAAIC,UAAUC,IAAAA,GAAOP,KAAKQ,cAE3BR,KAAKS,UAAUL,QAAQC,GAAAA,CACtBA,EAAIC,UAAUC,IAAAA,GAAOP,KAAKQ,UAAAA,CAAAA,CAAAA,CAE5B,CAEA,QAAAE,CACC,MAAMC,EAAU,CACf,eAAgBX,KAAKY,UAArB,GACA,eAAgBZ,KAAKY,QACrB,qUAAA,GAEA,oDAAqDZ,KAAKC,QAAAA,EAGrDY,EAAoB,CACzB,sCAAA,GACA,eAAgBb,KAAKY,UAArB,GACA,eAAgBZ,KAAKY,QACrB,uEAAwEZ,KAAKc,QAAAA,EAE9E,OAAOC,wBAAsBf,KAAKc,YAAgB,CAAA,UAAWd,KAAKgB,SAASL,CAAAA,CAAAA;AAAAA,KACxEM,QAAMjB,KAAKc,SAAU,IAAMC,EAAAA,oBAAoBf,KAAKgB,SAASH,CAAAA,CAAAA,UAAAA,CAAAA;AAAAA;AAAAA,QAGjE,CAAA,EArDAK,EAAA,CAFCC,EAAAA,EAAQ,CAAEC,QAASzB,EAA4B0B,UAAAA,EAAW,CAAA,EAC1DC,EAAAA,SAAAA,CAAAA,EAFW1B,yBAGZ2B,UAAA,UAAA,CAAA,EAGAL,EAAA,CADCI,WAAS,CAAEE,KAAMC,WALN7B,yBAMZ2B,UAAA,UAAA,GAE6BL,EAAA,CAA5BI,WAAS,CAAEE,KAAMC,OAAAA,CAAAA,CAAAA,EARN7B,yBAQiB2B,UAAA,WAAA,CAAA,EAEAL,EAAA,CAA5BI,WAAS,CAAEE,KAAMC,WAVN7B,yBAUiB2B,UAAA,WAAA,GAMrBL,EAAA,CAJPQ,wBAAsB,CACtBC,KAAM,UACNC,QAAAA,MAdWhC,yBAgBJ2B,UAAA,UAAA,GAMAL,EAAA,CAJPQ,wBAAsB,CACtBC,KAAM,WACNC,QAAAA,EAAS,CAAA,CAAA,EApBEhC,yBAsBJ2B,UAAA,WAAA,GAtBI3B,QAAAA,iBAANsB,EAAA,CADNW,EAAAA,cAAc,oBAAA,CAAA,EACFjC,0NCSAkC,QAAAA,KAAN,cAAmBjC,EAAAA,gBAAgBkC,EAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA,CAAnC,CAAA,CAAA,aAAAC,CAAAlC,MAAAA,GAAAC,SAAAA,EA2BNC,KAAAiC,KAA4B,OAU5BjC,KAAAkC,UAAmC,CAAA,CAUnC,QAAAxB,CACC,OAAOK,EAAAA;AAAAA,kCACyBf,KAAKkC,SAAAA,UAAmBlC,KAAKiC,IAAAA,SAAajC,KAAKmC,OAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA,GAMhF,CAAA,EAtCAjB,EAAA,CAFCkB,IAAQ,CAAEhB,QAAS3B,CAAAA,CAAAA,EACnB6B,EAAAA,SAAAA,CAAAA,EAhBWQ,aAiBZP,UAAA,UAAA,CAAA,EAUAL,EAAA,CADCI,EAAAA,SAAS,CAAEE,KAAMa,OAAQC,QAAAA,EAAS,CAAA,CAAA,EA1BvBR,aA2BZP,UAAA,OAAA,CAAA,EAUAL,EAAA,CADCI,WAAS,CAAEE,KAAMe,MAAAA,CAAAA,CAAAA,EApCNT,aAqCZP,UAAA,YAAA,CAAA,EArCYO,QAAAA,KAANZ,EAAA,CADNW,EAAAA,cAAc,eAAA,CAAA,EACFC"}

package/dist/list.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./list-IHwpVck4.cjs");Object.defineProperty(exports,"List",{enumerable:!0,get:()=>e.List}),Object.defineProperty(exports,"SchmancyListItem",{enumerable:!0,get:()=>e.SchmancyListItem}),exports.SchmancyListTypeContext=e.SchmancyListTypeContext;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./list-CWVDZZtG.cjs");Object.defineProperty(exports,"List",{enumerable:!0,get:()=>e.List}),Object.defineProperty(exports,"SchmancyListItem",{enumerable:!0,get:()=>e.SchmancyListItem}),exports.SchmancyListTypeContext=e.SchmancyListTypeContext;
 //# sourceMappingURL=list.cjs.map

package/dist/list.js

@@ -1,4 +1,4 @@
-import { L as s, a as c, S as e } from "./list-C86nJOsl.js";
+import { L as s, a as c, S as e } from "./list-B2OyjLBr.js";
 export {
   s as List,
   c as SchmancyListItem,

package/dist/{litElement.mixin-GWkzUR9Y.js → litElement.mixin-BLL01IwU.js}

@@ -1,4 +1,4 @@
-import { B as t, T as r } from "./tailwind.mixin-BMDZASqc.js";
+import { B as t, T as r } from "./tailwind.mixin-DmqqUtYJ.js";
 const n = (s) => {
   class e extends t(r(s)) {
     constructor() {
@@ -12,4 +12,4 @@ const n = (s) => {
 export {
   n as $
 };
-//# sourceMappingURL=litElement.mixin-GWkzUR9Y.js.map
+//# sourceMappingURL=litElement.mixin-BLL01IwU.js.map