@politiet/sheriff-web-components 2.13.0 → 2.14.0

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

@@ -3,10 +3,12 @@
 React 18 does not natively support web component events. Use these wrappers instead of bare web components.
 Import components from `@politiet/sheriff-web-components/react-wrappers`.
 
-React 19+ supports custom elements natively — may use web components directly without wrappers.
+React 19+ supports custom elements natively and may use web components directly without wrappers. For typed custom elements without wrappers, reference `@politiet/sheriff-web-components/framework/react`.
 
 ## Available Wrappers
 
+All 33 components have a wrapper:
+
 ```tsx
 import {
 	SDSAlertWrapper,
@@ -16,13 +18,23 @@ import {
 	SDSCheckboxGroupWrapper,
 	SDSChipWrapper,
 	SDSDetailsWrapper,
+	SDSDetailsGroupWrapper,
 	SDSDialogWrapper,
+	SDSEnvironmentBannerWrapper,
+	SDSFileUploadWrapper,
+	SDSFileUploadItemWrapper,
+	SDSFileUploadFileListWrapper,
 	SDSHeadingWrapper,
 	SDSIconWrapper,
+	SDSInternalHeaderWrapper,
 	SDSLoaderWrapper,
 	SDSNotificationWrapper,
+	SDSPopoverWrapper,
+	SDSProcessWrapper,
+	SDSProcessStepWrapper,
 	SDSRadioWrapper,
 	SDSRadioGroupWrapper,
+	SDSSearchWrapper,
 	SDSSelectWrapper,
 	SDSStepperWrapper,
 	SDSStepperStepWrapper,
@@ -31,6 +43,7 @@ import {
 	SDSTextWrapper,
 	SDSTextAreaWrapper,
 	SDSTextFieldWrapper,
+	SDSTooltipWrapper,
 } from '@politiet/sheriff-web-components/react-wrappers';
 ```
 
@@ -54,13 +67,32 @@ function MyForm() {
 }
 ```
 
-## Event Mapping Examples
+## Event Mapping
+
+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`                                                                                             |
+| `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`, `SDSFileUploadFileListWrapper`, `SDSHeadingWrapper`, `SDSIconWrapper`, `SDSInternalHeaderWrapper`, `SDSLoaderWrapper`, `SDSProcessWrapper`, `SDSProcessStepWrapper`, `SDSStepperStepWrapper`, `SDSTagWrapper`, `SDSTextWrapper`.
 
-More React-y event handling in that names follow React naming/idioms:
+## Gotchas
 
--   `SDSButtonWrapper`: `onClick` → `click`, `onSubmit` → `submit`, `onReset` → `reset`
--   `SDSTextFieldWrapper`: `onInput` → `input`, `onSelect` → `select`, `onFocus` → `focus`, `onBlur` → `blur`, `onKeydown` → `keydown`
--   `SDSAlertWrapper`: `onSdsRemove` → `sds-remove`
--   `SDSDetailsWrapper`: `onSdsToggle` → `sds-toggle`
--   `SDSDialogWrapper`: `onClose` → `close`
--   `SDSCheckboxGroupWrapper` / `SDSRadioGroupWrapper`: `onSdsUpdate` → `sds-update`
+-   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.0";
+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.0';
+export const SDS_VERSION = '2.14.0';
 //# sourceMappingURL=version.js.map

package/dist/version.js.map

