chore: v11 Accordion

Size `xl` changed to `lg`. For better compatibility with existing codebases size `xl` is still supported.

Author: gregorw

COMPONENT_INDEX.md

@@ -177,7 +177,7 @@
 | Prop name | Required | Kind             | Reactive | Type                              | Default value          | Description                                      |
 | :-------- | :------- | :--------------- | :------- | --------------------------------- | ---------------------- | ------------------------------------------------ |
 | align     | No       | <code>let</code> | No       | <code>"start" &#124; "end"</code> | <code>"end"</code>     | Specify alignment of accordion item chevron icon |
-| size      | No       | <code>let</code> | No       | <code>"sm" &#124; "xl"</code>     | <code>undefined</code> | Specify the size of the accordion                |
+| size      | No       | <code>let</code> | No       | <code>"sm" &#124; "lg"</code>     | <code>undefined</code> | Specify the size of the accordion                |
 | disabled  | No       | <code>let</code> | No       | <code>boolean</code>              | <code>false</code>     | Set to `true` to disable the accordion           |
 | skeleton  | No       | <code>let</code> | No       | <code>boolean</code>              | <code>false</code>     | Set to `true` to display the skeleton state      |
 

docs/src/COMPONENT_API.json

@@ -21,7 +21,7 @@
           "name": "size",
           "kind": "let",
           "description": "Specify the size of the accordion",
-          "type": "\"sm\" | \"xl\"",
+          "type": "\"sm\" | \"lg\"",
           "isFunction": false,
           "isFunctionDeclaration": false,
           "isRequired": false,

docs/src/pages/components/Accordion.svx

@@ -88,9 +88,9 @@ This example demonstrates how a list of items can be programmatically expanded a
 
 <FileSource src="/framed/Accordion/ExpandableAccordion" />
 
-## Extra-large size
+## Large size
 
-<Accordion size="xl">
+<Accordion size="lg">
   <AccordionItem title="Natural Language Classifier">
    <p>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.
    </p>

src/Accordion/Accordion.svelte

@@ -9,7 +9,7 @@
 
   /**
    * Specify the size of the accordion
-   * @type {"sm" | "xl"}
+   * @type {"sm" | "lg"}
    */
   export let size = undefined;
 
@@ -48,7 +48,7 @@
     class:bx--accordion--start="{align === 'start'}"
     class:bx--accordion--end="{align === 'end'}"
     class:bx--accordion--sm="{size === 'sm'}"
-    class:bx--accordion--xl="{size === 'xl'}"
+    class:bx--accordion--lg="{size === 'lg' || size === 'xl'}"
     {...$$restProps}
     on:click
     on:mouseover

tests/Accordion.test.svelte

@@ -110,7 +110,7 @@
   </AccordionItem>
 </Accordion>
 
-<Accordion size="xl">
+<Accordion size="lg">
   <AccordionItem title="Natural Language Classifier">
     <p>
       Natural Language Classifier uses advanced natural language processing and
@@ -214,6 +214,6 @@
 
 <Accordion skeleton open="{false}" />
 
-<Accordion skeleton size="xl" />
+<Accordion skeleton size="lg" />
 
 <Accordion skeleton size="sm" />

types/Accordion/Accordion.svelte.d.ts

@@ -12,7 +12,7 @@ export interface AccordionProps extends AccordionSkeletonProps {
    * Specify the size of the accordion
    * @default undefined
    */
-  size?: "sm" | "xl";
+  size?: "sm" | "lg";
 
   /**
    * Set to `true` to disable the accordion