@politiet/sheriff-web-components 2.13.1 → 2.14.0

package/dist/skill/SKILL.md

@@ -2,10 +2,11 @@
 name: sheriff-web-components
 description: >
     Assists developers using @politiet/sheriff-web-components made of Lit-based custom
-    elements with the sds-* prefix. Covers all 29 components (alert, button, card,
+    elements with the sds-* prefix. Covers all 33 components (alert, button, card,
     checkbox, checkbox-group, chip, details, details-group, dialog,
-    environment-banner, heading, icon, internal-header, loader, notification,
-    popover, process, process-step, radio, radio-group, select, stepper,
+    environment-banner, file-upload, file-upload-item, file-upload-file-list,
+    heading, icon, internal-header, loader, notification,
+    popover, process, process-step, radio, radio-group, search, select, stepper,
     stepper-step, switch, tag, text, textarea, textfield, tooltip), React
     wrappers, framework type definitions, form-associated elements, slots,
     events, and data-palette theming. Use when the user references sds-*
@@ -78,37 +79,41 @@ Every component has its own subpath export matching its tag name (`./sds-alert`
 
 All components use the `sds-` prefix. Sizes are `"lg"` | `"md"` | `"sm"`, default `"md"` — **except `sds-button`, which defaults to `"lg"`**. `sds-heading` and `sds-text` use the wider `"xl" | "lg" | "md" | "sm" | "xs"` scale.
 
-| Component                | Description                                   | Key Props                                                                                        |
-| ------------------------ | --------------------------------------------- | ------------------------------------------------------------------------------------------------ |
-| `sds-alert`              | Contextual alert banner                       | `variant`, `size`, `removable-label`, `data-palette`                                             |
-| `sds-button`             | Button or link-as-button                      | `variant`, `size`, `type`, `disabled`, `loading`, `icon`, `inverted`, `label`, `href`, `command` |
-| `sds-card`               | Content container; link card when `link` set  | `link`                                                                                           |
-| `sds-checkbox`           | Single checkbox                               | `label`, `name`, `value`, `checked`, `error`, `help-text`                                        |
-| `sds-checkbox-group`     | Grouped checkboxes with legend                | `legend`, `error-message`, `help-text`                                                           |
-| `sds-chip`               | Selectable or removable chip/pill             | `variant`, `checked`, `name`, `value`, `size`                                                    |
-| `sds-details`            | Expandable accordion                          | `open`, `standalone`, `name` (exclusive group)                                                   |
-| `sds-details-group`      | Wraps `sds-details` into one accordion group  | `outlined`, `name` (makes the group exclusive)                                                   |
-| `sds-dialog`             | Modal/dialog wrapping native `<dialog>`       | `open`, `modal`, `closedby`, `close-button-label`                                                |
-| `sds-environment-banner` | Environment/build strip for internal apps     | `env`, `build`                                                                                   |
-| `sds-heading`            | Semantic heading                              | `level`, `size`                                                                                  |
-| `sds-icon`               | Dynamic SVG icon                              | `name`, `size`, `label`, `color`                                                                 |
-| `sds-internal-header`    | App header for internal (non-public) apps     | `app-name`, `home-href`                                                                          |
-| `sds-loader`             | Loading spinner                               | `size`, `contrast`                                                                               |
-| `sds-notification`       | **Deprecated** — use `sds-alert`              | `variant`, `removable-label`                                                                     |
-| `sds-popover`            | Anchored popover built on the Popover API     | `placement`, `autoplacement`, `overscroll`                                                       |
-| `sds-process`            | Timeline / process list                       | `heading-level`                                                                                  |
-| `sds-process-step`       | Individual step in a process                 | `heading`, `timestamp`                                                                           |
-| `sds-radio`              | Single radio button                           | `label`, `name`, `value`, `checked`, `hide-label`                                                |
-| `sds-radio-group`        | Grouped radios with legend                    | `legend`, `direction`, `error-message`                                                           |
-| `sds-select`             | Dropdown select                               | `label`, `name`, `default-value`, `error-message`                                                |
-| `sds-stepper`            | Step indicator for multi-step flows           | `orientation`                                                                                    |
-| `sds-stepper-step`       | Individual step in a stepper                  | `complete`, `interactive`, `active`                                                              |
-| `sds-switch`             | Toggle switch                                 | `label`, `name`, `checked`, `reverse`, `hide-label`                                              |
-| `sds-tag`                | Non-interactive label/badge                   | `size`, `data-palette`                                                                           |
-| `sds-text`               | Text container with typography                | `size`, `strong`, `subtle`, `tall`                                                               |
-| `sds-textarea`           | Multi-line text input                         | `label`, `name`, `counter`, `autosize`, `error-message`                                          |
-| `sds-textfield`          | Single-line text input                        | `label`, `name`, `type`, `error-message`                                                         |
-| `sds-tooltip`            | Hover/focus tooltip anchored to a trigger     | `id` (required), `placement`                                                                     |
+| Component                   | Description                                  | Key Props                                                                                        |
+| --------------------------- | -------------------------------------------- | ------------------------------------------------------------------------------------------------ |
+| `sds-alert`                 | Contextual alert banner                      | `variant`, `size`, `removable-label`, `data-palette`                                             |
+| `sds-button`                | Button or link-as-button                     | `variant`, `size`, `type`, `disabled`, `loading`, `icon`, `inverted`, `label`, `href`, `command` |
+| `sds-card`                  | Content container; link card when `link` set | `link`                                                                                           |
+| `sds-checkbox`              | Single checkbox                              | `label`, `name`, `value`, `checked`, `error`, `help-text`                                        |
+| `sds-checkbox-group`        | Grouped checkboxes with legend               | `legend`, `error-message`, `help-text`                                                           |
+| `sds-chip`                  | Selectable or removable chip/pill            | `variant`, `checked`, `name`, `value`, `size`                                                    |
+| `sds-details`               | Expandable accordion                         | `open`, `standalone`, `name` (exclusive group)                                                   |
+| `sds-details-group`         | Wraps `sds-details` into one accordion group | `outlined`, `name` (makes the group exclusive)                                                   |
+| `sds-dialog`                | Modal/dialog wrapping native `<dialog>`      | `open`, `modal`, `closedby`, `close-button-label`                                                |
+| `sds-environment-banner`    | Environment/build strip for internal apps    | `env`, `build`                                                                                   |
+| `sds-file-upload`           | File picker with drag and drop (beta)        | `name`, `accept`, `multiple`, `max-size-in-bytes`, `error-message`, `hide-file-list`             |
+| `sds-file-upload-item`      | One file row with remove button and progress | `file`, `size-in-bytes`, `uploaded-percent`, `error-message`, `for`                              |
+| `sds-file-upload-file-list` | List container for `sds-file-upload-item`    | —                                                                                                |
+| `sds-heading`               | Semantic heading                             | `level`, `size`                                                                                  |
+| `sds-icon`                  | Dynamic SVG icon                             | `name`, `size`, `label`, `color`                                                                 |
+| `sds-internal-header`       | App header for internal (non-public) apps    | `app-name`, `home-href`                                                                          |
+| `sds-loader`                | Loading spinner                              | `size`, `contrast`                                                                               |
+| `sds-notification`          | **Deprecated** — use `sds-alert`             | `variant`, `removable-label`                                                                     |
+| `sds-popover`               | Anchored popover built on the Popover API    | `placement`, `autoplacement`, `overscroll`                                                       |
+| `sds-process`               | Timeline / process list                      | `heading-level`                                                                                  |
+| `sds-process-step`          | Individual step in a process                 | `heading`, `timestamp`                                                                           |
+| `sds-radio`                 | Single radio button                          | `label`, `name`, `value`, `checked`, `hide-label`                                                |
+| `sds-radio-group`           | Grouped radios with legend                   | `legend`, `direction`, `error-message`                                                           |
+| `sds-search`                | Search field with search button              | `label`, `hide-label`, `name`, `button-variant`                                                  |
+| `sds-select`                | Dropdown select                              | `label`, `name`, `default-value`, `error-message`                                                |
+| `sds-stepper`               | Step indicator for multi-step flows          | `orientation`                                                                                    |
+| `sds-stepper-step`          | Individual step in a stepper                 | `complete`, `interactive`, `active`                                                              |
+| `sds-switch`                | Toggle switch                                | `label`, `name`, `checked`, `reverse`, `hide-label`                                              |
+| `sds-tag`                   | Non-interactive label/badge                  | `size`, `data-palette`                                                                           |
+| `sds-text`                  | Text container with typography               | `size`, `strong`, `subtle`, `tall`                                                               |
+| `sds-textarea`              | Multi-line text input                        | `label`, `name`, `counter`, `autosize`, `error-message`                                          |
+| `sds-textfield`             | Single-line text input                       | `label`, `hide-label`, `name`, `type`, `error-message`                                           |
+| `sds-tooltip`               | Hover/focus tooltip anchored to a trigger    | `id` (required), `placement`                                                                     |
 
 For full component API (all props, slots, events, code examples), see `references/components.md`.
 
@@ -124,7 +129,7 @@ For full component API (all props, slots, events, code examples), see `reference
 
 ## Form-Associated Components
 
-`sds-button`, `sds-checkbox`, `sds-chip`, `sds-radio`, `sds-select`, `sds-switch`, `sds-textarea`, and `sds-textfield` are form-associated: they participate in `<form>` submission, validation, and reset without extra wiring. Set both `name` and `value` for the value to be submitted. `sds-switch` submits `"on"` / `"off"`.
+`sds-button`, `sds-checkbox`, `sds-chip`, `sds-file-upload`, `sds-radio`, `sds-search`, `sds-select`, `sds-switch`, `sds-textarea`, and `sds-textfield` are form-associated: they participate in `<form>` submission, validation, and reset without extra wiring. Set both `name` and `value` for the value to be submitted. `sds-switch` submits `"on"` / `"off"`. `sds-file-upload` only needs `name` and submits the selected files, and it has no `readonly`.
 
 Shared props from the form-control mixin: `name`, `disabled`, `readonly`. In a `sds-checkbox-group` / `sds-radio-group`, setting `disabled` or `readonly` on the group propagates to children unless the child sets it explicitly.
 
@@ -140,6 +145,8 @@ Shared props from the form-control mixin: `name`, `disabled`, `readonly`. In a `
 
 The attribute is the default slot content, so use one or the other — not both.
 
+`sds-file-upload` has **only** the `label` slot, no `label` attribute.
+
 ## React Wrappers
 
 React versions before v19 do not natively handle web component events. Use the provided wrappers from `@politiet/sheriff-web-components/react-wrappers`:
@@ -159,7 +166,7 @@ function MyForm() {
 }
 ```
 
-React 19+ supports custom elements natively — can use web components directly without wrappers.
+React 19+ supports custom elements natively — can use web components directly without wrappers. Event props on raw elements must match the event name exactly: `onclose`, `oncancel`, `ontoggle` (lowercase). React treats camelCase `onClose`/`onCancel`/`onToggle` as its own synthetic events and never fires them on custom elements. They are only typed for backwards compatibility and marked deprecated.
 
 For the full list of available wrappers and event mappings, see `references/react-wrappers.md`.
 
@@ -252,6 +259,7 @@ Put the accessible name on the button via `label` (it becomes `aria-label` on th
 
 -   **Component does not render or render weird**: Verify the CSS framework is imported. This is needed for CSS custom properties.
 -   **Events do not fire in React (pre-v19)**: Confirm React wrappers are used instead of web components.
+-   **`onClose`/`onToggle` never fires in React 19**: On raw `sds-*` elements use lowercase `onclose`/`ontoggle`/`oncancel`, or use the wrapper, where camelCase is correct.
 -   **Event listener never fires**: Check the exact event name in `references/components.md`. `sds-details`/`sds-popover`/`sds-tooltip` dispatch `toggle` (not `sds-toggle`) and `sds-dialog` dispatches `close` (not `sds-close`, which is deprecated).
 -   **Icons do not load**: Check the icon name format (`{name}-{source}-{variant}`) and network access to jsDelivr CDN. If in secure/isolated network, use Artifactory. If needed, see `@politiet/sheriff-icons` for icon skill.
 -   **Form values not submitted**: Ensure the component has both `name` and `value` attributes set.

package/dist/skill/references/components.md

@@ -278,7 +278,7 @@ Modal/dialog wrapping native `<dialog>`.
 
 **Props:** `open`, `modal`, `closedby` (`"none"` | `"closerequest"` | `"any"`, default `"closerequest"`), `close-button-label` (default `"Lukk dialogvindu"`, empty string hides the built-in close button)
 **Slots:** `header`, default (body), `footer`
-**Events:** `close`. `sds-close` still fires but is **deprecated** — listening for it logs a console warning and it is removed in the next major.
+**Events:** `close`, `cancel` (fires before the dialog closes via ESC, outside click or `requestClose()`; call `preventDefault()` to keep it open). `sds-close` still fires but is **deprecated** — listening for it logs a console warning and it is removed in the next major.
 **Methods:** `show()`, `showModal()` (also sets `modal`), `close()`, `requestClose()`
 **Notes:**
 
@@ -286,6 +286,7 @@ Modal/dialog wrapping native `<dialog>`.
 -   `command="show-modal"` requires `commandfor="{dialog id}"` and wires `aria-haspopup`/`aria-expanded`/`aria-controls` on the trigger.
 -   `closedby="any"` includes a Safari polyfill for outside clicks.
 -   An element in the default slot carrying `autofocus` receives focus once the open animation ends.
+-   `close` bubbles, so a listener on an outer dialog also receives it from a nested dialog. Check `event.target === event.currentTarget` when nesting. `cancel` does not bubble, matching the native event.
 
 ---
 
@@ -303,6 +304,68 @@ Thin strip identifying the running environment and build, for internal apps. Sou
 
 ---
 
+## sds-file-upload
+
+File picker with drag and drop and a built-in list of selected files. Form-associated. **Beta** — larger API changes may still happen.
+
+```html
+<sds-file-upload name="attachments" multiple accept=".pdf,image/*" max-size-in-bytes="10485760" file-limitation-text="PDF eller bilde, maks 10 MB">
+	<span slot="label">Vedlegg</span>
+</sds-file-upload>
+
+<sds-file-upload name="cv" variant="compact" size="sm" required>
+	<span slot="label">CV</span>
+</sds-file-upload>
+```
+
+**Props:** `name`, `label`, `accept` (same syntax as native: extensions, `image/*`, exact MIME types), `multiple`, `required`, `disabled`, `max-size-in-bytes`, `help-text`, `error-message`, `file-limitation-text`, `hide-file-list`, `variant` (`"default"` | `"compact"`), `size`
+**Slots:** `label` (alternative to the `label` attribute, wins if both are set). Without a label, the input is named "Velg fil" / "Velg filer".
+**Events:**
+
+-   `input`, `change` — the accepted selection changed (picked, dropped, removed or cleared). `input` fires right before `change`.
+-   `cancel` — the user closed the file picker without choosing anything. Not cancelable.
+-   `focus`, `blur`
+-   `sds-reject` — detail `{ rejected: { file, reason, errorCode }[] }`, `errorCode` is `"type-mismatch"` | `"too-large"`. `reason` is a Norwegian message.
+-   `sds-preview-ready` — detail `{ file, url }`, fired when an image or video thumbnail is ready.
+
+**Properties and methods:** `files` (`File[]`, read-only), `rejectedFiles` (`{ file, reason, errorCode }[]`, read-only), `value` (`C:\fakepath\…` of the first file; only `""` may be assigned, which clears, other values throw), `removeFile(file)`, `clear()`, `dismissRejected(file)`, `getPreviewUrl(file)`, `focus()`, `blur()`, `checkValidity()`, `reportValidity()`, `setCustomValidity(message)`
+**Notes:**
+
+-   Behaves like `<input type="file">`: a single-file selection always replaces the previous one, even if the new file is rejected. The same goes for `multiple`: every new selection replaces the previous files. Duplicates within a selection (same name, size and last modified) are dropped.
+-   Submits every accepted file under `name` as `FormData`, or an empty `File` when nothing is selected, like native. There is no `value` attribute to set, and no `readonly`.
+-   Constraint errors (`required`) use the native validation bubble. `setCustomValidity(message)` sets `error-message`.
+-   Don't call `URL.revokeObjectURL` on URLs from `getPreviewUrl()` or `sds-preview-ready` — the component cleans them up.
+-   Rejected files show in the built-in list with "Feil ved opplasting" and the `reason` as the error message.
+
+### sds-file-upload-item
+
+One file row: icon or thumbnail, name, size, a remove button and optional upload progress. Used by the built-in list, and for building your own list.
+
+**Props:** `file` (file name), `size-in-bytes`, `error-message`, `preview` (image URL), `uploaded-percent` (shows a progress bar while set), `uploaded-size-in-bytes`, `disabled`, `for` (`id` of the owning `sds-file-upload`)
+**Slots:** `actions-end` (extra buttons, placed before the remove button)
+**Events:** `sds-remove` (cancelable) — fired when the remove button is pressed.
+**Note:** Without `for`, listen for `sds-remove` and call `removeFile(file)` (or `dismissRejected(file)` for an item with `error-message`) on the upload yourself. With `for`, the item does that and removes itself from the DOM; `preventDefault()` on `sds-remove` cancels both. `disabled` doesn't reach buttons in `actions-end`, so disable those yourself, and include the file name in their labels (`label="Last ned rapport.pdf"`).
+
+### sds-file-upload-file-list
+
+List container (`role="list"`) for `sds-file-upload-item` children. No props or events.
+
+**Slots:** default (`sds-file-upload-item` children)
+
+Custom file list — set `hide-file-list` on the upload and render the items yourself, for example to show upload progress:
+
+```html
+<sds-file-upload id="docs" name="docs" multiple hide-file-list>
+	<span slot="label">Dokumenter</span>
+</sds-file-upload>
+
+<sds-file-upload-file-list>
+	<sds-file-upload-item for="docs" file="rapport.pdf" size-in-bytes="482133" uploaded-percent="40"></sds-file-upload-item>
+</sds-file-upload-file-list>
+```
+
+---
+
 ## sds-heading
 
 Semantic heading. Source: `sds-heading.component.ts`.
@@ -512,6 +575,28 @@ Groups radio buttons with shared legend and validation.
 
 ---
 
+## sds-search
+
+Search field: an `sds-textfield` (`type="search"`) and an icon button, shoulder to shoulder.
+
+```html
+<search aria-label="Registersøk">
+	<form action="/sok">
+		<sds-search label="Søk i registeret" hide-label name="q"></sds-search>
+	</form>
+</search>
+
+<sds-search label="Søk" button-variant="secondary"></sds-search>
+```
+
+**Props:** `label`, `hide-label`, `name`, `value`, `placeholder`, `disabled`, `readonly`, `error-message`, `help-text`, `size`, `button-label` (default `"Søk"`), `button-variant`, `required`, `minlength`, `maxlength`, `pattern`, `autocomplete` (forwarded to the inner input)
+**Slots:** `label` (rich label content, takes precedence over the `label` prop), `button` (replaces the default icon button; the slotted control owns its own click, `disabled` and form submission)
+**Events:** `search` (detail `{ value }`, cancelable), `input`, `change`, `select`, `keydown` (cancelling Enter prevents `search`), `focus`, `blur`, `invalid`. `focus`/`blur` fire when focus enters or leaves the component as a whole, not when it moves between the field and the button.
+**Methods:** `focus()`, `blur()`, `select()`, `setSelectionRange()`, `selectionStart`/`selectionEnd`, `checkValidity()`, `reportValidity()`, `setCustomValidity()`, plus `validity`, `validationMessage`, `willValidate`.
+**Note:** Clicking the button or pressing Enter validates the field (unless the form has `novalidate`), emits `search` if it is valid, then submits the surrounding form unless `search` was cancelled with `preventDefault()`. Always set `label`; use `hide-label` to hide it visually. The placeholder is not an accessible name. In React/Preact JSX without the wrapper, the listener must be lowercase: `onsearch`.
+
+---
+
 ## sds-select
 
 Dropdown select using native `<option>`/`<optgroup>` elements.
@@ -665,7 +750,7 @@ Single-line text input.
 <sds-textfield label="ID" name="id" value="12345" readonly></sds-textfield>
 ```
 
-**Props:** `label`, `name`, `value`, `type` (HTML input types), `placeholder`, `disabled`, `readonly`, `required`, `autocomplete`, `pattern`, `minlength`, `maxlength`, `min`, `max`, `help-text`, `error-message`, `size`
+**Props:** `label`, `hide-label`, `name`, `value`, `type` (HTML input types), `placeholder`, `disabled`, `readonly`, `required`, `autocomplete`, `pattern`, `minlength`, `maxlength`, `min`, `max`, `help-text`, `error-message`, `size`
 **Slots:** `after` (e.g., icon), `label` (alternative to the `label` attribute)
 **Events:** `input`, `change`, `select`, `focus`, `blur`, `keydown`
 **Note:** When both `error-message` and `help-text` are set, `aria-describedby` lists the error first, then the help text. `readonly` renders a lock icon next to the label.
@@ -689,5 +774,5 @@ Hover/focus tooltip. The tooltip is a sibling of its trigger, and the trigger po
 
 **Props:** `id` (**required** — the value the trigger's `aria-describedby` references), `placement` (`"top"` | `"bottom"` | `"left"` | `"right"`, each also with `-start` / `-end`, or `"none"`; default `"top"`)
 **Slots:** default (tooltip text — keep it to plain text)
-**Events:** `toggle` (detail: the trigger element that opened it)
+**Events:** `toggle` (detail: the trigger element that opened it). The native popover `ToggleEvent` also fires on the host.
 **Notes:** Sets `role="tooltip"` and `popover="manual"` on itself. Multiple triggers may reference the same tooltip. Give the trigger and tooltip a `position: relative` wrapper. `data-palette` has no effect — tooltip colours are fixed.

package/dist/skill/references/react-wrappers.md

@@ -7,7 +7,7 @@ React 19+ supports custom elements natively and may use web components directly
 
 ## Available Wrappers
 
-All 29 components have a wrapper:
+All 33 components have a wrapper:
 
 ```tsx
 import {
@@ -21,6 +21,9 @@ import {
 	SDSDetailsGroupWrapper,
 	SDSDialogWrapper,
 	SDSEnvironmentBannerWrapper,
+	SDSFileUploadWrapper,
+	SDSFileUploadItemWrapper,
+	SDSFileUploadFileListWrapper,
 	SDSHeadingWrapper,
 	SDSIconWrapper,
 	SDSInternalHeaderWrapper,
@@ -31,6 +34,7 @@ import {
 	SDSProcessStepWrapper,
 	SDSRadioWrapper,
 	SDSRadioGroupWrapper,
+	SDSSearchWrapper,
 	SDSSelectWrapper,
 	SDSStepperWrapper,
 	SDSStepperStepWrapper,
@@ -67,25 +71,28 @@ function MyForm() {
 
 Handler names follow React idioms and **drop the `sds-` prefix** — the DOM event `sds-remove` becomes `onRemove`, not `onSdsRemove`.
 
-| Wrapper                                           | React prop                                                          | DOM event                                                  |
-| ------------------------------------------------- | ------------------------------------------------------------------- | ---------------------------------------------------------- |
-| `SDSAlertWrapper`, `SDSNotificationWrapper`       | `onRemove`                                                          | `sds-remove`                                               |
-| `SDSButtonWrapper`                                | `onClick`, `onSubmit`, `onReset`                                    | `click`, `submit`, `reset`                                 |
-| `SDSCheckboxWrapper`, `SDSRadioWrapper`           | `onChange`, `onFocus`, `onBlur`                                     | `change`, `focus`, `blur`                                  |
-| `SDSCheckboxGroupWrapper`, `SDSRadioGroupWrapper` | `onUpdate`, `onChange`                                              | `sds-update`, `change`                                     |
-| `SDSChipWrapper`                                  | `onChange`, `onRemove`                                              | `change`, `sds-remove`                                     |
-| `SDSDetailsWrapper`, `SDSTooltipWrapper`          | `onToggle`                                                          | `toggle`                                                   |
-| `SDSPopoverWrapper`                               | `onToggle`                                                          | `toggle` (native `ToggleEvent`)                            |
-| `SDSDialogWrapper`                                | `onClose`                                                           | `close`                                                    |
-| `SDSSelectWrapper`, `SDSSwitchWrapper`            | `onChange`, `onFocus`, `onBlur`                                     | `change`, `focus`, `blur`                                  |
-| `SDSStepperWrapper`                               | `onChange`                                                          | `change` (detail `{ index }`)                              |
-| `SDSTextFieldWrapper`                             | `onInput`, `onChange`, `onSelect`, `onFocus`, `onBlur`, `onKeyDown` | `input`, **`input`**, `select`, `focus`, `blur`, `keydown` |
-| `SDSTextAreaWrapper`                              | `onInput`, `onChange`, `onSelect`, `onFocus`, `onBlur`              | `input`, **`input`**, `select`, `focus`, `blur`            |
+| Wrapper                                           | React prop                                                                                   | DOM event                                                                                            |
+| ------------------------------------------------- | -------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- |
+| `SDSAlertWrapper`, `SDSNotificationWrapper`       | `onRemove`                                                                                   | `sds-remove`                                                                                         |
+| `SDSButtonWrapper`                                | `onClick`, `onSubmit`, `onReset`                                                             | `click`, `submit`, `reset`                                                                           |
+| `SDSCheckboxWrapper`, `SDSRadioWrapper`           | `onChange`, `onFocus`, `onBlur`                                                              | `change`, `focus`, `blur`                                                                            |
+| `SDSCheckboxGroupWrapper`, `SDSRadioGroupWrapper` | `onUpdate`, `onChange`                                                                       | `sds-update`, `change`                                                                               |
+| `SDSChipWrapper`                                  | `onChange`, `onRemove`                                                                       | `change`, `sds-remove`                                                                               |
+| `SDSDetailsWrapper`, `SDSTooltipWrapper`          | `onToggle`                                                                                   | `toggle`                                                                                             |
+| `SDSFileUploadWrapper`                            | `onInput`, `onChange`, `onCancel`, `onFocus`, `onBlur`, `onReject`, `onPreviewReady`         | `input`, `change`, `cancel`, `focus`, `blur`, `sds-reject`, `sds-preview-ready`                      |
+| `SDSFileUploadItemWrapper`                        | `onRemove`                                                                                   | `sds-remove`                                                                                         |
+| `SDSPopoverWrapper`                               | `onToggle`                                                                                   | `toggle` (native `ToggleEvent`)                                                                      |
+| `SDSDialogWrapper`                                | `onClose`, `onCancel`                                                                        | `close`, `cancel`                                                                                    |
+| `SDSSearchWrapper`                                | `onSearch`, `onInput`, `onChange`, `onSelect`, `onFocus`, `onBlur`, `onKeyDown`, `onInvalid` | `search` (detail `{ value }`), `input`, **`input`**, `select`, `focus`, `blur`, `keydown`, `invalid` |
+| `SDSSelectWrapper`, `SDSSwitchWrapper`            | `onChange`, `onFocus`, `onBlur`                                                              | `change`, `focus`, `blur`                                                                            |
+| `SDSStepperWrapper`                               | `onChange`                                                                                   | `change` (detail `{ index }`)                                                                        |
+| `SDSTextFieldWrapper`                             | `onInput`, `onChange`, `onSelect`, `onFocus`, `onBlur`, `onKeyDown`                          | `input`, **`input`**, `select`, `focus`, `blur`, `keydown`                                           |
+| `SDSTextAreaWrapper`                              | `onInput`, `onChange`, `onSelect`, `onFocus`, `onBlur`                                       | `input`, **`input`**, `select`, `focus`, `blur`                                                      |
 
-Wrappers with no event mappings (presentational only): `SDSCardWrapper`, `SDSDetailsGroupWrapper`, `SDSEnvironmentBannerWrapper`, `SDSHeadingWrapper`, `SDSIconWrapper`, `SDSInternalHeaderWrapper`, `SDSLoaderWrapper`, `SDSProcessWrapper`, `SDSProcessStepWrapper`, `SDSStepperStepWrapper`, `SDSTagWrapper`, `SDSTextWrapper`.
+Wrappers with no event mappings (presentational only): `SDSCardWrapper`, `SDSDetailsGroupWrapper`, `SDSEnvironmentBannerWrapper`, `SDSFileUploadFileListWrapper`, `SDSHeadingWrapper`, `SDSIconWrapper`, `SDSInternalHeaderWrapper`, `SDSLoaderWrapper`, `SDSProcessWrapper`, `SDSProcessStepWrapper`, `SDSStepperStepWrapper`, `SDSTagWrapper`, `SDSTextWrapper`.
 
 ## Gotchas
 
--   On `SDSTextFieldWrapper` and `SDSTextAreaWrapper`, **`onChange` is wired to the `input` event**, so it fires on every keystroke like React's own `onChange` — not on blur like the native DOM `change` event. Use `onBlur` if you need commit-on-blur semantics.
--   `onKeyDown` (capital D) is the correct casing on `SDSTextFieldWrapper`; there is no `onKeydown`.
+-   On `SDSTextFieldWrapper`, `SDSTextAreaWrapper` and `SDSSearchWrapper`, **`onChange` is wired to the `input` event**, so it fires on every keystroke like React's own `onChange` — not on blur like the native DOM `change` event. Use `onBlur` if you need commit-on-blur semantics.
+-   `onKeyDown` (capital D) is the correct casing on `SDSTextFieldWrapper` and `SDSSearchWrapper`; there is no `onKeydown`.
 -   Wrappers forward all other props straight through as attributes, so kebab-case component attributes (`help-text`, `error-message`, `removable-label`, `app-name`) keep their kebab-case names in JSX.

package/dist/utils/file-validation.d.ts

@@ -0,0 +1,31 @@
+export interface SDSRejectedFile {
+    file: File;
+    reason: string;
+    errorCode: 'type-mismatch' | 'too-large';
+}
+export interface PartitionFilesOptions {
+    accept?: string;
+    maxSizeInBytes?: number;
+    multiple?: boolean;
+}
+/**
+ * Mirrors the native file input's `accept` matching: a token is either an extension (`.pdf`),
+ * a MIME wildcard (`image/*`) or an exact MIME type. Matches if any token matches.
+ */
+export declare function matchesAccept(file: File, accept?: string): boolean;
+/**
+ * Splits an incoming selection into files that pass validation and files that don't, with a reason.
+ * Like the native file input, every selection replaces the current one. Duplicates within the
+ * selection (same name, size and last modified) are silently dropped rather than rejected. In
+ * single-file mode only the first incoming file is considered.
+ */
+export declare function partitionFiles(incoming: File[], options: PartitionFilesOptions): {
+    accepted: File[];
+    rejected: SDSRejectedFile[];
+};
+/**
+ * Identity check for files that survives the copies browsers hand out across separate
+ * `change`/`drop` events, where reference equality no longer holds.
+ */
+export declare function isSameFile(a: File, b: File): boolean;
+//# sourceMappingURL=file-validation.d.ts.map

package/dist/utils/file-validation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-validation.d.ts","sourceRoot":"","sources":["../../src/utils/file-validation.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,eAAe;IAC/B,IAAI,EAAE,IAAI,CAAC;IACX,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,eAAe,GAAG,WAAW,CAAC;CACzC;AAED,MAAM,WAAW,qBAAqB;IACrC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB;AAED;;;GAGG;AACH,wBAAgB,aAAa,CAAC,IAAI,EAAE,IAAI,EAAE,MAAM,CAAC,EAAE,MAAM,GAAG,OAAO,CAgBlE;AAED;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,QAAQ,EAAE,IAAI,EAAE,EAAE,OAAO,EAAE,qBAAqB,GAAG;IAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;IAAC,QAAQ,EAAE,eAAe,EAAE,CAAA;CAAE,CAoBlI;AAED;;;GAGG;AACH,wBAAgB,UAAU,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,GAAG,OAAO,CAEpD"}

package/dist/utils/file-validation.js

@@ -0,0 +1,57 @@
+import { formatBytes } from './format-bytes';
+/**
+ * Mirrors the native file input's `accept` matching: a token is either an extension (`.pdf`),
+ * a MIME wildcard (`image/*`) or an exact MIME type. Matches if any token matches.
+ */
+export function matchesAccept(file, accept) {
+    if (!accept)
+        return true;
+    const tokens = accept
+        .split(',')
+        .map((token) => token.trim().toLowerCase())
+        .filter(Boolean);
+    if (tokens.length === 0)
+        return true;
+    const fileName = file.name.toLowerCase();
+    const mimeType = file.type.toLowerCase();
+    return tokens.some((token) => {
+        if (token.startsWith('.'))
+            return fileName.endsWith(token);
+        if (token.endsWith('/*'))
+            return mimeType.startsWith(token.slice(0, -1));
+        return mimeType === token;
+    });
+}
+/**
+ * Splits an incoming selection into files that pass validation and files that don't, with a reason.
+ * Like the native file input, every selection replaces the current one. Duplicates within the
+ * selection (same name, size and last modified) are silently dropped rather than rejected. In
+ * single-file mode only the first incoming file is considered.
+ */
+export function partitionFiles(incoming, options) {
+    const { accept, maxSizeInBytes, multiple = false } = options;
+    const accepted = [];
+    const rejected = [];
+    const candidates = multiple ? incoming : incoming.slice(0, 1);
+    for (const file of candidates) {
+        if (!matchesAccept(file, accept)) {
+            rejected.push({ file, reason: 'Filtypen støttes ikke.', errorCode: 'type-mismatch' });
+            continue;
+        }
+        if (maxSizeInBytes && file.size > maxSizeInBytes) {
+            rejected.push({ file, reason: `Filen er for stor. Maks ${formatBytes(maxSizeInBytes)}.`, errorCode: 'too-large' });
+            continue;
+        }
+        if (!accepted.some((candidate) => isSameFile(candidate, file)))
+            accepted.push(file);
+    }
+    return { accepted, rejected };
+}
+/**
+ * Identity check for files that survives the copies browsers hand out across separate
+ * `change`/`drop` events, where reference equality no longer holds.
+ */
+export function isSameFile(a, b) {
+    return a === b || (a.name === b.name && a.size === b.size && a.lastModified === b.lastModified);
+}
+//# sourceMappingURL=file-validation.js.map

package/dist/utils/file-validation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-validation.js","sourceRoot":"","sources":["../../src/utils/file-validation.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAc7C;;;GAGG;AACH,MAAM,UAAU,aAAa,CAAC,IAAU,EAAE,MAAe;IACxD,IAAI,CAAC,MAAM;QAAE,OAAO,IAAI,CAAC;IACzB,MAAM,MAAM,GAAG,MAAM;SACnB,KAAK,CAAC,GAAG,CAAC;SACV,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC,WAAW,EAAE,CAAC;SAC1C,MAAM,CAAC,OAAO,CAAC,CAAC;IAClB,IAAI,MAAM,CAAC,MAAM,KAAK,CAAC;QAAE,OAAO,IAAI,CAAC;IAErC,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC;IACzC,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC;IAEzC,OAAO,MAAM,CAAC,IAAI,CAAC,CAAC,KAAK,EAAE,EAAE;QAC5B,IAAI,KAAK,CAAC,UAAU,CAAC,GAAG,CAAC;YAAE,OAAO,QAAQ,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;QAC3D,IAAI,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC;YAAE,OAAO,QAAQ,CAAC,UAAU,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;QACzE,OAAO,QAAQ,KAAK,KAAK,CAAC;IAC3B,CAAC,CAAC,CAAC;AACJ,CAAC;AAED;;;;;GAKG;AACH,MAAM,UAAU,cAAc,CAAC,QAAgB,EAAE,OAA8B;IAC9E,MAAM,EAAE,MAAM,EAAE,cAAc,EAAE,QAAQ,GAAG,KAAK,EAAE,GAAG,OAAO,CAAC;IAE7D,MAAM,QAAQ,GAAW,EAAE,CAAC;IAC5B,MAAM,QAAQ,GAAsB,EAAE,CAAC;IACvC,MAAM,UAAU,GAAG,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;IAE9D,KAAK,MAAM,IAAI,IAAI,UAAU,EAAE,CAAC;QAC/B,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,MAAM,CAAC,EAAE,CAAC;YAClC,QAAQ,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,wBAAwB,EAAE,SAAS,EAAE,eAAe,EAAE,CAAC,CAAC;YACtF,SAAS;QACV,CAAC;QACD,IAAI,cAAc,IAAI,IAAI,CAAC,IAAI,GAAG,cAAc,EAAE,CAAC;YAClD,QAAQ,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,2BAA2B,WAAW,CAAC,cAAc,CAAC,GAAG,EAAE,SAAS,EAAE,WAAW,EAAE,CAAC,CAAC;YACnH,SAAS;QACV,CAAC;QACD,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,SAAS,EAAE,EAAE,CAAC,UAAU,CAAC,SAAS,EAAE,IAAI,CAAC,CAAC;YAAE,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACrF,CAAC;IAED,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC;AAC/B,CAAC;AAED;;;GAGG;AACH,MAAM,UAAU,UAAU,CAAC,CAAO,EAAE,CAAO;IAC1C,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,KAAK,CAAC,CAAC,IAAI,IAAI,CAAC,CAAC,IAAI,KAAK,CAAC,CAAC,IAAI,IAAI,CAAC,CAAC,YAAY,KAAK,CAAC,CAAC,YAAY,CAAC,CAAC;AACjG,CAAC","sourcesContent":["import { formatBytes } from './format-bytes';\n\nexport interface SDSRejectedFile {\n\tfile: File;\n\treason: string;\n\terrorCode: 'type-mismatch' | 'too-large';\n}\n\nexport interface PartitionFilesOptions {\n\taccept?: string;\n\tmaxSizeInBytes?: number;\n\tmultiple?: boolean;\n}\n\n/**\n * Mirrors the native file input's `accept` matching: a token is either an extension (`.pdf`),\n * a MIME wildcard (`image/*`) or an exact MIME type. Matches if any token matches.\n */\nexport function matchesAccept(file: File, accept?: string): boolean {\n\tif (!accept) return true;\n\tconst tokens = accept\n\t\t.split(',')\n\t\t.map((token) => token.trim().toLowerCase())\n\t\t.filter(Boolean);\n\tif (tokens.length === 0) return true;\n\n\tconst fileName = file.name.toLowerCase();\n\tconst mimeType = file.type.toLowerCase();\n\n\treturn tokens.some((token) => {\n\t\tif (token.startsWith('.')) return fileName.endsWith(token);\n\t\tif (token.endsWith('/*')) return mimeType.startsWith(token.slice(0, -1));\n\t\treturn mimeType === token;\n\t});\n}\n\n/**\n * Splits an incoming selection into files that pass validation and files that don't, with a reason.\n * Like the native file input, every selection replaces the current one. Duplicates within the\n * selection (same name, size and last modified) are silently dropped rather than rejected. In\n * single-file mode only the first incoming file is considered.\n */\nexport function partitionFiles(incoming: File[], options: PartitionFilesOptions): { accepted: File[]; rejected: SDSRejectedFile[] } {\n\tconst { accept, maxSizeInBytes, multiple = false } = options;\n\n\tconst accepted: File[] = [];\n\tconst rejected: SDSRejectedFile[] = [];\n\tconst candidates = multiple ? incoming : incoming.slice(0, 1);\n\n\tfor (const file of candidates) {\n\t\tif (!matchesAccept(file, accept)) {\n\t\t\trejected.push({ file, reason: 'Filtypen støttes ikke.', errorCode: 'type-mismatch' });\n\t\t\tcontinue;\n\t\t}\n\t\tif (maxSizeInBytes && file.size > maxSizeInBytes) {\n\t\t\trejected.push({ file, reason: `Filen er for stor. Maks ${formatBytes(maxSizeInBytes)}.`, errorCode: 'too-large' });\n\t\t\tcontinue;\n\t\t}\n\t\tif (!accepted.some((candidate) => isSameFile(candidate, file))) accepted.push(file);\n\t}\n\n\treturn { accepted, rejected };\n}\n\n/**\n * Identity check for files that survives the copies browsers hand out across separate\n * `change`/`drop` events, where reference equality no longer holds.\n */\nexport function isSameFile(a: File, b: File): boolean {\n\treturn a === b || (a.name === b.name && a.size === b.size && a.lastModified === b.lastModified);\n}\n"]}

package/dist/utils/format-bytes.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Formats a byte count as a human-readable string using Norwegian formatting
+ * (comma decimal separator), e.g. `7400` → `7,2 kB`.
+ */
+export declare function formatBytes(bytes: number): string;
+//# sourceMappingURL=format-bytes.d.ts.map

package/dist/utils/format-bytes.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"format-bytes.d.ts","sourceRoot":"","sources":["../../src/utils/format-bytes.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAMjD"}

package/dist/utils/format-bytes.js

@@ -0,0 +1,13 @@
+/**
+ * Formats a byte count as a human-readable string using Norwegian formatting
+ * (comma decimal separator), e.g. `7400` → `7,2 kB`.
+ */
+export function formatBytes(bytes) {
+    if (bytes === 0)
+        return '0 B';
+    const units = ['B', 'kB', 'MB', 'GB'];
+    const exponent = Math.min(Math.floor(Math.log(bytes) / Math.log(1024)), units.length - 1);
+    const value = bytes / 1024 ** exponent;
+    return `${value.toFixed(exponent === 0 ? 0 : 1).replace('.', ',')} ${units[exponent]}`;
+}
+//# sourceMappingURL=format-bytes.js.map

package/dist/utils/format-bytes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"format-bytes.js","sourceRoot":"","sources":["../../src/utils/format-bytes.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,MAAM,UAAU,WAAW,CAAC,KAAa;IACxC,IAAI,KAAK,KAAK,CAAC;QAAE,OAAO,KAAK,CAAC;IAC9B,MAAM,KAAK,GAAG,CAAC,GAAG,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC;IACtC,MAAM,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,EAAE,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;IAC1F,MAAM,KAAK,GAAG,KAAK,GAAG,IAAI,IAAI,QAAQ,CAAC;IACvC,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC,QAAQ,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,GAAG,EAAE,GAAG,CAAC,IAAI,KAAK,CAAC,QAAQ,CAAC,EAAE,CAAC;AACxF,CAAC","sourcesContent":["/**\n * Formats a byte count as a human-readable string using Norwegian formatting\n * (comma decimal separator), e.g. `7400` → `7,2 kB`.\n */\nexport function formatBytes(bytes: number): string {\n\tif (bytes === 0) return '0 B';\n\tconst units = ['B', 'kB', 'MB', 'GB'];\n\tconst exponent = Math.min(Math.floor(Math.log(bytes) / Math.log(1024)), units.length - 1);\n\tconst value = bytes / 1024 ** exponent;\n\treturn `${value.toFixed(exponent === 0 ? 0 : 1).replace('.', ',')} ${units[exponent]}`;\n}\n"]}

package/dist/utils/video-thumbnail.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Generates a square-agnostic still-frame thumbnail for a video file and returns an object URL
+ * for the encoded image blob (WebP where supported, otherwise JPEG). The caller owns the URL and
+ * must revoke it with `URL.revokeObjectURL` when done. Rejects if the video can't be decoded in
+ * time, so callers can fall back to a file icon.
+ */
+export declare function generateVideoThumbnail(file: File): Promise<string>;
+//# sourceMappingURL=video-thumbnail.d.ts.map

package/dist/utils/video-thumbnail.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"video-thumbnail.d.ts","sourceRoot":"","sources":["../../src/utils/video-thumbnail.ts"],"names":[],"mappings":"AAcA;;;;;GAKG;AACH,wBAAgB,sBAAsB,CAAC,IAAI,EAAE,IAAI,GAAG,OAAO,CAAC,MAAM,CAAC,CA0ElE"}

package/dist/utils/video-thumbnail.js

@@ -0,0 +1,77 @@
+const THUMBNAIL_TIMEOUT_MS = 5000;
+const THUMBNAIL_QUALITY = 0.75;
+let webpSupported;
+function supportsWebpEncoding() {
+    if (webpSupported === undefined) {
+        const canvas = document.createElement('canvas');
+        canvas.width = canvas.height = 1;
+        webpSupported = canvas.toDataURL('image/webp').startsWith('data:image/webp');
+    }
+    return webpSupported;
+}
+/**
+ * Generates a square-agnostic still-frame thumbnail for a video file and returns an object URL
+ * for the encoded image blob (WebP where supported, otherwise JPEG). The caller owns the URL and
+ * must revoke it with `URL.revokeObjectURL` when done. Rejects if the video can't be decoded in
+ * time, so callers can fall back to a file icon.
+ */
+export function generateVideoThumbnail(file) {
+    return new Promise((resolve, reject) => {
+        const source = URL.createObjectURL(file);
+        const video = document.createElement('video');
+        let settled = false;
+        const cleanup = () => {
+            clearTimeout(timer);
+            video.removeAttribute('src');
+            video.load();
+            URL.revokeObjectURL(source);
+        };
+        const fail = (error) => {
+            if (settled)
+                return;
+            settled = true;
+            cleanup();
+            reject(error instanceof Error ? error : new Error(String(error)));
+        };
+        const succeed = (url) => {
+            if (settled) {
+                URL.revokeObjectURL(url);
+                return;
+            }
+            settled = true;
+            cleanup();
+            resolve(url);
+        };
+        const timer = setTimeout(() => fail(new Error('Video thumbnail generation timed out')), THUMBNAIL_TIMEOUT_MS);
+        video.muted = true;
+        video.playsInline = true;
+        video.preload = 'auto';
+        video.addEventListener('error', () => fail(new Error('Video could not be decoded')));
+        video.addEventListener('loadeddata', () => {
+            // Seek slightly past the start to avoid capturing a black leading frame.
+            video.currentTime = Math.min(0.1, (video.duration || 0) / 2);
+        }, { once: true });
+        video.addEventListener('seeked', () => {
+            try {
+                const width = video.videoWidth;
+                const height = video.videoHeight;
+                if (!width || !height)
+                    throw new Error('Video has no dimensions');
+                const canvas = document.createElement('canvas');
+                canvas.width = width;
+                canvas.height = height;
+                const context = canvas.getContext('2d');
+                if (!context)
+                    throw new Error('Canvas 2D context unavailable');
+                context.drawImage(video, 0, 0, width, height);
+                const type = supportsWebpEncoding() ? 'image/webp' : 'image/jpeg';
+                canvas.toBlob((blob) => (blob ? succeed(URL.createObjectURL(blob)) : fail(new Error('Canvas toBlob returned null'))), type, THUMBNAIL_QUALITY);
+            }
+            catch (error) {
+                fail(error);
+            }
+        }, { once: true });
+        video.src = source;
+    });
+}
+//# sourceMappingURL=video-thumbnail.js.map

package/dist/utils/video-thumbnail.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"video-thumbnail.js","sourceRoot":"","sources":["../../src/utils/video-thumbnail.ts"],"names":[],"mappings":"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","sourcesContent":["const THUMBNAIL_TIMEOUT_MS = 5000;\nconst THUMBNAIL_QUALITY = 0.75;\n\nlet webpSupported: boolean | undefined;\n\nfunction supportsWebpEncoding(): boolean {\n\tif (webpSupported === undefined) {\n\t\tconst canvas = document.createElement('canvas');\n\t\tcanvas.width = canvas.height = 1;\n\t\twebpSupported = canvas.toDataURL('image/webp').startsWith('data:image/webp');\n\t}\n\treturn webpSupported;\n}\n\n/**\n * Generates a square-agnostic still-frame thumbnail for a video file and returns an object URL\n * for the encoded image blob (WebP where supported, otherwise JPEG). The caller owns the URL and\n * must revoke it with `URL.revokeObjectURL` when done. Rejects if the video can't be decoded in\n * time, so callers can fall back to a file icon.\n */\nexport function generateVideoThumbnail(file: File): Promise<string> {\n\treturn new Promise<string>((resolve, reject) => {\n\t\tconst source = URL.createObjectURL(file);\n\t\tconst video = document.createElement('video');\n\t\tlet settled = false;\n\n\t\tconst cleanup = () => {\n\t\t\tclearTimeout(timer);\n\t\t\tvideo.removeAttribute('src');\n\t\t\tvideo.load();\n\t\t\tURL.revokeObjectURL(source);\n\t\t};\n\t\tconst fail = (error: unknown) => {\n\t\t\tif (settled) return;\n\t\t\tsettled = true;\n\t\t\tcleanup();\n\t\t\treject(error instanceof Error ? error : new Error(String(error)));\n\t\t};\n\t\tconst succeed = (url: string) => {\n\t\t\tif (settled) {\n\t\t\t\tURL.revokeObjectURL(url);\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tsettled = true;\n\t\t\tcleanup();\n\t\t\tresolve(url);\n\t\t};\n\n\t\tconst timer = setTimeout(() => fail(new Error('Video thumbnail generation timed out')), THUMBNAIL_TIMEOUT_MS);\n\n\t\tvideo.muted = true;\n\t\tvideo.playsInline = true;\n\t\tvideo.preload = 'auto';\n\t\tvideo.addEventListener('error', () => fail(new Error('Video could not be decoded')));\n\n\t\tvideo.addEventListener(\n\t\t\t'loadeddata',\n\t\t\t() => {\n\t\t\t\t// Seek slightly past the start to avoid capturing a black leading frame.\n\t\t\t\tvideo.currentTime = Math.min(0.1, (video.duration || 0) / 2);\n\t\t\t},\n\t\t\t{ once: true },\n\t\t);\n\n\t\tvideo.addEventListener(\n\t\t\t'seeked',\n\t\t\t() => {\n\t\t\t\ttry {\n\t\t\t\t\tconst width = video.videoWidth;\n\t\t\t\t\tconst height = video.videoHeight;\n\t\t\t\t\tif (!width || !height) throw new Error('Video has no dimensions');\n\n\t\t\t\t\tconst canvas = document.createElement('canvas');\n\t\t\t\t\tcanvas.width = width;\n\t\t\t\t\tcanvas.height = height;\n\t\t\t\t\tconst context = canvas.getContext('2d');\n\t\t\t\t\tif (!context) throw new Error('Canvas 2D context unavailable');\n\t\t\t\t\tcontext.drawImage(video, 0, 0, width, height);\n\n\t\t\t\t\tconst type = supportsWebpEncoding() ? 'image/webp' : 'image/jpeg';\n\t\t\t\t\tcanvas.toBlob(\n\t\t\t\t\t\t(blob) => (blob ? succeed(URL.createObjectURL(blob)) : fail(new Error('Canvas toBlob returned null'))),\n\t\t\t\t\t\ttype,\n\t\t\t\t\t\tTHUMBNAIL_QUALITY,\n\t\t\t\t\t);\n\t\t\t\t} catch (error) {\n\t\t\t\t\tfail(error);\n\t\t\t\t}\n\t\t\t},\n\t\t\t{ once: true },\n\t\t);\n\n\t\tvideo.src = source;\n\t});\n}\n"]}

package/dist/version.d.ts

@@ -1,2 +1,2 @@
-export declare const SDS_VERSION = "2.13.1";
+export declare const SDS_VERSION = "2.14.0";
 //# sourceMappingURL=version.d.ts.map

package/dist/version.js

@@ -1,3 +1,3 @@
 // Auto-generated by generate-version.cjs — do not edit manually
-export const SDS_VERSION = '2.13.1';
+export const SDS_VERSION = '2.14.0';
 //# sourceMappingURL=version.js.map