Merge branch 'master' into chore

COMPONENT_INDEX.md

@@ -921,6 +921,8 @@ None.
 
 | Prop name       | Kind             | Reactive | Type                                | Default value                                                                                                     | Description                                                                                    |
 | :-------------- | :--------------- | :------- | :---------------------------------- | ----------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- |
+| feedback        | <code>let</code> | No       | <code>string</code>                 | <code>"Copied!"</code>                                                                                            | Set the feedback text shown after clicking the button                                          |
+| feedbackTimeout | <code>let</code> | No       | <code>number</code>                 | <code>2000</code>                                                                                                 | Set the timeout duration (ms) to display feedback text                                         |
 | iconDescription | <code>let</code> | No       | <code>string</code>                 | <code>"Copy to clipboard"</code>                                                                                  | Set the title and ARIA label for the copy button                                               |
 | text            | <code>let</code> | No       | <code>string</code>                 | <code>undefined</code>                                                                                            | Specify the text to copy                                                                       |
 | copy            | <code>let</code> | No       | <code>(text: string) => void</code> | <code>async (text) => { try { await navigator.clipboard.writeText(text); } catch (e) { console.log(e); } }</code> | Override the default copy behavior of using the navigator.clipboard.writeText API to copy text |
@@ -3163,8 +3165,8 @@ None.
 | Prop name            | Kind             | Reactive | Type                                                 | Default value                                    | Description                                             |
 | :------------------- | :--------------- | :------- | :--------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------- |
 | ref                  | <code>let</code> | Yes      | <code>null &#124; HTMLInputElement</code>            | <code>null</code>                                | Obtain a reference to the input HTML element            |
