From 8ec44c4cce774dd757383d217a1d583bfd118262 Mon Sep 17 00:00:00 2001
From: Brian Hanson <brian@brianhanson.net>
Date: Fri, 24 Jul 2026 12:14:05 -0500
Subject: [PATCH 01/20] Fix some minor errors

---
 resources/js/common/components/UserMenu.vue | 2 +-
 resources/js/modules/slideout/slideout.ts   | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/resources/js/common/components/UserMenu.vue b/resources/js/common/components/UserMenu.vue
index 645dd6bf7df..8adbd6f3505 100644
--- a/resources/js/common/components/UserMenu.vue
+++ b/resources/js/common/components/UserMenu.vue
@@ -52,7 +52,7 @@
 </script>
 
 <template>
-  <form :action="LoginController.logout().url" method="post" ref="logoutForm">
+  <form :action="LoginController.logout['/{cpTrigger?}/logout']().url" method="post" ref="logoutForm">
     <input
       v-if="csrfTokenName && csrfTokenValue"
       type="hidden"
diff --git a/resources/js/modules/slideout/slideout.ts b/resources/js/modules/slideout/slideout.ts
index afe4fbb1892..c682d6e7e47 100644
--- a/resources/js/modules/slideout/slideout.ts
+++ b/resources/js/modules/slideout/slideout.ts
@@ -80,9 +80,9 @@ function resetBackgroundLayerVisibility(): void {
  * clones) into whichever container most recently initialized, since screen
  * readers only announce one status region at a time.
  */
-const $sharedLiveRegion = $(
-  '<span class="visually-hidden" role="status"></span>'
-);
+const $sharedLiveRegion = document.createElement('span');
+$sharedLiveRegion.classList.add('sr-only');
+$sharedLiveRegion.role = 'status';
 
 /**
  * Settings accepted by {@link Slideout}. Pass a `Partial<SlideoutSettings>` to

From 7b4de37a52920504db90a79d26ad74c60e64c112 Mon Sep 17 00:00:00 2001
From: Brian Hanson <brian@brianhanson.net>
Date: Fri, 24 Jul 2026 14:07:22 -0500
Subject: [PATCH 02/20] Replace InfoIcon.js

---
 packages/craftcms-legacy/cp/src/Craft.js      |  1 -
 packages/craftcms-legacy/cp/src/js/Craft.js   | 11 +--------
 .../craftcms-legacy/cp/src/js/InfoIcon.js     | 23 -------------------
 .../templates/_includes/disclosuremenu.twig   |  2 +-
 .../_includes/forms/editableTable.twig        |  2 +-
 .../templates/_includes/permissions.twig      |  2 +-
 src/Condition/BaseNumberConditionRule.php     |  2 +-
 src/Cp/Components/Checkbox.php                |  2 +-
 .../Conditions/MoneyFieldConditionRule.php    |  2 +-
 9 files changed, 7 insertions(+), 40 deletions(-)
 delete mode 100644 packages/craftcms-legacy/cp/src/js/InfoIcon.js

diff --git a/packages/craftcms-legacy/cp/src/Craft.js b/packages/craftcms-legacy/cp/src/Craft.js
index 622c9f7b839..06f157a6690 100644
--- a/packages/craftcms-legacy/cp/src/Craft.js
+++ b/packages/craftcms-legacy/cp/src/Craft.js
@@ -67,7 +67,6 @@ import './js/Grid.js';
 import './js/HandleGenerator.js';
 import './js/IconPicker.js';
 import './js/ImageUpload.js';
-import './js/InfoIcon.js';
 import './js/IntervalManager.js';
 import './js/LightSwitch.js';
 import './js/LinkField.js';
diff --git a/packages/craftcms-legacy/cp/src/js/Craft.js b/packages/craftcms-legacy/cp/src/js/Craft.js
index 1d01b189dcb..cc836a15cb3 100644
--- a/packages/craftcms-legacy/cp/src/js/Craft.js
+++ b/packages/craftcms-legacy/cp/src/js/Craft.js
@@ -1955,8 +1955,7 @@ $.extend(Craft, {
 
     /**
      * Swap any instruction text with info icons but avoid those with the class
-     * visually-hidden as those have already been swapped
-     * This needs to happen before the `infoicon` method
+     * visually-hidden as those have already been swapped.
      *
      * The primary place this happens is in the advanced settings of the link field
      * */
@@ -1975,8 +1974,6 @@ $.extend(Craft, {
         $instructions.addClass('sr-only');
       });
 
-    $('.info', $container).infoicon();
-
     // Open outbound links in new windows
     // hat tip: https://stackoverflow.com/a/2911045/1688568
     // ignore items in contenteditable divs (like redactor or ckeditor fields)
@@ -3099,12 +3096,6 @@ $.extend($.fn, {
     });
   },
 
-  infoicon: function () {
-    return this.each(function () {
-      new Craft.InfoIcon(this);
-    });
-  },
-
   /**
    * Sets the element as a container for a checkbox select.
    */
diff --git a/packages/craftcms-legacy/cp/src/js/InfoIcon.js b/packages/craftcms-legacy/cp/src/js/InfoIcon.js
deleted file mode 100644
index 6e36c6f4df7..00000000000
--- a/packages/craftcms-legacy/cp/src/js/InfoIcon.js
+++ /dev/null
@@ -1,23 +0,0 @@
-/** global: Craft */
-/** global: Garnish */
-/**
- * Info icon class
- */
-Craft.InfoIcon = Garnish.Base.extend({
-  /**
-   *
-   * @param HTMLElement icon
-   */
-  init: function (icon) {
-    console.warn(
-      'Craft.InfoIcon is deprecated. Use <craft-info-icon> instead.'
-    );
-    this.icon = document.createElement('craft-info-icon');
-    if (icon.classList.contains('disabled')) {
-      this.icon.setAttribute('disabled', '');
-    }
-    this.icon.innerHTML = icon.innerHTML;
-
-    icon.replaceWith(this.icon);
-  },
-});
diff --git a/resources/templates/_includes/disclosuremenu.twig b/resources/templates/_includes/disclosuremenu.twig
index d93e4fc1138..fb9fc062fd0 100644
--- a/resources/templates/_includes/disclosuremenu.twig
+++ b/resources/templates/_includes/disclosuremenu.twig
@@ -78,7 +78,7 @@
           <span class="visually-hidden">, selected</span>
         {% endif %}
         {% if item.info is defined and item.info is not empty %}
-          <span class="info">{{ item.info|e|cpmd }}</span>
+          <craft-info-icon>{{ item.info|e|cpmd }}</craft-info-icon>
         {% endif %}
       {% endapply -%}
     {% endtag %}
diff --git a/resources/templates/_includes/forms/editableTable.twig b/resources/templates/_includes/forms/editableTable.twig
index 388fb4d63c1..d7736645cd7 100644
--- a/resources/templates/_includes/forms/editableTable.twig
+++ b/resources/templates/_includes/forms/editableTable.twig
@@ -93,7 +93,7 @@
                 &nbsp;
               {%- endif %}
               {%- if col.info is defined -%}
-                <span class="info{% if static %} disabled{% endif %}"{% if static %} disabled=""{% endif %}>{{ col.info|md|raw }}</span>
+                <craft-info-icon{% if static %} disabled=""{% endif %}>{{ col.info|md|raw }}</craft-info-icon>
               {%- endif -%}
             </th>
           {% endfor %}
diff --git a/resources/templates/_includes/permissions.twig b/resources/templates/_includes/permissions.twig
index 4e6f1b8857b..4448a336330 100644
--- a/resources/templates/_includes/permissions.twig
+++ b/resources/templates/_includes/permissions.twig
@@ -42,7 +42,7 @@
                 }) }}
 
                 {% if permission.info ?? false %}
-                    <div class="info">{{ permission.info }}</div>
+                    <craft-info-icon>{{ permission.info }}</craft-info-icon>
                 {% endif %}
 
                 {% if permission.warning ?? false %}
diff --git a/src/Condition/BaseNumberConditionRule.php b/src/Condition/BaseNumberConditionRule.php
index d42b0d82a19..62de81f12e4 100644
--- a/src/Condition/BaseNumberConditionRule.php
+++ b/src/Condition/BaseNumberConditionRule.php
@@ -104,7 +104,7 @@ protected function inputHtml(): string
                 'autocomplete' => false,
                 'class' => 'flex-grow flex-shrink',
             ]).
-            Html::tag('span', t('The values are matched inclusively.'), ['class' => 'info']),
+            Html::tag('craft-info-icon', t('The values are matched inclusively.')),
             ['class' => 'flex flex-center']
         );
     }
diff --git a/src/Cp/Components/Checkbox.php b/src/Cp/Components/Checkbox.php
index 2d298b5d579..dc6cf9d92ad 100644
--- a/src/Cp/Components/Checkbox.php
+++ b/src/Cp/Components/Checkbox.php
@@ -330,7 +330,7 @@ protected function labelHtml(): string
         $content = implode('', array_filter([
             (bool) $this->evaluate($this->custom) ? Html::encode($this->customLabelText()) : $this->labelContentHtml($label),
             $info !== ''
-                ? Html::tag('span', app(ContentHtml::class)->parseMarkdown($info), ['class' => 'info'])
+                ? Html::tag('craft-info-icon', app(ContentHtml::class)->parseMarkdown($info))
                 : '',
         ]));
 
diff --git a/src/Field/Conditions/MoneyFieldConditionRule.php b/src/Field/Conditions/MoneyFieldConditionRule.php
index 07a4f6d72f2..5066f164d34 100644
--- a/src/Field/Conditions/MoneyFieldConditionRule.php
+++ b/src/Field/Conditions/MoneyFieldConditionRule.php
@@ -98,7 +98,7 @@ protected function inputHtml(): string
                     $this->inputOptions(),
                     ['id' => 'maxValue', 'name' => 'maxValue', 'value' => $maxValue]
                 )).
-                Html::tag('span', t('The values are matched inclusively.'), ['class' => 'info']),
+                Html::tag('craft-info-icon', t('The values are matched inclusively.')),
                 ['class' => 'flex flex-center']
             );
         }

From 22c25f4fad8073fbc01585cb58fc23d835eb55df Mon Sep 17 00:00:00 2001
From: Brian Hanson <brian@brianhanson.net>
Date: Fri, 24 Jul 2026 14:15:37 -0500
Subject: [PATCH 03/20] Move the deprecated .infoicon jQuery plugin to a
 yii2-adapter compat shim

Core now emits <craft-info-icon> directly, so the .info -> element upgrade no
longer belongs in the CP bundle. Register $.fn.infoicon as a deprecated BC
shim from the adapter instead:

- legacy/web/assets/cpcompat/cp-compat.js holds the shim (warns once on use,
  still auto-upgrades third-party .info markup); future CP jQuery plugin shims
  go in this file too.
- CpCompatAsset (LegacyAssetInterface) serves it via craftAsset(); the
  RegisterLegacyCompatAssets middleware registers it on CP requests through the
  craft.cp group, mirroring how core registers CpAsset.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../legacy/web/assets/cpcompat/cp-compat.js   | 85 +++++++++++++++++++
 .../src/Http/RegisterLegacyCompatAssets.php   | 29 +++++++
 .../src/View/LegacyAssets/CpCompatAsset.php   | 32 +++++++
 yii2-adapter/src/Yii2ServiceProvider.php      |  8 +-
 4 files changed, 153 insertions(+), 1 deletion(-)
 create mode 100644 yii2-adapter/legacy/web/assets/cpcompat/cp-compat.js
 create mode 100644 yii2-adapter/src/Http/RegisterLegacyCompatAssets.php
 create mode 100644 yii2-adapter/src/View/LegacyAssets/CpCompatAsset.php

diff --git a/yii2-adapter/legacy/web/assets/cpcompat/cp-compat.js b/yii2-adapter/legacy/web/assets/cpcompat/cp-compat.js
new file mode 100644
index 00000000000..bd94ebb5441
--- /dev/null
+++ b/yii2-adapter/legacy/web/assets/cpcompat/cp-compat.js
@@ -0,0 +1,85 @@
+/**
+ * Backwards-compatibility shims for deprecated legacy Craft CP jQuery plugins.
+ *
+ * These plugins used to live in the craftcms-legacy CP bundle. Core no longer
+ * uses them; each shim below keeps third-party callers working while logging a
+ * deprecation warning. Add future plugin shims to this file.
+ *
+ * Loaded CP-wide via CraftCms\Yii2Adapter\View\LegacyAssets\CpCompatAsset.
+ */
+(function () {
+  'use strict';
+
+  function init() {
+    var $ = window.jQuery;
+    if (!$) {
+      return;
+    }
+
+    registerInfoIcon($);
+  }
+
+  /**
+   * `$.fn.infoicon` — upgrades a legacy `.info` element to the
+   * `<craft-info-icon>` web component. Core now emits the element directly, so
+   * this only runs for third-party `.info` markup, and warns when it does.
+   */
+  function registerInfoIcon($) {
+    if ($.fn.infoicon) {
+      return;
+    }
+
+    var warned = false;
+
+    function upgrade() {
+      var icon = document.createElement('craft-info-icon');
+      if (this.classList.contains('disabled')) {
+        icon.setAttribute('disabled', '');
+      }
+      Array.prototype.slice.call(this.childNodes).forEach(function (node) {
+        icon.appendChild(node);
+      });
+      this.replaceWith(icon);
+    }
+
+    $.fn.infoicon = function () {
+      if (!warned) {
+        warned = true;
+        console.warn(
+          '$(…).infoicon() is deprecated. Emit <craft-info-icon> directly instead.'
+        );
+      }
+      return this.each(upgrade);
+    };
+
+    // Preserve BC auto-upgrade of legacy third-party `.info` markup injected
+    // after load (fires the warning only when such markup exists).
+    if (window.Craft && typeof Craft.initUiElements === 'function') {
+      var initUiElements = Craft.initUiElements;
+      Craft.initUiElements = function ($container) {
+        var result = initUiElements.apply(this, arguments);
+        try {
+          $('.info', $container || document).infoicon();
+        } catch (e) {
+          // no-op
+        }
+        return result;
+      };
+    }
+
+    // Initial pass for legacy `.info` already present in the DOM.
+    try {
+      $('.info').infoicon();
+    } catch (e) {
+      // no-op
+    }
+  }
+
+  // Run after the DOM is ready so jQuery and Craft (both loaded via blocking
+  // scripts) are guaranteed to be present, regardless of this file's position.
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', init);
+  } else {
+    init();
+  }
+})();
diff --git a/yii2-adapter/src/Http/RegisterLegacyCompatAssets.php b/yii2-adapter/src/Http/RegisterLegacyCompatAssets.php
new file mode 100644
index 00000000000..a460c1b7200
--- /dev/null
+++ b/yii2-adapter/src/Http/RegisterLegacyCompatAssets.php
@@ -0,0 +1,29 @@
+<?php
+
+declare(strict_types=1);
+
+namespace CraftCms\Yii2Adapter\Http;
+
+use Closure;
+use CraftCms\Cms\View\LegacyAssets\InternalAssetRegistry;
+use CraftCms\Yii2Adapter\View\LegacyAssets\CpCompatAsset;
+use Illuminate\Http\Request;
+
+/**
+ * Queues the deprecated legacy CP jQuery plugin shims ({@see CpCompatAsset})
+ * for CP requests, mirroring how core registers the CP bundle from
+ * `HandleInertiaRequests`. Runs per-request so it stays Octane-safe.
+ *
+ * @internal
+ */
+class RegisterLegacyCompatAssets
+{
+    public function handle(Request $request, Closure $next): mixed
+    {
+        if ($request->isCpRequest()) {
+            app(InternalAssetRegistry::class)->register(CpCompatAsset::class);
+        }
+
+        return $next($request);
+    }
+}
diff --git a/yii2-adapter/src/View/LegacyAssets/CpCompatAsset.php b/yii2-adapter/src/View/LegacyAssets/CpCompatAsset.php
new file mode 100644
index 00000000000..c93efbe1058
--- /dev/null
+++ b/yii2-adapter/src/View/LegacyAssets/CpCompatAsset.php
@@ -0,0 +1,32 @@
+<?php
+
+declare(strict_types=1);
+
+namespace CraftCms\Yii2Adapter\View\LegacyAssets;
+
+use CraftCms\Cms\View\HtmlStack;
+use CraftCms\Cms\View\LegacyAssets\LegacyAssetInterface;
+use CraftCms\Yii2Adapter\Http\RegisterLegacyCompatAssets;
+
+use function CraftCms\Cms\craftAsset;
+
+/**
+ * Backwards-compatibility shims for deprecated legacy CP jQuery plugins that
+ * used to live in the craftcms-legacy CP bundle.
+ *
+ * Core no longer uses these plugins; the shims exist so third-party code that
+ * still calls them keeps working, while logging a deprecation warning. The
+ * shims live in legacy/web/assets/cpcompat/cp-compat.js (published to
+ * public/vendor/craft/adapter/cpcompat). Loaded CP-wide via {@see RegisterLegacyCompatAssets}.
+ *
+ * @internal
+ */
+class CpCompatAsset implements LegacyAssetInterface
+{
+    public array $depends = [];
+
+    public function register(HtmlStack $htmlStack): void
+    {
+        $htmlStack->jsFile(craftAsset('adapter/cpcompat/cp-compat.js'));
+    }
+}
diff --git a/yii2-adapter/src/Yii2ServiceProvider.php b/yii2-adapter/src/Yii2ServiceProvider.php
index b0570ccc298..16c96e430d2 100644
--- a/yii2-adapter/src/Yii2ServiceProvider.php
+++ b/yii2-adapter/src/Yii2ServiceProvider.php
@@ -35,6 +35,7 @@
 use CraftCms\Yii2Adapter\Http\LegacyMiddleware;
 use CraftCms\Yii2Adapter\Http\NormalizeLegacyPath;
 use CraftCms\Yii2Adapter\Http\PrepareLegacyCraftApp;
+use CraftCms\Yii2Adapter\Http\RegisterLegacyCompatAssets;
 use CraftCms\Yii2Adapter\I18N\I18NCompatibility;
 use CraftCms\Yii2Adapter\Mail\TestToEmailAddressCompatibility;
 use CraftCms\Yii2Adapter\Mixins\CraftVariableMixin;
@@ -116,7 +117,7 @@ private function registerLegacySiteTemplateRoot(): void
     {
         Event::listen(SiteTemplateRootsResolving::class, function(SiteTemplateRootsResolving $event): void {
             $event->roots[''] ??= [];
-            $event->roots[''] = array_merge((array)$event->roots[''], [base_path('templates')]);
+            $event->roots[''] = array_merge((array) $event->roots[''], [base_path('templates')]);
         });
     }
 
@@ -214,6 +215,11 @@ public function boot(): void
         $kernel->prependMiddleware(CaptureOriginalActionRequestUri::class);
         $this->app->make(Router::class)->pushMiddlewareToGroup('craft', PrepareLegacyCraftApp::class);
         $this->app->make(Router::class)->pushMiddlewareToGroup('craft.web', HandleYiiSiteRouteFallback::class);
+        $this->app->make(Router::class)->pushMiddlewareToGroup('craft.cp', RegisterLegacyCompatAssets::class);
+
+        $this->publishes([
+            __DIR__ . '/../legacy/web/assets/cpcompat' => public_path('vendor/craft/adapter/cpcompat'),
+        ], ['craftcms', 'craftcms-assets']);
 
         $this->commands([
             AddCategoriesSupportCommand::class,

From cc3575a14fe61308a913ba52a309f8ab01ed425c Mon Sep 17 00:00:00 2001
From: Brian Hanson <brian@brianhanson.net>
Date: Mon, 27 Jul 2026 09:28:19 -0500
Subject: [PATCH 04/20] Add imperative turnOn/turnOff/turnIndeterminate API to
 craft-switch

Gives the craft-switch web component the runtime API the legacy
Craft.LightSwitch class exposed (turnOn/turnOff/turnIndeterminate with an
optional muteEvent argument, plus an `on` getter), so consumers can drive
it via querySelector('craft-switch').turnOn() instead of the jQuery
.data('lightswitch') seam. Muting is handled by a single suppress flag on
the change-dispatch choke point, held across the update cycle.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../src/components/switch/switch.test.ts      | 92 +++++++++++++++++++
 .../src/components/switch/switch.ts           | 64 +++++++++++++
 2 files changed, 156 insertions(+)

diff --git a/packages/craftcms-ui/src/components/switch/switch.test.ts b/packages/craftcms-ui/src/components/switch/switch.test.ts
index e1348274c90..ea8af477b75 100644
--- a/packages/craftcms-ui/src/components/switch/switch.test.ts
+++ b/packages/craftcms-ui/src/components/switch/switch.test.ts
@@ -577,3 +577,95 @@ describe('craft-switch toggle reveal', () => {
     }
   });
 });
+
+describe('craft-switch imperative API (legacy Craft.LightSwitch)', () => {
+  function countChanges(element: CraftSwitch): () => number {
+    let changes = 0;
+    element.addEventListener('change', () => {
+      changes++;
+    });
+    return () => changes;
+  }
+
+  it('turnOn()/turnOff() set the state, reflected by `on`', async () => {
+    const element = await createSwitch({label: 'Enabled'});
+    expect(element.on).toBe(false);
+
+    element.turnOn();
+    await element.updateComplete;
+    expect(element.checked).toBe(true);
+    expect(element.on).toBe(true);
+
+    element.turnOff();
+    await element.updateComplete;
+    expect(element.checked).toBe(false);
+    expect(element.on).toBe(false);
+  });
+
+  it('fires a single change event on unmuted turnOn()/turnOff()', async () => {
+    const element = await createSwitch({label: 'Enabled'});
+    const changes = countChanges(element);
+
+    element.turnOn();
+    await element.updateComplete;
+    expect(changes()).toBe(1);
+
+    element.turnOff();
+    await element.updateComplete;
+    expect(changes()).toBe(2);
+  });
+
+  it('suppresses the change event when muted', async () => {
+    const element = await createSwitch({label: 'Enabled'});
+    const changes = countChanges(element);
+
+    element.turnOn(true);
+    await element.updateComplete;
+    await element.updateComplete;
+    expect(element.checked).toBe(true);
+    expect(changes()).toBe(0);
+
+    // A later unmuted change still fires normally.
+    element.turnOff();
+    await element.updateComplete;
+    expect(changes()).toBe(1);
+  });
+
+  it('turnIndeterminate() sets the mixed state', async () => {
+    const element = await createSwitch({label: 'Enabled'});
+    element.turnOn(true);
+    await element.updateComplete;
+
+    element.turnIndeterminate();
+    await element.updateComplete;
+    expect(element.indeterminate).toBe(true);
+    expect(element.checked).toBe(false);
+  });
+
+  it('reports the posted value for each state', async () => {
+    const element = await createSwitch({
+      label: 'Enabled',
+      value: 'yes',
+      'indeterminate-value': 'maybe',
+    });
+    expect(element.postedValue).toBe('');
+
+    element.turnOn(true);
+    await element.updateComplete;
+    expect(element.postedValue).toBe('yes');
+
+    element.turnIndeterminate(true);
+    await element.updateComplete;
+    expect(element.postedValue).toBe('maybe');
+  });
+
+  it('ignores turn* calls when disabled', async () => {
+    const element = await createSwitch({label: 'Enabled', disabled: ''});
+    const changes = countChanges(element);
+
+    element.turnOn();
+    await element.updateComplete;
+    expect(element.checked).toBe(false);
+    expect(changes()).toBe(0);
+  });
+});
diff --git a/packages/craftcms-ui/src/components/switch/switch.ts b/packages/craftcms-ui/src/components/switch/switch.ts
index 143b70b8d34..039e38f4db3 100644
--- a/packages/craftcms-ui/src/components/switch/switch.ts
+++ b/packages/craftcms-ui/src/components/switch/switch.ts
@@ -66,6 +66,10 @@ export default class CraftSwitch extends LionSwitch {
 
   private __clickableExternalLabels = new Set<HTMLElement>();
 
+  // While true, programmatic state changes don't dispatch a `change` event,
+  // backing the `muteEvent` argument of turnOn()/turnOff()/turnIndeterminate().
+  #suppressNativeChange = false;
+
   override get slots() {
     return {
       ...super.slots,
@@ -276,6 +280,63 @@ export default class CraftSwitch extends LionSwitch {
     }
   }
 
+  // ---------------------------------------------------------------------------
+  // Imperative API mirroring the legacy Craft.LightSwitch, so code migrated off
+  // `$el.data('lightswitch')` can drive the element directly, e.g.
+  // `switchEl.turnOn(true)`. Pass `true` to suppress the change event.
+  // ---------------------------------------------------------------------------
+
+  /** Whether the switch is on. Mirrors the legacy lightswitch's `on`. */
+  get on(): boolean {
+    return this.checked;
+  }
+
+  /** The value the switch's hidden input posts for its current state. */
+  get postedValue(): string {
+    return this._postedValue;
+  }
+
+  turnOn(muteEvent = false): void {
+    this.#applyState(() => this._setCheckedState(true), muteEvent);
+  }
+
+  turnOff(muteEvent = false): void {
+    this.#applyState(() => this._setCheckedState(false), muteEvent);
+  }
+
+  turnIndeterminate(muteEvent = false): void {
+    this.#applyState(() => {
+      if (this.indeterminate && !this.checked) {
+        return;
+      }
+      const wasChecked = this.checked;
+      this.checked = false;
+      this.indeterminate = true;
+      if (!wasChecked) {
+        // `checked` didn't flip, so no `checked-changed` fires; dispatch the
+        // change ourselves, like the legacy lightswitch's turnIndeterminate().
+        this.__dispatchNativeChange();
+      }
+    }, muteEvent);
+  }
+
+  #applyState(mutate: () => void, muteEvent: boolean): void {
+    if (this.disabled) {
+      return;
+    }
+    if (!muteEvent) {
+      mutate();
+      return;
+    }
+    // Hold the flag until the update settles so both the synchronous dispatch
+    // (leaving indeterminate) and the async `checked-changed` forward are muted.
+    this.#suppressNativeChange = true;
+    mutate();
+    void this.updateComplete.then(() => {
+      this.#suppressNativeChange = false;
+    });
+  }
+
   private __onKeydown = (event: KeyboardEvent): void => {
     if (event.key !== 'ArrowLeft' && event.key !== 'ArrowRight') {
       return;
@@ -295,6 +356,9 @@ export default class CraftSwitch extends LionSwitch {
   };
 
   private __dispatchNativeChange(): void {
+    if (this.#suppressNativeChange) {
+      return;
+    }
     // Legacy CP code (e.g. Craft.FieldToggle, which powers toggle/
     // reverseToggle reveals) listens for native change events on the switch
     // button.

From 5516c7cff5c1dbf241db5b165ac1915d5b06a789 Mon Sep 17 00:00:00 2001
From: Brian Hanson <brian@brianhanson.net>
Date: Mon, 27 Jul 2026 09:28:35 -0500
Subject: [PATCH 05/20] Replace legacy Craft.LightSwitch with the craft-switch
 web component

Repoints the CP off the jQuery lightswitch plugin onto <craft-switch>:

- Craft.ui.createLightswitch now builds <craft-switch>/<craft-switch-button>
  markup mirroring the server-rendered Lightswitch component, instead of
  <button class="lightswitch"> + new Craft.LightSwitch.
- ElementEditor and editsection read switch state via the element's
  imperative API (el.on, el.turnOn(true)) and serialize the hidden input
  directly, instead of the .data('lightswitch') seam.
- Removes the Craft.LightSwitch class, the $.fn.lightswitch jQuery plugin,
  and the initUiElements auto-upgrade; deletes LightSwitch.js.
- Adds a deprecated $.fn.lightswitch shim to the yii2-adapter cpcompat
  bundle that upgrades third-party .lightswitch markup to <craft-switch>
  (via createLightswitch) and warns, matching the .infoicon shim.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 packages/craftcms-legacy/cp/src/Craft.js      |   1 -
 packages/craftcms-legacy/cp/src/js/Craft.js   |  42 ---
 .../cp/src/js/ElementEditor.js                |  24 +-
 .../craftcms-legacy/cp/src/js/LightSwitch.js  | 283 ------------------
 packages/craftcms-legacy/cp/src/js/UI.js      | 118 +++++---
 .../editsection/src/editsection.js            |   6 +-
 .../legacy/web/assets/cpcompat/cp-compat.js   |  88 +++++-
 7 files changed, 165 insertions(+), 397 deletions(-)
 delete mode 100644 packages/craftcms-legacy/cp/src/js/LightSwitch.js

diff --git a/packages/craftcms-legacy/cp/src/Craft.js b/packages/craftcms-legacy/cp/src/Craft.js
index 06f157a6690..098407a3802 100644
--- a/packages/craftcms-legacy/cp/src/Craft.js
+++ b/packages/craftcms-legacy/cp/src/Craft.js
@@ -68,7 +68,6 @@ import './js/HandleGenerator.js';
 import './js/IconPicker.js';
 import './js/ImageUpload.js';
 import './js/IntervalManager.js';
-import './js/LightSwitch.js';
 import './js/LinkField.js';
 import './js/LinkInput.js';
 import './js/LivePreview.js';
diff --git a/packages/craftcms-legacy/cp/src/js/Craft.js b/packages/craftcms-legacy/cp/src/js/Craft.js
index cc836a15cb3..e939d910632 100644
--- a/packages/craftcms-legacy/cp/src/js/Craft.js
+++ b/packages/craftcms-legacy/cp/src/js/Craft.js
@@ -1940,7 +1940,6 @@ $.extend(Craft, {
     $('.grid', $container).grid();
     $('.cp-checkbox-select', $container).checkboxselect();
     $('.fieldtoggle', $container).fieldtoggle();
-    $('.lightswitch', $container).lightswitch();
     $('.nicetext', $container).nicetext();
     $('.datetimewrapper', $container).datetime();
     $(
@@ -3120,47 +3119,6 @@ $.extend($.fn, {
     });
   },
 
-  lightswitch: function (settings, settingName, settingValue) {
-    // param mapping
-    if (settings === 'settings') {
-      if (typeof settingName === 'string') {
-        settings = {};
-        settings[settingName] = settingValue;
-      } else {
-        settings = settingName;
-      }
-
-      return this.each(function () {
-        var obj = $.data(this, 'lightswitch');
-        if (obj) {
-          obj.setSettings(settings);
-        }
-      });
-    } else {
-      if (!$.isPlainObject(settings)) {
-        settings = {};
-      }
-
-      return this.each(function () {
-        var thisSettings = $.extend({}, settings);
-
-        if (Garnish.hasAttr(this, 'data-value')) {
-          thisSettings.value = $(this).attr('data-value');
-        }
-
-        if (Garnish.hasAttr(this, 'data-indeterminate-value')) {
-          thisSettings.indeterminateValue = $(this).attr(
-            'data-indeterminate-value'
-          );
-        }
-
-        if (!$.data(this, 'lightswitch')) {
-          new Craft.LightSwitch(this, thisSettings);
-        }
-      });
-    }
-  },
-
   nicetext: function () {
     return this.each(function () {
       if (!$.data(this, 'nicetext')) {
diff --git a/packages/craftcms-legacy/cp/src/js/ElementEditor.js b/packages/craftcms-legacy/cp/src/js/ElementEditor.js
index f54d00ff8b2..ae2ace9e501 100644
--- a/packages/craftcms-legacy/cp/src/js/ElementEditor.js
+++ b/packages/craftcms-legacy/cp/src/js/ElementEditor.js
@@ -553,7 +553,7 @@ Craft.ElementEditor = Garnish.Base.extend(
         })
         .insertBefore($enabledForSiteField);
       $globalField.find('label').css('font-weight', 'bold');
-      this.$globalLightswitch = $globalField.find('.lightswitch');
+      this.$globalLightswitch = $globalField.find('craft-switch');
 
       if (!this.settings.revisionId) {
         this._showField($globalField);
@@ -573,7 +573,7 @@ Craft.ElementEditor = Garnish.Base.extend(
         (this.settings.enabledForSite ? '1' : '');
 
       this.$siteLightswitches = $enabledForSiteField
-        .find('.lightswitch')
+        .find('craft-switch')
         .on('change', this._updateGlobalStatus.bind(this));
 
       this._getOtherSupportedSites().forEach((s) =>
@@ -584,7 +584,9 @@ Craft.ElementEditor = Garnish.Base.extend(
         encodeURIComponent(this.namespaceInputName('enabled')) +
         `=${originalEnabledValue}`;
       for (let i = 0; i < this.$siteLightswitches.length; i++) {
-        const $input = this.$siteLightswitches.eq(i).data('lightswitch').$input;
+        const $input = this.$siteLightswitches
+          .eq(i)
+          .find('input[type="hidden"]');
         serializedStatuses +=
           '&' + encodeURIComponent($input.attr('name')) + '=' + $input.val();
       }
@@ -754,7 +756,7 @@ Craft.ElementEditor = Garnish.Base.extend(
       let allEnabled = true,
         allDisabled = true;
       this.$siteLightswitches.each(function () {
-        const enabled = $(this).data('lightswitch').on;
+        const enabled = this.on;
         if (enabled) {
           allDisabled = false;
         } else {
@@ -765,21 +767,21 @@ Craft.ElementEditor = Garnish.Base.extend(
         }
       });
       if (allEnabled) {
-        this.$globalLightswitch.data('lightswitch').turnOn(true);
+        this.$globalLightswitch[0].turnOn(true);
       } else if (allDisabled) {
-        this.$globalLightswitch.data('lightswitch').turnOff(true);
+        this.$globalLightswitch[0].turnOff(true);
       } else {
-        this.$globalLightswitch.data('lightswitch').turnIndeterminate(true);
+        this.$globalLightswitch[0].turnIndeterminate(true);
       }
     },
 
     _updateSiteStatuses: function () {
-      const enabled = this.$globalLightswitch.data('lightswitch').on;
+      const enabled = this.$globalLightswitch[0].on;
       this.$siteLightswitches.each(function () {
         if (enabled) {
-          $(this).data('lightswitch').turnOn(true);
+          this.turnOn(true);
         } else {
-          $(this).data('lightswitch').turnOff(true);
+          this.turnOff(true);
         }
       });
     },
@@ -807,7 +809,7 @@ Craft.ElementEditor = Garnish.Base.extend(
       if (!this.settings.revisionId) {
         $field.addClass('nested');
         const $lightswitch = $field
-          .find('.lightswitch')
+          .find('craft-switch')
           .on('change', this._updateGlobalStatus.bind(this));
         this.$siteLightswitches = this.$siteLightswitches.add($lightswitch);
       }
diff --git a/packages/craftcms-legacy/cp/src/js/LightSwitch.js b/packages/craftcms-legacy/cp/src/js/LightSwitch.js
deleted file mode 100644
index 77d176bc9f1..00000000000
--- a/packages/craftcms-legacy/cp/src/js/LightSwitch.js
+++ /dev/null
@@ -1,283 +0,0 @@
-/** global: Craft */
-/** global: Garnish */
-/**
- * Light Switch
- */
-Craft.LightSwitch = Garnish.Base.extend(
-  {
-    settings: null,
-    $outerContainer: null,
-    $innerContainer: null,
-    $input: null,
-    small: false,
-    on: false,
-    indeterminate: false,
-    dragger: null,
-
-    dragStartMargin: null,
-
-    init: function (outerContainer, settings) {
-      this.$outerContainer = $(outerContainer);
-
-      // Is this already a lightswitch?
-      if (this.$outerContainer.data('lightswitch')) {
-        console.warn('Double-instantiating a lightswitch on an element');
-        this.$outerContainer.data('lightswitch').destroy();
-      }
-
-      this.$outerContainer.data('lightswitch', this);
-
-      this.small = this.$outerContainer.hasClass('small');
-
-      this.setSettings(settings, Craft.LightSwitch.defaults);
-
-      this.$innerContainer = this.$outerContainer.find(
-        '.lightswitch-container:first'
-      );
-      this.$input = this.$outerContainer.find('input:first');
-
-      // If the input is disabled, go no further
-      if (this.$input.prop('disabled')) {
-        return;
-      }
-
-      this.on = this.$outerContainer.hasClass('on');
-      this.indeterminate = this.$outerContainer.hasClass('indeterminate');
-
-      this.addListener(this.$outerContainer, 'mousedown', '_onMouseDown');
-      this.addListener(this.$outerContainer, 'keydown', '_onKeyDown');
-
-      this.dragger = new Garnish.BaseDrag(this.$outerContainer, {
-        axis: Garnish.X_AXIS,
-        ignoreHandleSelector: null,
-        onDragStart: this._onDragStart.bind(this),
-        onDrag: this._onDrag.bind(this),
-        onDragStop: this._onDragStop.bind(this),
-      });
-
-      // Does the input have on/off labels?
-      let $wrapper = this.$outerContainer.parent(
-        '.lightswitch-inner-container'
-      );
-      if ($wrapper.length) {
-        this.addListener(
-          $wrapper.children('span[data-toggle="off"]'),
-          'click',
-          this.turnOff
-        );
-        this.addListener(
-          $wrapper.children('span[data-toggle="on"]'),
-          'click',
-          this.turnOn
-        );
-      }
-    },
-
-    turnOn: function (muteEvent) {
-      var changed = !this.on;
-
-      this.on = true;
-      this.indeterminate = false;
-
-      this.$outerContainer.addClass('dragging');
-
-      if (Garnish.prefersReducedMotion()) {
-        this.$innerContainer.css('margin-' + Craft.left, 0);
-      } else {
-        var animateCss = {};
-        animateCss['margin-' + Craft.left] = 0;
-        this.$innerContainer
-          .velocity('stop')
-          .velocity(
-            animateCss,
-            Craft.LightSwitch.animationDuration,
-            this._onSettle.bind(this)
-          );
-      }
-
-      this.$input.val(this.settings.value);
-      this.$outerContainer.addClass('on');
-      this.$outerContainer.removeClass('indeterminate');
-      this.$outerContainer.attr('aria-checked', 'true');
-
-      if (changed && muteEvent !== true) {
-        this.onChange();
-      }
-    },
-
-    turnOff: function (muteEvent) {
-      var changed = this.on || this.indeterminate;
-
-      this.on = false;
-      this.indeterminate = false;
-
-      this.$outerContainer.addClass('dragging');
-
-      if (Garnish.prefersReducedMotion()) {
-        this.$innerContainer.css('margin-' + Craft.left, this._getOffMargin());
-      } else {
-        var animateCss = {};
-        animateCss['margin-' + Craft.left] = this._getOffMargin();
-        this.$innerContainer
-          .velocity('stop')
-          .velocity(
-            animateCss,
-            Craft.LightSwitch.animationDuration,
-            this._onSettle.bind(this)
-          );
-      }
-
-      this.$input.val('');
-      this.$outerContainer.removeClass('on');
-      this.$outerContainer.removeClass('indeterminate');
-      this.$outerContainer.attr('aria-checked', 'false');
-
-      if (changed && muteEvent !== true) {
-        this.onChange();
-      }
-    },
-
-    turnIndeterminate: function (muteEvent) {
-      var changed = !this.indeterminate;
-
-      this.on = false;
-      this.indeterminate = true;
-
-      this.$outerContainer.addClass('dragging');
-      var animateCss = {};
-      animateCss['margin-' + Craft.left] = this._getOffMargin() / 2;
-      this.$innerContainer
-        .velocity('stop')
-        .velocity(
-          animateCss,
-          Craft.LightSwitch.animationDuration,
-          this._onSettle.bind(this)
-        );
-
-      this.$input.val(this.settings.indeterminateValue);
-      this.$outerContainer.removeClass('on');
-      this.$outerContainer.addClass('indeterminate');
-      this.$outerContainer.attr('aria-checked', 'mixed');
-
-      if (changed && muteEvent !== true) {
-        this.onChange();
-      }
-    },
-
-    toggle: function () {
-      if (this.indeterminate || !this.on) {
-        this.turnOn();
-      } else {
-        this.turnOff();
-      }
-    },
-
-    onChange: function () {
-      this.trigger('change');
-      this.settings.onChange(this.on);
-      this.$outerContainer.trigger('change');
-    },
-
-    _onMouseDown: function () {
-      this.addListener(Garnish.$doc, 'mouseup', '_onMouseUp');
-    },
-
-    _onMouseUp: function () {
-      this.removeListener(Garnish.$doc, 'mouseup');
-
-      // Was this a click?
-      if (!this.dragger.dragging) {
-        this.toggle();
-      }
-    },
-
-    _onKeyDown: function (event) {
-      switch (event.keyCode) {
-        case Garnish.SPACE_KEY: {
-          this.toggle();
-          event.preventDefault();
-          break;
-        }
-        case Garnish.RIGHT_KEY: {
-          if (Craft.orientation === 'ltr') {
-            this.turnOn();
-          } else {
-            this.turnOff();
-          }
-
-          event.preventDefault();
-          break;
-        }
-        case Garnish.LEFT_KEY: {
-          if (Craft.orientation === 'ltr') {
-            this.turnOff();
-          } else {
-            this.turnOn();
-          }
-
-          event.preventDefault();
-          break;
-        }
-      }
-    },
-
-    _getMargin: function () {
-      return parseInt(this.$innerContainer.css('margin-' + Craft.left));
-    },
-
-    _onDragStart: function () {
-      this.$outerContainer.addClass('dragging');
-      this.dragStartMargin = this._getMargin();
-    },
-
-    _onDrag: function () {
-      var margin;
-
-      if (Craft.orientation === 'ltr') {
-        margin = this.dragStartMargin + this.dragger.mouseDistX;
-      } else {
-        margin = this.dragStartMargin - this.dragger.mouseDistX;
-      }
-
-      if (margin < this._getOffMargin()) {
-        margin = this._getOffMargin();
-      } else if (margin > 0) {
-        margin = 0;
-      }
-
-      this.$innerContainer.css('margin-' + Craft.left, margin);
-    },
-
-    _onDragStop: function () {
-      var margin = this._getMargin();
-
-      if (margin > this._getOffMargin() / 2) {
-        this.turnOn();
-      } else {
-        this.turnOff();
-      }
-    },
-
-    _onSettle: function () {
-      this.$outerContainer.removeClass('dragging');
-    },
-
-    destroy: function () {
-      this.$outerContainer.removeData('lightswitch');
-      this.base();
-      this.dragger.destroy();
-    },
-
-    _getOffMargin: function () {
-      return this.small ? -10 : -12;
-    },
-  },
-  {
-    animationDuration: 100,
-    defaults: {
-      value: '1',
-      indeterminateValue: '-',
-      onChange: $.noop,
-    },
-  }
-);
diff --git a/packages/craftcms-legacy/cp/src/js/UI.js b/packages/craftcms-legacy/cp/src/js/UI.js
index ebf0a8aabc6..b46f2e8fa18 100644
--- a/packages/craftcms-legacy/cp/src/js/UI.js
+++ b/packages/craftcms-legacy/cp/src/js/UI.js
@@ -644,69 +644,99 @@ Craft.ui = {
   },
 
   createLightswitch: function (config) {
+    // Builds a <craft-switch> web component, mirroring the server-rendered
+    // CraftCms\Cms\Cp\Components\Lightswitch. The switch button and hidden
+    // input live in the light DOM so input namespacing and legacy
+    // Craft.FieldToggle hooks keep working.
     var value = config.value || '1';
     var indeterminateValue = config.indeterminateValue || '-';
+    var on = !!config.on;
+    var indeterminate = !on && !!config.indeterminate;
+    var size = config.small ? 'small' : 'medium';
 
-    var $container = $('<button/>', {
-      type: 'button',
-      class: 'lightswitch',
-      'data-value': value,
-      'data-indeterminate-value': indeterminateValue,
+    // Host <craft-switch> (mirrors Lightswitch::hostAttributes()).
+    var $switch = $('<craft-switch/>');
+    if (on) {
+      $switch.attr('checked', '');
+    }
+    if (indeterminate) {
+      $switch.attr('indeterminate', '');
+    }
+    if (config.disabled) {
+      $switch.attr('disabled', '');
+    }
+    if (config.small) {
+      $switch.attr('size', 'small');
+    }
+    if (value !== '1') {
+      $switch.attr('value', value);
+    }
+    if (indeterminateValue !== '-') {
+      $switch.attr('indeterminate-value', indeterminateValue);
+    }
+    if (config.label) {
+      $switch.attr('label', config.label);
+    }
+    if (config.onLabel && config.onLabel !== config.label) {
+      $switch.attr('on-label', config.onLabel);
+    }
+    if (config.offLabel) {
+      $switch.attr('off-label', config.offLabel);
+    }
+
+    // Switch button in the light DOM (mirrors Lightswitch::switchButtonHtml()).
+    var $button = $('<craft-switch-button/>', {
+      slot: 'input',
       id: config.id,
       role: 'switch',
-      'aria-checked': config.on
-        ? 'true'
-        : config.indeterminate
-          ? 'mixed'
-          : 'false',
-      'aria-labelledby': config.labelId,
-      'data-target': config.toggle,
-      'data-reverse-target': config.reverseToggle,
+      size: size,
+      'data-tag-name': 'craft-switch-button',
+      'aria-checked': on ? 'true' : indeterminate ? 'mixed' : 'false',
     });
-
-    if (config.on) {
-      $container.addClass('on');
-    } else if (config.indeterminate) {
-      $container.addClass('indeterminate');
+    if (on) {
+      $button.attr('checked', '');
     }
-
-    if (config.small) {
-      $container.addClass('small');
+    if (indeterminate) {
+      $button.attr('indeterminate', '');
     }
-
     if (config.disabled) {
-      $container.addClass('disabled');
+      $button.attr('disabled', '');
     }
+    if (config.labelId) {
+      $button.attr('aria-labelledby', config.labelId);
+    }
+    if (config.toggle) {
+      $button.attr('data-target', config.toggle);
+    }
+    if (config.reverseToggle) {
+      $button.attr('data-reverse-target', config.reverseToggle);
+    }
+    if (config.toggle || config.reverseToggle) {
+      $button.addClass('fieldtoggle');
+    }
+    $button.appendTo($switch);
 
-    $(
-      '<div class="lightswitch-container">' +
-        '<div class="handle"></div>' +
-        '</div>'
-    ).appendTo($container);
-
+    // Hidden input posting the state (mirrors Lightswitch::hiddenInputHtml()).
     if (config.name) {
       $('<input/>', {
         type: 'hidden',
+        slot: 'hidden-input',
         name: config.name,
-        value: config.on
-          ? value
-          : config.indeterminate
-            ? indeterminateValue
-            : '',
-        disabled: config.disabled,
-      }).appendTo($container);
+        value: on ? value : indeterminate ? indeterminateValue : '',
+      })
+        .prop('disabled', !!config.disabled)
+        .appendTo($switch);
     }
 
-    if (config.toggle || config.reverseToggle) {
-      $container.addClass('fieldtoggle');
-      new Craft.FieldToggle($container);
+    // Legacy Craft.LightSwitch invoked settings.onChange(on); the element
+    // dispatches a native change event that bubbles to the host.
+    if (config.onChange) {
+      $switch.on('change', function () {
+        config.onChange(this.on);
+      });
     }
 
-    new Craft.LightSwitch($container, {
-      onChange: config.onChange || $.noop,
-    });
-
-    return $container;
+    return $switch;
   },
 
   createLightswitchField: function (config) {
diff --git a/packages/craftcms-legacy/editsection/src/editsection.js b/packages/craftcms-legacy/editsection/src/editsection.js
index 051508a6635..5860cbb9348 100644
--- a/packages/craftcms-legacy/editsection/src/editsection.js
+++ b/packages/craftcms-legacy/editsection/src/editsection.js
@@ -4,7 +4,7 @@
   var $siteRows = $('#sites').children('tbody').children();
   var $lightswitches = $siteRows
     .children('th:nth-child(2)')
-    .children('.lightswitch');
+    .children('craft-switch');
   var $singleHomepageCheckboxes = $siteRows.find('.single-homepage .checkbox');
 
   function updateSites() {
@@ -18,8 +18,8 @@
     var $lightswitch = $lightswitches.eq(i);
     if ($lightswitch.length) {
       const $tds = $lightswitch.parent().nextAll('td');
-      const $inputs = $tds.find('textarea, input, .lightswitch');
-      if (!$lightswitch.data('lightswitch').on) {
+      const $inputs = $tds.find('textarea, input, craft-switch');
+      if (!$lightswitch[0].on) {
         $tds.addClass('disabled');
         $inputs.attr({
           tabindex: '-1',
diff --git a/yii2-adapter/legacy/web/assets/cpcompat/cp-compat.js b/yii2-adapter/legacy/web/assets/cpcompat/cp-compat.js
index bd94ebb5441..adc0c17dd69 100644
--- a/yii2-adapter/legacy/web/assets/cpcompat/cp-compat.js
+++ b/yii2-adapter/legacy/web/assets/cpcompat/cp-compat.js
@@ -17,6 +17,8 @@
     }
 
     registerInfoIcon($);
+    registerLightswitch($);
+    autoUpgrade($);
   }
 
   /**
@@ -51,28 +53,88 @@
       }
       return this.each(upgrade);
     };
+  }
+
+  /**
+   * `$.fn.lightswitch` — upgrades legacy `.lightswitch` button markup to the
+   * `<craft-switch>` web component. Core now emits the element directly (and
+   * Craft.ui.createLightswitch builds it), so this only runs for third-party
+   * `.lightswitch` markup, and warns when it does. The conversion reuses
+   * Craft.ui.createLightswitch so the mapping stays in one place.
+   */
+  function registerLightswitch($) {
+    if ($.fn.lightswitch) {
+      return;
+    }
+
+    var warned = false;
+
+    $.fn.lightswitch = function () {
+      if (!warned) {
+        warned = true;
+        console.warn(
+          '$(…).lightswitch() is deprecated. Emit <craft-switch> directly instead.'
+        );
+      }
+      return this.each(function () {
+        if (
+          this.tagName === 'CRAFT-SWITCH' ||
+          !window.Craft ||
+          !Craft.ui ||
+          typeof Craft.ui.createLightswitch !== 'function'
+        ) {
+          return;
+        }
+        var $old = $(this);
+        var $input = $old.find('input[type="hidden"]').first();
+        var $switch = Craft.ui.createLightswitch({
+          on: $old.hasClass('on'),
+          indeterminate: $old.hasClass('indeterminate'),
+          small: $old.hasClass('small'),
+          disabled: $old.hasClass('disabled') || $input.prop('disabled'),
+          value: $old.attr('data-value') || '1',
+          indeterminateValue: $old.attr('data-indeterminate-value') || '-',
+          name: $input.attr('name'),
+          id: $old.attr('id'),
+          labelId: $old.attr('aria-labelledby'),
+          toggle: $old.attr('data-target'),
+          reverseToggle: $old.attr('data-reverse-target'),
+        });
+        $old.replaceWith($switch);
+      });
+    };
+  }
+
+  /**
+   * Preserves the legacy auto-upgrade of third-party `.info`/`.lightswitch`
+   * markup: sweep on load and whenever Craft.initUiElements runs on injected
+   * content. The deprecation warnings fire only when such markup exists.
+   */
+  function autoUpgrade($) {
+    function sweep($container) {
+      try {
+        $('.info', $container).infoicon();
+      } catch (e) {
+        // no-op
+      }
+      try {
+        $('.lightswitch', $container).lightswitch();
+      } catch (e) {
+        // no-op
+      }
+    }
 
-    // Preserve BC auto-upgrade of legacy third-party `.info` markup injected
-    // after load (fires the warning only when such markup exists).
     if (window.Craft && typeof Craft.initUiElements === 'function') {
       var initUiElements = Craft.initUiElements;
       Craft.initUiElements = function ($container) {
         var result = initUiElements.apply(this, arguments);
-        try {
-          $('.info', $container || document).infoicon();
-        } catch (e) {
-          // no-op
-        }
+        sweep($container || document);
         return result;
       };
     }
 
-    // Initial pass for legacy `.info` already present in the DOM.
-    try {
-      $('.info').infoicon();
-    } catch (e) {
-      // no-op
-    }
+    // Initial pass for markup already present in the DOM.
+    sweep(document);
   }
 
   // Run after the DOM is ready so jQuery and Craft (both loaded via blocking

From 2267ae9b2ece5b504404f37c58116d1616570149 Mon Sep 17 00:00:00 2001
From: Brian Hanson <brian@brianhanson.net>
Date: Mon, 27 Jul 2026 09:38:48 -0500
Subject: [PATCH 06/20] Remove dead legacy CP Accordion and EnvVarGenerator
 classes
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Craft.Accordion and Craft.EnvVarGenerator were defined in the legacy CP
bundle but referenced nowhere — no JS/Twig/PHP callers, no string-name
lookups, no self-registration, jQuery plugin, or initUiElements hook.
Deletes the two files and their imports.

Craft.DynamicGenerator, flagged the same way, is kept: an internal plugin
instantiates it. It stays with the generator cluster (Craft.BaseInputGenerator
plus the live Handle/Slug/UriFormat generators) until that cluster is ported.

For the two removed classes, adds inert deprecation stubs to the yii2-adapter
cpcompat bundle: a plugin that still does `new Craft.Accordion()` gets a
one-time console.warn (matching the CP's deprecation idiom) instead of an
opaque "undefined is not a constructor". The stubs preserve the
Garnish.Base.extend/new shape and are otherwise inert.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 packages/craftcms-legacy/cp/src/Craft.js      |   2 -
 .../craftcms-legacy/cp/src/js/Accordion.js    | 130 ------------------
 .../cp/src/js/EnvVarGenerator.js              |  28 ----
 .../legacy/web/assets/cpcompat/cp-compat.js   |  57 ++++++++
 4 files changed, 57 insertions(+), 160 deletions(-)
 delete mode 100644 packages/craftcms-legacy/cp/src/js/Accordion.js
 delete mode 100644 packages/craftcms-legacy/cp/src/js/EnvVarGenerator.js

diff --git a/packages/craftcms-legacy/cp/src/Craft.js b/packages/craftcms-legacy/cp/src/Craft.js
index 098407a3802..b98ae6e91ad 100644
--- a/packages/craftcms-legacy/cp/src/Craft.js
+++ b/packages/craftcms-legacy/cp/src/Craft.js
@@ -31,7 +31,6 @@ import './js/Tabs.js';
 import './js/ElementThumbLoader.js';
 
 // Finally load the remaining files
-import './js/Accordion';
 import './js/AdminTable.js';
 import './js/AssetImageEditor.js';
 import './js/AssetIndex.js';
@@ -58,7 +57,6 @@ import './js/ElementFieldSettings.js';
 import './js/ElementTableSorter.js';
 import './js/EntryIndex.js';
 import './js/EntrySelectInput.js';
-import './js/EnvVarGenerator.js';
 import './js/EntryMover.js';
 import './js/FormObserver.js';
 import './js/VolumeFolderSelectorModal.js';
diff --git a/packages/craftcms-legacy/cp/src/js/Accordion.js b/packages/craftcms-legacy/cp/src/js/Accordion.js
deleted file mode 100644
index b8aa8f76e12..00000000000
--- a/packages/craftcms-legacy/cp/src/js/Accordion.js
+++ /dev/null
@@ -1,130 +0,0 @@
-/** global: Craft */
-/** global: Garnish */
-/**
- * Accordion
- */
-Craft.Accordion = Garnish.Base.extend({
-  $trigger: null,
-  targetSelector: null,
-
-  _$target: null,
-
-  init: function (trigger) {
-    this.$trigger = $(trigger);
-
-    // Is this already an accordion trigger?
-    if (this.$trigger.data('accordion')) {
-      console.warn('Double-instantiating an accordion trigger on an element');
-      this.$trigger.data('accordion').destroy();
-    }
-
-    this.$trigger.data('accordion', this);
-    this.targetSelector = this.$trigger.attr('aria-controls')
-      ? `#${this.$trigger.attr('aria-controls')}`
-      : null;
-
-    if (this.targetSelector) {
-      this._$target = $(this.targetSelector);
-    }
-
-    this.addListener(this.$trigger, 'click', 'onTriggerClick');
-    this.addListener(this.$trigger, 'keypress', (event) => {
-      const key = event.keyCode;
-
-      if (key === Garnish.SPACE_KEY || key === Garnish.RETURN_KEY) {
-        event.preventDefault();
-        this.onTriggerClick();
-      }
-    });
-  },
-
-  onTriggerClick: function () {
-    const isOpen = this.$trigger.attr('aria-expanded') === 'true';
-
-    if (isOpen) {
-      this.hideTarget(this._$target);
-    } else {
-      this.showTarget(this._$target);
-    }
-  },
-
-  showTarget: function ($target) {
-    if ($target && $target.length) {
-      this.showTarget._currentHeight = $target.height();
-
-      $target.removeClass('hidden');
-
-      this.$trigger
-        .removeClass('collapsed')
-        .addClass('expanded')
-        .attr('aria-expanded', 'true');
-
-      for (let i = 0; i < $target.length; i++) {
-        (($t) => {
-          if ($t.prop('nodeName') !== 'SPAN') {
-            $t.height('auto');
-            this.showTarget._targetHeight = $t.height();
-            $t.css({
-              height: this.showTarget._currentHeight,
-              overflow: 'hidden',
-            });
-
-            $t.velocity('stop');
-
-            $t.velocity(
-              {height: this.showTarget._targetHeight},
-              Garnish.getUserPreferredAnimationDuration('fast'),
-              function () {
-                $t.css({
-                  height: '',
-                  overflow: '',
-                });
-              }
-            );
-          }
-        })($target.eq(i));
-      }
-
-      delete this.showTarget._targetHeight;
-      delete this.showTarget._currentHeight;
-
-      // Trigger a resize event in case there are any grids in the target that need to initialize
-      Garnish.$win.trigger('resize');
-    }
-  },
-
-  hideTarget: function ($target) {
-    if ($target && $target.length) {
-      this.$trigger
-        .removeClass('expanded')
-        .addClass('collapsed')
-        .attr('aria-expanded', 'false');
-
-      for (let i = 0; i < $target.length; i++) {
-        (($t) => {
-          if ($t.hasClass('hidden')) {
-            return;
-          }
-          if ($t.prop('nodeName') === 'SPAN') {
-            $t.addClass('hidden');
-          } else {
-            $t.css('overflow', 'hidden');
-            $t.velocity('stop');
-            $t.velocity(
-              {height: 0},
-              Garnish.getUserPreferredAnimationDuration('fast'),
-              function () {
-                $t.addClass('hidden');
-              }
-            );
-          }
-        })($target.eq(i));
-      }
-    }
-  },
-
-  destroy: function () {
-    this.$trigger.removeData('accordion');
-    this.base();
-  },
-});
diff --git a/packages/craftcms-legacy/cp/src/js/EnvVarGenerator.js b/packages/craftcms-legacy/cp/src/js/EnvVarGenerator.js
deleted file mode 100644
index 4431631c09f..00000000000
--- a/packages/craftcms-legacy/cp/src/js/EnvVarGenerator.js
+++ /dev/null
@@ -1,28 +0,0 @@
-/** global: Craft */
-/** global: Garnish */
-/**
- * Environment Variable Name Generator
- */
-Craft.EnvVarGenerator = Craft.BaseInputGenerator.extend({
-  generateTargetValue: function (sourceVal) {
-    // Remove HTML tags
-    let name = sourceVal.replace(/<(.*?)>/g, '');
-
-    // Remove inner-word punctuation
-    name = name.replace(/['"‘’“”ʻ\[\]\(\)\{\}:]/g, '');
-
-    // Make it lowercase
-    name = name.toLowerCase();
-
-    // Convert extended ASCII characters to basic ASCII
-    name = Craft.asciiString(name);
-
-    // Start with a letter
-    name = name.replace(/^[^a-z]+/, '');
-
-    // Get the "words"
-    const words = Craft.filterArray(name.split(/[^a-z0-9]+/));
-
-    return words.join('_').toUpperCase();
-  },
-});
diff --git a/yii2-adapter/legacy/web/assets/cpcompat/cp-compat.js b/yii2-adapter/legacy/web/assets/cpcompat/cp-compat.js
index adc0c17dd69..6c32982f6f8 100644
--- a/yii2-adapter/legacy/web/assets/cpcompat/cp-compat.js
+++ b/yii2-adapter/legacy/web/assets/cpcompat/cp-compat.js
@@ -11,6 +11,9 @@
   'use strict';
 
   function init() {
+    // Class stubs don't need jQuery, so register them before the guard below.
+    registerRemovedClassStubs();
+
     var $ = window.jQuery;
     if (!$) {
       return;
@@ -21,6 +24,60 @@
     autoUpgrade($);
   }
 
+  /**
+   * Deprecation stubs for legacy Craft CP classes that have been removed from
+   * the core bundle. Core has no callers, but a third-party plugin might still
+   * `new Craft.<Class>()` — without a stub that fails as an opaque
+   * "undefined is not a constructor". Each stub warns once (matching the CP's
+   * console.warn deprecation idiom) and is otherwise inert.
+   */
+  function registerRemovedClassStubs() {
+    if (!window.Craft) {
+      return;
+    }
+
+    defineRemovedClass(
+      'Accordion',
+      'Craft.Accordion has been removed. It was an unused legacy CP UI widget with no replacement.'
+    );
+    defineRemovedClass(
+      'EnvVarGenerator',
+      'Craft.EnvVarGenerator has been removed. It was an unused legacy input generator with no replacement.'
+    );
+  }
+
+  /**
+   * Defines Craft.<name> as an inert Garnish.Base subclass that warns once when
+   * instantiated or subclassed, preserving the extend()/new shape the removed
+   * class had. Skips if something already defines the name.
+   */
+  function defineRemovedClass(name, message) {
+    var Craft = window.Craft;
+    if (Craft[name]) {
+      return;
+    }
+
+    var warned = false;
+    function warnOnce() {
+      if (!warned) {
+        warned = true;
+        console.warn(message);
+      }
+    }
+
+    if (window.Garnish && Garnish.Base && Garnish.Base.extend) {
+      Craft[name] = Garnish.Base.extend({
+        init: function () {
+          warnOnce();
+        },
+      });
+    } else {
+      Craft[name] = function () {
+        warnOnce();
+      };
+    }
+  }
+
   /**
    * `$.fn.infoicon` — upgrades a legacy `.info` element to the
    * `<craft-info-icon>` web component. Core now emits the element directly, so

From b50ec0c854f871e7a108774c30f3aa5b83d32113 Mon Sep 17 00:00:00 2001
From: Brian Hanson <brian@brianhanson.net>
Date: Mon, 27 Jul 2026 10:27:52 -0500
Subject: [PATCH 07/20] Add BC stubs for the removed Craft.LightSwitch and
 Craft.InfoIcon classes
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Craft.LightSwitch (removed with the craft-switch migration) and Craft.InfoIcon
(removed with the craft-info-icon migration) were public classes plugins could
instantiate directly — new Craft.LightSwitch(el, settings) / new Craft.InfoIcon(el).
Only their markup-conversion jQuery plugins ($.fn.lightswitch / $.fn.infoicon)
were shimmed, so programmatic callers hit "undefined is not a constructor".

Adds warn-and-delegate stubs to the yii2-adapter cpcompat bundle:
- Craft.LightSwitch warns once, upgrades legacy .lightswitch markup (or accepts
  an existing <craft-switch>), and delegates on/turnOn/turnOff/turnIndeterminate/
  toggle to the element's imperative API, wiring settings.onChange to its change
  event.
- Craft.InfoIcon reproduces the old class's contract: warn, convert the element
  to <craft-info-icon>, expose it as this.icon.

Factors the legacy->component conversion for both into shared helpers reused by
the existing $.fn.* shims, so each config mapping stays in one place.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../legacy/web/assets/cpcompat/cp-compat.js   | 227 +++++++++++++++---
 1 file changed, 195 insertions(+), 32 deletions(-)

diff --git a/yii2-adapter/legacy/web/assets/cpcompat/cp-compat.js b/yii2-adapter/legacy/web/assets/cpcompat/cp-compat.js
index 6c32982f6f8..7b8661d0c9b 100644
--- a/yii2-adapter/legacy/web/assets/cpcompat/cp-compat.js
+++ b/yii2-adapter/legacy/web/assets/cpcompat/cp-compat.js
@@ -20,7 +20,9 @@
     }
 
     registerInfoIcon($);
+    registerInfoIconClass($);
     registerLightswitch($);
+    registerLightSwitchClass($);
     autoUpgrade($);
   }
 
@@ -90,26 +92,64 @@
 
     var warned = false;
 
-    function upgrade() {
-      var icon = document.createElement('craft-info-icon');
-      if (this.classList.contains('disabled')) {
-        icon.setAttribute('disabled', '');
+    $.fn.infoicon = function () {
+      if (!warned) {
+        warned = true;
+        console.warn(
+          '$(…).infoicon() is deprecated. Emit <craft-info-icon> directly instead.'
+        );
       }
-      Array.prototype.slice.call(this.childNodes).forEach(function (node) {
-        icon.appendChild(node);
+      return this.each(function () {
+        upgradeInfoIconElement(this);
       });
-      this.replaceWith(icon);
+    };
+  }
+
+  /**
+   * Replaces a legacy `.info` element with a `<craft-info-icon>`, moving its
+   * child nodes over (no innerHTML re-parse) and carrying the disabled state.
+   * Returns the new element. Shared by `$.fn.infoicon` and Craft.InfoIcon.
+   */
+  function upgradeInfoIconElement(el) {
+    var icon = document.createElement('craft-info-icon');
+    if (el.classList && el.classList.contains('disabled')) {
+      icon.setAttribute('disabled', '');
     }
+    Array.prototype.slice.call(el.childNodes).forEach(function (node) {
+      icon.appendChild(node);
+    });
+    el.replaceWith(icon);
+    return icon;
+  }
 
-    $.fn.infoicon = function () {
+  /**
+   * BC replacement for the removed `Craft.InfoIcon` class. The old class was
+   * itself a deprecation shim: `new Craft.InfoIcon(el)` warned and converted
+   * `el` into a `<craft-info-icon>`, exposing the result as `this.icon`. This
+   * preserves that exact contract so programmatic callers keep working.
+   */
+  function registerInfoIconClass($) {
+    var Craft = window.Craft;
+    if (!Craft || Craft.InfoIcon) {
+      return;
+    }
+
+    var warned = false;
+
+    function InfoIcon(icon) {
+      if (!(this instanceof InfoIcon)) {
+        return new InfoIcon(icon);
+      }
       if (!warned) {
         warned = true;
         console.warn(
-          '$(…).infoicon() is deprecated. Emit <craft-info-icon> directly instead.'
+          'Craft.InfoIcon is deprecated. Emit <craft-info-icon> directly instead.'
         );
       }
-      return this.each(upgrade);
-    };
+      this.icon = upgradeInfoIconElement(icon);
+    }
+
+    Craft.InfoIcon = InfoIcon;
   }
 
   /**
@@ -134,34 +174,157 @@
         );
       }
       return this.each(function () {
-        if (
-          this.tagName === 'CRAFT-SWITCH' ||
-          !window.Craft ||
-          !Craft.ui ||
-          typeof Craft.ui.createLightswitch !== 'function'
-        ) {
+        if (this.tagName === 'CRAFT-SWITCH') {
           return;
         }
         var $old = $(this);
-        var $input = $old.find('input[type="hidden"]').first();
-        var $switch = Craft.ui.createLightswitch({
-          on: $old.hasClass('on'),
-          indeterminate: $old.hasClass('indeterminate'),
-          small: $old.hasClass('small'),
-          disabled: $old.hasClass('disabled') || $input.prop('disabled'),
-          value: $old.attr('data-value') || '1',
-          indeterminateValue: $old.attr('data-indeterminate-value') || '-',
-          name: $input.attr('name'),
-          id: $old.attr('id'),
-          labelId: $old.attr('aria-labelledby'),
-          toggle: $old.attr('data-target'),
-          reverseToggle: $old.attr('data-reverse-target'),
-        });
-        $old.replaceWith($switch);
+        var $switch = upgradeLightswitchMarkup($, $old);
+        if ($switch) {
+          $old.replaceWith($switch);
+        }
       });
     };
   }
 
+  /**
+   * Builds a `<craft-switch>` from legacy `.lightswitch` button markup via
+   * Craft.ui.createLightswitch, keeping the legacy→component config mapping in
+   * one place. Returns the new element (jQuery), or null if the component
+   * factory isn't available. Does not touch the DOM — the caller swaps it in.
+   * `overrides` lets a caller (e.g. Craft.LightSwitch) supply value /
+   * indeterminateValue / name that aren't derivable from the markup.
+   */
+  function upgradeLightswitchMarkup($, $old, overrides) {
+    if (
+      !window.Craft ||
+      !Craft.ui ||
+      typeof Craft.ui.createLightswitch !== 'function'
+    ) {
+      return null;
+    }
+    overrides = overrides || {};
+    var $input = $old.find('input[type="hidden"]').first();
+    return Craft.ui.createLightswitch({
+      on: $old.hasClass('on'),
+      indeterminate: $old.hasClass('indeterminate'),
+      small: $old.hasClass('small'),
+      disabled: $old.hasClass('disabled') || $input.prop('disabled'),
+      value: overrides.value || $old.attr('data-value') || '1',
+      indeterminateValue:
+        overrides.indeterminateValue ||
+        $old.attr('data-indeterminate-value') ||
+        '-',
+      name: overrides.name || $input.attr('name'),
+      id: $old.attr('id'),
+      labelId: $old.attr('aria-labelledby'),
+      toggle: $old.attr('data-target'),
+      reverseToggle: $old.attr('data-reverse-target'),
+    });
+  }
+
+  /**
+   * BC replacement for the removed `Craft.LightSwitch` class. Warns once, then
+   * delegates to the `<craft-switch>` element's imperative API (turnOn/turnOff/
+   * turnIndeterminate/on), so `new Craft.LightSwitch(el, settings)` keeps
+   * working. `el` may already be a `<craft-switch>`, or legacy `.lightswitch`
+   * markup, which is upgraded in place. The legacy `.on` property was a boolean
+   * (it shadowed any inherited event method), so the stub exposes it as a
+   * getter rather than an event API.
+   */
+  function registerLightSwitchClass($) {
+    var Craft = window.Craft;
+    if (!Craft || Craft.LightSwitch) {
+      return;
+    }
+
+    var warned = false;
+
+    function LightSwitch(outerContainer, settings) {
+      if (!(this instanceof LightSwitch)) {
+        return new LightSwitch(outerContainer, settings);
+      }
+      if (!warned) {
+        warned = true;
+        console.warn(
+          'Craft.LightSwitch is deprecated. Emit <craft-switch> directly, or build one with Craft.ui.createLightswitch().'
+        );
+      }
+
+      this.settings = $.extend(
+        {value: '1', indeterminateValue: '-', onChange: $.noop},
+        settings || {}
+      );
+
+      var $el = $(outerContainer);
+      if ($el[0] && $el[0].tagName !== 'CRAFT-SWITCH') {
+        var $upgraded = upgradeLightswitchMarkup($, $el, this.settings);
+        if ($upgraded) {
+          $el.replaceWith($upgraded);
+          $el = $upgraded;
+        }
+      }
+
+      this.$outerContainer = $el;
+      this.$switch = $el;
+      this.$input = $el.find('input[type="hidden"]').first();
+
+      var self = this;
+      this._onChange = function () {
+        self.settings.onChange(self.on);
+      };
+      $el.on('change', this._onChange);
+    }
+
+    LightSwitch.prototype = {
+      constructor: LightSwitch,
+
+      get on() {
+        return this.$switch[0] ? !!this.$switch[0].on : false;
+      },
+
+      get indeterminate() {
+        return this.$switch[0] ? !!this.$switch[0].indeterminate : false;
+      },
+
+      turnOn: function (muteEvent) {
+        var el = this.$switch[0];
+        if (el && typeof el.turnOn === 'function') {
+          el.turnOn(muteEvent === true);
+        }
+      },
+
+      turnOff: function (muteEvent) {
+        var el = this.$switch[0];
+        if (el && typeof el.turnOff === 'function') {
+          el.turnOff(muteEvent === true);
+        }
+      },
+
+      turnIndeterminate: function (muteEvent) {
+        var el = this.$switch[0];
+        if (el && typeof el.turnIndeterminate === 'function') {
+          el.turnIndeterminate(muteEvent === true);
+        }
+      },
+
+      toggle: function () {
+        if (this.indeterminate || !this.on) {
+          this.turnOn();
+        } else {
+          this.turnOff();
+        }
+      },
+
+      destroy: function () {
+        if (this._onChange) {
+          this.$switch.off('change', this._onChange);
+        }
+      },
+    };
+
+    Craft.LightSwitch = LightSwitch;
+  }
+
   /**
    * Preserves the legacy auto-upgrade of third-party `.info`/`.lightswitch`
    * markup: sweep on load and whenever Craft.initUiElements runs on injected

From 42416873bce30097b638ddd3d5d64b4e59ffcfb6 Mon Sep 17 00:00:00 2001
From: Brian Hanson <brian@brianhanson.net>
Date: Mon, 27 Jul 2026 11:07:29 -0500
Subject: [PATCH 08/20] Fix stale CheckboxTest assertion after the info-icon
 migration

Checkbox renders its info via <craft-info-icon> since the InfoIcon migration
(7b4de37a52), but this test still asserted the old class="info" markup. Update
the assertion to match the emitted element.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 tests/Unit/Cp/Components/CheckboxTest.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tests/Unit/Cp/Components/CheckboxTest.php b/tests/Unit/Cp/Components/CheckboxTest.php
index 5c0a540d18f..a0fe509def9 100644
--- a/tests/Unit/Cp/Components/CheckboxTest.php
+++ b/tests/Unit/Cp/Components/CheckboxTest.php
@@ -107,7 +107,7 @@
     it('renders markdown info beside the label', function () {
         $html = Checkbox::make()->id('cb')->label('Opt')->info('Some *info*')->toHtml();
 
-        expect($html)->toContain('class="info"')
+        expect($html)->toContain('<craft-info-icon>')
             ->and($html)->toContain('<em>info</em>');
     });
 });

From 987c628c5532104342856156e6e690e1c7bcf297 Mon Sep 17 00:00:00 2001
From: Brian Hanson <brian@brianhanson.net>
Date: Mon, 27 Jul 2026 11:08:04 -0500
Subject: [PATCH 09/20] Replace legacy Craft.PasswordInput with the
 craft-input-password component
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Ports the password input onto the existing <craft-input-password> web component
(a LionInput with a built-in show/hide reveal toggle), retiring the legacy
Craft.PasswordInput JS that added the toggle to a .passwordwrapper input.

Server side (the AGENTS.md form-input pattern):
- Adds the InputPassword component (extends Input; tag craft-input-password,
  type fixed to password). It keeps only the control props Lion pushes onto the
  slotted input (placeholder/name/disabled/readonly) on the host — the
  craft-input-only styling attrs and `type` are dropped (the component owns its
  type via the reveal toggle); the native input keeps type/maxlength.
- Registers it, adds FormFields::password* (reusing the text mapping and
  preserving the legacy .password class), a craft.cp.password() Twig delegate,
  and reduces _includes/forms/password.twig to that delegate. Every
  passwordField now renders the toggle natively — no JS needed.

Consumers / legacy removal:
- Drops the now-redundant new Craft.PasswordInput('#newPassword') from
  users/_password.twig (the only passwordField consumer).
- Points UI.js createPasswordInput/createPasswordField at craft-input-password.
- Deletes PasswordInput.js and its import; adds a warn-and-delegate
  Craft.PasswordInput stub to the cpcompat bundle that upgrades a legacy
  password input to <craft-input-password>.

The legacy installer's new Craft.PasswordInput('#account-password') is left as
dead code (InstallerAsset is unregistered; the install screen is the Inertia/Vue
AccountFields using craft-input-password) — the cpcompat stub covers it.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 packages/craftcms-legacy/cp/src/Craft.js      |   1 -
 .../cp/src/js/PasswordInput.js                | 149 ------------------
 packages/craftcms-legacy/cp/src/js/UI.js      |  35 +++-
 .../templates/_includes/forms/password.twig   |  20 ++-
 resources/templates/users/_password.twig      |   1 -
 src/Cp/Components/ComponentRegistry.php       |   1 +
 src/Cp/Components/InputPassword.php           |  53 +++++++
 src/Cp/FormFields.php                         |  41 ++++-
 src/Twig/Variables/Cp.php                     |   8 +
 .../Components/ComponentManifestDriftTest.php |   4 +
 .../Unit/Cp/Components/InputPasswordTest.php  |  70 ++++++++
 tests/Unit/Cp/FormFieldsTest.php              |   1 +
 .../legacy/web/assets/cpcompat/cp-compat.js   | 107 +++++++++++++
 13 files changed, 326 insertions(+), 165 deletions(-)
 delete mode 100644 packages/craftcms-legacy/cp/src/js/PasswordInput.js
 create mode 100644 src/Cp/Components/InputPassword.php
 create mode 100644 tests/Unit/Cp/Components/InputPasswordTest.php

diff --git a/packages/craftcms-legacy/cp/src/Craft.js b/packages/craftcms-legacy/cp/src/Craft.js
index b98ae6e91ad..194acacaf56 100644
--- a/packages/craftcms-legacy/cp/src/Craft.js
+++ b/packages/craftcms-legacy/cp/src/Craft.js
@@ -70,7 +70,6 @@ import './js/LinkField.js';
 import './js/LinkInput.js';
 import './js/LivePreview.js';
 import './js/NestedElementManager.js';
-import './js/PasswordInput.js';
 import './js/Preview.js';
 import './js/PreviewFileModal.js';
 import './js/ProgressBar.js';
diff --git a/packages/craftcms-legacy/cp/src/js/PasswordInput.js b/packages/craftcms-legacy/cp/src/js/PasswordInput.js
deleted file mode 100644
index f9ef7049e76..00000000000
--- a/packages/craftcms-legacy/cp/src/js/PasswordInput.js
+++ /dev/null
@@ -1,149 +0,0 @@
-/** global: Craft */
-/** global: Garnish */
-/**
- * Password Input
- */
-Craft.PasswordInput = Garnish.Base.extend(
-  {
-    $passwordWrapper: null,
-    $passwordInput: null,
-    $textInput: null,
-    $currentInput: null,
-
-    $showPasswordToggle: null,
-    showingPassword: null,
-
-    init: function (passwordInput, settings) {
-      this.$passwordInput = $(passwordInput);
-      this.$passwordWrapper = this.$passwordInput.parent('.passwordwrapper');
-      this.settings = $.extend({}, Craft.PasswordInput.defaults, settings);
-
-      // Is this already a password input?
-      if (this.$passwordInput.data('passwordInput')) {
-        console.warn('Double-instantiating a password input on an element');
-        this.$passwordInput.data('passwordInput').destroy();
-      }
-
-      this.$passwordInput.data('passwordInput', this);
-
-      this.$showPasswordToggle = $(
-        '<button type="button" class="invisible" />'
-      );
-      this.$showPasswordToggle.addClass('password-toggle');
-      this.$showPasswordToggle.insertAfter(this.$passwordInput);
-
-      this.initInputFocusEvents(this.$passwordInput);
-      this.addListener(this.$showPasswordToggle, 'click', 'onClick');
-      this.hidePassword();
-
-      this.addListener(
-        this.$passwordWrapper.closest('form'),
-        'submit',
-        'hidePassword'
-      );
-    },
-
-    setCurrentInput: function ($input) {
-      if (this.$currentInput) {
-        // Swap the inputs, while preventing the focus animation
-        $input.insertAfter(this.$currentInput);
-        this.$currentInput.detach();
-        $input.focus();
-
-        // Restore the input value
-        $input.val(this.$currentInput.val());
-      }
-
-      this.$currentInput = $input;
-
-      this.addListener(
-        this.$currentInput,
-        'keypress,keyup,change,blur',
-        'onInputChange'
-      );
-    },
-
-    updateToggleLabel: function (label) {
-      this.$showPasswordToggle.text(label);
-    },
-
-    initInputFocusEvents: function ($input) {
-      this.addListener($input, 'focus', function () {
-        this.$passwordWrapper.addClass('focus');
-      });
-      this.addListener($input, 'blur', function () {
-        this.$passwordWrapper.removeClass('focus');
-      });
-    },
-
-    showPassword: function () {
-      if (this.showingPassword) {
-        return;
-      }
-
-      if (!this.$textInput) {
-        this.$textInput = this.$passwordInput.clone(true);
-        this.$textInput.attr({
-          type: 'text',
-          autocapitalize: 'off',
-        });
-        this.initInputFocusEvents(this.$textInput);
-      }
-
-      this.setCurrentInput(this.$textInput);
-      this.updateToggleLabel(Craft.t('app', 'Hide'));
-      this.showingPassword = true;
-    },
-
-    hidePassword: function () {
-      // showingPassword could be null, which is acceptable
-      if (this.showingPassword === false) {
-        return;
-      }
-
-      this.setCurrentInput(this.$passwordInput);
-      this.updateToggleLabel(Craft.t('app', 'Show'));
-      this.showingPassword = false;
-    },
-
-    togglePassword: function () {
-      if (this.showingPassword) {
-        this.hidePassword();
-      } else {
-        this.showPassword();
-      }
-
-      this.settings.onToggleInput(this.$currentInput);
-    },
-
-    onInputChange: function () {
-      if (this.$currentInput.val()) {
-        this.$showPasswordToggle.removeClass('invisible');
-      } else {
-        this.$showPasswordToggle.addClass('invisible');
-      }
-    },
-
-    onClick: function (ev) {
-      if (this.$currentInput[0].setSelectionRange) {
-        var selectionStart = this.$currentInput[0].selectionStart,
-          selectionEnd = this.$currentInput[0].selectionEnd;
-
-        this.togglePassword();
-        this.$currentInput[0].setSelectionRange(selectionStart, selectionEnd);
-      } else {
-        this.togglePassword();
-      }
-    },
-
-    destroy: function () {
-      this.$passwordInput.removeData('passwordInput');
-      this.base();
-    },
-  },
-  {
-    defaults: {
-      onToggleInput: $.noop,
-    },
-  }
-);
diff --git a/packages/craftcms-legacy/cp/src/js/UI.js b/packages/craftcms-legacy/cp/src/js/UI.js
index b46f2e8fa18..ae0332fd3b0 100644
--- a/packages/craftcms-legacy/cp/src/js/UI.js
+++ b/packages/craftcms-legacy/cp/src/js/UI.js
@@ -179,19 +179,42 @@ Craft.ui = {
   },
 
   createPasswordInput(config) {
-    return this.createTextInput(
+    // Builds a <craft-input-password> web component (mirrors the server-rendered
+    // CraftCms\Cms\Cp\Components\InputPassword) — a text input with a built-in
+    // show/hide reveal toggle, replacing the legacy Craft.PasswordInput JS. The
+    // native input lives in the light DOM as the component's form control.
+    var $inner = this.createTextInput(
       Object.assign({}, config, {
         type: 'password',
       })
     );
+    // createTextInput wraps password inputs in a legacy .passwordwrapper; unwrap
+    // to the native input for the web component's `input` slot.
+    var $input = $inner.is('input') ? $inner : $inner.find('input').first();
+
+    var $el = $('<craft-input-password/>');
+    // Lion pushes these control props onto the slotted input on upgrade, so they
+    // must live on the host too (mirrors InputPassword::hostAttributes()).
+    if (config.name) {
+      $el.attr('name', config.name);
+    }
+    if (config.placeholder) {
+      $el.attr('placeholder', config.placeholder);
+    }
+    if (this.getDisabledValue(config.disabled)) {
+      $el.attr('disabled', '');
+    }
+    if (config.readonly) {
+      $el.attr('readonly', '');
+    }
+
+    $input.attr('slot', 'input').appendTo($el);
+
+    return $el;
   },
 
   createPasswordField(config) {
-    return this.createTextField(
-      Object.assign({}, config, {
-        type: 'password',
-      })
-    );
+    return this.createField(this.createPasswordInput(config), config);
   },
 
   createCopyTextInput: function (config) {
diff --git a/resources/templates/_includes/forms/password.twig b/resources/templates/_includes/forms/password.twig
index 55fd4f05efa..336640e6df1 100644
--- a/resources/templates/_includes/forms/password.twig
+++ b/resources/templates/_includes/forms/password.twig
@@ -1,6 +1,14 @@
-<div class="passwordwrapper">
-    {%- include '_includes/forms/text' with {
-        class: (class ?? [])|explodeClass|push('password'),
-        type: 'password',
-    } -%}
-</div>
+{# Renders a <craft-input-password> web component from the legacy password
+   variables — a text input with a built-in show/hide reveal toggle. This
+   replaces the old `.passwordwrapper` + `<input type="password">` markup and the
+   separate `Craft.PasswordInput` JS, which the component now handles natively.
+
+   The legacy-to-component mapping lives in FormFields::passwordFromConfig(),
+   which reuses the text-input mapping (see `_includes/forms/text`). #}
+
+{%- set inputAttributes = inputAttributes ?? {} %}
+{%- if block('attr') is defined %}
+  {%- set inputAttributes = inputAttributes|merge(('<div ' ~ block('attr') ~ '>')|parseAttr, recursive=true) %}
+{% endif %}
+
+{{- craft.cp.password(_context)|raw -}}
diff --git a/resources/templates/users/_password.twig b/resources/templates/users/_password.twig
index 743822d7fff..02e00de8b47 100644
--- a/resources/templates/users/_password.twig
+++ b/resources/templates/users/_password.twig
@@ -27,7 +27,6 @@
 } %}
 
 {% js %}
-  new Craft.PasswordInput('#newPassword');
   new Craft.ElevatedSessionForm('#main-form', ['#newPassword']);
 
   Craft.authMethodSetup = new Craft.AuthMethodSetup();
diff --git a/src/Cp/Components/ComponentRegistry.php b/src/Cp/Components/ComponentRegistry.php
index cdb1ae541a3..3e11bbb6601 100644
--- a/src/Cp/Components/ComponentRegistry.php
+++ b/src/Cp/Components/ComponentRegistry.php
@@ -27,6 +27,7 @@ class ComponentRegistry
         'field-group' => FieldGroup::class,
         'icon' => Icon::class,
         'input' => Input::class,
+        'input-password' => InputPassword::class,
         'lightswitch' => Lightswitch::class,
         'radio' => Radio::class,
         'radio-group' => RadioGroup::class,
diff --git a/src/Cp/Components/InputPassword.php b/src/Cp/Components/InputPassword.php
new file mode 100644
index 00000000000..1d9edd3ea73
--- /dev/null
+++ b/src/Cp/Components/InputPassword.php
@@ -0,0 +1,53 @@
+<?php
+
+declare(strict_types=1);
+
+namespace CraftCms\Cms\Cp\Components;
+
+use Closure;
+
+/**
+ * PHP counterpart to the `<craft-input-password>` web component — a text input
+ * with a built-in show/hide reveal toggle, the modern replacement for the
+ * legacy `Craft.PasswordInput` JS.
+ *
+ * It's an {@see Input} whose tag and type are fixed to password. The component
+ * owns its input type (toggling it between `password` and `text` via the reveal
+ * button), so the type is deliberately kept off the host — but the slotted
+ * native input still carries `type="password"` for pre-upgrade masking and form
+ * posting.
+ *
+ *     InputPassword::make()
+ *         ->name('newPassword')
+ *         ->autocomplete('new-password');
+ */
+class InputPassword extends Input
+{
+    #[\Override]
+    protected string|Closure $type = 'password';
+
+    #[\Override]
+    protected function tagName(): string
+    {
+        return 'craft-input-password';
+    }
+
+    #[\Override]
+    protected function hostAttributes(): array
+    {
+        $attributes = parent::hostAttributes();
+
+        // craft-input-password extends LionInput directly, so it only honors the
+        // control properties Lion pushes onto the slotted input on upgrade
+        // (placeholder/name/disabled/readonly). Drop `type` — the component owns
+        // it (password ⇄ text via the reveal toggle) — and the craft-input-only
+        // styling host attributes it doesn't implement. The slotted native input
+        // still carries the functional ones (type, maxlength) via
+        // Input::inputHtml().
+        foreach (['type', 'maxlength', 'size', 'small', 'width', 'center', 'monospace', 'hidden-input'] as $key) {
+            unset($attributes[$key]);
+        }
+
+        return $attributes;
+    }
+}
diff --git a/src/Cp/FormFields.php b/src/Cp/FormFields.php
index 05c609270ba..f292c1fce0d 100644
--- a/src/Cp/FormFields.php
+++ b/src/Cp/FormFields.php
@@ -14,6 +14,7 @@
 use CraftCms\Cms\Cp\Components\CheckboxSelect;
 use CraftCms\Cms\Cp\Components\Field;
 use CraftCms\Cms\Cp\Components\Input;
+use CraftCms\Cms\Cp\Components\InputPassword;
 use CraftCms\Cms\Cp\Components\Lightswitch;
 use CraftCms\Cms\Cp\Components\Radio;
 use CraftCms\Cms\Cp\Components\RadioGroup;
@@ -815,14 +816,14 @@ public static function textHtml(array $config): string
      * A `maxlength` alone keeps the legacy full-width behavior unless a
      * `width` is configured, since the web component would otherwise shrink.
      */
-    public static function textFromConfig(array $config): Input
+    public static function textFromConfig(array $config, ?Input $input = null): Input
     {
         $inputAttributes = $config['inputAttributes'] ?? [];
         $size = ($config['size'] ?? false) ?: null;
         $maxlength = ($config['maxlength'] ?? false) ?: null;
         $value = $config['value'] ?? null;
 
-        return Input::make()
+        return ($input ?? Input::make())
             ->id($config['id'] ?? 'text'.mt_rand())
             ->type($config['type'] ?? 'text')
             ->name($config['name'] ?? null)
@@ -866,6 +867,42 @@ public static function textFieldHtml(array $config): string
         );
     }
 
+    public static function passwordHtml(array $config): string
+    {
+        return self::passwordFromConfig($config)->toHtml();
+    }
+
+    /**
+     * Maps the legacy password config surface onto the {@see InputPassword}
+     * component — the PHP twin of the `_includes/forms/password` glue template.
+     * A password input is a text input with a fixed type plus the component's
+     * built-in reveal toggle (which replaces the legacy Craft.PasswordInput JS),
+     * so this reuses the text mapping and swaps the component. The legacy
+     * `.password` input class is preserved for any CSS/JS still keyed on it.
+     */
+    public static function passwordFromConfig(array $config): InputPassword
+    {
+        $config['type'] = 'password';
+        $classes = Html::explodeClass($config['class'] ?? []);
+        $classes[] = 'password';
+        $config['class'] = $classes;
+
+        $input = InputPassword::make();
+        self::textFromConfig($config, $input);
+
+        return $input;
+    }
+
+    public static function passwordFieldHtml(array $config): string
+    {
+        $config['id'] ??= 'password'.mt_rand();
+
+        return self::fieldHtml(
+            fn (array $c): string => self::passwordFromConfig($c)->toHtml(),
+            $config,
+        );
+    }
+
     public static function textareaHtml(array $config): string
     {
         return self::textareaFromConfig($config)->toHtml();
diff --git a/src/Twig/Variables/Cp.php b/src/Twig/Variables/Cp.php
index 50872dfe497..80d448056f5 100644
--- a/src/Twig/Variables/Cp.php
+++ b/src/Twig/Variables/Cp.php
@@ -335,6 +335,14 @@ public function textarea(array $config = []): string
         return FormFields::textareaFromConfig($config)->toHtml();
     }
 
+    /**
+     * Renders a password input's HTML from the legacy password variables.
+     */
+    public function password(array $config = []): string
+    {
+        return FormFields::passwordFromConfig($config)->toHtml();
+    }
+
     /**
      * Renders a lightswitch's HTML from the legacy lightswitch variables.
      */
diff --git a/tests/Unit/Cp/Components/ComponentManifestDriftTest.php b/tests/Unit/Cp/Components/ComponentManifestDriftTest.php
index 5f7662a5a9b..abaf7fe6821 100644
--- a/tests/Unit/Cp/Components/ComponentManifestDriftTest.php
+++ b/tests/Unit/Cp/Components/ComponentManifestDriftTest.php
@@ -218,6 +218,10 @@ function cpDriftExpectedPhpOnly(): array
         // on upgrade (LionInput/LionTextarea `updated()`), clobbering
         // server-rendered attributes with its defaults otherwise.
         'craft-input' => ['type', 'placeholder', 'name', 'disabled', 'readonly'],
+        // craft-input-password extends LionInput directly (no craft-input host
+        // props), so it only carries the Lion-pushed control props; `type` is
+        // owned by the component's reveal toggle, not server-set.
+        'craft-input-password' => ['placeholder', 'name', 'disabled', 'readonly'],
         'craft-textarea' => ['placeholder', 'name', 'disabled', 'readonly', 'rows'],
 
         // craft-icon: `data-color` is the global palette-scoping attribute
diff --git a/tests/Unit/Cp/Components/InputPasswordTest.php b/tests/Unit/Cp/Components/InputPasswordTest.php
new file mode 100644
index 00000000000..857dbb3a943
--- /dev/null
+++ b/tests/Unit/Cp/Components/InputPasswordTest.php
@@ -0,0 +1,70 @@
+<?php
+
+declare(strict_types=1);
+
+use CraftCms\Cms\Cp\Components\InputPassword;
+use CraftCms\Cms\Cp\FormFields;
+
+describe('input-password', function () {
+    it('renders a craft-input-password with a slotted password input', function () {
+        $html = InputPassword::make()
+            ->id('new-password')
+            ->name('newPassword')
+            ->toHtml();
+
+        expect($html)->toContain('<craft-input-password')
+            ->and($html)->toContain('slot="input"')
+            ->and($html)->toContain('type="password"')
+            ->and($html)->toContain('id="new-password"')
+            ->and($html)->toContain('name="newPassword"');
+    });
+
+    it('keeps the type off the host but on the native input', function () {
+        $html = InputPassword::make()->id('p')->toHtml();
+
+        // The component owns the type (password ⇄ text via the reveal toggle),
+        // so it must not be reflected on the host element.
+        expect($html)->not->toContain('<craft-input-password type=')
+            ->and($html)->not->toContain('<craft-input-password type="password"')
+            // …but the slotted native input still carries it for pre-upgrade
+            // masking and form posting.
+            ->and($html)->toContain('type="password"');
+    });
+
+    it('carries the host name for Lion upgrade, like craft-input', function () {
+        $html = InputPassword::make()->id('p')->name('newPassword')->toHtml();
+
+        expect($html)->toContain('<craft-input-password name="newPassword">');
+    });
+
+    it('renders disabled and readonly state', function () {
+        $html = InputPassword::make()->id('p')->disabled()->readOnly()->toHtml();
+
+        expect($html)->toContain(' disabled')
+            ->and($html)->toContain(' readonly');
+    });
+});
+
+describe('FormFields::passwordFromConfig', function () {
+    it('maps the legacy password config onto the component', function () {
+        $html = FormFields::passwordFromConfig([
+            'id' => 'newPassword',
+            'name' => 'newPassword',
+            'autocomplete' => 'new-password',
+        ])->toHtml();
+
+        expect($html)->toContain('<craft-input-password')
+            ->and($html)->toContain('id="newPassword"')
+            ->and($html)->toContain('name="newPassword"')
+            ->and($html)->toContain('autocomplete="new-password"')
+            // Preserves the legacy `.password` input class for CSS/JS keyed on it.
+            ->and($html)->toContain('password');
+    });
+
+    it('forces the password type regardless of a configured type', function () {
+        $html = FormFields::passwordFromConfig(['id' => 'p', 'type' => 'text'])->toHtml();
+
+        expect($html)->toContain('type="password"')
+            ->and($html)->not->toContain('type="text"');
+    });
+});
diff --git a/tests/Unit/Cp/FormFieldsTest.php b/tests/Unit/Cp/FormFieldsTest.php
index 77ffa79dcc6..70ac95be575 100644
--- a/tests/Unit/Cp/FormFieldsTest.php
+++ b/tests/Unit/Cp/FormFieldsTest.php
@@ -147,6 +147,7 @@ public function getFieldLayout(): FieldLayout
         ['color-input', 'colorFieldHtml'],
         ['editable', 'editableTableFieldHtml', ['name' => 'test']],
         ['lightswitch', 'lightswitchFieldHtml'],
+        ['<craft-input-password', 'passwordFieldHtml'],
         ['<select', 'selectFieldHtml'],
         ['type="text"', 'textFieldHtml'],
         ['slot="suffix"', 'textFieldHtml', ['unit' => 'Test unit']],
diff --git a/yii2-adapter/legacy/web/assets/cpcompat/cp-compat.js b/yii2-adapter/legacy/web/assets/cpcompat/cp-compat.js
index 7b8661d0c9b..8f52ba650fc 100644
--- a/yii2-adapter/legacy/web/assets/cpcompat/cp-compat.js
+++ b/yii2-adapter/legacy/web/assets/cpcompat/cp-compat.js
@@ -23,6 +23,7 @@
     registerInfoIconClass($);
     registerLightswitch($);
     registerLightSwitchClass($);
+    registerPasswordInputClass($);
     autoUpgrade($);
   }
 
@@ -325,6 +326,112 @@
     Craft.LightSwitch = LightSwitch;
   }
 
+  /**
+   * BC replacement for the removed `Craft.PasswordInput` class. Warns once, then
+   * upgrades a legacy `<input type="password">` (and its `.passwordwrapper`) into
+   * a `<craft-input-password>`, which provides the show/hide reveal toggle
+   * natively — so `new Craft.PasswordInput(el, settings)` keeps producing a
+   * working, toggleable password field. Exposes the legacy programmatic surface
+   * (togglePassword etc.) as thin delegates to the element.
+   */
+  function registerPasswordInputClass($) {
+    var Craft = window.Craft;
+    if (!Craft || Craft.PasswordInput) {
+      return;
+    }
+
+    var warned = false;
+
+    function PasswordInput(passwordInput, settings) {
+      if (!(this instanceof PasswordInput)) {
+        return new PasswordInput(passwordInput, settings);
+      }
+      if (!warned) {
+        warned = true;
+        console.warn(
+          'Craft.PasswordInput is deprecated. Emit <craft-input-password> directly instead.'
+        );
+      }
+
+      this.settings = $.extend({onToggleInput: $.noop}, settings || {});
+
+      var $input = $(passwordInput);
+      this.$passwordInput = $input;
+
+      // Already inside a craft-input-password (e.g. server-rendered)? Just adopt
+      // it — nothing to upgrade.
+      var $existing = $input.closest('craft-input-password');
+      if ($existing.length) {
+        this.$input = $existing;
+
+        return;
+      }
+
+      var $el = $('<craft-input-password/>');
+      var el = $input[0];
+      if (el) {
+        // Lion pushes these control props onto the slotted input on upgrade, so
+        // mirror them onto the host (see InputPassword::hostAttributes()).
+        if (el.name) {
+          $el.attr('name', el.name);
+        }
+        if (el.placeholder) {
+          $el.attr('placeholder', el.placeholder);
+        }
+        if (el.disabled) {
+          $el.attr('disabled', '');
+        }
+        if (el.readOnly) {
+          $el.attr('readonly', '');
+        }
+      }
+
+      // Upgrade the legacy .passwordwrapper if present, else the bare input.
+      var $wrapper = $input.parent('.passwordwrapper');
+      var $target = $wrapper.length ? $wrapper : $input;
+      $input.attr({type: 'password', slot: 'input'}).appendTo($el);
+      $target.replaceWith($el);
+
+      this.$input = $el;
+    }
+
+    PasswordInput.prototype = {
+      constructor: PasswordInput,
+
+      togglePassword: function () {
+        var el = this.$input && this.$input[0];
+        if (el && typeof el.reveal === 'function') {
+          el.reveal();
+        }
+        this.settings.onToggleInput(this.$passwordInput);
+      },
+
+      // The web component owns the reveal state; these route through the same
+      // toggle, but only when a change is actually needed (`type === 'text'`
+      // means currently revealed).
+      showPassword: function () {
+        this._reveal(true);
+      },
+      hidePassword: function () {
+        this._reveal(false);
+      },
+      _reveal: function (show) {
+        var el = this.$input && this.$input[0];
+        if (!el || typeof el.reveal !== 'function') {
+          return;
+        }
+        if ((el.type === 'text') !== show) {
+          el.reveal();
+        }
+        this.settings.onToggleInput(this.$passwordInput);
+      },
+      updateToggleLabel: function () {},
+      destroy: function () {},
+    };
+
+    Craft.PasswordInput = PasswordInput;
+  }
+
   /**
    * Preserves the legacy auto-upgrade of third-party `.info`/`.lightswitch`
    * markup: sweep on load and whenever Craft.initUiElements runs on injected

From 4e780b3d575c5de157a7112f715cea5b80e6cd08 Mon Sep 17 00:00:00 2001
From: Brian Hanson <brian@brianhanson.net>
Date: Mon, 27 Jul 2026 11:21:16 -0500
Subject: [PATCH 10/20] Replace legacy Craft.ColorInput with the
 craft-input-color component

Ports the color input onto the existing <craft-input-color> web component (a
LionInput that pairs a hex text field with a native color picker, swatch, and
preset datalist, with built-in # stripping / hex normalization), retiring the
legacy Craft.ColorInput JS and the hand-built .color-container markup.

Server side (the AGENTS.md form-input pattern):
- Adds the InputColor component (extends Input; tag craft-input-color). Like
  InputPassword it keeps only the Lion-pushed control props on the host and adds
  a `presets` JSON attribute for the picker datalist; the value is stored as
  bare hex.
- Registers it, adds FormFields::colorFromConfig (reusing the text mapping,
  # stripping the value, preserving the legacy .color-input class), a
  craft.cp.color() Twig delegate, and reduces _includes/forms/color.twig to that
  delegate. This also updates the Color field type, which renders via colorHtml.

Consumers / legacy removal:
- Points UI.js createColorInput at craft-input-color (the modern
  editable-table.ts color cell uses that factory) and fixes a pre-existing
  stray `o;` ReferenceError in createColorField.
- Deletes ColorInput.js and its import; adds a warn-and-delegate Craft.ColorInput
  stub to the cpcompat bundle that upgrades a legacy .color-container to
  <craft-input-color>.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 packages/craftcms-legacy/cp/src/Craft.js      |   1 -
 .../craftcms-legacy/cp/src/js/ColorInput.js   | 130 ------------------
 packages/craftcms-legacy/cp/src/js/UI.js      |  54 +++-----
 .../templates/_includes/forms/color.twig      |  66 ++-------
 src/Cp/Components/ComponentRegistry.php       |   1 +
 src/Cp/Components/InputColor.php              |  67 +++++++++
 src/Cp/FormFields.php                         |  34 ++++-
 src/Twig/Variables/Cp.php                     |   8 ++
 .../Components/ComponentManifestDriftTest.php |   8 +-
 tests/Unit/Cp/Components/InputColorTest.php   |  71 ++++++++++
 .../legacy/web/assets/cpcompat/cp-compat.js   |  65 +++++++++
 11 files changed, 281 insertions(+), 224 deletions(-)
 delete mode 100644 packages/craftcms-legacy/cp/src/js/ColorInput.js
 create mode 100644 src/Cp/Components/InputColor.php
 create mode 100644 tests/Unit/Cp/Components/InputColorTest.php

diff --git a/packages/craftcms-legacy/cp/src/Craft.js b/packages/craftcms-legacy/cp/src/Craft.js
index 194acacaf56..231d7764373 100644
--- a/packages/craftcms-legacy/cp/src/Craft.js
+++ b/packages/craftcms-legacy/cp/src/Craft.js
@@ -43,7 +43,6 @@ import './js/CP.js';
 import './js/CardsElementIndexView.js';
 import './js/CategoryIndex.js';
 import './js/Chart.js';
-import './js/ColorInput.js';
 import './js/ComponentSelectInput.js';
 import './js/ContentBlockEditor.js';
 import './js/CustomizeSourcesModal.js';
diff --git a/packages/craftcms-legacy/cp/src/js/ColorInput.js b/packages/craftcms-legacy/cp/src/js/ColorInput.js
deleted file mode 100644
index 06084818bab..00000000000
--- a/packages/craftcms-legacy/cp/src/js/ColorInput.js
+++ /dev/null
@@ -1,130 +0,0 @@
-/** global: Craft */
-/** global: Garnish */
-/**
- * Color input
- */
-Craft.ColorInput = Garnish.Base.extend(
-  {
-    $container: null,
-    $input: null,
-    $colorContainer: null,
-    $colorPreview: null,
-    $colorInput: null,
-
-    init: function (container, settings) {
-      this.setSettings(settings, Craft.ColorInput.defaults);
-
-      this.$container = $(container);
-      this.$input = this.$container.find('.color-input');
-      this.$colorContainer = this.$container.children('.color');
-      this.$colorPreview = this.$colorContainer.children('.color-preview');
-
-      this.createColorInput();
-      this.handleTextChange();
-
-      this.addListener(this.$input, 'input', 'handleTextChange');
-    },
-
-    createColorInput: function () {
-      var input = document.createElement('input');
-      input.setAttribute('type', 'color');
-
-      if (input.type !== 'color') {
-        // The browser doesn't support input[type=color]
-        return;
-      }
-
-      let isDisabled = false;
-      if (this.$container.parents('.input').hasClass('disabled')) {
-        isDisabled = true;
-      }
-      this.$colorContainer.removeClass('static');
-      this.$colorInput = $(input)
-        .addClass('color-preview-input')
-        .attr({
-          'aria-controls': this.$input.attr('id'),
-          'aria-label': Craft.t('app', 'Color picker'),
-          'aria-labelledby': this.$input.attr('aria-labelledby'),
-        })
-        .appendTo(this.$colorPreview);
-
-      if (isDisabled) {
-        this.$colorInput.attr('disabled', '');
-      }
-
-      if (this.settings.presets?.length) {
-        const listId = `listbox-${Math.floor(Math.random() * 1000000)}`;
-        this.$colorInput.attr('list', listId);
-        const $list = $('<datalist/>', {
-          id: listId,
-        }).insertAfter(this.$colorInput);
-        for (const color of this.settings.presets) {
-          $('<option/>').text(color).appendTo($list);
-        }
-      }
-
-      this.addListener(this.$colorInput, 'click', function (ev) {
-        ev.stopPropagation();
-      });
-
-      this.addListener(this.$colorContainer, 'click', function () {
-        this.$colorInput.trigger('click');
-      });
-
-      this.addListener(this.$colorInput, 'input', 'updateColor');
-    },
-
-    updateColor: function () {
-      this.$input.val(this.$colorInput.val());
-      this.handleTextChange();
-    },
-
-    handleTextChange: function () {
-      let val = this.$input.val();
-
-      if (val !== (val = val.trim())) {
-        this.$input.val(val);
-      }
-
-      // Chop off the #
-      if (val.length && val[0] === '#') {
-        val = val.substring(1);
-        this.$input.val(val);
-      }
-
-      // If empty, set the preview to transparent
-      if (!val.length) {
-        this.$colorPreview.css('background-color', '');
-        return;
-      }
-
-      // Now normalize it for the UI stuff
-      if (val.length === 3) {
-        val = val[0].repeat(2) + val[1].repeat(2) + val[2].repeat(2);
-      }
-
-      if (val.match(/^[0-9a-f]{6}$/i)) {
-        this.$colorPreview.css('background-color', `#${val}`);
-        if (this.$colorInput) {
-          this.$colorInput.val(`#${val}`);
-        }
-      } else {
-        this.$colorPreview.css('background-color', '');
-      }
-    },
-  },
-  {
-    defaults: {
-      presets: [],
-    },
-
-    _browserSupportsColorInputs: null,
-
-    doesBrowserSupportColorInputs: function () {
-      if (Craft.ColorInput._browserSupportsColorInputs === null) {
-      }
-
-      return Craft.ColorInput._browserSupportsColorInputs;
-    },
-  }
-);
diff --git a/packages/craftcms-legacy/cp/src/js/UI.js b/packages/craftcms-legacy/cp/src/js/UI.js
index ae0332fd3b0..3a42072ca70 100644
--- a/packages/craftcms-legacy/cp/src/js/UI.js
+++ b/packages/craftcms-legacy/cp/src/js/UI.js
@@ -838,40 +838,17 @@ Craft.ui = {
   },
 
   createColorInput: function (config) {
+    // Builds a <craft-input-color> web component (mirrors the server-rendered
+    // CraftCms\Cms\Cp\Components\InputColor) — a hex input paired with a native
+    // color-picker swatch, replacing the legacy .color-container markup + the
+    // Craft.ColorInput JS. The native input lives in the light DOM as the
+    // component's form control.
     const id = config.id || 'color' + Math.floor(Math.random() * 1000000000);
-    const containerId = config.containerId || id + '-container';
     const name = config.name || null;
     const value = config.value || null;
-    const small = config.small || false;
     const autofocus = config.autofocus && Garnish.isMobileBrowser(true);
     const disabled = config.disabled || false;
 
-    const $container = $('<div/>', {
-      id: containerId,
-      class: 'flex color-container',
-    });
-
-    const $colorPreviewContainer = $('<div/>', {
-      class: 'color static' + (small ? ' small' : ''),
-    }).appendTo($container);
-
-    const $colorPreview = $('<div/>', {
-      class: 'color-preview',
-      style: config.value ? {backgroundColor: config.value} : null,
-    }).appendTo($colorPreviewContainer);
-
-    const $inputContainer = $('<div/>', {
-      class: 'color-input-container',
-    })
-      .append(
-        $('<div/>', {
-          class: 'color-hex-indicator light code',
-          'aria-hidden': 'true',
-          text: '#',
-        })
-      )
-      .appendTo($container);
-
     const $input = this.createTextInput({
       id: id,
       name: name,
@@ -881,15 +858,28 @@ Craft.ui = {
       autofocus: autofocus,
       disabled: disabled,
       'aria-label': Craft.t('app', 'Color hex value'),
-    }).appendTo($inputContainer);
+    });
 
-    new Craft.ColorInput($container);
-    return $container;
+    const $el = $('<craft-input-color/>');
+    // Lion pushes these control props onto the slotted input on upgrade, so they
+    // must live on the host too (mirrors InputColor::hostAttributes()).
+    if (name) {
+      $el.attr('name', name);
+    }
+    if (this.getDisabledValue(disabled)) {
+      $el.attr('disabled', '');
+    }
+    if (config.presets && config.presets.length) {
+      $el.attr('presets', JSON.stringify(config.presets));
+    }
+
+    $input.attr('slot', 'input').appendTo($el);
+
+    return $el;
   },
 
   createColorField: function (config) {
     config.fieldset = true;
-    o;
     if (!config.id) {
       config.id = 'color' + Math.floor(Math.random() * 1000000000);
     }
diff --git a/resources/templates/_includes/forms/color.twig b/resources/templates/_includes/forms/color.twig
index d70d52f582f..deb6629e544 100644
--- a/resources/templates/_includes/forms/color.twig
+++ b/resources/templates/_includes/forms/color.twig
@@ -1,61 +1,15 @@
-{% import "_includes/forms" as forms -%}
+{# Renders a <craft-input-color> web component from the legacy color variables —
+   a hex text input paired with a native color-picker swatch and an optional
+   preset datalist. This replaces the old `.color-container` markup (swatch,
+   `#` indicator, `.color-input` text field) and the separate `Craft.ColorInput`
+   JS, which the component now handles natively.
 
-{% set id = id ?? "color#{random()}" -%}
-{% set containerId = containerId ?? "#{id}-container" -%}
-{% set hexLabelId = "#{id}-label" %}
-{% set hexDescriptionId = "#{id}-desc" %}
-{% set name = name ?? null -%}
-{% set value = value ?? null -%}
-{% set small = small ?? false -%}
-{% set autofocus = (autofocus ?? false) and not Request.isMobileBrowser(true) -%}
-{% set disabled = disabled ?? false -%}
-{% set labelledBy = labelledBy ?? null %}
-
-{% set containerAttributes = {
-    id: containerId,
-    class: ['flex', 'flex-nowrap', 'color-container'],
-}|merge(containerAttributes ?? [], recursive=true) %}
+   The legacy-to-component mapping lives in FormFields::colorFromConfig(), which
+   reuses the text-input mapping (see `_includes/forms/text`). #}
 
+{%- set inputAttributes = inputAttributes ?? {} %}
 {%- if block('attr') is defined %}
-    {%- set containerAttributes = containerAttributes|merge(('<div ' ~ block('attr') ~ '>')|parseAttr, recursive=true) %}
+  {%- set inputAttributes = inputAttributes|merge(('<div ' ~ block('attr') ~ '>')|parseAttr, recursive=true) %}
 {% endif %}
 
-{% apply spaceless %}
-    {% tag 'div' with containerAttributes %}
-        {% tag 'div' with {
-            class: ['color', 'static', small ? 'small']|filter,
-        } %}
-            {{ tag('div', {
-                class: ['color-preview'],
-                style: {'background-color': value}|filter,
-            }) }}
-        {% endtag %}
-        <div class="color-input-container">
-            <div class="color-hex-indicator light code" aria-hidden="true">#</div>
-            <span id="{{ hexLabelId }}" class="visually-hidden">{{ 'Color hex value'|t('app') }}</span>
-            <span id="{{ hexDescriptionId }}" class="visually-hidden">{{ 'Value prefixed by “{prefix}”.'|t('app', {prefix: '#'}) }}</span>
-            {{ forms.text({
-                id: id,
-                describedBy: describedBy ?? false,
-                name: name,
-                value: value|trim('#'),
-                size: 10,
-                class: 'color-input',
-                autofocus: autofocus,
-                disabled: disabled,
-                labelledBy: [labelledBy, hexLabelId]|filter|join(' '),
-                inputAttributes: {
-                    aria: {
-                        describedby: hexDescriptionId,
-                    }
-                }
-            }) }}
-        </div>
-    {% endtag %}
-{% endapply -%}
-
-{% js %}
-    new Craft.ColorInput('#{{ containerId|namespaceInputId }}', {
-        presets: {{ (presets ?? [])|json_encode|raw }},
-    });
-{% endjs -%}
+{{- craft.cp.color(_context)|raw -}}
diff --git a/src/Cp/Components/ComponentRegistry.php b/src/Cp/Components/ComponentRegistry.php
index 3e11bbb6601..118834173b1 100644
--- a/src/Cp/Components/ComponentRegistry.php
+++ b/src/Cp/Components/ComponentRegistry.php
@@ -27,6 +27,7 @@ class ComponentRegistry
         'field-group' => FieldGroup::class,
         'icon' => Icon::class,
         'input' => Input::class,
+        'input-color' => InputColor::class,
         'input-password' => InputPassword::class,
         'lightswitch' => Lightswitch::class,
         'radio' => Radio::class,
diff --git a/src/Cp/Components/InputColor.php b/src/Cp/Components/InputColor.php
new file mode 100644
index 00000000000..da73594e4dd
--- /dev/null
+++ b/src/Cp/Components/InputColor.php
@@ -0,0 +1,67 @@
+<?php
+
+declare(strict_types=1);
+
+namespace CraftCms\Cms\Cp\Components;
+
+use Closure;
+
+/**
+ * PHP counterpart to the `<craft-input-color>` web component — a hex text input
+ * paired with a native color-picker swatch and an optional preset datalist, the
+ * modern replacement for the legacy `Craft.ColorInput` JS.
+ *
+ * It's an {@see Input} whose tag is fixed to craft-input-color. Like
+ * {@see InputPassword}, the element extends LionInput directly (not craft-input),
+ * so only the Lion-pushed control props live on the host; the value is stored as
+ * bare hex (the component renders its own leading `#`). Presets are passed as a
+ * JSON array attribute the component parses into its picker datalist.
+ *
+ *     InputColor::make()
+ *         ->name('color')
+ *         ->value('7ab55c')
+ *         ->presets(['#ffffff', '#000000']);
+ */
+class InputColor extends Input
+{
+    /** @var array<int, string>|Closure */
+    protected array|Closure $presets = [];
+
+    #[\Override]
+    protected function tagName(): string
+    {
+        return 'craft-input-color';
+    }
+
+    /**
+     * Preset colors offered in the picker's datalist. Each may be `#`-prefixed
+     * or bare hex; the component drops invalid entries.
+     *
+     * @param  array<int, string>|Closure  $presets
+     */
+    public function presets(array|Closure $presets): static
+    {
+        $this->presets = $presets;
+
+        return $this;
+    }
+
+    #[\Override]
+    protected function hostAttributes(): array
+    {
+        $attributes = parent::hostAttributes();
+
+        // craft-input-color extends LionInput directly (see InputPassword for the
+        // same rationale): keep only the Lion-pushed control props on the host,
+        // drop `type` and the craft-input-only styling attributes. The slotted
+        // native input still carries the functional ones via Input::inputHtml().
+        foreach (['type', 'maxlength', 'size', 'small', 'width', 'center', 'monospace', 'hidden-input'] as $key) {
+            unset($attributes[$key]);
+        }
+
+        $presets = array_values(array_filter((array) $this->evaluate($this->presets)));
+        $attributes['presets'] = $presets !== [] ? json_encode($presets) : null;
+
+        return $attributes;
+    }
+}
diff --git a/src/Cp/FormFields.php b/src/Cp/FormFields.php
index f292c1fce0d..b450fc1ac34 100644
--- a/src/Cp/FormFields.php
+++ b/src/Cp/FormFields.php
@@ -14,6 +14,7 @@
 use CraftCms\Cms\Cp\Components\CheckboxSelect;
 use CraftCms\Cms\Cp\Components\Field;
 use CraftCms\Cms\Cp\Components\Input;
+use CraftCms\Cms\Cp\Components\InputColor;
 use CraftCms\Cms\Cp\Components\InputPassword;
 use CraftCms\Cms\Cp\Components\Lightswitch;
 use CraftCms\Cms\Cp\Components\Radio;
@@ -640,7 +641,33 @@ public static function checkboxGroupFromConfig(array $config): CheckboxGroup
 
     public static function colorHtml(array $config): string
     {
-        return self::renderTemplate('_includes/forms/color', $config);
+        return self::colorFromConfig($config)->toHtml();
+    }
+
+    /**
+     * Maps the legacy color config surface onto the {@see InputColor} component
+     * — the PHP twin of the `_includes/forms/color` glue template. The value is
+     * stored as bare hex (the component renders its own leading `#`, swatch, and
+     * native picker, replacing the legacy Craft.ColorInput markup + JS), and
+     * `presets` pass through to the picker datalist. The legacy `.color-input`
+     * input class is preserved for any CSS/JS still keyed on it.
+     */
+    public static function colorFromConfig(array $config): InputColor
+    {
+        $value = $config['value'] ?? null;
+        $classes = Html::explodeClass($config['class'] ?? []);
+        $classes[] = 'color-input';
+
+        $input = InputColor::make();
+        self::textFromConfig(array_merge($config, [
+            'value' => $value !== null ? ltrim((string) $value, '#') : null,
+            'size' => $config['size'] ?? 10,
+            'class' => $classes,
+            'autocorrect' => false,
+            'autocapitalize' => false,
+        ]), $input);
+
+        return $input->presets($config['presets'] ?? []);
     }
 
     public static function colorFieldHtml(array $config): string
@@ -648,7 +675,10 @@ public static function colorFieldHtml(array $config): string
         $config['id'] ??= 'color'.mt_rand();
         $config['fieldset'] = true;
 
-        return self::fieldHtml('template:_includes/forms/color', $config);
+        return self::fieldHtml(
+            fn (array $c): string => self::colorFromConfig($c)->toHtml(),
+            $config,
+        );
     }
 
     public static function colorSelectFieldHtml(array $config): string
diff --git a/src/Twig/Variables/Cp.php b/src/Twig/Variables/Cp.php
index 80d448056f5..1d495e4f059 100644
--- a/src/Twig/Variables/Cp.php
+++ b/src/Twig/Variables/Cp.php
@@ -343,6 +343,14 @@ public function password(array $config = []): string
         return FormFields::passwordFromConfig($config)->toHtml();
     }
 
+    /**
+     * Renders a color input's HTML from the legacy color variables.
+     */
+    public function color(array $config = []): string
+    {
+        return FormFields::colorFromConfig($config)->toHtml();
+    }
+
     /**
      * Renders a lightswitch's HTML from the legacy lightswitch variables.
      */
diff --git a/tests/Unit/Cp/Components/ComponentManifestDriftTest.php b/tests/Unit/Cp/Components/ComponentManifestDriftTest.php
index abaf7fe6821..f0da6c533a1 100644
--- a/tests/Unit/Cp/Components/ComponentManifestDriftTest.php
+++ b/tests/Unit/Cp/Components/ComponentManifestDriftTest.php
@@ -218,10 +218,12 @@ function cpDriftExpectedPhpOnly(): array
         // on upgrade (LionInput/LionTextarea `updated()`), clobbering
         // server-rendered attributes with its defaults otherwise.
         'craft-input' => ['type', 'placeholder', 'name', 'disabled', 'readonly'],
-        // craft-input-password extends LionInput directly (no craft-input host
-        // props), so it only carries the Lion-pushed control props; `type` is
-        // owned by the component's reveal toggle, not server-set.
+        // craft-input-password / craft-input-color extend LionInput directly (no
+        // craft-input host props), so they only carry the Lion-pushed control
+        // props; `type` is owned by the component (password reveal / color
+        // picker), not server-set.
         'craft-input-password' => ['placeholder', 'name', 'disabled', 'readonly'],
+        'craft-input-color' => ['placeholder', 'name', 'disabled', 'readonly'],
         'craft-textarea' => ['placeholder', 'name', 'disabled', 'readonly', 'rows'],
 
         // craft-icon: `data-color` is the global palette-scoping attribute
diff --git a/tests/Unit/Cp/Components/InputColorTest.php b/tests/Unit/Cp/Components/InputColorTest.php
new file mode 100644
index 00000000000..69940b36356
--- /dev/null
+++ b/tests/Unit/Cp/Components/InputColorTest.php
@@ -0,0 +1,71 @@
+<?php
+
+declare(strict_types=1);
+
+use CraftCms\Cms\Cp\Components\InputColor;
+use CraftCms\Cms\Cp\FormFields;
+
+describe('input-color', function () {
+    it('renders a craft-input-color with a slotted hex input', function () {
+        $html = InputColor::make()
+            ->id('fill')
+            ->name('fill')
+            ->value('7ab55c')
+            ->toHtml();
+
+        expect($html)->toContain('<craft-input-color')
+            ->and($html)->toContain('slot="input"')
+            ->and($html)->toContain('id="fill"')
+            ->and($html)->toContain('name="fill"')
+            ->and($html)->toContain('value="7ab55c"');
+    });
+
+    it('keeps only the Lion control props on the host', function () {
+        $html = InputColor::make()->id('c')->name('c')->toHtml();
+
+        // The component owns its type/layout; craft-input-only styling host
+        // attributes must not appear on the element.
+        expect($html)->toContain('<craft-input-color name="c">')
+            ->and($html)->not->toContain('maxlength')
+            ->and($html)->not->toContain('<craft-input-color type=');
+    });
+
+    it('emits presets as a JSON array attribute', function () {
+        $html = InputColor::make()->id('c')->presets(['#ffffff', '#000000'])->toHtml();
+
+        expect($html)->toContain('presets=')
+            ->and($html)->toContain('ffffff')
+            ->and($html)->toContain('000000');
+    });
+
+    it('omits presets when empty', function () {
+        $html = InputColor::make()->id('c')->toHtml();
+
+        expect($html)->not->toContain('presets=');
+    });
+});
+
+describe('FormFields::colorFromConfig', function () {
+    it('strips a leading # from the value and keeps the .color-input class', function () {
+        $html = FormFields::colorFromConfig([
+            'id' => 'bg',
+            'name' => 'bg',
+            'value' => '#7ab55c',
+        ])->toHtml();
+
+        expect($html)->toContain('<craft-input-color')
+            ->and($html)->toContain('value="7ab55c"')
+            ->and($html)->not->toContain('value="#7ab55c"')
+            ->and($html)->toContain('color-input');
+    });
+
+    it('passes presets through to the component', function () {
+        $html = FormFields::colorFromConfig([
+            'id' => 'bg',
+            'presets' => ['#ffffff', '#7ab55c'],
+        ])->toHtml();
+
+        expect($html)->toContain('presets=')
+            ->and($html)->toContain('7ab55c');
+    });
+});
diff --git a/yii2-adapter/legacy/web/assets/cpcompat/cp-compat.js b/yii2-adapter/legacy/web/assets/cpcompat/cp-compat.js
index 8f52ba650fc..5d5c7472a27 100644
--- a/yii2-adapter/legacy/web/assets/cpcompat/cp-compat.js
+++ b/yii2-adapter/legacy/web/assets/cpcompat/cp-compat.js
@@ -24,6 +24,7 @@
     registerLightswitch($);
     registerLightSwitchClass($);
     registerPasswordInputClass($);
+    registerColorInputClass($);
     autoUpgrade($);
   }
 
@@ -432,6 +433,70 @@
     Craft.PasswordInput = PasswordInput;
   }
 
+  /**
+   * BC replacement for the removed `Craft.ColorInput` class. Warns once, then
+   * upgrades a legacy `.color-container` (its `.color-input` text field, swatch,
+   * and `#` indicator) into a `<craft-input-color>`, which provides the picker,
+   * swatch, and hex handling natively — so `new Craft.ColorInput(container,
+   * {presets})` keeps producing a working color input.
+   */
+  function registerColorInputClass($) {
+    var Craft = window.Craft;
+    if (!Craft || Craft.ColorInput) {
+      return;
+    }
+
+    var warned = false;
+
+    function ColorInput(container, settings) {
+      if (!(this instanceof ColorInput)) {
+        return new ColorInput(container, settings);
+      }
+      if (!warned) {
+        warned = true;
+        console.warn(
+          'Craft.ColorInput is deprecated. Emit <craft-input-color> directly instead.'
+        );
+      }
+
+      this.settings = $.extend({presets: []}, settings || {});
+
+      var $container = $(container);
+      this.$container = $container;
+      var $input = $container.find('.color-input').first();
+      this.$input = $input;
+
+      // Already upgraded (server-rendered craft-input-color)? Nothing to do.
+      if ($input.closest('craft-input-color').length) {
+        return;
+      }
+
+      var $el = $('<craft-input-color/>');
+      var el = $input[0];
+      if (el) {
+        // Lion pushes these control props onto the slotted input on upgrade, so
+        // mirror them onto the host (see InputColor::hostAttributes()). The
+        // legacy .color-input value is already bare hex (# stripped).
+        if (el.name) {
+          $el.attr('name', el.name);
+        }
+        if (el.disabled) {
+          $el.attr('disabled', '');
+        }
+      }
+      if (this.settings.presets && this.settings.presets.length) {
+        $el.attr('presets', JSON.stringify(this.settings.presets));
+      }
+
+      $input.attr('slot', 'input').appendTo($el);
+      $container.replaceWith($el);
+
+      this.$el = $el;
+    }
+
+    Craft.ColorInput = ColorInput;
+  }
+
   /**
    * Preserves the legacy auto-upgrade of third-party `.info`/`.lightswitch`
    * markup: sweep on load and whenever Craft.initUiElements runs on injected

From 44bc16933355f2e7fcc7a91ea16575b750174c7f Mon Sep 17 00:00:00 2001
From: Brian Hanson <brian@brianhanson.net>
Date: Mon, 27 Jul 2026 11:43:20 -0500
Subject: [PATCH 11/20] Port the input-generator cluster out of the legacy
 jQuery bundle
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Moves Craft.BaseInputGenerator + the Handle/Slug/UriFormat/Dynamic generators
from the legacy cp bundle into a modern TS module
(resources/js/modules/input-generators), following the module pattern (logic
class on @craftcms/garnish Base + an index.ts global shim). There's no custom
element or support.ts: generators link two existing inputs rather than wrapping
their own markup, and the legacy base never stored a .data() back-reference.

The base orchestrator is jQuery-free — plain DOM (querySelectorAll,
element.value, closest, dispatchEvent, layout-based visibility) over garnish
Base's jQuery-free listener registry; Craft.selectFullValue is inlined so the
base doesn't touch Craft either. It accepts the same argument forms the legacy
class did — a selector, an element, or an array-like (NodeList / array / jQuery
object) — resolved via Array.from, so legacy jQuery callers keep working without
the module importing jQuery. The only remaining globals are Craft (live config)
and XRegExp (slug), in the subclasses — neither is jQuery.

Instantiation is unchanged — every consumer still does
new Craft.HandleGenerator('#name', '#handle') (Twig {% js %} blocks, TitleField,
editable-table, generated-fields), now hitting the TS classes via the assigned
window.Craft.* globals, so no templates change.

Reuses the shared transforms instead of duplicating them: Handle/UriFormat
delegate to toHandle / toUriFormat from @craftcms/ui/utilities/string (the same
functions the Vue settings pages use via the useInputGenerator composable), and
Slug reuses asciiString. BaseInputGenerator is the DOM orchestrator counterpart
to useInputGenerator (Vue) — a Vue composable can't watch raw DOM inputs on
not-yet-migrated Twig pages — and both share the transforms so the paths stay in
sync. Slug generation keeps its transform inline (it depends on the page-global
XRegExp and live Craft.* config). UriFormat now joins with `-` (the modern
toUriFormat canonical) rather than Craft.slugWordSeparator.

Deletes the five legacy JS files and their imports; the ported DynamicGenerator
keeps the plugin BC its earlier restoration preserved, now in modern TS.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 packages/craftcms-legacy/cp/src/Craft.js      |   5 -
 .../cp/src/js/BaseInputGenerator.js           | 125 ----------
 .../cp/src/js/DynamicGenerator.js             |  17 --
 .../cp/src/js/HandleGenerator.js              |  44 ----
 .../cp/src/js/SlugGenerator.js                |  36 ---
 .../cp/src/js/UriFormatGenerator.js           |  26 --
 resources/js/cp.ts                            |   1 +
 resources/js/legacy.ts                        |   1 +
 .../js/modules/input-generators/README.md     |  92 +++++++
 .../input-generators/base-input-generator.ts  | 233 ++++++++++++++++++
 .../input-generators/dynamic-generator.ts     |  29 +++
 .../input-generators/handle-generator.ts      |  28 +++
 .../js/modules/input-generators/index.ts      |  26 ++
 .../input-generators/slug-generator.ts        |  53 ++++
 .../input-generators/uri-format-generator.ts  |  23 ++
 15 files changed, 486 insertions(+), 253 deletions(-)
 delete mode 100644 packages/craftcms-legacy/cp/src/js/BaseInputGenerator.js
 delete mode 100644 packages/craftcms-legacy/cp/src/js/DynamicGenerator.js
 delete mode 100644 packages/craftcms-legacy/cp/src/js/HandleGenerator.js
 delete mode 100644 packages/craftcms-legacy/cp/src/js/SlugGenerator.js
 delete mode 100644 packages/craftcms-legacy/cp/src/js/UriFormatGenerator.js
 create mode 100644 resources/js/modules/input-generators/README.md
 create mode 100644 resources/js/modules/input-generators/base-input-generator.ts
 create mode 100644 resources/js/modules/input-generators/dynamic-generator.ts
 create mode 100644 resources/js/modules/input-generators/handle-generator.ts
 create mode 100644 resources/js/modules/input-generators/index.ts
 create mode 100644 resources/js/modules/input-generators/slug-generator.ts
 create mode 100644 resources/js/modules/input-generators/uri-format-generator.ts

diff --git a/packages/craftcms-legacy/cp/src/Craft.js b/packages/craftcms-legacy/cp/src/Craft.js
index 231d7764373..b6034ec8dab 100644
--- a/packages/craftcms-legacy/cp/src/Craft.js
+++ b/packages/craftcms-legacy/cp/src/Craft.js
@@ -18,7 +18,6 @@ import './js/BaseElementIndex.js';
 import './js/BaseElementIndexView.js';
 import './js/BaseElementSelectInput.js';
 import './js/BaseElementSelectorModal.js';
-import './js/BaseInputGenerator.js';
 import './js/BaseUploader.js';
 
 // Modals
@@ -48,7 +47,6 @@ import './js/ContentBlockEditor.js';
 import './js/CustomizeSourcesModal.js';
 import './js/DataTableSorter.js';
 import './js/DeleteUserModal.js';
-import './js/DynamicGenerator.js';
 import './js/ElementActionTrigger.js';
 import './js/ElementDeletionManager.js';
 import './js/ElementEditor.js';
@@ -61,7 +59,6 @@ import './js/FormObserver.js';
 import './js/VolumeFolderSelectorModal.js';
 import './js/FieldToggle.js';
 import './js/Grid.js';
-import './js/HandleGenerator.js';
 import './js/IconPicker.js';
 import './js/ImageUpload.js';
 import './js/IntervalManager.js';
@@ -75,7 +72,6 @@ import './js/ProgressBar.js';
 import './js/PromptHandler.js';
 import './js/SlidePicker.js';
 import './js/SlideRuleInput.js';
-import './js/SlugGenerator.js';
 import './js/Structure.js';
 import './js/StructureDrag.js';
 import './js/TableElementIndexView.js';
@@ -83,7 +79,6 @@ import './js/TagSelectInput.js';
 import './js/ThumbsElementIndexView.js';
 import './js/Tooltip.js';
 import './js/Uploader.js';
-import './js/UriFormatGenerator.js';
 import './js/UserIndex.js';
 
 // Custom elements
diff --git a/packages/craftcms-legacy/cp/src/js/BaseInputGenerator.js b/packages/craftcms-legacy/cp/src/js/BaseInputGenerator.js
deleted file mode 100644
index 7ac68a76899..00000000000
--- a/packages/craftcms-legacy/cp/src/js/BaseInputGenerator.js
+++ /dev/null
@@ -1,125 +0,0 @@
-/** global: Craft */
-/** global: Garnish */
-/**
- * Input Generator
- */
-Craft.BaseInputGenerator = Garnish.Base.extend(
-  {
-    $source: null,
-    $target: null,
-    $form: null,
-    settings: null,
-
-    listening: null,
-    sourceVal: null,
-
-    init: function (source, target, settings) {
-      this.$source = $(source);
-      this.$target = $(target);
-      this.$form = this.$source.closest('form');
-
-      this.setSettings(settings, Craft.BaseInputGenerator.defaults);
-      this.setSettings(settings);
-
-      this.startListening();
-    },
-
-    setNewSource: function (source) {
-      var listening = this.listening;
-      this.stopListening();
-
-      this.$source = $(source);
-
-      if (listening) {
-        this.startListening();
-      }
-    },
-
-    startListening: function () {
-      if (this.listening) {
-        return;
-      }
-
-      this.listening = true;
-      this.sourceVal = this.$source.val();
-
-      this.addListener(this.$source, 'input', 'onSourceTextChange');
-      this.addListener(this.$target, 'input', 'onTargetTextChange');
-      this.addListener(this.$form, 'submit', 'updateTarget');
-    },
-
-    stopListening: function () {
-      if (!this.listening) {
-        return;
-      }
-
-      this.listening = false;
-
-      this.removeAllListeners(this.$source);
-      this.removeAllListeners(this.$target);
-      this.removeAllListeners(this.$form);
-    },
-
-    onSourceTextChange: function () {
-      const val = this.$source.val();
-      if (this.sourceVal !== (this.sourceVal = val)) {
-        this.updateTarget();
-      }
-    },
-
-    onTargetTextChange: function () {
-      if (this.$target.get(0) === document.activeElement) {
-        this.stopListening();
-      }
-    },
-
-    updateTarget: function () {
-      if (
-        !this.$target.is(':visible') &&
-        this.settings.updateWhenHidden == false
-      ) {
-        return;
-      }
-
-      var sourceVal = this.$source.val();
-
-      if (typeof sourceVal === 'undefined') {
-        // The source input may not exist anymore
-        return;
-      }
-
-      let targetVal = this.generateTargetValue(sourceVal);
-      if (targetVal) {
-        targetVal = `${this.settings.prefix}${targetVal}${this.settings.suffix}`;
-      }
-
-      this.$target.val(targetVal);
-
-      for (let i = 0; i < this.$target.length; i++) {
-        this.$target[i].dispatchEvent(
-          new InputEvent('input', {
-            inputType: 'insertText',
-          })
-        );
-        this.$target[i].dispatchEvent(new Event('input'));
-      }
-
-      // If the target already has focus, select its whole value to mimic
-      // the behavior if the value had already been generated and they just tabbed in
-      if (this.$target.is(':focus')) {
-        Craft.selectFullValue(this.$target);
-      }
-    },
-
-    generateTargetValue: function (sourceVal) {
-      return sourceVal;
-    },
-  },
-  {
-    defaults: {
-      updateWhenHidden: false,
-      prefix: '',
-      suffix: '',
-    },
-  }
-);
diff --git a/packages/craftcms-legacy/cp/src/js/DynamicGenerator.js b/packages/craftcms-legacy/cp/src/js/DynamicGenerator.js
deleted file mode 100644
index 369782fd7c5..00000000000
--- a/packages/craftcms-legacy/cp/src/js/DynamicGenerator.js
+++ /dev/null
@@ -1,17 +0,0 @@
-/** global: Craft */
-/** global: Garnish */
-/**
- * Handle Generator
- */
-Craft.DynamicGenerator = Craft.BaseInputGenerator.extend({
-  callback: $.noop,
-
-  init: function (source, target, callback) {
-    this.callback = callback;
-    this.base(source, target);
-  },
-
-  generateTargetValue: function (sourceVal) {
-    return this.callback(sourceVal);
-  },
-});
diff --git a/packages/craftcms-legacy/cp/src/js/HandleGenerator.js b/packages/craftcms-legacy/cp/src/js/HandleGenerator.js
deleted file mode 100644
index 5abeab383cb..00000000000
--- a/packages/craftcms-legacy/cp/src/js/HandleGenerator.js
+++ /dev/null
@@ -1,44 +0,0 @@
-/** global: Craft */
-/** global: Garnish */
-/**
- * Handle Generator
- */
-Craft.HandleGenerator = Craft.BaseInputGenerator.extend({
-  generateTargetValue: function (sourceVal) {
-    // Remove HTML tags
-    var handle = sourceVal.replace(/<(.*?)>/g, '');
-
-    // Remove inner-word punctuation
-    handle = handle.replace(/['"‘’“”ʻ\[\]\(\)\{\}:]/g, '');
-
-    // Make it lowercase
-    handle = handle.toLowerCase();
-
-    // Convert extended ASCII characters to basic ASCII
-    handle = Craft.asciiString(handle);
-
-    if (!this.settings.allowNonAlphaStart) {
-      // Handle must start with a letter
-      handle = handle.replace(/^[^a-z]+/, '');
-    }
-
-    // Get the "words"
-    var words = Craft.filterArray(handle.split(/[^a-z0-9]+/));
-    handle = '';
-
-    if (Craft.handleCasing === 'snake') {
-      return words.join('_');
-    }
-
-    // Make it camelCase
-    for (let i = 0; i < words.length; i++) {
-      if (Craft.handleCasing !== 'pascal' && i === 0) {
-        handle += words[i];
-      } else {
-        handle += words[i].charAt(0).toUpperCase() + words[i].substring(1);
-      }
-    }
-
-    return handle;
-  },
-});
diff --git a/packages/craftcms-legacy/cp/src/js/SlugGenerator.js b/packages/craftcms-legacy/cp/src/js/SlugGenerator.js
deleted file mode 100644
index 96c25bc4343..00000000000
--- a/packages/craftcms-legacy/cp/src/js/SlugGenerator.js
+++ /dev/null
@@ -1,36 +0,0 @@
-/** global: Craft */
-/** global: Garnish */
-/**
- * Slug Generator
- */
-Craft.SlugGenerator = Craft.BaseInputGenerator.extend({
-  generateTargetValue: function (sourceVal) {
-    // Remove HTML tags
-    sourceVal = sourceVal.replace(/<(.*?)>/g, '');
-
-    // Remove inner-word punctuation
-    sourceVal = sourceVal.replace(/['"‘’“”ʻ\[\]\(\)\{\}:]/g, '');
-
-    if (Craft.limitAutoSlugsToAscii) {
-      // Convert extended ASCII characters to basic ASCII
-      sourceVal = Craft.asciiString(sourceVal, this.settings.charMap);
-    }
-
-    // Make it lowercase
-    if (!Craft.allowUppercaseInSlug) {
-      sourceVal = sourceVal.toLowerCase();
-    }
-
-    // Get the "words". Split on anything that is not alphanumeric.
-    // Reference: http://www.regular-expressions.info/unicode.html
-    var words = Craft.filterArray(
-      XRegExp.matchChain(sourceVal, [XRegExp('[\\p{L}\\p{N}\\p{M}]+')])
-    );
-
-    if (words.length) {
-      return words.join(Craft.slugWordSeparator);
-    } else {
-      return '';
-    }
-  },
-});
diff --git a/packages/craftcms-legacy/cp/src/js/UriFormatGenerator.js b/packages/craftcms-legacy/cp/src/js/UriFormatGenerator.js
deleted file mode 100644
index 2015d039c8b..00000000000
--- a/packages/craftcms-legacy/cp/src/js/UriFormatGenerator.js
+++ /dev/null
@@ -1,26 +0,0 @@
-/** global: Craft */
-/** global: Garnish */
-/**
- * Handle Generator
- */
-Craft.UriFormatGenerator = Craft.BaseInputGenerator.extend({
-  generateTargetValue: function (sourceVal) {
-    // Remove HTML tags
-    sourceVal = sourceVal.replace(/<(.*?)>/g, '');
-
-    // Make it lowercase
-    sourceVal = sourceVal.toLowerCase();
-
-    // Convert extended ASCII characters to basic ASCII
-    sourceVal = Craft.asciiString(sourceVal);
-
-    // Handle must start with a letter and end with a letter/number
-    sourceVal = sourceVal.replace(/^[^a-z]+/, '');
-    sourceVal = sourceVal.replace(/[^a-z0-9]+$/, '');
-
-    // Get the "words"
-    var words = Craft.filterArray(sourceVal.split(/[^a-z0-9]+/));
-
-    return words.join(Craft.slugWordSeparator);
-  },
-});
diff --git a/resources/js/cp.ts b/resources/js/cp.ts
index e26caa33090..8053fe83bbb 100644
--- a/resources/js/cp.ts
+++ b/resources/js/cp.ts
@@ -15,6 +15,7 @@ import './modules/field-layout-designer';
 import './modules/editable-table';
 import './modules/generated-fields';
 import './modules/component-select';
+import './modules/input-generators';
 import './modules/grouped-entry-type-manager';
 import './modules/queue';
 import './modules/slideout';
diff --git a/resources/js/legacy.ts b/resources/js/legacy.ts
index c91cae93529..6cc7d808878 100644
--- a/resources/js/legacy.ts
+++ b/resources/js/legacy.ts
@@ -18,6 +18,7 @@ import './modules/grouped-entry-type-manager/index';
 import './modules/queue/index';
 import './modules/slideout/index';
 import './modules/auth-method-setup/index';
+import './modules/input-generators/index';
 
 const {default: Cp} = await import('./bootstrap/cp.js');
 
diff --git a/resources/js/modules/input-generators/README.md b/resources/js/modules/input-generators/README.md
new file mode 100644
index 00000000000..4acf2fabe41
--- /dev/null
+++ b/resources/js/modules/input-generators/README.md
@@ -0,0 +1,92 @@
+# input-generators
+
+Ports the legacy input-generator cluster out of the jQuery bundle:
+
+- `packages/craftcms-legacy/cp/src/js/BaseInputGenerator.js`
+- `packages/craftcms-legacy/cp/src/js/HandleGenerator.js`
+- `packages/craftcms-legacy/cp/src/js/SlugGenerator.js`
+- `packages/craftcms-legacy/cp/src/js/UriFormatGenerator.js`
+- `packages/craftcms-legacy/cp/src/js/DynamicGenerator.js`
+
+A generator watches a **source** input and writes a generated value into a
+**target** input as the user types (e.g. Name → Handle / Slug / URI format),
+until the target is edited directly or the form is submitted.
+
+## Relationship to `useInputGenerator` and the `@craftcms/ui` transforms
+
+There are two orchestrators for the same idea, split by reactivity model:
+
+- **`useInputGenerator`** (`resources/js/common/composables`) — the **Vue**
+  version (`watch`/`ref`), used by the migrated settings `Edit.vue` pages.
+- **`BaseInputGenerator`** (here) — the **DOM** version (jQuery-free), for the
+  legacy `new Craft.HandleGenerator('#name', '#handle')` boots on Twig pages that
+  aren't Vue yet. A Vue composable can't watch a raw DOM input, so this
+  orchestrator is still needed for those transitional surfaces. It accepts the
+  same argument forms the legacy class did — a selector string, an element, or an
+  array-like (NodeList / array / **jQuery object**) — resolving them via plain
+  DOM (`querySelectorAll` + `Array.from`) so jQuery callers keep working without
+  the module importing jQuery.
+
+Crucially, both share the **same transform functions** from
+`@craftcms/ui/utilities/string` — `toHandle`, `toUriFormat`, `asciiString`
+(and `toEnvVar`). The subclasses here only wire jQuery source/target
+orchestration around those; they do **not** reimplement the transforms. So a
+Twig page and its eventual Vue replacement generate identical values.
+
+Exception: **slug** generation has no shared transform (it depends on the
+page-global `XRegExp` and live `Craft.*` config, which don't belong in the
+component package), so `slug-generator.ts` keeps that transform inline while
+still reusing `asciiString`.
+
+## Shape (differs from the standard module pattern)
+
+These classes link **two existing inputs** rather than wrapping their own
+server-rendered markup, so there is **no `.ce.ts` custom element** and **no
+`support.ts` back-reference** (the legacy base never stored a `.data()` handle).
+The port is just the logic classes plus the `index.ts` global shim:
+
+| File | Role |
+| --- | --- |
+| `base-input-generator.ts` | The engine (source/target/form listening, `updateTarget`), on `@craftcms/garnish` `Base`. Setup is in `init()`, called from the constructor only for the leaf class via a `new.target` guard. |
+| `handle-generator.ts` / `slug-generator.ts` / `uri-format-generator.ts` / `dynamic-generator.ts` | Subclasses overriding `generateTargetValue()`. |
+| `index.ts` | Assigns `window.Craft.<Generator>` for all five so existing `new Craft.HandleGenerator(...)` boots keep working, and re-exports the classes. |
+
+Instantiation is unchanged — every consumer still does
+`new Craft.HandleGenerator('#name', '#handle')`, whether from a Twig `{% js %}`
+block, a PHP-emitted `{% js %}` (e.g. `TitleField`), or a modern TS module
+(`editable-table`, `generated-fields`). The port swaps the implementation, not
+the surface, so no templates change.
+
+## No jQuery; remaining global seams
+
+The module is **jQuery-free** — the base orchestrator uses plain DOM
+(`querySelectorAll`, `element.value`, `closest`, `dispatchEvent`, layout-based
+visibility) and `@craftcms/garnish` `Base`'s jQuery-free listener registry.
+`Craft.selectFullValue` was inlined so the base doesn't even touch `Craft`.
+
+The only remaining page globals (`declare const … : any`) are in the subclasses,
+and neither is jQuery:
+
+- **`Craft`** — live config only (`Craft.handleCasing`, `Craft.slugWordSeparator`,
+  `Craft.limitAutoSlugsToAscii`, `Craft.allowUppercaseInSlug`).
+- **`XRegExp`** — slug unicode word matching.
+
+String transforms (`asciiString`, `toHandle`, `toUriFormat`) come from
+`@craftcms/ui`.
+
+## Plugin extension
+
+No `compatify`: nothing in core subclasses these via legacy `.extend()`. Plugins
+that need custom generation use `Craft.DynamicGenerator(source, target, cb)` — a
+`BaseInputGenerator` that delegates `generateTargetValue` to a callback. (This is
+why `DynamicGenerator` is kept rather than removed.)
+
+## Wiring
+
+Imported for side effects from both `resources/js/cp.ts` (modern surfaces) and
+`resources/js/legacy.ts` (legacy Twig pages), since the boots happen on both.
+
+## Verification
+
+`npm run typecheck` + eslint + prettier. Behavior (Name → Handle/Slug/URI as you
+type, on the settings pages and in editable tables) is verified live in the CP.
diff --git a/resources/js/modules/input-generators/base-input-generator.ts b/resources/js/modules/input-generators/base-input-generator.ts
new file mode 100644
index 00000000000..b1e34fad630
--- /dev/null
+++ b/resources/js/modules/input-generators/base-input-generator.ts
@@ -0,0 +1,233 @@
+import {Base, type GarnishBaseSettings} from '@craftcms/garnish';
+
+export interface BaseInputGeneratorSettings extends GarnishBaseSettings {
+  /** Regenerate the target even while it's hidden. */
+  updateWhenHidden: boolean;
+  /** Prepended to every generated value. */
+  prefix: string;
+  /** Appended to every generated value. */
+  suffix: string;
+  /** Allow the generated value to start with a non-alpha character. */
+  allowNonAlphaStart?: boolean;
+  /** Character map passed to `asciiString` (slug generation). */
+  charMap?: Record<string, string> | null;
+}
+
+/** A form control this generator can read from / write to. */
+type TextControl = HTMLInputElement | HTMLTextAreaElement;
+
+/**
+ * A source/target argument: a CSS selector, an element, or an array-like of
+ * elements (a NodeList, an array, or — from legacy callers — a jQuery object).
+ */
+export type GeneratorInput =
+  | string
+  | Element
+  | ArrayLike<Element>
+  | null
+  | undefined;
+
+/**
+ * Resolve a selector / element / array-like into text controls, without
+ * depending on jQuery. jQuery objects are array-like (numeric `length` +
+ * indices), so legacy `new Craft.HandleGenerator($name, $handle)` callers keep
+ * working through the `ArrayLike` branch.
+ */
+function resolveControls(input: GeneratorInput): TextControl[] {
+  if (input == null) {
+    return [];
+  }
+
+  let candidates: Element[];
+  if (typeof input === 'string') {
+    candidates = Array.from(document.querySelectorAll(input));
+  } else if (input instanceof Element) {
+    candidates = [input];
+  } else if (typeof (input as ArrayLike<Element>).length === 'number') {
+    candidates = Array.from(input as ArrayLike<Element>);
+  } else {
+    candidates = [];
+  }
+
+  return candidates.filter(
+    (el): el is TextControl =>
+      el instanceof HTMLInputElement || el instanceof HTMLTextAreaElement
+  );
+}
+
+/** jQuery `:visible` equivalent — does the element take up space in layout. */
+function isVisible(el: HTMLElement): boolean {
+  return !!(el.offsetWidth || el.offsetHeight || el.getClientRects().length);
+}
+
+/** Select the whole value (the jQuery-free port of `Craft.selectFullValue`). */
+function selectFullValue(el: TextControl): void {
+  const val = el.value;
+  if (typeof el.setSelectionRange !== 'undefined') {
+    // `* 2` mirrors the legacy helper — over-selecting is clamped by the browser.
+    el.setSelectionRange(0, val.length * 2);
+  } else {
+    el.value = val;
+  }
+}
+
+/**
+ * Input generator — a port of `Craft.BaseInputGenerator` onto `@craftcms/garnish`
+ * `Base`. Watches a source input and writes a generated value into a target
+ * input as the user types, until the target is edited directly (or on form
+ * submit). Subclasses override {@link generateTargetValue}.
+ *
+ * This is the **DOM** orchestrator (no jQuery), for the legacy `{% js %}`
+ * `new Craft.HandleGenerator(...)` boots on not-yet-migrated Twig pages. Vue
+ * pages use the `useInputGenerator` composable
+ * (`resources/js/common/composables`) instead — the reactive counterpart, which
+ * can't drive raw DOM inputs. Both share the same transform functions from
+ * `@craftcms/ui` (`toHandle` / `toUriFormat` / …), so the two paths stay in sync.
+ *
+ * Setup lives in {@link init}, invoked from the constructor only for the leaf
+ * class (`new.target` guard) — the shared port contract, and what lets
+ * {@link DynamicGenerator} assign its callback before init runs.
+ */
+export class BaseInputGenerator extends Base<BaseInputGeneratorSettings> {
+  static defaults: BaseInputGeneratorSettings = {
+    updateWhenHidden: false,
+    prefix: '',
+    suffix: '',
+  };
+
+  sourceControls: TextControl[] = [];
+  targetControls: TextControl[] = [];
+  form: HTMLFormElement | null = null;
+  listening = false;
+  sourceVal: string | undefined = undefined;
+
+  constructor(
+    source?: GeneratorInput,
+    target?: GeneratorInput,
+    settings?: Partial<BaseInputGeneratorSettings>
+  ) {
+    super();
+    if (new.target === BaseInputGenerator) {
+      this.init(source, target, settings);
+    }
+  }
+
+  init(
+    source: GeneratorInput,
+    target: GeneratorInput,
+    settings?: Partial<BaseInputGeneratorSettings>
+  ): void {
+    this.sourceControls = resolveControls(source);
+    this.targetControls = resolveControls(target);
+    this.form = this.sourceControls[0]?.closest('form') ?? null;
+
+    this.setSettings(settings, BaseInputGenerator.defaults);
+
+    this.startListening();
+  }
+
+  setNewSource(source: GeneratorInput): void {
+    const listening = this.listening;
+    this.stopListening();
+
+    this.sourceControls = resolveControls(source);
+
+    if (listening) {
+      this.startListening();
+    }
+  }
+
+  startListening(): void {
+    if (this.listening) {
+      return;
+    }
+
+    this.listening = true;
+    this.sourceVal = this.sourceControls[0]?.value;
+
+    this.addListener(this.sourceControls, 'input', () =>
+      this.onSourceTextChange()
+    );
+    this.addListener(this.targetControls, 'input', () =>
+      this.onTargetTextChange()
+    );
+    this.addListener(this.form, 'submit', () => this.updateTarget());
+  }
+
+  stopListening(): void {
+    if (!this.listening) {
+      return;
+    }
+
+    this.listening = false;
+
+    this.removeAllListeners(this.sourceControls);
+    this.removeAllListeners(this.targetControls);
+    this.removeAllListeners(this.form);
+  }
+
+  onSourceTextChange(): void {
+    const val = this.sourceControls[0]?.value;
+    if (this.sourceVal !== (this.sourceVal = val)) {
+      this.updateTarget();
+    }
+  }
+
+  onTargetTextChange(): void {
+    if (this.targetControls[0] === document.activeElement) {
+      this.stopListening();
+    }
+  }
+
+  updateTarget(): void {
+    if (
+      !this.targetControls.some(isVisible) &&
+      this.settings!.updateWhenHidden === false
+    ) {
+      return;
+    }
+
+    const sourceVal = this.sourceControls[0]?.value;
+
+    if (typeof sourceVal === 'undefined') {
+      // The source input may not exist anymore
+      return;
+    }
+
+    let targetVal = this.generateTargetValue(sourceVal);
+    if (targetVal) {
+      targetVal = `${this.settings!.prefix}${targetVal}${this.settings!.suffix}`;
+    }
+
+    for (const el of this.targetControls) {
+      el.value = targetVal;
+    }
+
+    for (const el of this.targetControls) {
+      el.dispatchEvent(
+        new InputEvent('input', {
+          inputType: 'insertText',
+        })
+      );
+      el.dispatchEvent(new Event('input'));
+    }
+
+    // If the target already has focus, select its whole value to mimic the
+    // behavior if the value had already been generated and they just tabbed in.
+    const focused = this.targetControls.find(
+      (el) => el === document.activeElement
+    );
+    if (focused) {
+      selectFullValue(focused);
+    }
+  }
+
+  generateTargetValue(sourceVal: string): string {
+    return sourceVal;
+  }
+
+  override destroy(): void {
+    this.stopListening();
+    super.destroy();
+  }
+}
diff --git a/resources/js/modules/input-generators/dynamic-generator.ts b/resources/js/modules/input-generators/dynamic-generator.ts
new file mode 100644
index 00000000000..d733aa3cf43
--- /dev/null
+++ b/resources/js/modules/input-generators/dynamic-generator.ts
@@ -0,0 +1,29 @@
+import {BaseInputGenerator} from './base-input-generator';
+
+/**
+ * Generates the target value from a caller-supplied callback. Port of
+ * `Craft.DynamicGenerator` — the callback-based extension point plugins use for
+ * custom generation without subclassing {@link BaseInputGenerator}.
+ *
+ * The callback is assigned before {@link BaseInputGenerator.init} runs (via the
+ * `new.target` guard), so it's available the first time the target updates.
+ */
+export class DynamicGenerator extends BaseInputGenerator {
+  callback: (sourceVal: string) => string;
+
+  constructor(
+    source?: any,
+    target?: any,
+    callback: (sourceVal: string) => string = (sourceVal) => sourceVal
+  ) {
+    super(source, target);
+    this.callback = callback;
+    if (new.target === DynamicGenerator) {
+      this.init(source, target);
+    }
+  }
+
+  override generateTargetValue(sourceVal: string): string {
+    return this.callback(sourceVal);
+  }
+}
diff --git a/resources/js/modules/input-generators/handle-generator.ts b/resources/js/modules/input-generators/handle-generator.ts
new file mode 100644
index 00000000000..96dac4a6a0f
--- /dev/null
+++ b/resources/js/modules/input-generators/handle-generator.ts
@@ -0,0 +1,28 @@
+import {toHandle} from '@craftcms/ui/utilities/string';
+import {BaseInputGenerator} from './base-input-generator';
+
+declare const Craft: any;
+
+/**
+ * Generates a handle from a source value. Port of `Craft.HandleGenerator`.
+ *
+ * The transform is the shared `toHandle` from `@craftcms/ui` — the same function
+ * the Vue settings pages use via `useInputGenerator` — so DOM-driven (legacy
+ * Twig) and Vue-driven surfaces stay in lockstep. This class only supplies the
+ * source/target orchestration (see {@link BaseInputGenerator}).
+ */
+export class HandleGenerator extends BaseInputGenerator {
+  constructor(source?: any, target?: any, settings?: any) {
+    super(source, target, settings);
+    if (new.target === HandleGenerator) {
+      this.init(source, target, settings);
+    }
+  }
+
+  override generateTargetValue(sourceVal: string): string {
+    return toHandle(sourceVal, {
+      allowNonAlphaStart: this.settings!.allowNonAlphaStart ?? false,
+      handleCasing: Craft.handleCasing,
+    });
+  }
+}
diff --git a/resources/js/modules/input-generators/index.ts b/resources/js/modules/input-generators/index.ts
new file mode 100644
index 00000000000..cc68411ee6b
--- /dev/null
+++ b/resources/js/modules/input-generators/index.ts
@@ -0,0 +1,26 @@
+import {BaseInputGenerator} from './base-input-generator';
+import {HandleGenerator} from './handle-generator';
+import {SlugGenerator} from './slug-generator';
+import {UriFormatGenerator} from './uri-format-generator';
+import {DynamicGenerator} from './dynamic-generator';
+
+// Assign onto the legacy `Craft` global so Twig-emitted and plugin
+// `new Craft.HandleGenerator('#name', '#handle')` boots — and the modern
+// editable-table / generated-fields consumers — keep working. These are plain
+// modern ES classes (no `compatify`): nothing in core subclasses them via legacy
+// `.extend()`, and plugins that need custom generation use the callback-based
+// `Craft.DynamicGenerator`.
+const craft = (window as any).Craft ?? ((window as any).Craft = {});
+craft.BaseInputGenerator = BaseInputGenerator;
+craft.HandleGenerator = HandleGenerator;
+craft.SlugGenerator = SlugGenerator;
+craft.UriFormatGenerator = UriFormatGenerator;
+craft.DynamicGenerator = DynamicGenerator;
+
+export {
+  BaseInputGenerator,
+  HandleGenerator,
+  SlugGenerator,
+  UriFormatGenerator,
+  DynamicGenerator,
+};
diff --git a/resources/js/modules/input-generators/slug-generator.ts b/resources/js/modules/input-generators/slug-generator.ts
new file mode 100644
index 00000000000..2a2677adf06
--- /dev/null
+++ b/resources/js/modules/input-generators/slug-generator.ts
@@ -0,0 +1,53 @@
+import {asciiString} from '@craftcms/ui/utilities/string';
+import {BaseInputGenerator} from './base-input-generator';
+
+declare const Craft: any;
+declare const XRegExp: any;
+
+/**
+ * Generates a slug from a source value. Port of `Craft.SlugGenerator`.
+ *
+ * Unlike handle/URI generation, slug generation has no shared `@craftcms/ui`
+ * transform: it depends on the page-global `XRegExp` (unicode word matching) and
+ * live `Craft.*` config (`slugWordSeparator`, `limitAutoSlugsToAscii`,
+ * `allowUppercaseInSlug`), which don't belong in the component package — so the
+ * transform stays here. It still reuses the shared `asciiString`.
+ */
+export class SlugGenerator extends BaseInputGenerator {
+  constructor(source?: any, target?: any, settings?: any) {
+    super(source, target, settings);
+    if (new.target === SlugGenerator) {
+      this.init(source, target, settings);
+    }
+  }
+
+  override generateTargetValue(sourceVal: string): string {
+    // Remove HTML tags
+    sourceVal = sourceVal.replace(/<(.*?)>/g, '');
+
+    // Remove inner-word punctuation
+    sourceVal = sourceVal.replace(/['"‘’“”ʻ[\](){}:]/g, '');
+
+    if (Craft.limitAutoSlugsToAscii) {
+      // Convert extended ASCII characters to basic ASCII
+      sourceVal = asciiString(sourceVal, this.settings!.charMap ?? undefined);
+    }
+
+    // Make it lowercase
+    if (!Craft.allowUppercaseInSlug) {
+      sourceVal = sourceVal.toLowerCase();
+    }
+
+    // Get the "words". Split on anything that is not alphanumeric.
+    // Reference: http://www.regular-expressions.info/unicode.html
+    const words: string[] = XRegExp.matchChain(sourceVal, [
+      XRegExp('[\\p{L}\\p{N}\\p{M}]+'),
+    ]).filter(Boolean);
+
+    if (words.length) {
+      return words.join(Craft.slugWordSeparator);
+    } else {
+      return '';
+    }
+  }
+}
diff --git a/resources/js/modules/input-generators/uri-format-generator.ts b/resources/js/modules/input-generators/uri-format-generator.ts
new file mode 100644
index 00000000000..e8067a602e8
--- /dev/null
+++ b/resources/js/modules/input-generators/uri-format-generator.ts
@@ -0,0 +1,23 @@
+import {toUriFormat} from '@craftcms/ui/utilities/string';
+import {BaseInputGenerator} from './base-input-generator';
+
+/**
+ * Generates a URI format from a source value. Port of `Craft.UriFormatGenerator`.
+ *
+ * Delegates to the shared `toUriFormat` from `@craftcms/ui`. Note: `toUriFormat`
+ * joins words with `-`, whereas the legacy class used `Craft.slugWordSeparator`.
+ * `-` is the modern canonical (what a Vue-migrated URI-format field produces), so
+ * this aligns the transitional DOM boot with that behavior.
+ */
+export class UriFormatGenerator extends BaseInputGenerator {
+  constructor(source?: any, target?: any, settings?: any) {
+    super(source, target, settings);
+    if (new.target === UriFormatGenerator) {
+      this.init(source, target, settings);
+    }
+  }
+
+  override generateTargetValue(sourceVal: string): string {
+    return toUriFormat(sourceVal);
+  }
+}

From 123e6f13fc514e1c4d2263654c2a6328936b1e08 Mon Sep 17 00:00:00 2001
From: Brian Hanson <brian@brianhanson.net>
Date: Mon, 27 Jul 2026 12:21:00 -0500
Subject: [PATCH 12/20] Decouple Craft.IconPicker from the ported
 BaseInputGenerator
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Craft.IconPicker extended Craft.BaseInputGenerator but used none of its
generation behavior — it overrides init() entirely and is really a Garnish.Base
widget. Porting the generators to modern TS made Craft.BaseInputGenerator a plain
ES class with no legacy .extend(), so `Craft.BaseInputGenerator.extend(...)` threw
at runtime. Extend Garnish.Base directly, severing the vestigial coupling (and
making the generator port's "nothing subclasses these via .extend()" hold true).

No reimplementation: the modern replacement already exists as
resources/js/common/form/IconPicker.vue (used by the migrated entry-types Edit
page). This legacy jQuery widget stays until its remaining Twig/jQuery surfaces
(editableTable, CustomizeSourcesModal, editable-table icon cells) migrate to Vue
— the Vue component is Inertia-coupled (useHttp / IconController), so it isn't
drop-in for those non-Inertia surfaces.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 packages/craftcms-legacy/cp/src/js/IconPicker.js | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/packages/craftcms-legacy/cp/src/js/IconPicker.js b/packages/craftcms-legacy/cp/src/js/IconPicker.js
index 22500956b2e..f19ef34e731 100644
--- a/packages/craftcms-legacy/cp/src/js/IconPicker.js
+++ b/packages/craftcms-legacy/cp/src/js/IconPicker.js
@@ -2,8 +2,21 @@
 /** global: Garnish */
 /**
  * Icon Picker
+ *
+ * NOTE: this is a Garnish.Base widget, not an input generator — it overrides
+ * init() entirely and uses no source/target generation. It historically extended
+ * Craft.BaseInputGenerator, but that only ever provided Garnish.Base
+ * infrastructure (addListener/trigger/setSettings/destroy). Now that the
+ * generators are ported to modern TS (resources/js/modules/input-generators),
+ * Craft.BaseInputGenerator is a plain ES class with no legacy .extend(), so this
+ * extends Garnish.Base directly.
+ *
+ * The modern replacement is the Vue component resources/js/common/form/IconPicker.vue
+ * (used by the migrated entry-types Edit page); this legacy widget stays until
+ * its remaining jQuery/Twig surfaces (editableTable, CustomizeSourcesModal) move
+ * to Vue.
  */
-Craft.IconPicker = Craft.BaseInputGenerator.extend(
+Craft.IconPicker = Garnish.Base.extend(
   {
     $container: null,
     $preview: null,

From d5a2e36ea6ef9464ad643c2b5cf3bf6a0bb50377 Mon Sep 17 00:00:00 2001
From: Brian Hanson <brian@brianhanson.net>
Date: Mon, 27 Jul 2026 12:49:16 -0500
Subject: [PATCH 13/20] Replace legacy Craft.IconPicker with a Vue-mount
 <craft-icon-picker>
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The icon picker's functionality already lives in the Vue component
resources/js/common/form/IconPicker.vue (used directly by the migrated
entry-types Edit page), so rather than re-porting the 246-line jQuery widget this
adds a thin mount bridge and reuses it.

- New module resources/js/modules/icon-picker: <craft-icon-picker> is a plain
  custom element that createApp(IconPicker, props).mount(this) from its attributes
  on connect and unmount()s on disconnect (mirrors the auth/elevated-session Vue
  island, per-instance). IconPicker.vue works standalone — its only Inertia dep is
  useHttp, which already runs outside an Inertia page (markdown-field). Adds
  id/labelledBy/describedBy props for the legacy label surfaces.
- Repoints consumers to emit the element: _includes/forms/iconPicker.twig, the
  Craft.ui.createIconPicker/createIconPickerField factories (editable-table icon
  cells), and CustomizeSourcesModal (now reads the element's `change` CustomEvent).
  iconPickerFieldHtml sets fieldset:true so the field's legend labels the group and
  the component stays label-less (no double label / id-association fragility).
- Deletes IconPicker.js and its import; adds a Craft.IconPicker deprecation stub to
  the cpcompat bundle for stray plugin callers.

Deferred: `small` isn't a component prop yet (editable-table cells render at normal
size) — noted in the module README.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 packages/craftcms-legacy/cp/src/Craft.js      |   1 -
 .../cp/src/js/CustomizeSourcesModal.js        |   7 +-
 .../craftcms-legacy/cp/src/js/IconPicker.js   | 259 ------------------
 packages/craftcms-legacy/cp/src/js/UI.js      |  67 ++---
 resources/js/common/form/IconPicker.vue       |   9 +
 resources/js/cp.ts                            |   1 +
 resources/js/legacy.ts                        |   1 +
 resources/js/modules/icon-picker/README.md    |  56 ++++
 .../js/modules/icon-picker/icon-picker.ce.ts  |  48 ++++
 resources/js/modules/icon-picker/index.ts     |  11 +
 .../templates/_includes/forms/iconPicker.twig |  77 ++----
 src/Cp/FormFields.php                         |   4 +
 .../legacy/web/assets/cpcompat/cp-compat.js   |   4 +
 13 files changed, 179 insertions(+), 366 deletions(-)
 delete mode 100644 packages/craftcms-legacy/cp/src/js/IconPicker.js
 create mode 100644 resources/js/modules/icon-picker/README.md
 create mode 100644 resources/js/modules/icon-picker/icon-picker.ce.ts
 create mode 100644 resources/js/modules/icon-picker/index.ts

diff --git a/packages/craftcms-legacy/cp/src/Craft.js b/packages/craftcms-legacy/cp/src/Craft.js
index b6034ec8dab..37e8a08eac3 100644
--- a/packages/craftcms-legacy/cp/src/Craft.js
+++ b/packages/craftcms-legacy/cp/src/Craft.js
@@ -59,7 +59,6 @@ import './js/FormObserver.js';
 import './js/VolumeFolderSelectorModal.js';
 import './js/FieldToggle.js';
 import './js/Grid.js';
-import './js/IconPicker.js';
 import './js/ImageUpload.js';
 import './js/IntervalManager.js';
 import './js/LinkField.js';
diff --git a/packages/craftcms-legacy/cp/src/js/CustomizeSourcesModal.js b/packages/craftcms-legacy/cp/src/js/CustomizeSourcesModal.js
index d065f77585c..74d29ac8689 100644
--- a/packages/craftcms-legacy/cp/src/js/CustomizeSourcesModal.js
+++ b/packages/craftcms-legacy/cp/src/js/CustomizeSourcesModal.js
@@ -717,9 +717,10 @@ Craft.CustomizeSourcesModal.PageSettingsModal = Garnish.Modal.extend({
       this.name = $nameInput.val();
     });
 
-    const iconPicker = $iconField.find('.icon-picker').data('iconpicker');
-    iconPicker.on('change', (ev) => {
-      this.icon = ev.iconName;
+    // <craft-icon-picker> re-emits its model changes as a bubbling `change`
+    // CustomEvent with the icon name on `detail.value`.
+    $iconField.find('craft-icon-picker').on('change', (ev) => {
+      this.icon = ev.originalEvent?.detail?.value ?? '';
     });
 
     $cancelBtn.on('activate', () => {
diff --git a/packages/craftcms-legacy/cp/src/js/IconPicker.js b/packages/craftcms-legacy/cp/src/js/IconPicker.js
deleted file mode 100644
index f19ef34e731..00000000000
--- a/packages/craftcms-legacy/cp/src/js/IconPicker.js
+++ /dev/null
@@ -1,259 +0,0 @@
-/** global: Craft */
-/** global: Garnish */
-/**
- * Icon Picker
- *
- * NOTE: this is a Garnish.Base widget, not an input generator — it overrides
- * init() entirely and uses no source/target generation. It historically extended
- * Craft.BaseInputGenerator, but that only ever provided Garnish.Base
- * infrastructure (addListener/trigger/setSettings/destroy). Now that the
- * generators are ported to modern TS (resources/js/modules/input-generators),
- * Craft.BaseInputGenerator is a plain ES class with no legacy .extend(), so this
- * extends Garnish.Base directly.
- *
- * The modern replacement is the Vue component resources/js/common/form/IconPicker.vue
- * (used by the migrated entry-types Edit page); this legacy widget stays until
- * its remaining jQuery/Twig surfaces (editableTable, CustomizeSourcesModal) move
- * to Vue.
- */
-Craft.IconPicker = Garnish.Base.extend(
-  {
-    $container: null,
-    $preview: null,
-    $chooseBtn: null,
-    $removeBtn: null,
-    $input: null,
-
-    modal: null,
-    cancelToken: null,
-    $searchInput: null,
-    $iconListContainer: null,
-    $iconList: null,
-    defaultListHtml: null,
-
-    get listLength() {
-      return this.$iconList.find('li').length;
-    },
-
-    init(container, settings) {
-      this.$container = $(container);
-      this.setSettings(settings, Craft.IconPicker.defaults);
-
-      if (this.$container.data('iconpicker')) {
-        console.warn('Double-instantiating an icon picker on an element');
-        this.$container.data('iconpicker').destroy();
-      }
-
-      this.$container.data('iconpicker', this);
-
-      this.$preview = this.$container.children('.icon-picker--icon');
-      this.$chooseBtn = this.$container.children('.icon-picker--choose-btn');
-      this.$removeBtn = this.$container.children('.icon-picker--remove-btn');
-      this.$input = this.$container.children('input');
-
-      this.addListener(this.$chooseBtn, 'activate', () => {
-        this.showModal();
-      });
-
-      this.addListener(this.$removeBtn, 'activate', () => {
-        this.removeIcon();
-      });
-    },
-
-    showModal() {
-      if (!this.modal) {
-        this.createModal();
-      } else {
-        this.modal.show();
-      }
-    },
-
-    createModal() {
-      const $container = $('<div class="cp-legacy modal icon-picker-modal"/>');
-      const $body = $('<div class="body"/>').appendTo($container);
-
-      const $searchContainer = $('<div class="texticon"/>').appendTo($body);
-      $(
-        '<span class="texticon-icon search icon" aria-hidden="true"/>'
-      ).appendTo($searchContainer);
-      this.$searchInput = Craft.ui
-        .createTextInput({
-          name: 'search',
-          class: 'clearable',
-          placeholder: Craft.t('app', 'Search'),
-        })
-        .attr('aria-label', Craft.t('app', 'Search'))
-        .appendTo($searchContainer);
-      const $clearBtn = $('<button/>', {
-        class: 'clear-btn hidden',
-        title: Craft.t('app', 'Clear search'),
-        'aria-label': Craft.t('app', 'Clear search'),
-      }).appendTo($searchContainer);
-
-      this.$iconListContainer = $(
-        '<div class="icon-picker-modal--list"/>'
-      ).appendTo($body);
-      this.$iconList = $('<ul tabindex="-1"/>').appendTo(
-        this.$iconListContainer
-      );
-
-      this.updateLangAttribute(this.$iconList);
-      const $spinner = $('<div class="spinner spinner-absolute"/>').appendTo(
-        this.$iconListContainer
-      );
-      Craft.cp.announce(Craft.t('app', 'Loading'));
-      const formObserver = new Craft.FormObserver($searchContainer, () => {
-        this.updateIcons();
-      });
-
-      this.addListener(this.$searchInput, 'input,change', () => {
-        if (this.$searchInput.val()) {
-          $clearBtn.removeClass('hidden');
-        } else {
-          $clearBtn.addClass('hidden');
-        }
-      });
-
-      this.addListener($clearBtn, 'activate', () => {
-        this.$searchInput.val('').trigger('change');
-        formObserver.checkForm();
-      });
-
-      this.addListener(this.$iconList, 'click', async (ev) => {
-        let $button;
-        if (ev.target.nodeName === 'BUTTON') {
-          $button = $(ev.target);
-        } else {
-          $button = $(ev.target).closest('button');
-          if (!$button.length) {
-            return;
-          }
-        }
-
-        await this.selectIcon($button);
-        this.$chooseBtn.focus();
-      });
-
-      this.modal = new Garnish.Modal($container, {
-        triggerElement: this.$chooseBtn,
-      });
-      this.updateIcons();
-    },
-
-    async updateIcons() {
-      const listHtml = await this.loadIcons();
-      this.$iconList.html(listHtml);
-      const message = `${Craft.t('app', 'Loading complete')} - ${Craft.t(
-        'app',
-        '{num, number} {num, plural, =1{result} other{results}}',
-        {
-          num: this.listLength,
-        }
-      )}`;
-
-      Craft.cp.announce(message);
-    },
-
-    async loadIcons() {
-      if (this.cancelToken) {
-        this.cancelToken.cancel();
-      }
-
-      const search = this.$searchInput.val();
-      if (search === '' && this.defaultListHtml !== null) {
-        return this.defaultListHtml;
-      }
-
-      this.$iconListContainer.addClass('loading');
-      Craft.cp.announce(Craft.t('app', 'Loading'));
-      this.cancelToken = axios.CancelToken.source();
-
-      try {
-        const response = await Craft.sendActionRequest(
-          'POST',
-          'app/icon-picker-options',
-          {
-            data: {
-              search,
-              freeOnly: this.settings.freeOnly,
-            },
-            cancelToken: this.cancelToken.token,
-          }
-        );
-        const listHtml = response.data.listHtml;
-        if (search === '') {
-          // save the results for later
-          this.defaultListHtml = listHtml;
-        }
-        return listHtml;
-      } finally {
-        this.$iconListContainer.removeClass('loading');
-        this.cancelToken = null;
-      }
-    },
-
-    updateLangAttribute($element) {
-      const htmlLang = document.documentElement.lang;
-
-      if (!htmlLang.startsWith('en')) {
-        $element.attr('lang', 'en');
-      }
-    },
-
-    async selectIcon(icon) {
-      this.modal?.hide();
-
-      let name, html;
-
-      if (typeof icon === 'string') {
-        name = icon;
-        html = (await Craft.ui.icon(icon)).outerHTML;
-      } else {
-        name = icon.attr('title');
-        html = $(icon).html();
-      }
-
-      this.$preview
-        .html(html)
-        .attr('title', name)
-        .attr('aria-label', name)
-        .attr('role', 'img');
-
-      this.updateLangAttribute(this.$preview);
-      this.$input.val(name);
-      this.$chooseBtn.children('.label').text(Craft.t('app', 'Change'));
-      this.$removeBtn.removeClass('hidden');
-      if (this.$container.hasClass('small')) {
-        this.$chooseBtn.addClass('hidden');
-      }
-
-      this.trigger('change', {
-        iconName: name,
-        iconHtml: html,
-      });
-    },
-
-    removeIcon() {
-      this.$preview.html('').removeAttr('title').removeAttr('aria-label');
-      this.$input.val('');
-      this.$chooseBtn.children('.label').text(Craft.t('app', 'Choose'));
-      this.$removeBtn.addClass('hidden');
-      if (this.$container.hasClass('small')) {
-        this.$chooseBtn.removeClass('hidden');
-        this.$chooseBtn.focus();
-      } else {
-        this.$chooseBtn.focus();
-      }
-
-      this.trigger('change', {
-        iconName: null,
-        iconHtml: null,
-      });
-    },
-  },
-  {
-    defaults: {
-      freeOnly: false,
-    },
-  }
-);
diff --git a/packages/craftcms-legacy/cp/src/js/UI.js b/packages/craftcms-legacy/cp/src/js/UI.js
index 3a42072ca70..f07917a8610 100644
--- a/packages/craftcms-legacy/cp/src/js/UI.js
+++ b/packages/craftcms-legacy/cp/src/js/UI.js
@@ -775,54 +775,33 @@ Craft.ui = {
   },
 
   createIconPicker: function (config) {
-    const $container = $('<div/>', {
-      id: config.id,
-      class: 'icon-picker',
-    });
-
-    const $iconContainer = $('<div/>', {
-      class: 'icon-picker--icon',
-      lang: Craft.language,
-    }).appendTo($container);
-
-    if (config.small) {
-      $container.addClass('small');
-      $iconContainer.addClass('small');
-    }
-
-    if (!config.static) {
-      const $chooseBtn = this.createButton({
-        class: 'icon-picker--choose-btn',
-        label: Craft.t('app', 'Choose'),
-      }).appendTo($container);
-
-      const $removeBtn = this.createButton({
-        class: 'icon-picker--remove-btn hidden',
-        label: Craft.t('app', 'Remove'),
-      }).appendTo($container);
-
-      if (config.small) {
-        $chooseBtn.addClass('small');
-        $removeBtn.addClass('small');
-      }
-
-      if (config.name) {
-        $('<input/>', {
-          type: 'hidden',
-          name: config.name,
-        }).appendTo($container);
-      }
+    // Builds a <craft-icon-picker> web component, which mounts the Vue IconPicker
+    // (resources/js/common/form/IconPicker.vue), replacing the legacy jQuery
+    // Craft.IconPicker widget. The component renders its own form-postable
+    // control. (`small` isn't a component prop yet — see
+    // resources/js/modules/icon-picker/README.md.)
+    const $el = $('<craft-icon-picker/>');
+    if (config.name) {
+      $el.attr('name', config.name);
     }
-
-    const iconPicker = new Craft.IconPicker($container, {
-      freeOnly: config.freeOnly,
-    });
-
     if (config.value) {
-      iconPicker.selectIcon(config.value);
+      $el.attr('value', config.value);
+    }
+    if (config.freeOnly) {
+      $el.attr('free-only', '');
+    }
+    if (config.static || config.disabled) {
+      $el.attr('disabled', '');
+    }
+    const labelledBy = config.labelledBy || config.labelId;
+    if (labelledBy) {
+      $el.attr('labelled-by', labelledBy);
+    }
+    if (config.describedBy) {
+      $el.attr('described-by', config.describedBy);
     }
 
-    return $container;
+    return $el;
   },
 
   createIconPickerField: function (config) {
diff --git a/resources/js/common/form/IconPicker.vue b/resources/js/common/form/IconPicker.vue
index e0a12fa96ad..6e9814ed97d 100644
--- a/resources/js/common/form/IconPicker.vue
+++ b/resources/js/common/form/IconPicker.vue
@@ -27,6 +27,12 @@
       error?: string;
       freeOnly?: boolean;
       disabled?: boolean;
+      // Used by the legacy `<craft-icon-picker>` mount bridge: `id` lets a
+      // wrapping `craft-field` label associate with the control, and
+      // labelledBy/describedBy cover the label-less table-cell case.
+      id?: string;
+      labelledBy?: string;
+      describedBy?: string;
     }>(),
     {freeOnly: false}
   );
@@ -136,8 +142,11 @@
 
 <template>
   <craft-input
+    :id="id"
     :label="label"
     :name="name"
+    :aria-labelledby="labelledBy"
+    :aria-describedby="describedBy"
     :has-feedback-for="error ? 'error' : ''"
     hidden-input
     .modelValue="model"
diff --git a/resources/js/cp.ts b/resources/js/cp.ts
index 8053fe83bbb..1e6dcb2f9a7 100644
--- a/resources/js/cp.ts
+++ b/resources/js/cp.ts
@@ -16,6 +16,7 @@ import './modules/editable-table';
 import './modules/generated-fields';
 import './modules/component-select';
 import './modules/input-generators';
+import './modules/icon-picker';
 import './modules/grouped-entry-type-manager';
 import './modules/queue';
 import './modules/slideout';
diff --git a/resources/js/legacy.ts b/resources/js/legacy.ts
index 6cc7d808878..038e66cc006 100644
--- a/resources/js/legacy.ts
+++ b/resources/js/legacy.ts
@@ -19,6 +19,7 @@ import './modules/queue/index';
 import './modules/slideout/index';
 import './modules/auth-method-setup/index';
 import './modules/input-generators/index';
+import './modules/icon-picker/index';
 
 const {default: Cp} = await import('./bootstrap/cp.js');
 
diff --git a/resources/js/modules/icon-picker/README.md b/resources/js/modules/icon-picker/README.md
new file mode 100644
index 00000000000..263860af7e0
--- /dev/null
+++ b/resources/js/modules/icon-picker/README.md
@@ -0,0 +1,56 @@
+# icon-picker
+
+Replaces the legacy `Craft.IconPicker` jQuery widget
+(`packages/craftcms-legacy/cp/src/js/IconPicker.js`) on legacy CP surfaces.
+
+## Shape: a Vue-mount bridge, not a logic-class port
+
+The icon picker's functionality already lives in the Vue component
+`resources/js/common/form/IconPicker.vue` (used directly by the migrated
+entry-types `Edit.vue`). Rather than re-porting it, this module is a thin custom
+element that **mounts that Vue component** on non-Inertia surfaces:
+
+| File | Role |
+| --- | --- |
+| `icon-picker.ce.ts` | `<craft-icon-picker>` — a plain custom element that `createApp(IconPicker, props).mount(this)` from its attributes on connect, and `unmount()`s on disconnect. |
+| `index.ts` | `defineElement('craft-icon-picker', …)`. |
+
+This mirrors the `auth/elevated-session` precedent (a Vue island on legacy
+pages), but per-instance rather than as a singleton host.
+
+## Why the Vue component works standalone
+
+`IconPicker.vue`'s only `@inertiajs/vue3` dependency is `useHttp`, which already
+runs outside an Inertia page (`markdown-field` uses it in plain-TS behaviors on
+legacy edit pages). Everything else (`useAsyncIcon`, `Modal`/`Pane`/`CraftInput`,
+the Wayfinder `IconController.pickerOptions` URL helper) is standalone.
+
+## Attributes → props
+
+`name`, `value` (→ `modelValue`), `free-only`, `disabled`, `label`, `error`,
+`labelled-by`, `described-by`. The component owns its label (matching the modern
+entry-types page), so field surfaces pass `label`; label-less table cells pass
+`labelled-by`. The component renders its own `craft-input` with `hidden-input` +
+`name`, so the selected value posts with the form. Model changes re-emit as a
+bubbling `change` CustomEvent.
+
+## Wiring & consumers
+
+Imported for side effects from `resources/js/cp.ts` and `resources/js/legacy.ts`.
+Consumers emit the element instead of `new Craft.IconPicker(...)`:
+`_includes/forms/iconPicker.twig`, the `Craft.ui.createIconPicker` /
+`createIconPickerField` factories (editable-table icon cells,
+CustomizeSourcesModal). A deprecation shim for stray plugin `new
+Craft.IconPicker(...)` callers lives in the yii2-adapter cpcompat bundle.
+
+## Deferred / notes
+
+- **`small`** (editable-table icon cells) isn't yet a component prop — cells
+  render at normal size. Follow-up if the density matters.
+- Each element is its own `createApp`; fine for one-off fields, one app per row
+  in an editable-table icon column. Lazy-mount on first open if that ever bites.
+
+## Verification
+
+`npm run typecheck` + eslint + prettier. Behavior is verified live in the CP
+(pick/change/remove, the search modal, and form posting of the selected icon).
diff --git a/resources/js/modules/icon-picker/icon-picker.ce.ts b/resources/js/modules/icon-picker/icon-picker.ce.ts
new file mode 100644
index 00000000000..31945f13486
--- /dev/null
+++ b/resources/js/modules/icon-picker/icon-picker.ce.ts
@@ -0,0 +1,48 @@
+import {createApp, type App} from 'vue';
+import IconPicker from '@/common/form/IconPicker.vue';
+
+/**
+ * `<craft-icon-picker>` — mounts the Vue `IconPicker.vue` component on legacy
+ * (non-Inertia) CP surfaces, replacing the legacy jQuery `Craft.IconPicker`
+ * widget. The modern entry-types Vue page uses `IconPicker.vue` directly; this is
+ * the bridge for Twig/jQuery surfaces (settings fields, editable-table icon
+ * cells, CustomizeSourcesModal).
+ *
+ * Settings come from attributes; the component renders its own form-postable
+ * control (`craft-input` with `hidden-input` + `name`), so the value posts with
+ * no separate hidden input here. Model changes re-emit as a bubbling `change`
+ * CustomEvent for legacy listeners. The per-instance Vue app is unmounted on
+ * disconnect (e.g. an editable-table row removal) to avoid leaks.
+ */
+export default class CraftIconPicker extends HTMLElement {
+  #app: App | null = null;
+
+  connectedCallback(): void {
+    if (this.#app) {
+      return;
+    }
+
+    this.#app = createApp(IconPicker, {
+      name: this.getAttribute('name') ?? undefined,
+      label: this.getAttribute('label') ?? undefined,
+      error: this.getAttribute('error') ?? undefined,
+      labelledBy: this.getAttribute('labelled-by') ?? undefined,
+      describedBy: this.getAttribute('described-by') ?? undefined,
+      freeOnly: this.hasAttribute('free-only'),
+      disabled: this.hasAttribute('disabled'),
+      modelValue: this.getAttribute('value') ?? '',
+      'onUpdate:modelValue': (value: string) => {
+        this.dispatchEvent(
+          new CustomEvent('change', {bubbles: true, detail: {value}})
+        );
+      },
+    });
+
+    this.#app.mount(this);
+  }
+
+  disconnectedCallback(): void {
+    this.#app?.unmount();
+    this.#app = null;
+  }
+}
diff --git a/resources/js/modules/icon-picker/index.ts b/resources/js/modules/icon-picker/index.ts
new file mode 100644
index 00000000000..495ed8b3737
--- /dev/null
+++ b/resources/js/modules/icon-picker/index.ts
@@ -0,0 +1,11 @@
+import CraftIconPicker from './icon-picker.ce';
+import {defineElement} from '@/common/web-components';
+
+// Register the declarative element so Twig can emit `<craft-icon-picker>` (and
+// the Craft.ui.createIconPicker factory can build it) instead of the legacy
+// `new Craft.IconPicker(...)` boot. No legacy `Craft.IconPicker` global is
+// assigned here — the class is gone; a deprecation shim for stray plugin callers
+// lives in the yii2-adapter cpcompat bundle.
+defineElement('craft-icon-picker', CraftIconPicker);
+
+export {CraftIconPicker};
diff --git a/resources/templates/_includes/forms/iconPicker.twig b/resources/templates/_includes/forms/iconPicker.twig
index e1443839694..2323168281b 100644
--- a/resources/templates/_includes/forms/iconPicker.twig
+++ b/resources/templates/_includes/forms/iconPicker.twig
@@ -1,63 +1,22 @@
-{% import '_includes/forms.twig' as forms %}
+{# Renders a <craft-icon-picker> web component, which mounts the Vue IconPicker
+   (resources/js/common/form/IconPicker.vue) on legacy CP surfaces — replacing the
+   old `.icon-picker` markup + the `Craft.IconPicker` jQuery widget.
 
-{% set id = id ?? "selectize#{random()}" %}
-{% set value = value ?? null %}
-{% set small = small ?? false %}
-{% set static = static ?? false %}
-
-{% set hasValue = value or value is same as('0') %}
-
-{% tag 'div' with {
-  id,
-  class: {
-    'icon-picker': true,
-    small,
-  }|filter|keys,
-} %}
-  {% tag 'div' with {
-    class: {
-      'icon-picker--icon': true,
-      small,
-    }|filter|keys,
-    title: hasValue ? value : false,
-    role: hasValue ? 'img' : false,
-    lang: craft.targetLanguage() starts with 'en' ? false : 'en',
-    aria: {
-      label: hasValue ? value : false,
-    },
-  } %}
-    {% if hasValue %}
-      {{ svg("@appicons/#{value}.svg") }}
-    {% endif %}
-  {% endtag %}
+   The component renders its own form-postable control (a craft-input with a
+   hidden input + name). Labeling comes from a wrapping craft-field legend (the
+   `iconPickerField` macro sets `fieldset: true`) or from `labelledBy` (label-less
+   editable-table cells). `static` maps to the component's disabled state.
 
-  {% if not static %}
-    {{ forms.button({
-      class: {
-        'icon-picker--choose-btn': true,
-        small,
-        hidden: hasValue and small,
-      }|filter|keys,
-      label: hasValue ? 'Change'|t('app') : 'Choose'|t('app'),
-    }) }}
+   @TODO `small` (editable-table cells) isn't a component prop yet — see
+   resources/js/modules/icon-picker/README.md. #}
 
-    {{ forms.button({
-      class: {
-        'icon-picker--remove-btn': true,
-        small,
-        hidden: not hasValue,
-      }|filter|keys,
-      label: 'Remove'|t('app'),
-    }) }}
-
-    {% if name ?? false %}
-      {{ hiddenInput(name, value ?? '') }}
-    {% endif %}
-  {% endif %}
-{% endtag %}
+{% set value = value ?? null %}
 
-{% js %}
-  new Craft.IconPicker('#{{ id|namespaceInputId }}', {
-    freeOnly: {{ (freeOnly ?? false)|json_encode }},
-  });
-{% endjs %}
+{% tag 'craft-icon-picker' with {
+  name: name ?? false,
+  value: value ?: false,
+  'free-only': freeOnly ?? false,
+  disabled: (static ?? false) or (disabled ?? false),
+  'labelled-by': labelledBy ?? false,
+  'described-by': describedBy ?? false,
+} %}{% endtag %}
diff --git a/src/Cp/FormFields.php b/src/Cp/FormFields.php
index b450fc1ac34..aa717c334d0 100644
--- a/src/Cp/FormFields.php
+++ b/src/Cp/FormFields.php
@@ -696,6 +696,10 @@ public static function iconPickerHtml(array $config): string
     public static function iconPickerFieldHtml(array $config): string
     {
         $config['id'] ??= 'iconpicker'.mt_rand();
+        // The <craft-icon-picker> control has no single labelable input (preview +
+        // buttons), so label the group with a fieldset legend rather than a
+        // `for=` label — and keep the component itself label-less.
+        $config['fieldset'] = true;
 
         return self::fieldHtml('template:_includes/forms/iconPicker', $config);
     }
diff --git a/yii2-adapter/legacy/web/assets/cpcompat/cp-compat.js b/yii2-adapter/legacy/web/assets/cpcompat/cp-compat.js
index 5d5c7472a27..fca510a4831 100644
--- a/yii2-adapter/legacy/web/assets/cpcompat/cp-compat.js
+++ b/yii2-adapter/legacy/web/assets/cpcompat/cp-compat.js
@@ -48,6 +48,10 @@
       'EnvVarGenerator',
       'Craft.EnvVarGenerator has been removed. It was an unused legacy input generator with no replacement.'
     );
+    defineRemovedClass(
+      'IconPicker',
+      'Craft.IconPicker has been removed. Emit <craft-icon-picker> directly instead (or use Craft.ui.createIconPicker).'
+    );
   }
 
   /**

From e3e3cf9c443bd71d9364c1f537d08853dc31d593 Mon Sep 17 00:00:00 2001
From: Brian Hanson <brian@brianhanson.net>
Date: Mon, 27 Jul 2026 14:40:42 -0500
Subject: [PATCH 14/20] Replace legacy Craft.SlidePicker with the
 craft-slide-picker component
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Ports the segmented slider onto a new <craft-slide-picker> Lit web component
(keyboard/RTL/ARIA, value-change event), following the web-component-swap pattern
used for the input swaps.

- Adds the component (packages/craftcms-ui) with a vitest test, styles, and
  CEM-typed stories (getStorybookHelpers, like avatar); exports it from the
  @craftcms/ui barrel (registered CP-wide via cp.ts).
- Dashboard and the field-layout-designer emit the element directly; UI.js
  createSlidePicker builds <craft-slide-picker> (with a hidden input for form
  posting) instead of new Craft.SlidePicker.
- Deletes the legacy SlidePicker.js + import and its legacy .slide-picker CSS.
- Adds a single Craft.SlidePicker warn-and-delegate stub to the yii2-adapter
  cpcompat bundle for stray plugin callers.

Conforms an initial pass to the established pattern: drops a redundant
SlidePickerCompat.js (BC shims don't belong in the legacy bundle) and a duplicate
resources/js/modules/slide-picker wrapper (which reintroduced jQuery and an
unjustified compatify — nothing subclasses Craft.SlidePicker), leaving the
cpcompat stub as the single BC path.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 packages/craftcms-legacy/cp/src/Craft.js      |   1 -
 .../craftcms-legacy/cp/src/css/_main.scss     |  61 ------
 .../craftcms-legacy/cp/src/js/SlidePicker.js  | 197 ------------------
 packages/craftcms-legacy/cp/src/js/UI.js      |  79 +++++++
 .../dashboard/src/Dashboard.js                |  94 +++++----
 .../slide-picker/slide-picker.stories.ts      |  43 ++++
 .../slide-picker/slide-picker.styles.ts       |  76 +++++++
 .../slide-picker/slide-picker.test.ts         | 189 +++++++++++++++++
 .../components/slide-picker/slide-picker.ts   | 195 +++++++++++++++++
 packages/craftcms-ui/src/index.ts             |   1 +
 resources/js/cp.ts                            |   1 -
 .../modules/field-layout-designer/README.md   |   4 +-
 .../modules/field-layout-designer/element.ts  |  36 ++--
 .../legacy/web/assets/cpcompat/cp-compat.js   | 141 +++++++++++++
 14 files changed, 798 insertions(+), 320 deletions(-)
 delete mode 100644 packages/craftcms-legacy/cp/src/js/SlidePicker.js
 create mode 100644 packages/craftcms-ui/src/components/slide-picker/slide-picker.stories.ts
 create mode 100644 packages/craftcms-ui/src/components/slide-picker/slide-picker.styles.ts
 create mode 100644 packages/craftcms-ui/src/components/slide-picker/slide-picker.test.ts
 create mode 100644 packages/craftcms-ui/src/components/slide-picker/slide-picker.ts

diff --git a/packages/craftcms-legacy/cp/src/Craft.js b/packages/craftcms-legacy/cp/src/Craft.js
index 37e8a08eac3..de6ff80c695 100644
--- a/packages/craftcms-legacy/cp/src/Craft.js
+++ b/packages/craftcms-legacy/cp/src/Craft.js
@@ -69,7 +69,6 @@ import './js/Preview.js';
 import './js/PreviewFileModal.js';
 import './js/ProgressBar.js';
 import './js/PromptHandler.js';
-import './js/SlidePicker.js';
 import './js/SlideRuleInput.js';
 import './js/Structure.js';
 import './js/StructureDrag.js';
diff --git a/packages/craftcms-legacy/cp/src/css/_main.scss b/packages/craftcms-legacy/cp/src/css/_main.scss
index 0e23ec74f40..e62d8b2fcc0 100644
--- a/packages/craftcms-legacy/cp/src/css/_main.scss
+++ b/packages/craftcms-legacy/cp/src/css/_main.scss
@@ -8126,67 +8126,6 @@ body {
   cursor: default;
 }
 
-/* slide picker */
-.slide-picker {
-  display: flex;
-  height: 1rem;
-  white-space: nowrap;
-
-  a {
-    position: relative;
-    border: 1px solid var(--border-hairline);
-    border-inline-start: none;
-    background-image: none;
-    width: calc(8rem / 16 - 1px);
-    height: calc(1rem - 2px);
-    margin-inline-start: 0;
-    margin-block: 1px;
-    box-sizing: border-box;
-    cursor: pointer;
-
-    &:first-child {
-      width: calc(8rem / 16);
-      border-inline-start: 1px solid var(--gray-400) !important;
-    }
-
-    &::before {
-      content: '';
-      position: absolute;
-      inset-block-start: calc(-4rem / 16 - 1px);
-      inset-inline-start: -1px;
-      width: calc(100% + 2px);
-      height: var(--touch-target-size);
-    }
-  }
-
-  &:not(:hover) a.active,
-  &:hover a.active-hover {
-    border-block-start-color: var(--gray-400);
-    border-block-end-color: var(--gray-400);
-    height: 1rem;
-    margin-block: 0;
-
-    &:first-child {
-      border-inline-start: 1px solid var(--gray-400);
-      border-start-start-radius: var(--radius-sm);
-      border-end-start-radius: var(--radius-sm);
-    }
-  }
-
-  &:not(:hover) a.last-active,
-  &:hover a.last-active-hover {
-    border-inline-end: 1px solid var(--gray-400);
-    border-start-end-radius: var(--radius-sm);
-    border-end-end-radius: var(--radius-sm);
-  }
-
-  &:focus {
-    a.active {
-      background-color: var(--bg-selection-light);
-    }
-  }
-}
-
 /* errors */
 ul.errors {
   margin-block-start: 5px;
diff --git a/packages/craftcms-legacy/cp/src/js/SlidePicker.js b/packages/craftcms-legacy/cp/src/js/SlidePicker.js
deleted file mode 100644
index 21ea6f8b9df..00000000000
--- a/packages/craftcms-legacy/cp/src/js/SlidePicker.js
+++ /dev/null
@@ -1,197 +0,0 @@
-(function ($) {
-  /** global: Craft */
-  /** global: Garnish */
-  /**
-   * Slide Picker
-   */
-  Craft.SlidePicker = Garnish.Base.extend(
-    {
-      min: null,
-      max: null,
-      totalSteps: null,
-      value: null,
-      label: null,
-      describedBy: null,
-
-      $container: null,
-      $buttons: null,
-
-      init: function (value, settings) {
-        this.setSettings(settings, Craft.SlidePicker.defaults);
-
-        this.$container = $('<div/>', {
-          class: 'slide-picker',
-          role: 'slider',
-          tabindex: this.settings.readOnly ? -1 : 0,
-          'aria-label': Craft.t('app', 'Number of columns'),
-        });
-
-        this.refresh();
-        this.setValue(value, false);
-
-        if (!this.settings.readOnly) {
-          this.addListener(this.$container, 'keydown', (ev) => {
-            switch (ev.keyCode) {
-              case Garnish.UP_KEY:
-                this.setValue(this.value + this.settings.step);
-                ev.preventDefault();
-                break;
-              case Garnish.DOWN_KEY:
-                this.setValue(this.value - this.settings.step);
-                ev.preventDefault();
-                break;
-              case Garnish.RIGHT_KEY:
-                if (Craft.orientation === 'ltr') {
-                  this.setValue(this.value + this.settings.step);
-                } else {
-                  this.setValue(this.value - this.settings.step);
-                }
-                ev.preventDefault();
-                break;
-              case Garnish.LEFT_KEY:
-                if (Craft.orientation === 'ltr') {
-                  this.setValue(this.value - this.settings.step);
-                } else {
-                  this.setValue(this.value + this.settings.step);
-                }
-                ev.preventDefault();
-                break;
-              case Garnish.HOME_KEY:
-                this.setValue(this.min);
-                ev.preventDefault();
-                break;
-              case Garnish.END_KEY:
-                this.setValue(this.max);
-                ev.preventDefault();
-                break;
-            }
-          });
-        }
-      },
-
-      refresh: function () {
-        // Figure out what the min/max values are
-        this.min = this._min();
-        this.max = this._max();
-        this.totalSteps = (this.max - this.min) / this.settings.step;
-
-        // Set label
-        this.label = this.settings.label;
-        this.describedBy = this.settings.describedBy;
-
-        if (!Number.isInteger(this.totalSteps)) {
-          throw 'Invalid SlidePicker config';
-        }
-
-        if (this.$buttons) {
-          this.$buttons.remove();
-        }
-
-        this.$container.attr('aria-valuemin', this.min);
-        this.$container.attr('aria-valuemax', this.max);
-
-        if (this.label) {
-          this.$container.attr('aria-label', this.label);
-        }
-
-        if (this.describedBy) {
-          this.$container.attr('aria-describedby', this.describedBy);
-        }
-
-        this.$buttons = $();
-
-        // Create the buttons
-        for (
-          let value = this.min;
-          value <= this.max;
-          value += this.settings.step
-        ) {
-          this.$buttons = this.$buttons.add(
-            $('<a/>', {
-              title: this.settings.valueLabel(value),
-              data: {value},
-            })
-          );
-        }
-
-        this.$buttons.appendTo(this.$container);
-
-        if (this.value !== null) {
-          let value = this.value;
-          this.value = null;
-          this.setValue(value, false);
-        }
-
-        this.addListener(this.$buttons, 'mouseover', (ev) => {
-          this.$buttons.removeClass('active-hover last-active-hover');
-          $(ev.currentTarget)
-            .addClass('active-hover last-active-hover')
-            .prevAll()
-            .addClass('active-hover');
-        });
-
-        this.addListener(this.$buttons, 'mouseout', () => {
-          this.$buttons.removeClass('active-hover');
-        });
-
-        this.addListener(this.$buttons, 'click', (ev) => {
-          this.setValue($.data(ev.currentTarget, 'value'));
-          ev.stopPropagation();
-          this.$container.focus();
-        });
-      },
-
-      setValue: function (value, triggerEvent) {
-        value = Math.max(Math.min(value, this.max), this.min);
-
-        // ensure that the value is valid - matches min, max or any of the steps in between
-        // if it doesn't match it already, choose the step value that's closest to it
-        value = Math.round(value / this.settings.step) * this.settings.step;
-
-        if (this.value === (this.value = value)) {
-          return;
-        }
-
-        this.$container.attr({
-          'aria-valuenow': this.value,
-          'aria-valuetext': this.settings.valueLabel(this.value),
-        });
-
-        this.$buttons.removeClass('last-active active');
-        let $activeButton = this.$buttons.eq(
-          (this.value - this.min) / this.settings.step
-        );
-        $activeButton.add($activeButton.prevAll()).addClass('active');
-        $activeButton.addClass('last-active');
-
-        if (triggerEvent !== false) {
-          this.settings.onChange(value);
-        }
-      },
-
-      _min: function () {
-        if (typeof this.settings.min === 'function') {
-          return this.settings.min();
-        }
-        return this.settings.min;
-      },
-
-      _max: function () {
-        if (typeof this.settings.max === 'function') {
-          return this.settings.max();
-        }
-        return this.settings.max;
-      },
-    },
-    {
-      defaults: {
-        min: 0,
-        max: 100,
-        step: 10,
-        valueLabel: null,
-        onChange: $.noop,
-        readOnly: false,
-      },
-    }
-  );
-})(jQuery);
diff --git a/packages/craftcms-legacy/cp/src/js/UI.js b/packages/craftcms-legacy/cp/src/js/UI.js
index f07917a8610..9cfb79fb891 100644
--- a/packages/craftcms-legacy/cp/src/js/UI.js
+++ b/packages/craftcms-legacy/cp/src/js/UI.js
@@ -816,6 +816,85 @@ Craft.ui = {
     );
   },
 
+  createSlidePicker: function (config) {
+    // Builds a <craft-slide-picker> web component directly (the same element
+    // Dashboard/field-layout-designer emit), replacing the legacy Craft.SlidePicker
+    // JS. A hidden input carries the value for form posting.
+    config = config || {};
+    const min = typeof config.min === 'function' ? config.min() : config.min ?? 0;
+    const max = typeof config.max === 'function' ? config.max() : config.max ?? 100;
+    const step = typeof config.step !== 'undefined' ? config.step : 10;
+    const value = typeof config.value === 'number' ? config.value : min;
+    const readOnly = !!(config.readOnly || config.disabled || config.static);
+
+    const $el = $('<craft-slide-picker/>');
+    const el = $el[0];
+    el.min = min;
+    el.max = max;
+    el.step = step;
+    el.value = value || 0;
+    el.label = config.label || Craft.t('app', 'Number of columns');
+    el.valueLabel =
+      config.valueLabel ||
+      ((value) => {
+        return `${value}`;
+      });
+    if (config.describedBy) {
+      el.setAttribute('described-by', config.describedBy);
+    }
+    if (readOnly) {
+      el.setAttribute('read-only', '');
+    }
+    if (config.id) {
+      $el.attr('id', config.id);
+    }
+    if (config.class) {
+      $el.addClass(config.class);
+    }
+
+    let $input = null;
+    if (config.name) {
+      $input = $('<input/>', {
+        type: 'hidden',
+        name: config.name,
+        value: el.value,
+      })
+        .prop('disabled', !!config.disabled)
+        .appendTo($el);
+    }
+
+    $el.on('value-change', (event) => {
+      const value = event.originalEvent?.detail?.value;
+      if (typeof value !== 'number') {
+        return;
+      }
+      if ($input) {
+        $input.val(value);
+      }
+      if (config.onChange) {
+        config.onChange(value);
+      }
+    });
+
+    return $el;
+  },
+
+  createSlidePickerField: function (config) {
+    if (!config.id) {
+      config.id = 'slidepicker' + Math.floor(Math.random() * 1000000000);
+    }
+    if (!config.labelId) {
+      config.labelId = `${config.id}-label`;
+    }
+    if (!config.describedBy) {
+      config.describedBy = config.labelId;
+    }
+
+    return this.createField(this.createSlidePicker(config), config).addClass(
+      'slidepicker-field'
+    );
+  },
+
   createColorInput: function (config) {
     // Builds a <craft-input-color> web component (mirrors the server-rendered
     // CraftCms\Cms\Cp\Components\InputColor) — a hex input paired with a native
diff --git a/packages/craftcms-legacy/dashboard/src/Dashboard.js b/packages/craftcms-legacy/dashboard/src/Dashboard.js
index d3b1b8b3133..9a4c0bea217 100644
--- a/packages/craftcms-legacy/dashboard/src/Dashboard.js
+++ b/packages/craftcms-legacy/dashboard/src/Dashboard.js
@@ -1,4 +1,5 @@
 import './dashboard.scss';
+import '@craftcms/ui';
 
 (function ($) {
   /** global: Craft */
@@ -699,51 +700,60 @@ import './dashboard.scss';
       );
 
       // Initialize the colspan picker
-      this.colspanPicker = new Craft.SlidePicker(this.getColspan(), {
-        min: 1,
-        max: () => {
-          return window.dashboard.grid.totalCols;
-        },
-        step: 1,
-        describedBy: this.getWidgetLabelId(),
-        valueLabel: (colspan) => {
-          return Craft.t(
-            'app',
-            '{num, number} {num, plural, =1{column} other{columns}}',
-            {
-              num: colspan,
-            }
-          );
-        },
-        onChange: (colspan) => {
-          // Update the widget and grid
-          this.setColspan(colspan);
-          window.dashboard.grid.refreshCols(true);
-
-          // Save the change
-          let data = {
-            id: this.id,
-            colspan: colspan,
-          };
-
-          Craft.sendActionRequest('POST', 'dashboard/change-widget-colspan', {
-            data,
+      this.colspanPicker = document.createElement('craft-slide-picker');
+      this.colspanPicker.min = 1;
+      this.colspanPicker.step = 1;
+      this.colspanPicker.value = this.getColspan();
+      this.colspanPicker.label = Craft.t('app', 'Number of columns');
+      this.colspanPicker.valueLabel = (colspan) => {
+        return Craft.t(
+          'app',
+          '{num, number} {num, plural, =1{column} other{columns}}',
+          {
+            num: colspan,
+          }
+        );
+      };
+      this.colspanPicker.setAttribute('described-by', this.getWidgetLabelId());
+
+      const refreshColspanPicker = () => {
+        const maxCols = window.dashboard.grid.totalCols;
+        this.colspanPicker.max = maxCols;
+        if (this.colspanPicker.value > maxCols) {
+          this.colspanPicker.value = maxCols;
+        }
+      };
+
+      refreshColspanPicker();
+
+      this.colspanPicker.addEventListener('value-change', ({detail}) => {
+        const colspan = detail.value;
+
+        // Update the widget and grid
+        this.setColspan(colspan);
+        window.dashboard.grid.refreshCols(true);
+
+        // Save the change
+        let data = {
+          id: this.id,
+          colspan: colspan,
+        };
+
+        Craft.sendActionRequest('POST', 'dashboard/change-widget-colspan', {
+          data,
+        })
+          .then((response) => {
+            Craft.cp.displaySuccess(Craft.t('app', 'Widget saved.'));
           })
-            .then((response) => {
-              Craft.cp.displaySuccess(Craft.t('app', 'Widget saved.'));
-            })
-            .catch(({response}) => {
-              Craft.cp.displayError(Craft.t('app', 'Couldn’t save widget.'));
-            });
-        },
+          .catch(({response}) => {
+            Craft.cp.displayError(Craft.t('app', 'Couldn’t save widget.'));
+          });
       });
 
-      this.colspanPicker.$container.appendTo(
-        $row.find('> td.widgetmanagerhud-col-colspan-picker')
-      );
-      window.dashboard.grid.on('refreshCols', () => {
-        this.colspanPicker.refresh();
-      });
+      $row
+        .find('> td.widgetmanagerhud-col-colspan-picker')
+        .append(this.colspanPicker);
+      window.dashboard.grid.on('refreshCols', refreshColspanPicker);
 
       return $row;
     },
diff --git a/packages/craftcms-ui/src/components/slide-picker/slide-picker.stories.ts b/packages/craftcms-ui/src/components/slide-picker/slide-picker.stories.ts
new file mode 100644
index 00000000000..bae5bb76e76
--- /dev/null
+++ b/packages/craftcms-ui/src/components/slide-picker/slide-picker.stories.ts
@@ -0,0 +1,43 @@
+import type {Meta, StoryObj} from '@storybook/web-components-vite';
+import type CraftSlidePicker from './slide-picker.js';
+import {getStorybookHelpers} from '@wc-toolkit/storybook-helpers';
+import './slide-picker.js';
+
+const {events, args, argTypes, template} =
+  getStorybookHelpers('craft-slide-picker');
+
+const meta: Meta<CraftSlidePicker> = {
+  title: 'Controls/Slide Picker',
+  component: 'craft-slide-picker',
+  args,
+  argTypes,
+  render: (args) => template(args),
+  parameters: {
+    actions: {
+      handles: events,
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<CraftSlidePicker & typeof args>;
+
+export const Default: Story = {
+  args: {},
+};
+
+export const ReadOnly: Story = {
+  args: {
+    readOnly: true,
+  },
+};
+
+export const FiveSteps: Story = {
+  args: {
+    min: 0,
+    max: 100,
+    step: 20,
+    value: 60,
+    label: 'Completion',
+  },
+};
diff --git a/packages/craftcms-ui/src/components/slide-picker/slide-picker.styles.ts b/packages/craftcms-ui/src/components/slide-picker/slide-picker.styles.ts
new file mode 100644
index 00000000000..9e3b34ae0ff
--- /dev/null
+++ b/packages/craftcms-ui/src/components/slide-picker/slide-picker.styles.ts
@@ -0,0 +1,76 @@
+import {css} from 'lit';
+
+export default css`
+  :host {
+    display: inline-block;
+  }
+
+  .slide-picker {
+    --_segment-height: 1rem;
+    --_segment-width: calc(8rem / 16);
+    --_segment-border: var(--c-color-neutral-border-normal);
+    --_segment-active-border: var(--c-color-neutral-border-loud);
+    --_segment-fill: var(--c-color-neutral-fill-quiet);
+    --_segment-active-fill: var(--c-color-neutral-fill-normal);
+    display: inline-flex;
+    align-items: stretch;
+    min-height: max(var(--_segment-height), var(--touch-target-size));
+    outline: none;
+  }
+
+  .slide-picker__segment {
+    inline-size: var(--_segment-width);
+    block-size: calc(var(--_segment-height) * 0.75);
+
+    border: 1px solid var(--_segment-border);
+    border-inline-start-width: 0;
+    background-color: var(--_segment-fill);
+    cursor: pointer;
+    margin-block: auto;
+  }
+
+  .slide-picker__segment:first-child {
+    border-inline-start-width: 1px;
+    border-start-start-radius: var(--c-radius-sm);
+    border-end-start-radius: var(--c-radius-sm);
+  }
+
+  .slide-picker__segment:last-child {
+    border-start-end-radius: var(--c-radius-sm);
+    border-end-end-radius: var(--c-radius-sm);
+  }
+
+  .slide-picker__segment.is-active {
+    background-color: var(--_segment-active-fill);
+    border-block-color: var(--_segment-active-border);
+    block-size: var(--_segment-height);
+  }
+
+  .slide-picker__segment.is-last-active {
+    border-inline-end-color: var(--_segment-active-border);
+  }
+
+  .slide-picker:focus-visible .slide-picker__segment.is-last-active {
+    outline: var(--c-focus-outline-width) solid var(--c-color-focus-outline);
+    outline-offset: var(--c-focus-outline-offset);
+    position: relative;
+    z-index: 1;
+  }
+
+  :host([read-only]) .slide-picker__segment {
+    cursor: default;
+    opacity: 0.7;
+  }
+
+  @media (forced-colors: active) {
+    .slide-picker__segment {
+      background: Canvas;
+      border-color: ButtonBorder;
+    }
+
+    .slide-picker__segment.is-active {
+      background: Highlight;
+      border-color: Highlight;
+    }
+  }
+`;
diff --git a/packages/craftcms-ui/src/components/slide-picker/slide-picker.test.ts b/packages/craftcms-ui/src/components/slide-picker/slide-picker.test.ts
new file mode 100644
index 00000000000..95a5415eab5
--- /dev/null
+++ b/packages/craftcms-ui/src/components/slide-picker/slide-picker.test.ts
@@ -0,0 +1,189 @@
+import {beforeEach, describe, expect, it, vi} from 'vitest';
+import type CraftSlidePicker from './slide-picker.js';
+import './slide-picker.js';
+
+async function createSlidePicker(
+  props: Partial<Pick<CraftSlidePicker, 'min' | 'max' | 'step' | 'value'>> = {}
+): Promise<CraftSlidePicker> {
+  const element = document.createElement('craft-slide-picker');
+  Object.assign(element, {min: 0, max: 100, step: 10, value: 0, ...props});
+  document.body.append(element);
+  await element.updateComplete;
+
+  return element;
+}
+
+function slider(element: CraftSlidePicker): HTMLElement {
+  return element.shadowRoot!.querySelector('.slide-picker') as HTMLElement;
+}
+
+function segments(element: CraftSlidePicker): HTMLElement[] {
+  return [
+    ...element.shadowRoot!.querySelectorAll('.slide-picker__segment'),
+  ] as HTMLElement[];
+}
+
+beforeEach(() => {
+  document.body.innerHTML = '';
+});
+
+describe('craft-slide-picker', () => {
+  it('renders one segment per step across the range', async () => {
+    const element = await createSlidePicker({min: 0, max: 100, step: 10});
+
+    // 0, 10, …, 100 => 11 segments
+    expect(segments(element)).toHaveLength(11);
+  });
+
+  it('marks segments active up to (and including) the current value', async () => {
+    const element = await createSlidePicker({
+      min: 0,
+      max: 100,
+      step: 25,
+      value: 50,
+    });
+
+    const active = segments(element).filter((s) =>
+      s.classList.contains('is-active')
+    );
+    // 0, 25, 50 are <= 50
+    expect(active).toHaveLength(3);
+
+    const lastActive = segments(element).filter((s) =>
+      s.classList.contains('is-last-active')
+    );
+    expect(lastActive).toHaveLength(1);
+    expect(lastActive[0]!.getAttribute('title')).toBe('50');
+  });
+
+  it('emits value-change with the selected value on segment click', async () => {
+    const element = await createSlidePicker({
+      min: 0,
+      max: 100,
+      step: 10,
+      value: 0,
+    });
+    const handler = vi.fn();
+    element.addEventListener('value-change', handler as EventListener);
+
+    segments(element)[3]!.click(); // 0, 10, 20, 30 -> 30
+    await element.updateComplete;
+
+    expect(element.value).toBe(30);
+    expect(handler).toHaveBeenCalledTimes(1);
+    expect((handler.mock.calls[0]![0] as CustomEvent).detail).toEqual({
+      value: 30,
+    });
+  });
+
+  it('clamps out-of-range values and snaps off-step values', async () => {
+    const clamped = await createSlidePicker({
+      min: 0,
+      max: 100,
+      step: 10,
+      value: 250,
+    });
+    expect(clamped.value).toBe(100);
+
+    const snapped = await createSlidePicker({
+      min: 0,
+      max: 100,
+      step: 10,
+      value: 23,
+    });
+    expect(snapped.value).toBe(20);
+  });
+
+  it('moves the value with the keyboard and emits each change', async () => {
+    const element = await createSlidePicker({
+      min: 0,
+      max: 100,
+      step: 10,
+      value: 50,
+    });
+    const handler = vi.fn();
+    element.addEventListener('value-change', handler as EventListener);
+
+    const press = (key: string) =>
+      slider(element).dispatchEvent(
+        new KeyboardEvent('keydown', {key, bubbles: true})
+      );
+
+    press('ArrowUp');
+    await element.updateComplete;
+    expect(element.value).toBe(60);
+
+    press('Home');
+    await element.updateComplete;
+    expect(element.value).toBe(0);
+
+    press('End');
+    await element.updateComplete;
+    expect(element.value).toBe(100);
+
+    expect(handler).toHaveBeenCalledTimes(3);
+  });
+
+  it('ignores input while read-only', async () => {
+    const element = await createSlidePicker({
+      min: 0,
+      max: 100,
+      step: 10,
+      value: 50,
+    });
+    element.readOnly = true;
+    await element.updateComplete;
+
+    const handler = vi.fn();
+    element.addEventListener('value-change', handler as EventListener);
+
+    segments(element)[0]!.click();
+    slider(element).dispatchEvent(
+      new KeyboardEvent('keydown', {key: 'ArrowUp', bubbles: true})
+    );
+    await element.updateComplete;
+
+    expect(element.value).toBe(50);
+    expect(handler).not.toHaveBeenCalled();
+    expect(slider(element).getAttribute('tabindex')).toBe('-1');
+    expect(slider(element).getAttribute('aria-readonly')).toBe('true');
+  });
+
+  it('exposes slider ARIA state', async () => {
+    const element = await createSlidePicker({
+      min: 0,
+      max: 100,
+      step: 25,
+      value: 50,
+    });
+    const s = slider(element);
+
+    expect(s.getAttribute('role')).toBe('slider');
+    expect(s.getAttribute('aria-valuemin')).toBe('0');
+    expect(s.getAttribute('aria-valuemax')).toBe('100');
+    expect(s.getAttribute('aria-valuenow')).toBe('50');
+    expect(s.getAttribute('aria-valuetext')).toBe('50');
+  });
+
+  it('formats the value text with valueUnit and valueLabel', async () => {
+    const withUnit = await createSlidePicker({
+      min: 0,
+      max: 100,
+      step: 25,
+      value: 50,
+    });
+    withUnit.valueUnit = '%';
+    await withUnit.updateComplete;
+    expect(slider(withUnit).getAttribute('aria-valuetext')).toBe('50%');
+
+    const withLabel = await createSlidePicker({
+      min: 0,
+      max: 100,
+      step: 25,
+      value: 50,
+    });
+    withLabel.valueLabel = (value) => `${value} columns`;
+    await withLabel.updateComplete;
+    expect(slider(withLabel).getAttribute('aria-valuetext')).toBe('50 columns');
+  });
+});
diff --git a/packages/craftcms-ui/src/components/slide-picker/slide-picker.ts b/packages/craftcms-ui/src/components/slide-picker/slide-picker.ts
new file mode 100644
index 00000000000..3e3f09aac7d
--- /dev/null
+++ b/packages/craftcms-ui/src/components/slide-picker/slide-picker.ts
@@ -0,0 +1,195 @@
+import {html, LitElement, nothing, type PropertyValues} from 'lit';
+import {property} from 'lit/decorators.js';
+import {classMap} from 'lit/directives/class-map.js';
+import {ifDefined} from 'lit/directives/if-defined.js';
+import {t} from '@src/utilities/translate';
+import styles from './slide-picker.styles.js';
+
+/**
+ * @summary Segmented slider control for selecting numeric values in fixed steps.
+ * @since 1.0
+ *
+ * @fires {CustomEvent<{value:number}>} value-change - Emitted when user input
+ * changes the current value.
+ */
+export default class CraftSlidePicker extends LitElement {
+  static override styles = [styles];
+
+  @property({type: Number}) min = 0;
+  @property({type: Number}) max = 100;
+  @property({type: Number}) step = 10;
+  @property({type: Number}) value = 0;
+  @property() label = t('Number of columns');
+  @property({attribute: 'described-by'}) describedBy?: string;
+  @property({attribute: 'value-unit'}) valueUnit = '';
+  @property({attribute: false}) valueLabel?: (value: number) => string;
+  @property({type: Boolean, reflect: true, attribute: 'read-only'})
+  readOnly = false;
+
+  protected override willUpdate(changed: PropertyValues<this>) {
+    super.willUpdate(changed);
+
+    if (
+      changed.has('min') ||
+      changed.has('max') ||
+      changed.has('step') ||
+      changed.has('value')
+    ) {
+      const normalized = this.#normalize(this.value);
+      if (normalized !== this.value) {
+        this.value = normalized;
+      }
+    }
+  }
+
+  #values(): number[] {
+    const {min, max, step} = this;
+    if (step <= 0 || max < min) {
+      throw new Error('Invalid craft-slide-picker range configuration.');
+    }
+
+    const totalSteps = (max - min) / step;
+    if (!Number.isInteger(totalSteps)) {
+      throw new Error(
+        'Invalid craft-slide-picker step configuration for the provided range.'
+      );
+    }
+
+    return Array.from(
+      {length: totalSteps + 1},
+      (_, index) => min + index * step
+    );
+  }
+
+  #normalize(rawValue: number): number {
+    this.#values();
+    const {min, max, step} = this;
+    const clamped = Math.min(Math.max(rawValue, min), max);
+    const snapped = min + Math.round((clamped - min) / step) * step;
+    return Math.min(Math.max(snapped, min), max);
+  }
+
+  #isRtl(): boolean {
+    const dir =
+      (this.closest('[dir]') as HTMLElement | null)?.getAttribute('dir') ??
+      document.documentElement.getAttribute('dir');
+    return dir?.toLowerCase() === 'rtl';
+  }
+
+  #valueText(value: number): string {
+    if (this.valueLabel) {
+      return this.valueLabel(value);
+    }
+    return this.valueUnit ? `${value}${this.valueUnit}` : `${value}`;
+  }
+
+  #setValue(next: number, emit: boolean) {
+    const normalized = this.#normalize(next);
+    if (normalized === this.value) {
+      return;
+    }
+
+    this.value = normalized;
+
+    if (emit) {
+      this.dispatchEvent(
+        new CustomEvent<{value: number}>('value-change', {
+          detail: {value: normalized},
+          bubbles: true,
+          composed: true,
+        })
+      );
+    }
+  }
+
+  #handleSegmentClick(value: number) {
+    if (this.readOnly) {
+      return;
+    }
+    this.#setValue(value, true);
+  }
+
+  #handleKeyDown(event: KeyboardEvent) {
+    if (this.readOnly) {
+      return;
+    }
+
+    const rtl = this.#isRtl();
+
+    switch (event.key) {
+      case 'ArrowUp':
+        this.#setValue(this.value + this.step, true);
+        event.preventDefault();
+        break;
+      case 'ArrowDown':
+        this.#setValue(this.value - this.step, true);
+        event.preventDefault();
+        break;
+      case 'ArrowRight':
+        this.#setValue(this.value + (rtl ? -this.step : this.step), true);
+        event.preventDefault();
+        break;
+      case 'ArrowLeft':
+        this.#setValue(this.value + (rtl ? this.step : -this.step), true);
+        event.preventDefault();
+        break;
+      case 'Home':
+        this.#setValue(this.min, true);
+        event.preventDefault();
+        break;
+      case 'End':
+        this.#setValue(this.max, true);
+        event.preventDefault();
+        break;
+    }
+  }
+
+  override render() {
+    const values = this.#values();
+
+    return html`
+      <div
+        class="slide-picker"
+        role="slider"
+        tabindex=${this.readOnly ? -1 : 0}
+        aria-label=${this.label}
+        aria-valuemin=${this.min}
+        aria-valuemax=${this.max}
+        aria-valuenow=${this.value}
+        aria-valuetext=${this.#valueText(this.value)}
+        aria-readonly=${this.readOnly ? 'true' : 'false'}
+        aria-describedby=${ifDefined(this.describedBy)}
+        @keydown=${this.#handleKeyDown}
+      >
+        ${values.map((segmentValue) => {
+          const active = segmentValue <= this.value;
+          const lastActive = segmentValue === this.value;
+          return html`
+            <span
+              class=${classMap({
+                'slide-picker__segment': true,
+                'is-active': active,
+                'is-last-active': lastActive,
+              })}
+              role="presentation"
+              aria-hidden="true"
+              @click=${() => this.#handleSegmentClick(segmentValue)}
+              title=${this.#valueText(segmentValue)}
+              >${nothing}</span
+            >
+          `;
+        })}
+      </div>
+    `;
+  }
+}
+
+if (!customElements.get('craft-slide-picker')) {
+  customElements.define('craft-slide-picker', CraftSlidePicker);
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'craft-slide-picker': CraftSlidePicker;
+  }
+}
diff --git a/packages/craftcms-ui/src/index.ts b/packages/craftcms-ui/src/index.ts
index dd43dfd4354..0b18afed983 100644
--- a/packages/craftcms-ui/src/index.ts
+++ b/packages/craftcms-ui/src/index.ts
@@ -58,6 +58,7 @@ export {default as CraftSelectRich} from './components/select-rich/select-rich.j
 export {default as CraftSelectedFileList} from './components/input-file/selected-file-list.js';
 export {default as CraftSelect} from './components/select/select.js';
 export {default as CraftShortcut} from './components/shortcut/shortcut.js';
+export {default as CraftSlidePicker} from './components/slide-picker/slide-picker.js';
 export {default as CraftSpinner} from './components/spinner/spinner.js';
 export {default as CraftStatus} from './components/status/status.js';
 export {default as CraftSwitchButton} from './components/switch-button/switch-button.js';
diff --git a/resources/js/cp.ts b/resources/js/cp.ts
index 1e6dcb2f9a7..29993fd534d 100644
--- a/resources/js/cp.ts
+++ b/resources/js/cp.ts
@@ -24,4 +24,3 @@ import './modules/auth-method-setup';
 
 window.Cp = Cp as unknown as typeof window.Cp;
 
-console.log('window.Cp defined', window.Cp);
diff --git a/resources/js/modules/field-layout-designer/README.md b/resources/js/modules/field-layout-designer/README.md
index 7e6af0b7242..d0855bbe4b8 100644
--- a/resources/js/modules/field-layout-designer/README.md
+++ b/resources/js/modules/field-layout-designer/README.md
@@ -40,8 +40,8 @@ these seams:
 
 - **`Craft.Grid`** on `.fld-tabs` — instantiated and fed via `$(...)`. _TODO:_ a
   later pass can replace it with CSS Grid (out of scope here).
-- **`Craft.SlidePicker`** and **`Craft.Slideout` / `Craft.CpScreenSlideout`** —
-  instantiated at the seam; their jQuery `$container` is unwrapped with `[0]`.
+- **`Craft.Slideout` / `Craft.CpScreenSlideout`** — instantiated at the seam;
+  their jQuery `$container` is unwrapped with `[0]`.
 - **`slideout.$container.serialize()`** (jQuery-only form serialize) and the
   `Craft.ui.addErrorsToField`/`clearErrorsFromField` error path require jQuery
   fields.
diff --git a/resources/js/modules/field-layout-designer/element.ts b/resources/js/modules/field-layout-designer/element.ts
index 1e0830aa644..01af0be829a 100644
--- a/resources/js/modules/field-layout-designer/element.ts
+++ b/resources/js/modules/field-layout-designer/element.ts
@@ -97,23 +97,27 @@ export class Element extends Base {
       hasAttr(this.$container, 'data-has-custom-width');
 
     if (this.hasCustomWidth) {
-      const widthSlider = new Craft.SlidePicker(this.config.width || 100, {
-        min: 25,
-        max: 100,
-        step: 25,
-        valueLabel: (width: number) => {
-          return Craft.t('app', '{pct} width', {pct: `${width}%`});
-        },
-        onChange: (width: number) => {
-          this.updateConfig((config: any) => {
-            config.width = width;
-            return config;
-          });
-        },
-        readOnly: this.tab.designer.settings!.readOnly,
+      const widthSlider = document.createElement('craft-slide-picker');
+      widthSlider.setAttribute('label', Craft.t('app', 'Number of columns'));
+      widthSlider.setAttribute('value-unit', '%');
+      widthSlider.setAttribute('min', '25');
+      widthSlider.setAttribute('max', '100');
+      widthSlider.setAttribute('step', '25');
+      widthSlider.setAttribute('value', `${this.config.width || 100}`);
+
+      if (this.tab.designer.settings!.readOnly) {
+        widthSlider.setAttribute('read-only', '');
+      }
+
+      widthSlider.addEventListener('value-change', (event: Event) => {
+        const width = (event as CustomEvent<{value: number}>).detail.value;
+        this.updateConfig((config: any) => {
+          config.width = width;
+          return config;
+        });
       });
-      // Craft.SlidePicker exposes a jQuery $container — unwrap to native.
-      this.$container.appendChild(widthSlider.$container[0]);
+
+      this.$container.appendChild(widthSlider);
     }
 
     // create the action menu
diff --git a/yii2-adapter/legacy/web/assets/cpcompat/cp-compat.js b/yii2-adapter/legacy/web/assets/cpcompat/cp-compat.js
index fca510a4831..ff504a8b7c5 100644
--- a/yii2-adapter/legacy/web/assets/cpcompat/cp-compat.js
+++ b/yii2-adapter/legacy/web/assets/cpcompat/cp-compat.js
@@ -25,6 +25,7 @@
     registerLightSwitchClass($);
     registerPasswordInputClass($);
     registerColorInputClass($);
+    registerSlidePickerClass($);
     autoUpgrade($);
   }
 
@@ -501,6 +502,146 @@
     Craft.ColorInput = ColorInput;
   }
 
+  /**
+   * BC replacement for `Craft.SlidePicker`. Keeps the legacy constructor shape
+   * (`new Craft.SlidePicker(value, settings)`) while rendering a
+   * `<craft-slide-picker>` element under `this.$container`.
+   */
+  function registerSlidePickerClass($) {
+    var Craft = window.Craft;
+    if (!Craft || Craft.SlidePicker) {
+      return;
+    }
+
+    var warned = false;
+
+    function warnOnce() {
+      if (!warned) {
+        warned = true;
+        console.warn(
+          'Craft.SlidePicker is deprecated. Emit <craft-slide-picker> directly instead (or use Craft.ui.createSlidePicker).'
+        );
+      }
+    }
+
+    function SlidePicker(value, settings) {
+      if (!(this instanceof SlidePicker)) {
+        return new SlidePicker(value, settings);
+      }
+
+      warnOnce();
+
+      this.settings = $.extend(
+        {
+          min: 0,
+          max: 100,
+          step: 10,
+          valueLabel: null,
+          onChange: $.noop,
+          readOnly: false,
+          label: null,
+          describedBy: null,
+        },
+        settings || {}
+      );
+
+      this.value = null;
+      this.min = null;
+      this.max = null;
+      this.totalSteps = null;
+      this.$buttons = $();
+      this.$container = $('<craft-slide-picker/>');
+
+      this.refresh();
+      this.setValue(value, false);
+
+      var self = this;
+      this.$container.on('value-change', function (event) {
+        if (
+          event &&
+          event.originalEvent &&
+          event.originalEvent.detail &&
+          typeof event.originalEvent.detail.value === 'number'
+        ) {
+          self.setValue(event.originalEvent.detail.value);
+        }
+      });
+    }
+
+    SlidePicker.prototype.refresh = function () {
+      this.min = this._min();
+      this.max = this._max();
+      this.totalSteps = (this.max - this.min) / this.settings.step;
+
+      if (!Number.isInteger(this.totalSteps)) {
+        throw 'Invalid SlidePicker config';
+      }
+
+      var el = this.$container[0];
+      el.min = this.min;
+      el.max = this.max;
+      el.step = this.settings.step;
+      el.valueLabel =
+        this.settings.valueLabel ||
+        function (value) {
+          return String(value);
+        };
+      el.label = this.settings.label || Craft.t('app', 'Number of columns');
+
+      if (this.settings.describedBy) {
+        el.setAttribute('described-by', this.settings.describedBy);
+      } else {
+        el.removeAttribute('described-by');
+      }
+
+      if (this.settings.readOnly) {
+        el.setAttribute('read-only', '');
+      } else {
+        el.removeAttribute('read-only');
+      }
+
+      this.$buttons = this.$container.find('.slide-picker__segment');
+
+      if (this.value !== null) {
+        var value = this.value;
+        this.value = null;
+        this.setValue(value, false);
+      }
+    };
+
+    SlidePicker.prototype.setValue = function (value, triggerEvent) {
+      value = Math.max(Math.min(value, this.max), this.min);
+      value = Math.round(value / this.settings.step) * this.settings.step;
+
+      if (this.value === (this.value = value)) {
+        return;
+      }
+
+      this.$container[0].value = this.value;
+      this.$buttons = this.$container.find('.slide-picker__segment');
+
+      if (triggerEvent !== false) {
+        this.settings.onChange(value);
+      }
+    };
+
+    SlidePicker.prototype._min = function () {
+      if (typeof this.settings.min === 'function') {
+        return this.settings.min();
+      }
+      return this.settings.min;
+    };
+
+    SlidePicker.prototype._max = function () {
+      if (typeof this.settings.max === 'function') {
+        return this.settings.max();
+      }
+      return this.settings.max;
+    };
+
+    Craft.SlidePicker = SlidePicker;
+  }
+
   /**
    * Preserves the legacy auto-upgrade of third-party `.info`/`.lightswitch`
    * markup: sweep on load and whenever Craft.initUiElements runs on injected

From 885fb970a421611b95eb4632d7bb044df5f95a13 Mon Sep 17 00:00:00 2001
From: Brian Hanson <brian@brianhanson.net>
Date: Mon, 27 Jul 2026 15:04:02 -0500
Subject: [PATCH 15/20] Replace legacy Craft.SlideRuleInput with the
 craft-slide-rule component
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Ports the image editor's ruler-style rotation control onto a new
<craft-slide-rule> Lit web component, following the web-component-swap pattern.

- Adds the component (packages/craftcms-ui) with the legacy ruler markup, the
  verbatim position math, keyboard nav, and ARIA slider semantics; drag is
  reimplemented on pointer events (modern @craftcms/garnish has no tap events).
  Emits start/change/end CustomEvents. Includes a vitest test (layout-independent
  behavior) and CEM-typed stories; exported from the @craftcms/ui barrel
  (registered CP-wide via cp.ts). Its shadow styles are ported from the legacy
  _image_editor.scss .slide-rule block, which is removed.
- Repoints image_editor.twig to emit <craft-slide-rule>, and AssetImageEditor to
  read the element (getElementById + start/change/end listeners; value=... instead
  of setValue()); drops the no-arg removeAllListeners() call (the component owns
  its listeners).
- Deletes SlideRuleInput.js + import; adds a Craft.SlideRuleInput warn stub to the
  cpcompat bundle.

Behavior — especially the drag feel and width-based position math — must be
verified live in the image editor's straighten tool; it can't be exercised here.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 packages/craftcms-legacy/cp/src/Craft.js      |   1 -
 .../cp/src/css/_image_editor.scss             | 137 --------
 .../cp/src/js/AssetImageEditor.js             |  31 +-
 .../cp/src/js/SlideRuleInput.js               | 282 ----------------
 .../slide-rule/slide-rule.stories.ts          |  33 ++
 .../slide-rule/slide-rule.styles.ts           | 132 ++++++++
 .../components/slide-rule/slide-rule.test.ts  | 107 ++++++
 .../src/components/slide-rule/slide-rule.ts   | 305 ++++++++++++++++++
 packages/craftcms-ui/src/index.ts             |   1 +
 .../templates/_special/image_editor.twig      |   2 +-
 .../legacy/web/assets/cpcompat/cp-compat.js   |   4 +
 11 files changed, 599 insertions(+), 436 deletions(-)
 delete mode 100755 packages/craftcms-legacy/cp/src/js/SlideRuleInput.js
 create mode 100644 packages/craftcms-ui/src/components/slide-rule/slide-rule.stories.ts
 create mode 100644 packages/craftcms-ui/src/components/slide-rule/slide-rule.styles.ts
 create mode 100644 packages/craftcms-ui/src/components/slide-rule/slide-rule.test.ts
 create mode 100644 packages/craftcms-ui/src/components/slide-rule/slide-rule.ts

diff --git a/packages/craftcms-legacy/cp/src/Craft.js b/packages/craftcms-legacy/cp/src/Craft.js
index de6ff80c695..003da8ed6c4 100644
--- a/packages/craftcms-legacy/cp/src/Craft.js
+++ b/packages/craftcms-legacy/cp/src/Craft.js
@@ -69,7 +69,6 @@ import './js/Preview.js';
 import './js/PreviewFileModal.js';
 import './js/ProgressBar.js';
 import './js/PromptHandler.js';
-import './js/SlideRuleInput.js';
 import './js/Structure.js';
 import './js/StructureDrag.js';
 import './js/TableElementIndexView.js';
diff --git a/packages/craftcms-legacy/cp/src/css/_image_editor.scss b/packages/craftcms-legacy/cp/src/css/_image_editor.scss
index abfe680c1d0..72988c3625f 100755
--- a/packages/craftcms-legacy/cp/src/css/_image_editor.scss
+++ b/packages/craftcms-legacy/cp/src/css/_image_editor.scss
@@ -344,143 +344,6 @@ html.noscroll body {
   margin-block-end: 0;
 }
 
-/* Slide Rule */
-
-.slide-rule {
-  position: relative;
-  padding-block: 10px;
-  padding-inline: 0;
-
-  &:focus-visible {
-    .cursor::after {
-      box-shadow: var(--focus-ring);
-    }
-  }
-
-  .cursor {
-    &::after {
-      content: '';
-      width: calc(20 / 16 * 1rem);
-      height: calc(50 / 16 * 1rem);
-      position: absolute;
-      inset-block-start: -15px;
-      inset-inline-start: 50%;
-      transform: translateX(-50%);
-    }
-  }
-}
-
-.slide-rule .cursor {
-  position: absolute;
-  margin-inline-start: calc(-4 / 16 * 1rem);
-  margin-block-start: 4px;
-  inset-inline-start: 50%;
-  z-index: 1;
-  width: 0;
-  height: 0;
-  border-inline-start: calc(5 / 16 * 1rem) solid transparent;
-  border-inline-end: calc(5 / 16 * 1rem) solid transparent;
-  border-block-start: calc(5 / 16 * 1rem) solid #63a6e1;
-}
-
-.slide-rule .graduations {
-  white-space: nowrap;
-  height: 40px;
-  position: relative;
-}
-
-.slide-rule .graduations ul {
-  position: relative;
-  float: inline-start;
-  height: 40px;
-
-  /* We need to use "left" vs. a logical property here because that's wha the JS sets */
-  transition: 200ms left linear; /* stylelint-disable-line */
-}
-
-.slide-rule.dragging .graduations ul {
-  transition: none;
-}
-
-.slide-rule .graduations ul li {
-  display: inline-block;
-  font-size: 8px;
-  position: relative;
-  width: 10px;
-
-  &:hover {
-    cursor: pointer;
-
-    &::before {
-      border-inline-start-color: #63a6e1;
-    }
-  }
-}
-
-.slide-rule .graduations ul li:not(.main-graduation) {
-  inset-inline-start: 1px;
-}
-
-.slide-rule .graduations ul li.main-graduation::before {
-  border-inline-start-width: 4px;
-  height: 10px;
-}
-
-.slide-rule .graduations ul li.main-graduation .label {
-  display: block;
-  cursor: default;
-}
-
-.slide-rule .graduations ul li.selected::before {
-  border-inline-start-color: #63a6e1;
-}
-
-.slide-rule .graduations ul li::before {
-  content: '';
-  position: absolute;
-  border-inline-start: 2px solid var(--white);
-  height: 6px;
-  inset-block-start: 0;
-  inset-inline-start: 0;
-}
-
-.slide-rule .graduations ul li .label {
-  width: 20px;
-  position: absolute;
-  inset-block-start: 10px;
-  inset-inline-start: -9px;
-  display: none;
-  text-align: center;
-}
-
-.slide-rule .value {
-  display: none;
-  position: absolute;
-  inset-block-end: 0;
-  inset-inline-start: 50%;
-  z-index: 1;
-  box-sizing: border-box;
-  padding: 5px;
-  width: 50px;
-  margin-inline-start: -25px;
-  background: var(--gray-600);
-}
-
-.slide-rule .overlay {
-  z-index: 2;
-  position: absolute;
-  inset-block: 0 1px;
-  inset-inline: 0;
-  pointer-events: none;
-  background-image: linear-gradient(
-    to right,
-    var(--gray-900) 0%,
-    color.adjust(mixins.$grey900, $alpha: -1) 15%,
-    color.adjust(mixins.$grey900, $alpha: -1) 85%,
-    var(--gray-900) 100%
-  );
-}
-
 /* Misc */
 
 .menu.dark {
diff --git a/packages/craftcms-legacy/cp/src/js/AssetImageEditor.js b/packages/craftcms-legacy/cp/src/js/AssetImageEditor.js
index f26eadfa355..e2f505e5d48 100644
--- a/packages/craftcms-legacy/cp/src/js/AssetImageEditor.js
+++ b/packages/craftcms-legacy/cp/src/js/AssetImageEditor.js
@@ -929,18 +929,18 @@ Craft.AssetImageEditor = Garnish.Modal.extend(
         }
       });
 
-      // Straighten slider
-      this.straighteningInput = new Craft.SlideRuleInput('slide-rule', {
-        onStart: () => {
-          this._showGrid();
-        },
-        onChange: (slider) => {
-          this.straighten(slider);
-        },
-        onEnd: () => {
-          this._hideGrid();
-          this._cleanupFocalPointAfterStraighten();
-        },
+      // Straighten slider — the <craft-slide-rule> web component (replaces the
+      // legacy Craft.SlideRuleInput), driven via its start/change/end events.
+      this.straighteningInput = document.getElementById('slide-rule');
+      this.straighteningInput.addEventListener('start', () => {
+        this._showGrid();
+      });
+      this.straighteningInput.addEventListener('change', () => {
+        this.straighten(this.straighteningInput);
+      });
+      this.straighteningInput.addEventListener('end', () => {
+        this._hideGrid();
+        this._cleanupFocalPointAfterStraighten();
       });
 
       // Cropper scale modifier key
@@ -1406,7 +1406,7 @@ Craft.AssetImageEditor = Garnish.Modal.extend(
         }
 
         var editorCenter = {x: this.editorWidth / 2, y: this.editorHeight / 2};
-        this.straighteningInput.setValue(-this.imageStraightenAngle);
+        this.straighteningInput.value = -this.imageStraightenAngle;
         this.imageStraightenAngle = -this.imageStraightenAngle;
         var properties = {
           angle: this.viewportRotation + this.imageStraightenAngle,
@@ -1482,7 +1482,7 @@ Craft.AssetImageEditor = Garnish.Modal.extend(
     /**
      * Perform the straightening with input slider.
      *
-     * @param {Craft.SlideRuleInput} slider
+     * @param {HTMLElement} slider The <craft-slide-rule> element (reads `.value`).
      */
     straighten: function (slider) {
       if (!this.animationInProgress) {
@@ -1966,7 +1966,8 @@ Craft.AssetImageEditor = Garnish.Modal.extend(
      */
     hide: function () {
       this.removeAllListeners();
-      this.straighteningInput.removeAllListeners();
+      // The <craft-slide-rule> component manages its own listeners; the editor's
+      // start/change/end handlers persist with the element.
       Garnish.$bod.removeClass('no-scroll');
       this.base();
     },
diff --git a/packages/craftcms-legacy/cp/src/js/SlideRuleInput.js b/packages/craftcms-legacy/cp/src/js/SlideRuleInput.js
deleted file mode 100755
index 639fe6c8bea..00000000000
--- a/packages/craftcms-legacy/cp/src/js/SlideRuleInput.js
+++ /dev/null
@@ -1,282 +0,0 @@
-/** global: Garnish */
-
-Craft.SlideRuleInput = Garnish.Base.extend({
-  $container: null,
-  $options: null,
-  $selectedOption: null,
-  $input: null,
-  value: null,
-  dragging: false,
-  sensitivity: 3,
-  rotateIntent: false,
-
-  startPositionX: null,
-
-  init: function (id, settings) {
-    this.setSettings(settings, Craft.SlideRuleInput.defaultSettings);
-
-    this.value = 0;
-    this.graduationsMin = -70;
-    this.graduationsMax = 70;
-    this.slideMin = -45;
-    this.slideMax = 45;
-
-    this.$container = $('#' + id);
-    this.$overlay = $('<div class="overlay"></div>').appendTo(this.$container);
-    this.$cursor = $('<div class="cursor"></div>').appendTo(this.$container);
-    this.$graduations = $('<div class="graduations"></div>').appendTo(
-      this.$container
-    );
-    this.$graduationsUl = $('<ul></ul>')
-      .attr({
-        'aria-hidden': 'true',
-      })
-      .appendTo(this.$graduations);
-
-    this.$container.attr({
-      role: 'slider',
-      tabindex: '0',
-      'aria-valuemin': this.slideMin,
-      'aria-valuemax': this.slideMax,
-      'aria-valuenow': '0',
-      'aria-valuetext': Craft.t(
-        'app',
-        '{num, number} {num, plural, =1{degree} other{degrees}}',
-        {
-          num: 0,
-        }
-      ),
-    });
-
-    for (var i = this.graduationsMin; i <= this.graduationsMax; i++) {
-      var $li = $(
-        '<li class="graduation" data-graduation="' +
-          i +
-          '"><div class="label">' +
-          i +
-          '</div></li>'
-      ).appendTo(this.$graduationsUl);
-
-      if (i % 5 === 0) {
-        $li.addClass('main-graduation');
-      }
-
-      if (i === 0) {
-        $li.addClass('selected');
-      }
-    }
-
-    this.$options = this.$container.find('.graduation');
-
-    this.addListener(this.$container, 'resize', this._handleResize.bind(this));
-    this.addListener(
-      this.$container,
-      'tapstart',
-      this._handleTapStart.bind(this)
-    );
-    this.addListener(Garnish.$bod, 'tapmove', this._handleTapMove.bind(this));
-    this.addListener(Garnish.$bod, 'tapend', this._handleTapEnd.bind(this));
-    this.addListener(
-      this.$container,
-      'keydown',
-      this._handleKeypress.bind(this)
-    );
-
-    // Set to zero
-
-    // this.setValue(0);
-
-    setTimeout(() => {
-      // (n -1) options because the border is placed on the left of the 10px box
-      this.graduationsCalculatedWidth = (this.$options.length - 1) * 10;
-      this.$graduationsUl.css(
-        'left',
-        -this.graduationsCalculatedWidth / 2 + this.$container.width() / 2
-      );
-    }, 50);
-  },
-
-  _handleResize: function () {
-    var left = this.valueToPosition(this.value);
-    this.$graduationsUl.css('left', left);
-  },
-
-  _handleKeypress: function (event) {
-    const current = parseInt(this.$container.attr('aria-valuenow'), 10);
-
-    switch (event.keyCode) {
-      case Garnish.UP_KEY:
-      case Garnish.RIGHT_KEY:
-        this.setValue(current + 1);
-        break;
-      case Garnish.DOWN_KEY:
-      case Garnish.LEFT_KEY:
-        this.setValue(current - 1);
-        break;
-      case Garnish.PAGE_UP_KEY:
-        this.setValue(current + 10);
-        break;
-      case Garnish.PAGE_DOWN_KEY:
-        this.setValue(current - 10);
-        break;
-      case Garnish.HOME_KEY:
-        this.setValue(this.slideMin);
-        break;
-      case Garnish.END_KEY:
-        this.setValue(this.slideMax);
-        break;
-    }
-
-    this.onChange();
-  },
-
-  _handleTapStart: function (ev, touch) {
-    ev.preventDefault();
-
-    // Only allow rotation if the user taps on anything within the graduations container
-    this.rotateIntent = $(ev.target).is('.graduations *');
-
-    if (!this.rotateIntent) return;
-
-    this.startPositionX = touch.position.x;
-    this.startLeft = this.$graduationsUl.position().left;
-
-    this.onStart();
-  },
-
-  _handleTapMove: function (ev, touch) {
-    if (!this.rotateIntent) return;
-
-    if (Math.abs(touch.position.x - this.startPositionX) > this.sensitivity) {
-      this.dragging = true;
-      this.$container.addClass('dragging');
-      ev.preventDefault();
-      this._setValueFromTouch(touch);
-      this.onChange();
-    }
-  },
-
-  _setValueFromTouch: function (touch) {
-    let referencePosition = this.dragging
-      ? this.startPositionX
-      : this.$cursor.offset().left + this.$cursor.outerWidth() / 2;
-    let delta;
-
-    if (this.dragging) {
-      delta = referencePosition - touch.position.x;
-    } else {
-      delta = touch.position.x - referencePosition;
-    }
-
-    const position = this.startLeft - delta;
-    const value = this.positionToValue(position);
-    this.setValue(value);
-  },
-
-  setValue: function (value) {
-    var left = this.valueToPosition(value);
-    if (value < this.slideMin) {
-      value = this.slideMin;
-      left = this.valueToPosition(value);
-    } else if (value > this.slideMax) {
-      value = this.slideMax;
-      left = this.valueToPosition(value);
-    }
-
-    this.$graduationsUl.css('left', left);
-
-    if (value >= this.slideMin && value <= this.slideMax) {
-      this.$options.removeClass('selected');
-
-      $.each(this.$options, function (key, option) {
-        if ($(option).data('graduation') > 0) {
-          if ($(option).data('graduation') <= value) {
-            $(option).addClass('selected');
-          }
-        }
-        if ($(option).data('graduation') < 0) {
-          if ($(option).data('graduation') >= value) {
-            $(option).addClass('selected');
-          }
-        }
-
-        if ($(option).data('graduation') == 0) {
-          $(option).addClass('selected');
-        }
-      });
-    }
-
-    this.$container.attr({
-      'aria-valuenow': value,
-      'aria-valuetext': Craft.t(
-        'app',
-        '{num, number} {num, plural, =1{degree} other{degrees}}',
-        {num: parseInt(value, 10)}
-      ),
-    });
-    this.value = value;
-  },
-
-  _handleTapEnd: function (ev, touch) {
-    if (!this.rotateIntent) return;
-
-    if (this.dragging) {
-      ev.preventDefault();
-      this.dragging = false;
-      this.$container.removeClass('dragging');
-    } else {
-      this._setValueFromTouch(touch);
-      this.onChange();
-    }
-
-    this.onEnd();
-    this.startPositionX = null;
-    this.rotateIntent = false;
-  },
-
-  positionToValue: function (position) {
-    var scaleMin = this.graduationsMin * -1;
-    var scaleMax = (this.graduationsMin - this.graduationsMax) * -1;
-
-    return (
-      ((this.$graduations.width() / 2 + position * -1) /
-        this.graduationsCalculatedWidth) *
-        scaleMax -
-      scaleMin
-    );
-  },
-
-  valueToPosition: function (value) {
-    var scaleMin = this.graduationsMin * -1;
-    var scaleMax = (this.graduationsMin - this.graduationsMax) * -1;
-
-    return -(
-      ((value + scaleMin) * this.graduationsCalculatedWidth) / scaleMax -
-      this.$graduations.width() / 2
-    );
-  },
-
-  onStart: function () {
-    if (typeof this.settings.onChange === 'function') {
-      this.settings.onStart(this);
-    }
-  },
-
-  onChange: function () {
-    if (typeof this.settings.onChange === 'function') {
-      this.settings.onChange(this);
-    }
-  },
-
-  onEnd: function () {
-    if (typeof this.settings.onChange === 'function') {
-      this.settings.onEnd(this);
-    }
-  },
-
-  defaultSettings: {
-    onStart: $.noop,
-    onChange: $.noop,
-    onEnd: $.noop,
-  },
-});
diff --git a/packages/craftcms-ui/src/components/slide-rule/slide-rule.stories.ts b/packages/craftcms-ui/src/components/slide-rule/slide-rule.stories.ts
new file mode 100644
index 00000000000..8ac024dd600
--- /dev/null
+++ b/packages/craftcms-ui/src/components/slide-rule/slide-rule.stories.ts
@@ -0,0 +1,33 @@
+import type {Meta, StoryObj} from '@storybook/web-components-vite';
+import type CraftSlideRule from './slide-rule.js';
+import {getStorybookHelpers} from '@wc-toolkit/storybook-helpers';
+import './slide-rule.js';
+
+const {events, args, argTypes, template} =
+  getStorybookHelpers('craft-slide-rule');
+
+const meta: Meta<CraftSlideRule> = {
+  title: 'Controls/Slide Rule',
+  component: 'craft-slide-rule',
+  args,
+  argTypes,
+  render: (args) => template(args),
+  parameters: {
+    actions: {
+      handles: events,
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<CraftSlideRule & typeof args>;
+
+export const Default: Story = {
+  args: {},
+};
+
+export const StartingAngle: Story = {
+  args: {
+    value: 15,
+  },
+};
diff --git a/packages/craftcms-ui/src/components/slide-rule/slide-rule.styles.ts b/packages/craftcms-ui/src/components/slide-rule/slide-rule.styles.ts
new file mode 100644
index 00000000000..88f3ef8d924
--- /dev/null
+++ b/packages/craftcms-ui/src/components/slide-rule/slide-rule.styles.ts
@@ -0,0 +1,132 @@
+import {css} from 'lit';
+
+// Ported from the legacy packages/craftcms-legacy/cp/src/css/_image_editor.scss
+// `.slide-rule` block into the component's shadow root. `--focus-ring` / `--white`
+// inherit from the page; the accent color is the legacy hard-coded value.
+export default css`
+  :host {
+    display: block;
+  }
+
+  .slide-rule {
+    position: relative;
+    padding-block: 10px;
+    padding-inline: 0;
+    outline: none;
+  }
+
+  .slide-rule:focus-visible .cursor::after {
+    box-shadow: var(--focus-ring);
+  }
+
+  .cursor {
+    position: absolute;
+    margin-inline-start: calc(-4 / 16 * 1rem);
+    margin-block-start: 4px;
+    inset-inline-start: 50%;
+    z-index: 1;
+    width: 0;
+    height: 0;
+    border-inline-start: calc(5 / 16 * 1rem) solid transparent;
+    border-inline-end: calc(5 / 16 * 1rem) solid transparent;
+    border-block-start: calc(5 / 16 * 1rem) solid #63a6e1;
+  }
+
+  .cursor::after {
+    content: '';
+    width: calc(20 / 16 * 1rem);
+    height: calc(50 / 16 * 1rem);
+    position: absolute;
+    inset-block-start: -15px;
+    inset-inline-start: 50%;
+    transform: translateX(-50%);
+  }
+
+  .overlay {
+    z-index: 2;
+    position: absolute;
+    inset-block: 0 1px;
+    inset-inline: 0;
+    pointer-events: none;
+    background-image: linear-gradient(
+      to right,
+      var(--gray-900) 0%,
+      transparent 15%,
+      transparent 85%,
+      var(--gray-900) 100%
+    );
+  }
+
+  .graduations {
+    white-space: nowrap;
+    height: 40px;
+    position: relative;
+  }
+
+  .graduations ul {
+    position: relative;
+    float: inline-start;
+    height: 40px;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+
+    /* "left" (not a logical property) because that's what the JS sets. */
+    transition: 200ms left linear; /* stylelint-disable-line */
+  }
+
+  .slide-rule.dragging .graduations ul {
+    transition: none;
+  }
+
+  .graduations ul li {
+    display: inline-block;
+    font-size: 8px;
+    position: relative;
+    width: 10px;
+  }
+
+  .graduations ul li:hover {
+    cursor: pointer;
+  }
+
+  .graduations ul li:hover::before {
+    border-inline-start-color: #63a6e1;
+  }
+
+  .graduations ul li:not(.main-graduation) {
+    inset-inline-start: 1px;
+  }
+
+  .graduations ul li.main-graduation::before {
+    border-inline-start-width: 4px;
+    height: 10px;
+  }
+
+  .graduations ul li .label {
+    width: 20px;
+    position: absolute;
+    inset-block-start: 10px;
+    inset-inline-start: -9px;
+    display: none;
+    text-align: center;
+  }
+
+  .graduations ul li.main-graduation .label {
+    display: block;
+    cursor: default;
+  }
+
+  .graduations ul li.selected::before {
+    border-inline-start-color: #63a6e1;
+  }
+
+  .graduations ul li::before {
+    content: '';
+    position: absolute;
+    border-inline-start: 2px solid var(--white);
+    height: 6px;
+    inset-block-start: 0;
+    inset-inline-start: 0;
+  }
+`;
diff --git a/packages/craftcms-ui/src/components/slide-rule/slide-rule.test.ts b/packages/craftcms-ui/src/components/slide-rule/slide-rule.test.ts
new file mode 100644
index 00000000000..7da28cd1fca
--- /dev/null
+++ b/packages/craftcms-ui/src/components/slide-rule/slide-rule.test.ts
@@ -0,0 +1,107 @@
+import {beforeEach, describe, expect, it, vi} from 'vitest';
+import type CraftSlideRule from './slide-rule.js';
+import './slide-rule.js';
+
+async function createSlideRule(
+  props: Partial<Pick<CraftSlideRule, 'min' | 'max' | 'value'>> = {}
+): Promise<CraftSlideRule> {
+  const element = document.createElement('craft-slide-rule');
+  Object.assign(element, props);
+  document.body.append(element);
+  await element.updateComplete;
+
+  return element;
+}
+
+function root(element: CraftSlideRule): HTMLElement {
+  return element.shadowRoot!.querySelector('.slide-rule') as HTMLElement;
+}
+
+function graduations(element: CraftSlideRule): HTMLElement[] {
+  return [
+    ...element.shadowRoot!.querySelectorAll('.graduation'),
+  ] as HTMLElement[];
+}
+
+function pressKey(element: CraftSlideRule, key: string) {
+  root(element).dispatchEvent(
+    new KeyboardEvent('keydown', {key, bubbles: true})
+  );
+}
+
+beforeEach(() => {
+  document.body.innerHTML = '';
+});
+
+describe('craft-slide-rule', () => {
+  it('draws a graduation for every degree in the graduation range', async () => {
+    const element = await createSlideRule();
+    // -70..70 inclusive => 141
+    expect(graduations(element)).toHaveLength(141);
+  });
+
+  it('labels every fifth graduation as a main graduation', async () => {
+    const element = await createSlideRule();
+    const main = graduations(element).filter((g) =>
+      g.classList.contains('main-graduation')
+    );
+    // -70..70 divisible by 5 => 29
+    expect(main).toHaveLength(29);
+  });
+
+  it('selects graduations between zero and the current value', async () => {
+    const element = await createSlideRule({value: 10});
+    const selected = graduations(element)
+      .filter((g) => g.classList.contains('selected'))
+      .map((g) => Number(g.dataset.graduation));
+
+    expect(selected).toEqual([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]);
+  });
+
+  it('moves the value with the keyboard and emits change', async () => {
+    const element = await createSlideRule({value: 0});
+    const handler = vi.fn();
+    element.addEventListener('change', handler as EventListener);
+
+    pressKey(element, 'ArrowRight');
+    await element.updateComplete;
+    expect(element.value).toBe(1);
+
+    pressKey(element, 'PageUp');
+    await element.updateComplete;
+    expect(element.value).toBe(11);
+
+    pressKey(element, 'Home');
+    await element.updateComplete;
+    expect(element.value).toBe(-45);
+
+    pressKey(element, 'End');
+    await element.updateComplete;
+    expect(element.value).toBe(45);
+
+    expect(handler).toHaveBeenCalledTimes(4);
+    expect((handler.mock.calls.at(-1)![0] as CustomEvent).detail).toEqual({
+      value: 45,
+    });
+  });
+
+  it('clamps to the slide range even when pushed past it', async () => {
+    const element = await createSlideRule({value: 44});
+
+    pressKey(element, 'PageUp'); // 44 + 10 -> clamped to 45
+    await element.updateComplete;
+
+    expect(element.value).toBe(45);
+  });
+
+  it('exposes slider ARIA state', async () => {
+    const element = await createSlideRule({value: 12});
+    const r = root(element);
+
+    expect(r.getAttribute('role')).toBe('slider');
+    expect(r.getAttribute('aria-valuemin')).toBe('-45');
+    expect(r.getAttribute('aria-valuemax')).toBe('45');
+    expect(r.getAttribute('aria-valuenow')).toBe('12');
+    expect(r.getAttribute('aria-valuetext')).toContain('12');
+  });
+});
diff --git a/packages/craftcms-ui/src/components/slide-rule/slide-rule.ts b/packages/craftcms-ui/src/components/slide-rule/slide-rule.ts
new file mode 100644
index 00000000000..8e5718423a1
--- /dev/null
+++ b/packages/craftcms-ui/src/components/slide-rule/slide-rule.ts
@@ -0,0 +1,305 @@
+import {html, LitElement, type PropertyValues} from 'lit';
+import {property, query} from 'lit/decorators.js';
+import {classMap} from 'lit/directives/class-map.js';
+import {t} from '@src/utilities/translate';
+import styles from './slide-rule.styles.js';
+
+const SENSITIVITY = 3;
+
+/**
+ * @summary Ruler-style slider for fine rotation adjustment — the port of the
+ * legacy `Craft.SlideRuleInput`, used by the image editor's straighten control.
+ * Drag the ruler (or use the arrow keys) to pick a value; the visible slide range
+ * (`min`/`max`) is narrower than the drawn graduation range
+ * (`graduation-min`/`graduation-max`).
+ *
+ * @since 1.0
+ *
+ * @fires {CustomEvent<{value:number}>} start - A drag/interaction began.
+ * @fires {CustomEvent<{value:number}>} change - The value changed.
+ * @fires {CustomEvent<{value:number}>} end - A drag/interaction ended.
+ */
+export default class CraftSlideRule extends LitElement {
+  static override styles = [styles];
+
+  /** Minimum selectable value (the slide range floor). */
+  @property({type: Number}) min = -45;
+
+  /** Maximum selectable value (the slide range ceiling). */
+  @property({type: Number}) max = 45;
+
+  /** Current value. */
+  @property({type: Number}) value = 0;
+
+  /** First drawn graduation (wider than the slide range). */
+  @property({type: Number, attribute: 'graduation-min'}) graduationMin = -70;
+
+  /** Last drawn graduation (wider than the slide range). */
+  @property({type: Number, attribute: 'graduation-max'}) graduationMax = 70;
+
+  /** Accessible name for the slider. */
+  @property() label = t('Rotate');
+
+  @query('.slide-rule') private _root!: HTMLElement;
+  @query('.graduations') private _graduations!: HTMLElement;
+  @query('.graduations ul') private _list!: HTMLElement;
+  @query('.cursor') private _cursor!: HTMLElement;
+
+  #dragging = false;
+  #rotateIntent = false;
+  #startPositionX = 0;
+  #startLeft = 0;
+  #calculatedWidth = 0;
+  #resizeObserver: ResizeObserver | null = null;
+
+  #graduations(): number[] {
+    const list: number[] = [];
+    for (let i = this.graduationMin; i <= this.graduationMax; i++) {
+      list.push(i);
+    }
+    return list;
+  }
+
+  override connectedCallback(): void {
+    super.connectedCallback();
+    this.#resizeObserver = new ResizeObserver(() => this.#reposition());
+    this.#resizeObserver.observe(this);
+  }
+
+  override disconnectedCallback(): void {
+    super.disconnectedCallback();
+    this.#resizeObserver?.disconnect();
+    this.#resizeObserver = null;
+  }
+
+  override firstUpdated(): void {
+    // (n - 1) graduations because each border sits on the left of its 10px box.
+    this.#calculatedWidth = (this.#graduations().length - 1) * 10;
+    this.#reposition();
+  }
+
+  override updated(changed: PropertyValues<this>): void {
+    if (
+      changed.has('value') ||
+      changed.has('min') ||
+      changed.has('max') ||
+      changed.has('graduationMin') ||
+      changed.has('graduationMax')
+    ) {
+      this.#reposition();
+    }
+  }
+
+  /** Slides the ruler so the current value lines up under the cursor. */
+  #reposition(): void {
+    if (!this._list) {
+      return;
+    }
+    this._list.style.left = `${this.#valueToPosition(this.value)}px`;
+  }
+
+  #valueText(value: number): string {
+    return t('{num, number} {num, plural, =1{degree} other{degrees}}', {
+      num: Math.round(value),
+    });
+  }
+
+  // --- Value math (ported verbatim from Craft.SlideRuleInput) --------------
+
+  #positionToValue(position: number): number {
+    const scaleMin = this.graduationMin * -1;
+    const scaleMax = (this.graduationMin - this.graduationMax) * -1;
+
+    return (
+      ((this._graduations.offsetWidth / 2 + position * -1) /
+        this.#calculatedWidth) *
+        scaleMax -
+      scaleMin
+    );
+  }
+
+  #valueToPosition(value: number): number {
+    const scaleMin = this.graduationMin * -1;
+    const scaleMax = (this.graduationMin - this.graduationMax) * -1;
+
+    return -(
+      ((value + scaleMin) * this.#calculatedWidth) / scaleMax -
+      this._graduations.offsetWidth / 2
+    );
+  }
+
+  #setValue(rawValue: number, emitChange = true): void {
+    const value = Math.min(Math.max(rawValue, this.min), this.max);
+
+    this.value = value;
+
+    if (emitChange) {
+      this.#emit('change');
+    }
+  }
+
+  #emit(type: 'start' | 'change' | 'end'): void {
+    this.dispatchEvent(
+      new CustomEvent<{value: number}>(type, {
+        detail: {value: this.value},
+        bubbles: true,
+        composed: true,
+      })
+    );
+  }
+
+  // --- Pointer drag (Garnish tap -> pointer events) ------------------------
+
+  #handlePointerDown(event: PointerEvent) {
+    // Only rotate when the press lands inside the graduations, matching the
+    // legacy `.graduations *` intent check.
+    this.#rotateIntent =
+      this._graduations.contains(event.target as Node) &&
+      event.target !== this._graduations;
+
+    if (!this.#rotateIntent) {
+      return;
+    }
+
+    event.preventDefault();
+    this.#startPositionX = event.clientX;
+    this.#startLeft = this._list.offsetLeft;
+    this._root.setPointerCapture(event.pointerId);
+    this.#emit('start');
+  }
+
+  #handlePointerMove(event: PointerEvent) {
+    if (!this.#rotateIntent) {
+      return;
+    }
+
+    if (Math.abs(event.clientX - this.#startPositionX) > SENSITIVITY) {
+      this.#dragging = true;
+      this._root.classList.add('dragging');
+      event.preventDefault();
+      this.#setValueFromPointer(event);
+    }
+  }
+
+  #handlePointerUp(event: PointerEvent) {
+    if (!this.#rotateIntent) {
+      return;
+    }
+
+    if (this.#dragging) {
+      event.preventDefault();
+      this.#dragging = false;
+      this._root.classList.remove('dragging');
+    } else {
+      // A tap without a drag sets the value at the tapped position.
+      this.#setValueFromPointer(event);
+    }
+
+    this.#emit('end');
+    this._root.releasePointerCapture(event.pointerId);
+    this.#startPositionX = 0;
+    this.#rotateIntent = false;
+  }
+
+  #setValueFromPointer(event: PointerEvent) {
+    const referencePosition = this.#dragging
+      ? this.#startPositionX
+      : this._cursor.getBoundingClientRect().left +
+        this._cursor.offsetWidth / 2;
+
+    const delta = this.#dragging
+      ? referencePosition - event.clientX
+      : event.clientX - referencePosition;
+
+    const position = this.#startLeft - delta;
+    this.#setValue(this.#positionToValue(position));
+  }
+
+  #handleKeyDown(event: KeyboardEvent) {
+    const current = this.value;
+
+    switch (event.key) {
+      case 'ArrowUp':
+      case 'ArrowRight':
+        this.#setValue(current + 1);
+        break;
+      case 'ArrowDown':
+      case 'ArrowLeft':
+        this.#setValue(current - 1);
+        break;
+      case 'PageUp':
+        this.#setValue(current + 10);
+        break;
+      case 'PageDown':
+        this.#setValue(current - 10);
+        break;
+      case 'Home':
+        this.#setValue(this.min);
+        break;
+      case 'End':
+        this.#setValue(this.max);
+        break;
+      default:
+        return;
+    }
+
+    event.preventDefault();
+  }
+
+  #isSelected(graduation: number): boolean {
+    return (
+      graduation >= Math.min(0, this.value) &&
+      graduation <= Math.max(0, this.value)
+    );
+  }
+
+  override render() {
+    return html`
+      <div
+        class="slide-rule"
+        role="slider"
+        tabindex="0"
+        aria-label=${this.label}
+        aria-valuemin=${this.min}
+        aria-valuemax=${this.max}
+        aria-valuenow=${this.value}
+        aria-valuetext=${this.#valueText(this.value)}
+        @keydown=${this.#handleKeyDown}
+        @pointerdown=${this.#handlePointerDown}
+        @pointermove=${this.#handlePointerMove}
+        @pointerup=${this.#handlePointerUp}
+      >
+        <div class="overlay"></div>
+        <div class="cursor"></div>
+        <div class="graduations">
+          <ul aria-hidden="true">
+            ${this.#graduations().map(
+              (graduation) => html`
+                <li
+                  class=${classMap({
+                    graduation: true,
+                    'main-graduation': graduation % 5 === 0,
+                    selected: this.#isSelected(graduation),
+                  })}
+                  data-graduation=${graduation}
+                >
+                  <div class="label">${graduation}</div>
+                </li>
+              `
+            )}
+          </ul>
+        </div>
+      </div>
+    `;
+  }
+}
+
+if (!customElements.get('craft-slide-rule')) {
+  customElements.define('craft-slide-rule', CraftSlideRule);
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'craft-slide-rule': CraftSlideRule;
+  }
+}
diff --git a/packages/craftcms-ui/src/index.ts b/packages/craftcms-ui/src/index.ts
index 0b18afed983..fc0c4f7084d 100644
--- a/packages/craftcms-ui/src/index.ts
+++ b/packages/craftcms-ui/src/index.ts
@@ -59,6 +59,7 @@ export {default as CraftSelectedFileList} from './components/input-file/selected
 export {default as CraftSelect} from './components/select/select.js';
 export {default as CraftShortcut} from './components/shortcut/shortcut.js';
 export {default as CraftSlidePicker} from './components/slide-picker/slide-picker.js';
+export {default as CraftSlideRule} from './components/slide-rule/slide-rule.js';
 export {default as CraftSpinner} from './components/spinner/spinner.js';
 export {default as CraftStatus} from './components/status/status.js';
 export {default as CraftSwitchButton} from './components/switch-button/switch-button.js';
diff --git a/resources/templates/_special/image_editor.twig b/resources/templates/_special/image_editor.twig
index aba6a350763..3b472120d33 100644
--- a/resources/templates/_special/image_editor.twig
+++ b/resources/templates/_special/image_editor.twig
@@ -208,7 +208,7 @@
     </div>
     <div class="image-tools hidden">
         <div data-view="transform" class="straightening">
-            <div id="slide-rule" class="slide-rule" aria-label="{{ 'Rotate'|t('app') }}"></div>
+            <craft-slide-rule id="slide-rule" label="{{ 'Rotate'|t('app') }}"></craft-slide-rule>
         </div>
     </div>
 </div>
diff --git a/yii2-adapter/legacy/web/assets/cpcompat/cp-compat.js b/yii2-adapter/legacy/web/assets/cpcompat/cp-compat.js
index ff504a8b7c5..f0f0c3de24d 100644
--- a/yii2-adapter/legacy/web/assets/cpcompat/cp-compat.js
+++ b/yii2-adapter/legacy/web/assets/cpcompat/cp-compat.js
@@ -53,6 +53,10 @@
       'IconPicker',
       'Craft.IconPicker has been removed. Emit <craft-icon-picker> directly instead (or use Craft.ui.createIconPicker).'
     );
+    defineRemovedClass(
+      'SlideRuleInput',
+      'Craft.SlideRuleInput has been removed. Emit <craft-slide-rule> directly instead.'
+    );
   }
 
   /**

From a3a21cf6736461290c20ab6cf5fb74ef3d6f8a17 Mon Sep 17 00:00:00 2001
From: Brian Hanson <brian@brianhanson.net>
Date: Mon, 27 Jul 2026 15:43:58 -0500
Subject: [PATCH 16/20] Port Craft.FieldToggle out of the legacy jQuery bundle
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Moves the conditional field-reveal widget from the legacy cp bundle into a modern
TS module (resources/js/modules/field-toggle), following the logic-class +
global-shim pattern (like the input generators). A toggle control
(checkbox/radio/switch, select, boolean menu, button, fieldset) shows/hides target
fields (data-target / data-reverse-target / data-target-prefix) based on its
value.

The engine is DOM-based and the velocity height animation is reimplemented on the
Web Animations API. jQuery survives only at the legacy `.data('fieldtoggle')` /
`.data('selectize')` seam that still-jQuery readers depend on (LinkField, and
craft-switch's __syncToggleTargets guard, which defers the switch reveal to a
bound FieldToggle); the instance is mirrored in a support.ts WeakMap that the
radio-group refresh uses jQuery-free — the sortable-checkbox-select precedent.

Instantiation is unchanged: the still-legacy $.fn.fieldtoggle plugin and the
Craft.initUiElements `.fieldtoggle` sweep (both in cp/src/js/Craft.js), plus
new Craft.FieldToggle(...) in UI.js / LinkField / ElementDeletionManager, boot via
the assigned window.Craft.FieldToggle global. Also drops a bogus
`import postcssValueParser from 'tailwindcss/src/value-parser'` that was in the
legacy file.

Per the taken-stock decision this stays the single full multi-type implementation;
craft-switch (switch case on Inertia surfaces) and craft-disclosure (button case)
remain for their surfaces.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 packages/craftcms-legacy/cp/src/Craft.js      |   1 -
 .../craftcms-legacy/cp/src/js/FieldToggle.js  | 318 ---------------
 resources/js/cp.ts                            |   1 +
 resources/js/legacy.ts                        |   1 +
 resources/js/modules/field-toggle/README.md   |  51 +++
 .../js/modules/field-toggle/field-toggle.ts   | 384 ++++++++++++++++++
 resources/js/modules/field-toggle/index.ts    |  12 +
 resources/js/modules/field-toggle/support.ts  |   9 +
 8 files changed, 458 insertions(+), 319 deletions(-)
 delete mode 100644 packages/craftcms-legacy/cp/src/js/FieldToggle.js
 create mode 100644 resources/js/modules/field-toggle/README.md
 create mode 100644 resources/js/modules/field-toggle/field-toggle.ts
 create mode 100644 resources/js/modules/field-toggle/index.ts
 create mode 100644 resources/js/modules/field-toggle/support.ts

diff --git a/packages/craftcms-legacy/cp/src/Craft.js b/packages/craftcms-legacy/cp/src/Craft.js
index 003da8ed6c4..29e6ea9579c 100644
--- a/packages/craftcms-legacy/cp/src/Craft.js
+++ b/packages/craftcms-legacy/cp/src/Craft.js
@@ -57,7 +57,6 @@ import './js/EntrySelectInput.js';
 import './js/EntryMover.js';
 import './js/FormObserver.js';
 import './js/VolumeFolderSelectorModal.js';
-import './js/FieldToggle.js';
 import './js/Grid.js';
 import './js/ImageUpload.js';
 import './js/IntervalManager.js';
diff --git a/packages/craftcms-legacy/cp/src/js/FieldToggle.js b/packages/craftcms-legacy/cp/src/js/FieldToggle.js
deleted file mode 100644
index b5cb87510e0..00000000000
--- a/packages/craftcms-legacy/cp/src/js/FieldToggle.js
+++ /dev/null
@@ -1,318 +0,0 @@
-/** global: Craft */
-/** global: Garnish */
-import postcssValueParser from 'tailwindcss/src/value-parser';
-
-/**
- * FieldToggle
- */
-Craft.FieldToggle = Garnish.Base.extend({
-  $toggle: null,
-  targetPrefix: null,
-  targetSelector: null,
-  reverseTargetSelector: null,
-
-  _$target: null,
-  _$reverseTarget: null,
-  type: null,
-
-  init: function (toggle) {
-    this.$toggle = $(toggle);
-
-    // Is this already a field toggle?
-    if (this.$toggle.data('fieldtoggle')) {
-      console.warn('Double-instantiating a field toggle on an element');
-      this.$toggle.data('fieldtoggle').destroy();
-    }
-
-    this.$toggle.data('fieldtoggle', this);
-
-    this.type = this.getType();
-
-    if (
-      this.type === 'select' ||
-      this.type === 'fieldset' ||
-      Garnish.hasAttr(this.$toggle, 'data-target-prefix')
-    ) {
-      this.targetPrefix = this.$toggle.attr('data-target-prefix') || '';
-    } else {
-      this.targetSelector = this.normalizeTargetSelector(
-        this.$toggle.data('target')
-      );
-      this.reverseTargetSelector = this.normalizeTargetSelector(
-        this.$toggle.data('reverse-target')
-      );
-    }
-
-    this.findTargets();
-
-    switch (this.type) {
-      case 'button':
-        if (this._isButtonToggle()) {
-          if (!this._$target.attr('id')) {
-            this._$target.attr(
-              'id',
-              `toggle-target-${Math.floor(Math.random() * 1000000)}`
-            );
-          }
-          this.$toggle.attr('aria-controls', this._$target.attr('id'));
-          this._updateButtonExpanded();
-        }
-        this.addListener(this.$toggle, 'activate', 'onToggleChange');
-        break;
-      case 'fieldset':
-        this.addListener(
-          this.$toggle.find('input'),
-          'change',
-          'onToggleChange'
-        );
-        break;
-      default:
-        this.addListener(this.$toggle, 'change', () => {
-          this.onToggleChange();
-
-          // if this is a radio button, trigger onToggleChange() for the other radio buttons with the same name
-          if (this.$toggle.attr('type') === 'radio') {
-            $(`input[type="radio"][name="${this.$toggle.attr('name')}"]`)
-              .not(this.$toggle)
-              .each((i, radio) => {
-                $(radio).data('fieldtoggle')?.onToggleChange();
-              });
-          }
-        });
-        this.onToggleChange();
-    }
-  },
-
-  normalizeTargetSelector: function (selector) {
-    if (selector && !selector.match(/^[#\.]/)) {
-      selector = '#' + selector;
-    }
-
-    return selector;
-  },
-
-  getType: function () {
-    let nodeName = this._toggleNodeName();
-    if (
-      (nodeName === 'INPUT' &&
-        ['checkbox', 'radio'].includes(this.$toggle.attr('type'))) ||
-      this.$toggle.attr('role') === 'checkbox' ||
-      this.$toggle.attr('role') === 'switch'
-    ) {
-      return 'checkbox';
-    }
-
-    switch (nodeName) {
-      case 'SELECT':
-        if (Garnish.hasAttr(this.$toggle, 'data-boolean-menu')) {
-          return 'booleanMenu';
-        }
-        return 'select';
-      case 'BUTTON':
-      case 'A':
-        return 'button';
-      default:
-        return 'fieldset';
-    }
-  },
-
-  findTargets: function () {
-    if (this.targetPrefix !== null) {
-      this._$target = $(
-        this.normalizeTargetSelector(
-          this.targetPrefix + (this.getToggleVal() || '')
-        )
-      );
-    } else {
-      if (this.targetSelector) {
-        this._$target = $(this.targetSelector);
-      }
-
-      if (this.reverseTargetSelector) {
-        this._$reverseTarget = $(this.reverseTargetSelector);
-      }
-    }
-  },
-
-  getToggleVal: function () {
-    if (this.type === 'checkbox' && this.targetPrefix === null) {
-      if (typeof this.$toggle.prop('checked') !== 'undefined') {
-        return this.$toggle.prop('checked');
-      }
-      return this.$toggle.attr('aria-checked') === 'true';
-    }
-
-    if (this.type === 'booleanMenu') {
-      const boolean = this.$toggle.data('boolean');
-      if (typeof boolean !== 'undefined') {
-        return boolean;
-      }
-      const val = this.$toggle.val();
-      return val && val !== '0';
-    }
-
-    if (this.type === 'fieldset') {
-      return this.normalizeToggleVal(
-        this.$toggle.find('input:checked:first').val()
-      );
-    }
-
-    return this.normalizeToggleVal(this.$toggle.val());
-  },
-
-  normalizeToggleVal: function (val) {
-    if (!val) {
-      return null;
-    }
-    return val.replace(/[^\w]+/g, '-');
-  },
-
-  onToggleChange: async function (force = false) {
-    // is this a selectize input and does it look like it was just opened?
-    const selectize = this.$toggle.data('selectize');
-    if (selectize && this.$toggle.val() === '') {
-      await Craft.sleep(1);
-      if (selectize.isOpen) {
-        return;
-      }
-    }
-
-    if (this.type === 'select' || this.type === 'fieldset') {
-      this.hideTarget(this._$target);
-      this.findTargets();
-      this.showTarget(this._$target);
-    } else {
-      this.findTargets();
-
-      if (this.type === 'button') {
-        this.onToggleChange._show = this._buttonIsCollapsed();
-      } else if (this.type === 'checkbox' && this.targetPrefix !== null) {
-        this.onToggleChange._show = this.$toggle.prop('checked');
-      } else {
-        this.onToggleChange._show = !!this.getToggleVal();
-      }
-
-      if (this.onToggleChange._show) {
-        this.showTarget(this._$target);
-        this.hideTarget(this._$reverseTarget);
-      } else {
-        this.hideTarget(this._$target);
-        this.showTarget(this._$reverseTarget);
-      }
-
-      delete this.onToggleChange._show;
-    }
-
-    this.trigger('toggleChange');
-  },
-
-  showTarget: function ($target) {
-    if ($target && $target.length) {
-      this.showTarget._currentHeight = $target.height();
-
-      $target.removeClass('hidden');
-
-      if (this.type !== 'select' && this.type !== 'fieldset') {
-        if (this.type === 'button') {
-          this.$toggle.removeClass('collapsed');
-          this.$toggle.addClass('expanded');
-          if (this._isButtonToggle()) {
-            this._updateButtonExpanded();
-          }
-        }
-
-        for (let i = 0; i < $target.length; i++) {
-          (($t) => {
-            if ($t.prop('nodeName') !== 'SPAN') {
-              $t.height('auto');
-              this.showTarget._targetHeight = $t.height();
-              $t.css({
-                height: this.showTarget._currentHeight,
-                overflow: 'hidden',
-              });
-
-              $t.velocity('stop');
-
-              $t.velocity(
-                {height: this.showTarget._targetHeight},
-                'fast',
-                function () {
-                  $t.css({
-                    height: '',
-                    overflow: '',
-                  });
-                }
-              );
-            }
-          })($target.eq(i));
-        }
-
-        delete this.showTarget._targetHeight;
-      }
-
-      delete this.showTarget._currentHeight;
-
-      // Trigger a resize event in case there are any grids in the target that need to initialize
-      Garnish.$win.trigger('resize');
-    }
-  },
-
-  hideTarget: function ($target) {
-    if ($target && $target.length) {
-      if (this.type === 'select' || this.type === 'fieldset') {
-        $target.addClass('hidden');
-      } else {
-        if (this.type === 'button') {
-          this.$toggle.removeClass('expanded');
-          this.$toggle.addClass('collapsed');
-          if (this._isButtonToggle()) {
-            this._updateButtonExpanded();
-          }
-        }
-
-        for (let i = 0; i < $target.length; i++) {
-          (($t) => {
-            if ($t.hasClass('hidden')) {
-              return;
-            }
-            if ($t.prop('nodeName') === 'SPAN') {
-              $t.addClass('hidden');
-            } else {
-              $t.css('overflow', 'hidden');
-              $t.velocity('stop');
-              $t.velocity({height: 0}, 'fast', function () {
-                $t.addClass('hidden');
-              });
-            }
-          })($target.eq(i));
-        }
-      }
-    }
-  },
-
-  _toggleNodeName: function () {
-    return this.$toggle.prop('nodeName');
-  },
-
-  _isButtonToggle: function () {
-    return this._toggleNodeName() === 'BUTTON';
-  },
-
-  _buttonIsCollapsed: function () {
-    return (
-      this.$toggle.hasClass('collapsed') || !this.$toggle.hasClass('expanded')
-    );
-  },
-
-  _updateButtonExpanded() {
-    this.$toggle.attr(
-      'aria-expanded',
-      this._buttonIsCollapsed() ? 'false' : 'true'
-    );
-  },
-
-  destroy: function () {
-    this.$toggle.removeData('fieldtoggle');
-    this.base();
-  },
-});
diff --git a/resources/js/cp.ts b/resources/js/cp.ts
index 29993fd534d..4fcce830b55 100644
--- a/resources/js/cp.ts
+++ b/resources/js/cp.ts
@@ -17,6 +17,7 @@ import './modules/generated-fields';
 import './modules/component-select';
 import './modules/input-generators';
 import './modules/icon-picker';
+import './modules/field-toggle';
 import './modules/grouped-entry-type-manager';
 import './modules/queue';
 import './modules/slideout';
diff --git a/resources/js/legacy.ts b/resources/js/legacy.ts
index 038e66cc006..8a36f97961f 100644
--- a/resources/js/legacy.ts
+++ b/resources/js/legacy.ts
@@ -20,6 +20,7 @@ import './modules/slideout/index';
 import './modules/auth-method-setup/index';
 import './modules/input-generators/index';
 import './modules/icon-picker/index';
+import './modules/field-toggle/index';
 
 const {default: Cp} = await import('./bootstrap/cp.js');
 
diff --git a/resources/js/modules/field-toggle/README.md b/resources/js/modules/field-toggle/README.md
new file mode 100644
index 00000000000..86a50b79b4b
--- /dev/null
+++ b/resources/js/modules/field-toggle/README.md
@@ -0,0 +1,51 @@
+# field-toggle
+
+Ports `Craft.FieldToggle` out of the legacy jQuery bundle
+(`packages/craftcms-legacy/cp/src/js/FieldToggle.js`).
+
+A **toggle** control shows/hides **target** fields based on its value:
+
+- Toggle types: checkbox/radio/`role="switch"`, `<select>`, boolean menu
+  (`data-boolean-menu`), `<button>`/`<a>` (a disclosure), and fieldset.
+- Targets: `data-target`, `data-reverse-target` (shown when the toggle is off),
+  or `data-target-prefix` + the toggle's value (select/boolean/prefixed cases).
+- Reveal/collapse is height-animated.
+
+## Shape
+
+Logic-class + global-shim port (no custom element — it's booted imperatively):
+
+| File | Role |
+| --- | --- |
+| `field-toggle.ts` | The engine on `@craftcms/garnish` `Base`. Setup is in `init()`, guarded by `new.target`. |
+| `support.ts` | A `WeakMap<Element, FieldToggle>` — the instance registry (the jQuery-free mirror of `.data('fieldtoggle')`). |
+| `index.ts` | Assigns `window.Craft.FieldToggle`. |
+
+Instantiation is unchanged: the still-legacy `$.fn.fieldtoggle` plugin and the
+`Craft.initUiElements` `.fieldtoggle` sweep (both in `cp/src/js/Craft.js`), plus
+`new Craft.FieldToggle(...)` in `UI.js` / `LinkField` / `ElementDeletionManager`,
+all boot via the assigned global.
+
+## jQuery + global seams
+
+The engine is DOM-based; the legacy velocity height animation is reimplemented on
+the **Web Animations API**. jQuery survives only at the **`.data('fieldtoggle')`**
+back-reference (and the `.data('selectize')` read) — a legacy coordination
+contract that still-jQuery readers depend on: `LinkField`, and `craft-switch`'s
+`__syncToggleTargets` guard (`jq(btn).data('fieldtoggle')`, which defers the
+switch reveal to a bound FieldToggle). The instance is also stored in the
+`support.ts` WeakMap, which the radio-group refresh uses jQuery-free. `Craft`
+(config) and `Garnish` (the `activate` custom event) remain page globals.
+
+## Related implementations (not consolidated here)
+
+The reveal feature also lives in `craft-switch` (`__syncToggleTargets`, the switch
+case on Inertia surfaces where the `.fieldtoggle` sweep doesn't run) and
+`craft-disclosure` (the button/disclosure case, via `aria-controls` + `data-state`).
+This port keeps `Craft.FieldToggle` as the full multi-type implementation; those
+two remain for their surfaces (craft-switch already defers to a bound FieldToggle).
+
+## Verification
+
+`npm run typecheck` + eslint + prettier. Behavior (each toggle type reveals/hides
+and animates its targets) is verified live in the CP.
diff --git a/resources/js/modules/field-toggle/field-toggle.ts b/resources/js/modules/field-toggle/field-toggle.ts
new file mode 100644
index 00000000000..11f0b156cc8
--- /dev/null
+++ b/resources/js/modules/field-toggle/field-toggle.ts
@@ -0,0 +1,384 @@
+import {Base} from '@craftcms/garnish';
+import {fieldToggleData} from './support';
+
+// jQuery survives ONLY at the legacy `.data('fieldtoggle')`/`.data('selectize')`
+// seam that still-legacy readers (LinkField, craft-switch's guard) depend on —
+// everything else is plain DOM. Mirrors the sortable-checkbox-select precedent.
+// `Garnish` (the `activate` custom event) stays a page global via addListener.
+
+/** The jQuery global, if present (the CP always loads it). */
+function jq(): any {
+  return (window as any).jQuery ?? null;
+}
+
+/** A toggle argument: a selector, an element, or an array-like (incl. jQuery). */
+type ToggleInput = string | Element | ArrayLike<Element> | null | undefined;
+
+function resolveElement(input: ToggleInput): HTMLElement | null {
+  if (input == null) {
+    return null;
+  }
+  if (typeof input === 'string') {
+    return document.querySelector<HTMLElement>(input);
+  }
+  if (input instanceof Element) {
+    return input as HTMLElement;
+  }
+  if (typeof (input as ArrayLike<Element>).length === 'number') {
+    return ((input as ArrayLike<Element>)[0] as HTMLElement) ?? null;
+  }
+  return null;
+}
+
+function queryAll(selector: string | null | undefined): HTMLElement[] {
+  return selector
+    ? Array.from(document.querySelectorAll<HTMLElement>(selector))
+    : [];
+}
+
+const ANIMATION_MS = 200;
+
+/**
+ * FieldToggle — a port of `Craft.FieldToggle` onto `@craftcms/garnish` `Base`.
+ * A toggle control (checkbox/radio/switch, select, boolean menu, button, or
+ * fieldset) shows/hides target fields (`data-target` / `data-reverse-target` /
+ * `data-target-prefix`) based on its value, with a height reveal animation.
+ *
+ * jQuery-free apart from the documented `.data()` seam; the velocity height
+ * animation is reimplemented with the Web Animations API.
+ */
+export class FieldToggle extends Base {
+  toggle: HTMLElement | null = null;
+  type: string | null = null;
+  targetPrefix: string | null = null;
+  targetSelector: string | null = null;
+  reverseTargetSelector: string | null = null;
+
+  #target: HTMLElement[] = [];
+  #reverseTarget: HTMLElement[] = [];
+
+  constructor(toggle?: ToggleInput) {
+    super();
+    if (new.target === FieldToggle) {
+      this.init(toggle);
+    }
+  }
+
+  init(toggle: ToggleInput): void {
+    this.toggle = resolveElement(toggle);
+    if (!this.toggle) {
+      return;
+    }
+
+    // Is this already a field toggle?
+    const existing = fieldToggleData.get(this.toggle);
+    if (existing) {
+      console.warn('Double-instantiating a field toggle on an element');
+      existing.destroy();
+    }
+
+    fieldToggleData.set(this.toggle, this);
+    // Legacy back-reference (still read by LinkField / craft-switch via jQuery).
+    jq()?.(this.toggle).data('fieldtoggle', this);
+
+    this.type = this.getType();
+
+    if (
+      this.type === 'select' ||
+      this.type === 'fieldset' ||
+      this.toggle.hasAttribute('data-target-prefix')
+    ) {
+      this.targetPrefix = this.toggle.getAttribute('data-target-prefix') || '';
+    } else {
+      this.targetSelector = this.normalizeTargetSelector(
+        this.toggle.getAttribute('data-target')
+      );
+      this.reverseTargetSelector = this.normalizeTargetSelector(
+        this.toggle.getAttribute('data-reverse-target')
+      );
+    }
+
+    this.findTargets();
+
+    switch (this.type) {
+      case 'button': {
+        if (this.#isButtonToggle()) {
+          const target = this.#target[0];
+          if (target) {
+            if (!target.id) {
+              target.id = `toggle-target-${Math.floor(Math.random() * 1000000)}`;
+            }
+            this.toggle.setAttribute('aria-controls', target.id);
+            this.#updateButtonExpanded();
+          }
+        }
+        this.addListener(this.toggle, 'activate', () => this.onToggleChange());
+        break;
+      }
+      case 'fieldset':
+        this.addListener(this.toggle.querySelectorAll('input'), 'change', () =>
+          this.onToggleChange()
+        );
+        break;
+      default:
+        this.addListener(this.toggle, 'change', () => {
+          this.onToggleChange();
+
+          // For radio buttons, refresh the other toggles sharing the name.
+          if (this.toggle!.getAttribute('type') === 'radio') {
+            const name = this.toggle!.getAttribute('name');
+            document
+              .querySelectorAll<HTMLElement>(
+                `input[type="radio"][name="${name}"]`
+              )
+              .forEach((radio) => {
+                if (radio !== this.toggle) {
+                  fieldToggleData.get(radio)?.onToggleChange();
+                }
+              });
+          }
+        });
+        this.onToggleChange();
+    }
+  }
+
+  normalizeTargetSelector(selector: string | null): string | null {
+    if (selector && !/^[#.]/.test(selector)) {
+      return `#${selector}`;
+    }
+    return selector;
+  }
+
+  getType(): string {
+    const nodeName = this.toggle!.nodeName;
+    const type = this.toggle!.getAttribute('type');
+    const role = this.toggle!.getAttribute('role');
+
+    if (
+      (nodeName === 'INPUT' && (type === 'checkbox' || type === 'radio')) ||
+      role === 'checkbox' ||
+      role === 'switch'
+    ) {
+      return 'checkbox';
+    }
+
+    switch (nodeName) {
+      case 'SELECT':
+        return this.toggle!.hasAttribute('data-boolean-menu')
+          ? 'booleanMenu'
+          : 'select';
+      case 'BUTTON':
+      case 'A':
+        return 'button';
+      default:
+        return 'fieldset';
+    }
+  }
+
+  findTargets(): void {
+    if (this.targetPrefix !== null) {
+      this.#target = queryAll(
+        this.normalizeTargetSelector(
+          this.targetPrefix + (this.getToggleVal() || '')
+        )
+      );
+    } else {
+      this.#target = queryAll(this.targetSelector);
+      this.#reverseTarget = queryAll(this.reverseTargetSelector);
+    }
+  }
+
+  getToggleVal(): boolean | string | null {
+    const toggle = this.toggle as HTMLInputElement & HTMLSelectElement;
+
+    if (this.type === 'checkbox' && this.targetPrefix === null) {
+      if (typeof toggle.checked !== 'undefined') {
+        return toggle.checked;
+      }
+      return this.toggle!.getAttribute('aria-checked') === 'true';
+    }
+
+    if (this.type === 'booleanMenu') {
+      const attr = this.toggle!.getAttribute('data-boolean');
+      if (attr !== null) {
+        return attr === 'true' ? true : attr === 'false' ? false : !!attr;
+      }
+      const val = toggle.value;
+      return !!val && val !== '0';
+    }
+
+    if (this.type === 'fieldset') {
+      const checked =
+        this.toggle!.querySelector<HTMLInputElement>('input:checked');
+      return this.normalizeToggleVal(checked?.value);
+    }
+
+    return this.normalizeToggleVal(toggle.value);
+  }
+
+  normalizeToggleVal(val: string | null | undefined): string | null {
+    if (!val) {
+      return null;
+    }
+    return val.replace(/[^\w]+/g, '-');
+  }
+
+  async onToggleChange(): Promise<void> {
+    // Is this a selectize input that looks like it was just opened?
+    const selectize = jq()?.(this.toggle).data('selectize');
+    if (selectize && (this.toggle as HTMLInputElement).value === '') {
+      await new Promise((resolve) => setTimeout(resolve, 1));
+      if (selectize.isOpen) {
+        return;
+      }
+    }
+
+    if (this.type === 'select' || this.type === 'fieldset') {
+      this.hideTarget(this.#target);
+      this.findTargets();
+      this.showTarget(this.#target);
+    } else {
+      this.findTargets();
+
+      let show: boolean;
+      if (this.type === 'button') {
+        show = this.#buttonIsCollapsed();
+      } else if (this.type === 'checkbox' && this.targetPrefix !== null) {
+        show = (this.toggle as HTMLInputElement).checked;
+      } else {
+        show = !!this.getToggleVal();
+      }
+
+      if (show) {
+        this.showTarget(this.#target);
+        this.hideTarget(this.#reverseTarget);
+      } else {
+        this.hideTarget(this.#target);
+        this.showTarget(this.#reverseTarget);
+      }
+    }
+
+    this.trigger('toggleChange');
+  }
+
+  showTarget(targets: HTMLElement[]): void {
+    if (!targets.length) {
+      return;
+    }
+
+    // Capture heights before unhiding (a hidden target measures 0).
+    const fromHeights = targets.map((target) => target.offsetHeight);
+
+    for (const target of targets) {
+      target.classList.remove('hidden');
+    }
+
+    if (this.type !== 'select' && this.type !== 'fieldset') {
+      if (this.type === 'button') {
+        this.toggle!.classList.remove('collapsed');
+        this.toggle!.classList.add('expanded');
+        if (this.#isButtonToggle()) {
+          this.#updateButtonExpanded();
+        }
+      }
+
+      targets.forEach((target, i) => {
+        if (target.nodeName !== 'SPAN') {
+          this.#animateOpen(target, fromHeights[i] ?? 0);
+        }
+      });
+    }
+
+    // Let grids etc. inside the revealed container lay out.
+    window.dispatchEvent(new Event('resize'));
+  }
+
+  hideTarget(targets: HTMLElement[]): void {
+    if (!targets.length) {
+      return;
+    }
+
+    if (this.type === 'select' || this.type === 'fieldset') {
+      for (const target of targets) {
+        target.classList.add('hidden');
+      }
+      return;
+    }
+
+    if (this.type === 'button') {
+      this.toggle!.classList.remove('expanded');
+      this.toggle!.classList.add('collapsed');
+      if (this.#isButtonToggle()) {
+        this.#updateButtonExpanded();
+      }
+    }
+
+    for (const target of targets) {
+      if (target.classList.contains('hidden')) {
+        continue;
+      }
+      if (target.nodeName === 'SPAN') {
+        target.classList.add('hidden');
+      } else {
+        this.#animateClose(target);
+      }
+    }
+  }
+
+  #animateOpen(target: HTMLElement, from: number): void {
+    target.style.height = 'auto';
+    const to = target.offsetHeight;
+    target.style.height = `${from}px`;
+    target.style.overflow = 'hidden';
+
+    const animation = target.animate(
+      [{height: `${from}px`}, {height: `${to}px`}],
+      {duration: ANIMATION_MS, easing: 'ease'}
+    );
+    animation.onfinish = () => {
+      target.style.height = '';
+      target.style.overflow = '';
+    };
+  }
+
+  #animateClose(target: HTMLElement): void {
+    const from = target.offsetHeight;
+    target.style.overflow = 'hidden';
+
+    const animation = target.animate([{height: `${from}px`}, {height: '0px'}], {
+      duration: ANIMATION_MS,
+      easing: 'ease',
+    });
+    animation.onfinish = () => {
+      target.classList.add('hidden');
+      target.style.height = '';
+      target.style.overflow = '';
+    };
+  }
+
+  #isButtonToggle(): boolean {
+    return this.toggle!.nodeName === 'BUTTON';
+  }
+
+  #buttonIsCollapsed(): boolean {
+    return (
+      this.toggle!.classList.contains('collapsed') ||
+      !this.toggle!.classList.contains('expanded')
+    );
+  }
+
+  #updateButtonExpanded(): void {
+    this.toggle!.setAttribute(
+      'aria-expanded',
+      this.#buttonIsCollapsed() ? 'false' : 'true'
+    );
+  }
+
+  override destroy(): void {
+    if (this.toggle) {
+      fieldToggleData.delete(this.toggle);
+      jq()?.(this.toggle).removeData('fieldtoggle');
+    }
+    super.destroy();
+  }
+}
diff --git a/resources/js/modules/field-toggle/index.ts b/resources/js/modules/field-toggle/index.ts
new file mode 100644
index 00000000000..35704b64985
--- /dev/null
+++ b/resources/js/modules/field-toggle/index.ts
@@ -0,0 +1,12 @@
+import {FieldToggle} from './field-toggle';
+import {fieldToggleData} from './support';
+
+// Assign the legacy `Craft` global so the still-legacy `$.fn.fieldtoggle` jQuery
+// plugin and the `Craft.initUiElements` `.fieldtoggle` sweep (both in the cp
+// bundle), plus `new Craft.FieldToggle(...)` in UI.js / LinkField /
+// ElementDeletionManager, keep working. Plain modern ES class — nothing
+// subclasses it via legacy `.extend()`.
+const craft = (window as any).Craft ?? ((window as any).Craft = {});
+craft.FieldToggle = FieldToggle;
+
+export {FieldToggle, fieldToggleData};
diff --git a/resources/js/modules/field-toggle/support.ts b/resources/js/modules/field-toggle/support.ts
new file mode 100644
index 00000000000..0629b1720b7
--- /dev/null
+++ b/resources/js/modules/field-toggle/support.ts
@@ -0,0 +1,9 @@
+import type {FieldToggle} from './field-toggle';
+
+/**
+ * Instance registry — the jQuery-free mirror of the legacy
+ * `$toggle.data('fieldtoggle')` back-reference, keyed by the toggle element.
+ * Modern consumers resolve the instance from here; the jQuery `.data()` handle is
+ * still set too (see `field-toggle.ts`) for the still-legacy readers.
+ */
+export const fieldToggleData = new WeakMap<Element, FieldToggle>();

From ab31ca20b79551de74e432aadbda05a5c82f2950 Mon Sep 17 00:00:00 2001
From: Brian Hanson <brian@brianhanson.net>
Date: Mon, 27 Jul 2026 16:03:02 -0500
Subject: [PATCH 17/20] Replace legacy Craft.Tooltip with the craft-tooltip
 element
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The craft-tooltip web component (LionTooltip) already covers the legacy tooltip,
and CP.js / CraftElementLabel / CraftGlobalSidebar already emit it directly. The
only remaining Craft.Tooltip consumer was ElementEditor's collaborative-editing
activity tooltips.

- Repoints ElementEditor: each activity button now gets a stable id and a
  sibling <craft-tooltip for="…"> recreated alongside it each poll (dropping the
  reuse/hide bookkeeping and the activityTooltips map); keyboard focus is
  preserved across the re-render via a data-user-id lookup. The message shows on
  hover/focus (Lion) instead of the legacy click-toggletip.
- Deletes Tooltip.js + its import; adds a Craft.Tooltip warn-and-delegate stub to
  the cpcompat bundle (creates a <craft-tooltip> for the trigger, exposes the
  legacy message/$trigger/show/hide/toggle surface) for stray plugin callers.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 packages/craftcms-legacy/cp/src/Craft.js      |   1 -
 .../cp/src/js/ElementEditor.js                |  59 +++---
 packages/craftcms-legacy/cp/src/js/Tooltip.js | 171 ------------------
 .../legacy/web/assets/cpcompat/cp-compat.js   | 101 +++++++++++
 4 files changed, 124 insertions(+), 208 deletions(-)
 delete mode 100644 packages/craftcms-legacy/cp/src/js/Tooltip.js

diff --git a/packages/craftcms-legacy/cp/src/Craft.js b/packages/craftcms-legacy/cp/src/Craft.js
index 29e6ea9579c..cdf0dd66739 100644
--- a/packages/craftcms-legacy/cp/src/Craft.js
+++ b/packages/craftcms-legacy/cp/src/Craft.js
@@ -73,7 +73,6 @@ import './js/StructureDrag.js';
 import './js/TableElementIndexView.js';
 import './js/TagSelectInput.js';
 import './js/ThumbsElementIndexView.js';
-import './js/Tooltip.js';
 import './js/Uploader.js';
 import './js/UserIndex.js';
 
diff --git a/packages/craftcms-legacy/cp/src/js/ElementEditor.js b/packages/craftcms-legacy/cp/src/js/ElementEditor.js
index ae2ace9e501..90c3e3ca34c 100644
--- a/packages/craftcms-legacy/cp/src/js/ElementEditor.js
+++ b/packages/craftcms-legacy/cp/src/js/ElementEditor.js
@@ -56,7 +56,6 @@ Craft.ElementEditor = Garnish.Base.extend(
 
     hiddenTipsStorageKey: 'Craft-' + Craft.systemUid + '.TipField.hiddenTips',
 
-    activityTooltips: null,
     _checkActivityTimeout: null,
 
     get tipDismissBtn() {
@@ -300,8 +299,6 @@ Craft.ElementEditor = Garnish.Base.extend(
         });
       }
 
-      this.activityTooltips = {};
-
       if (this.isFullPage) {
         Craft.ui.setFocusOnErrorSummary(this.$container);
       }
@@ -2371,13 +2368,14 @@ Craft.ElementEditor = Garnish.Base.extend(
               },
             })
               .then(({data}) => {
-                let focusedTooltip = null;
-                if (this.activityTooltips) {
-                  const tooltips = Object.values(this.activityTooltips);
-                  focusedTooltip = tooltips.find(
-                    (t) => t.$trigger[0] === document.activeElement
-                  );
-                }
+                // Preserve keyboard focus across the re-render: which activity
+                // button (by user) is focused right now?
+                const activeEl = document.activeElement;
+                const focusedUserId =
+                  activeEl instanceof HTMLElement &&
+                  activeEl.classList.contains('activity-btn')
+                    ? activeEl.getAttribute('data-user-id')
+                    : null;
 
                 this.$activityContainer
                   .html('')
@@ -2392,14 +2390,16 @@ Craft.ElementEditor = Garnish.Base.extend(
                   const $ul = $('<ul/>').appendTo(this.$activityContainer);
                   for (let i = 0; i < data.activity.length; i++) {
                     const activity = data.activity[i];
+                    const triggerId = `activity-tooltip-${activity.userId}`;
                     const $li = $('<li/>').appendTo($ul);
                     const $button = $('<button/>', {
                       type: 'button',
+                      id: triggerId,
                       class: 'activity-btn',
+                      'data-user-id': activity.userId,
                       'aria-label': Craft.t('app', '{name} active, more info', {
                         name: activity.userName,
                       }),
-                      'aria-expanded': 'false',
                     }).appendTo($li);
                     const $thumb = $(activity.userThumb)
                       .addClass('elementthumb')
@@ -2409,37 +2409,24 @@ Craft.ElementEditor = Garnish.Base.extend(
                     Craft.cp.elementThumbLoader.load($li);
                     $thumb.find('title').remove();
 
+                    // <craft-tooltip> replaces the legacy Craft.Tooltip
+                    // toggletip; it shows the activity message on hover/focus of
+                    // the button. Recreated alongside the button each poll.
+                    $('<craft-tooltip/>')
+                      .attr('for', triggerId)
+                      .text(activity.message)
+                      .appendTo($li);
+
+                    // Maintain keyboard focus across the re-render.
                     if (
-                      typeof this.activityTooltips[activity.userId] ===
-                      'undefined'
+                      focusedUserId !== null &&
+                      activity.userId == focusedUserId
                     ) {
-                      this.activityTooltips[activity.userId] =
-                        new Craft.Tooltip($button, activity.message);
-                    } else {
-                      this.activityTooltips[activity.userId].$trigger = $button;
-                      this.activityTooltips[activity.userId].message =
-                        activity.message;
-
-                      // maintain trigger focus
-                      if (
-                        this.activityTooltips[activity.userId] ===
-                        focusedTooltip
-                      ) {
-                        this.activityTooltips[activity.userId].$trigger.focus();
-                      }
+                      $button.focus();
                     }
                   }
                 }
 
-                // hide any tooltips that are no longer relevant
-                for (const userId of Object.keys(this.activityTooltips)) {
-                  if (
-                    !data.activity.find((activity) => activity.userId == userId)
-                  ) {
-                    this.activityTooltips[userId].hide();
-                  }
-                }
-
                 if (this.isFullPage) {
                   // if the element has been updated upstream, show a notification about it
                   const elementUpdated =
diff --git a/packages/craftcms-legacy/cp/src/js/Tooltip.js b/packages/craftcms-legacy/cp/src/js/Tooltip.js
deleted file mode 100644
index 0555cb9b8e0..00000000000
--- a/packages/craftcms-legacy/cp/src/js/Tooltip.js
+++ /dev/null
@@ -1,171 +0,0 @@
-/** global: Craft */
-/** global: Garnish */
-/** global: $ */
-/** global: jQuery */
-
-/**
- * Tooltip
- */
-Craft.Tooltip = Garnish.Base.extend({
-  _$trigger: null,
-  _message: null,
-  hud: null,
-  $p: null,
-  hoverTimeout: null,
-  triggerHit: false,
-  shownViaHover: false,
-
-  init: function (trigger, message) {
-    this.$trigger = $(trigger);
-    this.message = message;
-
-    if (
-      this.$trigger[0].tagName !== 'BUTTON' &&
-      this.$trigger.attr('role') !== 'button'
-    ) {
-      console.error('Toggletip buttons need to be <button> elements.');
-    }
-
-    // do our own mouseover/mouseout checks since the native ones are unreliable
-    this.addListener(Garnish.$bod, 'mousemove', (ev) => {
-      if (
-        this.triggerHit !==
-        (this.triggerHit = Garnish.hitTest(ev.pageX, ev.pageY, this._$trigger))
-      ) {
-        if (this.triggerHit) {
-          if (!this.showing) {
-            this.hoverTimeout = setTimeout(() => {
-              this.show();
-              this.shownViaHover = true;
-            }, 500);
-          }
-        } else {
-          clearTimeout(this.hoverTimeout);
-          if (this.shownViaHover) {
-            this.hide();
-          }
-        }
-      }
-    });
-  },
-
-  get showing() {
-    return this.hud && this.hud.showing;
-  },
-
-  get $trigger() {
-    return this._$trigger;
-  },
-
-  set $trigger($trigger) {
-    if (this._$trigger) {
-      this.removeAllListeners(this._$trigger);
-    }
-
-    this._$trigger = $trigger;
-
-    this._$trigger.on('blur', () => {
-      this.hide();
-    });
-    this._$trigger.on('activate', () => {
-      // If it's currently shown via hover, keep showing it and remove shownViaHover
-      if (this.showing && this.shownViaHover) {
-        this.shownViaHover = false;
-      } else {
-        this.toggle();
-      }
-
-      this._$trigger.focus();
-    });
-
-    if (this.hud) {
-      this.hud.$trigger = $trigger;
-      if (this.hud.showing) {
-        this.hud.updateSizeAndPosition(true);
-      }
-    }
-  },
-
-  get message() {
-    return this._message;
-  },
-
-  set message(message) {
-    this._message = message;
-
-    if (this.$p) {
-      this.$p.text(message);
-    }
-  },
-
-  show: function (userId) {
-    this.shownViaHover = false;
-
-    if (this.showing) {
-      return;
-    }
-
-    this.$trigger.attr('aria-expanded', 'true');
-
-    if (!this.hud) {
-      this.$p = $('<p/>', {text: this._message});
-      this.hud = new Craft.Tooltip.HUD(this._$trigger, this.$p, {
-        hudClass: 'hud tooltip-hud',
-        withShade: false,
-        onShow: () => {
-          this.onShow();
-        },
-        onHide: () => {
-          this.onHide();
-        },
-      });
-    } else {
-      this.hud.show();
-    }
-  },
-
-  hide: function () {
-    if (!this.showing) {
-      return;
-    }
-
-    this.$trigger.attr('aria-expanded', 'false');
-
-    if (this.hud) {
-      this.hud.hide();
-    }
-  },
-
-  toggle: function () {
-    if (this.showing) {
-      this.hide();
-    } else {
-      this.show();
-    }
-  },
-
-  onShow: function () {
-    clearTimeout(this.hoverTimeout);
-    this.$p.text(this.message);
-  },
-
-  onHide: function () {
-    clearTimeout(this.hoverTimeout);
-    this.$p.text('');
-  },
-});
-
-Craft.Tooltip.HUD = Garnish.HUD.extend({
-  init: function (trigger, bodyContents, settings) {
-    this.base(trigger, bodyContents, settings);
-    this.$hud.attr('role', 'status');
-  },
-
-  showContainer: function () {
-    this.$hud.removeClass('visually-hidden');
-  },
-
-  hideContainer: function () {
-    this.$hud.addClass('visually-hidden');
-  },
-});
diff --git a/yii2-adapter/legacy/web/assets/cpcompat/cp-compat.js b/yii2-adapter/legacy/web/assets/cpcompat/cp-compat.js
index f0f0c3de24d..4e2307f1d5c 100644
--- a/yii2-adapter/legacy/web/assets/cpcompat/cp-compat.js
+++ b/yii2-adapter/legacy/web/assets/cpcompat/cp-compat.js
@@ -26,6 +26,7 @@
     registerPasswordInputClass($);
     registerColorInputClass($);
     registerSlidePickerClass($);
+    registerTooltipClass($);
     autoUpgrade($);
   }
 
@@ -646,6 +647,106 @@
     Craft.SlidePicker = SlidePicker;
   }
 
+  /**
+   * BC replacement for the removed `Craft.Tooltip` class. Warns once, then
+   * delegates to a `<craft-tooltip>` web component pointed at the trigger (by
+   * id), so `new Craft.Tooltip(trigger, message)` keeps showing the message on
+   * hover/focus. Exposes the legacy surface (message/$trigger/show/hide/toggle).
+   */
+  function registerTooltipClass($) {
+    var Craft = window.Craft;
+    if (!Craft || Craft.Tooltip) {
+      return;
+    }
+
+    var warned = false;
+
+    function Tooltip(trigger, message) {
+      if (!(this instanceof Tooltip)) {
+        return new Tooltip(trigger, message);
+      }
+      if (!warned) {
+        warned = true;
+        console.warn(
+          'Craft.Tooltip is deprecated. Emit <craft-tooltip for="…"> directly instead.'
+        );
+      }
+      this.$el = null;
+      this.setTrigger(trigger);
+      this.message = message;
+    }
+
+    Tooltip.prototype = {
+      constructor: Tooltip,
+
+      setTrigger: function (trigger) {
+        var $trigger = $(trigger);
+        this._$trigger = $trigger;
+        var el = $trigger[0];
+        if (!el) {
+          return;
+        }
+        if (!el.id) {
+          el.id = 'tooltip-trigger-' + Math.floor(Math.random() * 1000000);
+        }
+        if (!this.$el) {
+          this.$el = $('<craft-tooltip/>')
+            .attr('for', el.id)
+            .appendTo(document.body);
+        } else {
+          this.$el.attr('for', el.id);
+        }
+      },
+
+      get $trigger() {
+        return this._$trigger;
+      },
+      set $trigger(value) {
+        this.setTrigger(value);
+      },
+
+      get message() {
+        return this._message;
+      },
+      set message(value) {
+        this._message = value;
+        if (this.$el) {
+          this.$el.text(value == null ? '' : value);
+        }
+      },
+
+      get showing() {
+        return !!(this.$el && this.$el[0] && this.$el[0].opened);
+      },
+
+      show: function () {
+        if (this.$el && this.$el[0] && typeof this.$el[0].show === 'function') {
+          this.$el[0].show();
+        }
+      },
+      hide: function () {
+        if (this.$el && this.$el[0] && typeof this.$el[0].hide === 'function') {
+          this.$el[0].hide();
+        }
+      },
+      toggle: function () {
+        if (this.showing) {
+          this.hide();
+        } else {
+          this.show();
+        }
+      },
+      destroy: function () {
+        if (this.$el) {
+          this.$el.remove();
+          this.$el = null;
+        }
+      },
+    };
+
+    Craft.Tooltip = Tooltip;
+  }
+
   /**
    * Preserves the legacy auto-upgrade of third-party `.info`/`.lightswitch`
    * markup: sweep on load and whenever Craft.initUiElements runs on injected

From 703653e67443dd61259ea378c8cf79e97270006e Mon Sep 17 00:00:00 2001
From: Brian Hanson <brian@brianhanson.net>
Date: Mon, 27 Jul 2026 16:40:56 -0500
Subject: [PATCH 18/20] Move the web-component factories from Craft.ui into
 @craftcms/ui/factory
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Phase 1 of relocating the Craft.ui element factories out of the craftcms-legacy
bundle. Adds a new @craftcms/ui/factory layer — the client-side twin of the PHP
src/Cp/Components builders: config-object functions that return the typed custom
element, jQuery-free. Names align to the tags/PHP components.

- New packages/craftcms-ui/src/factory: createSwitch, createSlidePicker,
  createInputColor, createInputPassword (+ a shared slotted-input helper that
  replaces the createTextInput dependency for the two inputs). Exported at
  @craftcms/ui/factory; wired into the build entry list and a vitest project.
- Craft.ui.createLightswitch/createColorInput/createPasswordInput/createSlidePicker
  become thin shims that delegate to the factory and jQuery-wrap the element, so
  legacy + current TS callers of the window.Craft.ui global keep working.
- createIconPicker stays in UI.js for now: craft-icon-picker is an app-level
  Vue-mount element (resources/js/modules), not a @craftcms/ui component.

Note: the legacy webpack bundle now imports @craftcms/ui/factory, so build:ui must
run before build:bundles (build:all already orders this).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 packages/craftcms-legacy/cp/src/js/UI.js      | 242 ++----------------
 packages/craftcms-ui/package.json             |   9 +
 packages/craftcms-ui/scripts/build.js         |   1 +
 .../src/factory/create-input-color.ts         |  52 ++++
 .../src/factory/create-input-password.ts      |  54 ++++
 .../src/factory/create-slide-picker.ts        |  79 ++++++
 .../craftcms-ui/src/factory/create-switch.ts  | 121 +++++++++
 .../craftcms-ui/src/factory/factory.test.ts   |  96 +++++++
 packages/craftcms-ui/src/factory/index.ts     |  13 +
 .../src/factory/internal/slotted-input.ts     |  74 ++++++
 packages/craftcms-ui/vitest.config.ts         |  10 +
 11 files changed, 528 insertions(+), 223 deletions(-)
 create mode 100644 packages/craftcms-ui/src/factory/create-input-color.ts
 create mode 100644 packages/craftcms-ui/src/factory/create-input-password.ts
 create mode 100644 packages/craftcms-ui/src/factory/create-slide-picker.ts
 create mode 100644 packages/craftcms-ui/src/factory/create-switch.ts
 create mode 100644 packages/craftcms-ui/src/factory/factory.test.ts
 create mode 100644 packages/craftcms-ui/src/factory/index.ts
 create mode 100644 packages/craftcms-ui/src/factory/internal/slotted-input.ts

diff --git a/packages/craftcms-legacy/cp/src/js/UI.js b/packages/craftcms-legacy/cp/src/js/UI.js
index 9cfb79fb891..7188a3c520a 100644
--- a/packages/craftcms-legacy/cp/src/js/UI.js
+++ b/packages/craftcms-legacy/cp/src/js/UI.js
@@ -1,5 +1,12 @@
 /** global: Craft */
 /** global: Garnish */
+import {
+  createSwitch as uiCreateSwitch,
+  createInputColor as uiCreateInputColor,
+  createInputPassword as uiCreateInputPassword,
+  createSlidePicker as uiCreateSlidePicker,
+} from '@craftcms/ui/factory';
+
 Craft.ui = {
   createButton: function (config) {
     const $btn = $('<button/>', {
@@ -179,38 +186,9 @@ Craft.ui = {
   },
 
   createPasswordInput(config) {
-    // Builds a <craft-input-password> web component (mirrors the server-rendered
-    // CraftCms\Cms\Cp\Components\InputPassword) — a text input with a built-in
-    // show/hide reveal toggle, replacing the legacy Craft.PasswordInput JS. The
-    // native input lives in the light DOM as the component's form control.
-    var $inner = this.createTextInput(
-      Object.assign({}, config, {
-        type: 'password',
-      })
-    );
-    // createTextInput wraps password inputs in a legacy .passwordwrapper; unwrap
-    // to the native input for the web component's `input` slot.
-    var $input = $inner.is('input') ? $inner : $inner.find('input').first();
-
-    var $el = $('<craft-input-password/>');
-    // Lion pushes these control props onto the slotted input on upgrade, so they
-    // must live on the host too (mirrors InputPassword::hostAttributes()).
-    if (config.name) {
-      $el.attr('name', config.name);
-    }
-    if (config.placeholder) {
-      $el.attr('placeholder', config.placeholder);
-    }
-    if (this.getDisabledValue(config.disabled)) {
-      $el.attr('disabled', '');
-    }
-    if (config.readonly) {
-      $el.attr('readonly', '');
-    }
-
-    $input.attr('slot', 'input').appendTo($el);
-
-    return $el;
+    // Delegates to @craftcms/ui's createInputPassword; jQuery-wraps for legacy
+    // callers.
+    return $(uiCreateInputPassword(config));
   },
 
   createPasswordField(config) {
@@ -667,99 +645,9 @@ Craft.ui = {
   },
 
   createLightswitch: function (config) {
-    // Builds a <craft-switch> web component, mirroring the server-rendered
-    // CraftCms\Cms\Cp\Components\Lightswitch. The switch button and hidden
-    // input live in the light DOM so input namespacing and legacy
-    // Craft.FieldToggle hooks keep working.
-    var value = config.value || '1';
-    var indeterminateValue = config.indeterminateValue || '-';
-    var on = !!config.on;
-    var indeterminate = !on && !!config.indeterminate;
-    var size = config.small ? 'small' : 'medium';
-
-    // Host <craft-switch> (mirrors Lightswitch::hostAttributes()).
-    var $switch = $('<craft-switch/>');
-    if (on) {
-      $switch.attr('checked', '');
-    }
-    if (indeterminate) {
-      $switch.attr('indeterminate', '');
-    }
-    if (config.disabled) {
-      $switch.attr('disabled', '');
-    }
-    if (config.small) {
-      $switch.attr('size', 'small');
-    }
-    if (value !== '1') {
-      $switch.attr('value', value);
-    }
-    if (indeterminateValue !== '-') {
-      $switch.attr('indeterminate-value', indeterminateValue);
-    }
-    if (config.label) {
-      $switch.attr('label', config.label);
-    }
-    if (config.onLabel && config.onLabel !== config.label) {
-      $switch.attr('on-label', config.onLabel);
-    }
-    if (config.offLabel) {
-      $switch.attr('off-label', config.offLabel);
-    }
-
-    // Switch button in the light DOM (mirrors Lightswitch::switchButtonHtml()).
-    var $button = $('<craft-switch-button/>', {
-      slot: 'input',
-      id: config.id,
-      role: 'switch',
-      size: size,
-      'data-tag-name': 'craft-switch-button',
-      'aria-checked': on ? 'true' : indeterminate ? 'mixed' : 'false',
-    });
-    if (on) {
-      $button.attr('checked', '');
-    }
-    if (indeterminate) {
-      $button.attr('indeterminate', '');
-    }
-    if (config.disabled) {
-      $button.attr('disabled', '');
-    }
-    if (config.labelId) {
-      $button.attr('aria-labelledby', config.labelId);
-    }
-    if (config.toggle) {
-      $button.attr('data-target', config.toggle);
-    }
-    if (config.reverseToggle) {
-      $button.attr('data-reverse-target', config.reverseToggle);
-    }
-    if (config.toggle || config.reverseToggle) {
-      $button.addClass('fieldtoggle');
-    }
-    $button.appendTo($switch);
-
-    // Hidden input posting the state (mirrors Lightswitch::hiddenInputHtml()).
-    if (config.name) {
-      $('<input/>', {
-        type: 'hidden',
-        slot: 'hidden-input',
-        name: config.name,
-        value: on ? value : indeterminate ? indeterminateValue : '',
-      })
-        .prop('disabled', !!config.disabled)
-        .appendTo($switch);
-    }
-
-    // Legacy Craft.LightSwitch invoked settings.onChange(on); the element
-    // dispatches a native change event that bubbles to the host.
-    if (config.onChange) {
-      $switch.on('change', function () {
-        config.onChange(this.on);
-      });
-    }
-
-    return $switch;
+    // The element-building logic now lives in @craftcms/ui's createSwitch; this
+    // thin shim wraps the returned element in jQuery for legacy callers.
+    return $(uiCreateSwitch(config));
   },
 
   createLightswitchField: function (config) {
@@ -817,66 +705,9 @@ Craft.ui = {
   },
 
   createSlidePicker: function (config) {
-    // Builds a <craft-slide-picker> web component directly (the same element
-    // Dashboard/field-layout-designer emit), replacing the legacy Craft.SlidePicker
-    // JS. A hidden input carries the value for form posting.
-    config = config || {};
-    const min = typeof config.min === 'function' ? config.min() : config.min ?? 0;
-    const max = typeof config.max === 'function' ? config.max() : config.max ?? 100;
-    const step = typeof config.step !== 'undefined' ? config.step : 10;
-    const value = typeof config.value === 'number' ? config.value : min;
-    const readOnly = !!(config.readOnly || config.disabled || config.static);
-
-    const $el = $('<craft-slide-picker/>');
-    const el = $el[0];
-    el.min = min;
-    el.max = max;
-    el.step = step;
-    el.value = value || 0;
-    el.label = config.label || Craft.t('app', 'Number of columns');
-    el.valueLabel =
-      config.valueLabel ||
-      ((value) => {
-        return `${value}`;
-      });
-    if (config.describedBy) {
-      el.setAttribute('described-by', config.describedBy);
-    }
-    if (readOnly) {
-      el.setAttribute('read-only', '');
-    }
-    if (config.id) {
-      $el.attr('id', config.id);
-    }
-    if (config.class) {
-      $el.addClass(config.class);
-    }
-
-    let $input = null;
-    if (config.name) {
-      $input = $('<input/>', {
-        type: 'hidden',
-        name: config.name,
-        value: el.value,
-      })
-        .prop('disabled', !!config.disabled)
-        .appendTo($el);
-    }
-
-    $el.on('value-change', (event) => {
-      const value = event.originalEvent?.detail?.value;
-      if (typeof value !== 'number') {
-        return;
-      }
-      if ($input) {
-        $input.val(value);
-      }
-      if (config.onChange) {
-        config.onChange(value);
-      }
-    });
-
-    return $el;
+    // Delegates to @craftcms/ui's createSlidePicker; jQuery-wraps for legacy
+    // callers.
+    return $(uiCreateSlidePicker(config));
   },
 
   createSlidePickerField: function (config) {
@@ -896,44 +727,9 @@ Craft.ui = {
   },
 
   createColorInput: function (config) {
-    // Builds a <craft-input-color> web component (mirrors the server-rendered
-    // CraftCms\Cms\Cp\Components\InputColor) — a hex input paired with a native
-    // color-picker swatch, replacing the legacy .color-container markup + the
-    // Craft.ColorInput JS. The native input lives in the light DOM as the
-    // component's form control.
-    const id = config.id || 'color' + Math.floor(Math.random() * 1000000000);
-    const name = config.name || null;
-    const value = config.value || null;
-    const autofocus = config.autofocus && Garnish.isMobileBrowser(true);
-    const disabled = config.disabled || false;
-
-    const $input = this.createTextInput({
-      id: id,
-      name: name,
-      value: Craft.ltrim(value, '#'),
-      size: 10,
-      class: 'color-input',
-      autofocus: autofocus,
-      disabled: disabled,
-      'aria-label': Craft.t('app', 'Color hex value'),
-    });
-
-    const $el = $('<craft-input-color/>');
-    // Lion pushes these control props onto the slotted input on upgrade, so they
-    // must live on the host too (mirrors InputColor::hostAttributes()).
-    if (name) {
-      $el.attr('name', name);
-    }
-    if (this.getDisabledValue(disabled)) {
-      $el.attr('disabled', '');
-    }
-    if (config.presets && config.presets.length) {
-      $el.attr('presets', JSON.stringify(config.presets));
-    }
-
-    $input.attr('slot', 'input').appendTo($el);
-
-    return $el;
+    // Delegates to @craftcms/ui's createInputColor; jQuery-wraps for legacy
+    // callers.
+    return $(uiCreateInputColor(config));
   },
 
   createColorField: function (config) {
diff --git a/packages/craftcms-ui/package.json b/packages/craftcms-ui/package.json
index 67f87bc07e3..e3fee550503 100644
--- a/packages/craftcms-ui/package.json
+++ b/packages/craftcms-ui/package.json
@@ -52,6 +52,15 @@
       "development": "./src/utilities/*.ts",
       "default": "./dist/utilities/*.ts.mjs"
     },
+    "./factory": {
+      "development": "./src/factory/index.ts",
+      "types": "./dist/factory/index.ts.d.mts",
+      "import": "./dist/factory/index.ts.mjs"
+    },
+    "./factory/*": {
+      "development": "./src/factory/*.ts",
+      "default": "./dist/factory/*.ts.mjs"
+    },
     "./styles/*": {
       "development": "./src/styles/*",
       "default": "./dist/styles/*"
diff --git a/packages/craftcms-ui/scripts/build.js b/packages/craftcms-ui/scripts/build.js
index 680cb1f3244..6d7cf59e28d 100755
--- a/packages/craftcms-ui/scripts/build.js
+++ b/packages/craftcms-ui/scripts/build.js
@@ -45,6 +45,7 @@ async function generateBundle(config = {}) {
         ...(await resolveFrom('./src/services/**/!(*.(styles|test)).ts')),
         ...(await resolveFrom('./src/utilities/**/!(*.(styles|test)).ts')),
         ...(await resolveFrom('./src/services/**/!(*.(styles|test)).ts')),
+        ...(await resolveFrom('./src/factory/**/!(*.(styles|test)).ts')),
       },
       minify: !isDeveloping,
       external: ['lit', '@lion/ui'],
diff --git a/packages/craftcms-ui/src/factory/create-input-color.ts b/packages/craftcms-ui/src/factory/create-input-color.ts
new file mode 100644
index 00000000000..ad93a194466
--- /dev/null
+++ b/packages/craftcms-ui/src/factory/create-input-color.ts
@@ -0,0 +1,52 @@
+import type CraftInputColor from '../components/input-color/input-color.js';
+import '../components/input-color/input-color.js';
+import {t} from '@src/utilities/translate';
+import {createSlottedInput} from './internal/slotted-input.js';
+
+export interface InputColorConfig {
+  id?: string;
+  name?: string;
+  value?: string | null;
+  disabled?: boolean;
+  autofocus?: boolean;
+  presets?: string[];
+}
+
+/**
+ * Creates a `<craft-input-color>` — the client-side twin of the PHP `InputColor`
+ * component (a hex input paired with a native color-picker swatch). The value is
+ * stored bare (the component renders its own leading `#`); presets pass through as
+ * a JSON attribute.
+ */
+export function createInputColor(
+  config: InputColorConfig = {}
+): CraftInputColor {
+  const value =
+    config.value != null ? String(config.value).replace(/^#/, '') : null;
+
+  const input = createSlottedInput({
+    id: config.id ?? `color${Math.floor(Math.random() * 1000000000)}`,
+    name: config.name,
+    value,
+    size: 10,
+    disabled: config.disabled,
+    autofocus: config.autofocus,
+    ariaLabel: t('Color hex value'),
+    class: 'color-input',
+  });
+
+  const el = document.createElement('craft-input-color');
+  if (config.name) {
+    el.setAttribute('name', config.name);
+  }
+  if (config.disabled) {
+    el.setAttribute('disabled', '');
+  }
+  if (config.presets && config.presets.length) {
+    el.setAttribute('presets', JSON.stringify(config.presets));
+  }
+
+  el.append(input);
+
+  return el;
+}
diff --git a/packages/craftcms-ui/src/factory/create-input-password.ts b/packages/craftcms-ui/src/factory/create-input-password.ts
new file mode 100644
index 00000000000..02d98699a96
--- /dev/null
+++ b/packages/craftcms-ui/src/factory/create-input-password.ts
@@ -0,0 +1,54 @@
+import type CraftInputPassword from '../components/input-password/input-password.js';
+import '../components/input-password/input-password.js';
+import {createSlottedInput} from './internal/slotted-input.js';
+
+export interface InputPasswordConfig {
+  id?: string;
+  name?: string;
+  value?: string;
+  placeholder?: string;
+  disabled?: boolean;
+  readonly?: boolean;
+  autofocus?: boolean;
+}
+
+/**
+ * Creates a `<craft-input-password>` — the client-side twin of the PHP
+ * `InputPassword` component (a text input with a built-in reveal toggle). The
+ * native input lives in the light DOM as the component's form control; the
+ * Lion-pushed control props are also mirrored on the host.
+ */
+export function createInputPassword(
+  config: InputPasswordConfig = {}
+): CraftInputPassword {
+  const input = createSlottedInput({
+    type: 'password',
+    id: config.id,
+    name: config.name,
+    value: config.value,
+    placeholder: config.placeholder,
+    disabled: config.disabled,
+    readonly: config.readonly,
+    autofocus: config.autofocus,
+    autocomplete: false,
+    class: 'password',
+  });
+
+  const el = document.createElement('craft-input-password');
+  if (config.name) {
+    el.setAttribute('name', config.name);
+  }
+  if (config.placeholder) {
+    el.setAttribute('placeholder', config.placeholder);
+  }
+  if (config.disabled) {
+    el.setAttribute('disabled', '');
+  }
+  if (config.readonly) {
+    el.setAttribute('readonly', '');
+  }
+
+  el.append(input);
+
+  return el;
+}
diff --git a/packages/craftcms-ui/src/factory/create-slide-picker.ts b/packages/craftcms-ui/src/factory/create-slide-picker.ts
new file mode 100644
index 00000000000..7ea10dcd5d3
--- /dev/null
+++ b/packages/craftcms-ui/src/factory/create-slide-picker.ts
@@ -0,0 +1,79 @@
+import type CraftSlidePicker from '../components/slide-picker/slide-picker.js';
+import '../components/slide-picker/slide-picker.js';
+import {t} from '@src/utilities/translate';
+
+export interface SlidePickerConfig {
+  id?: string;
+  class?: string;
+  name?: string;
+  min?: number | (() => number);
+  max?: number | (() => number);
+  step?: number;
+  value?: number;
+  label?: string;
+  valueLabel?: (value: number) => string;
+  describedBy?: string;
+  readOnly?: boolean;
+  disabled?: boolean;
+  static?: boolean;
+  onChange?: (value: number) => void;
+}
+
+/**
+ * Creates a `<craft-slide-picker>` (segmented slider). A hidden input carries the
+ * value for form posting; `onChange` fires on the element's `value-change` event.
+ */
+export function createSlidePicker(
+  config: SlidePickerConfig = {}
+): CraftSlidePicker {
+  const min =
+    typeof config.min === 'function' ? config.min() : (config.min ?? 0);
+  const max =
+    typeof config.max === 'function' ? config.max() : (config.max ?? 100);
+  const step = typeof config.step !== 'undefined' ? config.step : 10;
+  const value = typeof config.value === 'number' ? config.value : min;
+  const readOnly = !!(config.readOnly || config.disabled || config.static);
+
+  const el = document.createElement('craft-slide-picker');
+  el.min = min;
+  el.max = max;
+  el.step = step;
+  el.value = value || 0;
+  el.label = config.label || t('Number of columns');
+  el.valueLabel = config.valueLabel || ((v) => `${v}`);
+  if (config.describedBy) {
+    el.setAttribute('described-by', config.describedBy);
+  }
+  if (readOnly) {
+    el.setAttribute('read-only', '');
+  }
+  if (config.id) {
+    el.id = config.id;
+  }
+  if (config.class) {
+    el.classList.add(...config.class.split(/\s+/).filter(Boolean));
+  }
+
+  let hidden: HTMLInputElement | null = null;
+  if (config.name) {
+    hidden = document.createElement('input');
+    hidden.type = 'hidden';
+    hidden.name = config.name;
+    hidden.setAttribute('value', String(el.value));
+    hidden.disabled = !!config.disabled;
+    el.append(hidden);
+  }
+
+  el.addEventListener('value-change', (event) => {
+    const next = (event as CustomEvent<{value: number}>).detail?.value;
+    if (typeof next !== 'number') {
+      return;
+    }
+    if (hidden) {
+      hidden.value = String(next);
+    }
+    config.onChange?.(next);
+  });
+
+  return el;
+}
diff --git a/packages/craftcms-ui/src/factory/create-switch.ts b/packages/craftcms-ui/src/factory/create-switch.ts
new file mode 100644
index 00000000000..b5b0525112d
--- /dev/null
+++ b/packages/craftcms-ui/src/factory/create-switch.ts
@@ -0,0 +1,121 @@
+import type CraftSwitch from '../components/switch/switch.js';
+import '../components/switch/switch.js';
+
+export interface SwitchConfig {
+  id?: string;
+  name?: string;
+  value?: string;
+  indeterminateValue?: string;
+  on?: boolean;
+  indeterminate?: boolean;
+  disabled?: boolean;
+  small?: boolean;
+  label?: string;
+  labelId?: string;
+  onLabel?: string;
+  offLabel?: string;
+  toggle?: string;
+  reverseToggle?: string;
+  onChange?: (on: boolean) => void;
+}
+
+/**
+ * Creates a `<craft-switch>` — the client-side twin of the PHP
+ * `CraftCms\Cms\Cp\Components\Lightswitch`. The switch button and hidden input
+ * live in the light DOM so input namespacing and legacy Craft.FieldToggle hooks
+ * keep working.
+ */
+export function createSwitch(config: SwitchConfig = {}): CraftSwitch {
+  const value = config.value || '1';
+  const indeterminateValue = config.indeterminateValue || '-';
+  const on = !!config.on;
+  const indeterminate = !on && !!config.indeterminate;
+  const size = config.small ? 'small' : 'medium';
+
+  // Host <craft-switch> (mirrors Lightswitch::hostAttributes()).
+  const el = document.createElement('craft-switch');
+  if (on) {
+    el.setAttribute('checked', '');
+  }
+  if (indeterminate) {
+    el.setAttribute('indeterminate', '');
+  }
+  if (config.disabled) {
+    el.setAttribute('disabled', '');
+  }
+  if (config.small) {
+    el.setAttribute('size', 'small');
+  }
+  if (value !== '1') {
+    el.setAttribute('value', value);
+  }
+  if (indeterminateValue !== '-') {
+    el.setAttribute('indeterminate-value', indeterminateValue);
+  }
+  if (config.label) {
+    el.setAttribute('label', config.label);
+  }
+  if (config.onLabel && config.onLabel !== config.label) {
+    el.setAttribute('on-label', config.onLabel);
+  }
+  if (config.offLabel) {
+    el.setAttribute('off-label', config.offLabel);
+  }
+
+  // Switch button in the light DOM (mirrors Lightswitch::switchButtonHtml()).
+  const button = document.createElement('craft-switch-button');
+  button.slot = 'input';
+  if (config.id) {
+    button.id = config.id;
+  }
+  button.setAttribute('role', 'switch');
+  button.setAttribute('size', size);
+  button.setAttribute('data-tag-name', 'craft-switch-button');
+  button.setAttribute(
+    'aria-checked',
+    on ? 'true' : indeterminate ? 'mixed' : 'false'
+  );
+  if (on) {
+    button.setAttribute('checked', '');
+  }
+  if (indeterminate) {
+    button.setAttribute('indeterminate', '');
+  }
+  if (config.disabled) {
+    button.setAttribute('disabled', '');
+  }
+  if (config.labelId) {
+    button.setAttribute('aria-labelledby', config.labelId);
+  }
+  if (config.toggle) {
+    button.setAttribute('data-target', config.toggle);
+  }
+  if (config.reverseToggle) {
+    button.setAttribute('data-reverse-target', config.reverseToggle);
+  }
+  if (config.toggle || config.reverseToggle) {
+    button.classList.add('fieldtoggle');
+  }
+  el.append(button);
+
+  // Hidden input posting the state (mirrors Lightswitch::hiddenInputHtml()).
+  if (config.name) {
+    const hidden = document.createElement('input');
+    hidden.type = 'hidden';
+    hidden.slot = 'hidden-input';
+    hidden.name = config.name;
+    hidden.setAttribute(
+      'value',
+      on ? value : indeterminate ? indeterminateValue : ''
+    );
+    hidden.disabled = !!config.disabled;
+    el.append(hidden);
+  }
+
+  // The element dispatches a native change event that bubbles to the host.
+  if (config.onChange) {
+    el.addEventListener('change', () => config.onChange!(el.on));
+  }
+
+  return el;
+}
diff --git a/packages/craftcms-ui/src/factory/factory.test.ts b/packages/craftcms-ui/src/factory/factory.test.ts
new file mode 100644
index 00000000000..8c0ab4c704f
--- /dev/null
+++ b/packages/craftcms-ui/src/factory/factory.test.ts
@@ -0,0 +1,96 @@
+import {beforeEach, describe, expect, it} from 'vitest';
+import {
+  createSwitch,
+  createSlidePicker,
+  createInputColor,
+  createInputPassword,
+} from './index.js';
+
+beforeEach(() => {
+  document.body.innerHTML = '';
+});
+
+describe('createSwitch', () => {
+  it('builds a craft-switch with the button and hidden input', () => {
+    const el = createSwitch({name: 'enabled', on: true, id: 'sw'});
+
+    expect(el.tagName.toLowerCase()).toBe('craft-switch');
+    expect(el.hasAttribute('checked')).toBe(true);
+
+    const button = el.querySelector('craft-switch-button[slot="input"]');
+    expect(button?.id).toBe('sw');
+    expect(button?.getAttribute('aria-checked')).toBe('true');
+
+    const hidden = el.querySelector<HTMLInputElement>(
+      'input[slot="hidden-input"]'
+    );
+    expect(hidden?.name).toBe('enabled');
+    expect(hidden?.getAttribute('value')).toBe('1');
+  });
+
+  it('adds the fieldtoggle wiring when a toggle target is given', () => {
+    const el = createSwitch({toggle: 'target'});
+    const button = el.querySelector('craft-switch-button');
+    expect(button?.classList.contains('fieldtoggle')).toBe(true);
+    expect(button?.getAttribute('data-target')).toBe('target');
+  });
+});
+
+describe('createSlidePicker', () => {
+  it('sets the numeric props and a form-posting hidden input', () => {
+    const el = createSlidePicker({
+      min: 0,
+      max: 100,
+      step: 25,
+      value: 50,
+      name: 'cols',
+    });
+
+    expect(el.tagName.toLowerCase()).toBe('craft-slide-picker');
+    expect(el.min).toBe(0);
+    expect(el.max).toBe(100);
+    expect(el.step).toBe(25);
+    expect(el.value).toBe(50);
+
+    const hidden = el.querySelector<HTMLInputElement>('input[type="hidden"]');
+    expect(hidden?.name).toBe('cols');
+  });
+
+  it('resolves function min/max', () => {
+    const el = createSlidePicker({min: () => 10, max: () => 90, step: 20});
+    expect(el.min).toBe(10);
+    expect(el.max).toBe(90);
+  });
+});
+
+describe('createInputColor', () => {
+  it('strips the # and slots a hex input, passing presets through', () => {
+    const el = createInputColor({
+      name: 'bg',
+      value: '#7ab55c',
+      presets: ['#ffffff'],
+    });
+
+    expect(el.tagName.toLowerCase()).toBe('craft-input-color');
+    expect(el.getAttribute('name')).toBe('bg');
+    expect(el.getAttribute('presets')).toContain('ffffff');
+
+    const input = el.querySelector<HTMLInputElement>('input[slot="input"]');
+    expect(input?.getAttribute('value')).toBe('7ab55c');
+    expect(input?.classList.contains('color-input')).toBe(true);
+  });
+});
+
+describe('createInputPassword', () => {
+  it('slots a password input and mirrors control props on the host', () => {
+    const el = createInputPassword({name: 'pw', disabled: true});
+
+    expect(el.tagName.toLowerCase()).toBe('craft-input-password');
+    expect(el.getAttribute('name')).toBe('pw');
+    expect(el.hasAttribute('disabled')).toBe(true);
+
+    const input = el.querySelector<HTMLInputElement>('input[slot="input"]');
+    expect(input?.type).toBe('password');
+    expect(input?.disabled).toBe(true);
+  });
+});
diff --git a/packages/craftcms-ui/src/factory/index.ts b/packages/craftcms-ui/src/factory/index.ts
new file mode 100644
index 00000000000..e429e50df2e
--- /dev/null
+++ b/packages/craftcms-ui/src/factory/index.ts
@@ -0,0 +1,13 @@
+// Client-side factory functions for the CP web components — the JS twin of the
+// PHP `src/Cp/Components/*` builders. Each returns the (typed) custom element for
+// a config object, jQuery-free. Names align to the element tags / PHP components.
+export {createSwitch, type SwitchConfig} from './create-switch.js';
+export {
+  createSlidePicker,
+  type SlidePickerConfig,
+} from './create-slide-picker.js';
+export {
+  createInputPassword,
+  type InputPasswordConfig,
+} from './create-input-password.js';
+export {createInputColor, type InputColorConfig} from './create-input-color.js';
diff --git a/packages/craftcms-ui/src/factory/internal/slotted-input.ts b/packages/craftcms-ui/src/factory/internal/slotted-input.ts
new file mode 100644
index 00000000000..4ff02c7ffe9
--- /dev/null
+++ b/packages/craftcms-ui/src/factory/internal/slotted-input.ts
@@ -0,0 +1,74 @@
+export interface SlottedInputConfig {
+  type?: string;
+  id?: string;
+  name?: string | null;
+  value?: string | number | null;
+  size?: number;
+  disabled?: boolean;
+  readonly?: boolean;
+  placeholder?: string;
+  autocomplete?: boolean | string;
+  autofocus?: boolean;
+  ariaLabel?: string;
+  class?: string | string[];
+}
+
+/**
+ * Builds the native `<input slot="input">` that a Lion-based control (craft-input,
+ * craft-input-password, craft-input-color) adopts as its form control. The
+ * jQuery-free equivalent of the subset of `Craft.ui.createTextInput` these
+ * factories relied on.
+ */
+export function createSlottedInput(
+  config: SlottedInputConfig
+): HTMLInputElement {
+  const input = document.createElement('input');
+  input.slot = 'input';
+  input.type = config.type ?? 'text';
+
+  const classes = ['text'];
+  if (config.size === undefined) {
+    classes.push('fullwidth');
+  }
+  if (Array.isArray(config.class)) {
+    classes.push(...config.class);
+  } else if (config.class) {
+    classes.push(config.class);
+  }
+  input.className = classes.join(' ');
+
+  if (config.id) {
+    input.id = config.id;
+  }
+  if (config.name) {
+    input.name = config.name;
+  }
+  if (config.value !== undefined && config.value !== null) {
+    input.setAttribute('value', String(config.value));
+  }
+  if (config.size !== undefined) {
+    input.setAttribute('size', String(config.size));
+  }
+  if (config.placeholder) {
+    input.placeholder = config.placeholder;
+  }
+  if (config.disabled) {
+    input.disabled = true;
+  }
+  if (config.readonly) {
+    input.readOnly = true;
+  }
+  if (config.autofocus) {
+    input.autofocus = true;
+  }
+  if (typeof config.autocomplete === 'string') {
+    input.setAttribute('autocomplete', config.autocomplete);
+  } else if (config.autocomplete === false) {
+    input.setAttribute('autocomplete', 'off');
+  }
+  if (config.ariaLabel) {
+    input.setAttribute('aria-label', config.ariaLabel);
+  }
+
+  return input;
+}
diff --git a/packages/craftcms-ui/vitest.config.ts b/packages/craftcms-ui/vitest.config.ts
index ff016216e31..bba04e40001 100644
--- a/packages/craftcms-ui/vitest.config.ts
+++ b/packages/craftcms-ui/vitest.config.ts
@@ -42,6 +42,16 @@ export default defineConfig({
           environment: 'happy-dom',
         },
       },
+      {
+        resolve: {
+          tsconfigPaths: true,
+        },
+        test: {
+          name: 'factory',
+          root: './src/factory',
+          environment: 'happy-dom',
+        },
+      },
       {
         extends: true,
         plugins: [

From 41182b43a9df233546b19617e8a3861f408801eb Mon Sep 17 00:00:00 2001
From: Brian Hanson <brian@brianhanson.net>
Date: Tue, 28 Jul 2026 09:25:33 -0500
Subject: [PATCH 19/20] Finishing up

---
 CHANGELOG-WIP.md                            | 5 +++++
 resources/js/common/components/UserMenu.vue | 6 +++++-
 resources/js/cp.ts                          | 1 -
 3 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG-WIP.md b/CHANGELOG-WIP.md
index 30b606e8b03..ff128d63a96 100644
--- a/CHANGELOG-WIP.md
+++ b/CHANGELOG-WIP.md
@@ -415,6 +415,11 @@ Craft 6 now uses [Laravel's authorization system](https://laravel.com/docs/12.x/
 
 - Deprecated `craft\events\RegisterConditionRulesEvent`. `CraftCms\Cms\Condition\Events\ConditionRulesResolving` should be used instead.
 
+### Control Panel
+
+- Removed the `Craft.Accordion` and `Craft.EnvVarGenerator` control panel JavaScript classes. ([#XXXXX](https://github.com/craftcms/cms/pull/XXXXX))
+- Deprecated the `Craft.LightSwitch`, `Craft.InfoIcon`, `Craft.ColorInput`, `Craft.PasswordInput`, `Craft.IconPicker`, `Craft.SlidePicker`, `Craft.SlideRuleInput`, and `Craft.Tooltip` control panel JavaScript classes, along with the `.infoicon` jQuery plugin. The corresponding `@craftcms/ui` web components should be used instead. 
+
 ### Drafts
 
 - Deprecated `craft\services\Drafts`. `CraftCms\Cms\Element\Drafts` should be used instead.
diff --git a/resources/js/common/components/UserMenu.vue b/resources/js/common/components/UserMenu.vue
index 8adbd6f3505..c242dc4bc4a 100644
--- a/resources/js/common/components/UserMenu.vue
+++ b/resources/js/common/components/UserMenu.vue
@@ -52,7 +52,11 @@
 </script>
 
 <template>
-  <form :action="LoginController.logout['/{cpTrigger?}/logout']().url" method="post" ref="logoutForm">
+  <form
+    :action="LoginController.logout().url"
+    method="post"
+    ref="logoutForm"
+  >
     <input
       v-if="csrfTokenName && csrfTokenValue"
       type="hidden"
diff --git a/resources/js/cp.ts b/resources/js/cp.ts
index 4fcce830b55..71d4e0aea22 100644
--- a/resources/js/cp.ts
+++ b/resources/js/cp.ts
@@ -24,4 +24,3 @@ import './modules/slideout';
 import './modules/auth-method-setup';
 
 window.Cp = Cp as unknown as typeof window.Cp;
-

From 82c035fa0ae340b40a48f6a5e297e2983179a273 Mon Sep 17 00:00:00 2001
From: Brian Hanson <brian@brianhanson.net>
Date: Tue, 28 Jul 2026 09:54:16 -0500
Subject: [PATCH 20/20] Remove json_encode

---
 src/Cp/Components/InputColor.php | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/Cp/Components/InputColor.php b/src/Cp/Components/InputColor.php
index da73594e4dd..550b32feecf 100644
--- a/src/Cp/Components/InputColor.php
+++ b/src/Cp/Components/InputColor.php
@@ -5,6 +5,7 @@
 namespace CraftCms\Cms\Cp\Components;
 
 use Closure;
+use CraftCms\Cms\Support\Json;
 
 /**
  * PHP counterpart to the `<craft-input-color>` web component — a hex text input
@@ -60,7 +61,7 @@ protected function hostAttributes(): array
         }
 
         $presets = array_values(array_filter((array) $this->evaluate($this->presets)));
-        $attributes['presets'] = $presets !== [] ? json_encode($presets) : null;
+        $attributes['presets'] = $presets !== [] ? Json::encode($presets) : null;
 
         return $attributes;
     }