@@ -1 +1 @@
-{"version":3,"file":"version.js","sourceRoot":"","sources":["../src/version.ts"],"names":[],"mappings":"AAAA,gEAAgE;AAChE,MAAM,CAAC,MAAM,WAAW,GAAG,QAAQ,CAAC","sourcesContent":["// Auto-generated by generate-version.cjs — do not edit manually\nexport const SDS_VERSION = '2.13.0';\n"]}
+{"version":3,"file":"version.js","sourceRoot":"","sources":["../src/version.ts"],"names":[],"mappings":"AAAA,gEAAgE;AAChE,MAAM,CAAC,MAAM,WAAW,GAAG,QAAQ,CAAC","sourcesContent":["// Auto-generated by generate-version.cjs — do not edit manually\nexport const SDS_VERSION = '2.14.0';\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@politiet/sheriff-web-components",
-	"version": "2.13.0",
+	"version": "2.14.0",
 	"description": "Sheriff Design System Web Components Library",
 	"author": "Politiets IT-enhet",
 	"license": "ISC",
@@ -19,6 +19,7 @@
 		"./dist/index.js",
 		"./dist/sds-*/sds-*.js",
 		"./dist/shared/**/positioning.js",
+		"./dist/sds-file-upload-item/assets/u-progress.js",
 		"./dist/sheriff-web-components.js"
 	],
 	"exports": {
@@ -97,6 +98,18 @@
 			"import": "./dist/sds-environment-banner/sds-environment-banner.js",
 			"default": "./dist/sds-environment-banner/sds-environment-banner.js"
 		},
+		"./sds-file-upload": {
+			"types": "./dist/sds-file-upload/sds-file-upload.d.ts",
+			"import": "./dist/sds-file-upload/sds-file-upload.js"
+		},
+		"./sds-file-upload-item": {
+			"types": "./dist/sds-file-upload-item/sds-file-upload-item.d.ts",
+			"import": "./dist/sds-file-upload-item/sds-file-upload-item.js"
+		},
+		"./sds-file-upload-file-list": {
+			"types": "./dist/sds-file-upload-file-list/sds-file-upload-file-list.d.ts",
+			"import": "./dist/sds-file-upload-file-list/sds-file-upload-file-list.js"
+		},
 		"./sds-heading": {
 			"types": "./dist/sds-heading/sds-heading.d.ts",
 			"import": "./dist/sds-heading/sds-heading.js",
@@ -152,6 +165,11 @@
 			"import": "./dist/sds-radio-group/sds-radio-group.js",
 			"default": "./dist/sds-radio-group/sds-radio-group.js"
 		},
+		"./sds-search": {
+			"types": "./dist/sds-search/sds-search.d.ts",
+			"import": "./dist/sds-search/sds-search.js",
+			"default": "./dist/sds-search/sds-search.js"
+		},
 		"./sds-select": {
 			"types": "./dist/sds-select/sds-select.d.ts",
 			"import": "./dist/sds-select/sds-select.js",
@@ -204,10 +222,11 @@
 		"test:watch": "vitest",
 		"tidy-frameworks": "node ../../../scripts/delete-filetypes-from-folder.js --folder ./dist/frameworks --filetypes js,js.map",
 		"build:component-version": "node generate-version.cjs",
-		"build": "npm run build:shared && npm run build:popover && npm run build:tooltip && npm run build:component-version && tsc && npm run tidy-frameworks && npm run build:metadata && npm run build:skill",
+		"build": "npm run build:shared && npm run build:popover && npm run build:tooltip && npm run build:u-progress && npm run build:component-version && tsc && npm run tidy-frameworks && npm run build:metadata && npm run build:skill",
 		"build:shared": "rollup -c ./src/shared/assets/rollup.config.js",
 		"build:tooltip": "rollup -c ./src/sds-tooltip/assets/rollup.config.js",
 		"build:popover": "rollup -c src/sds-popover/assets/rollup.config.js",
+		"build:u-progress": "rollup -c ./src/sds-file-upload-item/assets/rollup.config.js",
 		"build:web-types": "wca-webtypes analyze \"src/sds-*/**/*.ts\" --format webtypes --visibility public --outFile \"web-types.json\"",
 		"build:cem": "cem analyze --config custom-elements-manifest.config.mjs --outdir .",
 		"build:metadata": "npm run build:web-types && npm run build:cem",
@@ -221,7 +240,7 @@
 		"@politiet/sheriff-icons": "^2.1.1"
 	},
 	"peerDependencies": {
-		"@politiet/sheriff-css-framework": "^2.6.1",
+		"@politiet/sheriff-css-framework": "^2.6.2",
 		"typescript": ">=3.8.0"
 	},
 	"peerDependenciesMeta": {
@@ -236,12 +255,13 @@
 		"@digdir/designsystemet-web": "^1.12.1",
 		"@rollup/plugin-node-resolve": "^16.0.3",
 		"@rollup/plugin-terser": "^1.0.0",
+		"@u-elements/u-progress": "^1.0.1",
 		"lit-web-types": "^0.1.5",
 		"preact": "^10.26.1",
 		"rollup": "^4.59.0",
 		"solid-js": "^1.9.4",
 		"ts-lit-plugin": "^2.0.2",
-		"vitest": "^3.2.4",
+		"vitest": "^4.1.11",
 		"vue": "^3.5.13",
 		"web-component-analyzer-webtypes": "^2.0.12"
 	},