From 109f71b5cf08484defd62da9b09fddf4e4bb2e37 Mon Sep 17 00:00:00 2001
From: weaseldotro <1822852+weaseldotro@users.noreply.github.com>
Date: Sun, 22 Nov 2020 12:33:20 +0200
Subject: [PATCH 1/6] fix(RadioButtonGroup): make selected prop reactive

---
 src/RadioButtonGroup/RadioButtonGroup.svelte | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/RadioButtonGroup/RadioButtonGroup.svelte b/src/RadioButtonGroup/RadioButtonGroup.svelte
index 79645f33..d23c595b 100644
--- a/src/RadioButtonGroup/RadioButtonGroup.svelte
+++ b/src/RadioButtonGroup/RadioButtonGroup.svelte
@@ -26,7 +26,7 @@
    */
   export let id = undefined;
 
-  import { createEventDispatcher, setContext } from "svelte";
+  import { beforeUpdate, createEventDispatcher, onMount, setContext } from "svelte";
   import { writable } from "svelte/store";
 
   const dispatch = createEventDispatcher();
@@ -44,7 +44,17 @@
     },
   });
 
-  $: selected = $selectedValue;
+  onMount(() => {
+    $selectedValue = selected
+  })
+
+  beforeUpdate(() => {
+    $selectedValue = selected
+  })
+
+  $: $selectedValue, (() => {
+    selected = $selectedValue
+  })
   $: dispatch("change", $selectedValue);
 </script>
 

From 9e711abaa614a734649550963530d5e32686faf3 Mon Sep 17 00:00:00 2001
From: weaseldotro <1822852+weaseldotro@users.noreply.github.com>
Date: Sun, 22 Nov 2020 17:28:34 +0200
Subject: [PATCH 2/6] quickfix RadioButtonGroup selected prop reactivity

---
 src/RadioButtonGroup/RadioButtonGroup.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/RadioButtonGroup/RadioButtonGroup.svelte b/src/RadioButtonGroup/RadioButtonGroup.svelte
index d23c595b..c99ac087 100644
--- a/src/RadioButtonGroup/RadioButtonGroup.svelte
+++ b/src/RadioButtonGroup/RadioButtonGroup.svelte
@@ -40,7 +40,7 @@
       }
     },
     update: (value) => {
-      selectedValue.set(value);
+      selected = value;
     },
   });
 

From bc29d9ee0dd6140e4df8ef5c97f62b76f3914c19 Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Sun, 22 Nov 2020 09:25:05 -0800
Subject: [PATCH 3/6] docs(radio-button): add reactive example

---
 docs/src/pages/components/RadioButton.svx     |  6 ++++
 .../ProgrammaticRadioButton.svelte            | 36 +++++++++++++++++++
 2 files changed, 42 insertions(+)
 create mode 100644 docs/src/pages/framed/RadioButton/ProgrammaticRadioButton.svelte

diff --git a/docs/src/pages/components/RadioButton.svx b/docs/src/pages/components/RadioButton.svx
index 189e3ffc..b1aed1ce 100644
--- a/docs/src/pages/components/RadioButton.svx
+++ b/docs/src/pages/components/RadioButton.svx
@@ -17,6 +17,12 @@ components: ["RadioButtonGroup", "RadioButton", "RadioButtonSkeleton"]
   </RadioButtonGroup>
 </FormGroup>
 
+### Programmatic usage
+
+Bind the selected value using the `selected` prop.
+
+<FileSource src="/framed/RadioButton/ProgrammaticRadioButton" />
+
 ### Label text aligned left
 
 <FormGroup legendText="Storage tier (disk)">
