import "./spinner-DIlC--PL.js";
import { CSSResultGroup, PropertyValues } from "lit";
import { SigveloElement } from "@mcp-b/wc-support/base/sigvelo-element";
//#region src/components/infinite-scroller/infinite-scroller.d.ts
/**
 * <sigvelo-infinite-scroller>
 *
 * @summary Provides an accessible container for continuously loading content feeds.
 * @tag sigvelo-infinite-scroller
 * @documentation https://design-system.sigvelo.com/docs/components/infinite-scroller
 * @status stable
 * @since 1.0
 *
 * @dependency sigvelo-spinner
 *
 * @slot - The default slot for feed items. Each item should have role="article" and be focusable.
 *
 * @event sigvelo-load-more - Emitted when scrolling reaches the threshold and more items should be loaded.
 *
 * @cssstate loading - Applied when the infinite scroller is loading more content.
 * @cssstate complete - Applied when the infinite scroller has no more content to load.
 *
 * @example Default
 * Infinite scrollers load new content automatically as users scroll down a feed. Instead of clicking "Next" buttons, content continuously appears as they approach the bottom. Infinite scroller follows the ARIA APG Infinite Scrolling Feed pattern for accessibility.
 *
 * ```html
 * <sigvelo-infinite-scroller id="infinite__overview">
 *   <div class="item">Item 1</div>
 *   <div class="item">Item 2</div>
 *   <div class="item">Item 3</div>
 *   <div class="item">Item 4</div>
 *   <div class="item">Item 5</div>
 *   <div class="item">Item 6</div>
 *   <div class="item">Item 7</div>
 *   <div class="item">Item 8</div>
 *   <div class="item">Item 9</div>
 *   <div class="item">Item 10</div>
 *   <div class="item">Item 11</div>
 *   <div class="item">Item 12</div>
 *   <div class="item">Item 13</div>
 *   <div class="item">Item 14</div>
 *   <div class="item">Item 15</div>
 *   <div class="item">Item 16</div>
 *   <div class="item">Item 17</div>
 *   <div class="item">Item 18</div>
 *   <div class="item">Item 19</div>
 *   <div class="item">Item 20</div>
 * </sigvelo-infinite-scroller>
 *
 * <script>
 *   const infiniteScroll = document.getElementById('infinite__overview');
 *   let count = infiniteScroll.querySelectorAll('.item').length;
 *
 *   infiniteScroll.addEventListener('sigvelo-load-more', async event => {
 *     // Simulate fetching content from a server
 *     setTimeout(() => {
 *       for (let i = 0; i < 20; i++) {
 *         const item = document.createElement('div');
 *         item.classList.add('item');
 *         item.textContent = `Item ${++count}`;
 *         infiniteScroll.append(item);
 *       }
 *
 *       // We'll pretend there's nothing more to load after 100
 *       if (count >= 100) {
 *         infiniteScroll.complete();
 *         return;
 *       }
 *     }, 300);
 *   });
 * </script>
 *
 * <style>
 *   #infinite__overview {
 *     .item {
 *       padding: 1rem 1.5rem;
 *
 *       &:not(:last-child) {
 *         border-bottom: solid 1px var(--sigvelo-color-neutral-border-subtle);
 *       }
 *     }
 *   }
 * </style>
 * ```
 *
 * @example Providing initial content
 * You can slot just about any content you want into an infinite scroller container. The component watches the scroll position and dispatches the `sigvelo-load-more` event when users get close to the bottom.
 *
 * ```html
 * <sigvelo-infinite-scroller label="News Feed">
 *   <!-- Initial content -->
 *   <article class="feed-item">First item</article>
 *   <article class="feed-item">Second item</article>
 *   <article class="feed-item">Third item</article>
 *   ...
 * </sigvelo-infinite-scroller>
 * ```
 *
 * @example Loading more content
 * In your code, listen for the `sigvelo-load-more` event. This is your cue to asynchronously load more content, e.g. from the server, and append it to the container. If no more content is available, call the component's `complete()` method to disable further loading.
 *
 * ```js
 * const infiniteScroll = document.querySelector('sigvelo-infinite-scroll');
 * let currentPage = 1;
 *
 * infiniteScroll.addEventListener('sigvelo-load-more', async () => {
 *   try {
 *     // Fetch new data from your API
 *     const response = await fetch(`/api/posts?page=${currentPage}`);
 *     const posts = await response.json();
 *
 *     // Append posts to the feed
 *     posts.forEach(post => {
 *       const item = document.createElement('article');
 *       item.className = 'feed-item';
 *       item.innerHTML = `<h3>${post.title}</h3><p>${post.excerpt}</p>`;
 *       infiniteScroll.appendChild(item);
 *     });
 *
 *     currentPage++;
 *
 *     // Stop loading when no more content is available
 *     if (posts.length === 0) {
 *       infiniteScroll.complete();
 *     }
 *   } catch (error) {
 *     console.error('Failed to load more items:', error);
 *   }
 * });
 * ```
 *
 * To reenable loading, append additional items to the container or perform any DOM action that results in a `slotchange`.
 *
 * **Note:** When the container is empty initially or if the items don't cause the container to scroll, the `sigvelo-load-more` event will be dispatched immediately to request more items. This behavior allows the entire feed to load, regardless of content or screen size.
 */
declare class SigveloInfiniteScroller extends SigveloElement {
  static styles: CSSResultGroup;
  defaultSlot: HTMLSlotElement;
  isLoading: boolean;
  isComplete: boolean;
  private contentCheckFrameId;
  private localize;
  private thresholdInPixels;
  private thresholdInPercent;
  /** An accessible label for the feed. */
  label: string;
  /**
   * The scroll threshold at which to trigger loading more items. Accepts percentages (e.g., "20%") or pixels
   * (e.g., "200px").
   */
  threshold: string;
  connectedCallback(): void;
  disconnectedCallback(): void;
  updated(changedProperties: PropertyValues<this>): void;
  private parseThreshold;
  private checkScrollThreshold;
  private handleScroll;
  private handleSlotChange;
  private isScrollable;
  private scheduleContentCheck;
  /**
   * Mark the feed as completed, preventing further load events. Changing content in the default slot will reset this
   * and re-enable infinite scrolling.
   */
  complete(): void;
  render(): import("lit-html").TemplateResult<1>;
}
declare global {
  interface HTMLElementTagNameMap {
    "sigvelo-infinite-scroller": SigveloInfiniteScroller;
  }
}
//#endregion
export { SigveloInfiniteScroller as t };