@oslokommune/punkt-elements 19.4.0 → 19.5.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-elements",
-  "version": "19.4.0",
+  "version": "19.5.1",
   "description": "Komponentbiblioteket til Punkt, designsystem for Oslo kommune",
   "homepage": "https://punkt.oslo.kommune.no",
   "author": "Team Designsystem, Oslo kommune",
@@ -84,5 +84,5 @@
   "engines": {
     "node": "^22.19.0 || ^24.0.0 || ^26.0.0"
   },
-  "gitHead": "74057ff529f28056e96199ce2b2def5aee6ef9bf"
+  "gitHead": "ec50e19e909a893c46c4cea3a3b0de38e23d8666"
 }

package/src/components/alert/alert.test.ts

@@ -37,6 +37,21 @@ afterEach(() => {
 })
 
 describe('PktAlert', () => {
+  describe('Host id', () => {
+    afterEach(() => {
+      document.body.innerHTML = ''
+    })
+
+    test('keeps the id on the host element', async () => {
+      document.body.innerHTML = '<pkt-alert id="min-alert">Melding</pkt-alert>'
+      const alert = document.querySelector('pkt-alert') as CustomElementFor<'pkt-alert'>
+      await alert.updateComplete
+
+      expect(document.getElementById('min-alert')).toBe(alert)
+      expect(document.querySelectorAll('[id="min-alert"]')).toHaveLength(1)
+    })
+  })
+
   describe('Rendering and basic functionality', () => {
     test('renders without errors', async () => {
       const { alert } = await createAlertTest({

package/src/components/alert/alert.ts

@@ -1,5 +1,4 @@
 import { classMap } from 'lit/directives/class-map.js'
-import { ifDefined } from 'lit/directives/if-defined.js'
 import { customElement, property, state } from 'lit/decorators.js'
 import { html, nothing, PropertyValues } from 'lit'
 import { PktElementWithSlot } from '@/base-elements/element-with-slot'
@@ -51,7 +50,6 @@ export class PktAlert extends PktElementWithSlot<IPktAlert> implements IPktAlert
   ).default
   @property({ type: String, reflect: true }) date: string | null = null
   @property({ type: String }) role: string = 'status'
-  @state() _hostId: string | null = null
   @property({ type: String, attribute: 'size' })
   size?: 'medium' | 'small' | 'xsmall'
   @state() _isClosed: boolean = false
@@ -63,15 +61,6 @@ export class PktAlert extends PktElementWithSlot<IPktAlert> implements IPktAlert
     this.ariaLiveAttr = (this.getAttribute('aria-live') as TAriaLive) || this.ariaLive
   }
 
-  protected willUpdate(changed: PropertyValues): void {
-    super.willUpdate(changed)
-    const id = this.getAttribute('id')
-    if (id) {
-      this._hostId = id
-      this.removeAttribute('id')
-    }
-  }
-
   attributeChangedCallback(name: string, _old: string | null, value: string | null): void {
     if (name === 'ariaLive') {
       this.ariaLiveAttr = value as TAriaLive
@@ -111,7 +100,6 @@ export class PktAlert extends PktElementWithSlot<IPktAlert> implements IPktAlert
     return html`
       <div
         class=${classMap(classes)}
-        id=${ifDefined(this._hostId || undefined)}
         aria-live=${this.ariaLiveAttr}
         role=${this.role}
       >

package/src/components/combobox/combobox.ts

@@ -13,7 +13,7 @@ import type {
 import { findOptionByValue, findOptionIndex } from 'shared-utils/combobox/option-utils'
 import { getSingleValueForInput } from 'shared-utils/combobox/input-utils'
 import { slotUtils, optionStateUtils } from './combobox-utils'
-import { slotContent } from '@/directives/slot-content'
+import { forwardSlots } from '@/directives/slot-content'
 import { ComboboxHandlers } from './combobox-handlers'
 import { formatString } from 'shared-strings'
 import type { IPktStringsProps } from 'shared-strings'
@@ -338,6 +338,7 @@ export class PktCombobox extends ComboboxHandlers implements IPktCombobox {
   render() {
     return html`
       <pkt-input-wrapper
+        ${forwardSlots(this, ['helptext'])}
         .strings=${this.strings}
         .size=${this.inputSize}
         .label=${this.label}
@@ -363,7 +364,6 @@ export class PktCombobox extends ComboboxHandlers implements IPktCombobox {
         class="pkt-combobox__wrapper"
         @labelClick=${this.handleInputClick}
       >
-        <div class="pkt-contents" slot="helptext">${slotContent(this, 'helptext')}</div>
         <div class="pkt-combobox" @focusout=${this.handleFocusOut}>
           <div
             class=${classMap({
@@ -467,7 +467,7 @@ export class PktCombobox extends ComboboxHandlers implements IPktCombobox {
   private _describedBy(): string | undefined {
     return describedByIds({
       id: this._hasTextInput ? `${this.id}-input` : `${this.id}-combobox`,
-      hasHelptext: !!this.helptext,
+      hasHelptext: !!this.helptext || this.hasSlotContent('helptext'),
       ariaDescribedby: this.ariaDescribedby,
     })
   }

package/src/components/datepicker/datepicker.ts

@@ -14,7 +14,7 @@ import './datepicker-popup'
 import './datepicker-single'
 import './datepicker-range'
 import './datepicker-multiple'
-import { slotContent } from '@/directives/slot-content'
+import { forwardSlots } from '@/directives/slot-content'
 import {
   valueUtils,
   inputTypeUtils,
@@ -306,7 +306,7 @@ export class PktDatepicker extends PktInputElement<Props> {
         .inputSize=${this.inputSize}
         .internals=${this.internals}
         .hasError=${this.hasError}
-        .hasHelptext=${Boolean(this.helptext || this.helptextDropdown)}
+        .hasHelptext=${Boolean(this.helptext || this.helptextDropdown || this.hasSlotContent('helptext'))}
         .strings=${this.strings}
         @toggle-calendar=${(e: CustomEvent) => this.toggleCalendar(e.detail)}
         @input-change=${() => this.onInput()}
@@ -345,7 +345,7 @@ export class PktDatepicker extends PktInputElement<Props> {
         .inputSize=${this.inputSize}
         .internals=${this.internals}
         .hasError=${this.hasError}
-        .hasHelptext=${Boolean(this.helptext || this.helptextDropdown)}
+        .hasHelptext=${Boolean(this.helptext || this.helptextDropdown || this.hasSlotContent('helptext'))}
         .strings=${this.strings}
         @toggle-calendar=${(e: CustomEvent) => this.toggleCalendar(e.detail)}
         @input-change=${() => this.onInput()}
@@ -433,7 +433,7 @@ export class PktDatepicker extends PktInputElement<Props> {
         .inputSize=${this.inputSize}
         .internals=${this.internals}
         .hasError=${this.hasError}
-        .hasHelptext=${Boolean(this.helptext || this.helptextDropdown)}
+        .hasHelptext=${Boolean(this.helptext || this.helptextDropdown || this.hasSlotContent('helptext'))}
         .strings=${this.strings}
         @toggle-calendar=${(e: CustomEvent) => this.toggleCalendar(e.detail)}
         @input-change=${() => this.onInput()}
@@ -505,6 +505,7 @@ export class PktDatepicker extends PktInputElement<Props> {
 
     return html`
       <pkt-input-wrapper
+        ${forwardSlots(this, ['helptext'])}
         .strings=${this.strings}
         label="${this.label}"
         forId="${this.id}-input"
@@ -529,7 +530,6 @@ export class PktDatepicker extends PktInputElement<Props> {
         .ariaDescribedby=${this.ariaDescribedby}
         .size=${this.inputSize}
       >
-        <div class="pkt-contents" slot="helptext">${slotContent(this, 'helptext')}</div>
         ${this.multiple
           ? html`<pkt-date-tags
               .dates=${this._value}

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

@@ -82,6 +82,85 @@ describe('helptext association', () => {
     expect(input?.getAttribute('aria-label')).toBe('Velg fil')
   })
 
+  describe('helptext from the slot', () => {
+    const slotCases: Array<[string, string]> = [
+      ['pkt-textinput', ''],
+      ['pkt-textarea', ''],
+      ['pkt-select', ''],
+      ['pkt-datepicker', ''],
+      ['pkt-timepicker', ''],
+      ['pkt-combobox', ''],
+      ['pkt-combobox', 'allow-user-input'],
+    ]
+
+    const settle = async (host: HTMLElement & { updateComplete: Promise<unknown> }) => {
+      for (let i = 0; i < 3; i++) {
+        await new Promise((resolve) => setTimeout(resolve, 0))
+        await host.updateComplete
+        const nested = Array.from(
+          host.querySelectorAll<HTMLElement & { updateComplete: Promise<unknown> }>(
+            'pkt-input-wrapper, pkt-helptext',
+          ),
+        )
+        await Promise.all(nested.map((el) => el.updateComplete))
+      }
+    }
+
+    const mountWithSlot = async (tag: string, attrs: string, slot: string) => {
+      document.body.innerHTML = `<${tag} id="felt" name="felt" label="Etikett" ${attrs}>${slot}</${tag}>`
+      await customElements.whenDefined(tag)
+      const host = document.querySelector(tag) as HTMLElement & { updateComplete: Promise<unknown> }
+      await settle(host)
+      return host
+    }
+
+    const controls = (host: HTMLElement) =>
+      host.localName === 'pkt-timepicker'
+        ? Array.from(host.querySelectorAll('[role="spinbutton"]'))
+        : [host.querySelector(CONTROL)]
+
+    const expectDescribedBySlot = (host: HTMLElement) => {
+      const helptext = host.querySelector('.pkt-inputwrapper__helptext')
+      expect(helptext?.textContent).toContain('Hjelp fra slot')
+      controls(host).forEach((control) => {
+        expect(control?.getAttribute('aria-describedby')?.split(' ')).toContain(helptext?.id)
+      })
+    }
+
+    test.each(slotCases)('%s %s renders slotted helptext inside the helptext element', async (tag, attrs) => {
+      const host = await mountWithSlot(tag, attrs, '<div slot="helptext">Hjelp fra slot</div>')
+
+      expectDescribedBySlot(host)
+    })
+
+    test.each(slotCases)('%s %s picks up slotted helptext added after the first render', async (tag, attrs) => {
+      const host = await mountWithSlot(tag, attrs, '')
+      controls(host).forEach((control) => {
+        expect(control?.getAttribute('aria-describedby') ?? '').not.toContain('helptext')
+      })
+
+      const slotted = document.createElement('div')
+      slotted.setAttribute('slot', 'helptext')
+      slotted.textContent = 'Hjelp fra slot'
+      host.appendChild(slotted)
+      await settle(host)
+
+      expectDescribedBySlot(host)
+    })
+
+    test.each(slotCases)('%s %s drops the link when slotted helptext is removed', async (tag, attrs) => {
+      const host = await mountWithSlot(tag, attrs, '<div slot="helptext" class="slotted">Hjelp fra slot</div>')
+      expectDescribedBySlot(host)
+
+      host.querySelector('.slotted')?.remove()
+      await settle(host)
+
+      controls(host).forEach((control) => {
+        expect(control?.getAttribute('aria-describedby') ?? '').not.toContain('helptext')
+      })
+    })
+  })
+
   test('no label carries the description', async () => {
     for (const [tag, attrs] of cases) {
       const host = await mount(tag, attrs)

package/src/components/icon/icon.ts

@@ -4,13 +4,12 @@ import { PktIconName } from '@oslokommune/punkt-assets/dist/icons/icon'
 import { html, PropertyValues } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js'
-
-const defaultPath = 'https://punkt-cdn.oslo.kommune.no/latest/icons/'
+import { ICON_DEFAULTS } from 'shared-types'
 
 // Allow global override of icon fetch
 if (typeof window !== 'undefined') {
   window.pktFetch = window.pktFetch === undefined ? fetch : window.pktFetch
-  window.pktIconPath = window.pktIconPath || defaultPath
+  window.pktIconPath = window.pktIconPath || ICON_DEFAULTS.path
 }
 
 const errorSvg = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"></svg>'
@@ -77,10 +76,11 @@ type Props = ElementProps<PktIcon, 'path' | 'name' | 'ariaHidden' | 'ariaLabel'>
 
 export class PktIcon extends PktElement<Props> {
   @property({ type: String, reflect: false })
-  path: string | undefined = typeof window !== 'undefined' ? window.pktIconPath : defaultPath
+  path: string | undefined =
+    typeof window !== 'undefined' ? window.pktIconPath : ICON_DEFAULTS.path
 
   @property({ type: String, reflect: true })
-  name: PktIconName = ''
+  name: PktIconName = ICON_DEFAULTS.name
 
   @property({
     type: String,
@@ -145,7 +145,7 @@ export class PktIcon extends PktElement<Props> {
 
   protected async getIcon(name: PktIconName = '') {
     if (this._updatedProps.length > 0) {
-      if (!this.path) this.path = typeof window !== 'undefined' ? window.pktIconPath : defaultPath
+      if (!this.path) this.path = typeof window !== 'undefined' ? window.pktIconPath : ICON_DEFAULTS.path
       try {
         this.icon = unsafeSVG(
           await downloadIconOrGetFromCache(this.name || '', this.path),

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

@@ -373,6 +373,55 @@ describe('PktInputWrapper', () => {
     })
   })
 
+  describe('Fieldset name and description', () => {
+    const mountFieldset = async (attributes: string, content = '') => {
+      document.body.innerHTML = `<pkt-input-wrapper forId="g" label="Gruppe" hasFieldset ${attributes}>${content}</pkt-input-wrapper>`
+      await customElements.whenDefined('pkt-input-wrapper')
+      const wrapper = document.querySelector('pkt-input-wrapper') as CustomElementFor<'pkt-input-wrapper'>
+      await wrapper.updateComplete
+      return wrapper.querySelector('fieldset') as HTMLFieldSetElement
+    }
+
+    const describedByIds = (fieldset: HTMLFieldSetElement) =>
+      (fieldset.getAttribute('aria-describedby') ?? '').split(' ').filter(Boolean)
+
+    afterEach(() => {
+      document.body.innerHTML = ''
+    })
+
+    test('links slotted helptext to the fieldset', async () => {
+      const fieldset = await mountFieldset('', '<div class="pkt-contents" slot="helptext">Velg ett</div>')
+
+      expect(describedByIds(fieldset)).toEqual(['g-helptext'])
+    })
+
+    test('renders slotted helptext inside the helptext element', async () => {
+      await mountFieldset('', '<div slot="helptext">Velg ett</div>')
+
+      expect(document.getElementById('g-helptext')?.textContent).toContain('Velg ett')
+    })
+
+    test('links slotted helptext added after the first render', async () => {
+      const fieldset = await mountFieldset('')
+      expect(fieldset.hasAttribute('aria-describedby')).toBe(false)
+      await new Promise((resolve) => setTimeout(resolve, 0))
+
+      const wrapper = document.querySelector('pkt-input-wrapper') as CustomElementFor<'pkt-input-wrapper'>
+      const slotted = document.createElement('div')
+      slotted.setAttribute('slot', 'helptext')
+      slotted.textContent = 'Velg ett'
+      wrapper.appendChild(slotted)
+      for (let i = 0; i < 3; i++) {
+        await new Promise((resolve) => setTimeout(resolve, 0))
+        await wrapper.updateComplete
+        await (wrapper.querySelector('pkt-helptext') as CustomElementFor<'pkt-helptext'>).updateComplete
+      }
+
+      expect(describedByIds(fieldset)).toEqual(['g-helptext'])
+      expect(document.getElementById('g-helptext')?.textContent).toContain('Velg ett')
+    })
+  })
+
   describe('Wrapper functionality', () => {
     test('handles useWrapper property values', async () => {
       // Test true value

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

@@ -1,5 +1,5 @@
 import { PktElementWithSlot } from '@/base-elements/element-with-slot'
-import { slotContent } from '@/directives/slot-content'
+import { forwardSlots, slotContent } from '@/directives/slot-content'
 import { counterStatusId, isCounterExceeded } from 'shared-utils/forms/described-by'
 import { formatString, type IPktStringsProps } from 'shared-strings'
 import { ifDefined } from 'lit/directives/if-defined.js'
@@ -99,9 +99,10 @@ export class PktInputWrapper extends PktElementWithSlot<Props> {
   render() {
     const tagClasses = 'pkt-tag pkt-tag--small pkt-tag--thin-text'
 
+    const hasHelptext = !!this.helptext || this.hasSlotContent('helptext')
     const describedBy = this.ariaDescribedby
       ? this.ariaDescribedby
-      : this.helptext
+      : hasHelptext
         ? `${this.forId}-helptext`
         : nothing
 
@@ -152,8 +153,10 @@ export class PktInputWrapper extends PktElementWithSlot<Props> {
     }
 
     const helptextElement = () => {
+      if (!hasHelptext && !this.helptextDropdown) return nothing
       return html`
         <pkt-helptext
+          ${forwardSlots(this, { helptext: null })}
           class="${ifDefined(!this.useWrapper ? 'pkt-hide' : undefined)}"
           .forId=${this.forId}
           .helptext=${this.helptext}
@@ -162,8 +165,7 @@ export class PktInputWrapper extends PktElementWithSlot<Props> {
           @toggleHelpText=${(e: CustomEvent) => {
             this.toggleDropdown(e)
           }}
-          >${slotContent(this, 'helptext')}</pkt-helptext
-        >
+        ></pkt-helptext>
       `
     }
 

package/src/components/progressbar/progressbar.test.ts

@@ -26,6 +26,25 @@ afterEach(() => {
 })
 
 describe('PktProgressbar', () => {
+  describe('Host id', () => {
+    afterEach(() => {
+      document.body.innerHTML = ''
+    })
+
+    test('keeps the id on the host element', async () => {
+      document.body.innerHTML = '<pkt-progressbar id="min-framdrift" title="Framdrift"></pkt-progressbar>'
+      const progressbar = document.querySelector('pkt-progressbar') as CustomElementFor<'pkt-progressbar'>
+      await progressbar.updateComplete
+
+      expect(document.getElementById('min-framdrift')).toBe(progressbar)
+      expect(document.querySelectorAll('[id="min-framdrift"]')).toHaveLength(1)
+      expect(progressbar.querySelector('[role="progressbar"]')).toHaveAttribute(
+        'aria-labelledby',
+        'min-framdrift-title',
+      )
+    })
+  })
+
   describe('Rendering and basic functionality', () => {
     test('renders without errors', async () => {
       const { progressbar } = await createProgressbarTest()

package/src/components/progressbar/progressbar.ts

@@ -45,7 +45,7 @@ export class PktProgressbar extends PktElement implements IPktProgressbar {
   @property({ type: String, reflect: true }) ariaLabelledby: string | null = null
   @property({ type: String, reflect: true }) ariaValueText: string | null = null
   @property({ type: String }) ariaLive: TAriaLive = 'polite'
-  @property({ type: String }) id: string = uuidish()
+  @property({ type: String, reflect: true }) id: string = uuidish()
   @property({ type: String }) role: TProgressbarRole = 'progressbar'
   @property({ type: String }) skin: TProgressbarSkin = 'dark-blue'
   @property({ type: String }) statusPlacement: TProgressbarStatusPlacement = 'following'
@@ -67,10 +67,7 @@ export class PktProgressbar extends PktElement implements IPktProgressbar {
 
   protected willUpdate(changedProperties: Map<string | number | symbol, unknown>) {
     super.willUpdate(changedProperties)
-    if (this.hasAttribute('id')) {
-      this.progressbarId = this.getAttribute('id') || this.progressbarId
-      this.removeAttribute('id')
-    } else if (this.id) {
+    if (this.id) {
       this.progressbarId = this.id
     }
     // Verdien må fanges FØR removeAttribute: den utløser attributeChangedCallback,
@@ -131,7 +128,6 @@ export class PktProgressbar extends PktElement implements IPktProgressbar {
 
     return html`<div
       ${ref(this.progressBarRef)}
-      id=${this.progressbarId}
       role=${this.resolvedRole}
       aria-live=${ifDefined(this.ariaLive || undefined)}
       aria-atomic="true"

package/src/components/select/select.ts

@@ -4,7 +4,7 @@ import { Ref, createRef, ref } from 'lit/directives/ref.js'
 import { ifDefined } from 'lit/directives/if-defined.js'
 import { PktOptionsInputElement } from '@/base-elements/options-input-element'
 import { PktOptionsSlotController } from '@/controllers/pkt-options-controller'
-import { slotContent } from '@/directives/slot-content'
+import { forwardSlots } from '@/directives/slot-content'
 import type { TSelectOption } from 'shared-types/select'
 import '@/components/input-wrapper'
 import { describedByIds } from 'shared-utils/forms/described-by'
@@ -182,6 +182,7 @@ export class PktSelect extends PktOptionsInputElement<{}, TSelectOption> impleme
 
     return html`
       <pkt-input-wrapper
+        ${forwardSlots(this, ['helptext'])}
         .strings=${this.strings}
         .size=${this.inputSize}
         ?disabled=${this.disabled}
@@ -209,7 +210,7 @@ export class PktSelect extends PktOptionsInputElement<{}, TSelectOption> impleme
           aria-describedby=${ifDefined(
             describedByIds({
               id: this.id + '-input',
-              hasHelptext: !!this.helptext,
+              hasHelptext: !!this.helptext || this.hasSlotContent('helptext'),
               hasCounter: false,
               ariaDescribedby: this.ariaDescribedby,
             }),
@@ -251,7 +252,6 @@ export class PktSelect extends PktOptionsInputElement<{}, TSelectOption> impleme
               )
             : ''}
         </select>
-        <div class="pkt-contents" slot="helptext">${slotContent(this, 'helptext')}</div>
       </pkt-input-wrapper>
     `
   }

package/src/components/textarea/textarea.ts

@@ -5,7 +5,7 @@ import { Ref, createRef, ref } from 'lit/directives/ref.js'
 import { classMap } from 'lit/directives/class-map.js'
 import { live } from 'lit/directives/live.js'
 import { PktInputElement } from '@/base-elements/input-element'
-import { slotContent } from '@/directives/slot-content'
+import { forwardSlots } from '@/directives/slot-content'
 
 import '@/components/input-wrapper'
 import '@/components/icon'
@@ -61,6 +61,7 @@ export class PktTextarea extends PktInputElement<Props> {
     const labelledBy = this.ariaLabelledby || `${this.id}-input-label`
 
     return html`<pkt-input-wrapper
+      ${forwardSlots(this, ['helptext'])}
       .strings=${this.strings}
       label=${this.label}
       ?counter=${showCounter}
@@ -85,7 +86,6 @@ export class PktTextarea extends PktInputElement<Props> {
       .tagText=${this.tagText}
       .size=${this.inputSize}
     >
-      <div class="pkt-contents" slot="helptext">${slotContent(this, 'helptext')}</div>
       <textarea
         ${ref(this.inputRef)}
         class=${inputClasses}
@@ -103,7 +103,7 @@ export class PktTextarea extends PktInputElement<Props> {
         aria-describedby=${ifDefined(
           describedByIds({
             id: this.id + '-input',
-            hasHelptext: !!this.helptext,
+            hasHelptext: !!this.helptext || this.hasSlotContent('helptext'),
             hasCounter: showCounter,
             ariaDescribedby: this.ariaDescribedby,
           }),

package/src/components/textinput/textinput.ts

@@ -5,7 +5,7 @@ import { Ref, createRef, ref } from 'lit/directives/ref.js'
 import { ElementProps } from '@/types/typeUtils'
 import { classMap } from 'lit/directives/class-map.js'
 import { PktInputElement } from '@/base-elements/input-element'
-import { slotContent } from '@/directives/slot-content'
+import { forwardSlots } from '@/directives/slot-content'
 
 import '@/components/input-wrapper'
 import '@/components/icon'
@@ -77,6 +77,7 @@ export class PktTextinput extends PktInputElement<Props> {
 
     return html`
       <pkt-input-wrapper
+        ${forwardSlots(this, ['helptext'])}
         .strings=${this.strings}
         label="${this.label}"
         ?counter=${showCounter}
@@ -101,7 +102,6 @@ export class PktTextinput extends PktInputElement<Props> {
         .tagText=${this.tagText}
         .size=${this.inputSize}
       >
-        <div class="pkt-contents" slot="helptext">${slotContent(this, 'helptext')}</div>
         <div class=${`pkt-input__container pkt-input__container--${this.inputSize}`}>
           ${this.prefix ? html`<div class="pkt-input-prefix">${this.prefix}</div>` : nothing}
           <input
@@ -127,7 +127,7 @@ export class PktTextinput extends PktInputElement<Props> {
             aria-describedby=${ifDefined(
               describedByIds({
                 id: this.id + '-input',
-                hasHelptext: !!this.helptext,
+                hasHelptext: !!this.helptext || this.hasSlotContent('helptext'),
                 hasCounter: showCounter,
                 ariaDescribedby: this.ariaDescribedby,
               }),

package/src/components/timepicker/timepicker.ts

@@ -4,7 +4,7 @@ import { Ref, createRef, ref } from 'lit/directives/ref.js'
 import { ifDefined } from 'lit/directives/if-defined.js'
 import { classMap } from 'lit/directives/class-map.js'
 import { PktInputElement } from '@/base-elements/input-element'
-import { slotContent } from '@/directives/slot-content'
+import { forwardSlots } from '@/directives/slot-content'
 import { ElementProps } from '@/types/typeUtils'
 import { formatString, type IPktStringsProps } from 'shared-strings'
 import { isValidTimeString, timeToMinutes } from 'shared-utils/timepicker/time-utils'
@@ -149,7 +149,7 @@ export class PktTimepicker extends PktInputElement<Props> {
   private _describedBy(): string | undefined {
     return describedByIds({
       id: `${this.id}-hours`,
-      hasHelptext: !!this.helptext,
+      hasHelptext: !!this.helptext || this.hasSlotContent('helptext'),
       ariaDescribedby: this.ariaDescribedby,
     })
   }
@@ -784,6 +784,7 @@ export class PktTimepicker extends PktInputElement<Props> {
   render() {
     return html`
       <pkt-input-wrapper
+        ${forwardSlots(this, ['helptext'])}
         .strings=${this.strings}
         label="${this.label}"
         ?disabled=${this.disabled}
@@ -806,7 +807,6 @@ export class PktTimepicker extends PktInputElement<Props> {
         .tagText=${this.tagText}
         .size=${this.inputSize}
       >
-        <div class="pkt-contents" slot="helptext">${slotContent(this, 'helptext')}</div>
         ${!this.hidePicker && !this.stepArrows
           ? html`
               <div class="pkt-timepicker__anchor">

package/dist/alert-D1bQjZ7C.cjs

@@ -1,40 +0,0 @@
-const e=require("./element-BOmr9YLv.cjs"),t=require("./class-map-Drv0_anQ.cjs"),n=require("./if-defined-2mkIDgOm.cjs"),r=require("./format-B8meU8Tm.cjs"),i=require("./element-with-slot-2PHu2w7O.cjs"),a=require("./classutils-CbklAJDe.cjs"),o=require("./define-component-spec-DBNd2FJY.cjs");require("./icon-CoBsgGUR.cjs"),require("./button-CmNrMH-c.cjs");var s=[`off`,`polite`,`assertive`],c=[`info`,`success`,`warning`,`error`],l=[`medium`,`small`,`xsmall`],u={compact:!1},d=o.t({name:`pkt-alert`,react:`PktAlert`,"css-class":`pkt-alert`,"dark-mode":!0,isElement:!0,isPureReact:!0,events:{onClose:{reactOnly:!0,description:`React: Klikk-event for 'Lukk'-knappen`},close:{elementsOnly:!0,description:`Elements: 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:[...c],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:[...s],default:`polite`,category:`accessibility`},size:{name:`Størrelse`,description:`Endrer størrelsen på ulike elementer i alerten.`,type:[...l],default:`medium`,category:`ui`},closeAlert:{name:`Vis 'Lukk'-knapp`,description:`Viser 'Lukk'-knappen`,type:`boolean`,default:!1,category:`ui`},compact:{name:`Kompakt`,description:`Kompakt visning av alerten.`,deprecated:"Bruk `size` i stedet; uten eksplisitt `size` gir compact størrelsen 'small'.",type:`boolean`,category:`ui`,default:u.compact}},slots:{default:{description:`Innholdet i meldingen`}}}),f=class extends i.t{constructor(){super(),this.compact=u.compact,this.title=``,this.skin=d.props.skin.default,this.ariaLive=d.props.ariaLive.default,this.ariaLiveAttr=null,this.closeAlert=d.props.closeAlert.default,this.date=null,this.role=`status`,this._hostId=null,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}willUpdate(e){super.willUpdate(e);let t=this.getAttribute(`id`);t&&(this._hostId=t,this.removeAttribute(`id`))}attributeChangedCallback(e,t,n){e===`ariaLive`&&(this.ariaLiveAttr=n),super.attributeChangedCallback(e,t,n)}updated(e){super.updated(e),e.has(`ariaLive`)&&e.get(`ariaLive`)!==void 0&&(this.ariaLiveAttr=this.ariaLive),e.has(`_isClosed`)&&a.t(this,`pkt-hide`,this._isClosed)}render(){let a=this.size??(this.compact?`small`:`medium`),o={"pkt-alert":!0,[`pkt-alert--${a}`]:!0,[`pkt-alert--${this.skin}`]:!0,"pkt-hide":this._isClosed},s={"pkt-alert__grid":!0,"pkt-alert__noTitle":!this.title,"pkt-alert__noDate":!this.date};return e._`
-      <div
-        class=${t.t(o)}
-        id=${n.t(this._hostId||void 0)}
-        aria-live=${this.ariaLiveAttr}
-        role=${this.role}
-      >
-        <div class=${t.t(s)}>
-          <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=${this.pktStrings.get(`generic`).close}
-                    size=${a}
-                    type="button"
-                    skin="tertiary"
-                    iconName="close"
-                    variant="icon-only"
-                    @click=${this.close}
-                  >
-                    <span class="sr-only">${this.pktStrings.get(`generic`).close}</span>
-                  </pkt-button>
-                </div>
-              `:e.h}
-          ${this.title?e._`<div class="pkt-alert__title">${this.title}</div>`:e.h}
-
-          <div class="pkt-alert__text">${i.r(this)}</div>
-
-          ${this.date?e._`<div class="pkt-alert__date">
-                ${r.t(this.pktStrings.get(`alert`).lastUpdated,{date:this.date})}
-              </div>`:e.h}
-        </div>
-      </div>
-    `}};e.n([e.u({type:Boolean,reflect:!1})],f.prototype,`compact`,void 0),e.n([e.u({type:String,reflect:!0})],f.prototype,`title`,void 0),e.n([e.u({type:String,reflect:!0})],f.prototype,`skin`,void 0),e.n([e.u({type:String})],f.prototype,`ariaLive`,void 0),e.n([e.u({type:String,reflect:!0,attribute:`aria-live`})],f.prototype,`ariaLiveAttr`,void 0),e.n([e.u({type:Boolean,reflect:!0})],f.prototype,`closeAlert`,void 0),e.n([e.u({type:String,reflect:!0})],f.prototype,`date`,void 0),e.n([e.u({type:String})],f.prototype,`role`,void 0),e.n([e.l()],f.prototype,`_hostId`,void 0),e.n([e.u({type:String,attribute:`size`})],f.prototype,`size`,void 0),e.n([e.l()],f.prototype,`_isClosed`,void 0);try{e.d(`pkt-alert`)(f)}catch{console.warn(`Forsøker å definere <pkt-alert>, men den er allerede definert`)}var p=f;Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return f}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return p}});