@mhmo91/schmancy 0.10.5 → 0.10.7

package/dist/timeline.cjs

@@ -1,277 +0,0 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`./chunk-CncqDLb2.cjs`);const e=require(`./mixins-CAb0b03r.cjs`),t=require(`./decorate-DpFmy0nm.cjs`);let n=require(`rxjs`),r=require(`lit/decorators.js`),i=require(`lit`),a=require(`lit/directives/when.js`);var o=class extends e.s{constructor(...e){super(...e),this.state=`empty`,this.glyph=``,this._onClick=()=>{this.state!==`empty`&&this.dispatchEvent(new CustomEvent(`tile-click`,{detail:{glyph:this.glyph,state:this.state},bubbles:!0,composed:!0}))}}static{this.styles=[i.css`
-	:host {
-		--schmancy-tile-w: 32px;
-		--schmancy-tile-h: 40px;
-		display: inline-block;
-		position: relative;
-		width: var(--schmancy-tile-w);
-		height: var(--schmancy-tile-h);
-		font-size: 14px;
-		line-height: 1.45;
-	}
-
-	/* Inner box that paints the cell. The host is a layout container only;
-	   the box owns the border / background / hover transform so the host
-	   stays a clean focus target. */
-	.tile {
-		position: absolute;
-		inset: 0;
-		border-radius: 2px;
-		overflow: visible;
-		appearance: none;
-		padding: 0;
-		font: inherit;
-		color: inherit;
-		background: transparent;
-		z-index: 1;
-		transition:
-			transform 120ms ease-in-out,
-			box-shadow 120ms ease-in-out,
-			border-color 120ms ease-in-out;
-	}
-
-	/* Empty state */
-	:host([state='empty']) .tile {
-		border: 1px dashed var(--schmancy-sys-color-outline);
-		background: transparent;
-		cursor: default;
-	}
-
-	:host([state='empty']) .glyph {
-		color: var(--schmancy-sys-color-surface-onVariant);
-		opacity: 0.7;
-	}
-
-	/* Shared filled-state card styling (filled / stack-top / stack-sibling) */
-	:host([state='filled']) .tile,
-	:host([state='stack-top']) .tile,
-	:host([state='stack-sibling']) .tile {
-		border: 1px solid var(--schmancy-sys-color-outline);
-		background: var(--schmancy-sys-color-surface-containerLowest);
-		cursor: pointer;
-		box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02);
-	}
-
-	/* Paper-card line texture: five thin lines emulating ruled paper */
-	:host([state='filled']) .tile::before,
-	:host([state='stack-top']) .tile::before,
-	:host([state='stack-sibling']) .tile::before {
-		content: '';
-		position: absolute;
-		left: 4px;
-		right: 4px;
-		top: 16px;
-		bottom: 5px;
-		background-image:
-			linear-gradient(var(--schmancy-sys-color-outline) 1px, transparent 1px),
-			linear-gradient(var(--schmancy-sys-color-outline) 1px, transparent 1px),
-			linear-gradient(var(--schmancy-sys-color-outline) 1px, transparent 1px),
-			linear-gradient(var(--schmancy-sys-color-outline) 1px, transparent 1px),
-			linear-gradient(var(--schmancy-sys-color-outline) 1px, transparent 1px);
-		background-repeat: no-repeat;
-		background-size:
-			100% 1px,
-			80% 1px,
-			92% 1px,
-			65% 1px,
-			78% 1px;
-		background-position:
-			0 0,
-			0 4px,
-			0 8px,
-			0 12px,
-			0 16px;
-		opacity: 0.3;
-		pointer-events: none;
-		z-index: 0;
-	}
-
-	/* Tinted accent strip across the top edge */
-	:host([state='filled']) .tile::after,
-	:host([state='stack-top']) .tile::after,
-	:host([state='stack-sibling']) .tile::after {
-		content: '';
-		position: absolute;
-		left: 0;
-		right: 0;
-		top: 0;
-		height: 11px;
-		background: color-mix(
-			in oklch,
-			var(--schmancy-sys-color-primary-default) 10%,
-			transparent
-		);
-		border-bottom: 1px solid
-			color-mix(
-				in oklch,
-				var(--schmancy-sys-color-primary-default) 25%,
-				var(--schmancy-sys-color-outline)
-			);
-		pointer-events: none;
-	}
-
-	:host([state='filled']) .glyph,
-	:host([state='stack-top']) .glyph,
-	:host([state='stack-sibling']) .glyph {
-		color: var(--schmancy-sys-color-primary-onContainer);
-	}
-
-	/* Single-card hover: lift 1px + soft shadow */
-	:host([state='filled']) .tile:hover {
-		border-color: var(--schmancy-sys-color-primary-default);
-		transform: translateY(-1px);
-		box-shadow: 0 3px 8px rgba(0, 0, 0, 0.06);
-	}
-
-	/* Focus ring in primary color */
-	:host([state='filled']) .tile:focus-visible,
-	:host([state='stack-top']) .tile:focus-visible,
-	:host([state='stack-sibling']) .tile:focus-visible {
-		outline: 2px solid var(--schmancy-sys-color-primary-default);
-		outline-offset: 3px;
-	}
-
-	/* Stacked tiles position absolutely on the host's grid cell so the
-	   wrapper's --fan-count / --i custom properties drive the offset. */
-	:host([state='stack-top']),
-	:host([state='stack-sibling']) {
-		position: absolute;
-		top: 0;
-		left: 0;
-		transition:
-			transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1),
-			box-shadow 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
-		transform: translate(
-			calc((var(--fan-count, 1) - 1 - var(--i, 0)) * -3px),
-			calc((var(--fan-count, 1) - 1 - var(--i, 0)) * 3px)
-		);
-	}
-
-	/* Sibling tiles only become interactive once the wrapper is fanned —
-	   otherwise they're stacked underneath and would steal pointer events
-	   from the top card. */
-	:host([state='stack-sibling']) {
-		pointer-events: none;
-	}
-
-	/* Fanned: every tile slides edge-to-edge along the wrapper's row */
-	:host([state='stack-top']:host-context([data-fanned])),
-	:host-context([data-fanned]):host([state='stack-top']) {
-		transform: translate(
-			calc((var(--fan-count, 1) - 1 - var(--i, 0)) * var(--schmancy-tile-w) * -1),
-			0
-		);
-		box-shadow: 0 3px 8px rgba(0, 0, 0, 0.06);
-	}
-
-	:host([state='stack-sibling']:host-context([data-fanned])),
-	:host-context([data-fanned]):host([state='stack-sibling']) {
-		pointer-events: auto;
-		transform: translate(
-			calc((var(--fan-count, 1) - 1 - var(--i, 0)) * var(--schmancy-tile-w) * -1),
-			0
-		);
-		box-shadow: 0 3px 8px rgba(0, 0, 0, 0.06);
-	}
-
-	:host-context([data-fanned]):host([state='stack-top']) .tile:hover,
-	:host-context([data-fanned]):host([state='stack-sibling']) .tile:hover {
-		border-color: var(--schmancy-sys-color-primary-default);
-		box-shadow: 0 6px 14px rgba(0, 0, 0, 0.1);
-	}
-
-	.glyph {
-		position: absolute;
-		top: 0;
-		left: 0;
-		right: 0;
-		height: 11px;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		font-size: 7.5px;
-		font-weight: 500;
-		letter-spacing: 0.12em;
-		line-height: 1;
-		z-index: 1;
-		font-variant-caps: all-petite-caps;
-	}
-
-	.tooltip {
-		position: absolute;
-		bottom: calc(100% + 6px);
-		left: 50%;
-		transform: translate(-50%, 2px);
-		font-size: 10px;
-		line-height: 1.2;
-		color: var(--schmancy-sys-color-surface-on);
-		background: var(--schmancy-sys-color-surface-containerLowest);
-		border: 1px solid var(--schmancy-sys-color-outline);
-		padding: 2px 6px;
-		border-radius: 3px;
-		white-space: nowrap;
-		opacity: 0;
-		pointer-events: none;
-		transition:
-			opacity 150ms ease-in-out,
-			transform 150ms ease-in-out;
-		z-index: 2;
-	}
-
-	.tile:hover .tooltip,
-	.tile:focus-visible .tooltip {
-		opacity: 1;
-		transform: translate(-50%, 0);
-	}
-
-	.caption {
-		position: absolute;
-		top: calc(100% + 6px);
-		left: 50%;
-		transform: translateX(-50%);
-		font-size: 11px;
-		line-height: 1.2;
-		font-weight: 500;
-		white-space: nowrap;
-		color: var(--schmancy-sys-color-surface-on);
-		font-variant-numeric: tabular-nums;
-	}
-
-	.stack-count {
-		position: absolute;
-		top: -5px;
-		right: -7px;
-		min-width: 14px;
-		height: 14px;
-		padding: 0 4px;
-		border-radius: 7px;
-		background: var(--schmancy-sys-color-primary-default);
-		color: var(--schmancy-sys-color-primary-on);
-		font-size: 9px;
-		font-weight: 500;
-		line-height: 14px;
-		text-align: center;
-		z-index: 10;
-		pointer-events: none;
-		transition: opacity 150ms ease-in-out;
-	}
-
-	:host-context([data-fanned]) .stack-count {
-		opacity: 0;
-	}
-`]}connectedCallback(){if(super.connectedCallback(),this.index!==void 0&&this.style.setProperty(`--i`,String(this.index)),this.state!==`stack-top`)return;let e=this.parentElement;e&&(0,n.fromEvent)(e,`pointerover`).pipe((0,n.map)(e=>e.target?.closest(`[data-stack-id]`)??null),(0,n.distinctUntilChanged)(),(0,n.switchMap)(t=>t===e?(0,n.of)(e):(0,n.timer)(800).pipe((0,n.map)(()=>null))),(0,n.distinctUntilChanged)(),(0,n.switchMap)(e=>e?new n.Observable(()=>(e.setAttribute(`data-fanned`,``),()=>e.removeAttribute(`data-fanned`))):n.EMPTY),(0,n.takeUntil)(this.disconnecting)).subscribe()}updated(e){super.updated(e),e.has(`index`)&&this.index!==void 0&&this.style.setProperty(`--i`,String(this.index))}_ariaLabel(){let e=[this.glyph];return this.caption&&e.push(this.caption),this.tooltip&&e.push(this.tooltip),this.state===`empty`&&e.push(`empty`),e.join(` · `)}render(){let e=this.state!==`empty`,t=this._ariaLabel();return i.html`
-			<button
-				type="button"
-				class="tile"
-				role=${e?`button`:`presentation`}
-				tabindex=${e?0:-1}
-				aria-label=${t}
-				?disabled=${!e}
-				@click=${this._onClick}
-			>
-				<span class="glyph">${this.glyph}</span>
-				${(0,a.when)(this.tooltip&&e,()=>i.html`<span class="tooltip">${this.tooltip}</span>`)}
-				${(0,a.when)(this.caption&&this.state!==`stack-sibling`,()=>i.html`<span class="caption">${this.caption}</span>`)}
-				${(0,a.when)(this.state===`stack-top`&&this.stackCount!==void 0&&this.stackCount>1,()=>i.html`<span class="stack-count">×${this.stackCount}</span>`)}
-			</button>
-		`}};t.t([(0,r.property)({type:String,reflect:!0})],o.prototype,`state`,void 0),t.t([(0,r.property)({type:String})],o.prototype,`glyph`,void 0),t.t([(0,r.property)({type:Number,attribute:`stack-count`})],o.prototype,`stackCount`,void 0),t.t([(0,r.property)({type:Number,reflect:!0})],o.prototype,`index`,void 0),t.t([(0,r.property)({type:String})],o.prototype,`tooltip`,void 0),t.t([(0,r.property)({type:String})],o.prototype,`caption`,void 0),o=t.t([(0,r.customElement)(`schmancy-timeline-tile`)],o),Object.defineProperty(exports,`SchmancyTimelineTile`,{enumerable:!0,get:function(){return o}});

