@oslokommune/punkt-elements 13.5.5 → 13.5.6

package/CHANGELOG.md

@@ -5,6 +5,23 @@ og skriver commits ca etter [Conventional Commits](https://conventionalcommits.o
 
 ---
 
+## [13.5.6](https://github.com/oslokommune/punkt/compare/13.5.5...13.5.6) (2025-09-09)
+
+### ⚠ BREAKING CHANGES
+Ingen
+
+### Features
+Ingen
+
+### Bug Fixes
+Ingen
+
+### Chores
+Ingen
+
+---
+
+
 ## [13.5.5](https://github.com/oslokommune/punkt/compare/13.5.4...13.5.5) (2025-09-09)
 
 ### ⚠ BREAKING CHANGES

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-elements",
-  "version": "13.5.5",
+  "version": "13.5.6",
   "description": "Komponentbiblioteket til Punkt, et designsystem laget av Oslo Origo",
   "homepage": "https://punkt.oslo.kommune.no",
   "author": "Team Designsystem, Oslo Origo",
@@ -73,5 +73,5 @@
     "url": "https://github.com/oslokommune/punkt/issues"
   },
   "license": "MIT",
-  "gitHead": "f65d3c81c0543cc360a34fe346b4e0585deb46ac"
+  "gitHead": "5f0019a262ea4b9086590f7b6d572f5a39142f31"
 }

package/src/components/tag/tag.test.ts

