@db-ux/wc-core-components 1.0.0-test-13b991d

package/dist/types/components/input/input.d.ts

@@ -0,0 +1,71 @@
+import { DBInputProps } from "./model";
+import { ChangeEvent, InputEvent, InteractionEvent, ValueLabelType } from "../../shared/model";
+/**
+ * @slot children - This is a default/unnamed slot
+
+ */
+export declare class DBInput {
+    private _ref;
+    id: DBInputProps["id"];
+    dataListId: DBInputProps["dataListId"];
+    message: DBInputProps["message"];
+    showMessage: DBInputProps["showMessage"];
+    value: DBInputProps["value"];
+    onInput: any;
+    input: DBInputProps["input"];
+    onChange: any;
+    change: DBInputProps["change"];
+    validation: DBInputProps["validation"];
+    invalidMessage: DBInputProps["invalidMessage"];
+    required: DBInputProps["required"];
+    minLength: DBInputProps["minLength"];
+    maxLength: DBInputProps["maxLength"];
+    pattern: DBInputProps["pattern"];
+    validMessage: DBInputProps["validMessage"];
+    onBlur: any;
+    blur: DBInputProps["blur"];
+    onFocus: any;
+    focus: DBInputProps["focus"];
+    className: DBInputProps["className"];
+    variant: DBInputProps["variant"];
+    showLabel: DBInputProps["showLabel"];
+    showIcon: DBInputProps["showIcon"];
+    icon: DBInputProps["icon"];
+    iconAfter: DBInputProps["iconAfter"];
+    label: DBInputProps["label"];
+    name: DBInputProps["name"];
+    type: DBInputProps["type"];
+    placeholder: DBInputProps["placeholder"];
+    disabled: DBInputProps["disabled"];
+    step: DBInputProps["step"];
+    max: DBInputProps["max"];
+    min: DBInputProps["min"];
+    readOnly: DBInputProps["readOnly"];
+    form: DBInputProps["form"];
+    autocomplete: DBInputProps["autocomplete"];
+    autofocus: DBInputProps["autofocus"];
+    dataList: DBInputProps["dataList"];
+    messageIcon: DBInputProps["messageIcon"];
+    _id: any;
+    _messageId: any;
+    _validMessageId: any;
+    _invalidMessageId: any;
+    _dataListId: any;
+    _descByIds: string;
+    _value: string;
+    _voiceOverFallback: string;
+    handleInput(event: InputEvent<HTMLInputElement>): void;
+    handleChange(event: ChangeEvent<HTMLInputElement>): void;
+    handleBlur(event: InteractionEvent<HTMLInputElement>): void;
+    handleFocus(event: InteractionEvent<HTMLInputElement>): void;
+    getDataList(_list?: string[] | ValueLabelType[]): ValueLabelType[];
+    /**
+     * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.
+     * @param element  the ref for the component
+     * @param customElementSelector  the custom element like `my-component`
+     */
+    private enableAttributePassing;
+    componentDidLoad(): void;
+    componentDidUpdate(): void;
+    render(): any;
+}

package/dist/types/components/input/model.d.ts

