@oslokommune/punkt-elements 19.5.0 → 19.5.2

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}
@@ -350,7 +351,7 @@ export class PktCombobox extends ComboboxHandlers implements IPktCombobox {
         .counterMaxLength=${this.maxlength ?? 0}
         ?hasError=${this.hasError}
         ?inline=${this.inline}
-        ?disabled=${this.disabled}
+        ?disabled=${this.isDisabled}
         .errorMessage=${this.errorMessage}
         ?optionalTag=${this.optionalTag}
         .optionalText=${this.optionalText}
@@ -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({
@@ -372,7 +372,7 @@ export class PktCombobox extends ComboboxHandlers implements IPktCombobox {
               'pkt-combobox__input--fullwidth': this.fullwidth,
               'pkt-combobox__input--open': this._isOptionsOpen,
               'pkt-combobox__input--error': this.hasError,
-              'pkt-combobox__input--disabled': this.disabled,
+              'pkt-combobox__input--disabled': this.isDisabled,
             })}
             id=${ifDefined(!this._hasTextInput ? `${this.id}-combobox` : undefined)}
             role=${ifDefined(!this._hasTextInput ? 'combobox' : undefined)}
@@ -394,7 +394,7 @@ export class PktCombobox extends ComboboxHandlers implements IPktCombobox {
                 : undefined,
             )}
             aria-description=${ifDefined(this._selectionDescription || undefined)}
-            tabindex=${!this._hasTextInput ? (this.disabled ? '-1' : '0') : '-1'}
+            tabindex=${!this._hasTextInput ? (this.isDisabled ? '-1' : '0') : '-1'}
             @click=${this.handleInputClick}
             @keydown=${!this._hasTextInput ? this.handleSelectOnlyKeydown : nothing}
             @blur=${this.restoreInputTab}
@@ -429,7 +429,7 @@ export class PktCombobox extends ComboboxHandlers implements IPktCombobox {
             .isOpen=${this._isOptionsOpen}
             .searchPlaceholder=${this.searchPlaceholder}
             .label="Liste: ${this.label || ''}"
-            ?disabled=${this.disabled}
+            ?disabled=${this.isDisabled}
             ?include-search=${this.includeSearch}
             ?is-multi-select=${this.multiple}
             ?allow-user-input=${this.allowUserInput && !this._maxIsReached}
@@ -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,
     })
   }
