@mhmo91/schmancy 0.9.4 → 0.9.6

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

@@ -0,0 +1 @@
+{"version":3,"file":"input-chip-BhjGVpc3.cjs","names":[],"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\tprotected updated(changed: Map<string, unknown>) {\n\t\tsuper.updated?.(changed)\n\t\tif (changed.has('value')) {\n\t\t\tthis.internals?.setFormValue(this.value || null)\n\t\t}\n\t}\n\n\tconnectedCallback() {\n\t\tsuper.connectedCallback()\n\n\t\t// Combine all UI state streams\n\t\tcombineLatest([\n\t\t\tthis.chipHover$,\n\t\t\tthis.removeHover$,\n\t\t\tthis.focused$,\n\t\t\tthis.pressed$\n\t\t]).pipe(\n\t\t\tmap(([chipHover, removeHover, focused, pressed]) => ({\n\t\t\t\tchipHover,\n\t\t\t\tremoveHover,\n\t\t\t\tfocused,\n\t\t\t\tpressed\n\t\t\t})),\n\t\t\ttap(state => {\n\t\t\t\tthis.uiState = state\n\t\t\t}),\n\t\t\ttakeUntil(this.disconnecting)\n\t\t).subscribe()\n\t}\n\n\tprivate handleChipClick = (e: MouseEvent) => {\n\t\tif (this.disabled) return\n\n\t\t// Add ripple effect\n\t\tconst chip = this.shadowRoot?.querySelector('.chip-container') as HTMLElement\n\t\tif (chip) {\n\t\t\tconst rect = chip.getBoundingClientRect()\n\t\t\tconst x = e.clientX - rect.left\n\t\t\tconst y = e.clientY - rect.top\n\t\t\tconst id = this.nextRippleId++\n\n\t\t\tthis.ripples = [...this.ripples, { x, y, id }]\n\n\t\t\t// Remove ripple after animation\n\t\t\tsetTimeout(() => {\n\t\t\t\tthis.ripples = this.ripples.filter(r => r.id !== id)\n\t\t\t}, 600)\n\t\t}\n\n\t\t// Dispatch optional click event (for custom handling if needed)\n\t\tthis.dispatchEvent(\n\t\t\tnew CustomEvent('click', {\n\t\t\t\tdetail: { value: this.value },\n\t\t\t\tbubbles: true,\n\t\t\t\tcomposed: true,\n\t\t\t})\n\t\t)\n\t}\n\n\tprivate handleRemove = (e: Event) => {\n\t\tif (this.disabled) return\n\n\t\te.stopPropagation()\n\n\t\t// Dispatch remove event\n\t\tthis.dispatchEvent(\n\t\t\tnew CustomEvent('remove', {\n\t\t\t\tdetail: { value: this.value },\n\t\t\t\tbubbles: true,\n\t\t\t\tcomposed: true,\n\t\t\t})\n\t\t)\n\t}\n\n\tprivate handleKeyDown = (e: KeyboardEvent) => {\n\t\tif (this.disabled) return\n\n\t\t// Delete or Backspace removes the chip\n\t\tif ((e.key === 'Delete' || e.key === 'Backspace') && this.removable) {\n\t\t\te.preventDefault()\n\t\t\tthis.handleRemove(e)\n\t\t}\n\t\t// Enter can optionally trigger click\n\t\telse if (e.key === 'Enter') {\n\t\t\te.preventDefault()\n\t\t\tconst clickEvent = new MouseEvent('click', {\n\t\t\t\tbubbles: true,\n\t\t\t\tcancelable: true,\n\t\t\t\tclientX: 0,\n\t\t\t\tclientY: 0\n\t\t\t})\n\t\t\tthis.handleChipClick(clickEvent)\n\t\t}\n\t}\n\n\tprivate handleFocus = () => {\n\t\tthis.focused$.next(true)\n\t}\n\n\tprivate handleBlur = () => {\n\t\tthis.focused$.next(false)\n\t}\n\n\tprotected render(): unknown {\n\t\tconst hasLeadingIcon = this.avatar || this.icon;\n\n\t\tconst chipClasses = {\n\t\t\t'chip-container': true,\n\t\t\t'inline-flex': true,\n\t\t\t'items-center': true,\n\t\t\t'gap-2': true,\n\t\t\t'h-8': true, // M3: 32px height\n\t\t\t'min-h-[32px]': true,\n\t\t\t'rounded-full': true,\n\t\t\t'cursor-default': true,\n\t\t\t'transition-all': true,\n\t\t\t'duration-200': true,\n\t\t\t'select-none': true,\n\t\t\t'text-sm': true, // M3: 14px Label Large\n\t\t\t'font-medium': true, // M3: 500 weight\n\t\t\t'relative': true,\n\t\t\t'overflow-hidden': true,\n\t\t\t'border': true,\n\n\t\t\t// M3 Padding: 8px with icon, 16px without (leading), 8px with trailing icon\n\t\t\t'pl-2': hasLeadingIcon, // 8px with avatar/icon\n\t\t\t'pl-4': !hasLeadingIcon, // 16px without\n\t\t\t'pr-2': this.removable, // 8px with remove button\n\t\t\t'pr-4': !this.removable, // 16px without\n\n\t\t\t// M3 Colors for input chips\n\t\t\t'bg-surface-containerLow': true,\n\t\t\t'text-surface-onVariant': true,\n\t\t\t'border-outline': true,\n\t\t\t'border-solid':true,\n\t\t\t// Input chips are flat (no elevation) per M3\n\n\t\t\t// Focus-visible state\n\t\t\t'focus-visible:outline': !this.disabled,\n\t\t\t'focus-visible:outline-2': !this.disabled,\n\t\t\t'focus-visible:outline-primary': !this.disabled,\n\t\t\t'focus-visible:outline-offset-2': !this.disabled,\n\n\t\t\t// Disabled state\n\t\t\t'opacity-38': this.disabled, // M3 disabled opacity\n\t\t\t'cursor-not-allowed': this.disabled\n\t\t}\n\n\t\tconst removeButtonClasses = {\n\t\t\t'size-[18px]': true, // M3: 18px icon size\n\t\t\t'flex': true,\n\t\t\t'items-center': true,\n\t\t\t'justify-center': true,\n\t\t\t'rounded-full': true,\n\t\t\t'transition-all': true,\n\t\t\t'duration-200': true,\n\t\t\t'cursor-pointer': !this.disabled,\n\t\t\t'-mr-1': true, // Adjust for visual balance\n\n\t\t\t// Hover state for remove button\n\t\t\t'hover:bg-surface-containerHighest': !this.disabled,\n\t\t\t'opacity-50': this.disabled\n\t\t}\n\n\t\treturn html`\n\t\t\t<div\n\t\t\t\tclass=${classMap(chipClasses)}\n\t\t\t\t@click=${this.handleChipClick}\n\t\t\t\t@keydown=${this.handleKeyDown}\n\t\t\t\t@mouseenter=${() => this.chipHover$.next(true)}\n\t\t\t\t@mouseleave=${() => this.chipHover$.next(false)}\n\t\t\t\t@mousedown=${() => this.pressed$.next(true)}\n\t\t\t\t@mouseup=${() => this.pressed$.next(false)}\n\t\t\t\t@focus=${this.handleFocus}\n\t\t\t\t@blur=${this.handleBlur}\n\t\t\t\trole=\"button\"\n\t\t\t\ttabindex=${this.disabled ? '-1' : '0'}\n\t\t\t\taria-disabled=${this.disabled}\n\t\t\t\taria-label=${this.value}\n\t\t\t>\n\t\t\t\t<!-- Avatar image (if provided) -->\n\t\t\t\t${this.avatar ? html`\n\t\t\t\t\t<img\n\t\t\t\t\t\tsrc=${this.avatar}\n\t\t\t\t\t\talt=\"\"\n\t\t\t\t\t\tclass=\"avatar-img rounded-full size-5\"\n\t\t\t\t\t/>\n\t\t\t\t` : ''}\n\n\t\t\t\t<!-- Icon (if provided and no avatar) -->\n\t\t\t\t${this.icon && !this.avatar ? html`\n\t\t\t\t\t<span class=\"material-symbols-outlined text-[18px] shrink-0\">\n\t\t\t\t\t\t${this.icon}\n\t\t\t\t\t</span>\n\t\t\t\t` : ''}\n\n\t\t\t\t<!-- Chip content -->\n\t\t\t\t<span class=\"text-sm font-medium leading-5\">\n\t\t\t\t\t<slot></slot>\n\t\t\t\t</span>\n\n\t\t\t\t<!-- Remove button (shown by default for input chips) -->\n\t\t\t\t${this.removable ? html`\n\t\t\t\t\t<button\n\t\t\t\t\t\tclass=${classMap(removeButtonClasses)}\n\t\t\t\t\t\t@click=${this.handleRemove}\n\t\t\t\t\t\t@mouseenter=${() => this.removeHover$.next(true)}\n\t\t\t\t\t\t@mouseleave=${() => this.removeHover$.next(false)}\n\t\t\t\t\t\taria-label=\"Remove\"\n\t\t\t\t\t\ttabindex=\"-1\"\n\t\t\t\t\t\t?disabled=${this.disabled}\n\t\t\t\t\t>\n\t\t\t\t\t\t<span class=\"material-symbols-outlined text-[18px]\">\n\t\t\t\t\t\t\tclose\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</button>\n\t\t\t\t` : ''}\n\n\t\t\t\t<!-- Ripple effects -->\n\t\t\t\t${this.ripples.map(ripple => html`\n\t\t\t\t\t<span\n\t\t\t\t\t\tclass=\"ripple\"\n\t\t\t\t\t\tstyle=\"left: ${ripple.x}px; top: ${ripple.y}px;\"\n\t\t\t\t\t></span>\n\t\t\t\t`)}\n\n\t\t\t\t<!-- State layer for M3 hover/focus/pressed states -->\n\t\t\t\t<div class=\"state-layer\"></div>\n\t\t\t</div>\n\t\t`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-input-chip': SchmancyInputChip\n\t}\n}\n\nexport type InputChipClickEvent = { value: string }\nexport type InputChipRemoveEvent = { value: string }"],"mappings":"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"}

