igniteui-webcomponents 7.2.3 → 7.3.0-beta.0

package/CHANGELOG.md

@@ -4,6 +4,161 @@ 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]
+### 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.
+- #### 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
+  - `registerIcon` and `registerIconFromText` now accept a `RegisterIconOptions` object as their third argument, in addition to the plain collection string. [#1822](https://github.com/IgniteUI/igniteui-webcomponents/issues/1822)
+    - `stripMeta: true` removes the `<title>` and `<desc>` elements from the stored SVG. This prevents the native browser tooltip on hover.
+    - The title text stays available as the `aria-label` of the host `igc-icon` element.
+    - The component removes the `aria-labelledby` and `aria-describedby` references on the root `<svg>` that point to the removed elements.
+- #### Mask input, Date time input, Date range picker
+  - The masked editors now support the standard undo and redo shortcuts: `Ctrl + Z` / `Cmd + Z` to undo, and `Ctrl + Y`, `Ctrl + Shift + Z` / `Cmd + Shift + Z` to redo. These shortcuts did nothing before, because each render of the masked text sets the value of the native input and clears the browser undo stack.
+    - A sequence of typed characters, or a sequence of deletions, becomes one undo step. A caret movement, a paste, a drop, a cut, a spin of a date part, and an IME composition each start a new step.
+    - A restored step emits `igcInput`, thus composite hosts and two-way bindings follow the undo. In the date editors the restored text stays an uncommitted draft, and the component emits `igcChange` on blur only if the committed value changed.
+    - The history stays through focus changes. The component discards the history when you set the value programmatically, when the form resets the control, or when the `mask`, `prompt` or `input-format` pattern changes.
+- #### QR Code
+  - New `igc-qr-code` component. It renders a scannable QR code as an SVG from the `value` property, and encodes the data in numeric, alphanumeric or byte mode. [#2308](https://github.com/IgniteUI/igniteui-webcomponents/pull/2308)
+    - Set an explicit `version` (1-40) and `error-level` (`L`/`M`/`Q`/`H`), or let the component select the smallest version and level that hold the data.
+    - `size` and `margin` control the rendered pixel dimensions and the quiet zone (in modules) around the code.
+    - `logo-src` adds an optional branding logo. `logo-size` and `logo-margin` control how much of the scannable area the logo covers. The component increases the error correction level for the logo, unless you set the level.
+    - `dot-style` and `square-style` set the shape of the data modules and of the finder-pattern corners (`square`, `circle`, `rounded`).
+    - The `--ig-qr-code-background`, `--ig-qr-code-dark-color`, `--ig-qr-code-corner-square-color` and `--ig-qr-code-corner-dot-color` CSS custom properties control the theme. The component exposes the `background`, `dots`, `corner-square` and `corner-dot` CSS parts.
+- #### Splitter
+  - `startCollapsed` and `endCollapsed` properties. Use them to read and to set the collapsed state of each pane.
+  - `igcLayoutChanged` event. The component emits it after a user resize or a change of the expansion state. The payload holds the current layout (`startSize`, `endSize`, `startCollapsed`, `endCollapsed`).
+- #### Tabs
+  - `selectedTab` property. It returns the selected `igc-tab` element, or `null`.
+  - `select()` now also matches the `label` of a tab, in addition to its IDREF. Thus you can pass the value that `selected` reports back into it.
+- #### Virtual Scroll
+  - New `igc-virtual-scroll` component. It renders large or unbounded lists efficiently, because it renders only the items in the viewport plus a configurable `overScan`. [#2222](https://github.com/IgniteUI/igniteui-webcomponents/pull/2222)
+    - Supports `vertical` and `horizontal` orientation, and RTL layouts.
+    - Item sizes can be fixed, estimated with `estimatedItemSize`, or fully variable. The component measures each rendered item and corrects its estimate automatically.
+    - `scrollToIndex()` scrolls to a given item, with a configurable alignment (`block`/`inline`) and scroll `behavior` (`auto`/`smooth`). The component corrects the target offset while it measures the items around it, thus the requested item stops in the correct position.
+    - `igcDataRequest` event. The component emits it when the scroll position comes near the end of the loaded data. Use it for infinite scroll and for remote data.
+    - `igcStateChange` event. The component emits it after each render pass, with a snapshot of the current virtual window (`startIndex`, `endIndex`, `viewportSize`, `totalSize`).
+    - `layoutComplete` property. This promise resolves when the current render pass, and all subsequent renders that item measurement causes, are complete.
+    - The component operates correctly above the maximum scroll coordinate of the browser. Lists that are much larger than the DOM permits continue to scroll and to render correctly.
+
+### Changed
+- #### Button group
+  - **Behavioral change:** a disabled group no longer sets `disabled` on its buttons. The buttons inherit the state. Thus a button that is disabled on its own stays disabled when you enable the group again, and the buttons that you add to a disabled group are also disabled.
+  - Improved accessibility: the `single` and `single-required` modes expose a `radiogroup` with `radio` buttons, instead of toggle buttons with `aria-pressed`. The `focused` CSS part of `igc-toggle-button` is now documented.
+- #### Carousel
+  - The component now delegates focus to its indicator container, its navigation buttons, or the first focusable element in the active slide, in this sequence. Related to [#2291](https://github.com/IgniteUI/igniteui-webcomponents/issues/2291).
+- #### Chip
+  - The `focus-outline-color` and `focus-selected-outline-color` CSS variables are replaced by `focus-shadow-color` and `focus-selected-shadow-color`.
+- #### Combo
+  - The dropdown list now uses the new `igc-virtual-scroll` component instead of the third-party `@lit-labs/virtualizer` package. [#2222](https://github.com/IgniteUI/igniteui-webcomponents/pull/2222)
+- #### Date time input, Date picker, Date range picker
+  - **Behavioral change:** the components no longer change the `value` property while the user types. `value` now holds only a committed value and changes together with the `igcChange` event, which the components still emit on blur. Before, `value` changed on each keystroke - it became `null` for an incomplete mask, and the parsed date when the mask was full - and no event announced the change. [#1346](https://github.com/IgniteUI/igniteui-webcomponents/issues/1346)
+    - Thus you can use the components in templates that bind `value` externally, such as an edit template in `igc-grid`. Before, each re-render during typing applied the stale bound value again and reset the editor, thus you could not enter a new date.
+    - The value that the user types - and the result of a spin of a date part or of `Ctrl + ;` - is available in the `detail` of the `igcInput` event. The payload of the event does not change.
+    - A spin of a date part in a focused editor also defers to the commit on blur. A programmatic `stepUp()` or `stepDown()` on an unfocused component changes `value` immediately, as do `clear()`, `setRangeText()` and direct assignments.
+    - In `igc-date-picker` and `igc-date-range-picker` the calendar continues to follow the typed date during editing, as before.
+- #### Dropdown
+  - **Behavioral change:** the component no longer emits `igcChange` when you select the item that is already selected. The list still closes, as before.
+  - Improved accessibility: the target element declares `aria-haspopup="listbox"` instead of `aria-haspopup="true"`. While the list is open, the target holds `aria-activedescendant` that points at the item that keyboard navigation is on, thus screen readers announce the highlight. The component sets an id only on items that have none. It also removes all the attributes that it wrote on the target when it no longer uses that target.
+- #### Library
+  - Updated the optional peer dependencies `dompurify`, `marked` and `shiki` to their latest stable versions.
+  - Removed the `@lit-labs/virtualizer` dependency. The new `igc-virtual-scroll` component now supplies the virtualization. [#2222](https://github.com/IgniteUI/igniteui-webcomponents/pull/2222)
+- #### Tabs
+  - **Behavioral change:** the scroll buttons now scroll to the nearest tab that is not fully visible, instead of a fixed step of 180px. A tab below a scroll button counts as not visible. Thus one click brings exactly one tab into view and does not overshoot it.
+  - Improved accessibility: the tab headers expose `aria-posinset` and `aria-setsize`, the strip declares its `aria-orientation`, and the selected panel is focusable. Thus keyboard users can reach panel content that holds no focusable elements of its own. The strip also keeps a tab stop when no tab is selected.
+  - The component now finds `igc-tab` elements that come through an intermediate slot. Thus another component can wrap `igc-tabs`.
+- #### Tooltip
+  - **Behavioral change:** a tooltip that closes from a hide trigger now waits exactly `hide-delay`. Before, it waited through an additional, undocumented stage of 180ms, thus the real delay was `hide-delay + 180ms`.
+  - **Behavioral change:** in `sticky` mode the default close button hides the tooltip immediately and does not wait for `hide-delay`. Before, an explicit close took almost half a second.
+  - **Behavioral change:** `focusin` and `focusout` are now part of the default `show-triggers` and `hide-triggers`. Thus a tooltip opens when its anchor gets keyboard focus, and closes when the focus leaves the anchor.
+  - Improved accessibility: the anchor points at the tooltip with `aria-describedby`, thus screen readers announce the content as the description of the anchor. The tooltip generates an `id` only when it has none, keeps the references that are already on the anchor, and removes its own reference when it no longer describes the anchor.
+  - Improved accessibility: in `sticky` mode the default close action is a labelled `<button>` and not a bare icon. Thus you can reach and operate it from the keyboard. The new `close-button` CSS part exposes it.
+
+### Fixed
+- #### Button group
+  - Single selection compared the values of the buttons. Thus buttons without a `value`, or with the same `value`, could not take the selection: a click on a second button only cleared the first. The component now tracks the selection per element. [#2229](https://github.com/IgniteUI/igniteui-webcomponents/issues/2229)
+  - `selectedItems` added to the current selection instead of a replacement of it, and ignored buttons whose `value` is an empty string.
+  - You could still interact with a disabled group through buttons that you added after the group became disabled.
+  - `focus()`, `blur()` and `click()` on `igc-toggle-button` threw an error when you called them before the first render.
+  - Toggle buttons that are not direct children of the group changed its selection state. This could keep two buttons selected in a single selection mode, or remove the selection.
+- #### Calendar
+  - A calendar with more than one visible month announced each navigation one time per month, because the off-screen live region with the current period was part of the navigation of each month. There is now one live region for the full calendar.
+  - A calendar with more than one visible month exposed one tab stop per month. Thus the tab key moved into the grid of each month instead of out of the calendar. Only the active days view now holds the tab stop of its active date.
+  - The component now resolves time-only date strings against the current local date and not the UTC date. Before, the parsed date moved by one day near midnight in some time zones.
+  - `week-start` stayed stale until a subsequent update corrected the view. The component now resolves and renders `week-start` correctly on the initial render.
+  - Keyboard navigation over a large number of disabled dates could hang the browser. The navigation is now a no-op in this condition.
+- #### Chat
+  - With `adoptRootStyles` enabled the component ignored the stylesheets that entered the document after the initial adoption. Thus custom renderers whose styles are injected during view creation - Angular component styles, for example - showed unstyled content. The component now tracks the document stylesheets while the option is on, and applies each addition or removal to the shadow roots that adopted them, including stylesheet links that load later. [#2328](https://github.com/IgniteUI/igniteui-webcomponents/issues/2328)
+  - Adoption of the document styles no longer removes the theme styles of the message and the input parts. Before, the adoption built the stylesheet list from the static styles of the component only.
+- #### Dropdown
+  - `Enter` on an open dropdown before any arrow key threw a `TypeError` instead of doing nothing. The type of the item that keyboard navigation moves from declared that the item is always present, but the item is unset until you navigate the list or select something.
+  - Keyboard navigation stopped on a dropdown that opened at an explicit target, after a close and a subsequent open without that target, because the close removed the target together with its key event listeners. The component now keeps the target until another target replaces it.
+  - A dropdown that opened at an explicit target and then opened again through its own `target` slot stayed at the previous, detached element. The component now always resolves the current anchor and gives it to the popover.
+  - A call of `show()` with another target while the dropdown is open left `aria-expanded` on the previous element and leaked its key event listeners.
+  - `show()` with an id that matches no element threw a `TypeError`. An unresolved target now keeps the current target. When there is no anchor at all, `show()` returns `false` and does not open, because the popover cannot position a list without an anchor and the component would report itself open with nothing on screen.
+  - `clearSelection()` cleared the selection but kept keyboard navigation on the cleared item. Thus the next `ArrowDown` returned to that item instead of the top of the list.
+  - `selectedItem` continued to return an item that was removed from the DOM. The component now tracks the items that enter and leave the light DOM. It drops the selection when its item goes away, and navigation returns to the current selection.
+  - `aria-haspopup` and `aria-expanded` stayed on the target element after the removal of the dropdown from the DOM, or after another target replaced it.
+  - `igc-dropdown-header` had no role. Thus it stayed in the accessibility tree as a bare child of the `listbox`, which can own only `option` and `group` nodes. The component now removes it from the tree, as it already did for `igc-select-header`.
+  - The label of an `igc-dropdown-group` named nothing, because the component renders it in the shadow root of the group, out of reach of the host ARIA. Thus screen readers announced the groups without their label.
+- #### Form associated components
+  - Validation messages no longer disappear immediately after the first failed form submission. The invalid state from the submission held only for the update that the submission scheduled. Thus a subsequent re-render - a `slotchange` from the validation slots, for example - removed the messages, but the invalid styles stayed.
+  - The invalid styles now follow the validity state. A control that becomes valid again - a cleared `required`, a wider `min`/`max`, a disabled control - now drops the styles from an earlier interaction or submission.
+- #### Highlight
+  - Recent Firefox versions did not paint the matches. `::highlight()` rules are tree-scoped: they style only the text nodes in the same tree scope as the stylesheet. The component adopted the rules into its own shadow root, but the text that it highlights is slotted content in the tree scope of the host. Earlier Firefox versions applied such rules across scopes, as Chromium still does. The root node of the host now adopts the stylesheet, and the component adopts it again if it moves to another tree scope.
+  - The same fix lets a component inside another shadow root resolve its `--background` and `--foreground` custom properties correctly in Chromium. Before, it used the theme defaults.
+- #### Icon
+  - An icon that renders through a reference stayed blank when you registered the target icon later, because the component reacted only to registrations that match its own `name` and `collection` and not to the resolved target. It now resolves again on each change of the registry.
+  - `igc-icon` declares `role="img"` only when it has an accessible name: the `<title>` of the icon, or an `aria-label` or `aria-labelledby` on the host. Before, a decorative icon appeared in the accessibility tree as an image without a name.
+- #### Select
+  - `ArrowUp` on a closed select that had a selection cleared the selection and showed the placeholder, instead of a move to the previous item. The component set the item that keyboard navigation moves from only through its own selection path. Thus a selection through the `value` property, or through a `selected` attribute on an item, left that item unset, and a backward step from "no item" went off the start of the list. Navigation now always starts from the current selection. If there is no item to move to, the selection does not change.
+  - Type-ahead threw a `TypeError` on the first character that you type, on a select that had a selection.
+  - Type-ahead no longer swallows keyboard shortcuts. The component used a printable key with `Ctrl`, `Cmd` or `Alt` as a search character and prevented its default. Thus `Ctrl + C` and similar shortcuts did not reach the browser.
+  - Selection of the item that is already selected from the open list - by click, `Enter` or type-ahead - kept the list open. The list now closes and the focus returns, as for any other selection. The component still emits no `igcChange`, because the selection does not change.
+  - The component no longer discards a `value` that you set before the matching item exists. Frameworks frequently render items asynchronously, and a value that matched nothing at the first render became `undefined`. The component now keeps the value and resolves it when you add the item, also into an existing `igc-select-group`. Removal of the selected item also drops the selection, but keeps the value.
+  - `clearSelection()`, and a `value` that matches no item, kept an internal reference to the item that was selected before, from which the next keyboard navigation then moved.
+  - The text in the input now comes only from the main content of the selected item. Before, it also held the content of the `prefix` and `suffix` slots of the item, and the comment markers that the templating engine left among its children.
+  - `navigateTo()` no longer tries to focus and to scroll the list while the list is closed and inert.
+- #### Tabs
+  - See-through scroll buttons in the Indigo theme. The buttons are sticky and the tab headers scroll below them, but the theme keeps the buttons and the tabs strip transparent, thus the scrolled headers were visible through the buttons. The buttons now paint an opaque surface backdrop below their themed background. [#1955](https://github.com/IgniteUI/igniteui-webcomponents/issues/1955)
+  - The component did not emit `igcChange` when `activation` is `manual` and you activate a tab with `Enter` or `Space`. Thus the selection changed without an event.
+  - The selection now stays in agreement with the DOM in conditions that made the component inconsistent:
+    - `selected` set to `false` on the active tab hid its panel, but the tab stayed active internally. Thus you could not select it again.
+    - Removal of the last tab left a dangling reference that `selected` continued to report.
+    - `select()`, the `selected` attribute and the initial selection could each activate a disabled tab, which a click always refused. A tab with `selected` and `disabled` showed its panel together with the selected panel.
+    - A disabled active tab kept its panel visible below a greyed-out header. The selection now moves to the first enabled tab, or clears if all tabs are disabled.
+  - The start scroll button stayed enabled at the start of the strip under browser zoom or a non-integer device pixel ratio, where the scroll offset is fractional.
+  - A click on a partially visible tab header scrolled the strip two times.
+  - Less rendering work: a scroll of the strip no longer schedules an update per scroll event, and a change of the selection no longer causes an unnecessary layout pass.
+- #### Tooltip
+  - `show()` and `hide()` did not cancel a queued transition in the opposite direction. Thus a tooltip could open immediately after a call to hide it, and close immediately after a call to show it.
+  - A pointer that moved back over the anchor during the hide animation closed the tooltip and kept it closed, although the pointer never left the anchor.
+  - Interaction with the original anchor, while a tooltip from `show(target)` was open, desynchronized the component: it reported `open === false` while it stayed on screen, and you could no longer close it.
+  - `with-arrow` set at runtime did not give the arrow element to the popover. Thus the arrow had no position and no styles until an unrelated re-render corrected it.
+  - Delayed show and hide transitions returned a promise that never settled.
+  - A close with `Escape` emitted `igcClosed` even when there was nothing to close.
+- #### Tree
+  - Large or deeply nested trees are much faster:
+    - A read of `path` on a tree item, and each operation built on it such as the activation of a nested item, cost `2^depth` and not `depth`, because the component walked the ancestor chain two times per level. One read at depth 20 took ~23ms; it now takes less than a microsecond at any depth.
+    - Keyboard navigation is approximately 5 times faster (~1.24ms to ~0.24ms per keypress on a tree with 1554 items). A lazy walk that prunes the collapsed branches now supplies the navigable set. Before, the component materialized all items and filtered them through the ancestors of each item.
+    - Removal of a subtree while items are selected is approximately 2 times faster (~134ms to ~71ms for 259 items in `cascade` mode). Before, each removed item ran the full cascade reconciliation again, although the topmost removed item covers its full subtree.
+    - `tree.items`, `select()` over a full `cascade` tree, and the expansion or the collapse of all items are each 25-45% faster.
+
+## [7.2.4] - 2026-06-29
+### Added
+- #### Form associated custom elements with external labels
+  - External `<label>` associations are now resolved to the underlying native input of form-associated controls. Associating a label with `IgcInput`, `IgcMaskInput`, `IgcTextarea`, `IgcDateTimeInput`, `IgcSelect`, `IgcCombo`, `IgcDatePicker`, or `IgcDateRangePicker` — either through the `for`/`id` IDREF mechanism or by nesting the component inside the `<label>` — now correctly exposes the label to assistive technologies and focuses the inner input on label activation. [#2263](https://github.com/IgniteUI/igniteui-webcomponents/pull/2263)
+
+### Changed
+- #### AI-Assisted Development
+  - Improved grid related skills [#2250](https://github.com/IgniteUI/igniteui-webcomponents/pull/2250)
+
+### Fixed
+- #### Tabs
+  - Prevent selected tab header from scrolling into view on initial render [#2268](https://github.com/IgniteUI/igniteui-webcomponents/pull/2268)
+
 ## [7.2.3] - 2026-06-18
 ### Fixed
 - #### Popover based components
@@ -1378,6 +1533,7 @@ Initial release of Ignite UI Web Components
 - Ripple component
 - Switch component
 
+[7.2.4]: https://github.com/IgniteUI/igniteui-webcomponents/compare/7.2.3...7.2.4
 [7.2.3]: https://github.com/IgniteUI/igniteui-webcomponents/compare/7.2.2...7.2.3
 [7.2.2]: https://github.com/IgniteUI/igniteui-webcomponents/compare/7.2.1...7.2.2
 [7.2.1]: https://github.com/IgniteUI/igniteui-webcomponents/compare/7.2.0...7.2.1

package/animations/player.d.ts

@@ -2,13 +2,11 @@ import type { ReactiveController, ReactiveControllerHost } from 'lit';
 import type { Ref } from 'lit/directives/ref.js';
 import type { AnimationReferenceMetadata } from './types.js';
 /**
- * Defines the result of an optional View Transition start.
+ * Checks the user's preference for reduced motion.
  */
-type ViewTransitionResult = {
-    transition?: ViewTransition;
-};
+export declare function getPrefersReducedMotion(): boolean;
 /**
- * A ReactiveController for managing Web Animation API (WAAPI) playback
+ * 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
@@ -30,7 +28,7 @@ declare class AnimationController implements ReactiveController {
     /** Plays a sequence of keyframes, first cancelling all existing animations on the target. */
     playExclusive(animation: AnimationReferenceMetadata): Promise<boolean>;
     /**
-     * Plays a sequence of keyframes using WAAPI.
+     * Plays a sequence of keyframes using WA-API.
      * Automatically sets duration to 0 if 'prefers-reduced-motion' is set.
      */
     play(animation: AnimationReferenceMetadata): Promise<AnimationPlaybackEvent>;
@@ -43,9 +41,4 @@ declare class AnimationController implements ReactiveController {
  * the host element itself.
  */
 export declare function addAnimationController(host: ReactiveControllerHost & HTMLElement, target?: Ref<HTMLElement> | HTMLElement): AnimationController;
-/**
- * Initiates a View Transition if supported by the browser and not suppressed by
- * the 'prefers-reduced-motion' setting.
- */
-export declare function startViewTransition(callback?: ViewTransitionUpdateCallback): ViewTransitionResult;
 export type { AnimationController };

package/animations/player.js

@@ -1,7 +1,8 @@
-import { isElement } from '../components/common/util.js';
+import { isElement } from '#internals/utils/dom.js';
 const LISTENER_OPTIONS = { once: true };
-function getPrefersReducedMotion() {
-    return globalThis?.matchMedia('(prefers-reduced-motion: reduce)').matches;
+export function getPrefersReducedMotion() {
+    return (globalThis?.matchMedia?.('(prefers-reduced-motion: reduce)').matches ??
+        false);
 }
 class AnimationController {
     get _target() {
@@ -54,11 +55,4 @@ class AnimationController {
 export function addAnimationController(host, target) {
     return new AnimationController(host, target);
 }
-export function startViewTransition(callback) {
-    if (getPrefersReducedMotion() || !document.startViewTransition) {
-        callback?.();
-        return {};
-    }
-    return { transition: document.startViewTransition(callback) };
-}
 //# sourceMappingURL=player.js.map

package/animations/player.js.map

@@ -1 +1 @@
-{"version":3,"file":"player.js","sourceRoot":"","sources":["../../src/animations/player.ts"],"names":[],"mappings":"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","sourcesContent":["import type { ReactiveController, ReactiveControllerHost } from 'lit';\nimport type { Ref } from 'lit/directives/ref.js';\nimport { isElement } from '../components/common/util.js';\nimport type { AnimationReferenceMetadata } from './types.js';\n\n/**\n * Defines the result of an optional View Transition start.\n */\ntype ViewTransitionResult = {\n  transition?: ViewTransition;\n};\n\nconst LISTENER_OPTIONS = { once: true } as const;\n\n/**\n * Checks the user's preference for reduced motion.\n */\nfunction getPrefersReducedMotion(): boolean {\n  return globalThis?.matchMedia('(prefers-reduced-motion: reduce)').matches;\n}\n\n/**\n * A ReactiveController for managing Web Animation API (WAAPI) 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  /** Plays a sequence of keyframes, first cancelling all existing animations on the target. */\n  public async playExclusive(\n    animation: AnimationReferenceMetadata\n  ): Promise<boolean> {\n    await 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 WAAPI.\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(): Promise<void> {\n    for (const animation of this._target.getAnimations()) {\n      animation.cancel();\n    }\n\n    return Promise.resolve();\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\n/**\n * Initiates a View Transition if supported by the browser and not suppressed by\n * the 'prefers-reduced-motion' setting.\n */\nexport function startViewTransition(\n  callback?: ViewTransitionUpdateCallback\n): ViewTransitionResult {\n  /* c8 ignore next 4 */\n  if (getPrefersReducedMotion() || !document.startViewTransition) {\n    callback?.();\n    return {};\n  }\n\n  return { transition: document.startViewTransition(callback) };\n}\n\nexport type { AnimationController };\n"]}
+{"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;IAGxB,KAAK,CAAC,aAAa,CACxB,SAAqC;QAErC,MAAM,IAAI,CAAC,SAAS,EAAE,CAAC;QAEvB,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;QAED,OAAO,OAAO,CAAC,OAAO,EAAE,CAAC;IAC3B,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  /** Plays a sequence of keyframes, first cancelling all existing animations on the target. */\n  public async playExclusive(\n    animation: AnimationReferenceMetadata\n  ): Promise<boolean> {\n    await 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(): Promise<void> {\n    for (const animation of this._target.getAnimations()) {\n      animation.cancel();\n    }\n\n    return Promise.resolve();\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"]}

package/animations/view-transition.d.ts

@@ -0,0 +1,44 @@
+import { type ChildPart, noChange, type TemplateResult } from 'lit';
+import { AsyncDirective, type DirectiveParameters } from 'lit/async-directive.js';
+/**
+ * Starts a document view transition and skips it if the user has requested reduced motion.
+ */
+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.
+ */
+export declare function startScopedViewTransition(target: HTMLElement, callback: ViewTransitionUpdateCallback): ViewTransition | null;
+/**
+ * Sets the view transition name for the specified target element.
+ */
+export declare function setTransitionName(target: HTMLElement, name: string): void;
+/**
+ * Clears the view transition name for the specified target elements.
+ */
+export declare function clearTransitionName(...targets: HTMLElement[]): void;
+/**
+ * Returns the active view transition if one is currently in progress, or null otherwise.
+ */
+export declare function getActiveViewTransition(): ViewTransition | null;
+/**
+ * Returns the active scoped view transition for the specified target element if one is currently in progress, or null otherwise.
+ */
+export declare function getActiveScopedViewTransition(target: Node): ViewTransition | null;
+declare class ScopedViewTransitionDirective extends AsyncDirective {
+    private _isFirstRender;
+    render(template: TemplateResult): TemplateResult;
+    update(part: ChildPart, [template]: DirectiveParameters<this>): typeof noChange | TemplateResult;
+}
+/**
+ * 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.
+ *
+ * @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).
+ */
+export declare const scopedViewTransition: (template: TemplateResult) => import("lit-html/directive.js").DirectiveResult<typeof ScopedViewTransitionDirective>;
+export {};

package/animations/view-transition.js

@@ -0,0 +1,81 @@
+import { noChange } from 'lit';
+import { AsyncDirective, directive, } from 'lit/async-directive.js';
+import { isFunction } from '#internals/utils/types.js';
+import { getPrefersReducedMotion } from './player.js';
+function hasScopedViewTransition(node) {
+    return 'startViewTransition' in node && isFunction(node.startViewTransition);
+}
+export function startViewTransition(callback) {
+    const init = globalThis.document?.startViewTransition;
+    if (!init) {
+        callback();
+        const resolved = Promise.resolve();
+        return {
+            finished: resolved,
+            ready: resolved,
+            updateCallbackDone: resolved,
+            skipTransition: () => { },
+        };
+    }
+    const transition = init.call(globalThis.document, callback);
+    if (getPrefersReducedMotion()) {
+        transition.skipTransition();
+    }
+    return transition;
+}
+export function startScopedViewTransition(target, callback) {
+    if (!hasScopedViewTransition(target)) {
+        return null;
+    }
+    const transition = target.startViewTransition(callback);
+    if (getPrefersReducedMotion()) {
+        transition.skipTransition();
+    }
+    return transition;
+}
+export function setTransitionName(target, name) {
+    target.style.viewTransitionName = name;
+}
+export function clearTransitionName(...targets) {
+    for (const target of targets) {
+        target.style.viewTransitionName = '';
+    }
+}
+export function getActiveViewTransition() {
+    return globalThis.document?.activeViewTransition ?? null;
+}
+export function getActiveScopedViewTransition(target) {
+    if (!hasScopedViewTransition(target)) {
+        return null;
+    }
+    return target.activeViewTransition ?? null;
+}
+class ScopedViewTransitionDirective extends AsyncDirective {
+    constructor() {
+        super(...arguments);
+        this._isFirstRender = true;
+    }
+    render(template) {
+        return template;
+    }
+    update(part, [template]) {
+        if (this._isFirstRender) {
+            this._isFirstRender = false;
+            return this.render(template);
+        }
+        const parent = part.parentNode;
+        if (!hasScopedViewTransition(parent)) {
+            return this.render(template);
+        }
+        const transition = parent.startViewTransition(() => {
+            this.setValue(template);
+            return new Promise((resolve) => requestAnimationFrame(resolve));
+        });
+        if (getPrefersReducedMotion()) {
+            transition.skipTransition();
+        }
+        return noChange;
+    }
+}
+export const scopedViewTransition = directive(ScopedViewTransitionDirective);
+//# sourceMappingURL=view-transition.js.map

package/animations/view-transition.js.map

@@ -0,0 +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"]}

package/components/accordion/accordion.d.ts

@@ -21,7 +21,7 @@ export default class IgcAccordionComponent extends LitElement {
      * @default false
      */
     singleExpand: boolean;
-    /** Returns all of the accordions's direct igc-expansion-panel children. */
+    /** Returns all of the direct expansion panel children of the accordion. */
     get panels(): IgcExpansionPanelComponent[];
     constructor();
     private _handleSlotChange;

package/components/accordion/accordion.js

@@ -6,10 +6,11 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { html, LitElement } from 'lit';
 import { property } from 'lit/decorators.js';
-import { addKeybindings, altKey, arrowDown, arrowUp, endKey, homeKey, shiftKey, } from '../common/controllers/key-bindings.js';
-import { addSlotController, setSlots } from '../common/controllers/slot.js';
-import { registerComponent } from '../common/definitions/register.js';
-import { addSafeEventListener, first, last } from '../common/util.js';
+import { addKeybindings, altKey, arrowDown, arrowUp, endKey, homeKey, shiftKey, } from '#internals/controllers/key-bindings.js';
+import { addSlotController, setSlots } from '#internals/controllers/slot.js';
+import { registerComponent } from '#internals/definitions/register.js';
+import { firstOf, lastOf } from '#internals/utils/arrays.js';
+import { addSafeEventListener } from '#internals/utils/events.js';
 import IgcExpansionPanelComponent from '../expansion-panel/expansion-panel.js';
 import { styles } from './themes/accordion.base.css.js';
 export default class IgcAccordionComponent extends LitElement {
@@ -61,10 +62,10 @@ export default class IgcAccordionComponent extends LitElement {
             this._interactivePanels.includes(target));
     }
     _navigateToFirst() {
-        this._getPanelHeader(first(this._interactivePanels))?.focus();
+        this._getPanelHeader(firstOf(this._interactivePanels))?.focus();
     }
     _navigateToLast() {
-        this._getPanelHeader(last(this._interactivePanels))?.focus();
+        this._getPanelHeader(lastOf(this._interactivePanels))?.focus();
     }
     _navigateToPrevious(event) {
         const current = event.target;

package/components/accordion/accordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"accordion.js","sourceRoot":"","sources":["../../../src/components/accordion/accordion.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport {\n  addKeybindings,\n  altKey,\n  arrowDown,\n  arrowUp,\n  endKey,\n  homeKey,\n  shiftKey,\n} from '../common/controllers/key-bindings.js';\nimport { addSlotController, setSlots } from '../common/controllers/slot.js';\nimport { registerComponent } from '../common/definitions/register.js';\nimport { addSafeEventListener, first, last } from '../common/util.js';\nimport IgcExpansionPanelComponent from '../expansion-panel/expansion-panel.js';\nimport { styles } from './themes/accordion.base.css.js';\n\n/**\n * The Accordion is a container-based component that can house multiple expansion panels\n * and offers keyboard navigation.\n *\n * @element igc-accordion\n *\n * @slot - Renders the expansion panels inside default slot.\n */\nexport default class IgcAccordionComponent extends LitElement {\n  public static readonly tagName = 'igc-accordion';\n  public static override styles = styles;\n\n  /* blazorSuppress */\n  public static register(): void {\n    registerComponent(IgcAccordionComponent, IgcExpansionPanelComponent);\n  }\n\n  //#region Internal state and properties\n\n  private _panels: IgcExpansionPanelComponent[] = [];\n\n  private readonly _slots = addSlotController(this, {\n    slots: setSlots(),\n    onChange: this._handleSlotChange,\n    initial: true,\n  });\n\n  private get _interactivePanels(): IgcExpansionPanelComponent[] {\n    return this._panels.filter((panel) => !panel.disabled);\n  }\n\n  //#endregion\n\n  //#region Public attributes and properties\n\n  /**\n   * Allows only one panel to be expanded at a time.\n   * @attr single-expand\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'single-expand' })\n  public singleExpand = false;\n\n  /* blazorSuppress */\n  /** Returns all of the accordions's direct igc-expansion-panel children. */\n  public get panels(): IgcExpansionPanelComponent[] {\n    return Array.from(this._panels);\n  }\n\n  //#endregion\n\n  constructor() {\n    super();\n\n    addSafeEventListener(this, 'igcOpening' as any, this._handlePanelOpening);\n\n    addKeybindings(this, { skip: this._skipKeybinding })\n      .set(homeKey, this._navigateToFirst)\n      .set(endKey, this._navigateToLast)\n      .set(arrowUp, this._navigateToPrevious)\n      .set(arrowDown, this._navigateToNext)\n      .set([shiftKey, altKey, arrowDown], this._expandAll)\n      .set([shiftKey, altKey, arrowUp], this._collapseAll);\n  }\n\n  //#region Event handlers\n\n  private _handleSlotChange(): void {\n    this._panels = this._slots.getAssignedElements('[default]', {\n      selector: IgcExpansionPanelComponent.tagName,\n    });\n  }\n\n  private async _handlePanelOpening(event: Event): Promise<void> {\n    const current = event.target as IgcExpansionPanelComponent;\n\n    if (!(this.singleExpand && this.panels.includes(current))) {\n      return;\n    }\n\n    await Promise.all(\n      this._interactivePanels\n        .filter((panel) => panel.open && panel !== current)\n        .map((panel) => this._closePanel(panel))\n    );\n  }\n\n  //#endregion\n\n  //#region Keyboard interaction handlers\n\n  private _skipKeybinding(target: Element): boolean {\n    return !(\n      target instanceof IgcExpansionPanelComponent &&\n      this._interactivePanels.includes(target)\n    );\n  }\n\n  private _navigateToFirst(): void {\n    this._getPanelHeader(first(this._interactivePanels))?.focus();\n  }\n\n  private _navigateToLast(): void {\n    this._getPanelHeader(last(this._interactivePanels))?.focus();\n  }\n\n  private _navigateToPrevious(event: KeyboardEvent): void {\n    const current = event.target as IgcExpansionPanelComponent;\n    const next = this._getNextPanel(current, -1);\n\n    if (next !== current) {\n      this._getPanelHeader(next)?.focus();\n    }\n  }\n\n  private _navigateToNext(event: KeyboardEvent): void {\n    const current = event.target as IgcExpansionPanelComponent;\n    const next = this._getNextPanel(current, 1);\n\n    if (next !== current) {\n      this._getPanelHeader(next)?.focus();\n    }\n  }\n\n  private async _collapseAll(): Promise<void> {\n    await Promise.all(\n      this._interactivePanels.map((panel) => this._closePanel(panel))\n    );\n  }\n\n  private async _expandAll(event: KeyboardEvent): Promise<void> {\n    const current = event.target as IgcExpansionPanelComponent;\n\n    if (this.singleExpand) {\n      const closePromises = this._interactivePanels\n        .filter((panel) => panel.open && panel !== current)\n        .map((panel) => this._closePanel(panel));\n\n      await Promise.all(closePromises);\n      await this._openPanel(current);\n    } else {\n      await Promise.all(\n        this._interactivePanels.map((panel) => this._openPanel(panel))\n      );\n    }\n  }\n\n  //#endregion\n\n  //#region Internal API\n\n  private _getPanelHeader(\n    panel: IgcExpansionPanelComponent\n  ): HTMLElement | undefined {\n    // biome-ignore lint/complexity/useLiteralKeys: Direct property access instead of DOM query\n    return panel['_headerRef'].value;\n  }\n\n  private _getNextPanel(\n    panel: IgcExpansionPanelComponent,\n    dir: 1 | -1 = 1\n  ): IgcExpansionPanelComponent {\n    const panels = this._interactivePanels;\n    const idx = panels.indexOf(panel);\n\n    return panels[idx + dir] || panel;\n  }\n\n  private async _closePanel(p: IgcExpansionPanelComponent): Promise<void> {\n    const args = { detail: p };\n\n    if (!(p.open && p.emitEvent('igcClosing', { cancelable: true, ...args }))) {\n      return;\n    }\n\n    if (await p.hide()) {\n      p.emitEvent('igcClosed', args);\n    }\n  }\n\n  private async _openPanel(p: IgcExpansionPanelComponent): Promise<void> {\n    const args = { detail: p };\n\n    if (p.open || !p.emitEvent('igcOpening', { cancelable: true, ...args })) {\n      return;\n    }\n\n    if (await p.show()) {\n      p.emitEvent('igcOpened', args);\n    }\n  }\n\n  //#endregion\n\n  //#region Public API\n\n  /** Hides all of the child expansion panels' contents. */\n  public async hideAll(): Promise<void> {\n    await Promise.all(this.panels.map((panel) => panel.hide()));\n  }\n\n  /** Shows all of the child expansion panels' contents. */\n  public async showAll(): Promise<void> {\n    await Promise.all(this.panels.map((panel) => panel.show()));\n  }\n\n  //#endregion\n\n  protected override render() {\n    return html`<slot></slot>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-accordion': IgcAccordionComponent;\n  }\n}\n"]}
+{"version":3,"file":"accordion.js","sourceRoot":"","sources":["../../../src/components/accordion/accordion.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport {\n  addKeybindings,\n  altKey,\n  arrowDown,\n  arrowUp,\n  endKey,\n  homeKey,\n  shiftKey,\n} from '#internals/controllers/key-bindings.js';\nimport { addSlotController, setSlots } from '#internals/controllers/slot.js';\nimport { registerComponent } from '#internals/definitions/register.js';\nimport { firstOf, lastOf } from '#internals/utils/arrays.js';\nimport { addSafeEventListener } from '#internals/utils/events.js';\nimport IgcExpansionPanelComponent from '../expansion-panel/expansion-panel.js';\nimport { styles } from './themes/accordion.base.css.js';\n\n/**\n * The Accordion is a container-based component that can house multiple expansion panels\n * and offers keyboard navigation.\n *\n * @element igc-accordion\n *\n * @slot - Renders the expansion panels inside default slot.\n */\nexport default class IgcAccordionComponent extends LitElement {\n  public static readonly tagName = 'igc-accordion';\n  public static override styles = styles;\n\n  /* blazorSuppress */\n  public static register(): void {\n    registerComponent(IgcAccordionComponent, IgcExpansionPanelComponent);\n  }\n\n  //#region Internal state and properties\n\n  private _panels: IgcExpansionPanelComponent[] = [];\n\n  private readonly _slots = addSlotController(this, {\n    slots: setSlots(),\n    onChange: this._handleSlotChange,\n    initial: true,\n  });\n\n  private get _interactivePanels(): IgcExpansionPanelComponent[] {\n    return this._panels.filter((panel) => !panel.disabled);\n  }\n\n  //#endregion\n\n  //#region Public attributes and properties\n\n  /**\n   * Allows only one panel to be expanded at a time.\n   * @attr single-expand\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'single-expand' })\n  public singleExpand = false;\n\n  /* blazorSuppress */\n  /** Returns all of the direct expansion panel children of the accordion. */\n  public get panels(): IgcExpansionPanelComponent[] {\n    return Array.from(this._panels);\n  }\n\n  //#endregion\n\n  constructor() {\n    super();\n\n    addSafeEventListener(this, 'igcOpening' as any, this._handlePanelOpening);\n\n    addKeybindings(this, { skip: this._skipKeybinding })\n      .set(homeKey, this._navigateToFirst)\n      .set(endKey, this._navigateToLast)\n      .set(arrowUp, this._navigateToPrevious)\n      .set(arrowDown, this._navigateToNext)\n      .set([shiftKey, altKey, arrowDown], this._expandAll)\n      .set([shiftKey, altKey, arrowUp], this._collapseAll);\n  }\n\n  //#region Event handlers\n\n  private _handleSlotChange(): void {\n    this._panels = this._slots.getAssignedElements('[default]', {\n      selector: IgcExpansionPanelComponent.tagName,\n    });\n  }\n\n  private async _handlePanelOpening(event: Event): Promise<void> {\n    const current = event.target as IgcExpansionPanelComponent;\n\n    if (!(this.singleExpand && this.panels.includes(current))) {\n      return;\n    }\n\n    await Promise.all(\n      this._interactivePanels\n        .filter((panel) => panel.open && panel !== current)\n        .map((panel) => this._closePanel(panel))\n    );\n  }\n\n  //#endregion\n\n  //#region Keyboard interaction handlers\n\n  private _skipKeybinding(target: Element): boolean {\n    return !(\n      target instanceof IgcExpansionPanelComponent &&\n      this._interactivePanels.includes(target)\n    );\n  }\n\n  private _navigateToFirst(): void {\n    this._getPanelHeader(firstOf(this._interactivePanels))?.focus();\n  }\n\n  private _navigateToLast(): void {\n    this._getPanelHeader(lastOf(this._interactivePanels))?.focus();\n  }\n\n  private _navigateToPrevious(event: KeyboardEvent): void {\n    const current = event.target as IgcExpansionPanelComponent;\n    const next = this._getNextPanel(current, -1);\n\n    if (next !== current) {\n      this._getPanelHeader(next)?.focus();\n    }\n  }\n\n  private _navigateToNext(event: KeyboardEvent): void {\n    const current = event.target as IgcExpansionPanelComponent;\n    const next = this._getNextPanel(current, 1);\n\n    if (next !== current) {\n      this._getPanelHeader(next)?.focus();\n    }\n  }\n\n  private async _collapseAll(): Promise<void> {\n    await Promise.all(\n      this._interactivePanels.map((panel) => this._closePanel(panel))\n    );\n  }\n\n  private async _expandAll(event: KeyboardEvent): Promise<void> {\n    const current = event.target as IgcExpansionPanelComponent;\n\n    if (this.singleExpand) {\n      const closePromises = this._interactivePanels\n        .filter((panel) => panel.open && panel !== current)\n        .map((panel) => this._closePanel(panel));\n\n      await Promise.all(closePromises);\n      await this._openPanel(current);\n    } else {\n      await Promise.all(\n        this._interactivePanels.map((panel) => this._openPanel(panel))\n      );\n    }\n  }\n\n  //#endregion\n\n  //#region Internal API\n\n  private _getPanelHeader(\n    panel: IgcExpansionPanelComponent\n  ): HTMLElement | undefined {\n    return panel['_headerRef'].value;\n  }\n\n  private _getNextPanel(\n    panel: IgcExpansionPanelComponent,\n    dir: 1 | -1 = 1\n  ): IgcExpansionPanelComponent {\n    const panels = this._interactivePanels;\n    const idx = panels.indexOf(panel);\n\n    return panels[idx + dir] || panel;\n  }\n\n  private async _closePanel(p: IgcExpansionPanelComponent): Promise<void> {\n    const args = { detail: p };\n\n    if (!(p.open && p.emitEvent('igcClosing', { cancelable: true, ...args }))) {\n      return;\n    }\n\n    if (await p.hide()) {\n      p.emitEvent('igcClosed', args);\n    }\n  }\n\n  private async _openPanel(p: IgcExpansionPanelComponent): Promise<void> {\n    const args = { detail: p };\n\n    if (p.open || !p.emitEvent('igcOpening', { cancelable: true, ...args })) {\n      return;\n    }\n\n    if (await p.show()) {\n      p.emitEvent('igcOpened', args);\n    }\n  }\n\n  //#endregion\n\n  //#region Public API\n\n  /** Hides all of the child expansion panels' contents. */\n  public async hideAll(): Promise<void> {\n    await Promise.all(this.panels.map((panel) => panel.hide()));\n  }\n\n  /** Shows all of the child expansion panels' contents. */\n  public async showAll(): Promise<void> {\n    await Promise.all(this.panels.map((panel) => panel.show()));\n  }\n\n  //#endregion\n\n  protected override render() {\n    return html`<slot></slot>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-accordion': IgcAccordionComponent;\n  }\n}\n"]}

package/components/avatar/avatar.js

@@ -7,9 +7,9 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { html, LitElement, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
-import { addThemingController } from '../../theming/theming-controller.js';
-import { addInternalsController } from '../common/controllers/internals.js';
-import { registerComponent } from '../common/definitions/register.js';
+import { addInternalsController } from '#internals/controllers/internals.js';
+import { registerComponent } from '#internals/definitions/register.js';
+import { addThemingController } from '#theming/theming-controller.js';
 import { styles } from './themes/avatar.base.css.js';
 import { styles as shared } from './themes/shared/avatar.common.css.js';
 import { all } from './themes/themes.js';
@@ -52,13 +52,13 @@ export default class IgcAvatarComponent extends LitElement {
             : html `<slot></slot>`}
         ${this.src && !this._hasError
             ? html `
-              <img
-                part="image"
-                alt=${ifDefined(this.alt)}
-                src=${ifDefined(this.src)}
-                @error=${this._handleError}
-              />
-            `
+                <img
+                  part="image"
+                  alt=${ifDefined(this.alt)}
+                  src=${ifDefined(this.src)}
+                  @error=${this._handleError}
+                />
+              `
             : nothing}
       </div>
     `;

package/components/avatar/avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"avatar.js","sourceRoot":"","sources":["../../../src/components/avatar/avatar.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,OAAO,EAAuB,MAAM,KAAK,CAAC;AACrE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,oBAAoB,EAAE,MAAM,qCAAqC,CAAC;AAC3E,OAAO,EAAE,sBAAsB,EAAE,MAAM,oCAAoC,CAAC;AAC5E,OAAO,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AAEtE,OAAO,EAAE,MAAM,EAAE,MAAM,6BAA6B,CAAC;AACrD,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,sCAAsC,CAAC;AACxE,OAAO,EAAE,GAAG,EAAE,MAAM,oBAAoB,CAAC;AAezC,MAAM,CAAC,OAAO,OAAO,kBAAmB,SAAQ,UAAU;aACjC,YAAO,GAAG,YAAY,AAAf,CAAgB;aACvB,WAAM,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,AAAnB,CAAoB;IAG1C,MAAM,CAAC,QAAQ;QACpB,iBAAiB,CAAC,kBAAkB,CAAC,CAAC;IACxC,CAAC;IAwCD;QACE,KAAK,EAAE,CAAC;QAvCO,eAAU,GAAG,sBAAsB,CAAC,IAAI,EAAE;YACzD,WAAW,EAAE;gBACX,IAAI,EAAE,OAAO;gBACb,SAAS,EAAE,QAAQ;aACpB;SACF,CAAC,CAAC;QAGK,cAAS,GAAG,KAAK,CAAC;QA4BnB,UAAK,GAAgB,QAAQ,CAAC;QAInC,oBAAoB,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC;IAClC,CAAC;IAEkB,UAAU,CAAC,iBAAuC;QACnE,IAAI,iBAAiB,CAAC,GAAG,CAAC,UAAU,CAAC,IAAI,iBAAiB,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC;YACtE,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC;gBACtB,mBAAmB,EAAE,IAAI,CAAC,GAAG,IAAI,IAAI,CAAC,QAAQ;aAC/C,CAAC,CAAC;QACL,CAAC;QAED,IAAI,iBAAiB,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC;YACjC,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;QACzB,CAAC;IACH,CAAC;IAES,YAAY;QACpB,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;IACxB,CAAC;IAEkB,MAAM;QACvB,OAAO,IAAI,CAAA;;UAEL,IAAI,CAAC,QAAQ;YACb,CAAC,CAAC,IAAI,CAAA,yBAAyB,IAAI,CAAC,QAAQ,SAAS;YACrD,CAAC,CAAC,IAAI,CAAA,eAAe;UACrB,IAAI,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,SAAS;YAC3B,CAAC,CAAC,IAAI,CAAA;;;sBAGM,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC;sBACnB,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC;yBAChB,IAAI,CAAC,YAAY;;aAE7B;YACH,CAAC,CAAC,OAAO;;KAEd,CAAC;IACJ,CAAC;;AArEO;IADP,KAAK,EAAE;qDACkB;AAOnB;IADN,QAAQ,EAAE;+CACS;AAOb;IADN,QAAQ,EAAE;+CACS;AAOb;IADN,QAAQ,EAAE;oDACc;AAOlB;IADN,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;iDACS","sourcesContent":["import { html, LitElement, nothing, type PropertyValues } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { addThemingController } from '../../theming/theming-controller.js';\nimport { addInternalsController } from '../common/controllers/internals.js';\nimport { registerComponent } from '../common/definitions/register.js';\nimport type { AvatarShape } from '../types.js';\nimport { styles } from './themes/avatar.base.css.js';\nimport { styles as shared } from './themes/shared/avatar.common.css.js';\nimport { all } from './themes/themes.js';\n\n/**\n * An avatar component is used as a representation of a user identity\n * typically in a user profile.\n *\n * @element igc-avatar\n *\n * @slot - Renders an icon inside the default slot.\n *\n * @csspart base - The base wrapper of the avatar.\n * @csspart initials - The initials wrapper of the avatar.\n * @csspart image - The image wrapper of the avatar.\n * @csspart icon - The icon wrapper of the avatar.\n */\nexport default class IgcAvatarComponent extends LitElement {\n  public static readonly tagName = 'igc-avatar';\n  public static override styles = [styles, shared];\n\n  /* blazorSuppress */\n  public static register(): void {\n    registerComponent(IgcAvatarComponent);\n  }\n\n  private readonly _internals = addInternalsController(this, {\n    initialARIA: {\n      role: 'image',\n      ariaLabel: 'avatar',\n    },\n  });\n\n  @state()\n  private _hasError = false;\n\n  /**\n   * The image source to use.\n   * @attr\n   */\n  @property()\n  public src?: string;\n\n  /**\n   * Alternative text for the image.\n   * @attr\n   */\n  @property()\n  public alt?: string;\n\n  /**\n   * Initials to use as a fallback when no image is available.\n   * @attr\n   */\n  @property()\n  public initials?: string;\n\n  /**\n   * The shape of the avatar.\n   * @attr\n   */\n  @property({ reflect: true })\n  public shape: AvatarShape = 'square';\n\n  constructor() {\n    super();\n    addThemingController(this, all);\n  }\n\n  protected override willUpdate(changedProperties: PropertyValues<this>): void {\n    if (changedProperties.has('initials') || changedProperties.has('alt')) {\n      this._internals.setARIA({\n        ariaRoleDescription: this.alt ?? this.initials,\n      });\n    }\n\n    if (changedProperties.has('src')) {\n      this._hasError = false;\n    }\n  }\n\n  protected _handleError(): void {\n    this._hasError = true;\n  }\n\n  protected override render() {\n    return html`\n      <div part=\"base\">\n        ${this.initials\n          ? html`<span part=\"initials\">${this.initials}</span>`\n          : html`<slot></slot>`}\n        ${this.src && !this._hasError\n          ? html`\n              <img\n                part=\"image\"\n                alt=${ifDefined(this.alt)}\n                src=${ifDefined(this.src)}\n                @error=${this._handleError}\n              />\n            `\n          : nothing}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-avatar': IgcAvatarComponent;\n  }\n}\n"]}
+{"version":3,"file":"avatar.js","sourceRoot":"","sources":["../../../src/components/avatar/avatar.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,OAAO,EAAuB,MAAM,KAAK,CAAC;AACrE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,sBAAsB,EAAE,MAAM,qCAAqC,CAAC;AAC7E,OAAO,EAAE,iBAAiB,EAAE,MAAM,oCAAoC,CAAC;AACvE,OAAO,EAAE,oBAAoB,EAAE,MAAM,gCAAgC,CAAC;AAEtE,OAAO,EAAE,MAAM,EAAE,MAAM,6BAA6B,CAAC;AACrD,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,sCAAsC,CAAC;AACxE,OAAO,EAAE,GAAG,EAAE,MAAM,oBAAoB,CAAC;AAezC,MAAM,CAAC,OAAO,OAAO,kBAAmB,SAAQ,UAAU;aACjC,YAAO,GAAG,YAAY,AAAf,CAAgB;aACvB,WAAM,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,AAAnB,CAAoB;IAG1C,MAAM,CAAC,QAAQ;QACpB,iBAAiB,CAAC,kBAAkB,CAAC,CAAC;IACxC,CAAC;IAwCD;QACE,KAAK,EAAE,CAAC;QAvCO,eAAU,GAAG,sBAAsB,CAAC,IAAI,EAAE;YACzD,WAAW,EAAE;gBACX,IAAI,EAAE,OAAO;gBACb,SAAS,EAAE,QAAQ;aACpB;SACF,CAAC,CAAC;QAGK,cAAS,GAAG,KAAK,CAAC;QA4BnB,UAAK,GAAgB,QAAQ,CAAC;QAInC,oBAAoB,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC;IAClC,CAAC;IAEkB,UAAU,CAAC,iBAAuC;QACnE,IAAI,iBAAiB,CAAC,GAAG,CAAC,UAAU,CAAC,IAAI,iBAAiB,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC;YACtE,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC;gBACtB,mBAAmB,EAAE,IAAI,CAAC,GAAG,IAAI,IAAI,CAAC,QAAQ;aAC/C,CAAC,CAAC;QACL,CAAC;QAED,IAAI,iBAAiB,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC;YACjC,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;QACzB,CAAC;IACH,CAAC;IAES,YAAY;QACpB,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;IACxB,CAAC;IAEkB,MAAM;QACvB,OAAO,IAAI,CAAA;;UAGL,IAAI,CAAC,QAAQ;YACX,CAAC,CAAC,IAAI,CAAA,yBAAyB,IAAI,CAAC,QAAQ,SAAS;YACrD,CAAC,CAAC,IAAI,CAAA,eACV;UAEE,IAAI,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,SAAS;YACzB,CAAC,CAAC,IAAI,CAAA;;;wBAGM,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC;wBACnB,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC;2BAChB,IAAI,CAAC,YAAY;;eAE7B;YACH,CAAC,CAAC,OACN;;KAEH,CAAC;IACJ,CAAC;;AAzEO;IADP,KAAK,EAAE;qDACkB;AAOnB;IADN,QAAQ,EAAE;+CACS;AAOb;IADN,QAAQ,EAAE;+CACS;AAOb;IADN,QAAQ,EAAE;oDACc;AAOlB;IADN,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;iDACS","sourcesContent":["import { html, LitElement, nothing, type PropertyValues } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { addInternalsController } from '#internals/controllers/internals.js';\nimport { registerComponent } from '#internals/definitions/register.js';\nimport { addThemingController } from '#theming/theming-controller.js';\nimport type { AvatarShape } from '../types.js';\nimport { styles } from './themes/avatar.base.css.js';\nimport { styles as shared } from './themes/shared/avatar.common.css.js';\nimport { all } from './themes/themes.js';\n\n/**\n * An avatar component is used as a representation of a user identity\n * typically in a user profile.\n *\n * @element igc-avatar\n *\n * @slot - Renders an icon inside the default slot.\n *\n * @csspart base - The base wrapper of the avatar.\n * @csspart initials - The initials wrapper of the avatar.\n * @csspart image - The image wrapper of the avatar.\n * @csspart icon - The icon wrapper of the avatar.\n */\nexport default class IgcAvatarComponent extends LitElement {\n  public static readonly tagName = 'igc-avatar';\n  public static override styles = [styles, shared];\n\n  /* blazorSuppress */\n  public static register(): void {\n    registerComponent(IgcAvatarComponent);\n  }\n\n  private readonly _internals = addInternalsController(this, {\n    initialARIA: {\n      role: 'image',\n      ariaLabel: 'avatar',\n    },\n  });\n\n  @state()\n  private _hasError = false;\n\n  /**\n   * The image source to use.\n   * @attr\n   */\n  @property()\n  public src?: string;\n\n  /**\n   * Alternative text for the image.\n   * @attr\n   */\n  @property()\n  public alt?: string;\n\n  /**\n   * Initials to use as a fallback when no image is available.\n   * @attr\n   */\n  @property()\n  public initials?: string;\n\n  /**\n   * The shape of the avatar.\n   * @attr\n   */\n  @property({ reflect: true })\n  public shape: AvatarShape = 'square';\n\n  constructor() {\n    super();\n    addThemingController(this, all);\n  }\n\n  protected override willUpdate(changedProperties: PropertyValues<this>): void {\n    if (changedProperties.has('initials') || changedProperties.has('alt')) {\n      this._internals.setARIA({\n        ariaRoleDescription: this.alt ?? this.initials,\n      });\n    }\n\n    if (changedProperties.has('src')) {\n      this._hasError = false;\n    }\n  }\n\n  protected _handleError(): void {\n    this._hasError = true;\n  }\n\n  protected override render() {\n    return html`\n      <div part=\"base\">\n        ${\n          this.initials\n            ? html`<span part=\"initials\">${this.initials}</span>`\n            : html`<slot></slot>`\n        }\n        ${\n          this.src && !this._hasError\n            ? html`\n                <img\n                  part=\"image\"\n                  alt=${ifDefined(this.alt)}\n                  src=${ifDefined(this.src)}\n                  @error=${this._handleError}\n                />\n              `\n            : nothing\n        }\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-avatar': IgcAvatarComponent;\n  }\n}\n"]}

package/components/avatar/themes/themes.d.ts

@@ -1,2 +1,2 @@
-import type { Themes } from '../../../theming/types.js';
+import type { Themes } from '#theming/types.js';
 export declare const all: Themes;