feat(accordion)!: integrate Accordion with v11 (#1947)

types/Accordion/Accordion.svelte.d.ts

@@ -1,39 +1,35 @@
 import type { SvelteComponentTyped } from "svelte";
-import type { AccordionSkeletonProps } from "./AccordionSkeleton.svelte";
 
-export interface AccordionProps extends AccordionSkeletonProps {
+export interface AccordionProps {
   /**
-   * Specify alignment of accordion item chevron icon
+   * Specify the alignment of the accordion item chevron icon.
    * @default "end"
    */
   align?: "start" | "end";
 
   /**
-   * Specify the size of the accordion
-   * @default undefined
+   * Set to `true` to flush the accordion content text.
+   *
+   * **Note**: does not work with `align="start"`.
+   * @default false
    */
-  size?: "sm" | "lg";
+  flush?: boolean;
 
   /**
-   * Set to `true` to disable the accordion
+   * Specify the size of the accordion.
+   * @default "md"
+   */
+  size?: "sm" | "md" | "lg";
+
+  /**
+   * Set to `true` to disable all accordion items.
    * @default false
    */
   disabled?: boolean;
-
-  /**
-   * Set to `true` to display the skeleton state
-   * @default false
-   */
-  skeleton?: boolean;
 }
 
 export default class Accordion extends SvelteComponentTyped<
   AccordionProps,
-  {
-    click: WindowEventMap["click"];
-    mouseover: WindowEventMap["mouseover"];
-    mouseenter: WindowEventMap["mouseenter"];
-    mouseleave: WindowEventMap["mouseleave"];
-  },
+  Record<string, any>,
   { default: {} }
 > {}

types/Accordion/AccordionItem.svelte.d.ts

@@ -1,35 +1,31 @@
 import type { SvelteComponentTyped } from "svelte";
-import type { SvelteHTMLElements } from "svelte/elements";
 
-type RestProps = SvelteHTMLElements["li"];
-
-export interface AccordionItemProps extends RestProps {
+export interface AccordionItemProps {
   /**
    * Specify the title of the accordion item heading.
-   * Alternatively, use the "title" slot (e.g., `<div slot="title">...</div>`)
+   * Use the "title" slot for custom elements.
+   * @example <svelte:fragment slot="title">...</svelte:fragment>
    * @default "title"
    */
   title?: string;
 
   /**
-   * Set to `true` to open the first accordion item
+   * Set to `true` to open the first accordion item.
    * @default false
    */
   open?: boolean;
 
   /**
-   * Set to `true` to disable the accordion item
+   * Set to `true` to disable the accordion item.
    * @default false
    */
   disabled?: boolean;
 
   /**
-   * Specify the ARIA label for the accordion item chevron icon
+   * Specify the ARIA label for the accordion item chevron icon.
    * @default "Expand/Collapse"
    */
   iconDescription?: string;
-
-  [key: `data-${string}`]: any;
 }
 
 export default class AccordionItem extends SvelteComponentTyped<

types/Accordion/AccordionSkeleton.svelte.d.ts

@@ -1,43 +1,41 @@
 import type { SvelteComponentTyped } from "svelte";
-import type { SvelteHTMLElements } from "svelte/elements";
 
-type RestProps = SvelteHTMLElements["ul"];
-
-export interface AccordionSkeletonProps extends RestProps {
+export interface AccordionSkeletonProps {
   /**
-   * Specify the number of accordion items to render
+   * Specify the number of accordion items.
    * @default 4
    */
   count?: number;
 
   /**
-   * Specify alignment of accordion item chevron icon
+   * Specify the alignment of the accordion item chevron icon.
    * @default "end"
    */
   align?: "start" | "end";
 
   /**
-   * Specify the size of the accordion
-   * @default undefined
+   * Set to `true` to flush the accordion content text.
+   *
+   * **Note**: does not work with `align="start"`.
+   * @default false
    */
-  size?: "sm" | "xl";
+  flush?: boolean;
 
   /**
-   * Set to `false` to close the first accordion item
-   * @default true
+   * Specify the size of the accordion.
+   * @default "md"
+   */
+  size?: "sm" | "md" | "lg";
+
+  /**
+   * Set to `true` to expand the first accordion item
+   * @default false
    */
   open?: boolean;
-
-  [key: `data-${string}`]: any;
 }
 
 export default class AccordionSkeleton extends SvelteComponentTyped<
   AccordionSkeletonProps,
-  {
-    click: WindowEventMap["click"];
-    mouseover: WindowEventMap["mouseover"];
-    mouseenter: WindowEventMap["mouseenter"];
-    mouseleave: WindowEventMap["mouseleave"];
-  },
+  Record<string, any>,
   {}
 > {}