figma-plugin-utilities 0.5.1 → 1.0.0-rc.0

package/CHANGELOG.md

@@ -2,10 +2,59 @@
 
 ## [Unreleased]
 
+### Breaking
+- Needs Svelte 5.35 or later: `svelte` is a peer dependency, `^5.35.0`, as the kit's is, and the optional `@sveltejs/vite-plugin-svelte` peer is `^4.0.0`. The components are Svelte 5 runes components with typed props, as the kit's are, so their events are callback props that get what was `event.detail`, and their named slots are snippets. See figma-ui3-kit-svelte's changelog for how a call changes
+- Renamed, component by component:
+
+  | Component | Svelte 4 | Svelte 5 |
+  | --- | --- | --- |
+  | CheckboxCard | `on:change`; slot `secondary` | `onchange({ checked })`; snippet `secondary` |
+  | CodeExportModal | `onClose`; slot `controls` | `onclose`; snippet `controls` |
+  | DataTable | `on:select`, `on:column`; slots `action` and `editor` with `let:row`, `note` | `onselect(row)`, `oncolumn(index)`; snippets `action(row)`, `editor(row)`, `note` |
+  | FieldGroup | slot `hint` | `hint` takes a snippet as well as a string |
+  | Footer | `className`; slots `left`, `right` | `class`, as the kit's components; snippets `left`, `right` |
+  | Header | `className`; slots `left`, `center`, `right` | `class`; snippets `left`, `center`, `right` |
+  | ListItem | `on:click`, `on:menuToggle`, `on:menuSelect`, `on:menuClose`; slots `badge`, `actions` | `onclick({ id })`, `onmenutoggle({ id, open })`, `onmenuselect({ id, action })`, `onmenuclose({ id })`; snippets `badge`, `actions` |
+  | PluginLayout | `className` | `class` |
+  | MappingChip | `on:click`; slot `lead` | `onclick(event)`, not while disabled; snippet `lead` |
+  | RampCurve | `on:change`, `on:select` | `onchange(patch)`, `onselect(index)` |
+  | Section | slot `actions` | snippet `actions` |
+  | StatusBar | `on:close` | `onclose()` |
+  | SteppedField | `on:step` | `onstep(step)`, -1 or 1 |
+
+### Added
+- Types for plugins written in TypeScript: `import type { DataTableRow, DataTableColumn, DataTableCell } from "figma-plugin-utilities"`. The entry points are TypeScript, so the types reach a plugin that installs the package from npm. ListItem takes the type of its `menuItems`, so `onmenuselect` hands back the row's own `value` type
+- Typed messages: with the messages typed as one union per direction, `const send: Send<ToPlugin> = sendToPlugin` (or `sendToUI` in `code.ts`) checks each message's name and data, and `createMessageHandler<ToUI>({ … })` hands each handler its own message. `Send`, `Handlers` and `Msg` come from `figma-plugin-utilities` and `figma-plugin-utilities/lib/messages`. Untyped calls work as before
+
+### Changed
+- `sendToPlugin` copies the arrays and plain objects in its data before posting them, so a message can hold Svelte 5 `$state`, a Proxy that postMessage can't clone
+
+### Fixed
+- StatusBar: an error or warning that follows an info or success message within 4 seconds stays until it's dismissed, instead of closing on the earlier message's timer
+- DataTable and EmptyState: two columns or actions with the same label no longer break the table or the buttons
+
+## [0.6.0] - 2026-10-10
+
+### Added
+- `figma-plugin-utilities/vite` — `figmaPluginConfig(import.meta.url)`, a plugin's whole Vite config: each thread built on its own (`vite build && vite build --mode code`), so both may import the same module, the UI's CSS and JS inlined into `dist/index.html`, `src/manifest.json` copied, at `es2017`. `moduleScript` inlines the UI as a module script. `ui3InlineSvg` and `inlineFigmaHtml` are exported too. `vite` and `@sveltejs/vite-plugin-svelte` are optional peer dependencies
+- **EmptyState** — `iconSize`, the icon's size in px (24 by default), for an icon given as SVG markup
+- **FieldGroup** — `hint`, a line of secondary text under the control: what to enter, or what the choice does. Empty shows none, so a conditional hint is a string; the `hint` slot takes markup and always shows. Like the label, it can't be selected. The hint and the control's error take the label's size: body-medium, or body-small in a small group. The Figma component has the hint too, which Code Connect and the mockup builder read
+
+### Changed
+- **figma-ui3-kit-svelte** peer is `^0.8.0`, whose Input, Textarea, Dropdown and Dropzone size their error by the `--field-error-*` properties FieldGroup sets
+- `resizeToFit` — measures only the `container` you pass, and without one or a `height` warns and leaves the window as it is. It measured `document.body` by default, which fills the window, so the window could grow but never shrink
+
+### Fixed
+- `sendToUI`, `sendToPlugin` — a `type` field in the data no longer replaces the message's type
+- `formatErrorMessage` — the network, CORS and JSON messages follow the copy guidelines: no "Please" or "Network error:" prefix
+- **FieldGroup** — `labelFor` ties the label to its control, so clicking the label focuses an `Input` or `Textarea`. It was passed to Label as `for`, which Label doesn't take, so no label was tied to anything
+- **EmptyState** — `icon`, `action` and `actions` have types, so a plugin's `svelte-check` with `checkJs` passes
+- `autoResize` — the options default to `{ container: null }`, which matches their type; without a container it still warns and does nothing
+
 ## [0.5.1] - 2026-10-07
 
 ### Changed
