@oddsquad/vite-plugin-lit 0.2.2 → 0.3.0

package/lib/runtime/timeline/render.js

@@ -3,8 +3,8 @@
  * Copyright 2026 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-import { idOf, sourceOf } from './identity.js';
-import { now } from './clock.js';
+import {idOf, sourceOf} from './identity.js';
+import {now} from './clock.js';
 /**
  * Builds the element-identity `meta` for a render event from the render
  * `host` (the LitElement whose `render()` produced these debug events).
@@ -13,83 +13,79 @@ import { now } from './clock.js';
  * (e.g. a bare lit-html `render()` call not driven by a LitElement).
  */
 const hostMeta = (host) => {
-    if (host === null || typeof host !== 'object')
-        return undefined;
-    return {
-        elementId: idOf(host),
-        tagName: host.localName ?? 'unknown',
-        source: sourceOf(host),
-    };
+  if (host === null || typeof host !== 'object') return undefined;
+  return {
+    elementId: idOf(host),
+    tagName: host.localName ?? 'unknown',
+    source: sourceOf(host),
+  };
 };
 let removeListener = null;
 const onLitDebug = (e, emit, recording, layerEnabled) => {
-    if (!recording() || !layerEnabled())
-        return;
-    const detail = e.detail;
-    if (!detail?.kind)
-        return;
-    const time = now();
-    const { kind, id } = detail;
-    switch (kind) {
-        case 'begin render': {
-            const meta = hostMeta(detail.options?.host);
-            emit({
-                layerId: 'lit-render',
-                time,
-                groupId: id,
-                title: 'render:start',
-                subtitle: meta?.tagName,
-                data: { kind, id },
-                meta,
-            });
-            break;
-        }
-        case 'end render': {
-            const meta = hostMeta(detail.options?.host);
-            emit({
-                layerId: 'lit-render',
-                time,
-                groupId: id,
-                title: 'render:end',
-                subtitle: meta?.tagName,
-                data: { kind, id },
-                meta,
-            });
-            break;
-        }
-        // `template prep` fires once per *unique* template, the first time it's
-        // compiled — low volume, useful as a "new template" marker.
-        case 'template prep':
-            emit({
-                layerId: 'lit-render',
-                time,
-                title: kind,
-                data: { kind, id },
-            });
-            break;
-        // `template updating` / `template instantiated` / `…and updated` fire once
-        // per template-bound ChildPart on *every* render — extremely high volume
-        // (a ticking clock or animation floods the layer). The begin/end render
-        // pair above already captures each render as a grouped duration, so these
-        // add noise without signal. Skip them; re-expose behind a "verbose" toggle
-        // if per-part detail is ever needed. Same rationale for commit * / set part.
-        default:
-            break;
+  if (!recording() || !layerEnabled()) return;
+  const detail = e.detail;
+  if (!detail?.kind) return;
+  const time = now();
+  const {kind, id} = detail;
+  switch (kind) {
+    case 'begin render': {
+      const meta = hostMeta(detail.options?.host);
+      emit({
+        layerId: 'lit-render',
+        time,
+        groupId: id,
+        title: 'render:start',
+        subtitle: meta?.tagName,
+        data: {kind, id},
+        meta,
+      });
+      break;
     }
+    case 'end render': {
+      const meta = hostMeta(detail.options?.host);
+      emit({
+        layerId: 'lit-render',
+        time,
+        groupId: id,
+        title: 'render:end',
+        subtitle: meta?.tagName,
+        data: {kind, id},
+        meta,
+      });
+      break;
+    }
+    // `template prep` fires once per *unique* template, the first time it's
+    // compiled — low volume, useful as a "new template" marker.
+    case 'template prep':
+      emit({
+        layerId: 'lit-render',
+        time,
+        title: kind,
+        data: {kind, id},
+      });
+      break;
+    // `template updating` / `template instantiated` / `…and updated` fire once
+    // per template-bound ChildPart on *every* render — extremely high volume
+    // (a ticking clock or animation floods the layer). The begin/end render
+    // pair above already captures each render as a grouped duration, so these
+    // add noise without signal. Skip them; re-expose behind a "verbose" toggle
+    // if per-part detail is ever needed. Same rationale for commit * / set part.
+    default:
+      break;
+  }
 };
 /**
  * Install the lit-debug render layer.
  * Idempotent — calling again when already installed is a no-op.
  */
 export const installRenderLayer = (emit, recording, layerEnabled) => {
-    if (removeListener !== null)
-        return;
-    // The listener is cheap and always attached; the per-render cost lives in the
-    // `emitLitDebugLogEvents` flag, which the caller toggles via
-    // `setRenderDebugEnabled` only while actively capturing.
-    const handler = (e) => onLitDebug(e, emit, recording, layerEnabled);
-    window.addEventListener('lit-debug', handler);
-    removeListener = () => window.removeEventListener('lit-debug', handler);
+  if (removeListener !== null) return;
+  // The listener is cheap and always attached; the per-render cost lives in the
+  // `emitLitDebugLogEvents` flag, which the caller toggles via
+  // `setRenderDebugEnabled` only while actively capturing.
+  const handler = (e) => onLitDebug(e, emit, recording, layerEnabled);
+  window.addEventListener('lit-debug', handler);
+  removeListener = () => window.removeEventListener('lit-debug', handler);
 };
 /**
  * Toggle Lit's debug event system. Enabling makes lit-html dispatch a
@@ -97,13 +93,12 @@ export const installRenderLayer = (emit, recording, layerEnabled) => {
  * keeps it off unless the render layer is actively recording.
  */
 export const setRenderDebugEnabled = (enabled) => {
-    globalThis.emitLitDebugLogEvents =
-        enabled;
+  globalThis.emitLitDebugLogEvents = enabled;
 };
 /** Remove the listener and clear the Lit debug flag. */
 export const uninstallRenderLayer = () => {
-    removeListener?.();
-    removeListener = null;
-    setRenderDebugEnabled(false);
+  removeListener?.();
+  removeListener = null;
+  setRenderDebugEnabled(false);
 };
-//# sourceMappingURL=render.js.map
+//# sourceMappingURL=render.js.map

package/lib/runtime/timeline/render.js.map

@@ -1 +1 @@
-{"version":3,"file":"render.js","sourceRoot":"","sources":["../../../../../packages/labs/vite-plugin-lit/src/lib/runtime/timeline/render.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */\n\n/**\n * lit-render timeline layer — listens to the built-in lit-debug CustomEvents\n * instead of patching prototypes, so it's zero-cost when the Lit debug flag\n * is off and perfectly accurate for the render layer.\n *\n * `globalThis.emitLitDebugLogEvents = true` gates the events, and lit-html\n * dispatches a CustomEvent per render whenever it's set — a real per-render\n * cost. So the caller drives the flag via {@link setRenderDebugEnabled} from\n * `recording × layer-enabled` rather than leaving it on for the whole session.\n * The events are tagged `*Unstable` in the Lit source; we tolerate missing\n * `kind` values gracefully.\n *\n * begin render / end render share a numeric `id` → we use it as groupId so\n * the panel can show a duration bar for each render call.\n */\n\nimport type {TimelineEvent} from '../../../types/timeline.js';\nimport {idOf, sourceOf} from './identity.js';\nimport {now} from './clock.js';\n\ntype EmitFn = (event: TimelineEvent) => void;\ntype RecordingFn = () => boolean;\ntype LayerEnabledFn = () => boolean;\n\n/** Minimal shape of the lit-debug event detail we care about. */\ninterface LitDebugDetail {\n  kind: string;\n  id?: number;\n  template?: unknown;\n  instance?: unknown;\n  /** Render options passed to lit-html's `render()`; `host` is the element. */\n  options?: {host?: unknown};\n}\n\n/**\n * Builds the element-identity `meta` for a render event from the render\n * `host` (the LitElement whose `render()` produced these debug events).\n * Uses the same id/source maps as the lifecycle layer so an element keeps one\n * stable id across both layers. Returns undefined for host-less renders\n * (e.g. a bare lit-html `render()` call not driven by a LitElement).\n */\nconst hostMeta = (\n  host: unknown\n): NonNullable<TimelineEvent['meta']> | undefined => {\n  if (host === null || typeof host !== 'object') return undefined;\n  return {\n    elementId: idOf(host),\n    tagName: (host as Element).localName ?? 'unknown',\n    source: sourceOf(host),\n  };\n};\n\ntype LitDebugEvent = CustomEvent<LitDebugDetail>;\n\nlet removeListener: (() => void) | null = null;\n\nconst onLitDebug = (\n  e: Event,\n  emit: EmitFn,\n  recording: RecordingFn,\n  layerEnabled: LayerEnabledFn\n): void => {\n  if (!recording() || !layerEnabled()) return;\n\n  const detail = (e as LitDebugEvent).detail;\n  if (!detail?.kind) return;\n\n  const time = now();\n  const {kind, id} = detail;\n\n  switch (kind) {\n    case 'begin render': {\n      const meta = hostMeta(detail.options?.host);\n      emit({\n        layerId: 'lit-render',\n        time,\n        groupId: id,\n        title: 'render:start',\n        subtitle: meta?.tagName,\n        data: {kind, id},\n        meta,\n      });\n      break;\n    }\n\n    case 'end render': {\n      const meta = hostMeta(detail.options?.host);\n      emit({\n        layerId: 'lit-render',\n        time,\n        groupId: id,\n        title: 'render:end',\n        subtitle: meta?.tagName,\n        data: {kind, id},\n        meta,\n      });\n      break;\n    }\n\n    // `template prep` fires once per *unique* template, the first time it's\n    // compiled — low volume, useful as a \"new template\" marker.\n    case 'template prep':\n      emit({\n        layerId: 'lit-render',\n        time,\n        title: kind,\n        data: {kind, id},\n      });\n      break;\n\n    // `template updating` / `template instantiated` / `…and updated` fire once\n    // per template-bound ChildPart on *every* render — extremely high volume\n    // (a ticking clock or animation floods the layer). The begin/end render\n    // pair above already captures each render as a grouped duration, so these\n    // add noise without signal. Skip them; re-expose behind a \"verbose\" toggle\n    // if per-part detail is ever needed. Same rationale for commit * / set part.\n    default:\n      break;\n  }\n};\n\n/**\n * Install the lit-debug render layer.\n * Idempotent — calling again when already installed is a no-op.\n */\nexport const installRenderLayer = (\n  emit: EmitFn,\n  recording: RecordingFn,\n  layerEnabled: LayerEnabledFn\n): void => {\n  if (removeListener !== null) return;\n\n  // The listener is cheap and always attached; the per-render cost lives in the\n  // `emitLitDebugLogEvents` flag, which the caller toggles via\n  // `setRenderDebugEnabled` only while actively capturing.\n  const handler = (e: Event) => onLitDebug(e, emit, recording, layerEnabled);\n  window.addEventListener('lit-debug', handler);\n  removeListener = () => window.removeEventListener('lit-debug', handler);\n};\n\n/**\n * Toggle Lit's debug event system. Enabling makes lit-html dispatch a\n * CustomEvent on every render (dev-only; no-op in prod builds), so the caller\n * keeps it off unless the render layer is actively recording.\n */\nexport const setRenderDebugEnabled = (enabled: boolean): void => {\n  (globalThis as {emitLitDebugLogEvents?: boolean}).emitLitDebugLogEvents =\n    enabled;\n};\n\n/** Remove the listener and clear the Lit debug flag. */\nexport const uninstallRenderLayer = (): void => {\n  removeListener?.();\n  removeListener = null;\n  setRenderDebugEnabled(false);\n};\n"]}
+{"version":3,"file":"render.js","sourceRoot":"","sources":["../../../src/lib/runtime/timeline/render.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */\n\n/**\n * lit-render timeline layer — listens to the built-in lit-debug CustomEvents\n * instead of patching prototypes, so it's zero-cost when the Lit debug flag\n * is off and perfectly accurate for the render layer.\n *\n * `globalThis.emitLitDebugLogEvents = true` gates the events, and lit-html\n * dispatches a CustomEvent per render whenever it's set — a real per-render\n * cost. So the caller drives the flag via {@link setRenderDebugEnabled} from\n * `recording × layer-enabled` rather than leaving it on for the whole session.\n * The events are tagged `*Unstable` in the Lit source; we tolerate missing\n * `kind` values gracefully.\n *\n * begin render / end render share a numeric `id` → we use it as groupId so\n * the panel can show a duration bar for each render call.\n */\n\nimport type {TimelineEvent} from '../../../types/timeline.js';\nimport {idOf, sourceOf} from './identity.js';\nimport {now} from './clock.js';\n\ntype EmitFn = (event: TimelineEvent) => void;\ntype RecordingFn = () => boolean;\ntype LayerEnabledFn = () => boolean;\n\n/** Minimal shape of the lit-debug event detail we care about. */\ninterface LitDebugDetail {\n  kind: string;\n  id?: number;\n  template?: unknown;\n  instance?: unknown;\n  /** Render options passed to lit-html's `render()`; `host` is the element. */\n  options?: {host?: unknown};\n}\n\n/**\n * Builds the element-identity `meta` for a render event from the render\n * `host` (the LitElement whose `render()` produced these debug events).\n * Uses the same id/source maps as the lifecycle layer so an element keeps one\n * stable id across both layers. Returns undefined for host-less renders\n * (e.g. a bare lit-html `render()` call not driven by a LitElement).\n */\nconst hostMeta = (\n  host: unknown\n): NonNullable<TimelineEvent['meta']> | undefined => {\n  if (host === null || typeof host !== 'object') return undefined;\n  return {\n    elementId: idOf(host),\n    tagName: (host as Element).localName ?? 'unknown',\n    source: sourceOf(host),\n  };\n};\n\ntype LitDebugEvent = CustomEvent<LitDebugDetail>;\n\nlet removeListener: (() => void) | null = null;\n\nconst onLitDebug = (\n  e: Event,\n  emit: EmitFn,\n  recording: RecordingFn,\n  layerEnabled: LayerEnabledFn\n): void => {\n  if (!recording() || !layerEnabled()) return;\n\n  const detail = (e as LitDebugEvent).detail;\n  if (!detail?.kind) return;\n\n  const time = now();\n  const {kind, id} = detail;\n\n  switch (kind) {\n    case 'begin render': {\n      const meta = hostMeta(detail.options?.host);\n      emit({\n        layerId: 'lit-render',\n        time,\n        groupId: id,\n        title: 'render:start',\n        subtitle: meta?.tagName,\n        data: {kind, id},\n        meta,\n      });\n      break;\n    }\n\n    case 'end render': {\n      const meta = hostMeta(detail.options?.host);\n      emit({\n        layerId: 'lit-render',\n        time,\n        groupId: id,\n        title: 'render:end',\n        subtitle: meta?.tagName,\n        data: {kind, id},\n        meta,\n      });\n      break;\n    }\n\n    // `template prep` fires once per *unique* template, the first time it's\n    // compiled — low volume, useful as a \"new template\" marker.\n    case 'template prep':\n      emit({\n        layerId: 'lit-render',\n        time,\n        title: kind,\n        data: {kind, id},\n      });\n      break;\n\n    // `template updating` / `template instantiated` / `…and updated` fire once\n    // per template-bound ChildPart on *every* render — extremely high volume\n    // (a ticking clock or animation floods the layer). The begin/end render\n    // pair above already captures each render as a grouped duration, so these\n    // add noise without signal. Skip them; re-expose behind a \"verbose\" toggle\n    // if per-part detail is ever needed. Same rationale for commit * / set part.\n    default:\n      break;\n  }\n};\n\n/**\n * Install the lit-debug render layer.\n * Idempotent — calling again when already installed is a no-op.\n */\nexport const installRenderLayer = (\n  emit: EmitFn,\n  recording: RecordingFn,\n  layerEnabled: LayerEnabledFn\n): void => {\n  if (removeListener !== null) return;\n\n  // The listener is cheap and always attached; the per-render cost lives in the\n  // `emitLitDebugLogEvents` flag, which the caller toggles via\n  // `setRenderDebugEnabled` only while actively capturing.\n  const handler = (e: Event) => onLitDebug(e, emit, recording, layerEnabled);\n  window.addEventListener('lit-debug', handler);\n  removeListener = () => window.removeEventListener('lit-debug', handler);\n};\n\n/**\n * Toggle Lit's debug event system. Enabling makes lit-html dispatch a\n * CustomEvent on every render (dev-only; no-op in prod builds), so the caller\n * keeps it off unless the render layer is actively recording.\n */\nexport const setRenderDebugEnabled = (enabled: boolean): void => {\n  (globalThis as {emitLitDebugLogEvents?: boolean}).emitLitDebugLogEvents =\n    enabled;\n};\n\n/** Remove the listener and clear the Lit debug flag. */\nexport const uninstallRenderLayer = (): void => {\n  removeListener?.();\n  removeListener = null;\n  setRenderDebugEnabled(false);\n};\n"]}

package/lib/runtime/timeline/transport.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"transport.d.ts","sourceRoot":"","sources":["../../../../../packages/labs/vite-plugin-lit/src/lib/runtime/timeline/transport.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH;;;;;;;;;;;;;GAaG;AAEH,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,4BAA4B,CAAC;AAE9D,KAAK,SAAS,GAAG;IACf,IAAI,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CAC9C,CAAC;AAmBF;;;;GAIG;AACH,eAAO,MAAM,YAAY,GAAI,KAAK,SAAS,KAAG,IAe7C,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,oBAAoB,GAAI,IAAI,MAAM,IAAI,KAAG,IAMrD,CAAC;AAaF;;;;GAIG;AACH,eAAO,MAAM,IAAI,GAAI,OAAO,aAAa,KAAG,IAc3C,CAAC"}
+{"version":3,"file":"transport.d.ts","sourceRoot":"","sources":["../../../src/lib/runtime/timeline/transport.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH;;;;;;;;;;;;;GAaG;AAEH,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,4BAA4B,CAAC;AAE9D,KAAK,SAAS,GAAG;IACf,IAAI,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CAC9C,CAAC;AAmBF;;;;GAIG;AACH,eAAO,MAAM,YAAY,QAAS,SAAS,KAAG,IAe7C,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,oBAAoB,OAAQ,MAAM,IAAI,KAAG,IAMrD,CAAC;AAaF;;;;GAIG;AACH,eAAO,MAAM,IAAI,UAAW,aAAa,KAAG,IAc3C,CAAC"}

package/lib/runtime/timeline/transport.js

@@ -23,45 +23,41 @@ const pendingCallbacks = [];
  * Flushes any queued events and fires pending one-shot callbacks.
  */
 export const setHotClient = (hot) => {
-    hotClient = hot;
-    // Drain any events that arrived before the client was wired.
-    if (queue.length > 0 && !flushScheduled) {
-        flushScheduled = true;
-        queueMicrotask(flush);
-    }
-    // Fire one-shot callbacks (e.g. addTimelineLayer announcements).
-    for (const cb of pendingCallbacks.splice(0)) {
-        try {
-            cb();
-        }
-        catch {
-            // ignore
-        }
+  hotClient = hot;
+  // Drain any events that arrived before the client was wired.
+  if (queue.length > 0 && !flushScheduled) {
+    flushScheduled = true;
+    queueMicrotask(flush);
+  }
+  // Fire one-shot callbacks (e.g. addTimelineLayer announcements).
+  for (const cb of pendingCallbacks.splice(0)) {
+    try {
+      cb();
+    } catch {
+      // ignore
     }
+  }
 };
 /**
  * Register a callback to be invoked once the HMR client is available.
  * If the client is already set the callback is fired on the next microtask.
  */
 export const setHotClientCallback = (cb) => {
-    if (hotClient !== null) {
-        queueMicrotask(cb);
-    }
-    else {
-        pendingCallbacks.push(cb);
-    }
+  if (hotClient !== null) {
+    queueMicrotask(cb);
+  } else {
+    pendingCallbacks.push(cb);
+  }
 };
 const flush = () => {
-    flushScheduled = false;
-    if (queue.length === 0 || hotClient === null)
-        return;
-    const batch = queue.splice(0);
-    try {
-        hotClient.send('lit:timeline:push-event', { events: batch });
-    }
-    catch {
-        // HMR channel may be temporarily unavailable; events are dropped.
-    }
+  flushScheduled = false;
+  if (queue.length === 0 || hotClient === null) return;
+  const batch = queue.splice(0);
+  try {
+    hotClient.send('lit:timeline:push-event', {events: batch});
+  } catch {
+    // HMR channel may be temporarily unavailable; events are dropped.
+  }
 };
 /**
  * Enqueue a timeline event for forwarding to the Vite server.
@@ -69,18 +65,18 @@ const flush = () => {
  * doesn't send dozens of individual messages.
  */
 export const emit = (event) => {
-    queue.push(event);
-    if (hotClient === null) {
-        // No consumer yet: bound the buffer instead of scheduling a flush that
-        // would only no-op. `setHotClient` drains the retained tail on connect.
-        if (queue.length > MAX_PENDING) {
-            queue.splice(0, queue.length - MAX_PENDING);
-        }
-        return;
-    }
-    if (!flushScheduled) {
-        flushScheduled = true;
-        queueMicrotask(flush);
+  queue.push(event);
+  if (hotClient === null) {
+    // No consumer yet: bound the buffer instead of scheduling a flush that
+    // would only no-op. `setHotClient` drains the retained tail on connect.
+    if (queue.length > MAX_PENDING) {
+      queue.splice(0, queue.length - MAX_PENDING);
     }
+    return;
+  }
+  if (!flushScheduled) {
+    flushScheduled = true;
+    queueMicrotask(flush);
+  }
 };
-//# sourceMappingURL=transport.js.map
+//# sourceMappingURL=transport.js.map

package/lib/runtime/timeline/transport.js.map

@@ -1 +1 @@
-{"version":3,"file":"transport.js","sourceRoot":"","sources":["../../../../../packages/labs/vite-plugin-lit/src/lib/runtime/timeline/transport.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAuBH,MAAM,KAAK,GAAoB,EAAE,CAAC;AAClC,IAAI,cAAc,GAAG,KAAK,CAAC;AAC3B,IAAI,SAAS,GAAqB,IAAI,CAAC;AAEvC;;;;;;GAMG;AACH,MAAM,WAAW,GAAG,IAAI,CAAC;AAEzB,kFAAkF;AAClF,oEAAoE;AACpE,MAAM,gBAAgB,GAAsB,EAAE,CAAC;AAE/C;;;;GAIG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,GAAc,EAAQ,EAAE;IACnD,SAAS,GAAG,GAAG,CAAC;IAChB,6DAA6D;IAC7D,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,cAAc,EAAE,CAAC;QACxC,cAAc,GAAG,IAAI,CAAC;QACtB,cAAc,CAAC,KAAK,CAAC,CAAC;IACxB,CAAC;IACD,iEAAiE;IACjE,KAAK,MAAM,EAAE,IAAI,gBAAgB,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC;QAC5C,IAAI,CAAC;YACH,EAAE,EAAE,CAAC;QACP,CAAC;QAAC,MAAM,CAAC;YACP,SAAS;QACX,CAAC;IACH,CAAC;AACH,CAAC,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,EAAc,EAAQ,EAAE;IAC3D,IAAI,SAAS,KAAK,IAAI,EAAE,CAAC;QACvB,cAAc,CAAC,EAAE,CAAC,CAAC;IACrB,CAAC;SAAM,CAAC;QACN,gBAAgB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;IAC5B,CAAC;AACH,CAAC,CAAC;AAEF,MAAM,KAAK,GAAG,GAAS,EAAE;IACvB,cAAc,GAAG,KAAK,CAAC;IACvB,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,IAAI,SAAS,KAAK,IAAI;QAAE,OAAO;IACrD,MAAM,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;IAC9B,IAAI,CAAC;QACH,SAAS,CAAC,IAAI,CAAC,yBAAyB,EAAE,EAAC,MAAM,EAAE,KAAK,EAAC,CAAC,CAAC;IAC7D,CAAC;IAAC,MAAM,CAAC;QACP,kEAAkE;IACpE,CAAC;AACH,CAAC,CAAC;AAEF;;;;GAIG;AACH,MAAM,CAAC,MAAM,IAAI,GAAG,CAAC,KAAoB,EAAQ,EAAE;IACjD,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAClB,IAAI,SAAS,KAAK,IAAI,EAAE,CAAC;QACvB,uEAAuE;QACvE,wEAAwE;QACxE,IAAI,KAAK,CAAC,MAAM,GAAG,WAAW,EAAE,CAAC;YAC/B,KAAK,CAAC,MAAM,CAAC,CAAC,EAAE,KAAK,CAAC,MAAM,GAAG,WAAW,CAAC,CAAC;QAC9C,CAAC;QACD,OAAO;IACT,CAAC;IACD,IAAI,CAAC,cAAc,EAAE,CAAC;QACpB,cAAc,GAAG,IAAI,CAAC;QACtB,cAAc,CAAC,KAAK,CAAC,CAAC;IACxB,CAAC;AACH,CAAC,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */\n\n/**\n * Buffered transport for timeline events.\n *\n * Phase 0/1: forwards events over Vite's HMR WebSocket channel\n * (`import.meta.hot.send`). This avoids the need for a separate devframe\n * RPC connection in early phases and works with any Vite dev server.\n *\n * Phase 2 migration: replace `sendViaHmr` with `sendViaRpc` when the\n * devframe RPC client is available (injected by the panel's clientScript).\n *\n * Batching: we coalesce events with `queueMicrotask` so a burst of\n * commit/set-part events from a single render doesn't hammer the channel\n * with one message per event.\n */\n\nimport type {TimelineEvent} from '../../../types/timeline.js';\n\ntype HotClient = {\n  send: (event: string, data: unknown) => void;\n};\n\nconst queue: TimelineEvent[] = [];\nlet flushScheduled = false;\nlet hotClient: HotClient | null = null;\n\n/**\n * Cap on events retained while no hot client is connected. Without a client\n * `flush()` cannot drain the queue, so an uncapped buffer would grow for the\n * whole session (in production, or before `install.ts` wires the client).\n * We keep only the most recent events; the retained tail flushes if a client\n * later connects.\n */\nconst MAX_PENDING = 1000;\n\n// Callbacks registered before the hot client was available (e.g. addTimelineLayer\n// called at module init time before install.ts has set the client).\nconst pendingCallbacks: Array<() => void> = [];\n\n/**\n * Register the HMR hot client.\n * Called by install.ts after import.meta.hot check.\n * Flushes any queued events and fires pending one-shot callbacks.\n */\nexport const setHotClient = (hot: HotClient): void => {\n  hotClient = hot;\n  // Drain any events that arrived before the client was wired.\n  if (queue.length > 0 && !flushScheduled) {\n    flushScheduled = true;\n    queueMicrotask(flush);\n  }\n  // Fire one-shot callbacks (e.g. addTimelineLayer announcements).\n  for (const cb of pendingCallbacks.splice(0)) {\n    try {\n      cb();\n    } catch {\n      // ignore\n    }\n  }\n};\n\n/**\n * Register a callback to be invoked once the HMR client is available.\n * If the client is already set the callback is fired on the next microtask.\n */\nexport const setHotClientCallback = (cb: () => void): void => {\n  if (hotClient !== null) {\n    queueMicrotask(cb);\n  } else {\n    pendingCallbacks.push(cb);\n  }\n};\n\nconst flush = (): void => {\n  flushScheduled = false;\n  if (queue.length === 0 || hotClient === null) return;\n  const batch = queue.splice(0);\n  try {\n    hotClient.send('lit:timeline:push-event', {events: batch});\n  } catch {\n    // HMR channel may be temporarily unavailable; events are dropped.\n  }\n};\n\n/**\n * Enqueue a timeline event for forwarding to the Vite server.\n * Batches via microtask so a single synchronous render burst\n * doesn't send dozens of individual messages.\n */\nexport const emit = (event: TimelineEvent): void => {\n  queue.push(event);\n  if (hotClient === null) {\n    // No consumer yet: bound the buffer instead of scheduling a flush that\n    // would only no-op. `setHotClient` drains the retained tail on connect.\n    if (queue.length > MAX_PENDING) {\n      queue.splice(0, queue.length - MAX_PENDING);\n    }\n    return;\n  }\n  if (!flushScheduled) {\n    flushScheduled = true;\n    queueMicrotask(flush);\n  }\n};\n"]}
+{"version":3,"file":"transport.js","sourceRoot":"","sources":["../../../src/lib/runtime/timeline/transport.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAuBH,MAAM,KAAK,GAAoB,EAAE,CAAC;AAClC,IAAI,cAAc,GAAG,KAAK,CAAC;AAC3B,IAAI,SAAS,GAAqB,IAAI,CAAC;AAEvC;;;;;;GAMG;AACH,MAAM,WAAW,GAAG,IAAI,CAAC;AAEzB,kFAAkF;AAClF,oEAAoE;AACpE,MAAM,gBAAgB,GAAsB,EAAE,CAAC;AAE/C;;;;GAIG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,GAAc,EAAQ,EAAE;IACnD,SAAS,GAAG,GAAG,CAAC;IAChB,6DAA6D;IAC7D,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,cAAc,EAAE,CAAC;QACxC,cAAc,GAAG,IAAI,CAAC;QACtB,cAAc,CAAC,KAAK,CAAC,CAAC;IACxB,CAAC;IACD,iEAAiE;IACjE,KAAK,MAAM,EAAE,IAAI,gBAAgB,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC;QAC5C,IAAI,CAAC;YACH,EAAE,EAAE,CAAC;QACP,CAAC;QAAC,MAAM,CAAC;YACP,SAAS;QACX,CAAC;IACH,CAAC;AACH,CAAC,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,EAAc,EAAQ,EAAE;IAC3D,IAAI,SAAS,KAAK,IAAI,EAAE,CAAC;QACvB,cAAc,CAAC,EAAE,CAAC,CAAC;IACrB,CAAC;SAAM,CAAC;QACN,gBAAgB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;IAC5B,CAAC;AACH,CAAC,CAAC;AAEF,MAAM,KAAK,GAAG,GAAS,EAAE;IACvB,cAAc,GAAG,KAAK,CAAC;IACvB,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,IAAI,SAAS,KAAK,IAAI;QAAE,OAAO;IACrD,MAAM,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;IAC9B,IAAI,CAAC;QACH,SAAS,CAAC,IAAI,CAAC,yBAAyB,EAAE,EAAC,MAAM,EAAE,KAAK,EAAC,CAAC,CAAC;IAC7D,CAAC;IAAC,MAAM,CAAC;QACP,kEAAkE;IACpE,CAAC;AACH,CAAC,CAAC;AAEF;;;;GAIG;AACH,MAAM,CAAC,MAAM,IAAI,GAAG,CAAC,KAAoB,EAAQ,EAAE;IACjD,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAClB,IAAI,SAAS,KAAK,IAAI,EAAE,CAAC;QACvB,uEAAuE;QACvE,wEAAwE;QACxE,IAAI,KAAK,CAAC,MAAM,GAAG,WAAW,EAAE,CAAC;YAC/B,KAAK,CAAC,MAAM,CAAC,CAAC,EAAE,KAAK,CAAC,MAAM,GAAG,WAAW,CAAC,CAAC;QAC9C,CAAC;QACD,OAAO;IACT,CAAC;IACD,IAAI,CAAC,cAAc,EAAE,CAAC;QACpB,cAAc,GAAG,IAAI,CAAC;QACtB,cAAc,CAAC,KAAK,CAAC,CAAC;IACxB,CAAC;AACH,CAAC,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */\n\n/**\n * Buffered transport for timeline events.\n *\n * Phase 0/1: forwards events over Vite's HMR WebSocket channel\n * (`import.meta.hot.send`). This avoids the need for a separate devframe\n * RPC connection in early phases and works with any Vite dev server.\n *\n * Phase 2 migration: replace `sendViaHmr` with `sendViaRpc` when the\n * devframe RPC client is available (injected by the panel's clientScript).\n *\n * Batching: we coalesce events with `queueMicrotask` so a burst of\n * commit/set-part events from a single render doesn't hammer the channel\n * with one message per event.\n */\n\nimport type {TimelineEvent} from '../../../types/timeline.js';\n\ntype HotClient = {\n  send: (event: string, data: unknown) => void;\n};\n\nconst queue: TimelineEvent[] = [];\nlet flushScheduled = false;\nlet hotClient: HotClient | null = null;\n\n/**\n * Cap on events retained while no hot client is connected. Without a client\n * `flush()` cannot drain the queue, so an uncapped buffer would grow for the\n * whole session (in production, or before `install.ts` wires the client).\n * We keep only the most recent events; the retained tail flushes if a client\n * later connects.\n */\nconst MAX_PENDING = 1000;\n\n// Callbacks registered before the hot client was available (e.g. addTimelineLayer\n// called at module init time before install.ts has set the client).\nconst pendingCallbacks: Array<() => void> = [];\n\n/**\n * Register the HMR hot client.\n * Called by install.ts after import.meta.hot check.\n * Flushes any queued events and fires pending one-shot callbacks.\n */\nexport const setHotClient = (hot: HotClient): void => {\n  hotClient = hot;\n  // Drain any events that arrived before the client was wired.\n  if (queue.length > 0 && !flushScheduled) {\n    flushScheduled = true;\n    queueMicrotask(flush);\n  }\n  // Fire one-shot callbacks (e.g. addTimelineLayer announcements).\n  for (const cb of pendingCallbacks.splice(0)) {\n    try {\n      cb();\n    } catch {\n      // ignore\n    }\n  }\n};\n\n/**\n * Register a callback to be invoked once the HMR client is available.\n * If the client is already set the callback is fired on the next microtask.\n */\nexport const setHotClientCallback = (cb: () => void): void => {\n  if (hotClient !== null) {\n    queueMicrotask(cb);\n  } else {\n    pendingCallbacks.push(cb);\n  }\n};\n\nconst flush = (): void => {\n  flushScheduled = false;\n  if (queue.length === 0 || hotClient === null) return;\n  const batch = queue.splice(0);\n  try {\n    hotClient.send('lit:timeline:push-event', {events: batch});\n  } catch {\n    // HMR channel may be temporarily unavailable; events are dropped.\n  }\n};\n\n/**\n * Enqueue a timeline event for forwarding to the Vite server.\n * Batches via microtask so a single synchronous render burst\n * doesn't send dozens of individual messages.\n */\nexport const emit = (event: TimelineEvent): void => {\n  queue.push(event);\n  if (hotClient === null) {\n    // No consumer yet: bound the buffer instead of scheduling a flush that\n    // would only no-op. `setHotClient` drains the retained tail on connect.\n    if (queue.length > MAX_PENDING) {\n      queue.splice(0, queue.length - MAX_PENDING);\n    }\n    return;\n  }\n  if (!flushScheduled) {\n    flushScheduled = true;\n    queueMicrotask(flush);\n  }\n};\n"]}

package/lib/segmented-tabs.d.ts

@@ -8,6 +8,8 @@ export interface TabItem {
     id: string;
     label: string;
     icon?: string;
+    /** Optional count pill trailing the label. Hidden when absent or zero. */
+    badge?: number;
 }
 export type SegTabSize = 'sm' | 'md';
 /**
@@ -23,7 +25,7 @@ export declare class SegmentedTabs extends LitElement {
     size: SegTabSize;
     constructor();
     private _select;
-    render(): import("lit-html").TemplateResult<1>;
+    render(): import("lit").TemplateResult<1>;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/lib/segmented-tabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"segmented-tabs.d.ts","sourceRoot":"","sources":["../../../packages/labs/vite-plugin-lit/src/lib/segmented-tabs.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,UAAU,EAAqB,MAAM,KAAK,CAAC;AAInD,MAAM,WAAW,OAAO;IACtB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,CAAC;AAErC;;;;;GAKG;AACH,qBACa,aAAc,SAAQ,UAAU;IAC3C,OAAgB,MAAM,4BAuDpB;IAE+B,KAAK,EAAE,OAAO,EAAE,CAAC;IAE9B,KAAK,EAAE,MAAM,CAAC;IAEd,IAAI,EAAE,UAAU,CAAC;;IASrC,OAAO,CAAC,OAAO;IAWN,MAAM;CAyBhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,aAAa,CAAC;KACjC;CACF"}
+{"version":3,"file":"segmented-tabs.d.ts","sourceRoot":"","sources":["../src/lib/segmented-tabs.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,UAAU,EAAqB,MAAM,KAAK,CAAC;AAInD,MAAM,WAAW,OAAO;IACtB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,0EAA0E;IAC1E,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,CAAC;AAErC;;;;;GAKG;AACH,qBACa,aAAc,SAAQ,UAAU;IAC3C,OAAgB,MAAM,4BAkEpB;IAE+B,KAAK,EAAE,OAAO,EAAE,CAAC;IAE9B,KAAK,EAAE,MAAM,CAAC;IAEd,IAAI,EAAE,UAAU,CAAC;IAErC,cAKC;IAED,OAAO,CAAC,OAAO;IAWN,MAAM,oCA+Bd;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,aAAa,CAAC;KACjC;CACF"}

package/lib/segmented-tabs.js

@@ -3,15 +3,28 @@
  * Copyright 2026 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { LitElement, html, css, nothing } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { tokens } from './tokens.js';
+var __decorate =
+  (this && this.__decorate) ||
+  function (decorators, target, key, desc) {
+    var c = arguments.length,
+      r =
+        c < 3
+          ? target
+          : desc === null
+            ? (desc = Object.getOwnPropertyDescriptor(target, key))
+            : desc,
+      d;
+    if (typeof Reflect === 'object' && typeof Reflect.decorate === 'function')
+      r = Reflect.decorate(decorators, target, key, desc);
+    else
+      for (var i = decorators.length - 1; i >= 0; i--)
+        if ((d = decorators[i]))
+          r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return (c > 3 && r && Object.defineProperty(target, key, r), r);
+  };
+import {LitElement, html, css, nothing} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
+import {tokens} from './tokens.js';
 /**
  * Inline segmented tab control. Renders a horizontal row of text-only tabs
  * with the active one highlighted by the accent color.
@@ -19,111 +32,127 @@ import { tokens } from './tokens.js';
  * Matches the SegmentedTabs spec from the Lit Design System devtools kit.
  */
 let SegmentedTabs = class SegmentedTabs extends LitElement {
-    static { this.styles = [
-        tokens,
-        css `
-      :host {
-        display: flex;
-        gap: var(--lit-devtools-space-1);
-        align-self: stretch;
-      }
-      button {
-        appearance: none;
-        display: flex;
-        align-items: center;
-        gap: var(--lit-devtools-space-2);
-        border: 0;
-        background: none;
-        font: inherit;
-        color: var(--lit-devtools-text-muted);
-        padding: 0 var(--lit-devtools-space-5);
-        cursor: pointer;
-        border-bottom: 2px solid transparent;
-        white-space: nowrap;
-        transition:
-          color var(--lit-devtools-dur-fast) var(--lit-devtools-ease-standard),
-          border-color var(--lit-devtools-dur-fast)
-            var(--lit-devtools-ease-standard),
-          background var(--lit-devtools-dur-fast)
-            var(--lit-devtools-ease-standard);
-      }
-      button:hover {
-        color: var(--lit-devtools-text);
-        background: var(--lit-devtools-surface-hover);
-      }
-      button.active {
-        color: var(--lit-devtools-accent);
-        border-bottom-color: var(--lit-devtools-accent);
-      }
-      button:focus-visible {
-        outline: 2px solid var(--lit-devtools-accent-ring);
-        outline-offset: -2px;
-      }
-      button svg {
-        width: 18px;
-        height: 18px;
-        flex-shrink: 0;
-      }
-      :host([size='sm']) button {
-        font-size: var(--lit-devtools-text-xs);
-        padding: 0 var(--lit-devtools-space-4);
-      }
-      :host([size='md']) button,
-      :host(:not([size])) button {
-        font-size: var(--lit-devtools-text-sm);
-        padding: 0 var(--lit-devtools-space-5);
-      }
-    `,
-    ]; }
-    constructor() {
-        super();
-        this.items = [];
-        this.value = '';
-        this.size = 'md';
-    }
-    _select(id) {
-        this.value = id;
-        this.dispatchEvent(new CustomEvent('change', {
-            detail: { value: id },
-            bubbles: true,
-            composed: true,
-        }));
-    }
-    render() {
-        return html `
-      ${this.items.map((item) => html `
+  static {
+    this.styles = [
+      tokens,
+      css`
+        :host {
+          display: flex;
+          gap: var(--lit-devtools-space-1);
+          align-self: stretch;
+        }
+        button {
+          appearance: none;
+          display: flex;
+          align-items: center;
+          gap: var(--lit-devtools-space-2);
+          border: 0;
+          background: none;
+          font: inherit;
+          color: var(--lit-devtools-text-muted);
+          padding: 0 var(--lit-devtools-space-5);
+          cursor: pointer;
+          border-bottom: 2px solid transparent;
+          white-space: nowrap;
+          transition:
+            color var(--lit-devtools-dur-fast) var(--lit-devtools-ease-standard),
+            border-color var(--lit-devtools-dur-fast)
+              var(--lit-devtools-ease-standard),
+            background var(--lit-devtools-dur-fast)
+              var(--lit-devtools-ease-standard);
+        }
+        button:hover {
+          color: var(--lit-devtools-text);
+          background: var(--lit-devtools-surface-hover);
+        }
+        button.active {
+          color: var(--lit-devtools-accent);
+          border-bottom-color: var(--lit-devtools-accent);
+        }
+        button:focus-visible {
+          outline: 2px solid var(--lit-devtools-accent-ring);
+          outline-offset: -2px;
+        }
+        button svg {
+          width: 18px;
+          height: 18px;
+          flex-shrink: 0;
+        }
+        .badge {
+          flex-shrink: 0;
+          min-width: 16px;
+          padding: 0 var(--lit-devtools-space-1);
+          border-radius: var(--lit-devtools-radius-pill);
+          background: var(--lit-devtools-error-soft);
+          color: var(--lit-devtools-error);
+          font-size: var(--lit-devtools-text-xs);
+          line-height: 16px;
+          text-align: center;
+        }
+        :host([size='sm']) button {
+          font-size: var(--lit-devtools-text-xs);
+          padding: 0 var(--lit-devtools-space-4);
+        }
+        :host([size='md']) button,
+        :host(:not([size])) button {
+          font-size: var(--lit-devtools-text-sm);
+          padding: 0 var(--lit-devtools-space-5);
+        }
+      `,
+    ];
+  }
+  constructor() {
+    super();
+    this.items = [];
+    this.value = '';
+    this.size = 'md';
+  }
+  _select(id) {
+    this.value = id;
+    this.dispatchEvent(
+      new CustomEvent('change', {
+        detail: {value: id},
+        bubbles: true,
+        composed: true,
+      })
+    );
+  }
+  render() {
+    return html`
+      ${this.items.map(
+        (item) => html`
           <button
             role="tab"
             aria-selected=${item.id === this.value}
             class=${item.id === this.value ? 'active' : ''}
             @click=${() => this._select(item.id)}
           >
-            ${item.icon
-            ? html `<svg
-                  viewBox="0 0 256 256"
-                  fill="currentColor"
-                  aria-hidden="true"
-                >
-                  <path d=${item.icon} />
-                </svg>`
-            : nothing}
+            ${
+              item.icon
+                ? html`<svg
+                    viewBox="0 0 256 256"
+                    fill="currentColor"
+                    aria-hidden="true"
+                  >
+                    <path d=${item.icon} />
+                  </svg>`
+                : nothing
+            }
             ${item.label}
+            ${
+              item.badge
+                ? html`<span class="badge">${item.badge}</span>`
+                : nothing
+            }
           </button>
-        `)}
+        `
+      )}
     `;
-    }
+  }
 };
-__decorate([
-    property({ type: Array })
-], SegmentedTabs.prototype, "items", void 0);
-__decorate([
-    property()
-], SegmentedTabs.prototype, "value", void 0);
-__decorate([
-    property()
-], SegmentedTabs.prototype, "size", void 0);
-SegmentedTabs = __decorate([
-    customElement('segmented-tabs')
-], SegmentedTabs);
-export { SegmentedTabs };
-//# sourceMappingURL=segmented-tabs.js.map
+__decorate([property({type: Array})], SegmentedTabs.prototype, 'items', void 0);
+__decorate([property()], SegmentedTabs.prototype, 'value', void 0);
+__decorate([property()], SegmentedTabs.prototype, 'size', void 0);
+SegmentedTabs = __decorate([customElement('segmented-tabs')], SegmentedTabs);
+export {SegmentedTabs};
+//# sourceMappingURL=segmented-tabs.js.map