Merge pull request #1 from carbon-design-system/master

merge
2025-09-18 11:36:36 +00:00 · 2024-11-04 18:09:00 +03:00 · 2024-11-04 18:09:00 +03:00 · ba845ed037
commit ba845ed037
parent 3511f09b2e c93be373ea
35 changed files with 133 additions and 147 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -2,6 +2,12 @@

 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.

+### [0.85.3](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.85.2...v0.85.3) (2024-10-25)
+
+### Bug Fixes
+
+- address Svelte 5 warnings ([#2011](https://github.com/carbon-design-system/carbon-components-svelte/issues/2011)) ([43fccac](https://github.com/carbon-design-system/carbon-components-svelte/commit/43fccac1c6273d9aa83b8c26a5f8cecec667db59))
+
 ### [0.85.2](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.85.1...v0.85.2) (2024-08-14)

 ### Bug Fixes
--- a/COMPONENT_INDEX.md
+++ b/COMPONENT_INDEX.md
@ -1,6 +1,6 @@
 # Component Index

-> 165 components exported from carbon-components-svelte@0.85.2.
+> 165 components exported from carbon-components-svelte@0.85.3.

 ## Components

@ -697,12 +697,12 @@ export interface ComboBoxItem {
 | Event name | Type       | Detail                                                                  |
 | :--------- | :--------- | :---------------------------------------------------------------------- |
 | select     | dispatched | <code>{ selectedId: ComboBoxItemId; selectedItem: ComboBoxItem }</code> |
+| clear      | dispatched | <code>KeyboardEvent &#124; MouseEvent</code>                            |
 | keydown    | forwarded  | --                                                                      |
 | keyup      | forwarded  | --                                                                      |
 | focus      | forwarded  | --                                                                      |
 | blur       | forwarded  | --                                                                      |
 | paste      | forwarded  | --                                                                      |
-| clear      | forwarded  | --                                                                      |
 | scroll     | forwarded  | --                                                                      |

 ## `ComposedModal`
@ -933,7 +933,7 @@ export type DataTableValue = any;
 export interface DataTableEmptyHeader {
  key: DataTableKey;
  empty: boolean;
-  display?: (item: Value, row: DataTableRow) => DataTableValue;
+  display?: (item: DataTableValue, row: DataTableRow) => DataTableValue;
  sort?: false | ((a: DataTableValue, b: DataTableValue) => number);
  columnMenu?: boolean;
  width?: string;
@ -943,7 +943,7 @@ export interface DataTableEmptyHeader {
 export interface DataTableNonEmptyHeader {
  key: DataTableKey;
  value: DataTableValue;
-  display?: (item: Value, row: DataTableRow) => DataTableValue;
+  display?: (item: DataTableValue, row: DataTableRow) => DataTableValue;
  sort?: false | ((a: DataTableValue, b: DataTableValue) => number);
  columnMenu?: boolean;
  width?: string;
@ -962,7 +962,7 @@ export type DataTableRowId = any;
 export interface DataTableCell {
  key: DataTableKey;
  value: DataTableValue;
-  display?: (item: Value, row: DataTableRow) => DataTableValue;
+  display?: (item: DataTableValue, row: DataTableRow) => DataTableValue;
 }
 ```

@ -4193,15 +4193,15 @@ export type CarbonTheme = "white" | "g10" | "g80" | "g90" | "g100";

 ### Props

-| Prop name  | Required | Kind             | Reactive | Type                                                                                                           | Default value                                                                                                 | Description                                                                                                                    |
-| :--------- | :------- | :--------------- | :------- | -------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ |
-| theme      | No       | <code>let</code> | Yes      | <code>CarbonTheme</code>                                                                                       | <code>"white"</code>                                                                                          | Set the current Carbon theme                                                                                                   |
-| tokens     | No       | <code>let</code> | No       | <code>{ [token: string]: any; }</code>                                                                         | <code>{}</code>                                                                                               | Customize a theme with your own tokens<br />@see https://carbondesignsystem.com/guidelines/themes/overview#customizing-a-theme |
-| persist    | No       | <code>let</code> | No       | <code>boolean</code>                                                                                           | <code>false</code>                                                                                            | Set to `true` to persist the theme using window.localStorage                                                                   |
-| persistKey | No       | <code>let</code> | No       | <code>string</code>                                                                                            | <code>"theme"</code>                                                                                          | Specify the local storage key                                                                                                  |
-| render     | No       | <code>let</code> | No       | <code>"toggle" &#124; "select"</code>                                                                          | <code>undefined</code>                                                                                        | Render a toggle or select dropdown to control the theme                                                                        |
-| toggle     | No       | <code>let</code> | No       | <code>import("../Toggle/Toggle").ToggleProps & { themes?: [labelA: CarbonTheme, labelB: CarbonTheme]; }</code> | <code>{ themes: ["white", "g100"], labelA: "", labelB: "", labelText: "Dark mode", hideLabel: false, }</code> | Override the default toggle props                                                                                              |
-| select     | No       | <code>let</code> | No       | <code>import("../Select/Select").SelectProps & { themes?: CarbonTheme[]; }</code>                              | <code>{ themes: themeKeys, labelText: "Themes", hideLabel: false, }</code>                                    | Override the default select props                                                                                              |
+| Prop name  | Required | Kind             | Reactive | Type                                                                                                                  | Default value                                                                                                 | Description                                                                                                                    |
+| :--------- | :------- | :--------------- | :------- | --------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ |
+| theme      | No       | <code>let</code> | Yes      | <code>CarbonTheme</code>                                                                                              | <code>"white"</code>                                                                                          | Set the current Carbon theme                                                                                                   |
+| tokens     | No       | <code>let</code> | No       | <code>{ [token: string]: any; }</code>                                                                                | <code>{}</code>                                                                                               | Customize a theme with your own tokens<br />@see https://carbondesignsystem.com/guidelines/themes/overview#customizing-a-theme |
+| persist    | No       | <code>let</code> | No       | <code>boolean</code>                                                                                                  | <code>false</code>                                                                                            | Set to `true` to persist the theme using window.localStorage                                                                   |
+| persistKey | No       | <code>let</code> | No       | <code>string</code>                                                                                                   | <code>"theme"</code>                                                                                          | Specify the local storage key                                                                                                  |
+| render     | No       | <code>let</code> | No       | <code>"toggle" &#124; "select"</code>                                                                                 | <code>undefined</code>                                                                                        | Render a toggle or select dropdown to control the theme                                                                        |
+| toggle     | No       | <code>let</code> | No       | <code>import("../Toggle/Toggle.svelte").ToggleProps & { themes?: [labelA: CarbonTheme, labelB: CarbonTheme]; }</code> | <code>{ themes: ["white", "g100"], labelA: "", labelB: "", labelText: "Dark mode", hideLabel: false, }</code> | Override the default toggle props                                                                                              |
+| select     | No       | <code>let</code> | No       | <code>import("../Select/Select.svelte").SelectProps & { themes?: CarbonTheme[]; }</code>                              | <code>{ themes: themeKeys, labelText: "Themes", hideLabel: false, }</code>                                    | Override the default select props                                                                                              |

 ### Slots

@ -4548,16 +4548,16 @@ None.

 ### Events

-| Event name | Type      | Detail |
-| :--------- | :-------- | :----- |
-| clear      | forwarded | --     |
-| change     | forwarded | --     |
-| input      | forwarded | --     |
-| focus      | forwarded | --     |
-| blur       | forwarded | --     |
-| keyup      | forwarded | --     |
-| keydown    | forwarded | --     |
-| paste      | forwarded | --     |
+| Event name | Type       | Detail            |
+| :--------- | :--------- | :---------------- |
+| clear      | dispatched | <code>null</code> |
+| change     | forwarded  | --                |
+| input      | forwarded  | --                |
+| focus      | forwarded  | --                |
+| blur       | forwarded  | --                |
+| keyup      | forwarded  | --                |
+| keydown    | forwarded  | --                |
+| paste      | forwarded  | --                |

 ## `Tooltip`

--- a/README.md
+++ b/README.md
@ -13,7 +13,7 @@ Design systems facilitate design and development through reuse, consistency, and

 The Carbon Svelte portfolio also includes:

- **[Carbon Icons Svelte](https://github.com/carbon-design-system/carbon-icons-svelte)**: 2,300+ Carbon icons as Svelte components
+- **[Carbon Icons Svelte](https://github.com/carbon-design-system/carbon-icons-svelte)**: 2,400+ Carbon icons as Svelte components
 - **[Carbon Pictograms Svelte](https://github.com/carbon-design-system/carbon-pictograms-svelte)**: 1,100+ Carbon pictograms as Svelte components
 - **[Carbon Charts Svelte](https://github.com/carbon-design-system/carbon-charts/tree/master/packages/svelte)**: 20+ charts, powered by d3
 - **[Carbon Preprocess Svelte](https://github.com/carbon-design-system/carbon-preprocess-svelte)**: Collection of Svelte preprocessors for Carbon
@ -28,17 +28,18 @@ Other forms of documentation are auto-generated:

 ## Installation

-Install `carbon-components-svelte` as a development dependency.
-
 ```sh
-# Yarn
-yarn add -D carbon-components-svelte
-
 # npm
-npm i -D carbon-components-svelte
+npm i carbon-components-svelte

 # pnpm
-pnpm i -D carbon-components-svelte
+pnpm i carbon-components-svelte
+
+# Yarn
+yarn add carbon-components-svelte
+
+# Bun
+bun add carbon-components-svelte
 ```

 ## Usage
@ -146,17 +147,20 @@ Import components from `carbon-components-svelte` in the `script` tag of your Sv
 [carbon-preprocess-svelte](https://github.com/carbon-design-system/carbon-preprocess-svelte) is a collection of Svelte preprocessors for Carbon.

 > [!NOTE]
-> Using `carbon-preprocess-svelte` is optional and not a prerequisite for this library.
+> Using `carbon-preprocess-svelte` is optional and not a prerequisite for this library. It should be installed as a development dependency.

 ```sh
-# Yarn
-yarn add -D carbon-preprocess-svelte
-
 # npm
 npm i -D carbon-preprocess-svelte

 # pnpm
 pnpm i -D carbon-preprocess-svelte
+
+# Yarn
+yarn add -D carbon-preprocess-svelte
+
+# Bun
+bun add -D carbon-preprocess-svelte
 ```

 ### `optimizeImports`
--- a/docs/src/COMPONENT_API.json
+++ b/docs/src/COMPONENT_API.json
@ -1780,12 +1780,16 @@
          "name": "select",
          "detail": "{ selectedId: ComboBoxItemId; selectedItem: ComboBoxItem }"
        },
+        {
+          "type": "dispatched",
+          "name": "clear",
+          "detail": "KeyboardEvent | MouseEvent"
+        },
        { "type": "forwarded", "name": "keydown", "element": "input" },
        { "type": "forwarded", "name": "keyup", "element": "input" },
        { "type": "forwarded", "name": "focus", "element": "input" },
        { "type": "forwarded", "name": "blur", "element": "input" },
        { "type": "forwarded", "name": "paste", "element": "input" },
-        { "type": "forwarded", "name": "clear", "element": "ListBoxSelection" },
        { "type": "forwarded", "name": "scroll", "element": "ListBoxMenu" }
      ],
      "typedefs": [
@ -2730,14 +2734,14 @@
          "ts": "type DataTableValue = any"
        },
        {
-          "type": "{ key: DataTableKey; empty: boolean; display?: (item: Value, row: DataTableRow) => DataTableValue; sort?: false | ((a: DataTableValue, b: DataTableValue) => number); columnMenu?: boolean; width?: string; minWidth?: string; }",
+          "type": "{ key: DataTableKey; empty: boolean; display?: (item: DataTableValue, row: DataTableRow) => DataTableValue; sort?: false | ((a: DataTableValue, b: DataTableValue) => number); columnMenu?: boolean; width?: string; minWidth?: string; }",
          "name": "DataTableEmptyHeader",
-          "ts": "interface DataTableEmptyHeader { key: DataTableKey; empty: boolean; display?: (item: Value, row: DataTableRow) => DataTableValue; sort?: false | ((a: DataTableValue, b: DataTableValue) => number); columnMenu?: boolean; width?: string; minWidth?: string; }"
+          "ts": "interface DataTableEmptyHeader { key: DataTableKey; empty: boolean; display?: (item: DataTableValue, row: DataTableRow) => DataTableValue; sort?: false | ((a: DataTableValue, b: DataTableValue) => number); columnMenu?: boolean; width?: string; minWidth?: string; }"
        },
        {
-          "type": "{ key: DataTableKey; value: DataTableValue; display?: (item: Value, row: DataTableRow) => DataTableValue; sort?: false | ((a: DataTableValue, b: DataTableValue) => number); columnMenu?: boolean; width?: string; minWidth?: string; }",
+          "type": "{ key: DataTableKey; value: DataTableValue; display?: (item: DataTableValue, row: DataTableRow) => DataTableValue; sort?: false | ((a: DataTableValue, b: DataTableValue) => number); columnMenu?: boolean; width?: string; minWidth?: string; }",
          "name": "DataTableNonEmptyHeader",
-          "ts": "interface DataTableNonEmptyHeader { key: DataTableKey; value: DataTableValue; display?: (item: Value, row: DataTableRow) => DataTableValue; sort?: false | ((a: DataTableValue, b: DataTableValue) => number); columnMenu?: boolean; width?: string; minWidth?: string; }"
+          "ts": "interface DataTableNonEmptyHeader { key: DataTableKey; value: DataTableValue; display?: (item: DataTableValue, row: DataTableRow) => DataTableValue; sort?: false | ((a: DataTableValue, b: DataTableValue) => number); columnMenu?: boolean; width?: string; minWidth?: string; }"
        },
        {
          "type": "DataTableNonEmptyHeader | DataTableEmptyHeader",
@ -2755,9 +2759,9 @@
          "ts": "type DataTableRowId = any"
        },
        {
-          "type": "{ key: DataTableKey; value: DataTableValue; display?: (item: Value, row: DataTableRow) => DataTableValue; }",
+          "type": "{ key: DataTableKey; value: DataTableValue; display?: (item: DataTableValue, row: DataTableRow) => DataTableValue; }",
          "name": "DataTableCell",
-          "ts": "interface DataTableCell { key: DataTableKey; value: DataTableValue; display?: (item: Value, row: DataTableRow) => DataTableValue; }"
+          "ts": "interface DataTableCell { key: DataTableKey; value: DataTableValue; display?: (item: DataTableValue, row: DataTableRow) => DataTableValue; }"
        }
      ],
      "generics": null,
@ -13198,7 +13202,7 @@
          "name": "toggle",
          "kind": "let",
          "description": "Override the default toggle props",
-          "type": "import(\"../Toggle/Toggle\").ToggleProps & { themes?: [labelA: CarbonTheme, labelB: CarbonTheme]; }",
+          "type": "import(\"../Toggle/Toggle.svelte\").ToggleProps & { themes?: [labelA: CarbonTheme, labelB: CarbonTheme]; }",
          "value": "{     themes: [\"white\", \"g100\"],     labelA: \"\",     labelB: \"\",     labelText: \"Dark mode\",     hideLabel: false,   }",
          "isFunction": false,
          "isFunctionDeclaration": false,
@ -13210,7 +13214,7 @@
          "name": "select",
          "kind": "let",
          "description": "Override the default select props",
-          "type": "import(\"../Select/Select\").SelectProps & { themes?: CarbonTheme[]; }",
+          "type": "import(\"../Select/Select.svelte\").SelectProps & { themes?: CarbonTheme[]; }",
          "value": "{     themes: themeKeys,     labelText: \"Themes\",     hideLabel: false,   }",
          "isFunction": false,
          "isFunctionDeclaration": false,
@ -14253,7 +14257,7 @@
      "moduleExports": [],
      "slots": [],
      "events": [
-        { "type": "forwarded", "name": "clear", "element": "Search" },
+        { "type": "dispatched", "name": "clear", "detail": "null" },
        { "type": "forwarded", "name": "change", "element": "Search" },
        { "type": "forwarded", "name": "input", "element": "Search" },
        { "type": "forwarded", "name": "focus", "element": "Search" },
--- a/docs/src/pages/components/CodeSnippet.svx
+++ b/docs/src/pages/components/CodeSnippet.svx
@ -36,7 +36,7 @@ You can override the default copy functionality with your own implementation. Se

 ## Default (single-line)

-<CodeSnippet code="yarn add -D carbon-components-svelte" />
+<CodeSnippet code="npm i carbon-components-svelte" />

 ## Overriding copy functionality

@ -50,7 +50,7 @@ In this example, we use the open source module [clipboard-copy](https://github.c

 To prevent text from being copied entirely, pass a no-op function to the `copy` prop.

-<CodeSnippet code="yarn add -D carbon-components-svelte" copy={() => {}} />
+<CodeSnippet code="npm i carbon-components-svelte" copy={() => {}} />

 ## Inline

@ -104,7 +104,7 @@ Use the `showMoreText` and `showLessText` props to override the default "Show mo

 The `disabled` prop applies only to the `"single"` and `"multi"` code snippet types.

-<CodeSnippet disabled code="yarn add -D carbon-components-svelte" />
+<CodeSnippet disabled code="npm i carbon-components-svelte" />
 <br />
 <CodeSnippet disabled type="multi" code="{comment}" />

--- a/docs/src/pages/framed/CodeSnippet/CodeSnippetOverride.svelte
+++ b/docs/src/pages/framed/CodeSnippet/CodeSnippetOverride.svelte
@ -4,6 +4,6 @@
 </script>

 <CodeSnippet
-  code="yarn add -D carbon-components-svelte"
+  code="npm i carbon-components-svelte"
  copy="{(text) => copy(text)}"
 />
--- a/docs/src/pages/index.svelte
+++ b/docs/src/pages/index.svelte
@ -21,9 +21,10 @@
  metatags.description =
    "The Svelte implementation of the Carbon Design System featuring UI components, icons, pictograms, and charts.";

-  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 installNpm = "npm i carbon-components-svelte";
+  const installPnpm = "pnpm i carbon-components-svelte";
+  const installYarn = "yarn add carbon-components-svelte";
+  const installBun = "bun add carbon-components-svelte";
  const themes = {
    white: "White",
    g10: "Gray 10",
@ -84,20 +85,24 @@
    </Row>
    <Row style="margin-bottom: var(--cds-layout-02)">
      <Column noGutter>
-        <Tabs>
-          <Tab label="Yarn" />
+        <Tabs autoWidth>
          <Tab label="NPM" />
          <Tab label="pnpm" />
+          <Tab label="Yarn" />
+          <Tab label="Bun" />
          <div slot="content" style="margin: 1rem -1rem">
-            <TabContent>
-              <CodeSnippet code="{installYarn}" />
-            </TabContent>
            <TabContent>
              <CodeSnippet code="{installNpm}" />
            </TabContent>
            <TabContent>
              <CodeSnippet code="{installPnpm}" />
            </TabContent>
+            <TabContent>
+              <CodeSnippet code="{installYarn}" />
+            </TabContent>
+            <TabContent>
+              <CodeSnippet code="{installBun}" />
+            </TabContent>
          </div>
        </Tabs>
      </Column>
@ -124,7 +129,7 @@

    <Row>
      <Column max="{8}" xlg="{8}" noGutter>
-        <Tabs>
+        <Tabs autoWidth>
          <Tab label="CSS StyleSheet" />
          <Tab label="SCSS" />
          <svelte:fragment slot="content">
@ -230,7 +235,7 @@
        <TileCard
          borderBottom
          title="Carbon Icons Svelte"
-          subtitle="2,300+ icons"
+          subtitle="2,400+ icons"
          target="_blank"
          href="https://github.com/carbon-design-system/carbon-icons-svelte"
        />
--- a/package-lock.json
+++ b/package-lock.json
@ -1,12 +1,12 @@
 {
  "name": "carbon-components-svelte",
-  "version": "0.85.2",
+  "version": "0.85.3",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "carbon-components-svelte",
-      "version": "0.85.2",
+      "version": "0.85.3",
      "hasInstallScript": true,
      "license": "Apache-2.0",
      "dependencies": {
@ -27,10 +27,10 @@
        "rollup-plugin-terser": "^7.0.2",
        "sass": "^1.49.11",
        "standard-version": "^9.5.0",
-        "sveld": "^0.20.2",
+        "sveld": "^0.20.3",
        "svelte": "^4.2.10",
        "svelte-check": "^3.6.4",
-        "typescript": "^4.7.4"
+        "typescript": "^5.6.3"
      }
    },
    "node_modules/@ampproject/remapping": {
@ -3075,9 +3075,9 @@
      }
    },
    "node_modules/sveld": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/sveld/-/sveld-0.20.2.tgz",
-      "integrity": "sha512-pd/RZ4TR7oaX6XphE8uhwAjKIVw1lg19aysYM5lYpD97AthlAJD8kSEgtEXHXw6xFYXsfnhrj0XxGHnbKFsnlA==",
+      "version": "0.20.3",
+      "resolved": "https://registry.npmjs.org/sveld/-/sveld-0.20.3.tgz",
+      "integrity": "sha512-8BFxsG65J/25/+ShuljW4xv2Ax5VtZYnDUyiYt83YS+VS3qGDifppzAsX10IVUuhJpJyEfwOUBGWPeoPdsfdew==",
      "dev": true,
      "dependencies": {
        "@rollup/plugin-node-resolve": "^13.3.0",
@ -3150,19 +3150,6 @@
        }
      }
    },
-    "node_modules/sveld/node_modules/typescript": {
-      "version": "5.5.4",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.5.4.tgz",
-      "integrity": "sha512-Mtq29sKDAEYP7aljRgtPOpTvOfbwRWlS6dPRzwjdE+C0R4brX/GUyhHSecbHMFLNBLcJIPt9nl9yG5TZ1weH+Q==",
-      "dev": true,
-      "bin": {
-        "tsc": "bin/tsc",
-        "tsserver": "bin/tsserver"
-      },
-      "engines": {
-        "node": ">=14.17"
-      }
-    },
    "node_modules/svelte": {
      "version": "4.2.19",
      "resolved": "https://registry.npmjs.org/svelte/-/svelte-4.2.19.tgz",
@ -3208,19 +3195,6 @@
        "svelte": "^3.55.0 || ^4.0.0-next.0 || ^4.0.0 || ^5.0.0-next.0"
      }
    },
-    "node_modules/svelte-check/node_modules/typescript": {
-      "version": "5.5.4",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.5.4.tgz",
-      "integrity": "sha512-Mtq29sKDAEYP7aljRgtPOpTvOfbwRWlS6dPRzwjdE+C0R4brX/GUyhHSecbHMFLNBLcJIPt9nl9yG5TZ1weH+Q==",
-      "dev": true,
-      "bin": {
-        "tsc": "bin/tsc",
-        "tsserver": "bin/tsserver"
-      },
-      "engines": {
-        "node": ">=14.17"
-      }
-    },
    "node_modules/svelte-preprocess": {
      "version": "5.1.4",
      "resolved": "https://registry.npmjs.org/svelte-preprocess/-/svelte-preprocess-5.1.4.tgz",
@ -3446,16 +3420,16 @@
      "dev": true
    },
    "node_modules/typescript": {
-      "version": "4.9.5",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz",
-      "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==",
+      "version": "5.6.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.6.3.tgz",
+      "integrity": "sha512-hjcS1mhfuyi4WW8IWtjP7brDrG2cuDZukyrYrSauoXGNgx0S7zceP07adYkJycEr56BOUTNPzbInooiN3fn1qw==",
      "dev": true,
      "bin": {
        "tsc": "bin/tsc",
        "tsserver": "bin/tsserver"
      },
      "engines": {
-        "node": ">=4.2.0"
+        "node": ">=14.17"
      }
    },
    "node_modules/uglify-js": {
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "carbon-components-svelte",
-  "version": "0.85.2",
+  "version": "0.85.3",
  "license": "Apache-2.0",
  "description": "Svelte implementation of the Carbon Design System",
  "svelte": "./src/index.js",
@ -57,10 +57,10 @@
    "rollup-plugin-terser": "^7.0.2",
    "sass": "^1.49.11",
    "standard-version": "^9.5.0",
-    "sveld": "^0.20.2",
+    "sveld": "^0.20.3",
    "svelte": "^4.2.10",
    "svelte-check": "^3.6.4",
-    "typescript": "^4.7.4"
+    "typescript": "^5.6.3"
  },
  "standard-version": {
    "skip": {
--- a/src/Breakpoint/Breakpoint.svelte
+++ b/src/Breakpoint/Breakpoint.svelte
@ -40,6 +40,7 @@
    max: size == "max",
  };
  $: if (size != undefined)
+    // svelte-ignore reactive_declaration_non_reactive_property
    dispatch("change", { size, breakpointValue: breakpoints[size] });
 </script>

--- a/src/ComboBox/ComboBox.svelte
+++ b/src/ComboBox/ComboBox.svelte
@ -3,6 +3,7 @@
   * @typedef {any} ComboBoxItemId
   * @typedef {{ id: ComboBoxItemId; text: string; disabled?: boolean; }} ComboBoxItem
   * @event {{ selectedId: ComboBoxItemId; selectedItem: ComboBoxItem }} select
+   * @event {KeyboardEvent | MouseEvent} clear
   * @slot {{ item: ComboBoxItem; index: number }}
   */

--- a/src/DataTable/DataTable.svelte
+++ b/src/DataTable/DataTable.svelte
@ -2,12 +2,12 @@
  /**
   * @typedef {string} DataTableKey
   * @typedef {any} DataTableValue
-   * @typedef {{ key: DataTableKey; empty: boolean; display?: (item: Value, row: DataTableRow) => DataTableValue; sort?: false | ((a: DataTableValue, b: DataTableValue) => number); columnMenu?: boolean; width?: string; minWidth?: string; }} DataTableEmptyHeader
-   * @typedef {{ key: DataTableKey; value: DataTableValue; display?: (item: Value, row: DataTableRow) => DataTableValue; sort?: false | ((a: DataTableValue, b: DataTableValue) => number); columnMenu?: boolean; width?: string; minWidth?: string; }} DataTableNonEmptyHeader
+   * @typedef {{ key: DataTableKey; empty: boolean; display?: (item: DataTableValue, row: DataTableRow) => DataTableValue; sort?: false | ((a: DataTableValue, b: DataTableValue) => number); columnMenu?: boolean; width?: string; minWidth?: string; }} DataTableEmptyHeader
+   * @typedef {{ key: DataTableKey; value: DataTableValue; display?: (item: DataTableValue, row: DataTableRow) => DataTableValue; sort?: false | ((a: DataTableValue, b: DataTableValue) => number); columnMenu?: boolean; width?: string; minWidth?: string; }} DataTableNonEmptyHeader
   * @typedef {DataTableNonEmptyHeader | DataTableEmptyHeader} DataTableHeader
   * @typedef {{ id: any; [key: string]: DataTableValue; }} DataTableRow
   * @typedef {any} DataTableRowId
-   * @typedef {{ key: DataTableKey; value: DataTableValue; display?: (item: Value, row: DataTableRow) => DataTableValue; }} DataTableCell
+   * @typedef {{ key: DataTableKey; value: DataTableValue; display?: (item: DataTableValue, row: DataTableRow) => DataTableValue; }} DataTableCell
   * @slot {{ row: DataTableRow; }} expanded-row
   * @slot {{ header: DataTableNonEmptyHeader; }} cell-header
   * @slot {{ row: DataTableRow; cell: DataTableCell; rowIndex: number; cellIndex: number; }} cell
--- a/src/DataTable/ToolbarSearch.svelte
+++ b/src/DataTable/ToolbarSearch.svelte
@ -1,5 +1,8 @@
 <script>
-  /** @restProps {input} */
+  /**
+   * @restProps {input}
+   * @event {null} clear
+   */

  /**
   * Specify the value of the search input
--- a/src/OverflowMenu/OverflowMenu.svelte
+++ b/src/OverflowMenu/OverflowMenu.svelte
@ -192,7 +192,7 @@
 <button
  bind:this="{buttonRef}"
  type="button"
-  aria-haspopup
+  aria-haspopup="true"
  aria-expanded="{open}"
  aria-label="{ariaLabel}"
  id="{id}"
--- a/src/TextInput/PasswordInput.svelte
+++ b/src/TextInput/PasswordInput.svelte
@ -88,7 +88,7 @@

  const ctx = getContext("Form");

-  $: isFluid = !!ctx && ctx.isFluid;
+  const isFluid = !!ctx && ctx.isFluid;
  $: helperId = `helper-${id}`;
  $: errorId = `error-${id}`;
  $: warnId = `warn-${id}`;
--- a/src/TextInput/TextInput.svelte
+++ b/src/TextInput/TextInput.svelte
@ -94,7 +94,7 @@
    dispatch("change", parse(e.target.value));
  };

-  $: isFluid = !!ctx && ctx.isFluid;
+  const isFluid = !!ctx && ctx.isFluid;
  $: error = invalid && !readonly;
  $: helperId = `helper-${id}`;
  $: errorId = `error-${id}`;
--- a/src/Theme/Theme.svelte
+++ b/src/Theme/Theme.svelte
@ -37,7 +37,7 @@

  /**
   * Override the default toggle props
-   * @type {import("../Toggle/Toggle").ToggleProps & { themes?: [labelA: CarbonTheme, labelB: CarbonTheme]; }}
+   * @type {import("../Toggle/Toggle.svelte").ToggleProps & { themes?: [labelA: CarbonTheme, labelB: CarbonTheme]; }}
   */
  export let toggle = {
    themes: ["white", "g100"],
@ -61,7 +61,7 @@

  /**
   * Override the default select props
-   * @type {import("../Select/Select").SelectProps & { themes?: CarbonTheme[]; }}
+   * @type {import("../Select/Select.svelte").SelectProps & { themes?: CarbonTheme[]; }}
   */
  export let select = {
    themes: themeKeys,
--- a/tests/CodeSnippet.test.svelte
+++ b/tests/CodeSnippet.test.svelte
@ -17,5 +17,5 @@
  on:expand
  on:collapse
 >
-  yarn add -D carbon-components-svelte
+  yarn add carbon-components-svelte
 </CodeSnippet>
--- a/tests/ComboBox.test.svelte
+++ b/tests/ComboBox.test.svelte
@ -23,6 +23,9 @@
  on:select="{(e) => {
    console.log(e.detail.selectedId);
  }}"
+  on:clear="{(e) => {
+    console.log(e.detail);
+  }}"
  translateWithId="{(id) => {
    console.log(id); // "open" | "close"
    return id;
--- a/tests/CopyableCodeSnippet.test.svelte
+++ b/tests/CopyableCodeSnippet.test.svelte
@ -1,6 +1,6 @@
 <script lang="ts">
  export let copy = (text: string) => text;
-  export let code = "yarn add -D carbon-component-svelte";
+  export let code = "npm i carbon-component-svelte";

  import { CodeSnippet } from "../types";
 </script>
--- a/tsconfig.json
+++ b/tsconfig.json
@ -4,7 +4,7 @@
      "esModuleInterop": true,
      "forceConsistentCasingInFileNames": true,
      "ignoreDeprecations": "5.0",
-      "importsNotUsedAsValues": "error",
+      "verbatimModuleSyntax": true,
      "isolatedModules": true,
      "target": "ESNext",
      "module": "ESNext",
--- a/types/ComboBox/ComboBox.svelte.d.ts
+++ b/types/ComboBox/ComboBox.svelte.d.ts
@ -164,12 +164,12 @@ export default class ComboBox extends SvelteComponentTyped<
      selectedId: ComboBoxItemId;
      selectedItem: ComboBoxItem;
    }>;
+    clear: CustomEvent<KeyboardEvent | MouseEvent>;
    keydown: WindowEventMap["keydown"];
    keyup: WindowEventMap["keyup"];
    focus: WindowEventMap["focus"];
    blur: WindowEventMap["blur"];
-    paste: DocumentAndElementEventHandlersEventMap["paste"];
-    clear: WindowEventMap["clear"];
+    paste: WindowEventMap["paste"];
    scroll: WindowEventMap["scroll"];
  },
  { default: { item: ComboBoxItem; index: number }; titleText: {} }
--- a/types/DataTable/DataTable.svelte.d.ts
+++ b/types/DataTable/DataTable.svelte.d.ts
@ -8,7 +8,7 @@ export type DataTableValue = any;
 export interface DataTableEmptyHeader {
  key: DataTableKey;
  empty: boolean;
-  display?: (item: Value, row: DataTableRow) => DataTableValue;
+  display?: (item: DataTableValue, row: DataTableRow) => DataTableValue;
  sort?: false | ((a: DataTableValue, b: DataTableValue) => number);
  columnMenu?: boolean;
  width?: string;
@ -18,7 +18,7 @@ export interface DataTableEmptyHeader {
 export interface DataTableNonEmptyHeader {
  key: DataTableKey;
  value: DataTableValue;
-  display?: (item: Value, row: DataTableRow) => DataTableValue;
+  display?: (item: DataTableValue, row: DataTableRow) => DataTableValue;
  sort?: false | ((a: DataTableValue, b: DataTableValue) => number);
  columnMenu?: boolean;
  width?: string;
@ -37,7 +37,7 @@ export type DataTableRowId = any;
 export interface DataTableCell {
  key: DataTableKey;
  value: DataTableValue;
-  display?: (item: Value, row: DataTableRow) => DataTableValue;
+  display?: (item: DataTableValue, row: DataTableRow) => DataTableValue;
 }

 type RestProps = SvelteHTMLElements["div"];
--- a/types/DataTable/ToolbarSearch.svelte.d.ts
+++ b/types/DataTable/ToolbarSearch.svelte.d.ts
@ -69,14 +69,14 @@ export interface ToolbarSearchProps extends RestProps {
 export default class ToolbarSearch extends SvelteComponentTyped<
  ToolbarSearchProps,
  {
-    clear: WindowEventMap["clear"];
+    clear: CustomEvent<null>;
    change: WindowEventMap["change"];
    input: WindowEventMap["input"];
    focus: WindowEventMap["focus"];
    blur: WindowEventMap["blur"];
    keyup: WindowEventMap["keyup"];
    keydown: WindowEventMap["keydown"];
-    paste: DocumentAndElementEventHandlersEventMap["paste"];
+    paste: WindowEventMap["paste"];
  },
  {}
 > {}
--- a/types/DatePicker/DatePickerInput.svelte.d.ts
+++ b/types/DatePicker/DatePickerInput.svelte.d.ts
@ -110,7 +110,7 @@ export default class DatePickerInput extends SvelteComponentTyped<
    keydown: WindowEventMap["keydown"];
    keyup: WindowEventMap["keyup"];
    blur: WindowEventMap["blur"];
-    paste: DocumentAndElementEventHandlersEventMap["paste"];
+    paste: WindowEventMap["paste"];
  },
  { labelText: {} }
 > {}
--- a/types/MultiSelect/MultiSelect.svelte.d.ts
+++ b/types/MultiSelect/MultiSelect.svelte.d.ts
@ -255,7 +255,7 @@ export default class MultiSelect extends SvelteComponentTyped<
    keydown: WindowEventMap["keydown"];
    keyup: WindowEventMap["keyup"];
    focus: WindowEventMap["focus"];
-    paste: DocumentAndElementEventHandlersEventMap["paste"];
+    paste: WindowEventMap["paste"];
  },
  { default: { item: MultiSelectItem; index: number }; titleText: {} }
 > {}
--- a/types/NumberInput/NumberInput.svelte.d.ts
+++ b/types/NumberInput/NumberInput.svelte.d.ts
@ -155,7 +155,7 @@ export default class NumberInput extends SvelteComponentTyped<
    keyup: WindowEventMap["keyup"];
    focus: WindowEventMap["focus"];
    blur: WindowEventMap["blur"];
-    paste: DocumentAndElementEventHandlersEventMap["paste"];
+    paste: WindowEventMap["paste"];
  },
  { label: {} }
 > {
--- a/types/Search/Search.svelte.d.ts
+++ b/types/Search/Search.svelte.d.ts
@ -119,7 +119,7 @@ export default class Search extends SvelteComponentTyped<
    blur: WindowEventMap["blur"];
    keydown: WindowEventMap["keydown"];
    keyup: WindowEventMap["keyup"];
-    paste: DocumentAndElementEventHandlersEventMap["paste"];
+    paste: WindowEventMap["paste"];
    clear: CustomEvent<null>;
  },
  { labelText: {} }
--- a/types/TextArea/TextArea.svelte.d.ts
+++ b/types/TextArea/TextArea.svelte.d.ts
@ -116,7 +116,7 @@ export default class TextArea extends SvelteComponentTyped<
    keyup: WindowEventMap["keyup"];
    focus: WindowEventMap["focus"];
    blur: WindowEventMap["blur"];
-    paste: DocumentAndElementEventHandlersEventMap["paste"];
+    paste: WindowEventMap["paste"];
  },
  { labelText: {} }
 > {}
--- a/types/TextInput/PasswordInput.svelte.d.ts
+++ b/types/TextInput/PasswordInput.svelte.d.ts
@ -146,7 +146,7 @@ export default class PasswordInput extends SvelteComponentTyped<
    keyup: WindowEventMap["keyup"];
    focus: WindowEventMap["focus"];
    blur: WindowEventMap["blur"];
-    paste: DocumentAndElementEventHandlersEventMap["paste"];
+    paste: WindowEventMap["paste"];
  },
  { labelText: {} }
 > {}
--- a/types/TextInput/TextInput.svelte.d.ts
+++ b/types/TextInput/TextInput.svelte.d.ts
@ -131,7 +131,7 @@ export default class TextInput extends SvelteComponentTyped<
    keyup: WindowEventMap["keyup"];
    focus: WindowEventMap["focus"];
    blur: WindowEventMap["blur"];
-    paste: DocumentAndElementEventHandlersEventMap["paste"];
+    paste: WindowEventMap["paste"];
  },
  { labelText: {} }
 > {}
--- a/types/Theme/Theme.svelte.d.ts
+++ b/types/Theme/Theme.svelte.d.ts
@ -38,7 +38,7 @@ export interface ThemeProps {
   * Override the default toggle props
   * @default { themes: ["white", "g100"], labelA: "", labelB: "", labelText: "Dark mode", hideLabel: false, }
   */
-  toggle?: import("../Toggle/Toggle").ToggleProps & {
+  toggle?: import("../Toggle/Toggle.svelte").ToggleProps & {
    themes?: [labelA: CarbonTheme, labelB: CarbonTheme];
  };

@ -46,7 +46,9 @@ export interface ThemeProps {
   * Override the default select props
   * @default { themes: themeKeys, labelText: "Themes", hideLabel: false, }
   */
-  select?: import("../Select/Select").SelectProps & { themes?: CarbonTheme[] };
+  select?: import("../Select/Select.svelte").SelectProps & {
+    themes?: CarbonTheme[];
+  };
 }

 export default class Theme extends SvelteComponentTyped<
--- a/types/TimePicker/TimePicker.svelte.d.ts
+++ b/types/TimePicker/TimePicker.svelte.d.ts
@ -104,7 +104,7 @@ export default class TimePicker extends SvelteComponentTyped<
    keyup: WindowEventMap["keyup"];
    focus: WindowEventMap["focus"];
    blur: WindowEventMap["blur"];
-    paste: DocumentAndElementEventHandlersEventMap["paste"];
+    paste: WindowEventMap["paste"];
  },
  { default: {}; labelText: {} }
 > {}
--- a/types/UIShell/HeaderSearch.svelte.d.ts
+++ b/types/UIShell/HeaderSearch.svelte.d.ts
@ -59,7 +59,7 @@ export default class HeaderSearch extends SvelteComponentTyped<
    focus: WindowEventMap["focus"];
    blur: WindowEventMap["blur"];
    keydown: WindowEventMap["keydown"];
-    paste: DocumentAndElementEventHandlersEventMap["paste"];
+    paste: WindowEventMap["paste"];
  },
  { default: { result: HeaderSearchResult; index: number } }
 > {}
--- a/types/icons/Search.svelte.d.ts
+++ b/types/icons/Search.svelte.d.ts
@ -1,17 +0,0 @@
-/// <reference types="svelte" />
-import { SvelteComponentTyped } from "svelte";
-
-export interface SearchProps
-  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["svg"]> {
-  /**
-   * @default 16
-   */
-  size?: number;
-
-  /**
-   * @default undefined
-   */
-  title?: undefined;
-}
-
-export default class Search extends SvelteComponentTyped<SearchProps, {}, {}> {}