igniteui-webcomponents 7.3.2 → 7.4.0

package/components/popover/position/floating.js

@@ -0,0 +1,146 @@
+import { hasStickyAncestor, isPopoverOpen, roundByDPR, setStyles, } from '#internals/utils/dom.js';
+import { applyArrowStyles, getPlacementSide } from './arrow.js';
+import { PopoverPositionStrategy } from './strategy.js';
+import { resolvePlacement } from './types.js';
+let floatingUiModule;
+let floatingUiLoader;
+function loadFloatingUi() {
+    floatingUiLoader ??= import('@floating-ui/dom').then((module) => {
+        floatingUiModule = module;
+        return module;
+    });
+    return floatingUiLoader;
+}
+export class FloatingPositionStrategy extends PopoverPositionStrategy {
+    constructor() {
+        super(...arguments);
+        this._positionId = 0;
+        this._attachId = 0;
+        this._strategy = 'absolute';
+    }
+    attach(target, container) {
+        super.attach(target, container);
+        const attachId = ++this._attachId;
+        this._middleware = undefined;
+        const reset = { visibility: '' };
+        if (!this._host.sameWidth) {
+            reset.width = '';
+        }
+        setStyles(container, reset);
+        this._strategy = hasStickyAncestor(target) ? 'fixed' : 'absolute';
+        if (floatingUiModule) {
+            this._startAutoUpdate(floatingUiModule, target, container);
+            return;
+        }
+        this._pendingLoad = loadFloatingUi().then((module) => {
+            if (attachId !== this._attachId) {
+                return undefined;
+            }
+            this._startAutoUpdate(module, target, container);
+            return this._pendingPosition;
+        });
+    }
+    async whenPositioned() {
+        await this._pendingLoad;
+        await this._pendingPosition;
+    }
+    show() {
+        if (this._container && !isPopoverOpen(this._container)) {
+            this._container.showPopover();
+        }
+    }
+    update() {
+        this._middleware = undefined;
+        if (!this._host.sameWidth && this._container) {
+            setStyles(this._container, { width: '' });
+        }
+        this._updatePosition();
+    }
+    detach() {
+        this._attachId++;
+        this._pendingLoad = undefined;
+        this._dispose?.();
+        this._dispose = undefined;
+    }
+    clear() {
+        if (this._container) {
+            setStyles(this._container, {
+                position: '',
+                left: '',
+                top: '',
+                transform: '',
+                width: '',
+                visibility: '',
+            });
+        }
+    }
+    _startAutoUpdate(floating, target, container) {
+        this._dispose = floating.autoUpdate(target, container, this._updatePosition.bind(this));
+    }
+    _createMiddleware(floating) {
+        const { offset, flip, sameWidth, arrow, scrollStrategy } = this._host;
+        const middleware = [];
+        if (offset !== 0) {
+            middleware.push(floating.offset(offset));
+        }
+        if (flip) {
+            middleware.push(floating.flip());
+        }
+        if (sameWidth) {
+            middleware.push(floating.size({
+                apply: ({ rects }) => {
+                    if (this._container) {
+                        setStyles(this._container, {
+                            width: `${rects.reference.width}px`,
+                        });
+                    }
+                },
+            }));
+        }
+        if (arrow) {
+            middleware.push(floating.arrow({ element: arrow }));
+        }
+        if (scrollStrategy !== 'scroll') {
+            middleware.push(floating.hide());
+        }
+        return middleware;
+    }
+    _updatePosition() {
+        this._pendingPosition = this._computePosition();
+        return this._pendingPosition;
+    }
+    async _computePosition() {
+        const container = this._container;
+        const floating = floatingUiModule;
+        if (!(this._host.open && container && floating)) {
+            return;
+        }
+        if (!this._target?.isConnected) {
+            this._onAnchorRemoved();
+            return;
+        }
+        const positionId = ++this._positionId;
+        const strategy = this._strategy;
+        const { x, y, middlewareData, placement } = await floating.computePosition(this._target, container, {
+            placement: resolvePlacement(this._host),
+            middleware: (this._middleware ??= this._createMiddleware(floating)),
+            strategy,
+        });
+        if (positionId !== this._positionId || !this._host.open) {
+            return;
+        }
+        setStyles(container, {
+            position: strategy,
+            left: '0',
+            top: '0',
+            transform: `translate(${roundByDPR(x)}px,${roundByDPR(y)}px)`,
+            visibility: middlewareData.hide?.referenceHidden ? 'hidden' : '',
+        });
+        const { arrow, arrowOffset } = this._host;
+        if (arrow && middlewareData.arrow) {
+            const { x: arrowX, y: arrowY } = middlewareData.arrow;
+            applyArrowStyles(arrow, getPlacementSide(placement), arrowX ?? arrowY ?? 0, arrowOffset);
+        }
+    }
+}
+//# sourceMappingURL=floating.js.map

