@govtechsg/sgds-web-component 1.0.0-rc.1 → 1.0.0-rc.3

package/README.md

@@ -13,11 +13,11 @@ You can load SGDS's web components via CDN or by installing it locally.
 
 ## CDN
 
-The CDN loader registers all SGDS elements up front. Note that, if you're only using a handful of components. You can also cherry pick components via local imports if you want to load specific ones up front.
+The CDN loader registers all SGDS elements up front. Note that, if you're only using a handful of components.
 
 ```js
 
-<script type="module" src="https://cdn.jsdelivr.net/npm/@govtechsg/sgds-web-component"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@govtechsg/sgds-web-component@rc"></script>
 
 ```
 
@@ -27,7 +27,7 @@ You can also install SGDS web components locally with the following command
 
 ```js
 
-npm install @govtechsg/sgds-web-component
+npm install @govtechsg/sgds-web-component@rc
 
 ```
 
@@ -42,24 +42,77 @@ import "@govtechsg/sgds-web-component";
 
 # Imports
 
-## Using the custom elements 
-Once imported, the custom elements can be used throughout the project. 
+## Using the custom elements
 
-```js
+Once imported, the custom elements can be used throughout the project.
 
-import "@govtechsg/sgds-web-component"
+```js
+import "@govtechsg/sgds-web-component";
 
+//usage
+// <sgds-button>Hello World</sgds-button>
 ```
 
-## Using the component's class
+## Using the component's class object
 
-Each component's Class is exported via named exports, prefixed with `Sgds`
+When writing with Typescript, you might be required to type the components in certain cases. Import the component class like so. 
+Each component's Class is exported via named exports, prefixed with `Sgds`.
 
 ```js
 
