diff --git a/.claude/settings.local.json b/.claude/settings.local.json
new file mode 100644
index 0000000000..2116330ca5
--- /dev/null
+++ b/.claude/settings.local.json
@@ -0,0 +1,26 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(git -C /Users/jakubbrzegowski/Sites/commerce-5-0-dev_15/vendor/ibexa/design-system-twig status)",
+      "Bash(git -C /Users/jakubbrzegowski/Sites/commerce-5-0-dev_15/vendor/ibexa/design-system-twig add src/bundle/Resources/views/themes/standard/design_system/components/button.html.twig)",
+      "Bash(git -C /Users/jakubbrzegowski/Sites/commerce-5-0-dev_15/vendor/ibexa/design-system-twig commit -m \"$\\(cat <<''EOF''\nAdd html_type parameter to button component\n\nAllow setting the HTML button type attribute \\(button, submit, reset\\)\nvia the html_type parameter, defaulting to ''button''.\n\nCo-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>\nEOF\n\\)\")",
+      "Bash(git add:*)",
+      "Bash(git commit:*)",
+      "Bash(php /Users/jakubbrzegowski/Sites/commerce-5-0-dev_15/bin/console cache:clear:*)",
+      "Bash(git status)",
+      "Bash(git diff)",
+      "Bash(git add *)",
+      "Bash(git commit *)",
+      "Bash(ls -R *)",
+      "Bash(grep *)",
+      "Bash(cat *)",
+      "Bash(php * bin/console lint:twig *)",
+      "Bash(php * bin/console cache:clear *)"
+    ],
+    "deny": [
+      "Bash(git push *)",
+      "Bash(gh pr *)",
+      "Bash(git remote *)"
+    ]
+  }
+}
diff --git a/.claude/skills/validate-frontend-changes.md b/.claude/skills/validate-frontend-changes.md
new file mode 100644
index 0000000000..8aa3d9dc8c
--- /dev/null
+++ b/.claude/skills/validate-frontend-changes.md
@@ -0,0 +1,115 @@
+# Validate Frontend Changes - Ibexa Admin UI
+
+## Description
+This skill validates Twig template and JavaScript changes in Ibexa packages, specifically after design system component migrations. It runs frontend tests, builds assets, and provides a testing checklist.
+
+## When to Use
+- After migrating HTML buttons to design system button components in Twig
+- After modifying JavaScript or TypeScript files
+- Before committing frontend changes
+- When troubleshooting build or runtime issues with UI components
+
+## Prerequisites
+- Node.js and Yarn installed
+- Assets may have been modified but not yet validated
+- Working directory should be the project root or admin-ui package
+
+## Validation Steps
+
+### 1. Frontend Code Quality Check
+**Location:** Run from the affected Ibexa package (e.g., `vendor/ibexa/admin-ui`)
+
+```bash
+cd vendor/ibexa/[package-name]
+yarn test           # Runs Prettier, TypeScript, ESLint
+```
+
+**What this validates:**
+- JavaScript/TypeScript syntax and type safety
+- Code formatting consistency
+- ESLint rules compliance
+- No TypeScript compilation errors
+
+**Expected result:** All tests pass with no errors
+
+### 2. Asset Build Process
+**Location:** Run from project root
+
+```bash
+cd /path/to/project-root
+yarn ibexa:dev      # Development build (faster)
+# OR
+yarn ibexa:build    # Production build (minified)
+```
+
+**What this validates:**
+- Webpack Encore compiles successfully
+- No missing dependencies
+- JavaScript bundles build correctly
+- SCSS compiles with new component styles
+- Entry points resolve properly
+
+**Expected result:** Build completes without errors, assets generated in `public/assets/ibexa/build/`
+
+### 3. Cache Clear
+```bash
+php bin/console cache:clear
+```
+
+**Purpose:** Ensures Symfony uses fresh asset manifests and templates
+
+## Common Issues and Solutions
+
+### Build Failures
+
+**Issue:** `yarn ibexa:dev` fails with module not found
+**Solution:**
+- Verify design system packages are installed
+
+**Issue:** TypeScript compilation errors
+**Solution:**
+- Run `yarn ts-test` in the package to see specific errors
+- Check type definitions for design system components
+- Verify `tsconfig.json` paths are correct
+
+## Package-Specific Notes
+
+### admin-ui Package
+- Entry points: `src/bundle/Resources/encore/ibexa.js.config.js` and `ibexa.css.config.js`
+
+## Quick Validation Script
+
+```bash
+#!/bin/bash
+# Run from project root
+
+PACKAGE_PATH="vendor/ibexa/admin-ui"  # Change as needed
+PROJECT_ROOT="/path/to/project"        # Change to actual path
+
+echo "=== Step 1: Frontend Code Quality ==="
+cd "$PROJECT_ROOT/$PACKAGE_PATH"
+yarn test || { echo "Frontend tests failed"; exit 1; }
+
+echo "=== Step 2: Build Assets ==="
+cd "$PROJECT_ROOT"
+yarn ibexa:dev || { echo "Build failed"; exit 1; }
+
+echo "=== Step 3: Clear Cache ==="
+php bin/console cache:clear
+
+echo "✅ Automated validation complete!"
+echo "👉 Now test manually in browser"
+```
+
+## Success Criteria
+- ✅ `yarn test` passes in the package
+- ✅ `yarn ibexa:dev` builds without errors
+- ✅ No console errors in browser
+- ✅ All button functionality works as before
+- ✅ Visual appearance matches design system
+- ✅ Cross-browser compatibility (if tested)
+
+## Next Steps After Validation
+1. Commit changes with descriptive message
+2. DO NOT PUSH changes to the repository
+3. DO NOT CREATE PULL REQUEST
diff --git a/.opencode/opencode.json b/.opencode/opencode.json
new file mode 100644
index 0000000000..f6bd026b32
--- /dev/null
+++ b/.opencode/opencode.json
@@ -0,0 +1,60 @@
+{
+  "$schema": "https://opencode.ai/config.json",
+  "permission": {
+    "external_directory": {
+      "~/Sites/commerce-5-0-dev_19/vendor/ibexa/**": "allow",
+      "~/Sites/commerce-5-0-dev_15/vendor/ibexa/**": "allow",
+      "/Users/jakubbrzegowski/Sites/design-system/**": "allow"
+    },
+    "bash": {
+      "*": "ask",
+      "git push *": "deny",
+      "gh pr *": "deny",
+      "git remote *": "deny",
+      "git status": "allow",
+      "git diff": "allow",
+      "git add *": "allow",
+      "git commit *": "allow",
+      "ls *": "allow",
+      "php * bin/console lint:twig *": "allow",
+      "php * bin/console cache:clear *": "allow",
+      "npm run *": "allow",
+      "yarn run *": "allow",
+
+      "rg *": "allow",
+      "grep *": "allow",
+      "sort *": "allow",
+      "head *": "allow",
+      "echo *": "allow",
+      "sed *": "allow",
+      "cat *": "allow",
+      "awk *": "allow",
+      "wc *": "allow",
+      "tr *": "allow",
+      "find *": "allow",
+      "printf *": "allow",
+      "xargs *": "allow",
+      "tail *": "allow",
+      "uniq *": "allow",
+
+      "git checkout *": "allow",
+      "git log *": "allow",
+      "git branch *": "allow",
+      "git reset *": "allow",
+      "git cherry-pick *": "allow",
+      "git rev-parse *": "allow",
+      "git show *": "allow",
+      "git merge-base *": "allow",
+      "git status *": "allow",
+      "git revert *": "allow",
+      "git diff *": "allow",
+      "git grep *": "allow",
+      "git reflog *": "allow",
+      "git worktree *": "allow",
+      "git swwtich *": "allow",
+
+      "git -C *": "allow",
+      "cd *": "allow"
+    }
+  }
+}
diff --git a/.opencode/permissions.json b/.opencode/permissions.json
new file mode 100644
index 0000000000..3da5fcaf98
--- /dev/null
+++ b/.opencode/permissions.json
@@ -0,0 +1,24 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(git status)",
+      "Bash(git diff)",
+      "Bash(git add *)",
+      "Bash(git commit -m *)",
+      "Bash(ls -R *)",
+      "Bash(grep -r *)",
+      "Bash(cat *)",
+      "Bash(php * bin/console lint:twig *)",
+      "Bash(php * bin/console cache:clear *)",
+      "Bash(npm run *)",
+      "Bash(yarn run *)"
+    ],
+    "deny": [
+      "Bash(git push *)",
+      "Bash(gh pr *)",
+      "Bash(git remote *)",
+      "Bash(curl *)",
+      "Bash(wget *)"
+    ]
+  }
+}
\ No newline at end of file
diff --git a/.opencode/plans/DROPDOWN_MIGRATION_PLAN.md b/.opencode/plans/DROPDOWN_MIGRATION_PLAN.md
new file mode 100644
index 0000000000..9003be4b99
--- /dev/null
+++ b/.opencode/plans/DROPDOWN_MIGRATION_PLAN.md
@@ -0,0 +1,583 @@
+# DROPDOWN MIGRATION PLAN: Legacy ibexa-dropdown / c-simple-dropdown -> design-system Dropdowns
+
+**Package**: `ibexa/admin-ui`
+**Branch**: `IBX-11413-use-DS-dropdown`
+**Date Created**: March 17, 2026
+**Status**: Planning
+
+---
+
+## CRITICAL DIFFERENCES - READ FIRST
+
+### Difference 1: This is not a class swap
+
+Legacy Twig dropdowns, legacy vanilla JS, React dropdowns, SCSS overrides, and Behat locators are all tightly coupled.
+
+| Legacy | Design System |
+|---|---|
+| `ibexa-dropdown*` | `ids-dropdown*` |
+| `c-simple-dropdown*` | no direct 1:1 replacement confirmed |
+| `ibexaInstance` API | `idsInstance` API |
+| Bootstrap Popover positioning | Popper-based DS positioning |
+
+**Impact:** a template-only migration will break JS behavior, styling, and tests.
+
+---
+
+### Difference 2: Twig and React are separate implementations
+
+There are two independent dropdown families in `admin-ui`:
+
+- **Twig + vanilla JS** based on `@ibexadesign/ui/component/dropdown/dropdown.html.twig`
+- **React dropdowns** based on:
+  - `src/bundle/ui-dev/src/modules/common/dropdown/dropdown.js`
+  - `src/bundle/ui-dev/src/modules/common/simple-dropdown/simple.dropdown.js`
+
+They must be planned separately, even if they converge on DS markup.
+
+---
+
+### Difference 3: Legacy Twig dropdown has more features than DS dropdown today
+
+Legacy Twig supports patterns that are not directly covered by the current DS Twig dropdowns:
+
+- grouped items (`choice.choices`)
+- preferred choices + separator
+- select-all / clear toggler
+- custom selected-item and list-item templates
+- item icons and selected-item icons
+- mutation-driven option rebuilds
+- no-results empty state with image/message
+- multi-select selected-item overflow counter
+
+**Impact:** some legacy usages can migrate directly; others need a compatibility layer, redesign, or deferral.
+
+---
+
+### Difference 4: Form theme migration is high blast radius
+
+`src/bundle/Resources/views/themes/admin/ui/form_fields.html.twig` uses `dropdown_widget.html.twig` for collapsed Symfony choice widgets.
+
+That means migrating:
+
+- `src/bundle/Resources/views/themes/admin/ui/form_fields/dropdown_widget.html.twig`
+- `src/bundle/Resources/views/themes/admin/ui/form_fields.html.twig`
+
+affects many admin forms at once.
+
+**Rule:** do not start with form theme migration. Start with isolated direct include cases first.
+
+---
+
+### Difference 5: JS compatibility must be decided before broad Twig rollout
+
+Current admin JS depends on the legacy dropdown instance and methods such as:
+
+- `selectOption()`
+- `selectFirstOption()`
+- `clearCurrentSelection()`
+- `getSelectedItems()`
+- `canSelectOnlyOne`
+
+**Recommended approach:** add an admin-ui compatibility bridge for DS dropdowns before migrating form-theme usage.
+
+---
+
+## Table of Contents
+
+1. [Goals](#goals)
+2. [Source Inventory](#source-inventory)
+3. [Design System Reference](#design-system-reference)
+4. [Migration Strategy](#migration-strategy)
+5. [Twig Migration Phases](#twig-migration-phases)
+6. [React Migration Phases](#react-migration-phases)
+7. [JavaScript Migration Checklist](#javascript-migration-checklist)
+8. [SCSS Migration Checklist](#scss-migration-checklist)
+9. [Behat / Test Impact](#behat--test-impact)
+10. [Known Gaps / Blockers](#known-gaps--blockers)
+11. [Validation Commands](#validation-commands)
+12. [Testing Strategy](#testing-strategy)
+
+---
+
+## Goals
+
+1. Replace legacy dropdowns with DS dropdowns where feasible
+2. Keep functional parity for Twig-rendered forms and React UIs
+3. Update related JavaScript in the same phase as markup changes
+4. Minimize regressions by starting from isolated usages
+5. Keep all changes local on branch `IBX-11413-use-DS-dropdown`
+
+---
+
+## Source Inventory
+
+### Legacy Twig dropdown implementation
+
+- `src/bundle/Resources/views/themes/admin/ui/component/dropdown/dropdown.html.twig`
+- `src/bundle/Resources/views/themes/admin/ui/component/dropdown/dropdown_item.html.twig`
+- `src/bundle/Resources/views/themes/admin/ui/component/dropdown/dropdown_selected_item.html.twig`
+- `src/bundle/Resources/views/themes/admin/ui/component/dropdown/dropdown_selected_item_icon.html.twig`
+- `src/bundle/Resources/views/themes/admin/ui/form_fields/dropdown_widget.html.twig`
+
+### Direct Twig include sites
+
+- `src/bundle/Resources/views/themes/admin/content/tab/content.html.twig`
+- `src/bundle/Resources/views/themes/admin/content_type/tab/view.html.twig`
+
+### Form theme entry point
+
+- `src/bundle/Resources/views/themes/admin/ui/form_fields.html.twig`
+
+### Legacy vanilla JS
+
+- `src/bundle/Resources/public/js/scripts/core/dropdown.js`
+- `src/bundle/Resources/public/js/scripts/admin.dropdown.js`
+- `src/bundle/Resources/public/js/scripts/admin.contenttype.edit.js`
+
+### JS files coupled to dropdown selectors / instance behavior
+
+- `src/bundle/Resources/public/js/scripts/filters.action.btns.js`
+- `src/bundle/Resources/public/js/scripts/admin.notifications.filters.js`
+- `src/bundle/Resources/public/js/scripts/sidebar/extra.actions.js`
+- `src/bundle/Resources/public/js/scripts/fieldType/ibexa_selection.js`
+- `src/bundle/Resources/public/js/scripts/fieldType/ibexa_country.js`
+- `src/bundle/Resources/public/js/scripts/admin.location.add.custom_url.js`
+
+### React dropdown components
+
+- `src/bundle/ui-dev/src/modules/common/dropdown/dropdown.js`
+- `src/bundle/ui-dev/src/modules/common/simple-dropdown/simple.dropdown.js`
+
+### React consumers
+
+**Full dropdown**
+- `src/bundle/ui-dev/src/modules/universal-discovery/components/filters/filters.js`
+- `src/bundle/ui-dev/src/modules/universal-discovery/components/content-create-widget/content.create.widget.js`
+
+**Simple dropdown**
+- `src/bundle/ui-dev/src/modules/universal-discovery/components/view-switcher/view.switcher.js`
+- `src/bundle/ui-dev/src/modules/universal-discovery/components/sort-switcher/sort.switcher.js`
+- `src/bundle/ui-dev/src/modules/sub-items/components/view-switcher/view.switcher.component.js`
+
+### SCSS
+
+**Primary definitions**
+- `src/bundle/Resources/public/scss/_dropdown.scss`
+- `src/bundle/Resources/public/scss/_dropdown-popover.scss`
+- `src/bundle/Resources/public/scss/ui/modules/common/_simple-dropdown.scss`
+
+**Context overrides**
+- `src/bundle/Resources/public/scss/ui/modules/universal-discovery/_dropdown.scss`
+- `src/bundle/Resources/public/scss/ui/modules/universal-discovery/_view-switcher.scss`
+- `src/bundle/Resources/public/scss/ui/modules/sub-items-list/_main.scss`
+- plus context references in filters, search, field-group, preview, details, and related SCSS files
+
+### Behat selectors with direct legacy coupling
+
+Examples:
+- `src/lib/Behat/Component/IbexaDropdown.php`
+- `src/lib/Behat/Page/RoleUpdatePage.php`
+- `src/lib/Behat/Component/CreateNewPopup.php`
+- `src/lib/Behat/Page/ContentViewPage.php`
+- `src/lib/Behat/Component/Fields/Selection.php`
+- `src/lib/Behat/Component/Fields/Country.php`
+
+---
+
+## Design System Reference
+
+### DS Twig dropdowns
+
+- `vendor/ibexa/design-system-twig/src/bundle/Resources/views/themes/standard/design_system/components/dropdown_single/input.html.twig`
+- `vendor/ibexa/design-system-twig/src/bundle/Resources/views/themes/standard/design_system/components/dropdown_multi/input.html.twig`
+- `vendor/ibexa/design-system-twig/src/bundle/Resources/views/themes/standard/design_system/partials/base_dropdown.html.twig`
+
+### DS TypeScript behavior
+
+- `vendor/ibexa/design-system-twig/src/bundle/Resources/public/ts/partials/base_dropdown/base_dropdown.ts`
+- `vendor/ibexa/design-system-twig/src/bundle/Resources/public/ts/components/dropdown/dropdown_single_input.ts`
+- `vendor/ibexa/design-system-twig/src/bundle/Resources/public/ts/components/dropdown/dropdown_multi_input.ts`
+- `vendor/ibexa/design-system-twig/src/bundle/Resources/public/ts/init_components.ts`
+
+### Important DS behavior notes
+
+- DS uses `.ids-dropdown--single` / `.ids-dropdown--multi`
+- DS uses `data-ids-custom-init` instead of legacy custom-init class behavior
+- DS init path is different from legacy `admin.dropdown.js`
+- DS search and selection behavior differs from legacy
+- No confirmed React DS dropdown component import was found in this repo
+
+---
+
+## Migration Strategy
+
+### Recommended overall approach
+
+1. Document gaps and unsupported patterns first
+2. Migrate isolated direct Twig include sites first
+3. Introduce JS compatibility before form theme migration
+4. Migrate React full dropdown separately from Twig
+5. Treat `simple-dropdown` as a separate, potentially deferred subtrack
+6. Update Behat selectors in the same phase as affected markup
+
+### Recommended compatibility decision
+
+For Twig rollout beyond isolated pages, introduce a compatibility layer that lets admin-ui scripts keep working while DS markup is adopted.
+
+That layer should address:
+
+- instance lookup differences
+- selection API differences
+- disabled / invalid state handling
+- custom init semantics
+- mutation-driven rebuild needs where still required
+
+---
+
+## Twig Migration Phases
+
+### Phase 1: Isolated direct include sites - LOW RISK
+
+Migrate direct dropdown includes first:
+
+1. `src/bundle/Resources/views/themes/admin/content/tab/content.html.twig`
+2. `src/bundle/Resources/views/themes/admin/content_type/tab/view.html.twig`
+
+**Why first:**
+- small scope
+- no Symfony form theme blast radius
+- easier manual verification
+- helps prove DS single-select viability
+
+**Checks:**
+- selected value display
+- language switching still works
+- page-level styles still apply
+- Behat locator updates if needed
+
+---
+
+### Phase 2: Twig compatibility bridge - HIGH PRIORITY
+
+Before migrating form-theme dropdowns, define how legacy admin JS works with DS dropdowns.
+
+Options:
+
+**Option A - Recommended**
+Create an admin-ui bridge that wraps DS dropdown instance behavior and exposes legacy-compatible methods used by existing JS.
+
+**Option B**
+Rewrite every JS consumer to use DS-native instance behavior and selectors before broader Twig rollout.
+
+**Recommendation:** Option A first, then gradually simplify later.
+
+---
+
+### Phase 3: Form theme dropdown widget - HIGH RISK
+
+Migrate:
+
+- `src/bundle/Resources/views/themes/admin/ui/form_fields/dropdown_widget.html.twig`
+- `src/bundle/Resources/views/themes/admin/ui/form_fields.html.twig`
+
+**Notes:**
+- this affects many collapsed Symfony choice widgets
+- should happen only after Phase 2 compatibility is proven
+- update related validators and filter scripts in same phase
+
+---
+
+### Phase 4: Advanced Twig feature parity review
+
+Review legacy features that may not map directly:
+
+- grouped items
+- preferred choices
+- select-all toggler
+- custom item templates
+- item icons
+- selected item icons
+- dynamic option recreation
+- no-results empty state
+- overflow counter for multi-select
+
+**Rule:** unsupported patterns must be explicitly marked as:
+- supported via wrapper
+- redesigned
+- deferred
+- kept legacy temporarily
+
+---
+
+## React Migration Phases
+
+### Phase R1: Full dropdown (`common/dropdown`) - MEDIUM/HIGH RISK
+
+File:
+- `src/bundle/ui-dev/src/modules/common/dropdown/dropdown.js`
+
+Consumers:
+- `src/bundle/ui-dev/src/modules/universal-discovery/components/filters/filters.js`
+- `src/bundle/ui-dev/src/modules/universal-discovery/components/content-create-widget/content.create.widget.js`
+
+**Recommended approach:**
+Replace legacy React markup/behavior with a local admin-ui DS-aligned wrapper using `ids-dropdown*` conventions.
+
+**Why not a direct import:**
+No confirmed `@ids-components/components/Dropdown` React component was found in the available codebase.
+
+**Must preserve:**
+- single-select behavior
+- portal / popup positioning behavior where required
+- search behavior
+- selected item rendering
+- disabled state
+- current UDW interactions
+
+---
+
+### Phase R2: Simple dropdown (`common/simple-dropdown`) - SEPARATE TRACK
+
+File:
+- `src/bundle/ui-dev/src/modules/common/simple-dropdown/simple.dropdown.js`
+
+Consumers:
+- `src/bundle/ui-dev/src/modules/universal-discovery/components/view-switcher/view.switcher.js`
+- `src/bundle/ui-dev/src/modules/universal-discovery/components/sort-switcher/sort.switcher.js`
+- `src/bundle/ui-dev/src/modules/sub-items/components/view-switcher/view.switcher.component.js`
+
+**Status:** investigate whether to:
+- migrate to a lightweight DS-based variant, or
+- defer until a clear DS-equivalent interaction exists
+
+**Reason:** current `simple-dropdown` is closer to a switcher/menu than the full form dropdown.
+
+**Recommended plan status:** keep as a dedicated later phase, not part of the first Twig/full-dropdown rollout.
+
+---
+
+## JavaScript Migration Checklist
+
+### Core files
+
+- [ ] Review `src/bundle/Resources/public/js/scripts/core/dropdown.js`
+- [ ] Decide whether to replace, wrap, or partially retain legacy instance logic
+- [ ] Review `src/bundle/Resources/public/js/scripts/admin.dropdown.js`
+- [ ] Review dynamic initialization in `src/bundle/Resources/public/js/scripts/admin.contenttype.edit.js`
+
+### Consumer files
+
+- [ ] `src/bundle/Resources/public/js/scripts/filters.action.btns.js`
+- [ ] `src/bundle/Resources/public/js/scripts/admin.notifications.filters.js`
+- [ ] `src/bundle/Resources/public/js/scripts/sidebar/extra.actions.js`
+- [ ] `src/bundle/Resources/public/js/scripts/fieldType/ibexa_selection.js`
+- [ ] `src/bundle/Resources/public/js/scripts/fieldType/ibexa_country.js`
+- [ ] `src/bundle/Resources/public/js/scripts/admin.location.add.custom_url.js`
+
+### Legacy selector/API assumptions to replace
+
+- [ ] `.ibexa-dropdown`
+- [ ] `.ibexa-dropdown__selection-info`
+- [ ] `.ibexa-dropdown__source`
+- [ ] `.ibexa-dropdown__item`
+- [ ] `.ibexa-dropdown__remove-selection`
+- [ ] `.ibexa-dropdown--disabled`
+- [ ] `.ibexa-dropdown--expanded`
+- [ ] `ibexaInstance`
+- [ ] `selectOption()`
+- [ ] `selectFirstOption()`
+- [ ] `clearCurrentSelection()`
+- [ ] `getSelectedItems()`
+- [ ] `canSelectOnlyOne`
+
+---
+
+## SCSS Migration Checklist
+
+### Core styles
+
+- [ ] replace or retire legacy root styles in `src/bundle/Resources/public/scss/_dropdown.scss`
+- [ ] review whether `src/bundle/Resources/public/scss/_dropdown-popover.scss` is still needed after DS migration
+- [ ] review `src/bundle/Resources/public/scss/ui/modules/common/_simple-dropdown.scss`
+
+### Context overrides
+
+Update context selectors where DS markup replaces legacy markup, especially in:
+
+- [ ] UDW dropdown contexts
+- [ ] view switchers
+- [ ] sub-items list
+- [ ] filter/search forms
+- [ ] preview/header contexts
+- [ ] field edit contexts
+
+**Rule:** if a template changes to DS markup, update context SCSS in the same phase.
+
+---
+
+## Behat / Test Impact
+
+### Known direct selector impact
+
+Update locators that target legacy dropdown classes, including but not limited to:
+
+- `src/lib/Behat/Component/IbexaDropdown.php`
+- `src/lib/Behat/Page/RoleUpdatePage.php`
+- `src/lib/Behat/Page/ContentViewPage.php`
+- `src/lib/Behat/Component/CreateNewPopup.php`
+- `src/lib/Behat/Component/Fields/Selection.php`
+- `src/lib/Behat/Component/Fields/Country.php`
+
+### Rule
+
+Do not leave migrated pages using DS dropdown markup while Behat still targets `ibexa-dropdown*`.
+
+---
+
+## Known Gaps / Blockers
+
+### Blocker 1: No confirmed React DS dropdown component
+
+No repository evidence was found for a ready-to-import React dropdown component under `@ids-components/components/Dropdown`.
+
+**Action:** React migration should use a local DS wrapper or remain partially deferred.
+
+---
+
+### Blocker 2: Legacy Twig feature superset
+
+The current DS Twig dropdown does not clearly cover all legacy features.
+
+Potentially unsupported or requiring extra work:
+
+- grouped items
+- preferred choices
+- select-all toggler
+- custom templates
+- icons
+- dynamic option mutation handling
+- custom no-results UI
+- multi overflow counter
+
+---
+
+### Blocker 3: Validation and invalid-state wiring
+
+Legacy validators target `.ibexa-dropdown__selection-info`.
+
+Affected files include:
+
+- `src/bundle/Resources/public/js/scripts/fieldType/ibexa_selection.js`
+- `src/bundle/Resources/public/js/scripts/fieldType/ibexa_country.js`
+
+**Action:** invalid state strategy must be defined before form-theme rollout.
+
+---
+
+### Blocker 4: Dynamic field insertion
+
+`src/bundle/Resources/public/js/scripts/admin.contenttype.edit.js` manually initializes dropdowns in inserted field definition nodes.
+
+**Action:** ensure DS init or compatibility init works for dynamically added markup.
+
+---
+
+## Validation Commands
+
+```bash
+# Twig lint
+php bin/console lint:twig src/bundle/Resources/views/themes/admin/[path-to-file]
+
+# PHP tests
+composer test
+
+# Code style
+composer check-cs
+
+# Static analysis
+composer phpstan
+
+# Frontend checks
+yarn test
+```
+
+---
+
+## Testing Strategy
+
+### Required manual checks
+
+**Twig direct-include pages**
+- content preview language dropdown
+- content type view language dropdown
+
+**Symfony form-theme pages**
+- single select widgets
+- multi select widgets
+- required field validation
+- invalid state rendering
+- disabled state rendering
+
+**Functional JS flows**
+- adaptive filters clear/apply
+- notifications filters
+- extra actions form state restore
+- dynamic field insertion in content type edit
+- custom URL modal behavior
+
+**React**
+- UDW filters
+- create-content language dropdown
+- UDW sort/view switchers
+- sub-items view switcher
+
+### Common issues to watch
+
+1. DS dropdown initialized but legacy JS cannot control it
+2. Behat locators still target old classes
+3. invalid state stops highlighting dropdown properly
+4. dynamic field insertion creates uninitialized dropdowns
+5. multi-select behavior regresses due to overflow / selected-item rendering differences
+6. grouped or preferred choices lose structure
+
+---
+
+## Recommended Execution Order
+
+1. Create branch `IBX-11413-use-DS-dropdown`
+2. Implement and validate plan document
+3. Migrate isolated Twig direct include cases
+4. Add/validate JS compatibility bridge
+5. Migrate form theme dropdown widget
+6. Update dependent JS + Behat + SCSS
+7. Migrate React `common/dropdown`
+8. Review `common/simple-dropdown` as separate phase
+9. Run full verification
+
+---
+
+## Quick Reference
+
+### Twig - initial migration targets
+
+- `src/bundle/Resources/views/themes/admin/content/tab/content.html.twig`
+- `src/bundle/Resources/views/themes/admin/content_type/tab/view.html.twig`
+
+### Twig - high-risk shared targets
+
+- `src/bundle/Resources/views/themes/admin/ui/form_fields/dropdown_widget.html.twig`
+- `src/bundle/Resources/views/themes/admin/ui/form_fields.html.twig`
+
+### React - full dropdown
+
+- `src/bundle/ui-dev/src/modules/common/dropdown/dropdown.js`
+
+### React - simple dropdown
+
+- `src/bundle/ui-dev/src/modules/common/simple-dropdown/simple.dropdown.js`
+
+### Core decision
+
+**Do not treat dropdown migration as a simple component rename.**
+It requires coordinated updates across Twig, JS, React, SCSS, and Behat.
diff --git a/.opencode/plans/LABEL_MIGRATION_PLAN.md b/.opencode/plans/LABEL_MIGRATION_PLAN.md
new file mode 100644
index 0000000000..ac96b6ab06
--- /dev/null
+++ b/.opencode/plans/LABEL_MIGRATION_PLAN.md
@@ -0,0 +1,839 @@
+# 📋 LABEL MIGRATION PLAN: Legacy ibexa-label → design-system Components
+
+**Package**: `ibexa/admin-ui`  
+**Date Created**: March 6, 2026  
+**Status**: In Progress
+
+> Update as of March 16, 2026: label migration work is already in progress across `admin-ui` and related `vendor/ibexa/*` repositories on the `IBX-11236-use-ds-label-component` branch. This document started as an `admin-ui`-only plan and now also serves as the source of truth for migration rules used across package repos.
+
+---
+
+## ⚠️ CRITICAL DIFFERENCES FROM BUTTON MIGRATION - READ FIRST
+
+### Difference 1: CSS Class Name Changes
+
+Unlike buttons where classes stay as `ibexa-btn*`, labels completely rename:
+
+| Legacy | Design System |
+|--------|--------------|
+| `ibexa-label` | `ids-label` |
+| `ibexa-label--required` (via `.required` co-class) | `ids-label--required` (via `required` prop) |
+| `ibexa-label--error` (via `.is-invalid` state) | `ids-label--error` (via `error` prop) |
+
+**Impact:** Any JavaScript files using `.querySelector('.ibexa-label')` or `.classList` manipulation must be updated alongside each template migration.
+
+---
+
+### Difference 2: `required` Is Now a Prop, Not a Co-Class
+
+Legacy labels used a `.required` co-class:
+
+```twig
+❌ BEFORE:
+<label class="ibexa-label required">URL</label>
+```
+
+Design system label uses a `required` boolean prop:
+
+```twig
+✅ AFTER:
+<twig:ibexa:label :required="true">URL</twig:ibexa:label>
+```
+
+---
+
+### Difference 3: `error` Is Now a Prop, Not an External State Class
+
+Legacy validation turned labels red by toggling `.is-invalid` via JavaScript on the `<label>`:
+
+```js
+❌ BEFORE:
+label.classList.toggle('is-invalid', !isValid);
+// CSS rule: .ibexa-label.form-label.is-invalid { color: $ibexa-color-danger; }
+```
+
+Design system label uses an `error` boolean prop — this state must be driven at render time or via React state. For vanilla JS contexts, toggle `ids-label--error` directly:
+
+```twig
+✅ TWIG: <twig:ibexa:label :error="field_has_error">...</twig:ibexa:label>
+```
+```jsx
+✅ REACT: <Label error={hasError}>...</Label>
+```
+```js
+✅ VANILLA JS: label.classList.toggle('ids-label--error', !isValid);
+```
+
+---
+
+### Difference 4: `for` Attribute Unchanged in Twig, `htmlFor` in React
+
+In Twig: `for="field-id"` is passed directly as a prop (same as HTML attribute).  
+In React: use `htmlFor="field-id"` (React standard, already supported by the `Label` component).
+
+---
+
+## ⚠️ OUT OF SCOPE (Document Only)
+
+### Unmapped Variants — Keep as Legacy + Comment
+
+These `ibexa-label` BEM modifiers have **no equivalent in the design system label component**:
+
+| Legacy Class | Reason for Exclusion | Action |
+|---|---|---|
+| `ibexa-label--checkbox-radio` | Will be migrated as part of a separate Checkbox/Radio component migration | **SKIP — do not migrate now** |
+| `ibexa-label--active` | Dynamic state toggled by JS (language selector); no design system equivalent | **Add TODO comment** |
+| `ibexa-label--small` | No dedicated DS size modifier exists; preserve class when needed on `<twig:ibexa:label>` | **Migrate to component and keep class if required** |
+
+```twig
+{# TODO: Migrate to design-system-twig when ibexa-label--active state has a design system equivalent #}
+<label class="ibexa-label ibexa-label--active">...</label>
+```
+
+---
+
+### Symfony Form Theme Labels — Investigate Custom Approach
+
+Files that inject `ibexa-label` via Symfony form theme `label_attr` merge cannot use `<twig:ibexa:label>` directly:
+
+- `src/bundle/Resources/views/themes/admin/ui/form_fields.html.twig` (form_label block only — NOT checkbox_radio_label)
+- `src/bundle/Resources/views/themes/admin/content/form_fields.html.twig`
+- `src/bundle/Resources/views/themes/admin/account/change_password/form_fields.html.twig`
+
+**Required investigation (Phase 0)**: Determine whether a custom Symfony form theme block can call `<twig:ibexa:label>` to render the label element itself. If not feasible, the fallback is to change the injected class from `ibexa-label` to `ids-label` directly in `label_attr`.
+
+> The `checkbox_radio_label` block in `ui/form_fields.html.twig` is **excluded** from this migration (handled with checkbox/radio component migration).
+
+---
+
+## Table of Contents
+
+1. [Overview](#overview)
+2. [Migration Statistics](#migration-statistics)
+3. [Migration Patterns](#migration-patterns)
+4. [State/Prop Mapping Reference](#stateprop-mapping-reference)
+5. [Migration Order by Priority](#migration-order-by-priority)
+6. [Per-File Migration Checklist](#per-file-migration-checklist)
+7. [JavaScript Selector Updates](#javascript-selector-updates)
+8. [Special Cases & Warnings](#special-cases--warnings)
+9. [Style Guide Compliance](#style-guide-compliance)
+10. [Validation Commands](#validation-commands)
+11. [Testing Strategy](#testing-strategy)
+12. [Progress Tracking](#progress-tracking)
+
+---
+
+## Overview
+
+### Goals
+
+1. **Replace `<label class="ibexa-label">` patterns** with `<twig:ibexa:label>` (Twig) and `<Label>` from `@ids-components/components/Label` (React)
+2. **Maintain 100% visual and functional parity**
+3. **Update JavaScript selectors** that target `.ibexa-label` to target `.ids-label`
+4. **Investigate Symfony form theme** approach for form_fields files
+5. **Document unmapped patterns** with TODO comments
+6. **Follow Ibexa Twig and React style guides** throughout
+
+### Approach
+
+- **One file at a time** with individual commits
+- **Update JS selectors in the same commit** as the corresponding template migration
+- **Manual functional testing** per file
+- **Git workflow**: LOCAL CHANGES ONLY (no automatic pushes)
+
+---
+
+## Migration Statistics
+
+### Files Overview
+
+**Twig Templates (direct `<label class="ibexa-label">`)**: 17 files, ~34 label instances
+
+| Category | Files | Labels |
+|---|---|---|
+| Field type edit | 5 files | 10 labels |
+| Modals | 3 files | 9 labels |
+| Search/filters | 2 files | 8 labels |
+| Content widgets | 2 files | 2 labels |
+| Login page | 1 file | 2 labels |
+| UI components | 2 files | 2 labels |
+| Trash | 1 file | 1 label |
+
+**Twig Templates (form theme — `label_attr` injection)**: 3 files — _under investigation_
+
+**React/JavaScript Files**: 2 files, 3 label instances
+- `content.create.widget.js`: 2 (1 true `<label>` + 1 `<div>` misusing class — skip `<div>`)
+- `instant.filter.component.js`: 1 (true `<label>`)
+
+**JavaScript Files (DOM selector only — no template)**: 3 files
+- `location.edit.js`: selectors + `.ibexa-label--active` toggle
+- `form.validation.helper.js`: selector + `.is-invalid` toggle
+- `admin.contenttype.edit.js`: selector only
+
+### Label State Distribution
+
+- **Plain labels** (no state): ~20 instances
+- **Required labels** (`.required` co-class): 7 instances (url_wildcard ×4, modal_add_custom_url ×1, update ×2)
+- **Error state** (`.is-invalid` via JS): driven by `form.validation.helper.js`
+- **`--active` state** (excluded): 1 component
+- **`--checkbox-radio` variant** (excluded): form_fields.html.twig + content.create.widget.js
+
+---
+
+## Migration Patterns
+
+### Pattern 1: Simple Label (No State)
+
+```twig
+❌ BEFORE:
+<label class="ibexa-label" for="username">{{ 'authentication.username'|trans|desc('Username') }}</label>
+
+✅ AFTER:
+<twig:ibexa:label for="username">
+    {{ 'authentication.username'|trans|desc('Username') }}
+</twig:ibexa:label>
+```
+
+### Pattern 2: Required Label
+
+```twig
+❌ BEFORE:
+<label class="ibexa-label required">{{ 'tab.urls.add.path'|trans|desc('URL') }}</label>
+
+✅ AFTER:
+<twig:ibexa:label :required="true">
+    {{ 'tab.urls.add.path'|trans|desc('URL') }}
+</twig:ibexa:label>
+```
+
+**Note:** The `.required` CSS class is replaced by the `required` boolean prop, which adds `ids-label--required` internally.
+
+### Pattern 3: Label with Additional Context Classes
+
+```twig
+❌ BEFORE:
+<label class="ibexa-label ibexa-modal__label required">
+    {{ 'url_wildcard.modal.create.url.wildcard'|trans|desc('URL wildcard') }}
+</label>
+
+✅ AFTER:
+<twig:ibexa:label class="ibexa-modal__label" :required="true">
+    {{ 'url_wildcard.modal.create.url.wildcard'|trans|desc('URL wildcard') }}
+</twig:ibexa:label>
+```
+
+**Note:** Context-specific classes (like `ibexa-modal__label`) are passed via the `class` prop and merged alongside `ids-label`.
+
+### Pattern 4: Label with `for` Attribute and co-class
+
+```twig
+❌ BEFORE:
+<label class="ibexa-label form-label" for="trash_search_content_type">
+    {{ 'trash.search.content_type'|trans|desc('Content type') }}
+</label>
+
+✅ AFTER:
+<twig:ibexa:label class="form-label" for="trash_search_content_type">
+    {{ 'trash.search.content_type'|trans|desc('Content type') }}
+</twig:ibexa:label>
+```
+
+### Pattern 5: Multiline Label with Children
+
+```twig
+❌ BEFORE:
+<label class="ibexa-label ibexa-user-invitation-modal__label">
+    {{ 'user.invitation.modal.email_address'|trans|desc('Email address') }}
+</label>
+
+✅ AFTER:
+<twig:ibexa:label class="ibexa-user-invitation-modal__label">
+    {{ 'user.invitation.modal.email_address'|trans|desc('Email address') }}
+</twig:ibexa:label>
+```
+
+### Pattern 6: Label on Non-`<label>` Element (DEFAULT TO COMPONENT)
+
+If a non-`<label>` element is used purely as visual label text, migrate it to `<twig:ibexa:label>` unless there is a strong semantic or accessibility reason not to.
+
+```twig
+<twig:ibexa:label class="ibexa-label--small ibexa-edit-header__action-name">
+    ...
+</twig:ibexa:label>
+```
+
+### Pattern 7: Empty Placeholder Label (KEEP AS LEGACY + COMMENT)
+
+`adaptive_filters.html.twig` contains `<label class="ibexa-label"></label>` — an empty label used as a layout spacer.
+
+```twig
+{# TODO: Review if this empty label is still needed after design system migration #}
+<label class="ibexa-label"></label>
+```
+
+### Pattern 8: Label Class Injected via Variable (Class-Name Swap Only)
+
+`double_input_range.html.twig` builds a `single_label_attr` dict with `ibexa-label` prepended:
+
+```twig
+❌ BEFORE:
+{% set single_label_attr = {
+    class: ('ibexa-label ' ~ single_label_attr.class|default(''))|trim,
+    ...
+} %}
+<label {{ attr(single_label_attr) }}>...</label>
+
+✅ AFTER (replace class value only):
+{% set single_label_attr = {
+    class: ('ids-label ' ~ single_label_attr.class|default(''))|trim,
+    ...
+} %}
+<label {{ attr(single_label_attr) }}>...</label>
+```
+
+> This file cannot use `<twig:ibexa:label>` because `single_label_attr` is passed externally as a data structure. Update the class name only.
+
+---
+
+## React Migration Patterns
+
+### Pattern R1: True `<label>` Element with Active State
+
+```jsx
+❌ BEFORE (instant.filter.component.js):
+import { createCssClassNames } from '../../../common/helpers/css.class.names';
+
+const labelClassName = createCssClassNames({
+    'form-check-label': true,
+    'ibexa-label': true,
+    'ibexa-label--active': activeLanguage === item.value,
+});
+<label className={labelClassName} htmlFor={radioId}>
+    {item.label}
+</label>
+
+✅ AFTER:
+import { Label } from '@ids-components/components/Label';
+
+// TODO: Migrate ibexa-label--active to design system equivalent when available
+const extraClassName = createCssClassNames({
+    'form-check-label': true,
+    'ibexa-label--active': activeLanguage === item.value,
+});
+<Label className={extraClassName} htmlFor={radioId}>
+    {item.label}
+</Label>
+```
+
+### Pattern R2: True `<label>` Element with Context Class
+
+```jsx
+❌ BEFORE (content.create.widget.js, line 190):
+<label className="ibexa-label ibexa-extra-actions__section-header">{selectLanguageLabel}</label>
+
+✅ AFTER:
+import { Label } from '@ids-components/components/Label';
+
+<Label className="ibexa-extra-actions__section-header">{selectLanguageLabel}</Label>
+```
+
+### Pattern R3: `<div>` Misusing `ibexa-label--checkbox-radio` (KEEP AS LEGACY)
+
+```jsx
+{/* SKIP: ibexa-label--checkbox-radio will be migrated with the Checkbox/Radio component migration */}
+{/* Legacy: <div> using ibexa-label class — kept as-is */}
+<div className="ibexa-label ibexa-label--checkbox-radio form-check-label">
+    {name}
+</div>
+```
+
+---
+
+## State/Prop Mapping Reference
+
+### Label State Mapping
+
+| Legacy Pattern | design-system-twig prop | React prop | Notes |
+|---|---|---|---|
+| `class="ibexa-label"` | _(no props needed)_ | _(no props needed)_ | Base class auto-applied |
+| `class="ibexa-label required"` | `:required="true"` | `required={true}` | `.required` co-class → prop |
+| `.is-invalid` toggled by JS | `:error="..."` or JS sets `ids-label--error` | `error={hasError}` | See JS selector updates |
+| `ibexa-label--checkbox-radio` | **SKIP** | **SKIP** | With checkbox/radio migration |
+| `ibexa-label--active` | **TODO comment** | **TODO comment** | No DS equivalent yet |
+| `ibexa-label--small` | **TODO comment** | **TODO comment** | Only on `<div>`, not `<label>` |
+
+### Extra Classes Mapping
+
+| Legacy Pattern | Twig Component | Notes |
+|---|---|---|
+| `ibexa-label form-label` | `class="form-label"` | `form-label` passed via `class` prop |
+| `ibexa-label ibexa-modal__label` | `class="ibexa-modal__label"` | Context class preserved |
+| `ibexa-label ibexa-extra-actions__section-header` | `class="ibexa-extra-actions__section-header"` | Context class preserved |
+| `ibexa-label ibexa-user-invitation-modal__label` | `class="ibexa-user-invitation-modal__label"` | Context class preserved |
+
+---
+
+## Migration Order by Priority
+
+### Phase 0: Symfony Form Theme Investigation ⚠️ RECOMMENDED FIRST
+
+**Investigate whether Symfony form theme blocks can render `<twig:ibexa:label>`:**
+
+```
+Files: 3 form_fields.html.twig files
+Outcome A: Override form_label block to render <twig:ibexa:label>
+Outcome B: Simple class name swap — ibexa-label → ids-label in label_attr
+```
+
+This phase does **not** block Phase 1–3 but its outcome informs the form theme files.
+
+---
+
+### Phase 1: Simple Labels (8 files) — HIGH PRIORITY ⭐
+
+Start here — low risk, no dynamic states.
+
+#### 1.1 Login & Account (2 files)
+
+1. `src/bundle/Resources/views/themes/admin/account/login/index.html.twig` — 2 labels (with `for`)
+2. `src/bundle/Resources/views/themes/admin/content/tab/content.html.twig` — 1 label
+
+#### 1.2 Search / Filter Labels (2 files)
+
+3. `src/bundle/Resources/views/themes/admin/ui/search/filters.html.twig` — 6 labels
+4. `src/bundle/Resources/views/themes/admin/account/notifications/filters/form_fields.html.twig` — 2 labels
+
+#### 1.3 Content Widget Labels (1 file)
+
+5. `src/bundle/Resources/views/themes/admin/content/widget/content_create.html.twig` — 1 label
+
+#### 1.4 React Labels (2 files) — migrate alongside Twig if applicable
+
+6. `src/bundle/ui-dev/src/modules/universal-discovery/components/content-create-widget/content.create.widget.js` — 1 true `<label>` + 1 `<div>` (skip `<div>`)
+7. `src/bundle/ui-dev/src/modules/sub-items/components/sub-items-list/instant.filter.component.js` — 1 `<label>`
+
+#### 1.5 Trash List (1 file)
+
+8. `src/bundle/Resources/views/themes/admin/trash/list.html.twig` — 1 label (with `for`, `form-label` co-class)
+
+---
+
+### Phase 2: Required Labels & Modals (4 files) — MEDIUM PRIORITY ⚠️
+
+These use the `.required` co-class → `required` prop migration.
+
+9. `src/bundle/Resources/views/themes/admin/content/tab/url/modal_add_custom_url.html.twig` — 5 labels (1 required)
+10. `src/bundle/Resources/views/themes/admin/url_wildcard/modal_create.html.twig` — 3 labels (2 required)
+11. `src/bundle/Resources/views/themes/admin/url_wildcard/update.html.twig` — 3 labels (2 required)
+12. `src/bundle/Resources/views/themes/admin/content/modal/user_group_invitation_modal.html.twig` — 1 label
+
+---
+
+### Phase 3: Field Type Edit Labels (5 files) — MEDIUM PRIORITY ⚠️
+
+These are inside field type templates — test carefully.
+
+13. `src/bundle/Resources/views/themes/admin/ui/field_type/edit/ibexa_author.html.twig` — 2 labels
+14. `src/bundle/Resources/views/themes/admin/ui/field_type/edit/ibexa_binaryfile.html.twig` — 2 labels
+15. `src/bundle/Resources/views/themes/admin/ui/field_type/edit/ibexa_image.html.twig` — 3 labels
+16. `src/bundle/Resources/views/themes/admin/ui/field_type/edit/ibexa_media.html.twig` — 3 labels
+17. `src/bundle/Resources/views/themes/admin/ui/field_type/edit/ibexa_image_asset.html.twig` — 1 label
+
+---
+
+### Phase 4: Complex/Edge Cases (3 files) — LOWER PRIORITY
+
+18. `src/bundle/Resources/views/themes/admin/ui/component/adaptive_filters/adaptive_filters.html.twig` — 1 empty label (keep as legacy + comment)
+19. `src/bundle/Resources/views/themes/admin/ui/component/double_input_range/double_input_range.html.twig` — class name swap only (cannot use component)
+20. `src/bundle/Resources/views/themes/admin/ui/edit_header.html.twig` — non-`<label>` visual label (migrate to component unless blocked)
+
+---
+
+### Phase 5: Symfony Form Themes (outcome of Phase 0) — LAST
+
+21. `src/bundle/Resources/views/themes/admin/ui/form_fields.html.twig` (form_label block only)
+22. `src/bundle/Resources/views/themes/admin/content/form_fields.html.twig`
+23. `src/bundle/Resources/views/themes/admin/account/change_password/form_fields.html.twig`
+
+---
+
+## JavaScript Selector Updates
+
+### When to Update
+
+Update JavaScript selectors **in the same commit** as the corresponding template migration. Never leave a template migrated to `ids-label` with JS still querying `.ibexa-label`.
+
+### Files Requiring JS Updates
+
+#### `src/bundle/Resources/public/js/scripts/helpers/form.validation.helper.js`
+
+Update these selectors when migrating the first form field template that uses this helper:
+
+```js
+❌ BEFORE (lines 21 and 38):
+const label = field.querySelector('.ibexa-label');
+
+✅ AFTER:
+const label = field.querySelector('.ids-label');
+```
+
+Also update the `is-invalid` toggling to use the design system error class:
+
+```js
+❌ BEFORE (line 47):
+label.classList.toggle('is-invalid', !isValid);
+
+✅ AFTER:
+label.classList.toggle('ids-label--error', !isValid);
+```
+
+#### `src/bundle/Resources/public/js/scripts/admin.contenttype.edit.js`
+
+```js
+❌ BEFORE (line 374):
+const labelNode = field?.querySelector('.ibexa-label');
+
+✅ AFTER:
+const labelNode = field?.querySelector('.ids-label');
+```
+
+#### `src/bundle/Resources/public/js/scripts/sidebar/btn/location.edit.js`
+
+The `--active` modifier is excluded from migration. The base class selector still needs updating:
+
+```js
+❌ BEFORE (lines 57–58):
+const activeLanguageItem = event.target.closest('.ibexa-instant-filter__group-item')?.querySelector('.ibexa-label');
+const allLanguageItems = form.querySelectorAll('.ibexa-instant-filter__group-item .ibexa-label');
+
+✅ AFTER:
+const activeLanguageItem = event.target.closest('.ibexa-instant-filter__group-item')?.querySelector('.ids-label');
+const allLanguageItems = form.querySelectorAll('.ibexa-instant-filter__group-item .ids-label');
+```
+
+The `--active` class manipulation lines (62 and 86) are **not changed** — add TODO comment:
+
+```js
+// TODO: Migrate ibexa-label--active to design system equivalent when available
+item.classList.remove('ibexa-label--active');
+// ...
+activeLanguageItem?.classList.add('ibexa-label--active');
+```
+
+---
+
+## Per-File Migration Checklist
+
+### Before Migration
+
+- [ ] Read entire file to understand context
+- [ ] Count all `ibexa-label` instances
+- [ ] Note which have `required` co-class
+- [ ] Note which have `form-label` or other context co-classes
+- [ ] Note `for` attributes
+- [ ] Identify if any JS files target `.ibexa-label` in this context
+- [ ] Check for non-`<label>` elements using `ibexa-label` class
+- [ ] Check for `ibexa-label--checkbox-radio` (SKIP)
+- [ ] Check for `ibexa-label--active` (TODO comment)
+
+### During Migration
+
+- [ ] Replace `<label class="ibexa-label...">` with `<twig:ibexa:label ...>`
+- [ ] Move `for` attribute directly to component: `for="field-id"`
+- [ ] Convert `.required` co-class to `:required="true"` prop
+- [ ] Move context classes to `class` prop
+- [ ] Add TODO comments for `--active` and `--small` modifiers
+- [ ] Update JS selectors in the same commit (see JS Selector Updates section)
+- [ ] Follow 4-space indentation in Twig
+
+### After Migration
+
+- [ ] Twig lint: `php bin/console lint:twig src/bundle/Resources/views/[file-path]`
+- [ ] Manually test in browser
+- [ ] Verify visual appearance matches original
+- [ ] Test label states (required asterisk visible, error color on validation failure)
+- [ ] Test JS interactions (form validation, active language toggle)
+- [ ] Run PHPUnit tests: `composer test`
+- [ ] Create commit with clear message
+
+### Commit Message Format
+
+```
+fix: Migrate [short-filename] labels to design-system-twig components
+
+- Replace [N] legacy <label class="ibexa-label"> with <twig:ibexa:label>
+- Convert [N] required co-class to required prop
+- Update .ibexa-label selector(s) in [js-file] to .ids-label
+[- Add TODO comment for ibexa-label--active — no DS equivalent yet]
+
+Refs: LABEL_MIGRATION_PLAN.md
+```
+
+---
+
+## Special Cases & Warnings
+
+### 1. Symfony Form Theme Files ⚠️ Phase 0 Required
+
+These files use `label_attr|merge` to inject `ibexa-label` into Symfony-rendered `<label>` elements. `<twig:ibexa:label>` cannot be used directly. **Two options:**
+
+**Option A — Class name swap (simpler):**
+```twig
+❌ BEFORE:
+{%- set label_attr = label_attr|merge({class: (label_attr.class|default('') ~ ' ibexa-label')|trim}) -%}
+
+✅ AFTER:
+{%- set label_attr = label_attr|merge({class: (label_attr.class|default('') ~ ' ids-label')|trim}) -%}
+```
+
+**Option B — Custom Symfony block override (investigate):**
+Research whether the `form_label` block can be overridden to render `<twig:ibexa:label>` by wrapping the block content.
+
+### 2. `double_input_range.html.twig` ⚠️ Class-Only Swap
+
+Cannot use `<twig:ibexa:label>` because label attributes are built as a data structure. Perform a class name swap only.
+
+### 3. Behat Test Files ⚠️ Update CSS Selectors
+
+Once labels are migrated to `ids-label`, these Behat PHP files need selector updates (in the same commit as their corresponding template):
+
+- `src/lib/Behat/Component/CreateNewPopup.php` (lines 83, 86)
+- `src/lib/Behat/Page/ObjectStateGroupPage.php` (line 134)
+- `src/lib/Behat/Page/ObjectStatePage.php` (line 92)
+- `src/lib/Behat/Page/RoleUpdatePage.php` (line 88)
+- `src/lib/Behat/Page/ContentUpdateItemPage.php` (lines 111–112)
+
+### 4. SCSS Context Rules — Update Selectors
+
+After migrating, SCSS rules targeting `.ibexa-label` in context selectors must be updated to `.ids-label`. The `ids-label` base styles come from the design system, but context-specific overrides in admin-ui's own SCSS files need updating:
+
+Files with context overrides (update as templates are migrated):
+- `_modals.scss`, `_login.scss`, `_search-links-form.scss`, `_filters.scss`
+- `_list-filters.scss`, `_adaptive-filters.scss`, `_field-group.scss`
+- `_custom-url-form.scss`, `_add-translation.scss`, `_details.scss`, `_tabs.scss`
+- `_extra-actions.scss`, `_content-type-edit.scss`
+- Field type SCSS: `_base-field.scss`, `_ibexa_image.scss`, `_ibexa_media.scss`, etc.
+
+---
+
+## Style Guide Compliance
+
+### ✅ DO (Twig):
+
+- Pass `for` attribute directly on the component (not `:for`)
+- Use `:required="true"` not `required="true"` for boolean props
+- Use 4-space indentation inside component blocks
+- Pass context classes via `class` prop
+
+### ❌ DON'T (Twig):
+
+- Use `<twig:ibexa:label>` on `<div>` elements (always renders `<label>`)
+- Skip the `for` attribute on labels that had one
+- Use `.required` co-class alongside the component (use `:required="true"` prop instead)
+
+### ✅ DO (React):
+
+- Import from `@ids-components/components/Label` (same pattern as Button)
+- Use `htmlFor` prop for the `for` attribute
+- Pass `className` for context-specific classes
+
+### ❌ DON'T (React):
+
+- Migrate `<div className="ibexa-label ibexa-label--checkbox-radio">` (skip)
+- Remove `ibexa-label--active` class management from JS without a replacement
+
+---
+
+## Validation Commands
+
+```bash
+# Lint Twig syntax (catches syntax errors only)
+php bin/console lint:twig src/bundle/Resources/views/themes/admin/[path-to-file]
+
+# Run all tests
+composer test
+
+# Code style check
+composer check-cs
+
+# Static analysis
+composer phpstan
+
+# Frontend checks (TypeScript, ESLint, Prettier)
+yarn test
+```
+
+---
+
+## Testing Strategy
+
+### Required Testing Approach
+
+**1. Twig Syntax Validation** ✅
+```bash
+php bin/console lint:twig vendor/ibexa/admin-ui/src/bundle/Resources/views/themes/admin/[file].html.twig
+```
+
+**2. Manual Browser Testing** ✅ REQUIRED
+
+For each migrated file:
+```bash
+rm -rf var/cache/dev && php bin/console cache:clear --no-warmup
+```
+Then navigate to the page and verify:
+- Labels render with correct visual style
+- Required labels show asterisk `*`
+- Error state labels turn red on form validation failure
+- Language selector active state still highlights correctly
+- `for` attribute links label to its input correctly
+
+**3. Check Application Logs**
+```bash
+tail -50 var/log/dev.log | grep -i "exception\|error"
+```
+
+### Testing Checklist Per File
+
+- [ ] Twig syntax validates
+- [ ] Cache cleared
+- [ ] Page loads without exception
+- [ ] Labels render with correct font/color (`ids-label` styling)
+- [ ] Required asterisk visible for required labels
+- [ ] Error state visible when form validation fails
+- [ ] `for` attribute still links label to input
+- [ ] Context classes (modal__label, etc.) still apply
+
+### Common Issues to Watch For
+
+**1. Missing `ids-label` styles**
+```
+Problem: Label renders but has no styling (no font/color/spacing)
+Cause: ids-label CSS not loaded
+Fix: Ensure ids-assets CSS is included in the page's Encore entry
+```
+
+**2. Required asterisk missing**
+```
+Problem: required prop set but asterisk not showing
+Cause: ids-label--required CSS rule missing or not loaded
+Fix: Check that ids-label--required rule exists in loaded design system stylesheet
+```
+
+**3. JS selector breaking after migration**
+```
+Problem: Form validation no longer highlights labels, or language selector active state broken
+Cause: JS still queries .ibexa-label but HTML now has .ids-label
+Fix: Update JS selector in same commit as template migration
+```
+
+**4. `for` attribute dropped**
+```
+Problem: Clicking label doesn't focus the associated input
+Cause: for attribute missed during migration
+Fix: Add for="field-id" prop to <twig:ibexa:label>
+```
+
+**5. Context SCSS rules no longer apply**
+```
+Problem: Labels inside modals/filters have wrong spacing or color
+Cause: SCSS context rules still target .ibexa-label
+Fix: Update SCSS context rules to .ids-label in the same commit
+```
+
+---
+
+## Progress Tracking
+
+**Total Files**: ~23 (17 direct Twig + 3 form theme + 2 React JS + 1 JS-only class swap)  
+**Completed**: `admin-ui` phases 1-5 and 8-9 are implemented on `IBX-11236-use-ds-label-component`; related package migrations are also in progress across `vendor/ibexa/*`  
+**Remaining**: final review, validation, and any follow-up exception cleanup
+
+### Phase Completion
+
+- [x] Phase 0: Symfony Form Theme Investigation (resolved via class swap in form themes)
+- [x] Phase 1: Simple Labels
+- [x] Phase 2: Required/Modal Labels
+- [x] Phase 3: Field Type Edit Labels
+- [x] Phase 4: Complex/Edge Cases (with explicit exceptions tracked)
+- [x] Phase 5: Symfony Form Themes (class swap approach)
+
+### Cross-Repository Rollout Status
+
+Repositories currently carrying `IBX-11236` label migration commits on `IBX-11236-use-ds-label-component`:
+
+- `admin-ui`
+- `activity-log`
+- `calendar`
+- `connect`
+- `connector-ai`
+- `content-tree`
+- `corporate-account`
+- `discounts`
+- `fieldtype-matrix`
+- `fieldtype-page`
+- `fieldtype-richtext`
+- `form-builder`
+- `image-picker`
+- `measurement`
+- `order-management`
+- `page-builder`
+- `personalization`
+- `product-catalog`
+- `scheduler`
+- `segmentation`
+- `seo`
+- `share`
+- `shipping`
+- `site-factory`
+- `taxonomy`
+
+---
+
+## Quick Reference
+
+### Twig Component Signature
+
+```twig
+<twig:ibexa:label
+    for="optional-input-id"
+    class="optional-extra-classes"
+    :required="true|false"
+    :error="true|false"
+>
+    Label text
+</twig:ibexa:label>
+```
+
+### React Component Signature
+
+```jsx
+import { Label } from '@ids-components/components/Label';
+
+<Label
+    htmlFor="optional-input-id"
+    className="optional-extra-classes"
+    required={true|false}
+    error={true|false}
+    title="optional-title"
+>
+    Label text
+</Label>
+```
+
+### State Quick Map
+
+```
+<label class="ibexa-label">          → <twig:ibexa:label>
+<label class="ibexa-label required"> → <twig:ibexa:label :required="true">
+.is-invalid on label (via JS)        → ids-label--error (update JS toggle target)
+ibexa-label--checkbox-radio          → SKIP (checkbox/radio migration)
+ibexa-label--active                  → TODO comment (no DS equivalent)
+ibexa-label--small on non-<label>    → migrate to <twig:ibexa:label> and preserve class if needed
+```
+
+---
+
+**Plan Status**: In Progress  
+**Plan Version**: 1.1  
+**Date**: March 6, 2026  
+**Next Step**: validate package branches, review remaining exceptions, and run package-level verification
diff --git a/.opencode/plans/TAG_BADGE_MIGRATION_PLAN.md b/.opencode/plans/TAG_BADGE_MIGRATION_PLAN.md
new file mode 100644
index 0000000000..a1a6b94cd0
--- /dev/null
+++ b/.opencode/plans/TAG_BADGE_MIGRATION_PLAN.md
@@ -0,0 +1,1192 @@
+# TAG & BADGE MIGRATION PLAN: Legacy ibexa-tag / ibexa-badge → design-system-twig Components
+
+**Package**: `ibexa/admin-ui` (+ cross-package coordination)
+**Date Created**: March 9, 2026
+**Last Updated**: March 10, 2026
+**Status**: Ready for Review
+
+---
+
+## CRITICAL DIFFERENCES — READ FIRST
+
+### The Naming Inversion Trap
+
+The names in admin-ui and design-system are **opposite** to what you might expect:
+
+| Admin-UI Class | Appearance | DS Component | DS Class |
+|---|---|---|---|
+| `ibexa-tag` (removable) | Pill with ✕ button | `<twig:ibexa:chip>` | `ids-chip` |
+| `ibexa-tag` (non-removable) | Plain pill | `<twig:ibexa:tag>` | `ids-tag` |
+| `ibexa-badge` (colored pill, no ✕) | Colored text pill | `<twig:ibexa:tag>` | `ids-tag` |
+
+**Key rule:**
+- `ibexa-tag` with a remove button → **DS chip** (chip = removable)
+- `ibexa-tag` without a remove button → **DS tag** (tag = non-removable)
+- `ibexa-badge` → **DS tag** (badge = non-removable colored label)
+
+### DO NOT use `<twig:ibexa:badge>` for `ibexa-badge`
+
+The DS `<twig:ibexa:badge>` is a **notification counter** ("99+"), not a colored text label. Using it for admin-ui's `ibexa-badge` would be semantically and visually wrong.
+
+---
+
+### Issue 1: `tag.html.twig` Cannot Be Fully Migrated Yet
+
+The canonical `@ibexadesign/ui/tag.html.twig` include template has a **spinner/loading state** (`ibexa-tag__spinner`, `is_loading_state`). The DS chip component has no spinner support.
+
+**Decision: Do NOT migrate `tag.html.twig` itself.** Instead:
+- Migrate all **inline usages** of `ibexa-tag` that don't go through `tag.html.twig`
+- Leave `tag.html.twig` as legacy with a TODO comment
+
+---
+
+### Issue 2: ibexa-badge--status Uses a Ghost Dot Pattern
+
+`ibexa-badge--status` + `ibexa-badge--success` (or `--danger`) renders a **colored dot + text** via CSS `::before`.
+
+The DS tag has ghost types: `success-ghost`, `error-ghost`, `neutral-ghost`. These render an `ids-tag__ghost-dot` element, providing the same dot + text visual.
+
+**Mapping:**
+- `ibexa-badge--status ibexa-badge--success` → `<twig:ibexa:tag type="success-ghost">`
+- `ibexa-badge--status ibexa-badge--danger` → `<twig:ibexa:tag type="error-ghost">`
+- `ibexa-badge--status` without color → `<twig:ibexa:tag type="neutral-ghost">`
+
+---
+
+### Issue 3: `--custom-colors` and `--complementary` Are Unmapped
+
+`ibexa-badge--custom-colors` (used in `payment`, `shipping`, `order-management`) drives colors via CSS variables (`--primary-color`, `--secondary-color`). The DS tag has no arbitrary color override. **Do not migrate these — keep as legacy with TODO comment.**
+
+`ibexa-badge--complementary` (used in `personalization`) has no DS tag equivalent. **Keep as legacy with TODO comment.**
+
+---
+
+### Issue 4: JS Selectors Must Update With Template
+
+Every JS file that targets `.ibexa-tag`, `.ibexa-tag__remove-btn`, `.ibexa-tag__content`, `.ibexa-tag__spinner` must be updated **in the same commit** as the corresponding template migration.
+
+The DS chip uses `.ids-chip__delete` (not `.ibexa-tag__remove-btn`) and `.ids-chip__content`.
+
+---
+
+### Issue 5: `ibexa-taggify` and `ibexa-tag-view-select` Are Out of Scope
+
+These are distinct, complex widget families with no DS equivalents. **Do not migrate them.**
+
+---
+
+### Issue 6: Cross-Package Scope — `page_title.html.twig` is a Breaking Change
+
+`page_title.html.twig` lives in `admin-ui` but is consumed with `tag`/`tag_extra_classes` variables by 6 templates in other packages (`corporate-account`, `product-catalog`, `payment` ×2, `shipping` ×2). Migrating its `{% block tag %}` requires coordinated changes across all those packages in a separate phase.
+
+---
+
+## Table of Contents
+
+1. [Component Signatures](#component-signatures)
+2. [Type/Modifier Mapping Reference](#typemodifier-mapping-reference)
+3. [Migration Patterns](#migration-patterns)
+4. [Complete Occurrence Inventory](#complete-occurrence-inventory)
+5. [Migration Order by Priority](#migration-order-by-priority)
+6. [JavaScript Selector Updates](#javascript-selector-updates)
+7. [Per-File Migration Checklist](#per-file-migration-checklist)
+8. [Special Cases & Warnings](#special-cases--warnings)
+9. [Style Guide Compliance](#style-guide-compliance)
+10. [Validation Commands](#validation-commands)
+11. [Testing Strategy](#testing-strategy)
+12. [Progress Tracking](#progress-tracking)
+
+---
+
+## Component Signatures
+
+### DS Tag — Non-removable colored label
+
+```twig
+<twig:ibexa:tag
+    type="primary"
+    size="medium"
+    icon="optional-icon-name"
+    :isDark="false"
+>
+    Label text
+</twig:ibexa:tag>
+```
+
+**Props:**
+- `type` (required): `primary` | `primary-alt` | `info` | `success` | `warning` | `error` | `neutral` | `icon-tag` | `success-ghost` | `error-ghost` | `neutral-ghost`
+- `size`: `medium` (default) | `small`
+- `icon`: icon name string (optional; use with `type="icon-tag"`)
+- `isDark`: bool (default `false`)
+
+### DS Chip — Removable tag
+
+```twig
+<twig:ibexa:chip
+    :isDeletable="true"
+    :error="false"
+    :disabled="false"
+>
+    Label text
+</twig:ibexa:chip>
+```
+
+**Props:**
+- `isDeletable`: bool (default `true`) — controls whether the ✕ button appears
+- `error`: bool (default `false`) — red error state
+- `disabled`: bool (default `false`) — greys out the chip and disables interaction
+- The delete button renders as: `<button class="ids-chip__delete">` (handled internally)
+
+---
+
+## Type/Modifier Mapping Reference
+
+### `ibexa-tag` Modifier → DS Component
+
+| Legacy Class | DS Component | DS Prop | Notes |
+|---|---|---|---|
+| `ibexa-tag` + remove button | `<twig:ibexa:chip>` | `isDeletable="true"` (default) | Removable |
+| `ibexa-tag` + no remove button | `<twig:ibexa:tag>` | `type="primary"` (or match color) | Non-removable |
+| `ibexa-tag--deletable` | `<twig:ibexa:chip>` | `isDeletable="true"` | CSS class controlled visibility |
+| `ibexa-tag--primary` | `<twig:ibexa:tag>` | `type="primary"` | Direct match |
+| `ibexa-tag--secondary` | `<twig:ibexa:tag>` | `type="neutral"` | Renamed |
+| `ibexa-tag--info` | `<twig:ibexa:tag>` | `type="info"` | Direct match |
+| `ibexa-tag--danger` | `<twig:ibexa:tag>` | `type="error"` | Renamed |
+| `ibexa-tag--success` | `<twig:ibexa:tag>` | `type="success"` | Direct match |
+| `ibexa-tag--complementary` | UNMAPPED | — | Keep legacy + TODO comment |
+
+> No color modifiers for `ibexa-tag` are currently used in any template across all packages — only `--deletable` is active.
+
+### `ibexa-badge` Modifier → DS Tag `type`
+
+| Legacy Class | DS `type` | Notes |
+|---|---|---|
+| `ibexa-badge` (no modifier) | `type="neutral"` | Default |
+| `ibexa-badge--primary` | `type="primary"` | Direct match |
+| `ibexa-badge--secondary` | `type="neutral"` | Renamed |
+| `ibexa-badge--info` | `type="info"` | Direct match |
+| `ibexa-badge--warning` | `type="warning"` | Direct match |
+| `ibexa-badge--danger` | `type="error"` | Renamed |
+| `ibexa-badge--success` | `type="success"` | Direct match |
+| `ibexa-badge--small` | `size="small"` | Direct match |
+| `ibexa-badge--complementary` | UNMAPPED | Keep legacy + TODO comment |
+| `ibexa-badge--status + --success` | `type="success-ghost"` | Dot indicator pattern |
+| `ibexa-badge--status + --danger` | `type="error-ghost"` | Dot indicator pattern |
+| `ibexa-badge--status` (no color) | `type="neutral-ghost"` | Dot indicator pattern |
+| `ibexa-badge--ghost` | `success-ghost`/`error-ghost`/`neutral-ghost` | Use based on context color |
+| `ibexa-badge--custom-colors` | UNMAPPED | Keep legacy + TODO comment |
+
+---
+
+## Migration Patterns
+
+### Pattern 1: Non-removable Inline Tag → DS Tag
+
+```twig
+❌ BEFORE:
+{% for role_assigment in roles %}
+    <div class="ibexa-tag">
+        <div class="ibexa-tag__content">
+            {{ role_assigment.identifier }}
+        </div>
+    </div>
+{% endfor %}
+
+✅ AFTER:
+{% for role_assigment in roles %}
+    <twig:ibexa:tag type="neutral">
+        {{ role_assigment.identifier }}
+    </twig:ibexa:tag>
+{% endfor %}
+```
+
+---
+
+### Pattern 2: Badge with Color Modifier → DS Tag
+
+```twig
+❌ BEFORE:
+<span class="ibexa-badge ibexa-badge--success">{{ 'label.active'|trans|desc('Active') }}</span>
+
+✅ AFTER:
+<twig:ibexa:tag type="success">
+    {{ 'label.active'|trans|desc('Active') }}
+</twig:ibexa:tag>
+```
+
+---
+
+### Pattern 3: Badge with Small Size → DS Tag with size
+
+```twig
+❌ BEFORE:
+<span class="badge ibexa-badge ibexa-badge--success ibexa-badge--small">
+    {{ 'label.active'|trans|desc('Active') }}
+</span>
+
+✅ AFTER:
+<twig:ibexa:tag type="success" size="small">
+    {{ 'label.active'|trans|desc('Active') }}
+</twig:ibexa:tag>
+```
+
+---
+
+### Pattern 4: Status/Ghost Dot Badge → DS Ghost Tag
+
+```twig
+❌ BEFORE:
+{% set badge_class = 'ibexa-badge--status ibexa-badge--' ~ (is_active ? 'success' : 'danger') %}
+<span class="ibexa-badge {{ badge_class }}">{{ label }}</span>
+
+✅ AFTER:
+<twig:ibexa:tag :type="is_active ? 'success-ghost' : 'error-ghost'">
+    {{ label }}
+</twig:ibexa:tag>
+```
+
+---
+
+### Pattern 5: Dynamic Badge Modifier String → DS Tag
+
+Used in `personalization` and `product-catalog` where a `modifier` variable maps to badge class:
+
+```twig
+❌ BEFORE:
+{% set modifier = states_colors_map[state] %}
+<span class="ibexa-badge ibexa-badge--{{ modifier }}">{{ state|trans }}</span>
+
+✅ AFTER:
+{# states_colors_map values must be updated to DS type names: danger→error, secondary→neutral #}
+{% set tag_type = states_colors_map[state] %}
+<twig:ibexa:tag :type="tag_type">{{ state|trans }}</twig:ibexa:tag>
+```
+
+> **Note:** Update the `states_colors_map` in the controller/template to use DS type names (`error` not `danger`, `neutral` not `secondary`).
+
+---
+
+### Pattern 6: `ibexa-tag` on `<li>` element → DS Tag inside `<li>`
+
+DS tag always renders a `<div>`. When `ibexa-tag` is applied directly to a `<li>`, the companion class must move to the wrapper:
+
+```twig
+❌ BEFORE:
+<li class="ibexa-selection__item ibexa-tag">
+    <div class="ibexa-tag__content">{{ options[selectedIndex] }}</div>
+</li>
+
+✅ AFTER:
+<li class="ibexa-selection__item">
+    <twig:ibexa:tag type="neutral">
+        {{ options[selectedIndex] }}
+    </twig:ibexa:tag>
+</li>
+```
+
+---
+
+### Pattern 7: `page_title.html.twig` Badge Block (Cross-Package) → DS Tag
+
+The block in `admin-ui` must change from `tag_extra_classes` (CSS modifier string) to `tag_type` (DS type name). Every downstream caller must be updated simultaneously:
+
+```twig
+❌ BEFORE (admin-ui/page_title.html.twig):
+{% block tag %}
+    {% if tag is defined %}
+        {% set attr = tag_attr|default({})|merge({
+            class: (tag_attr.class|default('') ~ ' ibexa-badge ' ~ tag_extra_classes|default(''))|trim,
+        }) %}
+        <div {{ html.attributes(attr) }}>{{ tag }}</div>
+    {% endif %}
+{% endblock %}
+
+✅ AFTER (admin-ui/page_title.html.twig):
+{% block tag %}
+    {% if tag is defined %}
+        <twig:ibexa:tag
+            :type="tag_type|default('neutral')"
+            class="{{ tag_extra_classes|default('') }}"
+        >
+            {{ tag }}
+        </twig:ibexa:tag>
+    {% endif %}
+{% endblock %}
+```
+
+```twig
+❌ BEFORE (caller, e.g. product-catalog/product/view.html.twig):
+{% include '@ibexadesign/ui/page_title.html.twig' with {
+    title: product.getName(),
+    tag: product.getCode(),
+    tag_extra_classes: 'ibexa-badge--info',
+} %}
+
+✅ AFTER (caller):
+{% include '@ibexadesign/ui/page_title.html.twig' with {
+    title: product.getName(),
+    tag: product.getCode(),
+    tag_type: 'info',
+} %}
+```
+
+> **Note on `tag_extra_classes` backward compatibility:** The `class` prop is kept in the `AFTER` version of `page_title.html.twig` so callers that pass arbitrary extra classes for non-type purposes still work. The `tag_extra_classes` variable is preserved as a `class` passthrough — only the type/color selection moves to `tag_type`.
+
+---
+
+### Pattern 8: Removable Tag via `tag.html.twig` → DS Chip (Future — HOLD)
+
+`tag.html.twig` has a spinner/loading state. **Not migrated in this plan.** Add TODO comment only:
+
+```twig
+{# TODO: Migrate to <twig:ibexa:chip> when DS chip supports a loading/spinner state #}
+{# Legacy removable tag template — kept as-is per TAG_BADGE_MIGRATION_PLAN.md #}
+```
+
+---
+
+### Pattern 9: Removable Inline Tag (No Spinner) → DS Chip
+
+For packages that write `ibexa-tag ibexa-tag--deletable` inline (not via `tag.html.twig`) and have no spinner:
+
+```twig
+❌ BEFORE (workflow/apply_transition_widget.html.twig):
+<div class="ibexa-workflow-apply-transition__selected-user ibexa-tag ibexa-tag--deletable">
+    <span class="ibexa-workflow-apply-transition__user-name"></span>
+    <button type="button" class="ibexa-tag__remove-btn ibexa-tag__remove-btn--remove-reviewer">
+        <svg class="ibexa-icon ibexa-icon--small-medium">
+            <use xlink:href="{{ ibexa_icon_path('circle-close') }}"></use>
+        </svg>
+    </button>
+</div>
+
+✅ AFTER:
+<twig:ibexa:chip class="ibexa-workflow-apply-transition__selected-user">
+    <span class="ibexa-workflow-apply-transition__user-name"></span>
+</twig:ibexa:chip>
+```
+
+JS update required: `.ibexa-tag__remove-btn--remove-reviewer` → `.ids-chip__delete`
+
+---
+
+### Pattern 10: Unmapped — Keep as Legacy + Comment
+
+```twig
+{# TODO: Migrate to design-system-twig when ibexa-badge--custom-colors has a DS equivalent #}
+{# Legacy ibexa-badge--custom-colors — requires CSS variable color override, no DS tag equivalent #}
+<span
+    class="ibexa-badge ibexa-badge--custom-colors"
+    style="--primary-color: {{ fg_color }}; --secondary-color: {{ bg_color }};"
+>
+    {{ label }}
+</span>
+```
+
+---
+
+## Complete Occurrence Inventory
+
+### `ibexa-tag` — All Files Across All Packages
+
+#### Group A: Simple non-removable inline — migrate to `<twig:ibexa:tag>` (Phase 1 & 2)
+
+| # | Package | File | Line(s) | Notes |
+|---|---------|------|---------|-------|
+| A1 | admin-ui | `account/profile/view.html.twig` | 96–99 | Role assignment tags in loop; no JS |
+| A2 | admin-ui | `limitation/udw_limitation_value.html.twig` | 43–46 | Static "location deleted" in `{% else %}` branch only |
+| A3 | admin-ui | `ui/field_type/preview/content_fields.html.twig` | 153–156 | Multi-select preview on `<li>` — wrap in `<li>` |
+| A4 | admin-ui | `ui/field_type/preview/content_fields.html.twig` | 161, 165 | Single-select preview: class via `attr|merge` — special case (see Special Cases §5) |
+| A5 | admin-ui | `ui/search/criteria_tags.html.twig` | 5–10 | Language filter, no remove button, manually inlined |
+
+#### Group B: Canonical template — HOLD (spinner)
+
+| # | Package | File | Status |
+|---|---------|------|--------|
+| B1 | admin-ui | `ui/tag.html.twig` | **HOLD** — spinner has no DS equivalent; add TODO comment |
+
+#### Group C: Callers of `tag.html.twig` — all HOLD (depend on B1)
+
+| # | Package | File | Line | `is_deletable` | Spinner? | Data attrs | Blocker |
+|---|---------|------|------|----------------|----------|-----------|---------|
+| C1 | admin-ui | `content_type/relation_list_form_fields.html.twig` | 32 | true (default) | no | none | `data-template` HTML string injection |
+| C2 | admin-ui | `content_type/relation_list_form_fields.html.twig` | 47 | true (default) | no | none | Removable, depends on B1 |
+| C3 | admin-ui | `content_type/relation_form_fields.html.twig` | 32 | true (default) | no | none | `data-template` HTML string injection |
+| C4 | admin-ui | `content_type/relation_form_fields.html.twig` | 47 | true (default) | no | none | Removable, depends on B1 |
+| C5 | admin-ui | `user/role_assignment/create_tag_list_item.html.twig` | 2 | true (default) | no | `data-content-id` | Removable, JS-driven |
+| C6 | admin-ui | `limitation/udw_limitation_value_list_item.html.twig` | 2 | true (default) | yes | `data-location-id` | Removable + spinner; depends on B1 |
+| C7 | personalization | `scenarios/form_fields/preview.html.twig` | 52, 84, 116 | true (default) | no | `data-input-id` | Removable, JS-driven (scenarios.preview.js) |
+| C8 | personalization | `parts/category_path_select_tag.html.twig` | 1–8 | true (default) | no | `data-value` | Removable, JS-driven (category.path.select.js) |
+| C9 | segmentation | `segmentation/page_builder/block/config/segmentation_item.html.twig` | — | true (default) | no | none (data set by JS) | Used in `data-template`; JS injects and populates via `targeted.content.map.js` |
+
+#### Group D: Inline removable (no spinner) — migrate to `<twig:ibexa:chip>` (Phase 3)
+
+| # | Package | File | Line(s) | Data attrs | JS file(s) |
+|---|---------|------|---------|-----------|-----------|
+| D1 | workflow | `ibexa_workflow/apply_transition_widget.html.twig` | 48–54 | none on tag; JS writes to inner span | `workflow.transition.apply.widget.js` (line 14: `.ibexa-tag__remove-btn--remove-reviewer`) |
+| D2 | personalization | `personalization/models/form_fields.html.twig` | 31–41 | none on tag; `data-items-type` on button | `model.edit.editorial.js` (lines 37, 68: `.ibexa-tag__remove-btn`) |
+
+#### Group E: JS selector-only files (no own template — update when their template migrates)
+
+| # | Package | File | Selectors | Corresponding template |
+|---|---------|------|-----------|------------------------|
+| E1 | admin-ui | `js/scripts/admin.limitation.pick.js` | `.ibexa-tag`, `__content`, `__spinner`, `__remove-btn` | B1 (`tag.html.twig`) |
+| E2 | admin-ui | `js/scripts/admin.search.filters.js` | `.ibexa-tag`, `__remove-btn--${tagType}` | B1 / `search_tag.html.twig` |
+| E3 | admin-ui | `js/scripts/admin.contenttype.relation.default.location.js` | `__remove-btn` | C3/C4 |
+| E4 | admin-ui | `js/scripts/udw/select.location.js` | `__content`, `__spinner`, `__remove-btn` | B1 |
+| E5 | workflow | `js/workflow.transition.apply.widget.js` | `__remove-btn--remove-reviewer` | D1 |
+| E6 | personalization | `js/model.edit.editorial.js` | `__remove-btn` | D2 |
+| E7 | personalization | `js/scenarios.preview.js` | `__remove-btn` | C7 |
+| E8 | personalization | `js/core/category.path.select.js` | `.ibexa-tag`, `__remove-btn` | C8 |
+| E9 | segmentation | `js/widgets/targeted.content.map.js` | `.ibexa-tag`, `__content`, `__remove-btn` | C9 |
+| E10 | product-catalog | `js/filterConfig/base.filter.config.js` | `__remove-btn` | product-catalog filter tag template |
+| E11 | page-builder | `src/lib/Behat/Component/Blocks/TargetingBlock.php` | `__content` (Behat locator) | C9 (segmentation template) |
+
+#### Group F: React Tag component
+
+| # | Package | File | Usage |
+|---|---------|------|-------|
+| F1 | admin-ui | `ui-dev/modules/common/tag/tag.js` | Component definition — renders `ibexa-tag`, `ibexa-tag--deletable`, `__content`, `__remove-btn` |
+| F2 | admin-ui | `ui-dev/…/search/search.tags.js` | 3 removable tag usages (content-type, section, subtree) |
+| F3 | admin-ui | `ui-dev/…/common/taggify/taggify.js` | Used inside taggify (taggify is out of scope but shares this component) |
+
+#### Group G: SCSS context overrides (update when class changes)
+
+| # | Package | File | What |
+|---|---------|------|------|
+| G1 | admin-ui | `scss/_tag.scss` | Root `.ibexa-tag` block definition |
+| G2 | admin-ui | `scss/ui/modules/common/_taggify.scss` | `.ibexa-tag` margin override in taggify context |
+| G3 | product-catalog | `scss/_edit-catalog-list-filter-tag.scss` | `.ibexa-tag` override (white-space: nowrap) |
+| G4 | product-catalog | `scss/_edit-catalog-filter-preview.scss` | `.ibexa-tag` override (margin + padding) |
+
+---
+
+### `ibexa-badge` — All Files Across All Packages
+
+#### Group H: Standalone badges — migrate to `<twig:ibexa:tag>` when accessible modifier maps
+
+| # | Package | File | Line(s) | Modifiers | Migrate to | Phase |
+|---|---------|------|---------|-----------|-----------|-------|
+| H1 | admin-ui | `ui/page_title.html.twig` | 12 | dynamic via `tag_extra_classes` | DS tag with `tag_type` var | Phase 5 (cross-package) |
+| H2 | connector-ai | `connector_ai/action_configuration/ui/status_badge.html.twig` | 3, 6, 10 | `--status`, `--success`, `--danger` | `success-ghost` / `error-ghost` | Phase 4 |
+| H3 | corporate-account | `corporate_account/individual/list.html.twig` | 65, 69 | `--info`, `--secondary`, `--small` | `type="info"` / `type="neutral"` + `size="small"` | Phase 4 |
+| H4 | corporate-account | `corporate_account/company/list.html.twig` | 94, 98 | `--success`, `--secondary`, `--small` | `type="success"` / `type="neutral"` + `size="small"` | Phase 4 |
+| H5 | corporate-account | `corporate_account/application/list.html.twig` | 98 | `--{{ badge }}`, `--small` | dynamic `tag_type` from updated map | Phase 4 |
+| H6 | corporate-account | `corporate_account/common/members_table.html.twig` | 21, 25 | `--success`, `--secondary`, `--small` | `type="success"` / `type="neutral"` + `size="small"` | Phase 4 |
+| H7 | discounts | `discounts/status_badge.html.twig` | 10, 11, 12, 25 | `--success`, `--info`, `--warning` | `success` / `info` / `warning` | Phase 4 |
+| H8 | discounts | `discounts/tab/products_list.html.twig` | 20 | `--info`, `--small` | `type="info"` + `size="small"` | Phase 4 |
+| H9 | order-management | `order_management/component/status_badge.html.twig` | 4 | `--custom-colors` | **UNMAPPED — keep legacy** | Skip |
+| H10 | payment | `payment_method/status_badge.html.twig` | 3, 6, 10 | `--status`, `--success`, `--danger` | `success-ghost` / `error-ghost` | Phase 4 |
+| H11 | payment | `payment_method/view.html.twig` | 53, 57 | `--status`, `--danger`, `--success` | `success-ghost` / `error-ghost` (via `tag_type`) | Phase 5 (uses page_title) |
+| H12 | payment | `payment/view.html.twig` | 24 | `--custom-colors` | **UNMAPPED — keep legacy** | Skip |
+| H13 | payment | `payment/list.html.twig` | 76 | `--custom-colors` | **UNMAPPED — keep legacy** | Skip |
+| H14 | payment | `payment/order/summary.html.twig` | 23 | `--custom-colors` | **UNMAPPED — keep legacy** | Skip |
+| H15 | personalization | `personalization/models/list.html.twig` | 85, 87, 93 | `--success`, `--complementary`, `--{{ modifier }}` | `success`; `--complementary` **UNMAPPED**; dynamic map | Phase 4 |
+| H16 | personalization | `personalization/models/edit.html.twig` | 99 | `--{{ modifier }}` | dynamic `tag_type` from updated map | Phase 4 |
+| H17 | product-catalog | `product_catalog/catalog_macros.html.twig` | 3, 4, 11 | `--success`, `--warning` | `success` / `warning` | Phase 4 |
+| H18 | product-catalog | `product_catalog/product_macros.html.twig` | 6, 14 | `--status`, `--success` | `success-ghost` / `neutral-ghost` | Phase 4 |
+| H19 | product-catalog | `product_catalog/product/tab/variants.html.twig` | 93, 97 | `--danger`, `--success` | `error` / `success` | Phase 4 |
+| H20 | product-catalog | `product_catalog/product/assets_collection.html.twig` | 38 | (none) | `type="neutral"` | Phase 4 |
+| H21 | product-catalog | `product_catalog/product/view.html.twig` | 61 | `--info` (via `tag_extra_classes`) | `tag_type: 'info'` | Phase 5 (uses page_title) |
+| H22 | scheduler | `ibexa_page_builder/page_builder/infobar/tables/versions.html.twig` | 8 | `--success` | `type="success"` | Phase 4 |
+| H23 | shipping | `shipping/shipping_method/status_badge.html.twig` | 3, 6, 10 | `--status`, `--success`, `--danger` | `success-ghost` / `error-ghost` | Phase 4 |
+| H24 | shipping | `shipping/shipping_method/view.html.twig` | 46, 50 | `--status`, `--danger`, `--success` | `success-ghost` / `error-ghost` (via `tag_type`) | Phase 5 (uses page_title) |
+| H25 | shipping | `shipment/view.html.twig` | 24 | `--custom-colors` | **UNMAPPED — keep legacy** | Skip |
+| H26 | shipping | `shipment/list.html.twig` | 78 | `--custom-colors` | **UNMAPPED — keep legacy** | Skip |
+| H27 | shipping | `shipment/order/summary.html.twig` | 23 | `--custom-colors` | **UNMAPPED — keep legacy** | Skip |
+| H28 | workflow | `ibexa_workflow/limitation/limitation_values.html.twig` | 3 | `--secondary` + inline style | `type="neutral"` + inline `style` kept as-is | Phase 4 |
+| H29 | workflow | `ibexa_workflow/admin/content_view/tab/versions/table.html.twig` | 22 | `--secondary` + inline style | `type="neutral"` + inline `style` kept as-is | Phase 4 |
+| H30 | workflow | `ibexa_workflow/admin/dashboard/table_workflow.html.twig` | 26 | `--secondary` + inline style | `type="neutral"` + inline `style` kept as-is | Phase 4 |
+
+> **Note on workflow badges (H28–H30):** These use `ibexa-badge--secondary` for shape/base styling but override the color via inline `style="background-color: {{ stage.color }}"`. After migration, the inline `style` must be kept and passed through as an attribute on the DS tag component.
+
+#### Group I: React badge usages — HOLD (no DS tag React component)
+
+| # | Package | File | Line(s) | Modifiers | Notes |
+|---|---------|------|---------|-----------|-------|
+| I1 | admin-ui | `ui-dev/…/table.view.item.component.js` | 283–285 | `--status`, `--success` | Visibility status badge; keep legacy + TODO comment |
+| I2 | product-catalog | `ui-dev/…/product.table.item.js` | 79 | `--info` | Product code; keep legacy + TODO comment |
+| I3 | product-catalog | `ui-dev/…/product.variant.table.item.js` | 124 | `--info` | Variant code; keep legacy + TODO comment |
+| I4 | product-catalog | `ui-dev/…/product.availability.status.js` | 21–22 | `--status`, `--success` | Availability status; keep legacy + TODO comment |
+| I5 | product-catalog | `ui-dev/…/product.table.item.js` (PDW) | 108 | `--info` | Product code in discovery widget; keep legacy + TODO comment |
+| I6 | product-catalog | `ui-dev/…/selected.items.product.item.description.js` | 5 | `--info` | Selected product code; keep legacy + TODO comment |
+
+#### Group J: JS badge DOM manipulation (update when template migrates)
+
+| # | Package | File | Line(s) | What |
+|---|---------|------|---------|------|
+| J1 | product-catalog | `js/catalog.edit.js` | 223–225 | Removes `.ibexa-badge--status:not(.ibexa-badge--success)` / `.ibexa-badge--status.ibexa-badge--success` nodes by CSS selector after injecting product row template |
+
+#### Group K: Behat PHP locators (update in same commit as template migration)
+
+| # | Package | File | Line | Selector |
+|---|---------|------|------|---------|
+| K1 | corporate-account | `Behat/Page/CompanyPage.php` | 95 | `.ibexa-badge` |
+| K2 | discounts | `Behat/Page/DiscountPage.php` | 88 | `.ibexa-badge` |
+| K3 | payment | `Behat/Page/PaymentMethodPage.php` | 91 | `.ibexa-badge` |
+| K4 | product-catalog | `Behat/Page/CatalogPage.php` | 110 | `.ibexa-badge` |
+| K5 | product-catalog | `Behat/Component/ProductAvailabilityTab.php` | 51–52 | `.ibexa-badge--status`, `ibexa-badge--success` |
+| K6 | shipping | `Behat/Page/ShippingMethodPage.php` | 84 | `.ibexa-badge` |
+| K7 | page-builder | `Behat/Component/Blocks/TargetingBlock.php` | 104 | `.ibexa-tag__content` |
+
+#### Group L: SCSS badge context overrides (update when class changes)
+
+| # | Package | File | What |
+|---|---------|------|------|
+| L1 | admin-ui | `scss/_badges.scss` | Root `.ibexa-badge` block definition |
+| L2 | admin-ui | `scss/_page-title.scss` | `.ibexa-badge` context override (margin + font) |
+| L3 | personalization | `scss/_model-edit.scss` | `.ibexa-badge` context override (margin + align) |
+
+---
+
+## Migration Order by Priority
+
+### Phase 1: Simple Non-removable Inline Tags in admin-ui (3 files) — LOW RISK
+
+No JS interaction. Pure template changes in admin-ui only.
+
+1. **`admin-ui`** `account/profile/view.html.twig` (A1)
+   - Role assignment loop tags → `<twig:ibexa:tag type="neutral">`
+   - No JS, no data attributes, no companion classes
+
+2. **`admin-ui`** `limitation/udw_limitation_value.html.twig` (A2)
+   - Only the inline `{% else %}` branch "location deleted" tag → `<twig:ibexa:tag type="neutral">`
+   - Do NOT touch the `include` calls (those go through `tag.html.twig`)
+
+3. **`admin-ui`** `ui/field_type/preview/content_fields.html.twig` (A3, A4, A5 partial)
+   - Multi-select `<li>`: move companion class to `<li>`, DS tag inside
+   - Single-select: class injected via `attr|merge` — see Special Cases §5
+
+4. **`admin-ui`** `ui/search/criteria_tags.html.twig` (A5)
+   - Language filter inline tag only → `<twig:ibexa:tag type="neutral" class="ibexa-search-criteria-tags__tag">`
+   - Leave all `search_tag.html.twig` include calls as-is
+
+---
+
+### Phase 2: Standalone Badges in admin-ui — LOW RISK
+
+5. **`admin-ui`** `ui/tag.html.twig` (B1) — **TODO comment only, no migration**
+   - Add: `{# TODO: Migrate to <twig:ibexa:chip> when DS chip supports a loading/spinner state #}`
+
+---
+
+### Phase 3: Inline Removable Tags in Other Packages — MEDIUM RISK
+
+These are inline `ibexa-tag ibexa-tag--deletable` usages (no spinner) in non-admin-ui packages. Each requires a JS selector update in the same commit.
+
+6. **`workflow`** `apply_transition_widget.html.twig` (D1) + `workflow.transition.apply.widget.js` (E5)
+   - Tag → `<twig:ibexa:chip>`; JS: `.ibexa-tag__remove-btn--remove-reviewer` → `.ids-chip__delete`
+
+7. **`personalization`** `models/form_fields.html.twig` (D2) + `model.edit.editorial.js` (E6)
+   - Tag → `<twig:ibexa:chip>`; JS: `.ibexa-tag__remove-btn` → `.ids-chip__delete`
+   - Note: tag is a Symfony form widget (`_model_editorContentList_entry_widget` block) rendered also as `data-template` at line 19 — the template string will need updating too
+
+---
+
+### Phase 4: Standalone Badges in Other Packages — MEDIUM RISK
+
+All simple `ibexa-badge` standalone usages (not through `page_title.html.twig`). Each file is independent.
+
+**`connector-ai`** (1 file):
+8. `action_configuration/ui/status_badge.html.twig` (H2): `--status+--success/--danger` → `success-ghost` / `error-ghost`
+
+**`corporate-account`** (4 files + Behat):
+9. `individual/list.html.twig` (H3): `--info`/`--secondary`/`--small` → `type="info"`/`type="neutral"` + `size="small"`
+10. `company/list.html.twig` (H4): `--success`/`--secondary`/`--small` → `type="success"`/`type="neutral"` + `size="small"`
+11. `application/list.html.twig` (H5): dynamic `--{{ badge }}` → update `status_badge_map` values + `tag_type`
+12. `common/members_table.html.twig` (H6): same as H4
+    - **In same commit:** update `Behat/Page/CompanyPage.php` (K1)
+
+**`discounts`** (2 files + Behat):
+13. `status_badge.html.twig` (H7): `--success`/`--info`/`--warning` → `success`/`info`/`warning`
+14. `tab/products_list.html.twig` (H8): `--info`/`--small` → `type="info"` + `size="small"`
+    - **In same commit:** update `Behat/Page/DiscountPage.php` (K2)
+
+**`payment`** (1 file + Behat — standalone only; view.html.twig deferred to Phase 5):
+15. `payment_method/status_badge.html.twig` (H10): `--status+--success/--danger` → `success-ghost` / `error-ghost`
+    - **In same commit:** update `Behat/Page/PaymentMethodPage.php` (K3)
+
+**`personalization`** (2 files):
+16. `models/list.html.twig` (H15): `--success` → `success`; `--{{ modifier }}` → update `states_colors_map`; `--complementary` → **UNMAPPED, keep legacy + TODO**
+17. `models/edit.html.twig` (H16): `--{{ modifier }}` → update `states_colors_map`
+
+**`product-catalog`** (4 Twig files + Behat + JS):
+18. `catalog_macros.html.twig` (H17): `--success`/`--warning` → `success`/`warning`
+19. `product_macros.html.twig` (H18): `--status+--success` → `success-ghost`; neutral fallback → `neutral-ghost`
+20. `product/tab/variants.html.twig` (H19): `--danger`/`--success` → `error`/`success`
+21. `product/assets_collection.html.twig` (H20): bare `ibexa-badge` → `type="neutral"`
+    - **In same commit:** update `Behat/Page/CatalogPage.php` (K4), `Behat/Component/ProductAvailabilityTab.php` (K5), and `js/catalog.edit.js` (J1) selectors
+
+**`scheduler`** (1 file):
+22. `versions.html.twig` (H22): `--success` → `type="success"`
+
+**`shipping`** (1 file + Behat — standalone only; view.html.twig deferred to Phase 5):
+23. `shipping_method/status_badge.html.twig` (H23): `--status+--success/--danger` → `success-ghost` / `error-ghost`
+    - **In same commit:** update `Behat/Page/ShippingMethodPage.php` (K6)
+
+**`workflow`** (3 files):
+24. `limitation/limitation_values.html.twig` (H28): `--secondary` + inline style → `type="neutral"` + `style` attribute passthrough
+25. `admin/content_view/tab/versions/table.html.twig` (H29): same
+26. `admin/dashboard/table_workflow.html.twig` (H30): same
+
+---
+
+### Phase 5: `page_title.html.twig` Block + All Cross-Package Callers — HIGH RISK (Coordinated)
+
+This is a **cross-package coordinated change**. All files below must change in the same PR / release:
+
+**`admin-ui`** (the base template):
+27. `ui/page_title.html.twig` (H1): migrate `{% block tag %}` to `<twig:ibexa:tag :type="tag_type|default('neutral')">`
+
+**Callers (other packages) — update `tag_extra_classes` → `tag_type`:**
+
+| # | Package | File | Change |
+|---|---------|------|--------|
+| 28 | corporate-account | `company/details.html.twig` | `tag_extra_classes: 'ibexa-badge--success'` → `tag_type: 'success'` |
+| 29 | product-catalog | `product/view.html.twig` | `tag_extra_classes: 'ibexa-badge--info'` → `tag_type: 'info'` |
+| 30 | payment | `payment_method/view.html.twig` | `tag_extra_classes: badge_class` (was `'ibexa-badge--status ibexa-badge--danger/success'`) → `tag_type: 'error-ghost'`/`'success-ghost'`; also update local variable |
+| 31 | payment | `payment/view.html.twig` | `tag_extra_classes: 'ibexa-badge--custom-colors'` → **UNMAPPED; keep `tag_extra_classes` as custom class passthrough** |
+| 32 | shipping | `shipping_method/view.html.twig` | `tag_extra_classes: badge_class` (was `'ibexa-badge ibexa-badge--status ibexa-badge--...'`) → `tag_type: '...-ghost'`; strip `ibexa-badge` from class variable |
+| 33 | shipping | `shipment/view.html.twig` | `tag_extra_classes: 'ibexa-badge--custom-colors'` → **UNMAPPED; keep `tag_extra_classes` as custom class passthrough** |
+
+> **Note on unmapped callers (31, 33):** `payment/view.html.twig` and `shipping/shipment/view.html.twig` use `--custom-colors` which has no DS equivalent. After migrating `page_title.html.twig`, these two files will keep `tag_extra_classes` but it will be passed as a `class` prop on the DS tag rather than as the badge type — the custom-color CSS will still function as long as the SCSS context rule is updated from `.ibexa-badge` to `.ids-tag`.
+
+---
+
+### Phase 6: `search_tag.html.twig` + JS — BLOCKED (Needs DS Investigation)
+
+**Blocker:** The DS chip's internal delete button (`ids-chip__delete`) is rendered inside the component template as `<twig:ibexa:button>`. Verify whether arbitrary `data-*` attributes can be passed to it before proceeding.
+
+34. `ui/search_tag.html.twig` — blocked
+35. `js/scripts/admin.search.filters.js` — update in same commit as #34
+
+---
+
+### Phase 7: `tag.html.twig` Full Migration + All Callers — BLOCKED (Spinner)
+
+**Blocker:** DS chip needs spinner/loading state support.
+
+When unblocked, migrate in this order:
+36. `ui/tag.html.twig` (B1)
+37–42. All C-group callers (C1–C9) + corresponding JS files (E1–E4, E7–E10)
+43. React `Tag` component (F1) and its consumers (F2, F3) — needs DS chip React component
+
+---
+
+### Permanently Deferred (Unmapped)
+
+These items have no DS equivalent and should keep legacy CSS with TODO comments:
+
+- All `--custom-colors` usages: H9, H12, H13, H14, H25, H26, H27
+- All `--complementary` usages: H15 (partially)
+- React components I1–I6 (no DS tag React component yet)
+
+---
+
+## JavaScript Selector Updates
+
+### Selector Mapping
+
+| Legacy Selector | DS Selector | Component |
+|---|---|---|
+| `.ibexa-tag` | `.ids-chip` | Chip container |
+| `.ibexa-tag__content` | `.ids-chip__content` | Chip text content |
+| `.ibexa-tag__remove-btn` | `.ids-chip__delete` | Delete button |
+| `.ibexa-tag__spinner` | **No equivalent** | Spinner — not migrated |
+| `.ibexa-tag--deletable` | `.ids-chip` | No modifier needed |
+| `.ibexa-badge` | `.ids-tag` | Tag container |
+| `.ibexa-badge--success` | `.ids-tag--success` | (when querying by type) |
+| `.ibexa-badge--status` | `.ids-tag--success-ghost` / `.ids-tag--error-ghost` | Ghost type tags |
+
+### Phase 3 JS Updates (inline removable tags — do in same commit as template)
+
+**`workflow/workflow.transition.apply.widget.js`** (E5):
+```js
+❌ BEFORE (line 14):
+const removeReviewerButtons = doc.querySelectorAll('.ibexa-tag__remove-btn--remove-reviewer');
+
+✅ AFTER:
+// Note: DS chip has a single .ids-chip__delete; identity via closest() to parent
+const removeReviewerButtons = doc.querySelectorAll(
+    '.ibexa-workflow-apply-transition__selected-user .ids-chip__delete'
+);
+```
+
+**`personalization/model.edit.editorial.js`** (E6):
+```js
+❌ BEFORE (lines 37, 68):
+insertedTag.querySelector('.ibexa-tag__remove-btn').addEventListener(...)
+editorialModels.querySelectorAll('.ibexa-tag__remove-btn').forEach(...)
+
+✅ AFTER:
+insertedTag.querySelector('.ids-chip__delete').addEventListener(...)
+editorialModels.querySelectorAll('.ids-chip__delete').forEach(...)
+```
+
+### Phase 7 JS Updates (blocked — listed for reference)
+
+When `tag.html.twig` is migrated, update in the same commit:
+
+- `admin.limitation.pick.js`: `.ibexa-tag` → `.ids-chip`; `__content` → `.ids-chip__content`; `__remove-btn` → `.ids-chip__delete`; `__spinner` → no equivalent (handle separately)
+- `udw/select.location.js`: `__content`, `__spinner`, `__remove-btn` → DS equivalents
+- `admin.contenttype.relation.default.location.js`: `__remove-btn` → `.ids-chip__delete`
+- `personalization/scenarios.preview.js`: `__remove-btn` → `.ids-chip__delete`
+- `personalization/category.path.select.js`: `.ibexa-tag` → `.ids-chip`; `__remove-btn` → `.ids-chip__delete`
+- `segmentation/targeted.content.map.js`: `.ibexa-tag` → `.ids-chip`; `__content` → `.ids-chip__content`; `__remove-btn` → `.ids-chip__delete`
+- `product-catalog/base.filter.config.js`: `__remove-btn` → `.ids-chip__delete`
+
+### Phase 4 JS Updates (badges — product-catalog catalog.edit.js)
+
+**`product-catalog/catalog.edit.js`** (J1):
+```js
+❌ BEFORE (lines 223-225):
+container.querySelector('.ibexa-badge--status:not(.ibexa-badge--success)').remove();
+container.querySelector('.ibexa-badge--status.ibexa-badge--success').remove();
+
+✅ AFTER:
+container.querySelector('.ids-tag--neutral-ghost, .ids-tag--error-ghost').remove();
+container.querySelector('.ids-tag--success-ghost').remove();
+```
+
+---
+
+## Per-File Migration Checklist
+
+### Before Migration
+
+- [ ] Read the file fully to understand context
+- [ ] Determine if `ibexa-tag` is removable or non-removable
+- [ ] Map all `ibexa-badge` modifiers to DS tag `type`
+- [ ] List any JS files that target this template's `.ibexa-tag*` or `.ibexa-badge*` selectors
+- [ ] Check for companion CSS classes that must be preserved via `class` prop
+- [ ] Check for `data-*` attributes that need passthrough
+- [ ] Identify `{% for %}` loops producing multiple tags
+- [ ] Check for Behat PHP locators referencing these selectors
+- [ ] For cross-package changes: confirm all callers are included in the same PR
+
+### During Migration
+
+- [ ] Non-removable `ibexa-tag` → `<twig:ibexa:tag type="neutral">`
+- [ ] Removable inline `ibexa-tag` (no spinner) → `<twig:ibexa:chip>`
+- [ ] `ibexa-badge` → `<twig:ibexa:tag>` with mapped `type` prop
+- [ ] `ibexa-badge--status + --success` → `type="success-ghost"`
+- [ ] `ibexa-badge--status + --danger` → `type="error-ghost"`
+- [ ] `ibexa-badge--small` → `size="small"`
+- [ ] `ibexa-badge--danger` → `type="error"` (renamed)
+- [ ] `ibexa-badge--secondary` → `type="neutral"` (renamed)
+- [ ] Preserve companion classes via `class` prop
+- [ ] Preserve `data-*` attributes via Symfony UX attribute passthrough
+- [ ] Add TODO comment for unmapped modifiers (`--complementary`, `--custom-colors`)
+- [ ] Update JS selectors in same commit when removable tags are migrated
+- [ ] Update Behat PHP locators in same commit
+
+### After Migration
+
+- [ ] Lint: `php bin/console lint:twig src/bundle/Resources/views/themes/admin/[file]`
+- [ ] Clear cache: `rm -rf var/cache/dev && php bin/console cache:clear --no-warmup`
+- [ ] Visual check in browser
+- [ ] Tags/badges render correctly with correct colors
+- [ ] Remove button works (for chips)
+- [ ] JS interactions unbroken
+- [ ] Run: `composer test`
+
+### Commit Message Format
+
+```
+fix: Migrate [package]/[short-filename] ibexa-tag/ibexa-badge to design-system-twig
+
+- Replace [N] non-removable ibexa-tag with <twig:ibexa:tag>
+- Replace [N] ibexa-badge--[modifier] with <twig:ibexa:tag type="[type]">
+[- Replace [N] removable ibexa-tag with <twig:ibexa:chip>]
+[- Update .ibexa-tag__remove-btn selector in [js-file] to .ids-chip__delete]
+[- Update .ibexa-badge selector in [behat-file] to .ids-tag]
+[- Add TODO comment for [unmapped-modifier] — no DS equivalent yet]
+
+Refs: TAG_BADGE_MIGRATION_PLAN.md
+```
+
+---
+
+## Special Cases & Warnings
+
+### 1. `tag.html.twig` — Spinner State Blocks Full Migration
+
+**File:** `admin-ui/ui/tag.html.twig`
+
+The file has `is_loading_state` / `ibexa-tag__spinner` which toggle a spinner SVG. DS chip has no spinner support. **Keep as legacy.**
+
+Add TODO comment at top of file:
+```twig
+{# TODO: Migrate to <twig:ibexa:chip> when DS chip supports a loading/spinner state #}
+{# Legacy removable tag template — kept as-is per TAG_BADGE_MIGRATION_PLAN.md #}
+```
+
+---
+
+### 2. `search_tag.html.twig` — `data-target-selector` on Remove Button
+
+**File:** `admin-ui/ui/search_tag.html.twig`
+
+The remove button carries `data-target-selector="{{ target_selector }}"` — used by `admin.search.filters.js` to find and clear the associated form input. DS chip's delete button is rendered internally. Verify whether `data-*` attributes can be forwarded to it before migrating.
+
+---
+
+### 3. `page_title.html.twig` — Cross-Package Breaking Change
+
+Migrating `{% block tag %}` requires simultaneous updates to 6 templates in 4 other packages. The `tag_extra_classes` variable is preserved as a `class` prop passthrough for non-type purposes (e.g. `--custom-colors`). The `tag_type` variable is the new way to control the DS tag type.
+
+---
+
+### 4. `content_fields.html.twig` — Single-Select `attr|merge` Class Injection
+
+**File:** `admin-ui/ui/field_type/preview/content_fields.html.twig`, line 161
+
+```twig
+{% set attr = attr|merge({'class': (attr.class|default('') ~ ' ibexa-field-preview ibexa-field-preview--ibexa_selection-single ibexa-tag')|trim}) %}
+```
+
+This injects `ibexa-tag` into a dynamic attribute dict, then applies it to `{{ block('field_attributes') }}`. The DS tag is a standalone component (renders its own `<div>`), so it cannot receive `block('field_attributes')` attributes directly via `attr`. **Option:** Wrap the block content in a DS tag component and move the block attributes to a wrapper element. Needs careful testing.
+
+---
+
+### 5. `data-template` Pattern (Complex — Multiple Files)
+
+Several patterns pre-render `tag.html.twig` into a `data-template` attribute for JS injection:
+- `admin-ui/content_type/relation_list_form_fields.html.twig` (line 32)
+- `admin-ui/content_type/relation_form_fields.html.twig` (line 32)
+- `product-catalog/list_filter_tags.html.twig`
+- `segmentation/segmentation.html.twig` (via `segmentation_item.html.twig`)
+
+DS chip components require server-side Twig rendering and cannot be pre-rendered into a `data-template` string for client-side injection using simple string replacement. These are **blocked by the same spinner blocker as Phase 7** — they require both DS chip spinner support and a rethink of the JS injection pattern.
+
+---
+
+### 6. `personalization/models/form_fields.html.twig` — Symfony Form Widget Block
+
+The `ibexa-tag` at lines 31–41 is inside a Symfony form widget block (`_model_editorContentList_entry_widget`). The entire block renders as a string via `form_widget(form.vars.prototype)` and is stored in `data-template` at line 19. Migration to DS chip here requires the same approach rethink as Special Case §5.
+
+---
+
+### 7. `workflow` Badges with Inline Style Color Override
+
+**Files:** H28, H29, H30 in workflow package.
+
+These use `ibexa-badge--secondary` for the badge shape but override the color via `style="background-color: {{ stage.color }}"`. After migration to `<twig:ibexa:tag type="neutral">`, the inline `style` must be preserved:
+
+```twig
+✅ AFTER:
+<twig:ibexa:tag type="neutral" style="background-color: {{ stage.color }}">
+    {{ workflow_name }}: {{ stage_name }}
+</twig:ibexa:tag>
+```
+
+---
+
+### 9. `content_fields.html.twig` — Single-Select `attr|merge` Class Injection (Detailed Analysis)
+
+**File:** `admin-ui/ui/field_type/preview/content_fields.html.twig`, lines 161–167
+
+The single-select branch has an inverted nesting pattern that requires careful reading:
+
+```twig
+{% set attr = attr|merge({'class': (attr.class|default('') ~ ' ibexa-field-preview ibexa-field-preview--ibexa_selection-single ibexa-tag')|trim}) %}
+
+{% set field_value = options[field.value.selection|first]|escape %}
+
+<div class="ibexa-tag__content">
+    {{ block( 'simple_block_field' ) }}
+</div>
+```
+
+**What actually renders (tracing the block chain):**
+
+1. `attr|merge` adds `ibexa-tag` (plus preview classes) into the `attr` dict's `class`
+2. `block('simple_block_field')` is called — defined at line 485:
+   ```twig
+   {% block simple_block_field %}
+       <div {{ block( 'field_attributes' ) }}>{{ field_value|raw }}</div>
+   {% endblock %}
+   ```
+3. `block('field_attributes')` (line 502) iterates over `attr` and renders key/value pairs
+4. Result: `<div class="... ibexa-field-preview ibexa-field-preview--ibexa_selection-single ibexa-tag">value</div>`
+5. That `<div ibexa-tag>` is the **inner** div, wrapped by `<div class="ibexa-tag__content">`
+
+So the structure is **backwards from normal**: `ibexa-tag` is on the inner rendered div, `ibexa-tag__content` is on the outer literal div. This is a quirky but intentional rendering pattern.
+
+**Migration approach:**
+
+- Remove `ibexa-tag` from the `attr|merge` class string (keep the preview classes)
+- Remove the `<div class="ibexa-tag__content">` wrapper
+- Wrap `{{ block('simple_block_field') }}` in `<twig:ibexa:tag type="neutral">`
+- Result: `<twig:ibexa:tag type="neutral"><div class="ibexa-field-preview ...">value</div></twig:ibexa:tag>`
+
+```twig
+❌ BEFORE:
+{% set attr = attr|merge({'class': (attr.class|default('') ~ ' ibexa-field-preview ibexa-field-preview--ibexa_selection-single ibexa-tag')|trim}) %}
+
+{% set field_value = options[field.value.selection|first]|escape %}
+
+<div class="ibexa-tag__content">
+    {{ block( 'simple_block_field' ) }}
+</div>
+
+✅ AFTER:
+{% set attr = attr|merge({'class': (attr.class|default('') ~ ' ibexa-field-preview ibexa-field-preview--ibexa_selection-single')|trim}) %}
+
+{% set field_value = options[field.value.selection|first]|escape %}
+
+<twig:ibexa:tag type="neutral">
+    {{ block( 'simple_block_field' ) }}
+</twig:ibexa:tag>
+```
+
+---
+
+### 8. React Components — No DS Tag/Chip React Component Available
+
+All React usages (I1–I6, F1–F3) remain as legacy. There is currently no `@ids-components/components/Tag` or `@ids-components/components/Chip` React component exposed.
+
+Add TODO comments:
+```jsx
+{/* TODO: Migrate to DS tag/chip React component when available */}
+{/* Legacy ibexa-badge--status pattern — maps to DS success-ghost type */}
+```
+
+---
+
+## Style Guide Compliance
+
+### DO:
+
+- Use `type="neutral"` as the default when no color modifier is present
+- Map `--danger` → `type="error"` and `--secondary` → `type="neutral"`
+- Map `--small` → `size="small"`
+- Pass companion classes via `class` prop
+- Pass `data-*` attributes directly on the component (Symfony UX auto-collects them)
+- Use `:isDeletable="false"` to make a chip non-removable
+- Use `type="success-ghost"` / `type="error-ghost"` for status dot indicators
+- Add TODO comments for unmapped patterns
+- Update JS selectors and Behat locators in the same commit as the template
+
+### DON'T:
+
+- Use `<twig:ibexa:badge>` for colored text pills (DS badge is a number counter)
+- Migrate `tag.html.twig` itself (spinner state not supported)
+- Migrate `ibexa-taggify` or `ibexa-tag-view-select` (out of scope)
+- Forget to update JS selectors in the same commit when migrating removable tags
+- Use `<twig:ibexa:chip>` for non-removable display labels (use `<twig:ibexa:tag>` instead)
+- Migrate `--custom-colors` usages (no DS equivalent)
+- Change `page_title.html.twig` without updating all 6 downstream callers simultaneously
+
+---
+
+## Validation Commands
+
+```bash
+# Lint Twig syntax
+php bin/console lint:twig src/bundle/Resources/views/themes/admin/[path-to-file]
+
+# Run all PHP tests
+composer test
+
+# Code style check
+composer check-cs
+
+# Static analysis
+composer phpstan
+
+# Frontend checks
+yarn test
+
+# Track migration progress — remaining ibexa-tag in admin-ui
+grep -r "ibexa-tag" src/bundle/Resources/views/ --include="*.twig" | grep -v "taggify\|tag-view-select"
+grep -r "ibexa-tag" src/bundle/ui-dev/ --include="*.js" | grep -v "taggify\|tag-view-select"
+
+# Track migration progress — remaining ibexa-badge in admin-ui
+grep -r "ibexa-badge" src/bundle/Resources/views/ --include="*.twig"
+grep -r "ibexa-badge" src/bundle/ui-dev/ --include="*.js"
+
+# Cross-package — remaining ibexa-badge across all packages
+grep -r "ibexa-badge" vendor/ibexa/ --include="*.twig" | grep -v "admin-ui"
+```
+
+---
+
+## Testing Strategy
+
+### Required Testing Approach
+
+**1. Twig Syntax Validation**
+```bash
+php bin/console lint:twig vendor/ibexa/[package]/src/bundle/Resources/views/[file].html.twig
+```
+
+**2. Manual Browser Testing — REQUIRED**
+```bash
+rm -rf var/cache/dev && php bin/console cache:clear --no-warmup
+```
+
+For each migrated file verify:
+- Tags/badges render with correct visual appearance
+- Color variants match the original (info = blue, success = green, error = red, etc.)
+- Ghost types show the colored dot indicator (for `--status` pattern)
+- Non-removable tags have NO delete button
+- Removable chips show the ✕ delete button and clicking works
+- JS interactions unbroken (removal, state management)
+- Companion CSS classes still apply (layout/spacing context)
+- `data-*` attributes present in DOM
+- Behat tests pass (run before and after)
+
+**3. Check Application Logs**
+```bash
+tail -50 var/log/dev.log | grep -i "exception\|error"
+```
+
+### Common Issues to Watch For
+
+**1. Type prop validation error**
+```
+Error: The option "type" with value "danger" is invalid.
+Cause: Used legacy color name. ibexa-badge--danger maps to type="error".
+Fix: See type mapping table.
+```
+
+**2. JS interaction broken after chip migration**
+```
+Problem: Clicking delete button does nothing.
+Cause: JS still queries .ibexa-tag__remove-btn but HTML now has .ids-chip__delete.
+Fix: Update JS selector in same commit as template.
+```
+
+**3. Wrong DS component used**
+```
+Problem: Tag renders with unexpected delete button, or chip without one.
+Fix: Removable → chip; non-removable → tag.
+```
+
+**4. Companion CSS classes lost**
+```
+Problem: Layout/spacing wrong in context.
+Fix: Pass context class via class prop.
+```
+
+**5. `<twig:ibexa:badge>` used accidentally**
+```
+Problem: Renders as a numeric counter instead of colored text pill.
+Fix: Replace with <twig:ibexa:tag type="...">.
+```
+
+---
+
+## Progress Tracking
+
+**Total items in scope:**
+- Phase 1: 4 admin-ui template changes — simple non-removable inline tags
+- Phase 2: 1 TODO comment
+- Phase 3: 2 packages (workflow, personalization) — inline removable tags + JS
+- Phase 4: 10 packages — standalone badges (Twig only, no cross-package dep)
+- Phase 5: 1 admin-ui template + 6 cross-package callers — coordinated
+- Phase 6: Blocked (DS investigation needed)
+- Phase 7: Blocked (DS spinner support needed)
+
+**Completed:** 0
+
+### Phase Completion
+
+- [ ] **Phase 1** — Simple non-removable inline tags in admin-ui (0/4)
+  - [ ] `account/profile/view.html.twig`
+  - [ ] `limitation/udw_limitation_value.html.twig` (inline tag only)
+  - [ ] `ui/field_type/preview/content_fields.html.twig`
+  - [ ] `ui/search/criteria_tags.html.twig` (language tag only)
+
+- [ ] **Phase 2** — TODO comment on `tag.html.twig` (0/1)
+  - [ ] `ui/tag.html.twig`
+
+- [ ] **Phase 3** — Inline removable tags in workflow + personalization (0/2 templates + 2 JS)
+  - [ ] `workflow/apply_transition_widget.html.twig` + `workflow.transition.apply.widget.js`
+  - [ ] `personalization/models/form_fields.html.twig` + `model.edit.editorial.js`
+
+- [ ] **Phase 4** — Standalone badges in other packages (0/26 items)
+  - [ ] connector-ai: `status_badge.html.twig`
+  - [ ] corporate-account: `individual/list.html.twig`, `company/list.html.twig`, `application/list.html.twig`, `members_table.html.twig` + Behat K1
+  - [ ] discounts: `status_badge.html.twig`, `products_list.html.twig` + Behat K2
+  - [ ] payment: `payment_method/status_badge.html.twig` + Behat K3
+  - [ ] personalization: `models/list.html.twig`, `models/edit.html.twig`
+  - [ ] product-catalog: `catalog_macros.html.twig`, `product_macros.html.twig`, `variants.html.twig`, `assets_collection.html.twig` + Behat K4+K5 + `catalog.edit.js` J1
+  - [ ] scheduler: `versions.html.twig`
+  - [ ] shipping: `shipping_method/status_badge.html.twig` + Behat K6
+  - [ ] workflow: `limitation_values.html.twig`, `versions/table.html.twig`, `table_workflow.html.twig`
+
+- [ ] **Phase 5** — `page_title.html.twig` cross-package coordinated (0/7 files)
+  - [ ] `admin-ui/ui/page_title.html.twig`
+  - [ ] `corporate-account/company/details.html.twig`
+  - [ ] `product-catalog/product/view.html.twig`
+  - [ ] `payment/payment_method/view.html.twig`
+  - [ ] `payment/payment/view.html.twig` (keep `--custom-colors` as class passthrough)
+  - [ ] `shipping/shipping_method/view.html.twig`
+  - [ ] `shipping/shipment/view.html.twig` (keep `--custom-colors` as class passthrough)
+
+- [ ] **Phase 6** — `search_tag.html.twig` + JS (BLOCKED — DS chip investigation needed)
+
+- [ ] **Phase 7** — `tag.html.twig` full migration + callers (BLOCKED — DS spinner support needed)
+
+---
+
+## Quick Reference
+
+### Component Selection Rule
+
+```
+Has a remove button?
+  YES, no spinner → <twig:ibexa:chip>
+  YES, has spinner → HOLD (tag.html.twig blocker)
+  NO  → <twig:ibexa:tag>
+
+ibexa-badge is always non-removable → always <twig:ibexa:tag>
+```
+
+### Type Quick Map
+
+```
+ibexa-tag (no color)           → type="neutral"
+ibexa-badge (no color)         → type="neutral"
+ibexa-badge--primary           → type="primary"
+ibexa-badge--info              → type="info"
+ibexa-badge--warning           → type="warning"
+ibexa-badge--success           → type="success"
+ibexa-badge--danger            → type="error"         ← renamed
+ibexa-badge--secondary         → type="neutral"       ← renamed
+ibexa-badge--small             → size="small"
+ibexa-badge--status + success  → type="success-ghost"
+ibexa-badge--status + danger   → type="error-ghost"
+ibexa-badge--status (no color) → type="neutral-ghost"
+ibexa-badge--complementary     → UNMAPPED (TODO comment)
+ibexa-badge--custom-colors     → UNMAPPED (TODO comment)
+```
+
+---
+
+**Plan Status**: In Progress
+**Plan Version**: 2.1
+**Date**: March 10, 2026
+**Next Step**: Phase 1 — 4 simple non-removable inline tag files in admin-ui
+
+---
+
+## Execution Decisions (Session March 10, 2026)
+
+### Git Strategy
+
+- **Tags branch:** `IBX-11416-tag-ds` — all `<twig:ibexa:tag>` migrations (Phases 1, 2, 4, 5)
+- **Chips branch:** `IBX-11417-chip-ds` — all `<twig:ibexa:chip>` migrations (Phases 3, 6, 7)
+- **Commit granularity:** one commit per file (finest granularity — easiest to revert)
+- **Scope in progress:** Phase 1 complete on `IBX-11416-tag-ds`
+
+### Phase 1 Commit Order
+
+| # | File | Commit description |
+|---|------|--------------------|
+| 1 | `account/profile/view.html.twig` | Role assignment loop: `ibexa-tag` → `<twig:ibexa:tag type="neutral">` |
+| 2 | `limitation/udw_limitation_value.html.twig` | `{% else %}` branch inline tag only → `<twig:ibexa:tag type="neutral">` |
+| 3 | `ui/field_type/preview/content_fields.html.twig` | Multi-select `<li>` class restructure + single-select `attr|merge` rework |
+| 4 | `ui/search/criteria_tags.html.twig` | Language filter inline tag → `<twig:ibexa:tag type="neutral" class="...">` |
diff --git a/BUTTON_MIGRATION_PLAN.md b/BUTTON_MIGRATION_PLAN.md
new file mode 100644
index 0000000000..94e478888e
--- /dev/null
+++ b/BUTTON_MIGRATION_PLAN.md
@@ -0,0 +1,897 @@
+# 📋 BUTTON MIGRATION PLAN: Legacy → design-system-twig Components
+
+**Package**: `ibexa/admin-ui`  
+**Date Created**: February 16, 2026  
+**Status**: Ready for Review  
+
+---
+
+## ⚠️ CRITICAL ISSUES - READ FIRST
+
+### Issue 1: No `attr` Prop - Pass Attributes Directly
+
+**DO NOT use `attr` prop** - it doesn't exist in Symfony UX Twig Components!
+
+#### ❌ WRONG (Runtime Error)
+```twig
+<twig:ibexa:button attr="{{ { 'data-foo': 'bar', class: 'my-class' } }}">
+```
+
+#### ✅ CORRECT
+```twig
+<!-- Pass attributes directly -->
+<twig:ibexa:button data-foo="bar" class="my-class">
+
+<!-- Dynamic values use : prefix (no {{ }} wrapper) -->
+<twig:ibexa:button :data-id="item.id" :disabled="isDisabled">
+```
+
+**Why?** Symfony UX Twig Component system automatically collects unrecognized attributes into the `attributes` object. Pass them directly as component props.
+
+---
+
+### Issue 2: No "ghost" Type - Use "tertiary" Instead
+
+**DO NOT use `type="ghost"`** - it's not supported in design-system-twig!
+
+#### ❌ WRONG (Runtime Error)
+```twig
+<twig:ibexa:button type="ghost">
+<twig:ibexa:link variant="button" type="ghost">
+```
+
+**Error:** `The option "type" with value "ghost" is invalid. Accepted values are: "primary", "secondary", "tertiary", "secondary-alt", "tertiary-alt".`
+
+#### ✅ CORRECT
+```twig
+<twig:ibexa:button type="tertiary">
+<twig:ibexa:link variant="button" type="tertiary">
+```
+
+**Mapping:** Legacy `ibexa-btn--ghost` → `type="tertiary"` in design-system-twig
+
+---
+
+### Issue 3: Icon Names Have Changed
+
+**CRITICAL:** Most legacy icon names have changed in design-system-twig!
+
+#### ❌ WRONG (Icon Won't Display)
+```twig
+<twig:ibexa:button icon="create">
+<twig:ibexa:button icon="back">
+<twig:ibexa:button icon="checkmark">
+```
+
+#### ✅ CORRECT
+```twig
+<twig:ibexa:button icon="add">
+<twig:ibexa:button icon="arrow-left">
+<twig:ibexa:button icon="form-check">
+```
+
+**Impact:** 75% of legacy icon names have changed. Using wrong names causes icons to not display.
+
+#### Top 15 Critical Icon Name Changes (by usage frequency)
+
+| Legacy Name | New Name | Files Affected | Priority |
+|-------------|----------|----------------|----------|
+| `create` | `add` | 15 files | 🔴 CRITICAL |
+| `system-information` | `info-circle` | 7 files | 🔴 HIGH |
+| `open-newtab` | `open-new-window` | 6 files | 🔴 HIGH |
+| `notice` | `alert-error` | 6 files | 🔴 HIGH |
+| `options` | `more` | 5 files | 🔴 HIGH |
+| `back` | `arrow-left` | 5 files | ⚠️ MEDIUM |
+| `caret-down` | `arrow-caret-down` | 4 files | ⚠️ MEDIUM |
+| `warning-triangle` | `alert-warning` | 3 files | ⚠️ MEDIUM |
+| `warning` | `alert-warning` | 3 files | ⚠️ MEDIUM |
+| `checkmark` | `form-check` | 3 files | ⚠️ MEDIUM |
+| `date` | `calendar` | 2 files | ⚠️ LOW |
+| `mail-open` | `message-email-read` | 2 files | ⚠️ LOW |
+| `view` | `visibility` | 1 file | ⚠️ LOW |
+| `assign-section` | `assign` | 1 file | ⚠️ LOW |
+| `author` | `user-editor` | 1 file | ⚠️ LOW |
+
+#### Quick Reference - Common Icon Mappings
+
+**Direct Matches (No Change):**
+```
+trash, edit, discard, search, copy, assign-user, download, 
+file, lock, bell, filters, drag, arrow-caret-right
+```
+
+**Must Change:**
+```
+create → add
+back → arrow-left
+checkmark → form-check
+bookmark → bookmark-outline
+bookmark-active → bookmark-filled
+system-information → info-circle
+notice → alert-error
+options → more
+view → visibility
+warning → alert-warning
+warning-triangle → alert-warning
+hide → visibility-hidden
+menu → menu-hamburger
+date → calendar
+mail → message-email
+mail-open → message-email-read
+assign-section → assign
+author → user-editor
+restore → archived-restore
+focus → focus-centered or focus-target
+```
+
+#### How to Verify Icon Names
+
+Search the design system sprite file:
+```bash
+grep 'id="your-icon-name"' public/bundles/ibexaadminuiassets/vendors/ids-assets/dist/img/all-icons.svg
+```
+
+---
+
+## Table of Contents
+
+1. [Overview](#overview)
+2. [Migration Statistics](#migration-statistics)
+3. [Icon Name Mapping](#icon-name-mapping)
+4. [Migration Patterns](#migration-patterns)
+5. [Type Mapping Reference](#type-mapping-reference)
+6. [Migration Order by Priority](#migration-order-by-priority)
+7. [Per-File Migration Checklist](#per-file-migration-checklist)
+8. [Special Cases & Warnings](#special-cases--warnings)
+9. [Style Guide Compliance](#style-guide-compliance)
+10. [Example Commit History](#example-commit-history)
+11. [Validation Commands](#validation-commands)
+12. [Testing Strategy](#testing-strategy)
+13. [Progress Tracking](#progress-tracking)
+
+---
+
+## Overview
+
+### Goals
+
+1. **Replace legacy button patterns** with `<twig:ibexa:button>` and `<twig:ibexa:link>`
+2. **Maintain 100% visual and functional parity**
+3. **Document unmapped patterns** with comments for future work
+4. **Create clean commit history** for easy review/rollback
+5. **Follow Ibexa Twig style guide** throughout
+
+### Approach
+
+- **One file at a time** with individual commits
+- **Manual functional testing** per file
+- **Git workflow**: LOCAL CHANGES ONLY (no automatic pushes)
+- **Comment unmapped variants** rather than forcing incorrect mappings
+
+---
+
+## Migration Statistics
+
+### Files Overview
+
+- **Total Files with Buttons**: 100
+- **Total Button Instances**: ~200
+  - 134 `<button>` elements (true buttons)
+  - 42 `<a>` links styled as buttons
+  - 24 `<twig:ibexa:button>` components (already migrated)
+
+### Button Types Distribution
+
+- **Primary**: 35 files
+- **Secondary**: 31 files
+- **Tertiary**: 16 files
+- **Ghost**: 58 files (most common)
+- **Info**: 5 files
+
+### Icon Usage
+
+- **Files with Icons**: 72 files (72%)
+- **Unique Icon Types**: 57
+- **Most Common Icons**: trash (24 files), create (16), edit (14), discard (12)
+
+### Complexity Breakdown
+
+- **Simple Files**: 26 (26%)
+- **Form-Related**: 8 (8%)
+- **Dynamic/Interactive**: 25 (25%)
+- **Modal Dialogs**: 40 (40%)
+- **Split Button**: 1 (1%)
+
+---
+
+## Icon Name Mapping
+
+### Complete Icon Inventory
+
+All icons use the same name in design-system-twig - just remove `ibexa_icon_path()` wrapper:
+
+```twig
+❌ Legacy: ibexa_icon_path('edit')
+✅ New: icon="edit"
+```
+
+### Available Icons (Design System - Commonly Used)
+
+**⚠️ IMPORTANT:** This list shows NEW design-system-twig icon names. Many differ from legacy!
+
+**Direct matches from legacy (use as-is):**
+- trash, edit, discard, search, copy, assign-user, download, file, lock, bell, filters, drag
+
+**Changed names (see "Icon Name Changes" section above):**
+- add (was: create), arrow-left (was: back), form-check (was: checkmark)
+- bookmark-outline (was: bookmark), bookmark-filled (was: bookmark-active)
+- info-circle (was: system-information), alert-error (was: notice)
+- more (was: options), visibility (was: view), alert-warning (was: warning)
+- assign (was: assign-section), user-editor (was: author)
+- arrow-caret-down (was: caret-down), calendar (was: date)
+- message-email (was: mail), message-email-read (was: mail-open)
+- visibility-hidden (was: hide), menu-hamburger (was: menu)
+
+**Complete icon list:** 588+ icons available in `/bundles/ibexaadminuiassets/vendors/ids-assets/dist/img/all-icons.svg`
+
+### Autosave Icon Set
+
+- autosave-error, autosave-off, autosave-on, autosave-saved, autosave-saving
+
+### Dynamic Icons (from variables)
+
+```twig
+❌ Legacy: ibexa_icon_path(action.extras.icon)
+✅ New: icon="{{ action.extras.icon }}"
+```
+
+---
+
+## Migration Patterns
+
+### Pattern 1: Simple Button (Primary/Secondary/Tertiary)
+
+```twig
+❌ BEFORE:
+<button type="submit" class="btn ibexa-btn ibexa-btn--primary">
+    <svg class="ibexa-icon ibexa-icon--small-medium">
+        <use xlink:href="{{ ibexa_icon_path('checkmark') }}"></use>
+    </svg>
+    <span class="ibexa-btn__label">{{ 'button.save'|trans|desc('Save') }}</span>
+</button>
+
+✅ AFTER:
+<twig:ibexa:button
+    type="primary"
+    html_type="submit"
+    icon="form-check"
+    icon_size="small-medium"
+>
+    {{ 'button.save'|trans|desc('Save') }}
+</twig:ibexa:button>
+```
+
+**Note:** Icon name changed from legacy `checkmark` to `form-check` in design-system-twig.
+
+### Pattern 2: Icon-Only Button (Ghost/No-Text)
+
+```twig
+❌ BEFORE:
+<button type="button" class="btn ibexa-btn ibexa-btn--ghost ibexa-btn--no-text">
+    <svg class="ibexa-icon ibexa-icon--tiny-small">
+        <use xlink:href="{{ ibexa_icon_path('discard') }}"></use>
+    </svg>
+</button>
+
+✅ AFTER:
+<twig:ibexa:button
+    type="tertiary"
+    html_type="button"
+    icon="discard"
+    icon_size="tiny-small"
+/>
+```
+
+**Note**: `ibexa-btn--ghost` usually maps to `type="tertiary"` in design-system-twig.
+
+### Pattern 3: Link Styled as Button
+
+```twig
+❌ BEFORE:
+<a href="{{ path('ibexa.user.profile.edit') }}" class="btn ibexa-btn ibexa-btn--ghost ibexa-btn--small">
+    <svg class="ibexa-icon ibexa-icon--tiny-small">
+        <use xlink:href="{{ ibexa_icon_path('edit') }}"></use>
+    </svg>
+    <span class="ibexa-btn__label">{{ 'profile.view.edit'|trans|desc('Edit') }}</span>
+</a>
+
+✅ AFTER:
+<twig:ibexa:link
+    href="{{ path('ibexa.user.profile.edit') }}"
+    variant="button"
+    type="tertiary"
+    size="small"
+    icon="edit"
+    icon_size="tiny-small"
+>
+    {{ 'profile.view.edit'|trans|desc('Edit') }}
+</twig:ibexa:link>
+```
+
+### Pattern 4: Button with Data Attributes
+
+```twig
+❌ BEFORE:
+<button
+    type="button"
+    class="btn ibexa-btn ibexa-btn--primary ibexa-btn--content-edit"
+    data-content-id="{{ contentId }}"
+    data-language-code="{{ languageCode }}"
+>
+    {{ 'button.edit'|trans|desc('Edit') }}
+</button>
+
+✅ AFTER:
+<twig:ibexa:button
+    type="primary"
+    html_type="button"
+    class="ibexa-btn--content-edit"
+    :attributes="{
+        'data-content-id': contentId,
+        'data-language-code': languageCode,
+    }"
+>
+    {{ 'button.edit'|trans|desc('Edit') }}
+</twig:ibexa:button>
+```
+
+### Pattern 5: Disabled Button
+
+```twig
+❌ BEFORE:
+<button type="submit" class="btn ibexa-btn ibexa-btn--primary" disabled>
+    {{ 'button.save'|trans|desc('Save') }}
+</button>
+
+✅ AFTER:
+<twig:ibexa:button
+    type="primary"
+    html_type="submit"
+    :disabled="true"
+>
+    {{ 'button.save'|trans|desc('Save') }}
+</twig:ibexa:button>
+```
+
+### Pattern 6: Button with Additional Classes
+
+```twig
+❌ BEFORE:
+<button type="button" class="btn ibexa-btn ibexa-btn--secondary custom-class another-class">
+    {{ 'button.action'|trans|desc('Action') }}
+</button>
+
+✅ AFTER:
+<twig:ibexa:button
+    type="secondary"
+    html_type="button"
+    class="custom-class another-class"
+>
+    {{ 'button.action'|trans|desc('Action') }}
+</twig:ibexa:button>
+```
+
+### Pattern 7: Button with Title/Aria Attributes
+
+```twig
+❌ BEFORE:
+<button
+    type="button"
+    class="btn ibexa-btn ibexa-btn--primary"
+    title="{{ 'button.add.title'|trans|desc('Add new item') }}"
+    aria-label="{{ 'button.add.aria'|trans|desc('Add') }}"
+>
+    <svg class="ibexa-icon ibexa-icon--small">
+        <use xlink:href="{{ ibexa_icon_path('create') }}"></use>
+    </svg>
+</button>
+
+✅ AFTER:
+<twig:ibexa:button
+    type="primary"
+    html_type="button"
+    icon="create"
+    icon_size="small"
+    :attributes="{
+        title: 'button.add.title'|trans|desc('Add new item'),
+        'aria-label': 'button.add.aria'|trans|desc('Add'),
+    }"
+/>
+```
+
+### Pattern 8: Conditional Disabled State
+
+```twig
+❌ BEFORE:
+<button type="submit" class="btn ibexa-btn ibexa-btn--primary" {{ not can_save ? 'disabled' : '' }}>
+    {{ 'button.save'|trans|desc('Save') }}
+</button>
+
+✅ AFTER:
+<twig:ibexa:button
+    type="primary"
+    html_type="submit"
+    :disabled="{{ not can_save }}"
+>
+    {{ 'button.save'|trans|desc('Save') }}
+</twig:ibexa:button>
+```
+
+### Pattern 9: Unmapped Variant (KEEP AS LEGACY + COMMENT)
+
+```twig
+{# TODO: Migrate to design-system-twig when 'dark-selector' variant is available #}
+{# Legacy button pattern - design-system-twig does not support ibexa-btn--dark-selector variant #}
+<button type="button" class="btn ibexa-btn ibexa-btn--dark-selector ibexa-btn--selected">
+    <svg class="ibexa-icon ibexa-icon--small">
+        <use xlink:href="{{ ibexa_icon_path('view-desktop') }}"></use>
+    </svg>
+</button>
+```
+
+---
+
+## Type Mapping Reference
+
+### Button Type Mapping
+
+**⚠️ CRITICAL:** design-system-twig **ONLY** accepts these values:
+- `primary`, `secondary`, `tertiary`, `secondary-alt`, `tertiary-alt`
+
+Any other value will cause runtime error!
+
+| Legacy Class | design-system-twig | Notes |
+|---|---|---|
+| `ibexa-btn--primary` | `type="primary"` | ✅ Direct mapping |
+| `ibexa-btn--secondary` | `type="secondary"` | ✅ Direct mapping |
+| `ibexa-btn--tertiary` | `type="tertiary"` | ✅ Direct mapping |
+| `ibexa-btn--ghost` | **`type="tertiary"`** | ✅ **VERIFIED: Use tertiary, NOT "ghost"!** |
+| `ibexa-btn--info` | `type="primary"` | ⚠️ May need new variant |
+| `ibexa-btn--dark` | **UNMAPPED** | ❌ Keep legacy + comment |
+| `ibexa-btn--dark-selector` | **UNMAPPED** | ❌ Keep legacy + comment |
+| `ibexa-btn--secondary-light` | **UNMAPPED** | ❌ Keep legacy + comment |
+| `ibexa-btn--selected` | `:attributes` | ⚠️ State class, pass via attributes |
+| `ibexa-btn--prevented` | `:disabled="true"` | ⚠️ Use disabled prop |
+
+### Size Mapping
+
+| Legacy Class | design-system-twig | Notes |
+|---|---|---|
+| `ibexa-btn--small` | `size="small"` | ✅ Direct mapping |
+| (no class) | `size="medium"` (default) | ✅ Default size |
+
+### Icon Size Mapping
+
+| Legacy Class | design-system-twig | Typical Button Size |
+|---|---|---|
+| `ibexa-icon--tiny-small` | `icon_size="tiny-small"` | Usually with `size="small"` |
+| `ibexa-icon--small` | `icon_size="small"` | Default button size |
+| `ibexa-icon--small-medium` | `icon_size="small-medium"` | Default button size |
+| `ibexa-icon--medium` | `icon_size="medium"` | Default button size |
+
+---
+
+## Migration Order by Priority
+
+### Phase 1: Simple Files (26 files) - HIGH PRIORITY ⭐
+
+**Start here** - Low risk, straightforward conversions
+
+#### 1.1 Simple Link-as-Button (11 files)
+
+1. `src/bundle/Resources/views/themes/admin/account/error/credentials_expired.html.twig`
+2. `src/bundle/Resources/views/themes/admin/account/profile/view.html.twig`
+3. `src/bundle/Resources/views/themes/admin/account/forgot_password/confirmation_page.html.twig`
+4. `src/bundle/Resources/views/themes/admin/content/modal/version_conflict.html.twig`
+5. `src/bundle/Resources/views/themes/admin/ui/component/table/table_header.html.twig`
+6. `src/bundle/Resources/views/themes/admin/ui/field_type/preview/content_fields.html.twig`
+7. `src/bundle/Resources/views/themes/admin/user/role/view.html.twig`
+8. `src/bundle/Resources/views/themes/admin/section/list.html.twig`
+9. `src/bundle/Resources/views/themes/admin/language/list.html.twig`
+10. `src/bundle/Resources/views/themes/admin/policy/list.html.twig`
+11. `src/bundle/Resources/views/themes/admin/object_state/group/list.html.twig`
+
+#### 1.2 Simple Button-Only (15 files)
+
+12. `src/bundle/Resources/views/themes/admin/ui/component/details/details.html.twig`
+13. `src/bundle/Resources/views/themes/admin/ui/field_type/edit/binary_base.html.twig`
+14. `src/bundle/Resources/views/themes/admin/ui/field_type/edit/ibexa_author.html.twig`
+15. `src/bundle/Resources/views/themes/admin/ui/field_type/edit/ibexa_image.html.twig`
+16. `src/bundle/Resources/views/themes/admin/ui/field_type/edit/ibexa_media.html.twig`
+17. `src/bundle/Resources/views/themes/admin/ui/field_type/edit/relation_base.html.twig`
+18. `src/bundle/Resources/views/themes/admin/content/tab/versions/tab.html.twig`
+19. `src/bundle/Resources/views/themes/admin/content/tab/translations/tab.html.twig`
+20. `src/bundle/Resources/views/themes/admin/content/tab/locations/tab.html.twig`
+21. `src/bundle/Resources/views/themes/admin/ui/component/input_text.html.twig`
+22. `src/bundle/Resources/views/themes/admin/ui/component/summary_tile/summary_tile.html.twig`
+23. `src/bundle/Resources/views/themes/admin/account/bookmarks/toggle_switch.html.twig`
+24. `src/bundle/Resources/views/themes/admin/content/modal/add_translation.html.twig`
+25. `src/bundle/Resources/views/themes/admin/content/modal/draft_conflict.html.twig`
+26. `src/bundle/Resources/views/themes/admin/content/modal/hide_confirmation.html.twig`
+
+### Phase 2: Form-Related (8 files) - MEDIUM PRIORITY ⚠️
+
+**Include form theme files** - Requires careful testing
+
+27. `src/bundle/Resources/views/themes/admin/ui/form_fields.html.twig` ⚠️ **CRITICAL: Form theme file**
+28. `src/bundle/Resources/views/themes/admin/account/forgot_password/index.html.twig`
+29. `src/bundle/Resources/views/themes/admin/ui/global_search.html.twig`
+30. `src/bundle/Resources/views/themes/admin/account/bookmarks/list.html.twig`
+31. `src/bundle/Resources/views/themes/admin/user/invitation/modal.html.twig`
+32. `src/bundle/Resources/views/themes/admin/content/widget/content_create.html.twig` (partially migrated)
+33. `src/bundle/Resources/views/themes/admin/content/widget/content_edit.html.twig` (partially migrated)
+34. `src/bundle/Resources/views/themes/admin/ui/search/filters.html.twig` (partially migrated)
+
+### Phase 3: Modal Dialogs (40 files) - MEDIUM-HIGH PRIORITY
+
+**Confirmation Modals** - Start with these (consistent pattern)
+
+35-49. Various confirmation modal files (`delete_confirmation.html.twig`, etc.)
+
+**Content Management Modals** - Then these (more complex)
+
+50-74. Various content/language/section/user modals
+
+### Phase 4: Complex Dynamic (24 files) - LOWER PRIORITY
+
+**High JS interaction, complex state management**
+
+75-98. Dynamic interaction files
+
+### Phase 5: Split Button (1 file) - KEEP AS-IS 📌
+
+99. `src/bundle/Resources/views/themes/admin/ui/component/split_btn/split_btn.html.twig` ⚠️ **Keep legacy per requirement**
+
+---
+
+## Per-File Migration Checklist
+
+### Before Migration
+
+- [ ] Read entire file to understand context
+- [ ] Identify all button/link instances (count them)
+- [ ] Note any special classes or data attributes
+- [ ] Check for dynamic icon names (variables)
+- [ ] Identify button type (primary/secondary/tertiary/ghost)
+- [ ] Note size modifiers (small/default)
+- [ ] Check for unmapped variants
+- [ ] Review surrounding code for dependencies
+
+### During Migration
+
+- [ ] Replace `<button>` with `<twig:ibexa:button>`
+- [ ] Replace button-styled `<a>` with `<twig:ibexa:link variant="button">`
+- [ ] Map type correctly (primary/secondary/tertiary)
+- [ ] Map size correctly (small/medium)
+- [ ] Convert icon: `ibexa_icon_path('name')` → `icon="name"`
+- [ ] Map icon size to button size appropriately
+- [ ] Preserve data attributes via `:attributes`
+- [ ] Preserve custom classes via `class` prop
+- [ ] Preserve translations with `|trans|desc()`
+- [ ] Add TODO comments for unmapped variants
+- [ ] Follow snake_case naming (variables, attributes)
+- [ ] Use property shorthand where applicable
+- [ ] Add trailing commas in attribute objects
+- [ ] Maintain proper 4-space indentation
+- [ ] Remove trailing whitespace
+
+### After Migration
+
+- [ ] Check Twig syntax: `php bin/console lint:twig src/bundle/Resources/views/[file-path]`
+- [ ] Manually test in browser (if possible)
+- [ ] Verify visual appearance matches original
+- [ ] Test button interactions (click, hover, disabled states)
+- [ ] Run PHPUnit tests: `composer test`
+- [ ] Run code style check: `composer check-cs` (if applicable)
+- [ ] Create commit with clear message
+
+### Commit Message Format
+
+```
+fix: Migrate [short-filename] to design-system-twig components
+
+- Replace [N] legacy <button> elements with <twig:ibexa:button>
+- Replace [N] button-styled links with <twig:ibexa:link variant="button">
+- Map button types: [primary/secondary/tertiary used in file]
+- Preserve all data attributes and functionality
+[- Add TODO comment for [unmapped-variant] - needs design system support]
+
+Refs: BUTTON_MIGRATION_PLAN.md
+```
+
+---
+
+## Special Cases & Warnings
+
+### 1. Form Theme File (`ui/form_fields.html.twig`) ⚠️ CRITICAL
+
+This file defines Symfony form widget blocks. Migration requires **careful testing**.
+
+**Approach**: Test each form widget block individually. May need to keep some legacy patterns for Symfony compatibility.
+
+### 2. Split Button Component ⚠️ KEEP AS-IS
+
+Keep as-is per requirement. Add explanatory comment:
+
+```twig
+{# Legacy split button component - kept as-is #}
+{# design-system-twig does not yet have a split button component #}
+{# TODO: Migrate when design-system-twig supports split buttons #}
+```
+
+### 3. Content Preview (`content/content_preview.html.twig`) ⚠️ UNMAPPED VARIANTS
+
+Has unmapped variants: `ibexa-btn--dark-selector`, `ibexa-btn--secondary-light`, `ibexa-btn--selected`
+
+**Approach**: Keep legacy + add TODO comments for each unmapped variant.
+
+---
+
+## Style Guide Compliance
+
+Follow **Ibexa Twig Style Guide**:
+
+### ✅ DO:
+
+- Use `snake_case` for all variables and attributes
+- Add trailing commas in multi-line objects
+- Use property shorthand: `user_id,` instead of `user_id: user_id,`
+- Keep `|trans|desc()` together in translations
+- Escape data attributes: `|e('html_attr')`
+- Use 4-space indentation
+- Remove trailing whitespace
+
+### ❌ DON'T:
+
+- Use `camelCase` for variables
+- Forget `|desc()` after `|trans`
+- Leave data attributes unescaped
+- Use 2-space indentation
+- Add trailing whitespace
+
+---
+
+## Example Commit History
+
+```bash
+git commit -m "fix: Migrate account/profile/view.html.twig to design-system-twig
+
+- Replace 1 edit link with <twig:ibexa:link variant=\"button\">
+- Map to tertiary type with small size
+- Add edit icon
+- Preserve all functionality
+
+Refs: BUTTON_MIGRATION_PLAN.md"
+```
+
+---
+
+## Validation Commands
+
+```bash
+# Lint Twig syntax (catches syntax errors only)
+php bin/console lint:twig src/bundle/Resources/views/themes/admin/[path-to-file]
+
+# Run all tests
+composer test
+
+# Code style check
+composer check-cs
+
+# Static analysis
+composer phpstan
+```
+
+**Note**: `lint:twig` only catches **syntax errors**, not runtime errors like incorrect prop types or non-existent props. Manual browser testing is required.
+
+---
+
+## Testing Strategy
+
+### ⚠️ Important: Behat Tests Are Unreliable
+
+**DO NOT rely on Behat tests** for validating button migrations. The test environment has pre-existing issues that mask template errors.
+
+### Required Testing Approach
+
+**1. Twig Syntax Validation** ✅
+```bash
+php bin/console lint:twig vendor/ibexa/admin-ui/src/bundle/Resources/views/themes/admin/[file].html.twig
+```
+- Catches: Syntax errors, unclosed tags, invalid Twig
+- Doesn't catch: Wrong prop types, runtime errors, non-existent props
+
+**2. Manual Browser Testing** ✅ **REQUIRED**
+```bash
+# Clear cache
+rm -rf var/cache/dev && php bin/console cache:clear --no-warmup
+
+# Navigate to page in browser and verify:
+# - Page loads without exception
+# - Buttons render correctly
+# - Buttons function correctly (clicks, modals, etc.)
+# - All data attributes present in DOM (inspect element)
+```
+
+**3. Check Application Logs**
+```bash
+tail -50 var/log/dev.log | grep -i "exception\|error"
+```
+
+### Testing Checklist Per File
+
+For each migrated file:
+
+- [ ] ✅ Twig syntax validates (`php bin/console lint:twig`)
+- [ ] ✅ Cache cleared
+- [ ] ✅ Page loads without exception (check logs)
+- [ ] ✅ Buttons render with correct styling
+- [ ] ✅ Buttons are clickable
+- [ ] ✅ Modal triggers work (if applicable)
+- [ ] ✅ Data attributes present in DOM (inspect)
+- [ ] ✅ Icons appear correctly
+- [ ] ✅ Disabled state works (if applicable)
+
+### Common Issues to Watch For
+
+**1. `attr` Prop Error** (Runtime)
+```
+Error: A "attr" prop was passed when creating the component...
+the value is not a scalar (it's a "array")
+```
+**Fix**: Pass attributes directly, not as `attr` prop.
+
+**2. `type="ghost"` Error** (Runtime)
+```
+Error: The option "type" with value "ghost" is invalid. 
+Accepted values are: "primary", "secondary", "tertiary", 
+"secondary-alt", "tertiary-alt".
+```
+**Fix**: Use `type="tertiary"` instead of `type="ghost"`.
+
+**3. Dynamic Attribute Syntax Error**
+```twig
+❌ WRONG: :data-id="{{ item.id }}"
+✅ CORRECT: :data-id="item.id"
+```
+**Rule**: Attributes with `:` prefix should NOT have `{{ }}` wrapper.
+
+**4. Boolean Attributes**
+```twig
+❌ WRONG: download="true"
+✅ CORRECT: download
+```
+
+**5. Wrong Icon Name** (Runtime - Icon Missing/Not Showing)
+```
+Problem: Icon doesn't appear in button even though icon prop is set.
+```
+
+**Cause:** Legacy icon name doesn't exist in new design system.
+
+**Fix:** Check "Icon Name Changes" section and use correct new name.
+
+**Examples:**
+```twig
+❌ WRONG: icon="create"
+✅ CORRECT: icon="add"
+
+❌ WRONG: icon="back"
+✅ CORRECT: icon="arrow-left"
+
+❌ WRONG: icon="checkmark"
+✅ CORRECT: icon="form-check"
+
+❌ WRONG: icon="system-information"
+✅ CORRECT: icon="info-circle"
+
+❌ WRONG: icon="notice"
+✅ CORRECT: icon="alert-error"
+```
+
+**How to verify icon exists:**
+```bash
+grep 'id="your-icon-name"' public/bundles/ibexaadminuiassets/vendors/ids-assets/dist/img/all-icons.svg
+```
+
+---
+
+## Progress Tracking
+
+**Total Files**: 100  
+**Completed**: 8 files  
+**Remaining**: 92 files
+
+### Completed Files (8/100)
+
+✅ **Phase 1 - Simple Files (5/26)**
+1. `account/error/credentials_expired.html.twig` - 1 link button (commit: f0a8b93b8)
+2. `account/profile/view.html.twig` - 1 edit link (commit: a39a94cdf)
+3. `account/forgot_password/confirmation_page.html.twig` - 2 link buttons (commit: 9e2cbd15e)
+4. `ui/component/details/details.html.twig` - 1 toggle button (commit: a740b26c1)
+5. `ui/field_type/edit/binary_base.html.twig` - 1 upload button (commit: 29c9acb47, c152dfef6)
+
+✅ **Phase 3 - Modal Dialogs (1/40)**
+6. `content/modal/version_conflict.html.twig` - 2 buttons (commits: bf1fb5a35, 00e019ed4 fix)
+
+✅ **Phase 1/2 - Mixed (2/26)**
+7. `ui/field_type/preview/content_fields.html.twig` - 1 download link (commits: 6aa331c8b, facfbfa0c fix)
+8. `section/list.html.twig` - 4 buttons (commits: d07ef6962, 110c3e3b3 fix)
+
+### Phase Completion
+
+- [ ] Phase 1: Simple Files (7/26 completed - 27%)
+- [ ] Phase 2: Form-Related (0/8 files)
+- [ ] Phase 3: Modal Dialogs (1/40 files - 2.5%)
+- [ ] Phase 4: Complex Dynamic (0/24 files)
+- [ ] Phase 5: Split Button (0/1 file - document only)
+
+### Known Issues Fixed
+
+- ✅ **`attr` prop error** - Fixed in 3 files (version_conflict, content_fields, section/list)
+- ✅ Attribute passing syntax corrected
+- ✅ Dynamic attribute binding (`:` prefix) syntax verified
+- ✅ **`type="ghost"` error** - Fixed in 2 files (4 instances total)
+  - `section/list.html.twig`: 3 buttons changed to `type="tertiary"`
+  - `content_fields.html.twig`: 1 button changed to `type="tertiary"`
+- ✅ **Icon name mismatches** - Fixed in 2 files (3 icon names corrected)
+  - `section/list.html.twig`: `create` → `add`, `assign-section` → `assign`
+  - `confirmation_page.html.twig`: `back` → `arrow-left`
+  - Documented 15+ critical icon name changes for future migrations
+
+---
+
+## Quick Reference
+
+### Button Type Quick Map
+
+```
+ibexa-btn--primary     → type="primary"
+ibexa-btn--secondary   → type="secondary"
+ibexa-btn--tertiary    → type="tertiary"
+ibexa-btn--ghost       → type="tertiary"
+```
+
+### Common Icon Names
+
+```
+Trash/Delete → icon="trash"
+Edit         → icon="edit"
+Create/Add   → icon="create"
+Close/Cancel → icon="discard"
+Back         → icon="back"
+```
+
+---
+
+## Summary
+
+This migration plan provides everything needed for systematic button migration:
+
+✅ Complete inventory (100 files)  
+✅ Icon mapping (57 icons)  
+✅ 9 migration patterns  
+✅ Type/size mapping reference  
+✅ Prioritized execution order  
+✅ Per-file checklist  
+✅ Style guide compliance  
+✅ Progress tracking  
+
+**Ready for Execution**: Follow file-by-file with individual commits.
+
+---
+
+**Plan Status**: ✅ Ready for Review  
+**Plan Version**: 1.0  
+**Date**: February 16, 2026  
+**Next Step**: Review plan → Execute Phase 1
diff --git a/CHECKBOX_MIGRATION_PLAN.md b/CHECKBOX_MIGRATION_PLAN.md
new file mode 100644
index 0000000000..569178c8cf
--- /dev/null
+++ b/CHECKBOX_MIGRATION_PLAN.md
@@ -0,0 +1,677 @@
+# CHECKBOX MIGRATION PLAN: Legacy Checkbox/Radio Patterns -> design-system Components
+
+**Scope**: Cross-repository rollout across `vendor/ibexa/*`  
+**Base Repository**: `ibexa/admin-ui`  
+**Ticket / Branch**: `IBX-11506-use-ds-checkbox-component`  
+**Date Created**: March 24, 2026  
+**Status**: Planning
+
+---
+
+## ⚠️ CRITICAL DIFFERENCES FROM BUTTON / LABEL MIGRATION
+
+### Difference 1: Checkboxes Are Coupled to Symfony Form Theme Rendering
+
+Checkbox migration is not a simple class swap.
+
+Primary foundation file:
+
+- `src/bundle/Resources/views/themes/admin/ui/form_fields.html.twig`
+
+Relevant blocks:
+
+- `checkbox_widget`
+- `checkbox_radio_label`
+
+These blocks inherit behavior from Symfony Bootstrap form themes, especially:
+
+- `vendor/symfony/twig-bridge/Resources/views/Form/bootstrap_5_layout.html.twig`
+- `vendor/symfony/twig-bridge/Resources/views/Form/form_div_layout.html.twig`
+
+**Impact:** legacy checkbox migration must preserve Symfony's widget/label pipeline unless we intentionally replace it.
+
+---
+
+### Difference 2: Strategy B Is Required for Form Theme Migration
+
+For Symfony form themes, use **Strategy B**:
+
+- keep the split widget/label rendering model
+- migrate `checkbox_widget` toward `<twig:ibexa:checkbox:input>`
+- keep `checkbox_radio_label` as a compatibility layer initially
+
+#### ✅ Recommended
+
+```twig
+{# form theme checkbox_widget target direction #}
+<twig:ibexa:checkbox:input
+    id="{{ id }}"
+    name="{{ full_name }}"
+    :checked="checked"
+    :disabled="disabled"
+    :required="required"
+    value="{{ value }}"
+    {{ block('widget_attributes') }}
+/>
+```
+
+#### ❌ Do Not Use as a Drop-In in `checkbox_radio_label`
+
+```twig
+{# wrong migration shape for form theme split rendering #}
+<twig:ibexa:checkbox:field ...>
+```
+
+**Why?** `<twig:ibexa:checkbox:field>` already renders both input and label, while Symfony's `checkbox_radio_label` expects to render the label around a pre-rendered widget.
+
+---
+
+### Difference 3: DS Checkbox JS Initialization Must Be Available
+
+Twig checkbox components rely on design-system initialization from:
+
+- `vendor/ibexa/design-system-twig/src/bundle/Resources/public/ts/init_components.ts`
+
+Relevant initializers:
+
+- `.ids-checkbox`
+- `.ids-checkboxes-list-field`
+
+**Impact:** pages migrated to DS checkbox components must load the design-system JS init path, especially for:
+
+- indeterminate checkboxes
+- checkbox list fields
+- custom DS checkbox events
+
+---
+
+### Difference 4: Toggle-Style Controls Are Out of Scope
+
+Do **not** mix toggle migration into this checkbox plan.
+
+Examples to treat separately:
+
+- controls already mapped to `toggle_widget`
+- controls that semantically behave like toggle buttons rather than plain checkboxes
+
+**Impact:** migrate only true checkbox semantics in this stream.
+
+---
+
+## Overview
+
+### Goals
+
+1. Replace legacy checkbox markup and styling with design-system checkbox components
+2. Preserve functional parity for forms, filters, tables, and bulk selection
+3. Use **Strategy B** for Symfony form theme checkboxes
+4. Use full DS field/list components in hand-written Twig and React where structure is controlled
+5. Update JS, SCSS, and test selectors in the same commit as markup changes
+6. Roll out the migration consistently across all affected `vendor/ibexa/*` repositories
+
+### Non-Goals
+
+1. Do not migrate toggle-button controls in this stream
+2. Do not run radio migration as part of this plan, except where radio and checkbox rules must be documented together
+3. Do not push or create PRs automatically
+
+---
+
+## Git Workflow
+
+### Required Branch Naming
+
+For every affected `vendor/ibexa/*` repository, create and use:
+
+`IBX-11506-use-ds-checkbox-component`
+
+### Branch Creation Rule
+
+- create the branch from that repository's `main` branch
+- do not branch from another feature branch
+- keep all checkbox migration commits local on this branch
+- do not push automatically
+
+### Commit Scope Rule
+
+- keep commits repository-local
+- create one commit per changed file
+- do not batch multiple file migrations into a single commit, even within the same repository
+- migrate markup + JS + SCSS + tests together where selectors are coupled
+
+---
+
+## Target APIs
+
+### Twig
+
+Use the public checkbox component APIs from `ibexa/design-system-twig`:
+
+- `<twig:ibexa:checkbox:input>`
+- `<twig:ibexa:checkbox:field>`
+- `<twig:ibexa:checkbox:list_field>`
+
+Preferred syntax rule:
+
+- use Twig component tag syntax directly: `<twig:ibexa:checkbox:input ... />`
+- prefer `<twig:...>` over `{{ component('ibexa:checkbox:input', ...) }}` for this migration stream
+- only use the `component()` function when tag syntax is genuinely awkward or impossible in a specific template context
+
+Reference files:
+
+- `vendor/ibexa/design-system-twig/src/bundle/Resources/views/themes/standard/design_system/components/checkbox/input.html.twig`
+- `vendor/ibexa/design-system-twig/src/bundle/Resources/views/themes/standard/design_system/components/checkbox/field.html.twig`
+- `vendor/ibexa/design-system-twig/src/bundle/Resources/views/themes/standard/design_system/components/checkbox/list_field.html.twig`
+
+### React
+
+Use the public React checkbox component APIs from the design system package:
+
+- `CheckboxInput`
+- `CheckboxField`
+- `CheckboxesListField`
+
+Reference files:
+
+- `../design-system/packages/components/src/components/Checkbox/CheckboxInput/CheckboxInput.tsx`
+- `../design-system/packages/components/src/components/Checkbox/CheckboxField/CheckboxField.tsx`
+- `../design-system/packages/components/src/components/Checkbox/CheckboxesListField/CheckboxesListField.tsx`
+
+---
+
+## Migration Strategy
+
+### Strategy A — Full DS Field in Symfony Form Theme
+
+**Rejected for initial rollout.**
+
+Reason:
+
+- too risky for Symfony's split widget/label contract
+- likely to produce double-label or wrapper regressions
+- relation and expanded-choice overrides depend on current block behavior
+
+### Strategy B — DS Input in Symfony Form Theme ✅
+
+**Chosen strategy for form themes.**
+
+Approach:
+
+- keep `checkbox_widget` and `checkbox_radio_label` conceptually split
+- migrate `checkbox_widget` toward `<twig:ibexa:checkbox:input>`
+- keep `checkbox_radio_label` initially as a compatibility layer
+- remove legacy classes and compatibility code gradually once downstream selectors are updated
+
+### Strategy C — Full DS Components in Controlled Templates ✅
+
+Use full DS field/list components in:
+
+- hand-written Twig templates with local input + label markup
+- checkbox groups rendered from item arrays
+- React views where the component tree is fully controlled
+
+---
+
+## Mapping Rules
+
+### Rule 1: Symfony Form Themes Use Strategy B Only
+
+For files like:
+
+- `src/bundle/Resources/views/themes/admin/ui/form_fields.html.twig`
+- downstream package form theme files
+
+Use:
+
+- `<twig:ibexa:checkbox:input>` in `checkbox_widget`
+- compatibility-first `checkbox_radio_label`
+
+Do **not** directly replace `checkbox_radio_label` with `<twig:ibexa:checkbox:field>`.
+
+### Rule 2: Hand-Written Input + Label Pairs Use `checkbox:field`
+
+Use `<twig:ibexa:checkbox:field>` when the checkbox and its label are rendered together in local template code and there is no Symfony split-rendering dependency.
+
+### Rule 3: Repeated Checkbox Groups Use `checkbox:list_field`
+
+Use `<twig:ibexa:checkbox:list_field>` when rendering a list of checkboxes from items/config arrays and when DS list-field events are useful.
+
+### Rule 4: Bare Selection Cells Use `checkbox:input`
+
+Use `<twig:ibexa:checkbox:input>` or React `CheckboxInput` for:
+
+- table selection cells
+- header bulk-select checkboxes
+- bare checkbox controls with no local label element
+
+### Rule 5: Migrate Interaction Clusters Together
+
+When removing legacy checkbox classes/selectors, update together:
+
+- Twig / JSX / TSX
+- JS / TS logic
+- SCSS
+- Behat or UI test selectors
+
+### Rule 6: Keep Temporary Compatibility Only When Needed
+
+Compatibility selectors/classes may be retained temporarily when required for staged rollout, but should be removed in follow-up cleanup.
+
+---
+
+## Foundation Analysis
+
+### Admin UI Chokepoints
+
+The main migration chokepoints are:
+
+- `src/bundle/Resources/views/themes/admin/ui/form_fields.html.twig`
+- `src/bundle/Resources/views/themes/admin/ui/component/table/table_head_cell.html.twig`
+- `src/bundle/Resources/views/themes/admin/ui/component/table/table_body_cell.html.twig`
+- `src/bundle/Resources/public/js/scripts/admin.table.js`
+- `src/bundle/ui-dev/src/modules/common/dropdown/dropdown.js`
+- `src/bundle/ui-dev/src/modules/universal-discovery/components/content-type-selector/content.type.selector.js`
+- `src/bundle/ui-dev/src/modules/sub-items/components/three-state-checkbox/three.state.checkbox.component.js`
+
+### Symfony Base Theme Constraints
+
+Important inherited behavior lives in:
+
+- `vendor/symfony/twig-bridge/Resources/views/Form/bootstrap_5_layout.html.twig`
+- `vendor/symfony/twig-bridge/Resources/views/Form/form_div_layout.html.twig`
+
+Notable behaviors:
+
+- `checkbox_widget` injects `.form-check-input`
+- `checkbox_widget` wraps controls in `.form-check`
+- `checkbox_radio_label` prints widget first, then `<label>`
+- required and inline classes are merged into the label block
+
+### DS Initialization Constraint
+
+Before migrating a page to DS checkbox components, verify that the page loads the design-system component initialization path from:
+
+- `vendor/ibexa/design-system-twig/src/bundle/Resources/public/ts/init_components.ts`
+
+---
+
+## Cross-Repository Inventory
+
+### Phase 0 — Foundation / Shared Infra
+
+1. `ibexa/design-system-twig`
+2. `ibexa/admin-ui-assets`
+3. `ibexa/admin-ui`
+
+### Phase 1 — Major Downstream Contracts
+
+4. `ibexa/product-catalog`
+5. `ibexa/page-builder`
+
+### Phase 2 — Custom Form Theme Consumers
+
+6. `ibexa/site-context`
+7. `ibexa/site-factory`
+8. `ibexa/storefront`
+9. `ibexa/discounts`
+10. `ibexa/personalization`
+
+### Phase 3 — React-Heavy Consumers
+
+11. `ibexa/image-picker`
+12. `ibexa/content-tree`
+13. `ibexa/calendar`
+14. `ibexa/segmentation`
+
+### Phase 4 — Bulk Selection / List Consumers
+
+15. `ibexa/corporate-account`
+16. `ibexa/scheduler`
+17. `ibexa/connector-ai`
+18. `ibexa/shipping`
+19. `ibexa/fieldtype-page`
+20. `ibexa/fieldtype-matrix`
+21. `ibexa/share`
+
+### Phase 5 — Tail Cleanup
+
+22. `ibexa/connect`
+23. `ibexa/activity-log`
+24. `ibexa/order-management`
+
+---
+
+## Package Categories
+
+### 1. Foundation / Shared Infra
+
+- `admin-ui`
+- `admin-ui-assets`
+- `design-system-twig`
+
+### 2. Packages with Custom Form Themes
+
+- `product-catalog`
+- `page-builder`
+- `site-context`
+- `site-factory`
+- `storefront`
+- `discounts`
+- `personalization`
+
+### 3. Packages with Table / List Bulk Selection
+
+- `admin-ui`
+- `product-catalog`
+- `corporate-account`
+- `scheduler`
+- `segmentation`
+- `connector-ai`
+- `shipping`
+- `fieldtype-page`
+- `fieldtype-matrix`
+- `share`
+
+### 4. Packages with React Checkbox Usage
+
+- `admin-ui`
+- `product-catalog`
+- `image-picker`
+- `content-tree`
+- `calendar`
+- `segmentation`
+
+### 5. Packages with Radio / Shared Choice Rules
+
+- `admin-ui`
+- `product-catalog`
+- `discounts`
+- `personalization`
+- `scheduler`
+- `image-picker`
+- `connect`
+- `site-context`
+- `fieldtype-page`
+
+---
+
+## Admin UI Execution Plan
+
+### Phase A: Foundation Design
+
+1. Confirm DS JS/init loading coverage for pages that will receive DS checkboxes
+2. Design the Strategy B implementation for `ui/form_fields.html.twig`
+3. Define temporary compatibility selector policy for legacy JS/SCSS/tests
+4. Confirm toggle controls remain excluded
+
+### Phase B: Form Theme Foundation
+
+Target file:
+
+- `src/bundle/Resources/views/themes/admin/ui/form_fields.html.twig`
+
+Required work:
+
+- prototype DS checkbox input usage in `checkbox_widget`
+- review `checkbox_radio_label` compatibility
+- verify relation/radio form theme overrides still work
+
+### Phase C: Low-Risk Standalone Checkboxes
+
+Start with isolated template or React checkbox controls that are not tightly coupled to shared table bulk-selection logic.
+
+### Phase D: Dynamic Form / Filter Clusters
+
+Migrate checkbox interactions together in:
+
+- dropdown multi-selects
+- content-type selectors
+- relation editors
+- notifications and search filters
+
+### Phase E: Shared Table Bulk Selection
+
+Migrate shared infrastructure together:
+
+- table header checkbox markup
+- table body checkbox markup
+- indeterminate logic
+- bulk action JS
+- table checkbox SCSS
+
+### Phase F: Cleanup
+
+- remove temporary compatibility selectors/classes
+- standardize on DS checkbox markup/classes
+
+---
+
+## Per-Repository Guidance
+
+### `ibexa/product-catalog`
+
+High-risk downstream consumer after `admin-ui`.
+
+Focus areas:
+
+- `src/bundle/Resources/views/themes/admin/product_catalog/form_fields.html.twig`
+- product tables and variant tables
+- data-grid checkbox selection
+- React product selector / discovery widget tables
+- choice and radio filter JS
+
+### `ibexa/page-builder`
+
+Focus areas:
+
+- custom checkbox widget templates
+- attribute-group checkbox JS and SCSS
+
+### `ibexa/personalization`
+
+Focus areas:
+
+- custom form themes
+- scenario edit JS
+- checkbox/radio-dependent dashboard widgets
+
+### `ibexa/image-picker`
+
+Focus areas:
+
+- React checkbox and radio filter groups
+- filter SCSS
+- selection toggler behavior
+
+### `ibexa/site-context`, `ibexa/site-factory`, `ibexa/storefront`, `ibexa/discounts`
+
+Focus areas:
+
+- custom form theme overrides
+- expanded choice / checkbox row markup
+- filter and shopping-list selector logic
+
+### Bulk Selection Consumers
+
+Packages such as `corporate-account`, `scheduler`, `connector-ai`, `shipping`, `fieldtype-page`, `fieldtype-matrix`, and `share` should be migrated after `admin-ui` shared table checkbox rules stabilize.
+
+---
+
+## Validation Commands
+
+### Twig Syntax
+
+```bash
+php bin/console lint:twig src/bundle/Resources/views/themes/admin/[file-path]
+```
+
+### PHP / General Validation
+
+```bash
+composer test
+composer check-cs
+composer phpstan
+```
+
+### Frontend Validation
+
+```bash
+yarn test
+```
+
+---
+
+## Required Testing Strategy
+
+### 1. Template / Runtime Validation
+
+- lint Twig syntax
+- clear cache when needed
+- verify the page loads without exceptions
+
+### 2. DS Initialization Validation
+
+For each migrated page, verify:
+
+- DS checkbox JS initializes automatically
+- `.ids-checkbox` components are active
+- `.ids-checkboxes-list-field` events work where used
+
+### 3. State Validation
+
+Verify all relevant states:
+
+- unchecked
+- checked
+- disabled
+- required
+- error
+- indeterminate
+
+### 4. Interaction Validation
+
+Verify behavior for:
+
+- bulk selection
+- filter counters
+- dropdown multi-selects
+- relation editors
+- dynamic subfield visibility
+
+### 5. Selector Validation
+
+Update and validate any coupled selectors in:
+
+- JS / TS
+- SCSS
+- Behat / UI tests
+
+---
+
+## Common Risks
+
+### Risk 1: DS JS Not Loaded
+
+Problem:
+
+- DS checkbox markup renders, but init-dependent behavior is missing
+
+Fix:
+
+- verify the page includes the DS component initialization path from `init_components.ts`
+
+### Risk 2: Double Label Rendering
+
+Problem:
+
+- using `<twig:ibexa:checkbox:field>` inside Symfony's split checkbox rendering path
+
+Fix:
+
+- keep Strategy B for form themes
+
+### Risk 3: Broken Table Bulk Selection
+
+Problem:
+
+- table JS still targets legacy checkbox selectors after markup migration
+
+Fix:
+
+- migrate table markup, JS, SCSS, and tests together
+
+### Risk 4: Toggle Controls Accidentally Included
+
+Problem:
+
+- controls with toggle semantics get migrated as checkboxes
+
+Fix:
+
+- explicitly keep toggle migration out of scope for this stream
+
+### Risk 5: Downstream Package Drift
+
+Problem:
+
+- downstream repos continue depending on old `admin-ui` checkbox structure
+
+Fix:
+
+- migrate repos in the order defined in this plan
+
+---
+
+## Per-Commit Checklist
+
+Before each commit:
+
+- [ ] confirm repository branch is `IBX-11506-use-ds-checkbox-component`
+- [ ] confirm branch was created from `main`
+- [ ] read the full interaction cluster being migrated
+- [ ] identify coupled Twig / React / JS / SCSS / test selectors
+- [ ] confirm whether DS init coverage exists for the target page
+
+During each commit:
+
+- [ ] confirm the commit contains exactly one changed file
+- [ ] migrate markup to DS checkbox API appropriate for the context
+- [ ] update coupled JS / TS selectors and logic
+- [ ] update coupled SCSS selectors and states
+- [ ] update Behat / UI locators where applicable
+- [ ] keep temporary compatibility only when necessary
+
+After each commit:
+
+- [ ] lint Twig syntax
+- [ ] run relevant tests/checks
+- [ ] manually verify runtime behavior
+- [ ] ensure no unrelated changes are included
+
+---
+
+## Execution Model
+
+- one interaction cluster at a time
+- one repository at a time
+- local changes only
+- no automatic pushes
+- prefer small, reviewable commits
+
+---
+
+## Follow-Up Streams
+
+Once checkbox migration is stable, plan follow-up streams for:
+
+1. radio migration
+2. toggle migration
+3. compatibility selector cleanup
+4. final CSS de-legacy pass
+
+---
+
+**Plan Status**: Planning  
+**Plan Version**: 1.0  
+**Date**: March 24, 2026  
+**Next Step**: implement `admin-ui` foundation on `IBX-11506-use-ds-checkbox-component` from `main`
diff --git a/CLAUDE.md b/CLAUDE.md
new file mode 100644
index 0000000000..abee1f2c65
--- /dev/null
+++ b/CLAUDE.md
@@ -0,0 +1,161 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## ⚠️ Git Workflow Policy - LOCAL CHANGES ONLY
+
+**CRITICAL: All changes MUST remain local. DO NOT push or create PRs automatically.**
+
+### Prohibited Actions (NEVER DO)
+- ❌ `git push` or `git push origin <branch>` - Never push to remote
+- ❌ `gh pr create` or similar PR commands - Never create pull requests
+- ❌ `git push --force` - Never force push
+- ❌ Merging or rebasing with remote branches automatically
+
+### Allowed Actions (Local Only)
+- ✅ Making local file changes
+- ✅ Running `git status`, `git diff`, `git log`
+- ✅ Creating local commits: `git add` + `git commit`
+- ✅ Creating local branches: `git checkout -b <branch>`
+- ✅ Running tests locally
+- ✅ Showing diffs and status to the user
+
+### User Control
+The user will manually:
+1. Review changes with `git status` / `git diff`
+2. Push to remote when ready: `git push origin <branch>`
+3. Create PRs via GitHub UI or `gh` CLI
+4. Request code review and merge
+
+**See MIGRATION_RULES.md Section 4 for complete details.**
+
+---
+
+## Package Overview
+
+This is **ibexa/admin-ui**, the core Back Office interface bundle for Ibexa DXP (Digital Experience Platform). It provides the administrative UI for content management, user management, and system configuration.
+
+## Commands
+
+### PHP (run from package root)
+
+```bash
+# Code style
+composer fix-cs           # Auto-fix PHP code style
+composer check-cs         # Check code style (dry-run)
+
+# Testing
+composer test             # Run all tests
+composer test-unit        # Unit tests only (tests/bundle + tests/lib)
+composer test-integration # Integration tests only (tests/integration)
+
+# Static analysis
+composer phpstan          # PHPStan level 8
+```
+
+### JavaScript/TypeScript (run from package root)
+
+```bash
+yarn test                 # Run all checks (prettier + TypeScript + ESLint)
+yarn fix                  # Auto-fix all frontend issues
+
+# Individual checks
+yarn prettier-test        # Code formatting check
+yarn ts-test              # TypeScript type checking
+yarn eslint-test          # ESLint linting
+```
+
+### Frontend Assets
+
+Assets are built from the project root (not package root) using Webpack Encore:
+```bash
+yarn ibexa:dev            # Development build
+yarn ibexa:build          # Production build
+```
+
+Entry points are defined in `src/bundle/Resources/encore/ibexa.js.config.js` and `ibexa.css.config.js`.
+
+## Architecture
+
+### Directory Structure
+
+```
+src/
+├── lib/           # Business logic (Ibexa\AdminUi\)
+├── bundle/        # Symfony bundle (Ibexa\Bundle\AdminUi\)
+│   ├── Controller/      # Route controllers
+│   ├── DependencyInjection/
+│   │   └── Compiler/    # TabPass, ComponentPass, etc.
+│   ├── Resources/
+│   │   ├── config/      # Service definitions, routing
+│   │   ├── public/      # Static assets (js/, scss/, ts/)
+│   │   └── encore/      # Webpack Encore configs
+│   └── ui-dev/          # Modern React/TypeScript modules
+│       └── src/modules/ # UDW, content-tree, multi-file-upload, etc.
+└── contracts/     # Public API interfaces (Ibexa\Contracts\AdminUi\)
+
+tests/
+├── lib/           # Unit tests for src/lib
+├── bundle/        # Unit tests for src/bundle
+└── integration/   # Integration tests with test kernel
+```
+
+### Namespace Conventions
+
+- `Ibexa\AdminUi\` - Internal library code
+- `Ibexa\Bundle\AdminUi\` - Symfony bundle integration
+- `Ibexa\Contracts\AdminUi\` - Public API (interfaces, value objects)
+- `Ibexa\Tests\AdminUi\` - Unit tests
+
+### Compiler Passes
+
+The bundle registers several compiler passes in `IbexaAdminUiBundle.php`:
+- `TabPass` - Register custom tabs
+- `ComponentPass` - UI component registration
+- `UiConfigProviderPass` - UI configuration providers
+- `LimitationFormMapperPass` / `LimitationValueMapperPass` - Permission limitations
+- `FieldTypeFormMapperDispatcherPass` - Field type form handling
+
+### Frontend Architecture
+
+**Legacy JavaScript** (`src/bundle/Resources/public/js/`):
+- Core utilities, field type handlers, sidebar behaviors
+- 66+ scripts bundled into `ibexa-admin-ui-layout-js`
+
+**Modern Modules** (`src/bundle/ui-dev/src/modules/`):
+- React/TypeScript components
+- Universal Discovery Widget (UDW)
+- Content tree, multi-file upload, sub-items
+
+**TypeScript Configuration**:
+- `tsconfig.json` includes path aliases for cross-package imports
+- Self-reference: `@ibexa-admin-ui/*` maps to current package
+- Generated via `yarn postinstall`
+
+## Testing
+
+### Running Single Tests
+
+```bash
+# Single unit test file
+./vendor/bin/phpunit -c phpunit.xml tests/lib/Path/To/TestFile.php
+
+# Single integration test
+./vendor/bin/phpunit -c phpunit.integration.xml tests/integration/Path/To/TestFile.php
+
+# Filter by test method
+./vendor/bin/phpunit -c phpunit.xml --filter testMethodName
+```
+
+### Integration Test Environment
+
+Integration tests use:
+- `AdminUiIbexaTestKernel` custom test kernel
+- SQLite database (configurable via `DATABASE_URL`)
+- DAMA Doctrine Test Bundle for transaction isolation
+
+## Code Style
+
+- PHP: `declare(strict_types=1)` required in all files
+- PHPStan level 8 with baseline
+- Frontend: Prettier + ESLint via `@ibexa/eslint-config`
diff --git a/RADIO_BUTTON_MIGRATION_PLAN.md b/RADIO_BUTTON_MIGRATION_PLAN.md
new file mode 100644
index 0000000000..ee20ca46c4
--- /dev/null
+++ b/RADIO_BUTTON_MIGRATION_PLAN.md
@@ -0,0 +1,675 @@
+# RADIO BUTTON MIGRATION PLAN: Legacy Radio Patterns -> design-system Components
+
+**Scope**: Cross-repository rollout across `vendor/ibexa/*`  
+**Base Repository**: `ibexa/admin-ui`  
+**Ticket / Branch**: `IBX-11506-use-ds-checkbox-component`  
+**Date Created**: March 25, 2026  
+**Status**: Planning
+
+---
+
+## ⚠️ CRITICAL DIFFERENCES FROM CHECKBOX MIGRATION
+
+### Difference 1: `radio_button` Exists, but Adoption Is Not Wired Yet
+
+The design-system Twig radio components already exist in:
+
+- `vendor/ibexa/design-system-twig/src/bundle/Resources/views/themes/standard/design_system/components/radio_button/input.html.twig`
+- `vendor/ibexa/design-system-twig/src/bundle/Resources/views/themes/standard/design_system/components/radio_button/field.html.twig`
+- `vendor/ibexa/design-system-twig/src/bundle/Resources/views/themes/standard/design_system/components/radio_button/list_field.html.twig`
+
+Supporting Twig component classes also exist in:
+
+- `vendor/ibexa/design-system-twig/src/lib/Twig/Components/RadioButton/Input.php`
+- `vendor/ibexa/design-system-twig/src/lib/Twig/Components/RadioButton/Field.php`
+- `vendor/ibexa/design-system-twig/src/lib/Twig/Components/RadioButton/ListField.php`
+
+However, current downstream adoption is effectively absent, and standard radio initialization is not registered in:
+
+- `vendor/ibexa/design-system-twig/src/bundle/Resources/public/ts/init_components.ts`
+
+**Impact:** before broad rollout, confirm whether standard `radio_button` needs JS init at all and, if yes, wire it before downstream migration.
+
+---
+
+### Difference 2: Symfony Radio Rendering Shares the Checkbox Label Pipeline
+
+Legacy radio rendering is still coupled to Symfony form theme behavior via:
+
+- `src/bundle/Resources/views/themes/admin/ui/form_fields.html.twig`
+
+Relevant blocks:
+
+- `radio_widget`
+- `checkbox_radio_label`
+
+These blocks inherit behavior from Symfony Bootstrap form themes, especially:
+
+- `vendor/symfony/twig-bridge/Resources/views/Form/bootstrap_5_layout.html.twig`
+- `vendor/symfony/twig-bridge/Resources/views/Form/form_div_layout.html.twig`
+
+**Impact:** radio migration must preserve the split widget/label contract unless a full replacement is intentionally designed and validated.
+
+---
+
+### Difference 3: Standard Radios and Tile Radios Must Be Split Into Separate Streams
+
+Do not treat all radio UIs as one migration shape.
+
+There are two distinct design-system paths:
+
+- standard radios: `radio_button`
+- tile/card radios: `alt_radio`
+
+Relevant DS initialization already exists for alt-radio in:
+
+- `vendor/ibexa/design-system-twig/src/bundle/Resources/public/ts/init_components.ts`
+
+Relevant classes:
+
+- `.ids-alt-radio`
+- `.ids-alt-radio-list-field`
+
+**Impact:** card-like or tile-like radio selectors should usually migrate to `alt_radio`, not `radio_button`.
+
+---
+
+### Difference 4: Many Legacy Radios Are Selector-Driven, Not Semantics-Driven
+
+Legacy integrations frequently depend on classes and wrappers such as:
+
+- `.ibexa-input--radio`
+- `.ibexa-label--checkbox-radio`
+- `.form-check`
+
+These are used across Twig, JS, SCSS, and Behat selectors.
+
+**Impact:** a radio migration is not complete when markup changes alone compile; coupled selectors must be migrated in the same interaction cluster.
+
+---
+
+## Overview
+
+### Goals
+
+1. Replace legacy radio markup and styling with design-system radio components where appropriate
+2. Preserve functional parity for Symfony forms, expanded choices, filters, tables, and card selectors
+3. Use a compatibility-first strategy for Symfony form theme radios
+4. Use `alt_radio` for card/tile-style controls instead of forcing them into `radio_button`
+5. Update JS, SCSS, and test selectors in the same commit as markup changes
+6. Roll out the migration consistently across all affected `vendor/ibexa/*` repositories
+
+### Non-Goals
+
+1. Do not migrate checkbox-only behavior in this stream
+2. Do not migrate toggle-style controls in this stream
+3. Do not push or create PRs automatically
+
+---
+
+## Git Workflow
+
+### Required Branch Naming
+
+For every affected `vendor/ibexa/*` repository, create and use:
+
+`IBX-11506-use-ds-checkbox-component`
+
+### Branch Creation Rule
+
+- create the branch from that repository's `main` branch
+- do not branch from another feature branch
+- keep all radio migration commits local on this branch
+- do not push automatically
+
+### Commit Scope Rule
+
+- keep commits repository-local
+- create one commit per changed file
+- commit immediately after each validated file change
+- if one file change requires coupled JS / SCSS / test updates in other files, still keep one commit per changed file
+- migrate markup + JS + SCSS + tests together in execution order where selectors are coupled, but do not batch multiple changed files into a single commit
+
+### Commit Message Prefix Rule
+
+Use this prefix for every radio migration commit message:
+
+`IBX-11507-use-ds-radio-button: `
+
+Examples:
+
+- `IBX-11507-use-ds-radio-button: use DS radio input in admin form theme`
+- `IBX-11507-use-ds-radio-button: update radio selectors in product catalog`
+
+---
+
+## Target APIs
+
+### Twig
+
+Use the public radio component APIs from `ibexa/design-system-twig`:
+
+- `<twig:ibexa:radio_button:input>`
+- `<twig:ibexa:radio_button:field>`
+- `<twig:ibexa:radio_button:list_field>`
+
+Preferred syntax rule:
+
+- use Twig component tag syntax directly: `<twig:ibexa:radio_button:input ... />`
+- prefer `<twig:...>` over `{{ component('ibexa:radio_button:input', ...) }}` for this migration stream
+- only use the `component()` function when tag syntax is genuinely awkward or impossible in a specific template context
+
+Reference files:
+
+- `vendor/ibexa/design-system-twig/src/bundle/Resources/views/themes/standard/design_system/components/radio_button/input.html.twig`
+- `vendor/ibexa/design-system-twig/src/bundle/Resources/views/themes/standard/design_system/components/radio_button/field.html.twig`
+- `vendor/ibexa/design-system-twig/src/bundle/Resources/views/themes/standard/design_system/components/radio_button/list_field.html.twig`
+
+### Alternative Radio UI
+
+Use the alt-radio path for tile/card-style selection UIs:
+
+- `.ids-alt-radio`
+- `.ids-alt-radio-list-field`
+
+Reference files:
+
+- `vendor/ibexa/design-system-twig/src/bundle/Resources/public/ts/components/alt_radio/alt_radio_input.ts`
+- `vendor/ibexa/design-system-twig/src/bundle/Resources/public/ts/components/alt_radio/alt_radios_list_field.ts`
+
+### TypeScript
+
+Standard radio TS classes currently exist in:
+
+- `vendor/ibexa/design-system-twig/src/bundle/Resources/public/ts/components/radio_button/radio_button_input.ts`
+- `vendor/ibexa/design-system-twig/src/bundle/Resources/public/ts/components/radio_button/radio_buttons_list_field.ts`
+
+Before using them in downstream pages, confirm whether they require registration in:
+
+- `vendor/ibexa/design-system-twig/src/bundle/Resources/public/ts/init_components.ts`
+
+Also confirm that any required DS radio initialization is actually loaded by the consuming admin bundle, not only present in `design-system-twig` source.
+
+---
+
+## Migration Strategy
+
+### Strategy A — Full DS Field in Symfony Form Theme
+
+**Rejected for initial rollout.**
+
+Reason:
+
+- too risky for Symfony's split widget/label contract
+- likely to cause double-label or wrapper regressions
+- current downstream consumers still rely on `checkbox_radio_label`
+
+### Strategy B — DS Input in Symfony Form Theme ✅
+
+**Chosen strategy for form themes.**
+
+Approach:
+
+- keep `radio_widget` and `checkbox_radio_label` conceptually split
+- migrate `radio_widget` toward `<twig:ibexa:radio_button:input>`
+- keep `checkbox_radio_label` initially as a compatibility layer
+- remove legacy classes and compatibility code gradually once downstream selectors are updated
+
+### Strategy C — Full DS Components in Controlled Templates ✅
+
+Use full DS field/list components in:
+
+- hand-written Twig templates with local input + label markup
+- repeated radio groups rendered from item arrays
+- controlled views where wrapper and label structure are local
+
+### Strategy D — Alt Radio for Tile/Card UIs ✅
+
+Use the alt-radio path for:
+
+- icon choice tiles
+- visual cards with click-to-select behavior
+- custom selected-state containers already acting like cards rather than standard radios
+
+---
+
+## Mapping Rules
+
+### Rule 1: Symfony Form Themes Use Strategy B Only
+
+For files like:
+
+- `src/bundle/Resources/views/themes/admin/ui/form_fields.html.twig`
+- downstream package form theme files
+
+Use:
+
+- `<twig:ibexa:radio_button:input>` in `radio_widget`
+- compatibility-first `checkbox_radio_label`
+
+Do **not** directly replace `checkbox_radio_label` with `<twig:ibexa:radio_button:field>`.
+
+### Rule 2: Hand-Written Input + Label Pairs Use `radio_button:field`
+
+Use `<twig:ibexa:radio_button:field>` when the radio and label are rendered together in local template code and there is no Symfony split-rendering dependency.
+
+### Rule 3: Repeated Standard Radio Groups Use `radio_button:list_field`
+
+Use `<twig:ibexa:radio_button:list_field>` when rendering a simple list of radios from items/config arrays.
+
+### Rule 4: Tile/Card Radio Groups Use `alt_radio`
+
+Use the alt-radio path when the visual design is a clickable card, tile, or icon selector with selected-state container styling.
+
+### Rule 5: Migrate Interaction Clusters Together
+
+When removing legacy radio classes/selectors, update together:
+
+- Twig / JSX / TSX
+- JS / TS logic
+- SCSS
+- Behat or UI test selectors
+
+### Rule 6: Keep Temporary Compatibility Only When Needed
+
+Compatibility selectors/classes may be retained temporarily when required for staged rollout, but should be removed in follow-up cleanup.
+
+---
+
+## Foundation Analysis
+
+### Admin UI Chokepoints
+
+The main migration chokepoints are:
+
+- `src/bundle/Resources/views/themes/admin/ui/form_fields.html.twig`
+- `src/bundle/Resources/public/js/scripts/button.state.radio.toggle.js`
+- `src/bundle/Resources/public/scss/_extra-actions.scss`
+- `src/bundle/Resources/public/scss/_instant-filter.scss`
+- `src/bundle/Resources/public/scss/ui/modules/common/_popup.scss`
+- `src/lib/Behat/Component/CreateNewPopup.php`
+
+### Symfony Base Theme Constraints
+
+Important inherited behavior lives in:
+
+- `vendor/symfony/twig-bridge/Resources/views/Form/bootstrap_5_layout.html.twig`
+- `vendor/symfony/twig-bridge/Resources/views/Form/form_div_layout.html.twig`
+
+Notable behaviors:
+
+- `radio_widget` still relies on Symfony widget rendering contracts
+- `checkbox_radio_label` renders the label around a pre-rendered widget flow
+- required and inline classes are merged into the label block
+
+### DS Initialization Constraint
+
+Before migrating a page to standard DS radio components, verify whether the page needs design-system component initialization from:
+
+- `vendor/ibexa/design-system-twig/src/bundle/Resources/public/ts/init_components.ts`
+
+Current finding:
+
+- alt-radio is registered there
+- standard `radio_button` is not currently registered there
+
+---
+
+## Cross-Repository Inventory
+
+### Phase 0 — Foundation / Shared Infra
+
+1. `ibexa/design-system-twig`
+2. `ibexa/admin-ui`
+
+### Phase 1 — Major Form Theme Consumers
+
+3. `ibexa/page-builder`
+4. `ibexa/personalization`
+5. `ibexa/storefront`
+
+### Phase 2 — Custom Radio UI Consumers
+
+6. `ibexa/discounts`
+7. `ibexa/connect`
+8. `ibexa/scheduler`
+
+### Phase 3 — React / JS Consumers
+
+9. `ibexa/product-catalog`
+10. `ibexa/image-picker`
+11. `ibexa/content-tree`
+12. `ibexa/segmentation`
+
+### Phase 4 — Tail Cleanup
+
+13. `ibexa/corporate-account`
+14. `ibexa/site-context`
+
+---
+
+## Package Categories
+
+### 1. Foundation / Shared Infra
+
+- `design-system-twig`
+- `admin-ui`
+
+### 2. Packages with Custom Form Themes
+
+- `page-builder`
+- `personalization`
+- `storefront`
+
+### 3. Packages with Hand-Written Radio Markup
+
+- `admin-ui`
+- `discounts`
+- `connect`
+- `scheduler`
+
+### 4. Packages with Radio-Driven JS / React Logic
+
+- `admin-ui`
+- `product-catalog`
+- `image-picker`
+- `content-tree`
+- `segmentation`
+- `page-builder`
+
+### 5. Packages with Behat / Selector Coupling
+
+- `admin-ui`
+- `discounts`
+
+---
+
+## design-system-twig Execution Plan
+
+### Phase A: Foundation Audit
+
+1. confirm public `radio_button` component API stability
+2. review `ListField` validation gap in `src/lib/Twig/Components/RadioButton/ListField.php`
+3. determine whether standard radios need JS init registration in `init_components.ts`
+4. verify integration tests cover wrapper, input, and list markup expectations
+
+### Phase B: Foundation Hardening
+
+Required work:
+
+- add or confirm standard radio bootstrap coverage if runtime init is needed
+- keep class names stable: `.ids-radio-button`, `.ids-radio-button-field`, `.ids-radio-buttons-list-field`
+- extend tests if API or bootstrap behavior changes
+
+---
+
+## Admin UI Execution Plan
+
+### Phase A: Form Theme Foundation
+
+Target file:
+
+- `src/bundle/Resources/views/themes/admin/ui/form_fields.html.twig`
+
+Required work:
+
+- prototype DS radio input usage in `radio_widget`
+- review `checkbox_radio_label` compatibility for radio consumers
+- verify expanded choice rendering still works in inherited paths
+
+### Phase B: Low-Risk Standalone Radios
+
+Start with isolated template radios that are not tightly coupled to card-style interactions.
+
+Likely examples:
+
+- `src/bundle/Resources/views/themes/admin/content/tab/locations/tab.html.twig`
+- `src/bundle/Resources/views/themes/admin/content/tab/translations/tab.html.twig`
+- `src/bundle/Resources/views/themes/admin/content/translation_add_form_fields.html.twig`
+
+### Phase C: Dynamic Filter / Popup Clusters
+
+Migrate radio interactions together in:
+
+- instant filters
+- popup selectors
+- state-toggling buttons and auxiliary radio UI scripts
+
+### Phase D: Cleanup
+
+- remove temporary compatibility selectors/classes
+- standardize on DS radio markup/classes
+
+---
+
+## Per-Repository Guidance
+
+### `ibexa/page-builder`
+
+Focus areas:
+
+- `src/bundle/Resources/views/page_builder/block/form_fields.html.twig`
+- scheduler and reveal/hide configuration radios
+- layout selector and any card-like radios that may fit `alt_radio`
+
+### `ibexa/discounts`
+
+Focus areas:
+
+- `src/bundle/Resources/views/themes/admin/discounts/extra_actions_form_fields.html.twig`
+- selected-state radio cards and icons
+- related JS and SCSS for selected option containers
+
+### `ibexa/storefront`
+
+Focus areas:
+
+- `src/bundle/Resources/views/themes/storefront/storefront/form_fields.html.twig`
+- custom `choice_widget_expanded` rendering
+
+### `ibexa/connect`
+
+Focus areas:
+
+- hand-written radio option markup
+- action-edit radio toggles
+
+### `ibexa/scheduler`
+
+Focus areas:
+
+- custom visibility/schedule selection radios
+- any legacy wrappers or label selectors
+
+### React / JS Consumers
+
+Packages such as `product-catalog`, `image-picker`, `content-tree`, and `segmentation` should be migrated after the `admin-ui` form-theme and selector rules stabilize.
+
+---
+
+## Validation Commands
+
+### Twig Syntax
+
+```bash
+php bin/console lint:twig src/bundle/Resources/views/themes/admin/[file-path]
+```
+
+### PHP / General Validation
+
+```bash
+composer test
+composer check-cs
+composer phpstan
+```
+
+### Frontend Validation
+
+```bash
+yarn test
+```
+
+---
+
+## Required Testing Strategy
+
+### 1. Template / Runtime Validation
+
+- lint Twig syntax
+- clear cache when needed
+- verify the page loads without exceptions
+
+### 2. Form Theme Validation
+
+For each migrated form-theme path, verify:
+
+- radio inputs render correctly inside expanded choices
+- labels still bind correctly to the correct input id
+- no double-label rendering appears
+
+### 3. DS Initialization Validation
+
+For each migrated page, verify whether standard DS radio JS init is required and present.
+
+For alt-radio pages, verify:
+
+- `.ids-alt-radio` components initialize automatically
+- `.ids-alt-radio-list-field` change events work
+
+### 4. State Validation
+
+Verify all relevant states:
+
+- unchecked
+- checked
+- disabled
+- required
+- error
+- selected tile/card state where applicable
+
+### 5. Interaction Validation
+
+Verify behavior for:
+
+- expanded choice groups
+- filter counters and panel switching
+- card/tile selection
+- conditional subfield visibility
+
+### 6. Selector Validation
+
+Update and validate any coupled selectors in:
+
+- JS / TS
+- SCSS
+- Behat / UI tests
+
+---
+
+## Common Risks
+
+### Risk 1: Double Label Rendering
+
+Problem:
+
+- using `<twig:ibexa:radio_button:field>` inside Symfony's split radio rendering path
+
+Fix:
+
+- keep Strategy B for form themes
+
+### Risk 2: Wrong Component Family Chosen
+
+Problem:
+
+- card/tile selectors are migrated to standard `radio_button` when they actually need `alt_radio`
+
+Fix:
+
+- classify each radio cluster before changing markup
+
+### Risk 3: Hidden Selector Coupling
+
+Problem:
+
+- JS, SCSS, or Behat still targets `.ibexa-input--radio` or `.ibexa-label--checkbox-radio`
+
+Fix:
+
+- migrate markup, JS, SCSS, and tests together
+
+### Risk 4: Unwired Standard Radio Bootstrap
+
+Problem:
+
+- standard radio components are migrated assuming DS bootstrap exists when `init_components.ts` does not register them
+
+Fix:
+
+- decide bootstrap requirements in `design-system-twig` before downstream rollout
+
+### Risk 5: Storefront Drift
+
+Problem:
+
+- admin-oriented migration assumptions are applied directly to storefront expanded-choice rendering
+
+Fix:
+
+- treat storefront as a separate form-theme stream
+
+---
+
+## Per-Commit Checklist
+
+Before each commit:
+
+- [ ] confirm repository branch is `IBX-11507-use-ds-radio-button-component`
+- [ ] confirm branch was created from `main`
+- [ ] read the full interaction cluster being migrated
+- [ ] identify coupled Twig / React / JS / SCSS / test selectors
+- [ ] classify the target as `radio_button` or `alt_radio`
+- [ ] confirm whether DS init coverage exists for the target page
+
+During each commit:
+
+- [ ] migrate markup to the correct DS radio API for the context
+- [ ] update coupled JS / TS selectors and logic
+- [ ] update coupled SCSS selectors and states
+- [ ] update Behat / UI locators where applicable
+- [ ] keep temporary compatibility only when necessary
+
+After each commit:
+
+- [ ] lint Twig syntax
+- [ ] run relevant tests/checks
+- [ ] manually verify runtime behavior
+- [ ] ensure no unrelated changes are included
+
+---
+
+## Execution Model
+
+- one logical change at a time
+- one commit per change on the proper repository branch
+- local changes only
+- no automatic pushes
+- prefer small, reviewable commits
+
+---
+
+## Follow-Up Streams
+
+Once radio migration is stable, plan follow-up streams for:
+
+1. checkbox compatibility selector cleanup
+2. alt-radio adoption cleanup
+3. toggle migration where controls are semantically not radios
+4. final CSS de-legacy pass
+
+---
+
+**Plan Status**: Planning  
+**Plan Version**: 1.0  
+**Date**: March 25, 2026  
+**Next Step**: harden `design-system-twig` radio foundations, then implement `admin-ui` form-theme migration on `IBX-11507-use-ds-radio-button-component`
diff --git a/src/bundle/Resources/encore/ibexa.css.config.js b/src/bundle/Resources/encore/ibexa.css.config.js
index 62dfba962e..65758f544f 100644
--- a/src/bundle/Resources/encore/ibexa.css.config.js
+++ b/src/bundle/Resources/encore/ibexa.css.config.js
@@ -5,6 +5,7 @@ module.exports = (Encore) => {
         path.resolve(__dirname, '../public/scss/ibexa-bootstrap.scss'),
         path.resolve(__dirname, '../public/scss/ibexa.scss'),
         path.resolve(__dirname, '../public/scss/ui/ibexa-modules.scss'),
+        path.resolve('./vendor/ibexa/admin-ui-assets/src/bundle/Resources/public/vendors/ids-assets/dist/css/styles.css'),
         path.resolve('./vendor/ibexa/admin-ui-assets/src/bundle/Resources/public/vendors/flatpickr/dist/flatpickr.min.css'),
         path.resolve(
             './vendor/ibexa/admin-ui-assets/src/bundle/Resources/public/vendors/flatpickr/dist/plugins/confirmDate/confirmDate.css',
@@ -19,5 +20,6 @@ module.exports = (Encore) => {
         .addEntry('ibexa-admin-ui-security-base-css', [
             path.resolve(__dirname, '../public/scss/ibexa-bootstrap.scss'),
             path.resolve(__dirname, '../public/scss/ibexa.scss'),
+            path.resolve('./vendor/ibexa/admin-ui-assets/src/bundle/Resources/public/vendors/ids-assets/dist/css/styles.css'),
         ]);
 };
diff --git a/src/bundle/Resources/encore/ibexa.js.config.js b/src/bundle/Resources/encore/ibexa.js.config.js
index 5a5a748a1e..2839dfa50b 100644
--- a/src/bundle/Resources/encore/ibexa.js.config.js
+++ b/src/bundle/Resources/encore/ibexa.js.config.js
@@ -49,6 +49,7 @@ const layout = [
     path.resolve(__dirname, '../public/js/scripts/admin.focus.mode.js'),
     path.resolve(__dirname, '../public/js/scripts/sidebar/main.menu.js'),
     path.resolve(__dirname, '../public/js/scripts/admin.input.text.js'),
+    path.resolve('./vendor/ibexa/design-system-twig/src/bundle/Resources/public/ts/init_components.ts'),
     path.resolve(__dirname, '../public/js/scripts/admin.table.js'),
     path.resolve(__dirname, '../public/js/scripts/core/collapse.js'),
     path.resolve(__dirname, '../public/js/scripts/admin.dropdown.js'),
@@ -248,9 +249,13 @@ module.exports = (Encore) => {
         ])
         .addEntry('ibexa-admin-ui-login-js', [
             path.resolve(__dirname, '../public/js/scripts/admin.input.text.js'),
+            path.resolve('./vendor/ibexa/design-system-twig/src/bundle/Resources/public/ts/init_components.ts'),
             path.resolve(__dirname, '../public/js/scripts/login.js'),
         ])
-        .addEntry('ibexa-admin-ui-reset-password-js', [path.resolve(__dirname, '../public/js/scripts/admin.input.text.js')])
+        .addEntry('ibexa-admin-ui-reset-password-js', [
+            path.resolve(__dirname, '../public/js/scripts/admin.input.text.js'),
+            path.resolve('./vendor/ibexa/design-system-twig/src/bundle/Resources/public/ts/init_components.ts'),
+        ])
         .addEntry('ibexa-admin-ui-user-invitation-modal', [path.resolve(__dirname, '../public/js/scripts/user.invitation.modal.js')])
         .addEntry('ibexa-admin-ui-tabs-js', [
             path.resolve(__dirname, '../public/js/scripts/admin.location.tab.js'),
diff --git a/src/bundle/Resources/public/js/scripts/admin.location.add.custom_url.js b/src/bundle/Resources/public/js/scripts/admin.location.add.custom_url.js
index 8668cff04f..ba398b6ff5 100644
--- a/src/bundle/Resources/public/js/scripts/admin.location.add.custom_url.js
+++ b/src/bundle/Resources/public/js/scripts/admin.location.add.custom_url.js
@@ -4,15 +4,23 @@
     if (modal) {
         const discardBtns = modal.querySelectorAll('[data-bs-dismiss="modal"]');
         const submitBtn = modal.querySelector('#custom_url_add_add');
-        const input = modal.querySelector('[required="required"]');
+        const input = modal.querySelector('#custom_url_add_path') || modal.querySelector('[name="custom_url_add[path]"]');
         const siteRootCheckbox = modal.querySelector('[name="custom_url_add[site_root]"]');
         const toggleButtonState = () => {
+            if (!input || !submitBtn) {
+                return;
+            }
+
             const hasValue = input.value.trim().length !== 0;
             const methodName = hasValue ? 'removeAttribute' : 'setAttribute';
 
             submitBtn[methodName]('disabled', true);
         };
         const clearValues = () => {
+            if (!input) {
+                return;
+            }
+
             input.value = '';
             toggleButtonState();
         };
@@ -20,11 +28,21 @@
             const isChecked = event.target.checked;
             const siteAccessSelect = modal.querySelector('.ibexa-custom-url-from__item--siteacces .ibexa-dropdown');
 
+            if (!siteAccessSelect) {
+                return;
+            }
+
             siteAccessSelect.classList.toggle('ibexa-dropdown--is-disabled', isChecked);
         };
 
-        input.addEventListener('input', toggleButtonState, false);
-        siteRootCheckbox.addEventListener('change', toggleSiteAccessSelect, false);
+        if (input) {
+            input.addEventListener('input', toggleButtonState, false);
+        }
+
+        if (siteRootCheckbox) {
+            siteRootCheckbox.addEventListener('change', toggleSiteAccessSelect, false);
+        }
+
         discardBtns.forEach((btn) => btn.addEventListener('click', clearValues, false));
     }
 })(window, window.document);
diff --git a/src/bundle/Resources/public/js/scripts/admin.search.autocomplete.js b/src/bundle/Resources/public/js/scripts/admin.search.autocomplete.js
index 96adaa9c01..b2abddd3ce 100644
--- a/src/bundle/Resources/public/js/scripts/admin.search.autocomplete.js
+++ b/src/bundle/Resources/public/js/scripts/admin.search.autocomplete.js
@@ -10,7 +10,7 @@
     }
 
     const globalSearchInput = globalSearch.querySelector('.ibexa-global-search__input');
-    const clearBtn = globalSearch.querySelector(' .ibexa-input-text-wrapper__action-btn--clear');
+    const clearBtn = globalSearch.querySelector('.ids-clear-btn, .ibexa-input-text-wrapper__action-btn--clear');
     const autocompleteNode = globalSearch.querySelector('.ibexa-global-search__autocomplete');
     const autocompleteListNode = globalSearch.querySelector('.ibexa-global-search__autocomplete-list');
     const autocompleteResultsCountNumber = globalSearch.querySelector('.ibexa-global-search__autocomplete-total-count-number');
@@ -152,6 +152,6 @@
     };
 
     globalSearchInput.addEventListener('keyup', handleTyping, false);
-    clearBtn.addEventListener('click', hideAutocomplete, false);
+    clearBtn?.addEventListener('click', hideAutocomplete, false);
     doc.addEventListener('keydown', focusSearch, false);
 })(window, document, window.ibexa, window.Routing, window.Translator);
diff --git a/src/bundle/Resources/public/js/scripts/admin.url.wildcards.create.js b/src/bundle/Resources/public/js/scripts/admin.url.wildcards.create.js
index a957dc5937..b748ff9edb 100644
--- a/src/bundle/Resources/public/js/scripts/admin.url.wildcards.create.js
+++ b/src/bundle/Resources/public/js/scripts/admin.url.wildcards.create.js
@@ -7,8 +7,12 @@
 
     const discardBtns = modal.querySelectorAll('[data-bs-dismiss="modal"]');
     const submitBtn = modal.querySelector('[type="submit"]');
-    const inputs = [...modal.querySelectorAll('[required="required"]')];
+    const inputs = [...modal.querySelectorAll('[required], [required="required"]')];
     const toggleButtonState = () => {
+        if (!submitBtn || inputs.length === 0) {
+            return;
+        }
+
         const isInvalid = inputs.some((input) => input.value.trim().length === 0);
         const methodName = isInvalid ? 'setAttribute' : 'removeAttribute';
 
diff --git a/src/bundle/Resources/public/js/scripts/user.invitation.modal.js b/src/bundle/Resources/public/js/scripts/user.invitation.modal.js
index 6adc58b8d4..e9d253ea8a 100644
--- a/src/bundle/Resources/public/js/scripts/user.invitation.modal.js
+++ b/src/bundle/Resources/public/js/scripts/user.invitation.modal.js
@@ -9,7 +9,7 @@ export class UserInvitationModal {
         this.modal = options.modal;
         this.stickyTopContainer = this.modal.querySelector('.ibexa-user-invitation-modal__sticky-top');
         this.searchInput = this.modal.querySelector('.ibexa-user-invitation-modal__search-input');
-        this.searchBtn = this.modal.querySelector('.ibexa-input-text-wrapper__action-btn--search');
+        this.searchBtn = this.modal.querySelector('.ids-input-text__search-btn, .ibexa-input-text-wrapper__action-btn--search');
         this.searchNoEntries = this.modal.querySelector('.ibexa-user-invitation-modal__search-no-entries');
         this.badFileAlert = this.modal.querySelector('.ibexa-user-invitation-modal__bad-file-alert');
         this.badFileAlertCloseBtn = this.badFileAlert.querySelector('.ibexa-alert__close-btn');
@@ -490,7 +490,7 @@ export class UserInvitationModal {
         this.goToNextIssueBtn.addEventListener('click', this.scrollToNextIssue, false);
 
         this.searchInput.addEventListener('keyup', this.handleSearch, false);
-        this.searchBtn.addEventListener('keyup', this.handleSearch, false);
+        this.searchBtn?.addEventListener('keyup', this.handleSearch, false);
 
         this.fakeSubmitBtn.addEventListener(
             'click',
diff --git a/src/bundle/Resources/public/scss/_dropdown.scss b/src/bundle/Resources/public/scss/_dropdown.scss
index 5cb76a2d78..038a666ddf 100644
--- a/src/bundle/Resources/public/scss/_dropdown.scss
+++ b/src/bundle/Resources/public/scss/_dropdown.scss
@@ -186,8 +186,10 @@
         display: flex;
         flex-direction: column;
 
-        .ibexa-input-text-wrapper {
+        .ibexa-input-text-wrapper,
+        .ids-input-text {
             width: 100%;
+            display: block;
             padding: calculateRem(8px) calculateRem(12px);
 
             &__actions {
@@ -196,7 +198,8 @@
         }
 
         &--search-hidden {
-            .ibexa-input-text-wrapper {
+            .ibexa-input-text-wrapper,
+            .ids-input-text {
                 display: none;
             }
         }
diff --git a/src/bundle/Resources/public/scss/ui/modules/common/_taggify.scss b/src/bundle/Resources/public/scss/ui/modules/common/_taggify.scss
index adc25d808d..95269aa1cc 100644
--- a/src/bundle/Resources/public/scss/ui/modules/common/_taggify.scss
+++ b/src/bundle/Resources/public/scss/ui/modules/common/_taggify.scss
@@ -20,6 +20,10 @@
         flex: 1 1 auto;
         order: 2;
         margin: calculateRem(2px);
+
+        .c-taggify__new-tag-input-wrapper {
+            width: 100%;
+        }
     }
 
     &__tags {
@@ -35,6 +39,7 @@
         border: 0 none;
         outline: none;
         background: transparent;
+        padding: 0;
     }
 
     &__bottom-hint {
diff --git a/src/bundle/Resources/public/scss/ui/modules/universal-discovery/_top-menu-search-input.scss b/src/bundle/Resources/public/scss/ui/modules/universal-discovery/_top-menu-search-input.scss
index a59d505365..fc91ad8515 100644
--- a/src/bundle/Resources/public/scss/ui/modules/universal-discovery/_top-menu-search-input.scss
+++ b/src/bundle/Resources/public/scss/ui/modules/universal-discovery/_top-menu-search-input.scss
@@ -18,24 +18,29 @@
     }
 
     &__search-input {
-        position: absolute;
-        width: calc(100% - #{calculateRem(224px)});
-        top: 50%;
-        left: calculateRem(65px);
-        border: none;
-        padding: 0;
-        font-family: $ibexa-font-family-headings;
-        font-weight: $ibexa-font-weight-bold;
-        font-size: $ibexa-text-font-size-extra-large;
-        opacity: 0;
-        transform: translateY(-50%) scaleX(0);
-        transform-origin: left;
-        transition:
-            all $ibexa-admin-transition-duration $ibexa-admin-transition,
-            transform 0s;
+        &.ids-input-text {
+            position: absolute;
+            width: calc(100% - #{calculateRem(224px)});
+            top: 50%;
+            left: calculateRem(65px);
+            opacity: 0;
+            transform: translateY(-50%) scaleX(0);
+            transform-origin: left;
+            transition:
+                all $ibexa-admin-transition-duration $ibexa-admin-transition,
+                transform 0s;
+        }
+
+        .ids-input {
+            border: none;
+            padding: 0;
+            font-family: $ibexa-font-family-headings;
+            font-weight: $ibexa-font-weight-bold;
+            font-size: $ibexa-text-font-size-extra-large;
 
-        &:focus {
-            outline: none;
+            &:focus {
+                outline: none;
+            }
         }
     }
 }
diff --git a/src/bundle/Resources/public/ts/admin.search.ts b/src/bundle/Resources/public/ts/admin.search.ts
index 52b7f673ec..23404c1996 100644
--- a/src/bundle/Resources/public/ts/admin.search.ts
+++ b/src/bundle/Resources/public/ts/admin.search.ts
@@ -4,7 +4,7 @@
     const headerSearchInput = document.querySelector<HTMLInputElement>('.ibexa-global-search__input');
     const languageSelector = document.querySelector<HTMLSelectElement>('.ibexa-filters__item--language-selector .ibexa-filters__select');
     const headerSearchSubmitBtn = document.querySelector<HTMLButtonElement>(
-        '.ibexa-main-header .ibexa-input-text-wrapper__action-btn--search',
+        '.ibexa-main-header .ids-input-text__search-btn, .ibexa-main-header .ibexa-input-text-wrapper__action-btn--search',
     );
 
     if (!headerSearchInput || !searchInput || !searchForm) {
diff --git a/src/bundle/Resources/views/themes/admin/account/login/index.html.twig b/src/bundle/Resources/views/themes/admin/account/login/index.html.twig
index 1b3ccfb103..0064172de6 100644
--- a/src/bundle/Resources/views/themes/admin/account/login/index.html.twig
+++ b/src/bundle/Resources/views/themes/admin/account/login/index.html.twig
@@ -24,42 +24,36 @@
                         <div class="ibexa-login__input-label-wrapper">
                             <label class="ibexa-label" for="username">{{ 'authentication.username'|trans|desc('Username') }}</label>
                         </div>
-                        {%- embed '@ibexadesign/ui/component/input_text.html.twig' -%}
-                            {% block content %}
-                                <input
-                                    type="text"
-                                    id="username"
-                                    class="form-control ibexa-input ibexa-input--text ibexa-login__input ibexa-login__input--name"
-                                    name="_username"
-                                    value="{{ last_username }}"
-                                    required="required"
-                                    autofocus="autofocus"
-                                    autocomplete="on"
-                                    tabindex="1"
-                                    placeholder=" "
-                                />
-                            {% endblock %}
-                        {%- endembed -%}
+                        {%- include '@ibexadesign/ui/component/input_text_ds.html.twig' with {
+                            type: 'text',
+                            input_attr: {
+                                id: 'username',
+                                class: 'form-control ibexa-input ibexa-input--text ibexa-login__input ibexa-login__input--name',
+                                name: '_username',
+                                value: last_username,
+                                required: true,
+                                autofocus: true,
+                                autocomplete: 'on',
+                                tabindex: '1',
+                                placeholder: ' '
+                            }
+                        } only -%}
                     </div>
                     <div class="form-group{% if error %} has-error{% endif %} position-relative">
                         <div class="ibexa-login__input-label-wrapper">
                             <label class="ibexa-label" for="password">{{ 'authentication.password'|trans|desc('Password') }}</label>
                         </div>
-                        {%- embed '@ibexadesign/ui/component/input_text.html.twig' with {
+                        {%- include '@ibexadesign/ui/component/input_text_ds.html.twig' with {
                             type: 'password',
-                        } -%}
-                            {% block content %}
-                                <input
-                                    type="password"
-                                    id="password"
-                                    class="form-control ibexa-input ibexa-input--text ibexa-login__input ibexa-login__input--password"
-                                    name="_password"
-                                    required="required"
-                                    tabindex="2"
-                                    placeholder=" "
-                                />
-                            {% endblock %}
-                        {%- endembed -%}
+                            input_attr: {
+                                id: 'password',
+                                class: 'form-control ibexa-input ibexa-input--text ibexa-login__input ibexa-login__input--password',
+                                name: '_password',
+                                required: true,
+                                tabindex: '2',
+                                placeholder: ' '
+                            }
+                        } only -%}
                     </div>
 
                     <input type="hidden" name="_csrf_token" value="{{ csrf_token("authenticate") }}" />
diff --git a/src/bundle/Resources/views/themes/admin/content_type/available_field_types.html.twig b/src/bundle/Resources/views/themes/admin/content_type/available_field_types.html.twig
index 46f5e98df7..e8860f475a 100644
--- a/src/bundle/Resources/views/themes/admin/content_type/available_field_types.html.twig
+++ b/src/bundle/Resources/views/themes/admin/content_type/available_field_types.html.twig
@@ -4,15 +4,15 @@
         <h3 class="ibexa-available-field-types__title">{{ 'content_type.view.edit.content_field_types'|trans|desc('Field types') }}</h3>
     </div>
     <div class="ibexa-available-field-types__search-bar">
-        {% embed '@ibexadesign/ui/component/input_text.html.twig' with { has_search: true, search_button_type: 'button' } %}
-            {% block content %}
-                <input
-                    type="text"
-                    class="ibexa-input ibexa-input--text ibexa-available-field-types__sidebar-filter form-control"
-                    placeholder="{{ 'content_type.view.edit.search'|trans|desc('Search...') }}"
-                />
-            {% endblock %}
-        {% endembed %}
+        {% include '@ibexadesign/ui/component/input_text_ds.html.twig' with {
+            has_search: true,
+            search_button_type: 'button',
+            input_attr: {
+                type: 'text',
+                class: 'ibexa-input ibexa-input--text ibexa-available-field-types__sidebar-filter form-control',
+                placeholder: 'content_type.view.edit.search'|trans|desc('Search...')
+            }
+        } only %}
     </div>
     <ul class="ibexa-available-field-types__list">
         {% for item in field_type_toolbar %}
diff --git a/src/bundle/Resources/views/themes/admin/ui/component/dropdown/dropdown.html.twig b/src/bundle/Resources/views/themes/admin/ui/component/dropdown/dropdown.html.twig
index a13d52a38e..990df6b6fa 100644
--- a/src/bundle/Resources/views/themes/admin/ui/component/dropdown/dropdown.html.twig
+++ b/src/bundle/Resources/views/themes/admin/ui/component/dropdown/dropdown.html.twig
@@ -149,15 +149,15 @@
                 {% endif %}
             {% endblock items_list_header %}
 
-            {%- embed '@ibexadesign/ui/component/input_text.html.twig' with { has_search: true } only -%}
-                {% block content %}
-                    <input
-                        type="text"
-                        placeholder="{{ 'dropdown.search'|trans|desc('Search...') }}"
-                        class="ibexa-dropdown__items-filter ibexa-input ibexa-input--text ibexa-input--small form-control"
-                    />
-                {% endblock %}
-            {%- endembed -%}
+            {%- include '@ibexadesign/ui/component/input_text_ds.html.twig' with {
+                has_search: true,
+                input_attr: {
+                    type: 'text',
+                    size: 'small',
+                    class: 'ibexa-dropdown__items-filter ibexa-input ibexa-input--text ibexa-input--small form-control',
+                    placeholder: 'dropdown.search'|trans|desc('Search...')
+                }
+            } only -%}
 
             {% if has_select_all_toggler and choices_flat|length >= min_select_all_toggler_items %}
                 {% set selection_toggler_label = value|length
diff --git a/src/bundle/Resources/views/themes/admin/ui/component/dropdown/ds_dropdown_single_from_choice_widget.html.twig b/src/bundle/Resources/views/themes/admin/ui/component/dropdown/ds_dropdown_single_from_choice_widget.html.twig
new file mode 100644
index 0000000000..f4a19fcc3c
--- /dev/null
+++ b/src/bundle/Resources/views/themes/admin/ui/component/dropdown/ds_dropdown_single_from_choice_widget.html.twig
@@ -0,0 +1,29 @@
+{% extends '@IbexaDesignSystemTwig/themes/standard/design_system/partials/base_dropdown.html.twig' %}
+
+{% set class = 'ids-dropdown--single' %}
+{% set is_empty = (value|default('') == '') %}
+{% set placeholder_item = items|filter(item => item.id == '')|first %}
+{% set placeholder_label = placeholder_item.label|default('ibexa.dropdown.placeholder'|trans) %}
+{% set selected_item = items|filter(item => item.id == value|default(''))|first %}
+{% set selected_label = selected_item.label|default('') %}
+{% set max_visible_items = max_visible_items|default(10) %}
+{% set is_search_visible = items|length > max_visible_items %}
+{% set item_template_props = item_template_props|default({
+    id: '{{ id }}',
+    label: '{{ label }}',
+}) %}
+{% set error = error|default(false) %}
+
+{% block source %}
+    {{ source|raw }}
+{% endblock source %}
+
+{% block placeholder %}
+    <div class="ids-dropdown__placeholder"{% if not is_empty %} hidden{% endif %}>
+        {{ placeholder_label }}
+    </div>
+{% endblock placeholder %}
+
+{% block selected_items %}
+    {{ selected_label }}
+{% endblock selected_items %}
diff --git a/src/bundle/Resources/views/themes/admin/ui/component/input_text_ds.html.twig b/src/bundle/Resources/views/themes/admin/ui/component/input_text_ds.html.twig
new file mode 100644
index 0000000000..41ff87758f
--- /dev/null
+++ b/src/bundle/Resources/views/themes/admin/ui/component/input_text_ds.html.twig
@@ -0,0 +1,131 @@
+{% import '@ibexadesign/ui/component/macros.html.twig' as html %}
+
+{% set type = type|default('text') %}
+{% set normalized_type = is_password_input|default(false) ? 'password' : type %}
+{% set is_password_type = normalized_type == 'password' %}
+{% set is_password_input = is_password_input|default(is_password_type) %}
+{% set has_search = has_search|default(false) %}
+{% set is_multiline = is_multiline|default(false) %}
+{% set is_disabled = is_disabled|default(false) %}
+{% set input_attr = input_attr|default({}) %}
+{% set extra_btn = extra_btn|default({})|merge({
+    label: extra_btn.label|default(''),
+    attr: extra_btn.attr|default({})|merge({
+        type: extra_btn.type|default('button'),
+        class: (extra_btn.attr.class|default('')
+            ~ ' btn ibexa-btn ibexa-btn--info ibexa-input-text-wrapper__action-btn--extra-btn'
+        )|trim
+    })
+}) %}
+{% set should_clear_button_send_form = should_clear_button_send_form|default(false) %}
+{% set wrapper_attr = wrapper_attr|default({}) %}
+{% set ds_supported_types = ['text', 'password', 'email', 'number', 'tel', 'search', 'url'] %}
+{% set can_use_ds_input = input_attr is not empty
+    and not is_multiline
+    and normalized_type in ds_supported_types
+    and right_side_label is not defined
+%}
+
+{% if can_use_ds_input %}
+    {% set ds_input = input_attr|merge({
+        type: normalized_type,
+        disabled: is_disabled,
+        has_search_action: has_search and normalized_type != 'password',
+        search_button_type: search_button_type|default('submit'),
+        send_form_after_clearing: should_clear_button_send_form,
+    }) %}
+    {% set extra_btn_markup %}
+        {% if extra_btn.label is not empty %}
+            <button {{ html.attributes(extra_btn.attr) }}>
+                {{- extra_btn.label -}}
+            </button>
+        {% endif %}
+    {% endset %}
+    {% set combined_actions_after = '' %}
+    {% if extra_btn.label is not empty %}
+        {% set combined_actions_after = combined_actions_after ~ extra_btn_markup %}
+    {% endif %}
+    {% if extra_actions_after|default(null) is not empty %}
+        {% set combined_actions_after = combined_actions_after ~ extra_actions_after %}
+    {% endif %}
+    {% if combined_actions_after is not empty %}
+        {% set ds_input = ds_input|merge({ actions_after: combined_actions_after }) %}
+    {% endif %}
+
+    <twig:ibexa:input_text:input {{ ...ds_input }} />
+    {{ block('extra_content') }}
+{% else %}
+    {% set wrapper_attr = wrapper_attr|merge({
+        class: (wrapper_attr.class|default('')
+            ~ ' ibexa-input-text-wrapper'
+            ~ (has_search ? ' ibexa-input-text-wrapper--search')
+            ~ (is_password_input ? ' ibexa-input-text-wrapper--password')
+            ~ " ibexa-input-text-wrapper--type-#{type}"
+            ~ (extra_btn.label ? ' ibexa-input-text-wrapper--extra-btn')
+            ~ (is_multiline ? ' ibexa-input-text-wrapper--multiline')
+            ~ (right_side_label is defined ? ' ibexa-input-text-wrapper--has-right-side-label')
+        )|trim
+    }) %}
+
+    <div {{ html.attributes(wrapper_attr) }}>
+        <div class="ibexa-input-text-wrapper__input-wrapper">
+            {% block content %}{% endblock %}
+            <div class="ibexa-input-text-wrapper__actions">
+                {% block actions %}
+                    <button
+                        type="button"
+                        class="btn ibexa-btn ibexa-btn--ghost ibexa-btn--no-text ibexa-input-text-wrapper__action-btn ibexa-input-text-wrapper__action-btn--clear"
+                        tabindex="-1"
+                        {{ is_disabled ? 'disabled' }}
+                        {% if should_clear_button_send_form %}data-send-form-after-clearing{% endif %}
+                    >
+                        <svg class="ibexa-icon ibexa-icon--tiny-small">
+                            <use xlink:href="{{ ibexa_icon_path('discard') }}"></use>
+                        </svg>
+                    </button>
+                    {% if is_password_input %}
+                        <button
+                            type="button"
+                            class="btn ibexa-btn ibexa-btn--ghost ibexa-btn--no-text ibexa-input-text-wrapper__action-btn ibexa-input-text-wrapper__action-btn--password-toggler"
+                            tabindex="5"
+                            {{ is_disabled ? 'disabled' }}
+                        >
+                            <svg class="ibexa-icon ibexa-icon--small-medium ibexa-input-text-wrapper__password-show">
+                                <use xlink:href="{{ ibexa_icon_path('view') }}"></use>
+                            </svg>
+                            <svg class="ibexa-icon ibexa-icon--small-medium ibexa-input-text-wrapper__password-hide d-none">
+                                <use xlink:href="{{ ibexa_icon_path('view-hide') }}"></use>
+                            </svg>
+                        </button>
+                    {% elseif has_search %}
+                        <button
+                            type="{{ search_button_type|default('submit') }}"
+                            class="btn ibexa-btn ibexa-btn--ghost ibexa-btn--no-text ibexa-input-text-wrapper__action-btn ibexa-input-text-wrapper__action-btn--search"
+                            tabindex="-1"
+                            {{ is_disabled ? 'disabled' }}
+                        >
+                            <svg class="ibexa-icon ibexa-icon--small-medium">
+                                <use xlink:href="{{ ibexa_icon_path('search') }}"></use>
+                            </svg>
+                        </button>
+                    {% elseif extra_btn.label is not empty %}
+                        <button {{ html.attributes(extra_btn.attr) }}>
+                            {{- extra_btn.label -}}
+                        </button>
+                    {% endif %}
+                    {{ extra_actions_after|default(null) }}
+                {% endblock %}
+            </div>
+        </div>
+        {% block right_side_label %}
+            {% if right_side_label is defined %}
+                <div class="ibexa-input-text-wrapper__right-side-label-wrapper">
+                    <div class="ibexa-input-text-wrapper__right-side-label">
+                        {{ right_side_label }}
+                    </div>
+                </div>
+            {% endif %}
+        {% endblock %}
+        {% block extra_content %}{% endblock %}
+    </div>
+{% endif %}
diff --git a/src/bundle/Resources/views/themes/admin/ui/component/multilevel_popup_menu/multilevel_popup_menu_branch.html.twig b/src/bundle/Resources/views/themes/admin/ui/component/multilevel_popup_menu/multilevel_popup_menu_branch.html.twig
index a202ffe690..c3860086f8 100644
--- a/src/bundle/Resources/views/themes/admin/ui/component/multilevel_popup_menu/multilevel_popup_menu_branch.html.twig
+++ b/src/bundle/Resources/views/themes/admin/ui/component/multilevel_popup_menu/multilevel_popup_menu_branch.html.twig
@@ -20,17 +20,15 @@
     <div {{ html.attributes(branch_attr, is_template) }}>
         <div class="ibexa-multilevel-popup-menu__search {{ not hasSearch|default(false) ? 'ibexa-multilevel-popup-menu__search--hidden' }}">
             {% block search %}
-                {%- embed '@ibexadesign/ui/component/input_text.html.twig' with { has_search: true } only -%}
-                    {% block content %}
-                        {% trans_default_domain 'ibexa_multilevel_popup_menu' %}
-
-                        <input
-                            type="text"
-                            placeholder="{{ 'search.placeholder'|trans|desc('Search...') }}"
-                            class="ibexa-input ibexa-input--small ibexa-input--text form-control ibexa-multilevel-popup-menu__search-input"
-                        />
-                    {% endblock %}
-                {%- endembed -%}
+                {%- include '@ibexadesign/ui/component/input_text_ds.html.twig' with {
+                    has_search: true,
+                    input_attr: {
+                        type: 'text',
+                        size: 'small',
+                        class: 'ibexa-input ibexa-input--small ibexa-input--text form-control ibexa-multilevel-popup-menu__search-input',
+                        placeholder: 'search.placeholder'|trans({}, 'ibexa_multilevel_popup_menu')|desc('Search...')
+                    }
+                } only -%}
             {% endblock %}
         </div>
 
diff --git a/src/bundle/Resources/views/themes/admin/ui/form_fields.html.twig b/src/bundle/Resources/views/themes/admin/ui/form_fields.html.twig
index 91a7092d11..f5f5a8805b 100644
--- a/src/bundle/Resources/views/themes/admin/ui/form_fields.html.twig
+++ b/src/bundle/Resources/views/themes/admin/ui/form_fields.html.twig
@@ -396,22 +396,32 @@
     {%- set has_search = has_search|default(false) -%}
     {%- set should_clear_button_send_form = should_clear_button_send_form|default(false) -%}
     {%- set type = type|default('text') -%}
-    {%- set is_text_input = type == 'text' or type == 'number' or force_text|default(false) -%}
+    {%- set is_text_input = type in ['text', 'number', 'password', 'email', 'url', 'tel', 'search'] or force_text|default(false) -%}
     {%- if is_text_input -%}
         {%- set attr = attr|merge({class: (attr.class|default('') ~ ' ibexa-input ibexa-input--text')|trim}) -%}
         {%- set empty_placeholder_for_hiding_clear_btn_with_css = ' ' -%}
         {%- set attr = attr|merge({placeholder: (attr.placeholder is defined and attr.placeholder is not null) ? attr.placeholder : empty_placeholder_for_hiding_clear_btn_with_css}) -%}
+        {%- set input_attr = attr|merge({
+            id: id,
+            name: full_name,
+            value: value is same as(null) ? '' : value,
+        }) -%}
         {%- set input_html -%}
             {{ parent() }}
         {%- endset -%}
-        {%- embed '@ibexadesign/ui/component/input_text.html.twig' with { has_search, should_clear_button_send_form } -%}
+        {%- embed '@ibexadesign/ui/component/input_text_ds.html.twig' with {
+            has_search,
+            should_clear_button_send_form,
+            input_attr,
+            is_disabled: attr.disabled|default(false) or disabled|default(false),
+            extra_actions_after: extra_actions_after|default(null),
+        } -%}
             {% block content %}
                 {{ input_html }}
             {% endblock %}
 
             {% block actions %}
                 {{ parent() }}
-                {{ extra_actions_after|default(null) }}
             {% endblock %}
         {%- endembed -%}
     {%- else -%}
diff --git a/src/bundle/Resources/views/themes/admin/ui/search/filters.html.twig b/src/bundle/Resources/views/themes/admin/ui/search/filters.html.twig
index 60bd8e9b09..5f1afc1613 100644
--- a/src/bundle/Resources/views/themes/admin/ui/search/filters.html.twig
+++ b/src/bundle/Resources/views/themes/admin/ui/search/filters.html.twig
@@ -59,18 +59,15 @@
         <div class="ibexa-filters__item ibexa-filters__item--creator">
             <label class="ibexa-label">{{ 'search.creator'|trans|desc('Creator') }}</label>
             {% set creator = form.vars.data.creator %}
-            {% embed '@ibexadesign/ui/component/input_text.html.twig' with { has_search: false } %}
-                {% trans_default_domain 'ibexa_search' %}
-                {% block content %}
-                    <input
-                        type="text"
-                        class="ibexa-input ibexa-input--text ibexa-available-field-types__sidebar-filter form-control"
-                        data-content-type-identifiers="{{ user_content_type_identifier|join(',') }}"
-                        value="{{ creator is not empty ? ibexa_content_name(creator) }}"
-                        placeholder="{{ 'search.creator_input.placeholder'|trans|desc('Type creator\'s name') }}"
-                    />
-                {% endblock %}
-            {% endembed %}
+            {% include '@ibexadesign/ui/component/input_text_ds.html.twig' with {
+                input_attr: {
+                    type: 'text',
+                    class: 'ibexa-input ibexa-input--text ibexa-available-field-types__sidebar-filter form-control',
+                    'data-content-type-identifiers': user_content_type_identifier|join(','),
+                    value: creator is not empty ? ibexa_content_name(creator) : '',
+                    placeholder: 'search.creator_input.placeholder'|trans|desc('Type creator\'s name')
+                }
+            } %}
             <ul class="ibexa-filters__user-list ibexa-filters__user-list--hidden"></ul>
         </div>
         {% if form.section is defined %}
diff --git a/src/bundle/Resources/views/themes/admin/user/invitation/modal.html.twig b/src/bundle/Resources/views/themes/admin/user/invitation/modal.html.twig
index 6caaa12d75..c3558907c7 100644
--- a/src/bundle/Resources/views/themes/admin/user/invitation/modal.html.twig
+++ b/src/bundle/Resources/views/themes/admin/user/invitation/modal.html.twig
@@ -1,15 +1,5 @@
 {% trans_default_domain 'ibexa_user_invitation' %}
 
-{% set top_input_content %}
-    {% block top_input_content %}
-        <input
-            type="text"
-            class="form-control ibexa-input ibexa-input--text ibexa-user-invitation-modal__search-input"
-            placeholder="{{ 'modal.search.placeholder'|trans|desc('Search...') }}"
-        />
-    {% endblock %}
-{% endset %}
-
 {% set extra_filters %}
     {% block extra_filters %}{% endblock %}
 {% endset %}
@@ -84,12 +74,15 @@
                         </button>
                     {% endblock %}
                 {% endembed %}
-                {% embed '@ibexadesign/ui/component/input_text.html.twig' with { has_search: true, search_button_type: 'button' } %}
-                    {% trans_default_domain 'ibexa_user_invitation' %}
-                    {% block content %}
-                        {{ top_input_content }}
-                    {% endblock %}
-                {% endembed %}
+                {% include '@ibexadesign/ui/component/input_text_ds.html.twig' with {
+                    has_search: true,
+                    search_button_type: 'button',
+                    input_attr: {
+                        type: 'text',
+                        class: 'form-control ibexa-input ibexa-input--text ibexa-user-invitation-modal__search-input',
+                        placeholder: 'modal.search.placeholder'|trans|desc('Search...')
+                    },
+                } %}
                 {{ extra_filters }}
                 <div class="ibexa-user-invitation-modal__labels">
                     {{ entries_labels }}
diff --git a/src/bundle/ui-dev/src/modules/common/dropdown/dropdown.js b/src/bundle/ui-dev/src/modules/common/dropdown/dropdown.js
index e913b9e104..2b27cb4e2d 100644
--- a/src/bundle/ui-dev/src/modules/common/dropdown/dropdown.js
+++ b/src/bundle/ui-dev/src/modules/common/dropdown/dropdown.js
@@ -1,6 +1,7 @@
 import React, { useState, useEffect, useRef, useLayoutEffect } from 'react';
 import ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
+import { InputTextInput, InputTextInputSize } from '@ids-components/components/InputText';
 
 import { createCssClassNames } from '../../common/helpers/css.class.names';
 import Icon from '../../common/icon/icon';
@@ -50,7 +51,7 @@ const Dropdown = ({
         calculateAndSetItemsListStyles();
         setIsExpanded((prevState) => !prevState && !disabled);
     };
-    const updateFilterValue = (event) => setFilterText(event.target.value);
+    const updateFilterValue = (value) => setFilterText(value);
     const resetInputValue = () => setFilterText('');
     const showItem = (itemValue, searchedTerm) => {
         if (searchedTerm.length < 3) {
@@ -124,34 +125,28 @@ const Dropdown = ({
 
         return (
             <div className={itemsContainerClass} style={itemsListStyles} ref={containerItemsRef}>
-                <div className="ibexa-input-text-wrapper ibexa-input-text-wrapper--search">
-                    <div className="ibexa-input-text-wrapper__input-wrapper">
-                        <input
-                            type="text"
-                            placeholder={searchPlaceholder}
-                            className="ibexa-dropdown__items-filter ibexa-input ibexa-input--small ibexa-input--text form-control"
-                            onChange={updateFilterValue}
-                            value={filterText}
-                        />
-                        <div className="ibexa-input-text-wrapper__actions">
-                            <button
-                                type="button"
-                                className="btn ibexa-btn ibexa-btn--ghost ibexa-btn--no-text ibexa-input-text-wrapper__action-btn ibexa-input-text-wrapper__action-btn--clear"
-                                tabIndex="-1"
-                                onClick={resetInputValue}
-                            >
-                                <Icon name="discard" extraClasses="ibexa-icon--tiny-small" />
-                            </button>
-                            <button
-                                type="button"
-                                className="btn ibexa-btn ibexa-btn--ghost ibexa-btn--no-text ibexa-input-text-wrapper__action-btn ibexa-input-text-wrapper__action-btn--search"
-                                tabIndex="-1"
-                            >
-                                <Icon name="search" extraClasses="ibexa-icon--small-medium" />
-                            </button>
-                        </div>
-                    </div>
-                </div>
+                <InputTextInput
+                    className="ibexa-dropdown__items-filter-wrapper"
+                    extraAria={{
+                        className: 'ids-input ids-input--text ids-input--small ibexa-dropdown__items-filter',
+                    }}
+                    hasSearchAction={true}
+                    name="dropdown-filter"
+                    onChange={updateFilterValue}
+                    placeholder={searchPlaceholder}
+                    processActions={(actions) =>
+                        actions.map((action) => ({
+                            ...action,
+                            component:
+                                action.id === 'clear'
+                                    ? React.cloneElement(action.component, { onClick: resetInputValue })
+                                    : action.component,
+                        }))
+                    }
+                    searchButtonType="button"
+                    size={InputTextInputSize.Small}
+                    value={filterText}
+                />
                 <ul className="ibexa-dropdown__items-list">{options.map(renderItem)}</ul>
             </div>
         );
diff --git a/src/bundle/ui-dev/src/modules/common/input/filter.search.js b/src/bundle/ui-dev/src/modules/common/input/filter.search.js
index 110d5236f3..e58d2d13a0 100644
--- a/src/bundle/ui-dev/src/modules/common/input/filter.search.js
+++ b/src/bundle/ui-dev/src/modules/common/input/filter.search.js
@@ -1,20 +1,26 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { createCssClassNames } from '../../common/helpers/css.class.names';
+import { InputTextInput } from '@ids-components/components/InputText';
 import { getTranslator } from '@ibexa-admin-ui/src/bundle/Resources/public/js/scripts/helpers/context.helper';
 
 const Search = ({ onChange, placeholder = '', extraClasses = '', value }) => {
     const Translator = getTranslator();
     const inputPlaceholder =
         placeholder || Translator.trans(/* @Desc("Search...") */ 'search.placeholder', {}, 'ibexa_universal_discovery_widget');
-    const searchClassName = createCssClassNames({
-        'form-control': true,
-        'ibexa-input': true,
-        'ibexa-input--text': true,
-        [extraClasses]: true,
-    });
 
-    return <input type="text" name="filter" placeholder={inputPlaceholder} value={value} onChange={onChange} className={searchClassName} />;
+    return (
+        <InputTextInput
+            extraAria={{
+                className: `ids-input ids-input--text ${extraClasses}`.trim(),
+            }}
+            hasSearchAction={true}
+            name="filter"
+            onChange={(nextValue, event) => onChange(event ?? { target: { value: nextValue } })}
+            placeholder={inputPlaceholder}
+            searchButtonType="button"
+            value={value}
+        />
+    );
 };
 
 Search.propTypes = {
diff --git a/src/bundle/ui-dev/src/modules/common/popup-menu/popup.menu.search.js b/src/bundle/ui-dev/src/modules/common/popup-menu/popup.menu.search.js
index 8676643b2a..a8ba813253 100644
--- a/src/bundle/ui-dev/src/modules/common/popup-menu/popup.menu.search.js
+++ b/src/bundle/ui-dev/src/modules/common/popup-menu/popup.menu.search.js
@@ -1,8 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { InputTextInput, InputTextInputSize } from '@ids-components/components/InputText';
 
 import { getTranslator } from '@ibexa-admin-ui/src/bundle/Resources/public/js/scripts/helpers/context.helper';
-import Icon from '@ibexa-admin-ui/src/bundle/ui-dev/src/modules/common/icon/icon';
 
 const MIN_SEARCH_ITEMS_DEFAULT = 5;
 
@@ -18,34 +18,28 @@ const PopupMenuSearch = ({ numberOfItems, filterText = '', setFilterText }) => {
 
     return (
         <div className="c-popup-menu__search">
-            <div className="ibexa-input-text-wrapper">
-                <div className="ibexa-input-text-wrapper__input-wrapper">
-                    <input
-                        type="text"
-                        placeholder={searchPlaceholder}
-                        className="c-popup-menu__search-input ibexa-input ibexa-input--small ibexa-input--text form-control"
-                        onChange={updateFilterValue}
-                        value={filterText}
-                    />
-                    <div className="ibexa-input-text-wrapper__actions">
-                        <button
-                            type="button"
-                            className="btn ibexa-input-text-wrapper__action-btn ibexa-input-text-wrapper__action-btn--clear"
-                            tabIndex="-1"
-                            onClick={resetInputValue}
-                        >
-                            <Icon name="discard" extraClasses="ibexa-icon--tiny-small" />
-                        </button>
-                        <button
-                            type="button"
-                            className="btn ibexa-input-text-wrapper__action-btn ibexa-input-text-wrapper__action-btn--search"
-                            tabIndex="-1"
-                        >
-                            <Icon name="search" extraClasses="ibexa-icon--small-medium" />
-                        </button>
-                    </div>
-                </div>
-            </div>
+            <InputTextInput
+                className="c-popup-menu__search-input-wrapper"
+                extraAria={{
+                    className: 'ids-input ids-input--text ids-input--small c-popup-menu__search-input',
+                }}
+                hasSearchAction={true}
+                name="popup-menu-search"
+                onChange={(value) => updateFilterValue({ target: { value } })}
+                placeholder={searchPlaceholder}
+                processActions={(actions) =>
+                    actions.map((action) => ({
+                        ...action,
+                        component:
+                            action.id === 'clear'
+                                ? React.cloneElement(action.component, { onClick: resetInputValue })
+                                : action.component,
+                    }))
+                }
+                searchButtonType="button"
+                size={InputTextInputSize.Small}
+                value={filterText}
+            />
         </div>
     );
 };
diff --git a/src/bundle/ui-dev/src/modules/common/taggify/taggify.js b/src/bundle/ui-dev/src/modules/common/taggify/taggify.js
index 6f8cf10b42..cf0c00c7a8 100644
--- a/src/bundle/ui-dev/src/modules/common/taggify/taggify.js
+++ b/src/bundle/ui-dev/src/modules/common/taggify/taggify.js
@@ -1,5 +1,6 @@
 import React, { useState, useEffect, useRef, useImperativeHandle, forwardRef } from 'react';
 import PropTypes from 'prop-types';
+import { InputTextInput } from '@ids-components/components/InputText';
 
 import Icon from '../icon/icon';
 import Tag from '../tag/tag';
@@ -74,14 +75,18 @@ const Taggify = forwardRef(
             >
                 <div className="c-taggify__adding-area">
                     <div className="c-taggify__inputs">
-                        <input
+                        <InputTextInput
+                            className="c-taggify__new-tag-input-wrapper"
+                            extraAria={{
+                                className: 'c-taggify__new-tag-input',
+                                onKeyUp: handleInputKeyUp,
+                            }}
+                            name="taggify-input"
+                            onBlur={() => addTags([newTagContent])}
+                            onChange={setNewTagContent}
+                            processActions={() => []}
                             ref={newTagContentInputRef}
-                            className="c-taggify__new-tag-input"
-                            type="text"
                             value={newTagContent}
-                            onChange={({ currentTarget }) => setNewTagContent(currentTarget.value)}
-                            onKeyUp={handleInputKeyUp}
-                            onBlur={() => addTags([newTagContent])}
                         />
                     </div>
                     <div className="c-taggify__tags">
diff --git a/src/bundle/ui-dev/src/modules/sub-items/components/sub-items-list/instant.filter.component.js b/src/bundle/ui-dev/src/modules/sub-items/components/sub-items-list/instant.filter.component.js
index 1382fc6bcc..f18a5c16cc 100644
--- a/src/bundle/ui-dev/src/modules/sub-items/components/sub-items-list/instant.filter.component.js
+++ b/src/bundle/ui-dev/src/modules/sub-items/components/sub-items-list/instant.filter.component.js
@@ -1,5 +1,6 @@
 import React, { useState, useMemo } from 'react';
 import PropTypes from 'prop-types';
+import { InputTextInput } from '@ids-components/components/InputText';
 
 import { getTranslator } from '@ibexa-admin-ui/src/bundle/Resources/public/js/scripts/helpers/context.helper';
 import { createCssClassNames } from '@ibexa-admin-ui-modules/common/helpers/css.class.names';
@@ -26,16 +27,18 @@ const InstantFilter = ({ items = [], handleItemChange = () => {}, isSearchEnable
     }, [items, filterQuery]);
 
     return (
-        <div className="ibexa-instant-filter">
-            <div className={searchInputWrapperClassName}>
-                <input
-                    type="text"
-                    className="ibexa-instant-filter__input ibexa-input ibexa-input--text form-control"
-                    placeholder={Translator.trans(/*@Desc("Search...")*/ 'instant.filter.placeholder', {}, 'ibexa_sub_items')}
-                    value={filterQuery}
-                    onChange={(event) => setFilterQuery(event.target.value)}
-                />
-            </div>
+            <div className="ibexa-instant-filter">
+                <div className={searchInputWrapperClassName}>
+                    <InputTextInput
+                        extraAria={{
+                            className: 'ids-input ids-input--text ibexa-instant-filter__input',
+                        }}
+                        name="sub-items-filter"
+                        onChange={setFilterQuery}
+                        placeholder={Translator.trans(/*@Desc("Search...")*/ 'instant.filter.placeholder', {}, 'ibexa_sub_items')}
+                        value={filterQuery}
+                    />
+                </div>
             <div className="ibexa-instant-filter__desc">
                 {Translator.trans(/*@Desc("Languages")*/ 'instant.filter.languages.select_language.desc', {}, 'ibexa_sub_items')}
             </div>
diff --git a/src/bundle/ui-dev/src/modules/sub-items/components/table-view/table.view.item.component.js b/src/bundle/ui-dev/src/modules/sub-items/components/table-view/table.view.item.component.js
index 76087cc155..9c778798ea 100644
--- a/src/bundle/ui-dev/src/modules/sub-items/components/table-view/table.view.item.component.js
+++ b/src/bundle/ui-dev/src/modules/sub-items/components/table-view/table.view.item.component.js
@@ -1,5 +1,6 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
+import { InputTextInput, InputTextInputSize } from '@ids-components/components/InputText';
 
 import { getTranslator } from '@ibexa-admin-ui-helpers/context.helper';
 import { getContentTypeIconUrl } from '@ibexa-admin-ui-helpers/content.type.helper';
@@ -196,15 +197,12 @@ export default class TableViewItemComponent extends PureComponent {
     renderPriorityCell() {
         const inputAttrs = {
             type: 'number',
-            defaultValue: this.state.priorityValue,
-            onChange: this.storePriorityValue,
+            value: this.state.priorityValue,
         };
         const priorityWrapperAttrs = {};
         const innerWrapperAttrs = {};
 
         if (!this.state.priorityInputEnabled) {
-            delete inputAttrs.defaultValue;
-            inputAttrs.value = this.state.priorityValue;
             priorityWrapperAttrs.onClick = this.enablePriorityInput;
             innerWrapperAttrs.hidden = true;
         }
@@ -212,9 +210,15 @@ export default class TableViewItemComponent extends PureComponent {
         return (
             <div className="c-table-view-item__priority-wrapper" {...priorityWrapperAttrs}>
                 <div className="c-table-view-item__inner-wrapper c-table-view-item__inner-wrapper--input">
-                    <input
-                        className="ibexa-input ibexa-input--text ibexa-input--small c-table-view-item__priority-value ibexa-input"
+                    <InputTextInput
+                        extraAria={{
+                            className: 'ids-input ids-input--text ids-input--small c-table-view-item__priority-value',
+                        }}
+                        name="priority"
+                        onChange={(value) => this.setState(() => ({ priorityValue: value }))}
+                        processActions={() => []}
                         ref={this.setPriorityInputRef}
+                        size={InputTextInputSize.Small}
                         {...inputAttrs}
                     />
                 </div>
diff --git a/src/bundle/ui-dev/src/modules/universal-discovery/components/content-create-widget/content.create.widget.js b/src/bundle/ui-dev/src/modules/universal-discovery/components/content-create-widget/content.create.widget.js
index 0d2615d30c..81337f63bc 100644
--- a/src/bundle/ui-dev/src/modules/universal-discovery/components/content-create-widget/content.create.widget.js
+++ b/src/bundle/ui-dev/src/modules/universal-discovery/components/content-create-widget/content.create.widget.js
@@ -1,4 +1,5 @@
 import React, { useContext, useState, useEffect, useRef, useMemo } from 'react';
+import { InputTextInput } from '@ids-components/components/InputText';
 
 import { createCssClassNames } from '../../../common/helpers/css.class.names';
 import Icon from '../../../common/icon/icon';
@@ -61,8 +62,8 @@ const ContentCreateWidget = () => {
     const close = () => {
         setCreateContentVisible(false);
     };
-    const updateFilterQuery = (event) => {
-        const query = event.target.value.toLowerCase();
+    const updateFilterQuery = (value) => {
+        const query = value.toLowerCase();
 
         setFilterQuery(query);
     };
@@ -201,13 +202,15 @@ const ContentCreateWidget = () => {
                     <div className="ibexa-extra-actions__section-content ibexa-extra-actions__section-content--content-type">
                         <div className="ibexa-instant-filter">
                             <div className={instantFilterInputWrapperClassName}>
-                                <input
-                                    value={filterQuery}
-                                    autoFocus={true}
-                                    className="ibexa-instant-filter__input ibexa-input ibexa-input--text form-control"
-                                    type="text"
-                                    placeholder={placeholder}
+                                <InputTextInput
+                                    extraAria={{
+                                        autoFocus: true,
+                                        className: 'ids-input ids-input--text ibexa-instant-filter__input',
+                                    }}
+                                    name="content-type-filter"
                                     onChange={updateFilterQuery}
+                                    placeholder={placeholder}
+                                    value={filterQuery}
                                 />
                             </div>
                         </div>
diff --git a/src/bundle/ui-dev/src/modules/universal-discovery/components/top-menu/top.menu.search.input.js b/src/bundle/ui-dev/src/modules/universal-discovery/components/top-menu/top.menu.search.input.js
index cb0e94888c..ef8654d858 100644
--- a/src/bundle/ui-dev/src/modules/universal-discovery/components/top-menu/top.menu.search.input.js
+++ b/src/bundle/ui-dev/src/modules/universal-discovery/components/top-menu/top.menu.search.input.js
@@ -1,5 +1,6 @@
 import React, { useState, useContext, useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
+import { InputTextInput } from '@ids-components/components/InputText';
 
 import { createCssClassNames } from '../../../common/helpers/css.class.names';
 import Icon from '../../../common/icon/icon';
@@ -21,7 +22,7 @@ const TopMenuSearchInput = ({ isSearchOpened, setIsSearchOpened }) => {
         'ibexa-btn--primary': isSearchOpened,
         'ibexa-btn--tertiary': !isSearchOpened,
     });
-    const updateInputValue = ({ target: { value } }) => setInputValue(value);
+    const updateInputValue = (value) => setInputValue(value);
     const handleSearchBtnClick = () => {
         if (isSearchOpened) {
             makeSearch(inputValue);
@@ -58,12 +59,15 @@ const TopMenuSearchInput = ({ isSearchOpened, setIsSearchOpened }) => {
 
     return (
         <div className={className}>
-            <input
-                ref={inputRef}
-                type="text"
-                className="c-top-menu-search-input__search-input"
+            <InputTextInput
+                extraAria={{
+                    className: 'c-top-menu-search-input__search-input',
+                    onKeyPress: handleKeyPressed,
+                }}
+                name="udw-top-menu-search"
                 onChange={updateInputValue}
-                onKeyPress={handleKeyPressed}
+                processActions={() => []}
+                ref={inputRef}
                 value={inputValue}
             />
             <button className={searchBtnClassName} type="button" onClick={handleSearchBtnClick}>
diff --git a/src/bundle/ui-dev/src/modules/universal-discovery/components/translation-selector/translation.selector.js b/src/bundle/ui-dev/src/modules/universal-discovery/components/translation-selector/translation.selector.js
index 2a73bc53cc..819952c45e 100644
--- a/src/bundle/ui-dev/src/modules/universal-discovery/components/translation-selector/translation.selector.js
+++ b/src/bundle/ui-dev/src/modules/universal-discovery/components/translation-selector/translation.selector.js
@@ -1,5 +1,6 @@
 import React, { useEffect, useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
+import { InputTextInput } from '@ids-components/components/InputText';
 
 import { createCssClassNames } from '../../../common/helpers/css.class.names';
 
@@ -88,16 +89,18 @@ const TranslationSelectorButton = ({ hideTranslationSelector, selectTranslation,
             <div className="ibexa-extra-actions__content">
                 <div className="ibexa-instant-filter">
                     <div className={searchInputWrapperClassName}>
-                        <input
-                            type="text"
-                            className="ibexa-instant-filter__input ibexa-input ibexa-input--text form-control"
+                        <InputTextInput
+                            extraAria={{
+                                className: 'ids-input ids-input--text ibexa-instant-filter__input',
+                            }}
+                            name="translation-filter"
+                            onChange={setFilterQuery}
                             placeholder={Translator.trans(
                                 /*@Desc("Search...")*/ 'instant.filter.languages.placeholder',
                                 {},
                                 'ibexa_universal_discovery_widget',
                             )}
                             value={filterQuery}
-                            onChange={(event) => setFilterQuery(event.target.value)}
                         />
                     </div>
                     <div className="ibexa-instant-filter__desc">
diff --git a/src/lib/Behat/Component/TrashSearch.php b/src/lib/Behat/Component/TrashSearch.php
index 9a5ed8204a..66f25e4bf5 100644
--- a/src/lib/Behat/Component/TrashSearch.php
+++ b/src/lib/Behat/Component/TrashSearch.php
@@ -75,7 +75,7 @@ protected function specifyLocators(): array
         new VisibleCSSLocator('mainSearchBox', '.ibexa-adaptive-filters--inside-container'),
         new VisibleCSSLocator('mainSearchBoxInput', '#trash_search_content_name'),
         new VisibleCSSLocator('creatorSearchBoxInput', '.ibexa-trash-search-form__item--creator .ibexa-input--text'),
-        new VisibleCSSLocator('mainSearchBoxConfirmButton', '.ibexa-adaptive-filters__static-left .ibexa-input-text-wrapper--type-text .ibexa-input-text-wrapper__action-btn--search'),
+        new VisibleCSSLocator('mainSearchBoxConfirmButton', '.ibexa-adaptive-filters__static-left .ibexa-input-text-wrapper--type-text .ibexa-input-text-wrapper__action-btn--search, .ibexa-adaptive-filters__static-left .ids-input-text__search-btn'),
         new VisibleCSSLocator('contentTypeFilterDropdown', 'label[for="trash_search_content_type"] ~ .ibexa-dropdown'),
         new VisibleCSSLocator('sectionFilterDropdown', 'label[for="trash_search_section"] ~ .ibexa-dropdown'),
         new VisibleCSSLocator('creatorFilterDropdown', '.ibexa-trash-search-form__user-list li'),
diff --git a/src/lib/Behat/Component/UpperMenu.php b/src/lib/Behat/Component/UpperMenu.php
index e4363c903e..bfca576b58 100644
--- a/src/lib/Behat/Component/UpperMenu.php
+++ b/src/lib/Behat/Component/UpperMenu.php
@@ -98,7 +98,7 @@ protected function specifyLocators(): array
             new VisibleCSSLocator('userSettingsItem', '.ibexa-popup-menu__item'),
             new VisibleCSSLocator('userSettingsPopup', '.ibexa-header-user-menu .ibexa-header-user-menu__popup-menu'),
             new VisibleCSSLocator('searchInput', '.ibexa-main-header #search_query'),
-            new VisibleCSSLocator('searchButton', '.ibexa-main-header .ibexa-input-text-wrapper__action-btn--search'),
+            new VisibleCSSLocator('searchButton', '.ibexa-main-header .ibexa-input-text-wrapper__action-btn--search, .ibexa-main-header .ids-input-text__search-btn'),
             new VisibleCSSLocator('userFocusEnabled', '[name="focus_mode_change"] .ibexa-toggle__label--on'),
             new VisibleCSSLocator('userFocusMode', '[name="focus_mode_change"] .ibexa-toggle__switcher'),
             new VisibleCSSLocator('focusModeBadge', '.ibexa-user-mode-badge'),