@govtechsg/sgds-web-component 0.0.12 → 0.0.13

package/base/dropdown-element.d.ts

@@ -6,26 +6,50 @@ 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-shown - 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-hidden - 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;
+    /** 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;
+    /** Additional configuration to pass to Popper.js. See https://popper.js.org/ for config opts */
     popperOpts: {};
+    /** Forwards value to id attribute of toggle button of Dropdown. An unique id generated by default */
     togglerId: string;
+    /** Sets the text content of Dropdown button */
     togglerText: string;
+    /** Sets color of Dropdown button */
     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,14 @@
 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;
     render(): import("lit").TemplateResult<1>;
 }

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/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/Checkbox/sgds-checkbox.d.ts

@@ -1,18 +1,24 @@
 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 radio group's selected value 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. */
+    /** For Id/For pair of the HTML form control and label. */
     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 +27,27 @@ 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;
     /** 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/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/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;
+    /**The input's id. This value gets forwarded into the HTMLInputElement of the component. Defaults to a unique value */
     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;
     /** 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/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[];

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

@@ -1,22 +1,38 @@
 import SgdsElement from "../../base/sgds-element";
 export type MainnavExpandSize = "sm" | "md" | "lg" | "xl" | "xxl" | "always" | "never";
 /**
- * @slot - Pass in SgdsMainnavItem elements here.
+ * @summary This component is the primary means that your users will use to navigate through your portal. It includes horizontal navigation and branding to identify your site.
+ *
+ * @slot - Default slot of SgdsMainnav. Pass in SgdsMainnavItem elements here.
  * @slot end - Elements in this slot will be positioned to the right end of .navbar-nav. Elements in this slot will also be included in collapsed menu.
+ * @slot brand - Brand slot of SgdsMainnav. Pass in brand logo img here
+ * @slot non-collapsible - Elements in this slot will not be collapsed
+ *
+ * @cssproperty --mainnav-background-color - Navbar's background color.
+ * @cssproperty --mainnav-padding-x - left and right padding for browser width > 768px
+ * @cssproperty --mainnav-padding-y - top and bottom padding for browser width > 768px
+ * @cssproperty --mainnav-mobile-padding-x - left and right padding for browser width < 768px
+ * @cssproperty --mainnav-mobile-padding-y - top and bottom padding for browser width < 768px
+ * @cssproperty --mainnav-borderBottom-width - bottom border width
+ * @cssproperty --mainnav-borderBottom-color - borderBottom width color
  */
 export declare class SgdsMainnav extends SgdsElement {
     static styles: import("lit").CSSResultGroup[];
     constructor();
+    /** @internal */
     private myCollapse;
+    /** @internal */
     private bsCollapse;
-    private myOffcanvas;
-    private bsOffcanvas;
     private _onClickButton;
+    /** The href link for brand logo */
     brandHref: string;
+    /** Forwards to id attribute of div.collapse and aria-controls attribute of toggler button in SgdsMainnav. By default, SgdsMainnav auto-generates a unique id. Override the default id by specifiying your own */
     collapseId: string;
+    /** The breakpoint, below which, the Navbar will collapse. When always the Navbar will always be expanded regardless of screen size. When never, the Navbar will always be collapsed */
     expand: MainnavExpandSize;
-    mode: "offcanvas" | "default";
+    /** @internal */
     breakpointReached: boolean;
+    /** @internal */
     expanded: boolean;
     firstUpdated(): void;
     _handleSlotChange(e: Event): void;

package/components/Masthead/sgds-masthead.d.ts

@@ -1,8 +1,25 @@
 import SgdsElement from "../../base/sgds-element";
+/**
+ * @summary All .gov.sg digital services shall adopt The Official Government Banner for every page in the digital service and be placed at the top of the page.
+ *
+ * @cssproperty --masthead-font-family - Sets font family for masthead
+ * @cssproperty --masthead-text-color - Sets overall text color
+ * @cssproperty --masthead-link-color - Sets link color for `How to identify?` and `Trusted Site`
+ * @cssproperty --masthead-link-color-hover - Sets link hover color for `How to identify?` and `Trusted Site`
+ * @cssproperty --masthead-mobile-font-size - Sets the padding left and right for viewport width 1024px and below
+ * @cssproperty --masthead-mobile-padding-x - Sets the font size for viewport width 1024px and below
+ * @cssproperty --masthead-fluid-padding-x - Sets the container-fluid padding left and right for viewport width 1024px and above
+ * @cssproperty --masthead-crest-color - Sets the lion head crest color.
+ */
 export declare class SgdsMasthead extends SgdsElement {
     static styles: import("lit").CSSResultGroup[];
+    /**
+     * Sets the masthead container width to 100% for all breakpoints
+     */
     fluid: boolean;
+    /** @internal */
     toggleVisibility: boolean;
+    /** @internal */
     private _toggleVisibility;
     render(): import("lit").TemplateResult<1>;
 }

package/components/Radio/sgds-radio-group.d.ts

@@ -1,30 +1,40 @@
 import SgdsElement from "../../base/sgds-element";
 import { FormSubmitController } from "../../utils/form";
-export declare class SgdsRadioGroup extends SgdsElement {
+import { SgdsFormControl } from "../../utils/form";
+/**
+ * @summary RadioGroup group multiple radios so they function as a single form control.
+ *
+ * @slot default - The default slot where sgds-radio are placed.
+ *
+ * @event sgds-change - Emitted when the radio group's selected value changes.
+ */
+export declare class SgdsRadioGroup extends SgdsElement implements SgdsFormControl {
     static styles: import("lit").CSSResultGroup[];
+    /**@internal */
     protected readonly formSubmitController: FormSubmitController;
+    /**@internal */
     defaultSlot: HTMLSlotElement;
+    /**@internal */
     input: HTMLInputElement;
-    private defaultValue;
+    /**@internal */
+    defaultValue: string;
+    /**@internal */
     private customErrorMessage;
-    /**
-     * The radio group label. Required for proper accessibility. If you need to display HTML, you can use the `label` slot
-     * instead.
-     */
-    label: string;
+    /** @internal This will be true when the control is in an invalid state. */
+    invalid: boolean;
     /** The selected value of the control. */
     value: string;
     /** The name assigned to the radio controls. */
     name: string;
     /** Ensures a child radio is checked before allowing the containing form to submit. */
     required: boolean;
-    /**
-     * This will be true when the control is in an invalid state.
-     */
-    invalid: boolean;
+    /**Feedback text for error state when validated */
     invalidFeedback: string;
+    /** Allows invalidFeedback, invalid and valid styles to be visible with the input */
+    hasFeedback: boolean;
     handleValueChange(): void;
     connectedCallback(): void;
+    /** Gets and return the ValidityState object.  */
     get validity(): ValidityState;
     /** Checks for validity and shows the browser's validation message if the control is invalid. */
     reportValidity(): boolean;
@@ -33,9 +43,14 @@ export declare class SgdsRadioGroup extends SgdsElement {
     handleKeyDown(event: KeyboardEvent): void;
     handleLabelClick(): void;
     handleSlotChange(): void;
-    handleInvalid(): void;
+    handleInvalid(e: Event): void;
     showNativeErrorMessage(): void;
     updateCheckedRadio(): void;
     render(): import("lit").TemplateResult<1>;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        "sgds-radio-group": SgdsRadioGroup;
+    }
+}
 export default SgdsRadioGroup;

package/components/Radio/sgds-radio.d.ts

@@ -1,11 +1,19 @@
 import SgdsElement from "../../base/sgds-element";
+/**
+ * @summary Radio allows the user to select one option from a set while seeing all available options.
+ *
+ * @slot default - The label of the radio button
+ *
+ * @event sgds-focus - Emitted when the control gains focus.
+ * @event sgds-blur - Emitted when the control loses focus.
+ */
 export declare class SgdsRadio extends SgdsElement {
     static styles: import("lit").CSSResultGroup[];
+    /**@internal */
     checked: boolean;
-    protected hasFocus: boolean;
     /** The radio's value attribute. */
     value: string;
-    /** For id/for pair of the HTML form control. */
+    /** For id/for pair of the HTML form control and label. */
     radioId: string;
     /** Disables the radio. */
     disabled: boolean;

package/components/Sidenav/sgds-sidenav-item.d.ts

@@ -5,29 +5,50 @@ import SgdsElement from "../../base/sgds-element";
  *
  * @slot - default slot for SgdsSidenavLink element.
  * @slot title - title slot for the content of SgdsSidenavItem's button / anchor element.
+ * @slot icon - icon slot for the content of SgdsSidenavItem's button / anchor element.
+ *
+ * @cssproperty --sidenav-item-button-border-left-width - sidenav item left border width
+ * @cssproperty --sidenav-item-padding-x - sidenav item padding left and right
+ * @cssproperty --sidenav-item-padding-y - sidenav item padding top and bottom
+ * @cssproperty --sidenav-item-icon-title-gap - the flex gap between sidenav item icon and title
  */
 export declare class SgdsSidenavItem extends SgdsElement {
     static styles: import("lit").CSSResultGroup[];
+    /** @internal */
     private myCollapse;
+    /** @internal */
     private bsCollapse;
-    /**  when true, toggles the sidenav-item to open on first load and
-     * set the active stylings.
+    /**
+     *  when true, toggles the sidenav-item to open on first load and set the active stylings.
      */
     active: boolean;
+    /**
+     *  When defined, converts SgdsSidenavItem from a button element to an Anchor element
+     */
     href: string;
+    /**
+     * Forwards to id attribute of div.collapse and aria-controls attribute of button in SgdsSidenavItem. By default, SgdsSidenavItem auto-generates a unique id. Override the default id by specifiying your own
+     */
     collapseId: string;
+    /**
+     * Forwards to id attribute of button and aria-labelledby attribute of ul.sidenav-list in SgdsSidenavItem. By default, SgdsSidenavItem auto-generates a unique id. Override the default id by specifiying your own
+     */
     buttonId: string;
+    /**
+     * Disables the SgdsSidenavItem
+     */
     disabled: boolean;
+    /** @internal */
     private index;
     private _onClick;
     private _onClickButton;
     private _onClickLink;
     /**
-     * closeItem - closes sidenav and inactivates it
+     * When invoked, closes the SgdsSidenavItem
      */
     closeItem(): void;
     /**
-     * openItem
+     * When invoked, opens the SgdsSidenavItem
      */
     openItem(): void;
     firstUpdated(): void;

package/components/Sidenav/sgds-sidenav-link.d.ts

@@ -1,6 +1,11 @@
 import LinkElement from "../../base/link-element";
 /**
  * @slot - default slot for label of anchor tag.
+ *
+ * @cssproperty --sidenav-link-font-size - sidenav link font size, default to `--sgds-body-font-size`
+ * @cssproperty --sidenav-link-padding-x - sidenav link padding left and right
+ * @cssproperty --sidenav-link-padding-y - sidenav link padding top and bottom
+ * @cssproperty --sidenav-link-disabled-color - sidenav link disabled color, default to `--sgds-gray-600`
  */
 export declare class SgdsSidenavLink extends LinkElement {
     static styles: import("lit").CSSResultGroup;

package/components/Sidenav/sgds-sidenav.d.ts

@@ -1,9 +1,13 @@
 import SgdsElement from "../../base/sgds-element";
 /**
+ * @summary The side navigation is used to display a list of links to move between pages within a related category. It is used as a secondary form of navigation where the primary navigation is located hierachically above the page frame.
  * @slot - default slot for SgdsSidenavItem element.
+ *
+ * @cssproperty --sidenav-theme-color - overall sidenav theme color
  */
 export declare class SgdsSidenav extends SgdsElement {
     static styles: import("lit").CSSResultGroup;
+    /** Allow sidenav items to stay open when another item is opened */
     alwaysOpen: boolean;
     render(): import("lit").TemplateResult<1>;
 }

package/components/Spinner/index.d.ts

@@ -0,0 +1 @@
+export { SgdsSpinner } from "./sgds-spinner";

package/components/Spinner/sgds-spinner.d.ts

@@ -0,0 +1,11 @@
+import SgdsElement from "../../base/sgds-element";
+export type Type = "border" | "grow";
+export type Color = "primary" | "secondary" | "success" | "danger" | "warning" | "info" | "light" | "dark";
+export declare class SgdsSpinner extends SgdsElement {
+    static styles: import("lit").CSSResultGroup[];
+    type: Type;
+    color: Color;
+    spinnerClasses?: string;
+    render(): import("lit").TemplateResult;
+}
+export default SgdsSpinner;