lit · justinfagnani · May 22, 2025 · May 22, 2025 · May 22, 2025 · May 22, 2025
@@ -0,0 +1,15 @@
+---
+'@lit-labs/virtualizer': patch
+'@lit/reactive-element': patch
+'@lit-labs/observers': patch
+'@lit-labs/signals': patch
+'@lit-labs/motion': patch
+'lit-element': patch
+'lit-html': patch
+'@lit/context': patch
+'@lit/react': patch
+'@lit/task': patch
+'lit': patch
+---
+
+Update README
@@ -1,5 +1,17 @@
 # @lit/context
 
+Make data available to entire component subtrees with the context protocol
+implementation for Lit.
+
+[![Build Status](https://github.com/lit/lit/workflows/Tests/badge.svg)](https://github.com/lit/lit/actions?query=workflow%3ATests)
+[![Published on npm](https://img.shields.io/npm/v/@lit/context.svg?logo=npm)](https://www.npmjs.com/package/@lit/context)
+[![Join our Discord](https://img.shields.io/badge/discord-join%20chat-5865F2.svg?logo=discord&logoColor=fff)](https://lit.dev/discord/)
+[![Mentioned in Awesome Lit](https://awesome.re/mentioned-badge.svg)](https://github.com/web-padawan/awesome-lit)
+
+## Documentation
+
+Full documentation is available at [lit.dev/docs/data/context/](https://lit.dev/docs/data/context/).
+
 ## Overview
 
 This module defines an implementation of controllers and decorators for using the [Context Protocol](https://github.com/webcomponents-cg/community-protocols/blob/main/proposals/context.md) as defined by the Web Components Community Group.

@@ -2,6 +2,11 @@
 
 Lit directives for making things move.
 
+[![Build Status](https://github.com/lit/lit/workflows/Tests/badge.svg)](https://github.com/lit/lit/actions?query=workflow%3ATests)
+[![Published on npm](https://img.shields.io/npm/v/@lit-labs/motion.svg?logo=npm)](https://www.npmjs.com/package/@lit-labs/motion)
+[![Join our Discord](https://img.shields.io/badge/discord-join%20chat-5865F2.svg?logo=discord&logoColor=fff)](https://lit.dev/discord/)
+[![Mentioned in Awesome Lit](https://awesome.re/mentioned-badge.svg)](https://github.com/web-padawan/awesome-lit)
+
 > [!WARNING]
 >
 > This package is part of [Lit Labs](https://lit.dev/docs/libraries/labs/). It

@@ -1,7 +1,14 @@
 # @lit-labs/observers
 
-A set of reactive controllers that facilitate using the platform observer
-objects, including:
+Reactive controllers that make it easy to use the web platform observer
+classes with Lit.
+
+[![Build Status](https://github.com/lit/lit/workflows/Tests/badge.svg)](https://github.com/lit/lit/actions?query=workflow%3ATests)
+[![Published on npm](https://img.shields.io/npm/v/@lit-labs/observers.svg?logo=npm)](https://www.npmjs.com/package/@lit-labs/observers)
+[![Join our Discord](https://img.shields.io/badge/discord-join%20chat-5865F2.svg?logo=discord&logoColor=fff)](https://lit.dev/discord/)
+[![Mentioned in Awesome Lit](https://awesome.re/mentioned-badge.svg)](https://github.com/web-padawan/awesome-lit)
+
+`@lit-labs/observers` includes reactive controllers for:
 
 - MutationObserver
 - ResizeObserver
@@ -37,7 +44,64 @@ $ npm install @lit-labs/observers
 
 ## Usage
 
-Here's an example:
+### IntersectionController
+
+IntersectionController attaches a [IntersectionObserver](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) to the host and requests
+updates whenever the IntersectionObserver observes changes to the intersection
+state of the targets.
+
+The controller can also compute and store an arbitrary value each time changes
+occur.
+
+#### Import
+
+```ts
+import {IntersectionController} from '@lit-labs/observers/intersection-controller.js';
+```
+
+#### Constructor
+
+```ts
+constructor(
+  host: ReactiveControllerHost & Element,
+  {target, config, callback, skipInitial}: IntersectionControllerConfig<T>
+)
+```
+
+#### Config
+
+- `config: IntersectionObserverInit`: Configuration object for the
+  IntersectionObserver.
+- `target?: Element | null`: The element to observe. In addition to configuring
+  the target here, the `observe` method can be called to observe additional
+  targets. When not specified, the target defaults to the `host`. If set to
+  `null`, no target is automatically observed. Only the configured target will
+  be re-observed if the host connects again after unobserving via disconnection.
+- `callback?: IntersectionValueCallback<T>`: The callback used to process detected
+  changes into a value stored in the controller's `value` property.
+- `skipInitial?: boolean`: By default the `callback` is called without changes
+  when a target is observed. This is done to help manage initial state, but this
+  setup step can be skipped by setting this to true.
+
+#### Properties and Methods
+
+- `value?: T`: The result of processing the observer's changes via the
+  `callback` function passed to the config.
+- `observe(target: Element)`: Observe the target element. The controller's
+  `target` is automatically observed when the host connects.
+- `unobserve(target: Element)`: Unobserve the target element.
+- `disconnect()`: Disconnects the observer. This is done automatically when the
+  host disconnects.
+
+### MutationController
+
+MutationController attaches a [MutationObserver](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver) to the host and requests updates
+whenever the MutationObserver observes changes to the DOM.
+
+The controller can also compute and store an arbitrary value each time changes
+occur.
+
+#### Example
 
 ```ts
 import {MutationController} from '@lit-labs/observers/mutation-controller.js';
@@ -54,6 +118,132 @@ class MyElement extends LitElement {
 }
 ```
 
+#### Import
+
+```ts
+import {MutationController} from '@lit-labs/observers/mutation-controller.js';
+```
+
+#### Constructor
+
+```ts
+new MutationController<T = unknown>(
+  host: ReactiveControllerHost & Element,
+  {target, config, callback, skipInitial}: MutationControllerConfig<T>
+)
+```
+
+The type parameter `<T>` is the type of the `value` property and the return
+type of the `callback` option.
+
+#### MutationControllerConfig
+
+- `config: MutationObserverInit`: Configuration object for the MutationObserver.
+- `target?: Element | null`: The element to observe. In addition to configuring
+  the target here, the `observe` method can be called to observe additional
+  targets. When not specified, the target defaults to the `host`. If set to
+  `null`, no target is automatically observed. Only the configured target will
+  be re-observed if the host connects again after unobserving via disconnection.
+- `callback?: MutationValueCallback<T>`: The callback used to process detected
+  changes into a value stored in the controller's `value` property.
+- `skipInitial?: boolean`: By default the `callback` is called without changes
+  when a target is observed. This is done to help manage initial state, but this
+  setup step can be skipped by setting this to true.
+
+#### Properties and Methods
+
+- `value`: The result of processing the observer's changes via the `callback`
+  function passed to the config.
+- `observe(target: Element)`: Observe the target element. The controller's
+  `target` is automatically observed when the host connects.
+- `disconnect()`: Disconnects the observer. This is done automatically when the
+  host disconnects.
+
+### PerformanceController
+
+PerformanceController attaches a [PerformanceObserver](https://developer.mozilla.org/en-US/docs/Web/API/PerformanceObserver) to the host and requests
+updates whenever the PerformanceObserver observes receives new performance
+metrics.
+
+#### Import
+
+```ts
+import {PerformanceController} from '@lit-labs/observers/performance-controller.js';
+```
+
+#### Constructor
+
+```ts
+constructor(
+  host: ReactiveControllerHost,
+  {config, callback, skipInitial}: PerformanceControllerConfig<T>
+)
+```
+
+#### PerformanceControllerConfig
+
+- `config: PerformanceObserverInit`: Configuration object for the MutationObserver.
+- `callback?: PerformanceValueCallback<T>`: The callback used to process detected
+  changes into a value stored in the controller's `value` property.
+- `skipInitial?: boolean`: By default the `callback` is called without changes
+  when a target is observed. This is done to help manage initial state, but this
+  setup step can be skipped by setting this to true.
+
+#### Properties and Methods
+
+- `value`: The result of processing the observer's changes via the `callback`
+  function passed to the config.
+- `observe(target: Element)`: Observe the target element. The controller's
+  `target` is automatically observed when the host connects.
+- `disconnect()`: Disconnects the observer. This is done automatically when the
+  host disconnects.
+
+### ResizeController
+
+ResizeController attaches a [ResizeObserver](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) to the host and requests updates
+whenever the ResizeObserver detects size changes to its targets. The controller
+can also compute and store an arbitrary value each time changes occur.
+
+#### Import
+
+```ts
+import {ResizeController} from '@lit-labs/observers/resize-controller.js';
+```
+
+#### Constructor
+
+```ts
+constructor(
+  host: ReactiveControllerHost & Element,
+  {target, config, callback, skipInitial}: ResizeControllerConfig<T>
+)
+```
+
+#### ResizeControllerConfig
+
+- `config?: ResizeObserverOptions`: Configuration object for the
+  ResizeController.
+- `target?: Element | null`: The element to observe. In addition to configuring
+  the target here, the `observe` method can be called to observe additional
+  targets. When not specified, the target defaults to the `host`. If set to
+  `null`, no target is automatically observed. Only the configured target will
+  be re-observed if the host connects again after unobserving via disconnection.
+- `callback?: ResizeValueCallback<T>`: The callback used to process detected
+  changes into a value stored in the controller's `value` property.
+- `skipInitial?: boolean`: By default the `callback` is called without changes
+  when a target is observed. This is done to help manage initial state, but this
+  setup step can be skipped by setting this to true. }
+
+#### Properties and Methods
+
+- `value?: T`: The result of processing the observer's changes via the
+  `callback` function passed to the config.
+- `observe(target: Element)`: Observe the target element. The controller's
+  `target` is automatically observed when the host connects.
+- `unobserve(target: Element)`: Unobserve the target element.
+- `disconnect()`: Disconnects the observer. This is done automatically when the
+  host disconnects.
+
 ## Contributing
 
 Please see [CONTRIBUTING.md](../../../CONTRIBUTING.md).
@@ -2,6 +2,11 @@
 
 TC39 Signals Proposal integration for Lit.
 
+[![Build Status](https://github.com/lit/lit/workflows/Tests/badge.svg)](https://github.com/lit/lit/actions?query=workflow%3ATests)
+[![Published on npm](https://img.shields.io/npm/v/@lit-labs/signals.svg?logo=npm)](https://www.npmjs.com/package/@lit-labs/signals)
+[![Join our Discord](https://img.shields.io/badge/discord-join%20chat-5865F2.svg?logo=discord&logoColor=fff)](https://lit.dev/discord/)
+[![Mentioned in Awesome Lit](https://awesome.re/mentioned-badge.svg)](https://github.com/web-padawan/awesome-lit)
+
 > [!WARNING]
 >
 > This package is part of [Lit Labs](https://lit.dev/docs/libraries/labs/). It
@@ -15,6 +20,11 @@ TC39 Signals Proposal integration for Lit.
 >
 > RFC: https://github.com/lit/rfcs/blob/main/rfcs/0005-standard-signals.md
 
+## Documentation
+
+Full documentation is available at
+[lit.dev/docs/data/signals/](https://lit.dev/docs/data/signals/).
+
 ## Overview
 
 `@lit-labs/signals` integrates the [TC39 Signals

@@ -2,6 +2,11 @@
 
 `@lit-labs/virtualizer` provides viewport-based virtualization (including virtual scrolling) for [Lit](https://lit.dev).
 
+[![Build Status](https://github.com/lit/lit/workflows/Tests/badge.svg)](https://github.com/lit/lit/actions?query=workflow%3ATests)
+[![Published on npm](https://img.shields.io/npm/v/@lit-labs/virtualizer.svg?logo=npm)](https://www.npmjs.com/package/@lit-labs/virtualizer)
+[![Join our Discord](https://img.shields.io/badge/discord-join%20chat-5865F2.svg?logo=discord&logoColor=fff)](https://lit.dev/discord/)
+[![Mentioned in Awesome Lit](https://awesome.re/mentioned-badge.svg)](https://github.com/web-padawan/awesome-lit)
+
 > [!WARNING]
 >
 > This package is part of [Lit Labs](https://lit.dev/docs/libraries/labs/). It

@@ -1,4 +1,4 @@
-# LitElement 3.0
+# LitElement
 
 A simple base class for creating fast, lightweight web components.
 
@@ -7,27 +7,50 @@ A simple base class for creating fast, lightweight web components.
 [![Join our Discord](https://img.shields.io/badge/discord-join%20chat-5865F2.svg?logo=discord&logoColor=fff)](https://lit.dev/discord/)
 [![Mentioned in Awesome Lit](https://awesome.re/mentioned-badge.svg)](https://github.com/web-padawan/awesome-lit)
 
-LitElement is the base class that powers the [Lit](https://lit.dev) library for building fast web components. Most users should import `LitElement` from the [`lit`](https://www.npmjs.com/package/lit) package rather than installing and importing from the `lit-element` package directly.
+LitElement is the base class that powers the [Lit](https://lit.dev) library for building fast web components.
 
-## About this release
-
-This is a pre-release of Lit 3.0, the next major version of Lit.
-
-Lit 3.0 has very few breaking changes from Lit 2.0:
-
-- Drops support for IE11
-- Published as ES2021
-- Removes a couple of deprecated Lit 1.x APIs
-
-Lit 3.0 should require no changes to upgrade from Lit 2.0 for the vast majority of users. Once the full release is published, most apps and libraries will be able to extend their npm version ranges to include both 2.x and 3.x, like `"^2.7.0 || ^3.0.0"`.
-
-Lit 2.x and 3.0 are _interoperable_: templates, base classes, directives, decorators, etc., from one version of Lit will work with those from another.
-
-Please file any issues you find on our [issue tracker](https://github.com/lit/lit/issues).
+Most users should import `LitElement` from the [`lit`](https://www.npmjs.com/package/lit) package rather than installing and importing from the `lit-element` package directly.
 
 ## Documentation
 
-Full documentation is available at [lit.dev](https://lit.dev).
+Full documentation is available at [lit.dev/docs/components/overview/](https://lit.dev/docs/components/overview/).
+
+## Overview
+
+LitElement is a base class for custom elements that extends the Lit project's
+core ReactiveElement (from
+[`@lit/reactive-element'](https://www.npmjs.com/package/@lit/reactive-element)) base class with
+lit-html templating. ReactiveElement enhances HTMLElement with reactive
+properties, additional lifecycle callbacks, convenient inline CSS authoring, and
+a set of useful class decorators, while lit-html provides fast, declarative HTML
+templating.
+
+### Example
+
+```ts
+import {LitElement, html, css} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
+
+// Registers the element
+@customElement('my-element')
+export class MyElement extends LitElement {
+  // Styles are applied to the shadow root and scoped to this element
+  static styles = css`
+    span {
+      color: green;
+    }
+  `;
+
+  // Creates a reactive property that triggers rendering
+  @property()
+  mood = 'great';
+
+  // Render the component's DOM by returning a Lit template
+  render() {
+    return html`Web Components are <span>${this.mood}</span>!`;
+  }
+}
+```
 
 ## Contributing