diff --git a/docs/src/pages/framed/RadioButton/ProgrammaticRadioButton.svelte b/docs/src/pages/framed/RadioButton/ProgrammaticRadioButton.svelte
new file mode 100644
index 00000000..ef014adb
--- /dev/null
+++ b/docs/src/pages/framed/RadioButton/ProgrammaticRadioButton.svelte
@@ -0,0 +1,36 @@
+<script>
+  import {
+    ButtonSet,
+    Button,
+    FormGroup,
+    RadioButtonGroup,
+    RadioButton,
+  } from "carbon-components-svelte";
+
+  let plan = "standard";
+</script>
+
+<FormGroup legendText="Storage tier (disk)">
+  <RadioButtonGroup bind:selected="{plan}">
+    <RadioButton labelText="Free (1 GB)" value="free" />
+    <RadioButton labelText="Standard (10 GB)" value="standard" />
+    <RadioButton labelText="Pro (128 GB)" value="pro" />
+  </RadioButtonGroup>
+</FormGroup>
+
+<ButtonSet>
+  {#each ['free', 'standard', 'pro'] as value}
+    <Button
+      on:click="{() => {
+        plan = value;
+      }}"
+    >
+      Select "{value}"
+    </Button>
+  {/each}
+</ButtonSet>
+
+<div style="margin: var(--cds-layout-01) 0">
+  Selected plan:
+  <strong>{plan}</strong>
+</div>

From 9edb0c2f31b83f29f0f9cac1f488598bf0c6a835 Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Sun, 22 Nov 2020 09:50:23 -0800
Subject: [PATCH 4/6] docs(recipes): add ExpandableAccordion recipe

---
 docs/src/pages/components/Accordion.svx       |  2 +
 .../Accordion/ExpandableAccordion.svelte      | 43 +++++++++++++++++++
 .../src/pages/recipes/ExpandableAccordion.svx | 13 ++++++
 3 files changed, 58 insertions(+)
 create mode 100644 docs/src/pages/framed/Accordion/ExpandableAccordion.svelte
 create mode 100644 docs/src/pages/recipes/ExpandableAccordion.svx

diff --git a/docs/src/pages/components/Accordion.svx b/docs/src/pages/components/Accordion.svx
index eabc4972..3db70d63 100644
--- a/docs/src/pages/components/Accordion.svx
+++ b/docs/src/pages/components/Accordion.svx
@@ -10,6 +10,8 @@ components: ["Accordion", "AccordionItem", "AccordionSkeleton"]
   import Preview from "../../components/Preview.svelte";
 </script>
 
+See the [ExpandableAccordion recipe](/recipes/ExpandableAccordion) for a toggleable accordion component.
+
 ### Default
 
 <Accordion>