-import { SgdsButton, SgdsMainnav } from "@govtechsg/sgds-web-component"
+import { SgdsButton, SgdsMainnav } from "@govtechsg/sgds-web-component/components";
+
+```
+
+## Scoped Elements
+
+The CustomElementRegistry is a global registry that provides methods for registering custom elements. One of the limitations of working with this global registry is that multiple versions of the same element cannot co-exist. This causes bottlenecks in software delivery that should be managed by the teams and complex build systems. Scoped Custom Element Registries is a proposal that will solve the problem. Since this functionality won't be available (especially not cross browser) anytime soon, we've adopted [OpenWC's Scoped Elements](https://open-wc.org/docs/development/scoped-elements/).
+
+Whenever a sgds component uses composition (meaning it uses another sgds component inside), we apply ScopedElementsMixin to make sure it uses the right version of this internal component.
+
+For users who are using sgds component directly for builing application, use the custom elements directly by [importing the custom elements](#using-the-custom-elements)
 
+For users who are building component libraries on top of sgds-web-component, please adopt OpenWC's scoped elements to prevent exporting our registered custom elements. 
+
+Things to note: 
+1. Import component class from `@govtechsg/sgds-web-component/components`. Here the components are not registered in the custom element registry 
+2. Define the tagName you want to assign to the component's class
+
+Example below
+
+```jsx
+import { SgdsMasthead, SgdsMainnav, SgdsMainnavDropdown, SgdsMainnavItem } from "@govtechsg/sgds-web-component/components";
+import { ScopedElementsMixin } from "@open-wc/scoped-elements";
+
+// Lit element
+@customElement('my-navbar')
+export class MyNavbar extends ScopedElementsMixin(LitElement) {
+  static get scopedElements() {
+    return {
+      'sgds-mainnav': SgdsMainnav,
+      'sgds-mainnav-dropdown': SgdsMainnavDropdown,
+      'sgds-mainnav-item': SgdsMainnavItem,
+      'sgds-masthead': SgdsMasthead
+    };
+  }
+    ...
+
+ render() {
+    return html`
+        <sgds-masthead fluid="false"></sgds-masthead>
+            <sgds-mainnav>
+              <img width="240" src="https://dev.assets.developer.tech.gov.sg/svg/logo.svg" slot="brand">
+                <sgds-mainnav-dropdown togglertext="Home" slot="end">
+                    <sgds-dropdown-item>Logout</sgds-dropdown-item>
+                </sgds-mainnav-dropdown>
+                <sgds-mainnav-item href="#">Content</sgds-mainnav-item>
+                <sgds-mainnav-item href="#}">Biography</sgds-mainnav-item>
+            </sgds-mainnav>
+          `
+      }
+}
 ```
+
 # Attributes and Properties
 
 ## String
@@ -157,18 +210,31 @@ There are two kinds of slots: default and named slots. In the storybook document
 
 The following css custom variable are exposed to enable users to make modifications across all web components in our library
 
-| css custom variable name | description                               |
-| ------------------------ | ----------------------------------------- |
-| --sgds-body-font-family  | Set the font family of the web components |
-| --sgds-body-font-size    | Set the font size of the web components   |
-| --sgds-body-font-weight  | Set the font weight of the web components |
-| --sgds-body-line-height  | Set the line height of the web components |
+| css custom variable name      | description                               |
+| ------------------------      | ----------------------------------------- |
+| --sgds-body-font-family       | Set the font family of the web components |
+| --sgds-body-font-size         | Set the font size of the web components   |
+| --sgds-body-font-weight       | Set the font weight of the web components |
+| --sgds-body-line-height       | Set the line height of the web components |
+| --sgds-{stateColor}-rgb       | State colors in red,green,blue value                 |
+| --sgds-{stateColor}           | State colors in hexadecimal value         |
+| --sgds-{stateColor}           | State colors in hexadecimal value         |
+| --sgds-{stateColor}-{weight} | State colors with different weightage in hexadecimal value |
+| --sgds-gray-{weight}         | Gray colors with different weightage in hexadecimal value  |
+
+> `{stateColor}` consists of `primary`,`secondary`,`success`,`warning`,`danger`,`info`,`light`,`dark`
+>
+> `{weight}` are color weightage in hundreds starting from `100` up to `900`
 
 ```css
 
 :root {
   --sgds-body-font-family: Helvetica;
   --sgds-body-font-size: 5rem;
+  --sgds-primary-rgb : 89,37,220;
+  --sgds-secondary : #1f69ff;
+  --sgds-success-500 : #3bb346;
+  --sgds-gray-500 : #667085;
 }
 
 ```

package/base/card-element.d.ts

@@ -1,6 +1,5 @@
 import SgdsElement from "./sgds-element";
 export type CardBorderVariant = "primary" | "secondary" | "success" | "danger" | "warning" | "info" | "dark" | "light";
-export type CardTextVariant = "primary" | "secondary" | "success" | "danger" | "warning" | "info" | "dark" | "light" | "white" | "muted";
 export declare class CardElement extends SgdsElement {
     static styles: import("lit").CSSResultGroup;
     /** The border's variant. */
@@ -10,3 +9,4 @@ export declare class CardElement extends SgdsElement {
     /** The text's variant. */
     textColor: CardTextVariant;
 }
+export type CardTextVariant = "primary" | "secondary" | "success" | "danger" | "warning" | "info" | "dark" | "light" | "white" | "muted";

package/base/datepicker-dropdown-element.d.ts

@@ -0,0 +1,38 @@
+import type { StrictModifiers } from "@popperjs/core";
+import * as Popper from "@popperjs/core";
+import { Dropdown } from "bootstrap";
+import { Ref } from "lit/directives/ref.js";
+import SgdsElement from "./sgds-element";
+/**
+ * @event sgds-show - Emitted event when show instance is called
+ * @event sgds-after-show - Emitted event when datepicker calendar 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 datepicker calendar has hidden to the user and CSS transitions have completed
+ */
+export declare class DatepickerDropdownElement extends SgdsElement {
+    /** @internal */
+    myDropdown: Ref<HTMLElement>;
+    /** @internal */
+    bsDropdown: Dropdown;
+    /** When true, adds no flip even when placement does not fit */
+    protected noFlip: boolean;
+    /** When true, aligns right edge of menu with right edge of button */
+    protected menuAlignRight: boolean;
+    /**@internal */
+    menuIsOpen: boolean;
+    /** Disables the dropdown toggle */
+    disabled: boolean;
+    /** @internal */
+    dropdownConfig: Partial<Popper.Options>;
+    /** @internal */
+    modifierOpt: StrictModifiers[];
+    firstUpdated(): void;
+    /** When invoked, opens the Datepicker menu */
+    showMenu(): void;
+    /** When invoked, hides the Datepicker menu */
+    hideMenu(): void;
+    _onClickInput(): void;
+    _handleKeyboardEvent(e: KeyboardEvent): void;
+    _handleClickOutOfElement(e: MouseEvent, self: DatepickerDropdownElement): void;
+}
+export type DropDirection = "left" | "right" | "up" | "down";

package/base/sgds-element.d.ts

@@ -4,6 +4,8 @@ import { LitElement } from "lit";
  * @cssprop --sgds-{stateColor}-rgb - State colors in rgb value
  * @cssprop --sgds-{stateColor}-{weights} - State colors with different weightage in hexadecimal value
  * @cssprop --sgds-gray-{weights} - State colors with different weightage in hexadecimal value
+ * @cssprop --overlay-background-color - The drawer and modal component overlay background color
+ * @cssprop --zindex-modal - The drawer and modal component z-index value
  */
 export default class SgdsElement extends LitElement {
     static styles: import("lit").CSSResultGroup;

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

@@ -2,7 +2,7 @@ import { Ref } from "lit/directives/ref.js";
 import { CardElement } from "../../base/card-element";
 import { SgdsCheckbox } from "../Checkbox";
 import { SgdsRadio } from "../Radio";
-export type TypeVariant = "checkbox" | "radio";
+declare const SgdsActionCard_base: typeof CardElement & import("@open-wc/dedupe-mixin").Constructor<import("@open-wc/scoped-elements/types/src/types").ScopedElementsHost>;
 /**
  * @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
@@ -19,8 +19,12 @@ export type TypeVariant = "checkbox" | "radio";
  * @csspart text - The action card text
  *
  */
-export declare class SgdsActionCard extends CardElement {
+export declare class SgdsActionCard extends SgdsActionCard_base {
     static styles: import("lit").CSSResultGroup[];
+    static get scopedElements(): {
+        "sgds-checkbox": typeof SgdsCheckbox;
+        "sgds-radio": typeof SgdsRadio;
+    };
     /** @internal */
     inputRef: Ref<SgdsCheckbox | SgdsRadio>;
     /** Name of the HTML form control. Submitted with the form as part of a name/value pair. */
@@ -46,4 +50,5 @@ export declare class SgdsActionCard extends CardElement {
     handleKeyDown(event: KeyboardEvent): void;
     render(): import("lit").TemplateResult;
 }
+export type TypeVariant = "checkbox" | "radio";
 export default SgdsActionCard;

package/components/Badge/sgds-badge.d.ts

@@ -12,6 +12,8 @@ export declare class SgdsBadge extends SgdsElement {
     isLight: boolean;
     /** Visually set badge with rounded corners. */
     roundedPill: boolean;
+    /** Forwarded to the base wrapper of sgds-badge. Can be used to insert any utility classes such as `me-auto` or `text-dark` */
+    badgeClasses: string;
     render(): import("lit").TemplateResult<1>;
 }
 export default SgdsBadge;

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

@@ -10,8 +10,7 @@ export type ButtonVariant = "primary" | "secondary" | "success" | "danger" | "wa
  */
 export declare class SgdsButton extends SgdsElement {
     static styles: import("lit").CSSResultGroup[];
-    /** @internal */
-    button: HTMLButtonElement | HTMLLinkElement;
+    private button;
     /** @internal */
     private readonly formSubmitController;
     /** 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-*`) */

