feat: add LocalStorage component

docs/src/COMPONENT_API.json

@@ -1,5 +1,5 @@
 {
-  "total": 159,
+  "total": 160,
   "components": [
     {
       "moduleName": "Accordion",
@@ -4821,6 +4821,42 @@
       "typedefs": [],
       "rest_props": { "type": "Element", "name": "div" }
     },
+    {
+      "moduleName": "LocalStorage",
+      "filePath": "src/LocalStorage/LocalStorage.svelte",
+      "props": [
+        {
+          "name": "key",
+          "kind": "let",
+          "description": "Specify the local storage key",
+          "type": "string",
+          "value": "\"local-storage-key\"",
+          "isFunction": false,
+          "constant": false,
+          "reactive": false
+        },
+        {
+          "name": "value",
+          "kind": "let",
+          "description": "Provide a value to persist",
+          "type": "any",
+          "value": "\"\"",
+          "isFunction": false,
+          "constant": false,
+          "reactive": true
+        }
+      ],
+      "slots": [],
+      "events": [
+        { "type": "dispatched", "name": "save", "detail": "any" },
+        {
+          "type": "dispatched",
+          "name": "update",
+          "detail": "{ prevValue: any; value: any; }"
+        }
+      ],
+      "typedefs": []
+    },
     {
       "moduleName": "Modal",
       "filePath": "src/Modal/Modal.svelte",

docs/src/pages/_layout.svelte

@@ -20,7 +20,7 @@
   import Footer from "../components/Footer.svelte";
 
   const deprecated = ["ToggleSmall", "Icon"];
-  const new_components = ["ImageLoader"];
+  const new_components = ["ImageLoader", "LocalStorage"];
 
   let isOpen = false;
   let isSideNavOpen = true;

docs/src/pages/components/LocalStorage.svx

@@ -0,0 +1,9 @@
+<script>
+  import Preview from "../../components/Preview.svelte";
+</script>
+
+This utility component wraps the [Window.localStorage API](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) to persist values by key. This is useful for non-persistent data (e.g., dark mode toggle).
+  
+### Reactive example
+  
+<FileSource src="/framed/LocalStorage/LocalStorage" />

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

@@ -0,0 +1,29 @@
+<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 />
+
+<pre>
+  {JSON.stringify(events, null, 2)}
+</pre>