diff --git a/docs/src/pages/framed/Accordion/ExpandableAccordion.svelte b/docs/src/pages/framed/Accordion/ExpandableAccordion.svelte
new file mode 100644
index 00000000..93737986
--- /dev/null
+++ b/docs/src/pages/framed/Accordion/ExpandableAccordion.svelte
@@ -0,0 +1,43 @@
+<script>
+  export let items = [
+    {
+      title: "Natural Language Classifier",
+      description:
+        "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.",
+    },
+    {
+      title: "Natural Language Understanding",
+      description:
+        "Analyze text to extract meta-data from content such as concepts, entities, emotion, relations, sentiment and more.",
+    },
+    {
+      title: "Language Translator",
+      description:
+        "Translate text, documents, and websites from one language to another. Create industry or region-specific translations via the service's customization capability.",
+    },
+  ];
+
+  import { Accordion, AccordionItem, Button } from "carbon-components-svelte";
+
+  let open = false;
+</script>
+
+<Button
+  kind="ghost"
+  size="field"
+  on:click="{() => {
+    open = !open;
+  }}"
+>
+  {open ? 'Collapse' : 'Expand'}
+  all
+</Button>
+
+<Accordion>
+  {#each items as item}
+    <AccordionItem open="{open}">
+      <h5 slot="title">{item.title}</h5>
+      <p>{item.description}</p>
+    </AccordionItem>
+  {/each}
+</Accordion>
diff --git a/docs/src/pages/recipes/ExpandableAccordion.svx b/docs/src/pages/recipes/ExpandableAccordion.svx
new file mode 100644
index 00000000..09ba3cf0
--- /dev/null
+++ b/docs/src/pages/recipes/ExpandableAccordion.svx
@@ -0,0 +1,13 @@
+---
+layout: recipe
+---
+
+<script>
+  import Preview from "../../components/Preview.svelte";
+</script>
+
+## Expandable accordion
+
+This example expands and collapses all accordion items.
+
+<FileSource src="/framed/Accordion/ExpandableAccordion" />

From f5509060d5baad116c75cff7bc613eda4ecf25d2 Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Sun, 22 Nov 2020 09:50:46 -0800
Subject: [PATCH 5/6] docs: tweak body copy, link to CopyableCodeSnippet recipe

---
 docs/src/pages/_layout.svelte                              | 7 +++++++
 docs/src/pages/components/Breadcrumb.svx                   | 2 +-
 docs/src/pages/components/CodeSnippet.svx                  | 6 ++++--
 docs/src/pages/components/ComposedModal.svx                | 2 +-
 docs/src/pages/components/CopyButton.svx                   | 6 ++++--
 docs/src/pages/components/ToggleSmall.svx                  | 4 ++--
 .../framed/CopyableCodeSnippet/CopyableCodeSnippet.svelte  | 2 +-
 docs/src/pages/recipes/CopyableCodeSnippet.svx             | 6 ++++--
 8 files changed, 24 insertions(+), 11 deletions(-)

diff --git a/docs/src/pages/_layout.svelte b/docs/src/pages/_layout.svelte
index d51a6ff5..c87c7a90 100644
--- a/docs/src/pages/_layout.svelte
+++ b/docs/src/pages/_layout.svelte
@@ -35,6 +35,13 @@
 </script>
 
 <style global>
+  .body-short-01 {
+    font-size: var(--cds-body-short-01-font-size);
+    font-weight: var(--cds-body-short-01-font-weight);
+    letter-spacing: var(--cds-body-short-01-letter-spacing);
+    line-height: var(--cds-body-short-01-line-height);
+  }
+
   .bx--col > h1 {
     font-size: var(--cds-display-01-font-size);
     font-weight: var(--cds-display-01-font-weight);
diff --git a/docs/src/pages/components/Breadcrumb.svx b/docs/src/pages/components/Breadcrumb.svx
index d6d3c17b..61ce50da 100644
--- a/docs/src/pages/components/Breadcrumb.svx
+++ b/docs/src/pages/components/Breadcrumb.svx
@@ -10,7 +10,7 @@ components: ["Breadcrumb", "BreadcrumbItem"]
   import Preview from "../../components/Preview.svelte";
 </script>
 
-See the [Breadcrumbs recipe](/recipes/Breadcrumbs) for building a reusable breadcrumbs component.
+See the [Breadcrumbs recipe](/recipes/Breadcrumbs) for a reusable breadcrumbs component.
 
 ### Default
 
diff --git a/docs/src/pages/components/CodeSnippet.svx b/docs/src/pages/components/CodeSnippet.svx
index 697931af..b5d2ce11 100644
--- a/docs/src/pages/components/CodeSnippet.svx
+++ b/docs/src/pages/components/CodeSnippet.svx
@@ -1,5 +1,5 @@
 <script>
-  import { CodeSnippet, InlineNotification } from "carbon-components-svelte";
+  import { CodeSnippet, InlineNotification, Link } from "carbon-components-svelte";
   import Preview from "../../components/Preview.svelte";
 
   let code = `// helpers.js
@@ -27,7 +27,9 @@ let comment = `
 `
 </script>
 
-<InlineNotification svx-ignore title="Note:" subtitle="By design, the copy button does not copy text to the clipboard. You will need to write your own logic." kind="info" hideCloseButton />
+<InlineNotification svx-ignore title="Note:" kind="info" hideCloseButton>
+  <div class="body-short-01">By design, the copy button does not copy text to the clipboard. You will need to write your own logic. Refer to the <Link href="/recipes/CopyableCodeSnippet">CopyableCodeSnippet recipe</Link> for an example.</div>
+</InlineNotification>
 
 ### Default (single-line)
 
diff --git a/docs/src/pages/components/ComposedModal.svx b/docs/src/pages/components/ComposedModal.svx
index ed19c196..65adc6ac 100644
--- a/docs/src/pages/components/ComposedModal.svx
+++ b/docs/src/pages/components/ComposedModal.svx
@@ -1,5 +1,5 @@
 ---
-components: ["ComposedModal", "ModalHeader", "ModalBody", "ModalFooter", "Checkbox"]
+components: ["ComposedModal", "ModalHeader", "ModalBody", "ModalFooter"]
 ---
 
 <script>
diff --git a/docs/src/pages/components/CopyButton.svx b/docs/src/pages/components/CopyButton.svx
index e9c983ce..a04a332a 100644
--- a/docs/src/pages/components/CopyButton.svx
+++ b/docs/src/pages/components/CopyButton.svx
@@ -1,9 +1,11 @@
 <script>
-  import { CopyButton, InlineNotification } from "carbon-components-svelte";
+  import { CopyButton, InlineNotification, Link } from "carbon-components-svelte";
   import Preview from "../../components/Preview.svelte";
 </script>
 
-<InlineNotification svx-ignore title="Note:" subtitle="By design, the copy button does not copy text to the clipboard. You will need to write your own logic." kind="info" hideCloseButton />
+<InlineNotification svx-ignore title="Note:" kind="info" hideCloseButton>
+  <div class="body-short-01">By design, the copy button does not copy text to the clipboard. You will need to write your own logic. Refer to the <Link href="/recipes/CopyableCodeSnippet">CopyableCodeSnippet recipe</Link> for an example.</div>
+</InlineNotification>
 
 ### Default
 
diff --git a/docs/src/pages/components/ToggleSmall.svx b/docs/src/pages/components/ToggleSmall.svx
index a1158fd1..ac2a06ca 100644
--- a/docs/src/pages/components/ToggleSmall.svx
+++ b/docs/src/pages/components/ToggleSmall.svx
@@ -7,9 +7,9 @@ components: ["ToggleSmall", "ToggleSmallSkeleton"]
   import Preview from "../../components/Preview.svelte";
 </script>
 
-<InlineNotification svx-ignore title="Deprecation warning" kind="warning" hideCloseButton>
+<InlineNotification svx-ignore title="Deprecation warning:" kind="warning" hideCloseButton>
   <div>
-    This component will be removed in version 1.0.0. Use the <Link href="/components/Toggle#small-size">Toggle small variant</Link> instead.
+    This component will be removed in the next major release. Use the <Link href="/components/Toggle#small-size">Toggle small variant</Link> instead.
   </div>
 </InlineNotification>
 
diff --git a/docs/src/pages/framed/CopyableCodeSnippet/CopyableCodeSnippet.svelte b/docs/src/pages/framed/CopyableCodeSnippet/CopyableCodeSnippet.svelte
index aa7f4492..a411d51c 100644
--- a/docs/src/pages/framed/CopyableCodeSnippet/CopyableCodeSnippet.svelte
+++ b/docs/src/pages/framed/CopyableCodeSnippet/CopyableCodeSnippet.svelte
@@ -5,4 +5,4 @@
   import copy from "clipboard-copy";
 </script>
 
-<CodeSnippet on:click="{() => copy(code)}">{code}</CodeSnippet>
+<CodeSnippet on:click="{() => copy(code)}" code="{code}" />
diff --git a/docs/src/pages/recipes/CopyableCodeSnippet.svx b/docs/src/pages/recipes/CopyableCodeSnippet.svx
index 96334ad5..3b994518 100644
--- a/docs/src/pages/recipes/CopyableCodeSnippet.svx
+++ b/docs/src/pages/recipes/CopyableCodeSnippet.svx
@@ -6,10 +6,12 @@ layout: recipe
   import Preview from "../../components/Preview.svelte";
 </script>
 
-The [CodeSnippet](/components/CodeSnippet) and [CopyButton](/components/CopyButton) do not include logic to copy the supplied `code` text.
+The [CodeSnippet](/components/CodeSnippet) and [CopyButton](/components/CopyButton) components do not include logic to copy the supplied `code` text.
+
+You can use a third party open source module like [clipboard-copy](https://www.npmjs.com/package/clipboard-copy) that is compatible with modern web browsers.
 
 ## clipboard-copy
 
-This example uses [clipboard-copy](https://www.npmjs.com/package/clipboard-copy), a lightweight module designed for the web.
+This documentation website uses [clipboard-copy](https://www.npmjs.com/package/clipboard-copy).
 
 <FileSource src="/framed/CopyableCodeSnippet/CopyableCodeSnippet" />

From 3283b9b4f5b3d35979422bd57a005642b05fc73e Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Sun, 22 Nov 2020 10:04:57 -0800
Subject: [PATCH 6/6] v0.23.1

---
 CHANGELOG.md       | 15 +++++++++++++++
 COMPONENT_INDEX.md |  2 +-
 package.json       |  2 +-
 3 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index c3db7c7a..80653ca4 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,21 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 <!-- ## Unreleased -->
 
+## [0.23.1](https://github.com/IBM/carbon-components-svelte/releases/tag/v0.23.1) - 2020-11-22
+
+**Fixes**
+
+- Fix `selected` prop reactivity in RadioButtonGroup so that it can be programmatically updated ([PR #407](https://github.com/IBM/carbon-components-svelte/pull/407), [issue #406](https://github.com/IBM/carbon-components-svelte/issues/406))
+- Allow click propagation in ListBox so that list box menus can close correctly; this fixes behavior in the ComboBox, Dropdown, and MultiSelect components ([PR #405](https://github.com/IBM/carbon-components-svelte/pull/405), [issue #388](https://github.com/IBM/carbon-components-svelte/issues/388))
+
+**Documentation**
+
+- Add [programmatic RadioButton example](https://carbon-svelte.vercel.app/components/RadioButton#programmatic-usage)
+- Add [multiple ComboBox example](https://carbon-svelte.vercel.app/components/ComboBox#multiple-combo-boxes)
+- Add [multiple Dropdown example](https://carbon-svelte.vercel.app/components/Dropdown#multiple-dropdowns)
+- Add [multiple MultiSelect example](https://carbon-svelte.vercel.app/components/MultiSelect#multiple-multi-select-dropdowns)
+- Add [ExpandableAccordion recipe](https://carbon-svelte.vercel.app/recipes/ExpandableAccordion#expandable-accordion)
+
 ## [0.23.0](https://github.com/IBM/carbon-components-svelte/releases/tag/v0.23.0) - 2020-11-20
 
 **Features**
diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md
index 49cc2b26..9b15e700 100644
--- a/COMPONENT_INDEX.md
+++ b/COMPONENT_INDEX.md
@@ -1,6 +1,6 @@
 # Component Index
 
-> 154 components exported from carbon-components-svelte@0.23.0.
+> 154 components exported from carbon-components-svelte@0.23.1.
 
 ## Components
 
diff --git a/package.json b/package.json
index 6b8a81d0..5302fe6f 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "carbon-components-svelte",
-  "version": "0.23.0",
+  "version": "0.23.1",
   "license": "Apache-2.0",
   "author": "IBM",
   "description": "Svelte implementation of the Carbon Design System",