@oslokommune/punkt-elements 17.1.2 → 18.0.0

package/src/components/combobox/combobox-value.ts

@@ -3,6 +3,7 @@ import { findOptionByValue, isMaxSelectionReached } from 'shared-utils/combobox/
 import { getSingleValueForInput } from 'shared-utils/combobox/input-utils'
 import { selectionMutators } from './combobox-utils'
 import { ComboboxBase } from './combobox-base'
+import type { TComboboxMessageKey } from 'shared-utils/combobox'
 
 /**
  * Value management layer for PktCombobox.
@@ -27,7 +28,7 @@ export class ComboboxValue extends ComboboxBase {
 
     let shouldOptionsBeOpen: boolean = false
     let shouldResetInput: boolean = true
-    let userInfoMessage: string | null = ''
+    let userInfoMessage: TComboboxMessageKey = ''
     let searchValue: string | null = ''
 
     if (isDisabled) return
@@ -35,7 +36,7 @@ export class ComboboxValue extends ComboboxBase {
     // Not in option list and allowUserInput is true
     if (!isInOption && this.allowUserInput && !isEmpty) {
       this.addNewUserValue(value)
-      userInfoMessage = 'Ny verdi lagt til'
+      userInfoMessage = 'valueAdded'
       shouldOptionsBeOpen = isMultiple
     }
 
@@ -46,7 +47,7 @@ export class ComboboxValue extends ComboboxBase {
       }
       shouldResetInput = false
       shouldOptionsBeOpen = true
-      userInfoMessage = 'Ingen treff i søket'
+      userInfoMessage = 'noResults'
     }
 
     // Value is already selected — deselect it
@@ -85,7 +86,7 @@ export class ComboboxValue extends ComboboxBase {
 
     // Multi-select with max selections reached
     else if (isMultiple && isMaxItemsReached) {
-      userInfoMessage = 'Maks antall valg nådd'
+      userInfoMessage = 'maxSelected'
       shouldResetInput = false
       searchValue = value
     }
@@ -93,7 +94,7 @@ export class ComboboxValue extends ComboboxBase {
     // No matching condition — fallback
     else {
       isSingle && this.removeAllSelected()
-      userInfoMessage = 'Ingen gyldig verdi valgt'
+      userInfoMessage = 'noValidValue'
       shouldResetInput = false
       shouldOptionsBeOpen = true
       searchValue = value
@@ -121,7 +122,7 @@ export class ComboboxValue extends ComboboxBase {
     if (this._value.includes(value as string)) return
 
     if (this.multiple && isMaxSelectionReached(this._value.length, this.maxlength)) {
-      this._userInfoMessage = 'Maks antall valg nådd'
+      this._userInfoMessage = 'maxSelected'
       return
     }
 
@@ -152,7 +153,7 @@ export class ComboboxValue extends ComboboxBase {
   protected addAllOptions(): void {
     if (!this.multiple) return
     if (this.maxlength && this._options.length > this.maxlength) {
-      this._userInfoMessage = 'For mange valgt'
+      this._userInfoMessage = 'tooManySelected'
       return
     }
 
@@ -173,10 +174,10 @@ export class ComboboxValue extends ComboboxBase {
     this._search = input
 
     // If the typed value is already selected, don't toggle (which would deselect).
-    // Just reset the input and keep the "Verdien er allerede valgt" message.
+    // Just reset the input and keep the "alreadySelected" message.
     if (input && this._value.includes(input)) {
       this.resetComboboxInput(true)
-      this._userInfoMessage = 'Verdien er allerede valgt'
+      this._userInfoMessage = 'alreadySelected'
       return
     }
 

package/src/components/combobox/combobox.selection.test.ts

@@ -269,7 +269,11 @@ describe('PktCombobox', () => {
       ;(combobox as any).toggleValue('cherry')
       await combobox.updateComplete
 
-      expect(combobox['_userInfoMessage']).toBe('Maks antall valg nådd')
+      expect(combobox['_userInfoMessage']).toBe('maxSelected')
+      const listbox = container.querySelector('pkt-listbox') as HTMLElement & {
+        userMessage: string
+      }
+      expect(listbox.userMessage).toBe('Maks antall valg nådd')
     })
 
     test('allows deselection when at maxlength', async () => {

package/src/components/combobox/combobox.ts

@@ -281,6 +281,7 @@ export class PktCombobox extends ComboboxHandlers implements IPktCombobox {
   render() {
     return html`
       <pkt-input-wrapper
+        .strings=${this.strings}
         .size=${this.inputSize}
         .label=${this.label}
         .helptext=${this.helptext}
@@ -371,7 +372,9 @@ export class PktCombobox extends ComboboxHandlers implements IPktCombobox {
             ?allow-user-input=${this.allowUserInput && !this._maxIsReached}
             ?max-is-reached=${this._maxIsReached}
             .customUserInput=${ifDefined(this._addValueText)}
-            .userMessage=${this._userInfoMessage}
+            .userMessage=${this._userInfoMessage
+              ? this.pktStrings.get('combobox')[this._userInfoMessage]
+              : ''}
             @search=${this.handleSearch}
             @option-toggle=${this.handleOptionToggled}
             @select-all=${this.addAllOptions}

package/src/components/consent/strings.ts

@@ -1,125 +1 @@
-export const consentStrings = {
-  i18n: {
-    nb: {
-      contentPresentation: {
-        title: 'Oslo kommune bruker informasjonskapsler',
-        description: [
-          'For at nettstedet skal fungere og være trygt, bruker Oslo kommune informasjonskapsler. Noen er teknisk nødvendige, mens andre sikrer ulik funksjonalitet.',
-          'Godtar du alle informasjonskapsler, tillater du også at vi samler inn data om statistikk og brukeradferd. Da hjelper du oss med å lage et bedre nettsted uten at du trenger å dele noe personlig informasjon med oss.',
-        ],
-        buttons: {
-          accept: 'Godta alle',
-          reject: 'Kun nødvendige',
-          settings: 'Innstillinger for informasjonskapsler',
-        },
-      },
-      contentSettings: {
-        title: 'Innstillinger for informasjonskapsler',
-        description: [
-          'Her kan du velge hvilke typer informasjonskapsler du vil tillate. Tillatelsen gjelder i 90 dager. Husk at nødvendige informasjonskapsler ikke kan velges bort.',
-          'Du kan når som helst endre innstillingene og finne mer informasjon nederst på nettstedet under «Innstillinger for informasjonskapsler» og «Personvern og informasjonskapsler».',
-        ],
-        buttons: {
-          back: 'Tilbake',
-          save: 'Lagre innstillinger',
-        },
-      },
-    },
-    en: {
-      contentPresentation: {
-        title: 'Before you visit Oslo kommune ...',
-        description: [
-          'This website uses cookies to make improvements. In this context, we need your consent to measure the traffic on the website in relation to statistics and feedback.',
-          'To read more about what we use cookies for, go to our privacy declaration which you will find at the bottom of our websites.',
-        ],
-        buttons: {
-          accept: 'Yes, I accept',
-          reject: 'Only necessary',
-          settings: 'Go to settings',
-        },
-      },
-      contentSettings: {
-        title: 'Her kan du aktivt velge mellom ulike informasjonskapsler',
-        description: [
-          'For å lese mer om hva vi bruker informasjonskapsler til gå til vår personvernserklering som du finner på våre nettsider',
-        ],
-        buttons: {
-          back: 'Back',
-          save: 'Save settings',
-        },
-      },
-    },
-  },
-  cookies: [
-    {
-      name: 'statistics',
-      defaultValue: null,
-      i18n: {
-        nb: {
-          title: 'Statistikk og analyse',
-          description:
-            'Jeg godtar at Oslo kommune bruker informasjonskapsler til å innhente data om statistikk og brukeradferd.',
-          buttons: {
-            yes: 'Ja',
-            no: 'Nei',
-          },
-        },
-        en: {
-          title: 'Statistics and analytics',
-          description: 'Select your preference for statistics and analytics',
-          buttons: {
-            yes: 'Yes',
-            no: 'No',
-          },
-        },
-      },
-    },
-    {
-      name: 'survey',
-      defaultValue: null,
-      i18n: {
-        nb: {
-          title: 'Skriftlige tilbakemeldinger',
-          description:
-            'Jeg godtar at Oslo kommune bruker informasjonskapsler til å vise responsfelt og registrere tilbakemeldinger.',
-          buttons: {
-            yes: 'Ja',
-            no: 'Nei',
-          },
-        },
-        en: {
-          title: 'Survey',
-          description: 'Select your preference for survey',
-          buttons: {
-            yes: 'Yes',
-            no: 'No',
-          },
-        },
-      },
-    },
-    {
-      name: 'functional',
-      defaultValue: true,
-      i18n: {
-        nb: {
-          title: 'Funksjonelle informasjonskapsler',
-          description:
-            'Jeg godtar at Oslo kommune bruker informasjonskapsler for å gjøre ulike funksjoner på nettstedet mulige (for eksempel skjemaer og barnehagevelger).',
-          buttons: {
-            yes: 'Ja',
-            no: 'Nei',
-          },
-        },
-        en: {
-          title: 'Functional cookies',
-          description:
-            'For the website to function optimally, we recommend that you accept these cookies',
-          buttons: {
-            yes: 'Yes',
-            no: 'No',
-          },
-        },
-      },
-    },
-  ],
-}
+export { consentStrings } from 'shared-strings/consent'

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,
@@ -29,6 +28,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>
@@ -92,8 +92,9 @@ 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. */
@@ -119,7 +120,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 +300,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 +454,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 +530,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 +545,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.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,