@oslokommune/punkt-elements 18.0.0 → 18.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-elements",
-  "version": "18.0.0",
+  "version": "18.2.0",
   "description": "Komponentbiblioteket til Punkt, et designsystem laget av Oslo Origo",
   "homepage": "https://punkt.oslo.kommune.no",
   "author": "Team Designsystem, Oslo Origo",
@@ -83,5 +83,5 @@
   "engines": {
     "node": "^22.19.0 || ^24.0.0 || ^26.0.0"
   },
-  "gitHead": "057d0045ccd1af4d0f6591f0e2b0e5ab6fda3843"
+  "gitHead": "3e850f524f546977081c875a222256fb2e63eb5a"
 }

package/src/components/accordion/accordion.ts

@@ -2,21 +2,13 @@ import { provide } from '@lit/context'
 import { html, LitElement } from 'lit'
 import { customElement, property, state } from 'lit/decorators.js'
 import { classMap } from 'lit/directives/class-map.js'
-import type { TAccordionSkin } from 'shared-types'
+import type { IPktAccordionBase, TAccordionSkin } from 'shared-types'
 
 import { accordionContext, type AccordionContext } from './accordion-context'
 
 export type TPktAccordionSkin = TAccordionSkin
 
-export interface IPktAccordion {
-  compact?: boolean
-  skin?: TPktAccordionSkin
-  ariaLabelledBy?: string
-  name?: string
-  /**
-   * @description A unique identifier to connect the accordion with a heading
-   */
-}
+export interface IPktAccordion extends IPktAccordionBase {}
 
 export class PktAccordion extends LitElement implements IPktAccordion {
   // Properties

package/src/components/accordion/accordionitem.ts

@@ -4,6 +4,7 @@ import { consume } from '@lit/context'
 import { html, PropertyValues } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
 import { createRef, Ref, ref } from 'lit/directives/ref.js'
+import type { IPktAccordionItemBase } from 'shared-types'
 import { TPktAccordionSkin } from './accordion'
 import { accordionContext, type AccordionContext } from './accordion-context'
 import { classMap } from 'lit/directives/class-map.js'
@@ -16,15 +17,7 @@ import { ifDefined } from 'lit/directives/if-defined.js'
  * to override the automatic toggling
  */
 
-export interface IPktAccordionItem {
-  defaultOpen?: boolean
-  id: string
-  title: string
-  skin?: TPktAccordionSkin
-  compact?: boolean
-  isOpen?: boolean
-  name?: string | undefined
-}
+export interface IPktAccordionItem extends IPktAccordionItemBase {}
 
 export class PktAccordionItem extends PktElementWithSlot implements IPktAccordionItem {
   @property({ type: Boolean }) defaultOpen: boolean = false

package/src/components/alert/alert.ts

@@ -3,16 +3,17 @@ import { customElement, property, state } from 'lit/decorators.js'
 import { html, nothing, PropertyValues } from 'lit'
 import { PktElementWithSlot } from '@/base-elements/element-with-slot'
 import { slotContent } from '@/directives/slot-content'
-import type { TAriaLive, TAlertSkin } from 'shared-types'
+import type { TAriaLive, TAlertSkin, TAlertSize } from 'shared-types'
 import { updateClassAttribute } from '@/utils/classutils'
-import specs from 'componentSpecs/alert.json'
+import { formatString, type IPktStringsProps } from 'shared-strings'
+import specs from 'componentSpecs/alert.spec'
 
 import '@/components/icon'
 import '@/components/button'
 
 export type { TAlertSkin }
 
-export interface IPktAlert {
+export interface IPktAlert extends IPktStringsProps<'alert' | 'generic'> {
   skin?: TAlertSkin
   closeAlert?: boolean
   title?: string
@@ -23,9 +24,9 @@ export interface IPktAlert {
    */
   compact?: boolean
   role?: string
-  size?: 'medium' | 'small' | 'xsmall'
+  size?: TAlertSize
 }
-export class PktAlert extends PktElementWithSlot implements IPktAlert {
+export class PktAlert extends PktElementWithSlot<IPktAlert> implements IPktAlert {
   constructor() {
     super()
     this._isClosed = false
@@ -33,14 +34,20 @@ export class PktAlert extends PktElementWithSlot implements IPktAlert {
 
   // Properties
 
-  @property({ type: Boolean, reflect: false }) compact = specs.deprecated.compact.default
+  @property({ type: Boolean, reflect: false })
+  compact = specs.deprecated!.compact.default as boolean
   @property({ type: String, reflect: true }) title: string = ''
-  @property({ type: String, reflect: true }) skin: TAlertSkin = specs.props.skin
-    .default as TAlertSkin
-  @property({ type: String }) ariaLive: TAriaLive = specs.props.ariaLive.default as TAriaLive
+  @property({ type: String, reflect: true }) skin: TAlertSkin = (
+    specs.props!.skin as { default: TAlertSkin }
+  ).default
+  @property({ type: String }) ariaLive: TAriaLive = (
+    specs.props!.ariaLive as { default: TAriaLive }
+  ).default
   @property({ type: String, reflect: true, attribute: 'aria-live' })
   ariaLiveAttr: TAriaLive | null = null
-  @property({ type: Boolean, reflect: true }) closeAlert = specs.props.closeAlert.default
+  @property({ type: Boolean, reflect: true }) closeAlert = (
+    specs.props!.closeAlert as { default: boolean }
+  ).default
   @property({ type: String, reflect: true }) date: string | null = null
   @property({ type: String, reflect: true }) role: string = 'status'
   @property({ type: String, attribute: 'size' })
@@ -110,7 +117,7 @@ export class PktAlert extends PktElementWithSlot implements IPktAlert {
                     variant="icon-only"
                     @click=${this.close}
                   >
-                    <span class="sr-only">Lukk</span>
+                    <span class="sr-only">${this.pktStrings.get('generic').close}</span>
                   </pkt-button>
                 </div>
               `
@@ -120,7 +127,9 @@ export class PktAlert extends PktElementWithSlot implements IPktAlert {
           <div class="pkt-alert__text">${slotContent(this)}</div>
 
           ${this.date
-            ? html`<div class="pkt-alert__date">Sist oppdatert: ${this.date}</div>`
+            ? html`<div class="pkt-alert__date">
+                ${formatString(this.pktStrings.get('alert').lastUpdated, { date: this.date })}
+              </div>`
             : nothing}
         </div>
       </div>

package/src/components/backlink/backlink.test.ts

@@ -9,7 +9,7 @@ expect.extend(toHaveNoViolations)
 export interface BacklinkTestConfig extends BaseTestConfig {
   href?: string
   text?: string
-  ariaLabel?: string
+  ariaLabel?: string | null
 }
 
 // Use shared framework
@@ -70,7 +70,7 @@ describe('PktBackLink', () => {
 
       expect(backlink.href).toBe('')
       expect(backlink.text).toBe('Forsiden')
-      expect(backlink.ariaLabel).toBe('')
+      expect(backlink.ariaLabel).toBe(null)
 
       const nav = backlink.querySelector('nav')
       const link = nav?.querySelector('a')
@@ -133,7 +133,7 @@ describe('PktBackLink', () => {
     test('uses default aria-label when none provided', async () => {
       const { backlink } = await createBacklinkTest()
 
-      expect(backlink.ariaLabel).toBe('')
+      expect(backlink.ariaLabel).toBe(null)
 
       const nav = backlink.querySelector('nav')
       expect(nav?.getAttribute('aria-label')).toBe('Gå tilbake til forrige side')

package/src/components/backlink/backlink.ts

@@ -2,21 +2,19 @@ import { PktElement } from '@/base-elements/element'
 import { html } from 'lit'
 import { property, customElement } from 'lit/decorators.js'
 import { ifDefined } from 'lit/directives/if-defined.js'
+import type { IPktBackLinkBase } from 'shared-types'
 
 import '@/components/icon'
 
-export interface IPktBackLink {
-  href?: string
-  text?: string
-  ariaLabel?: string
-}
+export interface IPktBackLink extends IPktBackLinkBase {}
 
 export class PktBackLink extends PktElement<IPktBackLink> implements IPktBackLink {
   // Properties
 
   @property({ type: String }) href: string = ''
   @property({ type: String }) text: string = 'Forsiden'
-  @property({ type: String }) ariaLabel: string = ''
+  /** @deprecated Bruk `strings={{ backlink: { label: '…' } }}` eller `setPktStrings()`. */
+  @property({ type: String }) ariaLabel: string | null = null
 
   // Lifecycle
 

package/src/components/breadcrumbs/breadcrumbs.ts

@@ -1,22 +1,21 @@
 import { customElement, property } from 'lit/decorators.js'
 import { html, nothing } from 'lit'
 import { PktElement } from '@/base-elements/element'
+import type { IBreadcrumb, IPktBreadcrumbsBase } from 'shared-types'
 
 import '@/components/icon'
 
-export interface IBreadcrumbItem {
-  text: string
-  href: string
-}
+export type { IBreadcrumb }
 
-export interface IPktBreadcrumbs {
-  breadcrumbs: IBreadcrumbItem[]
-}
+/** @deprecated Use `IBreadcrumb`. */
+export type IBreadcrumbItem = IBreadcrumb
+
+export interface IPktBreadcrumbs extends IPktBreadcrumbsBase {}
 
-export class PktBreadcrumbs extends PktElement implements IPktBreadcrumbs {
-  @property({ type: Array }) breadcrumbs: IBreadcrumbItem[] = []
+export class PktBreadcrumbs extends PktElement<IPktBreadcrumbs> implements IPktBreadcrumbs {
+  @property({ type: Array }) breadcrumbs: IBreadcrumb[] = []
 
-  private handleLinkClick(event: MouseEvent, item: IBreadcrumbItem, index: number) {
+  private handleLinkClick(event: MouseEvent, item: IBreadcrumb, index: number) {
     const navigateEvent = new CustomEvent('navigate', {
       detail: { item, index, originalEvent: event },
       bubbles: true,

package/src/components/breadcrumbs/index.ts

@@ -1,2 +1,2 @@
 export { PktBreadcrumbs } from './breadcrumbs'
-export type { IBreadcrumbItem, IPktBreadcrumbs } from './breadcrumbs'
+export type { IBreadcrumb, IBreadcrumbItem, IPktBreadcrumbs } from './breadcrumbs'

package/src/components/calendar/calendar.ts

@@ -11,6 +11,7 @@ import {
 } from 'shared-utils/date-utils'
 import { html, nothing, PropertyValues, TemplateResult } from 'lit'
 import { PktElement } from '@/base-elements/element'
+import type { IPktStringsProps } from 'shared-strings'
 import converters from '../../helpers/converters'
 import specs from 'componentSpecs/calendar.json'
 import '@/components/icon'
@@ -54,7 +55,7 @@ type TDayViewData = {
   tabindex: string
 }
 
-export class PktCalendar extends PktElement {
+export class PktCalendar extends PktElement<IPktStringsProps<'dates' | 'calendar'>> {
   // Selection properties
   @property({ converter: converters.csvToArray })
   selected: string | string[] = []

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

@@ -6,6 +6,7 @@ import { isMaxSelectionReached } from 'shared-utils/combobox/option-utils'
 import specs from 'componentSpecs/combobox.json'
 
 import type { IPktComboboxOption, TPktComboboxTagPlacement } from './combobox-types'
+import type { IPktStringsProps } from 'shared-strings'
 import PktListbox from '../listbox'
 import type { TComboboxMessageKey } from 'shared-utils/combobox'
 
@@ -13,7 +14,7 @@ import type { TComboboxMessageKey } from 'shared-utils/combobox'
  * Base class for PktCombobox.
  * Declares all reactive properties, state, refs, and simple helpers.
  */
-export class ComboboxBase extends PktInputElement {
+export class ComboboxBase extends PktInputElement<IPktStringsProps<'combobox' | 'listbox'>> {
   constructor() {
     super()
     this.optionsController = new PktOptionsSlotController(this)

package/src/components/combobox/combobox.ts

@@ -15,6 +15,7 @@ import { getSingleValueForInput } from 'shared-utils/combobox/input-utils'
 import { slotUtils, optionStateUtils } from './combobox-utils'
 import { slotContent } from '@/directives/slot-content'
 import { ComboboxHandlers } from './combobox-handlers'
+import type { IPktStringsProps } from 'shared-strings'
 
 import '../input-wrapper'
 import '../icon'
@@ -24,7 +25,7 @@ import '../listbox'
 // Re-export types for backward compatibility
 export type { IPktComboboxOption, TPktComboboxTagPlacement } from './combobox-types'
 
-export interface IPktCombobox {
+export interface IPktCombobox extends IPktStringsProps<'combobox' | 'listbox'> {
   allowUserInput?: boolean
   typeahead?: boolean
   disabled?: boolean

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

@@ -8,6 +8,7 @@ import '@/components/tag'
 import { fromISOtoLocal } from 'shared-utils/date-utils'
 import { uuidish } from 'shared-utils/utils'
 import { sortDateStrings } from 'shared-utils/date-utils'
+import type { IPktStringsProps } from 'shared-strings'
 
 type TYear = `${number}${number}${number}${number}`
 type TMonth = `${number}${number}`
@@ -22,7 +23,7 @@ export type TISODate = `${TYear}-${TMonth}-${TDay}`
  * https://www.unicode.org/reports/tr35/tr35-dates.html#Date_Field_Symbol_Table
  */
 
-export class PktDateTags extends PktElement {
+export class PktDateTags extends PktElement<IPktStringsProps<'datepicker'>> {
   @property({ type: Array }) dates: TISODate[] = []
   @property({ type: String }) dateformat: string = 'dd.MM.yyyy' // se kommentar over
   @property({ type: String, attribute: 'class' }) className: string = 'pkt-datepicker__tags'

package/src/components/datepicker/datepicker.ts

@@ -31,6 +31,7 @@ import { PktDatepickerSingle } from './datepicker-single'
 import { PktDatepickerRange } from './datepicker-range'
 import { PktDatepickerMultiple } from './datepicker-multiple'
 import { ElementProps } from '@/types/typeUtils'
+import type { IPktStringsProps } from 'shared-strings'
 
 type Props = ElementProps<
   PktDatepicker,
@@ -49,7 +50,8 @@ type Props = ElementProps<
   | 'currentmonth'
   | 'calendarOpen'
   | 'timezone'
->
+> &
+  IPktStringsProps<'generic' | 'datepicker' | 'dates' | 'calendar'>
 
 export class PktDatepicker extends PktInputElement<Props> {
   /**

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

@@ -13,7 +13,6 @@ import {
 
 import { PktElement } from '@/base-elements/element'
 import converters from '../../helpers/converters'
-import specs from 'componentSpecs/fileupload.json'
 
 import type {
   FileItem,
@@ -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. */
@@ -98,8 +98,9 @@ export abstract class PktFileUploadBase
   /** 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. */

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/header/types.ts

@@ -16,6 +16,7 @@ import type {
   THeaderMenuLocale,
   IPktHeaderGlobal as ISharedPktHeaderGlobal,
 } from 'shared-types'
+import type { IPktStringsProps } from 'shared-strings'
 
 export type {
   Booleanish,
@@ -51,7 +52,7 @@ export const convertUserMenuItem = (item: UserMenuItem): TInternalMenuItem => {
 /**
  * Interface for the Header component props
  */
-export interface IPktHeader {
+export interface IPktHeader extends IPktStringsProps<'header'> {
   /** Hide the Oslo logo */
   hideLogo?: Booleanish
   /** Logo link URL */
@@ -110,9 +111,10 @@ export interface IPktHeader {
  */
 export interface IPktHeaderGlobal
   extends Omit<
-    ISharedPktHeaderGlobal,
-    'showSearch' | 'showContact' | 'canChangeRepresentation' | 'userMenu'
-  > {
+      ISharedPktHeaderGlobal,
+      'showSearch' | 'showContact' | 'canChangeRepresentation' | 'userMenu'
+    >,
+    IPktStringsProps<'header'> {
   /** Show the search field. Default: true */
   showSearch?: Booleanish
   /** Show the contact link (from the payload's `header.contact`). Default: true */

package/src/components/helptext/helptext.ts

@@ -4,10 +4,11 @@ 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 type { IPktStringsProps } from 'shared-strings'
 import '@/components/icon'
 import { slotContent } from '@/directives/slot-content'
 
-export class PktHelptext extends PktElementWithSlot {
+export class PktHelptext extends PktElementWithSlot<IPktStringsProps<'forms'>> {
   @property({ type: String, reflect: true })
   forId: string = uuidish()
 

package/src/components/index.ts

@@ -97,7 +97,7 @@ export type { IPktSelectOption, TSelectOption } from '@/components/select'
 
 export type { IPktBackLink } from '@/components/backlink'
 
-export type { IPktBreadcrumbs, IBreadcrumbItem } from '@/components/breadcrumbs'
+export type { IPktBreadcrumbs, IBreadcrumb, IBreadcrumbItem } from '@/components/breadcrumbs'
 
 export type { IPktLoader, TPktLoaderVariant } from '@/components/loader'
 
@@ -140,4 +140,4 @@ export {
   setPktStrings,
   subscribePktStrings,
 } from 'shared-strings'
-export type { TPktStrings, TPktStringsNamespace, TPktStringsOverride } from 'shared-strings'
+export type { TPktStrings, TPktStringsNamespace, TPktStringsOverride, IPktStringsProps } 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 { formatString } from 'shared-strings'
+import { formatString, type IPktStringsProps } 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'
@@ -40,7 +40,8 @@ type Props = ElementProps<
   | 'hasFieldset'
   | 'useWrapper'
   | 'role'
->
+> &
+  IPktStringsProps<'forms' | 'validation'>
 
 export class PktInputWrapper extends PktElementWithSlot<Props> {
   /**

package/src/components/link/link.ts

@@ -3,18 +3,23 @@ import { slotContent } from '@/directives/slot-content'
 import { html, nothing } from 'lit'
 import { classMap } from 'lit/directives/class-map.js'
 import { customElement, property } from 'lit/decorators.js'
-import specs from 'componentSpecs/link.json'
+import specs from 'componentSpecs/link.spec'
+import type { TPropObject } from 'componentSpecs/lib/define-component-spec'
 import '@/components/icon'
 
+/** Spec defaults — narrow cast for `@property` initializers. */
+const specDefaults = specs.props! as Record<string, TPropObject>
+
 export class PktLink extends PktElementWithSlot {
   /**
    * Element attributes
    */
-  @property({ type: String, reflect: true }) href: string = specs.props.href.default
+  @property({ type: String, reflect: true }) href: string = specDefaults.href.default as string
   @property({ type: String, reflect: true }) iconName: string | undefined = undefined
   @property({ type: String, reflect: true }) iconPosition: string | undefined = undefined
   @property({ type: Boolean, reflect: true }) external: boolean = false
-  @property({ type: String, reflect: true }) target: string | null = specs.props.target.default
+  @property({ type: String, reflect: true }) target: string | null =
+    specDefaults.target.default as string
 
   render() {
     const classes = {

package/src/components/listbox/listbox.ts

@@ -5,6 +5,7 @@ import { PktElement } from '@/base-elements/element'
 import { repeat } from 'lit/directives/repeat.js'
 import { classMap } from 'lit/directives/class-map.js'
 import type { IPktComboboxOption } from 'shared-types/combobox'
+import type { IPktStringsProps } from 'shared-strings'
 import { uuidish } from 'shared-utils/utils'
 import { filterOptionsBySearch } from 'shared-utils/combobox/option-utils'
 import {
@@ -28,7 +29,7 @@ declare global {
   }
 }
 
-export interface IPktListbox {
+export interface IPktListbox extends IPktStringsProps<'listbox'> {
   options: IPktComboboxOption[]
   isOpen: boolean
   disabled: boolean
@@ -43,7 +44,7 @@ export interface IPktListbox {
   userMessage: string | null
 }
 
-export class PktListbox extends PktElement implements IPktListbox {
+export class PktListbox extends PktElement<IPktListbox> implements IPktListbox {
   @property({ type: String }) id: string = uuidish()
   @property({ type: String }) label: string | null = null
   @property({ type: Array }) options: IPktComboboxOption[] = []

package/src/components/tag/tag.ts

@@ -10,7 +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'
+import { formatString, type IPktStringsProps } from 'shared-strings'
 
 export type TTagSkin =
   | 'blue'
@@ -24,7 +24,7 @@ export type TTagSkin =
   | 'grey'
 export type TTagType = THTMLButtonType
 
-export interface IPktTag {
+export interface IPktTag extends IPktStringsProps<'tag'> {
   closeTag?: boolean
   size?: TPktSize
   skin?: TTagSkin

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 { formatString } from 'shared-strings'
+import { formatString, type IPktStringsProps } 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'
@@ -14,7 +14,8 @@ import '@/components/icon'
 import '@/components/input-wrapper'
 import { TPktInputSize } from 'shared-types/size'
 
-type Props = ElementProps<PktTimepicker, 'value' | 'hidePicker' | 'stepArrows'>
+type Props = ElementProps<PktTimepicker, 'value' | 'hidePicker' | 'stepArrows'> &
+  IPktStringsProps<'timepicker'>
 
 export interface IPktTimepicker {
   value?: string

package/dist/alert-COeHz6o2.cjs

@@ -1,33 +0,0 @@
-const e=require("./element-B8OGznK0.cjs"),t=require("./class-map-CzCE5pqG.cjs"),n=require("./element-with-slot-DTxILHVv.cjs"),r=require("./classutils-CbklAJDe.cjs");require("./icon-BmMC09mi.cjs"),require("./button-CR4CXtnj.cjs");var i={name:`pkt-alert`,react:`PktAlert`,"css-class":`pkt-alert`,"dark-mode":!0,isElement:!0,isPureReact:!0,events:{onClose:{description:`React: Klikk-event for 'Lukk'-knappen`},close:{description:`Vue: Klikk-event for 'Lukk'-knappen`}},props:{title:{name:`Tittel`,description:`Tittelen som vises øverst i på meldingen`,type:`string`,category:`contents`},skin:{name:`Utseende`,description:`Hvordan type melding er dette?`,type:[`info`,`success`,`warning`,`error`],default:`info`,category:`ui`},date:{name:`Sist oppdatert`,description:`Dato som vises nederst i på meldingen`,type:`string`,category:`contents`},ariaLive:{name:`aria-live`,description:`Hvordan skal skjermleseren lese opp meldingen?`,type:[`off`,`polite`,`assertive`],default:`polite`,category:`accessibility`},size:{name:`Størrelse`,description:`Endrer størrelsen på ulike elementer i alerten.`,type:[`medium`,`small`,`xsmall`],default:`medium`,category:`ui`},closeAlert:{name:`Vis 'Lukk'-knapp`,description:`Viser 'Lukk'-knappen`,type:`boolean`,default:!1,category:`ui`}},slots:{default:{description:`Innholdet i meldingen`}},deprecated:{compact:{name:`Kompakt (deprecated)`,description:`Bruk size i stedet; uten eksplisitt size gir compact størrelsen 'small'.`,type:`boolean`,category:`ui`,default:!1}}},a=class extends n.t{constructor(){super(),this.compact=i.deprecated.compact.default,this.title=``,this.skin=i.props.skin.default,this.ariaLive=i.props.ariaLive.default,this.ariaLiveAttr=null,this.closeAlert=i.props.closeAlert.default,this.date=null,this.role=`status`,this._isClosed=!1,this.close=e=>{this._isClosed=!0,this.dispatchEvent(new CustomEvent(`close`,{detail:{origin:e},bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent(`on-close`,{detail:{origin:e},bubbles:!0,composed:!0}))},this._isClosed=!1}connectedCallback(){super.connectedCallback(),this.ariaLiveAttr=this.getAttribute(`aria-live`)||this.ariaLive}attributeChangedCallback(e,t,n){e===`ariaLive`&&(this.ariaLiveAttr=n),super.attributeChangedCallback(e,t,n)}updated(e){super.updated(e),e.has(`ariaLive`)&&(this.ariaLiveAttr=this.ariaLive),e.has(`_isClosed`)&&r.t(this,`pkt-hide`,this._isClosed)}render(){let r=this.size??(this.compact?`small`:`medium`),i={"pkt-alert":!0,[`pkt-alert--${r}`]:!0,[`pkt-alert--${this.skin}`]:!0,"pkt-hide":this._isClosed},a={"pkt-alert__grid":!0,"pkt-alert__noTitle":!this.title,"pkt-alert__noDate":!this.date};return e._`
-      <div class=${t.t(i)} aria-live=${this.ariaLiveAttr}>
-        <div class=${t.t(a)}>
-          <pkt-icon
-            class="pkt-alert__icon"
-            aria-hidden="true"
-            name=${this.skin===`info`?`alert-information`:`alert-${this.skin}`}
-          ></pkt-icon>
-
-          ${this.closeAlert?e._`
-                <div class="pkt-alert__close">
-                  <pkt-button
-                    tabindex="0"
-                    aria-label="close"
-                    size=${r}
-                    type="button"
-                    skin="tertiary"
-                    iconName="close"
-                    variant="icon-only"
-                    @click=${this.close}
-                  >
-                    <span class="sr-only">Lukk</span>
-                  </pkt-button>
-                </div>
-              `:e.h}
-          ${this.title?e._`<div class="pkt-alert__title">${this.title}</div>`:e.h}
-
-          <div class="pkt-alert__text">${n.n(this)}</div>
-
-          ${this.date?e._`<div class="pkt-alert__date">Sist oppdatert: ${this.date}</div>`:e.h}
-        </div>
-      </div>
-    `}};e.n([e.u({type:Boolean,reflect:!1})],a.prototype,`compact`,void 0),e.n([e.u({type:String,reflect:!0})],a.prototype,`title`,void 0),e.n([e.u({type:String,reflect:!0})],a.prototype,`skin`,void 0),e.n([e.u({type:String})],a.prototype,`ariaLive`,void 0),e.n([e.u({type:String,reflect:!0,attribute:`aria-live`})],a.prototype,`ariaLiveAttr`,void 0),e.n([e.u({type:Boolean,reflect:!0})],a.prototype,`closeAlert`,void 0),e.n([e.u({type:String,reflect:!0})],a.prototype,`date`,void 0),e.n([e.u({type:String,reflect:!0})],a.prototype,`role`,void 0),e.n([e.u({type:String,attribute:`size`})],a.prototype,`size`,void 0),e.n([e.l()],a.prototype,`_isClosed`,void 0);try{e.d(`pkt-alert`)(a)}catch{console.warn(`Forsøker å definere <pkt-alert>, men den er allerede definert`)}var o=a;Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return a}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return o}});

package/dist/if-defined-CVYApOgK.cjs

@@ -1 +0,0 @@
-const e=require("./element-B8OGznK0.cjs");var t=t=>t??e.h;Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return t}});