package/components/popover/position/floating.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"floating.js","sourceRoot":"","sources":["../../../../src/components/popover/position/floating.ts"],"names":[],"mappings":"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","sourcesContent":["import type * as FloatingUi from '@floating-ui/dom';\nimport type { Middleware } from '@floating-ui/dom';\nimport {\n  hasStickyAncestor,\n  isPopoverOpen,\n  roundByDPR,\n  setStyles,\n} from '#internals/utils/dom.js';\nimport { applyArrowStyles, getPlacementSide } from './arrow.js';\nimport { PopoverPositionStrategy } from './strategy.js';\nimport { resolvePlacement } from './types.js';\n\ntype FloatingUiModule = typeof FloatingUi;\n\n/**\n * The module loads on demand, at the first attach of the fallback strategy. A\n * browser that uses the native strategy never loads it. The published build\n * is ESM, so the bundler of a consumer can split the code at this import.\n */\nlet floatingUiModule: FloatingUiModule | undefined;\nlet floatingUiLoader: Promise<FloatingUiModule> | undefined;\n\nfunction loadFloatingUi(): Promise<FloatingUiModule> {\n  floatingUiLoader ??= import('@floating-ui/dom').then((module) => {\n    floatingUiModule = module;\n    return module;\n  });\n\n  return floatingUiLoader;\n}\n\n/**\n * The fallback strategy, for a browser without the native CSS anchor\n * positioning. It positions the container with `@floating-ui/dom`.\n */\nexport class FloatingPositionStrategy extends PopoverPositionStrategy {\n  private _dispose?: () => void;\n  private _middleware?: Middleware[];\n  private _positionId = 0;\n\n  /** The module load of the current open cycle, with its first position. */\n  private _pendingLoad?: Promise<unknown>;\n\n  /** The position update that runs now. */\n  private _pendingPosition?: Promise<void>;\n\n  /**\n   * Identifies the open cycle. Each `attach` and `detach` increments it.\n   * Every `attach` chains a callback onto the shared module loader, so a\n   * callback of a replaced cycle must not start an update.\n   */\n  private _attachId = 0;\n\n  /**\n   * `fixed` if an ancestor of the anchor has `position: sticky`, `absolute`\n   * in all other cases. The value updates one time for each open cycle,\n   * because the calculation walks the DOM and forces a style reflow.\n   */\n  private _strategy: 'absolute' | 'fixed' = 'absolute';\n\n  public override attach(target: Element, container: HTMLElement): void {\n    super.attach(target, container);\n\n    const attachId = ++this._attachId;\n\n    this._middleware = undefined;\n\n    // Remove the inline styles of the previous open cycle. A popover that\n    // closes while the anchor is out of view keeps `visibility: hidden`, and\n    // the first `computePosition` clears it too late.\n    const reset: Partial<CSSStyleDeclaration> = { visibility: '' };\n\n    if (!this._host.sameWidth) {\n      reset.width = '';\n    }\n\n    setStyles(container, reset);\n\n    this._strategy = hasStickyAncestor(target) ? 'fixed' : 'absolute';\n\n    if (floatingUiModule) {\n      this._startAutoUpdate(floatingUiModule, target, container);\n      return;\n    }\n\n    // `autoUpdate` positions the container one time before it returns, so\n    // the pending position of that call completes the load.\n    this._pendingLoad = loadFloatingUi().then((module) => {\n      if (attachId !== this._attachId) {\n        return undefined;\n      }\n\n      this._startAutoUpdate(module, target, container);\n      return this._pendingPosition;\n    });\n  }\n\n  /**\n   * This strategy loads its module on demand and then positions\n   * asynchronously, so the host waits for both.\n   */\n  public override async whenPositioned(): Promise<void> {\n    await this._pendingLoad;\n    await this._pendingPosition;\n  }\n\n  public show(): void {\n    if (this._container && !isPopoverOpen(this._container)) {\n      this._container.showPopover();\n    }\n  }\n\n  public update(): void {\n    this._middleware = undefined;\n\n    if (!this._host.sameWidth && this._container) {\n      setStyles(this._container, { width: '' });\n    }\n\n    this._updatePosition();\n  }\n\n  public detach(): void {\n    this._attachId++;\n    this._pendingLoad = undefined;\n    this._dispose?.();\n    this._dispose = undefined;\n  }\n\n  public clear(): void {\n    if (this._container) {\n      setStyles(this._container, {\n        position: '',\n        left: '',\n        top: '',\n        transform: '',\n        width: '',\n        visibility: '',\n      });\n    }\n  }\n\n  private _startAutoUpdate(\n    floating: FloatingUiModule,\n    target: Element,\n    container: HTMLElement\n  ): void {\n    this._dispose = floating.autoUpdate(\n      target,\n      container,\n      this._updatePosition.bind(this)\n    );\n  }\n\n  private _createMiddleware(floating: FloatingUiModule): Middleware[] {\n    const { offset, flip, sameWidth, arrow, scrollStrategy } = this._host;\n    const middleware: Middleware[] = [];\n\n    if (offset !== 0) {\n      middleware.push(floating.offset(offset));\n    }\n\n    if (flip) {\n      middleware.push(floating.flip());\n    }\n\n    if (sameWidth) {\n      middleware.push(\n        floating.size({\n          apply: ({ rects }) => {\n            if (this._container) {\n              setStyles(this._container, {\n                width: `${rects.reference.width}px`,\n              });\n            }\n          },\n        })\n      );\n    }\n\n    if (arrow) {\n      middleware.push(floating.arrow({ element: arrow }));\n    }\n\n    // `hide()` matches `position-visibility: anchors-visible` of the native\n    // strategy. The `scroll` strategy adds no middleware, which matches\n    // `position-visibility: always`.\n    if (scrollStrategy !== 'scroll') {\n      middleware.push(floating.hide());\n    }\n\n    return middleware;\n  }\n\n  private _updatePosition(): Promise<void> {\n    this._pendingPosition = this._computePosition();\n    return this._pendingPosition;\n  }\n\n  private async _computePosition(): Promise<void> {\n    const container = this._container;\n    // A pending `attach` positions the container when the module loads, so an\n    // update before the first load can stop here.\n    const floating = floatingUiModule;\n\n    if (!(this._host.open && container && floating)) {\n      return;\n    }\n\n    if (!this._target?.isConnected) {\n      this._onAnchorRemoved();\n      return;\n    }\n\n    const positionId = ++this._positionId;\n    const strategy = this._strategy;\n\n    const { x, y, middlewareData, placement } = await floating.computePosition(\n      this._target,\n      container,\n      {\n        placement: resolvePlacement(this._host),\n        middleware: (this._middleware ??= this._createMiddleware(floating)),\n        strategy,\n      }\n    );\n\n    if (positionId !== this._positionId || !this._host.open) {\n      return;\n    }\n\n    setStyles(container, {\n      position: strategy,\n      left: '0',\n      top: '0',\n      transform: `translate(${roundByDPR(x)}px,${roundByDPR(y)}px)`,\n      visibility: middlewareData.hide?.referenceHidden ? 'hidden' : '',\n    });\n\n    const { arrow, arrowOffset } = this._host;\n\n    if (arrow && middlewareData.arrow) {\n      const { x: arrowX, y: arrowY } = middlewareData.arrow;\n\n      applyArrowStyles(\n        arrow,\n        getPlacementSide(placement),\n        arrowX ?? arrowY ?? 0,\n        arrowOffset\n      );\n    }\n  }\n}\n"]}

package/components/popover/position/native.d.ts

@@ -0,0 +1,45 @@
+import { PopoverPositionStrategy } from './strategy.js';
+/**
+ * True if the native CSS anchor positioning can position the `target`.
+ *
+ * The `source` option accepts only an HTMLElement, so the fallback positions
+ * an anchor such as an SVG element.
+ */
+export declare function shouldUseNativeAnchorPositioning(target: Element): target is HTMLElement;
+/**
+ * The position strategy that uses the native CSS anchor positioning.
+ *
+ * `showPopover({ source: target })` sets the implicit anchor. This is
+ * necessary, because `anchor-name` is tree-scoped and cannot cross the shadow
+ * boundary. The CSS rules then do all the positioning. They apply only with
+ * the `data-anchored` attribute, which this strategy owns.
+ */
+export declare class NativePositionStrategy extends PopoverPositionStrategy {
+    /** The anchor that the container currently shows against. */
+    private _shownSource?;
+    private _arrowFrame;
+    /**
+     * Detects the removal of the anchor from the DOM. The observer does not
+     * detect the removal of a shadow host above the root of the anchor, and
+     * the fallback strategy does not detect it either.
+     */
+    private readonly _anchorObserver;
+    attach(target: Element, container: HTMLElement): void;
+    show(): void;
+    hide(): void;
+    update(): void;
+    detach(): void;
+    clear(): void;
+    private _syncOffset;
+    /**
+     * The arrow needs JavaScript: CSS gives no signal about the position-try
+     * fallback, and a descendant of the container cannot reference the implicit
+     * anchor. The strategy calculates the side from the rectangles of the
+     * container and the anchor, on each scroll and resize.
+     */
+    private readonly _handleArrowInvalidation;
+    /** Keeps the invalidation listeners bound while an open popover has an arrow. */
+    private _syncArrowListeners;
+    private _scheduleArrowUpdate;
+    private _updateArrow;
+}

package/components/popover/position/native.js

