From 0e8909ae595c51287b372e5178a598eec945b0d6 Mon Sep 17 00:00:00 2001 From: Eric Liu Date: Sun, 21 Apr 2024 10:50:00 -0700 Subject: [PATCH] feat(accordion)!: integrate `Accordion` with v11 (#1947) --- COMPONENT_INDEX.md | 51 ++--- docs/src/COMPONENT_API.json | 109 ++++------ docs/src/pages/components/Accordion.svx | 127 +++++++---- src/Accordion/Accordion.svelte | 62 +++--- src/Accordion/AccordionItem.svelte | 42 ++-- src/Accordion/AccordionSkeleton.svelte | 38 ++-- tests/Accordion.test.svelte | 202 +----------------- types/Accordion/Accordion.svelte.d.ts | 34 ++- types/Accordion/AccordionItem.svelte.d.ts | 16 +- types/Accordion/AccordionSkeleton.svelte.d.ts | 36 ++-- 10 files changed, 261 insertions(+), 456 deletions(-) diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md index dc437397..3bf77ceb 100644 --- a/COMPONENT_INDEX.md +++ b/COMPONENT_INDEX.md @@ -177,12 +177,12 @@ ### Props -| Prop name | Required | Kind | Reactive | Type | Default value | Description | -| :-------- | :------- | :--------------- | :------- | --------------------------------- | ---------------------- | ------------------------------------------------ | -| align | No | let | No | "start" | "end" | "end" | Specify alignment of accordion item chevron icon | -| size | No | let | No | "sm" | "lg" | undefined | Specify the size of the accordion | -| disabled | No | let | No | boolean | false | Set to `true` to disable the accordion | -| skeleton | No | let | No | boolean | false | Set to `true` to display the skeleton state | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :-------- | :------- | :--------------- | :------- | ----------------------------------------- | ------------------ | ----------------------------------------------------------------------------------------------------------- | +| align | No | let | No | "start" | "end" | "end" | Specify the alignment of the accordion item chevron icon. | +| flush | No | let | No | boolean | false | Set to `true` to flush the accordion content text.

**Note**: does not work with `align="start"`. | +| size | No | let | No | "sm" | "md" | "lg" | "md" | Specify the size of the accordion. | +| disabled | No | let | No | boolean | false | Set to `true` to disable all accordion items. | ### Slots @@ -192,23 +192,18 @@ ### Events -| Event name | Type | Detail | -| :--------- | :-------- | :----- | -| click | forwarded | -- | -| mouseover | forwarded | -- | -| mouseenter | forwarded | -- | -| mouseleave | forwarded | -- | +None. ## `AccordionItem` ### Props -| Prop name | Required | Kind | Reactive | Type | Default value | Description | -| :-------------- | :------- | :--------------- | :------- | -------------------- | ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------- | -| disabled | No | let | Yes | boolean | false | Set to `true` to disable the accordion item | -| open | No | let | Yes | boolean | false | Set to `true` to open the first accordion item | -| title | No | let | No | string | "title" | Specify the title of the accordion item heading.
Alternatively, use the "title" slot (e.g., `<div slot="title">...</div>`) | -| iconDescription | No | let | No | string | "Expand/Collapse" | Specify the ARIA label for the accordion item chevron icon | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :-------------- | :------- | :--------------- | :------- | -------------------- | ------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| disabled | No | let | Yes | boolean | false | Set to `true` to disable the accordion item. | +| open | No | let | Yes | boolean | false | Set to `true` to open the first accordion item. | +| title | No | let | No | string | "title" | Specify the title of the accordion item heading.
Use the "title" slot for custom elements.
@example <svelte:fragment slot="title">...</svelte:fragment> | +| iconDescription | No | let | No | string | "Expand/Collapse" | Specify the ARIA label for the accordion item chevron icon. | ### Slots @@ -232,12 +227,13 @@ ### Props -| Prop name | Required | Kind | Reactive | Type | Default value | Description | -| :-------- | :------- | :--------------- | :------- | --------------------------------- | ---------------------- | ------------------------------------------------ | -| count | No | let | No | number | 4 | Specify the number of accordion items to render | -| align | No | let | No | "start" | "end" | "end" | Specify alignment of accordion item chevron icon | -| size | No | let | No | "sm" | "xl" | undefined | Specify the size of the accordion | -| open | No | let | No | boolean | true | Set to `false` to close the first accordion item | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :-------- | :------- | :--------------- | :------- | ----------------------------------------- | ------------------ | ----------------------------------------------------------------------------------------------------------- | +| count | No | let | No | number | 4 | Specify the number of accordion items. | +| align | No | let | No | "start" | "end" | "end" | Specify the alignment of the accordion item chevron icon. | +| flush | No | let | No | boolean | false | Set to `true` to flush the accordion content text.

**Note**: does not work with `align="start"`. | +| size | No | let | No | "sm" | "md" | "lg" | "md" | Specify the size of the accordion. | +| open | No | let | No | boolean | false | Set to `true` to expand the first accordion item | ### Slots @@ -245,12 +241,7 @@ None. ### Events -| Event name | Type | Detail | -| :--------- | :-------- | :----- | -| click | forwarded | -- | -| mouseover | forwarded | -- | -| mouseenter | forwarded | -- | -| mouseleave | forwarded | -- | +None. ## `AspectRatio` diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json index 60018cc2..38a34b07 100644 --- a/docs/src/COMPONENT_API.json +++ b/docs/src/COMPONENT_API.json @@ -8,7 +8,7 @@ { "name": "align", "kind": "let", - "description": "Specify alignment of accordion item chevron icon", + "description": "Specify the alignment of the accordion item chevron icon.", "type": "\"start\" | \"end\"", "value": "\"end\"", "isFunction": false, @@ -18,20 +18,9 @@ "reactive": false }, { - "name": "size", + "name": "flush", "kind": "let", - "description": "Specify the size of the accordion", - "type": "\"sm\" | \"lg\"", - "isFunction": false, - "isFunctionDeclaration": false, - "isRequired": false, - "constant": false, - "reactive": false - }, - { - "name": "disabled", - "kind": "let", - "description": "Set to `true` to disable the accordion", + "description": "Set to `true` to flush the accordion content text.\n\n**Note**: does not work with `align=\"start\"`.", "type": "boolean", "value": "false", "isFunction": false, @@ -41,9 +30,21 @@ "reactive": false }, { - "name": "skeleton", + "name": "size", "kind": "let", - "description": "Set to `true` to display the skeleton state", + "description": "Specify the size of the accordion.", + "type": "\"sm\" | \"md\" | \"lg\"", + "value": "\"md\"", + "isFunction": false, + "isFunctionDeclaration": false, + "isRequired": false, + "constant": false, + "reactive": false + }, + { + "name": "disabled", + "kind": "let", + "description": "Set to `true` to disable all accordion items.", "type": "boolean", "value": "false", "isFunction": false, @@ -55,34 +56,8 @@ ], "moduleExports": [], "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }], - "events": [ - { - "type": "forwarded", - "name": "click", - "element": "AccordionSkeleton" - }, - { - "type": "forwarded", - "name": "mouseover", - "element": "AccordionSkeleton" - }, - { - "type": "forwarded", - "name": "mouseenter", - "element": "AccordionSkeleton" - }, - { - "type": "forwarded", - "name": "mouseleave", - "element": "AccordionSkeleton" - } - ], - "typedefs": [], - "rest_props": { "type": "InlineComponent", "name": "AccordionSkeleton" }, - "extends": { - "interface": "AccordionSkeletonProps", - "import": "\"./AccordionSkeleton.svelte\"" - } + "events": [], + "typedefs": [] }, { "moduleName": "AccordionItem", @@ -91,7 +66,7 @@ { "name": "title", "kind": "let", - "description": "Specify the title of the accordion item heading.\nAlternatively, use the \"title\" slot (e.g., `
...
`)", + "description": "Specify the title of the accordion item heading.\nUse the \"title\" slot for custom elements.\n@example ...", "type": "string", "value": "\"title\"", "isFunction": false, @@ -103,7 +78,7 @@ { "name": "open", "kind": "let", - "description": "Set to `true` to open the first accordion item", + "description": "Set to `true` to open the first accordion item.", "type": "boolean", "value": "false", "isFunction": false, @@ -115,7 +90,7 @@ { "name": "disabled", "kind": "let", - "description": "Set to `true` to disable the accordion item", + "description": "Set to `true` to disable the accordion item.", "type": "boolean", "value": "false", "isFunction": false, @@ -127,7 +102,7 @@ { "name": "iconDescription", "kind": "let", - "description": "Specify the ARIA label for the accordion item chevron icon", + "description": "Specify the ARIA label for the accordion item chevron icon.", "type": "string", "value": "\"Expand/Collapse\"", "isFunction": false, @@ -155,8 +130,7 @@ { "type": "forwarded", "name": "mouseleave", "element": "button" }, { "type": "forwarded", "name": "keydown", "element": "button" } ], - "typedefs": [], - "rest_props": { "type": "Element", "name": "li" } + "typedefs": [] }, { "moduleName": "AccordionSkeleton", @@ -165,7 +139,7 @@ { "name": "count", "kind": "let", - "description": "Specify the number of accordion items to render", + "description": "Specify the number of accordion items.", "type": "number", "value": "4", "isFunction": false, @@ -177,7 +151,7 @@ { "name": "align", "kind": "let", - "description": "Specify alignment of accordion item chevron icon", + "description": "Specify the alignment of the accordion item chevron icon.", "type": "\"start\" | \"end\"", "value": "\"end\"", "isFunction": false, @@ -186,11 +160,24 @@ "constant": false, "reactive": false }, + { + "name": "flush", + "kind": "let", + "description": "Set to `true` to flush the accordion content text.\n\n**Note**: does not work with `align=\"start\"`.", + "type": "boolean", + "value": "false", + "isFunction": false, + "isFunctionDeclaration": false, + "isRequired": false, + "constant": false, + "reactive": false + }, { "name": "size", "kind": "let", - "description": "Specify the size of the accordion", - "type": "\"sm\" | \"xl\"", + "description": "Specify the size of the accordion.", + "type": "\"sm\" | \"md\" | \"lg\"", + "value": "\"md\"", "isFunction": false, "isFunctionDeclaration": false, "isRequired": false, @@ -200,9 +187,9 @@ { "name": "open", "kind": "let", - "description": "Set to `false` to close the first accordion item", + "description": "Set to `true` to expand the first accordion item", "type": "boolean", - "value": "true", + "value": "false", "isFunction": false, "isFunctionDeclaration": false, "isRequired": false, @@ -212,14 +199,8 @@ ], "moduleExports": [], "slots": [], - "events": [ - { "type": "forwarded", "name": "click", "element": "ul" }, - { "type": "forwarded", "name": "mouseover", "element": "ul" }, - { "type": "forwarded", "name": "mouseenter", "element": "ul" }, - { "type": "forwarded", "name": "mouseleave", "element": "ul" } - ], - "typedefs": [], - "rest_props": { "type": "Element", "name": "ul" } + "events": [], + "typedefs": [] }, { "moduleName": "AspectRatio", diff --git a/docs/src/pages/components/Accordion.svx b/docs/src/pages/components/Accordion.svx index 62f5ec90..0dad5d43 100644 --- a/docs/src/pages/components/Accordion.svx +++ b/docs/src/pages/components/Accordion.svx @@ -6,12 +6,15 @@ components: ["Accordion", "AccordionItem", "AccordionSkeleton"] import { Accordion, AccordionItem, + AccordionSkeleton } from "carbon-components-svelte"; import Preview from "../../components/Preview.svelte"; ## Default +By default, the accordion is medium-sized with the chevron right-aligned. +

Natural Language Classifier uses advanced natural language processing and machine learning techniques to create custom classification models. Users train their data and the service predicts the appropriate category for the inputted text. @@ -25,8 +28,61 @@ components: ["Accordion", "AccordionItem", "AccordionSkeleton"] +## Large size + +Set the `size` prop to `lg` to increase the size of the accordion. + + + +

Natural Language Classifier uses advanced natural language processing and machine learning techniques to create custom classification models. Users train their data and the service predicts the appropriate category for the inputted text. +

+ + +

Analyze text to extract meta-data from content such as concepts, entities, emotion, relations, sentiment and more.

+ + +

Translate text, documents, and websites from one language to another. Create industry or region-specific translations via the service's customization capability.

+ + + +## Small size + +Set the `size` prop to `sm` to decrease the size of the accordion. + + + +

Natural Language Classifier uses advanced natural language processing and machine learning techniques to create custom classification models. Users train their data and the service predicts the appropriate category for the inputted text. +

+ + +

Analyze text to extract meta-data from content such as concepts, entities, emotion, relations, sentiment and more.

+ + +

Translate text, documents, and websites from one language to another. Create industry or region-specific translations via the service's customization capability.

+ + + +## Flush text + +Set the `flush` prop to `true` to flush align accordion content text. Note that this prop cannot be used with `align="start"`. + + + +

Natural Language Classifier uses advanced natural language processing and machine learning techniques to create custom classification models. Users train their data and the service predicts the appropriate category for the inputted text. +

+ + +

Analyze text to extract meta-data from content such as concepts, entities, emotion, relations, sentiment and more.

+ + +

Translate text, documents, and websites from one language to another. Create industry or region-specific translations via the service's customization capability.

+ + + ## Left-aligned chevron +By default, the chevron is right-aligned. Set `align="start"` to left-align the chevron. +

Natural Language Classifier uses advanced natural language processing and machine learning techniques to create custom classification models. Users train their data and the service predicts the appropriate category for the inputted text. @@ -42,10 +98,10 @@ components: ["Accordion", "AccordionItem", "AccordionSkeleton"] ## Custom title slot - + -

Natural Language Classifier
+
Natural Language Classifier
AI / Machine Learning

Natural Language Classifier uses advanced natural language processing and machine learning techniques to create custom classification models. Users train their data and the service predicts the appropriate category for the inputted text. @@ -53,14 +109,14 @@ components: ["Accordion", "AccordionItem", "AccordionSkeleton"] -

Natural Language Understanding
+
Natural Language Understanding
AI / Machine Learning

Analyze text to extract meta-data from content such as concepts, entities, emotion, relations, sentiment and more.

 -
Language Translator
+
Language Translator
AI / Machine Learning

Translate text, documents, and websites from one language to another. Create industry or region-specific translations via the service's customization capability.

@@ -88,38 +144,12 @@ This example demonstrates how a list of items can be programmatically expanded a -## Large size - - - -

Natural Language Classifier uses advanced natural language processing and machine learning techniques to create custom classification models. Users train their data and the service predicts the appropriate category for the inputted text. -

- - -

Analyze text to extract meta-data from content such as concepts, entities, emotion, relations, sentiment and more.

- - -

Translate text, documents, and websites from one language to another. Create industry or region-specific translations via the service's customization capability.

- - - -## Small size - - - -

Natural Language Classifier uses advanced natural language processing and machine learning techniques to create custom classification models. Users train their data and the service predicts the appropriate category for the inputted text. -

- - -

Analyze text to extract meta-data from content such as concepts, entities, emotion, relations, sentiment and more.

- - -

Translate text, documents, and websites from one language to another. Create industry or region-specific translations via the service's customization capability.

- - - ## Disabled +Set the `disabled` prop to `true` to disable all accordion items. + +Dynamically disabling the accordion will collapse any expanded items. +

Natural Language Classifier uses advanced natural language processing and machine learning techniques to create custom classification models. Users train their data and the service predicts the appropriate category for the inputted text. @@ -135,6 +165,8 @@ This example demonstrates how a list of items can be programmatically expanded a ## Disabled (item) +To disable individual accordion items, set the `disabled` prop to `true` on the `AccordionItem`. +

Natural Language Classifier uses advanced natural language processing and machine learning techniques to create custom classification models. Users train their data and the service predicts the appropriate category for the inputted text. @@ -150,25 +182,34 @@ This example demonstrates how a list of items can be programmatically expanded a ## Skeleton - + ## Skeleton (left-aligned chevron) - + ## Skeleton (custom count) - +By default, the skeleton accordion has 4 items. Specify a custom count using the `count` prop. -## Skeleton (closed) + - +## Skeleton (open) -## Skeleton (extra-large) +Set `open` to `true` to expand the first accordion item. - + + +## Skeleton (flush text) + +Set the `flush` prop to `true` to flush align accordion content text. Note that this prop cannot be used with `align="start"`. + + + +## Skeleton (large) + + ## Skeleton (small) - - + diff --git a/src/Accordion/Accordion.svelte b/src/Accordion/Accordion.svelte index 785b0163..185c0a04 100644 --- a/src/Accordion/Accordion.svelte +++ b/src/Accordion/Accordion.svelte @@ -1,27 +1,30 @@ - -{#if skeleton} - -{:else} - -

    - -
-{/if} +
    + +
diff --git a/src/Accordion/AccordionItem.svelte b/src/Accordion/AccordionItem.svelte index a8034f75..9f512dfb 100644 --- a/src/Accordion/AccordionItem.svelte +++ b/src/Accordion/AccordionItem.svelte @@ -1,47 +1,44 @@
  • {title} -
    - +
    +
    + +
    • diff --git a/src/Accordion/AccordionSkeleton.svelte b/src/Accordion/AccordionSkeleton.svelte index 9305d2fa..4de00f83 100644 --- a/src/Accordion/AccordionSkeleton.svelte +++ b/src/Accordion/AccordionSkeleton.svelte @@ -1,40 +1,44 @@ - -
      {#if open}
      • {/if} - {#each Array.from({ length: open ? count - 1 : count }, (_, i) => i) as item (item)} + {#each Array.from({ length: open ? count - 1 : count }) as item}
    • diff --git a/tests/Accordion.test.svelte b/tests/Accordion.test.svelte index eee32913..5d161d99 100644 --- a/tests/Accordion.test.svelte +++ b/tests/Accordion.test.svelte @@ -1,188 +1,8 @@ - - -

      - Natural Language Classifier uses advanced natural language processing and - machine learning techniques to create custom classification models. Users - train their data and the service predicts the appropriate category for the - inputted text. -

      -       - -

      - Analyze text to extract meta-data from content such as concepts, entities, - emotion, relations, sentiment and more. -

      -       - -

      - Translate text, documents, and websites from one language to another. - Create industry or region-specific translations via the service's - customization capability. -

      -       -       - - - -

      - Natural Language Classifier uses advanced natural language processing and - machine learning techniques to create custom classification models. Users - train their data and the service predicts the appropriate category for the - inputted text. -

      -       - -

      - Analyze text to extract meta-data from content such as concepts, entities, - emotion, relations, sentiment and more. -

      -       - -

      - Translate text, documents, and websites from one language to another. - Create industry or region-specific translations via the service's - customization capability. -

      -       -       - - - -
      -
      Natural Language Classifier
      -
      AI / Machine Learning
      -
      -

      - Natural Language Classifier uses advanced natural language processing and - machine learning techniques to create custom classification models. Users - train their data and the service predicts the appropriate category for the - inputted text. -

      -       - -
      -
      Natural Language Understanding
      -
      AI / Machine Learning
      -
      -

      - Analyze text to extract meta-data from content such as concepts, entities, - emotion, relations, sentiment and more. -

      -       - -
      -
      Language Translator
      -
      AI / Machine Learning
      -
      -

      - Translate text, documents, and websites from one language to another. - Create industry or region-specific translations via the service's - customization capability. -

      -       -       - - - -

      - Natural Language Classifier uses advanced natural language processing and - machine learning techniques to create custom classification models. Users - train their data and the service predicts the appropriate category for the - inputted text. -

      -       - -

      - Analyze text to extract meta-data from content such as concepts, entities, - emotion, relations, sentiment and more. -

      -       - -

      - Translate text, documents, and websites from one language to another. - Create industry or region-specific translations via the service's - customization capability. -

      -       -       - - - -

      - Natural Language Classifier uses advanced natural language processing and - machine learning techniques to create custom classification models. Users - train their data and the service predicts the appropriate category for the - inputted text. -

      -       - -

      - Analyze text to extract meta-data from content such as concepts, entities, - emotion, relations, sentiment and more. -

      -       - -

      - Translate text, documents, and websites from one language to another. - Create industry or region-specific translations via the service's - customization capability. -

      -       -       - - - -

      - Natural Language Classifier uses advanced natural language processing and - machine learning techniques to create custom classification models. Users - train their data and the service predicts the appropriate category for the - inputted text. -

      -       - -

      - Analyze text to extract meta-data from content such as concepts, entities, - emotion, relations, sentiment and more. -

      -       - -

      - Translate text, documents, and websites from one language to another. - Create industry or region-specific translations via the service's - customization capability. -

      -       -       - - - -

      - Natural Language Classifier uses advanced natural language processing and - machine learning techniques to create custom classification models. Users - train their data and the service predicts the appropriate category for the - inputted text. -

      -       - -

      - Analyze text to extract meta-data from content such as concepts, entities, - emotion, relations, sentiment and more. -

      -       - -

      - Translate text, documents, and websites from one language to another. - Create industry or region-specific translations via the service's - customization capability. -

      -       -       - - +

      Natural Language Classifier uses advanced natural language processing and @@ -192,10 +12,10 @@

      -

      - Analyze text to extract meta-data from content such as concepts, entities, - emotion, relations, sentiment and more. -

      + +
      Natural Language Understanding
      +
      AI / Machine Learning
      +

      @@ -206,14 +26,6 @@ - - - - - - - - - + diff --git a/types/Accordion/Accordion.svelte.d.ts b/types/Accordion/Accordion.svelte.d.ts index bcb8d38f..dc72a7f7 100644 --- a/types/Accordion/Accordion.svelte.d.ts +++ b/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, { default: {} } > {} diff --git a/types/Accordion/AccordionItem.svelte.d.ts b/types/Accordion/AccordionItem.svelte.d.ts index 320d460a..62d8a34a 100644 --- a/types/Accordion/AccordionItem.svelte.d.ts +++ b/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., `

      ...
      `) + * Use the "title" slot for custom elements. + * @example ... * @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< diff --git a/types/Accordion/AccordionSkeleton.svelte.d.ts b/types/Accordion/AccordionSkeleton.svelte.d.ts index d28fe6f0..b187d2ce 100644 --- a/types/Accordion/AccordionSkeleton.svelte.d.ts +++ b/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, {} > {}