Merge remote-tracking branch 'upstream/master' into fix-ComboBox-filterable

CHANGELOG.md

@@ -7,6 +7,38 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 <!-- ## Unreleased -->
 
+## [0.51.0](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.51.0) - 2021-12-30
+
+**Features**
+
+- enhance `Checkbox` to support `bind:group`
+
+## [0.50.5](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.50.5) - 2021-12-30
+
+**Fixes**
+
+- filterable `MultiSelect` should blur when pressing "Tab"
+- filterable `MultiSelect` menu should close when pressing "Escape"
+- filterable `MultiSelect` menu should open when pressing "Space"
+- `DatePicker` input should not lose focus when pressing "Enter"
+- `ToolbarSearch` should expand if `value` is programmatically set
+
+## [0.50.4](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.50.4) - 2021-12-30
+
+**Fixes**
+
+- pressing "Escape" in a `DatePicker` should not propagate past the open calendar
+- prevent menu icon in filterable `MultiSelect` from triggering twice
+
+## [0.50.3](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.50.3) - 2021-12-28
+
+**Fixes**
+
+- do not dispatch "click", "click:row" `DataTable` events when selecting a checkbox or radio button
+- render "labelText" slot if `labelText` prop or `$$slots.labelText` is truthy
+- prevent default behavior in `Tabs` mobile variant when clicking a menu option
+- coalesce nullish values to `""` for `TextInput`, `PasswordInput`, `TextArea`
+
 ## [0.50.2](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.50.2) - 2021-11-27
 
 **Fixes**

COMPONENT_INDEX.md

@@ -1,6 +1,6 @@
 # Component Index
 
-> 172 components exported from carbon-components-svelte@0.50.2.
+> 172 components exported from carbon-components-svelte@0.51.0.
 
 ## Components
 
@@ -462,8 +462,9 @@ 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      |
+| group         | <code>let</code> | Yes      | <code>any[]</code>                        | <code>[]</code>                                  | Specify the bound group                           |
 | checked       | <code>let</code> | Yes      | <code>boolean</code>                      | <code>false</code>                               | Specify whether the checkbox is checked           |
-| value         | <code>let</code> | No       | <code>string</code>                       | <code>""</code>                                  | Specify the value of the checkbox                 |
+| value         | <code>let</code> | No       | <code>any</code>                          | <code>""</code>                                  | Specify the value of the checkbox                 |
 | indeterminate | <code>let</code> | No       | <code>boolean</code>                      | <code>false</code>                               | Specify whether the checkbox is indeterminate     |
 | skeleton      | <code>let</code> | No       | <code>boolean</code>                      | <code>false</code>                               | Set to `true` to display the skeleton state       |
 | readonly      | <code>let</code> | No       | <code>boolean</code>                      | <code>false</code>                               | Set to `true` for the checkbox to be read-only    |