@@ -551,7 +551,7 @@ export class PktCombobox extends ComboboxHandlers implements IPktCombobox {
               >
                 <pkt-tag
                   skin=${tagSkinColor || 'blue-dark'}
-                  ?closeTag=${!this.disabled}
+                  ?closeTag=${!this.isDisabled}
                   .buttonTabindex=${isOutside ? undefined : -1}
                   @close=${() => this.handleTagRemove(value)}
                   @keydown=${

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,
@@ -301,12 +301,12 @@ export class PktDatepicker extends PktInputElement<Props> {
         .max=${this.max}
         .placeholder=${this.placeholder}
         .readonly=${this.readonly}
-        .disabled=${this.disabled}
+        .disabled=${this.isDisabled}
         .inputClasses=${this.inputClasses}
         .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()}
@@ -339,13 +339,13 @@ export class PktDatepicker extends PktInputElement<Props> {
         .max=${this.max}
         .placeholder=${this.placeholder}
         .readonly=${this.readonly}
-        .disabled=${this.disabled}
+        .disabled=${this.isDisabled}
         .showRangeLabels=${this.showRangeLabels}
         .inputClasses=${this.inputClasses}
         .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()}
@@ -427,13 +427,13 @@ export class PktDatepicker extends PktInputElement<Props> {
         .max=${this.max}
         .placeholder=${this.placeholder}
         .readonly=${this.readonly}
-        .disabled=${this.disabled}
+        .disabled=${this.isDisabled}
         .maxlength=${this.maxlength}
         .inputClasses=${this.inputClasses}
         .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,13 +505,14 @@ export class PktDatepicker extends PktInputElement<Props> {
 
     return html`
       <pkt-input-wrapper
+        ${forwardSlots(this, ['helptext'])}
         .strings=${this.strings}
         label="${this.label}"
         forId="${this.id}-input"
         ?counter=${this.multiple && !!this.maxlength}
         .counterCurrent=${this.value ? this._value.length : 0}
         .counterMaxLength=${this.maxlength}
-        ?disabled=${this.disabled}
+        ?disabled=${this.isDisabled}
         ?hasError=${this.hasError}
         ?hasFieldset=${this.effectiveHasFieldset(false)}
         ?inline=${this.inline}
@@ -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/input-wrapper/input-wrapper.test.ts

@@ -373,6 +373,91 @@ 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 the error message to the fieldset', async () => {
+      const fieldset = await mountFieldset('hasError errorMessage="Velg ett alternativ"')
+
+      expect(describedByIds(fieldset)).toContain('g-error')
+      expect(document.getElementById('g-error')).toBeInTheDocument()
+    })
+
+    test('links both helptext and error message to the fieldset', async () => {
+      const fieldset = await mountFieldset('helptext="Velg ett" hasError errorMessage="Mangler"')
+
+      expect(describedByIds(fieldset)).toEqual(['g-helptext', 'g-error'])
+    })
+
+    test('does not link an error message when hasError is off', async () => {
+      const fieldset = await mountFieldset('errorMessage="Mangler"')
+
+      expect(fieldset.hasAttribute('aria-describedby')).toBe(false)
+    })
+
+    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')
+    })
+
+    test('only references ids that are rendered', async () => {
+      const fieldset = await mountFieldset('helptext="Velg ett" hasError errorMessage="Mangler"')
+
+      describedByIds(fieldset).forEach((id) => {
+        expect(document.getElementById(id)).toBeInTheDocument()
+      })
+    })
+
+    test('names the fieldset with a hidden legend when useWrapper is off', async () => {
+      const fieldset = await mountFieldset('useWrapper="false"')
+
+      const legend = fieldset.querySelector(':scope > legend')
+      expect(legend).toHaveClass('pkt-sr-only')
+      expect(legend?.textContent?.trim()).toBe('Gruppe')
+      expect(fieldset.querySelector('label')).toBeNull()
+    })
+  })
+
   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,11 +99,17 @@ export class PktInputWrapper extends PktElementWithSlot<Props> {
   render() {
     const tagClasses = 'pkt-tag pkt-tag--small pkt-tag--thin-text'
 
-    const describedBy = this.ariaDescribedby
-      ? this.ariaDescribedby
-      : this.helptext
-        ? `${this.forId}-helptext`
-        : nothing
+    const hasHelptext = !!this.helptext || this.hasSlotContent('helptext')
+    const describedByIds = new Set(
+      [
+        this.ariaDescribedby || (hasHelptext ? `${this.forId}-helptext` : ''),
+        this.hasError && this.errorMessage ? `${this.forId}-error` : '',
+      ]
+        .join(' ')
+        .split(' ')
+        .filter(Boolean),
+    )
+    const describedBy = describedByIds.size ? [...describedByIds].join(' ') : nothing
 
     const formStrings = this.pktStrings.get('forms')
 
@@ -144,6 +150,8 @@ export class PktInputWrapper extends PktElementWithSlot<Props> {
             >${this.label}${tagElement()}</label
           >`
         }
+      } else if (this.hasFieldset) {
+        return html`<legend class="pkt-sr-only" id="${this.forId}-label">${this.label}</legend>`
       } else {
         return html`<label for="${this.forId}" class="pkt-sr-only" id="${this.forId}-label">
           ${this.label}
@@ -152,8 +160,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 +172,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/radiobutton/radiobutton.ts

@@ -42,9 +42,6 @@ export class PktRadioButton extends PktInputElement<Props> {
   }
 
   attributeChangedCallback(name: string, _old: string | null, value: string | null): void {
-    if (name === 'defaultChecked') {
-      this._checked = this.defaultChecked
-    }
     if (name === 'checked') {
       this._checked = this.checked === '' || this.checked === 'true' || this.checked === true
     }
@@ -55,7 +52,7 @@ export class PktRadioButton extends PktInputElement<Props> {
     const inputTileClasses = classMap({
       'pkt-input-check__input': true,
       'pkt-input-check__input--tile': this.hasTile,
-      'pkt-input-check__input--tile-disabled': this.disabled && this.hasTile,
+      'pkt-input-check__input--tile-disabled': this.isDisabled && this.hasTile,
     })
 
     const inputCheckBoxClasses = classMap({
@@ -65,7 +62,7 @@ export class PktRadioButton extends PktInputElement<Props> {
 
     const labelClasses = classMap({
       'pkt-input-check__input-label': true,
-      'pkt-input-check__input-label--disabled': this.disabled,
+      'pkt-input-check__input-label--disabled': this.isDisabled,
       'pkt-sr-only': this.hideLabel,
     })
 
@@ -122,7 +119,7 @@ export class PktRadioButton extends PktInputElement<Props> {
             id=${this.id + '-internal'}
             class=${inputCheckBoxClasses}
             type="radio"
-            ?disabled=${this.disabled}
+            ?disabled=${this.isDisabled}
             form=""
             name=${this.name + '-internal'}
             ${ref(this.inputRef)}

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,9 +182,10 @@ export class PktSelect extends PktOptionsInputElement<{}, TSelectOption> impleme
 
     return html`
       <pkt-input-wrapper
+        ${forwardSlots(this, ['helptext'])}
         .strings=${this.strings}
         .size=${this.inputSize}
-        ?disabled=${this.disabled}
+        ?disabled=${this.isDisabled}
         ?hasError=${this.hasError}
         ?hasFieldset=${this.effectiveHasFieldset(false)}
         ?inline=${this.inline}
@@ -209,13 +210,13 @@ 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,
             }),
           )}
           aria-labelledby=${ifDefined(this.ariaLabelledby)}