@@ -0,0 +1,39 @@
+import { ChangeEventProps, ChangeEventState, FocusEventProps, FocusEventState, FormMessageProps, FormProps, FormState, FormTextProps, GlobalProps, GlobalState, IconAfterProps, IconProps, InputEventProps, InputEventState, ShowIconProps, ValueLabelType } from '../../shared/model';
+export declare const InputTypeList: readonly ["color", "date", "datetime-local", "email", "file", "hidden", "month", "number", "password", "range", "search", "tel", "text", "time", "url", "week"];
+export type InputTypeType = (typeof InputTypeList)[number];
+export type DBInputDefaultProps = {
+    /**
+     * Set a [data list](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist) via attribute instead of children.
+     */
+    dataList?: string[] | ValueLabelType[];
+    /**
+     * Add a custom id to [data list](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist) if you're using `dataList` attribute.
+     */
+    dataListId?: string;
+    /**
+     * Maximum value
+     */
+    max?: number | string;
+    /**
+     * Minimum value
+     */
+    min?: number | string;
+    /**
+     * Pattern the value must match to be valid
+     */
+    pattern?: string;
+    /**
+     * 	Type of form control
+     */
+    type?: InputTypeType | string;
+    /**
+     * Sets [step value](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/step).
+     */
+    step?: number | string;
+};
+export type DBInputProps = DBInputDefaultProps & GlobalProps & FormTextProps & InputEventProps<HTMLInputElement> & ChangeEventProps<HTMLInputElement> & FocusEventProps<HTMLInputElement> & FormProps & IconProps & IconAfterProps & FormMessageProps & ShowIconProps;
+export type DBInputDefaultState = {
+    _dataListId?: string;
+    getDataList: (_list?: string[] | ValueLabelType[]) => ValueLabelType[];
+};
+export type DBInputState = DBInputDefaultState & GlobalState & InputEventState<HTMLInputElement> & ChangeEventState<HTMLInputElement> & FocusEventState<HTMLInputElement> & FormState;

package/dist/types/components/link/index.d.ts

@@ -0,0 +1,2 @@
+import { DBLink } from './link';
+export default DBLink;

package/dist/types/components/link/link.d.ts

@@ -0,0 +1,35 @@
+import { DBLinkProps } from "./model";
+import { ClickEvent } from "../../shared/model";
+/**
+ * @slot children - This is a default/unnamed slot
+
+ */
+export declare class DBLink {
+    private _ref;
+    onClick: any;
+    id: DBLinkProps["id"];
+    className: DBLinkProps["className"];
+    href: DBLinkProps["href"];
+    target: DBLinkProps["target"];
+    rel: DBLinkProps["rel"];
+    role: DBLinkProps["role"];
+    hreflang: DBLinkProps["hreflang"];
+    disabled: DBLinkProps["disabled"];
+    selected: DBLinkProps["selected"];
+    label: DBLinkProps["label"];
+    current: DBLinkProps["current"];
+    size: DBLinkProps["size"];
+    showIcon: DBLinkProps["showIcon"];
+    variant: DBLinkProps["variant"];
+    content: DBLinkProps["content"];
+    text: DBLinkProps["text"];
+    handleClick(event: ClickEvent<HTMLAnchorElement>): void;
+    /**
+     * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.
+     * @param element  the ref for the component
+     * @param customElementSelector  the custom element like `my-component`
+     */
+    private enableAttributePassing;
+    componentDidLoad(): void;
+    render(): any;
+}

package/dist/types/components/link/model.d.ts

@@ -0,0 +1,24 @@
+import { ClickEventProps, ClickEventState, GlobalProps, GlobalState, LinkProps, ShowIconProps, TextProps } from '../../shared/model';
+export declare const LinkVariantList: readonly ["adaptive", "brand"];
+export type LinkVariantType = (typeof LinkVariantList)[number];
+export declare const LinkSizeList: readonly ["medium", "small"];
+export type LinkSizeType = (typeof LinkSizeList)[number];
+export declare const LinkContentList: readonly ["external", "internal"];
+export type LinkContentType = (typeof LinkContentList)[number];
+export type DBLinkDefaultProps = {
+    /**
+     * Adds a different arrow after the link to indicate external or internal link
+     */
+    content?: LinkContentType;
+    /**
+     * Change the size of the link
+     */
+    size?: LinkSizeType;
+    /**
+     * Change the styling of the link. `inline` will remove the arrow. Defaults to adaptive.
+     */
+    variant?: LinkVariantType;
+};
+export type DBLinkProps = DBLinkDefaultProps & GlobalProps & ClickEventProps<HTMLAnchorElement> & LinkProps & ShowIconProps & TextProps;
+export type DBLinkDefaultState = {};
+export type DBLinkState = DBLinkDefaultState & GlobalState & ClickEventState<HTMLAnchorElement>;

package/dist/types/components/navigation/index.d.ts

@@ -0,0 +1,2 @@
+import { DBNavigation } from './navigation';
+export default DBNavigation;

