@govtechsg/sgds-web-component 0.0.12 → 0.0.14

package/base/dropdown-element.d.ts

@@ -1,31 +1,52 @@
-import { Dropdown } from "bootstrap";
-import * as Popper from "@popperjs/core";
 import type { StrictModifiers } from "@popperjs/core";
+import * as Popper from "@popperjs/core";
+import { Dropdown } from "bootstrap";
 import { Ref } from "lit/directives/ref.js";
 import { SgdsDropdownItem } from "../components/Dropdown/sgds-dropdown-item";
 import SgdsElement from "./sgds-element";
-export type DropdownButtonVariant = "primary" | "secondary" | "success" | "danger" | "warning" | "info" | "light" | "dark";
 export type DropDirection = "left" | "right" | "up" | "down";
+/**
+ * @event sgds-show - Emitted event when show instance is called
+ * @event sgds-after-show - Emitted event when dropdown has been made visible to the user and CSS transitions have completed
+ * @event sgds-hide - Emitted event when hide instance is called
+ * @event sgds-after-hide - Emitted event when dropdown has hidden to the user and CSS transitions have completed
+ */
 export declare class DropdownElement extends SgdsElement {
     static styles: import("lit").CSSResultGroup;
+    /** @internal */
     myDropdown: Ref<HTMLElement>;
+    /** @internal */
     bsDropdown: Dropdown;
-    noFlip: boolean;
-    menuAlignRight: boolean;
-    drop: DropDirection;
+    /** @internal Controls auto-flipping of menu */
+    protected noFlip: boolean;
+    /** @internal When true, aligns right edge of menu with right edge of button */
+    protected menuAlignRight: boolean;
+    /** @internal The drop position of menu relative to the toggle button */
+    protected drop: DropDirection;
+    /**  Additional configuration to pass to Popper.js. See https://popper.js.org/ for config opts */
     popperOpts: {};
-    togglerId: string;
+    /** @internal Forwards value to id attribute of toggle button of Dropdown. An unique id generated by default */
+    protected togglerId: string;
+    /** Sets the text content of Dropdown button */
     togglerText: string;
-    variant: DropdownButtonVariant;
+    /** When true, dropdown menu shows on first load */
     menuIsOpen: boolean;
+    /** Controls the close behaviour of dropdown menu. By default menu auto-closes when SgdsDropdownItem or area outside dropdown is clicked */
     close: "outside" | "default" | "inside";
+    /** Disables the dropdown toggle */
     disabled: boolean;
+    /** @internal */
     nextDropdownItemNo: number;
+    /** @internal */
     prevDropdownItemNo: number;
+    /** @internal */
     dropdownConfig: Partial<Popper.Options>;
+    /** @internal */
     modifierOpt: StrictModifiers[];
     firstUpdated(): void;
+    /** When invoked, opens the dropdown menu */
     showMenu(): void;
+    /** When invoked, hides the dropdown menu */
     hideMenu(): void;
     _onClickButton(): void;
     _resetMenu(): void;

package/base/link-element.d.ts

@@ -1,8 +1,16 @@
 import SgdsElement from "./sgds-element";
+/**
+ * @slot default - Default slot for SgdsMainnavItem anchor element
+ */
 export default class LinkElement extends SgdsElement {
     static styles: import("lit").CSSResultGroup;
+    /** when true, sets the active stylings of .nav-link */
     active: boolean;
+    /** Href attribute for anchor element in SgdsMainnavItem */
     href: string;
+    /** Disables the SgdsMainnavItem */
     disabled: boolean;
+    /** Where to display the linked URL, as the name for a browsing context. Forwards to the HTMLAnchor target attribute */
+    target: "_blank" | "_parent" | "_self" | "_top";
     render(): import("lit").TemplateResult<1>;
 }

package/components/Accordion/index.d.ts

@@ -1,2 +1,2 @@
-export * from "./sgds-accordion";
-export * from "./sgds-accordion-item";
+export { SgdsAccordion } from "./sgds-accordion";
+export { SgdsAccordionItem } from "./sgds-accordion-item";

package/components/Accordion/sgds-accordion-item.d.ts

@@ -10,6 +10,12 @@ import SgdsElement from "../../base/sgds-element";
  * @csspart base - The accordion-item base wrapper
  * @csspart header - The accordion-item button header
  * @csspart content - The accordion-item content
+ *
+ * @cssprop --accordion-item-padding-y - The top and bottom padding for the container of accordion item's content
+ * @cssprop --accordion-item-padding-x - The right and left padding for the container of accordion item's content
+ * @cssprop --accordion-item-border-radius - The border radius of the accordion item
+ * @cssprop --accordion-item-font-weight - The font weight of accordion-button when it is not collapsed
+ * @cssprop --accordion-item-line-height - The line height of accordion
  */
 export declare class SgdsAccordionItem extends SgdsElement {
     static styles: import("lit").CSSResultGroup[];
@@ -21,12 +27,10 @@ export declare class SgdsAccordionItem extends SgdsElement {
     body: HTMLElement;
     /** Controls whether accordion-item is open or close */
     open: boolean;
-    /** Title of the accordion */
+    /** The summary to show in the header of the accordion */
     summary: string;
-    /** Disables the accordion-item. When true, accordion-item cannot open */
-    disabled: boolean;
     /** Optional for accordion item. Can be used to insert any utility classes such as `me-auto` */
-    accordionItemClasses?: string;
+    accordionItemClasses: string;
     firstUpdated(): void;
     private handleSummaryClick;
     private handleSummaryKeyDown;

package/components/Accordion/sgds-accordion.d.ts

@@ -1,13 +1,15 @@
 import SgdsElement from "../../base/sgds-element";
 import type SgdsAccordionItem from "./sgds-accordion-item";
 /**
- * @summary A dropdown mechanism that allow users to either show or hide related content.
+ * @summary A dropdown mechanism that allow users to either show or hide related content. `SgdsAccordion` is a wrapper to manage the behaviour for multiple `SgdsAccordionItems`
  * @slot default - slot for accordion-item
  */
 export declare class SgdsAccordion extends SgdsElement {
     static styles: import("lit").CSSResultGroup[];
+    /** Allows multiple accordion items to be opened at the same time */
     allowMultiple: boolean;
-    accordionClasses?: string;
+    /** Optional for accordion wrapper. Can be used to insert any utility classes such as me-auto */
+    accordionClasses: string;
     /** @internal */
     private defaultNodes;
     /** @internal */

package/components/ActionCard/index.d.ts

@@ -1 +1 @@
-export * from "./sgds-action-card";
+export { SgdsActionCard } from "./sgds-action-card";

package/components/ActionCard/sgds-action-card.d.ts

@@ -1,20 +1,48 @@
 import { Ref } from "lit/directives/ref.js";
 import { CardElement } from "../../base/card-element";
-export type CardVariant = "card-action" | "card-action-quantity-toggle";
+import { SgdsCheckbox } from "../Checkbox";
+import { SgdsRadio } from "../Radio";
 export type TypeVariant = "checkbox" | "radio";
+/**
+ * @summary Action Card are cards with built in checkbox or radio components. The ref of input is extended to the Card's body.
+ * @slot icon - Icon content in the card-subtitile
+ * @slot card-subtitle - The subtitle of the card
+ * @slot card-title - The title of the card
+ * @slot card-text - The paragrapher text of the card
+ *
+ * @event sgds-change - Emitted when the checked state of card's checkbox changes or when the selected card's radio has changed
+ *
+ * @csspart base - The action card base wrapper
+ * @csspart body - The action card body
+ * @csspart subtitle - The action card subtitle
+ * @csspart title - The action card title
+ * @csspart text - The action card text
+ *
+ */
 export declare class SgdsActionCard extends CardElement {
     static styles: import("lit").CSSResultGroup[];
     /** @internal */
-    inputRef: Ref<HTMLInputElement>;
-    type?: TypeVariant;
-    /** Use on actionable cards like SelectableCard and Quantity Toggle Card' */
-    variant: CardVariant;
-    /** The card's subtitle iconName. */
-    iconName?: string;
-    /** The input's id. */
-    inputId?: string;
+    inputRef: Ref<SgdsCheckbox | SgdsRadio>;
+    /** Name of the HTML form control. Submitted with the form as part of a name/value pair. */
+    name: string;
+    /** Value of the HTML form control. Primarily used to differentiate a list of related checkboxes that have the same name. */
+    value: string;
+    /** Disables the input (so the user can't check / uncheck it). */
+    disabled: boolean;
+    /** Draws the input in a checked state. */
+    checked: boolean;
+    /** The type of input of the action card */
+    type: TypeVariant;
+    /** Controls the active styling of the action card */
     active: boolean;
-    onInputChange(): void;
+    /** Simulates a click on the input control*/
+    click(): void;
+    /** @internal Declare the click event listener*/
+    handleInputChange(): Promise<void>;
+    /** @internal The input's id. */
+    private inputId;
+    handleRadioCheckedChange(): Promise<void>;
+    handleDisabledChange(): Promise<void>;
     handleKeyDown(event: KeyboardEvent): void;
     render(): import("lit").TemplateResult;
 }

package/components/Alert/index.d.ts

@@ -1 +1 @@
-export * from "./sgds-alert";
+export { SgdsAlert } from "./sgds-alert";

package/components/Badge/index.d.ts

@@ -1 +1 @@
-export { SgdsBadge } from "./sgds-badge";
+export { SgdsBadge, BadgeVariant } from "./sgds-badge";

package/components/Button/index.d.ts

@@ -1 +1 @@
-export * from "./sgds-button";
+export { SgdsButton, ButtonVariant } from "./sgds-button";

package/components/Button/sgds-button.d.ts

@@ -1,32 +1,37 @@
 import SgdsElement from "../../base/sgds-element";
 export type ButtonVariant = "primary" | "secondary" | "success" | "danger" | "warning" | "info" | "light" | "dark" | "link" | "outline-primary" | "outline-secondary" | "outline-success" | "outline-danger" | "outline-warning" | "outline-info" | "outline-light" | "outline-dark";
 /**
- * @slot - The button's label.
+ * @summary Custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.
+ *
+ * @slot default - The button's label.
  *
  * @event sgds-blur - Emitted when the button is not focused.
  * @event sgds-focus - Emitted when the button is focused.
  */
 export declare class SgdsButton extends SgdsElement {
     static styles: import("lit").CSSResultGroup[];
+    /** @internal */
     button: HTMLButtonElement | HTMLLinkElement;
+    /** @internal */
     private readonly formSubmitController;
-    private hasFocus;
-    /** The button's variant. */
+    /** One or more button variant combinations buttons may be one of a variety of visual variants such as: `primary`, `secondary`, `success`, `danger`, `warning`, `info`, `dark`, `light`, `link` as well as "outline" versions (prefixed by `outline-*`) */
     variant: ButtonVariant;
-    buttonClasses?: string;
-    /** Button sizes */
+    /** Optional for button. Can be used to insert any utility classes such as me-auto **/
+    buttonClasses: string;
+    /** Specifies a large or small button */
     size: "sm" | "lg";
-    /** Button active state */
+    /** Manually set the visual state of the button to `:active` */
     active: boolean;
-    /** Button disabled state */
+    /** The disabled state of the button */
     disabled: boolean;
+    /** The behavior of the button with default as `type='button', `reset` resets all the controls to their initial values and `submit` submits the form data to the server */
     type: "button" | "submit" | "reset";
     /** When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`. */
-    href?: string;
+    href: string;
     /** Tells the browser where to open the link. Only used when `href` is set. */
-    target?: "_blank" | "_parent" | "_self" | "_top";
+    target: "_blank" | "_parent" | "_self" | "_top";
     /** Tells the browser to download the linked file as this filename. Only used when `href` is set. */
-    download?: string;
+    download: string;
     /**
      * The "form owner" to associate the button with. If omitted, the closest containing form will be used instead. The
      * value of this attribute must be an id of a form in the same document or shadow root as the button.
@@ -49,6 +54,7 @@ export declare class SgdsButton extends SgdsElement {
     handleBlur(): void;
     handleFocus(): void;
     handleClick(event: MouseEvent): void;
+    /** @internal */
     clickHandler: () => void;
     render(): import("lit").TemplateResult;
 }

package/components/Card/index.d.ts

@@ -0,0 +1 @@
+export { SgdsCard } from "./sgds-card";

package/components/Card/sgds-card.d.ts

@@ -0,0 +1,24 @@
+import { CardElement } from "../../base/card-element";
+/**
+ * @summary Cards can be used for headers and footers, a wide variety of content, contain contextual background colors and images.
+ * @slot card-title - The title of the card
+ * @slot card-text - The paragrapher text of the card
+ * @slot card-image - Accepts an image or svg element of the card. Only a single element is allowed to be passed in.
+ * @slot card-link - Accepts an anchor element. Only a single element is allowed to be passed in.
+ *
+ *
+ * @csspart base - The card base wrapper
+ * @csspart body - The card body
+ * @csspart title - The card title
+ * @csspart text - The card text
+ *
+ */
+export declare class SgdsCard extends CardElement {
+    static styles: import("lit").CSSResultGroup;
+    /** Extends the link passed in slot[name="link"] to the entire card */
+    stretchedLink: boolean;
+    handleLinkSlotChange(e: Event): void;
+    handleImgSlotChange(e: Event): void;
+    render(): import("lit").TemplateResult<1>;
+}
+export default SgdsCard;

package/components/Checkbox/index.d.ts

@@ -1 +1 @@
-export * from "./sgds-checkbox";
+export { SgdsCheckbox } from "./sgds-checkbox";

package/components/Checkbox/sgds-checkbox.d.ts

@@ -1,18 +1,22 @@
 import SgdsElement from "../../base/sgds-element";
-export declare class SgdsCheckbox extends SgdsElement {
+import { SgdsFormControl } from "../../utils/form";
+/**
+ * @summary Checkbox component is used when you require users to select multiple items from a list.
+ *
+ * @slot default - The label of checkbox.
+ *
+ * @event sgds-change - Emitted when the checked state changes.
+ */
+export declare class SgdsCheckbox extends SgdsElement implements SgdsFormControl {
     static styles: import("lit").CSSResultGroup[];
+    /**@internal */
     input: HTMLInputElement;
+    /**@internal */
     private readonly formSubmitController;
     /** Name of the HTML form control. Submitted with the form as part of a name/value pair. */
     name: string;
-    /** For Id/For pair of the HTML form control. */
-    checkboxId: string;
     /** For aria-label when there is no appropriate text label visible */
     ariaLabel: string;
-    /** Manually style the input as valid */
-    valid: boolean;
-    /** Manually style the input as invalid */
-    invalid: boolean;
     /** Value of the HTML form control. Primarily used to differentiate a list of related checkboxes that have the same name. */
     value: string;
     /** Makes the checkbox a required field. */
@@ -21,14 +25,29 @@ export declare class SgdsCheckbox extends SgdsElement {
     checked: boolean;
     /** Disables the checkbox (so the user can't check / uncheck it). */
     disabled: boolean;
+    /** Allows invalidFeedback, invalid and valid styles to be visible with the input */
+    hasFeedback: boolean;
+    /**Feedback text for error state when validated */
+    invalidFeedback?: string;
     /** Gets or sets the default value used to reset this element. The initial value corresponds to the one originally specified in the HTML that created this element. */
     defaultChecked: boolean;
+    /** @internal */
+    valid: boolean;
+    /** @internal */
+    invalid: boolean;
+    /** @internal For Id/For pair of the HTML form control and label. */
+    private inputId;
     /** Simulates a click on the checkbox. */
     click(): void;
+    /** Sets focus on the checkbox. */
+    focus(options?: FocusOptions): void;
+    /** Removes focus from the checkbox. */
+    blur(): void;
     /** Checks for validity and shows the browser's validation message if the control is invalid. */
     reportValidity(): boolean;
     handleChange(): void;
     handleKeyDown(event: KeyboardEvent): void;
+    handleInvalid(e: Event): void;
     handleDisabledChange(): void;
     handleStateChange(): void;
     render(): import("lit").TemplateResult<1>;

package/components/Dropdown/index.d.ts

@@ -1,3 +1,2 @@
-export * from "./sgds-dropdown";
-export * from "./sgds-dropdown-item";
-export type { DropdownButtonVariant, DropDirection } from "../../base/dropdown-element";
+export { SgdsDropdown, DropDirection, DropdownButtonVariant } from "./sgds-dropdown";
+export { SgdsDropdownItem } from "./sgds-dropdown-item";

package/components/Dropdown/sgds-dropdown-item.d.ts

@@ -1,8 +1,12 @@
 import LinkElement from "../../base/link-element";
+/**
+ * @summary `SgdsDropdownItem` are navigation links built with `HTMLAnchorElement`. It should be used in the default slot of `SgdsDropdown`
+ */
 export declare class SgdsDropdownItem extends LinkElement {
     static styles: import("lit").CSSResultGroup[];
-    anchor: HTMLElement;
-    firstUpdated(): void;
+    /**@internal */
+    private anchor;
+    connectedCallback(): void;
     render(): import("lit").TemplateResult<1>;
 }
 export default SgdsDropdownItem;

package/components/Dropdown/sgds-dropdown.d.ts

@@ -1,8 +1,27 @@
 import { DropdownElement } from "../../base/dropdown-element";
 export type DropDirection = "left" | "right" | "up" | "down";
+export type DropdownButtonVariant = "primary" | "secondary" | "success" | "danger" | "warning" | "info" | "light" | "dark";
+/**
+ * @summary `SgdsDropdown` toggles contextual overlays for displaying lists of links.
+ * @slot default - slot for sgds-dropdown-item passed into dropdown's menu
+ *
+ * @csspart menu - The dropdown's menu (ul element)
+ */
 export declare class SgdsDropdown extends DropdownElement {
     static styles: import("lit").CSSResultGroup[];
     constructor();
+    connectedCallback(): void;
+    /** Controls auto-flipping of menu */
+    noFlip: boolean;
+    /** When true, aligns right edge of menu with right edge of button */
+    menuAlignRight: boolean;
+    /** The drop position of menu relative to the toggle button */
+    drop: DropDirection;
+    /** Sets color of Dropdown button */
+    variant: DropdownButtonVariant;
+    /**@internal */
+    private dropdownRef;
+    firstUpdated(): Promise<void>;
     render(): import("lit").TemplateResult<1>;
 }
 export default SgdsDropdown;

package/components/FileUpload/index.d.ts

@@ -1 +1 @@
-export { SgdsFileUpload } from "./sgds-fileupload";
+export { SgdsFileUpload, FileUploadButtonVariant } from "./sgds-file-upload";

package/components/FileUpload/sgds-file-upload.d.ts

@@ -0,0 +1,44 @@
+import SgdsElement from "../../base/sgds-element";
+export type FileUploadButtonVariant = "primary" | "secondary" | "success" | "danger" | "warning" | "info" | "light" | "dark" | "link" | "outline-primary" | "outline-secondary" | "outline-success" | "outline-danger" | "outline-warning" | "outline-info" | "outline-light" | "outline-dark";
+/**
+ * @summary Allows users to upload files of various sizes and formats
+ * @slot default - Label for file upload button
+ *
+ * @event sgds-files-selected - Emitted when files are selected for uploading
+ *
+ * @cssproperty --fileupload-file-icon-fill - Left icon fill color
+ * @cssproperty --fileupload-remove-icon-fill - Remove icon fill color
+ * @cssproperty --fileupload-remove-icon-hover-fill - Remove icon mouse over fill color
+ *
+ */
+export declare class SgdsFileUpload extends SgdsElement {
+    static styles: import("lit").CSSResultGroup[];
+    /** The button's variant. */
+    variant: FileUploadButtonVariant;
+    disabled: boolean;
+    /** Allows multiple files to be listed for uploading */
+    multiple: boolean;
+    /** Specify the acceptable file type  */
+    accept: string;
+    /** Specifies a large or small button */
+    size: "sm" | "lg";
+    /** Customize the check icon with SVG */
+    checkedIcon: string;
+    /** Customize the cancel icon with SVG */
+    cancelIcon: string;
+    /** @internal */
+    private files;
+    /** @internal */
+    private selectedFiles;
+    setFileList(files: FileList): void;
+    /** @internal */
+    private inputRef;
+    /** @internal */
+    private handleClick;
+    /** @internal */
+    private handleInputChange;
+    /** @internal */
+    removeFileHandler(index: number): void;
+    render(): import("lit").TemplateResult<1>;
+}
+export default SgdsFileUpload;

package/components/Footer/index.d.ts

@@ -1 +1 @@
-export * from "./sgds-footer";
+export { SgdsFooter, ColumnLinks, Links } from "./sgds-footer";

package/components/Footer/sgds-footer.d.ts

@@ -8,19 +8,53 @@ export interface ColumnLinks {
     links: Links[];
 }
 /**
+ * @summary The footer contains supporting information for your service at the bottom of your website. All .gov.sg digital services shall contain a Global Footer Bar across all pages. The Global Footer Bar should include the name of the digital service, contact information, a privacy statement and the terms of use.
+ *
  * @csspart footer-top - The component's footer-top section container.
  * @csspart footer-bottom - The component's footer-bottom section container.
+ *
+ * @cssproperty footer-top - The component's footer-top section container.
+ * @cssproperty footer-bottom - The component's footer-bottom section container.
  */
 export declare class SgdsFooter extends SgdsElement {
     static styles: import("lit").CSSResultGroup[];
+    /**
+     * 	Sets title of SgdsFooter
+     */
     title: string;
+    /**
+     * 	Sets description of SgdsFooter
+     */
     description: string;
+    /**
+     * 	Sets copyrightLiner of SgdsFooter
+     */
+    copyrightLiner: string;
+    /**
+     * Array of type
+     *
+     * `interface ColumnLinks { title: string; links : Links[] } interface Links { href: string; label: string; }`
+     */
     links: ColumnLinks[];
+    /**
+     * String date for last updated date
+     */
     lastUpdatedDate: string;
+    /**
+     * 	href link for contacts
+     */
     contactHref: string;
+    /**
+     * 	href link for feedback
+     */
     feedbackHref: string;
-    vulnerabilityHref: string;
+    /**
+     * 	href link for privacy statement
+     */
     privacyHref: string;
+    /**
+     * 	href link for terms of use
+     */
     termsOfUseHref: string;
     render(): import("lit").TemplateResult<1>;
 }

package/components/Input/index.d.ts

@@ -1 +1 @@
-export * from "./sgds-input";
+export { SgdsInput } from "./sgds-input";

package/components/Input/sgds-input.d.ts

@@ -1,33 +1,66 @@
 import SgdsElement from "../../base/sgds-element";
-export declare class SgdsInput extends SgdsElement {
+import type { SgdsFormControl } from "../../utils/form";
+/**
+ * @summary Text inputs allow your users to enter letters, numbers and symbols on a single line.
+ *
+ * @event sgds-change - Emitted when an alteration to the control's value is committed by the user.
+ * @event sgds-input - Emitted when the control receives input and its value changes.
+ * @event sgds-focus - Emitted when input is in focus.
+ * @event sgds-blur - Emitted when input is not in focus.
+ *
+ */
+export declare class SgdsInput extends SgdsElement implements SgdsFormControl {
+    static styles: import("lit").CSSResultGroup;
+    /**@internal */
     input: HTMLInputElement;
-    private hasFocus;
+    /**@internal */
     private readonly formSubmitController;
-    static styles: import("lit").CSSResultGroup[];
+    /** The type of input which works the same as HTMLInputElement*/
     type: "date" | "datetime-local" | "email" | "number" | "password" | "search" | "tel" | "text" | "time" | "url";
+    /** The input's label  */
     label: string;
+    /** The input's hint text below the label */
     hintText: string;
-    inputId: string;
+    /**The input's name attribute */
     name: string;
+    /**Forwards classes to the native HTMLInputElement of the component. Can be used to insert any classes from bootstrap such as mt-2 */
     inputClasses: string;
-    iconName: string;
-    value: string;
-    minlength: any;
-    maxlength: any;
+    /**Optional. Pass svg html of icons in string form*/
+    icon: string;
+    /**Sets the minimum length of the input */
+    minlength: number;
+    /**Sets the maximum length of the input */
+    maxlength: number;
+    /**The input's placeholder text. */
     placeholder: string;
-    pattern: any;
-    invalidFeedback: string;
+    /**A pattern to validate input against. */
+    pattern: string;
+    /**Autofocus the input */
     autofocus: boolean;
+    /**Disables the input. */
     disabled: boolean;
+    /**Makes the input a required field. */
     required: boolean;
-    /** Makes the input readonly. */
+    /**Makes the input readonly. */
     readonly: boolean;
+    /**The input's value attribute. */
+    value: string;
+    /**Gets or sets the default value used to reset this element. The initial value corresponds to the one originally specified in the HTML that created this element. */
+    defaultValue: string;
+    /** Allows invalidFeedback, invalid and valid styles to be visible with the input */
+    hasFeedback: boolean;
+    /**Feedback text for error state when validated */
+    invalidFeedback: string;
+    /**@internal */
     invalid: boolean;
+    /**@internal */
     valid: boolean;
-    /** Gets or sets the default value used to reset this element. The initial value corresponds to the one originally specified in the HTML that created this element. */
-    defaultValue: string;
+    /**@internal */
+    private inputId;
     /** Sets focus on the input. */
     focus(options?: FocusOptions): void;
+    /** Sets blur on the input. */
+    blur(): void;
     /** Checks for validity and shows the browser's validation message if the control is invalid. */
     reportValidity(): boolean;
     handleInvalid(): void;

package/components/Mainnav/index.d.ts

@@ -1,3 +1,3 @@
-export * from "./sgds-mainnav";
-export * from "./sgds-mainnav-item";
-export * from "./sgds-mainnav-dropdown";
+export { SgdsMainnav, MainnavExpandSize } from "./sgds-mainnav";
+export { SgdsMainnavItem } from "./sgds-mainnav-item";
+export { SgdsMainnavDropdown } from "./sgds-mainnav-dropdown";

package/components/Mainnav/sgds-mainnav-dropdown.d.ts

@@ -1,6 +1,10 @@
 import { DropdownElement } from "../../base/dropdown-element";
 export declare class SgdsMainnavDropdown extends DropdownElement {
     static styles: import("lit").CSSResultGroup[];
+    connectedCallback(): void;
+    /**@internal */
+    dropdownRef: Promise<HTMLAnchorElement>;
+    firstUpdated(): Promise<void>;
     render(): import("lit").TemplateResult<1>;
 }
 export default SgdsMainnavDropdown;

package/components/Mainnav/sgds-mainnav-item.d.ts

@@ -1,6 +1,10 @@
 import LinkElement from "../../base/link-element";
 /**
- * @slot - Label for the anchor tag.
+ * @slot default - slot for SgdsMainnavItem element.
+ *
+ * @cssproperty --mainnav-item-theme-color - Hover and active color for mainnav items.
+ * @cssproperty --mainnav-item-color - Text color of nav item.
+ * @cssproperty --mainnav-item-borderBottom-width - border bottom width for hover and active state for nav item
  */
 export declare class SgdsMainnavItem extends LinkElement {
     static styles: import("lit").CSSResultGroup[];