@oslokommune/punkt-elements 17.1.3 → 18.1.0

package/src/components/datepicker/date-tags.ts

@@ -47,7 +47,10 @@ export class PktDateTags extends PktElement {
                   @close=${() => {
                     this.dispatchEvent(new CustomEvent('date-tag-removed', { detail: date }))
                   }}
-                  .ariaLabel=${`${this.strings?.calendar.deleteDate} ${fromISOtoLocal(date, this.dateformat)}`}
+                  .ariaLabel=${`${this.pktStrings.get('datepicker').deleteDate} ${fromISOtoLocal(
+                    date,
+                    this.dateformat,
+                  )}`}
                 >
                   <time datetime=${date}>${fromISOtoLocal(date, this.dateformat)}</time>
                 </pkt-tag>`,

package/src/components/datepicker/datepicker-base.ts

@@ -4,7 +4,7 @@ import { Ref, createRef } from 'lit/directives/ref.js'
 import { classMap } from 'lit/directives/class-map.js'
 import { PktElement } from '@/base-elements/element'
 import { cssUtils } from './datepicker-utils'
-import { IDatepickerStrings } from './datepicker-types'
+
 import type { TPktInputSize } from 'shared-types/size'
 import '@/components/icon'
 
@@ -15,7 +15,6 @@ import '@/components/icon'
  * used by all three datepicker input types (single, multiple, range).
  *
  * Subclasses must implement:
- * - `strings` property with component-specific defaults
  * - `render()` method with component-specific template
  */
 export abstract class PktDatepickerBase extends PktElement {
@@ -50,9 +49,6 @@ export abstract class PktDatepickerBase extends PktElement {
   @property({ type: Object })
   internals?: ElementInternals
 
-  // Abstract property - must be implemented by subclasses
-  abstract strings: IDatepickerStrings
-
   // Shared refs
   inputRef: Ref<HTMLInputElement> = createRef()
   btnRef: Ref<HTMLButtonElement> = createRef()
@@ -140,7 +136,7 @@ export abstract class PktDatepickerBase extends PktElement {
         ${this.btnRef}
       >
         <pkt-icon name="calendar"></pkt-icon>
-        <span class="pkt-btn__text">${this.strings.calendar?.buttonAltText || 'Åpne kalender'}</span>
+        <span class="pkt-btn__text">${this.pktStrings.get('datepicker').openPicker}</span>
       </button>
     `
   }

package/src/components/datepicker/datepicker-multiple.ts

@@ -5,7 +5,6 @@ import { ifDefined } from 'lit/directives/if-defined.js'
 import { ref } from 'lit/directives/ref.js'
 import { PktDatepickerBase } from './datepicker-base'
 import { keyboardUtils, formUtils } from './datepicker-utils'
-import { IDatepickerStrings, defaultSingleStrings } from './datepicker-types'
 import { isIOS } from 'shared-utils/device-utils'
 import '@/components/icon'
 