@@ -0,0 +1,211 @@
+import '@testing-library/jest-dom'
+import { axe, toHaveNoViolations } from 'jest-axe'
+import { fireEvent } from '@testing-library/dom'
+import { createElementTest, BaseTestConfig } from '../../tests/test-framework'
+import { CustomElementFor } from '../../tests/component-registry'
+import { type IPktTag } from './tag'
+import './tag'
+
+export interface TagTestConfig extends Partial<IPktTag>, BaseTestConfig {}
+
+// Use shared framework
+export const createTagTest = async (config: TagTestConfig = {}) => {
+  const { container, element } = await createElementTest<
+    CustomElementFor<'pkt-tag'>,
+    TagTestConfig
+  >('pkt-tag', config)
+
+  return {
+    container,
+    tag: element,
+  }
+}
+
+expect.extend(toHaveNoViolations)
+
+// Test data constants
+const VALID_SKINS = [
+  'blue',
+  'blue-dark',
+  'blue-light',
+  'green',
+  'red',
+  'yellow',
+  'beige',
+  'gray',
+  'grey',
+] as const
+const VALID_SIZES = ['small', 'medium', 'large'] as const
+const VALID_TYPES = ['button', 'reset', 'submit'] as const
+
+afterEach(() => {
+  document.body.innerHTML = ''
+})
+
+describe('PktTag', () => {
+  describe('Basic Rendering', () => {
+    test('renders without errors', async () => {
+      const { tag } = await createTagTest()
+      expect(tag).toBeInTheDocument()
+    })
+
+    test('renders with default properties', async () => {
+      const { tag } = await createTagTest()
+      expect(tag.closeTag).toBe(false)
+      expect(tag.size).toBe('medium')
+      expect(tag.skin).toBe('blue')
+      expect(tag.type).toBe('button')
+    })
+
+    test('renders content in slot', async () => {
+      const content = 'Test Tag Content'
+      const { tag } = await createTagTest({ content })
+      expect(tag.textContent?.trim()).toBe(content)
+    })
+  })
+
+  describe('Skin Variations', () => {
+    test('applies different skin classes correctly', async () => {
+      for (const skin of VALID_SKINS) {
+        const { tag } = await createTagTest({ skin })
+        // For non-closeable tags, check the span element
+        const tagElement = tag.querySelector('span') || tag.querySelector('button')
+        expect(tagElement).toHaveClass(`pkt-tag--${skin}`)
+      }
+    })
+  })
+
+  describe('Size Variations', () => {
+    test('applies different size classes correctly', async () => {
+      for (const size of VALID_SIZES) {
+        const { tag } = await createTagTest({ size })
+        // For non-closeable tags, check the span element
+        const tagElement = tag.querySelector('span') || tag.querySelector('button')
+        expect(tagElement).toHaveClass(`pkt-tag--${size}`)
+      }
+    })
+  })
+
+  describe('Type Variations', () => {
+    test('sets correct type attribute', async () => {
+      for (const type of VALID_TYPES) {
+        const { tag } = await createTagTest({ type })
+        expect(tag.type).toBe(type)
+      }
+    })
+  })
+
+  describe('Icon Functionality', () => {
+    test('renders icon when iconName provided', async () => {
+      const { tag } = await createTagTest({ iconName: 'arrow-right' })
+      const icon = tag.querySelector('pkt-icon')
+      expect(icon).toBeInTheDocument()
+      expect(icon?.getAttribute('name')).toBe('arrow-right')
+    })
+
+    test('does not render icon when iconName not provided', async () => {
+      const { tag } = await createTagTest()
+      const icon = tag.querySelector('pkt-icon')
+      expect(icon).not.toBeInTheDocument()
+    })
+  })
+
+  describe('Close Functionality', () => {
+    test('renders close button when closeTag is true', async () => {
+      const { tag } = await createTagTest({ closeTag: true })
+      const closeIcon = tag.querySelector('.pkt-tag__close-btn')
+      expect(closeIcon).toBeInTheDocument()
+    })
+
+    test('does not render close button when closeTag is false', async () => {
+      const { tag } = await createTagTest({ closeTag: false })
+      const closeIcon = tag.querySelector('.pkt-tag__close-btn')
+      expect(closeIcon).not.toBeInTheDocument()
+    })
+
+    test('dispatches close event when close button is clicked', async () => {
+      const { tag } = await createTagTest({ closeTag: true })
+      const closeSpy = jest.fn()
+      tag.addEventListener('close', closeSpy)
+
+      const button = tag.querySelector('button') as HTMLButtonElement
+      fireEvent.click(button)
+
+      expect(closeSpy).toHaveBeenCalled()
+    })
+
+    test('hides tag when closed', async () => {
+      const { tag } = await createTagTest({ closeTag: true })
+      const button = tag.querySelector('button') as HTMLButtonElement
+
+      fireEvent.click(button)
+      await tag.updateComplete
+
+      expect(button).toHaveClass('pkt-hide')
+    })
+  })
+
+  describe('Text Style', () => {
+    test('applies text style class when provided', async () => {
+      const { tag } = await createTagTest({ textStyle: 'thin-text' })
+      const tagElement = tag.querySelector('span') || tag.querySelector('button')
+      expect(tagElement).toHaveClass('pkt-tag--thin-text')
+    })
+  })
+
+  describe('Accessibility', () => {
+    test('applies aria-label when provided', async () => {
+      const { tag } = await createTagTest({ closeTag: true, ariaLabel: 'Close tag' })
+      const button = tag.querySelector('button')
+      expect(button?.getAttribute('aria-label')).toBe('Close tag')
+    })
+
+    test('tag is accessible', async () => {
+      const { tag } = await createTagTest({
+        content: 'Accessible Tag',
+        closeTag: true,
+        ariaLabel: 'Close tag',
+      })
+
+      const results = await axe(tag)
+      expect(results).toHaveNoViolations()
+    })
+  })
+
+  describe('Complex Configurations', () => {
+    test('renders with all properties set', async () => {
+      const config: TagTestConfig = {
+        content: 'Complete Tag',
+        closeTag: true,
+        size: 'large',
+        skin: 'green',
+        iconName: 'check',
+        type: 'submit',
+        textStyle: 'thin-text',
+        ariaLabel: 'Complete tag',
+      }
+
+      const { tag } = await createTagTest(config)
+
+      expect(tag.textContent?.trim()).toBe(config.content)
+      expect(tag.closeTag).toBe(config.closeTag)
+      expect(tag.size).toBe(config.size)
+      expect(tag.skin).toBe(config.skin)
+      expect(tag.iconName).toBe(config.iconName)
+      expect(tag.type).toBe(config.type)
+      expect(tag.textStyle).toBe(config.textStyle)
+      expect(tag.ariaLabel).toBe(config.ariaLabel)
+
+      const button = tag.querySelector('button')
+      expect(button).toHaveClass(`pkt-tag--${config.size}`)
+      expect(button).toHaveClass(`pkt-tag--${config.skin}`)
+      expect(button).toHaveClass(`pkt-tag--${config.textStyle}`)
+
+      const icon = tag.querySelector('pkt-icon')
+      expect(icon?.getAttribute('name')).toBe(config.iconName)
+
+      const closeIcon = tag.querySelector('.pkt-tag__close-btn')
+      expect(closeIcon).toBeInTheDocument()
+    })
+  })
+})

