@govtechsg/sgds-web-component 0.0.10 → 0.0.12

package/README.md

@@ -1,21 +1,113 @@
-# sgds-web-component
+<img src="https://img.shields.io/badge/lit-324FFF?style=for-the-badge&logo=lit&logoColor=white" /> &nbsp; 
+<img src="https://img.shields.io/badge/Sass-CC6699?style=for-the-badge&logo=sass&logoColor=white" /> &nbsp; 
+<img src="https://img.shields.io/badge/TypeScript-007ACC?style=for-the-badge&logo=typescript&logoColor=white" />&nbsp; 
 
-This project uses Lit 2.0 + SASS + TS and bundled with rollup. 
+# sgds-web-component
 
 Project is still in development works. See https://master.d1yxrtldqtp3a0.amplifyapp.com/ for the progress of the components 
 
-## Get Started
+# Installation Guide
+
+You can load SGDS's web components via CDN or by installing it locally. 
+<!-- <s>If you're using a framework, make sure to check out the pages for React, Vue, and Angular for additional information.</s> -->
+
+## 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.
+
+```js
+
+<script type="module" src="https://cdn.jsdelivr.net/npm/@govtechsg/sgds-web-component"></script>
+
+//cherry picked
+<script type="module" src="https://cdn.jsdelivr.net/npm/@govtechsg/sgds-web-component/${Component}/index.js"></script>
+
+
+```
+
+## Local Installation
+
+You can also install SGDS web components locally with the following command
+
+```js
+
+npm install @govtechsg/sgds-web-component
+
+```
+
+and import the library once in your entry point
+
+```js
+
+import "@govtechsg/sgds-web-component";
+
+```
+
+
+# Usage Guide
+
+## Cherry Picking
+
+We recommend cherry picking your web components whenever to limit the number of files that the browser has to load. Note that the component folder should start with capital letter
+
+```js 
+
+import "@govtechsg/sgds-web-component/Button";
+//cdn way
+<script type="module" src="https://cdn.jsdelivr.net/npm/@govtechsg/sgds-web-component/Button/index.js"></script>
 
-Clone the repo. Then install.
 
-```bash
-npm install
 ```
 
-Then start the dev server and rollup watchers
+## Component dependency
+
+Complex components depends on one or more other components under its hood. E.g. Dropdown and Modal component uses Button component
+For such components, you will have to import all of its dependency. The component's dependency will be specified in the Component documentation under Dependency section
+
+```js
+// When using Dropdown component, import both Dropdown and Button
+import "@govtechsg/sgds-web-component/Dropdown";
+import "@govtechsg/sgds-web-component/Button";
 
-```bash
-npm run dev
 ```
 