package/dist/types/components/navigation/model.d.ts

@@ -0,0 +1,5 @@
+import { AriaLabelledByProps, GlobalProps, GlobalState } from '../../shared/model';
+export type DBNavigationDefaultProps = {};
+export type DBNavigationProps = DBNavigationDefaultProps & GlobalProps & AriaLabelledByProps;
+export type DBNavigationDefaultState = {};
+export type DBNavigationState = DBNavigationDefaultState & GlobalState;

package/dist/types/components/navigation/navigation.d.ts

@@ -0,0 +1,20 @@
+import { DBNavigationProps } from "./model";
+/**
+ * @slot children - This is a default/unnamed slot
+
+ */
+export declare class DBNavigation {
+    private _ref;
+    id: DBNavigationProps["id"];
+    labelledBy: DBNavigationProps["labelledBy"];
+    className: DBNavigationProps["className"];
+    _id: string;
+    /**
+     * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.
+     * @param element  the ref for the component
+     * @param customElementSelector  the custom element like `my-component`
+     */
+    private enableAttributePassing;
+    componentDidLoad(): void;
+    render(): any;
+}

package/dist/types/components/navigation-item/index.d.ts

@@ -0,0 +1,2 @@
+import { DBNavigationItem } from './navigation-item';
+export default DBNavigationItem;

package/dist/types/components/navigation-item/model.d.ts

@@ -0,0 +1,34 @@
+import { ClickEvent, ClickEventProps, ClickEventState, GlobalProps, GlobalState, IconProps, InitializedState, NavigationBackButtonProps, ShowIconProps, TextProps, WidthProps } from '../../shared/model';
+import { NavigationItemSafeTriangle } from '../../utils/navigation';
+export type DBNavigationItemDefaultProps = {
+    /**
+     * Alternative indicator for active navigation item (bold font). In contrast to the use of aria-current="page" on the contained anchor, this does not guarantee correct a11y.
+     */
+    active?: boolean;
+    /**
+     * The disabled attribute can be set to [keep a user from clicking on the item](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#disabled).
+     */
+    disabled?: boolean;
+    /**
+     * React-specific property to pass in a slot for sub-navigation
+     */
+    subNavigation?: any;
+    /**
+     * This is for mobile navigation only, if it is set the sub-navigation is a static overlay
+     */
+    subNavigationExpanded?: boolean;
+};
+export type DBNavigationItemProps = DBNavigationItemDefaultProps & GlobalProps & ClickEventProps<HTMLButtonElement> & IconProps & WidthProps & NavigationBackButtonProps & ShowIconProps & TextProps;
+export type DBNavigationItemDefaultState = {
+    handleBackClick: (event: ClickEvent<HTMLButtonElement>) => void;
+    hasAreaPopup: boolean;
+    isSubNavigationExpanded: boolean;
+    subNavigationId: string;
+    /**
+     * Internal state property to show/hide sub-navigation button
+     */
+    hasSubNavigation?: boolean;
+    updateSubNavigationState: () => void;
+    navigationItemSafeTriangle?: NavigationItemSafeTriangle;
+};
+export type DBNavigationItemState = DBNavigationItemDefaultState & ClickEventState<HTMLButtonElement> & GlobalState & InitializedState;

package/dist/types/components/navigation-item/navigation-item.d.ts