@@ -2411,7 +2412,7 @@ export interface MultiSelectItem {
 ### Props
 
 | Prop name         | Kind             | Reactive | Type                                                                                           | Default value                                                                              | Description                                                                           |
-| :---------------- | :--------------- | :------- | :--------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------- |
+| :---------------- | :--------------- | :------- | :--------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------- |
 | selectionRef      | <code>let</code> | Yes      | <code>null &#124; HTMLDivElement</code>                                                        | <code>null</code>                                                                          | Obtain a reference to the selection element                                           |
 | fieldRef          | <code>let</code> | Yes      | <code>null &#124; HTMLDivElement</code>                                                        | <code>null</code>                                                                          | Obtain a reference to the field box element                                           |
 | multiSelectRef    | <code>let</code> | Yes      | <code>null &#124; HTMLDivElement</code>                                                        | <code>null</code>                                                                          | Obtain a reference to the outer div element                                           |
@@ -2427,7 +2428,7 @@ export interface MultiSelectItem {
 | selectionFeedback | <code>let</code> | No       | <code>"top" &#124; "fixed" &#124; "top-after-reopen"</code>                                    | <code>"top-after-reopen"</code>                                                            | Specify the selection feedback after selecting items                                  |
 | disabled          | <code>let</code> | No       | <code>boolean</code>                                                                           | <code>false</code>                                                                         | Set to `true` to disable the dropdown                                                 |
 | filterable        | <code>let</code> | No       | <code>boolean</code>                                                                           | <code>false</code>                                                                         | Set to `true` to filter items                                                         |
-| filterItem        | <code>let</code> | No       | <code>(item: MultiSelectItem, value: string) => string</code>                                  | <code>(item, value) => item.text.toLowerCase().includes(value.toLowerCase())</code> | Override the filtering logic<br />The default filtering is an exact string comparison |
+| filterItem        | <code>let</code> | No       | <code>(item: MultiSelectItem, value: string) => string</code>                                  | <code>(item, value) => item.text.toLowerCase().includes(value.trim().toLowerCase())</code> | Override the filtering logic<br />The default filtering is an exact string comparison |
 | light             | <code>let</code> | No       | <code>boolean</code>                                                                           | <code>false</code>                                                                         | Set to `true` to enable the light variant                                             |
 | locale            | <code>let</code> | No       | <code>string</code>                                                                            | <code>"en"</code>                                                                          | Specify the locale                                                                    |
 | placeholder       | <code>let</code> | No       | <code>string</code>                                                                            | <code>""</code>                                                                            | Specify the placeholder text                                                          |

docs/package.json

@@ -2,33 +2,35 @@
   "private": true,
   "scripts": {
     "dev": "run-p dev:*",
-    "dev:routify": "NODE_ENV=development routify run",
+    "dev:routify": "cross-env NODE_ENV=development routify run",
-    "dev:svite": "svite",
+    "dev:svite": "vite dev",
     "build": "run-s build:*",
     "build:routify": "routify run -b",
-    "build:svite": "svite build"
+    "build:svite": "vite build"
   },
   "devDependencies": {
     "@sveltech/routify": "^1.9.9",
+    "@sveltejs/vite-plugin-svelte": "^1.0.0-next.33",
     "autoprefixer": "^10.2.3",
     "carbon-components": "10.48.0",
     "carbon-components-10.47": "npm:carbon-components@10.47",
     "carbon-components-svelte": "../",
-    "carbon-icons-svelte": "^10.38.0",
+    "carbon-icons-svelte": "^10.44.3",
     "clipboard-copy": "^4.0.1",
-    "mdsvex": "^0.8.8",
+    "cross-env": "^7.0.3",
+    "mdsvex": "^0.9.8",
     "npm-run-all": "^4.1.5",
     "postcss": "^8.2.4",
-    "prettier": "^2.1.2",
+    "prettier": "^2.5.1",
-    "prettier-plugin-svelte": "^1.4.1",
+    "prettier-plugin-svelte": "^2.5.1",
     "prism-svelte": "^0.4.7",
     "prismjs": "^1.21.0",
     "remark-slug": "^6.0.0",
     "sass": "^1.42.1",
-    "svelte": "3.29.0",
+    "svelte": "^3.44.3",
     "svelte-hmr": "0.11.1",
     "svelte-preprocess": "^4.3.2",
-    "svite": "0.7.2"
+    "vite": "^2.7.10"
   },
   "routify": {
     "routifyDir": ".routify",

docs/src/App.svelte

@@ -4,87 +4,3 @@
 </script>
 
 <Router routes="{routes}" />
-
-<style lang="scss" global>
-  // This is a recipe for dynamic, client-side theming
-  // All Carbon themes are included (White, Gray 10, Gray 90, Gray 100)
-
-  $feature-flags: (
-    // Custom CSS properties must be enabled to dynamically switch themes
-    enable-css-custom-properties: true,
-    ui-shell: true,
-    grid-columns-16: true
-  );
-
-  $css--font-face: true;
-  $css--helpers: true;
-  $css--body: true;
-  $css--use-layer: true;
-  $css--reset: true;
-  $css--default-type: true;
-  $css--plex: true;
-
-  // Use all Carbon themes
-  @import "carbon-components/scss/globals/scss/vendor/@carbon/themes/scss";
-  @import "carbon-components/scss/globals/scss/component-tokens";
-  @import "carbon-components/src/components/tag/tag";
-  @import "carbon-components/src/components/notification/inline-notification";
-  @import "carbon-components/src/components/notification/toast-notification";
-  @import "carbon-components-10.47/src/components/popover/popover";
-
-  // The default theme is "white" (White)
-  :root {
-    @include carbon--theme($carbon--theme--white, true) {
-      @include emit-component-tokens($tag-colors);
-      @include emit-component-tokens($notification-colors);
-    }
-  }
-
-  // Set the <html> theme attribute to "g10" to use the Gray 10 theme
-  // <html theme="g10">
-  :root[theme="g10"] {
-    @include carbon--theme($carbon--theme--g10, true) {
-      @include emit-component-tokens($tag-colors);
-      @include emit-component-tokens($notification-colors);
-    }
-  }
-
-  // Set the <html> theme attribute to "g80" to use the Gray 90 theme
-  // <html theme="g80">
-  :root[theme="g80"] {
-    @include carbon--theme($carbon--theme--g80, true) {
-      @include emit-component-tokens($tag-colors);
-      @include emit-component-tokens($notification-colors);
-    }
-  }
-
-  // Set the <html> theme attribute to "g90" to use the Gray 90 theme
-  // <html theme="g90">
-  :root[theme="g90"] {
-    @include carbon--theme($carbon--theme--g90, true) {
-      @include emit-component-tokens($tag-colors);
-      @include emit-component-tokens($notification-colors);
-    }
-  }
-
-  // Set the <html> theme attribute to "g100" to use the Gray 100 theme
-  // <html theme="g100">
-  :root[theme="g100"] {
-    @include carbon--theme($carbon--theme--g100, true) {
-      @include emit-component-tokens($tag-colors);
-      @include emit-component-tokens($notification-colors);
-    }
-  }
-
-  // Programmatically update the theme in JavaScript:
-  // document.documentElement.setAttribute("theme", "g90");
-
-  @import "carbon-components/scss/globals/scss/_css--reset";
-  @import "carbon-components/scss/globals/scss/_css--font-face";
-  @import "carbon-components/scss/globals/scss/_css--helpers";
-  @import "carbon-components/scss/globals/scss/_css--body";
-  @import "carbon-components/scss/globals/grid/grid";
-
-  // Import all component styles
-  @import "carbon-components/scss/globals/scss/styles";
-</style>

docs/src/COMPONENT_API.json

@@ -712,7 +712,7 @@
           "name": "value",
           "kind": "let",
           "description": "Specify the value of the checkbox",
-          "type": "string",
+          "type": "any",
           "value": "\"\"",
           "isFunction": false,
           "isFunctionDeclaration": false,
@@ -730,6 +730,17 @@
           "constant": false,
           "reactive": true
         },
+        {
+          "name": "group",
+          "kind": "let",
+          "description": "Specify the bound group",
+          "type": "any[]",
+          "value": "[]",
+          "isFunction": false,
+          "isFunctionDeclaration": false,
+          "constant": false,
+          "reactive": true
+        },
         {
           "name": "indeterminate",
           "kind": "let",
@@ -6472,7 +6483,7 @@
           "kind": "let",
           "description": "Override the filtering logic\nThe default filtering is an exact string comparison",
           "type": "(item: MultiSelectItem, value: string) => string",
-          "value": "(item, value) =>     item.text.toLowerCase().includes(value.toLowerCase())",
+          "value": "(item, value) =>     item.text.toLowerCase().includes(value.trim().toLowerCase())",
           "isFunction": true,
           "isFunctionDeclaration": false,
           "constant": false,

docs/src/index.js

@@ -1,4 +1,5 @@
 import App from "./App.svelte";
+import "../../css/all.scss";
 
 const app = new App({ target: document.body });
 

docs/src/pages/_layout.svelte

@@ -48,9 +48,9 @@
     expandedByDefault="{true}"
     bind:isSideNavOpen
   >
-    <div slot="skip-to-content">
+    <svelte:fragment slot="skip-to-content">
       <SkipToContent />
-    </div>
+    </svelte:fragment>
 
     <span slot="platform" class="platform-name">
       Carbon Components Svelte

docs/src/pages/components/Accordion.svx

@@ -46,25 +46,25 @@ See the [ExpandableAccordion recipe](/recipes/ExpandableAccordion) for a togglea
 
 <Accordion>
   <AccordionItem>
-    <div slot="title">
+    <svelte:fragment slot="title">
       <h5>Natural Language Classifier</h5>
       <div>AI / Machine Learning</div>
-    </div>
+    </svelte:fragment>
    <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>
   </AccordionItem>
   <AccordionItem>
-  <div slot="title">
+  <svelte:fragment slot="title">
       <h5>Natural Language Understanding</h5>
       <div>AI / Machine Learning</div>
-    </div>
+    </svelte:fragment>
     <p>Analyze text to extract meta-data from content such as concepts, entities, emotion, relations, sentiment and more.</p>
   </AccordionItem>
   <AccordionItem>
-  <div slot="title">
+  <svelte:fragment slot="title">
       <h5>Language Translator</h5>
       <div>AI / Machine Learning</div>
-    </div>
+    </svelte:fragment>
     <p>Translate text, documents, and websites from one language to another. Create industry or region-specific translations via the service's customization capability.</p>
   </AccordionItem>
 </Accordion>

docs/src/pages/components/Checkbox.svx

@@ -23,6 +23,12 @@
 
 <Checkbox labelText="Label text" disabled />
 
+### Multiple
+
+Bind a selection [group](https://svelte.dev/tutorial/group-inputs) to multiple checkboxes.
+
+<FileSource src="/framed/Checkbox/MultipleCheckboxes" />
+
 ### Skeleton
 
 <Checkbox skeleton />

docs/src/pages/components/DataTable.svx

@@ -131,20 +131,20 @@ The slot name for the table header cells is `"cell-header"`.
     },
   ]}"
 >
- <span slot="cell-header" let:header>
+ <svelte:fragment slot="cell-header" let:header>
     {#if header.key === 'port'}
       {header.value} (network)
     {:else}
       {header.value}
     {/if}
-  </span>
+  </svelte:fragment>
-  <span slot="cell" let:row let:cell>
+  <svelte:fragment slot="cell" let:row let:cell>
     {#if cell.key === 'rule' && cell.value === 'Round robin'}
       <Link icon={Launch16} href="https://en.wikipedia.org/wiki/Round-robin_DNS" target="_blank">{cell.value}</Link>
     {:else}
       {cell.value}
     {/if}
-  </span>
+  </svelte:fragment>
 </DataTable>
 
 ### With title, description
@@ -1018,11 +1018,11 @@ In the following example, each row in the sortable data table has an overflow me
     },
   ]}"
 >