-- Built against **figma-ui3-kit-svelte** 0.7.0, which `confirmDiscardChanges` needs for Modal's `beforeClose`, and **ConfirmModal** over another modal for Escape to close only the top one
+- **figma-ui3-kit-svelte** is a peer dependency, `^0.7.0`: install it beside the utilities. 0.7.0 is what `confirmDiscardChanges` needs for Modal's `beforeClose`, and **ConfirmModal** over another modal for Escape to close only the top one
 
 ## [0.5.0] - 2026-10-07
 
@@ -61,7 +110,7 @@
 - The dev-mode `console.warn` **FieldGroup** logged when `label` was set without `labelFor` — a `Dropdown` is a button and cannot be a `<label for>` target, so it fired on correct code. Dropped in the a11y pass, recorded late
 
 ### Fixed
-- **StatusBar** — the default `info` type sets `color: var(--figma-color-text)`. The `error`, `success` and `warning` types each set a foreground; the default one relied on inheritance, and nothing up the tree sets `color`, so the message rendered in the UA's black on the dark theme's grey bar
+- **StatusBar** — the default `info` type sets `color: var(--figma-color-text)`. The `error`, `success` and `warning` types each set a foreground; the default one relied on inheritance, and nothing up the tree sets `color`, so the message rendered in the UA's black on the dark theme's gray bar
 - **EmptyState** — the actions are a keyed `{#each}`, so swapping one action for another reuses the right button rather than repainting the row
 - **docs** — `figma-frame-builders` is documented, `sanitizeInput` no longer claims to escape HTML (it stringifies, truncates, strips control characters and trims), and `formatErrorMessage`, `handleAsyncError`, `withErrorHandling` and `logError` are documented with their real signatures. `withErrorHandling(fn, operation)` calls `fn()` with no arguments and returns its result; it was documented as returning a wrapped function
 

package/README.md

@@ -5,9 +5,11 @@ Shared Svelte components and utilities for Figma plugins.
 ## Installation
 
 ```bash
-npm install figma-plugin-utilities
+npm install figma-plugin-utilities figma-ui3-kit-svelte
 ```
 
+The components are built from `figma-ui3-kit-svelte`, a peer dependency: install it beside the utilities.
+
 ## Usage
 
 ### Import Everything
@@ -75,22 +77,22 @@ import { sendToPlugin, createMessageHandler } from "figma-plugin-utilities/lib";
 | Component | Description |
 |-----------|-------------|
 | `PluginLayout` | Main content wrapper with scrollable area |
-| `Header` | Header bar with `left`, `center`, `right` slots and optional title |
+| `Header` | Header bar with `left`, `center`, `right` snippets and optional title |
 | `Footer` | Footer with `right`, `split`, and `full` layout variants |
 | `StatusBar` | Toast notifications with auto-dismiss (info/success/error/warning) |