@@ -0,0 +1,39 @@
+import { DBNavigationItemProps } from "./model";
+import { ClickEvent } from "../../shared/model";
+/**
+ * @slot children - This is a default/unnamed slot
+ * @slot subNavigation - TODO: Add description for slotSubNavigation
+ */
+export declare class DBNavigationItem {
+    private _ref;
+    subNavigationExpanded: DBNavigationItemProps["subNavigationExpanded"];
+    onClick: any;
+    id: DBNavigationItemProps["id"];
+    className: DBNavigationItemProps["className"];
+    width: DBNavigationItemProps["width"];
+    icon: DBNavigationItemProps["icon"];
+    showIcon: DBNavigationItemProps["showIcon"];
+    active: DBNavigationItemProps["active"];
+    disabled: DBNavigationItemProps["disabled"];
+    text: DBNavigationItemProps["text"];
+    backButtonId: DBNavigationItemProps["backButtonId"];
+    backButtonText: DBNavigationItemProps["backButtonText"];
+    initialized: boolean;
+    hasAreaPopup: boolean;
+    hasSubNavigation: boolean;
+    isSubNavigationExpanded: boolean;
+    subNavigationId: string;
+    navigationItemSafeTriangle: any;
+    handleClick(event: ClickEvent<HTMLButtonElement>): void;
+    handleBackClick(event: ClickEvent<HTMLButtonElement>): void;
+    updateSubNavigationState(): void;
+    /**
+     * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.
+     * @param element  the ref for the component
+     * @param customElementSelector  the custom element like `my-component`
+     */
+    private enableAttributePassing;
+    componentDidLoad(): void;
+    componentDidUpdate(): void;
+    render(): any;
+}

package/dist/types/components/notification/index.d.ts

@@ -0,0 +1,2 @@
+import { DBNotification } from './notification';
+export default DBNotification;

package/dist/types/components/notification/model.d.ts

@@ -0,0 +1,57 @@
+import { CloseEventProps, CloseEventState, GlobalProps, GlobalState, IconProps, InnerCloseButtonProps, PopoverProps, SemanticProps, ShowIconProps, TextProps } from '../../shared/model';
+export declare const NotificationVariantList: readonly ["docked", "standalone", "overlay"];
+export type NotificationVariantType = (typeof NotificationVariantList)[number];
+export declare const NotificationLinkVariantList: readonly ["block", "inline"];
+export type NotificationLinkVariantType = (typeof NotificationLinkVariantList)[number];
+export declare const NotificationAriaLiveList: readonly ["assertive", "polite", "off"];
+export type NotificationAriaLiveType = (typeof NotificationAriaLiveList)[number];
+export type DBNotificationDefaultProps = {
+    /**
+     * The arialive attribute will lead to that the screenreader interrupts immediately
+     * and reads out the notification if set to "assertive", while it will wait for the
+     * user's idleness when set to "polite", compare to [aria-live](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-live)
+     */
+    ariaLive?: NotificationAriaLiveType;
+    /**
+     * The closeable attribute shows/hides the close button on the top right.
+     */
+    closeable?: boolean;
+    /**
+     * The headline attribute changes the text of the bold headline.
+     */
+    headline?: string | any;
+    /**
+     * The slotImage can be set instead of an icon.
+     */
+    image?: any;
+    /**
+     * The slotLink can be set for non overlay-notifications
+     */
+    link?: any;
+    /**
+     * The linkVariant will be used if slotLink is set.
+     */
+    linkVariant?: NotificationLinkVariantType;
+    /**
+     * Enables or disables the visibility of the headline.
+     */
+    showHeadline?: boolean;
+    /**
+     * The timestamp attribute can be set for overlay notifications
+     */
+    timestamp?: string;
+    /**
+     * Enables or disables the visibility of the timestamp.
+     */
+    showTimestamp?: boolean;
+    /**
+     * The variant attribute changes the styling of the notification.
+     * The docked notifications are used e.g. between header and main content to show a global alert.
+     * The standalone notifications are used  e.g. inside a form to show an alert for a specific field.
+     * The overlay notifications are used for absolute and floating notifications like snackbars etc.
+     */
+    variant?: NotificationVariantType;
+};
+export type DBNotificationProps = DBNotificationDefaultProps & GlobalProps & CloseEventProps & IconProps & SemanticProps & InnerCloseButtonProps & PopoverProps & ShowIconProps & TextProps;
+export type DBNotificationDefaultState = {};
+export type DBNotificationState = DBNotificationDefaultState & GlobalState & CloseEventState;

package/dist/types/components/notification/notification.d.ts