package/src/components/textarea/textarea.test.ts

@@ -0,0 +1,289 @@
+import '@testing-library/jest-dom'
+import { axe, toHaveNoViolations } from 'jest-axe'
+import { fireEvent } from '@testing-library/dom'
+import { createElementTest, BaseTestConfig } from '../../tests/test-framework'
+import { CustomElementFor } from '../../tests/component-registry'
+import './textarea'
+
+export interface TextareaTestConfig extends BaseTestConfig {
+  // From PktTextarea specific properties
+  value?: string
+  autocomplete?: string
+  rows?: number | null
+
+  // From PktInputElement base class (commonly used ones)
+  id?: string
+  label?: string
+  name?: string
+  disabled?: boolean
+  readonly?: boolean
+  required?: boolean
+  placeholder?: string | null
+  maxlength?: number | null
+  minlength?: number | null
+  hasError?: boolean
+  errorMessage?: string
+  helptext?: string
+  fullwidth?: boolean
+  counter?: boolean
+  inline?: boolean
+  ariaLabelledby?: string | null
+  ariaDescribedBy?: string | null
+}
+
+// Use shared framework
+export const createTextareaTest = async (config: TextareaTestConfig = {}) => {
+  const { container, element } = await createElementTest<
+    CustomElementFor<'pkt-textarea'>,
+    TextareaTestConfig
+  >('pkt-textarea', config)
+
+  return {
+    container,
+    textarea: element,
+  }
+}
+
+expect.extend(toHaveNoViolations)
+
+afterEach(() => {
+  document.body.innerHTML = ''
+})
+
+describe('PktTextarea', () => {
+  describe('Basic Rendering', () => {
+    test('renders without errors', async () => {
+      const { textarea } = await createTextareaTest()
+      expect(textarea).toBeInTheDocument()
+    })
+
+    test('renders with default properties', async () => {
+      const { textarea } = await createTextareaTest()
+      expect(textarea.value).toBe('')
+      expect(textarea.autocomplete).toBe('off')
+      expect(textarea.rows).toBe(null)
+    })
+
+    test('renders textarea element', async () => {
+      const { textarea } = await createTextareaTest()
+      const textareaElement = textarea.querySelector('textarea')
+      expect(textareaElement).toBeInTheDocument()
+    })
+  })
+
+  describe('Properties and Attributes', () => {
+    test('sets value correctly', async () => {
+      const value = 'Test textarea content'
+      const { textarea } = await createTextareaTest({ value })
+
+      expect(textarea.value).toBe(value)
+      const textareaElement = textarea.querySelector('textarea') as HTMLTextAreaElement
+      expect(textareaElement.value).toBe(value)
+    })
+
+    test('sets rows correctly', async () => {
+      const { textarea } = await createTextareaTest({ rows: 5 })
+
+      expect(textarea.rows).toBe(5)
+      const textareaElement = textarea.querySelector('textarea')
+      expect(textareaElement?.getAttribute('rows')).toBe('5')
+    })
+
+    test('sets autocomplete correctly', async () => {
+      const { textarea } = await createTextareaTest({ autocomplete: 'on' })
+
+      expect(textarea.autocomplete).toBe('on')
+      const textareaElement = textarea.querySelector('textarea')
+      expect(textareaElement?.getAttribute('autocomplete')).toBe('on')
+    })
+
+    test('handles disabled state', async () => {
+      const { textarea } = await createTextareaTest({ disabled: true })
+
+      const textareaElement = textarea.querySelector('textarea')
+      expect(textareaElement?.hasAttribute('disabled')).toBe(true)
+    })
+
+    test('handles readonly state', async () => {
+      const { textarea } = await createTextareaTest({ readonly: true })
+
+      const textareaElement = textarea.querySelector('textarea')
+      expect(textareaElement?.hasAttribute('readonly')).toBe(true)
+    })
+
+    test('handles required state', async () => {
+      const { textarea } = await createTextareaTest({ required: true })
+
+      const textareaElement = textarea.querySelector('textarea')
+      expect(textareaElement?.hasAttribute('required')).toBe(false) // Not set as attribute on textarea
+
+      const inputWrapper = textarea.querySelector('pkt-input-wrapper')
+      expect(inputWrapper?.hasAttribute('required')).toBe(true) // But passed to wrapper
+    })
+  })
+
+  describe('Input Wrapper Integration', () => {
+    test('displays label correctly', async () => {
+      const { textarea } = await createTextareaTest({ label: 'Comment' })
+
+      const inputWrapper = textarea.querySelector('pkt-input-wrapper')
+      expect(inputWrapper?.getAttribute('label')).toBe('Comment')
+    })
+
+    test('displays helptext correctly', async () => {
+      const { textarea } = await createTextareaTest({ helptext: 'Enter your message' })
+
+      // helptext is passed as a property, not attribute to input-wrapper
+      expect(textarea.helptext).toBe('Enter your message')
+    })
+
+    test('handles error state', async () => {
+      const { textarea } = await createTextareaTest({
+        hasError: true,
+        errorMessage: 'This field is required',
+      })
+
+      expect(textarea.hasError).toBe(true)
+      expect(textarea.errorMessage).toBe('This field is required')
+
+      const inputWrapper = textarea.querySelector('pkt-input-wrapper')
+      expect(inputWrapper?.hasAttribute('hasError')).toBe(true)
+
+      const textareaElement = textarea.querySelector('textarea')
+      expect(textareaElement?.getAttribute('aria-invalid')).toBe('true')
+    })
+
+    test('handles fullwidth styling', async () => {
+      const { textarea } = await createTextareaTest({ fullwidth: true })
+
+      const textareaElement = textarea.querySelector('textarea')
+      expect(textareaElement?.className).toContain('pkt-input--fullwidth')
+    })
+  })
+
+  describe('Character Counter', () => {
+    test('shows counter when enabled', async () => {
+      const { textarea } = await createTextareaTest({
+        counter: true,
+        maxlength: 100,
+      })
+
+      const inputWrapper = textarea.querySelector('pkt-input-wrapper')
+      expect(inputWrapper?.hasAttribute('counter')).toBe(true)
+    })
+
+    test('updates counter on value change', async () => {
+      const { textarea } = await createTextareaTest({
+        counter: true,
+        maxlength: 100,
+        value: 'Hello',
+      })
+
+      expect(textarea.counterCurrent).toBe(5)
+    })
+  })
+
+  describe('User Interaction', () => {
+    test('updates value on user input', async () => {
+      const { textarea } = await createTextareaTest()
+      const textareaElement = textarea.querySelector('textarea') as HTMLTextAreaElement
+
+      fireEvent.input(textareaElement, { target: { value: 'New content' } })
+      await textarea.updateComplete
+
+      expect(textarea.value).toBe('New content')
+      expect(textarea.touched).toBe(true)
+    })
+
+    test('handles focus and blur events', async () => {
+      const { textarea } = await createTextareaTest()
+      const textareaElement = textarea.querySelector('textarea') as HTMLTextAreaElement
+
+      // Focus and input to trigger touched state
+      fireEvent.focus(textareaElement)
+      fireEvent.input(textareaElement, { target: { value: 'test input' } })
+      await textarea.updateComplete
+      fireEvent.blur(textareaElement)
+      await textarea.updateComplete
+
+      // Test that input with value change sets touched state
+      expect(textarea.touched).toBe(true)
+    })
+  })
+
+  describe('Validation', () => {
+    test('respects maxlength constraint', async () => {
+      const { textarea } = await createTextareaTest({ maxlength: 10 })
+
+      const textareaElement = textarea.querySelector('textarea')
+      expect(textareaElement?.getAttribute('maxlength')).toBe('10')
+    })
+
+    test('respects minlength constraint', async () => {
+      const { textarea } = await createTextareaTest({ minlength: 5 })
+
+      const textareaElement = textarea.querySelector('textarea')
+      expect(textareaElement?.getAttribute('minlength')).toBe('5')
+    })
+  })
+
+  describe('Accessibility', () => {
+    test('passes through accessibility attributes', async () => {
+      const { textarea } = await createTextareaTest({
+        ariaLabelledby: 'external-label',
+        ariaDescribedBy: 'external-description',
+      })
+
+      const textareaElement = textarea.querySelector('textarea')
+      expect(textareaElement?.getAttribute('aria-labelledby')).toBe('external-label')
+
+      // ariaDescribedBy is passed as property to input-wrapper
+      expect(textarea.ariaDescribedBy).toBe('external-description')
+    })
+
+    test('textarea is accessible', async () => {
+      const { textarea } = await createTextareaTest({
+        label: 'Message',
+        helptext: 'Enter your message here',
+        required: true,
+      })
+
+      const results = await axe(textarea)
+      expect(results).toHaveNoViolations()
+    })
+  })
+
+  describe('Complex Configuration', () => {
+    test('renders with all properties set', async () => {
+      const config: TextareaTestConfig = {
+        label: 'Feedback',
+        value: 'Initial feedback text',
+        placeholder: 'Enter your feedback...',
+        rows: 6,
+        maxlength: 500,
+        counter: true,
+        required: true,
+        helptext: 'Please provide detailed feedback',
+      }
+
+      const { textarea } = await createTextareaTest(config)
+
+      expect(textarea.value).toBe(config.value)
+      expect(textarea.rows).toBe(config.rows)
+      expect(textarea.maxlength).toBe(config.maxlength)
+      expect(textarea.required).toBe(config.required)
+
+      const inputWrapper = textarea.querySelector('pkt-input-wrapper')
+      expect(inputWrapper?.getAttribute('label')).toBe(config.label)
+      expect(textarea.helptext).toBe(config.helptext) // Property, not attribute
+      expect(inputWrapper?.hasAttribute('counter')).toBe(true)
+
+      const textareaElement = textarea.querySelector('textarea')
+      expect(textareaElement?.getAttribute('placeholder')).toBe(config.placeholder)
+      expect(textareaElement?.getAttribute('rows')).toBe(String(config.rows))
+      expect(textareaElement?.getAttribute('maxlength')).toBe(String(config.maxlength))
+      // required is handled by input-wrapper, not set directly on textarea
+      expect(textarea.required).toBe(true)
+    })
+  })
+})