@@ -0,0 +1,158 @@
+import { isServer } from 'lit';
+import { getRoot, isPopoverOpen } from '#internals/utils/dom.js';
+import { toggleEventListener } from '#internals/utils/events.js';
+import { clamp } from '#internals/utils/math.js';
+import { applyArrowStyles, getPlacementSide, isBlockSide, OPPOSITE_SIDE, } from './arrow.js';
+import { PopoverPositionStrategy } from './strategy.js';
+import { getForcedPopoverPositionStrategy, resolvePlacement, SCROLL_LISTENER_OPTIONS, } from './types.js';
+const OFFSET_PROPERTY = '--_igc-popover-offset';
+let nativeSupport;
+function supportsNativeAnchoring() {
+    nativeSupport ??= probeNativeAnchoring();
+    return nativeSupport;
+}
+function probeNativeAnchoring() {
+    if (isServer ||
+        typeof CSS === 'undefined' ||
+        !CSS.supports('anchor-name: --a')) {
+        return false;
+    }
+    const anchor = document.createElement('div');
+    const popover = document.createElement('div');
+    popover.popover = 'manual';
+    anchor.style.cssText = 'position:fixed;top:0;left:0;width:1px;height:1px';
+    popover.style.cssText =
+        'margin:0;inset:auto;border:none;padding:0;width:1px;height:1px;position-area:bottom span-right';
+    try {
+        document.body.append(anchor, popover);
+        popover.showPopover({ source: anchor });
+        const anchored = Math.abs(popover.getBoundingClientRect().top - 1) <= 1;
+        popover.hidePopover();
+        return anchored;
+    }
+    catch {
+        return false;
+    }
+    finally {
+        anchor.remove();
+        popover.remove();
+    }
+}
+export function shouldUseNativeAnchorPositioning(target) {
+    const forced = getForcedPopoverPositionStrategy();
+    if (forced) {
+        return forced === 'native';
+    }
+    return target instanceof HTMLElement && supportsNativeAnchoring();
+}
+export class NativePositionStrategy extends PopoverPositionStrategy {
+    constructor() {
+        super(...arguments);
+        this._arrowFrame = 0;
+        this._anchorObserver = new MutationObserver(() => {
+            if (this._target?.isConnected === false) {
+                this._onAnchorRemoved();
+            }
+        });
+        this._handleArrowInvalidation = () => {
+            this._scheduleArrowUpdate();
+        };
+    }
+    attach(target, container) {
+        super.attach(target, container);
+        container.toggleAttribute('data-anchored', true);
+        this._anchorObserver.observe(getRoot(target), {
+            childList: true,
+            subtree: true,
+        });
+    }
+    show() {
+        const container = this._container;
+        const target = this._target;
+        if (!(container && target)) {
+            return;
+        }
+        if (isPopoverOpen(container)) {
+            if (this._shownSource !== target) {
+                container.hidePopover();
+                container.showPopover({ source: target });
+                this._shownSource = target;
+            }
+        }
+        else {
+            container.showPopover({ source: target });
+            this._shownSource = target;
+        }
+        this.update();
+    }
+    hide() {
+        this._shownSource = undefined;
+        super.hide();
+    }
+    update() {
+        this._syncOffset();
+        this._syncArrowListeners();
+        this._scheduleArrowUpdate();
+    }
+    detach() {
+        this._anchorObserver.disconnect();
+        this._syncArrowListeners(false);
+    }
+    clear() {
+        if (this._container) {
+            this._container.toggleAttribute('data-anchored', false);
+            this._container.style.removeProperty(OFFSET_PROPERTY);
+        }
+    }
+    _syncOffset() {
+        this._container?.style.setProperty(OFFSET_PROPERTY, `${this._host.offset}px`);
+    }
+    _syncArrowListeners(active = this._host.arrow != null &&
+        this._container != null &&
+        isPopoverOpen(this._container)) {
+        toggleEventListener(window, active, 'scroll', this._handleArrowInvalidation, SCROLL_LISTENER_OPTIONS);
+        toggleEventListener(window, active, 'resize', this._handleArrowInvalidation);
+        if (!active) {
+            cancelAnimationFrame(this._arrowFrame);
+            this._arrowFrame = 0;
+        }
+    }
+    _scheduleArrowUpdate() {
+        if (this._arrowFrame || !this._host.arrow) {
+            return;
+        }
+        this._arrowFrame = requestAnimationFrame(() => {
+            this._arrowFrame = 0;
+            this._updateArrow();
+        });
+    }
+    _updateArrow() {
+        const { arrow, arrowOffset } = this._host;
+        const target = this._target;
+        const container = this._container;
+        if (!(arrow && target && container && isPopoverOpen(container))) {
+            return;
+        }
+        const anchorRect = target.getBoundingClientRect();
+        const containerRect = container.getBoundingClientRect();
+        const placementSide = getPlacementSide(resolvePlacement(this._host));
+        const block = isBlockSide(placementSide);
+        const main = block ? 'top' : 'left';
+        const mainSize = block ? 'height' : 'width';
+        const cross = block ? 'left' : 'top';
+        const crossSize = block ? 'width' : 'height';
+        const arrowSize = block ? arrow.offsetWidth : arrow.offsetHeight;
+        const containerSize = block
+            ? container.clientWidth
+            : container.clientHeight;
+        const nearSide = containerRect[main] + containerRect[mainSize] / 2 <
+            anchorRect[main] + anchorRect[mainSize] / 2;
+        const side = nearSide ? main : OPPOSITE_SIDE[main];
+        const distance = clamp(anchorRect[cross] +
+            anchorRect[crossSize] / 2 -
+            containerRect[cross] -
+            arrowSize / 2, 0, containerSize - arrowSize);
+        applyArrowStyles(arrow, side, distance, arrowOffset);
+    }
+}
+//# sourceMappingURL=native.js.map