package/dist/timeline.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"timeline.cjs","names":[],"sources":["../src/timeline/timeline-tile.ts"],"sourcesContent":["/**\n * Timeline tile — one cell in a procurement-stage rail.\n *\n * Three render states (one component, four `state` values):\n *   - `empty`         dashed-border outline + glyph\n *   - `filled`        paper-card with glyph; hoverable / focusable / clickable\n *   - `stack-top`     paper-card on top of N siblings; carries the ×N badge\n *   - `stack-sibling` paper-card behind the top; revealed when the wrapper\n *                     is fanned\n *\n * Stack fan is coordinated by a `data-fanned` attribute on the parent\n * wrapper element. The `stack-top` tile owns the orchestration: a\n * `pointerover` pipe on the wrapper element with hover-intent (immediate\n * enter, 800ms leave debounce) toggles the attribute. Sibling tiles read\n * the attribute via the `:host-context([data-fanned])` selector. Native\n * `:hover` would drop the moment the cursor crosses the gap between\n * fanned siblings; the attribute survives that crossing because the\n * pointerover stream stays on the wrapper subtree.\n */\nimport { SchmancyElement } from '@mixins/index'\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { when } from 'lit/directives/when.js'\nimport {\n\tEMPTY,\n\tObservable,\n\tdistinctUntilChanged,\n\tfromEvent,\n\tmap,\n\tof,\n\tswitchMap,\n\ttakeUntil,\n\ttimer,\n} from 'rxjs'\n\nexport type TimelineTileState = 'empty' | 'filled' | 'stack-top' | 'stack-sibling'\n\nexport type TimelineTileClickEvent = CustomEvent<{\n\tglyph: string\n\tstate: TimelineTileState\n}>\n\n@customElement('schmancy-timeline-tile')\nexport class SchmancyTimelineTile extends SchmancyElement {\n\tstatic styles = [css`\n\t:host {\n\t\t--schmancy-tile-w: 32px;\n\t\t--schmancy-tile-h: 40px;\n\t\tdisplay: inline-block;\n\t\tposition: relative;\n\t\twidth: var(--schmancy-tile-w);\n\t\theight: var(--schmancy-tile-h);\n\t\tfont-size: 14px;\n\t\tline-height: 1.45;\n\t}\n\n\t/* Inner box that paints the cell. The host is a layout container only;\n\t   the box owns the border / background / hover transform so the host\n\t   stays a clean focus target. */\n\t.tile {\n\t\tposition: absolute;\n\t\tinset: 0;\n\t\tborder-radius: 2px;\n\t\toverflow: visible;\n\t\tappearance: none;\n\t\tpadding: 0;\n\t\tfont: inherit;\n\t\tcolor: inherit;\n\t\tbackground: transparent;\n\t\tz-index: 1;\n\t\ttransition:\n\t\t\ttransform 120ms ease-in-out,\n\t\t\tbox-shadow 120ms ease-in-out,\n\t\t\tborder-color 120ms ease-in-out;\n\t}\n\n\t/* Empty state */\n\t:host([state='empty']) .tile {\n\t\tborder: 1px dashed var(--schmancy-sys-color-outline);\n\t\tbackground: transparent;\n\t\tcursor: default;\n\t}\n\n\t:host([state='empty']) .glyph {\n\t\tcolor: var(--schmancy-sys-color-surface-onVariant);\n\t\topacity: 0.7;\n\t}\n\n\t/* Shared filled-state card styling (filled / stack-top / stack-sibling) */\n\t:host([state='filled']) .tile,\n\t:host([state='stack-top']) .tile,\n\t:host([state='stack-sibling']) .tile {\n\t\tborder: 1px solid var(--schmancy-sys-color-outline);\n\t\tbackground: var(--schmancy-sys-color-surface-containerLowest);\n\t\tcursor: pointer;\n\t\tbox-shadow: 0 1px 0 rgba(0, 0, 0, 0.02);\n\t}\n\n\t/* Paper-card line texture: five thin lines emulating ruled paper */\n\t:host([state='filled']) .tile::before,\n\t:host([state='stack-top']) .tile::before,\n\t:host([state='stack-sibling']) .tile::before {\n\t\tcontent: '';\n\t\tposition: absolute;\n\t\tleft: 4px;\n\t\tright: 4px;\n\t\ttop: 16px;\n\t\tbottom: 5px;\n\t\tbackground-image:\n\t\t\tlinear-gradient(var(--schmancy-sys-color-outline) 1px, transparent 1px),\n\t\t\tlinear-gradient(var(--schmancy-sys-color-outline) 1px, transparent 1px),\n\t\t\tlinear-gradient(var(--schmancy-sys-color-outline) 1px, transparent 1px),\n\t\t\tlinear-gradient(var(--schmancy-sys-color-outline) 1px, transparent 1px),\n\t\t\tlinear-gradient(var(--schmancy-sys-color-outline) 1px, transparent 1px);\n\t\tbackground-repeat: no-repeat;\n\t\tbackground-size:\n\t\t\t100% 1px,\n\t\t\t80% 1px,\n\t\t\t92% 1px,\n\t\t\t65% 1px,\n\t\t\t78% 1px;\n\t\tbackground-position:\n\t\t\t0 0,\n\t\t\t0 4px,\n\t\t\t0 8px,\n\t\t\t0 12px,\n\t\t\t0 16px;\n\t\topacity: 0.3;\n\t\tpointer-events: none;\n\t\tz-index: 0;\n\t}\n\n\t/* Tinted accent strip across the top edge */\n\t:host([state='filled']) .tile::after,\n\t:host([state='stack-top']) .tile::after,\n\t:host([state='stack-sibling']) .tile::after {\n\t\tcontent: '';\n\t\tposition: absolute;\n\t\tleft: 0;\n\t\tright: 0;\n\t\ttop: 0;\n\t\theight: 11px;\n\t\tbackground: color-mix(\n\t\t\tin oklch,\n\t\t\tvar(--schmancy-sys-color-primary-default) 10%,\n\t\t\ttransparent\n\t\t);\n\t\tborder-bottom: 1px solid\n\t\t\tcolor-mix(\n\t\t\t\tin oklch,\n\t\t\t\tvar(--schmancy-sys-color-primary-default) 25%,\n\t\t\t\tvar(--schmancy-sys-color-outline)\n\t\t\t);\n\t\tpointer-events: none;\n\t}\n\n\t:host([state='filled']) .glyph,\n\t:host([state='stack-top']) .glyph,\n\t:host([state='stack-sibling']) .glyph {\n\t\tcolor: var(--schmancy-sys-color-primary-onContainer);\n\t}\n\n\t/* Single-card hover: lift 1px + soft shadow */\n\t:host([state='filled']) .tile:hover {\n\t\tborder-color: var(--schmancy-sys-color-primary-default);\n\t\ttransform: translateY(-1px);\n\t\tbox-shadow: 0 3px 8px rgba(0, 0, 0, 0.06);\n\t}\n\n\t/* Focus ring in primary color */\n\t:host([state='filled']) .tile:focus-visible,\n\t:host([state='stack-top']) .tile:focus-visible,\n\t:host([state='stack-sibling']) .tile:focus-visible {\n\t\toutline: 2px solid var(--schmancy-sys-color-primary-default);\n\t\toutline-offset: 3px;\n\t}\n\n\t/* Stacked tiles position absolutely on the host's grid cell so the\n\t   wrapper's --fan-count / --i custom properties drive the offset. */\n\t:host([state='stack-top']),\n\t:host([state='stack-sibling']) {\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\tleft: 0;\n\t\ttransition:\n\t\t\ttransform 200ms cubic-bezier(0.2, 0.8, 0.2, 1),\n\t\t\tbox-shadow 200ms cubic-bezier(0.2, 0.8, 0.2, 1);\n\t\ttransform: translate(\n\t\t\tcalc((var(--fan-count, 1) - 1 - var(--i, 0)) * -3px),\n\t\t\tcalc((var(--fan-count, 1) - 1 - var(--i, 0)) * 3px)\n\t\t);\n\t}\n\n\t/* Sibling tiles only become interactive once the wrapper is fanned —\n\t   otherwise they're stacked underneath and would steal pointer events\n\t   from the top card. */\n\t:host([state='stack-sibling']) {\n\t\tpointer-events: none;\n\t}\n\n\t/* Fanned: every tile slides edge-to-edge along the wrapper's row */\n\t:host([state='stack-top']:host-context([data-fanned])),\n\t:host-context([data-fanned]):host([state='stack-top']) {\n\t\ttransform: translate(\n\t\t\tcalc((var(--fan-count, 1) - 1 - var(--i, 0)) * var(--schmancy-tile-w) * -1),\n\t\t\t0\n\t\t);\n\t\tbox-shadow: 0 3px 8px rgba(0, 0, 0, 0.06);\n\t}\n\n\t:host([state='stack-sibling']:host-context([data-fanned])),\n\t:host-context([data-fanned]):host([state='stack-sibling']) {\n\t\tpointer-events: auto;\n\t\ttransform: translate(\n\t\t\tcalc((var(--fan-count, 1) - 1 - var(--i, 0)) * var(--schmancy-tile-w) * -1),\n\t\t\t0\n\t\t);\n\t\tbox-shadow: 0 3px 8px rgba(0, 0, 0, 0.06);\n\t}\n\n\t:host-context([data-fanned]):host([state='stack-top']) .tile:hover,\n\t:host-context([data-fanned]):host([state='stack-sibling']) .tile:hover {\n\t\tborder-color: var(--schmancy-sys-color-primary-default);\n\t\tbox-shadow: 0 6px 14px rgba(0, 0, 0, 0.1);\n\t}\n\n\t.glyph {\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\tleft: 0;\n\t\tright: 0;\n\t\theight: 11px;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\tfont-size: 7.5px;\n\t\tfont-weight: 500;\n\t\tletter-spacing: 0.12em;\n\t\tline-height: 1;\n\t\tz-index: 1;\n\t\tfont-variant-caps: all-petite-caps;\n\t}\n\n\t.tooltip {\n\t\tposition: absolute;\n\t\tbottom: calc(100% + 6px);\n\t\tleft: 50%;\n\t\ttransform: translate(-50%, 2px);\n\t\tfont-size: 10px;\n\t\tline-height: 1.2;\n\t\tcolor: var(--schmancy-sys-color-surface-on);\n\t\tbackground: var(--schmancy-sys-color-surface-containerLowest);\n\t\tborder: 1px solid var(--schmancy-sys-color-outline);\n\t\tpadding: 2px 6px;\n\t\tborder-radius: 3px;\n\t\twhite-space: nowrap;\n\t\topacity: 0;\n\t\tpointer-events: none;\n\t\ttransition:\n\t\t\topacity 150ms ease-in-out,\n\t\t\ttransform 150ms ease-in-out;\n\t\tz-index: 2;\n\t}\n\n\t.tile:hover .tooltip,\n\t.tile:focus-visible .tooltip {\n\t\topacity: 1;\n\t\ttransform: translate(-50%, 0);\n\t}\n\n\t.caption {\n\t\tposition: absolute;\n\t\ttop: calc(100% + 6px);\n\t\tleft: 50%;\n\t\ttransform: translateX(-50%);\n\t\tfont-size: 11px;\n\t\tline-height: 1.2;\n\t\tfont-weight: 500;\n\t\twhite-space: nowrap;\n\t\tcolor: var(--schmancy-sys-color-surface-on);\n\t\tfont-variant-numeric: tabular-nums;\n\t}\n\n\t.stack-count {\n\t\tposition: absolute;\n\t\ttop: -5px;\n\t\tright: -7px;\n\t\tmin-width: 14px;\n\t\theight: 14px;\n\t\tpadding: 0 4px;\n\t\tborder-radius: 7px;\n\t\tbackground: var(--schmancy-sys-color-primary-default);\n\t\tcolor: var(--schmancy-sys-color-primary-on);\n\t\tfont-size: 9px;\n\t\tfont-weight: 500;\n\t\tline-height: 14px;\n\t\ttext-align: center;\n\t\tz-index: 10;\n\t\tpointer-events: none;\n\t\ttransition: opacity 150ms ease-in-out;\n\t}\n\n\t:host-context([data-fanned]) .stack-count {\n\t\topacity: 0;\n\t}\n`]\n\n\t@property({ type: String, reflect: true }) state: TimelineTileState = 'empty'\n\n\t@property({ type: String }) glyph = ''\n\n\t@property({ type: Number, attribute: 'stack-count' }) stackCount?: number\n\n\t@property({ type: Number, reflect: true }) index?: number\n\n\t@property({ type: String }) tooltip?: string\n\n\t@property({ type: String }) caption?: string\n\n\toverride connectedCallback(): void {\n\t\tsuper.connectedCallback()\n\n\t\t// Mirror `index` onto the host's `--i` custom property so the\n\t\t// fan-offset transforms don't depend on the consumer setting both\n\t\t// the prop and an inline style.\n\t\tif (this.index !== undefined) {\n\t\t\tthis.style.setProperty('--i', String(this.index))\n\t\t}\n\n\t\t// Stack-top owns the fan orchestration. The pointerover stream lives\n\t\t// on the parent wrapper (the element holding all sibling tiles); a\n\t\t// hover-intent pipe drives the `data-fanned` attribute on that\n\t\t// wrapper. Enter is immediate (`of(wrapper)`); leave waits 800ms\n\t\t// (`timer(800)`) so the cursor can cross the gap between fanned\n\t\t// cards without collapsing the stack. The inner Observable's\n\t\t// subscription lifetime IS the fanned state — subscribe sets the\n\t\t// attribute, teardown removes it.\n\t\tif (this.state !== 'stack-top') return\n\t\tconst wrapper = this.parentElement\n\t\tif (!wrapper) return\n\n\t\tfromEvent<PointerEvent>(wrapper, 'pointerover')\n\t\t\t.pipe(\n\t\t\t\tmap(\n\t\t\t\t\t(e) =>\n\t\t\t\t\t\t(e.target as HTMLElement | null)?.closest<HTMLElement>(\n\t\t\t\t\t\t\t'[data-stack-id]',\n\t\t\t\t\t\t) ?? null,\n\t\t\t\t),\n\t\t\t\tdistinctUntilChanged(),\n\t\t\t\tswitchMap((target) =>\n\t\t\t\t\ttarget === wrapper ? of(wrapper) : timer(800).pipe(map(() => null)),\n\t\t\t\t),\n\t\t\t\tdistinctUntilChanged(),\n\t\t\t\tswitchMap((target) =>\n\t\t\t\t\ttarget\n\t\t\t\t\t\t? new Observable<never>(() => {\n\t\t\t\t\t\t\t\ttarget.setAttribute('data-fanned', '')\n\t\t\t\t\t\t\t\treturn () => target.removeAttribute('data-fanned')\n\t\t\t\t\t\t\t})\n\t\t\t\t\t\t: EMPTY,\n\t\t\t\t),\n\t\t\t\ttakeUntil(this.disconnecting),\n\t\t\t)\n\t\t\t.subscribe()\n\t}\n\n\tprotected override updated(changed: Map<string, unknown>): void {\n\t\tsuper.updated(changed)\n\t\tif (changed.has('index') && this.index !== undefined) {\n\t\t\tthis.style.setProperty('--i', String(this.index))\n\t\t}\n\t}\n\n\tprivate _onClick = (): void => {\n\t\tif (this.state === 'empty') return\n\t\tthis.dispatchEvent(\n\t\t\tnew CustomEvent<TimelineTileClickEvent['detail']>('tile-click', {\n\t\t\t\tdetail: { glyph: this.glyph, state: this.state },\n\t\t\t\tbubbles: true,\n\t\t\t\tcomposed: true,\n\t\t\t}),\n\t\t)\n\t}\n\n\tprivate _ariaLabel(): string {\n\t\tconst parts = [this.glyph]\n\t\tif (this.caption) parts.push(this.caption)\n\t\tif (this.tooltip) parts.push(this.tooltip)\n\t\tif (this.state === 'empty') parts.push('empty')\n\t\treturn parts.join(' · ')\n\t}\n\n\tprotected override render(): unknown {\n\t\tconst isInteractive = this.state !== 'empty'\n\t\tconst ariaLabel = this._ariaLabel()\n\t\treturn html`\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\tclass=\"tile\"\n\t\t\t\trole=${isInteractive ? 'button' : 'presentation'}\n\t\t\t\ttabindex=${isInteractive ? 0 : -1}\n\t\t\t\taria-label=${ariaLabel}\n\t\t\t\t?disabled=${!isInteractive}\n\t\t\t\t@click=${this._onClick}\n\t\t\t>\n\t\t\t\t<span class=\"glyph\">${this.glyph}</span>\n\t\t\t\t${when(\n\t\t\t\t\tthis.tooltip && isInteractive,\n\t\t\t\t\t() => html`<span class=\"tooltip\">${this.tooltip}</span>`,\n\t\t\t\t)}\n\t\t\t\t${when(\n\t\t\t\t\tthis.caption && this.state !== 'stack-sibling',\n\t\t\t\t\t() => html`<span class=\"caption\">${this.caption}</span>`,\n\t\t\t\t)}\n\t\t\t\t${when(\n\t\t\t\t\tthis.state === 'stack-top' &&\n\t\t\t\t\t\tthis.stackCount !== undefined &&\n\t\t\t\t\t\tthis.stackCount > 1,\n\t\t\t\t\t() => html`<span class=\"stack-count\">×${this.stackCount}</span>`,\n\t\t\t\t)}\n\t\t\t</button>\n\t\t`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-timeline-tile': SchmancyTimelineTile\n\t}\n}\n"],"mappings":"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"}

