feat!: dispatch "change" event in Pagination, rename "change" to "update" in Select (#1497)

Closes #1491

* feat(pagination): dispatch "change" event when interacting with previous/next buttons, page/page size dropdowns

* breaking(select): rename dispatched "change" event to "update"

* breaking(select): forward `change` event to `Select`

docs/src/COMPONENT_API.json

@@ -8405,8 +8405,9 @@
       "events": [
         {
           "type": "dispatched",
-          "name": "update",
-          "detail": "{ pageSize: number; page: number; }"
+          "name": "change",
+          "detail": "{ page?: number; pageSize?: number }",
+          "description": "Dispatched after any user interaction"
         },
         {
           "type": "dispatched",
@@ -8417,6 +8418,11 @@
           "type": "dispatched",
           "name": "click:button--next",
           "detail": "{ page: number; }"
+        },
+        {
+          "type": "dispatched",
+          "name": "update",
+          "detail": "{ pageSize: number; page: number; }"
         }
       ],
       "typedefs": [],
@@ -10252,7 +10258,13 @@
         }
       ],
       "events": [
-        { "type": "dispatched", "name": "change", "detail": "string | number" },
+        {
+          "type": "dispatched",
+          "name": "update",
+          "detail": "string | number",
+          "description": "The selected value."
+        },
+        { "type": "forwarded", "name": "change", "element": "select" },
         { "type": "forwarded", "name": "input", "element": "select" },
         { "type": "forwarded", "name": "focus", "element": "select" },
         { "type": "forwarded", "name": "blur", "element": "select" }

docs/src/components/ComponentApi.svelte

@@ -168,11 +168,33 @@
 <h2 id="dispatched-events">Dispatched events</h2>
 
 {#if dispatched_events.length > 0}
-  <UnorderedList class="my-layout-01-03">
-    {#each dispatched_events as event (event.name)}
-      <ListItem>on:{event.name}</ListItem>
-    {/each}
-  </UnorderedList>
+  {@const hasDescription = dispatched_events.find((el) => el.description)}
+  <StructuredList flush>
+    <StructuredListHead>
+      <StructuredListRow>
+        <StructuredListCell>Event name</StructuredListCell>
+        <StructuredListCell><code>event.details</code> type</StructuredListCell>
+        {#if hasDescription}
+          <StructuredListCell>Description</StructuredListCell>
+        {/if}
+      </StructuredListRow>
+    </StructuredListHead>
+    <StructuredListBody>
+      {#each dispatched_events as event (event.name)}
+        <StructuredListRow>
+          <StructuredListCell>
+            <strong>on:{event.name}</strong>
+          </StructuredListCell>
+          <StructuredListCell>
+            <code>{event.detail}</code>
+          </StructuredListCell>
+          <StructuredListCell>
+            {event.description ?? ""}
+          </StructuredListCell>
+        </StructuredListRow>
+      {/each}
+    </StructuredListBody>
+  </StructuredList>
 {:else}
   <p class="my-layout-01-03">No dispatched events.</p>
 {/if}

docs/src/pages/components/Select.svx

@@ -11,7 +11,7 @@ components: ["Select", "SelectItem", "SelectItemGroup", "SelectSkeleton"]
 
 If the `selected` prop is not set, the value of the first `SelectItem` will be used as the default value.
 
-<Select labelText="Carbon theme" on:change={e => console.log("value", e.detail)}>
+<Select labelText="Carbon theme" on:change={e => console.log("value", e.target.value)}>
   <SelectItem value="white" />
   <SelectItem value="g10" />
   <SelectItem value="g80" />
@@ -23,7 +23,7 @@ If the `selected` prop is not set, the value of the first `SelectItem` will be u
 
 Use the `text` prop on `SelectItem` to customize the display value.
 
-<Select labelText="Carbon theme" on:change={e => console.log("value", e.detail)}>
+<Select labelText="Carbon theme" on:change={e => console.log("value", e.target.value)}>
   <SelectItem value="white" text="White" />
   <SelectItem value="g10" text="Gray 10" />
   <SelectItem value="g80" text="Gray 80" />
@@ -35,7 +35,7 @@ Use the `text` prop on `SelectItem` to customize the display value.
 
 Use the `selected` prop to specify an initial value.
 
-<Select labelText="Carbon theme" selected="g10" on:change={e => console.log("value", e.detail)}>
+<Select labelText="Carbon theme" selected="g10" on:change={e => console.log("value", e.target.value)}>
   <SelectItem value="white" text="White" />
   <SelectItem value="g10" text="Gray 10" />
   <SelectItem value="g80" text="Gray 80" />
@@ -160,4 +160,4 @@ The `selected` prop is reactive and supports two-way binding.
 
 ## Skeleton (hidden label)
 
-<SelectSkeleton hideLabel />
+<SelectSkeleton hideLabel />