[6.x] Customize sources modal

.storybook/main.ts

@@ -21,6 +21,12 @@ const config: StorybookConfig = {
     '../resources/js/**/*.mdx',
     '../resources/js/**/*.stories.@(js|jsx|mjs|ts|tsx)',
   ],
+  // `craft-icon` fetches `/vendor/craft/icons/<family>/<name>.svg`, which in the
+  // CP is a symlink to `cms-assets/resources`. Without this every icon in every
+  // story 404s and renders nothing.
+  staticDirs: [
+    {from: '../cms-assets/resources/icons', to: '/vendor/craft/icons'},
+  ],
   addons: [
     getAbsolutePath('@storybook/addon-themes'),
     getAbsolutePath('@storybook/addon-docs'),

packages/craftcms-legacy/cp/src/css/craft.scss

@@ -5,7 +5,6 @@
 @import 'hud';
 @import 'icon-picker';
 @import 'login';
-@import 'customize-sources';
 @import 'main';
 @import 'cp';
 @import 'range';

packages/craftcms-legacy/cp/src/js/BaseElementIndex.js

@@ -1497,19 +1497,8 @@ Craft.BaseElementIndex = Garnish.Base.extend(
     },
 
     getSourceActions: function () {
-      let actions = [];
-
-      if (Craft.userIsAdmin && Craft.allowAdminChanges) {
-        actions.push({
-          label: Craft.t('app', 'Customize sources'),
-          administrative: true,
-          onSelect: () => {
-            this.createCustomizeSourcesModal();
-          },
-        });
-      }
-
-      return actions;
+      // "Customize sources" now lives on the Inertia/Vue element index.
+      return [];
     },
 
     updateViewMenu: function () {
@@ -2987,19 +2976,6 @@ Craft.BaseElementIndex = Garnish.Base.extend(
       this.$updateSpinner.remove();
     },
 
-    createCustomizeSourcesModal: function () {
-      // Recreate it each time
-      var modal = new Craft.CustomizeSourcesModal(this, {
-        hideOnEsc: false,
-        hideOnShadeClick: false,
-        onFadeOut: function () {
-          modal.destroy();
-        },
-      });
-
-      return modal;
-    },
-
     disable: function () {
       if (this.sourceNav) {
         this.sourceNav.disable();

packages/craftcms-ui/src/components/action-item/action-item.styles.ts

@@ -29,7 +29,7 @@ export default css`
   }
 
   @media (hover: hover) {
-    :host(:hover) .action-item:not(:disabled) {
+    :host(:hover:not([active])) .action-item:not(:disabled) {
       background-color: var(
         --c-color-fill-quiet,
         var(--c-color-neutral-fill-quiet)
@@ -91,7 +91,7 @@ export default css`
   }
 
   @media (hover: hover) {
-    :host(:hover[variant='danger']) .action-item:not(:disabled) {
+    :host(:hover[variant='danger']:not([active])) .action-item:not(:disabled) {
       background-color: var(--c-color-fill-quiet);
       color: var(--c-color-on-quiet);
     }

packages/craftcms-ui/src/components/action-item/action-item.ts

@@ -42,7 +42,7 @@ export default class CraftActionItem extends LitElement {
   @property({type: Boolean}) disabled: boolean = false;
   @property({reflect: true}) variant: VariantValue = Variant.Neutral;
   @property({type: Boolean}) checked: boolean = false;
-  @property({type: Boolean}) active: boolean = false;
+  @property({type: Boolean, reflect: true}) active: boolean = false;
   @property() type: 'button' | 'checkbox' = 'button';
   @property({type: Object}) action: BaseAction | string | null = null;
   @property({type: Object}) feedback: ActionFeedback | null = null;
@@ -193,9 +193,11 @@ export default class CraftActionItem extends LitElement {
 
   renderPrefix() {
     const hasIcon = !!this.querySelector('[slot="icon"]') || !!this.icon;
+    const hasPrefix = !!this.querySelector('[slot="prefix"]');
 
     return html`
       ${this.type === 'checkbox' ? this.renderCheckbox() : nothing}
+      ${hasPrefix ? html`<slot name="prefix" part="prefix"></slot>` : nothing}
       ${hasIcon
         ? html`<div class="action-item__icon">${this.renderIcon()}</div>`
         : nothing}

packages/craftcms-ui/src/components/field-group/field-group.ts

@@ -7,14 +7,37 @@ export default class CraftFieldGroup extends LitElement {
         craft-field-group {
           display: grid;
           grid-template-columns: repeat(12, minmax(0, 1fr));
-          gap: var(--gap, var(--c-spacing-lg));
+          gap: var(--gap, var(--c-spacing-lg)) 0;
           container-type: inline-size;
         }
 
         craft-field-group > * {
           grid-column: 1 / -1;
           min-width: 0;
         }
+
+        @container (min-width: 30rem){
+          craft-field-group > .width-25 {
+            grid-column: span 3;
+          }
+
+          craft-field-group > .width-33 {
+            grid-column: span 4;
+          }
+
+          craft-field-group > .width-50 {
+            grid-column: span 6;
+          }
+
+          craft-field-group > .width-66 {
+            grid-column: span 6;
+          }
+
+          craft-field-group > .width-75 {
+            grid-column: span 6;
+          }
+
+        }
 
         @container (min-width: 50rem) {
           craft-field-group > .width-25 {