import { CSSResultGroup, PropertyValues } from "lit"; import { SigveloElement } from "@mcp-b/wc-support/base/sigvelo-element"; //#region src/components/timed-content/timed-content.d.ts /** * * * @summary Shows certain content based on the current date and time. * @tag sigvelo-timed-content * @documentation https://design-system.sigvelo.com/docs/components/timed-content * @status stable * @since 1.0 * * @slot - The default slot. * @slot before - Optional content that shows before the specified date/time. * @slot after - Optional content that shows after the specified date/time. * * @example Default * ```html * *
* A cat curled up asleep in the moonlight * It's before noon, the cats are still sleeping *
* *
* A cat laying in the daylight * It's past noon, the cats are out and about *
* * * * * * ``` * * **Note:** If you pass a string to the `start-date` or `end-date` attributes, always use the [ISO 8601 format](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toISOString). Otherwise, ambiguous dates such as 01/02/2000 can be parsed as January 2 or February 1 depending on the client's locale. * * @example Providing dates * The most common use case is showing content during a specific period of time. Use the `start-date` and `end-date` attributes to tell the component when to show the content. * * ```html * *

Holiday Sale! All catnip toys are 50% off!

* * ``` * * You can also pass a `Date` object to the `startDate` and `endDate` properties. * * ```html * *

Holiday Sale! All catnip toys are 50% off!

* * * * ``` * * **Warning:** If you specify a date without a timezone, e.g. `2025-12-01`, it will be interpreted in the user's local timezone. To ensure consistent behavior across timezones, include explicit timezone information in your dates, e.g. `2025-12-01T00:00:00Z` for UTC, or be aware that users in different timezones may see content transitions at different times. * * @example Before and after slots * Use the `before` and `after` slots to show different content outside of the specified date range. The `before` slot shows when the current date is before the start date, and the `after` slot shows when the current date is after the end date. * * ```html * *
*

Sale

*

25% off all premium cat food!

*
* *
*

Sale Coming Soon

*

Cat food sale begins August 15th!

*
* *
*

Sale Ended

*

Thanks for treating your cats during our promotion!

*
* * ``` * * @example Start date only * When only the `start-date` is provided, content will show from that date forward. This is useful for feature launches or permanent changes that take effect on a specific date. * * ```html * *

New feature is now available!

* *
*

New feature coming June 15th!

*
* * ``` * * @example End date only * When only the `end-date` is provided, content will show up until that date. This is useful for limited-time offers or deprecation notices. * * ```html * *

The legacy API is available until March 31

* *
*

The legacy API has been discontinued

*
* * ``` * * @example Enabling live updates * By default, the component will render the content based on the time the page was first loaded. To update the component dynamically as time passes, add the `live` attribute. For performance, live updates only occur every 60 seconds. * * ```html * *

Flash sale happening now! ⚡

*

Flash sale starts at 2:30 PM UTC

*

Flash sale ended at 2:35 PM UTC

* * ``` */ declare class SigveloTimedContent extends SigveloElement { static styles: CSSResultGroup; private updateInterval; /** The date to start showing the content. */ startDate: string | Date; /** The date to stop showing the content. */ endDate: string | Date; /** When set, the content will update as the time changes. */ live: boolean; connectedCallback(): void; disconnectedCallback(): void; updated(changedProperties: PropertyValues): void; private setupTimer; private cleanupTimer; render(): import("lit-html").TemplateResult<1>; } declare global { interface HTMLElementTagNameMap { "sigvelo-timed-content": SigveloTimedContent; } } //#endregion export { SigveloTimedContent as t };