-| value                | <code>let</code> | Yes      | <code>string</code>                                  | <code>""</code>                                  | Specify the value of the search input                   |
 | expanded             | <code>let</code> | Yes      | <code>boolean</code>                                 | <code>false</code>                               | Set to `true to expand the search input                 |
+| value                | <code>let</code> | Yes      | <code>any</code>                                     | <code>""</code>                                  | Specify the value of the search input                   |
 | small                | <code>let</code> | No       | <code>boolean</code>                                 | <code>false</code>                               | --                                                      |
 | size                 | <code>let</code> | No       | <code>"sm" &#124; "lg" &#124; "xl"</code>            | <code>"xl"</code>                                | Specify the size of the search input                    |
 | searchClass          | <code>let</code> | No       | <code>string</code>                                  | <code>""</code>                                  | Specify the class name passed to the outer div element  |
@@ -3172,7 +3174,6 @@ None.
 | light                | <code>let</code> | No       | <code>boolean</code>                                 | <code>false</code>                               | Set to `true` to enable the light variant               |
 | disabled             | <code>let</code> | No       | <code>boolean</code>                                 | <code>false</code>                               | Set to `true` to disable the search input               |
 | expandable           | <code>let</code> | No       | <code>boolean</code>                                 | <code>false</code>                               | Set to `true` to enable the expandable variant          |
-| type                 | <code>let</code> | No       | <code>string</code>                                  | <code>"text"</code>                              | Specify the `type` attribute of the search input        |
 | placeholder          | <code>let</code> | No       | <code>string</code>                                  | <code>"Search..."</code>                         | Specify the `placeholder` attribute of the search input |
 | autocomplete         | <code>let</code> | No       | <code>"on" &#124; "off"</code>                       | <code>"off"</code>                               | Specify the `autocomplete` attribute                    |
 | autofocus            | <code>let</code> | No       | <code>boolean</code>                                 | <code>false</code>                               | Set to `true` to auto focus the search element          |

docs/src/COMPONENT_API.json

@@ -2180,6 +2180,28 @@
       "moduleName": "CopyButton",
       "filePath": "src/CopyButton/CopyButton.svelte",
       "props": [
+        {
+          "name": "feedback",
+          "kind": "let",
+          "description": "Set the feedback text shown after clicking the button",
+          "type": "string",
+          "value": "\"Copied!\"",
+          "isFunction": false,
+          "isFunctionDeclaration": false,
+          "constant": false,
+          "reactive": false
+        },
+        {
+          "name": "feedbackTimeout",
+          "kind": "let",
+          "description": "Set the timeout duration (ms) to display feedback text",
+          "type": "number",
+          "value": "2000",
+          "isFunction": false,
+          "isFunctionDeclaration": false,
+          "constant": false,
+          "reactive": false
+        },
         {
           "name": "iconDescription",
           "kind": "let",
@@ -2216,16 +2238,12 @@
       "moduleExports": [],
       "slots": [],
       "events": [
-        { "type": "forwarded", "name": "click", "element": "Copy" },
+        { "type": "forwarded", "name": "click", "element": "button" },
-        { "type": "forwarded", "name": "animationend", "element": "Copy" },
+        { "type": "forwarded", "name": "animationend", "element": "button" },
         { "type": "dispatched", "name": "copy" }
       ],
       "typedefs": [],
-      "rest_props": { "type": "InlineComponent", "name": "Copy" },
+      "rest_props": { "type": "Element", "name": "button" }
-      "extends": {
-        "interface": "CopyProps",
-        "import": "\"../Copy/Copy.svelte\""
-      }
     },
     {
       "moduleName": "DataTable",
@@ -9221,6 +9239,17 @@
       "moduleName": "Search",
       "filePath": "src/Search/Search.svelte",
       "props": [
+        {
+          "name": "value",
+          "kind": "let",
+          "description": "Specify the value of the search input",
+          "type": "any",
+          "value": "\"\"",
+          "isFunction": false,
+          "isFunctionDeclaration": false,
+          "constant": false,
+          "reactive": true
+        },
         {
           "name": "small",
           "kind": "let",
@@ -9308,28 +9337,6 @@
           "constant": false,
           "reactive": true
         },
-        {
-          "name": "value",
-          "kind": "let",
-          "description": "Specify the value of the search input",
-          "type": "string",
-          "value": "\"\"",
-          "isFunction": false,
-          "isFunctionDeclaration": false,
-          "constant": false,
-          "reactive": true
-        },
-        {
-          "name": "type",
-          "kind": "let",
-          "description": "Specify the `type` attribute of the search input",
-          "type": "string",
-          "value": "\"text\"",
-          "isFunction": false,
-          "isFunctionDeclaration": false,
-          "constant": false,
-          "reactive": false
-        },
         {
           "name": "placeholder",
           "kind": "let",

docs/src/pages/components/Form.svx

@@ -60,3 +60,17 @@ components: ["Form", "FormGroup"]
   </FormGroup>
   <Button type="submit">Submit</Button>
 </Form>
+
+### Prevent default behavior
+
+The forwarded `submit` event is not modified. Use `e.preventDefault()` to prevent the native form submission behavior.
+
+```
+<Form on:submit={e => {
+  e.preventDefault();
+  console.log("submit", e);
+}}>
+   <Checkbox id="checkbox-0" labelText="Checkbox Label" checked />
+  <Button type="submit">Submit</Button>
+</Form>
+```

src/CodeSnippet/CodeSnippet.svelte

@@ -88,15 +88,18 @@
   /** Obtain a reference to the pre HTML element */
   export let ref = null;
 
-  import { createEventDispatcher, tick } from "svelte";
+  import { createEventDispatcher, tick, onMount } from "svelte";
   import ChevronDown16 from "../icons/ChevronDown16.svelte";
   import Button from "../Button/Button.svelte";
-  import Copy from "../Copy/Copy.svelte";
   import CopyButton from "../CopyButton/CopyButton.svelte";
   import CodeSnippetSkeleton from "./CodeSnippetSkeleton.svelte";
 
   const dispatch = createEventDispatcher();
 
+  /** @type {"fade-in" | "fade-out"} */
+  let animation = undefined;
+  let timeout = undefined;
+
   function setShowMoreLess() {
     const { height } = ref.getBoundingClientRect();
     if (height > 0) showMoreLess = ref.getBoundingClientRect().height > 255;
@@ -114,6 +117,10 @@
     if (code === undefined) setShowMoreLess();
     if (code) tick().then(setShowMoreLess);
   }
+
+  onMount(() => {
+    return () => clearTimeout(timeout);
+  });
 </script>
 
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->
@@ -144,20 +151,35 @@
       </code>
     </span>
   {:else}
-    <Copy
+    <button
+      type="button"
+      aria-live="polite"
+      class:bx--copy="{true}"
+      class:bx--btn--copy="{true}"
+      class:bx--copy-btn--animating="{animation}"
+      class:bx--copy-btn--fade-in="{animation === 'fade-in'}"
+      class:bx--copy-btn--fade-out="{animation === 'fade-out'}"
+      class:bx--snippet="{true}"
+      class:bx--snippet--inline="{type === 'inline'}"
+      class:bx--snippet--expand="{expanded}"
+      class:bx--snippet--light="{light}"
+      class:bx--snippet--wraptext="{wrapText}"
       aria-label="{copyLabel}"
-      aria-describedby="{id}"
-      feedback="{feedback}"
-      feedbackTimeout="{feedbackTimeout}"
-      class="bx--snippet {type && `bx--snippet--${type}`}
-          {type === 'inline' && 'bx--btn--copy'}
-          {expanded && 'bx--snippet--expand'}
-          {light && 'bx--snippet--light'}
-          {hideCopyButton && 'bx--snippet--no-copy'}
-          {wrapText && 'bx--snippet--wraptext'}"
       {...$$restProps}
       on:click
-      on:click="{copyCode}"
+      on:click="{() => {
+        copyCode();
+        if (animation === 'fade-in') return;
+        animation = 'fade-in';
+        timeout = setTimeout(() => {
+          animation = 'fade-out';
+        }, feedbackTimeout);
+      }}"
+      on:animationend="{({ animationName }) => {
+        if (animationName === 'hide-feedback') {
+          animation = undefined;
+        }
+      }}"
       on:mouseover
       on:mouseenter
       on:mouseleave
@@ -165,7 +187,14 @@
       <code id="{id}">
         <slot>{code}</slot>
       </code>
-    </Copy>
+      <span
+        aria-hidden="true"
+        class:bx--assistive-text="{true}"
+        class:bx--copy-btn__feedback="{true}"
+      >
+        {feedback}
+      </span>
+    </button>
   {/if}
 {:else}
   <div

src/CopyButton/CopyButton.svelte

@@ -1,5 +1,9 @@
 <script>
-  /** @extends {"../Copy/Copy.svelte"} CopyProps */
+  /** Set the feedback text shown after clicking the button */
+  export let feedback = "Copied!";
+
+  /** Set the timeout duration (ms) to display feedback text */
+  export let feedbackTimeout = 2000;
 
   /** Set the title and ARIA label for the copy button */
   export let iconDescription = "Copy to clipboard";
@@ -22,15 +26,28 @@
     }
   };
 
-  import Copy from "../Copy/Copy.svelte";
+  import { createEventDispatcher, onMount } from "svelte";
   import Copy16 from "../icons/Copy16.svelte";
-  import { createEventDispatcher } from "svelte";
 
   const dispatch = createEventDispatcher();
+
+  /** @type {"fade-in" | "fade-out"} */
+  let animation = undefined;
+  let timeout = undefined;
+
+  onMount(() => {
+    return () => clearTimeout(timeout);
+  });
 </script>
 
-<Copy
+<button
-  class="bx--copy-btn"
+  type="button"
+  aria-live="polite"
+  class:bx--copy-btn="{true}"
+  class:bx--copy="{true}"
+  class:bx--copy-btn--animating="{animation}"
+  class:bx--copy-btn--fade-in="{animation === 'fade-in'}"
+  class:bx--copy-btn--fade-out="{animation === 'fade-out'}"
   aria-label="{iconDescription}"
   title="{iconDescription}"
   {...$$restProps}
@@ -40,8 +57,26 @@
       copy(text);
       dispatch('copy');
     }
+
+    if (animation === 'fade-in') return;
+    animation = 'fade-in';
+    timeout = setTimeout(() => {
+      animation = 'fade-out';
+    }, feedbackTimeout);
   }}"
   on:animationend
+  on:animationend="{({ animationName }) => {
+    if (animationName === 'hide-feedback') {
+      animation = undefined;
+    }
+  }}"
 >
   <Copy16 class="bx--snippet__icon" />
-</Copy>
+  <span
+    aria-hidden="true"
+    class:bx--assistive-text="{true}"
+    class:bx--copy-btn__feedback="{true}"
+  >
+    {feedback}
+  </span>
+</button>

src/Form/Form.svelte

@@ -13,7 +13,7 @@
   on:mouseover
   on:mouseenter
   on:mouseleave
-  on:submit|preventDefault
+  on:submit
 >
   <slot />
 </form>

src/Search/Search.svelte

@@ -4,6 +4,12 @@
    * @event {null} collapse
    */
 
+  /**
+   * Specify the value of the search input
+   * @type {any}
+   */
+  export let value = "";
+
   /**
    * @deprecated this prop will be removed in the next major release
    * Use size="sm" instead
@@ -34,12 +40,6 @@
   /** Set to `true to expand the search input */
   export let expanded = false;
 