package/src/components/textinput/textinput.test.ts

@@ -0,0 +1,421 @@
+import '@testing-library/jest-dom'
+import { axe, toHaveNoViolations } from 'jest-axe'
+import { fireEvent } from '@testing-library/dom'
+import { createElementTest, BaseTestConfig } from '../../tests/test-framework'
+import { CustomElementFor } from '../../tests/component-registry'
+import './textinput'
+
+export interface TextinputTestConfig extends BaseTestConfig {
+  // From PktTextinput specific properties
+  type?: string
+  value?: string
+  autocomplete?: string | null
+  iconNameRight?: string | null
+  prefix?: string | null
+  suffix?: string | null
+  size?: number | null
+  omitSearchIcon?: boolean
+
+  // From PktInputElement base class (commonly used ones)
+  id?: string
+  label?: string
+  name?: string
+  disabled?: boolean
+  readonly?: boolean
+  required?: boolean
+  placeholder?: string | null
+  maxlength?: number | null
+  minlength?: number | null
+  hasError?: boolean
+  errorMessage?: string
+  helptext?: string
+  fullwidth?: boolean
+  counter?: boolean
+  inline?: boolean
+  ariaLabelledby?: string | null
+  ariaDescribedBy?: string | null
+}
+
+// Use shared framework
+export const createTextinputTest = async (config: TextinputTestConfig = {}) => {
+  const { container, element } = await createElementTest<
+    CustomElementFor<'pkt-textinput'>,
+    TextinputTestConfig
+  >('pkt-textinput', config)
+
+  return {
+    container,
+    textinput: element,
+  }
+}
+
+expect.extend(toHaveNoViolations)
+
+afterEach(() => {
+  document.body.innerHTML = ''
+})
+
+describe('PktTextinput', () => {
+  describe('Basic Rendering', () => {
+    test('renders without errors', async () => {
+      const { textinput } = await createTextinputTest()
+      expect(textinput).toBeInTheDocument()
+    })
+
+    test('renders with default properties', async () => {
+      const { textinput } = await createTextinputTest()
+      expect(textinput.type).toBe('text')
+      expect(textinput.value).toBe('')
+      expect(textinput.autocomplete).toBe(null) // Property defaults to null, template sets 'off'
+    })
+
+    test('renders input element', async () => {
+      const { textinput } = await createTextinputTest()
+      const inputElement = textinput.querySelector('input')
+      expect(inputElement).toBeInTheDocument()
+    })
+  })
+
+  describe('Input Types', () => {
+    test('renders text input by default', async () => {
+      const { textinput } = await createTextinputTest()
+      const inputElement = textinput.querySelector('input')
+      expect(inputElement?.getAttribute('type')).toBe('text')
+    })
+
+    test('renders email input type', async () => {
+      const { textinput } = await createTextinputTest({ type: 'email' })
+      const inputElement = textinput.querySelector('input')
+      expect(inputElement?.getAttribute('type')).toBe('email')
+    })
+
+    test('renders password input type', async () => {
+      const { textinput } = await createTextinputTest({ type: 'password' })
+      const inputElement = textinput.querySelector('input')
+      expect(inputElement?.getAttribute('type')).toBe('password')
+    })
+
+    test('renders tel input type', async () => {
+      const { textinput } = await createTextinputTest({ type: 'tel' })
+      const inputElement = textinput.querySelector('input')
+      expect(inputElement?.getAttribute('type')).toBe('tel')
+    })
+
+    test('renders url input type', async () => {
+      const { textinput } = await createTextinputTest({ type: 'url' })
+      const inputElement = textinput.querySelector('input')
+      expect(inputElement?.getAttribute('type')).toBe('url')
+    })
+
+    test('renders search input type', async () => {
+      const { textinput } = await createTextinputTest({ type: 'search' })
+      const inputElement = textinput.querySelector('input')
+      expect(inputElement?.getAttribute('type')).toBe('search')
+    })
+  })
+
+  describe('Properties and Attributes', () => {
+    test('sets value correctly', async () => {
+      const value = 'Test input value'
+      const { textinput } = await createTextinputTest({ value })
+
+      expect(textinput.value).toBe(value)
+      const inputElement = textinput.querySelector('input') as HTMLInputElement
+      expect(inputElement.value).toBe(value)
+    })
+
+    test('sets autocomplete correctly', async () => {
+      const { textinput } = await createTextinputTest({ autocomplete: 'email' })
+
+      expect(textinput.autocomplete).toBe('email')
+      const inputElement = textinput.querySelector('input')
+      expect(inputElement?.getAttribute('autocomplete')).toBe('email')
+    })
+
+    test('handles disabled state', async () => {
+      const { textinput } = await createTextinputTest({ disabled: true })
+
+      const inputElement = textinput.querySelector('input')
+      expect(inputElement?.hasAttribute('disabled')).toBe(true)
+    })
+
+    test('handles readonly state', async () => {
+      const { textinput } = await createTextinputTest({ readonly: true })
+
+      const inputElement = textinput.querySelector('input')
+      expect(inputElement?.hasAttribute('readonly')).toBe(true)
+    })
+
+    test('handles required state', async () => {
+      const { textinput } = await createTextinputTest({ required: true })
+
+      const inputElement = textinput.querySelector('input')
+      expect(inputElement?.hasAttribute('required')).toBe(false) // Not set as attribute on input
+
+      const inputWrapper = textinput.querySelector('pkt-input-wrapper')
+      expect(inputWrapper?.hasAttribute('required')).toBe(true) // But passed to wrapper
+    })
+  })
+
+  describe('Icons', () => {
+    test('renders right icon', async () => {
+      const { textinput } = await createTextinputTest({
+        iconNameRight: 'search',
+      })
+
+      expect(textinput.iconNameRight).toBe('search')
+
+      const icon = textinput.querySelector('pkt-icon')
+      expect(icon).toBeInTheDocument()
+      expect(icon?.getAttribute('name')).toBe('search')
+    })
+
+    test('renders search icon for search type by default', async () => {
+      const { textinput } = await createTextinputTest({ type: 'search' })
+
+      const icon = textinput.querySelector('pkt-icon')
+      expect(icon).toBeInTheDocument()
+      expect(icon?.getAttribute('name')).toBe('magnifying-glass-big')
+    })
+
+    test('can omit search icon for search type', async () => {
+      const { textinput } = await createTextinputTest({
+        type: 'search',
+        omitSearchIcon: true,
+      })
+
+      const icon = textinput.querySelector('pkt-icon')
+      expect(icon).not.toBeInTheDocument()
+    })
+  })
+
+  describe('Prefix and Suffix', () => {
+    test('renders prefix text', async () => {
+      const { textinput } = await createTextinputTest({ prefix: 'https://' })
+
+      expect(textinput.prefix).toBe('https://')
+      const prefixElement = textinput.querySelector('.pkt-input-prefix')
+      expect(prefixElement).toBeInTheDocument()
+      expect(prefixElement?.textContent).toBe('https://')
+    })
+
+    test('renders suffix text', async () => {
+      const { textinput } = await createTextinputTest({ suffix: '.com' })
+
+      expect(textinput.suffix).toBe('.com')
+      const suffixElement = textinput.querySelector('.pkt-input-suffix')
+      expect(suffixElement).toBeInTheDocument()
+      expect(suffixElement?.textContent?.trim()).toBe('.com')
+    })
+
+    test('renders both prefix and suffix', async () => {
+      const { textinput } = await createTextinputTest({
+        prefix: '$',
+        suffix: 'USD',
+      })
+
+      const prefixElement = textinput.querySelector('.pkt-input-prefix')
+      const suffixElement = textinput.querySelector('.pkt-input-suffix')
+
+      expect(prefixElement?.textContent).toBe('$')
+      expect(suffixElement?.textContent?.trim()).toBe('USD')
+    })
+  })
+
+  describe('Input Wrapper Integration', () => {
+    test('displays label correctly', async () => {
+      const { textinput } = await createTextinputTest({ label: 'Email Address' })
+
+      const inputWrapper = textinput.querySelector('pkt-input-wrapper')
+      expect(inputWrapper?.getAttribute('label')).toBe('Email Address')
+    })
+
+    test('displays helptext correctly', async () => {
+      const { textinput } = await createTextinputTest({ helptext: 'Enter a valid email' })
+
+      // helptext is passed as a property, not attribute to input-wrapper
+      expect(textinput.helptext).toBe('Enter a valid email')
+    })
+
+    test('handles error state', async () => {
+      const { textinput } = await createTextinputTest({
+        hasError: true,
+        errorMessage: 'Email is required',
+      })
+
+      expect(textinput.hasError).toBe(true)
+      expect(textinput.errorMessage).toBe('Email is required')
+
+      const inputWrapper = textinput.querySelector('pkt-input-wrapper')
+      expect(inputWrapper?.hasAttribute('hasError')).toBe(true)
+
+      const inputElement = textinput.querySelector('input')
+      expect(inputElement?.getAttribute('aria-invalid')).toBe('true')
+    })
+
+    test('handles fullwidth styling', async () => {
+      const { textinput } = await createTextinputTest({ fullwidth: true })
+
+      const inputElement = textinput.querySelector('input')
+      expect(inputElement?.className).toContain('pkt-input--fullwidth')
+    })
+  })
+
+  describe('Character Counter', () => {
+    test('shows counter when enabled', async () => {
+      const { textinput } = await createTextinputTest({
+        counter: true,
+        maxlength: 50,
+      })
+
+      const inputWrapper = textinput.querySelector('pkt-input-wrapper')
+      expect(inputWrapper?.hasAttribute('counter')).toBe(true)
+    })
+
+    test('updates counter on value change', async () => {
+      const { textinput } = await createTextinputTest({
+        counter: true,
+        maxlength: 50,
+        value: 'Hello',
+      })
+
+      expect(textinput.counterCurrent).toBe(5)
+    })
+  })
+
+  describe('User Interaction', () => {
+    test('updates value on user input', async () => {
+      const { textinput } = await createTextinputTest()
+      const inputElement = textinput.querySelector('input') as HTMLInputElement
+
+      fireEvent.input(inputElement, { target: { value: 'new value' } })
+      await textinput.updateComplete
+
+      expect(textinput.value).toBe('new value')
+      expect(textinput.touched).toBe(true)
+    })
+
+    test('handles focus and blur events', async () => {
+      const { textinput } = await createTextinputTest()
+      const inputElement = textinput.querySelector('input') as HTMLInputElement
+
+      // Focus and input to trigger touched state
+      fireEvent.focus(inputElement)
+      fireEvent.input(inputElement, { target: { value: 'test input' } })
+      await textinput.updateComplete
+      fireEvent.blur(inputElement)
+      await textinput.updateComplete
+
+      // Test that input with value change sets touched state
+      expect(textinput.touched).toBe(true)
+    })
+  })
+
+  describe('Validation', () => {
+    test('respects maxlength constraint', async () => {
+      const { textinput } = await createTextinputTest({ maxlength: 20 })
+
+      const inputElement = textinput.querySelector('input')
+      expect(inputElement?.getAttribute('maxlength')).toBe('20')
+    })
+
+    test('respects minlength constraint', async () => {
+      const { textinput } = await createTextinputTest({ minlength: 3 })
+
+      const inputElement = textinput.querySelector('input')
+      expect(inputElement?.getAttribute('minlength')).toBe('3')
+    })
+  })
+
+  describe('Accessibility', () => {
+    test('passes through accessibility attributes', async () => {
+      const { textinput } = await createTextinputTest({
+        ariaLabelledby: 'external-label',
+        ariaDescribedBy: 'external-description',
+      })
+
+      const inputElement = textinput.querySelector('input')
+      expect(inputElement?.getAttribute('aria-labelledby')).toBe('external-label')
+
+      // ariaDescribedBy is passed as property to input-wrapper
+      expect(textinput.ariaDescribedBy).toBe('external-description')
+    })
+
+    test('textinput is accessible', async () => {
+      const { textinput } = await createTextinputTest({
+        label: 'Email',
+        type: 'email',
+        helptext: 'Enter your email address',
+        required: true,
+      })
+
+      const results = await axe(textinput)
+      expect(results).toHaveNoViolations()
+    })
+  })
+
+  describe('Complex Configuration', () => {
+    test('renders email input with all features', async () => {
+      const config: TextinputTestConfig = {
+        type: 'email',
+        label: 'Email Address',
+        value: 'user@example.com',
+        placeholder: 'Enter your email...',
+        iconNameRight: 'mail',
+        maxlength: 100,
+        counter: true,
+        required: true,
+        autocomplete: 'email',
+        helptext: 'We will never share your email',
+      }
+
+      const { textinput } = await createTextinputTest(config)
+
+      expect(textinput.type).toBe(config.type)
+      expect(textinput.value).toBe(config.value)
+      expect(textinput.iconNameRight).toBe(config.iconNameRight)
+      expect(textinput.maxlength).toBe(config.maxlength)
+      expect(textinput.required).toBe(config.required)
+      expect(textinput.autocomplete).toBe(config.autocomplete)
+
+      const inputWrapper = textinput.querySelector('pkt-input-wrapper')
+      expect(inputWrapper?.getAttribute('label')).toBe(config.label)
+      expect(textinput.helptext).toBe(config.helptext) // Property, not attribute
+      expect(inputWrapper?.hasAttribute('counter')).toBe(true)
+
+      const inputElement = textinput.querySelector('input')
+      expect(inputElement?.getAttribute('type')).toBe(config.type)
+      expect(inputElement?.getAttribute('placeholder')).toBe(config.placeholder)
+      expect(inputElement?.getAttribute('maxlength')).toBe(String(config.maxlength))
+      expect(inputElement?.getAttribute('autocomplete')).toBe(config.autocomplete)
+
+      const icon = textinput.querySelector('pkt-icon')
+      expect(icon?.getAttribute('name')).toBe(config.iconNameRight)
+    })
+
+    test('renders URL input with prefix and suffix', async () => {
+      const config: TextinputTestConfig = {
+        type: 'url',
+        label: 'Website URL',
+        prefix: 'https://',
+        suffix: '.com',
+        placeholder: 'example',
+        fullwidth: true,
+      }
+
+      const { textinput } = await createTextinputTest(config)
+
+      expect(textinput.prefix).toBe(config.prefix)
+      expect(textinput.suffix).toBe(config.suffix)
+
+      const prefixElement = textinput.querySelector('.pkt-input-prefix')
+      const suffixElement = textinput.querySelector('.pkt-input-suffix')
+
+      expect(prefixElement?.textContent).toBe(config.prefix)
+      expect(suffixElement?.textContent?.trim()).toBe(config.suffix)
+
+      const inputElement = textinput.querySelector('input')
+      expect(inputElement?.className).toContain('pkt-input--fullwidth')
+    })
+  })
+})