-| `EmptyState` | Empty/error states with optional icon and action buttons; `size`, `centered`, and `role="alert"` for failures |
-| `ListItem` | Selectable list items with metadata and `badge` slots, an action menu (`menuOpen`, `menuToggle`, `menuClose`) |
-| `LoadingState` | Centred message as `role="status"` (text only, no spinner) |
-| `FieldGroup` | Label + input wrapper; `labelFor` binds the label to a text control |
+| `EmptyState` | Empty/error states with optional icon and action buttons; `size`, `iconSize`, `centered`, and `role="alert"` for failures |
+| `ListItem` | Selectable list items with metadata and a `badge` snippet, an action menu (`menuOpen`, `onmenutoggle`, `onmenuclose`) |
+| `LoadingState` | Centered message as `role="status"` (text only, no spinner) |
+| `FieldGroup` | Label + input wrapper; `labelFor` binds the label to a text control, `hint` adds a line under it |
 | `CheckboxCard` | Large checkbox with card styling and better touch targets; `change` event |
-| `Section` | Titled group of fields as in Figma's panels: a `Header` with the title and an `actions` slot, content padded by the section itself |
-| `DataTable` | Named rows with a cell per column (a set at each breakpoint, a style before and after): columns with their own width and alignment, a read-only mode with table roles, row selection with an `editor` slot, notes as badges, with tooltips, and a `+N` count past two, an `action` slot, values as badges or variable chips, removed rows and a marked column |
+| `Section` | Titled group of fields as in Figma's panels: a `Header` with the title and an `actions` snippet, content padded by the section itself |
+| `DataTable` | Named rows with a cell per column (a set at each breakpoint, a style before and after): columns with their own width and alignment, a read-only mode with table roles, row selection with an `editor` snippet, notes as badges, with tooltips, and a `+N` count past two, an `action` snippet, values as badges or variable chips, removed rows and a marked column |
 | `FieldGrid` | Fields side by side in equal columns (`columns`, default 2) that shrink below their content |
 | `SteppedField` | A field with − and + icon buttons after it, as one grid cell; `step` event with -1 or 1 |
 | `LadderBadges` | A scale's sizes as badges, outlined where used and archived where not, each with the caller's tooltip |
 | `RampCurve` | A ramp's Bézier at the breakpoint shown, in the caller's units: handles for the ends and the bend at the smallest and largest breakpoint, blends between; `change` and `select` events |
 | `MappingChip` | One side of a source → target row: a filled 24px chip with a lead icon or chit, a truncating label, a `preview` after a dot and a trailing `count`; `click` event |
-| `CodeExportModal` | Read-only code in a modal with a copy button that reads "Copied" for 2s; a `controls` slot above the code |
+| `CodeExportModal` | Read-only code in a modal with a copy button that reads "Copied" for 2s; a `controls` snippet above the code |
 
 Every component also takes a `class` (or `className`) prop.
 
@@ -98,12 +100,12 @@ Every component also takes a `class` (or `className`) prop.
 
 ```svelte
 <Header title="My Plugin">
-  <svelte:fragment slot="left">
-    <IconButton iconName={IconBack} on:click={goBack} />
-  </svelte:fragment>
-  <svelte:fragment slot="right">
+  {#snippet left()}
+    <IconButton iconName={IconBack} onclick={goBack} />
+  {/snippet}
+  {#snippet right()}
     <IconButton iconName={IconSettings} />
-  </svelte:fragment>
+  {/snippet}
 </Header>
 
 <!-- Without border -->
@@ -120,12 +122,12 @@ Every component also takes a `class` (or `className`) prop.
 
 <!-- Split layout -->
 <Footer variant="split">
-  <svelte:fragment slot="left">
+  {#snippet left()}
     <Button variant="secondary">Cancel</Button>
-  </svelte:fragment>
-  <svelte:fragment slot="right">
+  {/snippet}
+  {#snippet right()}
     <Button variant="primary">Save</Button>
-  </svelte:fragment>
+  {/snippet}
 </Footer>
 
 <!-- Full-width buttons -->
@@ -140,7 +142,7 @@ Every component also takes a `class` (or `className`) prop.
 <StatusBar 
   message={status.message} 
   type={status.type} 
-  on:close={() => status = { message: '', type: 'info' }} 
+  onclose={() => status = { message: '', type: 'info' }} 
 />
 ```
 
@@ -170,8 +172,8 @@ Types: `info`, `success`, `error`, `warning`. Auto-dismisses after 4s for `info`
     { label: 'Edit', value: 'edit' },
     { label: 'Delete', value: 'delete' }
   ]}
-  on:click={handleSelect}
-  on:menuSelect={handleMenuAction}
+  onclick={handleSelect}
+  onmenuselect={handleMenuAction}
 >
   <span>Additional metadata</span>
 </ListItem>