package/components/Datepicker/datepicker-calendar.d.ts

@@ -0,0 +1,41 @@
+import SgdsElement from "../../base/sgds-element";
+export declare class DatepickerCalendar extends SgdsElement {
+    static styles: import("lit").CSSResultGroup[];
+    /** @internal */
+    static DAY_LABELS: string[];
+    /** @internal */
+    static daysInMonth: number[];
+    /** @internal */
+    static MONTHVIEW_LABELS: string[];
+    /** @internal */
+    selectedDate: Date[];
+    /** @internal */
+    displayDate: Date;
+    /** @internal */
+    minDate?: string;
+    /** @internal */
+    maxDate?: string;
+    /** @internal */
+    mode: "single" | "range";
+    /** @internal */
+    initialValue?: Date;
+    /** @internal */
+    year: number;
+    /** @internal */
+    month: number;
+    /** @internal */
+    view: string;
+    connectedCallback(): void;
+    /** @internal */
+    private setTimeToNoon;
+    /** @internal */
+    private generateIncrementDays;
+    /** @internal */
+    private onClickDay;
+    /** @internal */
+    private onClickMonth;
+    /** @internal */
+    private onClickYear;
+    render(): import("lit").TemplateResult<1>;
+}
+export default DatepickerCalendar;

package/components/Datepicker/datepicker-header.d.ts

