@mcp-b/web-components 0.2.0

package/dist/index.js

@@ -0,0 +1,92 @@
+import "./translations/en.js";
+import { registerIconLibrary, unregisterIconLibrary } from "./utilities/icon-library.js";
+import { t as SigveloIcon } from "./icon-BPVkNsY4.js";
+import { t as SigveloAccordionItem } from "./accordion-item-DvPfhpm8.js";
+import { t as SigveloAccordion } from "./accordion-zDr-Br4V.js";
+import { t as SigveloActionBar } from "./action-bar-CjN_UcnP.js";
+import { t as SigveloAlertDialog } from "./alert-dialog-D25Oi_TS.js";
+import { t as SigveloDialog } from "./dialog-Cx46HMaZ.js";
+import { t as SigveloAvatar } from "./avatar-CRP0kW3x.js";
+import { t as SigveloBadge } from "./badge-Ct95U4UO.js";
+import { t as SigveloBreadcrumb } from "./breadcrumb-uURhiqWJ.js";
+import { t as SigveloBreadcrumbItem } from "./breadcrumb-item-P5pdq_gE.js";
+import { t as SigveloSpinner } from "./spinner-C04Dmc0H.js";
+import { t as SigveloButton } from "./button-5k_aL_gD.js";
+import { t as SigveloButtonGroup } from "./button-group-BydvJTQy.js";
+import { t as SigveloCallout } from "./callout-B8zTf8Go.js";
+import { t as SigveloCard } from "./card-DIg1-X2G.js";
+import { t as SigveloCarouselItem } from "./carousel-item-B5-X31Ha.js";
+import { t as SigveloCarousel } from "./carousel-Bktu7wrD.js";
+import { t as SigveloCheckbox } from "./checkbox-D6r7PVPj.js";
+import { t as SigveloCheckboxGroup } from "./checkbox-group-CLvNAO_F.js";
+import { SigveloCopy } from "./components/copy/copy.js";
+import { t as SigveloTooltip } from "./tooltip-DbyoPFNe.js";
+import { t as SigveloSlider } from "./slider-B90Il7x3.js";
+import { t as SigveloTextField } from "./text-field-inpJfp0A.js";
+import { t as SigveloColorPicker } from "./color-picker-adwOmtRl.js";
+import { t as SigveloColorInput } from "./color-input-DPIxi9wR.js";
+import { t as SigveloComboboxItem } from "./combobox-item-yM6tDrGG.js";
+import { t as SigveloCombobox } from "./combobox-B6al50UG.js";
+import { t as SigveloComparison } from "./comparison-CyqKrCN-.js";
+import { t as SigveloDate } from "./date-CJPmOdi9.js";
+import { n as SigveloRowSelectEvent, t as SigveloDataTable } from "./data-table-CITa8DSn.js";
+import { t as SigveloDivider } from "./divider-9vNsfHW8.js";
+import { t as SigveloDropdownItem } from "./dropdown-item-i77cRuN6.js";
+import { t as SigveloDropdown } from "./dropdown-BXSKpVX9.js";
+import { t as SigveloEmptyState } from "./empty-state-BLWjtKUo.js";
+import { t as SigveloEmptyResult } from "./empty-result-B2ln1yFL.js";
+import { t as SigveloExpander } from "./expander-Bwvxj6Oa.js";
+import { t as SigveloField } from "./field-BEyS909F.js";
+import { t as SigveloFileInput } from "./file-input-BEumLJjg.js";
+import { n as SigveloFilterChangeEvent, t as SigveloFilterBar } from "./filter-bar-Dcs67aXo.js";
+import { t as SigveloFormSection } from "./form-section-BchPetkj.js";
+import { t as SigveloInclude } from "./include-qNUh_6kT.js";
+import { t as SigveloInfiniteScroller } from "./infinite-scroller-BmmtnWNt.js";
+import { t as SigveloIntersectionObserver } from "./intersection-observer-B6TciOAQ.js";
+import { t as SigveloListboxItem } from "./listbox-item-CwD9s3VY.js";
+import { t as SigveloListbox } from "./listbox-C3XXRWGX.js";
+import { t as SigveloLoremIpsum } from "./lorem-ipsum-B2x3V-v8.js";
+import { t as SigveloMeter } from "./meter-BIDyjwFp.js";
+import { t as SigveloMetric } from "./metric-DbuOcDp_.js";
+import { t as SigveloMetricGrid } from "./metric-grid-C2Pb0Zl3.js";
+import { t as SigveloMutationObserver } from "./mutation-observer-DS8EBuOp.js";
+import { t as SigveloNavicon } from "./navicon-_yMHY27-.js";
+import { t as SigveloNumber } from "./number-BNtNXNF3.js";
+import { t as SigveloNumberField } from "./number-field-BQHB7UYo.js";
+import { t as SigveloPagination } from "./pagination-DuKPuzdb.js";
+import { t as SigveloPopover } from "./popover-DJBrJ0za.js";
+import { t as SigveloPreviewCard } from "./preview-card-C7H1FPfd.js";
+import { t as SigveloProgress } from "./progress-DzVk260j.js";
+import { t as SigveloRadioItem } from "./radio-item-DIrUStAX.js";
+import { t as SigveloRadio } from "./radio-BtDG9xJM.js";
+import { t as SigveloRandomContent } from "./random-content-BwiirXdG.js";
+import { t as SigveloRating } from "./rating-C1BcJDIO.js";
+import { t as SigveloResizeObserver } from "./resize-observer-DcrLhddo.js";
+import { t as SigveloScrollArea } from "./scroll-area-COc1857S.js";
+import { t as SigveloScroller } from "./scroller-LYgBVyfY.js";
+import { t as SigveloSearchList } from "./search-list-Clmrg8EV.js";
+import { t as SigveloSelect } from "./select-DLIaRnA4.js";
+import { t as SigveloSelectionSummary } from "./selection-summary-BVnNJ8Lw.js";
+import { t as SigveloShare } from "./share-bsgXZCl7.js";
+import { t as SigveloSlideActivator } from "./slide-activator-DlxQt9R9.js";
+import { t as SigveloSparkline } from "./sparkline-CcpTaJ_Z.js";
+import { t as SigveloSplitter } from "./splitter-MnD4In9H.js";
+import { t as SigveloSwitch } from "./switch-CPaEKbog.js";
+import { t as SigveloTab } from "./tab-C-FtuNmh.js";
+import { t as SigveloTabPanel } from "./tab-panel-BaBl6eep.js";
+import { t as SigveloTabList } from "./tab-list-B_Ye_Oj9.js";
+import { t as SigveloTextArea } from "./text-area-Czixaz-_.js";
+import { t as SigveloTextMask } from "./text-mask-DDEurj90.js";
+import { t as SigveloTimedContent } from "./timed-content-pvEP4l5V.js";
+import { t as SigveloToastItem } from "./toast-item-IS8IFUEg.js";
+import { t as SigveloTransitionGroup } from "./transition-group-3hnAnwSd.js";
+import { t as SigveloToast } from "./toast-BnZaIg6Z.js";
+import { t as SigveloToggleIcon } from "./toggle-icon-4oLDeEt4.js";
+import { t as SigveloToggleTag } from "./toggle-tag-1sfTFJtg.js";
+import { t as SigveloToolbar } from "./toolbar-CEZ0-F-X.js";
+import { t as SigveloZoomableFrame } from "./zoomable-frame-Cldvj5sE.js";
+import "./components/index.js";
+import { allDefined } from "@mcp-b/wc-support/utilities/defined";
+import { getLibraryPath, setLibraryPath } from "@mcp-b/wc-support/utilities/library";
+import { discoverElements, preventTurboFouce, startLoader, stopLoader } from "@mcp-b/wc-support/utilities/loader";
+export { SigveloAccordion, SigveloAccordionItem, SigveloActionBar, SigveloAlertDialog, SigveloAvatar, SigveloBadge, SigveloBreadcrumb, SigveloBreadcrumbItem, SigveloButton, SigveloButtonGroup, SigveloCallout, SigveloCard, SigveloCarousel, SigveloCarouselItem, SigveloCheckbox, SigveloCheckboxGroup, SigveloColorInput, SigveloColorPicker, SigveloCombobox, SigveloComboboxItem, SigveloComparison, SigveloCopy, SigveloDataTable, SigveloDate, SigveloDialog, SigveloDivider, SigveloDropdown, SigveloDropdownItem, SigveloEmptyResult, SigveloEmptyState, SigveloExpander, SigveloField, SigveloFileInput, SigveloFilterBar, SigveloFilterChangeEvent, SigveloFormSection, SigveloIcon, SigveloInclude, SigveloInfiniteScroller, SigveloIntersectionObserver, SigveloListbox, SigveloListboxItem, SigveloLoremIpsum, SigveloMeter, SigveloMetric, SigveloMetricGrid, SigveloMutationObserver, SigveloNavicon, SigveloNumber, SigveloNumberField, SigveloPagination, SigveloPopover, SigveloPreviewCard, SigveloProgress, SigveloRadio, SigveloRadioItem, SigveloRandomContent, SigveloRating, SigveloResizeObserver, SigveloRowSelectEvent, SigveloScrollArea, SigveloScroller, SigveloSearchList, SigveloSelect, SigveloSelectionSummary, SigveloShare, SigveloSlideActivator, SigveloSlider, SigveloSparkline, SigveloSpinner, SigveloSplitter, SigveloSwitch, SigveloTab, SigveloTabList, SigveloTabPanel, SigveloTextArea, SigveloTextField, SigveloTextMask, SigveloTimedContent, SigveloToast, SigveloToastItem, SigveloToggleIcon, SigveloToggleTag, SigveloToolbar, SigveloTooltip, SigveloTransitionGroup, SigveloZoomableFrame, allDefined, discoverElements, getLibraryPath, preventTurboFouce, registerIconLibrary, setLibraryPath, startLoader, stopLoader, unregisterIconLibrary };

