@blueprintui/cli 0.11.0 → 0.11.2

package/src/.rollup.cache/@blueprintui/components/Users/coryrylan/Repos/blueprint/blueprintui/packages/components/dist/forms/field-message/element.d.ts

@@ -0,0 +1,34 @@
+import { LitElement } from 'lit';
+/**
+ * Control Message
+ *
+ * ```typescript
+ * import '@blueprintui/components/include/forms.js';
+ * ```
+ *
+ * ```html
+ * <bp-field>
+ *   <label>Test</label>
+ *   <input type="text" />
+ *   <bp-field-message>helper text</bp-field-message>
+ * </bp-field>
+ * ```
+ *
+ * @element bp-field-message
+ * @since 1.0.0
+ * @slot - For projecting helper message text
+ * @cssprop --color
+ * @cssprop --font-size
+ * @cssprop --font-weight
+ * @cssprop --max-width
+ * @cssprop --min-width
+ */
+export declare class BpFieldMessage extends LitElement {
+    /** Set the status of field message validation */
+    accessor status: 'error' | 'success';
+    /** HTML5 ValidityState https://developer.mozilla.org/en-US/docs/Web/API/ValidityState */
+    accessor error: keyof ValidityState;
+    static styles: CSSStyleSheet[];
+    render(): import("lit").TemplateResult<1>;
+    connectedCallback(): void;
+}

package/src/.rollup.cache/@blueprintui/components/Users/coryrylan/Repos/blueprint/blueprintui/packages/components/dist/forms/field-message/element.js

@@ -0,0 +1,47 @@
+import { html, LitElement, nothing } from 'lit';
+import { baseStyles } from '@blueprintui/components/internals';
+import styles from './element.css' with { type: 'css' };
+/**
+ * Control Message
+ *
+ * ```typescript
+ * import '@blueprintui/components/include/forms.js';
+ * ```
+ *
+ * ```html
+ * <bp-field>
+ *   <label>Test</label>
+ *   <input type="text" />
+ *   <bp-field-message>helper text</bp-field-message>
+ * </bp-field>
+ * ```
+ *
+ * @element bp-field-message
+ * @since 1.0.0
+ * @slot - For projecting helper message text
+ * @cssprop --color
+ * @cssprop --font-size
+ * @cssprop --font-weight
+ * @cssprop --max-width
+ * @cssprop --min-width
+ */
+export class BpFieldMessage extends LitElement {
+    static { this.properties = {
+        status: { type: String },
+        error: { type: String, reflect: true }
+    }; }
+    static { this.styles = [baseStyles, styles]; }
+    render() {
+        return html `<div part="internal">
+      ${this.status
+            ? html ` ${this.status === 'error' ? html `<bp-icon size="sm" status="danger" shape="error"></bp-icon>` : nothing}
+          ${this.status === 'success' ? html `<bp-icon size="sm" status="success" shape="success"></bp-icon>` : nothing}`
+            : nothing}
+      <slot></slot>
+    </div> `;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.slot = 'message';
+    }
+}

package/src/.rollup.cache/@blueprintui/components/Users/coryrylan/Repos/blueprint/blueprintui/packages/components/dist/forms/fieldset/element.d.ts

@@ -0,0 +1,37 @@
+import { LitElement, PropertyValues } from 'lit';
+import type { FormLayout } from '../utils/interfaces.js';
+/**
+ * Control Group
+ *
+ * ```typescript
+ * import '@blueprintui/components/include/forms.js';
+ * ```
+ *
+ * ```html
+ * <bp-fieldset>
+ *   <label>...</label>
+ *
+ *   <label></label>
+ *   <input ... />
+ *
+ *   <label></label>
+ *   <input ... />
+ * </bp-fieldset>
+ * ```
+ *
+ * @element bp-fieldset
+ * @since 1.0.0
+ * @slot
+ */
+export declare class BpFieldset extends LitElement {
+    #private;
+    /** determine field layout */
+    accessor layout: FormLayout;
+    protected get inlineItems(): HTMLInputElement[][];
+    static styles: CSSStyleSheet[];
+    /** @private */
+    _internals: ElementInternals;
+    render(): import("lit").TemplateResult<1>;
+    connectedCallback(): void;
+    firstUpdated(props: PropertyValues<this>): void;
+}