-  <div slot="expanded-row" let:row>
+  <svelte:fragment slot="expanded-row" let:row>
     <pre>
       {JSON.stringify(row, null, 2)}
     </pre>
-  </div>
+  </svelte:fragment>
 </DataTable>
 
 ### Non-expandable rows
@@ -1085,11 +1085,11 @@ Use `nonExpandableRowIds` to specify the ids for rows that should not be expanda
     },
   ]}"
 >
-  <div slot="expanded-row" let:row>
+  <svelte:fragment slot="expanded-row" let:row>
     <pre>
       {JSON.stringify(row, null, 2)}
     </pre>
-  </div>
+  </svelte:fragment>
 </DataTable>
 
 ### Expandable (short size)
@@ -1146,11 +1146,11 @@ Use `nonExpandableRowIds` to specify the ids for rows that should not be expanda
     },
   ]}"
 >
-  <div slot="expanded-row" let:row>
+  <svelte:fragment slot="expanded-row" let:row>
     <pre>
       {JSON.stringify(row, null, 2)}
     </pre>
-  </div>
+  </svelte:fragment>
 </DataTable>
 
 ### Expandable (tall size)
@@ -1207,11 +1207,11 @@ Use `nonExpandableRowIds` to specify the ids for rows that should not be expanda
     },
   ]}"
 >