@@ -16,8 +15,6 @@ export class PktDatepickerMultiple extends PktDatepickerBase {
   @property({ type: Number })
   maxlength?: number
 
-  @property({ type: Object })
-  strings: IDatepickerStrings = defaultSingleStrings
 
   get isInputDisabled(): boolean {
     return (

package/src/components/datepicker/datepicker-range.ts

@@ -5,7 +5,6 @@ import { ifDefined } from 'lit/directives/if-defined.js'
 import { Ref, createRef, ref } from 'lit/directives/ref.js'
 import { PktDatepickerBase } from './datepicker-base'
 import { keyboardUtils, formUtils, cssUtils } from './datepicker-utils'
-import { IDatepickerStrings, defaultRangeStrings } from './datepicker-types'
 import { isIOS } from 'shared-utils/device-utils'
 import '@/components/icon'
 
@@ -19,8 +18,6 @@ export class PktDatepickerRange extends PktDatepickerBase {
   @property({ type: Boolean })
   showRangeLabels: boolean = false
 
-  @property({ type: Object })
-  strings: IDatepickerStrings = defaultRangeStrings
 
   inputRefTo: Ref<HTMLInputElement> = createRef()
 
@@ -34,13 +31,13 @@ export class PktDatepickerRange extends PktDatepickerBase {
     return html`
       <div class="pkt-input__container">
         ${this.showRangeLabels
-          ? html` <div class="pkt-input-prefix">${this.strings.generic?.from}</div> `
+          ? html` <div class="pkt-input-prefix">${this.pktStrings.get('generic').from}</div> `
           : nothing}
         <input
           class=${classMap(this.inputClasses)}
           .type=${this.inputType}
           id="${this.id}-input"
-          aria-label="${this.label} ${this.strings.generic?.from ?? 'Fra'}"
+          aria-label="${this.label} ${this.pktStrings.get('generic').from}"
           .value=${this.value[0] ?? ''}
           min=${ifDefined(this.min)}
           max=${ifDefined(this.max)}
@@ -97,14 +94,14 @@ export class PktDatepickerRange extends PktDatepickerBase {
           ${ref(this.inputRef)}
         />
         <div class="${classMap(rangeLabelClasses)}" id="${this.id}-to-label">
-          ${this.strings.generic?.to}
+          ${this.pktStrings.get('generic').to}
         </div>
         ${!this.showRangeLabels ? html` <div class="pkt-input-separator">–</div> ` : nothing}
         <input
           class=${classMap(this.inputClasses)}
           .type=${this.inputType}
           id="${this.id}-to"
-          aria-label="${this.label} ${this.strings.generic?.to ?? 'Til'}"
+          aria-label="${this.label} ${this.pktStrings.get('generic').to}"
           .value=${this.value[1] ?? ''}
           min=${ifDefined(this.min)}
           max=${ifDefined(this.max)}

package/src/components/datepicker/datepicker-single.ts

@@ -5,15 +5,12 @@ import { ifDefined } from 'lit/directives/if-defined.js'
 import { ref } from 'lit/directives/ref.js'
 import { PktDatepickerBase } from './datepicker-base'
 import { keyboardUtils, formUtils } from './datepicker-utils'
-import { IDatepickerStrings, defaultSingleStrings } from './datepicker-types'
 import { isIOS } from 'shared-utils/device-utils'
 
 export class PktDatepickerSingle extends PktDatepickerBase {
   @property({ type: String })
   value: string = ''
 
-  @property({ type: Object })
-  strings: IDatepickerStrings = defaultSingleStrings
 
   private dispatchManageValidity(input: HTMLInputElement) {
     this.dispatchEvent(

package/src/components/datepicker/datepicker-utils.test.ts

@@ -144,9 +144,9 @@ describe('datepicker-utils', () => {
       it('should set rangeUnderflow validity when value is below minimum', () => {
         const input = { value: '2024-01-01' } as HTMLInputElement
         const internals = { setValidity: vi.fn() }
-        const strings = { forms: { messages: { rangeUnderflow: 'Too early' } } }
+        const messages = { dateUnderflow: 'Too early' }
 
-        formUtils.validateDateInput(input, internals, '2024-01-10', null, strings)
+        formUtils.validateDateInput(input, internals, '2024-01-10', null, messages)
         expect(internals.setValidity).toHaveBeenCalledWith(
           { rangeUnderflow: true },
           'Too early',
@@ -157,9 +157,9 @@ describe('datepicker-utils', () => {
       it('should set rangeOverflow validity when value is above maximum', () => {
         const input = { value: '2024-01-31' } as HTMLInputElement
         const internals = { setValidity: vi.fn() }
-        const strings = { forms: { messages: { rangeOverflow: 'Too late' } } }
+        const messages = { dateOverflow: 'Too late' }
 
-        formUtils.validateDateInput(input, internals, null, '2024-01-20', strings)
+        formUtils.validateDateInput(input, internals, null, '2024-01-20', messages)
         expect(internals.setValidity).toHaveBeenCalledWith(
           { rangeOverflow: true },
           'Too late',
@@ -174,7 +174,7 @@ describe('datepicker-utils', () => {
         formUtils.validateDateInput(input, internals, '2024-01-10', null)
         expect(internals.setValidity).toHaveBeenCalledWith(
           { rangeUnderflow: true },
-          'Value is below minimum',
+          'For tidlig dato',
           input,
         )
       })

package/src/components/datepicker/datepicker-utils.ts

@@ -1,6 +1,7 @@
 import { fromISOToDate, newDate } from 'shared-utils/date-utils'
 import { Ref } from 'lit/directives/ref.js'
 import { PktCalendar } from '@/components/calendar/calendar'
+import { nb, type TPktStrings } from 'shared-strings'
 import {
   validateRangeOrder,
   sortDates,
@@ -66,23 +67,17 @@ export const formUtils = {
     internals: any,
     min?: string | null,
     max?: string | null,
-    strings?: any,
+    messages?: Partial<TPktStrings['validation']>,
   ): void {
     const value = input.value
     if (!value) return
 
+    const validation = { ...nb.validation, ...messages }
+
     if (min && min > value) {
-      internals.setValidity(
-        { rangeUnderflow: true },
-        strings?.forms?.messages?.rangeUnderflow || 'Value is below minimum',
-        input,
-      )
+      internals.setValidity({ rangeUnderflow: true }, validation.dateUnderflow, input)
     } else if (max && max < value) {
-      internals.setValidity(
-        { rangeOverflow: true },
-        strings?.forms?.messages?.rangeOverflow || 'Value is above maximum',
-        input,
-      )
+      internals.setValidity({ rangeOverflow: true }, validation.dateOverflow, input)
     }
   },
 }

package/src/components/datepicker/datepicker.ts

@@ -391,7 +391,13 @@ export class PktDatepicker extends PktInputElement<Props> {
         }}
         @manage-validity=${(e: CustomEvent) => this.manageValidity(e.detail)}
         @validate-date-input=${(e: CustomEvent) => {
-          formUtils.validateDateInput(e.detail, this.internals, this.min, this.max, this.strings)
+          formUtils.validateDateInput(
+            e.detail,
+            this.internals,
+            this.min,
+            this.max,
+            this.pktStrings.get('validation'),
+          )
         }}
         @handle-date-select=${(e: CustomEvent) => {
           const date = fromISOToDate(e.detail)
@@ -497,6 +503,7 @@ export class PktDatepicker extends PktInputElement<Props> {
 
     return html`
       <pkt-input-wrapper
+        .strings=${this.strings}
         label="${this.label}"
         forId="${this.id}-input"
         ?counter=${this.multiple && !!this.maxlength}

package/src/components/fileupload/fileupload-base.ts

@@ -1,7 +1,6 @@
 import { PropertyValues } from 'lit'
 import { property, state } from 'lit/decorators.js'
 
-import { defaultFileUploadStrings } from 'shared-types'
 import {
   countFileTransferStates,
   formatFileSize,
@@ -14,7 +13,6 @@ import {
 
 import { PktElement } from '@/base-elements/element'
 import converters from '../../helpers/converters'
-import specs from 'componentSpecs/fileupload.json'
 
 import type {
   FileItem,
@@ -29,6 +27,7 @@ import type {
   TUploadStrategy,
 } from './fileupload-types'
 import { uuidish } from 'shared-utils/utils'
+import { formatString, plural } from 'shared-strings'
 
 export abstract class PktFileUploadBase
   extends PktElement<IPktFileUpload>
@@ -45,8 +44,9 @@ export abstract class PktFileUploadBase
   /** Expandable help text (dropdown) shown by `pkt-input-wrapper`. */
   @property({ type: String, attribute: 'helptext-dropdown' }) helptextDropdown: string = ''
   /** Button label for expandable help text. */
+  /** @deprecated Bruk `strings={{ forms: { readMore: '…' } }}` eller `setPktStrings()`. */
   @property({ type: String, attribute: 'helptext-dropdown-button' })
-  helptextDropdownButton: string = specs.props.helptextDropdownButton.default
+  helptextDropdownButton?: string
   /** Mark input as required in form strategy. */
   @property({ type: Boolean, reflect: true }) required = false
   /** Allow selecting/dropping multiple files. */
@@ -92,13 +92,15 @@ export abstract class PktFileUploadBase
   /** Show "Valgfritt" tag in the input wrapper. */
   @property({ type: Boolean, attribute: 'optional-tag' }) optionalTag = false
   /** Label text for the optional tag. */
+  /** @deprecated Bruk `strings={{ forms: { optional: '…' } }}` eller `setPktStrings()`. */
   @property({ type: String, attribute: 'optional-text' })
-  optionalText: string = specs.props.optionalText.default
+  optionalText?: string
   /** Show "Må fylles ut" tag in the input wrapper. */
   @property({ type: Boolean, attribute: 'required-tag' }) requiredTag = false
   /** Label text for the required tag. */
+  /** @deprecated Bruk `strings={{ forms: { required: '…' } }}` eller `setPktStrings()`. */
   @property({ type: String, attribute: 'required-text' })
-  requiredText: string = specs.props.requiredText.default
+  requiredText?: string
   /** Extra tag next to the label. */
   @property({ type: String, attribute: 'tag-text' }) tagText: string | null = null
   /** Trailing characters to keep when middle-truncating long filenames. Set to `0` to disable. */
@@ -119,7 +121,9 @@ export abstract class PktFileUploadBase
   private thumbnailFileById = new Map<string, File>()
   private connectedForm: HTMLFormElement | null = null
   private addedAnnouncementTimer: ReturnType<typeof setTimeout> | null = null
-  private readonly requiredSelectionMessage = defaultFileUploadStrings.requiredMissing
+  private get requiredSelectionMessage() {
+    return this.pktStrings.get('fileupload').requiredMissing
+  }
 
   protected get isControlled() {
     return this.value !== undefined
@@ -297,10 +301,13 @@ export abstract class PktFileUploadBase
       },
     }))
 
+    const fileuploadStrings = this.pktStrings.get('fileupload')
     this.setAddedAnnouncement(
       newItems.length === 1
-        ? defaultFileUploadStrings.srFileAdded(newItems[0].attributes.targetFilename)
-        : defaultFileUploadStrings.srFilesAdded(newItems.length),
+        ? formatString(fileuploadStrings.srFileAdded, {
+            filename: newItems[0].attributes.targetFilename,
+          })
+        : formatString(fileuploadStrings.srFilesAdded, { count: newItems.length }),
     )
 
     const currentFiles = this.getCurrentFiles()
@@ -448,7 +455,8 @@ export abstract class PktFileUploadBase
     this.dispatchEvent(validationEvent)
 
     if (eventDetail.errorMessage) return eventDetail.errorMessage
-    if (validationEvent.defaultPrevented) return defaultFileUploadStrings.genericValidationRejection
+    if (validationEvent.defaultPrevented)
+      return this.pktStrings.get('fileupload').genericValidationRejection
     return null
   }
 
@@ -523,11 +531,12 @@ export abstract class PktFileUploadBase
       this.transfers,
     )
     if (totalCount === 0 || uploadedCount === 0) return ''
-    return defaultFileUploadStrings.srFilesUploadedOfTotal(
-      uploadedCount,
-      totalCount,
-      defaultFileUploadStrings.fileLabel(totalCount),
-    )
+    const fileuploadStrings = this.pktStrings.get('fileupload')
+    return formatString(fileuploadStrings.srFilesUploadedOfTotal, {
+      uploaded: uploadedCount,
+      total: totalCount,
+      label: plural(totalCount, fileuploadStrings.fileLabelOne, fileuploadStrings.fileLabelOther),
+    })
   }
 
   /** Assertive summary for transfer errors (parity with React `FileUpload`). */
@@ -537,11 +546,12 @@ export abstract class PktFileUploadBase
       this.transfers,
     )
     if (totalCount === 0 || failedCount === 0) return ''
-    return defaultFileUploadStrings.srFilesFailedOfTotal(
-      failedCount,
-      totalCount,
-      defaultFileUploadStrings.fileLabel(totalCount),
-    )
+    const fileuploadStrings = this.pktStrings.get('fileupload')
+    return formatString(fileuploadStrings.srFilesFailedOfTotal, {
+      failed: failedCount,
+      total: totalCount,
+      label: plural(totalCount, fileuploadStrings.fileLabelOne, fileuploadStrings.fileLabelOther),
+    })
   }
 
   private syncFormSubmitListener() {

package/src/components/fileupload/fileupload-renderers.ts

@@ -10,6 +10,7 @@ import type {
   TQueueOperationContext,
   TTransferProgress,
 } from './fileupload-types'
+import { formatString, nb } from 'shared-strings'
 
 type TRenderQueueItemProps = {
   file: FileItem
@@ -449,7 +450,7 @@ const renderThumbnailIdleMain = ({
       <button
         type="button"
         class="pkt-fileupload__queue-display__item__thumbnail__image-wrapper pkt-btn pkt-btn--medium pkt-btn--secondary pkt-btn--label-only"
-        aria-label=${`Forhåndsvis bilde ${filename}`}
+        aria-label=${formatString(nb.fileupload.previewImage, { filename })}
         ?disabled=${!isInteractive}
         @click=${() => {
           if (!isInteractive || !onOpenPreview) return

package/src/components/fileupload/fileupload-types.ts

@@ -5,6 +5,7 @@ import type {
   IFileTransfer,
   IFileValidateDetail,
   IFilesChangedDetail,
+  IPktFileUploadBase,
   ITransferCancelledDetail,
   TFilesChangedReason,
   TFileUploadItemRenderer,
@@ -50,49 +51,11 @@ export type TQueueItemOperation = {
   renderHidden?: (context: TQueueOperationContext) => TemplateResult | null
 }
 
-export interface IPktFileUpload {
-  id?: string
+export interface IPktFileUpload extends Omit<IPktFileUploadBase, 'extraOperations' | 'name'> {
   name?: string
-  label?: string
-  helptext?: string
-  /** Expandable help text (dropdown) in input-wrapper. */
-  helptextDropdown?: string
-  /** Button label for expandable help text. */
-  helptextDropdownButton?: string
-  required?: boolean
-  multiple?: boolean
-  disabled?: boolean
-  fullwidth?: boolean
-  uploadStrategy?: TUploadStrategy
-  itemRenderer?: TFileUploadItemRenderer
+  /** Custom element id — required for `uploadStrategy="custom"`. */
+  id?: string
+  /** HTML `accept` attribute on the native file input. */
   accept?: string
-  allowedFormats?: string[]
-  formatErrorMessage?: string
-  maxFileSize?: string | number
-  sizeErrorMessage?: string
-  onFileValidation?: TFileValidator
-  /** External error state (combined with internal validation errors). */
-  hasError?: boolean
-  /** External error message shown under the component. */
-  errorMessage?: string
-  /** Show "Valgfritt" tag in input-wrapper. */
-  optionalTag?: boolean
-  /** Label text for the optional tag. */
-  optionalText?: string
-  /** Show "Må fylles ut" tag in input-wrapper. */
-  requiredTag?: boolean
-  /** Label text for the required tag. */
-  requiredText?: string
-  /** Extra tag next to the label. */
-  tagText?: string | null
-  /** Trailing characters to keep when truncating long filenames. */
-  truncateTail?: number
-  /** Transfer states keyed by `fileId` (custom strategy progress/error/cancel rendering). */
-  transfers?: TFileTransfer[]
-  addCommentsEnabled?: boolean
-  renameFilesEnabled?: boolean
   extraOperations?: TQueueItemOperation[]
-  enableImagePreview?: boolean
-  value?: FileItem[]
-  defaultValue?: FileItem[]
 }

package/src/components/fileupload/fileupload.test.ts

@@ -368,6 +368,22 @@ describe('PktFileUpload', () => {
     expect(withAcceptText).toContain('Format: PNG, application/pdf')
   })
 
+  test('uses drop zone text from the strings property', async () => {
+    const { fileupload } = await createFileUploadTest({ multiple: true })
+    fileupload.strings = {
+      fileupload: {
+        dropZoneDragMultiple: 'Dra dokumentene hit eller',
+        dropZoneOpenFileDialogMultiple: 'bla i filene',
+      },
+    }
+    await fileupload.updateComplete
+
+    const title = fileupload.querySelector('.pkt-fileupload__drop-zone__placeholder__title')
+    expect(title?.textContent).toContain('Dra dokumentene hit eller')
+    expect(title?.textContent).toContain('bla i filene')
+    expect(title?.textContent).not.toContain('velg filer')
+  })
+
   test('sets required only on native file input in form strategy', async () => {
     const { fileupload: formUpload } = await createFileUploadTest({
       required: true,

package/src/components/fileupload/fileupload.ts

@@ -3,7 +3,6 @@ import { classMap } from 'lit/directives/class-map.js'
 import { ifDefined } from 'lit/directives/if-defined.js'
 import { customElement, state } from 'lit/decorators.js'
 
-import { defaultFileUploadStrings } from 'shared-types'
 import { navigateCyclic, trapTabInside, type IFileAndTransfer } from 'shared-utils/fileupload'
 
 import '@/components/alert'
@@ -70,6 +69,7 @@ export class PktFileUpload extends PktFileUploadBase implements IPktFileUpload {
 
     return html`
       <pkt-input-wrapper
+        .strings=${this.strings}
         .forId=${`${this.id}-input`}
         .label=${this.label}
         .helptext=${this.helptext}
@@ -95,6 +95,7 @@ export class PktFileUpload extends PktFileUploadBase implements IPktFileUpload {
   private renderContent() {
     const filesAndTransfers = this.getSortedFilesAndTransfers()
     const previewableImages = this.getPreviewableImages(filesAndTransfers)
+    const fileuploadStrings = this.pktStrings.get('fileupload')
     const supportedFormatsText = this.getSupportedFormatsText()
     const helptextId = !this.label && this.helptext ? `${this.id}-helptext` : undefined
     const errorId = this.hasEffectiveError ? `${this.id}-error` : undefined
@@ -103,25 +104,25 @@ export class PktFileUpload extends PktFileUploadBase implements IPktFileUpload {
     const dropZoneCopy = isThumbnailView
       ? this.multiple
         ? {
-            dragInactive: defaultFileUploadStrings.dropZoneDragMultipleThumbnail,
-            dragActive: defaultFileUploadStrings.dropZoneDragActiveMultipleThumbnail,
-            openFileDialog: defaultFileUploadStrings.dropZoneOpenFileDialogMultipleThumbnail,
+            dragInactive: fileuploadStrings.dropZoneDragMultipleThumbnail,
+            dragActive: fileuploadStrings.dropZoneDragActiveMultipleThumbnail,
+            openFileDialog: fileuploadStrings.dropZoneOpenFileDialogMultipleThumbnail,
           }
         : {
-            dragInactive: defaultFileUploadStrings.dropZoneDragSingleThumbnail,
-            dragActive: defaultFileUploadStrings.dropZoneDragActiveSingleThumbnail,
-            openFileDialog: defaultFileUploadStrings.dropZoneOpenFileDialogSingleThumbnail,
+            dragInactive: fileuploadStrings.dropZoneDragSingleThumbnail,
+            dragActive: fileuploadStrings.dropZoneDragActiveSingleThumbnail,
+            openFileDialog: fileuploadStrings.dropZoneOpenFileDialogSingleThumbnail,
           }
       : this.multiple
         ? {
-            dragInactive: defaultFileUploadStrings.dropZoneDragMultiple,
-            dragActive: defaultFileUploadStrings.dropZoneDragActiveMultiple,
-            openFileDialog: defaultFileUploadStrings.dropZoneOpenFileDialogMultiple,
+            dragInactive: fileuploadStrings.dropZoneDragMultiple,
+            dragActive: fileuploadStrings.dropZoneDragActiveMultiple,
+            openFileDialog: fileuploadStrings.dropZoneOpenFileDialogMultiple,
           }
         : {
-            dragInactive: defaultFileUploadStrings.dropZoneDragSingle,
-            dragActive: defaultFileUploadStrings.dropZoneDragActiveSingle,
-            openFileDialog: defaultFileUploadStrings.dropZoneOpenFileDialogSingle,
+            dragInactive: fileuploadStrings.dropZoneDragSingle,
+            dragActive: fileuploadStrings.dropZoneDragActiveSingle,
+            openFileDialog: fileuploadStrings.dropZoneOpenFileDialogSingle,
           }
 
     return html`
@@ -194,7 +195,7 @@ export class PktFileUpload extends PktFileUploadBase implements IPktFileUpload {
             </p>
             ${supportedFormatsText
               ? html`<p class="pkt-fileupload__drop-zone__placeholder__formats">
-                  ${defaultFileUploadStrings.supportedFormatsPrefix} ${supportedFormatsText}
+                  ${fileuploadStrings.supportedFormatsPrefix} ${supportedFormatsText}
                 </p>`
               : null}
           </div>
@@ -351,13 +352,16 @@ export class PktFileUpload extends PktFileUploadBase implements IPktFileUpload {
 
   private renderPreviewModal(previewableImages: IFileAndTransfer[]) {
     if (!this.enableImagePreview || previewableImages.length === 0) return null
+    const fileuploadStrings = this.pktStrings.get('fileupload')
     const currentImage = previewableImages[this.previewCurrentIndex]
     if (!currentImage) return null
     const hasMultipleImages = previewableImages.length > 1
     const imageUrl = this.getThumbnailUrl(currentImage)
     const hasImage = !!imageUrl && !this.failedImageFileIds[currentImage.fileId]?.preview
     const filename =
-      currentImage.attributes?.targetFilename || currentImage.file?.name || 'Forhåndsvisning'
+      currentImage.attributes?.targetFilename ||
+      currentImage.file?.name ||
+      fileuploadStrings.previewFallbackName
 
     return html`
       <pkt-modal

package/src/components/header/header-global.ts

@@ -428,7 +428,7 @@ export class PktHeaderGlobal extends PktElement<IPktHeaderGlobal> implements IPk
   }
 
   private renderMenuToggle(localeData?: IHeaderFooterLocaleData) {
-    const menuText = localeData?.i18n?.menu || 'Meny'
+    const menuText = localeData?.i18n?.menu || this.pktStrings.get('header').menu
     const isOpen = this.openMenu === 'menu'
     return html`
       <pkt-button
@@ -466,7 +466,7 @@ export class PktHeaderGlobal extends PktElement<IPktHeaderGlobal> implements IPk
         aria-controls=${SEARCH_PANEL_ID}
         @click=${() => this.toggleMenu('search')}
       >
-        ${localeData.i18n?.search || 'Søk'}
+        ${localeData.i18n?.search || this.pktStrings.get('header').search}
       </pkt-button>
     `
   }
@@ -489,7 +489,7 @@ export class PktHeaderGlobal extends PktElement<IPktHeaderGlobal> implements IPk
             id=${search.input.id || 'pkt-header-global-search'}
             name=${ifDefined(search.input.name)}
             placeholder=${ifDefined(placeholder)}
-            aria-label=${ifDefined(localeData.i18n?.search || 'Søk')}
+            aria-label=${ifDefined(localeData.i18n?.search || this.pktStrings.get('header').search)}
             action=${search.endpoint}
             method="get"
             @pkt-search=${(e: CustomEvent<{ value: string }>) => this.handleSearch(e.detail.value)}

package/src/components/header/header-service.ts

@@ -40,7 +40,8 @@ export class PktHeaderService extends PktElementWithSlot<IPktHeader> implements
   @property({ type: String, attribute: 'logo-link' }) logoLink: string = DEFAULT_HEADER_LOGO_LINK
   @property({ type: String, attribute: 'logo-path' }) logoPath: string | undefined =
     typeof window !== 'undefined' ? window.pktLogoPath : defaultLogoPath
-  @property({ type: String, attribute: 'search-placeholder' }) searchPlaceholder = 'Søk'
+  /** @deprecated Bruk `strings={{ header: { search: '…' } }}` eller `setPktStrings()`. */
+  @property({ type: String, attribute: 'search-placeholder' }) searchPlaceholder?: string
   @property({ type: String, attribute: 'search-value' }) searchValue = ''
   @property({ type: Number, attribute: 'mobile-breakpoint' }) mobileBreakpoint: number = 768
   @property({ type: Number, attribute: 'tablet-breakpoint' }) tabletBreakpoint: number = 1280
@@ -333,6 +334,10 @@ export class PktHeaderService extends PktElementWithSlot<IPktHeader> implements
     )
   }
 
+  private get headerStrings() {
+    return this.pktStrings.get('header')
+  }
+
   private renderLogo() {
     if (this.hideLogo) return nothing
 
@@ -422,7 +427,7 @@ export class PktHeaderService extends PktElementWithSlot<IPktHeader> implements
                 @click=${() => this.handleMenuToggle('slot')}
                 aria-expanded=${this.openMenu === 'slot'}
                 aria-controls="mobile-slot-menu"
-                aria-label="Åpne meny"
+                aria-label=${this.headerStrings.openMenu}
               >
                 ${this.slotMenuText}
               </pkt-button>
@@ -472,9 +477,9 @@ export class PktHeaderService extends PktElementWithSlot<IPktHeader> implements
             state=${this.openMenu === 'search' ? 'active' : 'normal'}
             aria-expanded=${this.openMenu === 'search'}
             aria-controls="mobile-search-menu"
-            aria-label="Åpne søkefelt"
+            aria-label=${this.headerStrings.openSearch}
           >
-            Søk
+            ${this.headerStrings.search}
           </pkt-button>
           <div class=${searchMenuClasses} ${ref(this.searchMenuRef)}>
             ${this.openMenu === 'search'
@@ -483,9 +488,9 @@ export class PktHeaderService extends PktElementWithSlot<IPktHeader> implements
                     id="mobile-search-menu"
                     class="pkt-header-service__search-input"
                     type="search"
-                    label="Søk"
+                    label=${this.headerStrings.search}
                     useWrapper="false"
-                    placeholder=${this.searchPlaceholder}
+                    placeholder=${this.searchPlaceholder ?? this.headerStrings.search}
                     value=${this.searchValue}
                     autofocus
                     fullwidth
@@ -508,9 +513,9 @@ export class PktHeaderService extends PktElementWithSlot<IPktHeader> implements
         id="header-service-search"
         class="pkt-header-service__search-input"
         type="search"
-        label="Søk"
+        label=${this.headerStrings.search}
         useWrapper="false"
-        placeholder=${this.searchPlaceholder}
+        placeholder=${this.searchPlaceholder ?? this.headerStrings.search}
         value=${this.searchValue}
         @input=${this.handleSearchInputChange}
         @keydown=${this.handleSearchKeyDown}

package/src/components/header/header.ts

@@ -44,7 +44,8 @@ export class PktHeader extends PktElementWithSlot<IPktHeader> implements IPktHea
   @property({ type: String, attribute: 'service-link' }) serviceLink?: string
   @property({ type: String, attribute: 'logo-link' }) logoLink?: string
   @property({ type: String, attribute: 'logo-path' }) logoPath?: string
-  @property({ type: String, attribute: 'search-placeholder' }) searchPlaceholder = 'Søk'
+  /** @deprecated Bruk `strings={{ header: { search: '…' } }}` eller `setPktStrings()`. */
+  @property({ type: String, attribute: 'search-placeholder' }) searchPlaceholder?: string
   @property({ type: String, attribute: 'search-value' }) searchValue = ''
   @property({ type: Number, attribute: 'mobile-breakpoint' }) mobileBreakpoint: number = 768
   @property({ type: Number, attribute: 'tablet-breakpoint' }) tabletBreakpoint: number = 1280