igniteui-webcomponents 7.3.1 → 7.4.0

package/CHANGELOG.md

@@ -4,7 +4,74 @@ 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/).
 
-## [Unreleased]
+## [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
+  - Each GitHub release now carries a CycloneDX 1.6 SBOM for the published package and for the build environment, together with Sigstore attestations for the build provenance and for the SBOM. The release notes link the attestations, thus you can verify the tarball that you install. [#2370](https://github.com/IgniteUI/igniteui-webcomponents/pull/2370)
+- #### QR code
+  - `toBlob()` serializes the rendered code to an `image/svg+xml` blob. Theme colors become plain `fill` attributes and a logo that is not a data URI is fetched and inlined, so the output renders the same outside the component. [#2367](https://github.com/IgniteUI/igniteui-webcomponents/pull/2367)
+  - `toImage(options)` exports the code as a `File` in `svg`, `png`, `jpeg` or `webp` format. The `scale` option multiplies the component `size`, thus a 256px code with `scale: 2` gives a 512x512 image. Set `download: true` to open the browser download dialog. The `QrCodeExportFormat` and `QrCodeExportOptions` types are exported from the package entry point.
+- #### Themes
+  - All components now carry `forced-colors: active` styles in the Material, Bootstrap, Fluent and Indigo themes. Thus in Windows High Contrast mode they draw from the system palette (`CanvasText`, `Highlight`, `GrayText`, `LinkText`), and the disabled, hover, focus and selected states stay distinguishable. [#2347](https://github.com/IgniteUI/igniteui-webcomponents/pull/2347)
+
+### Changed
+- #### Calendar, Date picker, Date range picker
+  - When `week-start` is not set, the week starts on the first day of the week of the `locale`, as reported by `Intl.Locale.prototype.getWeekInfo()`. For example, `bg` starts on Monday and `en` stays on Sunday. An explicit `week-start` has priority. Set `weekStart` to `undefined` to return to the locale value. Browsers without `getWeekInfo()` keep the Sunday default. [#1020](https://github.com/IgniteUI/igniteui-webcomponents/issues/1020)
+  - The header date and the month/year navigation follow the field order of the `locale`. For `ja`, the header shows `7月15日(火)`, and the year button precedes the month button and shows `2025年`. The years view keeps plain numbers. In vertical header orientation, the weekday line has no trailing comma. [#1712](https://github.com/IgniteUI/igniteui-webcomponents/issues/1712)
+
+### Fixed
+- #### Library
+  - `defineAllComponents()` did not register `igc-qr-code` and `igc-virtual-scroll`. Thus the two components stayed undefined when you relied on the bulk registration. [#2373](https://github.com/IgniteUI/igniteui-webcomponents/pull/2373)
+- #### Validation
+  - A host that starts invalid, such as `<igc-input required invalid>`, showed no validation messages. The validation container keeps its first render neutral for SSR parity and skips the projection slots until the host updates, and a host that hydrated invalid never rendered again. [#2374](https://github.com/IgniteUI/igniteui-webcomponents/pull/2374)
 
 ## [7.3.1] - 2026-09-01
 ### Added
@@ -50,6 +117,8 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 ### Added
 - #### Calendar
   - `igc-calendar` now exports the `label-inner`, `months-row` and `years-row` parts. The pickers export them as `calendar-label-inner`, `months-row` and `years-row`. The views rendered these parts but did not export them, thus you could not style them through the calendar.
+- #### Color picker
+  - New `igc-color-picker` component. It provides a user interface for selecting colors, supporting various color formats and a customizable palette. [#1973](https://github.com/IgniteUI/igniteui-webcomponents/pull/1973)
 - #### Chip
   - `outlined` property. When you set it to `true`, the chip shows an outlined style. [#2307](https://github.com/IgniteUI/igniteui-webcomponents/pull/2307)
 - #### Icon
@@ -1595,6 +1664,8 @@ 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
 [7.2.4]: https://github.com/IgniteUI/igniteui-webcomponents/compare/7.2.3...7.2.4

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/avatar/themes/avatar.base.css.js

@@ -1,3 +1,3 @@
 import { css } from 'lit';
-export const styles = css `:host{--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);position:relative;box-sizing:border-box;scrollbar-width:var(--ig-scrollbar-size, var(--sb-size));scrollbar-color:var(--ig-scrollbar-thumb-background, var(--sb-thumb-bg-color)) var(--ig-scrollbar-track-background, var(--sb-track-bg-color))}:host ::-webkit-scrollbar{width:var(--ig-scrollbar-size, var(--sb-size));height:var(--ig-scrollbar-size, var(--sb-size));background:var(--ig-scrollbar-track-background, var(--sb-track-bg-color))}:host ::-webkit-scrollbar-thumb{background:var(--ig-scrollbar-thumb-background, var(--sb-thumb-bg-color))}:host *,:host *::before,:host *::after{box-sizing:border-box}:host([hidden]),[hidden]{display:none !important}:host{display:inline-flex;width:-moz-fit-content;width:fit-content;height:-moz-fit-content;height:fit-content}[part=base]{position:relative;display:inline-flex;justify-content:center;align-items:center;-webkit-user-select:none;-moz-user-select:none;user-select:none;outline-style:none;flex-shrink:0;overflow:hidden;font-family:var(--ig-font-family)}img{position:absolute;width:100%;height:100%;border-radius:inherit;background-color:inherit;-o-object-fit:cover;object-fit:cover}[part=initials]{text-transform:uppercase}:host([shape=square]) [part=base]{border-radius:0}`;
+export const styles = css `:host{--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);position:relative;box-sizing:border-box;scrollbar-width:var(--ig-scrollbar-size, var(--sb-size));scrollbar-color:var(--ig-scrollbar-thumb-background, var(--sb-thumb-bg-color)) var(--ig-scrollbar-track-background, var(--sb-track-bg-color))}:host ::-webkit-scrollbar{width:var(--ig-scrollbar-size, var(--sb-size));height:var(--ig-scrollbar-size, var(--sb-size));background:var(--ig-scrollbar-track-background, var(--sb-track-bg-color))}:host ::-webkit-scrollbar-thumb{background:var(--ig-scrollbar-thumb-background, var(--sb-thumb-bg-color))}:host *,:host *::before,:host *::after{box-sizing:border-box}:host([hidden]),[hidden]{display:none !important}:host{display:inline-flex;width:-moz-fit-content;width:fit-content;height:-moz-fit-content;height:fit-content}[part=base]{position:relative;display:inline-flex;justify-content:center;align-items:center;-webkit-user-select:none;-moz-user-select:none;user-select:none;outline-style:none;flex-shrink:0;overflow:hidden;font-family:var(--ig-font-family)}img{position:absolute;width:100%;height:100%;border-radius:inherit;background-color:inherit;-o-object-fit:cover;object-fit:cover}[part=initials]{text-transform:uppercase}:host([shape=square]) [part=base]{border-radius:0}@media(forced-colors: active){[part=base]{border:.0625rem solid CanvasText}}`;
 //# sourceMappingURL=avatar.base.css.js.map

package/components/avatar/themes/avatar.base.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"avatar.base.css.js","sourceRoot":"","sources":["../../../../src/components/avatar/themes/avatar.base.css.ts"],"names":[],"mappings":"AACE,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,mgDAAmgD,CAAC","sourcesContent":["\n  import { css } from 'lit';\n  export const styles = css`:host{--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);position:relative;box-sizing:border-box;scrollbar-width:var(--ig-scrollbar-size, var(--sb-size));scrollbar-color:var(--ig-scrollbar-thumb-background, var(--sb-thumb-bg-color)) var(--ig-scrollbar-track-background, var(--sb-track-bg-color))}:host ::-webkit-scrollbar{width:var(--ig-scrollbar-size, var(--sb-size));height:var(--ig-scrollbar-size, var(--sb-size));background:var(--ig-scrollbar-track-background, var(--sb-track-bg-color))}:host ::-webkit-scrollbar-thumb{background:var(--ig-scrollbar-thumb-background, var(--sb-thumb-bg-color))}:host *,:host *::before,:host *::after{box-sizing:border-box}:host([hidden]),[hidden]{display:none !important}:host{display:inline-flex;width:-moz-fit-content;width:fit-content;height:-moz-fit-content;height:fit-content}[part=base]{position:relative;display:inline-flex;justify-content:center;align-items:center;-webkit-user-select:none;-moz-user-select:none;user-select:none;outline-style:none;flex-shrink:0;overflow:hidden;font-family:var(--ig-font-family)}img{position:absolute;width:100%;height:100%;border-radius:inherit;background-color:inherit;-o-object-fit:cover;object-fit:cover}[part=initials]{text-transform:uppercase}:host([shape=square]) [part=base]{border-radius:0}`;\n  "]}
+{"version":3,"file":"avatar.base.css.js","sourceRoot":"","sources":["../../../../src/components/avatar/themes/avatar.base.css.ts"],"names":[],"mappings":"AACE,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,+kDAA+kD,CAAC","sourcesContent":["\n  import { css } from 'lit';\n  export const styles = css`:host{--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);position:relative;box-sizing:border-box;scrollbar-width:var(--ig-scrollbar-size, var(--sb-size));scrollbar-color:var(--ig-scrollbar-thumb-background, var(--sb-thumb-bg-color)) var(--ig-scrollbar-track-background, var(--sb-track-bg-color))}:host ::-webkit-scrollbar{width:var(--ig-scrollbar-size, var(--sb-size));height:var(--ig-scrollbar-size, var(--sb-size));background:var(--ig-scrollbar-track-background, var(--sb-track-bg-color))}:host ::-webkit-scrollbar-thumb{background:var(--ig-scrollbar-thumb-background, var(--sb-thumb-bg-color))}:host *,:host *::before,:host *::after{box-sizing:border-box}:host([hidden]),[hidden]{display:none !important}:host{display:inline-flex;width:-moz-fit-content;width:fit-content;height:-moz-fit-content;height:fit-content}[part=base]{position:relative;display:inline-flex;justify-content:center;align-items:center;-webkit-user-select:none;-moz-user-select:none;user-select:none;outline-style:none;flex-shrink:0;overflow:hidden;font-family:var(--ig-font-family)}img{position:absolute;width:100%;height:100%;border-radius:inherit;background-color:inherit;-o-object-fit:cover;object-fit:cover}[part=initials]{text-transform:uppercase}:host([shape=square]) [part=base]{border-radius:0}@media(forced-colors: active){[part=base]{border:.0625rem solid CanvasText}}`;\n  "]}

package/components/badge/themes/badge.base.css.js

@@ -1,3 +1,3 @@
 import { css } from 'lit';
-export const styles = css `:host{--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);position:relative;box-sizing:border-box;scrollbar-width:var(--ig-scrollbar-size, var(--sb-size));scrollbar-color:var(--ig-scrollbar-thumb-background, var(--sb-thumb-bg-color)) var(--ig-scrollbar-track-background, var(--sb-track-bg-color))}:host ::-webkit-scrollbar{width:var(--ig-scrollbar-size, var(--sb-size));height:var(--ig-scrollbar-size, var(--sb-size));background:var(--ig-scrollbar-track-background, var(--sb-track-bg-color))}:host ::-webkit-scrollbar-thumb{background:var(--ig-scrollbar-thumb-background, var(--sb-thumb-bg-color))}:host *,:host *::before,:host *::after{box-sizing:border-box}:host([hidden]),[hidden]{display:none !important}:host{width:-moz-fit-content;width:fit-content;height:-moz-fit-content;height:fit-content;display:inline-flex;vertical-align:top}[part~=base]{display:inline-flex;min-width:var(--_badge-size);min-height:var(--_badge-size);justify-content:center;align-items:center;overflow:hidden;white-space:nowrap;font-size:max(var(--is-large, 1)*max(var(--ig-body-2-font-size), -1 * var(--ig-body-2-font-size)),var(--is-medium, 1)*max(var(--ig-body-2-font-size), -1 * var(--ig-body-2-font-size)),var(--is-small, 1)*max(var(--ig-caption-font-size), -1 * var(--ig-caption-font-size)));font-weight:max(var(--is-large, 1)*max(var(--ig-body-2-font-weight), -1 * var(--ig-body-2-font-weight)),var(--is-medium, 1)*max(var(--ig-body-2-font-weight), -1 * var(--ig-body-2-font-weight)),var(--is-small, 1)*max(var(--ig-caption-font-weight), -1 * var(--ig-caption-font-weight)));line-height:max(var(--is-large, 1)*max(var(--ig-body-2-line-height), -1 * var(--ig-body-2-line-height)),var(--is-medium, 1)*max(var(--ig-body-2-line-height), -1 * var(--ig-body-2-line-height)),var(--is-small, 1)*max(var(--ig-caption-line-height), -1 * var(--ig-caption-line-height)));letter-spacing:max(var(--is-large, 1)*max(var(--ig-body-2-letter-spacing), -1 * var(--ig-body-2-letter-spacing)),var(--is-medium, 1)*max(var(--ig-body-2-letter-spacing), -1 * var(--ig-body-2-letter-spacing)),var(--is-small, 1)*max(var(--ig-caption-letter-spacing), -1 * var(--ig-caption-letter-spacing)));text-transform:max(var(--is-large, 1)*max(var(--ig-body-2-text-transform), -1 * var(--ig-body-2-text-transform)),var(--is-medium, 1)*max(var(--ig-body-2-text-transform), -1 * var(--ig-body-2-text-transform)),var(--is-small, 1)*max(var(--ig-caption-text-transform), -1 * var(--ig-caption-text-transform)))}:host(:not(:empty,[dot])) [part~=base]:not([part~=icon]){padding-inline:max(var(--is-large, 1)*max(0.5rem, -1 * 0.5rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(0.375rem, -1 * 0.375rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(0.25rem, -1 * 0.25rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))))}:host([variant=info]) [part~=base]{background:var(--ig-info-500)}:host([variant=success]) [part~=base]{background:var(--ig-success-500)}:host([variant=warning]) [part~=base]{background:var(--ig-warn-500);color:var(--ig-warn-500-contrast)}:host([variant=warning]) [part~=base] igc-icon,:host([variant=warning]) [part~=base] ::slotted(igc-icon){color:var(--ig-warn-500-contrast)}:host([variant=danger]) [part~=base]{background:var(--ig-error-500);color:var(--ig-error-900-contrast)}:host([shape=rounded]),:host([shape=rounded]) [part~=base],:host([dot]) [part~=base]{border-radius:calc(var(--_badge-size)*2)}`;
+export const styles = css `:host{--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);position:relative;box-sizing:border-box;scrollbar-width:var(--ig-scrollbar-size, var(--sb-size));scrollbar-color:var(--ig-scrollbar-thumb-background, var(--sb-thumb-bg-color)) var(--ig-scrollbar-track-background, var(--sb-track-bg-color))}:host ::-webkit-scrollbar{width:var(--ig-scrollbar-size, var(--sb-size));height:var(--ig-scrollbar-size, var(--sb-size));background:var(--ig-scrollbar-track-background, var(--sb-track-bg-color))}:host ::-webkit-scrollbar-thumb{background:var(--ig-scrollbar-thumb-background, var(--sb-thumb-bg-color))}:host *,:host *::before,:host *::after{box-sizing:border-box}:host([hidden]),[hidden]{display:none !important}:host{width:-moz-fit-content;width:fit-content;height:-moz-fit-content;height:fit-content;display:inline-flex;vertical-align:top}[part~=base]{display:inline-flex;min-width:var(--_badge-size);min-height:var(--_badge-size);justify-content:center;align-items:center;overflow:hidden;white-space:nowrap;font-size:max(var(--is-large, 1)*max(var(--ig-body-2-font-size), -1 * var(--ig-body-2-font-size)),var(--is-medium, 1)*max(var(--ig-body-2-font-size), -1 * var(--ig-body-2-font-size)),var(--is-small, 1)*max(var(--ig-caption-font-size), -1 * var(--ig-caption-font-size)));font-weight:max(var(--is-large, 1)*max(var(--ig-body-2-font-weight), -1 * var(--ig-body-2-font-weight)),var(--is-medium, 1)*max(var(--ig-body-2-font-weight), -1 * var(--ig-body-2-font-weight)),var(--is-small, 1)*max(var(--ig-caption-font-weight), -1 * var(--ig-caption-font-weight)));line-height:max(var(--is-large, 1)*max(var(--ig-body-2-line-height), -1 * var(--ig-body-2-line-height)),var(--is-medium, 1)*max(var(--ig-body-2-line-height), -1 * var(--ig-body-2-line-height)),var(--is-small, 1)*max(var(--ig-caption-line-height), -1 * var(--ig-caption-line-height)));letter-spacing:max(var(--is-large, 1)*max(var(--ig-body-2-letter-spacing), -1 * var(--ig-body-2-letter-spacing)),var(--is-medium, 1)*max(var(--ig-body-2-letter-spacing), -1 * var(--ig-body-2-letter-spacing)),var(--is-small, 1)*max(var(--ig-caption-letter-spacing), -1 * var(--ig-caption-letter-spacing)));text-transform:max(var(--is-large, 1)*max(var(--ig-body-2-text-transform), -1 * var(--ig-body-2-text-transform)),var(--is-medium, 1)*max(var(--ig-body-2-text-transform), -1 * var(--ig-body-2-text-transform)),var(--is-small, 1)*max(var(--ig-caption-text-transform), -1 * var(--ig-caption-text-transform)))}:host(:not(:empty,[dot])) [part~=base]:not([part~=icon]){padding-inline:max(var(--is-large, 1)*max(0.5rem, -1 * 0.5rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(0.375rem, -1 * 0.375rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(0.25rem, -1 * 0.25rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))))}:host([variant=info]) [part~=base]{background:var(--ig-info-500)}:host([variant=success]) [part~=base]{background:var(--ig-success-500)}:host([variant=warning]) [part~=base]{background:var(--ig-warn-500);color:var(--ig-warn-500-contrast)}:host([variant=warning]) [part~=base] igc-icon,:host([variant=warning]) [part~=base] ::slotted(igc-icon){color:var(--ig-warn-500-contrast)}:host([variant=danger]) [part~=base]{background:var(--ig-error-500);color:var(--ig-error-900-contrast)}:host([shape=rounded]),:host([shape=rounded]) [part~=base],:host([dot]) [part~=base]{border-radius:calc(var(--_badge-size)*2)}@media(forced-colors: active){[part~=base]{border:.0625rem solid CanvasText}}`;
 //# sourceMappingURL=badge.base.css.js.map