-  <div slot="expanded-row" let:row>
+  <svelte:fragment slot="expanded-row" let:row>
     <pre>
       {JSON.stringify(row, null, 2)}
     </pre>
-  </div>
+  </svelte:fragment>
 </DataTable>
 
 ### Batch expansion
@@ -1268,11 +1268,11 @@ Use `nonExpandableRowIds` to specify the ids for rows that should not be expanda
     },
   ]}"
 >
-  <div slot="expanded-row" let:row>
+  <svelte:fragment slot="expanded-row" let:row>
     <pre>
       {JSON.stringify(row, null, 2)}
     </pre>
-  </div>
+  </svelte:fragment>
 </DataTable>
 
 ### Skeleton

docs/src/pages/components/DatePicker.svx

@@ -71,6 +71,12 @@ components: ["DatePicker", "DatePickerInput", "DatePickerSkeleton"]
 
 ### DatePicker in a modal
 
+Use `flatpickrProps` to set `static: true` for the calendar to be positioned relative to the input element.
+
+This is needed when placing a `DatePicker` inside of a `Modal` component.
+
+Refer to [flatpickr options](https://flatpickr.js.org/options/) for a full list of config options.
+
 <FileSource src="/framed/DatePicker/DatePickerModal" />
 
 ### Skeleton

docs/src/pages/components/ImageLoader.svx

@@ -16,12 +16,12 @@ This utility component uses the [Image API](https://developer.mozilla.org/en-US/
 Use the "loading" and "error" named slots to render an element when the image is loading or has an error.
 
 <ImageLoader src="https://upload.wikimedia.org/wikipedia/commons/5/51/IBM_logo.svg">
-    <div slot="loading">
+    <svelte:fragment slot="loading">
         <InlineLoading />
-    </div>
+    </svelte:fragment>
-    <div slot="error">
+    <svelte:fragment slot="error">
         An error occurred.
-    </div>
+    </svelte:fragment>
 </ImageLoader>
 
 ### With aspect ratio

docs/src/pages/components/InlineNotification.svx

@@ -25,9 +25,9 @@ source: Notification/InlineNotification.svelte
 ### With actions
 
 <InlineNotification kind="warning" title="Scheduled maintenance:" subtitle="Maintenance will last 2-4 hours.">
-  <div slot="actions">
+  <svelte:fragment slot="actions">
     <NotificationActionButton>Learn more</NotificationActionButton>
-  </div>
+  </svelte:fragment>
 </InlineNotification>
 
 ### Notification variants

docs/src/pages/components/Tabs.svx

@@ -13,11 +13,11 @@ components: ["Tabs", "Tab", "TabContent", "TabsSkeleton"]
   <Tab label="Tab label 1" />
   <Tab label="Tab label 2" />
   <Tab label="Tab label 3" />
-  <div slot="content">
+  <svelte:fragment slot="content">
     <TabContent>Content 1</TabContent>
     <TabContent>Content 2</TabContent>
     <TabContent>Content 3</TabContent>
-  </div>
+  </svelte:fragment>
 </Tabs>
 
 ### Auto width
@@ -30,11 +30,11 @@ Set `autoWidth` to `true` for tabs to have an automatically set width.
   <Tab label="Tab label 1" />
   <Tab label="Tab label 2" />
   <Tab label="Tab label 3" />
-  <div slot="content">
+  <svelte:fragment slot="content">
     <TabContent>Content 1</TabContent>
     <TabContent>Content 2</TabContent>
     <TabContent>Content 3</TabContent>
-  </div>
+  </svelte:fragment>
 </Tabs>
 
 ### Reactive example
@@ -47,11 +47,11 @@ Set `autoWidth` to `true` for tabs to have an automatically set width.
   <Tab label="Tab label 1" />
   <Tab label="Tab label 2" />
   <Tab label="Tab label 3" />
-  <div slot="content">
+  <svelte:fragment slot="content">
     <TabContent>Content 1</TabContent>
     <TabContent>Content 2</TabContent>
     <TabContent>Content 3</TabContent>
-  </div>
+  </svelte:fragment>
 </Tabs>
 
 ### Skeleton (default)

docs/src/pages/framed/Checkbox/MultipleCheckboxes.svelte

@@ -0,0 +1,15 @@
+<script>
+  import { Checkbox } from "carbon-components-svelte";
+
+  let options = ["Apple", "Banana", "Coconut"];
+  let selection = options.slice(0, 2);
+</script>
+
+{#each options as option}
+  <Checkbox bind:group="{selection}" labelText="{option}" value="{option}" />
+{/each}
+
+<div style="margin: var(--cds-layout-01) 0">
+  Selected options:
+  <strong>{selection.join(", ")}</strong>
+</div>

docs/src/pages/framed/DataTable/DataTableAppendColumns.svelte

@@ -23,7 +23,7 @@
 </script>
 
 <DataTable sortable headers="{headers}" rows="{rows}">
-  <span slot="cell" let:cell>
+  <svelte:fragment slot="cell" let:cell>
     {#if cell.key === "overflow"}
       <OverflowMenu flipped>
         <OverflowMenuItem text="Restart" />
@@ -34,5 +34,5 @@
         <OverflowMenuItem danger text="Stop" />
       </OverflowMenu>
     {:else}{cell.value}{/if}
-  </span>
+  </svelte:fragment>
 </DataTable>

docs/src/pages/framed/DataTable/DataTableNonExpandableRows.svelte

@@ -60,9 +60,9 @@
   ]}"
   rows="{rows}"
 >
-  <div slot="expanded-row" let:row>
+  <svelte:fragment slot="expanded-row" let:row>
     <pre>
       {JSON.stringify(row, null, 2)}
     </pre>
-  </div>
+  </svelte:fragment>
 </DataTable>

docs/src/pages/framed/DatePicker/DatePickerModal.svelte

@@ -2,7 +2,12 @@
   import { Modal, DatePicker, DatePickerInput } from "carbon-components-svelte";
 </script>
 
-<Modal open modalHeading="DatePicker">
+<Modal
+  open
+  modalHeading="Meeting date"
+  primaryButtonText="Confirm"
+  secondaryButtonText="Cancel"
+>
   <DatePicker datePickerType="single" flatpickrProps="{{ static: true }}">
     <DatePickerInput labelText="Meeting date" placeholder="mm/dd/yyyy" />
   </DatePicker>

docs/src/pages/framed/ImageLoader/ProgrammaticImageLoader.svelte

@@ -18,9 +18,9 @@
 </Button>
 
 <ImageLoader bind:this="{imageLoader}" bind:error fadeIn src="{src}">
-  <div slot="error">
+  <svelte:fragment slot="error">
     <Button kind="ghost" on:click="{() => imageLoader.loadImage(src)}">
       Error. Try again
     </Button>
-  </div>
+  </svelte:fragment>
 </ImageLoader>

docs/src/pages/framed/Tabs/TabsReactive.svelte

@@ -8,11 +8,11 @@
   <Tab label="Tab label 1" />
   <Tab label="Tab label 2" />
   <Tab label="Tab label 3" />
-  <div slot="content">
+  <svelte:fragment slot="content">
     <TabContent>Content 1</TabContent>
     <TabContent>Content 2</TabContent>
     <TabContent>Content 3</TabContent>
-  </div>
+  </svelte:fragment>
 </Tabs>
 
 <div>

docs/src/pages/framed/UIShell/Header.svelte

@@ -15,10 +15,9 @@
 </script>
 
 <Header company="IBM" platformName="Carbon Svelte" bind:isSideNavOpen>
-  <div slot="skip-to-content">
+  <svelte:fragment slot="skip-to-content">
     <SkipToContent />
-  </div>
+  </svelte:fragment>
-
   <HeaderNav>
     <HeaderNavItem href="/" text="Link 1" />
     <HeaderNavItem href="/" text="Link 2" />

docs/src/pages/framed/UIShell/HeaderNav.svelte

@@ -21,10 +21,9 @@
 </script>
 
 <Header company="IBM" platformName="Carbon Svelte" bind:isSideNavOpen>
-  <div slot="skip-to-content">
+  <svelte:fragment slot="skip-to-content">
     <SkipToContent />
-  </div>
+  </svelte:fragment>
-
   <HeaderNav>
     <HeaderNavItem href="/" text="Link 1" />
     <HeaderNavItem href="/" text="Link 2" />

docs/src/pages/framed/UIShell/HeaderNavRail.svelte

@@ -22,10 +22,9 @@
 </script>
 
 <Header company="IBM" platformName="Carbon Svelte" bind:isSideNavOpen>
-  <div slot="skip-to-content">
+  <svelte:fragment slot="skip-to-content">
     <SkipToContent />
-  </div>
+  </svelte:fragment>
-
   <HeaderNav>
     <HeaderNavItem href="/" text="Link 1" />
     <HeaderNavItem href="/" text="Link 2" />

docs/src/pages/framed/UIShell/HeaderSearch.svelte

@@ -66,9 +66,9 @@
 </script>
 
 <Header company="IBM" platformName="Carbon Svelte">
-  <div slot="skip-to-content">
+  <svelte:fragment slot="skip-to-content">
     <SkipToContent />
-  </div>
+  </svelte:fragment>
   <HeaderUtilities>
     <HeaderSearch
       bind:ref

docs/src/pages/framed/UIShell/HeaderSwitcher.svelte

@@ -41,9 +41,9 @@
 </script>
 
 <Header company="IBM" platformName="Carbon Svelte" bind:isSideNavOpen>
-  <div slot="skip-to-content">
+  <svelte:fragment slot="skip-to-content">
     <SkipToContent />
-  </div>
+  </svelte:fragment>
   <HeaderUtilities>
     <HeaderAction bind:isOpen transition="{transitions[selected].value}">
       <HeaderPanelLinks>

docs/src/pages/framed/UIShell/HeaderUtilities.svelte

@@ -27,9 +27,9 @@
 </script>
 
 <Header company="IBM" platformName="Carbon Svelte" bind:isSideNavOpen>
-  <div slot="skip-to-content">
+  <svelte:fragment slot="skip-to-content">
     <SkipToContent />
-  </div>
+  </svelte:fragment>
   <HeaderUtilities>
     <HeaderGlobalAction aria-label="Settings" icon="{SettingsAdjust20}" />
     <HeaderAction

docs/src/pages/framed/UIShell/PersistedHamburgerMenu.svelte

@@ -25,10 +25,9 @@
   platformName="Carbon Svelte"
   bind:isSideNavOpen
 >
-  <div slot="skip-to-content">
+  <svelte:fragment slot="skip-to-content">
     <SkipToContent />
-  </div>
+  </svelte:fragment>
-
   <HeaderNav>
     <HeaderNavItem href="/" text="Link 1" />
     <HeaderNavItem href="/" text="Link 2" />

docs/src/pages/index.svelte

@@ -23,6 +23,7 @@
 
   const installYarn = "yarn add -D carbon-components-svelte";
   const installNpm = "npm i -D carbon-components-svelte";
+  const installPnpm = "pnpm i -D carbon-components-svelte";
   const themes = {
     white: "White",
     g10: "Gray 10",
@@ -98,6 +99,10 @@
         <Row noGutter>
           <CodeSnippet code="{installNpm}" />
         </Row>
+        <h4>Using pnpm:</h4>
+        <Row noGutter>
+          <CodeSnippet code="{installPnpm}" />
+        </Row>
       </Column>
     </Row>
     <Row style="margin-bottom: var(--cds-layout-04)">
@@ -126,7 +131,7 @@
           <Tab label="CSS StyleSheet" />
           <Tab label="CDN" />
           <Tab label="SCSS" />
-          <div slot="content">
+          <svelte:fragment slot="content">
             <TabContent>
               <p>
                 This library ships with six pre-compiled CSS StyleSheets built
@@ -194,7 +199,7 @@
                 for documentation.
               </p>
             </TabContent>
-          </div>
+          </svelte:fragment>
         </Tabs>
       </Column>
     </Row>

docs/svelte.config.js

@@ -67,8 +67,7 @@ function plugin() {
       const scriptBlock = createImports(node.value);
       const formattedCode = format(scriptBlock + node.value, {
         parser: "svelte",
-        svelteBracketNewLine: true,
+        svelteSortOrder: "scripts-markup-styles-options",
-        svelteSortOrder: "scripts-markup-styles",
       });
       const highlightedCode = Prism.highlight(
         formattedCode,
@@ -100,7 +99,6 @@ function plugin() {
       );
       const formattedCode = format(sourceCode, {
         parser: "svelte",
-        svelteBracketNewLine: true,
       });
       const highlightedCode = Prism.highlight(
         formattedCode,

docs/vite.config.js

@@ -1,6 +1,10 @@
-module.exports = {
+import { defineConfig } from "vite";
+import { svelte } from "@sveltejs/vite-plugin-svelte";
+
+export default defineConfig({
+  plugins: [svelte()],
   optimizeDeps: {
     include: ["clipboard-copy", "flatpickr/dist/plugins/rangePlugin"],
     exclude: ["@sveltech/routify"],
   },
-};
+});

package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-components-svelte",
-  "version": "0.50.2",
+  "version": "0.51.0",
   "license": "Apache-2.0",
   "description": "Svelte implementation of the Carbon Design System",
   "svelte": "./src/index.js",
@@ -35,14 +35,14 @@
     "lint-staged": "^10.5.3",
     "npm-run-all": "^4.1.5",
     "postcss": "^8.2.4",
-    "prettier": "^2.2.1",
+    "prettier": "^2.5.1",
-    "prettier-plugin-svelte": "^2.1.5",
+    "prettier-plugin-svelte": "^2.5.1",
     "rollup": "^2.38.4",
     "rollup-plugin-svelte": "^7.1.0",
     "rollup-plugin-terser": "^7.0.2",
     "sass": "^1.42.1",
     "sveld": "^0.10.2",
-    "svelte": "^3.40.1",
+    "svelte": "^3.44.3",
     "svelte-check": "^1.1.32",
     "typescript": "^4.1.3"
   },
@@ -57,8 +57,7 @@
     ]
   },
   "prettier": {
-    "svelteStrictMode": true,
+    "svelteStrictMode": true
-    "svelteBracketNewLine": true
   },
   "repository": {
     "type": "git",

preprocess/api.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.50.2",
+  "version": "0.51.0",
   "components": {
     "Accordion": {
       "path": "carbon-components-svelte/src/Accordion/Accordion.svelte"

src/Checkbox/Checkbox.svelte

@@ -3,12 +3,21 @@
    * @event {boolean} check
    */
 
-  /** Specify the value of the checkbox */
+  /**
+   * Specify the value of the checkbox
+   * @type {any}
+   */
   export let value = "";
 
   /** Specify whether the checkbox is checked */
   export let checked = false;
 
+  /**
+   * Specify the bound group
+   * @type {any[]}
+   */
+  export let group = [];
+
   /** Specify whether the checkbox is indeterminate */
   export let indeterminate = false;
 
@@ -73,7 +82,7 @@
       bind:this="{ref}"
       type="checkbox"
       value="{value}"
-      checked="{checked}"
+      checked="{checked || group.includes(value)}"
       disabled="{disabled}"
       id="{id}"
       indeterminate="{indeterminate}"
@@ -83,6 +92,9 @@
       on:change
       on:change="{() => {
         checked = !checked;
+        group = group.includes(value)
+          ? group.filter((_value) => _value !== value)
+          : [...group, value];
       }}"
       on:blur
     />

src/DataTable/DataTable.svelte

@@ -337,10 +337,11 @@
             ? 'bx--expandable-row--hover'
             : ''}"
           on:click="{({ target }) => {
-            // forgo "click", "click:row" events if target resembles an overflow menu
+            // forgo "click", "click:row" events if target
+            // resembles an overflow menu, a checkbox, or radio button
             if (
               [...target.classList].some((name) =>
-                /^bx--overflow-menu/.test(name)
+                /^bx--(overflow-menu|checkbox|radio-button)/.test(name)
               )
             ) {
               return;

src/DataTable/ToolbarSearch.svelte

@@ -35,6 +35,7 @@
     ref.focus();
   }
 
+  $: expanded = !!value.length;
   $: classes = [
     expanded && "bx--toolbar-search-container-active",
     persistent

src/DatePicker/DatePicker.svelte

@@ -234,6 +234,20 @@
       {datePickerType === 'range' &&
       $labelTextEmpty &&
       'bx--date-picker--nolabel'}"
+    on:keydown="{(e) => {
+      if (calendar?.isOpen && e.key === 'Escape') {
+        e.stopPropagation();
+        calendar.close();
+      }
+
+      if (
+        $hasCalendar &&
+        /INPUT/.test(document.activeElement?.tagName) &&
+        e.key === 'Enter'
+      ) {
+        e.stopPropagation();
+      }
+    }}"
   >
     <slot />
   </div>

src/DatePicker/DatePickerInput.svelte

@@ -82,7 +82,7 @@
   class:bx--date-picker-container="{true}"
   class:bx--date-picker--nolabel="{!labelText}"
 >
-  {#if labelText}
+  {#if labelText || $$slots.labelText}
     <label
       for="{id}"
       class:bx--label="{true}"

src/MultiSelect/MultiSelect.svelte

@@ -64,7 +64,7 @@
    * @type {(item: MultiSelectItem, value: string) => string}
    */
   export let filterItem = (item, value) =>
-    item.text.toLowerCase().includes(value.toLowerCase());
+    item.text.toLowerCase().includes(value.trim().toLowerCase());
 
   /** Set to `true` to open the dropdown */
   export let open = false;
@@ -412,10 +412,15 @@
               }
             } else if (key === 'Tab') {
               open = false;
+              inputRef.blur();
             } else if (key === 'ArrowDown') {
               change(1);
             } else if (key === 'ArrowUp') {
               change(-1);
+            } else if (key === 'Escape') {
+              open = false;
+            } else if (key === ' ') {
+              if (!open) open = true;
             }
           }}"
           on:keyup