@@ -185,7 +187,7 @@ Large checkbox with card-style background and better touch targets.
 <!-- Basic usage -->
 <CheckboxCard
   checked={isSelected}
-  on:change={handleToggle}
+  onchange={handleToggle}
 >
   Small
 </CheckboxCard>
@@ -193,10 +195,10 @@ Large checkbox with card-style background and better touch targets.
 <!-- With secondary text -->
 <CheckboxCard
   checked={isSelected}
-  on:change={handleToggle}
+  onchange={handleToggle}
 >
   Small
-  <svelte:fragment slot="secondary">400px</svelte:fragment>
+  {#snippet secondary()}400px{/snippet}
 </CheckboxCard>
 
 <!-- Disabled state -->
@@ -224,7 +226,7 @@ Large checkbox with card-style background and better touch targets.
 <SteppedField
   downLabel="Step {set.name} down"
   upLabel="Step {set.name} up"
-  on:step={(e) => setOffset(set.offset + e.detail)}
+  onstep={(step) => setOffset(set.offset + step)}
 >
   <FieldGroup label="Steps off the curve" labelFor="offset" size="small">
     <NumericInput id="offset" value={set.offset} precision={0} />
@@ -255,11 +257,11 @@ Each badge's accessible name is `"{value}px, used"` or `"{value}px, unused"`.
   count={row.uses}
   tone="secondary"
   title="Select these icons"
-  on:click={() => reveal(row)}
+  onclick={() => reveal(row)}
 />
 ```
 
-`iconName` or `chit` (which wins) adds a lead that hangs into the padding; `preview` follows the label as "label · preview"; `tone` is `default`, `secondary` or `component`; `selected` draws the selection border. The `lead` slot takes a marker ahead of the lead, and `element` binds the button.
+`iconName` or `chit` (which wins) adds a lead that hangs into the padding; `preview` follows the label as "label · preview"; `tone` is `default`, `secondary` or `component`; `selected` draws the selection border. The `lead` snippet takes a marker ahead of the lead, and `element` binds the button.
 
 ### RampCurve
 
@@ -279,8 +281,8 @@ Each badge's accessible name is `"{value}px, used"` or `"{value}px, unused"`.
   bottomLabel="Smallest level"
   topLabel="Largest level"
   along="levels"
-  on:change={(e) => (ramp = { ...ramp, ...e.detail })}
-  on:select={(e) => (selected = e.detail)}
+  onchange={(patch) => (ramp = { ...ramp, ...patch })}
+  onselect={(index) => (selected = index)}
 />
 ```
 
@@ -295,11 +297,11 @@ Each badge's accessible name is `"{value}px, used"` or `"{value}px, unused"`.
   value={css}
   ariaLabel="Exported CSS"
   copyLabel="Copy CSS"
-  onClose={() => (exportOpen = false)}
+  onclose={() => (exportOpen = false)}
 >
-  <svelte:fragment slot="controls">
+  {#snippet controls()}
     <SegmentedControl …/>
-  </svelte:fragment>
+  {/snippet}
 </CodeExportModal>
 ```
 
@@ -307,7 +309,7 @@ Copies with `execCommand`, since the plugin iframe isn't granted clipboard-write
 
 ## Utilities
 
-### Messages (`lib/messages.js`)
+### Messages (`lib/messages.ts`)
 
 ```javascript
 // Send message to plugin code
@@ -320,7 +322,27 @@ window.onmessage = createMessageHandler({
 });
 ```
 
-### Colors (`lib/colors.js`)
+In TypeScript, type the messages as one union per direction, and the helpers check each message's name and data:
+
+```ts
+// messages.ts
+export type ToPlugin = { type: "run"; options: Options } | { type: "cancel" };
+export type ToUI = { type: "done"; count: number };
+
+// PluginUI.svelte
+import { sendToPlugin, createMessageHandler, type Send } from "figma-plugin-utilities";
+const send: Send<ToPlugin> = sendToPlugin;
+send("run", { options }); // the data is required, since `run` has it
+window.onmessage = createMessageHandler<ToUI>({ done: (msg) => (count = msg.count) });
+
+// code.ts
+import { sendToUI } from "figma-plugin-utilities/lib/figma-helpers";
+import type { Send } from "figma-plugin-utilities/lib/messages";
+const send: Send<ToUI> = sendToUI;
+figma.ui.onmessage = (msg: ToPlugin) => { /* … */ };
+```
+
+### Colors (`lib/colors.ts`)
 
 ```javascript
 // Convert between formats (Figma uses 0-1 range)
@@ -333,7 +355,7 @@ const ratio = getContrastRatio(color1, color2);
 const passes = meetsContrastLevel(ratio, "AA"); // true/false
 ```
 
-### Validation (`lib/validation.js`)
+### Validation (`lib/validation.ts`)
 
 ```javascript
 const urlResult = validateUrl("https://example.com");
@@ -353,7 +375,7 @@ sanitizeInput(input, 50); // stringify, truncate to maxLength, strip control cha
 isEmpty(""); // true — also for [] and {}
 ```
 
-### Error Handling (`lib/errorHandling.js`)
+### Error Handling (`lib/errorHandling.ts`)
 
 ```javascript
 // Safe async operations
@@ -372,13 +394,13 @@ const parsed = parseJsonSafe(jsonString);
 // { ok: true, value: {...} } or { ok: false, error: "..." }
 ```
 
-### Resize (`lib/resize.js`)
+### Resize (`lib/resize.ts`)
 
 Utilities for dynamically resizing the plugin window to fit its content.
 
 ```javascript
-// One-time resize to fit content
-resizeToFit({ width: 300, minHeight: 100, maxHeight: 600 });
+// One-time resize to fit content: measure a naturally-flowing wrapper, not document.body
+resizeToFit({ container: myContainerEl, width: 300, minHeight: 100, maxHeight: 600 });
 
 // Watch for content changes and auto-resize
 const cleanup = autoResize({

package/package.json

@@ -1,28 +1,48 @@
 {
   "name": "figma-plugin-utilities",
-  "version": "0.5.1",
+  "version": "1.0.0-rc.0",
   "description": "Shared Svelte components and utilities for Figma plugins",
   "type": "module",
-  "svelte": "./src/index.js",
-  "main": "./src/index.js",
-  "module": "./src/index.js",
+  "svelte": "./src/index.ts",
+  "main": "./src/index.ts",
+  "module": "./src/index.ts",
   "exports": {
     ".": {
-      "svelte": "./src/index.js",
-      "import": "./src/index.js",
-      "default": "./src/index.js"
+      "types": "./src/index.ts",
+      "svelte": "./src/index.ts",
+      "import": "./src/index.ts",
+      "default": "./src/index.ts"
     },
     "./components": {
-      "svelte": "./src/components/index.js",
-      "import": "./src/components/index.js",
-      "default": "./src/components/index.js"
+      "types": "./src/components/index.ts",
+      "svelte": "./src/components/index.ts",
+      "import": "./src/components/index.ts",
+      "default": "./src/components/index.ts"
     },
     "./lib": {
-      "import": "./src/lib/index.js",
-      "default": "./src/lib/index.js"
+      "types": "./src/lib/index.ts",
+      "import": "./src/lib/index.ts",
+      "default": "./src/lib/index.ts"
     },
-    "./lib/*": {
-      "import": "./src/lib/*.js"
+    "./lib/errorHandling": {
+      "types": "./src/lib/errorHandling.ts",
+      "import": "./src/lib/errorHandling.ts",
+      "default": "./src/lib/errorHandling.ts"
+    },
+    "./lib/validation": {
+      "types": "./src/lib/validation.ts",
+      "import": "./src/lib/validation.ts",
+      "default": "./src/lib/validation.ts"
+    },
+    "./lib/resize": {
+      "types": "./src/lib/resize.ts",
+      "import": "./src/lib/resize.ts",
+      "default": "./src/lib/resize.ts"
+    },
+    "./lib/messages": {
+      "types": "./src/lib/messages.ts",
+      "import": "./src/lib/messages.ts",
+      "default": "./src/lib/messages.ts"
     },
     "./lib/figma-helpers": {
       "types": "./src/lib/figma-helpers.ts",
@@ -58,6 +78,11 @@
       "types": "./src/lib/confirm.ts",
       "import": "./src/lib/confirm.ts",
       "default": "./src/lib/confirm.ts"
+    },
+    "./vite": {
+      "types": "./src/vite.d.ts",
+      "import": "./src/vite.js",
+      "default": "./src/vite.js"
     }
   },
   "files": [
@@ -84,25 +109,40 @@
   ],
   "author": "Marius Roosendaal",
   "license": "MIT",
+  "peerDependencies": {
+    "svelte": "^5.35.0",
+    "figma-ui3-kit-svelte": "^1.0.0-rc.0",
+    "@sveltejs/vite-plugin-svelte": "^4.0.0",
+    "vite": "^5.2.0"
+  },
+  "peerDependenciesMeta": {
+    "@sveltejs/vite-plugin-svelte": {
+      "optional": true
+    },
+    "vite": {
+      "optional": true
+    }
+  },
   "devDependencies": {
     "@eslint/js": "^9.39.2",
     "@figma/plugin-typings": "^1.138.0",
-    "@sveltejs/vite-plugin-svelte": "^3.0.2",
+    "@sveltejs/vite-plugin-svelte": "^4.0.4",
     "@types/node": "^22.13.4",
     "eslint": "^9.39.2",
     "eslint-plugin-svelte": "^3.23.0",
-    "figma-ui3-kit-svelte": "^0.7.0",
+    "figma-ui3-kit-svelte": "^1.0.0-rc.0",
     "globals": "^17.12.0",
     "prettier": "^3.9.8",
     "prettier-plugin-svelte": "^3.4.0",
-    "svelte": "^4.2.20",
+    "svelte": "^5.57.2",
+    "svelte-check": "^4.3.6",
     "svelte-eslint-parser": "^1.8.1",
     "typescript": "^5.9.3",
     "typescript-eslint": "^8.70.0",
     "vite": "^5.2.0"
   },
   "scripts": {
-    "lint": "tsc --noEmit && eslint . --ext .ts,.js,.svelte && npx prettier --check \"src/**/*.{js,ts,svelte,html,css}\"",
+    "lint": "tsc --noEmit && svelte-check --tsconfig ./tsconfig.json --fail-on-warnings && eslint . --ext .ts,.js,.svelte && npx prettier --check \"src/**/*.{js,ts,svelte,html,css}\"",
     "prettier": "npx prettier --write \"src/**/*.{js,ts,svelte,html,css}\""
   }
 }

package/src/components/CheckboxCard.svelte

@@ -1,5 +1,5 @@
-<script>
-  import { createEventDispatcher } from "svelte";
+<script lang="ts">
+  import type { Snippet } from "svelte";
   import { Checkbox } from "figma-ui3-kit-svelte";
 
   /**
@@ -7,62 +7,67 @@
    * Wraps the standard checkbox in a card-like layout
    *
    * @example
-   * <CheckboxCard
-   *   checked={isSelected}
-   *   on:change={handleToggle}
-   * >
+   * <CheckboxCard bind:checked={isSelected} onchange={handleToggle}>
    *   Small
    * </CheckboxCard>
    *
    * @example with secondary text
-   * <CheckboxCard
-   *   checked={isSelected}
-   *   on:change={handleToggle}
-   * >
+   * <CheckboxCard bind:checked={isSelected} onchange={handleToggle}>
    *   Small
-   *   <svelte:fragment slot="secondary">400px</svelte:fragment>
+   *   {#snippet secondary()}400px{/snippet}
    * </CheckboxCard>
    */
 
-  const dispatch = createEventDispatcher();
-
-  /** Whether checkbox is checked */
-  export let checked = false;
+  interface Props {
+    checked?: boolean;
+    disabled?: boolean;
+    /** The label */
+    children?: Snippet;
+    /** A line under the label, such as a size */
+    secondary?: Snippet;
+    /** After `checked` updates */
+    onchange?: (detail: { checked: boolean }) => void;
+  }
 
-  /** Whether checkbox is disabled */
-  export let disabled = false;
+  let {
+    checked = $bindable(),
+    disabled = false,
+    children,
+    secondary,
+    onchange,
+  }: Props = $props();
 
-  let cardEl;
+  let cardEl: HTMLDivElement | undefined = $state();
 
-  function handleChange(e) {
+  function handleChange(e: Event & { currentTarget: HTMLInputElement }) {
     if (disabled) return;
-    checked = e.target.checked;
-    dispatch("change", { checked });
+    checked = e.currentTarget.checked;
+    onchange?.({ checked });
   }
 
-  function handleCardClick(e) {
+  function handleCardClick(e: MouseEvent) {
     if (disabled) return;
     // Clicks inside the Checkbox component (label/input) are handled natively
-    if (e.target.closest(".checkbox-container")) return;
-    cardEl?.querySelector('input[type="checkbox"]')?.click();
+    if ((e.target as Element).closest(".checkbox-container")) return;
+    cardEl?.querySelector<HTMLInputElement>('input[type="checkbox"]')?.click();
   }
 </script>
 
-<!-- svelte-ignore a11y-click-events-have-key-events a11y-no-static-element-interactions -->
+<!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_static_element_interactions -->
 <!-- Keyboard users interact with the native checkbox input inside; this div is a mouse-only larger click target -->
 <div
   class="checkbox-card"
   class:disabled
   aria-disabled={disabled || undefined}
   bind:this={cardEl}
-  on:click={handleCardClick}
+  onclick={handleCardClick}
 >
-  <Checkbox {checked} {disabled} on:change={handleChange}>
-    <slot />
+  <Checkbox {checked} {disabled} onchange={handleChange}>
+    {@render children?.()}
   </Checkbox>
-  {#if $$slots.secondary}
+  {#if secondary}
     <div class="checkbox-card__secondary">
-      <slot name="secondary" />
+      {@render secondary()}
     </div>
   {/if}
 </div>
@@ -91,8 +96,9 @@
     cursor: not-allowed;
   }
 
-  /* Custom checkbox styling for card variant */
-  .checkbox-card :global(.checkbox-box) {
+  /* Custom checkbox styling for card variant: an empty box takes the window's
+     fill. Checkbox's own rules style the checked, mixed and disabled ones. */
+  .checkbox-card :global(.checkbox-box:not(.checked, .mixed, .disabled)) {
     background-color: var(--figma-color-bg);
   }
 

package/src/components/CodeExportModal.svelte

@@ -2,28 +2,48 @@
   Read-only code in a modal, with a button that copies it. Each modal keeps
   its own "Copied" state, so copying one never marks the other.
 -->
-<script>
-  import { onDestroy } from "svelte";
+<script lang="ts">
+  import { onDestroy, type Snippet } from "svelte";
   import { Button, Modal, Textarea } from "figma-ui3-kit-svelte";
 
-  export let isOpen = false;
-  export let title;
-  export let value = "";
-  /** Names the code for assistive tech, e.g. "Exported token JSON". */
-  export let ariaLabel;
-  /** The copy button's label, e.g. "Copy JSON". */
-  export let copyLabel;
-  export let position = "bottom";
-  export let width = "medium";
-  export let height = "auto";
-  export let onClose = null;
+  interface Props {
+    isOpen?: boolean;
+    title: string;
+    value?: string;
+    /** Names the code for assistive tech, e.g. "Exported token JSON". */
+    ariaLabel: string;
+    /** The copy button's label, e.g. "Copy JSON". */
+    copyLabel: string;
+    position?: "center" | "left" | "right" | "bottom";
+    width?: string | number;
+    height?: string | number;
+    /** Options for what's exported, above the code */
+    controls?: Snippet;
+    /** X, Escape or a click outside */
+    onclose?: () => void;
+  }
+
+  let {
+    isOpen = $bindable(),
+    title,
+    value = "",
+    ariaLabel,
+    copyLabel,
+    position = "bottom",
+    width = "medium",
+    height = "auto",
+    controls,
+    onclose,
+  }: Props = $props();
 
-  let copied = false;
-  let copyTimer = null;
+  let copied = $state(false);
+  let copyTimer: ReturnType<typeof setTimeout> | undefined;
   onDestroy(() => clearTimeout(copyTimer));
 
   // Reopened, the button reads as it would before a copy.
-  $: if (isOpen) copied = false;
+  $effect.pre(() => {
+    if (isOpen) copied = false;
+  });
 
   // execCommand, not the Clipboard API: the plugin iframe isn't granted
   // clipboard-write.
@@ -53,24 +73,24 @@
 </script>
 
 <Modal
-  {isOpen}
+  bind:isOpen
   {title}
   {position}
   {width}
   {height}
   overlayPadding="0px"
-  {onClose}
+  {onclose}
 >
   <div class="export-content">
     <!-- Options for what's exported, above the code. -->
-    <slot name="controls" />
+    {@render controls?.()}
     <Textarea {value} readonly {ariaLabel} variant="code" />
   </div>
-  <svelte:fragment slot="footer-right">
-    <Button variant="primary" on:click={handleCopy}>
+  {#snippet footerRight()}
+    <Button variant="primary" onclick={handleCopy}>
       {copied ? "Copied" : copyLabel}
     </Button>
-  </svelte:fragment>
+  {/snippet}
 </Modal>
 
 <style>