package/dist/timeline.js

@@ -1,326 +0,0 @@
-import { s as e } from "./mixins-B34UxxCe.js";
-import { t } from "./decorate-23nYs4Le.js";
-import { EMPTY as n, Observable as r, distinctUntilChanged as i, fromEvent as a, map as o, of as s, switchMap as c, takeUntil as l, timer as u } from "rxjs";
-import { customElement as d, property as f } from "lit/decorators.js";
-import { css as p, html as m } from "lit";
-import { when as h } from "lit/directives/when.js";
-var g = class extends e {
-	constructor(...e) {
-		super(...e), this.state = "empty", this.glyph = "", this._onClick = () => {
-			this.state !== "empty" && this.dispatchEvent(new CustomEvent("tile-click", {
-				detail: {
-					glyph: this.glyph,
-					state: this.state
-				},
-				bubbles: !0,
-				composed: !0
-			}));
-		};
-	}
-	static {
-		this.styles = [p`
-	:host {
-		--schmancy-tile-w: 32px;
-		--schmancy-tile-h: 40px;
-		display: inline-block;
-		position: relative;
-		width: var(--schmancy-tile-w);
-		height: var(--schmancy-tile-h);
-		font-size: 14px;
-		line-height: 1.45;
-	}
-
-	/* Inner box that paints the cell. The host is a layout container only;
-	   the box owns the border / background / hover transform so the host
-	   stays a clean focus target. */
-	.tile {
-		position: absolute;
-		inset: 0;
-		border-radius: 2px;
-		overflow: visible;
-		appearance: none;
-		padding: 0;
-		font: inherit;
-		color: inherit;
-		background: transparent;
-		z-index: 1;
-		transition:
-			transform 120ms ease-in-out,
-			box-shadow 120ms ease-in-out,
-			border-color 120ms ease-in-out;
-	}
-
-	/* Empty state */
-	:host([state='empty']) .tile {
-		border: 1px dashed var(--schmancy-sys-color-outline);
-		background: transparent;
-		cursor: default;
-	}
-
-	:host([state='empty']) .glyph {
-		color: var(--schmancy-sys-color-surface-onVariant);
-		opacity: 0.7;
-	}
-
-	/* Shared filled-state card styling (filled / stack-top / stack-sibling) */
-	:host([state='filled']) .tile,
-	:host([state='stack-top']) .tile,
-	:host([state='stack-sibling']) .tile {
-		border: 1px solid var(--schmancy-sys-color-outline);
-		background: var(--schmancy-sys-color-surface-containerLowest);
-		cursor: pointer;
-		box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02);
-	}
-
-	/* Paper-card line texture: five thin lines emulating ruled paper */
-	:host([state='filled']) .tile::before,
-	:host([state='stack-top']) .tile::before,
-	:host([state='stack-sibling']) .tile::before {
-		content: '';
-		position: absolute;
-		left: 4px;
-		right: 4px;
-		top: 16px;
-		bottom: 5px;
-		background-image:
-			linear-gradient(var(--schmancy-sys-color-outline) 1px, transparent 1px),
-			linear-gradient(var(--schmancy-sys-color-outline) 1px, transparent 1px),
-			linear-gradient(var(--schmancy-sys-color-outline) 1px, transparent 1px),
-			linear-gradient(var(--schmancy-sys-color-outline) 1px, transparent 1px),
-			linear-gradient(var(--schmancy-sys-color-outline) 1px, transparent 1px);
-		background-repeat: no-repeat;
-		background-size:
-			100% 1px,
-			80% 1px,
-			92% 1px,
-			65% 1px,
-			78% 1px;
-		background-position:
-			0 0,
-			0 4px,
-			0 8px,
-			0 12px,
-			0 16px;
-		opacity: 0.3;
-		pointer-events: none;
-		z-index: 0;
-	}
-
-	/* Tinted accent strip across the top edge */
-	:host([state='filled']) .tile::after,
-	:host([state='stack-top']) .tile::after,
-	:host([state='stack-sibling']) .tile::after {
-		content: '';
-		position: absolute;
-		left: 0;
-		right: 0;
-		top: 0;
-		height: 11px;
-		background: color-mix(
-			in oklch,
-			var(--schmancy-sys-color-primary-default) 10%,
-			transparent
-		);
-		border-bottom: 1px solid
-			color-mix(
-				in oklch,
-				var(--schmancy-sys-color-primary-default) 25%,
-				var(--schmancy-sys-color-outline)
-			);
-		pointer-events: none;
-	}
-
-	:host([state='filled']) .glyph,
-	:host([state='stack-top']) .glyph,
-	:host([state='stack-sibling']) .glyph {
-		color: var(--schmancy-sys-color-primary-onContainer);
-	}
-
-	/* Single-card hover: lift 1px + soft shadow */
-	:host([state='filled']) .tile:hover {
-		border-color: var(--schmancy-sys-color-primary-default);
-		transform: translateY(-1px);
-		box-shadow: 0 3px 8px rgba(0, 0, 0, 0.06);
-	}
-
-	/* Focus ring in primary color */
-	:host([state='filled']) .tile:focus-visible,
-	:host([state='stack-top']) .tile:focus-visible,
-	:host([state='stack-sibling']) .tile:focus-visible {
-		outline: 2px solid var(--schmancy-sys-color-primary-default);
-		outline-offset: 3px;
-	}
-
-	/* Stacked tiles position absolutely on the host's grid cell so the
-	   wrapper's --fan-count / --i custom properties drive the offset. */
-	:host([state='stack-top']),
-	:host([state='stack-sibling']) {
-		position: absolute;
-		top: 0;
-		left: 0;
-		transition:
-			transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1),
-			box-shadow 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
-		transform: translate(
-			calc((var(--fan-count, 1) - 1 - var(--i, 0)) * -3px),
-			calc((var(--fan-count, 1) - 1 - var(--i, 0)) * 3px)
-		);
-	}
-
-	/* Sibling tiles only become interactive once the wrapper is fanned —
-	   otherwise they're stacked underneath and would steal pointer events
-	   from the top card. */
-	:host([state='stack-sibling']) {
-		pointer-events: none;
-	}
-
-	/* Fanned: every tile slides edge-to-edge along the wrapper's row */
-	:host([state='stack-top']:host-context([data-fanned])),
-	:host-context([data-fanned]):host([state='stack-top']) {
-		transform: translate(
-			calc((var(--fan-count, 1) - 1 - var(--i, 0)) * var(--schmancy-tile-w) * -1),
-			0
-		);
-		box-shadow: 0 3px 8px rgba(0, 0, 0, 0.06);
-	}
-
-	:host([state='stack-sibling']:host-context([data-fanned])),
-	:host-context([data-fanned]):host([state='stack-sibling']) {
-		pointer-events: auto;
-		transform: translate(
-			calc((var(--fan-count, 1) - 1 - var(--i, 0)) * var(--schmancy-tile-w) * -1),
-			0
-		);
-		box-shadow: 0 3px 8px rgba(0, 0, 0, 0.06);
-	}
-
-	:host-context([data-fanned]):host([state='stack-top']) .tile:hover,
-	:host-context([data-fanned]):host([state='stack-sibling']) .tile:hover {
-		border-color: var(--schmancy-sys-color-primary-default);
-		box-shadow: 0 6px 14px rgba(0, 0, 0, 0.1);
-	}
-
-	.glyph {
-		position: absolute;
-		top: 0;
-		left: 0;
-		right: 0;
-		height: 11px;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		font-size: 7.5px;
-		font-weight: 500;
-		letter-spacing: 0.12em;
-		line-height: 1;
-		z-index: 1;
-		font-variant-caps: all-petite-caps;
-	}
-
-	.tooltip {
-		position: absolute;
-		bottom: calc(100% + 6px);
-		left: 50%;
-		transform: translate(-50%, 2px);
-		font-size: 10px;
-		line-height: 1.2;
-		color: var(--schmancy-sys-color-surface-on);
-		background: var(--schmancy-sys-color-surface-containerLowest);
-		border: 1px solid var(--schmancy-sys-color-outline);
-		padding: 2px 6px;
-		border-radius: 3px;
-		white-space: nowrap;
-		opacity: 0;
-		pointer-events: none;
-		transition:
-			opacity 150ms ease-in-out,
-			transform 150ms ease-in-out;
-		z-index: 2;
-	}
-
-	.tile:hover .tooltip,
-	.tile:focus-visible .tooltip {
-		opacity: 1;
-		transform: translate(-50%, 0);
-	}
-
-	.caption {
-		position: absolute;
-		top: calc(100% + 6px);
-		left: 50%;
-		transform: translateX(-50%);
-		font-size: 11px;
-		line-height: 1.2;
-		font-weight: 500;
-		white-space: nowrap;
-		color: var(--schmancy-sys-color-surface-on);
-		font-variant-numeric: tabular-nums;
-	}
-
-	.stack-count {
-		position: absolute;
-		top: -5px;
-		right: -7px;
-		min-width: 14px;
-		height: 14px;
-		padding: 0 4px;
-		border-radius: 7px;
-		background: var(--schmancy-sys-color-primary-default);
-		color: var(--schmancy-sys-color-primary-on);
-		font-size: 9px;
-		font-weight: 500;
-		line-height: 14px;
-		text-align: center;
-		z-index: 10;
-		pointer-events: none;
-		transition: opacity 150ms ease-in-out;
-	}
-
-	:host-context([data-fanned]) .stack-count {
-		opacity: 0;
-	}
-`];
-	}
-	connectedCallback() {
-		if (super.connectedCallback(), this.index !== void 0 && this.style.setProperty("--i", String(this.index)), this.state !== "stack-top") return;
-		let e = this.parentElement;
-		e && a(e, "pointerover").pipe(o((e) => e.target?.closest("[data-stack-id]") ?? null), i(), c((t) => t === e ? s(e) : u(800).pipe(o(() => null))), i(), c((e) => e ? new r(() => (e.setAttribute("data-fanned", ""), () => e.removeAttribute("data-fanned"))) : n), l(this.disconnecting)).subscribe();
-	}
-	updated(e) {
-		super.updated(e), e.has("index") && this.index !== void 0 && this.style.setProperty("--i", String(this.index));
-	}
-	_ariaLabel() {
-		let e = [this.glyph];
-		return this.caption && e.push(this.caption), this.tooltip && e.push(this.tooltip), this.state === "empty" && e.push("empty"), e.join(" · ");
-	}
-	render() {
-		let e = this.state !== "empty", t = this._ariaLabel();
-		return m`
-			<button
-				type="button"
-				class="tile"
-				role=${e ? "button" : "presentation"}
-				tabindex=${e ? 0 : -1}
-				aria-label=${t}
-				?disabled=${!e}
-				@click=${this._onClick}
-			>
-				<span class="glyph">${this.glyph}</span>
-				${h(this.tooltip && e, () => m`<span class="tooltip">${this.tooltip}</span>`)}
-				${h(this.caption && this.state !== "stack-sibling", () => m`<span class="caption">${this.caption}</span>`)}
-				${h(this.state === "stack-top" && this.stackCount !== void 0 && this.stackCount > 1, () => m`<span class="stack-count">×${this.stackCount}</span>`)}
-			</button>
-		`;
-	}
-};
-t([f({
-	type: String,
-	reflect: !0
-})], g.prototype, "state", void 0), t([f({ type: String })], g.prototype, "glyph", void 0), t([f({
-	type: Number,
-	attribute: "stack-count"
-})], g.prototype, "stackCount", void 0), t([f({
-	type: Number,
-	reflect: !0
-})], g.prototype, "index", void 0), t([f({ type: String })], g.prototype, "tooltip", void 0), t([f({ type: String })], g.prototype, "caption", void 0), g = t([d("schmancy-timeline-tile")], g);
-export { g as SchmancyTimelineTile };

