Focus input when added via add button

docs/docs/palettes/app/tweak.js

@@ -887,7 +887,7 @@ let paletteAppSpec = {
       }
     },
 
-    addColor(value) {
+    addColor(value, options) {
       if (!value) {
         if (this.seedColors.length === 0) {
           value = firstSeedColor;
@@ -917,6 +917,10 @@ let paletteAppSpec = {
         value = { value: value + '', color: value };
       }
 
+      if (options) {
+        Object.assign(value, options);
+      }
+
       value.uid ??= this.maxSeedUid++;
       this.seedColors.push(value);
     },

docs/docs/palettes/app/vue-components/color-input.js

@@ -124,6 +124,14 @@ export default {
     // Non-reactive variables to expose
     Object.assign(this, { ROLES, allHues });
   },
+  async mounted() {
+    if (this.modelValue.editImmediately) {
+      let input = this.$refs.input;
+      await input.updateComplete;
+      input.focus();
+      input.select();
+    }
+  },
   computed: {
     inputLCH() {
       return this.inputColor?.oklch;

docs/docs/palettes/custom.njk

@@ -18,7 +18,7 @@ status: experimental
       @update:roles="roles => setColorRole(i, roles)"
       @delete="deleteColor(i)"></color-input>
   </template>
-  <wa-button class="add-button" appearance="outlined" @click="addColor()">
+  <wa-button class="add-button" appearance="outlined" @click="addColor(undefined, {editImmediately: true})">
     <wa-icon slot="prefix" name="plus" variant="regular"></wa-icon>
     <span v-content="step > 0 ? 'Add color' : 'New palette'">New palette</span>
   </wa-button>