@@ -0,0 +1,36 @@
+import { DBNotificationProps } from "./model";
+import { ClickEvent } from "../../shared/model";
+/**
+ * @slot children - This is a default/unnamed slot
+ * @slot image - TODO: Add description for slotImage
+ * @slot link - TODO: Add description for slotLink
+ */
+export declare class DBNotification {
+    private _ref;
+    onClose: any;
+    id: DBNotificationProps["id"];
+    className: DBNotificationProps["className"];
+    ariaLive: DBNotificationProps["ariaLive"];
+    semantic: DBNotificationProps["semantic"];
+    variant: DBNotificationProps["variant"];
+    icon: DBNotificationProps["icon"];
+    showIcon: DBNotificationProps["showIcon"];
+    linkVariant: DBNotificationProps["linkVariant"];
+    headline: DBNotificationProps["headline"];
+    showHeadline: DBNotificationProps["showHeadline"];
+    text: DBNotificationProps["text"];
+    timestamp: DBNotificationProps["timestamp"];
+    showTimestamp: DBNotificationProps["showTimestamp"];
+    closeable: DBNotificationProps["closeable"];
+    closeButtonId: DBNotificationProps["closeButtonId"];
+    closeButtonText: DBNotificationProps["closeButtonText"];
+    handleClose(event: ClickEvent<HTMLButtonElement>): void;
+    /**
+     * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.
+     * @param element  the ref for the component
+     * @param customElementSelector  the custom element like `my-component`
+     */
+    private enableAttributePassing;
+    componentDidLoad(): void;
+    render(): any;
+}

package/dist/types/components/page/index.d.ts

@@ -0,0 +1,2 @@
+import { DBPage } from './page';
+export default DBPage;

package/dist/types/components/page/model.d.ts

@@ -0,0 +1,32 @@
+import { GlobalProps, GlobalState } from '../../shared/model';
+export declare const PageVariantList: readonly ["auto", "fixed"];
+export type PageVariantType = (typeof PageVariantList)[number];
+export declare const PageDocumentOverflowList: readonly ["hidden", "auto"];
+export type PageDocumentOverflowType = (typeof PageDocumentOverflowList)[number];
+export type DBPageDefaultProps = {
+    /**
+     * The documentOverflow sets the overflow:hidden/auto to the root document
+     */
+    documentOverflow?: PageDocumentOverflowType;
+    /**
+     * Set this to have a transition with opacity to avoid layout-shifts https://simonhearne.com/2021/layout-shifts-webfonts/
+     */
+    fadeIn?: boolean;
+    /**
+     * The slot can be used for React to set a footer.
+     */
+    footer?: any;
+    /**
+     * The slot can be used for React to set a header.
+     */
+    header?: any;
+    /**
+     * The variant=fixed uses flex-box to make header and footer static
+     */
+    variant?: PageVariantType;
+};
+export type DBPageProps = DBPageDefaultProps & GlobalProps;
+export type DBPageDefaultState = {
+    fontsLoaded?: boolean;
+};
+export type DBPageState = DBPageDefaultState & GlobalState;

package/dist/types/components/page/page.d.ts

@@ -0,0 +1,24 @@
+import { DBPageProps } from "./model";
+/**
+ * @slot children - This is a default/unnamed slot
+ * @slot header - TODO: Add description for slotHeader
+ * @slot footer - TODO: Add description for slotFooter
+ */
+export declare class DBPage {
+    private _ref;
+    fadeIn: DBPageProps["fadeIn"];
+    documentOverflow: DBPageProps["documentOverflow"];
+    variant: DBPageProps["variant"];
+    id: DBPageProps["id"];
+    className: DBPageProps["className"];
+    fontsLoaded: boolean;
+    /**
+     * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.
+     * @param element  the ref for the component
+     * @param customElementSelector  the custom element like `my-component`
+     */
+    private enableAttributePassing;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    render(): any;
+}

package/dist/types/components/popover/index.d.ts

@@ -0,0 +1,2 @@
+import { DBPopover } from './popover';
+export default DBPopover;

package/dist/types/components/popover/model.d.ts