package/dist/input-chip-CI4__N8w.js

@@ -0,0 +1,305 @@
+import { t as e } from "./tailwind.mixin-DufHBjmb.js";
+import { t } from "./decorate-D_utPUsC.js";
+import { BehaviorSubject as n, combineLatest as r } from "rxjs";
+import { map as i, takeUntil as a, tap as o } from "rxjs/operators";
+import { classMap as s } from "lit/directives/class-map.js";
+import { customElement as c, property as l, state as u } from "lit/decorators.js";
+import { LitElement as d, css as f, html as p } from "lit";
+var m = class extends e(f`
+	: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 n(!1), this.removeHover$ = new n(!1), this.focused$ = new n(!1), this.pressed$ = new n(!1), this.uiState = {
+			chipHover: !1,
+			removeHover: !1,
+			focused: !1,
+			pressed: !1
+		}, this.ripples = [], this.nextRippleId = 0, this.handleChipClick = (e) => {
+			if (this.disabled) return;
+			let t = this.shadowRoot?.querySelector(".chip-container");
+			if (t) {
+				let n = t.getBoundingClientRect(), r = e.clientX - n.left, i = e.clientY - n.top, a = this.nextRippleId++;
+				this.ripples = [...this.ripples, {
+					x: r,
+					y: i,
+					id: a
+				}], setTimeout(() => {
+					this.ripples = this.ripples.filter((e) => e.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();
+					let 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;
+		}
+	}
+	static {
+		this.shadowRootOptions = {
+			...d.shadowRootOptions,
+			delegatesFocus: !0
+		};
+	}
+	static {
+		this.formAssociated = !0;
+	}
+	get form() {
+		return this.internals?.form;
+	}
+	updated(e) {
+		super.updated?.(e), e.has("value") && this.internals?.setFormValue(this.value || null);
+	}
+	connectedCallback() {
+		super.connectedCallback(), r([
+			this.chipHover$,
+			this.removeHover$,
+			this.focused$,
+			this.pressed$
+		]).pipe(i(([e, t, n, r]) => ({
+			chipHover: e,
+			removeHover: t,
+			focused: n,
+			pressed: r
+		})), o((e) => {
+			this.uiState = e;
+		}), a(this.disconnecting)).subscribe();
+	}
+	render() {
+		let 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
+		}, n = {
+			"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 p`
+			<div
+				class=${s(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 ? p`
+					<img
+						src=${this.avatar}
+						alt=""
+						class="avatar-img rounded-full size-5"
+					/>
+				` : ""}
+
+				<!-- Icon (if provided and no avatar) -->
+				${this.icon && !this.avatar ? p`
+					<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 ? p`
+					<button
+						class=${s(n)}
+						@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((e) => p`
+					<span
+						class="ripple"
+						style="left: ${e.x}px; top: ${e.y}px;"
+					></span>
+				`)}
+
+				<!-- State layer for M3 hover/focus/pressed states -->
+				<div class="state-layer"></div>
+			</div>
+		`;
+	}
+};
+t([l({
+	type: String,
+	reflect: !0
+})], m.prototype, "value", void 0), t([l({
+	type: String,
+	reflect: !0
+})], m.prototype, "icon", void 0), t([l({
+	type: String,
+	reflect: !0
+})], m.prototype, "avatar", void 0), t([l({
+	type: Boolean,
+	reflect: !0
+})], m.prototype, "removable", void 0), t([l({
+	type: Boolean,
+	reflect: !0
+})], m.prototype, "disabled", void 0), t([l({
+	type: Boolean,
+	reflect: !0
+})], m.prototype, "elevated", void 0), t([u()], m.prototype, "uiState", void 0), t([u()], m.prototype, "ripples", void 0), m = t([c("schmancy-input-chip")], m);
+export { m as t };

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

@@ -0,0 +1 @@
+{"version":3,"file":"input-chip-CI4__N8w.js","names":[],"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\tprotected updated(changed: Map<string, unknown>) {\n\t\tsuper.updated?.(changed)\n\t\tif (changed.has('value')) {\n\t\t\tthis.internals?.setFormValue(this.value || null)\n\t\t}\n\t}\n\n\tconnectedCallback() {\n\t\tsuper.connectedCallback()\n\n\t\t// Combine all UI state streams\n\t\tcombineLatest([\n\t\t\tthis.chipHover$,\n\t\t\tthis.removeHover$,\n\t\t\tthis.focused$,\n\t\t\tthis.pressed$\n\t\t]).pipe(\n\t\t\tmap(([chipHover, removeHover, focused, pressed]) => ({\n\t\t\t\tchipHover,\n\t\t\t\tremoveHover,\n\t\t\t\tfocused,\n\t\t\t\tpressed\n\t\t\t})),\n\t\t\ttap(state => {\n\t\t\t\tthis.uiState = state\n\t\t\t}),\n\t\t\ttakeUntil(this.disconnecting)\n\t\t).subscribe()\n\t}\n\n\tprivate handleChipClick = (e: MouseEvent) => {\n\t\tif (this.disabled) return\n\n\t\t// Add ripple effect\n\t\tconst chip = this.shadowRoot?.querySelector('.chip-container') as HTMLElement\n\t\tif (chip) {\n\t\t\tconst rect = chip.getBoundingClientRect()\n\t\t\tconst x = e.clientX - rect.left\n\t\t\tconst y = e.clientY - rect.top\n\t\t\tconst id = this.nextRippleId++\n\n\t\t\tthis.ripples = [...this.ripples, { x, y, id }]\n\n\t\t\t// Remove ripple after animation\n\t\t\tsetTimeout(() => {\n\t\t\t\tthis.ripples = this.ripples.filter(r => r.id !== id)\n\t\t\t}, 600)\n\t\t}\n\n\t\t// Dispatch optional click event (for custom handling if needed)\n\t\tthis.dispatchEvent(\n\t\t\tnew CustomEvent('click', {\n\t\t\t\tdetail: { value: this.value },\n\t\t\t\tbubbles: true,\n\t\t\t\tcomposed: true,\n\t\t\t})\n\t\t)\n\t}\n\n\tprivate handleRemove = (e: Event) => {\n\t\tif (this.disabled) return\n\n\t\te.stopPropagation()\n\n\t\t// Dispatch remove event\n\t\tthis.dispatchEvent(\n\t\t\tnew CustomEvent('remove', {\n\t\t\t\tdetail: { value: this.value },\n\t\t\t\tbubbles: true,\n\t\t\t\tcomposed: true,\n\t\t\t})\n\t\t)\n\t}\n\n\tprivate handleKeyDown = (e: KeyboardEvent) => {\n\t\tif (this.disabled) return\n\n\t\t// Delete or Backspace removes the chip\n\t\tif ((e.key === 'Delete' || e.key === 'Backspace') && this.removable) {\n\t\t\te.preventDefault()\n\t\t\tthis.handleRemove(e)\n\t\t}\n\t\t// Enter can optionally trigger click\n\t\telse if (e.key === 'Enter') {\n\t\t\te.preventDefault()\n\t\t\tconst clickEvent = new MouseEvent('click', {\n\t\t\t\tbubbles: true,\n\t\t\t\tcancelable: true,\n\t\t\t\tclientX: 0,\n\t\t\t\tclientY: 0\n\t\t\t})\n\t\t\tthis.handleChipClick(clickEvent)\n\t\t}\n\t}\n\n\tprivate handleFocus = () => {\n\t\tthis.focused$.next(true)\n\t}\n\n\tprivate handleBlur = () => {\n\t\tthis.focused$.next(false)\n\t}\n\n\tprotected render(): unknown {\n\t\tconst hasLeadingIcon = this.avatar || this.icon;\n\n\t\tconst chipClasses = {\n\t\t\t'chip-container': true,\n\t\t\t'inline-flex': true,\n\t\t\t'items-center': true,\n\t\t\t'gap-2': true,\n\t\t\t'h-8': true, // M3: 32px height\n\t\t\t'min-h-[32px]': true,\n\t\t\t'rounded-full': true,\n\t\t\t'cursor-default': true,\n\t\t\t'transition-all': true,\n\t\t\t'duration-200': true,\n\t\t\t'select-none': true,\n\t\t\t'text-sm': true, // M3: 14px Label Large\n\t\t\t'font-medium': true, // M3: 500 weight\n\t\t\t'relative': true,\n\t\t\t'overflow-hidden': true,\n\t\t\t'border': true,\n\n\t\t\t// M3 Padding: 8px with icon, 16px without (leading), 8px with trailing icon\n\t\t\t'pl-2': hasLeadingIcon, // 8px with avatar/icon\n\t\t\t'pl-4': !hasLeadingIcon, // 16px without\n\t\t\t'pr-2': this.removable, // 8px with remove button\n\t\t\t'pr-4': !this.removable, // 16px without\n\n\t\t\t// M3 Colors for input chips\n\t\t\t'bg-surface-containerLow': true,\n\t\t\t'text-surface-onVariant': true,\n\t\t\t'border-outline': true,\n\t\t\t'border-solid':true,\n\t\t\t// Input chips are flat (no elevation) per M3\n\n\t\t\t// Focus-visible state\n\t\t\t'focus-visible:outline': !this.disabled,\n\t\t\t'focus-visible:outline-2': !this.disabled,\n\t\t\t'focus-visible:outline-primary': !this.disabled,\n\t\t\t'focus-visible:outline-offset-2': !this.disabled,\n\n\t\t\t// Disabled state\n\t\t\t'opacity-38': this.disabled, // M3 disabled opacity\n\t\t\t'cursor-not-allowed': this.disabled\n\t\t}\n\n\t\tconst removeButtonClasses = {\n\t\t\t'size-[18px]': true, // M3: 18px icon size\n\t\t\t'flex': true,\n\t\t\t'items-center': true,\n\t\t\t'justify-center': true,\n\t\t\t'rounded-full': true,\n\t\t\t'transition-all': true,\n\t\t\t'duration-200': true,\n\t\t\t'cursor-pointer': !this.disabled,\n\t\t\t'-mr-1': true, // Adjust for visual balance\n\n\t\t\t// Hover state for remove button\n\t\t\t'hover:bg-surface-containerHighest': !this.disabled,\n\t\t\t'opacity-50': this.disabled\n\t\t}\n\n\t\treturn html`\n\t\t\t<div\n\t\t\t\tclass=${classMap(chipClasses)}\n\t\t\t\t@click=${this.handleChipClick}\n\t\t\t\t@keydown=${this.handleKeyDown}\n\t\t\t\t@mouseenter=${() => this.chipHover$.next(true)}\n\t\t\t\t@mouseleave=${() => this.chipHover$.next(false)}\n\t\t\t\t@mousedown=${() => this.pressed$.next(true)}\n\t\t\t\t@mouseup=${() => this.pressed$.next(false)}\n\t\t\t\t@focus=${this.handleFocus}\n\t\t\t\t@blur=${this.handleBlur}\n\t\t\t\trole=\"button\"\n\t\t\t\ttabindex=${this.disabled ? '-1' : '0'}\n\t\t\t\taria-disabled=${this.disabled}\n\t\t\t\taria-label=${this.value}\n\t\t\t>\n\t\t\t\t<!-- Avatar image (if provided) -->\n\t\t\t\t${this.avatar ? html`\n\t\t\t\t\t<img\n\t\t\t\t\t\tsrc=${this.avatar}\n\t\t\t\t\t\talt=\"\"\n\t\t\t\t\t\tclass=\"avatar-img rounded-full size-5\"\n\t\t\t\t\t/>\n\t\t\t\t` : ''}\n\n\t\t\t\t<!-- Icon (if provided and no avatar) -->\n\t\t\t\t${this.icon && !this.avatar ? html`\n\t\t\t\t\t<span class=\"material-symbols-outlined text-[18px] shrink-0\">\n\t\t\t\t\t\t${this.icon}\n\t\t\t\t\t</span>\n\t\t\t\t` : ''}\n\n\t\t\t\t<!-- Chip content -->\n\t\t\t\t<span class=\"text-sm font-medium leading-5\">\n\t\t\t\t\t<slot></slot>\n\t\t\t\t</span>\n\n\t\t\t\t<!-- Remove button (shown by default for input chips) -->\n\t\t\t\t${this.removable ? html`\n\t\t\t\t\t<button\n\t\t\t\t\t\tclass=${classMap(removeButtonClasses)}\n\t\t\t\t\t\t@click=${this.handleRemove}\n\t\t\t\t\t\t@mouseenter=${() => this.removeHover$.next(true)}\n\t\t\t\t\t\t@mouseleave=${() => this.removeHover$.next(false)}\n\t\t\t\t\t\taria-label=\"Remove\"\n\t\t\t\t\t\ttabindex=\"-1\"\n\t\t\t\t\t\t?disabled=${this.disabled}\n\t\t\t\t\t>\n\t\t\t\t\t\t<span class=\"material-symbols-outlined text-[18px]\">\n\t\t\t\t\t\t\tclose\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</button>\n\t\t\t\t` : ''}\n\n\t\t\t\t<!-- Ripple effects -->\n\t\t\t\t${this.ripples.map(ripple => html`\n\t\t\t\t\t<span\n\t\t\t\t\t\tclass=\"ripple\"\n\t\t\t\t\t\tstyle=\"left: ${ripple.x}px; top: ${ripple.y}px;\"\n\t\t\t\t\t></span>\n\t\t\t\t`)}\n\n\t\t\t\t<!-- State layer for M3 hover/focus/pressed states -->\n\t\t\t\t<div class=\"state-layer\"></div>\n\t\t\t</div>\n\t\t`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-input-chip': SchmancyInputChip\n\t}\n}\n\nexport type InputChipClickEvent = { value: string }\nexport type InputChipRemoveEvent = { value: string }"],"mappings":"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"}