package/dist/timeline.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"timeline.js","names":[],"sources":["../src/timeline/timeline-tile.ts"],"sourcesContent":["/**\n * Timeline tile — one cell in a procurement-stage rail.\n *\n * Three render states (one component, four `state` values):\n *   - `empty`         dashed-border outline + glyph\n *   - `filled`        paper-card with glyph; hoverable / focusable / clickable\n *   - `stack-top`     paper-card on top of N siblings; carries the ×N badge\n *   - `stack-sibling` paper-card behind the top; revealed when the wrapper\n *                     is fanned\n *\n * Stack fan is coordinated by a `data-fanned` attribute on the parent\n * wrapper element. The `stack-top` tile owns the orchestration: a\n * `pointerover` pipe on the wrapper element with hover-intent (immediate\n * enter, 800ms leave debounce) toggles the attribute. Sibling tiles read\n * the attribute via the `:host-context([data-fanned])` selector. Native\n * `:hover` would drop the moment the cursor crosses the gap between\n * fanned siblings; the attribute survives that crossing because the\n * pointerover stream stays on the wrapper subtree.\n */\nimport { SchmancyElement } from '@mixins/index'\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { when } from 'lit/directives/when.js'\nimport {\n\tEMPTY,\n\tObservable,\n\tdistinctUntilChanged,\n\tfromEvent,\n\tmap,\n\tof,\n\tswitchMap,\n\ttakeUntil,\n\ttimer,\n} from 'rxjs'\n\nexport type TimelineTileState = 'empty' | 'filled' | 'stack-top' | 'stack-sibling'\n\nexport type TimelineTileClickEvent = CustomEvent<{\n\tglyph: string\n\tstate: TimelineTileState\n}>\n\n@customElement('schmancy-timeline-tile')\nexport class SchmancyTimelineTile extends SchmancyElement {\n\tstatic styles = [css`\n\t:host {\n\t\t--schmancy-tile-w: 32px;\n\t\t--schmancy-tile-h: 40px;\n\t\tdisplay: inline-block;\n\t\tposition: relative;\n\t\twidth: var(--schmancy-tile-w);\n\t\theight: var(--schmancy-tile-h);\n\t\tfont-size: 14px;\n\t\tline-height: 1.45;\n\t}\n\n\t/* Inner box that paints the cell. The host is a layout container only;\n\t   the box owns the border / background / hover transform so the host\n\t   stays a clean focus target. */\n\t.tile {\n\t\tposition: absolute;\n\t\tinset: 0;\n\t\tborder-radius: 2px;\n\t\toverflow: visible;\n\t\tappearance: none;\n\t\tpadding: 0;\n\t\tfont: inherit;\n\t\tcolor: inherit;\n\t\tbackground: transparent;\n\t\tz-index: 1;\n\t\ttransition:\n\t\t\ttransform 120ms ease-in-out,\n\t\t\tbox-shadow 120ms ease-in-out,\n\t\t\tborder-color 120ms ease-in-out;\n\t}\n\n\t/* Empty state */\n\t:host([state='empty']) .tile {\n\t\tborder: 1px dashed var(--schmancy-sys-color-outline);\n\t\tbackground: transparent;\n\t\tcursor: default;\n\t}\n\n\t:host([state='empty']) .glyph {\n\t\tcolor: var(--schmancy-sys-color-surface-onVariant);\n\t\topacity: 0.7;\n\t}\n\n\t/* Shared filled-state card styling (filled / stack-top / stack-sibling) */\n\t:host([state='filled']) .tile,\n\t:host([state='stack-top']) .tile,\n\t:host([state='stack-sibling']) .tile {\n\t\tborder: 1px solid var(--schmancy-sys-color-outline);\n\t\tbackground: var(--schmancy-sys-color-surface-containerLowest);\n\t\tcursor: pointer;\n\t\tbox-shadow: 0 1px 0 rgba(0, 0, 0, 0.02);\n\t}\n\n\t/* Paper-card line texture: five thin lines emulating ruled paper */\n\t:host([state='filled']) .tile::before,\n\t:host([state='stack-top']) .tile::before,\n\t:host([state='stack-sibling']) .tile::before {\n\t\tcontent: '';\n\t\tposition: absolute;\n\t\tleft: 4px;\n\t\tright: 4px;\n\t\ttop: 16px;\n\t\tbottom: 5px;\n\t\tbackground-image:\n\t\t\tlinear-gradient(var(--schmancy-sys-color-outline) 1px, transparent 1px),\n\t\t\tlinear-gradient(var(--schmancy-sys-color-outline) 1px, transparent 1px),\n\t\t\tlinear-gradient(var(--schmancy-sys-color-outline) 1px, transparent 1px),\n\t\t\tlinear-gradient(var(--schmancy-sys-color-outline) 1px, transparent 1px),\n\t\t\tlinear-gradient(var(--schmancy-sys-color-outline) 1px, transparent 1px);\n\t\tbackground-repeat: no-repeat;\n\t\tbackground-size:\n\t\t\t100% 1px,\n\t\t\t80% 1px,\n\t\t\t92% 1px,\n\t\t\t65% 1px,\n\t\t\t78% 1px;\n\t\tbackground-position:\n\t\t\t0 0,\n\t\t\t0 4px,\n\t\t\t0 8px,\n\t\t\t0 12px,\n\t\t\t0 16px;\n\t\topacity: 0.3;\n\t\tpointer-events: none;\n\t\tz-index: 0;\n\t}\n\n\t/* Tinted accent strip across the top edge */\n\t:host([state='filled']) .tile::after,\n\t:host([state='stack-top']) .tile::after,\n\t:host([state='stack-sibling']) .tile::after {\n\t\tcontent: '';\n\t\tposition: absolute;\n\t\tleft: 0;\n\t\tright: 0;\n\t\ttop: 0;\n\t\theight: 11px;\n\t\tbackground: color-mix(\n\t\t\tin oklch,\n\t\t\tvar(--schmancy-sys-color-primary-default) 10%,\n\t\t\ttransparent\n\t\t);\n\t\tborder-bottom: 1px solid\n\t\t\tcolor-mix(\n\t\t\t\tin oklch,\n\t\t\t\tvar(--schmancy-sys-color-primary-default) 25%,\n\t\t\t\tvar(--schmancy-sys-color-outline)\n\t\t\t);\n\t\tpointer-events: none;\n\t}\n\n\t:host([state='filled']) .glyph,\n\t:host([state='stack-top']) .glyph,\n\t:host([state='stack-sibling']) .glyph {\n\t\tcolor: var(--schmancy-sys-color-primary-onContainer);\n\t}\n\n\t/* Single-card hover: lift 1px + soft shadow */\n\t:host([state='filled']) .tile:hover {\n\t\tborder-color: var(--schmancy-sys-color-primary-default);\n\t\ttransform: translateY(-1px);\n\t\tbox-shadow: 0 3px 8px rgba(0, 0, 0, 0.06);\n\t}\n\n\t/* Focus ring in primary color */\n\t:host([state='filled']) .tile:focus-visible,\n\t:host([state='stack-top']) .tile:focus-visible,\n\t:host([state='stack-sibling']) .tile:focus-visible {\n\t\toutline: 2px solid var(--schmancy-sys-color-primary-default);\n\t\toutline-offset: 3px;\n\t}\n\n\t/* Stacked tiles position absolutely on the host's grid cell so the\n\t   wrapper's --fan-count / --i custom properties drive the offset. */\n\t:host([state='stack-top']),\n\t:host([state='stack-sibling']) {\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\tleft: 0;\n\t\ttransition:\n\t\t\ttransform 200ms cubic-bezier(0.2, 0.8, 0.2, 1),\n\t\t\tbox-shadow 200ms cubic-bezier(0.2, 0.8, 0.2, 1);\n\t\ttransform: translate(\n\t\t\tcalc((var(--fan-count, 1) - 1 - var(--i, 0)) * -3px),\n\t\t\tcalc((var(--fan-count, 1) - 1 - var(--i, 0)) * 3px)\n\t\t);\n\t}\n\n\t/* Sibling tiles only become interactive once the wrapper is fanned —\n\t   otherwise they're stacked underneath and would steal pointer events\n\t   from the top card. */\n\t:host([state='stack-sibling']) {\n\t\tpointer-events: none;\n\t}\n\n\t/* Fanned: every tile slides edge-to-edge along the wrapper's row */\n\t:host([state='stack-top']:host-context([data-fanned])),\n\t:host-context([data-fanned]):host([state='stack-top']) {\n\t\ttransform: translate(\n\t\t\tcalc((var(--fan-count, 1) - 1 - var(--i, 0)) * var(--schmancy-tile-w) * -1),\n\t\t\t0\n\t\t);\n\t\tbox-shadow: 0 3px 8px rgba(0, 0, 0, 0.06);\n\t}\n\n\t:host([state='stack-sibling']:host-context([data-fanned])),\n\t:host-context([data-fanned]):host([state='stack-sibling']) {\n\t\tpointer-events: auto;\n\t\ttransform: translate(\n\t\t\tcalc((var(--fan-count, 1) - 1 - var(--i, 0)) * var(--schmancy-tile-w) * -1),\n\t\t\t0\n\t\t);\n\t\tbox-shadow: 0 3px 8px rgba(0, 0, 0, 0.06);\n\t}\n\n\t:host-context([data-fanned]):host([state='stack-top']) .tile:hover,\n\t:host-context([data-fanned]):host([state='stack-sibling']) .tile:hover {\n\t\tborder-color: var(--schmancy-sys-color-primary-default);\n\t\tbox-shadow: 0 6px 14px rgba(0, 0, 0, 0.1);\n\t}\n\n\t.glyph {\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\tleft: 0;\n\t\tright: 0;\n\t\theight: 11px;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\tfont-size: 7.5px;\n\t\tfont-weight: 500;\n\t\tletter-spacing: 0.12em;\n\t\tline-height: 1;\n\t\tz-index: 1;\n\t\tfont-variant-caps: all-petite-caps;\n\t}\n\n\t.tooltip {\n\t\tposition: absolute;\n\t\tbottom: calc(100% + 6px);\n\t\tleft: 50%;\n\t\ttransform: translate(-50%, 2px);\n\t\tfont-size: 10px;\n\t\tline-height: 1.2;\n\t\tcolor: var(--schmancy-sys-color-surface-on);\n\t\tbackground: var(--schmancy-sys-color-surface-containerLowest);\n\t\tborder: 1px solid var(--schmancy-sys-color-outline);\n\t\tpadding: 2px 6px;\n\t\tborder-radius: 3px;\n\t\twhite-space: nowrap;\n\t\topacity: 0;\n\t\tpointer-events: none;\n\t\ttransition:\n\t\t\topacity 150ms ease-in-out,\n\t\t\ttransform 150ms ease-in-out;\n\t\tz-index: 2;\n\t}\n\n\t.tile:hover .tooltip,\n\t.tile:focus-visible .tooltip {\n\t\topacity: 1;\n\t\ttransform: translate(-50%, 0);\n\t}\n\n\t.caption {\n\t\tposition: absolute;\n\t\ttop: calc(100% + 6px);\n\t\tleft: 50%;\n\t\ttransform: translateX(-50%);\n\t\tfont-size: 11px;\n\t\tline-height: 1.2;\n\t\tfont-weight: 500;\n\t\twhite-space: nowrap;\n\t\tcolor: var(--schmancy-sys-color-surface-on);\n\t\tfont-variant-numeric: tabular-nums;\n\t}\n\n\t.stack-count {\n\t\tposition: absolute;\n\t\ttop: -5px;\n\t\tright: -7px;\n\t\tmin-width: 14px;\n\t\theight: 14px;\n\t\tpadding: 0 4px;\n\t\tborder-radius: 7px;\n\t\tbackground: var(--schmancy-sys-color-primary-default);\n\t\tcolor: var(--schmancy-sys-color-primary-on);\n\t\tfont-size: 9px;\n\t\tfont-weight: 500;\n\t\tline-height: 14px;\n\t\ttext-align: center;\n\t\tz-index: 10;\n\t\tpointer-events: none;\n\t\ttransition: opacity 150ms ease-in-out;\n\t}\n\n\t:host-context([data-fanned]) .stack-count {\n\t\topacity: 0;\n\t}\n`]\n\n\t@property({ type: String, reflect: true }) state: TimelineTileState = 'empty'\n\n\t@property({ type: String }) glyph = ''\n\n\t@property({ type: Number, attribute: 'stack-count' }) stackCount?: number\n\n\t@property({ type: Number, reflect: true }) index?: number\n\n\t@property({ type: String }) tooltip?: string\n\n\t@property({ type: String }) caption?: string\n\n\toverride connectedCallback(): void {\n\t\tsuper.connectedCallback()\n\n\t\t// Mirror `index` onto the host's `--i` custom property so the\n\t\t// fan-offset transforms don't depend on the consumer setting both\n\t\t// the prop and an inline style.\n\t\tif (this.index !== undefined) {\n\t\t\tthis.style.setProperty('--i', String(this.index))\n\t\t}\n\n\t\t// Stack-top owns the fan orchestration. The pointerover stream lives\n\t\t// on the parent wrapper (the element holding all sibling tiles); a\n\t\t// hover-intent pipe drives the `data-fanned` attribute on that\n\t\t// wrapper. Enter is immediate (`of(wrapper)`); leave waits 800ms\n\t\t// (`timer(800)`) so the cursor can cross the gap between fanned\n\t\t// cards without collapsing the stack. The inner Observable's\n\t\t// subscription lifetime IS the fanned state — subscribe sets the\n\t\t// attribute, teardown removes it.\n\t\tif (this.state !== 'stack-top') return\n\t\tconst wrapper = this.parentElement\n\t\tif (!wrapper) return\n\n\t\tfromEvent<PointerEvent>(wrapper, 'pointerover')\n\t\t\t.pipe(\n\t\t\t\tmap(\n\t\t\t\t\t(e) =>\n\t\t\t\t\t\t(e.target as HTMLElement | null)?.closest<HTMLElement>(\n\t\t\t\t\t\t\t'[data-stack-id]',\n\t\t\t\t\t\t) ?? null,\n\t\t\t\t),\n\t\t\t\tdistinctUntilChanged(),\n\t\t\t\tswitchMap((target) =>\n\t\t\t\t\ttarget === wrapper ? of(wrapper) : timer(800).pipe(map(() => null)),\n\t\t\t\t),\n\t\t\t\tdistinctUntilChanged(),\n\t\t\t\tswitchMap((target) =>\n\t\t\t\t\ttarget\n\t\t\t\t\t\t? new Observable<never>(() => {\n\t\t\t\t\t\t\t\ttarget.setAttribute('data-fanned', '')\n\t\t\t\t\t\t\t\treturn () => target.removeAttribute('data-fanned')\n\t\t\t\t\t\t\t})\n\t\t\t\t\t\t: EMPTY,\n\t\t\t\t),\n\t\t\t\ttakeUntil(this.disconnecting),\n\t\t\t)\n\t\t\t.subscribe()\n\t}\n\n\tprotected override updated(changed: Map<string, unknown>): void {\n\t\tsuper.updated(changed)\n\t\tif (changed.has('index') && this.index !== undefined) {\n\t\t\tthis.style.setProperty('--i', String(this.index))\n\t\t}\n\t}\n\n\tprivate _onClick = (): void => {\n\t\tif (this.state === 'empty') return\n\t\tthis.dispatchEvent(\n\t\t\tnew CustomEvent<TimelineTileClickEvent['detail']>('tile-click', {\n\t\t\t\tdetail: { glyph: this.glyph, state: this.state },\n\t\t\t\tbubbles: true,\n\t\t\t\tcomposed: true,\n\t\t\t}),\n\t\t)\n\t}\n\n\tprivate _ariaLabel(): string {\n\t\tconst parts = [this.glyph]\n\t\tif (this.caption) parts.push(this.caption)\n\t\tif (this.tooltip) parts.push(this.tooltip)\n\t\tif (this.state === 'empty') parts.push('empty')\n\t\treturn parts.join(' · ')\n\t}\n\n\tprotected override render(): unknown {\n\t\tconst isInteractive = this.state !== 'empty'\n\t\tconst ariaLabel = this._ariaLabel()\n\t\treturn html`\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\tclass=\"tile\"\n\t\t\t\trole=${isInteractive ? 'button' : 'presentation'}\n\t\t\t\ttabindex=${isInteractive ? 0 : -1}\n\t\t\t\taria-label=${ariaLabel}\n\t\t\t\t?disabled=${!isInteractive}\n\t\t\t\t@click=${this._onClick}\n\t\t\t>\n\t\t\t\t<span class=\"glyph\">${this.glyph}</span>\n\t\t\t\t${when(\n\t\t\t\t\tthis.tooltip && isInteractive,\n\t\t\t\t\t() => html`<span class=\"tooltip\">${this.tooltip}</span>`,\n\t\t\t\t)}\n\t\t\t\t${when(\n\t\t\t\t\tthis.caption && this.state !== 'stack-sibling',\n\t\t\t\t\t() => html`<span class=\"caption\">${this.caption}</span>`,\n\t\t\t\t)}\n\t\t\t\t${when(\n\t\t\t\t\tthis.state === 'stack-top' &&\n\t\t\t\t\t\tthis.stackCount !== undefined &&\n\t\t\t\t\t\tthis.stackCount > 1,\n\t\t\t\t\t() => html`<span class=\"stack-count\">×${this.stackCount}</span>`,\n\t\t\t\t)}\n\t\t\t</button>\n\t\t`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-timeline-tile': SchmancyTimelineTile\n\t}\n}\n"],"mappings":"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"}