[6.x] Port legacy form inputs to @craftcms/ui web components

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.

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
@@ -31,7 +30,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';
@@ -44,52 +42,38 @@ 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';
 import './js/DataTableSorter.js';
 import './js/DeleteUserModal.js';
-import './js/DynamicGenerator.js';
 import './js/ElementActionTrigger.js';
 import './js/ElementDeletionManager.js';
 import './js/ElementEditor.js';
 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';
-import './js/FieldToggle.js';
 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';
 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';
 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';
 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

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 {

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;