@@ -0,0 +1,18 @@
+import { GapProps, GlobalProps, GlobalState, InitializedState, PlacementProps, PopoverProps, PopoverState, SpacingProps } from '../../shared/model';
+export type DBPopoverDefaultProps = {
+    /**
+     * Use open to disable the default hover/focus behavior to use it on click or other trigger.
+     */
+    open?: boolean;
+    /**
+     * The trigger to open the popover e.g. a button
+     */
+    trigger?: any;
+};
+export type DBPopoverProps = DBPopoverDefaultProps & GlobalProps & SpacingProps & PlacementProps & GapProps & PopoverProps;
+export type DBPopoverDefaultState = {
+    isExpanded?: boolean;
+    getTrigger: () => Element | null;
+    handleLeave: (event: any) => void;
+};
+export type DBPopoverState = DBPopoverDefaultState & GlobalState & PopoverState & InitializedState;

package/dist/types/components/popover/popover.d.ts

@@ -0,0 +1,31 @@
+import { DBPopoverProps } from "./model";
+/**
+ * @slot children - This is a default/unnamed slot
+ * @slot trigger - TODO: Add description for slotTrigger
+ */
+export declare class DBPopover {
+    private _ref;
+    id: DBPopoverProps["id"];
+    className: DBPopoverProps["className"];
+    spacing: DBPopoverProps["spacing"];
+    gap: DBPopoverProps["gap"];
+    animation: DBPopoverProps["animation"];
+    open: DBPopoverProps["open"];
+    delay: DBPopoverProps["delay"];
+    width: DBPopoverProps["width"];
+    placement: DBPopoverProps["placement"];
+    initialized: boolean;
+    isExpanded: boolean;
+    handleAutoPlacement(): void;
+    handleLeave(event: any): void;
+    getTrigger(): Element;
+    /**
+     * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.
+     * @param element  the ref for the component
+     * @param customElementSelector  the custom element like `my-component`
+     */
+    private enableAttributePassing;
+    componentDidLoad(): void;
+    componentDidUpdate(): void;
+    render(): any;
+}

package/dist/types/components/radio/index.d.ts

@@ -0,0 +1,2 @@
+import { DBRadio } from './radio';
+export default DBRadio;

package/dist/types/components/radio/model.d.ts

@@ -0,0 +1,7 @@
+import { ChangeEventProps, ChangeEventState, FocusEventProps, FocusEventState, FormCheckProps, FormProps, FormState, GlobalProps, GlobalState, InitializedState, SizeProps } from '../../shared/model';
+export type DBRadioDefaultProps = {
+    describedbyid?: string;
+};
+export type DBRadioProps = DBRadioDefaultProps & GlobalProps & ChangeEventProps<HTMLInputElement> & FocusEventProps<HTMLInputElement> & FormProps & FormCheckProps & SizeProps;
+export type DBRadioDefaultState = {};
+export type DBRadioState = DBRadioDefaultState & GlobalState & ChangeEventState<HTMLInputElement> & FocusEventState<HTMLInputElement> & FormState & InitializedState;

package/dist/types/components/radio/radio.d.ts

@@ -0,0 +1,41 @@
+import { DBRadioProps } from "./model";
+import { ChangeEvent, InteractionEvent } from "../../shared/model";
+/**
+ * @slot children - This is a default/unnamed slot
+
+ */
+export declare class DBRadio {
+    private _ref;
+    id: DBRadioProps["id"];
+    checked: DBRadioProps["checked"];
+    onChange: any;
+    change: DBRadioProps["change"];
+    onBlur: any;
+    blur: DBRadioProps["blur"];
+    onFocus: any;
+    focus: DBRadioProps["focus"];
+    size: DBRadioProps["size"];
+    showLabel: DBRadioProps["showLabel"];
+    className: DBRadioProps["className"];
+    validation: DBRadioProps["validation"];
+    name: DBRadioProps["name"];
+    disabled: DBRadioProps["disabled"];
+    describedbyid: DBRadioProps["describedbyid"];
+    value: DBRadioProps["value"];
+    required: DBRadioProps["required"];
+    label: DBRadioProps["label"];
+    initialized: boolean;
+    _id: any;
+    handleChange(event: ChangeEvent<HTMLInputElement>): void;
+    handleBlur(event: InteractionEvent<HTMLInputElement>): void;
+    handleFocus(event: InteractionEvent<HTMLInputElement>): void;
+    /**
+     * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.
+     * @param element  the ref for the component
+     * @param customElementSelector  the custom element like `my-component`
+     */
+    private enableAttributePassing;
+    componentDidLoad(): void;
+    componentDidUpdate(): void;
+    render(): any;
+}

