@govtechsg/sgds-web-component 0.0.13 → 0.0.14

package/base/dropdown-element.d.ts

@@ -1,16 +1,15 @@
-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-shown - Emitted event when dropdown has been made visible to the user and CSS transitions have completed
+ * @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-hidden - Emitted event when dropdown has hidden to the user and CSS transitions have completed
+ * @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;
@@ -18,20 +17,18 @@ export declare class DropdownElement extends SgdsElement {
     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 */
+    /** @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: {};
-    /** Forwards value to id attribute of toggle button of Dropdown. An unique id generated by default */
-    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;
-    /** 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 */

package/base/link-element.d.ts

@@ -10,5 +10,7 @@ export default class LinkElement extends SgdsElement {
     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/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/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

@@ -5,7 +5,7 @@ import { SgdsFormControl } from "../../utils/form";
  *
  * @slot default - The label of checkbox.
  *
- * @event sgds-change - Emitted when the radio group's selected value changes.
+ * @event sgds-change - Emitted when the checked state changes.
  */
 export declare class SgdsCheckbox extends SgdsElement implements SgdsFormControl {
     static styles: import("lit").CSSResultGroup[];
@@ -15,8 +15,6 @@ export declare class SgdsCheckbox extends SgdsElement implements SgdsFormControl
     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 and label. */
-    checkboxId: string;
     /** For aria-label when there is no appropriate text label visible */
     ariaLabel: string;
     /** Value of the HTML form control. Primarily used to differentiate a list of related checkboxes that have the same name. */
@@ -37,6 +35,8 @@ export declare class SgdsCheckbox extends SgdsElement implements SgdsFormControl
     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. */

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/Input/index.d.ts

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

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

@@ -21,8 +21,6 @@ export declare class SgdsInput extends SgdsElement implements SgdsFormControl {
     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 */
@@ -57,6 +55,8 @@ export declare class SgdsInput extends SgdsElement implements SgdsFormControl {
     invalid: boolean;
     /**@internal */
     valid: boolean;
+    /**@internal */
+    private inputId;
     /** Sets focus on the input. */
     focus(options?: FocusOptions): void;
     /** Sets blur on the input. */

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.d.ts

@@ -26,8 +26,7 @@ export declare class SgdsMainnav extends SgdsElement {
     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;
+    private collapseId;
     /** 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;
     /** @internal */

package/components/Masthead/index.d.ts

@@ -1 +1 @@
-export * from "./sgds-masthead";
+export { SgdsMasthead } from "./sgds-masthead";

package/components/Modal/index.d.ts

@@ -1 +1 @@
-export * from "./sgds-modal";
+export { SgdsModal } from "./sgds-modal";

package/components/Modal/sgds-modal.d.ts

@@ -1,16 +1,61 @@
 import SgdsElement from "../../base/sgds-element";
+/**
+ * @summary The modal component inform users about a specific task and may contain critical information which users then have to make a decision.
+ *
+ * @slot default - The content of the Modal's body.
+ * @slot footer - The content of the Modal's footer, typically used to pass in buttons for call to action.
+ *
+ * @event sgds-close - Emitted when the modal is called to close via mouseclick of close button, overlay or via keyboard esc key
+ * @event sgds-show - Emitted when the modal opens
+ * @event sgds-hide - Emitted when the modal closes
+ * @event sgds-after-show - Emitted after modal opens and the animations has completed
+ * @event sgds-after-hide - Emitted after modal closes and the animations has completed
+ *
+ * @csspart base - The component's base wrapper
+ * @csspart overlay - The overlay that covers the screen behind the dialog
+ * @csspart panel - The modal's dialog panel
+ * @csspart header - The modal's header (h3 element) that wraps the title, titleIcon and close button
+ * @csspart title - The div element wrapping title and titleIcon
+ * @csspart body - The modal's body where the content lies
+ * @csspart footers - The modal's footer
+ *
+ * @cssproperty --modal-padding - The general modal padding of modal component. Applied to body, footer and header.
+ * @cssproperty --modal-panel-z-index - The z-index of modal panel
+ * @cssproperty --modal-panel-width - The width of modal panel.
+ * @cssproperty --modal-panel-height - The height of modal panel.
+ * @cssproperty --modal-panel-background-color - The background color of modal panel
+ * @cssproperty --modal-panel-border-radius - The border radius of modal panel
+ * @cssproperty --modal-header-bottom-border-line-width - The line width of header's bottom border
+ * @cssproperty --modal-overlay-background-color - The overlay's background color
+ */
 export declare class SgdsModal extends SgdsElement {
     static styles: import("lit").CSSResultGroup[];
+    /**@internal */
     dialog: HTMLElement;
+    /**@internal */
     panel: HTMLElement;
+    /**@internal */
     overlay: HTMLElement;
+    /**@internal */
     private readonly hasSlotController;
+    /**@internal */
     private modal;
+    /**@internal */
     private originalTrigger;
+    /**Indicates whether or not the modal is open. You can use this in lieu of the show/hide methods. */
     open: boolean;
+    /**The modal's title as displayed in the header */
     title: string;
+    /**The modal's icon as displayed in the header. Pass in SVG format icons as string directly  */
     titleIcon: string;
+    /** Disables the header. This will also remove the default close button */
     noHeader: boolean;
+    /** Centers the modal vertically in page */
+    centered: boolean;
+    /** Centers the contents inside the modal */
+    centeredAlignVariant: boolean;
+    /** Removes the default animation when opening and closing of modal */
+    noAnimation: boolean;
     connectedCallback(): void;
     firstUpdated(): void;
     disconnectedCallback(): void;

package/components/QuantityToggle/index.d.ts

@@ -1 +1 @@
-export * from "./sgds-quantity-toggle";
+export { SgdsQuantityToggle } from "./sgds-quantity-toggle";

package/components/QuantityToggle/sgds-quantity-toggle.d.ts

@@ -1,28 +1,53 @@
-import { SgdsButton } from "../Button";
+import { ButtonVariant } from "../Button";
 import SgdsElement from "../../base/sgds-element";
-export declare class SgdsQuantityToggle extends SgdsElement {
-    input: HTMLInputElement;
-    leftBtn: SgdsButton;
-    lastBtn: SgdsButton;
+import { SgdsFormControl } from "../../utils/form";
+/**
+ * @summary The quantity toggle component is used to increase or decrease an incremental venue,  best used when the user needs to enter or adjust the quantity of a selected item.
+ *
+ * @csspart base - The base wrapper of the quantity toggle component.
+ * @csspart button - The plus and minus button of quantity toggle
+ *
+ * @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.
+ *
+ */
+export declare class SgdsQuantityToggle extends SgdsElement implements SgdsFormControl {
+    /**@internal */
+    private input;
+    /**@internal */
+    private plusBtn;
+    /**@internal */
+    private minusBtn;
     static styles: import("lit").CSSResultGroup[];
-    quantToggleId: string;
+    /**@internal */
+    private readonly formSubmitController;
+    /** The name of the input */
     name: string;
     /** The input's minimum value. */
-    min: number | string;
+    min: number;
     /** The input's maximum value. */
-    max: number | string;
-    size: "sm" | "lg" | "default";
-    count: number;
+    max: number;
+    /**Controls the size of the quantity toggle */
+    size: "sm" | "lg";
+    /**The input's value. Set to 0 by default */
+    value: number;
+    /** Disables the entire quantity toggle  */
     disabled: boolean;
-    quantityToggleClasses?: string;
+    /** The quantity toggle's button variants */
+    buttonVariant: ButtonVariant;
     /**
-     * Specifies the granularity that the value must adhere to, or the special value `any` which means no stepping is
-     * implied, allowing any numeric value.
+     * Controls the incremental / decremental value of the input
      */
     step: number;
     /** 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;
+    defaultValue: number;
+    /** @internal The id forwarded to input element */
+    private inputId;
     handleChange(event: string): void;
+    /** Simulates a click on the plus button */
+    plus(): void;
+    /** Simulates a click on the minus button */
+    minus(): void;
     onPlus(event: MouseEvent): void;
     onMinus(event: MouseEvent): void;
     render(): import("lit").TemplateResult;

package/components/Radio/index.d.ts

@@ -1,2 +1,2 @@
-export * from "./sgds-radio";
-export * from "./sgds-radio-group";
+export { SgdsRadio } from "./sgds-radio";
+export { SgdsRadioGroup } from "./sgds-radio-group";

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

@@ -1,6 +1,5 @@
 import SgdsElement from "../../base/sgds-element";
 import { FormSubmitController } from "../../utils/form";
-import { SgdsFormControl } from "../../utils/form";
 /**
  * @summary RadioGroup group multiple radios so they function as a single form control.
  *
@@ -8,7 +7,7 @@ import { SgdsFormControl } from "../../utils/form";
  *
  * @event sgds-change - Emitted when the radio group's selected value changes.
  */
-export declare class SgdsRadioGroup extends SgdsElement implements SgdsFormControl {
+export declare class SgdsRadioGroup extends SgdsElement {
     static styles: import("lit").CSSResultGroup[];
     /**@internal */
     protected readonly formSubmitController: FormSubmitController;
@@ -38,7 +37,8 @@ export declare class SgdsRadioGroup extends SgdsElement implements SgdsFormContr
     get validity(): ValidityState;
     /** Checks for validity and shows the browser's validation message if the control is invalid. */
     reportValidity(): boolean;
-    private getAllRadios;
+    /**@internal */
+    private _radios;
     handleRadioClick(event: MouseEvent): void;
     handleKeyDown(event: KeyboardEvent): void;
     handleLabelClick(): void;

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

@@ -9,18 +9,19 @@ import SgdsElement from "../../base/sgds-element";
  */
 export declare class SgdsRadio extends SgdsElement {
     static styles: import("lit").CSSResultGroup[];
-    /**@internal */
+    /**
+     * Draws the radio in a checked state
+     */
     checked: boolean;
     /** The radio's value attribute. */
     value: string;
-    /** For id/for pair of the HTML form control and label. */
-    radioId: string;
     /** Disables the radio. */
     disabled: boolean;
     /** Aligns the radios horizontally */
     isInline: boolean;
     /** For aria-label */
     ariaLabel: string;
+    private radioId;
     connectedCallback(): void;
     handleCheckedChange(): void;
     handleDisabledChange(): void;

package/components/Sidenav/index.d.ts

@@ -1,3 +1,3 @@
-export * from "./sgds-sidenav";
-export * from "./sgds-sidenav-item";
-export * from "./sgds-sidenav-link";
+export { SgdsSidenav } from "./sgds-sidenav";
+export { SgdsSidenavItem } from "./sgds-sidenav-item";
+export { SgdsSidenavLink } from "./sgds-sidenav-link";

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

@@ -23,21 +23,21 @@ export declare class SgdsSidenavItem extends SgdsElement {
      */
     active: boolean;
     /**
-     *  When defined, converts SgdsSidenavItem from a button element to an Anchor element
+     *  When defined, converts SgdsSidenavItem from a button element to an Anchor element. In this case, only one level of navigation is allowed
      */
     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
+     * Disables the SgdsSidenavItem
      */
-    collapseId: string;
+    disabled: boolean;
     /**
-     * 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
+     * @internal 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
      */
-    buttonId: string;
+    private collapseId;
     /**
-     * Disables the SgdsSidenavItem
+     * @internal 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
      */
-    disabled: boolean;
+    private buttonId;
     /** @internal */
     private index;
     private _onClick;

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

@@ -1,6 +1,6 @@
 import LinkElement from "../../base/link-element";
 /**
- * @slot - default slot for label of anchor tag.
+ * @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

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

@@ -1,7 +1,10 @@
 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.
+ * @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.
+ * Maximum two levels of navigations are allowed.
+ *
+ * @slot default - Default slot for SgdsSidenavItem element.
  *
  * @cssproperty --sidenav-theme-color - overall sidenav theme color
  */

package/components/Spinner/index.d.ts

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