@@ -454,6 +459,7 @@
           />
         {/if}
         <ListBoxMenuIcon
+          style="pointer-events: {open ? 'auto' : 'none'}"
           on:click="{(e) => {
             e.stopPropagation();
             open = !open;

src/Tabs/Tabs.svelte

@@ -130,8 +130,8 @@
       tabindex="-1"
       class:bx--tabs-trigger-text="{true}"
       href="{triggerHref}"
-      on:click
+      on:click|preventDefault
-      on:click="{() => {
+      on:click|preventDefault|stopPropagation="{() => {
         dropdownHidden = !dropdownHidden;
       }}"
     >

src/TextArea/TextArea.svelte

@@ -57,7 +57,7 @@
   on:mouseleave
   class:bx--form-item="{true}"
 >
-  {#if labelText && !hideLabel}
+  {#if (labelText || $$slots.labelText) && !hideLabel}
     <label
       for="{id}"
       class:bx--label="{true}"
@@ -85,7 +85,7 @@
       name="{name}"
       cols="{cols}"
       rows="{rows}"
-      value="{value}"
+      value="{value ?? ''}"
       placeholder="{placeholder}"
       class:bx--text-area="{true}"
       class:bx--text-area--light="{light}"

src/TextInput/PasswordInput.svelte

@@ -170,7 +170,7 @@
         name="{name}"
         placeholder="{placeholder}"
         type="{type}"
-        value="{value}"
+        value="{value ?? ''}"
         disabled="{disabled}"
         class:bx--text-input="{true}"
         class:bx--password-input="{true}"

src/TextInput/TextInput.svelte

@@ -163,7 +163,7 @@
         name="{name}"
         placeholder="{placeholder}"
         type="{type}"
-        value="{value}"
+        value="{value ?? ''}"
         required="{required}"
         readonly="{readonly}"
         class:bx--text-input="{true}"

src/TimePicker/TimePicker.svelte

@@ -74,7 +74,7 @@
     class:bx--select--light="{light}"
   >
     <div class:bx--time-picker__input="{true}">
-      {#if labelText}
+      {#if labelText || $$slots.labelText}
         <label
           for="{id}"
           class:bx--label="{true}"

src/TimePicker/TimePickerSelect.svelte

@@ -54,7 +54,7 @@
   on:mouseenter
   on:mouseleave
 >
-  {#if labelText}
+  {#if labelText || $$slots.labelText}
     <label
       for="{id}"
       class:bx--label="{true}"

src/Toggle/ToggleSkeleton.svelte

@@ -36,7 +36,7 @@
     class:bx--toggle__label="{true}"
     class:bx--skeleton="{true}"
   >
-    {#if labelText}
+    {#if labelText || $$slots.labelText}
       <span class:bx--toggle__label-text="{true}">
         <slot name="labelText">
           {labelText}

types/Checkbox/Checkbox.svelte.d.ts

@@ -6,7 +6,7 @@ export interface CheckboxProps {
    * Specify the value of the checkbox
    * @default ""
    */
-  value?: string;
+  value?: any;
 
   /**
    * Specify whether the checkbox is checked
@@ -14,6 +14,12 @@ export interface CheckboxProps {
    */
   checked?: boolean;
 
+  /**
+   * Specify the bound group
+   * @default []
+   */
+  group?: any[];
+
   /**
    * Specify whether the checkbox is indeterminate
    * @default false

types/MultiSelect/MultiSelect.svelte.d.ts

@@ -74,7 +74,7 @@ export interface MultiSelectProps
   /**
    * Override the filtering logic
    * The default filtering is an exact string comparison
-   * @default (item, value) => item.text.toLowerCase().includes(value.toLowerCase())
+   * @default (item, value) => item.text.toLowerCase().includes(value.trim().toLowerCase())
    */
   filterItem?: (item: MultiSelectItem, value: string) => string;
 

yarn.lock

@@ -1801,21 +1801,21 @@ postcss@^8.2.4:
     nanoid "^3.1.20"
     source-map "^0.6.1"
 
-prettier-plugin-svelte@^2.1.5:
+prettier-plugin-svelte@^2.5.1:
-  version "2.1.5"
+  version "2.5.1"
-  resolved "https://registry.yarnpkg.com/prettier-plugin-svelte/-/prettier-plugin-svelte-2.1.5.tgz#cb1df2bffafa0562f05e02c6e9373806ef51ebb1"
+  resolved "https://registry.yarnpkg.com/prettier-plugin-svelte/-/prettier-plugin-svelte-2.5.1.tgz#6c2f5e7fbe2aa208b340b75edc4fdfda33fb254c"
-  integrity sha512-7ySuC/n0Rk8v6GrzoruojfLYde6ncjeFCAA65Dm+fXrK2Mgc3FlvzXMPpm//P3LgfEoc3zMEG/xog1YeoNhdSQ==
+  integrity sha512-IhZUcqr7Bg4LY15d87t9lDr7EyC0IPehkzH5ya5igG8zYwf3UYaYDFnVW2mckREaZyLREcH9YOouesmt4f5Ozg==
-
-prettier@^2.2.1:
-  version "2.2.1"
-  resolved "https://registry.npmjs.org/prettier/-/prettier-2.2.1.tgz#795a1a78dd52f073da0cd42b21f9c91381923ff5"
-  integrity sha512-PqyhM2yCjg/oKkFPtTGUojv7gnZAoG80ttl45O6x2Ug/rMJw4wcc9k6aaf2hibP7BGVCCM33gZoGjyvt9mm16Q==
 
 prettier@^2.3.2:
   version "2.4.1"
   resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.4.1.tgz#671e11c89c14a4cfc876ce564106c4a6726c9f5c"
   integrity sha512-9fbDAXSBcc6Bs1mZrDYb3XKzDLm4EXXL9sC1LqKP5rZkT6KRr/rf9amVUcODVXgguK/isJz0d0hP72WeaKWsvA==
 
+prettier@^2.5.1:
+  version "2.5.1"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.5.1.tgz#fff75fa9d519c54cf0fce328c1017d94546bc56a"
+  integrity sha512-vBZcPRUR5MZJwoyi3ZoyQlc1rXeEck8KgeC9AwwOn+exuxLxq5toTRDTSaVrXHxelDMHy9zlicw8u66yxoSUFg==
+
 process-nextick-args@~2.0.0:
   version "2.0.1"
   resolved "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz#7820d9b16120cc55ca9ae7792680ae7dba6d7fe2"
@@ -2345,16 +2345,16 @@ svelte-preprocess@^4.8.0:
     sorcery "^0.10.0"
     strip-indent "^3.0.0"
 
-svelte@^3.40.1:
-  version "3.40.1"
-  resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.40.1.tgz#0c1fa443c812f042ce5ccd8d3bec1654a612c259"
-  integrity sha512-IreCwsCD5yoKlXCDXCyHZ0mh1wNwm3/5QD+nVNBzSWug5dUiWcah/8QWnDcC3IYbJbn0ZRT04b8y4ITMtr1bNQ==
-
 svelte@^3.42.4:
   version "3.43.2"
   resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.43.2.tgz#217fc6059f52afa281f39200b6253ac1b83812b4"
   integrity sha512-Lj+TJfSeod8UGnoG2opysdlCy4MCck/hHQsZwtNPXdYTwLTz+WC37QwewPhZtd+h3dpfps4h9QzFxWGVI4tzQw==
 
+svelte@^3.44.3:
+  version "3.44.3"
+  resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.44.3.tgz#795b1ced6ed3da44969099e5061b850c93c95e9a"
+  integrity sha512-aGgrNCip5PQFNfq9e9tmm7EYxWLVHoFsEsmKrtOeRD8dmoGDdyTQ+21xd7qgFd8MNdKGSYvg7F9dr+Tc0yDymg==
+
 terser@^5.0.0:
   version "5.3.0"
   resolved "https://registry.npmjs.org/terser/-/terser-5.3.0.tgz#c481f4afecdcc182d5e2bdd2ff2dc61555161e81"