package/components/popover/position/native.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"native.js","sourceRoot":"","sources":["../../../../src/components/popover/position/native.ts"],"names":[],"mappings":"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","sourcesContent":["import { isServer } from 'lit';\nimport { getRoot, isPopoverOpen } from '#internals/utils/dom.js';\nimport { toggleEventListener } from '#internals/utils/events.js';\nimport { clamp } from '#internals/utils/math.js';\nimport {\n  applyArrowStyles,\n  getPlacementSide,\n  isBlockSide,\n  OPPOSITE_SIDE,\n} from './arrow.js';\nimport { PopoverPositionStrategy } from './strategy.js';\nimport {\n  getForcedPopoverPositionStrategy,\n  resolvePlacement,\n  SCROLL_LISTENER_OPTIONS,\n} from './types.js';\n\nconst OFFSET_PROPERTY = '--_igc-popover-offset';\n\nlet nativeSupport: boolean | undefined;\n\n/**\n * Tests the native CSS anchor positioning one time, on the first use.\n *\n * `CSS.supports` cannot test the implicit anchor of `showPopover({ source })`.\n * Chromium 125 to 132 passes the CSS tests but ignores the `source` option.\n * The test therefore measures a real popover.\n */\nfunction supportsNativeAnchoring(): boolean {\n  nativeSupport ??= probeNativeAnchoring();\n  return nativeSupport;\n}\n\nfunction probeNativeAnchoring(): boolean {\n  if (\n    isServer ||\n    typeof CSS === 'undefined' ||\n    !CSS.supports('anchor-name: --a')\n  ) {\n    return false;\n  }\n\n  const anchor = document.createElement('div');\n  const popover = document.createElement('div');\n\n  popover.popover = 'manual';\n  anchor.style.cssText = 'position:fixed;top:0;left:0;width:1px;height:1px';\n  // `span-right` also tests the span keywords, which the aligned placements\n  // need. An engine without them drops the declaration and fails the\n  // measurement below.\n  popover.style.cssText =\n    'margin:0;inset:auto;border:none;padding:0;width:1px;height:1px;position-area:bottom span-right';\n\n  try {\n    document.body.append(anchor, popover);\n    popover.showPopover({ source: anchor });\n\n    // An anchored popover sits directly below the 1 pixel anchor. The\n    // tolerance allows for rounding. A browser that ignores `source` centers\n    // the popover, far away.\n    const anchored = Math.abs(popover.getBoundingClientRect().top - 1) <= 1;\n\n    popover.hidePopover();\n    return anchored;\n  } catch {\n    return false;\n  } finally {\n    anchor.remove();\n    popover.remove();\n  }\n}\n\n/**\n * True if the native CSS anchor positioning can position the `target`.\n *\n * The `source` option accepts only an HTMLElement, so the fallback positions\n * an anchor such as an SVG element.\n */\nexport function shouldUseNativeAnchorPositioning(\n  target: Element\n): target is HTMLElement {\n  const forced = getForcedPopoverPositionStrategy();\n\n  if (forced) {\n    return forced === 'native';\n  }\n\n  return target instanceof HTMLElement && supportsNativeAnchoring();\n}\n\n/**\n * The position strategy that uses the native CSS anchor positioning.\n *\n * `showPopover({ source: target })` sets the implicit anchor. This is\n * necessary, because `anchor-name` is tree-scoped and cannot cross the shadow\n * boundary. The CSS rules then do all the positioning. They apply only with\n * the `data-anchored` attribute, which this strategy owns.\n */\nexport class NativePositionStrategy extends PopoverPositionStrategy {\n  /** The anchor that the container currently shows against. */\n  private _shownSource?: Element;\n  private _arrowFrame = 0;\n\n  /**\n   * Detects the removal of the anchor from the DOM. The observer does not\n   * detect the removal of a shadow host above the root of the anchor, and\n   * the fallback strategy does not detect it either.\n   */\n  private readonly _anchorObserver = new MutationObserver(() => {\n    if (this._target?.isConnected === false) {\n      this._onAnchorRemoved();\n    }\n  });\n\n  public override attach(target: Element, container: HTMLElement): void {\n    super.attach(target, container);\n\n    container.toggleAttribute('data-anchored', true);\n    this._anchorObserver.observe(getRoot(target), {\n      childList: true,\n      subtree: true,\n    });\n  }\n\n  public show(): void {\n    const container = this._container;\n    const target = this._target;\n\n    if (!(container && target)) {\n      return;\n    }\n\n    // The browser binds the implicit anchor only in `showPopover`, so a new\n    // anchor needs a hide and a show. The focus moves out and then back.\n    if (isPopoverOpen(container)) {\n      if (this._shownSource !== target) {\n        container.hidePopover();\n        container.showPopover({ source: target as HTMLElement });\n        this._shownSource = target;\n      }\n    } else {\n      container.showPopover({ source: target as HTMLElement });\n      this._shownSource = target;\n    }\n\n    this.update();\n  }\n\n  public override hide(): void {\n    this._shownSource = undefined;\n    super.hide();\n  }\n\n  public update(): void {\n    this._syncOffset();\n    this._syncArrowListeners();\n    // The browser positions the container. The arrow follows in the next\n    // frame, when the content has its final size.\n    this._scheduleArrowUpdate();\n  }\n\n  public detach(): void {\n    this._anchorObserver.disconnect();\n    this._syncArrowListeners(false);\n  }\n\n  public clear(): void {\n    if (this._container) {\n      this._container.toggleAttribute('data-anchored', false);\n      this._container.style.removeProperty(OFFSET_PROPERTY);\n    }\n  }\n\n  private _syncOffset(): void {\n    this._container?.style.setProperty(\n      OFFSET_PROPERTY,\n      `${this._host.offset}px`\n    );\n  }\n\n  //#region Arrow support\n\n  /**\n   * The arrow needs JavaScript: CSS gives no signal about the position-try\n   * fallback, and a descendant of the container cannot reference the implicit\n   * anchor. The strategy calculates the side from the rectangles of the\n   * container and the anchor, on each scroll and resize.\n   */\n  private readonly _handleArrowInvalidation = (): void => {\n    this._scheduleArrowUpdate();\n  };\n\n  /** Keeps the invalidation listeners bound while an open popover has an arrow. */\n  private _syncArrowListeners(\n    active = this._host.arrow != null &&\n      this._container != null &&\n      isPopoverOpen(this._container)\n  ): void {\n    toggleEventListener(\n      window,\n      active,\n      'scroll',\n      this._handleArrowInvalidation,\n      SCROLL_LISTENER_OPTIONS\n    );\n    toggleEventListener(\n      window,\n      active,\n      'resize',\n      this._handleArrowInvalidation\n    );\n\n    if (!active) {\n      cancelAnimationFrame(this._arrowFrame);\n      this._arrowFrame = 0;\n    }\n  }\n\n  private _scheduleArrowUpdate(): void {\n    if (this._arrowFrame || !this._host.arrow) {\n      return;\n    }\n\n    this._arrowFrame = requestAnimationFrame(() => {\n      this._arrowFrame = 0;\n      this._updateArrow();\n    });\n  }\n\n  private _updateArrow(): void {\n    const { arrow, arrowOffset } = this._host;\n    const target = this._target;\n    const container = this._container;\n\n    if (!(arrow && target && container && isPopoverOpen(container))) {\n      return;\n    }\n\n    const anchorRect = target.getBoundingClientRect();\n    const containerRect = container.getBoundingClientRect();\n    const placementSide = getPlacementSide(resolvePlacement(this._host));\n    const block = isBlockSide(placementSide);\n\n    // The main axis carries the placement. The cross axis centers the arrow.\n    const main = block ? 'top' : 'left';\n    const mainSize = block ? 'height' : 'width';\n    const cross = block ? 'left' : 'top';\n    const crossSize = block ? 'width' : 'height';\n    const arrowSize = block ? arrow.offsetWidth : arrow.offsetHeight;\n    const containerSize = block\n      ? container.clientWidth\n      : container.clientHeight;\n\n    // Compare the centers to find the side after a flip fallback. This stays\n    // correct for an offset gap and for a negative offset that overlaps the\n    // anchor.\n    const nearSide =\n      containerRect[main] + containerRect[mainSize] / 2 <\n      anchorRect[main] + anchorRect[mainSize] / 2;\n    const side = nearSide ? main : OPPOSITE_SIDE[main];\n\n    // Center the arrow on the anchor. Keep the arrow inside the container.\n    const distance = clamp(\n      anchorRect[cross] +\n        anchorRect[crossSize] / 2 -\n        containerRect[cross] -\n        arrowSize / 2,\n      0,\n      containerSize - arrowSize\n    );\n\n    applyArrowStyles(arrow, side, distance, arrowOffset);\n  }\n\n  //#endregion\n}\n"]}

package/components/popover/position/strategy.d.ts

@@ -0,0 +1,37 @@
+import type { PopoverPositionHost } from './types.js';
+/**
+ * Positions the container of a popover against an anchor.
+ *
+ * For each open cycle the host calls `attach`, then `show`. The host calls
+ * `update` after a property changes, and `hide` to close the container.
+ */
+export declare abstract class PopoverPositionStrategy {
+    protected readonly _host: PopoverPositionHost;
+    /** The strategy calls this callback if the anchor leaves the DOM. */
+    protected readonly _onAnchorRemoved: () => void;
+    protected _target?: Element;
+    protected _container?: HTMLElement;
+    constructor(host: PopoverPositionHost, onAnchorRemoved: () => void);
+    /** Starts to position the `container` against the `target`. */
+    attach(target: Element, container: HTMLElement): void;
+    /**
+     * Resolves when the strategy positioned the container.
+     *
+     * A synchronous strategy needs no wait. The host awaits this promise in
+     * `getUpdateComplete`.
+     */
+    whenPositioned(): Promise<unknown>;
+    /** Shows the container in the top layer. */
+    abstract show(): void;
+    /** Hides the container. */
+    hide(): void;
+    /** Positions the container again after a property of the host changes. */
+    abstract update(): void;
+    /** Stops all observers, listeners and pending updates of the strategy. */
+    abstract detach(): void;
+    /**
+     * Removes the styles and the attributes of this strategy from the
+     * container. The host calls it when it changes the strategy.
+     */
+    abstract clear(): void;
+}

package/components/popover/position/strategy.js