-  /** Specify the value of the search input */
-  export let value = "";
-
-  /** Specify the `type` attribute of the search input */
-  export let type = "text";
-
   /** Specify the `placeholder` attribute of the search input */
   export let placeholder = "Search...";
 
@@ -125,6 +125,8 @@
     <!-- svelte-ignore a11y-autofocus -->
     <input
       bind:this="{ref}"
+      bind:value
+      type="text"
       role="searchbox"
       class:bx--search-input="{true}"
       autofocus="{autofocus === true ? true : undefined}"
@@ -132,14 +134,9 @@
       disabled="{disabled}"
       id="{id}"
       placeholder="{placeholder}"
-      type="{type}"
-      value="{value}"
       {...$$restProps}
       on:change
       on:input
-      on:input="{({ target }) => {
-        value = target.value;
-      }}"
       on:focus
       on:focus="{() => {
         if (expandable) expanded = true;

src/TextArea/TextArea.svelte

@@ -94,6 +94,7 @@
     {/if}
     <textarea
       bind:this="{ref}"
+      bind:value
       aria-invalid="{invalid || undefined}"
       aria-describedby="{invalid ? errorId : undefined}"
       disabled="{disabled}"
@@ -101,7 +102,6 @@
       name="{name}"
       cols="{cols}"
       rows="{rows}"
