feat(contained-list): add ContainedList, ContainedListItem (#1971)

types/ContainedList/ContainedList.svelte.d.ts

@@ -0,0 +1,38 @@
+import type { SvelteComponentTyped } from "svelte";
+
+export interface ContainedListProps {
+  /**
+   * @default "on-page"
+   */
+  kind?: "on-page" | "disclosed";
+
+  /**
+   * Specify the label text
+   * @default ""
+   */
+  labelText?: string;
+
+  /**
+   * Specify the size of the list
+   * @default "md"
+   */
+  size?: "sm" | "md" | "lg" | "xl";
+
+  /**
+   * Set to `true` for lines between list items to be inset.
+   * @default false
+   */
+  inset?: boolean;
+
+  /**
+   * Set an id for the list
+   * @default "ccs-" + Math.random().toString(36)
+   */
+  id?: string;
+}
+
+export default class ContainedList extends SvelteComponentTyped<
+  ContainedListProps,
+  Record<string, any>,
+  { default: {}; action: {}; labelText: {} }
+> {}

types/ContainedList/ContainedListItem.svelte.d.ts

@@ -0,0 +1,28 @@
+import type { SvelteComponentTyped } from "svelte";
+
+export interface ContainedListItemProps {
+  /**
+   * Set to `true` to render a `button` element instead of a `div`
+   * @default false
+   */
+  interactive?: boolean;
+
+  /**
+   * Set to `true` to disable the list item.
+   * @default false
+   */
+  disabled?: boolean;
+
+  /**
+   * Specify the icon to render
+   * Icon is rendered to the left of the label text
+   * @default undefined
+   */
+  icon?: typeof import("svelte").SvelteComponent<any>;
+}
+
+export default class ContainedListItem extends SvelteComponentTyped<
+  ContainedListItemProps,
+  { click: WindowEventMap["click"] },
+  { default: {}; action: {} }
+> {}

types/index.d.ts

@@ -26,6 +26,8 @@ export { default as ComposedModal } from "./ComposedModal/ComposedModal.svelte";
 export { default as ModalHeader } from "./ComposedModal/ModalHeader.svelte";
 export { default as ModalBody } from "./ComposedModal/ModalBody.svelte";
 export { default as ModalFooter } from "./ComposedModal/ModalFooter.svelte";
+export { default as ContainedList } from "./ContainedList/ContainedList.svelte";
+export { default as ContainedListItem } from "./ContainedList/ContainedListItem.svelte";
 export { default as CodeSnippet } from "./CodeSnippet/CodeSnippet.svelte";
 export { default as CodeSnippetSkeleton } from "./CodeSnippet/CodeSnippetSkeleton.svelte";
 export { default as DataTable } from "./DataTable/DataTable.svelte";