package/dist/input.cjs

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

package/dist/input.js

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

package/dist/intersection-D1v1UCVv.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"intersection-D1v1UCVv.cjs","names":[],"sources":["../src/utils/intersection.ts"],"sourcesContent":["import { Observable } from 'rxjs'\n\nexport function intersection$(\n\telement: Element | Element[],\n\toptions = {\n\t\tthreshold: 0.5,\n\t},\n) {\n\treturn new Observable(subscriber => {\n\t\tconst observer = new IntersectionObserver(entries => {\n\t\t\tsubscriber.next(entries) // Emit the entries array\n\t\t}, options)\n\n\t\t// Observe each element\n\t\tArray.isArray(element) ? element.forEach(el => observer.observe(el)) : observer.observe(element)\n\n\t\t// Cleanup on unsubscription\n\t\treturn () => {\n\t\t\tobserver.disconnect()\n\t\t}\n\t})\n}\n"],"mappings":"sDAEA,SAAgB,EACf,EACA,EAAU,CACT,UAAW,GAAA,CAAA,CAGZ,OAAO,IAAI,EAAA,WAAW,GAAA,CACrB,IAAM,EAAW,IAAI,qBAAqB,GAAA,CACzC,EAAW,KAAK,EAAA,EACd,EAAA,CAMH,OAHA,MAAM,QAAQ,EAAA,CAAW,EAAQ,QAAQ,GAAM,EAAS,QAAQ,EAAA,CAAA,CAAO,EAAS,QAAQ,EAAA,KAGxF,CACC,EAAS,YAAA,GAAA,CAAA,OAAA,eAAA,QAAA,IAAA,CAAA,WAAA,CAAA,EAAA,IAAA,UAAA,CAAA,OAAA,GAAA,CAAA"}