@@ -0,0 +1,19 @@
+import SgdsElement from "../../base/sgds-element";
+export declare class DatepickerHeader extends SgdsElement {
+    static styles: import("lit").CSSResultGroup[];
+    /** @internal */
+    displayDate: Date;
+    /** @internal */
+    view: string;
+    connectedCallback(): void;
+    /** @internal */
+    private changeView;
+    /** @internal */
+    private renderHeader;
+    /** @internal */
+    private handleClickPrevious;
+    /** @internal */
+    private handleClickNext;
+    render(): import("lit").TemplateResult<1>;
+}
+export default DatepickerHeader;

package/components/Datepicker/index.d.ts

@@ -0,0 +1 @@
+export * from "./sgds-datepicker";

package/components/Datepicker/sgds-datepicker.d.ts

@@ -0,0 +1,73 @@
+import { DatepickerDropdownElement } from "../../base/datepicker-dropdown-element";
+import { SgdsInput } from "../Input";
+import { DatepickerCalendar } from "./datepicker-calendar";
+import { DatepickerHeader } from "./datepicker-header";
+export type DateFormat = "MM/DD/YYYY" | "DD/MM/YYYY" | "YYYY/MM/DD";
+declare const SgdsDatepicker_base: typeof DatepickerDropdownElement & import("@open-wc/dedupe-mixin").Constructor<import("@open-wc/scoped-elements/types/src/types").ScopedElementsHost>;
+/**
+ * @summary The `DatePicker` Component is built using `Dropdown`, `Input` and `Button` components. By default, the Calendar points to current date and input has no value. The input is a read-only and users can only pick dates using the Calendar.
+ *
+ * @event sgds-change-date - Emitted when the state of datepicker's input changes during first load, close button reset click & date click. Date values can be accessed via event.target.value
+ *
+ * @cssproperty --datepicker-theme-color - Datepicker's overall theme color
+ * @cssproperty --datepicker-hover-bg-color - Datepicker's calendar menu hover color
+ * @cssproperty --datepicker-bg-color - Datepicker's menu background color
+ * @cssproperty --datepicker-closebutton-bg-color - Datepicker's close button background color
+ * @cssproperty --datepicker-closebutton-hover-bg-color - Datepicker's close button hover background color
+ * @cssproperty --datepicker-closebutton-color - Datepicker's close button color
+ */
+export declare class SgdsDatepicker extends SgdsDatepicker_base {
+    static styles: import("lit").CSSResultGroup[];
+    /**@internal */
+    static get scopedElements(): {
+        "sgds-input": typeof SgdsInput;
+        "sgds-datepicker-calendar": typeof DatepickerCalendar;
+        "sgds-datepicker-header": typeof DatepickerHeader;
+    };
+    /** When true, adds required attribute to input element */
+    required: boolean;
+    /** When true, adds disabled attribute to input and button element */
+    disabled: boolean;
+    /** The initial value of DatePicker on first load for single & range mode as array of string. eg.'["22/12/2023"]' for single & '["22/12/2023","25/12/2023"]' for range respectively  */
+    initialValue: string[];
+    /** Date format reflected on input  */
+    dateFormat: DateFormat;
+    /** ISO date string to set the lowest allowable date value. e.g. "2016-05-19T12:00:00.000Z" */
+    minDate: string;
+    /** ISO date string to set the highest allowable date value. e.g. "2016-05-19T12:00:00.000Z" */
+    maxDate: string;
+    /** Changes DatePicker to single date selection or range date selection */
+    mode: "single" | "range";
+    /** @internal */
+    private value;
+    /** @internal */
+    private view;
+    /** @internal */
+    private selectedDateRange;
+    /** @internal */
+    private displayDate;
+    constructor();
+    /** @internal */
+    private parseDateStringToDate;
+    /** @internal */
+    private getDateFormatRegex;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    handleValueChange(): void;
+    /** @internal */
+    private makeInputValueString;
+    /** @internal */
+    private handleSelectDates;
+    /** @internal */
+    private handleViewChanged;
+    /** @internal */
+    private handleDateChanged;
+    /** @internal */
+    private handleSelectMonth;
+    /** @internal */
+    private handleSelectYear;
+    /** @internal */
+    private handleButtonResetClick;
+    render(): import("lit").TemplateResult<1>;
+}
+export default SgdsDatepicker;

