import CwElement from '../../internal/cw-element.js';
import type { CSSResultGroup, PropertyValues } from 'lit';
/**
 * @summary A full-width band of page content with a capped, centered content width, vertical padding and an optional background.
 * @documentation https://cordwainer.dev/components/section
 * @status experimental
 * @since 1.6
 *
 * @slot - The section's content.
 *
 * @csspart base - The component's base wrapper, which draws the background and padding and spans the section's full width.
 *
 * @cssproperty [--cw-section-background] - Overrides the background of the chosen `surface`. Any CSS background color.
 * @cssproperty [--cw-section-flush-below=40rem] - With `flush`, the side gutter is removed when the section is narrower
 *  than this. Set it on `:root` to change it everywhere, or on one section.
 */
export default class CwSection extends CwElement {
    static styles: CSSResultGroup;
    /**
     * How wide the content can grow before it stops and centers, as a layout width token name (`narrow`, `default` or
     * `wide`). `full` has no cap. The background always spans the whole section.
     */
    width: 'narrow' | 'default' | 'wide' | 'full';
    /** The space above and below the content, as a spacing token name. */
    paddingBlock: '3x-small' | '2x-small' | 'x-small' | 'small' | 'medium' | 'large' | 'x-large' | '2x-large' | '3x-large' | '4x-large';
    /** The space on the left and right of the content, as a spacing token name. */
    gutter: '3x-small' | '2x-small' | 'x-small' | 'small' | 'medium' | 'large' | 'x-large' | '2x-large' | '3x-large' | '4x-large';
    /**
     * Removes the gutter when the section is narrower than `--cw-section-flush-below`, so content and background run edge
     * to edge on phones.
     */
    flush: boolean;
    /**
     * The background and text color. `default` is transparent, `alt` is a subtle neutral, `primary` matches a primary
     * button and `inverse` is dark in a light theme and light in a dark theme.
     */
    surface: 'default' | 'alt' | 'primary' | 'inverse';
    /**
     * A name for the section. When set, the section is a region landmark that assistive technology can list and jump to.
     * Without one, the section is a plain wrapper and adds no landmark.
     */
    label?: string;
    private resolvedWidth;
    private resolvedPaddingBlock;
    private resolvedGutter;
    private resolvedSurface;
    willUpdate(changedProperties: PropertyValues<this>): void;
    render(): import("lit-html").TemplateResult<1>;
}