package/dist/intersection-LfEsy29T.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"intersection-LfEsy29T.js","names":[],"sources":["../src/utils/intersection.ts"],"sourcesContent":["import { Observable } from 'rxjs'\n\nexport function intersection$(\n\telement: Element | Element[],\n\toptions = {\n\t\tthreshold: 0.5,\n\t},\n) {\n\treturn new Observable(subscriber => {\n\t\tconst observer = new IntersectionObserver(entries => {\n\t\t\tsubscriber.next(entries) // Emit the entries array\n\t\t}, options)\n\n\t\t// Observe each element\n\t\tArray.isArray(element) ? element.forEach(el => observer.observe(el)) : observer.observe(element)\n\n\t\t// Cleanup on unsubscription\n\t\treturn () => {\n\t\t\tobserver.disconnect()\n\t\t}\n\t})\n}\n"],"mappings":";AAEA,SAAgB,EACf,GACA,IAAU,EACT,WAAW,IAAA,EAAA;AAGZ,QAAO,IAAI,GAAW,MAAA;EACrB,IAAM,IAAW,IAAI,sBAAqB,MAAA;AACzC,KAAW,KAAK,EAAA;KACd,EAAA;AAMH,SAHA,MAAM,QAAQ,EAAA,GAAW,EAAQ,SAAQ,MAAM,EAAS,QAAQ,EAAA,CAAA,GAAO,EAAS,QAAQ,EAAA,QAGxF;AACC,KAAS,YAAA;;GAAA;;AAAA,SAAA"}