package/components/Drawer/index.d.ts

@@ -0,0 +1 @@
+export * from "./sgds-drawer";

package/components/Drawer/sgds-drawer.d.ts

@@ -0,0 +1,86 @@
+import SgdsElement from "../../base/sgds-element";
+/**
+ * @summary Drawers slide in from a container to expose additional options and information.
+ *
+ * @slot - The drawer's main content.
+ * @slot label - The drawer's label. Alternatively, you can use the `label` attribute.
+ * @slot header-actions - Optional actions to add to the header.
+ * @slot footer - The drawer's footer, usually one or more buttons representing various options.
+ *
+ * @event sgds-show - Emitted when the drawer opens.
+ * @event sgds-after-show - Emitted after the drawer opens and all animations are complete.
+ * @event sgds-hide - Emitted when the drawer closes.
+ * @event sgds-after-hide - Emitted after the drawer closes and all animations are complete.
+ * @event sgds-initial-focus - Emitted when the drawer opens and is ready to receive focus. Calling
+ *   `event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input.
+ * @event {{ source: 'close-button' | 'keyboard' | 'overlay' }} sgds-request-close - Emitted when the user attempts to
+ *   close the drawer by clicking the close button, clicking the overlay, or pressing escape. Calling
+ *   `event.preventDefault()` will keep the drawer open. Avoid using this unless closing the drawer will result in
+ *   destructive behavior such as data loss.
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart overlay - The overlay that covers the screen behind the drawer.
+ * @csspart panel - The drawer's panel (where the drawer and its content are rendered).
+ * @csspart header - The drawer's header. This element wraps the title and header actions.
+ * @csspart header-actions - Optional actions to add to the header.
+ * @csspart title - The drawer's title.
+ * @csspart close-button - The close button.
+ * @csspart body - The drawer's body.
+ * @csspart footer - The drawer's footer.
+ *
+ * @cssproperty --sgds-drawer-size - The preferred size of the drawer. This will be applied to the drawer's width or height
+ *   depending on its `placement`. Note that the drawer will shrink to accommodate smaller screens.
+ * @cssproperty --sgds-drawer-padding - The amount of padding to use for the header.
+ * @cssproperty --sgds-drawer-background-color - The drawer's background color.
+ * @cssproperty --sgds-drawer-button-gap - The drawer's flex gap between buttons.
+ */
+export declare class SgdsDrawer extends SgdsElement {
+    static styles: import("lit").CSSResultGroup[];
+    /** @internal */
+    private readonly hasSlotController;
+    /** @internal */
+    private originalTrigger;
+    /** @internal */
+    drawer: HTMLElement;
+    /** @internal */
+    panel: HTMLElement;
+    /** @internal */
+    overlay: HTMLElement;
+    /**
+     * Indicates whether or not the drawer is open. You can toggle this attribute to show and hide the drawer, or you can
+     * use the `show()` and `hide()` methods and this attribute will reflect the drawer's open state.
+     */
+    open: boolean;
+    /**
+     * The drawer's label as displayed in the header. You should always include a relevant label even when using
+     * `noHeader`, as it is required for proper accessibility. If you need to display HTML, use the `label` slot instead.
+     */
+    label: string;
+    /** The direction from which the drawer will open. */
+    placement: "top" | "end" | "bottom" | "start";
+    /**
+     * By default, the drawer slides out of its containing block (usually the viewport). To make the drawer slide out of
+     * its parent element, set this attribute and add `position: relative` to the parent.
+     */
+    contained: boolean;
+    /**
+     * Removes the header. This will also remove the default close button, so please ensure you provide an easy,
+     * accessible way for users to dismiss the drawer.
+     */
+    noHeader: boolean;
+    firstUpdated(): void;
+    disconnectedCallback(): void;
+    private uppercaseFirstLetter;
+    private requestClose;
+    private addOpenListeners;
+    private removeOpenListeners;
+    private handleDocumentKeyDown;
+    handleOpenChange(): Promise<void>;
+    handleNoModalChange(): void;
+    /** Shows the drawer. */
+    show(): Promise<void>;
+    /** Hides the drawer */
+    hide(): Promise<void>;
+    render(): import("lit").TemplateResult<1>;
+}
+export default SgdsDrawer;

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

@@ -1,14 +1,19 @@
 import { DropdownElement } from "../../base/dropdown-element";