package/src/.rollup.cache/@blueprintui/components/Users/coryrylan/Repos/blueprint/blueprintui/packages/components/dist/forms/fieldset/element.js

@@ -0,0 +1,122 @@
+import { __decorate } from "tslib";
+import { html, LitElement } from 'lit';
+import { keynav } from '@blueprintui/typewriter';
+import { associateAriaDescribedBy, associateFieldNames, associateInputAndLabel, attachInternals, baseStyles, createId, interactionResponsive } from '@blueprintui/components/internals';
+import styles from './element.css' with { type: 'css' };
+/**
+ * Control Group
+ *
+ * ```typescript
+ * import '@blueprintui/components/include/forms.js';
+ * ```
+ *
+ * ```html
+ * <bp-fieldset>
+ *   <label>...</label>
+ *
+ *   <label></label>
+ *   <input ... />
+ *
+ *   <label></label>
+ *   <input ... />
+ * </bp-fieldset>
+ * ```
+ *
+ * @element bp-fieldset
+ * @since 1.0.0
+ * @slot
+ */
+let BpFieldset = class BpFieldset extends LitElement {
+    static { this.properties = {
+        layout: { type: String, reflect: true }
+    }; }
+    constructor() {
+        super(...arguments);
+        /** determine field layout */
+        this.layout = 'vertical';
+    }
+    get #inputs() {
+        return Array.from(this.querySelectorAll('[bp-field], input, bp-radio, bp-checkbox, bp-switch'));
+    }
+    get #labels() {
+        return Array.from(this.querySelectorAll('label'));
+    }
+    get #messages() {
+        return this.querySelectorAll('bp-field-message');
+    }
+    get inlineItems() {
+        return this.layout.includes('inline') || this.layout.includes('compact')
+            ? [this.#inputs.map(i => i)]
+            : this.#inputs.map(i => [i]);
+    }
+    get #isAssociatedGroup() {
+        const inputs = this.#inputs;
+        const isAssociated = !!inputs.filter(i => i !== inputs[0] && i.name?.length).find(i => i.name === inputs[0].name);
+        const isRadio = inputs.every(i => i.tagName === 'BP-RADIO' || i.type === 'radio');
+        return isAssociated || isRadio;
+    }
+    get #isInlineGroup() {
+        return !!this.#inputs.find(i => i.getAttribute('bp-field') === 'inline' ||
+            i.tagName === 'BP-SWITCH' ||
+            i.tagName === 'BP-CHECKBOX' ||
+            i.tagName === 'BP-RADIO');
+    }
+    static { this.styles = [baseStyles, styles]; }
+    render() {
+        return html `
+      <div part="internal">
+        <slot name="label"></slot>
+        <div class="input-slot-group">
+          ${this.#inputs.map((_i, i) => html `<slot name="input-${i}"></slot>`)}
+          <slot></slot>
+        </div>
+        <slot name="message" @slotchange=${this.#updateAriaDescribedBy}></slot>
+      </div>
+    `;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        attachInternals(this);
+        this.setAttribute('bp-fieldset', '');
+        this._internals.role = 'group';
+        this.#updateSlotState();
+        this.addEventListener('slotchange', () => this.#updateSlotState());
+        this.addEventListener('bp-keychange', (e) => {
+            if (this.#isAssociatedGroup) {
+                e.detail.activeItem.click();
+            }
+        });
+    }
+    firstUpdated(props) {
+        super.firstUpdated(props);
+        this.#labels[0].slot = 'label';
+        if (!this.#labels[0].id) {
+            this.#labels[0].id = createId();
+            this.setAttribute('aria-labelledby', this.#labels[0].id);
+        }
+        if (this.#isAssociatedGroup) {
+            this._internals.role = 'radiogroup';
+            associateFieldNames(Array.from(this.#inputs));
+        }
+        const labels = [...this.#labels];
+        const inputs = [...this.#inputs];
+        labels.shift();
+        labels.forEach((l, i) => {
+            associateInputAndLabel(inputs[i], l);
+            l.slot = `input-${i}`;
+            inputs[i].slot = `input-${i}`;
+        });
+    }
+    #updateSlotState() {
+        this.#messages?.length ? this._internals.states.add('message') : this._internals.states.delete('message');
+        this.#isInlineGroup ? this._internals.states.add('inline-group') : this._internals.states.delete('inline-group');
+    }
+    #updateAriaDescribedBy() {
+        associateAriaDescribedBy(this, Array.from(this.#messages));
+    }
+};
+BpFieldset = __decorate([
+    interactionResponsive(),
+    keynav(host => ({ loop: true, grid: host.inlineItems }))
+], BpFieldset);
+export { BpFieldset };

package/src/.rollup.cache/@blueprintui/components/Users/coryrylan/Repos/blueprint/blueprintui/packages/components/dist/forms/form-control/element.d.ts

@@ -0,0 +1,51 @@
+import { LitElement } from 'lit';
+import { TypeFormControl, TypeFormControlController } from '../controllers/type-form-control.controller.js';
+import { BpTypeControl } from '@blueprintui/components/internals';
+export interface FormControl extends TypeFormControl {
+}
+export declare class FormControl extends LitElement implements Pick<BpTypeControl, keyof FormControl> {
+    /** control value */
+    accessor value: string | number | FormData | File;
+    /** determines if element is mutable or focusable */
+    accessor disabled: boolean;
+    /** indicates that the user must specify a value for the input before the owning form can be submitted */
+    accessor required: boolean;
+    /** makes the element not mutable, meaning the user can not edit the control */
+    accessor readonly: boolean;
+    /** determines he form control accepts one or more values */
+    accessor multiple: boolean;
+    /** provide automated assistance in filling out form field values, and guidance to the browser as to the type of information expected in the field */
+    accessor autocomplete: string;
+    /** string specifying the type of control to render */
+    accessor type: string;
+    /** represents the name of the current <form> element as a string. */
+    name: string;
+    /** regular expression the form control's value should match */
+    accessor pattern: string;
+    /** defines a short hint to help the user with data entry when a form control has no value */
+    accessor placeholder: string;
+    /** defines minimum number of characters */
+    accessor minLength: number;
+    /** defines maximum number of characters */
+    accessor maxLength: number;
+    /** defines the most negative value in the range of permitted values */
+    accessor min: number;
+    /** defines the greatest value in the range of permitted values */
+    accessor max: number;
+    /** determines number of characters */
+    accessor size: number;
+    static formAssociated: boolean;
+    protected typeFormControlController: TypeFormControlController<FormControl>;
+    get valueAsNumber(): number;
+    set valueAsNumber(value: number);
+    get composedLabel(): string;
+    connectedCallback(): void;
+    focus(): void;
+    reset(): void;
+    protected onChange(e: InputEvent, config?: {
+        valueType: 'string' | 'number';
+    }): void;
+    protected onInput(e: InputEvent, config?: {
+        valueType: 'string' | 'number';
+    }): void;
+}

package/src/.rollup.cache/@blueprintui/components/Users/coryrylan/Repos/blueprint/blueprintui/packages/components/dist/forms/form-control/element.js

@@ -0,0 +1,56 @@
+import { LitElement } from 'lit';
+import { TypeFormControlController } from '../controllers/type-form-control.controller.js';
+export class FormControl extends LitElement {
+    constructor() {
+        super();
+        this.typeFormControlController = new TypeFormControlController(this);
+        /** determines number of characters */
+        this.size = null;
+    }
+    static { this.properties = {
+        value: { type: String },
+        disabled: { type: Boolean },
+        required: { type: Boolean },
+        readonly: { type: Boolean },
+        multiple: { type: Boolean },
+        autocomplete: { type: String, reflect: true },
+        type: { type: String, reflect: true },
+        pattern: { type: String },
+        placeholder: { type: String },
+        minLength: { type: Number },
+        maxLength: { type: Number },
+        min: { type: Number },
+        max: { type: Number },
+        size: { type: Number }
+    }; }
+    static { this.formAssociated = true; }
+    get valueAsNumber() {
+        return parseFloat(this.value);
+    }
+    set valueAsNumber(value) {
+        this.value = `${value}`;
+    }
+    get composedLabel() {
+        return Array.from(this._internals.labels)
+            .reduce((prev, label) => `${prev} ${label.textContent}`, '')
+            .trim();
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this._internals.role = 'presentation';
+        this._internals.states.add('bp-layer');
+    }
+    focus() {
+        super.focus();
+        this.typeFormControlController.focus();
+    }
+    reset() {
+        this.typeFormControlController.reset();
+    }
+    onChange(e, config) {
+        this.typeFormControlController.onChange(e, config);
+    }
+    onInput(e, config) {
+        this.typeFormControlController.onInput(e, config);
+    }
+}

package/src/.rollup.cache/@blueprintui/components/Users/coryrylan/Repos/blueprint/blueprintui/packages/components/dist/forms/form-group/element.d.ts

@@ -0,0 +1,38 @@
+import { LitElement, PropertyValues } from 'lit';
+import type { FormLayout } from '../utils/interfaces.js';
+/**
+ * Form
+ *
+ * ```typescript
+ * import '@blueprintui/components/include/forms.js';
+ * ```
+ *
+ * ```html
+ * <bp-form-group layout="horizontal">
+ *   <bp-input>
+ *     <label>Test</label>
+ *     <input type="text" />
+ *   </bp-input>
+ *
+ *   <bp-input>
+ *     <label>Test</label>
+ *     <input type="text" />
+ *   </bp-input>
+ * </bp-form-group>
+ * ```
+ *
+ * @element bp-form-group
+ * @since 1.0.0
+ * @slot - For projecting input fields
+ * @cssprop --label-width
+ */
+export declare class BpFormGroup extends LitElement {
+    #private;
+    /** @type {horizontal | horizontal-inline | vertical | vertical-inline | compact} */
+    accessor layout: FormLayout;
+    static styles: CSSStyleSheet[];
+    render(): import("lit").TemplateResult<1>;
+    firstUpdated(props: PropertyValues<this>): Promise<void>;
+    updated(props: PropertyValues<this>): void;
+    disconnectedCallback(): void;
+}

package/src/.rollup.cache/@blueprintui/components/Users/coryrylan/Repos/blueprint/blueprintui/packages/components/dist/forms/form-group/element.js

@@ -0,0 +1,84 @@
+import { __decorate } from "tslib";
+import { LitElement, html } from 'lit';
+import { assignedElements, baseStyles, elementVisible, interactionResponsive } from '@blueprintui/components/internals';
+import styles from './element.css' with { type: 'css' };
+/**
+ * Form
+ *
+ * ```typescript
+ * import '@blueprintui/components/include/forms.js';
+ * ```
+ *
+ * ```html
+ * <bp-form-group layout="horizontal">
+ *   <bp-input>
+ *     <label>Test</label>
+ *     <input type="text" />
+ *   </bp-input>
+ *
+ *   <bp-input>
+ *     <label>Test</label>
+ *     <input type="text" />
+ *   </bp-input>
+ * </bp-form-group>
+ * ```
+ *
+ * @element bp-form-group
+ * @since 1.0.0
+ * @slot - For projecting input fields
+ * @cssprop --label-width
+ */
+let BpFormGroup = class BpFormGroup extends LitElement {
+    static { this.properties = {
+        layout: { type: String, reflect: true }
+    }; }
+    constructor() {
+        super(...arguments);
+        /** @type {horizontal | horizontal-inline | vertical | vertical-inline | compact} */
+        this.layout = 'vertical';
+    }
+    get #fields() {
+        return assignedElements(this).filter(i => i.hasAttribute('bp-field'));
+    }
+    get #groups() {
+        return assignedElements(this).filter(i => i.hasAttribute('bp-fieldset'));
+    }
+    #observers = [];
+    get #fieldsAndFieldsets() {
+        return [...this.#groups, ...this.#fields];
+    }
+    static { this.styles = [baseStyles, styles]; }
+    render() {
+        return html `
+      <div part="internal">
+        <slot></slot>
+      </div>
+    `;
+    }
+    #internals = this.attachInternals();
+    async firstUpdated(props) {
+        super.firstUpdated(props);
+        this.#internals.role = 'group';
+        this.#setControlLabelWidths();
+        this.#observers.push(elementVisible(this, () => this.#setControlLabelWidths()));
+    }
+    updated(props) {
+        super.updated(props);
+        this.#fieldsAndFieldsets.forEach(c => (c.layout = this.layout));
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.#observers.forEach(o => o.disconnect());
+    }
+    async #setControlLabelWidths() {
+        if (this.layout === 'horizontal' || this.layout === 'horizontal-inline' || this.layout === 'compact') {
+            await Promise.all(Array.from(this.#fieldsAndFieldsets).map(e => e.updateComplete));
+            const width = `${Math.max(...Array.from(this.querySelectorAll('label')).map(c => c.getBoundingClientRect().width + 12))}px`;
+            this.style.setProperty('--group-label-width', width);
+        }
+    }
+};
+BpFormGroup = __decorate([
+    interactionResponsive()
+], BpFormGroup);
+export { BpFormGroup };

package/src/.rollup.cache/@blueprintui/components/Users/coryrylan/Repos/blueprint/blueprintui/packages/components/dist/forms/index.d.ts

@@ -0,0 +1,13 @@
+export * from './field/element.js';
+export * from './fieldset/element.js';
+export * from './field-message/element.js';
+export * from './form-group/element.js';
+export * from './form-control/element.js';
+export * from './utils/utils.js';
+export * from './utils/validity.js';
+export * from './controllers/state-form-control.controller.js';
+export * from './controllers/type-form-control.controller.js';
+export * from './controllers/type-form-radio.controller.js';
+export * from './controllers/type-form-checkbox.controller.js';
+export * from './controllers/type-form-slider.controller.js';
+export * from './controllers/type-form-switch.controller.js';

package/src/.rollup.cache/@blueprintui/components/Users/coryrylan/Repos/blueprint/blueprintui/packages/components/dist/forms/index.js

@@ -0,0 +1,13 @@
+export * from './field/element.js';
+export * from './fieldset/element.js';
+export * from './field-message/element.js';
+export * from './form-group/element.js';
+export * from './form-control/element.js';
+export * from './utils/utils.js';
+export * from './utils/validity.js';
+export * from './controllers/state-form-control.controller.js';
+export * from './controllers/type-form-control.controller.js';
+export * from './controllers/type-form-radio.controller.js';
+export * from './controllers/type-form-checkbox.controller.js';
+export * from './controllers/type-form-slider.controller.js';
+export * from './controllers/type-form-switch.controller.js';

package/src/.rollup.cache/@blueprintui/components/Users/coryrylan/Repos/blueprint/blueprintui/packages/components/dist/forms/utils/interfaces.d.ts

@@ -0,0 +1,4 @@
+export type FormLayout = 'horizontal' | 'horizontal-inline' | 'vertical' | 'vertical-inline' | 'compact';
+export type ControlLayout = 'vertical' | 'horizontal' | 'compact';
+export type ControlStatus = 'neutral' | 'error' | 'success';
+export type ControlWidth = 'shrink' | 'stretch' | undefined;

package/src/.rollup.cache/@blueprintui/components/Users/coryrylan/Repos/blueprint/blueprintui/packages/components/dist/forms/utils/interfaces.js

@@ -0,0 +1 @@
+export {};

package/src/.rollup.cache/@blueprintui/components/Users/coryrylan/Repos/blueprint/blueprintui/packages/components/dist/forms/utils/utils.d.ts

@@ -0,0 +1,6 @@
+import type { FormLayout } from './interfaces.js';
+import type { BpField } from '../field/element.js';
+import type { BpFieldMessage } from '../field-message/element.js';
+export declare const formLayouts: FormLayout[];
+export declare function updateFieldStatusState(field: BpField, messages: BpFieldMessage[]): void;
+export declare function syncValidationMessages(field: BpField, messages: BpFieldMessage[]): void;

package/src/.rollup.cache/@blueprintui/components/Users/coryrylan/Repos/blueprint/blueprintui/packages/components/dist/forms/utils/utils.js

@@ -0,0 +1,44 @@
+export const formLayouts = ['vertical', 'vertical-inline', 'horizontal', 'horizontal-inline', 'compact'];
+export function updateFieldStatusState(field, messages) {
+    const message = messages.find(m => !m.hidden);
+    const inputState = field.inputControl._internals?.states;
+    const fieldState = field._internals.states;
+    if (inputState) {
+        fieldState?.delete('error');
+        fieldState?.delete('success');
+        inputState?.delete('error');
+        inputState?.delete('success');
+        if (!message?.hidden && message?.status?.length) {
+            inputState.add(message.status);
+            fieldState.add(message.status);
+        }
+    }
+}
+export function syncValidationMessages(field, messages) {
+    if (!field.inputControl?.form?.noValidate && !field.inputControl.formNoValidate) {
+        messages
+            .filter(m => m.hasAttribute('error'))
+            .forEach(m => {
+            m.setAttribute('hidden', '');
+            m.status = 'error';
+        });
+        field.inputControl.addEventListener('invalid', () => {
+            messages.forEach(message => message.setAttribute('hidden', ''));
+            messages.find(message => field.inputControl.validity[message.error])?.removeAttribute('hidden');
+        });
+        field.inputControl.addEventListener('input', () => {
+            if (field.inputControl.validity.valid) {
+                messages.filter(m => !m.hasAttribute('error')).forEach(m => m.removeAttribute('hidden'));
+            }
+            messages
+                .filter(m => field.inputControl.validity.valid && m.error && !field.inputControl.validity[m.error])
+                .forEach(message => message.setAttribute('hidden', ''));
+        });
+        field.inputControl.form?.addEventListener('reset', () => {
+            messages.filter(m => m.error).forEach(message => message.setAttribute('hidden', ''));
+        });
+        field.addEventListener('reset', () => {
+            messages.filter(m => m.error).forEach(message => message.setAttribute('hidden', ''));
+        });
+    }
+}

package/src/.rollup.cache/@blueprintui/components/Users/coryrylan/Repos/blueprint/blueprintui/packages/components/dist/forms/utils/validity.d.ts

@@ -0,0 +1,4 @@
+export declare function valueMissing(element: any): boolean;
+export declare function tooShort(element: HTMLInputElement): boolean;
+export declare function tooLong(element: HTMLInputElement): boolean;
+export declare function patternMismatch(element: HTMLInputElement): boolean;

package/src/.rollup.cache/@blueprintui/components/Users/coryrylan/Repos/blueprint/blueprintui/packages/components/dist/forms/utils/validity.js

@@ -0,0 +1,32 @@
+export function valueMissing(element) {
+    return (!element.matches(':disabled') &&
+        (element.hasAttribute('required') || element.required) &&
+        element.value !== null &&
+        element.value !== undefined &&
+        element.value?.length === 0);
+}
+export function tooShort(element) {
+    const min = !element.matches(':disabled') && element.hasAttribute('min');
+    const minimum = parseFloat(element.getAttribute('min'));
+    const value = element.type === 'number' ? parseInt(element.value) : element.value?.length;
+    return min && value < minimum;
+}
+export function tooLong(element) {
+    const max = !element.matches(':disabled') && element.hasAttribute('max');
+    const maximum = parseFloat(element.getAttribute('max'));
+    const value = element.type === 'number' ? parseInt(element.value) : element.value?.length;
+    return max && value > maximum;
+}
+export function patternMismatch(element) {
+    const pattern = !element.matches(':disabled') && element.hasAttribute('pattern');
+    const regex = new RegExp(element.getAttribute('pattern'));
+    return pattern && !regex.test(element.value);
+}
+// todo:
+// interface ValidityState {
+//   readonly badInput: boolean;
+//   readonly rangeOverflow: boolean;
+//   readonly rangeUnderflow: boolean;
+//   readonly stepMismatch: boolean;
+//   readonly typeMismatch: boolean;
+// }

package/src/.rollup.cache/@blueprintui/components/Users/coryrylan/Repos/blueprint/blueprintui/packages/components/dist/header/element.d.ts

@@ -0,0 +1,28 @@
+import { LitElement } from 'lit';
+import { BpTypeElement } from '@blueprintui/components/internals';
+/**
+ * ```typescript
+ * import '@blueprintui/components/include/header.js';
+ * ```
+ *
+ * ```html
+ * <bp-header>
+ *   <bp-header-item>header</bp-header-item>
+ * </bp-header>
+ * ```
+ *
+ * @summary The header component is used to provide a consistent and recognizable top bar, typically containing a logo and main navigation.
+ * @element bp-header
+ * @since 1.0.0
+ * @slot - badge content
+ * @cssprop --padding
+ * @cssprop --background
+ * @cssprop --color
+ * @cssprop --height
+ * @cssprop --font-size
+ * @cssprop --gap
+ */
+export declare class BpHeader extends LitElement implements Pick<BpTypeElement, keyof BpHeader> {
+    static styles: CSSStyleSheet[];
+    render(): import("lit").TemplateResult<1>;
+}