feat(local-storage): add clearItem, clearAll instance methods

COMPONENT_INDEX.md

@@ -2241,10 +2241,12 @@ None.
 
 ### Props
 
-| Prop name | Kind             | Reactive | Type                | Default value                    | Description                   |
+| Prop name | Kind                  | Reactive | Type                    | Default value                                        | Description                                                     |
-| :-------- | :--------------- | :------- | :------------------ | -------------------------------- | ----------------------------- |
+| :-------- | :-------------------- | :------- | :---------------------- | ---------------------------------------------------- | --------------------------------------------------------------- |
-| value     | <code>let</code> | Yes      | <code>any</code>    | <code>""</code>                  | Provide a value to persist    |
+| value     | <code>let</code>      | Yes      | <code>any</code>        | <code>""</code>                                      | Provide a value to persist                                      |
-| key       | <code>let</code> | No       | <code>string</code> | <code>"local-storage-key"</code> | Specify the local storage key |
+| key       | <code>let</code>      | No       | <code>string</code>     | <code>"local-storage-key"</code>                     | Specify the local storage key                                   |
+| clearItem | <code>function</code> | No       | <code>() => void</code> | <code>() => { localStorage.removeItem(key); }</code> | Remove the persisted key value from the browser's local storage |
+| clearAll  | <code>function</code> | No       | <code>() => void</code> | <code>() => { localStorage.clear(); }</code>         | Clear all key values from the browser's local storage           |
 
 ### Slots
 

docs/src/COMPONENT_API.json

@@ -5351,6 +5351,26 @@
           "isFunction": false,
           "constant": false,
           "reactive": true
+        },
+        {
+          "name": "clearItem",
+          "kind": "function",
+          "description": "Remove the persisted key value from the browser's local storage",
+          "type": "() => void",
+          "value": "() => {     localStorage.removeItem(key);   }",
+          "isFunction": true,
+          "constant": false,
+          "reactive": false
+        },
+        {
+          "name": "clearAll",
+          "kind": "function",
+          "description": "Clear all key values from the browser's local storage",
+          "type": "() => void",
+          "value": "() => {     localStorage.clear();   }",
+          "isFunction": true,
+          "constant": false,
+          "reactive": false
         }
       ],
       "slots": [],

docs/src/pages/components/LocalStorage.svx

@@ -5,5 +5,17 @@
 This utility component wraps the [Window.localStorage API](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) and is useful for persisting ephemeral data (e.g., color theme) at the browser level.
   
 ### Reactive example
+
+In the example below, toggle the switch and reload the page. The updated theme should be persisted locally.
   
-<FileSource src="/framed/LocalStorage/LocalStorage" />
+<FileSource src="/framed/LocalStorage/LocalStorage" />
+
+### Clear item, clear all
+
+Use the `bind:this` directive to access the `clearItem` and `clearAll` methods.
+
+Invoking `clearItem` will remove the persisted key value from the browser's local storage.
+
+Invoking `clearAll` will remove all key values.
+
+<FileSource src="/framed/LocalStorage/LocalStorageClear" />

docs/src/pages/framed/LocalStorage/LocalStorage.svelte

@@ -1,7 +1,6 @@
 <script>
-  import { LocalStorage, Toggle, Button } from "carbon-components-svelte";
+  import { LocalStorage, Toggle } from "carbon-components-svelte";
 
-  let storage;
   let toggled = false;
   let events = [];
 
@@ -9,7 +8,6 @@
 </script>
 
 <LocalStorage
-  bind:this="{storage}"
   key="dark-mode"
   bind:value="{toggled}"
   on:save="{() => {

docs/src/pages/framed/LocalStorage/LocalStorageClear.svelte

@@ -0,0 +1,43 @@
+<script>
+  import { LocalStorage, Toggle, Button } from "carbon-components-svelte";
+
+  let storage;
+  let toggled = false;
+  let events = [];
+
+  $: document.documentElement.setAttribute("theme", toggled ? "g100" : "white");
+</script>
+
+<LocalStorage
+  bind:this="{storage}"
+  key="dark-mode"
+  bind:value="{toggled}"
+  on:save="{() => {
+    events = [...events, { event: 'on:save' }];
+  }}"
+  on:update="{({ detail }) => {
+    events = [...events, { event: 'on:update', detail }];
+  }}"
+/>
+
+<Toggle size="sm" labelText="Dark mode" bind:toggled />
+
+<br />
+<br />
+
+<Button
+  size="small"
+  on:click="{() => {
+    events = [];
+    storage.clearAll();
+  }}"
+>
+  Clear local storage
+</Button>
+
+<br />
+<br />
+
+<pre>
+    {JSON.stringify(events, null, 2)}
+  </pre>

src/LocalStorage/LocalStorage.svelte

@@ -15,6 +15,22 @@
    */
   export let value = "";
 
+  /**
+   * Remove the persisted key value from the browser's local storage
+   * @type {() => void}
+   */
+  export function clearItem() {
+    localStorage.removeItem(key);
+  }
+
+  /**
+   * Clear all key values from the browser's local storage
+   * @type {() => void}
+   */
+  export function clearAll() {
+    localStorage.clear();
+  }
+
   import { onMount, afterUpdate, createEventDispatcher } from "svelte";
 
   const dispatch = createEventDispatcher();

types/LocalStorage/LocalStorage.d.ts

@@ -13,6 +13,18 @@ export interface LocalStorageProps {
    * @default ""
    */
   value?: any;
+
+  /**
+   * Remove the persisted key value from the browser's local storage
+   * @default () => { localStorage.removeItem(key); }
+   */
+  clearItem?: () => void;
+
+  /**
+   * Clear all key values from the browser's local storage
+   * @default () => { localStorage.clear(); }
+   */
+  clearAll?: () => void;
 }
 
 export default class LocalStorage extends SvelteComponentTyped<