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

package/base/sgds-element.d.ts

@@ -1,4 +1,10 @@
 import { LitElement } from "lit";
+/**
+ * @cssprop --sgds-{stateColor} - State colors in hexadecimal value
+ * @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
+ */
 export default class SgdsElement extends LitElement {
     static styles: import("lit").CSSResultGroup;
     /** Emits a custom event with more convenient defaults. */

package/components/ActionCard/index.d.ts

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

package/components/Alert/index.d.ts

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

package/components/Alert/sgds-alert-heading.d.ts

@@ -0,0 +1,13 @@
+import SgdsElement from "../../base/sgds-element";
+/**
+ * @summary Alert heading is the header of the Alert component. Use it in the default slot of `sgds-alert` when required
+ *
+ * @slot default - The text content of the anchor element
+ */
+export declare class SgdsAlertHeading extends SgdsElement {
+    static styles: import("lit").CSSResultGroup[];
+    /** The type of header tag style for alert's heading */
+    headerTag: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+    render(): import("lit").TemplateResult;
+}
+export default SgdsAlertHeading;

package/components/Alert/sgds-alert-link.d.ts

@@ -0,0 +1,16 @@
+import SgdsElement from "../../base/sgds-element";
+/**
+ * @summary Alert link are used within the alert's message that is passed into the default slot of `<sgds-alert>`
+ *
+ * @slot default - The text content of the anchor element
+ * @cssproperty --alert-link-anchor-color - The margin-right css of icon slot, to position the gap between icon and alert message
+ */
+export declare class SgdsAlertLink extends SgdsElement {
+    static styles: import("lit").CSSResultGroup[];
+    /** Forwards to href attribute of anchor element */
+    href: string;
+    /** Tells the browser where to open the link */
+    target: "_blank" | "_parent" | "_self" | "_top";
+    render(): import("lit").TemplateResult;
+}
+export default SgdsAlertLink;

package/components/Alert/sgds-alert.d.ts

@@ -1,37 +1,30 @@
 import SgdsElement from "../../base/sgds-element";
+export type AlertVariant = "primary" | "secondary" | "success" | "danger" | "warning" | "info" | "light";
 /**
+ * @summary Alerts provide short, timely, and relevant information for your users. It can be a simple text message or customised HTML content with paragraphs, headings and links.
  *
- * @dependency sl-icon-button
- *
- * @slot - The alert's main content.
- * @slot icon - An icon to show in the alert. Works best with `<sl-icon>`.
+ * @slot default - The alert's main content.
+ * @slot icon - An icon to show in the alert. Pass in SVG elements.
  *
- * @event sl-show - Emitted when the alert opens.
- * @event sl-after-show - Emitted after the alert opens and all animations are complete.
- * @event sl-hide - Emitted when the alert closes.
- * @event sl-after-hide - Emitted after the alert closes and all animations are complete.
+ * @event sgds-show - Emitted when the alert appears.
+ * @event sgds-hide - Emitted after the alert closes.
  *
- * @csspart base - The component's base wrapper.
- * @csspart icon - The container that wraps the optional icon.
- * @csspart message - The container that wraps the alert's main content.
- * @csspart close-button - The close button, an `<sl-icon-button>`.
- * @csspart close-button__base - The close button's exported `base` part.
- *
- * @animation alert.show - The animation to use when showing the alert.
- * @animation alert.hide - The animation to use when hiding the alert.
+ * @cssproperty --alert-icon-margin-right - The margin-right css of icon slot, to position the gap between icon and alert message
  */
-export type AlertVariant = "primary" | "secondary" | "success" | "danger" | "warning" | "info" | "light";
 export declare class SgdsAlert extends SgdsElement {
     static styles: import("lit").CSSResultGroup[];
+    /** Controls the appearance of the alert  */
     show: boolean;
     /** Enables a close button that allows the user to dismiss the alert. */
-    dismissible?: boolean;
+    dismissible: boolean;
     /** The alert's theme variant. */
     variant: AlertVariant;
-    closeLabel?: string;
-    alertClasses?: string;
-    toggleShow(): void;
-    handleCloseClick(): void;
+    /** Optional for alert wrapper. Can be used to insert any utility classes such as me-auto */
+    alertClasses: string;
+    /** Closes the alert  */
+    close(): void;
+    /**@internal */
+    handleShowChange(): void;
     render(): import("lit").TemplateResult;
 }
 export default SgdsAlert;

package/components/Badge/index.d.ts

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

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

@@ -1,10 +1,17 @@
 import SgdsElement from "../../base/sgds-element";
 export type BadgeVariant = "primary" | "secondary" | "success" | "danger" | "warning" | "info" | "light" | "dark";
+/**
+ * @summary Badges can be used to highlight important bits of information such as labels, notifications & status.
+ * @slot default - slot for badge
+ */
 export declare class SgdsBadge extends SgdsElement {
     static styles: import("lit").CSSResultGroup[];
+    /** 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` */
     variant: BadgeVariant;
-    isLight: any;
-    roundedPill: any;
+    /** Visually set badge for lesser color emphasis. */
+    isLight: boolean;
+    /** Visually set badge with rounded corners. */
+    roundedPill: boolean;
     render(): import("lit").TemplateResult<1>;
 }
 export default SgdsBadge;

package/components/Breadcrumb/sgds-breadcrumb-item.d.ts

@@ -1,9 +1,20 @@
 import SgdsElement from "../../base/sgds-element";
+/**
+ * @summary Breadcrumb Item are navigational links used in Breadcrumb component
+ *
+ * @slot default - The title of the item
+ * @slot separator - The individual separator of breadcrumb item can be changed here.
+ *
+ * @csspart base - The base wrapper of breadcrumb item which is a HTMLListElement.
+ * @csspart label -The label of the breadcrumb item. It is either a span or anchor element depending on href attribute
+ */
 export declare class SgdsBreadcrumbItem extends SgdsElement {
     static styles: import("lit").CSSResultGroup[];
-    currentPage: any;
-    href: any;
-    target?: "_blank" | "_parent" | "_self" | "_top";
+    /** Specifies the url path of the breadcrumb-item. When defined, the breadcrumb-items is a anchor element. When not defined, indicates that the breadcrumb item is active. In such cases, a span element is rendered. */
+    href: string;
+    /** Tells the browser where to open the link. Only used when `href` is set. */
+    target: "_blank" | "_parent" | "_self" | "_top";
+    /** The `rel` attribute to use on the link. Only used when `href` is set. */
     rel: string;
     render(): import("lit").TemplateResult<1>;
 }

package/components/Breadcrumb/sgds-breadcrumb.d.ts

@@ -1,9 +1,19 @@
 import SgdsElement from "../../base/sgds-element";
+/**
+ * @summary Breadcrumbs help users to navigate and understand where they are on the current website or service.
+ *
+ * @slot default - The slot to pass in custom elements of `SgdsBreadcrumbItems`.
+ * @slot separator - Defines all the separator of `SgdsBreadcrumbItems`. Defaults to "/"
+ *
+ * @csspart base - The nav element wrapper of `SgdsBreadcrumb`
+ */
 export declare class SgdsBreadcrumb extends SgdsElement {
     static styles: import("lit").CSSResultGroup[];
+    /** The aria-label of nav element within breadcrumb component. */
     ariaLabel: string;
-    breadcrumbClasses?: string;
+    /**@internal */
     defaultSlot: HTMLSlotElement;
+    /**@internal */
     separatorSlot: HTMLSlotElement;
     private getSeparator;
     private handleSlotChange;

package/components/Button/index.d.ts

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

package/components/Card/index.d.ts

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

package/components/Checkbox/index.d.ts

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

package/components/Dropdown/index.d.ts

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

package/components/FileUpload/index.d.ts

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

package/components/Footer/index.d.ts

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

package/components/Input/index.d.ts

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

package/components/Mainnav/index.d.ts

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

package/components/Masthead/index.d.ts

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

package/components/Modal/index.d.ts

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

package/components/QuantityToggle/index.d.ts

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

package/components/Radio/index.d.ts

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

package/components/Sidenav/index.d.ts

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

package/components/Spinner/index.d.ts

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

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

@@ -1,11 +1,17 @@
 import SgdsElement from "../../base/sgds-element";
-export type Type = "border" | "grow";
-export type Color = "primary" | "secondary" | "success" | "danger" | "warning" | "info" | "light" | "dark";
+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.
+ */
 export declare class SgdsSpinner extends SgdsElement {
     static styles: import("lit").CSSResultGroup[];
-    type: Type;
-    color: Color;
-    spinnerClasses?: string;
+    /** The type of spinner */
+    type: SpinnerType;
+    /** The color of spinner */
+    color: SpinnerColor;
+    /** Optional for spinner wrapper. Can be used to insert any utility classes such as me-auto */
+    spinnerClasses: string;
     render(): import("lit").TemplateResult;
 }
 export default SgdsSpinner;

package/components/Stepper/sgds-stepper.d.ts

@@ -10,6 +10,10 @@ import SgdsElement from "../../base/sgds-element";
  * @event sgds-arrived - Emitted right after the activeStep has updated its state, when upcoming step has arrived and its slot are rendered.
  * @event sgds-reset - Emitted right before the step is reset to its defaultActiveStep. Event is fired when reset method is called.
  *
+ * @cssproperty --sgds-stepper-default-color - Sets the theme color for default stepper marker. <br>Default value `--sgds-gray-400`
+ * @cssproperty --sgds-stepper-theme-color - Sets the theme color for active, completed and clickable stepper marker. <br>Default value `--sgds-primary`
+ * @cssproperty --sgds-stepper-theme-hover-color - Sets the theme hover color for clickable stepper marker. <br>Default value `--sgds-primary-600`
+ *
  */
 export declare class SgdsStepper extends SgdsElement {
     static styles: import("lit").CSSResultGroup[];

package/components/Tab/index.d.ts

@@ -1,3 +1,3 @@
-export { SgdsTab } from "./sgds-tab";
-export { SgdsTabPanel } from "./sgds-tabpanel";
-export { SgdsTabGroup } from "./sgds-tabgroup";
+export * from "./sgds-tab";
+export * from "./sgds-tabpanel";
+export * from "./sgds-tabgroup";

package/components/Textarea/index.d.ts

@@ -1 +1 @@
-export { SgdsTextarea } from "./sgds-textarea";
+export * from "./sgds-textarea";

package/components/Toast/index.d.ts

@@ -1 +1,2 @@
-export { SgdsToast, ToastVariant } from "./sgds-toast";
+export { SgdsToast } from "./sgds-toast";
+export { SgdsToastContainer } from "./sgds-toast-container";

package/components/Toast/sgds-toast-container.d.ts

@@ -0,0 +1,16 @@
+import SgdsElement from "../../base/sgds-element";
+export type ToastPosition = "top-start" | "top-center" | "top-end" | "middle-start" | "middle-center" | "middle-end" | "bottom-start" | "bottom-center" | "bottom-end";
+/**
+ * @summary ToastContainer is the container component to position `sgds-toast` in screen. When there is multiple toasts in the container, the toast components are stacked vertically.
+ *
+ * @slot default - The slot for `sgds-toast` elements
+ *
+ * @cssproperty --toast-container-slot-elements-gap - The gap between multiple `sgds-toast` elements. Defaults to 0.5rem
+ */
+export declare class SgdsToastContainer extends SgdsElement {
+    static styles: import("lit").CSSResultGroup[];
+    /** Controls the position of `sgds-toast` within itself. When specified, toast container becomes position-absolute */
+    position: ToastPosition;
+    render(): import("lit").TemplateResult;
+}
+export default SgdsToastContainer;

package/components/Toast/sgds-toast.d.ts

@@ -1,22 +1,50 @@
 import SgdsElement from "../../base/sgds-element";
 export type ToastVariant = "primary" | "secondary" | "success" | "danger" | "warning" | "info" | "dark" | "light";
+/**
+ * @summary Toast allows you to convey quick messaging notifications to the user.
+ *
+ * @slot default - The content to pass into toast's body
+ * @slot icon - The slot to pass in icon to toast's header
+ * @slot duration - When required, pass in the duration since toast appeared to this slot
+ *
+ * @event sgds-show - Emitted on show.
+ * @event sgds-after-show - Emitted on show after animation has completed.
+ * @event sgds-hide - Emitted on hide.
+ * @event sgds-after-hide - Emitted on hide after animation has completed.
+ *
+ * @cssproperty --toast-icon-margin-right - The margin-right between toast's icon and title in its header. Defaults to 0.5rem
+ */
 export declare class SgdsToast extends SgdsElement {
     static styles: import("lit").CSSResultGroup[];
-    base: HTMLElement;
+    /**@internal */
+    toast: HTMLElement;
+    /** Controls the appearance of toast */
     show: boolean;
-    /**
-     * Apply a CSS fade transition to the toast
-     */
-    animation?: boolean;
-    autohide?: boolean;
+    /** The header title of toast. It is required to assign a title to toast */
+    title: string;
+    /** Controls whether the toast has fade animation during its appearance/disappearance */
+    noAnimation: boolean;
+    /** Controls if the toast will hide itself after the delay time. Works with delay property */
+    autohide: boolean;
+    /** The amount of time taken for toast to disappear after its first render. It takes effect only when autohide is set to true */
     delay: number;
+    /** The colour variant of toast */
     variant: ToastVariant;
+    /** Optional for toast. Forwards to the base div wrapper of toast. Can be used to insert any utility classes such as `me-auto` */
+    toastClasses: string;
     /** The toast variant. */
-    bg?: "primary" | "secondary" | "success" | "danger" | "warning" | "info" | "dark" | "light";
-    closeLabel?: string;
+    bg: "primary" | "secondary" | "success" | "danger" | "warning" | "info" | "dark" | "light";
     /**Adds CSS styling to `<Toast />` based on the defined status */
-    status?: "success" | "warning" | "danger";
+    status: "success" | "warning" | "danger";
+    /** Shows the toast */
+    showToast(): Promise<void>;
+    /** Hide the toast */
+    hideToast(): Promise<void>;
+    /** @internal */
     handleCloseClick(): void;
+    /**@internal */
+    handleShowChange(): Promise<void>;
+    protected firstUpdated(): void;
     render(): import("lit").TemplateResult;
 }
 export default SgdsToast;

package/components/Tooltip/index.d.ts

@@ -1 +1 @@
-export { SgdsTooltip } from "./sgds-tooltip";
+export * from "./sgds-tooltip";

package/components/Tooltip/sgds-tooltip.d.ts

@@ -1,10 +1,10 @@
 import SgdsElement from "../../base/sgds-element";
 import { Ref } from "lit/directives/ref.js";
 import { Tooltip } from "bootstrap";
-import * as Popper from "@popperjs/core";
 /**
- * @summary Tooltip summary
- * @slot default - slot for Tooltip's contentz
+ * @summary Tooltips display more information when users hover over, focus on, or interact with an element.
+ * @slot default - The element to target the tooltip to.
+ *
  */
 export declare class SgdsTooltip extends SgdsElement {
     static styles: import("lit").CSSResultGroup[];
@@ -12,19 +12,28 @@ export declare class SgdsTooltip extends SgdsElement {
     myTooltip: Ref<HTMLElement>;
     /**@internal */
     bsTooltip: Tooltip;
-    /** */
+    /** The tooltip's content. Content has to be textual */
     content: string;
+    /** The placement of tooltip relative to its target */
     placement: "top" | "bottom" | "left" | "right";
+    /** The method to invoke the tooltip. `hover focus` is the default value which allows tooltip to be triggered via mouse hover and keyboard focus. Add `tabindex=0 `for HTMLelements that are not tabbable. For `click` method, the tooltip is trigger via mouse clicking and it instantiates with a close button */
     trigger: "click" | "hover" | "focus" | "hover focus";
     /**@internal */
-    closableContainer: HTMLElement;
+    private closableContainer;
     /**@internal */
-    popperConfig: Partial<Popper.Options>;
+    private popperConfig;
     /**@internal */
-    tooltipConfig: Partial<Tooltip.Options>;
+    private tooltipConfig;
+    /**@internal */
+    private tooltipTargetElements;
+    private _handleSlotChange;
+    attributeChangedCallback(name: any, oldValue: any, newValue: any): void;
+    private initializeTooltip;
     firstUpdated(): void;
     /** Hides the Tooltip */
-    closeTooltip(): void;
+    hide(): void;
+    /** Shows the Tooltip */
+    show(): void;
     render(): import("lit").TemplateResult<1>;
 }
 export default SgdsTooltip;