package/dist/json.cjs

@@ -1,4 +1,4 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`./chunk-BCfY8kxB.cjs`);const e=require(`./tailwind.mixin-BF1Huas7.cjs`);require(`./mixins.cjs`);const t=require(`./notification-CZFEhWxc.cjs`);let n=require(`lit/decorators.js`),r=require(`lit`),i=require(`lit/directives/unsafe-html.js`);var a=class extends e.t(r.css`:host { display: block }`){constructor(...e){super(...e),this.data={},this.highlightKeys=[],this.compact=!1}highlightChanges(e,t){let n=e;return t.forEach(e=>{let t=RegExp(`("${e}":\\s*)([^,\\n}]+)`,`g`);n=n.replace(t,(e,t,n)=>`${t}<span class="text-warning-default font-bold">${n}</span>`)}),n}async copyJSON(){try{await navigator.clipboard.writeText(JSON.stringify(this.data,null,2)),t.r.success(`JSON copied to clipboard`)}catch{t.r.error(`Failed to copy JSON`)}}render(){let e=JSON.stringify(this.data,null,this.compact?0:2),t=this.highlightKeys.length>0?this.highlightChanges(e,this.highlightKeys):e;return r.html`
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`./chunk-BCfY8kxB.cjs`);const e=require(`./tailwind.mixin-Cpa-VnnX.cjs`),t=require(`./decorate-F9CuyeHg.cjs`);require(`./mixins.cjs`);const n=require(`./notification-DKVWYhqs.cjs`);let r=require(`lit/decorators.js`),i=require(`lit`),a=require(`lit/directives/unsafe-html.js`);var o=class extends e.t(i.css`:host { display: block }`){constructor(...e){super(...e),this.data={},this.highlightKeys=[],this.compact=!1}highlightChanges(e,t){let n=e;return t.forEach(e=>{let t=RegExp(`("${e}":\\s*)([^,\\n}]+)`,`g`);n=n.replace(t,(e,t,n)=>`${t}<span class="text-warning-default font-bold">${n}</span>`)}),n}async copyJSON(){try{await navigator.clipboard.writeText(JSON.stringify(this.data,null,2)),n.r.success(`JSON copied to clipboard`)}catch{n.r.error(`Failed to copy JSON`)}}render(){let e=JSON.stringify(this.data,null,this.compact?0:2),t=this.highlightKeys.length>0?this.highlightChanges(e,this.highlightKeys):e;return i.html`
 			<div
 				class="bg-surface-container rounded-lg p-2 font-mono overflow-auto cursor-pointer hover:bg-surface-container-high transition-colors"
 				@click=${this.copyJSON}
@@ -6,6 +6,6 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`./ch
 				<div class="flex items-center justify-between mb-1">
 					<schmancy-icon size="12px" class="text-on-surface-variant">content_copy</schmancy-icon>
 				</div>
-				<pre class="text-[10px] leading-tight">${(0,i.unsafeHTML)(t)}</pre>
+				<pre class="text-[10px] leading-tight">${(0,a.unsafeHTML)(t)}</pre>
 			</div>
-		`}};e.i([(0,n.property)({type:Object})],a.prototype,`data`,void 0),e.i([(0,n.property)({type:Array})],a.prototype,`highlightKeys`,void 0),e.i([(0,n.property)({type:Boolean})],a.prototype,`compact`,void 0),a=e.i([(0,n.customElement)(`schmancy-json`)],a),Object.defineProperty(exports,`SchmancyJson`,{enumerable:!0,get:function(){return a}});
+		`}};t.t([(0,r.property)({type:Object})],o.prototype,`data`,void 0),t.t([(0,r.property)({type:Array})],o.prototype,`highlightKeys`,void 0),t.t([(0,r.property)({type:Boolean})],o.prototype,`compact`,void 0),o=t.t([(0,r.customElement)(`schmancy-json`)],o),Object.defineProperty(exports,`SchmancyJson`,{enumerable:!0,get:function(){return o}});

package/dist/json.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"json.cjs","names":[],"sources":["../src/json/json.ts"],"sourcesContent":["import { TailwindElement } from '@mixins/index'\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js'\nimport { $notify } from '@schmancy/notification'\n\n@customElement('schmancy-json')\nexport class SchmancyJson extends TailwindElement(css`:host { display: block }`) {\n\t@property({ type: Object }) data: Record<string, any> = {}\n\t@property({ type: Array }) highlightKeys: string[] = []\n\t@property({ type: Boolean }) compact = false\n\n\tprivate highlightChanges(json: string, changedKeys: string[]): string {\n\t\tlet highlighted = json\n\t\tchangedKeys.forEach(key => {\n\t\t\tconst regex = new RegExp(`(\"${key}\":\\\\s*)([^,\\\\n}]+)`, 'g')\n\t\t\thighlighted = highlighted.replace(regex, (_match, keyPart, valuePart) => {\n\t\t\t\treturn `${keyPart}<span class=\"text-warning-default font-bold\">${valuePart}</span>`\n\t\t\t})\n\t\t})\n\t\treturn highlighted\n\t}\n\n\tprivate async copyJSON() {\n\t\ttry {\n\t\t\tawait navigator.clipboard.writeText(JSON.stringify(this.data, null, 2))\n\t\t\t$notify.success('JSON copied to clipboard')\n\t\t} catch (error) {\n\t\t\t$notify.error('Failed to copy JSON')\n\t\t}\n\t}\n\n\trender() {\n\t\tconst jsonString = JSON.stringify(this.data, null, this.compact ? 0 : 2)\n\t\tconst highlighted = this.highlightKeys.length > 0 ? this.highlightChanges(jsonString, this.highlightKeys) : jsonString\n\n\t\treturn html`\n\t\t\t<div\n\t\t\t\tclass=\"bg-surface-container rounded-lg p-2 font-mono overflow-auto cursor-pointer hover:bg-surface-container-high transition-colors\"\n\t\t\t\t@click=${this.copyJSON}\n\t\t\t>\n\t\t\t\t<div class=\"flex items-center justify-between mb-1\">\n\t\t\t\t\t<schmancy-icon size=\"12px\" class=\"text-on-surface-variant\">content_copy</schmancy-icon>\n\t\t\t\t</div>\n\t\t\t\t<pre class=\"text-[10px] leading-tight\">${unsafeHTML(highlighted)}</pre>\n\t\t\t</div>\n\t\t`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-json': SchmancyJson\n\t}\n}\n"],"mappings":"0TAOO,IAAA,EAAA,cAA2B,EAAA,EAAgB,EAAA,GAAG,2BAAA,AAAA,CAAA,YAAA,GAAA,EAAA,CAAA,MAAA,GAAA,EAAA,CAAA,KAAA,KACI,EAAA,CAAA,KAAA,cACH,EAAA,CAAA,KAAA,QAAA,CACd,EAEvC,iBAAyB,EAAc,EAAA,CACtC,IAAI,EAAc,EAOlB,OANA,EAAY,QAAQ,GAAA,CACnB,IAAM,EAAY,OAAO,KAAK,EAAA,oBAAyB,IAAA,CACvD,EAAc,EAAY,QAAQ,GAAQ,EAAQ,EAAS,IACnD,GAAG,EAAA,+CAAuD,EAAA,SAAA,EAAA,CAG5D,EAGR,MAAA,UAAc,CACb,GAAA,CAAA,MACO,UAAU,UAAU,UAAU,KAAK,UAAU,KAAK,KAAM,KAAM,EAAA,CAAA,CACpE,EAAA,EAAQ,QAAQ,2BAAA,MACR,CACR,EAAA,EAAQ,MAAM,sBAAA,EAIhB,QAAA,CACC,IAAM,EAAa,KAAK,UAAU,KAAK,KAAM,KAAM,KAAK,QAAU,EAAI,EAAA,CAChE,EAAc,KAAK,cAAc,OAAS,EAAI,KAAK,iBAAiB,EAAY,KAAK,cAAA,CAAiB,EAE5G,MAAO,GAAA,IAAI;;;aAGA,KAAK,SAAA;;;;;8DAKsC,EAAA,CAAA;;0BApC7C,CAAE,KAAM,OAAA,CAAA,CAAA,CAAS,EAAA,UAAA,OAAA,IAAA,GAAA,CAAA,EAAA,EAAA,EAAA,EAAA,EAAA,UACjB,CAAE,KAAM,MAAA,CAAA,CAAA,CAAQ,EAAA,UAAA,gBAAA,IAAA,GAAA,CAAA,EAAA,EAAA,EAAA,EAAA,EAAA,UAChB,CAAE,KAAM,QAAA,CAAA,CAAA,CAAU,EAAA,UAAA,UAAA,IAAA,GAAA,CAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,eAJd,gBAAA,CAAA,CAAgB,EAAA,CAAA,OAAA,eAAA,QAAA,eAAA,CAAA,WAAA,CAAA,EAAA,IAAA,UAAA,CAAA,OAAA,GAAA,CAAA"}
+{"version":3,"file":"json.cjs","names":[],"sources":["../src/json/json.ts"],"sourcesContent":["import { TailwindElement } from '@mixins/index'\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js'\nimport { $notify } from '@schmancy/notification'\n\n@customElement('schmancy-json')\nexport class SchmancyJson extends TailwindElement(css`:host { display: block }`) {\n\t@property({ type: Object }) data: Record<string, any> = {}\n\t@property({ type: Array }) highlightKeys: string[] = []\n\t@property({ type: Boolean }) compact = false\n\n\tprivate highlightChanges(json: string, changedKeys: string[]): string {\n\t\tlet highlighted = json\n\t\tchangedKeys.forEach(key => {\n\t\t\tconst regex = new RegExp(`(\"${key}\":\\\\s*)([^,\\\\n}]+)`, 'g')\n\t\t\thighlighted = highlighted.replace(regex, (_match, keyPart, valuePart) => {\n\t\t\t\treturn `${keyPart}<span class=\"text-warning-default font-bold\">${valuePart}</span>`\n\t\t\t})\n\t\t})\n\t\treturn highlighted\n\t}\n\n\tprivate async copyJSON() {\n\t\ttry {\n\t\t\tawait navigator.clipboard.writeText(JSON.stringify(this.data, null, 2))\n\t\t\t$notify.success('JSON copied to clipboard')\n\t\t} catch (error) {\n\t\t\t$notify.error('Failed to copy JSON')\n\t\t}\n\t}\n\n\trender() {\n\t\tconst jsonString = JSON.stringify(this.data, null, this.compact ? 0 : 2)\n\t\tconst highlighted = this.highlightKeys.length > 0 ? this.highlightChanges(jsonString, this.highlightKeys) : jsonString\n\n\t\treturn html`\n\t\t\t<div\n\t\t\t\tclass=\"bg-surface-container rounded-lg p-2 font-mono overflow-auto cursor-pointer hover:bg-surface-container-high transition-colors\"\n\t\t\t\t@click=${this.copyJSON}\n\t\t\t>\n\t\t\t\t<div class=\"flex items-center justify-between mb-1\">\n\t\t\t\t\t<schmancy-icon size=\"12px\" class=\"text-on-surface-variant\">content_copy</schmancy-icon>\n\t\t\t\t</div>\n\t\t\t\t<pre class=\"text-[10px] leading-tight\">${unsafeHTML(highlighted)}</pre>\n\t\t\t</div>\n\t\t`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-json': SchmancyJson\n\t}\n}\n"],"mappings":"+VAOO,IAAA,EAAA,cAA2B,EAAA,EAAgB,EAAA,GAAG,2BAAA,AAAA,CAAA,YAAA,GAAA,EAAA,CAAA,MAAA,GAAA,EAAA,CAAA,KAAA,KACI,EAAA,CAAA,KAAA,cACH,EAAA,CAAA,KAAA,QAAA,CACd,EAEvC,iBAAyB,EAAc,EAAA,CACtC,IAAI,EAAc,EAOlB,OANA,EAAY,QAAQ,GAAA,CACnB,IAAM,EAAY,OAAO,KAAK,EAAA,oBAAyB,IAAA,CACvD,EAAc,EAAY,QAAQ,GAAQ,EAAQ,EAAS,IACnD,GAAG,EAAA,+CAAuD,EAAA,SAAA,EAAA,CAG5D,EAGR,MAAA,UAAc,CACb,GAAA,CAAA,MACO,UAAU,UAAU,UAAU,KAAK,UAAU,KAAK,KAAM,KAAM,EAAA,CAAA,CACpE,EAAA,EAAQ,QAAQ,2BAAA,MACR,CACR,EAAA,EAAQ,MAAM,sBAAA,EAIhB,QAAA,CACC,IAAM,EAAa,KAAK,UAAU,KAAK,KAAM,KAAM,KAAK,QAAU,EAAI,EAAA,CAChE,EAAc,KAAK,cAAc,OAAS,EAAI,KAAK,iBAAiB,EAAY,KAAK,cAAA,CAAiB,EAE5G,MAAO,GAAA,IAAI;;;aAGA,KAAK,SAAA;;;;;8DAKsC,EAAA,CAAA;;0BApC7C,CAAE,KAAM,OAAA,CAAA,CAAA,CAAS,EAAA,UAAA,OAAA,IAAA,GAAA,CAAA,EAAA,EAAA,EAAA,EAAA,EAAA,UACjB,CAAE,KAAM,MAAA,CAAA,CAAA,CAAQ,EAAA,UAAA,gBAAA,IAAA,GAAA,CAAA,EAAA,EAAA,EAAA,EAAA,EAAA,UAChB,CAAE,KAAM,QAAA,CAAA,CAAA,CAAU,EAAA,UAAA,UAAA,IAAA,GAAA,CAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,eAJd,gBAAA,CAAA,CAAgB,EAAA,CAAA,OAAA,eAAA,QAAA,eAAA,CAAA,WAAA,CAAA,EAAA,IAAA,UAAA,CAAA,OAAA,GAAA,CAAA"}