-A browser window should open and rollup will watch your files for changes.
+<!-- ## Shoelace Icons
+
+SGDS depends on 3rd party library [Shoelace](https://shoelace.style/components/icon) for our icons. We recommend using Shoelace's default icon library which are Bootstrap icons
+
+````js
+// data-shoelace attribute points to the assets folder, where the bootstrap icons are located. If you are copying out the assets folder to your own directory, change the value of data-shoelace to your assets folder
+ <script type="module" data-shoelace="node_modules/@shoelace-style/shoelace/dist">
+            import '@shoelace-style/shoelace/dist/components/icon/icon.js';
+        //<sl-icon> is ready to use!
+ </script>
+
+````
+
+You can also use the utility `setBasePath` from Shoelace to set the based path of the asset folder 
+
+```js
+
+import { setBasePath } from '@shoelace-style/shoelace/dist/utilities/base-path.js';
+// Set the base path to the folder you copied Shoelace's assets
+setBasePath('/path/to/shoelace/dist');
+
+import '@shoelace-style/shoelace/dist/components/icon/icon.js'
+    //<sl-icon> is ready to use!
+
+```
+
+Please refer to [Shoelace documentation](https://shoelace.style/getting-started/installation?id=setting-the-base-path) for more information -->
+
+## Stylings
+
+### Component Styles
+
+SGDS web component library is shipped with SGDS v2 stylings and does not require you to configure or install any other styling files. 
+The styles of components are built in and can be modified via props, cssparts and css custom properties whenever we specify for such styling modificiations. This information will be specified under API section for each component
+
+You will require some knowledge of web components and css to do so and the information can be readily available online like mdn web docs for [web components](https://developer.mozilla.org/en-US/docs/Web/Web_Components) and [css](https://developer.mozilla.org/en-US/docs/Web/CSS)
+
+### External stylings
+
+Any external stylings done on our web components like positioning needs to be done on your end. You can use [SGDS v2 library](https://designsystem.tech.gov.sg/get-started/)to leverage on the position stylings we provide e.g. ms-auto, flexbox, grids

package/base/card-element.d.ts

@@ -0,0 +1,12 @@
+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;
+    borderColor?: CardBorderVariant;
+    /** The bg's variant. */
+    bgColor?: CardBorderVariant;
+    /** The text's variant. */
+    textColor?: CardTextVariant;
+    disabled: boolean;
+}

package/{lib/utils → base}/dropdown-element.d.ts

@@ -1,37 +1,38 @@
-import { Dropdown } from "bootstrap";
-import * as Popper from "@popperjs/core";
-import type { StrictModifiers } from "@popperjs/core";
-import { Ref } from "lit/directives/ref.js";
-import { SgdsDropdownItem } from "../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";
-export declare class DropdownElement extends SgdsElement {
-    myDropdown: Ref<HTMLElement>;
-    bsDropdown: Dropdown;
-    noFlip: boolean;
-    menuAlignRight: boolean;
-    drop: DropDirection;
-    popperOpts: {};
-    togglerId: string;
-    togglerText: string;
-    variant: DropdownButtonVariant;
-    menuIsOpen: boolean;
-    close: "outside" | "default" | "inside";
-    disabled: boolean;
-    nextDropdownItemNo: number;
-    prevDropdownItemNo: number;
-    dropdownConfig: Partial<Popper.Options>;
-    modifierOpt: StrictModifiers[];
-    firstUpdated(): void;
-    showMenu(): void;
-    hideMenu(): void;
-    _onClickButton(): void;
-    _resetMenu(): void;
-    _getMenuItems(): SgdsDropdownItem[];
-    _getActiveMenuItems(): SgdsDropdownItem[];
-    _setMenuItem(currentItemIdx: number, isArrowDown?: boolean): any;
-    _handleSelectSlot(e: KeyboardEvent | MouseEvent): void;
-    _handleKeyboardEvent(e: KeyboardEvent): any;
-    _handleClickOutOfElement(e: MouseEvent, self: DropdownElement): void;
-}
+import { Dropdown } from "bootstrap";
+import * as Popper from "@popperjs/core";
+import type { StrictModifiers } from "@popperjs/core";
+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";
+export declare class DropdownElement extends SgdsElement {
+    static styles: import("lit").CSSResultGroup;
+    myDropdown: Ref<HTMLElement>;
+    bsDropdown: Dropdown;
+    noFlip: boolean;
+    menuAlignRight: boolean;
+    drop: DropDirection;
+    popperOpts: {};
+    togglerId: string;
+    togglerText: string;
+    variant: DropdownButtonVariant;
+    menuIsOpen: boolean;
+    close: "outside" | "default" | "inside";
+    disabled: boolean;
+    nextDropdownItemNo: number;
+    prevDropdownItemNo: number;
+    dropdownConfig: Partial<Popper.Options>;
+    modifierOpt: StrictModifiers[];
+    firstUpdated(): void;
+    showMenu(): void;
+    hideMenu(): void;
+    _onClickButton(): void;
+    _resetMenu(): void;
+    _getMenuItems(): SgdsDropdownItem[];
+    _getActiveMenuItems(): SgdsDropdownItem[];
+    _setMenuItem(currentItemIdx: number, isArrowDown?: boolean): any;
+    _handleSelectSlot(e: KeyboardEvent | MouseEvent): void;
+    _handleKeyboardEvent(e: KeyboardEvent): any;
+    _handleClickOutOfElement(e: MouseEvent, self: DropdownElement): void;
+}

package/{lib/utils → base}/link-element.d.ts

@@ -1,7 +1,8 @@
-import SgdsElement from "../utils/sgds-element";
-export default class LinkElement extends SgdsElement {
-    active: boolean;
-    href: string;
-    disabled: boolean;
-    render(): import("lit").TemplateResult<1>;
-}
+import SgdsElement from "./sgds-element";
+export default class LinkElement extends SgdsElement {
+    static styles: import("lit").CSSResultGroup;
+    active: boolean;
+    href: string;
+    disabled: boolean;
+    render(): import("lit").TemplateResult<1>;
+}

package/{lib/utils → base}/sgds-element.d.ts

@@ -1,5 +1,6 @@
-import { LitElement } from 'lit';
-export default class SgdsElement extends LitElement {
-    /** Emits a custom event with more convenient defaults. */
-    emit(name: string, options?: CustomEventInit): CustomEvent<any>;
-}
+import { LitElement } from "lit";
+export default class SgdsElement extends LitElement {
+    static styles: import("lit").CSSResultGroup;
+    /** Emits a custom event with more convenient defaults. */
+    emit(name: string, options?: CustomEventInit): CustomEvent<any>;
+}

package/components/Accordion/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./sgds-accordion";
+export * from "./sgds-accordion-item";

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

@@ -0,0 +1,40 @@
+import SgdsElement from "../../base/sgds-element";
+/**
+ * @slot default - content of the accordion item
+ *
+ * @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.
+ *
+ * @csspart base - The accordion-item base wrapper
+ * @csspart header - The accordion-item button header
+ * @csspart content - The accordion-item content
+ */
+export declare class SgdsAccordionItem extends SgdsElement {
+    static styles: import("lit").CSSResultGroup[];
+    /** @internal */
+    accordion: HTMLElement;
+    /** @internal */
+    header: HTMLElement;
+    /** @internal */
+    body: HTMLElement;
+    /** Controls whether accordion-item is open or close */
+    open: boolean;
+    /** Title 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;
+    firstUpdated(): void;
+    private handleSummaryClick;
+    private handleSummaryKeyDown;
+    handleOpenChange(): Promise<void>;
+    /** Shows the accordion. */
+    show(): Promise<void>;
+    /** Hide the accordion */
+    hide(): Promise<void>;
+    render(): import("lit").TemplateResult<1>;
+}
+export default SgdsAccordionItem;

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

@@ -0,0 +1,19 @@
+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.
+ * @slot default - slot for accordion-item
+ */
+export declare class SgdsAccordion extends SgdsElement {
+    static styles: import("lit").CSSResultGroup[];
+    allowMultiple: boolean;
+    accordionClasses?: string;
+    /** @internal */
+    private defaultNodes;
+    /** @internal */
+    get items(): SgdsAccordionItem[];
+    firstUpdated(): void;
+    onToggle(event: Event): Promise<void>;
+    render(): import("lit").TemplateResult<1>;
+}
+export default SgdsAccordion;

package/components/ActionCard/index.d.ts

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

package/{lib/Card → components/ActionCard}/sgds-action-card.d.ts

@@ -1,20 +1,21 @@
-import { CardElement } from "../utils/card-element";
-import { Ref } from "lit/directives/ref.js";
-export type CardVariant = "card-action" | "card-action-quantity-toggle";
-export type TypeVariant = "checkbox" | "radio";
-export declare class SgdsActionCard extends CardElement {
-    static styles: import("lit").CSSResultGroup;
-    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;
-    active: boolean;
-    onInputChange(): void;
-    handleKeyDown(event: KeyboardEvent): void;
-    render(): import("lit").TemplateResult<1 | 2>;
-}
-export default SgdsActionCard;
+import { Ref } from "lit/directives/ref.js";
+import { CardElement } from "../../base/card-element";
+export type CardVariant = "card-action" | "card-action-quantity-toggle";
+export type TypeVariant = "checkbox" | "radio";
+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;
+    active: boolean;
+    onInputChange(): void;
+    handleKeyDown(event: KeyboardEvent): void;
+    render(): import("lit").TemplateResult;
+}
+export default SgdsActionCard;

package/components/Alert/index.d.ts

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

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

@@ -0,0 +1,37 @@
+import SgdsElement from "../../base/sgds-element";
+/**
+ *
+ * @dependency sl-icon-button
+ *
+ * @slot - The alert's main content.
+ * @slot icon - An icon to show in the alert. Works best with `<sl-icon>`.
+ *
+ * @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.
+ *
+ * @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.
+ */
+export type AlertVariant = "primary" | "secondary" | "success" | "danger" | "warning" | "info" | "light";
+export declare class SgdsAlert extends SgdsElement {
+    static styles: import("lit").CSSResultGroup[];
+    show: boolean;
+    /** Enables a close button that allows the user to dismiss the alert. */
+    dismissible?: boolean;
+    /** The alert's theme variant. */
+    variant: AlertVariant;
+    closeLabel?: string;
+    alertClasses?: string;
+    toggleShow(): void;
+    handleCloseClick(): void;
+    render(): import("lit").TemplateResult;
+}
+export default SgdsAlert;

package/components/Badge/index.d.ts

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

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

@@ -0,0 +1,10 @@
+import SgdsElement from "../../base/sgds-element";
+export type BadgeVariant = "primary" | "secondary" | "success" | "danger" | "warning" | "info" | "light" | "dark";
+export declare class SgdsBadge extends SgdsElement {
+    static styles: import("lit").CSSResultGroup[];
+    variant: BadgeVariant;
+    isLight: any;
+    roundedPill: any;
+    render(): import("lit").TemplateResult<1>;
+}
+export default SgdsBadge;

package/components/Breadcrumb/index.d.ts

@@ -0,0 +1,2 @@
+export { SgdsBreadcrumb } from "./sgds-breadcrumb";
+export { SgdsBreadcrumbItem } from "./sgds-breadcrumb-item";

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

@@ -0,0 +1,10 @@
+import SgdsElement from "../../base/sgds-element";
+export declare class SgdsBreadcrumbItem extends SgdsElement {
+    static styles: import("lit").CSSResultGroup[];
+    currentPage: any;
+    href: any;
+    target?: "_blank" | "_parent" | "_self" | "_top";
+    rel: string;
+    render(): import("lit").TemplateResult<1>;
+}
+export default SgdsBreadcrumbItem;

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

@@ -0,0 +1,12 @@
+import SgdsElement from "../../base/sgds-element";
+export declare class SgdsBreadcrumb extends SgdsElement {
+    static styles: import("lit").CSSResultGroup[];
+    ariaLabel: string;
+    breadcrumbClasses?: string;
+    defaultSlot: HTMLSlotElement;
+    separatorSlot: HTMLSlotElement;
+    private getSeparator;
+    private handleSlotChange;
+    render(): import("lit").TemplateResult;
+}
+export default SgdsBreadcrumb;

package/components/Button/index.d.ts

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

package/{lib → components}/Button/sgds-button.d.ts

@@ -1,48 +1,55 @@
-import SgdsElement from "../utils/sgds-element";
-export type ButtonVariant = "primary" | "secondary" | "success" | "danger" | "warning" | "info" | "light" | "dark" | "link" | "icon" | "outline-primary" | "outline-secondary" | "outline-success" | "outline-danger" | "outline-warning" | "outline-info" | "outline-light" | "outline-dark";
-export declare class SgdsButton extends SgdsElement {
-    static styles: import("lit").CSSResultGroup;
-    button: HTMLButtonElement | HTMLLinkElement;
-    private readonly formSubmitController;
-    private hasFocus;
-    /** The button's variant. */
-    variant: ButtonVariant;
-    buttonClasses?: string;
-    /** Button sizes */
-    size: 'sm' | 'lg';
-    /** Button active state */
-    active: boolean;
-    /** Button disabled state */
-    disabled: boolean;
-    type: 'button' | 'submit' | 'reset';
-    /** When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`. */
-    href?: string;
-    /** Tells the browser where to open the link. Only used when `href` is set. */
-    target?: '_blank' | '_parent' | '_self' | '_top';
-    /** Tells the browser to download the linked file as this filename. Only used when `href` is set. */
-    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.
-     */
-    form: string;
-    /** Used to override the form owner's `action` attribute. */
-    formAction: string;
-    /** Used to override the form owner's `method` attribute.  */
-    formMethod: 'post' | 'get';
-    /** Used to override the form owner's `novalidate` attribute. */
-    formNoValidate: boolean;
-    /** Used to override the form owner's `target` attribute. */
-    formTarget: '_self' | '_blank' | '_parent' | '_top' | string;
-    /** Sets focus on the button. */
-    focus(options?: FocusOptions): void;
-    /** Simulates a click on the button. */
-    click(): void;
-    /** Removes focus from the button. */
-    blur(): void;
-    handleBlur(): void;
-    handleFocus(): void;
-    handleClick(event: MouseEvent): void;
-    render(): import("lit").TemplateResult<1 | 2>;
-}
-export default SgdsButton;
+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.
+ *
+ * @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[];
+    button: HTMLButtonElement | HTMLLinkElement;
+    private readonly formSubmitController;
+    private hasFocus;
+    /** The button's variant. */
+    variant: ButtonVariant;
+    buttonClasses?: string;
+    /** Button sizes */
+    size: "sm" | "lg";
+    /** Button active state */
+    active: boolean;
+    /** Button disabled state */
+    disabled: boolean;
+    type: "button" | "submit" | "reset";
+    /** When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`. */
+    href?: string;
+    /** Tells the browser where to open the link. Only used when `href` is set. */
+    target?: "_blank" | "_parent" | "_self" | "_top";
+    /** Tells the browser to download the linked file as this filename. Only used when `href` is set. */
+    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.
+     */
+    form: string;
+    /** Used to override the form owner's `action` attribute. */
+    formAction: string;
+    /** Used to override the form owner's `method` attribute.  */
+    formMethod: "post" | "get";
+    /** Used to override the form owner's `novalidate` attribute. */
+    formNoValidate: boolean;
+    /** Used to override the form owner's `target` attribute. */
+    formTarget: "_self" | "_blank" | "_parent" | "_top" | string;
+    /** Sets focus on the button. */
+    focus(options?: FocusOptions): void;
+    /** Simulates a click on the button. */
+    click(): void;
+    /** Removes focus from the button. */
+    blur(): void;
+    handleBlur(): void;
+    handleFocus(): void;
+    handleClick(event: MouseEvent): void;
+    clickHandler: () => void;
+    render(): import("lit").TemplateResult;
+}
+export default SgdsButton;

package/components/Checkbox/index.d.ts

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

package/{lib → components}/Checkbox/sgds-checkbox.d.ts

@@ -1,36 +1,36 @@
-import SgdsElement from "../utils/sgds-element";
-export declare class SgdsCheckbox extends SgdsElement {
-    static styles: import("lit").CSSResultGroup;
-    input: HTMLInputElement;
-    private readonly formSubmitController;
-    /** Name of the HTML form control. Submitted with the form as part of a name/value pair. */
-    name: string;
-    /** For Id/For pair of the HTML form control. */
-    checkboxId: string;
-    /** For aria-label when there is no appropriate text label visible */
-    ariaLabel: string;
-    /** Manually style the input as valid */
-    valid: boolean;
-    /** Manually style the input as invalid */
-    invalid: boolean;
-    /** Value of the HTML form control. Primarily used to differentiate a list of related checkboxes that have the same name. */
-    value: string;
-    /** Makes the checkbox a required field. */
-    required: boolean;
-    /** Draws the checkbox in a checked state. */
-    checked: boolean;
-    /** Disables the checkbox (so the user can't check / uncheck it). */
-    disabled: 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. */
-    defaultChecked: boolean;
-    /** Simulates a click on the checkbox. */
-    click(): void;
-    /** Checks for validity and shows the browser's validation message if the control is invalid. */
-    reportValidity(): boolean;
-    handleChange(): void;
-    handleKeyDown(event: KeyboardEvent): void;
-    handleDisabledChange(): void;
-    handleStateChange(): void;
-    render(): import("lit").TemplateResult<1>;
-}
-export default SgdsCheckbox;
+import SgdsElement from "../../base/sgds-element";
+export declare class SgdsCheckbox extends SgdsElement {
+    static styles: import("lit").CSSResultGroup[];
+    input: HTMLInputElement;
+    private readonly formSubmitController;
+    /** Name of the HTML form control. Submitted with the form as part of a name/value pair. */
+    name: string;
+    /** For Id/For pair of the HTML form control. */
+    checkboxId: string;
+    /** For aria-label when there is no appropriate text label visible */
+    ariaLabel: string;
+    /** Manually style the input as valid */
+    valid: boolean;
+    /** Manually style the input as invalid */
+    invalid: boolean;
+    /** Value of the HTML form control. Primarily used to differentiate a list of related checkboxes that have the same name. */
+    value: string;
+    /** Makes the checkbox a required field. */
+    required: boolean;
+    /** Draws the checkbox in a checked state. */
+    checked: boolean;
+    /** Disables the checkbox (so the user can't check / uncheck it). */
+    disabled: 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. */
+    defaultChecked: boolean;
+    /** Simulates a click on the checkbox. */
+    click(): void;
+    /** Checks for validity and shows the browser's validation message if the control is invalid. */
+    reportValidity(): boolean;
+    handleChange(): void;
+    handleKeyDown(event: KeyboardEvent): void;
+    handleDisabledChange(): void;
+    handleStateChange(): void;
+    render(): import("lit").TemplateResult<1>;
+}
+export default SgdsCheckbox;

package/components/CloseButton/index.d.ts

@@ -0,0 +1 @@
+export { SgdsCloseButton } from "./sgds-closebutton";