@@ -0,0 +1,21 @@
+import { isPopoverOpen } from '#internals/utils/dom.js';
+export class PopoverPositionStrategy {
+    constructor(host, onAnchorRemoved) {
+        this._host = host;
+        this._onAnchorRemoved = onAnchorRemoved;
+    }
+    attach(target, container) {
+        this.detach();
+        this._target = target;
+        this._container = container;
+    }
+    whenPositioned() {
+        return Promise.resolve();
+    }
+    hide() {
+        if (this._container && isPopoverOpen(this._container)) {
+            this._container.hidePopover();
+        }
+    }
+}
+//# sourceMappingURL=strategy.js.map

package/components/popover/position/strategy.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"strategy.js","sourceRoot":"","sources":["../../../../src/components/popover/position/strategy.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AASxD,MAAM,OAAgB,uBAAuB;IAS3C,YAAY,IAAyB,EAAE,eAA2B;QAChE,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;QAClB,IAAI,CAAC,gBAAgB,GAAG,eAAe,CAAC;IAC1C,CAAC;IAGM,MAAM,CAAC,MAAe,EAAE,SAAsB;QACnD,IAAI,CAAC,MAAM,EAAE,CAAC;QACd,IAAI,CAAC,OAAO,GAAG,MAAM,CAAC;QACtB,IAAI,CAAC,UAAU,GAAG,SAAS,CAAC;IAC9B,CAAC;IAQM,cAAc;QACnB,OAAO,OAAO,CAAC,OAAO,EAAE,CAAC;IAC3B,CAAC;IAMM,IAAI;QACT,IAAI,IAAI,CAAC,UAAU,IAAI,aAAa,CAAC,IAAI,CAAC,UAAU,CAAC,EAAE,CAAC;YACtD,IAAI,CAAC,UAAU,CAAC,WAAW,EAAE,CAAC;QAChC,CAAC;IACH,CAAC;CAaF","sourcesContent":["import { isPopoverOpen } from '#internals/utils/dom.js';\nimport type { PopoverPositionHost } from './types.js';\n\n/**\n * Positions the container of a popover against an anchor.\n *\n * For each open cycle the host calls `attach`, then `show`. The host calls\n * `update` after a property changes, and `hide` to close the container.\n */\nexport abstract class PopoverPositionStrategy {\n  protected readonly _host: PopoverPositionHost;\n\n  /** The strategy calls this callback if the anchor leaves the DOM. */\n  protected readonly _onAnchorRemoved: () => void;\n\n  protected _target?: Element;\n  protected _container?: HTMLElement;\n\n  constructor(host: PopoverPositionHost, onAnchorRemoved: () => void) {\n    this._host = host;\n    this._onAnchorRemoved = onAnchorRemoved;\n  }\n\n  /** Starts to position the `container` against the `target`. */\n  public attach(target: Element, container: HTMLElement): void {\n    this.detach();\n    this._target = target;\n    this._container = container;\n  }\n\n  /**\n   * Resolves when the strategy positioned the container.\n   *\n   * A synchronous strategy needs no wait. The host awaits this promise in\n   * `getUpdateComplete`.\n   */\n  public whenPositioned(): Promise<unknown> {\n    return Promise.resolve();\n  }\n\n  /** Shows the container in the top layer. */\n  public abstract show(): void;\n\n  /** Hides the container. */\n  public hide(): void {\n    if (this._container && isPopoverOpen(this._container)) {\n      this._container.hidePopover();\n    }\n  }\n\n  /** Positions the container again after a property of the host changes. */\n  public abstract update(): void;\n\n  /** Stops all observers, listeners and pending updates of the strategy. */\n  public abstract detach(): void;\n\n  /**\n   * Removes the styles and the attributes of this strategy from the\n   * container. The host calls it when it changes the strategy.\n   */\n  public abstract clear(): void;\n}\n"]}

package/components/popover/position/types.d.ts

@@ -0,0 +1,26 @@
+import type { PopoverScrollStrategy } from '../../types.js';
+import type { PopoverPlacement } from '../popover.js';
+/**
+ * The capture phase catches the scroll of each ancestor element. The `scroll`
+ * event is not cancelable, so a passive listener does not delay the scroll.
+ */
+export declare const SCROLL_LISTENER_OPTIONS: AddEventListenerOptions;
+export type PopoverPositionStrategyMode = 'native' | 'floating';
+/** @internal Forces one position strategy. Only the tests call this function. */
+export declare function setPopoverPositionStrategy(mode?: PopoverPositionStrategyMode): void;
+/** @internal Returns the forced position strategy, if the tests set one. */
+export declare function getForcedPopoverPositionStrategy(): PopoverPositionStrategyMode | undefined;
+/** The inputs that a position strategy reads from the popover component. */
+export interface PopoverPositionHost {
+    /** The value is null or undefined at run time if the attribute is removed. */
+    readonly placement: PopoverPlacement | null | undefined;
+    readonly offset: number;
+    readonly flip: boolean;
+    readonly sameWidth: boolean;
+    readonly arrow: HTMLElement | null;
+    readonly arrowOffset: number;
+    readonly open: boolean;
+    readonly scrollStrategy: PopoverScrollStrategy;
+}
+/** Returns the placement, or the default if the attribute is removed. */
+export declare function resolvePlacement(host: PopoverPositionHost): PopoverPlacement;

package/components/popover/position/types.js

@@ -0,0 +1,15 @@
+export const SCROLL_LISTENER_OPTIONS = {
+    capture: true,
+    passive: true,
+};
+let forcedStrategy;
+export function setPopoverPositionStrategy(mode) {
+    forcedStrategy = mode;
+}
+export function getForcedPopoverPositionStrategy() {
+    return forcedStrategy;
+}
+export function resolvePlacement(host) {
+    return host.placement ?? 'bottom-start';
+}
+//# sourceMappingURL=types.js.map

package/components/popover/position/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/components/popover/position/types.ts"],"names":[],"mappings":"AAOA,MAAM,CAAC,MAAM,uBAAuB,GAA4B;IAC9D,OAAO,EAAE,IAAI;IACb,OAAO,EAAE,IAAI;CACd,CAAC;AAIF,IAAI,cAAuD,CAAC;AAG5D,MAAM,UAAU,0BAA0B,CACxC,IAAkC;IAElC,cAAc,GAAG,IAAI,CAAC;AACxB,CAAC;AAGD,MAAM,UAAU,gCAAgC;IAG9C,OAAO,cAAc,CAAC;AACxB,CAAC;AAgBD,MAAM,UAAU,gBAAgB,CAAC,IAAyB;IACxD,OAAO,IAAI,CAAC,SAAS,IAAI,cAAc,CAAC;AAC1C,CAAC","sourcesContent":["import type { PopoverScrollStrategy } from '../../types.js';\nimport type { PopoverPlacement } from '../popover.js';\n\n/**\n * The capture phase catches the scroll of each ancestor element. The `scroll`\n * event is not cancelable, so a passive listener does not delay the scroll.\n */\nexport const SCROLL_LISTENER_OPTIONS: AddEventListenerOptions = {\n  capture: true,\n  passive: true,\n};\n\nexport type PopoverPositionStrategyMode = 'native' | 'floating';\n\nlet forcedStrategy: PopoverPositionStrategyMode | undefined;\n\n/** @internal Forces one position strategy. Only the tests call this function. */\nexport function setPopoverPositionStrategy(\n  mode?: PopoverPositionStrategyMode\n): void {\n  forcedStrategy = mode;\n}\n\n/** @internal Returns the forced position strategy, if the tests set one. */\nexport function getForcedPopoverPositionStrategy():\n  | PopoverPositionStrategyMode\n  | undefined {\n  return forcedStrategy;\n}\n\n/** The inputs that a position strategy reads from the popover component. */\nexport interface PopoverPositionHost {\n  /** The value is null or undefined at run time if the attribute is removed. */\n  readonly placement: PopoverPlacement | null | undefined;\n  readonly offset: number;\n  readonly flip: boolean;\n  readonly sameWidth: boolean;\n  readonly arrow: HTMLElement | null;\n  readonly arrowOffset: number;\n  readonly open: boolean;\n  readonly scrollStrategy: PopoverScrollStrategy;\n}\n\n/** Returns the placement, or the default if the attribute is removed. */\nexport function resolvePlacement(host: PopoverPositionHost): PopoverPlacement {\n  return host.placement ?? 'bottom-start';\n}\n"]}

