@oslokommune/punkt-elements 17.1.2 → 18.0.0

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

package/src/components/helptext/helptext.test.ts

@@ -103,7 +103,7 @@ describe('PktHelptext', () => {
       expect(helptext.forId).toBeTruthy() // Should have a generated ID
       expect(helptext.helptext).toBe('')
       expect(helptext.helptextDropdown).toBe('')
-      expect(helptext.helptextDropdownButton).toBeTruthy() // Should have default from specs
+      expect(helptext.helptextDropdownButton).toBeUndefined()
       expect(helptext.isHelpTextOpen).toBe(false)
     })
 

package/src/components/helptext/helptext.ts

@@ -4,7 +4,6 @@ import { unsafeHTML } from 'lit/directives/unsafe-html.js'
 import { classMap } from 'lit/directives/class-map.js'
 import { customElement, property, state } from 'lit/decorators.js'
 import { uuidish } from 'shared-utils/utils'
-import specs from 'componentSpecs/input-wrapper.json'
 import '@/components/icon'
 import { slotContent } from '@/directives/slot-content'
 
@@ -18,8 +17,9 @@ export class PktHelptext extends PktElementWithSlot {
   @property({ type: String })
   helptextDropdown: string = ''
 
+  /** @deprecated Bruk `strings={{ forms: { readMore: '…' } }}` eller `setPktStrings()`. */
   @property({ type: String })
-  helptextDropdownButton: string = specs.props.helptextDropdownButton.default
+  helptextDropdownButton?: string
 
   @state() isHelpTextOpen: boolean = false
 
@@ -55,7 +55,7 @@ export class PktHelptext extends PktElementWithSlot {
               class="pkt-btn__icon"
               name="${this.isHelpTextOpen ? 'chevron-thin-up' : 'chevron-thin-down'}"
             ></pkt-icon>
-            <span class="pkt-btn__text">${unsafeHTML(this.helptextDropdownButton)}</span>
+            <span class="pkt-btn__text">${unsafeHTML(this.helptextDropdownButton ?? this.pktStrings.get('forms').readMore)}</span>
           </button>
           <div
             id="${this.forId}-helptext-expandable"

package/src/components/index.ts

@@ -132,3 +132,12 @@ export type {
   TPktSearchInputAppearance,
   TPktSearchInputMethod,
 } from '@/components/searchinput'
+
+export {
+  getPktStrings,
+  nb as pktStringsNb,
+  resetPktStrings,
+  setPktStrings,
+  subscribePktStrings,
+} from 'shared-strings'
+export type { TPktStrings, TPktStringsNamespace, TPktStringsOverride } from 'shared-strings'

package/src/components/input-wrapper/input-wrapper.ts

@@ -1,7 +1,7 @@
 import { PktElementWithSlot } from '@/base-elements/element-with-slot'
 import { slotContent } from '@/directives/slot-content'
 import { counterStatusId, isCounterExceeded } from 'shared-utils/forms/described-by'
-import strings from '@/translations/no.json'
+import { formatString } from 'shared-strings'
 import { ifDefined } from 'lit/directives/if-defined.js'
 import { html, nothing, PropertyValues } from 'lit'
 import { unsafeHTML } from 'lit/directives/unsafe-html.js'
@@ -58,9 +58,11 @@ export class PktInputWrapper extends PktElementWithSlot<Props> {
   @property({ type: String }) counterError: string | null = null
   @property({ type: String, reflect: false }) counterPosition: TCounterPosition = 'bottom'
   @property({ type: Boolean }) optionalTag: boolean = specs.props.optionalTag.default
-  @property({ type: String }) optionalText: string = specs.props.optionalText.default
+  /** @deprecated Bruk `strings={{ forms: { optional: '…' } }}` eller `setPktStrings()`. */
+  @property({ type: String }) optionalText?: string
   @property({ type: Boolean }) requiredTag: boolean = specs.props.requiredTag.default
-  @property({ type: String }) requiredText: string = specs.props.requiredText.default
+  /** @deprecated Bruk `strings={{ forms: { required: '…' } }}` eller `setPktStrings()`. */
+  @property({ type: String }) requiredText?: string
   @property({ type: String }) tagText: string | null = null
   @property({ type: Boolean }) hasError: boolean = specs.props.hasError.default
   @property({ type: String }) errorMessage: string = ''
@@ -102,16 +104,22 @@ export class PktInputWrapper extends PktElementWithSlot<Props> {
         ? `${this.forId}-helptext`
         : nothing
 
+    const formStrings = this.pktStrings.get('forms')
+
     const tagElement = () => {
       return html`
         ${this.tagText
           ? html`<span class=${tagClasses + ' pkt-tag--gray'}>${this.tagText}</span>`
           : nothing}
         ${this.optionalTag
-          ? html`<span class=${tagClasses + ' pkt-tag--blue-light'}>${this.optionalText}</span>`
+          ? html`<span class=${tagClasses + ' pkt-tag--blue-light'}
+              >${this.optionalText ?? formStrings.optional}</span
+            >`
           : nothing}
         ${this.requiredTag
-          ? html`<span class=${tagClasses + ' pkt-tag--beige'}>${this.requiredText}</span>`
+          ? html`<span class=${tagClasses + ' pkt-tag--beige'}
+              >${this.requiredText ?? formStrings.required}</span
+            >`
           : nothing}
       `
     }
@@ -149,8 +157,7 @@ export class PktInputWrapper extends PktElementWithSlot<Props> {
           .forId=${this.forId}
           .helptext=${this.helptext}
           .helptextDropdown=${this.helptextDropdown}
-          .helptextDropdownButton=${this.helptextDropdownButton ||
-          specs.props.helptextDropdownButton.default}
+          .helptextDropdownButton=${this.helptextDropdownButton ?? formStrings.readMore}
           @toggleHelpText=${(e: CustomEvent) => {
             this.toggleDropdown(e)
           }}
@@ -170,9 +177,10 @@ export class PktInputWrapper extends PktElementWithSlot<Props> {
         </div>
         <div class="pkt-sr-only" id=${counterStatusId(this.forId)} aria-live="polite">
           ${exceeded
-            ? strings.forms.messages.counterExceeded
-                .replace('{current}', String(this.counterCurrent ?? 0))
-                .replace('{max}', String(this.counterMaxLength))
+            ? formatString(this.pktStrings.get('validation').counterExceeded, {
+                current: this.counterCurrent ?? 0,
+                max: this.counterMaxLength,
+              })
             : ''}
         </div>`
     }

package/src/components/listbox/listbox.ts

@@ -1,7 +1,6 @@
 import { html, nothing, PropertyValues } from 'lit'
 import { customElement, property, state } from 'lit/decorators.js'
 import { ifDefined } from 'lit/directives/if-defined.js'
-import strings from '@/translations/no.json'
 import { PktElement } from '@/base-elements/element'
 import { repeat } from 'lit/directives/repeat.js'
 import { classMap } from 'lit/directives/class-map.js'
@@ -263,6 +262,7 @@ export class PktListbox extends PktElement implements IPktListbox {
   }
 
   private renderSearch() {
+    const listboxStrings = this.pktStrings.get('listbox')
     return this.includeSearch
       ? html`
           <div class="pkt-listbox__search">
@@ -272,9 +272,9 @@ export class PktListbox extends PktElement implements IPktListbox {
             <input
               class="pkt-txt-16-light"
               type="text"
-              aria-label="Søk i listen"
+              aria-label=${listboxStrings.searchLabel}
               form=""
-              placeholder=${this.searchPlaceholder || strings.forms.search.placeholder}
+              placeholder=${this.searchPlaceholder ?? listboxStrings.searchPlaceholder}
               @input=${this.handleSearchInput}
               @keydown=${this.handleSearchKeydown}
               .value=${this.searchValue}

package/src/components/radiobutton/radiobutton.ts

@@ -29,9 +29,11 @@ export class PktRadioButton extends PktInputElement<Props> {
   @property({ type: String, reflect: true }) type: string = 'radio'
   @property({ type: String }) tagText: string | null = null
   @property({ type: Boolean }) optionalTag: boolean = false
-  @property({ type: String }) optionalText: string = 'Valgfritt'
+  /** @deprecated Bruk `strings={{ forms: { optional: '…' } }}` eller `setPktStrings()`. */
+  @property({ type: String }) optionalText?: string
   @property({ type: Boolean }) requiredTag: boolean = false
-  @property({ type: String }) requiredText: string = 'Må fylles ut'
+  /** @deprecated Bruk `strings={{ forms: { required: '…' } }}` eller `setPktStrings()`. */
+  @property({ type: String }) requiredText?: string
 
   @state() _checked: boolean = false
 
@@ -69,16 +71,18 @@ export class PktRadioButton extends PktInputElement<Props> {
 
     const tagClasses = 'pkt-tag pkt-tag--small pkt-tag--thin-text'
 
+    const formStrings = this.pktStrings.get('forms')
+
     const tags = () => {
       return html`
         ${this.tagText
           ? html`<span class=${tagClasses + ' pkt-tag--gray'}>${this.tagText}</span>`
           : nothing}
         ${this.optionalTag
-          ? html`<span class=${tagClasses + ' pkt-tag--blue-light'}>${this.optionalText}</span>`
+          ? html`<span class=${tagClasses + ' pkt-tag--blue-light'}>${this.optionalText ?? formStrings.optional}</span>`
           : nothing}
         ${this.requiredTag
-          ? html`<span class=${tagClasses + ' pkt-tag--beige'}>${this.requiredText}</span>`
+          ? html`<span class=${tagClasses + ' pkt-tag--beige'}>${this.requiredText ?? formStrings.required}</span>`
           : nothing}
       `
     }

package/src/components/searchinput/searchinput.ts

@@ -30,7 +30,8 @@ export class PktSearchInput extends PktElement<IPktSearchInput> implements IPktS
   @property({ type: String, reflect: true }) id: string = ''
   @property({ type: String }) label: string | undefined
   @property({ type: String }) name: string | undefined
-  @property({ type: String }) placeholder: string = 'Søk…'
+  /** @deprecated Bruk `strings={{ searchinput: { placeholder: '…' } }}` eller `setPktStrings()`. */
+  @property({ type: String }) placeholder?: string
   @property({ type: String }) value: string = ''
   @property({ type: Array }) suggestions: IPktSearchInputSuggestion[] | undefined
   @property({ type: String }) action: string | undefined
@@ -135,6 +136,7 @@ export class PktSearchInput extends PktElement<IPktSearchInput> implements IPktS
   }
 
   render() {
+    const searchStrings = this.pktStrings.get('searchinput')
     const wrapperClasses = classMap({
       'pkt-searchinput': true,
       [`pkt-searchinput--${this.appearance}`]: true,
@@ -173,7 +175,7 @@ export class PktSearchInput extends PktElement<IPktSearchInput> implements IPktS
           type="search"
           name=${this.name || this.id}
           id=${this.id}
-          placeholder=${this.placeholder || 'Søk…'}
+          placeholder=${this.placeholder || searchStrings.placeholder}
           .value=${this.value}
           ?disabled=${this.disabled}
           autocomplete="off"
@@ -190,7 +192,7 @@ export class PktSearchInput extends PktElement<IPktSearchInput> implements IPktS
           @click=${this.onSearchClick}
         >
           <pkt-icon class="pkt-btn__icon" name="magnifying-glass-big"></pkt-icon>
-          <span class="pkt-btn__text">${this.label || this.placeholder || 'Søk…'}</span>
+          <span class="pkt-btn__text">${this.label || this.placeholder || searchStrings.placeholder}</span>
         </button>
       </div>
       ${this.suggestions

package/src/components/select/select.ts

@@ -182,6 +182,7 @@ export class PktSelect extends PktOptionsInputElement<{}, TSelectOption> impleme
 
     return html`
       <pkt-input-wrapper
+        .strings=${this.strings}
         .size=${this.inputSize}
         ?disabled=${this.disabled}
         ?hasError=${this.hasError}

package/src/components/tag/tag.ts

@@ -10,6 +10,7 @@ import '@/components/icon'
 import type { IAriaAttributes, THTMLButtonType } from 'shared-types'
 import { PktIconName } from '@oslokommune/punkt-assets/dist/icons/icon'
 import { ifDefined } from 'lit/directives/if-defined.js'
+import { formatString } from 'shared-strings'
 
 export type TTagSkin =
   | 'blue'
@@ -68,7 +69,7 @@ export class PktTag extends PktElementWithSlot<IPktTag> implements IPktTag {
     if (this.closeTag && !this.ariaLabel) {
       const label = this.querySelector('button span, .pkt-tag > span')?.textContent?.trim()
       if (label) {
-        this._ariaDescription = `Klikk for å fjerne ${label}`
+        this._ariaDescription = formatString(this.pktStrings.get('tag').remove, { label })
       }
     }
   }

package/src/components/textarea/textarea.ts

@@ -55,6 +55,7 @@ export class PktTextarea extends PktInputElement<Props> {
     const labelledBy = this.ariaLabelledby || `${this.id}-input-label`
 
     return html`<pkt-input-wrapper
+      .strings=${this.strings}
       label=${this.label}
       ?counter=${showCounter}
       ?hasFieldset=${this.effectiveHasFieldset(false)}

package/src/components/textinput/textinput.ts

@@ -71,6 +71,7 @@ export class PktTextinput extends PktInputElement<Props> {
 
     return html`
       <pkt-input-wrapper
+        .strings=${this.strings}
         label="${this.label}"
         ?counter=${showCounter}
         ?hasFieldset=${this.effectiveHasFieldset(false)}

package/src/components/timepicker/timepicker.ts

@@ -6,7 +6,7 @@ import { classMap } from 'lit/directives/class-map.js'
 import { PktInputElement } from '@/base-elements/input-element'
 import { slotContent } from '@/directives/slot-content'
 import { ElementProps } from '@/types/typeUtils'
-import strings from '@/translations/no.json'
+import { formatString } from 'shared-strings'
 import { isValidTimeString, timeToMinutes } from 'shared-utils/timepicker/time-utils'
 import { getMinuteStep, getHourOptions, getMinuteOptions } from 'shared-utils/timepicker/options'
 import { stepTime } from 'shared-utils/timepicker/stepper'
@@ -71,8 +71,10 @@ export class PktTimepicker extends PktInputElement<Props> {
     const anchor = this.hoursInputRef.value
     if (!anchor) return
 
+    const messages = this.pktStrings.get('validation')
+
     if (this.required && !this.value) {
-      this.internals.setValidity({ valueMissing: true }, strings.forms.messages.required, anchor)
+      this.internals.setValidity({ valueMissing: true }, messages.valueMissing, anchor)
       this._setAriaInvalid(true)
       return
     }
@@ -89,7 +91,7 @@ export class PktTimepicker extends PktInputElement<Props> {
     if (this.min && totalMinutes < timeToMinutes(String(this.min))) {
       this.internals.setValidity(
         { rangeUnderflow: true },
-        strings.forms.messages.rangeUnderflowMin.replace('{min}', String(this.min)),
+        formatString(messages.rangeUnderflowMin, { min: String(this.min) }),
         anchor,
       )
       this._setAriaInvalid(true)
@@ -99,7 +101,7 @@ export class PktTimepicker extends PktInputElement<Props> {
     if (this.max && totalMinutes > timeToMinutes(String(this.max))) {
       this.internals.setValidity(
         { rangeOverflow: true },
-        strings.forms.messages.rangeOverflowMax.replace('{max}', String(this.max)),
+        formatString(messages.rangeOverflowMax, { max: String(this.max) }),
         anchor,
       )
       this._setAriaInvalid(true)
@@ -109,13 +111,12 @@ export class PktTimepicker extends PktInputElement<Props> {
     if (this.step && totalMinutes % minuteStep !== 0) {
       const stepMessage =
         minuteStep === 60
-          ? strings.forms.messages.timeStepMismatchHour
+          ? messages.timeStepMismatchHour
           : minuteStep === 30
-            ? strings.forms.messages.timeStepMismatchHalfHour
-            : strings.forms.messages.timeStepMismatch.replace(
-                '{step}',
-                `${minuteStep}, ${minuteStep * 2}, ${minuteStep * 3}`,
-              )
+            ? messages.timeStepMismatchHalfHour
+            : formatString(messages.timeStepMismatch, {
+                step: `${minuteStep}, ${minuteStep * 2}, ${minuteStep * 3}`,
+              })
       this.internals.setValidity({ stepMismatch: true }, stepMessage, anchor)
       this._setAriaInvalid(true)
       return
@@ -583,7 +584,7 @@ export class PktTimepicker extends PktInputElement<Props> {
         id=${this.id + '-popup'}
         ?hidden=${!this._isOpen}
         role="group"
-        aria-label=${this.strings.timepicker?.selectTime ?? 'Velg tidspunkt'}
+        aria-label=${this.pktStrings.get('timepicker').selectTime}
         @keydown=${this._handlePopupKeydown}
         @focusout=${(e: FocusEvent) => {
           if (!this.querySelector('.pkt-timepicker-popup')?.contains(e.relatedTarget as Node)) {
@@ -594,7 +595,7 @@ export class PktTimepicker extends PktInputElement<Props> {
         <div
           class="pkt-timepicker-popup__col"
           role="listbox"
-          aria-label=${this.strings.timepicker?.hours ?? 'Timer'}
+          aria-label=${this.pktStrings.get('timepicker').hours}
           aria-orientation="vertical"
         >
           ${this._hourOptions.map((h) => this._renderOption(h, 'hour'))}
@@ -602,7 +603,7 @@ export class PktTimepicker extends PktInputElement<Props> {
         <div
           class="pkt-timepicker-popup__col"
           role="listbox"
-          aria-label=${this.strings.timepicker?.minutes ?? 'Minutter'}
+          aria-label=${this.pktStrings.get('timepicker').minutes}
           aria-orientation="vertical"
         >
           ${this._minuteOptions.map((m) => this._renderOption(m, 'minute'))}
@@ -612,8 +613,8 @@ export class PktTimepicker extends PktInputElement<Props> {
   }
 
   private _renderContainer() {
-    const hoursLabel = this.strings.timepicker?.hours ?? 'Timer'
-    const minutesLabel = this.strings.timepicker?.minutes ?? 'Minutter'
+    const hoursLabel = this.pktStrings.get('timepicker').hours
+    const minutesLabel = this.pktStrings.get('timepicker').minutes
     const hoursAriaLabel = this.label ? `${hoursLabel}, ${this.label}` : hoursLabel
     const minutesAriaLabel = this.label ? `${minutesLabel}, ${this.label}` : minutesLabel
     return html`
@@ -631,13 +632,13 @@ export class PktTimepicker extends PktInputElement<Props> {
                 class="pkt-input-icon pkt-btn pkt-btn--icon-only pkt-btn--tertiary pkt-btn--${this
                   .inputSize} pkt-timepicker__button pkt-timepicker__button--prev"
                 type="button"
-                aria-label=${this.strings.timepicker?.prevTime ?? 'Forrige tidspunkt'}
+                aria-label=${this.pktStrings.get('timepicker').prevTime}
                 ?disabled=${this.disabled}
                 @click=${() => this._stepTime(-1)}
               >
                 <pkt-icon name="chevron-thin-left"></pkt-icon>
                 <span class="pkt-btn__text"
-                  >${this.strings.timepicker?.prevTime ?? 'Forrige tidspunkt'}</span
+                  >${this.pktStrings.get('timepicker').prevTime}</span
                 >
               </button>
             `
@@ -719,7 +720,7 @@ export class PktTimepicker extends PktInputElement<Props> {
                 class="pkt-input-icon pkt-btn pkt-btn--icon-only pkt-btn--tertiary pkt-btn--${this
                   .inputSize} pkt-timepicker__button"
                 type="button"
-                aria-label=${this.strings.timepicker?.openPicker ?? 'Åpne tidspunkt-velger'}
+                aria-label=${this.pktStrings.get('timepicker').openPicker}
                 aria-haspopup="listbox"
                 aria-expanded=${this._isOpen ? 'true' : 'false'}
                 aria-controls=${this.id + '-popup'}
@@ -728,7 +729,7 @@ export class PktTimepicker extends PktInputElement<Props> {
               >
                 <pkt-icon name="clock"></pkt-icon>
                 <span class="pkt-btn__text"
-                  >${this.strings.timepicker?.openPicker ?? 'Åpne tidspunkt-velger'}</span
+                  >${this.pktStrings.get('timepicker').openPicker}</span
                 >
               </button>
             `
@@ -739,13 +740,13 @@ export class PktTimepicker extends PktInputElement<Props> {
                 class="pkt-input-icon pkt-btn pkt-btn--icon-only pkt-btn--tertiary pkt-btn--${this
                   .inputSize} pkt-timepicker__button pkt-timepicker__button--next"
                 type="button"
-                aria-label=${this.strings.timepicker?.nextTime ?? 'Neste tidspunkt'}
+                aria-label=${this.pktStrings.get('timepicker').nextTime}
                 ?disabled=${this.disabled}
                 @click=${() => this._stepTime(1)}
               >
                 <pkt-icon name="chevron-thin-right"></pkt-icon>
                 <span class="pkt-btn__text"
-                  >${this.strings.timepicker?.nextTime ?? 'Neste tidspunkt'}</span
+                  >${this.pktStrings.get('timepicker').nextTime}</span
                 >
               </button>
             `
@@ -771,6 +772,7 @@ export class PktTimepicker extends PktInputElement<Props> {
   render() {
     return html`
       <pkt-input-wrapper
+        .strings=${this.strings}
         label="${this.label}"
         ?disabled=${this.disabled}
         ?fullwidth=${this.fullwidth}