-      value="{value ?? ''}"
       placeholder="{placeholder}"
       readonly="{readonly}"
       class:bx--text-area="{true}"
@@ -111,9 +111,6 @@
       {...$$restProps}
       on:change
       on:input
-      on:input="{({ target }) => {
-        value = target.value;
-      }}"
       on:keydown
       on:keyup
       on:focus

types/CopyButton/CopyButton.svelte.d.ts

@@ -1,8 +1,20 @@
 /// <reference types="svelte" />
 import { SvelteComponentTyped } from "svelte";
-import { CopyProps } from "../Copy/Copy.svelte";
 
-export interface CopyButtonProps extends CopyProps {
+export interface CopyButtonProps
+  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["button"]> {
+  /**
+   * Set the feedback text shown after clicking the button
+   * @default "Copied!"
+   */
+  feedback?: string;
+
+  /**
+   * Set the timeout duration (ms) to display feedback text
+   * @default 2000
+   */
+  feedbackTimeout?: number;
+
   /**
    * Set the title and ARIA label for the copy button
    * @default "Copy to clipboard"

types/Search/Search.svelte.d.ts

@@ -2,6 +2,12 @@
 import { SvelteComponentTyped } from "svelte";
 
 export interface SearchProps {
+  /**
+   * Specify the value of the search input
+   * @default ""
+   */
+  value?: any;
+
   /**
    * @default false
    */
@@ -49,18 +55,6 @@ export interface SearchProps {
    */
   expanded?: boolean;
 
-  /**
-   * Specify the value of the search input
-   * @default ""
-   */
-  value?: string;
-
-  /**
-   * Specify the `type` attribute of the search input
-   * @default "text"
-   */
-  type?: string;
-
   /**
    * Specify the `placeholder` attribute of the search input
    * @default "Search..."