package/components/popover/themes/light/popover.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:contents}:popover-open{overflow:visible;isolation:isolate;height:-moz-fit-content;height:fit-content;inset:unset;border:none;padding:0;background:rgba(0,0,0,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:contents}:popover-open{overflow:visible;isolation:isolate;height:-moz-fit-content;height:fit-content;inset:unset;border:none;padding:0;background:rgba(0,0,0,0)}[data-anchored]{margin:0;position-visibility:anchors-visible}[data-anchored][data-placement=top]{position-area:top;justify-self:anchor-center}[data-anchored][data-placement=bottom]{position-area:bottom;justify-self:anchor-center}[data-anchored]:dir(ltr)[data-placement=top-start]{position-area:top span-right;justify-self:left}[data-anchored]:dir(ltr)[data-placement=top-end]{position-area:top span-left;justify-self:right}[data-anchored]:dir(ltr)[data-placement=bottom-start]{position-area:bottom span-right;justify-self:left}[data-anchored]:dir(ltr)[data-placement=bottom-end]{position-area:bottom span-left;justify-self:right}[data-anchored]:dir(rtl)[data-placement=top-start]{position-area:top span-left;justify-self:right}[data-anchored]:dir(rtl)[data-placement=top-end]{position-area:top span-right;justify-self:left}[data-anchored]:dir(rtl)[data-placement=bottom-start]{position-area:bottom span-left;justify-self:right}[data-anchored]:dir(rtl)[data-placement=bottom-end]{position-area:bottom span-right;justify-self:left}[data-anchored][data-placement=left]{position-area:left;align-self:anchor-center}[data-anchored][data-placement=left-start]{position-area:left span-bottom;align-self:self-start}[data-anchored][data-placement=left-end]{position-area:left span-top;align-self:self-end}[data-anchored][data-placement=right]{position-area:right;align-self:anchor-center}[data-anchored][data-placement=right-start]{position-area:right span-bottom;align-self:self-start}[data-anchored][data-placement=right-end]{position-area:right span-top;align-self:self-end}[data-anchored][data-placement^=top],[data-anchored][data-placement^=bottom]{margin-top:var(--_igc-popover-offset, 0);margin-bottom:var(--_igc-popover-offset, 0)}[data-anchored][data-placement^=left],[data-anchored][data-placement^=right]{margin-left:var(--_igc-popover-offset, 0);margin-right:var(--_igc-popover-offset, 0)}[data-anchored][data-scroll-strategy=scroll]{position-visibility:always}:host([flip]) [data-anchored][data-placement^=top],:host([flip]) [data-anchored][data-placement^=bottom]{position-try-fallbacks:flip-block}:host([flip]) [data-anchored][data-placement^=left],:host([flip]) [data-anchored][data-placement^=right]{position-try-fallbacks:flip-inline}:host([same-width]) [data-anchored]{width:anchor-size(width)}`;
 //# sourceMappingURL=popover.base.css.js.map

package/components/popover/themes/light/popover.base.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"popover.base.css.js","sourceRoot":"","sources":["../../../../../src/components/popover/themes/light/popover.base.css.ts"],"names":[],"mappings":"AACE,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,wnCAAwnC,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:contents}:popover-open{overflow:visible;isolation:isolate;height:-moz-fit-content;height:fit-content;inset:unset;border:none;padding:0;background:rgba(0,0,0,0)}`;\n  "]}
+{"version":3,"file":"popover.base.css.js","sourceRoot":"","sources":["../../../../../src/components/popover/themes/light/popover.base.css.ts"],"names":[],"mappings":"AACE,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,u3GAAu3G,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:contents}:popover-open{overflow:visible;isolation:isolate;height:-moz-fit-content;height:fit-content;inset:unset;border:none;padding:0;background:rgba(0,0,0,0)}[data-anchored]{margin:0;position-visibility:anchors-visible}[data-anchored][data-placement=top]{position-area:top;justify-self:anchor-center}[data-anchored][data-placement=bottom]{position-area:bottom;justify-self:anchor-center}[data-anchored]:dir(ltr)[data-placement=top-start]{position-area:top span-right;justify-self:left}[data-anchored]:dir(ltr)[data-placement=top-end]{position-area:top span-left;justify-self:right}[data-anchored]:dir(ltr)[data-placement=bottom-start]{position-area:bottom span-right;justify-self:left}[data-anchored]:dir(ltr)[data-placement=bottom-end]{position-area:bottom span-left;justify-self:right}[data-anchored]:dir(rtl)[data-placement=top-start]{position-area:top span-left;justify-self:right}[data-anchored]:dir(rtl)[data-placement=top-end]{position-area:top span-right;justify-self:left}[data-anchored]:dir(rtl)[data-placement=bottom-start]{position-area:bottom span-left;justify-self:right}[data-anchored]:dir(rtl)[data-placement=bottom-end]{position-area:bottom span-right;justify-self:left}[data-anchored][data-placement=left]{position-area:left;align-self:anchor-center}[data-anchored][data-placement=left-start]{position-area:left span-bottom;align-self:self-start}[data-anchored][data-placement=left-end]{position-area:left span-top;align-self:self-end}[data-anchored][data-placement=right]{position-area:right;align-self:anchor-center}[data-anchored][data-placement=right-start]{position-area:right span-bottom;align-self:self-start}[data-anchored][data-placement=right-end]{position-area:right span-top;align-self:self-end}[data-anchored][data-placement^=top],[data-anchored][data-placement^=bottom]{margin-top:var(--_igc-popover-offset, 0);margin-bottom:var(--_igc-popover-offset, 0)}[data-anchored][data-placement^=left],[data-anchored][data-placement^=right]{margin-left:var(--_igc-popover-offset, 0);margin-right:var(--_igc-popover-offset, 0)}[data-anchored][data-scroll-strategy=scroll]{position-visibility:always}:host([flip]) [data-anchored][data-placement^=top],:host([flip]) [data-anchored][data-placement^=bottom]{position-try-fallbacks:flip-block}:host([flip]) [data-anchored][data-placement^=left],:host([flip]) [data-anchored][data-placement^=right]{position-try-fallbacks:flip-inline}:host([same-width]) [data-anchored]{width:anchor-size(width)}`;\n  "]}

package/components/progress/circular-progress.d.ts

@@ -16,11 +16,6 @@ import { IgcProgressBaseComponent } from './base.js';
  * @csspart label - The circular progress label.
  * @csspart value - The circular progress label value.
  * @csspart indeterminate - The circular progress indeterminate state.
