@umbraco-ui/uui-box/lib/uui-box.element.d.ts

A box web component for grouping elements

import { LitElement } from 'lit';
import type { UUIInterfaceHeading } from '@umbraco-ui/uui-base/lib';
/**
 *  A layout box for grouping elements, as well its possible to append a header, with a headline or other elements to the box.
 *  @element uui-box
 *  @slot headline - headline area, this area is placed within the headline tag which is located inside the header. Use this to ensure the right headline styling.
 *  @slot header - header area, use this for things that are not the headline but are located in the header.
 *  @slot header-actions - right-side of the box header, use this to append some actions that are general for the topic of this box.
 *  @slot - area for the content of the box
 *  @cssprop --uui-box-header-padding - overwrite the header padding
 *  @cssprop --uui-box-default-padding - overwrite the box padding
 *  @cssprop --uui-box-border-width - overwrite the box border, default is 0
 *  @cssprop --uui-box-box-shadow - overwrite the box shadow, default is var(--uui-shadow-depth-1)
 *  @cssprop --uui-box-border-radius - overwrite the box border-radius, default is var(--uui-border-radius)
 *  @cssprop --uui-box-border-color - overwrites the box border colorm default is var(--uui-color-divider-standalone)
 */
export declare class UUIBoxElement extends LitElement {
    /**
     * Headline for this box, can also be set via the `headline` slot.
     * @type string
     * @attr
     * @default null
     */
    headline: string | null;
    /**
     * Changes the headline variant for accessibility for this box.
     * Notice this does not change the visual representation of the headline. (Umbraco recommends displaying a h5 size headline in the UUI-BOX)
     * @type {"h1" | "h2" | "h3" | "h4" | "h5" | "h6"}
     * @attr
     * @default "h5"
     */
    set headlineVariant(value: UUIInterfaceHeading);
    get headlineVariant(): UUIInterfaceHeading;
    private _headlineVariantTag;
    private _headlineSlotHasContent;
    private _headlineSlotChanged;
    private _headerSlotHasContent;
    private _headerSlotChanged;
    private _headerActionsSlotHasContent;
    private _headerActionsSlotChanged;
    /**
     * Renders a header with the `header`-slot, `header-actions`-slot, headline and `headline`-slot within
     * @returns {TemplateResult}
     * @protected
     * @method
     */
    protected renderHeader(): import("lit").TemplateResult;
    render(): import("lit").TemplateResult;
    static styles: import("lit").CSSResult[];
}
declare global {
    interface HTMLElementTagNameMap {
        'uui-box': UUIBoxElement;
    }
}