igniteui-webcomponents 7.3.2 → 7.4.1

package/CHANGELOG.md

@@ -4,6 +4,91 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](http://keepachangelog.com/)
 and this project adheres to [Semantic Versioning](http://semver.org/).
 
+## [7.4.1] - 2026-09-25
+### Added
+- #### AI-Assisted Development
+  - New `igniteui-wc-grids` skill. It helps an agent pick the grid package, register the grid, apply one theme, inject the theme into a Shadow DOM, set the layout and set up sorting and filtering. [#2376](https://github.com/IgniteUI/igniteui-webcomponents/pull/2376)
+- #### Virtual scroll
+  - `keyFunction` property. It returns the key of an item, so an item keeps its element while it is in the rendered window, also when it moves in `data`. Without it, the index is the key. [#2401](https://github.com/IgniteUI/igniteui-webcomponents/pull/2401)
+
+### Changed
+- #### AI-Assisted Development
+  - All skills now declare the MIT license, and their descriptions state when to use them and when to use a different skill. [#2400](https://github.com/IgniteUI/igniteui-webcomponents/pull/2400)
+  - The `igniteui-wc-figma-to-app` skill now supports Figma files from any UI kit, not only the Indigo.Design UI Kits. Its guidance now agrees with the current Figma, theming and component APIs, and its steps are in separate reference files, so an agent loads less text. [#2400](https://github.com/IgniteUI/igniteui-webcomponents/pull/2400) [#2404](https://github.com/IgniteUI/igniteui-webcomponents/pull/2404)
+- #### Virtual scroll
+  - **Behavior change:** Item elements are now recycled. An item that stays in the rendered window keeps its element, and the elements of the items that leave show the items that enter. Before, each element showed the item at its window position, so each scroll updated every rendered item. DOM state that the item template does not bind, for example the state of a checkbox without a `checked` binding, stays with the element and shows on the item that enters. The `itemTemplate` documentation shows how to bind this state or get new DOM for each item. [#2401](https://github.com/IgniteUI/igniteui-webcomponents/pull/2401)
+  - The average measured item size now replaces `estimatedItemSize` for the items that are not measured yet, so the scrollbar follows the real content when the estimate is wrong. [#2401](https://github.com/IgniteUI/igniteui-webcomponents/pull/2401)
+
+### Fixed
+- #### Virtual scroll
+  - `scrollToIndex` with `block: 'nearest'` now aligns an item after the viewport to the end of the viewport, as native `scrollIntoView` does. Before, it aligned each item out of view to the start, so a scroll to the next item moved a full page. [#2401](https://github.com/IgniteUI/igniteui-webcomponents/pull/2401)
+- #### Checkbox, Switch, Radio
+  - A `<label>` element bound through `for`, or wrapping the component, now names the control and a click on it focuses and toggles the control, as for a native checkbox or radio. Before, the control had no accessible name and the click did nothing. [#2402](https://github.com/IgniteUI/igniteui-webcomponents/pull/2402)
+  - The host `aria-labelledby` now names the control. Before, the component copied the ID into its shadow root, where it did not resolve. [#2402](https://github.com/IgniteUI/igniteui-webcomponents/pull/2402)
+- #### Rating, Slider
+  - A `<label>` element bound through `for`, or wrapping the component, now names the control, and a click on it focuses the control. [#2402](https://github.com/IgniteUI/igniteui-webcomponents/pull/2402)
+  - The host `aria-labelledby` now names the control. The slider now also follows a change of the host `aria-label` after the first render. [#2402](https://github.com/IgniteUI/igniteui-webcomponents/pull/2402)
+  - The slider value tooltip is hidden from assistive technology, because `aria-valuetext` already carries the value. [#2402](https://github.com/IgniteUI/igniteui-webcomponents/pull/2402)
+- #### Color picker
+  - In `default` mode, an external `<label>` and the host `aria-labelledby` and `aria-label` now name the trigger button. Before, it was always "Open color picker". [#2402](https://github.com/IgniteUI/igniteui-webcomponents/pull/2402)
+  - In `input` mode, the text input no longer carries `aria-expanded`, which ARIA does not allow on a text input. The swatch button in the prefix still reflects the open state. [#2402](https://github.com/IgniteUI/igniteui-webcomponents/pull/2402)
+- #### File input
+  - A click on an external `<label>` now focuses the native input and opens the file picker, as for a native file input. Before, the focus went to the browse button. [#2402](https://github.com/IgniteUI/igniteui-webcomponents/pull/2402)
+- #### Combo
+  - The `label` property and an external `<label>` now name the input. Before, the selection status text ("No options selected") replaced them. [#2402](https://github.com/IgniteUI/igniteui-webcomponents/pull/2402)
+- #### Combo, Color picker, Date picker, Date range picker, Date time input, File input, Input, Mask input, Select, Textarea
+  - The host `aria-labelledby` and `aria-label` now name the native editor. All form associated components use one naming order: the host `aria-labelledby`, then the external `<label>` elements, then the own label, then the host `aria-label`. [#2402](https://github.com/IgniteUI/igniteui-webcomponents/pull/2402)
+  - A `<label>` element added after the first render now names the control from its first focus. Before, it did not name the control until the next render. [#2402](https://github.com/IgniteUI/igniteui-webcomponents/pull/2402)
+  - The helper text `aria-describedby` of the input editors now stays after a re-render. Before, a re-render removed it. [#2402](https://github.com/IgniteUI/igniteui-webcomponents/pull/2402)
+
+## [7.4.0] - 2026-09-23
+### Added
+- #### Breadcrumbs
+  - New `igc-breadcrumbs` and `igc-breadcrumb` components show a navigation trail. [#1881](https://github.com/IgniteUI/igniteui-webcomponents/pull/1881)
+    - `igc-breadcrumbs` has the `list` role. The `separator` attribute sets the icon between the items. The default is `tree_expand`. Put the component in a `<nav aria-label="...">` element, as the ARIA breadcrumb pattern requires.
+    - `igc-breadcrumb` has the `listitem` role. Put the item content, usually an anchor, in the default slot. The `prefix` and `suffix` slots add content before and after it. The `separator` slot replaces the icon of one item.
+    - `current` sets `aria-current="page"`. `disabled` sets `aria-disabled` and removes the slotted content from the tab sequence. Assistive technology does not read the separator.
+    - The `label` and `separator` CSS parts style the two containers.
+- #### Button group
+  - The single selection modes now use the radio group keyboard pattern. [#2385](https://github.com/IgniteUI/igniteui-webcomponents/pull/2385)
+    - The group is one tab stop.
+    - The arrow keys move the focus and the selection together. They skip disabled buttons and wrap at the two ends.
+    - `alignment="horizontal"` uses ArrowLeft and ArrowRight and follows the text direction. `alignment="vertical"` uses ArrowUp and ArrowDown.
+    - Before, each button was a tab stop and the arrow keys did nothing. The `radiogroup` role does not permit this.
+    - The `multiple` mode does not change. Each button stays a tab stop.
+- #### Combo, Color picker, Date picker, Date range picker, Dropdown, Select, Tooltip
+  - `scroll-strategy` attribute. It sets what the popup does when a container scrolls. [#2355](https://github.com/IgniteUI/igniteui-webcomponents/pull/2355)
+    - `hide` (default) hides the popup while its anchor is fully out of view.
+    - `scroll` keeps the popup visible and on its anchor.
+    - `close` closes the component on each scroll. A `sticky` tooltip also closes.
+    - The date pickers ignore the attribute in `dialog` mode.
+
+### Changed
+- #### Button group
+  - The `radiogroup` or `group` role and the disabled state are now on the `igc-button-group` host. Before, they were on an element in the shadow root. An `aria-label` or `aria-labelledby` on the host now names the group. [#2385](https://github.com/IgniteUI/igniteui-webcomponents/pull/2385)
+  - In the single selection modes, `alignment` sets the `aria-orientation` of the radio group.
+- #### Combo, Color picker, Date picker, Date range picker, Dropdown, Select, Tooltip
+  - **Behavior change:** The popup now hides while its anchor is fully scrolled out of view. Before, it stayed visible. Set `scroll-strategy="scroll"` to keep the previous behavior. [#2355](https://github.com/IgniteUI/igniteui-webcomponents/pull/2355)
+- #### Dropdown, Select, Tooltip
+  - The popup no longer moves along the viewport edge to stay in view. It only flips to the opposite side. [#2355](https://github.com/IgniteUI/igniteui-webcomponents/pull/2355)
+- #### Popover
+  - Popovers now use native CSS anchor positioning in browsers that support it (Chrome/Edge 133+, Firefox 147+, Safari 26+). Other browsers use `@floating-ui/dom` as before, and load it only when necessary. [#2355](https://github.com/IgniteUI/igniteui-webcomponents/pull/2355)
+
+### Fixed
+- #### Carousel
+  - The indicators now set `aria-label` as a content attribute and in `ElementInternals`. Before, only `ElementInternals` had it, and tools that do not read internals reported no tab name. [#2378](https://github.com/IgniteUI/igniteui-webcomponents/pull/2378)
+- #### Combo, Select
+  - A click on the input label opened the list and closed it again. The component emitted `igcOpening`, `igcClosing` and `igcClosed`, and stayed closed. [#2390](https://github.com/IgniteUI/igniteui-webcomponents/pull/2390)
+- #### Date picker
+  - In dropdown mode, a `label` that you set after the first render did not go to the native input. This occurred in all themes except Material. [#2378](https://github.com/IgniteUI/igniteui-webcomponents/pull/2378)
+  - The `container` CSS part is now exported. It was documented, but not exported. [#2398](https://github.com/IgniteUI/igniteui-webcomponents/pull/2398)
+- #### Date range picker
+  - The `ranges` CSS part is now exported. It was documented, but not exported. [#2398](https://github.com/IgniteUI/igniteui-webcomponents/pull/2398)
+- #### Dropdown
+  - The anchor now names the list through `ariaLabelledByElements`. Before, `aria-labelledby` pointed to the anchor slot, which tools cannot resolve. [#2378](https://github.com/IgniteUI/igniteui-webcomponents/pull/2378)
+- #### Input, Date time input, Date range input, File input, Mask input, Textarea
+  - A click on the label now emits one `click` event from the component. Before, it emitted two. A disabled component now emits none. [#2390](https://github.com/IgniteUI/igniteui-webcomponents/pull/2390)
+
 ## [7.3.2] - 2026-09-09
 ### Added
 - #### Library
@@ -1616,6 +1701,8 @@ Initial release of Ignite UI Web Components
 - Ripple component
 - Switch component
 
+[7.4.1]: https://github.com/IgniteUI/igniteui-webcomponents/compare/7.4.0...7.4.1
+[7.4.0]: https://github.com/IgniteUI/igniteui-webcomponents/compare/7.3.2...7.4.0
 [7.3.2]: https://github.com/IgniteUI/igniteui-webcomponents/compare/7.3.1...7.3.2
 [7.3.1]: https://github.com/IgniteUI/igniteui-webcomponents/compare/7.3.0...7.3.1
 [7.3.0]: https://github.com/IgniteUI/igniteui-webcomponents/compare/7.2.4...7.3.0

package/animations/easings.d.ts

@@ -1,31 +1,21 @@
-declare enum EaseIn {
-    Quad = "cubic-bezier(0.550, 0.085, 0.680, 0.530)",
-    Cubic = "cubic-bezier(0.550, 0.055, 0.675, 0.190)",
-    Quart = "cubic-bezier(0.895, 0.030, 0.685, 0.220)",
-    Quint = "cubic-bezier(0.755, 0.050, 0.855, 0.060)",
-    Sine = "cubic-bezier(0.470, 0.000, 0.745, 0.715)",
-    Expo = "cubic-bezier(0.950, 0.050, 0.795, 0.035)",
-    Circ = "cubic-bezier(0.600, 0.040, 0.980, 0.335)",
-    Back = "cubic-bezier(0.600, -0.280, 0.735, 0.045)"
-}
-declare enum EaseOut {
-    Quad = "cubic-bezier(0.250, 0.460, 0.450, 0.940)",
-    Cubic = "cubic-bezier(0.215, 0.610, 0.355, 1.000)",
-    Quart = "cubic-bezier(0.165, 0.840, 0.440, 1.000)",
-    Quint = "cubic-bezier(0.230, 1.000, 0.320, 1.000)",
-    Sine = "cubic-bezier(0.390, 0.575, 0.565, 1.000)",
-    Expo = "cubic-bezier(0.190, 1.000, 0.220, 1.000)",
-    Circ = "cubic-bezier(0.075, 0.820, 0.165, 1.000)",
-    Back = "cubic-bezier(0.175, 0.885, 0.320, 1.275)"
-}
-declare enum EaseInOut {
-    Quad = "cubic-bezier(0.455, 0.030, 0.515, 0.955)",
-    Cubic = "cubic-bezier(0.645, 0.045, 0.355, 1.000)",
-    Quart = "cubic-bezier(0.770, 0.000, 0.175, 1.000)",
-    Quint = "cubic-bezier(0.860, 0.000, 0.070, 1.000)",
-    Sine = "cubic-bezier(0.445, 0.050, 0.550, 0.950)",
-    Expo = "cubic-bezier(1.000, 0.000, 0.000, 1.000)",
-    Circ = "cubic-bezier(0.785, 0.135, 0.150, 0.860)",
-    Back = "cubic-bezier(0.680, -0.550, 0.265, 1.550)"
-}
-export { EaseIn, EaseInOut, EaseOut };
+declare const EaseOut: {
+    readonly Quad: "cubic-bezier(0.250, 0.460, 0.450, 0.940)";
+    readonly Cubic: "cubic-bezier(0.215, 0.610, 0.355, 1.000)";
+    readonly Quart: "cubic-bezier(0.165, 0.840, 0.440, 1.000)";
+    readonly Quint: "cubic-bezier(0.230, 1.000, 0.320, 1.000)";
+    readonly Sine: "cubic-bezier(0.390, 0.575, 0.565, 1.000)";
+    readonly Expo: "cubic-bezier(0.190, 1.000, 0.220, 1.000)";
+    readonly Circ: "cubic-bezier(0.075, 0.820, 0.165, 1.000)";
+    readonly Back: "cubic-bezier(0.175, 0.885, 0.320, 1.275)";
+};
+declare const EaseInOut: {
+    readonly Quad: "cubic-bezier(0.455, 0.030, 0.515, 0.955)";
+    readonly Cubic: "cubic-bezier(0.645, 0.045, 0.355, 1.000)";
+    readonly Quart: "cubic-bezier(0.770, 0.000, 0.175, 1.000)";
+    readonly Quint: "cubic-bezier(0.860, 0.000, 0.070, 1.000)";
+    readonly Sine: "cubic-bezier(0.445, 0.050, 0.550, 0.950)";
+    readonly Expo: "cubic-bezier(1.000, 0.000, 0.000, 1.000)";
+    readonly Circ: "cubic-bezier(0.785, 0.135, 0.150, 0.860)";
+    readonly Back: "cubic-bezier(0.680, -0.550, 0.265, 1.550)";
+};
+export { EaseInOut, EaseOut };

package/animations/easings.js

@@ -1,35 +1,22 @@
-var EaseIn;
-(function (EaseIn) {
-    EaseIn["Quad"] = "cubic-bezier(0.550, 0.085, 0.680, 0.530)";
-    EaseIn["Cubic"] = "cubic-bezier(0.550, 0.055, 0.675, 0.190)";
-    EaseIn["Quart"] = "cubic-bezier(0.895, 0.030, 0.685, 0.220)";
-    EaseIn["Quint"] = "cubic-bezier(0.755, 0.050, 0.855, 0.060)";
-    EaseIn["Sine"] = "cubic-bezier(0.470, 0.000, 0.745, 0.715)";
-    EaseIn["Expo"] = "cubic-bezier(0.950, 0.050, 0.795, 0.035)";
-    EaseIn["Circ"] = "cubic-bezier(0.600, 0.040, 0.980, 0.335)";
-    EaseIn["Back"] = "cubic-bezier(0.600, -0.280, 0.735, 0.045)";
-})(EaseIn || (EaseIn = {}));
-var EaseOut;
-(function (EaseOut) {
-    EaseOut["Quad"] = "cubic-bezier(0.250, 0.460, 0.450, 0.940)";
-    EaseOut["Cubic"] = "cubic-bezier(0.215, 0.610, 0.355, 1.000)";
-    EaseOut["Quart"] = "cubic-bezier(0.165, 0.840, 0.440, 1.000)";
-    EaseOut["Quint"] = "cubic-bezier(0.230, 1.000, 0.320, 1.000)";
-    EaseOut["Sine"] = "cubic-bezier(0.390, 0.575, 0.565, 1.000)";
-    EaseOut["Expo"] = "cubic-bezier(0.190, 1.000, 0.220, 1.000)";
-    EaseOut["Circ"] = "cubic-bezier(0.075, 0.820, 0.165, 1.000)";
-    EaseOut["Back"] = "cubic-bezier(0.175, 0.885, 0.320, 1.275)";
-})(EaseOut || (EaseOut = {}));
-var EaseInOut;
-(function (EaseInOut) {
-    EaseInOut["Quad"] = "cubic-bezier(0.455, 0.030, 0.515, 0.955)";
-    EaseInOut["Cubic"] = "cubic-bezier(0.645, 0.045, 0.355, 1.000)";
-    EaseInOut["Quart"] = "cubic-bezier(0.770, 0.000, 0.175, 1.000)";
-    EaseInOut["Quint"] = "cubic-bezier(0.860, 0.000, 0.070, 1.000)";
-    EaseInOut["Sine"] = "cubic-bezier(0.445, 0.050, 0.550, 0.950)";
-    EaseInOut["Expo"] = "cubic-bezier(1.000, 0.000, 0.000, 1.000)";
-    EaseInOut["Circ"] = "cubic-bezier(0.785, 0.135, 0.150, 0.860)";
-    EaseInOut["Back"] = "cubic-bezier(0.680, -0.550, 0.265, 1.550)";
-})(EaseInOut || (EaseInOut = {}));
-export { EaseIn, EaseInOut, EaseOut };
+const EaseOut = {
+    Quad: 'cubic-bezier(0.250, 0.460, 0.450, 0.940)',
+    Cubic: 'cubic-bezier(0.215, 0.610, 0.355, 1.000)',
+    Quart: 'cubic-bezier(0.165, 0.840, 0.440, 1.000)',
+    Quint: 'cubic-bezier(0.230, 1.000, 0.320, 1.000)',
+    Sine: 'cubic-bezier(0.390, 0.575, 0.565, 1.000)',
+    Expo: 'cubic-bezier(0.190, 1.000, 0.220, 1.000)',
+    Circ: 'cubic-bezier(0.075, 0.820, 0.165, 1.000)',
+    Back: 'cubic-bezier(0.175, 0.885, 0.320, 1.275)',
+};
+const EaseInOut = {
+    Quad: 'cubic-bezier(0.455, 0.030, 0.515, 0.955)',
+    Cubic: 'cubic-bezier(0.645, 0.045, 0.355, 1.000)',
+    Quart: 'cubic-bezier(0.770, 0.000, 0.175, 1.000)',
+    Quint: 'cubic-bezier(0.860, 0.000, 0.070, 1.000)',
+    Sine: 'cubic-bezier(0.445, 0.050, 0.550, 0.950)',
+    Expo: 'cubic-bezier(1.000, 0.000, 0.000, 1.000)',
+    Circ: 'cubic-bezier(0.785, 0.135, 0.150, 0.860)',
+    Back: 'cubic-bezier(0.680, -0.550, 0.265, 1.550)',
+};
+export { EaseInOut, EaseOut };
 //# sourceMappingURL=easings.js.map

package/animations/easings.js.map

@@ -1 +1 @@
-{"version":3,"file":"easings.js","sourceRoot":"","sources":["../../src/animations/easings.ts"],"names":[],"mappings":"AAAA,IAAK,MASJ;AATD,WAAK,MAAM;IACT,2DAAiD,CAAA;IACjD,4DAAkD,CAAA;IAClD,4DAAkD,CAAA;IAClD,4DAAkD,CAAA;IAClD,2DAAiD,CAAA;IACjD,2DAAiD,CAAA;IACjD,2DAAiD,CAAA;IACjD,4DAAkD,CAAA;AACpD,CAAC,EATI,MAAM,KAAN,MAAM,QASV;AAED,IAAK,OASJ;AATD,WAAK,OAAO;IACV,4DAAiD,CAAA;IACjD,6DAAkD,CAAA;IAClD,6DAAkD,CAAA;IAClD,6DAAkD,CAAA;IAClD,4DAAiD,CAAA;IACjD,4DAAiD,CAAA;IACjD,4DAAiD,CAAA;IACjD,4DAAiD,CAAA;AACnD,CAAC,EATI,OAAO,KAAP,OAAO,QASX;AAED,IAAK,SASJ;AATD,WAAK,SAAS;IACZ,8DAAiD,CAAA;IACjD,+DAAkD,CAAA;IAClD,+DAAkD,CAAA;IAClD,+DAAkD,CAAA;IAClD,8DAAiD,CAAA;IACjD,8DAAiD,CAAA;IACjD,8DAAiD,CAAA;IACjD,+DAAkD,CAAA;AACpD,CAAC,EATI,SAAS,KAAT,SAAS,QASb;AAED,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC","sourcesContent":["enum EaseIn {\n  Quad = 'cubic-bezier(0.550, 0.085, 0.680, 0.530)',\n  Cubic = 'cubic-bezier(0.550, 0.055, 0.675, 0.190)',\n  Quart = 'cubic-bezier(0.895, 0.030, 0.685, 0.220)',\n  Quint = 'cubic-bezier(0.755, 0.050, 0.855, 0.060)',\n  Sine = 'cubic-bezier(0.470, 0.000, 0.745, 0.715)',\n  Expo = 'cubic-bezier(0.950, 0.050, 0.795, 0.035)',\n  Circ = 'cubic-bezier(0.600, 0.040, 0.980, 0.335)',\n  Back = 'cubic-bezier(0.600, -0.280, 0.735, 0.045)',\n}\n\nenum EaseOut {\n  Quad = 'cubic-bezier(0.250, 0.460, 0.450, 0.940)',\n  Cubic = 'cubic-bezier(0.215, 0.610, 0.355, 1.000)',\n  Quart = 'cubic-bezier(0.165, 0.840, 0.440, 1.000)',\n  Quint = 'cubic-bezier(0.230, 1.000, 0.320, 1.000)',\n  Sine = 'cubic-bezier(0.390, 0.575, 0.565, 1.000)',\n  Expo = 'cubic-bezier(0.190, 1.000, 0.220, 1.000)',\n  Circ = 'cubic-bezier(0.075, 0.820, 0.165, 1.000)',\n  Back = 'cubic-bezier(0.175, 0.885, 0.320, 1.275)',\n}\n\nenum EaseInOut {\n  Quad = 'cubic-bezier(0.455, 0.030, 0.515, 0.955)',\n  Cubic = 'cubic-bezier(0.645, 0.045, 0.355, 1.000)',\n  Quart = 'cubic-bezier(0.770, 0.000, 0.175, 1.000)',\n  Quint = 'cubic-bezier(0.860, 0.000, 0.070, 1.000)',\n  Sine = 'cubic-bezier(0.445, 0.050, 0.550, 0.950)',\n  Expo = 'cubic-bezier(1.000, 0.000, 0.000, 1.000)',\n  Circ = 'cubic-bezier(0.785, 0.135, 0.150, 0.860)',\n  Back = 'cubic-bezier(0.680, -0.550, 0.265, 1.550)',\n}\n\nexport { EaseIn, EaseInOut, EaseOut };\n"]}
+{"version":3,"file":"easings.js","sourceRoot":"","sources":["../../src/animations/easings.ts"],"names":[],"mappings":"AAAA,MAAM,OAAO,GAAG;IACd,IAAI,EAAE,0CAA0C;IAChD,KAAK,EAAE,0CAA0C;IACjD,KAAK,EAAE,0CAA0C;IACjD,KAAK,EAAE,0CAA0C;IACjD,IAAI,EAAE,0CAA0C;IAChD,IAAI,EAAE,0CAA0C;IAChD,IAAI,EAAE,0CAA0C;IAChD,IAAI,EAAE,0CAA0C;CACxC,CAAC;AAEX,MAAM,SAAS,GAAG;IAChB,IAAI,EAAE,0CAA0C;IAChD,KAAK,EAAE,0CAA0C;IACjD,KAAK,EAAE,0CAA0C;IACjD,KAAK,EAAE,0CAA0C;IACjD,IAAI,EAAE,0CAA0C;IAChD,IAAI,EAAE,0CAA0C;IAChD,IAAI,EAAE,0CAA0C;IAChD,IAAI,EAAE,2CAA2C;CACzC,CAAC;AAEX,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC","sourcesContent":["const EaseOut = {\n  Quad: 'cubic-bezier(0.250, 0.460, 0.450, 0.940)',\n  Cubic: 'cubic-bezier(0.215, 0.610, 0.355, 1.000)',\n  Quart: 'cubic-bezier(0.165, 0.840, 0.440, 1.000)',\n  Quint: 'cubic-bezier(0.230, 1.000, 0.320, 1.000)',\n  Sine: 'cubic-bezier(0.390, 0.575, 0.565, 1.000)',\n  Expo: 'cubic-bezier(0.190, 1.000, 0.220, 1.000)',\n  Circ: 'cubic-bezier(0.075, 0.820, 0.165, 1.000)',\n  Back: 'cubic-bezier(0.175, 0.885, 0.320, 1.275)',\n} as const;\n\nconst EaseInOut = {\n  Quad: 'cubic-bezier(0.455, 0.030, 0.515, 0.955)',\n  Cubic: 'cubic-bezier(0.645, 0.045, 0.355, 1.000)',\n  Quart: 'cubic-bezier(0.770, 0.000, 0.175, 1.000)',\n  Quint: 'cubic-bezier(0.860, 0.000, 0.070, 1.000)',\n  Sine: 'cubic-bezier(0.445, 0.050, 0.550, 0.950)',\n  Expo: 'cubic-bezier(1.000, 0.000, 0.000, 1.000)',\n  Circ: 'cubic-bezier(0.785, 0.135, 0.150, 0.860)',\n  Back: 'cubic-bezier(0.680, -0.550, 0.265, 1.550)',\n} as const;\n\nexport { EaseInOut, EaseOut };\n"]}

package/animations/player.d.ts

@@ -1,4 +1,3 @@
-import type { ReactiveController, ReactiveControllerHost } from 'lit';
 import type { Ref } from 'lit/directives/ref.js';
 import type { AnimationReferenceMetadata } from './types.js';
 /**
@@ -6,25 +5,18 @@ import type { AnimationReferenceMetadata } from './types.js';
  */
 export declare function getPrefersReducedMotion(): boolean;
 /**
- * A ReactiveController for managing Web Animation API (WA-API) playback
- * on a host element or a specified target element.
- *
- * It provides methods to play, stop, and coordinate animations, including
- * support for 'height: auto' transitions and reduced motion preference.
+ * Manages Web Animation API (WA-API) playback on a host element or a specified target element,
+ * including support for 'height: auto' transitions and reduced motion preference.
+ * It uses no host lifecycle hooks, so it is not registered as a reactive controller.
  */
-declare class AnimationController implements ReactiveController {
+declare class AnimationController {
     private readonly _host;
     private readonly _ref?;
-    /**
-     * The actual HTMLElement target for the animations.
-     * Prioritizes a passed-in Ref value, then a direct HTMLElement, falling back to the host.
-     */
+    /** The passed-in element, else the resolved Ref value, else the host. */
     protected get _target(): HTMLElement;
-    constructor(host: ReactiveControllerHost & HTMLElement, ref?: Ref<HTMLElement> | HTMLElement);
+    constructor(host: HTMLElement, ref?: Ref<HTMLElement> | HTMLElement);
     /** Pre-processes keyframes, specifically resolving 'auto' height to the element's scrollHeight. */
     private _parseKeyframes;
-    /** @internal */
-    hostConnected(): void;
     /**
      * Plays a sequence of keyframes, first cancelling all existing animations on the target.
      *
@@ -41,9 +33,9 @@ declare class AnimationController implements ReactiveController {
     cancelAll(): void;
 }
 /**
- * Creates and attaches an animation player instance to the passed in `host` element.
+ * Creates an animation player for the passed in `host` element.
  * The player will run animations on the passed in `target`, or if `target` is undefined,
  * the host element itself.
  */
-export declare function addAnimationController(host: ReactiveControllerHost & HTMLElement, target?: Ref<HTMLElement> | HTMLElement): AnimationController;
+export declare function addAnimationController(host: HTMLElement, target?: Ref<HTMLElement> | HTMLElement): AnimationController;
 export type { AnimationController };

package/animations/player.js

@@ -1,8 +1,7 @@
 import { isElement } from '#internals/utils/dom.js';
 const LISTENER_OPTIONS = { once: true };
 export function getPrefersReducedMotion() {
-    return (globalThis?.matchMedia?.('(prefers-reduced-motion: reduce)').matches ??
-        false);
+    return (globalThis.matchMedia?.('(prefers-reduced-motion: reduce)').matches ?? false);
 }
 class AnimationController {
     get _target() {
@@ -14,7 +13,6 @@ class AnimationController {
     constructor(host, ref) {
         this._host = host;
         this._ref = ref;
-        this._host.addController(this);
     }
     _parseKeyframes(keyframes) {
         const target = this._target;
@@ -24,7 +22,6 @@ class AnimationController {
                 : frame;
         });
     }
-    hostConnected() { }
     async playExclusive(animation) {
         this.cancelAll();
         const event = await this.play(animation);
@@ -33,16 +30,16 @@ class AnimationController {
     async play(animation) {
         const { steps, options } = animation;
         const duration = getPrefersReducedMotion() ? 0 : (options?.duration ?? 0);
-        if (!Number.isFinite(duration)) {
+        if (!(Number.isFinite(duration) && Number.isFinite(options?.iterations ?? 1))) {
             throw new Error('Promise-based animations must be finite.');
         }
         return new Promise((resolve) => {
-            const animation = this._target.animate(this._parseKeyframes(steps), {
+            const player = this._target.animate(this._parseKeyframes(steps), {
                 ...options,
                 duration,
             });
-            animation.addEventListener('cancel', resolve, LISTENER_OPTIONS);
-            animation.addEventListener('finish', resolve, LISTENER_OPTIONS);
+            player.addEventListener('cancel', resolve, LISTENER_OPTIONS);
+            player.addEventListener('finish', resolve, LISTENER_OPTIONS);
         });
     }
     cancelAll() {

package/animations/player.js.map

@@ -1 +1 @@
-{"version":3,"file":"player.js","sourceRoot":"","sources":["../../src/animations/player.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAGpD,MAAM,gBAAgB,GAAG,EAAE,IAAI,EAAE,IAAI,EAAW,CAAC;AAKjD,MAAM,UAAU,uBAAuB;IACrC,OAAO,CACL,UAAU,EAAE,UAAU,EAAE,CAAC,kCAAkC,CAAC,CAAC,OAAO;QACpE,KAAK,CACN,CAAC;AACJ,CAAC;AASD,MAAM,mBAAmB;IAQvB,IAAc,OAAO;QACnB,IAAI,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC;YACzB,OAAO,IAAI,CAAC,IAAI,CAAC;QACnB,CAAC;QAED,OAAO,IAAI,CAAC,IAAI,EAAE,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC;IACxC,CAAC;IAED,YACE,IAA0C,EAC1C,GAAoC;QAEpC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;QAClB,IAAI,CAAC,IAAI,GAAG,GAAG,CAAC;QAChB,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;IACjC,CAAC;IAGO,eAAe,CAAC,SAAqB;QAC3C,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC;QAE5B,OAAO,SAAS,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE;YAC7B,OAAO,KAAK,CAAC,MAAM,KAAK,MAAM;gBAC5B,CAAC,CAAC,EAAE,GAAG,KAAK,EAAE,MAAM,EAAE,GAAG,MAAM,CAAC,YAAY,IAAI,EAAE;gBAClD,CAAC,CAAC,KAAK,CAAC;QACZ,CAAC,CAAC,CAAC;IACL,CAAC;IAGM,aAAa,KAAU,CAAC;IAQxB,KAAK,CAAC,aAAa,CACxB,SAAqC;QAErC,IAAI,CAAC,SAAS,EAAE,CAAC;QAEjB,MAAM,KAAK,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QACzC,OAAO,KAAK,CAAC,IAAI,KAAK,QAAQ,CAAC;IACjC,CAAC;IAMM,KAAK,CAAC,IAAI,CACf,SAAqC;QAErC,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,SAAS,CAAC;QACrC,MAAM,QAAQ,GAAG,uBAAuB,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,EAAE,QAAQ,IAAI,CAAC,CAAC,CAAC;QAE1E,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC;YAC/B,MAAM,IAAI,KAAK,CAAC,0CAA0C,CAAC,CAAC;QAC9D,CAAC;QAED,OAAO,IAAI,OAAO,CAAyB,CAAC,OAAO,EAAE,EAAE;YACrD,MAAM,SAAS,GAAG,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC,EAAE;gBAClE,GAAG,OAAO;gBACV,QAAQ;aACT,CAAC,CAAC;YAEH,SAAS,CAAC,gBAAgB,CAAC,QAAQ,EAAE,OAAO,EAAE,gBAAgB,CAAC,CAAC;YAChE,SAAS,CAAC,gBAAgB,CAAC,QAAQ,EAAE,OAAO,EAAE,gBAAgB,CAAC,CAAC;QAClE,CAAC,CAAC,CAAC;IACL,CAAC;IAGM,SAAS;QACd,KAAK,MAAM,SAAS,IAAI,IAAI,CAAC,OAAO,CAAC,aAAa,EAAE,EAAE,CAAC;YACrD,SAAS,CAAC,MAAM,EAAE,CAAC;QACrB,CAAC;IACH,CAAC;CACF;AAOD,MAAM,UAAU,sBAAsB,CACpC,IAA0C,EAC1C,MAAuC;IAEvC,OAAO,IAAI,mBAAmB,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC;AAC/C,CAAC","sourcesContent":["import type { ReactiveController, ReactiveControllerHost } from 'lit';\nimport type { Ref } from 'lit/directives/ref.js';\nimport { isElement } from '#internals/utils/dom.js';\nimport type { AnimationReferenceMetadata } from './types.js';\n\nconst LISTENER_OPTIONS = { once: true } as const;\n\n/**\n * Checks the user's preference for reduced motion.\n */\nexport function getPrefersReducedMotion(): boolean {\n  return (\n    globalThis?.matchMedia?.('(prefers-reduced-motion: reduce)').matches ??\n    false\n  );\n}\n\n/**\n * A ReactiveController for managing Web Animation API (WA-API) playback\n * on a host element or a specified target element.\n *\n * It provides methods to play, stop, and coordinate animations, including\n * support for 'height: auto' transitions and reduced motion preference.\n */\nclass AnimationController implements ReactiveController {\n  private readonly _host: ReactiveControllerHost & HTMLElement;\n  private readonly _ref?: Ref<HTMLElement> | HTMLElement;\n\n  /**\n   * The actual HTMLElement target for the animations.\n   * Prioritizes a passed-in Ref value, then a direct HTMLElement, falling back to the host.\n   */\n  protected get _target(): HTMLElement {\n    if (isElement(this._ref)) {\n      return this._ref;\n    }\n\n    return this._ref?.value ?? this._host;\n  }\n\n  constructor(\n    host: ReactiveControllerHost & HTMLElement,\n    ref?: Ref<HTMLElement> | HTMLElement\n  ) {\n    this._host = host;\n    this._ref = ref;\n    this._host.addController(this);\n  }\n\n  /** Pre-processes keyframes, specifically resolving 'auto' height to the element's scrollHeight. */\n  private _parseKeyframes(keyframes: Keyframe[]): Keyframe[] {\n    const target = this._target;\n\n    return keyframes.map((frame) => {\n      return frame.height === 'auto'\n        ? { ...frame, height: `${target.scrollHeight}px` }\n        : frame;\n    });\n  }\n\n  /** @internal */\n  public hostConnected(): void {}\n\n  /**\n   * Plays a sequence of keyframes, first cancelling all existing animations on the target.\n   *\n   * The cancellation must stay synchronous - awaiting before it would let an\n   * animation started earlier in the same tick escape and run to completion.\n   */\n  public async playExclusive(\n    animation: AnimationReferenceMetadata\n  ): Promise<boolean> {\n    this.cancelAll();\n\n    const event = await this.play(animation);\n    return event.type === 'finish';\n  }\n\n  /**\n   * Plays a sequence of keyframes using WA-API.\n   * Automatically sets duration to 0 if 'prefers-reduced-motion' is set.\n   */\n  public async play(\n    animation: AnimationReferenceMetadata\n  ): Promise<AnimationPlaybackEvent> {\n    const { steps, options } = animation;\n    const duration = getPrefersReducedMotion() ? 0 : (options?.duration ?? 0);\n\n    if (!Number.isFinite(duration)) {\n      throw new Error('Promise-based animations must be finite.');\n    }\n\n    return new Promise<AnimationPlaybackEvent>((resolve) => {\n      const animation = this._target.animate(this._parseKeyframes(steps), {\n        ...options,\n        duration,\n      });\n\n      animation.addEventListener('cancel', resolve, LISTENER_OPTIONS);\n      animation.addEventListener('finish', resolve, LISTENER_OPTIONS);\n    });\n  }\n\n  /** Cancels all active animations on the target element. */\n  public cancelAll(): void {\n    for (const animation of this._target.getAnimations()) {\n      animation.cancel();\n    }\n  }\n}\n\n/**\n * Creates and attaches an animation player instance to the passed in `host` element.\n * The player will run animations on the passed in `target`, or if `target` is undefined,\n * the host element itself.\n */\nexport function addAnimationController(\n  host: ReactiveControllerHost & HTMLElement,\n  target?: Ref<HTMLElement> | HTMLElement\n): AnimationController {\n  return new AnimationController(host, target);\n}\n\nexport type { AnimationController };\n"]}
+{"version":3,"file":"player.js","sourceRoot":"","sources":["../../src/animations/player.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAGpD,MAAM,gBAAgB,GAAG,EAAE,IAAI,EAAE,IAAI,EAAW,CAAC;AAKjD,MAAM,UAAU,uBAAuB;IACrC,OAAO,CACL,UAAU,CAAC,UAAU,EAAE,CAAC,kCAAkC,CAAC,CAAC,OAAO,IAAI,KAAK,CAC7E,CAAC;AACJ,CAAC;AAOD,MAAM,mBAAmB;IAKvB,IAAc,OAAO;QACnB,IAAI,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC;YACzB,OAAO,IAAI,CAAC,IAAI,CAAC;QACnB,CAAC;QAED,OAAO,IAAI,CAAC,IAAI,EAAE,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC;IACxC,CAAC;IAED,YAAY,IAAiB,EAAE,GAAoC;QACjE,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;QAClB,IAAI,CAAC,IAAI,GAAG,GAAG,CAAC;IAClB,CAAC;IAGO,eAAe,CAAC,SAAqB;QAC3C,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC;QAE5B,OAAO,SAAS,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE;YAC7B,OAAO,KAAK,CAAC,MAAM,KAAK,MAAM;gBAC5B,CAAC,CAAC,EAAE,GAAG,KAAK,EAAE,MAAM,EAAE,GAAG,MAAM,CAAC,YAAY,IAAI,EAAE;gBAClD,CAAC,CAAC,KAAK,CAAC;QACZ,CAAC,CAAC,CAAC;IACL,CAAC;IAQM,KAAK,CAAC,aAAa,CACxB,SAAqC;QAErC,IAAI,CAAC,SAAS,EAAE,CAAC;QAEjB,MAAM,KAAK,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QACzC,OAAO,KAAK,CAAC,IAAI,KAAK,QAAQ,CAAC;IACjC,CAAC;IAMM,KAAK,CAAC,IAAI,CACf,SAAqC;QAErC,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,SAAS,CAAC;QACrC,MAAM,QAAQ,GAAG,uBAAuB,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,EAAE,QAAQ,IAAI,CAAC,CAAC,CAAC;QAE1E,IACE,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,QAAQ,CAAC,IAAI,MAAM,CAAC,QAAQ,CAAC,OAAO,EAAE,UAAU,IAAI,CAAC,CAAC,CAAC,EACzE,CAAC;YACD,MAAM,IAAI,KAAK,CAAC,0CAA0C,CAAC,CAAC;QAC9D,CAAC;QAED,OAAO,IAAI,OAAO,CAAyB,CAAC,OAAO,EAAE,EAAE;YACrD,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC,EAAE;gBAC/D,GAAG,OAAO;gBACV,QAAQ;aACT,CAAC,CAAC;YAEH,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,OAAO,EAAE,gBAAgB,CAAC,CAAC;YAC7D,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,OAAO,EAAE,gBAAgB,CAAC,CAAC;QAC/D,CAAC,CAAC,CAAC;IACL,CAAC;IAGM,SAAS;QACd,KAAK,MAAM,SAAS,IAAI,IAAI,CAAC,OAAO,CAAC,aAAa,EAAE,EAAE,CAAC;YACrD,SAAS,CAAC,MAAM,EAAE,CAAC;QACrB,CAAC;IACH,CAAC;CACF;AAOD,MAAM,UAAU,sBAAsB,CACpC,IAAiB,EACjB,MAAuC;IAEvC,OAAO,IAAI,mBAAmB,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC;AAC/C,CAAC","sourcesContent":["import type { Ref } from 'lit/directives/ref.js';\nimport { isElement } from '#internals/utils/dom.js';\nimport type { AnimationReferenceMetadata } from './types.js';\n\nconst LISTENER_OPTIONS = { once: true } as const;\n\n/**\n * Checks the user's preference for reduced motion.\n */\nexport function getPrefersReducedMotion(): boolean {\n  return (\n    globalThis.matchMedia?.('(prefers-reduced-motion: reduce)').matches ?? false\n  );\n}\n\n/**\n * Manages Web Animation API (WA-API) playback on a host element or a specified target element,\n * including support for 'height: auto' transitions and reduced motion preference.\n * It uses no host lifecycle hooks, so it is not registered as a reactive controller.\n */\nclass AnimationController {\n  private readonly _host: HTMLElement;\n  private readonly _ref?: Ref<HTMLElement> | HTMLElement;\n\n  /** The passed-in element, else the resolved Ref value, else the host. */\n  protected get _target(): HTMLElement {\n    if (isElement(this._ref)) {\n      return this._ref;\n    }\n\n    return this._ref?.value ?? this._host;\n  }\n\n  constructor(host: HTMLElement, ref?: Ref<HTMLElement> | HTMLElement) {\n    this._host = host;\n    this._ref = ref;\n  }\n\n  /** Pre-processes keyframes, specifically resolving 'auto' height to the element's scrollHeight. */\n  private _parseKeyframes(keyframes: Keyframe[]): Keyframe[] {\n    const target = this._target;\n\n    return keyframes.map((frame) => {\n      return frame.height === 'auto'\n        ? { ...frame, height: `${target.scrollHeight}px` }\n        : frame;\n    });\n  }\n\n  /**\n   * Plays a sequence of keyframes, first cancelling all existing animations on the target.\n   *\n   * The cancellation must stay synchronous - awaiting before it would let an\n   * animation started earlier in the same tick escape and run to completion.\n   */\n  public async playExclusive(\n    animation: AnimationReferenceMetadata\n  ): Promise<boolean> {\n    this.cancelAll();\n\n    const event = await this.play(animation);\n    return event.type === 'finish';\n  }\n\n  /**\n   * Plays a sequence of keyframes using WA-API.\n   * Automatically sets duration to 0 if 'prefers-reduced-motion' is set.\n   */\n  public async play(\n    animation: AnimationReferenceMetadata\n  ): Promise<AnimationPlaybackEvent> {\n    const { steps, options } = animation;\n    const duration = getPrefersReducedMotion() ? 0 : (options?.duration ?? 0);\n\n    if (\n      !(Number.isFinite(duration) && Number.isFinite(options?.iterations ?? 1))\n    ) {\n      throw new Error('Promise-based animations must be finite.');\n    }\n\n    return new Promise<AnimationPlaybackEvent>((resolve) => {\n      const player = this._target.animate(this._parseKeyframes(steps), {\n        ...options,\n        duration,\n      });\n\n      player.addEventListener('cancel', resolve, LISTENER_OPTIONS);\n      player.addEventListener('finish', resolve, LISTENER_OPTIONS);\n    });\n  }\n\n  /** Cancels all active animations on the target element. */\n  public cancelAll(): void {\n    for (const animation of this._target.getAnimations()) {\n      animation.cancel();\n    }\n  }\n}\n\n/**\n * Creates an animation player for the passed in `host` element.\n * The player will run animations on the passed in `target`, or if `target` is undefined,\n * the host element itself.\n */\nexport function addAnimationController(\n  host: HTMLElement,\n  target?: Ref<HTMLElement> | HTMLElement\n): AnimationController {\n  return new AnimationController(host, target);\n}\n\nexport type { AnimationController };\n"]}

package/animations/view-transition.d.ts

@@ -6,8 +6,9 @@ import { AsyncDirective, type DirectiveParameters } from 'lit/async-directive.js
 export declare function startViewTransition(callback: ViewTransitionUpdateCallback): ViewTransition;
 /**
  * Starts a scoped view transition on the specified target element and skips it if the user has requested reduced motion.
+ * Returns null, without calling `callback`, if the target does not support scoped view transitions.
  */
-export declare function startScopedViewTransition(target: HTMLElement, callback: ViewTransitionUpdateCallback): ViewTransition | null;
+export declare function startScopedViewTransition(target: Node, callback: ViewTransitionUpdateCallback): ViewTransition | null;
 /**
  * Sets the view transition name for the specified target element.
  */
@@ -25,20 +26,19 @@ export declare function getActiveViewTransition(): ViewTransition | null;
  */
 export declare function getActiveScopedViewTransition(target: Node): ViewTransition | null;
 declare class ScopedViewTransitionDirective extends AsyncDirective {
-    private _isFirstRender;
+    private _template?;
     render(template: TemplateResult): TemplateResult;
-    update(part: ChildPart, [template]: DirectiveParameters<this>): typeof noChange | TemplateResult;
+    update(part: ChildPart, [template]: DirectiveParameters<this>): TemplateResult | typeof noChange;
 }
 /**
- * A directive that enables scoped view transitions for a template.
- *
- * When applied, it will start a view transition whenever the template is updated,
- * provided that the parent node supports view transitions.
- * If the user has requested reduced motion, the transition will be skipped.
+ * A directive that starts a scoped view transition on the parent element each time
+ * the template changes. The first render and renders with an unchanged template
+ * (same strings and values) do not start a transition.
+ * If the user has requested reduced motion, the transition is skipped.
  *
  * @remarks
- * This directive is intended to be used with Lit templates inside a component that supports view transitions.
- * It will not work if the parent node does not support view transitions (e.g., if the parent is not a document or element that implements the ViewTransition interface).
+ * The parent node must implement `Element.startViewTransition()`. Otherwise the
+ * template is rendered directly, without a transition.
  */
 export declare const scopedViewTransition: (template: TemplateResult) => import("lit-html/directive.js").DirectiveResult<typeof ScopedViewTransitionDirective>;
 export {};

package/animations/view-transition.js

@@ -1,37 +1,34 @@
 import { noChange } from 'lit';
 import { AsyncDirective, directive, } from 'lit/async-directive.js';
+import { sameItems } from '#internals/utils/arrays.js';
 import { isFunction } from '#internals/utils/types.js';
 import { getPrefersReducedMotion } from './player.js';
 function hasScopedViewTransition(node) {
     return 'startViewTransition' in node && isFunction(node.startViewTransition);
 }
+function skipOnReducedMotion(transition) {
+    if (getPrefersReducedMotion()) {
+        transition.skipTransition();
+    }
+    return transition;
+}
 export function startViewTransition(callback) {
     const init = globalThis.document?.startViewTransition;
     if (!init) {
-        callback();
-        const resolved = Promise.resolve();
+        const done = Promise.resolve(callback()).then(() => { });
         return {
-            finished: resolved,
-            ready: resolved,
-            updateCallbackDone: resolved,
+            finished: done,
+            ready: done,
+            updateCallbackDone: done,
             skipTransition: () => { },
         };
     }
-    const transition = init.call(globalThis.document, callback);
-    if (getPrefersReducedMotion()) {
-        transition.skipTransition();
-    }
-    return transition;
+    return skipOnReducedMotion(init.call(globalThis.document, callback));
 }
 export function startScopedViewTransition(target, callback) {
-    if (!hasScopedViewTransition(target)) {
-        return null;
-    }
-    const transition = target.startViewTransition(callback);
-    if (getPrefersReducedMotion()) {
-        transition.skipTransition();
-    }
-    return transition;
+    return hasScopedViewTransition(target)
+        ? skipOnReducedMotion(target.startViewTransition(callback))
+        : null;
 }
 export function setTransitionName(target, name) {
     target.style.viewTransitionName = name;
@@ -45,36 +42,28 @@ export function getActiveViewTransition() {
     return globalThis.document?.activeViewTransition ?? null;
 }
 export function getActiveScopedViewTransition(target) {
-    if (!hasScopedViewTransition(target)) {
-        return null;
-    }
-    return target.activeViewTransition ?? null;
+    return hasScopedViewTransition(target)
+        ? (target.activeViewTransition ?? null)
+        : null;
+}
+function isSameTemplate(a, b) {
+    return a.strings === b.strings && sameItems(a.values, b.values);
 }
 class ScopedViewTransitionDirective extends AsyncDirective {
-    constructor() {
-        super(...arguments);
-        this._isFirstRender = true;
-    }
     render(template) {
         return template;
     }
     update(part, [template]) {
-        if (this._isFirstRender) {
-            this._isFirstRender = false;
+        const previous = this._template;
+        this._template = template;
+        if (!previous || isSameTemplate(previous, template)) {
             return this.render(template);
         }
-        const parent = part.parentNode;
-        if (!hasScopedViewTransition(parent)) {
-            return this.render(template);
-        }
-        const transition = parent.startViewTransition(() => {
+        const transition = startScopedViewTransition(part.parentNode, () => {
             this.setValue(template);
             return new Promise((resolve) => requestAnimationFrame(resolve));
         });
-        if (getPrefersReducedMotion()) {
-            transition.skipTransition();
-        }
-        return noChange;
+        return transition ? noChange : this.render(template);
     }
 }
 export const scopedViewTransition = directive(ScopedViewTransitionDirective);

package/animations/view-transition.js.map

@@ -1 +1 @@
-{"version":3,"file":"view-transition.js","sourceRoot":"","sources":["../../src/animations/view-transition.ts"],"names":[],"mappings":"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","sourcesContent":["import { type ChildPart, noChange, type TemplateResult } from 'lit';\nimport {\n  AsyncDirective,\n  type DirectiveParameters,\n  directive,\n} from 'lit/async-directive.js';\nimport { isFunction } from '#internals/utils/types.js';\nimport { getPrefersReducedMotion } from './player.js';\n\ntype ScopedViewTransitionElement = HTMLElement & {\n  startViewTransition: (\n    callback: () => Promise<unknown> | unknown\n  ) => ViewTransition;\n  activeViewTransition?: ViewTransition | null;\n};\n\n/**\n * Returns true if the specified node supports scoped view transitions, false otherwise.\n */\nfunction hasScopedViewTransition(\n  node: Node\n): node is ScopedViewTransitionElement {\n  return 'startViewTransition' in node && isFunction(node.startViewTransition);\n}\n\n/**\n * Starts a document view transition and skips it if the user has requested reduced motion.\n */\nexport function startViewTransition(\n  callback: ViewTransitionUpdateCallback\n): ViewTransition {\n  const init = globalThis.document?.startViewTransition;\n\n  /* c8 ignore next 11 */\n  if (!init) {\n    callback();\n    const resolved = Promise.resolve();\n\n    return {\n      finished: resolved,\n      ready: resolved,\n      updateCallbackDone: resolved,\n      skipTransition: () => {},\n    } as ViewTransition;\n  }\n\n  const transition = init.call(globalThis.document, callback);\n\n  if (getPrefersReducedMotion()) {\n    transition.skipTransition();\n  }\n\n  return transition;\n}\n\n/**\n * Starts a scoped view transition on the specified target element and skips it if the user has requested reduced motion.\n */\nexport function startScopedViewTransition(\n  target: HTMLElement,\n  callback: ViewTransitionUpdateCallback\n): ViewTransition | null {\n  if (!hasScopedViewTransition(target)) {\n    return null;\n  }\n\n  const transition = target.startViewTransition(callback);\n\n  if (getPrefersReducedMotion()) {\n    transition.skipTransition();\n  }\n\n  return transition;\n}\n\n/**\n * Sets the view transition name for the specified target element.\n */\nexport function setTransitionName(target: HTMLElement, name: string): void {\n  target.style.viewTransitionName = name;\n}\n\n/**\n * Clears the view transition name for the specified target elements.\n */\nexport function clearTransitionName(...targets: HTMLElement[]): void {\n  for (const target of targets) {\n    target.style.viewTransitionName = '';\n  }\n}\n\n/**\n * Returns the active view transition if one is currently in progress, or null otherwise.\n */\nexport function getActiveViewTransition(): ViewTransition | null {\n  return globalThis.document?.activeViewTransition ?? null;\n}\n\n/**\n * Returns the active scoped view transition for the specified target element if one is currently in progress, or null otherwise.\n */\nexport function getActiveScopedViewTransition(\n  target: Node\n): ViewTransition | null {\n  if (!hasScopedViewTransition(target)) {\n    return null;\n  }\n\n  return target.activeViewTransition ?? null;\n}\n\nclass ScopedViewTransitionDirective extends AsyncDirective {\n  private _isFirstRender = true;\n\n  public override render(template: TemplateResult): TemplateResult {\n    return template;\n  }\n\n  public override update(\n    part: ChildPart,\n    [template]: DirectiveParameters<this>\n  ) {\n    if (this._isFirstRender) {\n      this._isFirstRender = false;\n      return this.render(template);\n    }\n\n    const parent = part.parentNode;\n\n    if (!hasScopedViewTransition(parent)) {\n      return this.render(template);\n    }\n\n    const transition = parent.startViewTransition(() => {\n      this.setValue(template);\n      return new Promise((resolve) => requestAnimationFrame(resolve));\n    });\n\n    if (getPrefersReducedMotion()) {\n      transition.skipTransition();\n    }\n\n    return noChange;\n  }\n}\n\n/**\n * A directive that enables scoped view transitions for a template.\n *\n * When applied, it will start a view transition whenever the template is updated,\n * provided that the parent node supports view transitions.\n * If the user has requested reduced motion, the transition will be skipped.\n *\n * @remarks\n * This directive is intended to be used with Lit templates inside a component that supports view transitions.\n * It will not work if the parent node does not support view transitions (e.g., if the parent is not a document or element that implements the ViewTransition interface).\n */\nexport const scopedViewTransition = directive(ScopedViewTransitionDirective);\n"]}
+{"version":3,"file":"view-transition.js","sourceRoot":"","sources":["../../src/animations/view-transition.ts"],"names":[],"mappings":"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","sourcesContent":["import { type ChildPart, noChange, type TemplateResult } from 'lit';\nimport {\n  AsyncDirective,\n  type DirectiveParameters,\n  directive,\n} from 'lit/async-directive.js';\nimport { sameItems } from '#internals/utils/arrays.js';\nimport { isFunction } from '#internals/utils/types.js';\nimport { getPrefersReducedMotion } from './player.js';\n\ntype ScopedViewTransitionElement = HTMLElement & {\n  startViewTransition: (\n    callback: () => Promise<unknown> | unknown\n  ) => ViewTransition;\n  activeViewTransition?: ViewTransition | null;\n};\n\n/**\n * Returns true if the specified node supports scoped view transitions, false otherwise.\n */\nfunction hasScopedViewTransition(\n  node: Node\n): node is ScopedViewTransitionElement {\n  return 'startViewTransition' in node && isFunction(node.startViewTransition);\n}\n\nfunction skipOnReducedMotion(transition: ViewTransition): ViewTransition {\n  if (getPrefersReducedMotion()) {\n    transition.skipTransition();\n  }\n\n  return transition;\n}\n\n/**\n * Starts a document view transition and skips it if the user has requested reduced motion.\n */\nexport function startViewTransition(\n  callback: ViewTransitionUpdateCallback\n): ViewTransition {\n  const init = globalThis.document?.startViewTransition;\n\n  /* c8 ignore next 10 */\n  if (!init) {\n    const done = Promise.resolve(callback()).then(() => {});\n\n    return {\n      finished: done,\n      ready: done,\n      updateCallbackDone: done,\n      skipTransition: () => {},\n    } as ViewTransition;\n  }\n\n  return skipOnReducedMotion(init.call(globalThis.document, callback));\n}\n\n/**\n * Starts a scoped view transition on the specified target element and skips it if the user has requested reduced motion.\n * Returns null, without calling `callback`, if the target does not support scoped view transitions.\n */\nexport function startScopedViewTransition(\n  target: Node,\n  callback: ViewTransitionUpdateCallback\n): ViewTransition | null {\n  return hasScopedViewTransition(target)\n    ? skipOnReducedMotion(target.startViewTransition(callback))\n    : null;\n}\n\n/**\n * Sets the view transition name for the specified target element.\n */\nexport function setTransitionName(target: HTMLElement, name: string): void {\n  target.style.viewTransitionName = name;\n}\n\n/**\n * Clears the view transition name for the specified target elements.\n */\nexport function clearTransitionName(...targets: HTMLElement[]): void {\n  for (const target of targets) {\n    target.style.viewTransitionName = '';\n  }\n}\n\n/**\n * Returns the active view transition if one is currently in progress, or null otherwise.\n */\nexport function getActiveViewTransition(): ViewTransition | null {\n  return globalThis.document?.activeViewTransition ?? null;\n}\n\n/**\n * Returns the active scoped view transition for the specified target element if one is currently in progress, or null otherwise.\n */\nexport function getActiveScopedViewTransition(\n  target: Node\n): ViewTransition | null {\n  return hasScopedViewTransition(target)\n    ? (target.activeViewTransition ?? null)\n    : null;\n}\n\nfunction isSameTemplate(a: TemplateResult, b: TemplateResult): boolean {\n  return a.strings === b.strings && sameItems(a.values, b.values);\n}\n\nclass ScopedViewTransitionDirective extends AsyncDirective {\n  private _template?: TemplateResult;\n\n  public override render(template: TemplateResult): TemplateResult {\n    return template;\n  }\n\n  public override update(\n    part: ChildPart,\n    [template]: DirectiveParameters<this>\n  ): TemplateResult | typeof noChange {\n    const previous = this._template;\n    this._template = template;\n\n    if (!previous || isSameTemplate(previous, template)) {\n      return this.render(template);\n    }\n\n    const transition = startScopedViewTransition(part.parentNode, () => {\n      this.setValue(template);\n      // Let nested elements render before the new state is captured.\n      return new Promise((resolve) => requestAnimationFrame(resolve));\n    });\n\n    return transition ? noChange : this.render(template);\n  }\n}\n\n/**\n * A directive that starts a scoped view transition on the parent element each time\n * the template changes. The first render and renders with an unchanged template\n * (same strings and values) do not start a transition.\n * If the user has requested reduced motion, the transition is skipped.\n *\n * @remarks\n * The parent node must implement `Element.startViewTransition()`. Otherwise the\n * template is rendered directly, without a transition.\n */\nexport const scopedViewTransition = directive(ScopedViewTransitionDirective);\n"]}