- * @csspart primary - The circular progress primary state.
- * @csspart danger - The circular progress error state.
- * @csspart warning - The circular progress warning state.
- * @csspart info - The circular progress info state.
- * @csspart success - The circular progress success state.
  */
 export default class IgcCircularProgressComponent extends IgcProgressBaseComponent {
     static readonly tagName = "igc-circular-progress";

package/components/progress/circular-progress.js.map

@@ -1 +1 @@
-{"version":3,"file":"circular-progress.js","sourceRoot":"","sources":["../../../src/components/progress/circular-progress.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAChC,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,iBAAiB,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAC7E,OAAO,EAAE,iBAAiB,EAAE,MAAM,oCAAoC,CAAC;AACvE,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AACjD,OAAO,EAAE,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AAChE,OAAO,EAAE,oBAAoB,EAAE,MAAM,gCAAgC,CAAC;AACtE,OAAO,EAAE,wBAAwB,EAAE,MAAM,WAAW,CAAC;AACrD,OAAO,4BAA4B,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,MAAM,EAAE,MAAM,iDAAiD,CAAC;AACzE,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,0DAA0D,CAAC;AAC5F,OAAO,EAAE,GAAG,EAAE,MAAM,6BAA6B,CAAC;AAElD,MAAM,MAAM,GAAG,iBAAiB,CAAC,mBAAmB,CAAC,CAAC;AAyBtD,MAAM,CAAC,OAAO,OAAO,4BAA6B,SAAQ,wBAAwB;aACzD,YAAO,GAAG,uBAAuB,AAA1B,CAA2B;aAClC,WAAM,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,AAAnB,CAAoB;IAG1C,MAAM,CAAC,QAAQ;QACpB,iBAAiB,CACf,4BAA4B,EAC5B,4BAA4B,CAC7B,CAAC;IACJ,CAAC;IAOD;QACE,KAAK,EAAE,CAAC;QANO,gBAAW,GAAG,MAAM,EAAE,CAAC;QACZ,WAAM,GAAG,iBAAiB,CAAC,IAAI,EAAE;YAC3D,KAAK,EAAE,QAAQ,CAAC,UAAU,CAAC;SAC5B,CAAC,CAAC;QAID,oBAAoB,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC;IAClC,CAAC;IAES,UAAU;QAClB,MAAM,SAAS,GAAG,IAAI,CAAC,MAAM,CAAC,mBAAmB,CAAC,UAAU,CAAC;YAC3D,CAAC,CAAC,IAAI,CAAC,MAAM;iBACR,mBAAmB,CAA+B,UAAU,EAAE;gBAC7D,QAAQ,EAAE,4BAA4B,CAAC,OAAO;aAC/C,CAAC;iBACD,GAAG,CACF,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,EAAE,CAC7B,GAAG,CAAA,gBAAgB,MAAM,eAAe,KAAK,iBAAiB,OAAO,IAAI,CAC5E;YACL,CAAC,CAAC,GAAG,CAAA;;;OAGJ,CAAC;QAEJ,OAAO,GAAG,CAAA;qBACO,OAAO,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,aAAa,EAAE,IAAI,CAAC,aAAa,EAAE,CAAC;sBAC1D,QAAQ,CAAC,EAAE,MAAM,EAAE,QAAQ,IAAI,CAAC,WAAW,GAAG,EAAE,CAAC;;;+BAGxC,IAAI,CAAC,WAAW;YACnC,SAAS;;;KAGhB,CAAC;IACJ,CAAC;IAEkB,MAAM;QACvB,OAAO,IAAI,CAAA;+BACgB,QAAQ,CAAC,IAAI,CAAC,UAAU,CAAC;oBACpC,OAAO,CAAC,EAAE,GAAG,EAAE,IAAI,EAAE,aAAa,EAAE,IAAI,CAAC,aAAa,EAAE,CAAC;YACjE,IAAI,CAAC,UAAU,EAAE;;;UAGnB,IAAI,CAAC,kBAAkB,EAAE;;KAE9B,CAAC;IACJ,CAAC","sourcesContent":["import { html, svg } from 'lit';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { addSlotController, setSlots } from '#internals/controllers/slot.js';\nimport { registerComponent } from '#internals/definitions/register.js';\nimport { partMap } from '#internals/part-map.js';\nimport { createIdGenerator } from '#internals/utils/strings.js';\nimport { addThemingController } from '#theming/theming-controller.js';\nimport { IgcProgressBaseComponent } from './base.js';\nimport IgcCircularGradientComponent from './circular-gradient.js';\nimport { styles } from './themes/circular/circular.progress.base.css.js';\nimport { styles as shared } from './themes/circular/shared/circular.progress.common.css.js';\nimport { all } from './themes/circular/themes.js';\n\nconst nextId = createIdGenerator('circular-progress');\n\n/**\n * A circular progress indicator used to express unspecified wait time or display\n * the length of a process.\n *\n * @element igc-circular-progress\n *\n * @slot - The text area container.\n * @slot gradient - Customize the progress bar in order to use a color gradient instead of a solid color. Accepts circular gradient elements.\n *\n * @csspart svg - The circular progress SVG element.\n * @csspart gradient_start - The circular progress linear-gradient start color.\n * @csspart gradient_end - The circular progress linear-gradient end color.\n * @csspart track - The circular progress ring track area.\n * @csspart fill - The circular progress indicator area.\n * @csspart label - The circular progress label.\n * @csspart value - The circular progress label value.\n * @csspart indeterminate - The circular progress indeterminate state.\n * @csspart primary - The circular progress primary state.\n * @csspart danger - The circular progress error state.\n * @csspart warning - The circular progress warning state.\n * @csspart info - The circular progress info state.\n * @csspart success - The circular progress success state.\n */\nexport default class IgcCircularProgressComponent extends IgcProgressBaseComponent {\n  public static readonly tagName = 'igc-circular-progress';\n  public static override styles = [styles, shared];\n\n  /* blazorSuppress */\n  public static register(): void {\n    registerComponent(\n      IgcCircularProgressComponent,\n      IgcCircularGradientComponent\n    );\n  }\n\n  private readonly _gradientId = nextId();\n  protected override readonly _slots = addSlotController(this, {\n    slots: setSlots('gradient'),\n  });\n\n  constructor() {\n    super();\n    addThemingController(this, all);\n  }\n\n  protected _renderSvg() {\n    const gradients = this._slots.hasAssignedElements('gradient')\n      ? this._slots\n          .getAssignedElements<IgcCircularGradientComponent>('gradient', {\n            selector: IgcCircularGradientComponent.tagName,\n          })\n          .map(\n            ({ offset, color, opacity }) =>\n              svg`<stop offset=${offset} stop-color=${color} stop-opacity=${opacity}/>`\n          )\n      : svg`\n        <stop offset=\"0%\" part=\"gradient_start\" />\n        <stop offset=\"100%\" part=\"gradient_end\" />\n      `;\n\n    return svg`\n      <circle part=${partMap({ track: true, indeterminate: this.indeterminate })}/>\n      <circle style=${styleMap({ stroke: `url(#${this._gradientId})` })} part=\"fill\"/>\n\n      <defs>\n          <linearGradient id=${this._gradientId} gradientTransform=\"rotate(90)\">\n          ${gradients}\n          </linearGradient>\n      </defs>\n    `;\n  }\n\n  protected override render() {\n    return html`\n      <div part=\"base\" style=${styleMap(this._styleInfo)}>\n        <svg part=${partMap({ svg: true, indeterminate: this.indeterminate })}>\n          ${this._renderSvg()}\n        </svg>\n        <slot name=\"gradient\"></slot>\n        ${this._renderDefaultSlot()}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-circular-progress': IgcCircularProgressComponent;\n  }\n}\n"]}
+{"version":3,"file":"circular-progress.js","sourceRoot":"","sources":["../../../src/components/progress/circular-progress.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAChC,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,iBAAiB,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAC7E,OAAO,EAAE,iBAAiB,EAAE,MAAM,oCAAoC,CAAC;AACvE,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AACjD,OAAO,EAAE,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AAChE,OAAO,EAAE,oBAAoB,EAAE,MAAM,gCAAgC,CAAC;AACtE,OAAO,EAAE,wBAAwB,EAAE,MAAM,WAAW,CAAC;AACrD,OAAO,4BAA4B,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,MAAM,EAAE,MAAM,iDAAiD,CAAC;AACzE,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,0DAA0D,CAAC;AAC5F,OAAO,EAAE,GAAG,EAAE,MAAM,6BAA6B,CAAC;AAElD,MAAM,MAAM,GAAG,iBAAiB,CAAC,mBAAmB,CAAC,CAAC;AAoBtD,MAAM,CAAC,OAAO,OAAO,4BAA6B,SAAQ,wBAAwB;aACzD,YAAO,GAAG,uBAAuB,AAA1B,CAA2B;aAClC,WAAM,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,AAAnB,CAAoB;IAG1C,MAAM,CAAC,QAAQ;QACpB,iBAAiB,CACf,4BAA4B,EAC5B,4BAA4B,CAC7B,CAAC;IACJ,CAAC;IAOD;QACE,KAAK,EAAE,CAAC;QANO,gBAAW,GAAG,MAAM,EAAE,CAAC;QACZ,WAAM,GAAG,iBAAiB,CAAC,IAAI,EAAE;YAC3D,KAAK,EAAE,QAAQ,CAAC,UAAU,CAAC;SAC5B,CAAC,CAAC;QAID,oBAAoB,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC;IAClC,CAAC;IAES,UAAU;QAClB,MAAM,SAAS,GAAG,IAAI,CAAC,MAAM,CAAC,mBAAmB,CAAC,UAAU,CAAC;YAC3D,CAAC,CAAC,IAAI,CAAC,MAAM;iBACR,mBAAmB,CAA+B,UAAU,EAAE;gBAC7D,QAAQ,EAAE,4BAA4B,CAAC,OAAO;aAC/C,CAAC;iBACD,GAAG,CACF,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,EAAE,CAC7B,GAAG,CAAA,gBAAgB,MAAM,eAAe,KAAK,iBAAiB,OAAO,IAAI,CAC5E;YACL,CAAC,CAAC,GAAG,CAAA;;;OAGJ,CAAC;QAEJ,OAAO,GAAG,CAAA;qBACO,OAAO,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,aAAa,EAAE,IAAI,CAAC,aAAa,EAAE,CAAC;sBAC1D,QAAQ,CAAC,EAAE,MAAM,EAAE,QAAQ,IAAI,CAAC,WAAW,GAAG,EAAE,CAAC;;;+BAGxC,IAAI,CAAC,WAAW;YACnC,SAAS;;;KAGhB,CAAC;IACJ,CAAC;IAEkB,MAAM;QACvB,OAAO,IAAI,CAAA;+BACgB,QAAQ,CAAC,IAAI,CAAC,UAAU,CAAC;oBACpC,OAAO,CAAC,EAAE,GAAG,EAAE,IAAI,EAAE,aAAa,EAAE,IAAI,CAAC,aAAa,EAAE,CAAC;YACjE,IAAI,CAAC,UAAU,EAAE;;;UAGnB,IAAI,CAAC,kBAAkB,EAAE;;KAE9B,CAAC;IACJ,CAAC","sourcesContent":["import { html, svg } from 'lit';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { addSlotController, setSlots } from '#internals/controllers/slot.js';\nimport { registerComponent } from '#internals/definitions/register.js';\nimport { partMap } from '#internals/part-map.js';\nimport { createIdGenerator } from '#internals/utils/strings.js';\nimport { addThemingController } from '#theming/theming-controller.js';\nimport { IgcProgressBaseComponent } from './base.js';\nimport IgcCircularGradientComponent from './circular-gradient.js';\nimport { styles } from './themes/circular/circular.progress.base.css.js';\nimport { styles as shared } from './themes/circular/shared/circular.progress.common.css.js';\nimport { all } from './themes/circular/themes.js';\n\nconst nextId = createIdGenerator('circular-progress');\n\n/**\n * A circular progress indicator used to express unspecified wait time or display\n * the length of a process.\n *\n * @element igc-circular-progress\n *\n * @slot - The text area container.\n * @slot gradient - Customize the progress bar in order to use a color gradient instead of a solid color. Accepts circular gradient elements.\n *\n * @csspart svg - The circular progress SVG element.\n * @csspart gradient_start - The circular progress linear-gradient start color.\n * @csspart gradient_end - The circular progress linear-gradient end color.\n * @csspart track - The circular progress ring track area.\n * @csspart fill - The circular progress indicator area.\n * @csspart label - The circular progress label.\n * @csspart value - The circular progress label value.\n * @csspart indeterminate - The circular progress indeterminate state.\n */\nexport default class IgcCircularProgressComponent extends IgcProgressBaseComponent {\n  public static readonly tagName = 'igc-circular-progress';\n  public static override styles = [styles, shared];\n\n  /* blazorSuppress */\n  public static register(): void {\n    registerComponent(\n      IgcCircularProgressComponent,\n      IgcCircularGradientComponent\n    );\n  }\n\n  private readonly _gradientId = nextId();\n  protected override readonly _slots = addSlotController(this, {\n    slots: setSlots('gradient'),\n  });\n\n  constructor() {\n    super();\n    addThemingController(this, all);\n  }\n\n  protected _renderSvg() {\n    const gradients = this._slots.hasAssignedElements('gradient')\n      ? this._slots\n          .getAssignedElements<IgcCircularGradientComponent>('gradient', {\n            selector: IgcCircularGradientComponent.tagName,\n          })\n          .map(\n            ({ offset, color, opacity }) =>\n              svg`<stop offset=${offset} stop-color=${color} stop-opacity=${opacity}/>`\n          )\n      : svg`\n        <stop offset=\"0%\" part=\"gradient_start\" />\n        <stop offset=\"100%\" part=\"gradient_end\" />\n      `;\n\n    return svg`\n      <circle part=${partMap({ track: true, indeterminate: this.indeterminate })}/>\n      <circle style=${styleMap({ stroke: `url(#${this._gradientId})` })} part=\"fill\"/>\n\n      <defs>\n          <linearGradient id=${this._gradientId} gradientTransform=\"rotate(90)\">\n          ${gradients}\n          </linearGradient>\n      </defs>\n    `;\n  }\n\n  protected override render() {\n    return html`\n      <div part=\"base\" style=${styleMap(this._styleInfo)}>\n        <svg part=${partMap({ svg: true, indeterminate: this.indeterminate })}>\n          ${this._renderSvg()}\n        </svg>\n        <slot name=\"gradient\"></slot>\n        ${this._renderDefaultSlot()}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-circular-progress': IgcCircularProgressComponent;\n  }\n}\n"]}

package/components/qr-code/qr-code.d.ts

@@ -152,7 +152,7 @@ export default class IgcQrCodeComponent extends LitElement {
      * is not a positive finite number, or when the resulting image exceeds the maximum canvas size.
      */
     toImage(options?: QrCodeExportOptions): Promise<File>;
-    protected render(): typeof nothing | import("lit-html").TemplateResult<1>;
+    protected render(): import("lit-html").TemplateResult<1> | typeof nothing;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/components/radio/radio.d.ts

@@ -49,12 +49,12 @@ export default class IgcRadioComponent extends IgcRadioComponent_base {
     private _tabIndex;
     /** All radios of the group, that is having the same name property, in DOM order. */
     private get _radios();
-    /** All radios of the group except the one that invokes the getter. */
-    private get _siblings();
     /** All radios of the group that are not disabled. */
     private get _activeRadios();
-    /** All radios of the group that are checked. */
-    private get _checkedRadios();
+    /** All radios of the group except this one. Yields, so it copies nothing. */
+    private _siblings;
+    /** Whether this radio is the last checked one of its group. */
+    private _isLastChecked;
     set required(value: boolean);
     get required(): boolean;
     /**