package/dist/infinite-scroller-BmmtnWNt.js

@@ -0,0 +1,285 @@
+import { Localize } from "./utilities/localize.js";
+import { t as __decorate } from "./decorate-DcF3lt7P.js";
+import "./spinner-C04Dmc0H.js";
+import { css, html } from "lit";
+import { property, query, state } from "lit/decorators.js";
+import hostStyles from "@mcp-b/wc-support/styles/host.styles";
+import { SigveloElement } from "@mcp-b/wc-support/base/sigvelo-element";
+import { SigveloLoadMoreEvent } from "@mcp-b/wc-support/events/load";
+//#region src/components/infinite-scroller/infinite-scroller.styles.ts
+var infinite_scroller_styles_default = css`
+  :host {
+    display: flex;
+    position: relative;
+    flex-direction: column;
+    width: 100%;
+    max-height: 25rem;
+    overflow-y: auto;
+    gap: 0;
+    border: var(--sigvelo-border-style) var(--sigvelo-border-width)
+      var(--sigvelo-color-neutral-border-subtle);
+    border-radius: var(--sigvelo-radius-md);
+    background-color: var(--sigvelo-color-surface);
+    box-shadow: var(--sigvelo-elevation-hairline);
+    scrollbar-color: var(--sigvelo-color-neutral-bg) transparent;
+    scrollbar-width: thin;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  :host(:focus) {
+    outline: none;
+  }
+
+  :host(:focus-visible) {
+    outline: var(--sigvelo-border-style) calc(var(--sigvelo-border-width) + 1px)
+      var(--sigvelo-color-focus);
+    outline-offset: var(--sigvelo-border-width);
+  }
+
+  sigvelo-spinner {
+    margin-inline: auto;
+    margin-block: 1rem;
+  }
+
+  ::slotted(*:focus) {
+    outline: none;
+  }
+
+  ::slotted(*:focus-visible) {
+    outline: var(--sigvelo-focus-ring);
+    outline-offset: calc(-1 * var(--sigvelo-focus-width));
+  }
+`;
+//#endregion
+//#region src/components/infinite-scroller/infinite-scroller.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.
+*/
+var SigveloInfiniteScroller = class extends SigveloElement {
+	constructor(..._args) {
+		super(..._args);
+		this.isLoading = false;
+		this.isComplete = false;
+		this.contentCheckFrameId = null;
+		this.localize = new Localize(this);
+		this.thresholdInPixels = 0;
+		this.thresholdInPercent = 0;
+		this.label = "";
+		this.threshold = "20%";
+		this.handleScroll = () => {
+			if (this.isComplete || this.isLoading) return;
+			if (this.checkScrollThreshold()) {
+				this.isLoading = true;
+				this.dispatchEvent(new SigveloLoadMoreEvent());
+			}
+		};
+	}
+	static {
+		this.styles = [hostStyles, infinite_scroller_styles_default];
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this.setAttribute("role", "feed");
+		this.parseThreshold();
+		this.addEventListener("scroll", this.handleScroll);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.removeEventListener("scroll", this.handleScroll);
+		if (this.contentCheckFrameId) cancelAnimationFrame(this.contentCheckFrameId);
+	}
+	updated(changedProperties) {
+		if (changedProperties.has("label")) this.setAttribute("aria-label", this.label || this.localize.term("feed"));
+		if (changedProperties.has("threshold")) this.parseThreshold();
+		if (changedProperties.has("isLoading")) this.customStates.set("loading", this.isLoading);
+		if (changedProperties.has("isComplete")) this.customStates.set("complete", this.isComplete);
+	}
+	parseThreshold() {
+		const val = this.threshold;
+		if (val.endsWith("%")) {
+			this.thresholdInPixels = 0;
+			this.thresholdInPercent = parseFloat(val) / 100;
+		} else {
+			this.thresholdInPixels = parseFloat(val);
+			this.thresholdInPercent = 0;
+		}
+	}
+	checkScrollThreshold() {
+		const scrollPosition = this.scrollTop + this.clientHeight;
+		const threshold = this.thresholdInPercent !== 0 ? this.clientHeight * this.thresholdInPercent : this.thresholdInPixels;
+		return scrollPosition >= this.scrollHeight - threshold;
+	}
+	handleSlotChange() {
+		this.defaultSlot.assignedElements({ flatten: true }).forEach((el) => {
+			if (el instanceof HTMLElement) {
+				if (!el.hasAttribute("role")) el.setAttribute("role", "article");
+				if (!el.hasAttribute("tabindex")) el.setAttribute("tabindex", "0");
+			}
+		});
+		this.isLoading = false;
+		this.scheduleContentCheck();
+	}
+	isScrollable() {
+		return this.scrollHeight > this.clientHeight;
+	}
+	scheduleContentCheck() {
+		if (this.contentCheckFrameId) cancelAnimationFrame(this.contentCheckFrameId);
+		this.contentCheckFrameId = requestAnimationFrame(() => {
+			if (this.isComplete || this.isLoading) return;
+			if (!this.isScrollable() || this.checkScrollThreshold()) {
+				this.isLoading = true;
+				this.dispatchEvent(new SigveloLoadMoreEvent());
+			}
+		});
+	}
+	/**
+	* Mark the feed as completed, preventing further load events. Changing content in the default slot will reset this
+	* and re-enable infinite scrolling.
+	*/
+	complete() {
+		this.isComplete = true;
+		this.isLoading = false;
+	}
+	render() {
+		return html`
+      <slot @slotchange=${this.handleSlotChange}></slot>
+      ${!this.isComplete ? html` <sigvelo-spinner></sigvelo-spinner> ` : ""}
+    `;
+	}
+};
+__decorate([query("slot:not([name])")], SigveloInfiniteScroller.prototype, "defaultSlot", void 0);
+__decorate([state()], SigveloInfiniteScroller.prototype, "isLoading", void 0);
+__decorate([state()], SigveloInfiniteScroller.prototype, "isComplete", void 0);
+__decorate([property()], SigveloInfiniteScroller.prototype, "label", void 0);
+__decorate([property()], SigveloInfiniteScroller.prototype, "threshold", void 0);
+customElements.define("sigvelo-infinite-scroller", SigveloInfiniteScroller);
+//#endregion
+export { SigveloInfiniteScroller as t };

package/dist/infinite-scroller-CuUEAlB9.d.ts

@@ -0,0 +1,174 @@
+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 };