package/dist/json.js

@@ -1,10 +1,11 @@
-import { i as e, t } from "./tailwind.mixin-BCJOOX1_.js";
+import { t as e } from "./tailwind.mixin-DufHBjmb.js";
+import { t } from "./decorate-D_utPUsC.js";
 import "./mixins.js";
-import { r as n } from "./notification-BnBgxjF-.js";
+import { r as n } from "./notification-DGpv8g2H.js";
 import { customElement as r, property as i } from "lit/decorators.js";
 import { css as a, html as o } from "lit";
 import { unsafeHTML as s } from "lit/directives/unsafe-html.js";
-var c = class extends t(a`:host { display: block }`) {
+var c = class extends e(a`:host { display: block }`) {
 	constructor(...e) {
 		super(...e), this.data = {}, this.highlightKeys = [], this.compact = !1;
 	}
@@ -37,5 +38,5 @@ var c = class extends t(a`:host { display: block }`) {
 		`;
 	}
 };
-e([i({ type: Object })], c.prototype, "data", void 0), e([i({ type: Array })], c.prototype, "highlightKeys", void 0), e([i({ type: Boolean })], c.prototype, "compact", void 0), c = e([r("schmancy-json")], c);
+t([i({ type: Object })], c.prototype, "data", void 0), t([i({ type: Array })], c.prototype, "highlightKeys", void 0), t([i({ type: Boolean })], c.prototype, "compact", void 0), c = t([r("schmancy-json")], c);
 export { c as SchmancyJson };

package/dist/json.js.map

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

package/dist/kbd.cjs

@@ -0,0 +1,28 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`./chunk-BCfY8kxB.cjs`);const e=require(`./tailwind.mixin-Cpa-VnnX.cjs`),t=require(`./decorate-F9CuyeHg.cjs`);require(`./mixins.cjs`);let n=require(`lit/decorators.js`),r=require(`lit`);var i=class extends e.t(r.css`
+	:host {
+		display: inline-block;
+		vertical-align: middle;
+	}
+	kbd {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		min-width: var(--_ksize, 1.5rem);
+		height: var(--_ksize, 1.5rem);
+		padding: 0 0.375rem;
+		font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+		font-size: var(--_kfont, 0.75rem);
+		font-weight: 500;
+		line-height: 1;
+		color: var(--schmancy-sys-color-surface-on, #1d1b20);
+		background: var(--schmancy-sys-color-surface-container, #f3f0f7);
+		border: 1px solid var(--schmancy-sys-color-outline-variant, #cac4d0);
+		border-radius: 0.375rem;
+		box-shadow: inset 0 -1px 0 var(--schmancy-sys-color-outline-variant, #cac4d0);
+		white-space: nowrap;
+	}
+	:host([size='sm']) kbd {
+		--_ksize: 1.25rem;
+		--_kfont: 0.6875rem;
+	}
+`){constructor(...e){super(...e),this.size=`md`}render(){return r.html`<kbd part="base"><slot></slot></kbd>`}};t.t([(0,n.property)({type:String,reflect:!0})],i.prototype,`size`,void 0),i=t.t([(0,n.customElement)(`schmancy-kbd`)],i),Object.defineProperty(exports,`SchmancyKbd`,{enumerable:!0,get:function(){return i}});

package/dist/kbd.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"kbd.cjs","names":[],"sources":["../src/kbd/kbd.ts"],"sourcesContent":["import { TailwindElement } from '@mixins/index'\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\n/**\n * Renders a keyboard shortcut hint (e.g. `⌘ K`, `Ctrl+C`). Semantically a\n * `<kbd>` element for screen readers; visually styled as a pressed key.\n *\n * Compose multiple instances for combinations:\n * ```html\n * <schmancy-kbd>⌘</schmancy-kbd> + <schmancy-kbd>K</schmancy-kbd>\n * ```\n *\n * @element schmancy-kbd\n * @slot - The key label (e.g. `⌘`, `Shift`, `K`).\n * @attr size - 'sm' | 'md'. Default 'md'.\n * @csspart base - The inner native `<kbd>` element.\n */\n@customElement('schmancy-kbd')\nexport class SchmancyKbd extends TailwindElement(css`\n\t:host {\n\t\tdisplay: inline-block;\n\t\tvertical-align: middle;\n\t}\n\tkbd {\n\t\tdisplay: inline-flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\tmin-width: var(--_ksize, 1.5rem);\n\t\theight: var(--_ksize, 1.5rem);\n\t\tpadding: 0 0.375rem;\n\t\tfont-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;\n\t\tfont-size: var(--_kfont, 0.75rem);\n\t\tfont-weight: 500;\n\t\tline-height: 1;\n\t\tcolor: var(--schmancy-sys-color-surface-on, #1d1b20);\n\t\tbackground: var(--schmancy-sys-color-surface-container, #f3f0f7);\n\t\tborder: 1px solid var(--schmancy-sys-color-outline-variant, #cac4d0);\n\t\tborder-radius: 0.375rem;\n\t\tbox-shadow: inset 0 -1px 0 var(--schmancy-sys-color-outline-variant, #cac4d0);\n\t\twhite-space: nowrap;\n\t}\n\t:host([size='sm']) kbd {\n\t\t--_ksize: 1.25rem;\n\t\t--_kfont: 0.6875rem;\n\t}\n`) {\n\t@property({ type: String, reflect: true }) size: 'sm' | 'md' = 'md'\n\n\trender() {\n\t\treturn html`<kbd part=\"base\"><slot></slot></kbd>`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-kbd': SchmancyKbd\n\t}\n}\n"],"mappings":"qQAmBO,IAAA,EAAA,cAA0B,EAAA,EAAgB,EAAA,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;2CA4BY,KAE/D,QAAA,CACC,MAAO,GAAA,IAAI,yCAAA,EAAA,EAAA,EAAA,EAAA,EAAA,UAHF,CAAE,KAAM,OAAQ,QAAA,CAAS,EAAA,CAAA,CAAA,CAAO,EAAA,UAAA,OAAA,IAAA,GAAA,CAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,eA7B5B,eAAA,CAAA,CAAe,EAAA,CAAA,OAAA,eAAA,QAAA,cAAA,CAAA,WAAA,CAAA,EAAA,IAAA,UAAA,CAAA,OAAA,GAAA,CAAA"}

package/dist/kbd.js

@@ -0,0 +1,45 @@
+import { t as e } from "./tailwind.mixin-DufHBjmb.js";
+import { t } from "./decorate-D_utPUsC.js";
+import "./mixins.js";
+import { customElement as n, property as r } from "lit/decorators.js";
+import { css as i, html as a } from "lit";
+var o = class extends e(i`
+	:host {
+		display: inline-block;
+		vertical-align: middle;
+	}
+	kbd {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		min-width: var(--_ksize, 1.5rem);
+		height: var(--_ksize, 1.5rem);
+		padding: 0 0.375rem;
+		font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+		font-size: var(--_kfont, 0.75rem);
+		font-weight: 500;
+		line-height: 1;
+		color: var(--schmancy-sys-color-surface-on, #1d1b20);
+		background: var(--schmancy-sys-color-surface-container, #f3f0f7);
+		border: 1px solid var(--schmancy-sys-color-outline-variant, #cac4d0);
+		border-radius: 0.375rem;
+		box-shadow: inset 0 -1px 0 var(--schmancy-sys-color-outline-variant, #cac4d0);
+		white-space: nowrap;
+	}
+	:host([size='sm']) kbd {
+		--_ksize: 1.25rem;
+		--_kfont: 0.6875rem;
+	}
+`) {
+	constructor(...e) {
+		super(...e), this.size = "md";
+	}
+	render() {
+		return a`<kbd part="base"><slot></slot></kbd>`;
+	}
+};
+t([r({
+	type: String,
+	reflect: !0
+})], o.prototype, "size", void 0), o = t([n("schmancy-kbd")], o);
+export { o as SchmancyKbd };

package/dist/kbd.js.map

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