@politiet/sheriff-web-components 2.13.1 → 2.14.1

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-*
@@ -19,11 +20,11 @@ description: >
 
 When looking up component details not covered here, read the source directly:
 
--   Most components: `packages/sheriff/web-components/src/sds-{name}/sds-{name}.ts`
--   Exception components (alert, button, dialog, environment-banner, heading, icon, internal-header, select, text, textfield): `packages/sheriff/web-components/src/sds-{name}/sds-{name}.component.ts`
--   Styles and CSS custom properties: `packages/sheriff/web-components/src/sds-{name}/sds-{name}.styles.ts`
--   Usage examples: `packages/sheriff/web-components/src/sds-{name}/sds-{name}.stories.ts`
--   Documentation: `packages/sheriff/web-components/src/sds-{name}/sds-{name}.mdx`, `variables.mdx` (CSS variables), `guidelines.mdx` (design guidance)
+- Most components: `packages/sheriff/web-components/src/sds-{name}/sds-{name}.ts`
+- Exception components (alert, button, dialog, environment-banner, heading, icon, internal-header, select, text, textfield): `packages/sheriff/web-components/src/sds-{name}/sds-{name}.component.ts`
+- Styles and CSS custom properties: `packages/sheriff/web-components/src/sds-{name}/sds-{name}.styles.ts`
+- Usage examples: `packages/sheriff/web-components/src/sds-{name}/sds-{name}.stories.ts`
+- Documentation: `packages/sheriff/web-components/src/sds-{name}/sds-{name}.mdx`, `variables.mdx` (CSS variables), `guidelines.mdx` (design guidance)
 
 Inside an installed package the same files live under `node_modules/@politiet/sheriff-web-components/dist/sds-{name}/`.
 
@@ -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`.
 
@@ -116,15 +121,15 @@ For full component API (all props, slots, events, code examples), see `reference
 
 `data-palette` works on **every** component and is inherited from any ancestor container, with three exceptions:
 
--   `sds-alert`: `data-palette` is a typed component property, so it must be set **on the alert itself** (it does not inherit from a container). Accepted values are only `info` | `success` | `attention` | `danger`; it also selects the alert's status icon.
--   `sds-tooltip` and `sds-environment-banner`: fixed colors, palette has no effect. The environment banner colors itself from `env`.
--   `sds-loader`: the palette variant is designed for a loader sitting **on** a palette-colored surface. Add `contrast` to flip it back for a plain background.
+- `sds-alert`: `data-palette` is a typed component property, so it must be set **on the alert itself** (it does not inherit from a container). Accepted values are only `info` | `success` | `attention` | `danger`; it also selects the alert's status icon.
+- `sds-tooltip` and `sds-environment-banner`: fixed colors, palette has no effect. The environment banner colors itself from `env`.
+- `sds-loader`: the palette variant is designed for a loader sitting **on** a palette-colored surface. Add `contrast` to flip it back for a plain background.
 
 `sds-tag` additionally accepts `data-palette="danger-action"` (deep red), which is not a general framework palette.
 
 ## 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,10 @@ function MyForm() {
 }
 ```
 
-React 19+ supports custom elements natively — can use web components directly without wrappers.
+React 19+ supports custom elements natively and can use web components directly without wrappers.
+Event props on raw elements must match the event name exactly: `onclose`, `oncancel`, `ontoggle`, `onclick` (lowercase).
+React treats camelCase `onClose`/`onCancel`/`onToggle` as its own synthetic events and never fires them on custom elements.
+hey are only typed for backwards compatibility and marked deprecated.
 
 For the full list of available wrappers and event mappings, see `references/react-wrappers.md`.
 
@@ -250,9 +260,10 @@ Put the accessible name on the button via `label` (it becomes `aria-label` on th
 
 ## Error Handling
 
--   **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.
--   **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.
--   **`data-palette` seems ignored**: On `sds-alert` it must be set on the element itself, and only `info`/`success`/`attention`/`danger` are valid. `sds-tooltip` and `sds-environment-banner` do not support palettes.
+- **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. The same applies to `click` on `sds-stepper-step`: use `onclick` on the raw element, `onClick` on `SDSStepperStepWrapper`.
+- **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.
+- **`data-palette` seems ignored**: On `sds-alert` it must be set on the element itself, and only `info`/`success`/`attention`/`danger` are valid. `sds-tooltip` and `sds-environment-banner` do not support palettes.

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.
@@ -574,7 +659,10 @@ Step indicator for multi-step flows. Contains `sds-stepper-step` children. Gets
 
 **Props:** `complete`, `interactive` (clickable), `active` (current step)
 **Slots:** default (label text)
+**Events:** `click` (native `MouseEvent`)
 **Note:** Step numbers are generated automatically from the child order.
+**Note:** `click` fires on every step, interactive or not, and also when an `interactive` step is activated with Enter or Space. Inside an `sds-stepper` the stepper's `change` fires first, so the step is already active by the time `click` arrives. The event bubbles, so a listener on `sds-stepper` sees it with `target` set to the clicked `sds-stepper-step`.
+**React/Preact:** On a raw `<sds-stepper-step>` write the listener lowercase, `onclick`. CamelCase `onClick` is React's own synthetic event and is typed as deprecated. With `SDSStepperStepWrapper` the prop is `onClick`.
 
 ---
 
@@ -665,7 +753,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 +777,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,30 @@ 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 }`)                                                                        |
+| `SDSStepperStepWrapper`                           | `onClick`                                                                                    | `click` (native `MouseEvent`)                                                                        |
+| `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`, `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`.
--   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.
+- 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`.
+- `SDSStepperStepWrapper` maps `onClick` to the step's native `click`. On a raw `<sds-stepper-step>` write it lowercase as `onclick`; camelCase `onClick` there is React's own synthetic event and is typed as deprecated.
+- 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"}