-          ?disabled=${this.disabled}
+          ?disabled=${this.isDisabled}
           id=${this.id + '-input'}
           name=${(this.name || this.id) + '-input'}
           @change=${(e: Event) => {
@@ -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,11 +61,12 @@ 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}
       ?hasFieldset=${this.effectiveHasFieldset(false)}
-      ?disabled=${this.disabled}
+      ?disabled=${this.isDisabled}
       ?hasError=${this.hasError}
       ?inline=${this.inline}
       ?optionalTag=${this.optionalTag}
@@ -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,14 +103,14 @@ 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,
           }),
         )}
         rows=${ifDefined(this.rows ?? undefined)}
         cols=${ifDefined(this.cols ?? undefined)}
-        ?disabled=${this.disabled}
+        ?disabled=${this.isDisabled}
         @input=${(e: InputEvent) => {
           this.value = (e.target as HTMLInputElement).value
           this.onInput()

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,11 +77,12 @@ export class PktTextinput extends PktInputElement<Props> {
 
     return html`
       <pkt-input-wrapper
+        ${forwardSlots(this, ['helptext'])}
         .strings=${this.strings}
         label="${this.label}"
         ?counter=${showCounter}
         ?hasFieldset=${this.effectiveHasFieldset(false)}
-        ?disabled=${this.disabled}
+        ?disabled=${this.isDisabled}
         ?hasError=${this.hasError}
         ?inline=${this.inline}
         ?optionalTag=${this.optionalTag}
@@ -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
@@ -121,13 +121,13 @@ export class PktTextinput extends PktInputElement<Props> {
             ?readonly=${this.readonly}
             size=${this.size || nothing}
             .value=${this.value}
-            ?disabled=${this.disabled}
+            ?disabled=${this.isDisabled}
             aria-invalid=${this.hasError}
             aria-errormessage=${ifDefined(this.hasError ? `${this.id}-input-error` : undefined)}
             aria-describedby=${ifDefined(
               describedByIds({
                 id: this.id + '-input',
-                hasHelptext: !!this.helptext,
+                hasHelptext: !!this.helptext || this.hasSlotContent('helptext'),
                 hasCounter: showCounter,
                 ariaDescribedby: this.ariaDescribedby,
               }),