igniteui-webcomponents 7.3.2 → 7.4.0

package/CHANGELOG.md

@@ -4,6 +4,54 @@ 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.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 +1664,7 @@ Initial release of Ignite UI Web Components
 - Ripple component
 - Switch component
 
+[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"]}

package/components/breadcrumb/breadcrumb.d.ts

@@ -0,0 +1,74 @@
+import { LitElement, type PropertyValues } from 'lit';
+/**
+ * A single item within a breadcrumb navigation trail.
+ *
+ * @element igc-breadcrumb
+ *
+ * @slot - The main content of the breadcrumb, typically an anchor (`<a>`) element.
+ * @slot prefix - Renders content before the main breadcrumb content.
+ * @slot suffix - Renders content after the main breadcrumb content.
+ * @slot separator - Overrides the default separator icon rendered after the breadcrumb item.
+ * The separator is hidden from assistive technology.
+ *
+ * @csspart label - The container wrapping the prefix, default, and suffix slots.
+ * @csspart separator - The container wrapping the separator slot content.
+ *
+ * @example
+ * ```html
+ * <igc-breadcrumbs>
+ *   <igc-breadcrumb>
+ *     <a href="/home">Home</a>
+ *   </igc-breadcrumb>
+ *   <igc-breadcrumb>
+ *     <a href="/products">Products</a>
+ *   </igc-breadcrumb>
+ *   <igc-breadcrumb current>
+ *     <a href="/products/laptop">Laptop</a>
+ *   </igc-breadcrumb>
+ * </igc-breadcrumbs>
+ * ```
+ */
+export default class IgcBreadcrumbComponent extends LitElement {
+    static readonly tagName = "igc-breadcrumb";
+    static styles: import("lit").CSSResult[];
+    static register(): void;
+    private readonly _internals;
+    private readonly _separatorConsumer;
+    private readonly _slots;
+    /** Slotted tabbables taken out of the tab sequence, keyed to their original `tabindex`. */
+    private readonly _suppressedTabbables;
+    private get _separator();
+    constructor();
+    /**
+     * Marks this breadcrumb as representing the current page.
+     * Sets `aria-current="page"` on the element when active.
+     *
+     * @attr current
+     * @default false
+     */
+    current: boolean;
+    /**
+     * Sets the disabled state of the breadcrumb.
+     * Sets `aria-disabled="true"` on the element and removes the slotted
+     * content from the tab sequence while active.
+     *
+     * @attr disabled
+     * @default false
+     */
+    disabled: boolean;
+    protected update(changedProperties: PropertyValues<this>): void;
+    protected render(): import("lit-html").TemplateResult<1>;
+    /**
+     * Keeps the slotted focusable elements out of the tab sequence while the
+     * breadcrumb is disabled. `pointer-events: none` alone still leaves a
+     * disabled link reachable with Tab.
+     */
+    private _syncTabbable;
+    private _suppressTabbables;
+    private _restoreTabbables;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'igc-breadcrumb': IgcBreadcrumbComponent;
+    }
+}