import { CSSResultGroup } from "lit";
import { SigveloElement } from "@mcp-b/wc-support/base/sigvelo-element";
//#region src/components/empty-state/empty-state.d.ts
/**
*
*
* @summary Guides users during first-time experiences or when content is missing, transforming blank spaces into
* @tag sigvelo-empty-state
* opportunities with helpful visuals and clear actions.
* @documentation https://design-system.sigvelo.com/docs/components/empty-state
* @status stable
* @since 1.0
*
* @slot - Content to show in the empty state. Usually includes a heading, a paragraph, and sometimes buttons.
* @slot illustration - An optional illustration to show in the empty state. Works well with an image or a
* `` element.
*
* @cssproperty [--content-width=40ch] - The maximum width of the empty state's content. When space is limited, the
* content will wrap automatically.
* @cssproperty --illustration-width - The maximum width of the illustration. By default, this will be half of
* `--content-width`. This property does not affect the size of icons.
*
* @csspart content - The container that wraps the content.
* @csspart illustration - The container that wraps the illustration.
*
* @example Default
* ```html
*
* 
* My Podcasts
* You haven't added any podcasts yet. Once you do, you'll be able to listen to them here.
* Add podcasts
*
* ```
*
* @example Providing content
* Use the default slot to add content to the empty state. Headings and paragraphs work particularly well. Buttons can be added at the end, as needed.
*
* You can adjust the size of the empty state using `width`, `height`, and similar CSS properties. Content will automatically be centered horizontally and vertically within the component.
*
* ```html
*
* No projects
* Create your first project to get started
*
*
* Create project
*
*
* ```
*
* @example Adding illustrations
* To show an illustration, slot an image or an icon into the `illustration` slot.
* ```html
*
* 
* No food found
* The cats are not thrilled. Please add good food soon.
*
* ```
*
* ```html
*
*
* No upcoming events
* Your calendar is clear. Schedule meetings or events to see them here.
*
* ```
*
* @example Styling empty states
* Empty states come with a simple, minimal appearance. Feel free to customize them with your own styles.
*
* ```html
*
*
* Your cart is empty
* Looks like it's time to buy cat food again
* Feed the cats
*
*
*
* ```
*/
declare class SigveloEmptyState extends SigveloElement {
static observeSlots: boolean;
static styles: CSSResultGroup;
render(): import("lit-html").TemplateResult<1>;
}
declare global {
interface HTMLElementTagNameMap {
"sigvelo-empty-state": SigveloEmptyState;
}
}
//#endregion
export { SigveloEmptyState as t };