package/dist/types/components/section/index.d.ts

@@ -0,0 +1,2 @@
+import { DBSection } from './section';
+export default DBSection;

package/dist/types/components/section/model.d.ts

@@ -0,0 +1,5 @@
+import { ContainerWidthProps, GlobalProps, GlobalState, SpacingProps } from '../../shared/model';
+export type DBSectionDefaultProps = {};
+export type DBSectionProps = DBSectionDefaultProps & GlobalProps & SpacingProps & ContainerWidthProps;
+export type DBSectionDefaultState = {};
+export type DBSectionState = DBSectionDefaultState & GlobalState;

package/dist/types/components/section/section.d.ts

@@ -0,0 +1,21 @@
+import { DBSectionProps } from "./model";
+/**
+ * @slot children - This is a default/unnamed slot
+
+ */
+export declare class DBSection {
+    private _ref;
+    id: DBSectionProps["id"];
+    className: DBSectionProps["className"];
+    spacing: DBSectionProps["spacing"];
+    width: DBSectionProps["width"];
+    _id: string;
+    /**
+     * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.
+     * @param element  the ref for the component
+     * @param customElementSelector  the custom element like `my-component`
+     */
+    private enableAttributePassing;
+    componentDidLoad(): void;
+    render(): any;
+}

package/dist/types/components/select/index.d.ts

@@ -0,0 +1,2 @@
+import { DBSelect } from './select';
+export default DBSelect;

package/dist/types/components/select/model.d.ts

@@ -0,0 +1,43 @@
+import { ChangeEventProps, ChangeEventState, ClickEventProps, ClickEventState, FocusEventProps, FocusEventState, FormMessageProps, FormProps, FormState, GlobalProps, GlobalState, IconProps, InitializedState, InputEventProps, InputEventState, ShowIconProps } from '../../shared/model';
+export type DBSelectDefaultProps = {
+    /**
+     * The description attribute will add a paragraph below the select.
+     */
+    description?: string;
+    /**
+     * If you don't/can't use children/slots you can pass in the options as an array.
+     */
+    options?: DBSelectOptionType[];
+};
+export type DBSelectOptionType = {
+    /**
+     * Identifier for option
+     */
+    id?: string;
+    /**
+     * Disables this option
+     */
+    disabled?: boolean;
+    /**
+     * Selects this option
+     */
+    selected?: boolean;
+    /**
+     * If the value is different from the label you want to show to the user.
+     */
+    label?: string;
+    /**
+     * If you want to use optgroup you can nest options here.
+     */
+    options?: DBSelectOptionType[];
+    /**
+     * The main value you select, will be shown as default label if no label is set.
+     */
+    value: string | string[] | number;
+};
+export type DBSelectProps = DBSelectDefaultProps & GlobalProps & ClickEventProps<HTMLSelectElement> & ChangeEventProps<HTMLSelectElement> & FocusEventProps<HTMLSelectElement> & InputEventProps<HTMLSelectElement> & FormProps & IconProps & FormMessageProps & ShowIconProps;
+export type DBSelectDefaultState = {
+    _placeholderId: string;
+    getOptionLabel: (option: DBSelectOptionType) => string;
+};
+export type DBSelectState = DBSelectDefaultState & GlobalState & ClickEventState<HTMLSelectElement> & ChangeEventState<HTMLSelectElement> & FocusEventState<HTMLSelectElement> & InputEventState<HTMLSelectElement> & FormState & InitializedState;