chore: v11 Search

COMPONENT_INDEX.md

@@ -3102,7 +3102,7 @@ None.
 | ref                  | No       | <code>let</code> | Yes      | <code>null &#124; HTMLInputElement</code>                 | <code>null</code>                                | Obtain a reference to the input HTML element                    |
 | expanded             | No       | <code>let</code> | Yes      | <code>boolean</code>                                      | <code>false</code>                               | Set to `true to expand the search input                         |
 | value                | No       | <code>let</code> | Yes      | <code>any</code>                                          | <code>""</code>                                  | Specify the value of the search input                           |
-| size                 | No       | <code>let</code> | No       | <code>"sm" &#124; "lg" &#124; "xl"</code>                 | <code>"xl"</code>                                | Specify the size of the search input                            |
+| size                 | No       | <code>let</code> | No       | <code>"sm" &#124; "md" &#124; "lg"</code>                 | <code>"md"</code>                                | Specify the size of the search input                            |
 | searchClass          | No       | <code>let</code> | No       | <code>string</code>                                       | <code>""</code>                                  | Specify the class name passed to the outer div element          |
 | skeleton             | No       | <code>let</code> | No       | <code>boolean</code>                                      | <code>false</code>                               | Set to `true` to display the skeleton state                     |
 | light                | No       | <code>let</code> | No       | <code>boolean</code>                                      | <code>false</code>                               | Set to `true` to enable the light variant                       |
@@ -3147,7 +3147,7 @@ None.
 
 | Prop name | Required | Kind             | Reactive | Type                                      | Default value     | Description                          |
 | :-------- | :------- | :--------------- | :------- | ----------------------------------------- | ----------------- | ------------------------------------ |
-| size      | No       | <code>let</code> | No       | <code>"sm" &#124; "lg" &#124; "xl"</code> | <code>"xl"</code> | Specify the size of the search input |
+| size      | No       | <code>let</code> | No       | <code>"sm" &#124; "md" &#124; "lg"</code> | <code>"md"</code> | Specify the size of the search input |
 
 ### Slots
 

docs/src/COMPONENT_API.json

@@ -9926,8 +9926,8 @@
           "name": "size",
           "kind": "let",
           "description": "Specify the size of the search input",
-          "type": "\"sm\" | \"lg\" | \"xl\"",
+          "type": "\"sm\" | \"md\" | \"lg\"",
-          "value": "\"xl\"",
+          "value": "\"md\"",
           "isFunction": false,
           "isFunctionDeclaration": false,
           "isRequired": false,
@@ -10150,8 +10150,8 @@
           "name": "size",
           "kind": "let",
           "description": "Specify the size of the search input",
-          "type": "\"sm\" | \"lg\" | \"xl\"",
+          "type": "\"sm\" | \"md\" | \"lg\"",
-          "value": "\"xl\"",
+          "value": "\"md\"",
           "isFunction": false,
           "isFunctionDeclaration": false,
           "isRequired": false,

docs/src/pages/components/Search.svx

@@ -6,7 +6,7 @@
 
 ## Default
 
-The `Search` component size is extra-large by default. There are [large](#large-size) and [small](#small-size) size variants.
+The `Search` component size is medium by default. There are [large](#large-size) and [small](#small-size) size variants.
 
 <Search />
 

src/Search/Search.svelte

@@ -13,9 +13,9 @@
 
   /**
    * Specify the size of the search input
-   * @type {"sm" | "lg" | "xl"}
+   * @type {"sm" | "md" | "lg"}
    */
-  export let size = "xl";
+  export let size = "md";
 
   /** Specify the class name passed to the outer div element */
   export let searchClass = "";
@@ -96,8 +96,8 @@
     class:bx--search--light="{light}"
     class:bx--search--disabled="{disabled}"
     class:bx--search--sm="{size === 'sm'}"
+    class:bx--search--md="{size === 'md'}"
     class:bx--search--lg="{size === 'lg'}"
-    class:bx--search--xl="{size === 'xl'}"
     class:bx--search--expandable="{expandable}"
     class:bx--search--expanded="{expanded}"
     class="{searchClass}"
@@ -166,7 +166,7 @@
         dispatch('clear');
       }}"
     >
-      <svelte:component this="{Close}" size="{size === 'xl' ? 20 : 16}" />
+      <Close />
     </button>
   </div>
 {/if}

src/Search/SearchSkeleton.svelte

@@ -1,9 +1,9 @@
 <script>
   /**
    * Specify the size of the search input
-   * @type {"sm" | "lg" | "xl"}
+   * @type {"sm" | "md" | "lg"}
    */
-  export let size = "xl";
+  export let size = "md";
 </script>
 
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->
@@ -11,8 +11,8 @@
 <div
   class:bx--skeleton="{true}"
   class:bx--search--sm="{size === 'sm'}"
+  class:bx--search--md="{size === 'md'}"
   class:bx--search--lg="{size === 'lg'}"
-  class:bx--search--xl="{size === 'xl'}"
   {...$$restProps}
   on:click
   on:mouseover

types/Search/Search.svelte.d.ts

@@ -12,9 +12,9 @@ export interface SearchProps extends RestProps {
 
   /**
    * Specify the size of the search input
-   * @default "xl"
+   * @default "md"
    */
-  size?: "sm" | "lg" | "xl";
+  size?: "sm" | "md" | "lg";
 
   /**
    * Specify the class name passed to the outer div element

types/Search/SearchSkeleton.svelte.d.ts

@@ -6,9 +6,9 @@ type RestProps = SvelteHTMLElements["div"];
 export interface SearchSkeletonProps extends RestProps {
   /**
    * Specify the size of the search input
-   * @default "xl"
+   * @default "md"
    */
-  size?: "sm" | "lg" | "xl";
+  size?: "sm" | "md" | "lg";
 
   [key: `data-${string}`]: any;
 }