+import { SgdsButton } from "../Button";
 export type DropDirection = "left" | "right" | "up" | "down";
 export type DropdownButtonVariant = "primary" | "secondary" | "success" | "danger" | "warning" | "info" | "light" | "dark";
+declare const SgdsDropdown_base: typeof DropdownElement & import("@open-wc/dedupe-mixin").Constructor<import("@open-wc/scoped-elements/types/src/types").ScopedElementsHost>;
 /**
  * @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 {
+export declare class SgdsDropdown extends SgdsDropdown_base {
     static styles: import("lit").CSSResultGroup[];
+    static get scopedElements(): {
+        "sgds-button": typeof SgdsButton;
+    };
     constructor();
     connectedCallback(): void;
     /** Controls auto-flipping of menu */

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

@@ -1,5 +1,7 @@
 import SgdsElement from "../../base/sgds-element";
+import { SgdsButton } from "../Button";
 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";
+declare const SgdsFileUpload_base: typeof SgdsElement & import("@open-wc/dedupe-mixin").Constructor<import("@open-wc/scoped-elements/types/src/types").ScopedElementsHost>;
 /**
  * @summary Allows users to upload files of various sizes and formats
  * @slot default - Label for file upload button
@@ -11,8 +13,11 @@ export type FileUploadButtonVariant = "primary" | "secondary" | "success" | "dan
  * @cssproperty --fileupload-remove-icon-hover-fill - Remove icon mouse over fill color
  *
  */
-export declare class SgdsFileUpload extends SgdsElement {
+export declare class SgdsFileUpload extends SgdsFileUpload_base {
     static styles: import("lit").CSSResultGroup[];
+    static get scopedElements(): {
+        "sgds-button": typeof SgdsButton;
+    };
     /** The button's variant. */
     variant: FileUploadButtonVariant;
     disabled: boolean;

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

@@ -1,12 +1,12 @@
 import SgdsElement from "../../base/sgds-element";
-export interface Links {
-    href: string;
-    label: string;
-}
 export interface ColumnLinks {
     title: string;
     links: Links[];
 }
+export interface Links {
+    href: string;
+    label: string;
+}
 /**
  * @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.
  *

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 * from "./sgds-mainnav-item";

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

@@ -1,4 +1,8 @@
 import { DropdownElement } from "../../base/dropdown-element";
+/**
+ * @slot default - The menu items. Pass in sgds-dropdown-item as the menu items
+ * @slot toggler - The content of the toggler to pass in html content. `togglerText` property takes precedence over this slot when both are defined.
+ */
 export declare class SgdsMainnavDropdown extends DropdownElement {
     static styles: import("lit").CSSResultGroup[];
     connectedCallback(): void;

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

@@ -1,6 +1,6 @@
-import { ButtonVariant } from "../Button";
 import SgdsElement from "../../base/sgds-element";
 import { SgdsFormControl } from "../../utils/form";
+import { ButtonVariant } from "../Button";
 /**
  * @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.
  *

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

@@ -48,9 +48,4 @@ export declare class SgdsRadioGroup extends SgdsElement {
     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

@@ -32,9 +32,4 @@ export declare class SgdsRadio extends SgdsElement {
     private setInitialAttributes;
     render(): import("lit").TemplateResult<1>;
 }
-declare global {
-    interface HTMLElementTagNameMap {
-        "sgds-radio": SgdsRadio;
-    }
-}
 export default SgdsRadio;

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

@@ -1,6 +1,4 @@
 import SgdsElement from "../../base/sgds-element";
-export type SpinnerType = "border" | "grow";
-export type SpinnerColor = "primary" | "secondary" | "success" | "danger" | "warning" | "info" | "light" | "dark";
 /**
  * @summary Spinners notify the users that their request is being processed.
  */
@@ -14,4 +12,6 @@ export declare class SgdsSpinner extends SgdsElement {
     spinnerClasses: string;
     render(): import("lit").TemplateResult;
 }
+export type SpinnerColor = "primary" | "secondary" | "success" | "danger" | "warning" | "info" | "light" | "dark";
+export type SpinnerType = "border" | "grow";
 export default SgdsSpinner;

package/components/Stepper/index.d.ts

@@ -1 +1 @@
-export { SgdsStepper } from "./sgds-stepper";
+export { IStepMetaData, SgdsStepper } from "./sgds-stepper";